@charset "UTF-8";

/* ========================================
   @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px),print {
   #performance .gnav li a {
      color: #FFFFFF;
   }
   #performance .gnav li a::after {
      background-color: #FFFFFF;
    }
   #performance .seo_bread_list {
      color: #FFFFFF;
   }
   #performance .seo_bread_list a {
      color: #FFFFFF;
   }
   #performance .main-ttl-wrap {
      background: url(../images/performance/fv.jpg)no-repeat top center;
      background-size: cover;
      margin-top: -50px;
      padding: 212px 0 153px;
      margin-bottom: 0;
   }
   #performance .main-ttl-wrap .en {
      color: #FFFFFF;
   }
   #performance .main-ttl-wrap h1 {
      color: #FFFFFF;
      position: relative;
      margin-bottom: 13rem;
   }
   #performance .main-ttl-wrap h1::after {
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -9.5rem;
      width: 1px;
      height: 5rem;
      background-color: #FFFFFF;
   }
   #performance .main-ttl-wrap .main-lead {
      font-weight: 500;
      font-size: 24px;
      letter-spacing: 0.05em;
      line-height: 1.708333;
      text-align: center;
      color: #fff;
      margin-bottom: 1.85rem;
   }
   #performance .main-ttl-wrap .main-txt {
      font-weight: 400;
      font-size: 16px;
      letter-spacing: 0.05em;
      line-height: 2.5;
      text-align: center;
      color: #fff;
   }
   #performance main {
      max-width: 1920px;
      margin-inline: auto;
      width: 100%;
  }

   /* performance
   -------------------------------------*/
   .performance {
      padding: 10rem 0;
    }
    .performance .inner {
      width: min(95%, 1400px);
      margin-inline: auto;
    }
    .performance .en-ttl {
      font-size: 16px;
      line-height: 1.1875;
      letter-spacing: 0em;
      font-weight: 400;
      position: relative;
      margin-bottom: 2.15rem;
      padding: 0 0 0 3.15rem;
    }
    .performance .en-ttl::before {
      content: "";
      position: absolute;
      top: 61%;
      left: 0;
      width: 2.5rem;
      height: 1px;
      background-color: #1C1C1C;
      transform: translateY(-50%);
    }
    .performance h2 {
      font-size: 40px;
      line-height: 1.7;
      letter-spacing: 0.05em;
      font-weight: 700;
      margin-bottom: 4.7rem;
    }
    .performance .content-box {
      background: #FFFFFF;
      padding: 0 0 6.25rem;
    }
    .performance .content-box .inner {
      width: min(95%, 1200px);
      margin-inline: auto;
    }
    .performance .ttl-box {
      background: #333333;
      padding: 2.17rem 6.25rem;
    }
    .performance .ttl-box h3 {
      font-size: 30px;
      line-height: 1.7;
      letter-spacing: 0.05em;
      font-weight: 500;
      color: #FFFFFF;
      position: relative;
      padding: 0 0 0 1.85rem;
    }
    .performance .ttl-box h3::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      width: 1.25rem;
      height: 1.25rem;
      border-radius: 50%;
      background-color: #8E7016;
      transform: translateY(-50%);
    }
    .performance .photo img {
      width: 100%;
      height: auto;
    }
    .performance .lead {
      font-size: 20px;
      line-height: 2.2;
      letter-spacing: 0.05em;
      font-weight: 500;
      margin-bottom: 3.35rem;
      text-align: center;
    }
    
    /* performance01 */
    .performance01 {
      background: #F0EFEB;
    }
    .performance01 .inBox01 {
      display: grid;
      grid-template-columns: 41.66% 53.33%;
      gap: 3.75rem;
      margin-bottom: 3.75rem;
      padding: 3.5rem 0 0;
    }
    .performance01 .inBox01 .txt {
      font-size: 16px;
      line-height: 2;
      letter-spacing: 0.05em;
      font-weight: 400;
      margin-bottom: 2.05rem;
    }
   .performance01 .inBox01 .photo {
      margin: -6rem 0 0;
   }
    .performance01 .inBox02 {
      background: #F0EFEB;
      padding: 3.35rem 5rem;
      display: grid;
      grid-template-columns: 61.5384% 1fr;
      gap: 3.75rem;
      margin-bottom: 4.6rem;
    }
    .performance01 .inBox02 h4 {
      font-size: 20px;
      line-height: 2.05;
      letter-spacing: 0.05em;
      font-weight: 700;
      margin-bottom: 1.15rem;
      position: relative;
      padding: 0 0 0 1.4rem;
    }
    .performance01 .inBox02 h4::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      width: 0.75rem;
      height: 0.75rem;
      border-radius: 50%;
      background-color: #8E7016;
      transform: translateY(-50%);
    }
    .performance01 .inBox02 .txt {
      font-size: 14px;
      line-height: 2.2857142857;
      letter-spacing: 0.05em;
      font-weight: 400;
    }
    .performance01 .inBox02 .photo {
      margin: 0.4rem 0 0;
    }

   /* performance02 */
   .performance02 .content-box {
      background: #F0EFEB;
   }
   .performance02 .inBox .txt {
      font-size: 16px;
      line-height: 2;
      letter-spacing: 0.05em;
      font-weight: 400;
   }
   .performance02 .inBox01 {
      display: grid;
      grid-template-columns: 50% 45%;
      gap: 3.75rem;
      margin-bottom: 2.6rem;
      padding: 2.15rem 0 0;
   }
   .performance02 .inBox01 .photo {
      margin: -4.8rem 0 0;
   }
   .performance02 .inBox01 .txt-box .txt {
      font-size: 18px;
      line-height: 2;
      letter-spacing: 0.05em;
      font-weight: 500;
      margin-bottom: 1.7rem;
    }
   .performance02 .inBox01 .txt .bb {
      border-bottom: 1px solid #1C1C1C;
    }
    .performance02 .inBox01 .txt .gold {
      color: #8E7016;
      font-size: 24px;
      line-height: 1.2;
      letter-spacing: 0.05em;
      font-weight: 500;
      margin: 0 0 0 0.25rem;
    }
    .performance02 .inBox01 .ua-box {
      background: #F9F8F7;
      padding: 2rem 2.5rem 2.2rem;
      position: relative;
    }
    .performance02 .inBox01 .ua-box h4 {
      font-size: 20px;
      line-height: 2.05;
      letter-spacing: 0.05em;
      font-weight: 500;
      position: relative;
      margin-bottom: 0.5rem;
      padding: 0 0 0 1.35rem;
    }
    .performance02 .inBox01 .ua-box h4::before {
      content: "";
      position: absolute;
      top: 57%;
      left: 0;
      width: 0.75rem;
      height: 0.75rem;
      border-radius: 50%;
      background-color: #8E7016;
      transform: translateY(-50%);
    }
    .performance02 .inBox01 .ua-box .txt {
      font-size: 14px;
      line-height: 2.2857142857;
      letter-spacing: 0.05em;
      font-weight: 400;
      margin: 0;
    }
    .performance02 .inBox01 .ua-box .label {
      position: absolute;
      top: -2.5rem;
      right: 2.5rem;
      width: 6.8125rem;
    }
    .performance02 .inBox01 .ua-box .label img {
      width: 100%;
      height: auto;
    }
    .performance02 .inBox02 {
      display: grid;
      grid-template-columns: 50% 45%;
      gap: 3.75rem;
      margin-bottom: 2.3rem;
      padding: 2.15rem 0 0;
   }
   .performance02 .inBox02 h4 {
      font-size: 18px;
      line-height: 2;
      letter-spacing: 0.05em;
      font-weight: 700;
      margin-bottom: 1.95rem;
   }
   .performance02 .inBox02 .photo {
      margin: 0.25rem 0 0;
   }
   .performance02 .inBox03 {
      display: grid;
      grid-template-columns: 40.834% 50%;
      gap: 3.75rem;
      margin-bottom: 4.5rem;
      padding: 2.15rem 0 0;
   }
   .performance02 .inBox03 .txt-box {
      margin: 0.25rem 0 0;
   }
   .performance02 .inBox03 h4 {
      font-size: 18px;
      line-height: 2;
      letter-spacing: 0.05em;
      font-weight: 700;
      margin-bottom: 1.95rem;
   }
   .performance02 .inBox03 .photo {
      margin: 0 0 0 3.125rem;
   }


/* bottom-section
-------------------------------------*/
.bottom-section {
   background: #F0EFEB;
   padding: 0 0 5rem;
}
.bottom-section h2 {
   font-weight: 500;
   font-size: 30px;
   letter-spacing: 0.05em;
   line-height: 1.7;
   text-align: center;
   padding: 8.55rem 0;
}
.bottom-section .photo-frame {
   position: relative;
}
.bottom-section .photo-frame .photo img {
   width: 100%;
   height: auto;
}
.bottom-section .photo-frame .txt {
   font-weight: 500;
   font-size: 24px;
   letter-spacing: 0.05em;
   line-height: 1.708333;
   text-align: center;
   color: #fff;
   position: absolute;
   bottom: 4.75rem;
   left: 50%;
   transform: translateX(-50%);
}
.bottom-section .link-frame {
   padding: 12.2rem 0 4.95rem;
}
.bottom-section .link-frame h2 {
   font-weight: normal;
   font-size: 16px;
   letter-spacing: 0.05em;
   line-height: 2;
   text-align: center;
   margin-bottom: 3.15rem;
   padding: 0;
}
.bottom-section .btn-list {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: calc(100 / 1920 * 100vw);
   margin-inline: auto;
   width: min(95%, 820px);
}
.bottom-section .btn-list li span {
   font-size: 16px;
   font-weight: 400;
   line-height: 1.1875;
   letter-spacing: 0;
   display: block;
   color: #9A9A9A;
   text-align: right;
   padding: 1.25rem 0 0;
}
.bottom-section .btn-list .btn {
   border-bottom: 1px solid #1C1C1C;
   padding: 0 0 0.75rem;
   position: relative;
   font-size: clamp(1.25rem, 1.083rem + 0.35vw, 1.5rem);
   font-weight: 500;
   line-height: 2;
   letter-spacing: 0.05em;
   width: 100%;
}
.bottom-section .btn-list .btn::after {
   content: "→";
   position: absolute;
   right: 0;
   top: 45%;
   transform: translateY(-50%);
   font-size: clamp(0.875rem, 0.708rem + 0.35vw, 1.125rem);
   color: #333333;
   font-weight: 400;
   font-family: "Lato", sans-serif;
   transition: all 0.2s ease;
}
.bottom-section .btn-list .btn:hover::after {
   right: -0.3125rem;
}
.bottom-section .btn-list a {
   text-decoration: none;
}

}

/* ========================================
@media screen and (min-width:768px) and (max-width:1100px)
======================================== */
@media screen and (min-width:768px) and (max-width:1100px) {
   .performance h2 {
      font-size: clamp(1.5rem, -0.813rem + 4.82vw, 2.5rem);
   }
   .performance .ttl-box h3 {
      font-size: clamp(1.313rem, 0.011rem + 2.71vw, 1.875rem);
   }
   .performance01 .inBox01 {
      grid-template-columns: 41.66% 52.2%;
      gap: calc(60 / 1100 * 100vw);
   }
   .performance01 .inBox02 {
      gap: calc(60 / 1100 * 100vw);
   }
   .performance02 .inBox01 {
      grid-template-columns: 41.66% 52.2%;
      gap: calc(60 / 1100 * 100vw);
   }
   .performance02 .inBox01 .ua-box .label {
      width: calc(109 / 1100 * 100vw);
      top: calc(-30 / 1100 * 100vw);
      right: calc(40 / 1100 * 100vw);
   }
   .performance01 .inBox01 .photo {
      margin: -5.75rem 0 0;
   }
   .performance02 .inBox01 .photo {
      margin: -3.75rem 0 0;
   }
   .performance02 .inBox01 .txt-box .txt {
      font-size: clamp(1rem, 0.711rem + 0.6vw, 1.125rem);
   }
   .performance02 .inBox02 {
      gap: calc(60 / 1100 * 100vw);
   }
   .performance02 .inBox03 {
      gap: calc(60 / 1100 * 100vw);
   }
}



/* ========================================
   @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
   #performance .gnav li a {
      color: #FFFFFF;
   }
   #performance .gnav li a::after {
      background-color: #FFFFFF;
    }
   #performance .seo_bread_list {
      color: #FFFFFF;
   }
   #performance .seo_bread_list a {
      color: #FFFFFF;
   }
   #performance .main-ttl-wrap {
      background: url(../images/performance/fv_sp.jpg)no-repeat top center;
      background-size: cover;
      padding: 38vw 0 31.2vw;
      margin-bottom: 0;
   }
   #performance .main-ttl-wrap .en {
      color: #FFFFFF;
   }
   #performance .main-ttl-wrap h1 {
      color: #FFFFFF;
      position: relative;
      margin-bottom: 21vw;
   }
   #performance .main-ttl-wrap h1::after {
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -14vw;
      width: 0.2vw;
      height: 12.6vw;
      background-color: #B2B0B0;
   }
   #performance .main-ttl-wrap .main-lead {
      font-weight: 500;
      font-size:4.348vw;
      letter-spacing: 0.05em;
      line-height: 1.94444;
      text-align: center;
      color: #fff;
      margin-bottom: 10.4vw;
   }
   #performance .main-ttl-wrap .main-txt {
      font-weight: 400;
      font-size:3.382vw;
      letter-spacing: 0.05em;
      line-height: 2.285714;
      text-align: center;
      color: #fff;
   }

   /* performance
   -------------------------------------*/
   .performance {
      padding: 14.7vw 0 19vw;
    }
    .performance .inner {
      width: 94.205vw;
      margin-inline: auto;
    }
    .performance .en-ttl {
      font-size:3.14vw;
      line-height: 1.23076;
      letter-spacing: 0em;
      font-weight: 400;
      position: relative;
      margin-bottom: 8.2vw;
      padding: 0 0 0 10.5vw;
    }
    .performance .en-ttl::before {
      content: "";
      position: absolute;
      top: 55%;
      left: 2.3vw;
      width: 6.6vw;
      height: 0.2vw;
      background-color: #1C1C1C;
      transform: translateY(-50%);
    }
    .performance h2 {
      font-size:5.797vw;
      line-height: 1.75;
      letter-spacing: 0.05em;
      font-weight: 700;
      margin-bottom: 16vw;
      text-align: center;
    }
    .performance .content-box {
      background: #FFFFFF;
      padding: 0 0 4vw;
      text-align: center;
    }
    .performance .content-box .inner {
      margin-inline: auto;
      display: grid;
      padding: 5vw 0 0;
    }
    .performance .ttl-box {
      background: #333333;
      padding: 6.41vw 0;
    }
    .performance .ttl-box h3 {
      font-size:5.072vw;
      line-height: 1.71428;
      letter-spacing: 0.05em;
      font-weight: 500;
      color: #FFFFFF;
      position: relative;
      padding: 0 0 0 10vw;
      text-align: left;
    }
    .performance .ttl-box h3::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 4.5vw;
      width: 3.4vw;
      height: 3.4vw;
      border-radius: 50%;
      background-color: #8E7016;
      transform: translateY(-50%);
    }
    .performance .photo img {
      width: 100%;
      height: auto;
    }
    .performance .lead {
      font-size:3.865vw;
      line-height: 2;
      letter-spacing: 0.05em;
      font-weight: 500;
      margin-bottom: 6vw;
      text-align: center;
      order: 3;
    }
    .performance .txt {
      font-size:3.382vw;
      line-height: 2.2857;
      letter-spacing: 0.05em;
      font-weight: 400;
      text-align: left;
      margin-bottom: 8vw;
    }
    /* performance01 */
    .performance01 {
      background: #F0EFEB;
    }
    .performance01 .inBox01 {
      display: grid;
      order: 1;
    }
    .performance01 .inBox01 .txt-box {
      order: 2;
      width: 82.3vw;
      margin-inline: auto;
    }
    .performance01 .inBox01 .photo {
      order: 1;
      margin-bottom: 4.8vw;
      width: 89.375vw;
      margin-inline: auto;
    }
    .performance01 .inBox02 {
      background: #F0EFEB;
      width: 89.375vw;
      margin-inline: auto;
      display: grid;
      padding: 9vw 3.6vw 0;
      order: 2;
      margin-bottom: 11.1vw;
    }
    .performance01 .inBox02 h4 {
      font-size:3.865vw;
      line-height: 2.1875;
      letter-spacing: 0.05em;
      font-weight: 700;
      position: relative;
      display: inline-block;
      order: 2;
      padding: 0 0 0 5vw;
      margin-bottom: 6vw;
    }
    .performance01 .inBox02 h4::before {
      content: "";
      position: absolute;
      top: 58%;
      left: 12.5vw;
      width: 2vw;
      height: 2vw;
      border-radius: 50%;
      background-color: #8E7016;
      transform: translateY(-50%);
    }
    .performance01 .inBox02 .content {
      display: contents;
    }
    .performance01 .inBox02 .content .txt{
      order: 3;
    }
    .performance01 .inBox02 .photo {
      order: 2;
      margin-bottom: 6vw;
    }
    .performance01 .photo03 {
      order: 4;
      width: 89.375vw;
      margin-inline: auto;
      margin-bottom: 11vw;
    }
   /* performance02 */
   .performance02 {
   padding: 24vw 0 24.2vw;
   }
   .performance02 .content-box {
      background: #F0EFEB;
      padding: 0 0 12.2vw;
   }
   .performance02 h2 {
      margin-bottom: 11.2vw;
   }
   .performance02 .ttl-box {
      padding: 4.5vw 0 3.8vw 2vw;
   }
   .performance02 .ttl-box h3::before {left: 2.8vw;top: 27%;}
   .performance02 .inBox01 {
      display: grid;
   }
   .performance02 .inBox01 .photo {
      order: 1;
      width: 89.375vw;
      margin-inline: auto;
   }
   .performance02 .inBox01 .txt-box {
      order: 2;
      padding: 3.4vw 0 0;
   }
   .performance02 .inBox01 .txt-box .txt {
      font-size:3.865vw;
      line-height: 2.2;
      letter-spacing: 0.05em;
      font-weight: 500;
      margin-bottom: 9.8vw;
      padding: 0 0vw 0 8.75vw;
    }
   .performance02 .inBox01 .txt .bb {
      border-bottom: 0.2vw solid #1C1C1C;
    }
    .performance02 .inBox01 .txt .gold {
      color: #8E7016;
      font-size:5.314vw;
      line-height: 1.63636;
      letter-spacing: 0.05em;
      font-weight: 500;
      margin: 0 0 0 0.75vw;
    }
    .performance02 .inBox01 .ua-box {
      background: #F9F8F7;
      padding: 6.9vw 6vw 6.5vw;
      position: relative;
      width: 89.375vw;
      margin-inline: auto;
      margin-bottom: 13vw;
    }
    .performance02 .inBox01 .ua-box h4 {
      font-size:4.348vw;
      line-height: 2.2777;
      letter-spacing: 0.05em;
      font-weight: 500;
      position: relative;
      margin-bottom: 3.75vw;
      padding: 0 0 0 5.5vw;
      text-align: left;
    }
    .performance02 .inBox01 .ua-box h4::before {
      content: "";
      position: absolute;
      top: 54%;
      left: 0.25vw;
      width: 2.5vw;
      height: 2.5vw;
      border-radius: 50%;
      background-color: #8E7016;
      transform: translateY(-50%);
    }
    .performance02 .inBox01 .ua-box .txt {
      font-size:3.382vw;
      line-height: 2.2857142857;
      letter-spacing: 0.05em;
      font-weight: 400;
      margin: 0;
      padding: 0;
    }
    .performance02 .inBox01 .ua-box .label {
      position: absolute;
      top: -8.5vw;
      right: 3.5vw;
      width: 23.7vw;
    }
    .performance02 .inBox01 .ua-box .label img {
      width: 100%;
      height: auto;
    }
    .performance02 .inBox02 {
       display: grid;
    }
    .performance02 .inBox02 .txt-box {
       display: contents;
    }
    .performance02 .inBox02 h4 {
       font-size:3.865vw;
       line-height: 2.25;
       letter-spacing: 0.05em;
       font-weight: 700;
       margin: 0 6vw 6vw;
       text-align: left;
       order: 1;
    }
    .performance02 .inBox02 .photo {
       order: 2;
       margin-bottom: 5.8vw;
       width: 89.375vw;
       margin-inline: auto;
    }
    .performance02 .inBox02 .txt {
       order: 3;
       margin: 0 6vw 11.4vw;
    }
    .performance02 .inBox03 {
       display: grid;
    }
    .performance02 .inBox03 .txt-box {
       display: contents;
    }
    .performance02 .inBox03 h4 {
       font-size:3.865vw;
       line-height: 2.25;
       letter-spacing: 0.05em;
       font-weight: 700;
       margin: 0 4.2vw 6.2vw;
       text-align: left;
       order: 1;
    }
    .performance02 .inBox03 .photo {
       order: 2;
       margin-bottom: 6.2vw;
       width: 89.375vw;
       margin-inline: auto;
    }
    .performance02 .inBox03 .txt {
       order: 3;
       margin: 0 6vw 11vw;
    }
    .performance02 .photo04 {
       width: 89.375vw;
       margin-inline: auto;
       margin-bottom: 7.2vw;
       order: 4;
    }
    .performance02 .lead {
       line-height: 2;
       font-size: 4.348vw;
    }
    

/* bottom-section
-------------------------------------*/
.bottom-section {
   background: #F0EFEB;
   padding: 0 0 4vw;
}
.bottom-section h2 {
   font-weight: 500;
   font-size:5.797vw;
   letter-spacing: 0.05em;
   line-height: 1.75;
   text-align: center;
   padding: 12vw 0 9vw;
}
.bottom-section .photo-frame {
   position: relative;
}
.bottom-section .photo-frame .photo img {
   width: 100%;
   height: auto;
}
.bottom-section .photo-frame .txt {
   font-weight: 500;
   font-size:3.865vw;
   letter-spacing: 0.05em;
   line-height: 2;
   text-align: center;
   color: #fff;
   position: absolute;
   bottom: 9.8vw;
   left: 50%;
   transform: translateX(-50%);
   width: 100%;
}
.bottom-section .link-frame {
   padding: 18.4vw 0 20.5vw;
}
.bottom-section .link-frame h2 {
   font-weight: 400;
   font-size:3.865vw;
   letter-spacing: 0.05em;
   line-height: 2;
   text-align: center;
   margin-bottom: 15.7vw;
   padding: 0;
}
.bottom-section .btn-list {
   display: grid;
   grid-template-columns: 1fr;
   gap: 8.3vw;
   width: 78.1vw;
   margin-inline: auto;
}
.bottom-section .btn-list li span {
   font-size:2.898vw;
   font-weight: 400;
   line-height: 1.25;
   letter-spacing: 0;
   display: block;
   color: #9A9A9A;
   text-align: right;
   padding: 2.5vw 0 0 0;
   margin: 0 0.8vw 0 0;
}
.bottom-section .btn-list .btn {
   border-bottom: 0.2vw solid #1C1C1C;
   padding: 0 0 3.2vw;
   position: relative;
   font-size:4.831vw;
   font-weight: 500;
   line-height: 2;
   letter-spacing: 0.05em;
   width: 77.58vw;
   margin: 0;
}
.bottom-section .btn-list .btn::after {
   content: "→";
   position: absolute;
   right: 0;
   top: 45%;
   transform: translateY(-50%);
   font-size: 3.831vw;
   color: #333333;
   font-weight: 400;
   font-family: "Lato", sans-serif;
   transition: all 0.2s ease;
}
.bottom-section .btn-list .btn:hover::after {right: -1vw;}
.bottom-section .btn-list a {
   text-decoration: none;
}

}