@charset "UTF-8";
/* ========================================
  @media screen and (min-width: 768px), print
======================================== */
@media screen and (min-width: 768px), print {
#about main{
    max-width: 1920px;
    width: 100%;
    margin-inline: auto;
}
/* mv
-------------------------------------*/
.mv {
    background: url(../images/about/mv_bg.png)repeat-y;
    background-size: contain;
    position: relative;
    z-index: 3;
    max-width: 1920px;
    width: 100%;
    margin-inline: auto;
}
.mv .inner{
    width: min(95%, 1602px);
    padding: 109px 0 76px;
    margin-top: 48px;
    margin-inline: auto;
}
.mv h2 {
    margin-bottom: 54px;
    margin-left: 9px;
}
.mv .txt {
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 2.25;
    color: #fff;
}

/* section-wrap 
-------------------------------------*/
.section-wrap {
    width: 96.875%;
    margin-right: auto;
    background: linear-gradient(#d75b43 0%, #f46161 100%);
    position: relative;
    z-index: 1;
    padding-bottom: 41px;
}
.section-wrap::before{
    position: absolute;
    content: "";
    background: url(../images/about/sec-bg.png)no-repeat;
    pointer-events: none;
    z-index: 2;
    top: -159px;
    right: 0;
    width: 96.7741%;
    height: 1546px;
}

/* sec
-------------------------------------*/
.sec {
    padding-bottom: 100px;
    position: relative;
    z-index: 4;
}
.sec .inner {
    width: min(95%, 1710px);
    margin-right: auto;
    background: #FFFFFF;
    padding: 71px 0 60px;
    text-align: center;
    position: relative;
    z-index: 3;
}
.sec::after {
    position: absolute;
    content: "";
    background: url(../images/about/sec-bottom-bg.png)no-repeat;
    pointer-events: none;
    z-index: 1;
    bottom: -45px;
    right: 0;
    width: 1950px;
    height: 300px;
    width: 104.85%;
    height: 31.7%;
    background-size: contain;
}
.sec .subt {
    text-align: center;
    display: inline-block;
    margin: 0 0 13px 208px;
}
.sec h2{
    font-weight: 900;
    font-size: 50px;
    letter-spacing: 0.1em;
    line-height: 1.84;
    text-align: center;
    margin: 0 0 48px 238px;
    display: inline-block;
}
.sec .inBox{
    font-weight: 900;
    font-size: 50px;
    letter-spacing: 0.1em;
    line-height: 1.84;
    width: min(95%, 1400px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 56.631% 39.3%;
    gap: 61px;
    text-align: left;
    position: relative;
    z-index: 2;
}
.sec .txt-box h3 {
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 0.1em;
    line-height: 1.6;
    margin-bottom: 23px;
    color: #d75b43;
}
.sec .txt-box .txt {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 2;
    margin-bottom: 22px;
}
.sec .txt-box .txt.bold {
    font-weight: 700;
    line-height: 1.8125;
}
.sec .photo {
    padding-left: 5px;
}

.sec:nth-child(even) .inBox {position: relative;left: 204px;grid-template-columns: 1fr 56.429%;}
.sec:nth-child(even) .photo {
    padding-right: 5px;
    padding-left: 0;
}
/* sec01 */
.sec01 {
    padding-top: 121px;
}
.sec01 .txt-box .txt.bold {
    margin: -9px 0 14px;
}

/* sec02 */
.sec02 .inner {
    padding: 93px 0 56px;
}
.sec02 h2{margin: 0 0 50px 213px;}

/* sec03 */
.sec03 h2{margin: 0 0 50px 213px;}
.sec03 .inner {
    padding: 71px 0 47px;
}

/* sec04 */
.sec04 h2{margin: 0 0 50px 213px;}
.sec04 .inner {
    padding: 71px 0 56px;
}



/* link
-------------------------------------*/
#link {
    margin-bottom: 65px;
    padding-top: 159px;
}



}


/* ========================================
@media screen and (min-width:768px) and (max-width:1640px)
======================================== */
@media screen and (min-width:768px) and (max-width:1640px) {
/* mv
-------------------------------------*/
.mv .inner{
    width:97.683vw;
    padding: 6.646vw 0 4.634vw;
    margin-top: 2.927vw;
}
.mv h2 {
    margin-bottom: 3.293vw;
    margin-left: 0.549vw;
}
.mv h2 img {
    width:84.207vw;
}
.mv .txt {
    font-size: clamp(0.75rem, 0.53rem + 0.46vw, 1rem);
}

}

/* ========================================
@media screen and (min-width:768px) and (max-width:1840px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1840px) {
/* section-wrap 
-------------------------------------*/
.section-wrap {
    padding-bottom: 2.228vw;
}
.section-wrap::before{
    top: -8.641vw;
    width: 96.7741%;
    height: 84.022vw;
}

/* sec
-------------------------------------*/
.sec {
    padding-bottom: 5.435vw;
}
.sec .inner {
    width: 92.935vw;
    padding: 3.859vw 0 3.261vw;
}
.sec::after {
    bottom: -2.446vw;
    width: 105.978vw;
    height: 16.304vw;
}
.sec .subt {
    margin: 0 0 0.707vw 11.304vw;
}
.sec .subt img {
    width: 47.12vw;
}
.sec h2{
    font-size: 2.717vw;
    margin: 0 0 2.609vw 12.935vw;
}
.sec .inBox{
    font-size: 2.717vw;
    width: 76.087vw;
    gap: 3.315vw;
}
.sec .txt-box h3 {
    font-size: clamp(0.875rem, 0.606rem + 0.56vw, 1.25rem);
    margin-bottom: 1.25vw;
}
.sec .txt-box .txt {
    font-size: clamp(0.75rem, 0.571rem + 0.37vw, 1rem);
    margin-bottom: 1.196vw;
}
.sec .photo {
    padding-left: 0.272vw;
}
.sec .photo img {
    width: 100%;
    height: auto;
}
.sec:nth-child(even) .inBox {position: relative;left: 11.087vw;grid-template-columns: 1fr 56.429%;}
.sec:nth-child(even) .photo {
    padding-right: 0.272vw;
    padding-left: 0;
}
/* sec01 */
.sec01 {
    padding-top: 6.576vw;
}
.sec01 .txt-box .txt.bold {
    margin: -0.489vw 0 0.761vw;
}

/* sec02 */
.sec02 .inner {
    padding: 3.424vw 0 3.043vw;
}
.sec02 h2{margin: 0 0 2.717vw 11.576vw;}

/* sec03 */
.sec03 h2{margin: 0 0 2.717vw 11.576vw;}
.sec03 .inner {
    padding: 3.859vw 0 2.554vw;
}

/* sec04 */
.sec04 h2{margin: 0 0 2.717vw 11.576vw;}
.sec04 .inner {
    padding: 3.859vw 0 3.043vw;
}
}


/* ========================================
@media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
/* mv
-------------------------------------*/
.mv {
    background: url(../images/about/mv_bg.png)repeat-y;
    background-size: contain;
    position: relative;
    z-index: 3;
    margin: -2vw 0 0;
}
.mv .inner{
    width: 82.2vw;
    padding: 12.5vw 0 7.5vw;
    margin-top: 2vw;
    margin-inline: auto;
}
.mv h2 {
    margin-bottom: 12.5vw;
}
.mv .txt {
    font-weight: bold;
    font-size:3.382vw;
    letter-spacing: 0.06em;
    line-height: 2.571428;
    color: #fff;
}

/* section-wrap 
-------------------------------------*/
.section-wrap {
    background: linear-gradient(#d75b43 0%, #f46161 100%);
    position: relative;
    z-index: 1;
    padding-bottom: 2.4vw;
    padding-top: 12vw;
}
.section-wrap::before{
    position: absolute;
    content: "";
    background: url(../images/about/sec-bg_sp.png)no-repeat;
    pointer-events: none;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vw;
}

/* sec
-------------------------------------*/
.sec {
    padding-bottom: 9.5vw;
    position: relative;
    z-index: 4;
}
.sec .inner {
    width: 89.375vw;
    margin-inline: auto;
    background: #FFFFFF;
    padding: 7.2vw 6vw 2.8vw;
    position: relative;
    z-index: 3;
}
.sec .subt {margin-bottom: 3.2vw;}
.sec h2{
    font-weight: 900;
    font-size:7.246vw;
    letter-spacing: 0.1em;
    line-height: 1.46666;
    display: inline-block;
    margin-bottom: 5vw;
}
.sec03 h2 {
    font-feature-settings: "palt";
}
.sec .inBox{
    display: grid;
    gap: 5vw;
}
.sec .txt-box h3 {
    font-weight: bold;
    font-size:3.865vw;
    letter-spacing: 0.1em;
    line-height: 1.875;
    margin-bottom: 3.5vw;
    color: #d75b43;
}
.sec .txt-box .txt {
    font-weight: 400;
    font-size:3.382vw;
    letter-spacing: 0.1em;
    line-height: 1.7142857;
    margin-bottom: 3.9vw;
}
.sec .txt-box .txt.bold {
    font-weight: 700;
}

.sec:nth-child(even) .photo {
    order: 1;
}
.sec:nth-child(even) .txt-box {
    order: 2;
}

/* sec02 */
.sec02 .inner {
    padding: 10.2vw 6vw 2.8vw;
}


/* link
-------------------------------------*/
#link {
    margin-bottom: 4vw;
    padding-top: 7vw;
}


}