@charset "UTF-8";
 /* ========================================
   @media screen and (min-width: 768px), print
 ======================================== */
@media screen and (min-width: 768px),print {
  /* fv
  -------------------------------------*/
  .fv {
    background: url(../images/performance/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 15.5rem;
    position: relative;
  }
  .fv h2 {
    position: relative;
    display: inline-block;
    z-index: 3;
  }
  .fv h2::before {
    content: "";
    position: absolute;
    top: -6.1rem;
    left: -6.1rem;
    width: 8.125rem;
    height: 8.125rem;
    background: url(../images/performance/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: 79.125rem;}

  /* section-wrap
  -------------------------------------*/
  .section-wrap {
    padding: 3.9rem 0 0;
    max-width: 1920px;
    width: 100%;
    margin-inline: auto;
  }
  .section-wrap .lead {
    font-size: 24px;
    line-height: 2.0833333333;
    letter-spacing: 0.075em;
    font-weight: 700;
    text-align: center;
    margin-bottom: 15.6rem;
  }
  .section-wrap .lead span {
    background: linear-gradient(transparent 75%, #FFF46C 30%);
  }


  /* point共通
  -------------------------------------*/
  .point {
    position: relative;
    margin-bottom: 19rem;
  }
  .point h2 {
    position: relative;
    z-index: 3;
    text-align: center;
    margin-bottom: 2.8rem;
    top: -3.2rem;
    display: inline-block;
  }
  .point h2::before {
    content: "";
    position: absolute;
    top: -3rem;
    left: -13.6rem;
    width: 9.938rem;
    height: 8.188rem;
    background: url(../images/performance/point01-num.svg) no-repeat;
    background-size: contain;
  }
  .point .inner {
    width: min(95%, 1400px);
    margin-inline: auto;
    background: #FFFFFF;
    position: relative;
    padding: 0 0 2.2rem;
    z-index: 5;
    text-align: center;
  }
  .point .inner::before {
    content: "";
    position: absolute;
    top: -9.98rem;
    left: 0;
    width: 100%;
    height: 10.1rem;
    background: url(../images/performance/point-bg.png) no-repeat;
    background-size: contain;
    z-index: 3;
  }

  .point .inBox {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.125rem;
    position: relative;
    padding: 0 9.4rem 0 0;
    z-index: 3;
  }
  .point .inner .img {
    position: relative;
    left: -6.2rem;
    width: 46.875rem;
    top: 0.3rem;
  }
  .point .inner .img img {
    width: 100%;
    height: auto;
  }
  .point .content {
    margin-bottom: 3.125rem;
    width: min(95%, 550px);
    margin-left: auto;
  }
  .point .content .txt {
    font-size: 16px;
    line-height: 2.125;
    letter-spacing: 0.05em;
    font-weight: 500;
    margin-bottom: 2.15rem;
    text-align: left;
  }
  .point .content .txt span {
    border-bottom: 1px solid #A78F43;
    padding: 0 0 0.3rem;
  }
  .point .content .photo {
    text-align: left;
    width: min(95%, 360px);
  }
  .point .content .photo img {
    width: 100%;
    height: auto;
  }
  /* point01 */
  .point01 h2 img {
    width: 32.875rem;
  }
  /* point01 03 */
  .point01::before,
  .point03::before {
    content: "";
    position: absolute;
    top: -10.1rem;
    right: 0;
    width: 50%;
    height: 10.1rem;
    background: #EFEFEF;
    z-index: 3;
  }
  .point01::after,
  .point03::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20rem;
    height: 100%;
    background: #D8D8D8;
    z-index: 2;
  }

  /* point02 */
  .point02 {
    margin-bottom: 16rem;
  }
  .point02::before {
    content: "";
    position: absolute;
    top: -10.1rem;
    left: 0;
    width: 50%;
    height: 10.1rem;
    background: #EFEFEF;
    z-index: 3;
  }
  .point02 h2 {margin-bottom: 2.4rem;}
  .point02 h2::before {
    content: "";
    position: absolute;
    top: -3.8rem;
    left: -13.6rem;
    width: 11.875rem;
    height: 8.188rem;
    background: url(../images/performance/point02-num.svg) no-repeat;
    background-size: contain;
  }
  .point02::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 20rem;
    height: 100%;
    background: #D8D8D8;
    z-index: 2;
  }
  .point02 h2 img {
    width: 36.438rem;
  }
  .point02 .inner {
    padding: 0 0 1.8rem;
  }
  .point02 .inBox {
    padding: 0 0 0 3.1rem;
  }
  .point02 .inner .img {
    left: 0;
  }
  .point02 .content .photo {
    text-align: left;
    width: min(95%, 494px);
  }

  /* point03 */
  .point03 {
    margin-bottom: 25.8rem;
  }
  .point03 h2 {top: -3.6rem;margin-bottom: 2.15rem;}
  .point03 h2::before {
    content: "";
    position: absolute;
    top: -2.8rem;
    left: -17.2rem;
    width: 11.688rem;
    height: 8.188rem;
    background: url(../images/performance/point03-num.svg) no-repeat;
    background-size: contain;
  }
  .point03 h2 img {
    width: 29.25rem;
  }
  .point03 .inner {padding: 0 0 5.5rem;}

  /* 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:1660px)
======================================== */
@media screen and (min-width:768px) and (max-width:1660px) {
   .point .inner .img {
    width:45.181vw;
    left: -1.2vw;
  } 
  .point .inBox {
    padding: 0 6.036vw 0 0;
  }
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1480px)
======================================== */
@media screen and (min-width:768px) and (max-width:1480px) {
  .point .inner::before {top: -10.8vw;}
  .point::before {
    top: -10.8vw;
  }
  .point h2::before {
    width:10.743vw;
    height:8.851vw;
    left: -13.338vw;
  }
  .point02 h2::before {
    width:12.838vw;
    left: -13.338vw;
  }
  .point03 h2::before {
    width:12.635vw;
  }
}


/* ========================================
@media screen and (min-width:768px) and (max-width:1440px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1440px) {
  .fv .enttl img {width:87.917vw;}
}

/* ========================================
@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);
  }
}

/* ========================================
@media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
  .main-title {
    margin-bottom: 0;
  }
    /* fv
  -------------------------------------*/
  .fv {
    background: url(../images/performance/fv_sp.jpg) no-repeat center center/cover;
    max-width: 100vw;
    width: 100%;
    margin-inline: auto;
    text-align: center;
    padding: 16vw 0 18.2vw;
    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/performance/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: 96.62vw;
  }
  .fv .enttl img {width: 100%;}

  /* section-wrap
  -------------------------------------*/
  .section-wrap {
    padding: 9vw 0 0;
    max-width: 100vw;
    width: 100%;
    margin-inline: auto;
  }
  .section-wrap .lead {
    font-size:4.348vw;
    line-height: 1.66666;
    letter-spacing: 0.075em;
    font-weight: 700;
    text-align: center;
    margin-bottom: 25vw;
  }
  .section-wrap .lead span {
    background: linear-gradient(transparent 75%, #FFF46C 30%);
  }

   /* point共通
  -------------------------------------*/
  .point {
    position: relative;
    margin-bottom: 35vw;
  }
  .point h2 {
    position: relative;
    z-index: 3;
    text-align: center;
    margin-bottom: 0;
    display: inline-block;
    top: -14.2vw;
  }
  .point h2::before {
    content: "";
    position: absolute;
    top: -18vw;
    left: 50%;
    width: 14.735vw;
    height: 12.32vw;
    background: url(../images/performance/point01-num_sp.svg) no-repeat;
    background-size: 100%;
    transform: translateX(-50%);
  }
  .point .inner {
    background: #FFFFFF;
    position: relative;
    padding: 19vw 0 10vw;
    z-index: 5;
    text-align: center;
  }
  .point .inner::before {
    content: "";
    position: absolute;
    top: -10.7vw;
    left: 0;
    width: 100%;
    height: 10.9vw;
    background: url(../images/performance/point-bg_sp.png) no-repeat;
    background-size: contain;
    z-index: 3;
  }

  .point .inBox {display: grid;}
  .point .inner .img {margin: -3vw 0 9vw;order: 1;}
  .point .inner .img img {
    width: 100%;
    height: auto;
  }
  .point .content {width: 86.96vw;margin-inline: auto;order: 2;}
  .point .content .txt {
    font-size:3.382vw;
    line-height: 2;
    letter-spacing: 0.05em;
    font-weight: 500;
    margin-bottom: 6.6vw;
    text-align: left;
  }
  .point .content .txt span {
    border-bottom: 0.2vw solid #A78F43;
    padding: 0 0 1vw;
  }
  .point .content .photo img {
    width: 100%;
    height: auto;
  }
  /* point01 03 */
  .point01::before,
  .point03::before {
    content: "";
    position: absolute;
    top: -10.7vw;
    right: 0;
    width: 50%;
    height: 37vw;
    background: #EFEFEF;
    z-index: 3;
  }
  /* point02 */
  .point02 h2::before {
    width: 17.635vw;
    height: 12.32vw;
    background: url(../images/performance/point02-num_sp.svg) no-repeat;
    background-size: 100%;
  }
  .point02::before {
    content: "";
    position: absolute;
    top: -10.3vw;
    left: 0;
    width: 50%;
    height: 37vw;
    background: #EFEFEF;
    z-index: 3;
  }
  .point02 .inner {
    padding: 19vw 0 8vw;
  }
  /* point03 */ 
  .point03 {
    margin-bottom: 70vw;
  }
  .point03 h2::before {
    width: 17.15vw;
    height: 12.32vw;
    background: url(../images/performance/point03-num_sp.svg) no-repeat;
    background-size: 100%;
  }

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

}