@charset "UTF-8";
/* ========================================
  @media screen and (min-width: 768px), print
======================================== */
@media screen and (min-width: 768px), print {
/* mv
-------------------------------------*/
.mv {
    background:  url(../images/reason/mv-bg.png)no-repeat center;
    background-size: cover;
    padding: 247px 0;
    margin-bottom: 240px;
    margin-top: 17px;
}
.mv .subt {
    color: #F5F5F5;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.458333;
    margin-bottom: 24px;
}
.mv h2 {
    color: #FFF;
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.5; /* 150% */
    letter-spacing: -0.08em; 
}
.mv h2 span {
    color: #FFF;
    font-size: 60px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.08em;
}

/* sec共通
-------------------------------------*/
.sec {
    margin-bottom: 240px;
}
.sec .inner{
    width: min(95%, 1560px);
    margin-left: auto;
    display: grid;
    grid-template-columns: 44.616% 51.28%;
    gap: 64px;
}
.sec .enttl {
    color: #F5F5F5;
    font-size: clamp(6.25rem, -1.118rem + 15.35vw, 15rem);
    font-weight: 900;
    line-height: 0.8333;
    margin-top: -78px;
    position: relative;
    left: -120px;
    margin-bottom: -58px;
}
.sec .num {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.04em;
    margin-bottom: 18px;
    position: relative;
    z-index: 2;
}
.sec h2 {
    color: #FFF;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.75; /* 150% */
    letter-spacing: -0.05em;
    margin-bottom: 73px;
    width: max-content;
}
.sec h2 span {
    background: #1A1A1A;
    padding: 0 24px;
}
.sec h3 {
    font-size: 60px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.08em;
    margin-bottom: 66px;
    width: max-content;
}
.sec h3 ruby {
    ruby-position: over;
}
.sec h3 rt {
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 12px;
    font-weight: 400;
    line-height: 2.16667; /* 216.667% */
    letter-spacing: 0;
}
.sec .txt {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.85714; /* 185.714% */
    margin-bottom: 26px;
    width: min(95%, 640px);
}
.sec .txt02 {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.77778; /* 177.778% */
    margin: 38px 0 42px;
}
.sec .photo {
    position: relative;
    z-index: 2;
}

/* sec02
-------------------------------------*/
.sec02 {
    margin-bottom: 273px;
}

/* sec03
-------------------------------------*/
.sec03 {
    margin-bottom: 160px;
}

/* link-sec
-------------------------------------*/
.link-sec {
    padding-bottom: 242px;
}
.link-sec .bnr-list {
    width: min(95%, 1180px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 60px;
 }
 .link-sec .bnr-list li {
    box-shadow: 0 10px 20px 0 rgba(26, 26, 26, 0.10);
 }
 .link-sec .bnr-list li img {
    width: 100%;
    height: auto;
 }
   
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1100px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1100px) {
  /* mv
-------------------------------------*/
.mv {
    padding: 22.455vw 0;
    margin-bottom: 21.818vw;
}
.mv .subt {
    font-size: 2.182vw;
    margin-bottom: 2.182vw;
}
.mv h2 {
    font-size: 3.636vw;
}
.mv h2 span {
    font-size: 5.455vw;
}
  
}


/* ========================================
@media screen and (min-width:768px) and (max-width:1680px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1680px) {
/* sec共通
-------------------------------------*/
.sec {
    margin-bottom: 14.286vw;
}
.sec .inner{
    width: 92.857vw;
    grid-template-columns: 44.616% 51.28%;
    gap: 3.81vw;
}
.sec .enttl {
    margin-top: -4.643vw;
    left: -7.143vw;
    margin-bottom: -3.452vw;
}
.sec .num {
    font-size: 2.381vw;
    margin-bottom: 1.071vw;
}
.sec h2 {
    font-size: clamp(1.25rem, 0.197rem + 2.19vw, 2.5rem);
    margin-bottom: 4.345vw;
}
.sec h2 span {
    padding: 0 1.429vw;
}
.sec h3 {
    font-size: clamp(2.5rem, 1.447rem + 2.19vw, 3.75rem);
    margin-bottom: 3.929vw;
}
.sec h3 rt {
    font-size: clamp(0.5rem, 0.289rem + 0.44vw, 0.75rem);
}
.sec .txt {
    font-size: clamp(0.625rem, 0.414rem + 0.44vw, 0.875rem);
    margin-bottom: 1.548vw;
    width: 43.095vw;
}
.sec .txt02 {
    font-size: clamp(0.875rem, 0.664rem + 0.44vw, 1.125rem);
    margin: 2.262vw 0 2.5vw;
}
.sec .photo img {
    width: 100%;
    height: auto;
}

/* sec02
-------------------------------------*/
.sec02 {
    margin-bottom: 16.25vw;
}

/* sec03
-------------------------------------*/
.sec03 {
    margin-bottom: 9.524vw;
}
}

/* ========================================
@media screen and (max-width: 767px) 
======================================== */
@media screen and (max-width: 767px) {
/* mv
-------------------------------------*/
.mv {
    background:  url(../images/reason/mv-bg_sp.png)no-repeat center;
    background-size: cover;
    padding: 19.32vw 0;
    margin-bottom: 28.99vw;
    margin-top: 12vw;
}
.mv .subt {
    color: #F5F5F5;
    text-align: center;
    font-size:3.382vw;
    font-weight: 700;
    line-height: 1.57413;
    margin-bottom: 6.8vw;
}
.mv h2 {
    color: #FFF;
    text-align: center;
    font-size:5.797vw;
    font-weight: 700;
    line-height: 1.95;
    letter-spacing: 0;
}
.mv h2 span {
    color: #FFF;
    font-size:7.729vw;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0;
}

/* sec共通
-------------------------------------*/
.sec {
    margin-bottom: 13.92vw;
}
.sec .inner{
    display: grid;
}
.sec .txt-box {
    display: contents;
}
.sec .enttl {
    color: #F5F5F5;
    font-size: 21.74vw;
    font-weight: 900;
    line-height: 1;
    position: relative;
    margin-bottom: -7vw;
    margin-left: 3vw;
    order: 1;
}
.sec .num {
    font-size:3.865vw;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.04em;
    margin-bottom: 1.5vw;
    position: relative;
    z-index: 2;
    margin-left: 5.4vw;
    order: 2;
}
.sec h2 {
    color: #FFF;
    font-size:5.314vw;
    font-weight: 600;
    line-height: 1.85;
    letter-spacing: -0.04em;
    margin-bottom: -4.9vw;
    margin-left: 5.4vw;
    order: 3;
    position: relative;
    z-index: 2;
}
.sec h2 span {
    background: #1A1A1A;
    padding: 0.72vw 1.93vw;
}
.sec h3 {
    font-size:9.662vw;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.08em;
    margin-bottom: 8vw;
    order: 5;
    width: 89.37vw;
    margin-inline: auto;
}
.sec h3 ruby {
    ruby-position: over;
}
.sec h3 rt {
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 2.17vw;
    font-weight: 400;
    line-height: 2.16667; /* 216.667% */
    letter-spacing: 0;
    position: relative;
    top: -1.2vw;
}
.sec .txt {
    font-size:3.14vw;
    font-weight: 400;
    line-height: 1.84615;
    margin-bottom: 5.7vw;
    order: 6;
    width: 89.37vw;
    margin-inline: auto;
}
.sec .txt:nth-of-type(7) {order: 8;}
.sec .txt02 {
    font-size:3.865vw;
    font-weight: 600;
    line-height: 1.75;
    order: 7;
    width: 89.37vw;
    margin-inline: auto;
    margin-top: -1vw;
    margin-bottom: 5vw;
}
.sec .photo {
    order: 4;
    margin-bottom: 9.7vw;
}


/* sec02
-------------------------------------*/
.sec02 .txt:nth-of-type(6) {order: 8;}


/* sec03
-------------------------------------*/
.sec03 h2 {margin-bottom: -15vw;}
.sec03 .txt:nth-of-type(6) {order: 8;}

/* link-sec
-------------------------------------*/
.link-sec {
    padding: 9.2vw 0 39vw;
}
.link-sec .bnr-list {
    width: 82.13vw;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 5.80vw;
}
 .link-sec .bnr-list li {
    box-shadow: 0 10px 20px 0 rgba(26, 26, 26, 0.10);
}
 .link-sec .bnr-list li img {
    width: 100%;
    height: auto;
}

}