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

.under_title_inner h2 {
     width: 35vw;
     margin: 0 auto;
     padding: 0 var(--side-gutter);

}

.about {
     width: 1000px;
     margin: 0 auto;
     margin-bottom: 160px;
}

.about h3 {
     color: var(--text-color);
     font-size: var(--size-xxl);
     text-align: center;
     margin-top: var(--contents-gutter);
     padding-bottom: var(--contents-gutter-sp);
}

.about .about_text {
     text-align: center;
     margin-bottom: var(--contents-gutter);
}

.about .gift_text {
     text-align: center;
     margin-bottom: var(--contents-gutter-sp);
}

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

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

.about_img figcaption {
     text-align: center;
}

.about_img figure {
     position: relative;
     margin: 0 auto;
}

.about_img figure a {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

.about_img figure a:hover {
     background-color: rgba(255, 255, 255, 0.5);
}

@media screen and (max-width:959px) {
     .about {
          width: 400px;
          background-color: #fff;
          margin: auto;
     }

     .about_text {
          font-size: var(--size-xl);
          padding-bottom: var(--contents-gutter-sp);
     }

     .about_img {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: calc(var(--gutter-base)*2);
          max-width: 800px;
          margin-left: auto;
          margin-right: auto;
          overflow: hidden;
     }
}


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;
     }
}