@charset "UTF-8";
#performance {
    background: #E5E2DD;
    max-width: 1920px;
    width: 100%;
    margin-inline: auto;
}


/* ========================================
  @media screen and (min-width: 768px), print
======================================== */
@media screen and (min-width: 768px),print {
.main-ttl-box {
    background: url(../images/performance/main-ttl-bg.jpg) no-repeat center;
    background-size: cover;
    height: calc(772 / 1920 * 100vw);
}

/* intro
-------------------------------------*/
.intro {
    padding-block: 90px 249px;
}
.intro .txt{
    font-size: 18px;
    letter-spacing: 0.08em;
    line-height: 2.4444;
    text-align: center;
    margin-bottom: 45px;
}
.intro .txt:nth-of-type(3) {
    margin-bottom: 120px;
}
.intro .photo img {
    width: 100%;
    height: auto;
}

/* sec共通
-------------------------------------*/
.sec {
    width: min(95%, 1600px);
    margin-inline: auto;
    /* background: #FFFFFF; */
    padding-bottom: 180px;
    margin-bottom: 190px;
}
.sec h2 {
    width: min(95%, 1200px);
    margin-inline: auto;
    background: #e5e2dd;
    font-weight: 500;
    font-size: 34px;
    line-height: 2.0588;
    text-align: center;
    padding-bottom: 40px;
    position: relative;
    top: -50px;
    margin-bottom: 16px;
    letter-spacing: 0;
}
.sec h3 {
    font-size: 24px;
    letter-spacing: 0.05em;
    line-height: 1.8333;
    text-align: center;
    margin-bottom: 74px;
}
.sec .inner {
    width: min(95%, 1100px);
    margin-inline: auto;
}
.sec .main-photo {
    margin-bottom: 28px;
}
.sec .txt-box {
    margin-bottom: 56px;
}
.sec .txt {
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 1.875;
    margin-bottom: 30px;
}
.sec .txt:last-of-type(1) {
    margin-bottom: 0;
}

.sec .list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.sec .list li {
    /* background: #f2f2f2; */
    padding: 35px 60px;
}
.sec .list li.has-img {
    display: grid;
    grid-template-columns: 32.65% 1fr;
    gap: 40px;
    padding: 40px 60px;
    grid-column: 1 / -1;
}
.sec .list li.has-img .content {
    padding: 12px 0 0;
}
.sec .list li h4 {
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.05em;
    line-height: 2.4444;
    margin-bottom: 8px;
}
.sec .list li .txt {
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 1.785714;
    margin: 0;
}

.sec .list li .txt .txt-frame{
    margin:0 0 20px 0;
}

/* sec03
-------------------------------------*/
.sec03 h2 {
    margin-bottom: 69px;
}
.sec03 .main-photo {
    margin-bottom: 60px;
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}


/* sec04
-------------------------------------*/
.sec04 .list {-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-wrap: wrap;flex-wrap: wrap;display:-webkit-box;display:-ms-flexbox;display:flex;gap: 0px;}
.sec04 .list li {/* background: #f2f2f2; */padding: 35px 60px;width: 540px;}
.sec04 .list li:nth-child(1){width: 100%;}
.sec04 .list li:nth-child(2){width: 100%;}
.sec04 .list li:nth-child(5){width: 100%;}
.sec04 .list li.has-img {}
.sec04 .list li.has-img .content {padding: 12px 0 0;}
.sec04 .list li h4 {font-weight: 500;font-size: 18px;letter-spacing: 0.05em;line-height: 2.4444;margin-bottom: 8px;}
.sec04 .list li .txt {font-size: 14px;letter-spacing: 0.05em;line-height: 1.785714;margin: 0;}

/* sec05
-------------------------------------*/
.sec05 .list {-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-wrap: wrap;flex-wrap: wrap;display:-webkit-box;display:-ms-flexbox;display:flex;gap: 0px;}
.sec05 .list li {/* background: #f2f2f2; */padding: 35px 60px;width: 540px;}
.sec05 .list li:nth-child(3){width: 100%;}
.sec05 .list li.has-img {}
.sec05 .list li.has-img .content {padding: 12px 0 0;}
.sec05 .list li h4 {font-weight: 500;font-size: 18px;letter-spacing: 0.05em;line-height: 2.4444;margin-bottom: 8px;}
.sec05 .list li .txt {font-size: 14px;letter-spacing: 0.05em;line-height: 1.785714;margin: 0;}

/* sec05
-------------------------------------*/
.sec06 .list {-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-wrap: wrap;flex-wrap: wrap;display:-webkit-box;display:-ms-flexbox;display:flex;gap: 0px;}
.sec06 .list li {/* background: #f2f2f2; */padding: 35px 30px !important;width: 550px;}
.sec06 .list li:nth-child(3){width: 100%;}
.sec06 .list li.has-img .photo{ width: 100%;}
.sec06 .list li.has-img .content {padding: 0px 0 0;}
.sec06 .list li h4 {font-weight: 500;font-size: 18px;letter-spacing: 0.05em;line-height: 2.4444;margin-bottom: 8px;}
.sec06 .list li .txt {font-size: 14px;letter-spacing: 0.05em;line-height: 1.785714;margin: 0;}
.sec .list li.has-img{}



/* sec06
-------------------------------------*/
.sec06 {margin-bottom: 0; padding: 0;}

/* link-sec 
-------------------------------------*/
.link-sec {
    padding-block: 158px 118px;
}
.link-sec .logo {
    text-align: center;
    margin-bottom: 160px;
}
.link-sec .list {
    width: min(95%, 1280px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}
.link-sec .list li a {
    text-align: center;
}
.link-sec .list li .photo-wrap {
    position: relative;
}
.link-sec .list li .photo {
    overflow: hidden;
}
.link-sec .list li .photo picture {
    display: block;
    transition: transform 2.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.link-sec .list li .photo img {
    width: 100%;
    vertical-align: middle;
}
.link-sec .list li:hover .photo picture {
    transform: scale(1.12);
}
.link-sec .list li .ttl-wrap {
    position: absolute;
    top: 51.5%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.link-sec .list li .enttl {
    font-weight: 600;
    font-size: 28px;
    letter-spacing: 0.08em;
    line-height: 1.3125;
    text-align: center;
    color: #fff;
}
.link-sec .list li .ttl {
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.32em;
    line-height: 2.8;
    text-align: center;
    color: #fff;
}



.performance-link-box {
  margin: 40px auto 0;
  width: min(95%, 300px);
}
.performance-link-box p a{
  font-size: 16px;
  line-height: 2.125;
  letter-spacing: 0.05em;
  font-weight: 400;
  border-bottom: 1px solid #1A1A1A;
  position: relative;
  padding: 13px 0 12px 13px;
  display: block;
}
.performance-link-box p a::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
  font-size: 18px;
  transition: .3s;
}
.performance-link-box p a:hover::after {
  right: 4px;
}


}

/* ========================================
@media screen and (min-width:768px) and (max-width:1640px)
======================================== */
@media screen and (min-width:768px) and (max-width:1640px) {
.sec .main-photo img {width: 100%;height: auto;}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1230px)
======================================== */
@media screen and (min-width:768px) and (max-width:1230px) {
.sec05 .list li{padding:1.823vw 3.125vw;width:44.125vw; gap:0;}
.sec05 .list li:nth-child(3){width:100%;}
.sec06 .list li{padding:1.823vw 3.125vw;width:44.125vw; gap:0;}
.sec06 .list li:nth-child(3){width:100%;}
}



/* ========================================
@media screen and (min-width:768px) and (max-width:1200px)
======================================== */
@media screen and (min-width:768px) and (max-width:1200px) {
.sec .list li.has-img img {width: 100%;height: auto;}
.sec .list li.has-img .content {padding: 1.00vw 0 0;}
.sec .list li h4 {font-size: clamp(1rem, 0.778rem + 0.46vw, 1.125rem);}
}

/* ========================================
@media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
.main-ttl-box {
    background: url(../images/performance/main-ttl-bg_sp.jpg) no-repeat center;
    background-size: cover;
    height: 66.43vw;
}

/* intro
-------------------------------------*/
.intro {
    padding-block: 19.64vw 20.74vw;
}
.intro .txt{
    font-size:3.14vw;
    letter-spacing: 0.08em;
    line-height: 2.76923;
    text-align: center;
    margin-bottom: 8.7vw;
}
.intro .txt:nth-of-type(3) {
    margin-bottom: 22vw;
}

/* sec共通
-------------------------------------*/
.sec {
    /* background: #FFFFFF; */
    padding-bottom: 14.49vw;
    margin-bottom: 31.85vw;
}
.sec h2 {
    width: 91.79vw;
    margin-inline: auto;
    background: #e5e2dd;
    font-weight: 500;
    font-size:5.072vw;
    line-height: 1.95238;
    text-align: center;
    padding-bottom: 5.25vw;
    position: relative;
    top: -8.08vw;
    letter-spacing: 0.1em;
    margin-bottom: -0.5vw;
}
.sec h3 {
    font-size:4.106vw;
    letter-spacing: 0.05em;
    line-height: 2.58823;
    text-align: center;
    margin-bottom: 7.26vw;
}
.sec .inner {
    width: 100vw;
    margin-inline: auto;
}
.sec .main-photo {
    margin-bottom: 4.8vw;
}
.sec .txt-box {
    width: 89.37vw;
    margin: 0 auto 8.66vw;
}
.sec .txt {
    font-size:3.623vw;
    letter-spacing: 0.05em;
    line-height: 2;
    margin-bottom: 7.2vw;
}
.sec .txt:last-of-type(1) {
    margin-bottom: 0;
}

.sec .list {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 5.23vw;
}
.sec .list li {
    /* background: #f2f2f2; */
    padding: 5.05vw 6.04vw 6.75vw;
    display: grid;
}
.sec .list li.has-img {
    padding: 5.05vw 6.04vw 6.05vw;
    width: 89.37vw;
    margin: 0 auto;
}
.sec .list li.has-img .content {
    display: contents;
}
.sec .list li.has-img .photo {
    order: 2;
    margin-bottom: 3.4vw;
}
.sec .list li h4 {
    font-weight: 500;
    font-size:4.106vw;
    letter-spacing: 0.05em;
    line-height: 2.58823;
    margin-bottom: 1.26vw;
    order: 1;
    text-align: center;
}
.sec .list li .txt {
    font-size:3.14vw;
    letter-spacing: 0.05em;
    line-height: 1.92307;
    margin: 0;
    order: 3;
}

.sec .list li .txt .txt-frame{
    margin:0 0 5vw 0;
}

/* sec03
-------------------------------------*/
.sec03 h2 {
    margin-bottom: 3.5vw;
}
.sec03 .main-photo {
    margin-bottom: 9.8vw;
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* sec05
-------------------------------------*/
.sec05 .list li:nth-child(2) {
    padding: 6.25vw 6.04vw 6.75vw;
}
.sec05 .list li:nth-child(2) h4 {
    line-height: 1.8235;
    margin-bottom: 3.0vw;
}

/* sec06
-------------------------------------*/
.sec06 {
    margin-bottom: 0;
}


/* link-sec 
-------------------------------------*/
.link-sec {
    padding-block: 28.99vw 16.91vw;
}
.link-sec .logo {
    text-align: center;
    margin-bottom: 29.15vw;
}
.link-sec .list {
    width: 96.62vw;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.42vw;
}
.link-sec .list li a {
    text-align: center;
}
.link-sec .list li .photo-wrap {
    position: relative;
}
.link-sec .list li .photo {
    overflow: hidden;
}
.link-sec .list li .photo picture {
    display: block;
    transition: transform 2.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.link-sec .list li .photo img {
    width: 100%;
    vertical-align: middle;
}
.link-sec .list li:hover .photo picture {
    transform: scale(1.12);
}
.link-sec .list li .ttl-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.link-sec .list li .enttl {
    font-weight: 600;
    font-size:3.865vw;
    letter-spacing: 0.06em;
    line-height: 1.5;
    text-align: center;
    color: #fff;
}
.link-sec .list li .ttl {
    font-weight: 600;
    font-size:2.66vw;
    letter-spacing: 0.22em;
    line-height: 1;
    text-align: center;
    color: #fff;
}


.performance-link-box{margin:3.66vw auto 0;width:70%;}
.performance-link-box p a{font-size:3.86vw;line-height:2.125;letter-spacing:0.25vw;font-weight:400;border-bottom:0.24vw solid #1A1A1A;padding:3.14vw 0 2.9vw 3.14vw;display:block; position:relative;}
.performance-link-box p a::after{content:"→";position:absolute;top:50%;right:2.17vw;transform:translateY(-50%);font-size:4.35vw;transition:.3s;}
.performance-link-box p a:hover::after{right:0.97vw;}



}