@charset "UTF-8";
/* ========================================
  @media screen and (min-width: 768px), print
======================================== */
@media screen and (min-width: 768px), print {
/* mv
-------------------------------------*/
.mv {
    background: url(../images/other/mv-bg.png) no-repeat center;
    background-size: cover;
    padding: 150px 0;
    position: relative;
    margin-top: 17px;
}
.mv::after {
    position: absolute;
    content: "";
    background: url(../images/other/mv-arrow.png)no-repeat;
    background-size: contain;
    width: 174px;
    height: 75px;
    bottom: -49px;
    left: 50%;
    transform: translateX(-50%);
}
.mv h2 {
    color: #FFF;
    text-align: center;
    font-size: 60px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.08em;
    margin-bottom: 64px;
}
.mv h2 span {
    color: #FFF;
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.5; /* 150% */
    letter-spacing: -0.05em;
    display: block;
    margin-bottom: 8px;
}
.mv .subt {
    color: #FFF;
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.625; /* 162.5% */
    margin-bottom: 24px;
}
.mv .txt {
    color: #FFF;
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4583;
}

/* intro
-------------------------------------*/
.intro .inner {
    width: min(95%, 1104px);
    margin-inline: auto;
    padding: 160px 0 172px;
}
.intro h2 {
    text-align: center;
    font-size: 60px;;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.08em;
    margin-bottom: 40px;
}
.intro h2 span {
    color: #C93800;
}
.intro .subt {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.75; /* 175% */
    margin-bottom: 50px;
}
.intro .step {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: min(95%, 768px);
    margin-inline: auto;
    margin-bottom: 64px;
    text-align: center;
    position: relative;
}
.intro .step::before {
    position: absolute;
    content: "";
    background: #1A1A1A;
    width: 440px;
    height: 1px;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
}
.intro .step li .ttl {
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.875; /* 187.5% */
    background: #D9D9D9;
    padding: 0 16px;
    display: inline-block;
    position: relative;
}
.intro .step li .img {
    display: flex;
    width: 240px;
    height: 240px;
    padding: 60px 37px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50%;
    background: #F5F5F5;
    margin-top: -16px;
}
.intro .step li:nth-child(3) .img img{
    position: relative;
    left: 5px;
}
.intro h3 {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.77778; /* 177.778% */
    margin-bottom: 40px;
    text-align: center;
}
.intro h3 span {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.75; /* 175% */
    display: block;
    border-top: 1px solid #1A1A1A;
    border-bottom: 1px solid #1A1A1A;
    padding: 16px 0;
    margin-top: 22px;
    width: min(95%, 891px);
    margin-inline: auto;
}
.intro .list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 64px;
}
.intro .list li {
    background: #1A1A1A;
    border-radius: 10px;
    height: 120px;
    color: #FFF;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.875; /* 187.5% */
    place-content: center;
}
.intro .list li span {
    color: #FFDF34;
}
.intro .lead {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4375; /* 143.75% */
}

/* point共通
-------------------------------------*/
.point {
    background: #F5F5F5;
    position: relative;
    padding: 160px 0 0;
}
.point::before {
    position: absolute;
    content: "";
    background: #FFF;
    width: 35.625%;
    height: 440px;
    top: 160px;
    right: 0;
}
.point::after {
    position: absolute;
    content: "";
    background: #EEEEEE;
    width: 33.33%;
    height: 400px;
    bottom: 0;
    left: 0;
    z-index: 0;
}
.point .enttl {
    color: #FFF;
    font-size: 140px;
    font-weight: 900;
    line-height: 1; /* 100% */
    width: min(95%, 1600px);
    margin-inline: auto;
    margin-bottom: -2px;
}
.point .inner {
    width: min(95%, 1440px);
    margin-inline: auto;
    padding: 0 0 100px;
    position: relative;
}
.point .subt {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4583;
    margin-bottom: 24px;
}
.point h2 {
    font-size: 60px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.08em;
    margin-bottom: 32px;
}
.point .detail-box {
    padding: 16px 40px;
    background: #EEE;
    display: grid;
    gap: 4px;
    margin-bottom: 64px;
    width: min(95%, 542px);
}
.point .detail-box .ttl {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.875; /* 187.5% */
}
.point .detail-box .txt {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.85714; /* 185.714% */
}
.point .lead {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.77778; /* 177.778% */
    margin-bottom: 40px;
}
.point .txt {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.875; /* 187.5% */
    margin-bottom: 29px;
}
.point .txt:nth-last-of-type(1) {
    margin-bottom: 0;
}
.point .inBox01 {
    display: grid;
    grid-template-columns: 44.44% 1fr;
    gap: 80px;
    padding-bottom: 120px;
    align-items: flex-end;
}
.point .inBox01 .photo01 {
    position: relative;
}
.point .inBox02 {
    display: grid;
    grid-template-columns: 43.75% 1fr;
    gap: 80px;
    width: min(95%, 1280px);
    margin-inline: auto;
}
.point .inBox02 .photo02 {
    position: relative;
    z-index: 2;
}
.point .inBox02 .txt-box {
    padding-right: 40px;
}
.point .inBox02 .txt:nth-of-type(2) {
    margin-bottom: 40px;
}

/* point01
-------------------------------------*/
.point01 .inBox02 .txt-box {
    padding-top: 42px;
}

/* point02
-------------------------------------*/
.point02 {
    padding: 120px 0 0;
}
.point02::before {
    top: 120px;
}
.point02::after {
    bottom: 160px;
}
.point02 .inner {
    padding: 0 0 170px;
}
.point02 .enttl {
    margin-bottom: 2px;
}
.point02 h2 {
    margin-bottom: 64px;
}
.point02 .inBox01 {
    align-items: initial;
    padding-bottom: 120px;
}
.point02 .inBox01 .txt-box {
    padding-top: 40px;
}
.point02 .inBox02 .txt:nth-of-type(2) {
    margin-bottom: 30px;
}
.point02 .inBox02 .txt:nth-of-type(4) {
    margin-bottom: 40px;
}
.point02 .inBox02 .lead:nth-of-type(5) {
    margin-bottom: 34px;
}
.point02 .inBox02 .lead:nth-of-type(6) {
    margin-bottom: 0;
}

/* link-sec
-------------------------------------*/
.link-sec {
    padding: 160px 0 240px;
 }
 .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 h2 span {
        font-size: clamp(1.875rem, 1.458rem + 0.87vw, 2.5rem);
    }
    .mv .subt {
        font-size: clamp(1.75rem, 1.172rem + 1.2vw, 2rem);
    }

    /* intro
    -------------------------------------*/
    .intro h2 {
        font-size: clamp(2.875rem, 0.851rem + 4.22vw, 3.75rem);
    }
    .intro .step {
        width: 69.82vw;
    }
    .intro .step li .img {
        width: 21.818vw;
        height: 21.818vw;
        padding: 5.455vw 3.364vw;
        gap: 0.909vw;
        margin-top: -1.455vw;
    }
    .intro .step li .img img {
        width: 100%;
        height: auto;
    }

}

/* ========================================
@media screen and (min-width:768px) and (max-width:1640px)
======================================== */
@media screen and (min-width:768px) and (max-width:1640px) {
/* point共通
-------------------------------------*/
.point {
    padding: 9.756vw 0 0;
}
.point::before {
    width: 35.625%;
    height: 26.829vw;
    top: 9.756vw;
    right: 0;
}
.point::after {
    width: 33.33%;
    height: 24.39vw;
}
.point .enttl {
    font-size: 8.537vw;
    margin-bottom: -0.122vw;
}
.point .inner {
    width: 87.80vw;
    padding: 0 0 6.098vw;
}
.point .subt {
    font-size: clamp(1.25rem, 1.03rem + 0.46vw, 1.5rem);
    margin-bottom: 1.463vw;
}
.point h2 {
    margin-bottom: 1.951vw;
    font-size: 3.659vw;
}
.point .detail-box {
    padding: 0.976vw 2.439vw;
    gap: 0.244vw;
    margin-bottom: 3.902vw;
    width: 33.05vw;
}
.point .detail-box .ttl {
    font-size: clamp(0.75rem, 0.53rem + 0.46vw, 1rem);
}
.point .detail-box .txt {
    font-size: clamp(0.625rem, 0.405rem + 0.46vw, 0.875rem);
}
.point .lead {
    font-size: clamp(0.875rem, 0.655rem + 0.46vw, 1.125rem);
    margin-bottom: 2.439vw;
}
.point .txt {
    font-size: clamp(0.75rem, 0.53rem + 0.46vw, 1rem);
    margin-bottom: 1.768vw;
}
.point .inBox01 {
    grid-template-columns: 47.44% 1fr;
    gap: 4.878vw;
    padding-bottom: 7.317vw;
    align-items: inherit;
}
.point .inBox01 .photo01 img {
    width: 100%;
    height: auto;
}
.point .inBox02 {
    grid-template-columns: 43.75% 1fr;
    gap: 4.878vw;
    width: 78.05vw;
    align-items: center;
}
.point .inBox02 .photo02 img {
    width: 100%;
    height: auto;
}
.point .inBox02 .txt-box {
    padding-right: 2.439vw;
}
.point .inBox02 .txt:nth-of-type(2) {
    margin-bottom: 2.439vw;
}

/* point01
-------------------------------------*/
.point01 .inBox02 .txt-box {
    padding-top: 2.561vw;
}

/* point02
-------------------------------------*/
.point02 {
    padding: 7.317vw 0 0;
}
.point02::before {
    top: 7.317vw;
}
.point02::after {
    bottom: 9.756vw;
}
.point02 .inner {
    padding: 0 0 10.366vw;
}
.point02 .enttl {
    margin-bottom: 0.122vw;
}
.point02 h2 {
    margin-bottom: 3.902vw;
}
.point02 .inBox01 {
    align-items: initial;
    padding-bottom: 7.317vw;
    grid-template-columns: 47.44% 1fr;
}
.point02 .inBox01 .txt-box {
    padding-top: 2.439vw;
}
.point02 .inBox02 .txt:nth-of-type(2) {
    margin-bottom: 1.829vw;
}
.point02 .inBox02 .txt:nth-of-type(4) {
    margin-bottom: 2.439vw;
}
.point02 .inBox02 .lead:nth-of-type(5) {
    margin-bottom: 2.073vw;
}
.point02 .inBox02 .lead:nth-of-type(6) {
    margin-bottom: 0;
}
}

/* ========================================
@media screen and (max-width: 767px) 
======================================== */
@media screen and (max-width: 767px) {
/* mv
-------------------------------------*/
.mv {
    background: url(../images/other/mv-bg_sp.png) no-repeat center;
    background-size: cover;
    padding: 19.32vw 0;
    position: relative;
    margin-top: 12vw;
}
.mv::after {
    position: absolute;
    content: "";
    background: url(../images/other/mv-arrow.png)no-repeat;
    background-size: contain;
    width: 33.82vw;
    height: 16.91vw;
    bottom: -10.84vw;
    left: 50%;
    transform: translateX(-50%);
}
.mv h2 {
    color: #FFF;
    text-align: center;
    font-size:7.729vw;
    font-weight: 700;
    line-height: 1.4375;
    margin-bottom: 3.86vw;
}
.mv h2 span {
    color: #FFF;
    text-align: center;
    font-size:3.382vw;
    font-weight: 700;
    line-height: 1.57143;
    display: block;
    margin-bottom: 1.93vw;
}
.mv .subt {
    color: #FFF;
    text-align: center;
    font-size:3.865vw;
    font-weight: 600;
    line-height: 1.875;
    margin-bottom: 1.93vw;
}
.mv .txt {
    color: #FFF;
    text-align: center;
    font-size:3.382vw;
    font-weight: 500;
    line-height: 1.57143;
}

/* intro
-------------------------------------*/
.intro .inner {
    width: 89.37vw;
    margin-inline: auto;
    padding: 18.36vw 0 19.32vw;
}
.intro h2 {
    text-align: center;
    font-size:7.729vw;
    font-weight: 700;
    line-height: 1.4375;
    margin-bottom: 7.73vw;
}
.intro h2 span {
    color: #C93800;
}
.intro .subt {
    text-align: center;
    font-size:4.348vw;
    font-weight: 600;
    line-height: 1.7778;
    margin-bottom: 4.04vw;
}
.intro .step {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.78vw;
    margin-bottom: 10.66vw;
    text-align: center;
    position: relative;
}
.intro .step::before {
    position: absolute;
    content: "";
    background: #1A1A1A;
    width: 50.97vw;
    height: 0.12vw;
    top: 2.9vw;
    left: 50%;
    transform: translateX(-50%);
}
.intro .step li .ttl {
    text-align: center;
    font-size: 1.85vw;
    font-weight: 400;
    line-height: 1.875; /* 187.5% */
    background: #D9D9D9;
    padding: 0 1.84vw;
    display: inline-block;
    position: relative;
}
.intro .step li .img {
    display: grid;
    width: 27.78vw;
    height: 27.78vw;
    border-radius: 50%;
    background: #F5F5F5;
    margin-top: -2.86vw;
    place-content: center;
}
.intro .step li:nth-child(1) .img img{
    width: 19.08vw;
    position: relative;
    top: 0.8vw;
    left: 0.5vw;
}
.intro .step li:nth-child(2) .img img{
    width: 14.37vw;
    position: relative;
    top: 0.8vw;
}
.intro .step li:nth-child(3) .img img{
    position: relative;
    left: 0.441vw;
    width: 21.62vw;
    top: 1vw;
}
.intro h3 {
    font-size:3.382vw;
    font-weight: 500;
    line-height: 1.85714;
    margin-bottom: 7.93vw;
    text-align: center;
}
.intro h3 span {
    text-align: center;
    font-size:4.348vw;
    font-weight: 600;
    line-height: 1.7778;
    display: block;
    border-top: 0.2vw solid #1A1A1A;
    border-bottom: 0.2vw solid #1A1A1A;
    padding: 3.86vw 0;
    margin-top: 3.86vw;
}
.intro .list {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.93vw;
    margin-bottom: 9.66vw;
    width: 82.13vw;
    margin-inline: auto;
}
.intro .list li {
    background: #1A1A1A;
    border-radius: 2.42vw;
    padding: 3.86vw 0;
    color: #FFF;
    text-align: center;
    font-size:3.865vw;
    font-weight: 700;
    line-height: 1.875; /* 187.5% */
    place-content: center;
}
.intro .list li span {
    color: #FFDF34;
}
.intro .lead {
    text-align: center;
    font-size:5.797vw;
    font-weight: 700;
    line-height: 1.4583;
}

/* point共通
-------------------------------------*/
.point {
    background: #F5F5F5;
    position: relative;
    padding: 15.46vw 0 0;
}
.point::before {
    position: absolute;
    content: "";
    background: #FFF;
    width: 77.29vw;
    height: 43.48vw;
    top: 117vw;
    right: 0;
}
.point::after {
    position: absolute;
    content: "";
    background: #EEEEEE;
    width: 77.29vw;
    height: 43.48vw;
    bottom: 70vw;
    left: 0;
    z-index: 0;
}
.point .enttl {
    color: #FFF;
    font-size: 16.91vw;
    font-weight: 900;
    line-height: 1; /* 100% */
    width: 89.37vw;
    margin-inline: auto;
    margin-bottom: 5.80vw;
}
.point .inner {
    width: 89.2vw;
    margin-inline: auto;
}
.point .inBox01 .txt-box {
    display: contents;
}
.point .subt {
    font-size:3.382vw;
    font-weight: 500;
    line-height: 1.57143;
    margin-bottom: 1.93vw;
    order: 1;
}
.point h2 {
    font-size:7.729vw;
    font-weight: 700;
    line-height: 1.4375;
    margin-bottom: 5.8vw;
    order: 2;
}
.point .detail-box {
    padding: 3.86vw 5.80vw;
    background: #EEE;
    display: grid;
    gap: 0.97vw;
    margin-bottom: 19.66vw;
    order: 3;
}
.point .detail-box .ttl {
    font-size:3.865vw;
    font-weight: 400;
    line-height: 1.875; /* 187.5% */
}
.point .detail-box .txt {
    font-size:3.14vw;
    font-weight: 400;
    line-height: 1.84615;
}
.point .lead {
    font-size:3.865vw;
    font-weight: 500;
    line-height: 1.875;
    margin-bottom: 5.80vw;
    order: 5;
}
.point .txt {
    font-size:3.14vw;
    font-weight: 400;
    line-height: 1.84615;
    margin-bottom: 6vw;
    order: 6;
}
.point .txt:nth-last-of-type(1) {
    margin-bottom: 0;
}
.point .inBox01 {
    display: grid;
    padding-bottom: 9.66vw;
}
.point .inBox01 .photo01 {
    position: relative;
    order: 4;
    margin-bottom: 7.73vw;
}
.point .inBox02 {
    display: grid;
    gap: 17.39vw;
}
.point .inBox02 .photo02 {
    position: relative;
    z-index: 2;
}
.point .inBox02 .txt:nth-of-type(2) {
   margin-bottom: 5.80vw;
}

/* point02
-------------------------------------*/
.point02 {
    padding: 13.32vw 0 14.32vw;
}
.point02::before {
    top: 75.32vw;
}
.point02 h2 {
    margin-bottom: 19.32vw;
}
.point02::after {
    bottom: 152vw;
}

/* link-sec
-------------------------------------*/
.link-sec {
    padding: 28.99vw 0 38.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;
 }
 

}