@charset "UTF-8";
 /* ========================================
   @media screen and (min-width: 768px), print
 ======================================== */
@media screen and (min-width: 768px),print {
  /* fv
  -------------------------------------*/
  .fv {
    background: url(../images/design/fv.jpg) no-repeat center center/cover;
    max-width: 1920px;
    width: 100%;
    margin-inline: auto;
    text-align: center;
    margin-top: 2.2rem;
    padding: 11rem 0 14.125rem;
    position: relative;
  }
  .fv h2 {
    position: relative;
    display: inline-block;
    z-index: 3;
  }
  .fv h2::before {
    content: "";
    position: absolute;
    top: -6.1rem;
    left: -5.7rem;
    width: 8.125rem;
    height: 8.125rem;
    background: url(../images/design/fv-num.svg) no-repeat;
    background-size: contain;
  }
  .fv h2 img {
    width: 6.625rem;
  }
  .fv .enttl {
    position: absolute;
    bottom: -0.15em;
    left: 50%;
    transform: translateX(-50%);
  }
  .fv .enttl img {width: 38.313rem;}

  /* section-wrap
  -------------------------------------*/
  .section-wrap {
    background: transparent linear-gradient(180deg, #EBE5D5 0%, #F4F1E966 100%) 0% 0% no-repeat padding-box;
    padding: 3.9rem 0 18.4rem;
  }
  .section-wrap .lead {
    font-size: 24px;
    line-height: 2.0833333333;
    letter-spacing: 0.075em;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.6rem;
  }
  .section-wrap .lead02 {
    text-align: center;
    margin-bottom: 7rem;
  }
  .section-wrap .lead02 img {
    width: 38.125rem;
    margin: 0 1rem 0 0;
  }
  
    /* point共通
  -------------------------------------*/
  .point {
    margin-bottom: 7.2rem;
  }
  .point .inner {
    width: min(95%, 1600px);
    margin-inline: auto;
  }
  .point .inner .enttl {
    text-align: center;
    margin-bottom: 1.6rem;
  }
  .point .inner h2 {
    text-align: center;
    margin-bottom: 3.4rem;
    position: relative;
    z-index: 2;
  }
  .point .inBox {
    display: grid;
    grid-template-columns: 50% 34.875%;
    margin-bottom: 3.125rem;
    gap: 2.6rem;
  }
  .point .inBox .photo {
    position: relative;
    margin-top: -5.5rem;
  }
  .point .inBox .photo img {
    width: 100%;
    height: auto;
  }
  .point .inBox .content .txt {
    font-size: 16px;
    line-height: 2.125;
    letter-spacing: 0.05em;
    font-weight: 500;
    margin: 0 0.3rem 2.2rem 0.5rem;
  }
  .point .point-box h3 {
    text-align: center;
  }
  .point .point-box .inner {
    background: #fff;
    border: 1px solid #a78f43;
    padding: 1.4rem 1.75rem 1.7rem;
    grid-template-columns: 45.0199% 48.207171%;
    gap: 2rem;
    width: 100%;
    display: grid;
  }
  .point .point-box .inner .img {
    margin-top: 0.6rem;
  }
  .point .point-box .inner .img img {
    width: 100%;
    height: auto;
  }
  .point .point-box .inner .txt {
    font-size: 16px;
    line-height: 1.875;
    letter-spacing: 0.05em;
    font-weight: 500;
    margin: 0 0 0.625rem! important;
  }
  .point .point-box .inner .txt span {
    font-weight: 700;
  }
  .point .photo-frame {
    margin-bottom: 2.15rem;
    width: min(95%, 1400px);
    margin-inline: auto;
  }
  .point .photo-frame img {
    width: 100%;
    height: auto;
  }
  .point .btn {
    text-align: center;
  }

  /* point02 */
  .point02 {
    margin-bottom: 8.1rem;
  }
  .point02 .inBox {
    display: grid;
    grid-template-columns: 47.375% 50%;
    margin-bottom: 3.125rem;
    gap: 2.6rem;
  }
  .point02 .inBox .content {
    width: min(95%, 558px);
    margin-left: auto;
  }
  .point02 .inBox .photo {
    margin-top: -5.3rem;
  }
  .point02 .inBox .content .txt {
    margin: 0 0 2.2rem;
  }

  /* point03 */
  .point03 .inBox .content .txt{
    margin: 0 0rem 2.2rem 0.2rem;
  }



  /* point04 */
  .point04 {
    margin-bottom: 8.1rem;
  }
  .point04 .inBox {
    display: grid;
    grid-template-columns: 47.375% 50%;
    margin-bottom: 3.125rem;
    gap: 2.6rem;
  }
  .point04 .inBox .content {
    width: min(95%, 558px);
    margin-left: auto;
  }
  .point04 .inBox .photo {
    margin-top: -5.3rem;
  }
  .point04 .inBox .content .txt {
    margin: 0 0 2.2rem;
  }


  /* link
  -------------------------------------*/
  .link {
    background: #436788;
    padding: 0 0 1em;
    height: 20.6rem;
    max-width: 1920px;
    width: 100%;
    margin-inline: auto;
  }
  .link .link-box {
    background: #FFFFFF;
    top: -13.2rem;
    padding: 3.2rem 3.8rem 3rem;
    width: min(95%, 1100px);
    margin-inline: auto;
    position: relative;
  }
  .link .link-box .logo {
    text-align: center;
    margin-bottom: 1.9rem;
    width: 241px;
    margin-inline: auto;
  }
  .link .link-box .list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
  }
  .link .link-box img {
    width: 100%;
    height: auto;
  }
}


/* ========================================
@media screen and (min-width:768px) and (max-width:1280px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1280px) {
  .section-wrap .lead {
    font-size: clamp(1.125rem, 0.563rem + 1.17vw, 1.5rem);
  }
  .point .inner h2 img {
    width:64.063vw;
  }
  .point .inBox .content .txt {
    font-size: clamp(0.875rem, 0.688rem + 0.39vw, 1rem);
  }
}


/* ========================================
@media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
  .main-title {
    margin-bottom: 0;
  }
    /* fv
  -------------------------------------*/
  .fv {
    background: url(../images/design/fv_sp.jpg) no-repeat center center/cover;
    max-width: 100vw;
    width: 100%;
    margin-inline: auto;
    text-align: center;
    padding: 16vw 0 14.3vw;
    position: relative;
  }
  .fv h2 {
    margin-bottom: 6vw;
    position: relative;
    display: inline-block;
    z-index: 3;
  }
  .fv h2::before {
    content: "";
    position: absolute;
    top: -10vw;
    left: -10vw;
    width: 14.495vw;
    height: 14.495vw;
    background: url(../images/design/fv-num_sp.svg) no-repeat;
    background-size: contain;
  }
  .fv h2 img {
    width: 20.05vw;
  }
  .fv .enttl {
    position: absolute;
    bottom: -0.2vw;
    left: 50%;
    transform: translateX(-50%);
    width: 46.86vw;
  }
  .fv .enttl img {width: 100%;}


  /*  section-wrap
  -------------------------------------*/
  .section-wrap {
    background: transparent linear-gradient(180deg, #EBE5D5 0%, #F4F1E966 100%) 0% 0% no-repeat padding-box;
    padding: 9.4vw 0 45vw;
  }
  .section-wrap .lead {
    font-size:4.348vw;
    line-height: 1.666666;
    letter-spacing: 0.075em;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2vw;
  }
  .section-wrap .lead02 {
    text-align: center;
    margin: 0 2vw 15vw 0;
  }
  .section-wrap .lead02 img {
    width: 71.257vw;
  }
  

    /* point共通
  -------------------------------------*/
  .point {
    margin-bottom: 16.4vw;
  }
  .point .inner .enttl {
    text-align: center;
    margin-bottom: 1vw;
  }
  .point .inner .enttl img {
    width: 40vw;
    margin: 0 1vw 0 0vw;
  }
  .point .inner h2 {
    text-align: center;
    margin-bottom: 3vw;
    position: relative;
    z-index: 2;
  }
  .point .inBox {display: grid;}
  .point .inBox .photo {margin: -10.8vw 0 6vw;order: 1;}
  .point .inBox .photo img {
    width: 100%;
    height: auto;
  }
  .point .inBox .content {
    width: 89.375vw;
    margin-inline: auto;
    order: 2;
  }
  .point .inBox .content .txt {
    font-size:3.382vw;
    line-height: 1.8;
    letter-spacing: 0.05em;
    font-weight: 500;
    margin-bottom: 6.8vw;
  }
  .point .point-box {
    margin-bottom: 9.6vw;
  }
  .point .point-box h3 {
    text-align: center;
  }
  .point .point-box .inner {
    background: #fff;
    border: 0.2vw solid #a78f43;
    padding: 3.5vw 3.5vw;
    grid-template-columns: 35% 62.45%;
    gap: 3.8vw;
    width: 100%;
    display: grid;
  }
  .point .point-box .inner .img {
    margin: 1vw 0 0;
  }
  .point .point-box .inner .img img {
    width: 100%;
    height: auto;
  }
  .point .point-box .inner .txt {margin-bottom: 0;}
  .point .point-box .inner .txt span {
    font-weight: 700;
  }
  .point .photo-frame {
    width: 89.375vw;
    margin-inline: auto;
    margin-bottom: 11vw;
  }
  .point .photo-frame img {
    width: 100%;
    height: auto;
  }
  .point .btn {
    text-align: center;
  }

  /* point02 */
  .point02 {
    margin-bottom: 9.8vw;
  }
  .point02 .inner .enttl img {
    width: 43.6vw;
    margin: 0 1vw;
  }
  .point02 .inBox .photo {margin: -9vw 0 6vw;}

  /* point03 */

 .point03{margin-bottom: 9.8vw;}

  .point03 .inner .enttl img {
    width: 43.3vw;
    margin: 0 1vw;
  }
  .point03 .point-box .inner .txt {
    letter-spacing: -0.026em;
  }

    /* point04 */
  .point04 {
    margin-bottom: 16.8vw;
  }
  .point04 .inner .enttl img {
    width: 43.6vw;
    margin: 0 1vw;
  }
  .point04 .inBox .photo {margin: -9vw 0 6vw;}



  /* link
  -------------------------------------*/
  .link {
    background: #436788;
    padding: 0 0 6vw;
    height: 68vw;
  }
  .link .link-box {
    background: #FFFFFF;
    top: -53.8vw;
    padding: 7.2vw 6.5vw 7.2vw;
    width: 90.34vw;
    margin-inline: auto;
    position: relative;
  }
  .link .link-box .logo {
    text-align: center;
    margin-bottom: 7.2vw;
    width: 40.1vw;
    margin-inline: auto;
  }
  .link .link-box .list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5vw;
  }
  .link .link-box img {
    width: 100%;
    height: auto;
  }

}