@charset "UTF-8";
/* ========================================
  @media screen and (min-width: 768px), print
======================================== */
@media screen and (min-width: 768px), print {
#assessment footer .footer-Box {padding: 101px 0 1px;}

/* mv
-------------------------------------*/
.mv {
    max-width: 1920px;
    width: 100%;
    margin-inline: auto;
}
.mv .inner {
    width: 96.875%;
    margin-left: auto;
    background: #D75B43;
    padding: 62px 0 50px;
    display: grid;
    grid-template-columns: 44% 1fr;
    gap: 92px;
}
.mv .txt-box {padding: 0 0 0 100px;}
.mv h2 {
    font-weight: bold;
    font-size: 24px;
    letter-spacing: 0.02em;
    line-height: 1.7083333;
    text-align: left;
    color: #fff;
    margin-bottom: 26px;
}
.mv .list {
    display: grid;
    gap: 14px;
}
.mv .list li{
    font-weight: normal;
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 1.6;
    text-align: left;
    color: #fff;
    border-bottom: 1px solid #E29384;
    position: relative;
    padding-left: 42px;
    padding-bottom: 9px;
}
.mv .list li::before {
    content: "";
    position: absolute;
    top: 30%;
    left: 10px;
    transform: translateY(-50%);
    width: 19px;
    height: 20px;
    background: url(../images/assessment/check-icon.svg)no-repeat;
    background-size: contain;
}
.mv .etc {
    font-weight: normal;
    font-size: 14px;
    letter-spacing: 0.02em;
    line-height: 2.9285714;
    text-align: right;
    color: #fff;
}
.mv .photo {position: relative;top: -198px;margin-bottom: -198px;}


/* message
-------------------------------------*/
.message .inner {
    width: min(95%, 1170px);
    margin-inline: auto;
    padding: 104px 0 179px;
}
.message .subt {
    font-weight: bold;
    font-size: 32px;
    letter-spacing: 0.1em;
    line-height: 1.875;
    text-align: center;
    margin-bottom: 20px;
}
.message h2 {
    font-weight: bold;
    font-size: 50px;
    letter-spacing: 0.1em;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 63px;
}
.message .txt {
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 0.1em;
    line-height: 2;
}

/* reason
-------------------------------------*/
.reason {
    background: linear-gradient(#d75b43 0%, #f46161 100%);
    max-width: 1920px;
    width: 100%;
    margin-inline: auto;
}
.reason .inner {
    width: min(95%, 1280px);
    margin-inline: auto;
    padding-bottom: 457px;
}
.reason .enttl {
    position: relative;
    top: -41px;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 22px;
    text-align: center;
}
.reason h2 {
    font-weight: bold;
    font-size: 32px;
    letter-spacing: 0.1em;
    text-align: center;
    color: #fff;
    margin-bottom: 77px;
}
.reason .list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 80px;
}
.reason .list li {
    background: #FFFFFF;
    padding: 36px 60px;
    display: block grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    margin-bottom: 60px;
}
.reason .list li:nth-of-type(3),
.reason .list li:nth-of-type(4) {
   margin-bottom: 0;
}
.reason .list li .en {
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.02em;
    text-align: center;
    color: #d75b43;
    margin-bottom: 5px;
}
.reason .list li h3 {
    font-weight: bold;
    font-size: 26px;
    letter-spacing: 0.02em;
    line-height: 1.576923;
    text-align: center;
    margin-bottom: 31px;
}
.reason .list li .photo {
    margin-bottom: 25px;
}
.reason .list li .txt {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 2;
}

/* flow
-------------------------------------*/
.flow {
    position: relative;
    top: -271px;
    margin-bottom: -204px;
}
.flow .inner {
    padding: 27px 0 100px;
}
.flow .list li {
    height: 200px;
}
.flow .list li .left {
    margin: -18px 0 0;
}


/* tel
-------------------------------------*/
.tel .inner {
    width: min(95%, 1000px);
    margin-inline: auto;
    padding: 0 0 160px;
}
.tel .enttl {
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 0.05em;
    line-height: 1.3;
    text-align: center;
    color: #d75b43;
    margin-bottom: 17px;
}
.tel h2 {
    font-weight: bold;
    font-size: 32px;
    letter-spacing: 0.1em;
    text-align: center;
    margin-bottom: 48px;
}
.tel .tel-box {
    background: #1A1A1A;
    padding: 23px 0 18px;
    text-align: center;
}
.tel .tel-box .ttl {
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.1em;
    line-height: 1;
    margin-bottom: 18px;
    color: #FFFFFF;
    display: inline-block;
    border-bottom: 1px solid #5A5A5A;
    padding: 0 0 7px;
}
.tel .tel-box .tel {
    font-weight: 500;
    font-size: 45px;
    letter-spacing: 0.05em;
    line-height: 0.866666;
    text-align: center;
    color: #fff;
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 13px;
}
.tel .tel-box .open {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.1em;
    line-height: 1.7142857;
    text-align: center;
    color: #fff;
}

/* form
-------------------------------------*/
#assessment .formttl_ja {
    font-size: 40px;
    line-height: 2.5;
    margin-bottom: 4px;
}

}

/* ========================================
@media screen and (min-width:768px) and (max-width:1890px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1890px) {
/* mv
-------------------------------------*/
.mv .inner {
    padding: 3.28vw 0 2.646vw;
    gap: 4.868vw;
}
.mv .txt-box {padding: 0 0 0 5.291vw;}
.mv h2 {
    font-size: clamp(1rem, 0.658rem + 0.71vw, 1.5rem);
    margin-bottom: 1.005vw;
}
.mv .list {
    gap: 0.37vw;
}
.mv .list li{
    font-size: clamp(0.875rem, 0.788rem + 0.18vw, 1rem);
    padding-left: 2.222vw;
    padding-bottom: 0.476vw;
}
.mv .list li::before {
    left: 0.529vw;
    width: 1.005vw;
    height: 1.058vw;
}
.mv .etc {
    font-size: clamp(0.625rem, 0.451rem + 0.36vw, 0.875rem);
}
.mv .photo {top: -8.476vw;margin-bottom: -8.476vw;}
.mv .photo 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) {
.message .subt {
    font-size: clamp(1.5rem, 0.75rem + 1.56vw, 2rem);
}
.message h2 {
    font-size: clamp(1.875rem, 3.91vw, 3.125rem);
}
.message .inBox .photo img {
    width: 100%;
    height: auto;
}
}


/* ========================================
@media screen and (min-width:768px) and (max-width:1320px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1320px) {
.reason .enttl {
    left: 50%;
    text-align: center;
}
.reason .enttl img {
    width: 87.045vw;
}
.reason .list li {
    gap: 0 6.061vw;
}
.reason .list li .photo img {
    width: 100%;
    height: auto;
}
.reason .list li h3 {
    font-size: clamp(1.375rem, 1.027rem + 0.72vw, 1.625rem);
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1000px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1000px) {
    .flow .list li .left{
        margin: 0.636vw 0 0;
    }
}

/* ========================================
@media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
/* mv
-------------------------------------*/
.mv .inner {
    display: grid;
}
.mv .txt-box {
    background: #D75B43;
    order: 2;
    padding: 9vw 0 7vw;
}
.mv h2 {
    font-weight: bold;
    font-size:4.831vw;
    letter-spacing: 0.02em;
    line-height: 1.7083333;
    text-align: center;
    color: #fff;
    margin-bottom: 6.5vw;
}
.mv .list {
    display: grid;
    gap: 3.1vw;
    width: 82.2vw;
    margin-inline: auto;
}
.mv .list li{
    font-weight: normal;
    font-size:3.865vw;
    letter-spacing: 0.02em;
    line-height: 1.75;
    text-align: left;
    color: #fff;
    border-bottom: 0.2vw solid #E29384;
    position: relative;
    padding-left: 10.2vw;
    padding-bottom: 1.7vw;
}
.mv .list li::before {
    content: "";
    position: absolute;
    top: 46%;
    left: 2.5vw;
    width: 4.6vw;
    height: 4.9vw;
    background: url(../images/assessment/check-icon.svg)no-repeat;
    background-size: contain;
    transform: translateY(-50%);
}
.mv .etc {
    font-weight: normal;
    font-size:3.382vw;
    letter-spacing: 0.02em;
    line-height: 2.9285714;
    text-align: right;
    color: #fff;
    width: 82.2vw;
    margin-inline: auto;
}
.mv .photo {
    order: 1;
}


/* message
-------------------------------------*/
.message .inner {
    width: 89.375vw;
    margin-inline: auto;
    padding: 10vw 0 22.5vw;
}
.message .subt {
    font-weight: bold;
    font-size:4.831vw;
    letter-spacing: 0.1em;
    line-height: 1.875;
    text-align: center;
    margin-bottom: 2.5vw;
}
.message h2 {
    font-weight: bold;
    font-size:7.246vw;
    letter-spacing: 0.1em;
    line-height: 1.6666;
    text-align: center;
    margin-bottom: 7.2vw;
}
.message .txt {
    font-weight: 500;
    font-size:3.865vw;
    letter-spacing: 0.1em;
    line-height: 1.875;
}

/* reason
-------------------------------------*/
.reason {
    background: linear-gradient(#d75b43 0%, #f46161 100%);
}
.reason .inner {
    padding-bottom: 23vw;
}
.reason .enttl {
    position: relative;
    top: -4vw;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 1.2vw;
    text-align: center;
}
.reason h2 {
    font-weight: bold;
    font-size:5.797vw;
    line-height: 1.5833;
    letter-spacing: 0.1em;
    text-align: center;
    color: #fff;
    margin-bottom: 8.5vw;
}
.reason .list {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 10vw;
    width: 89.375vw;
    margin-inline: auto;
}
.reason .list li {
    background: #FFFFFF;
    padding: 9vw 3.6vw;
}
.reason .list li .en {
    font-weight: 500;
    font-size:4.348vw;
    letter-spacing: 0.02em;
    text-align: center;
    color: #d75b43;
    margin-bottom: 3.7vw;
}
.reason .list li h3 {
    font-weight: bold;
    font-size:6.28vw;
    letter-spacing: 0.02em;
    line-height: 1.5384615;
    text-align: center;
    margin-bottom: 4vw;
}
.reason .list li .photo {
    margin-bottom: 4.5vw;
}
.reason .list li .txt {
    font-weight: 400;
    font-size:3.382vw;
    letter-spacing: 0.1em;
    line-height: 1.7142857;
}

/* flow
-------------------------------------*/
.flow {
    position: relative;
    margin-bottom: 20vw;
}
.flow .inner {
   padding: 2vw 0 12vw;
}
.flow .list li {padding: 4vw 2vw 4vw 4.5vw;}
.flow .list li:nth-of-type(4) .left {
    left: 5.9vw;
    top: 8vw;
}
#assessment .flow .list li:nth-of-type(4) img {
    width: 17.5vw;
}

/* tel
-------------------------------------*/
.tel .inner {
    width: 89.375vw;
    margin-inline: auto;
    padding: 19.2vw 0 19vw;
}
.tel .enttl {
    font-weight: 600;
    font-size:3.865vw;
    letter-spacing: 0.05em;
    line-height: 1.125;
    text-align: center;
    color: #d75b43;
    margin-bottom: 2.7vw;
}
.tel h2 {
    font-weight: 900;
    font-size:6.763vw;
    line-height: 1.571428;
    letter-spacing: 0.1em;
    text-align: center;
    margin-bottom: 6.4vw;
}
.tel .tel-box {
    background: #1A1A1A;
    padding: 6.2vw 0 4.5vw;
    text-align: center;
}
.tel .tel-box .ttl {
    font-weight: 500;
    font-size:3.865vw;
    letter-spacing: 0.1em;
    line-height: 1;
    margin-bottom: 4.5vw;
    color: #FFFFFF;
    display: inline-block;
    border-bottom: 0.2vw solid #5A5A5A;
    padding: 0 0 1.5vw;
}
.tel .tel-box .tel {
    font-weight: 500;
    font-size:10.145vw;
    letter-spacing: 0.05em;
    line-height: 0.9285714;
    text-align: center;
    color: #fff;
    display: flex;
    gap: 1.5vw;
    justify-content: center;
    margin-bottom: 3vw;
}
.tel .tel-box .tel img {
    margin: 1vw 0 0;
}
.tel .tel-box .open {
    font-weight: 400;
    font-size:3.382vw;
    letter-spacing: 0.1em;
    line-height: 1.7142857;
    text-align: center;
    color: #fff;
}

}