@charset "UTF-8";
/*
SP   ～519px
tab  520px～959px
pc   960px～
*/

.sub_title h2{
     width: 35vw;
     margin: 0 auto;
     padding: 0 var(--side-gutter);
     color: var(--text-color);     
}
.ceremonies_inner{
     text-align: center;
}

.ceremonies h3{
     color: var(--text-color);
     font-size: var(--size-xxxl);
     margin: var(--contents-gutter);
}

.ceremonies_text{  
     text-align: center;
     font-size: var(--size-xl);
     margin-top: var(--contents-gutter-sp);
}

.ceremonies_funeral h5{
     color: var(--text-color);
     font-size: var(--size-xxl);
     text-align: center;
     padding: var(--contents-gutter);    
}

.ceremonies_funeral{
     align-items: center;
}

.ceremonies_img {
     display: grid;
     max-width: 700px;
     /* grid-template-columns: repeat(2,1fr);
 ←サイズに合わせてサイズは自動、基本は1rf　ただし最少は300px*/
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: calc(var(--gutter-base)*2);
     margin-left: auto;
     margin-right: auto;
     overflow: hidden;
}

.ceremonies_img picture {
     margin-bottom: var(--gutter-base);
     display: block;
}

.ceremonies_img picture {
          position: relative;
          overflow: hidden;
     }
     
.ceremonies_img picture::before,
.ceremonies_img picture::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          transition: 0.3s;
     }
     
.ceremonies_img picture::before{
          background-color: var(--main-color);
     }
     
.ceremonies_img picture::after {
      background-color: #fff;
     }
     
.ceremonies_img picture:first-child:before{
     transition-delay: 0.2s;
     }
     
.ceremonies_img picture:last-child:before {
     transition-delay: 0.3s;
     }
     
.ceremonies_img picture:last-child:after {
     transition-delay: 0.2s;
     }
     
.ceremonies_img.on picture::before,
.ceremonies_img.on picture::after {
     left: 100%;
     }
 
     .wedding h4{
          font-size: var(--size-xxl);
          text-align: center;
          padding: var(--contents-gutter);      
     }
     

@media screen and (max-width:959px) {
.ceremonies{
     width: 400px;
     background-color: #fff;
     margin: auto;
     }
.ceremonies_text{
     font-size: var(--size-xl);
     padding-bottom: var(--contents-gutter-sp);
     }
.ceremonies_img {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: calc(var(--gutter-base)*2);
     max-width: 500px;
     margin-left: auto;
     margin-right: auto;
     overflow: hidden;
     }   
.ceremonies,.wedding{
     margin-bottom: var(--section-gutter-sp);
   }  
     }


footer {
     padding-top: var(--footer-gutter);
     margin-top: 240px;
     background-color: var(--main-color);
     color: var(--text-color);
     padding-bottom: var(--footer-gutter);
     }
     
footer img {
     max-width: 260px;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: calc(var(--gutter-base)*3);
     }
     
footer address {
     text-align: center;
     font-style: normal;
     margin-bottom: calc(var(--gutter-base)*3);
     }
     
footer small {
     display: block;
     text-align: center;
     }
     
@media screen and (max-width:959px) {


     
footer {
     padding-top: var(--footer-gutter-sp);
}
     
footer img {
     width: 50%;
     margin-bottom: calc(var(--gutter-base-sp)*3);
     }
     
footer .footer_inner {
     background-color: var(--main-color);
     padding: calc(var(--gutter-base-sp)*3) 0;
     }
     }