/* ******************* *
* COMMON
* ******************* */
.msec-title {text-align: center;}
.msec-title .stit {margin-bottom: 14px;color: var(--color-main);font-family: var(--font-Oxanium);font-weight: 500;}
.msec-title .title {color: #111;font-size: 2.25em;font-weight: 700;line-height: 1.4;}

.btn-basic {display: block;width: 220px;margin: 0 auto;padding: 16px 10px;box-sizing: border-box;border-radius: 30px;font-weight: 600;text-align: center;transition: .35s;}
.btn-basic:hover {background: var(--color-main--deep) !important;color: #fff !important;}
.btn-basic.blue {background: var(--color-main);color: #fff;}
.btn-basic.white {background: #fff;color: var(--color-main);}

@media all and (max-width: 1024px){
    .msec-title .title  {font-size: 2.0em;}
}
@media all and (max-width: 768px){
    .msec-title .title br {display: none;}
}
@media all and (max-width: 640px){
    .msec-title .title  {font-size: 1.76em;}
}
@media all and (max-width: 480px){
    
}


/* ******************* *
* MVIS
* ******************* */
#mvis {height: 100vh;position: relative;}
#mvis .main-visual {height: 100%;position: relative;}

#mvis .video-wrap {position: absolute;inset: 0;z-index: 1;}
#mvis .video-wrap video {width: 100%;height: 100%;object-fit: cover;}
#mvis .video-wrap::after {content: "";position: absolute;inset: 0;background: rgba(0,0,0,0.3);}

#mvis .main-visual .cinner {display: flex;flex-direction: column;justify-content: center;height: 100%;position: relative;z-index: 2;}
#mvis .main-visual .mvis-txt-wrap {color: #fff;line-height: 1.4;position: relative;}
#mvis .main-visual .mvis-txt-wrap > .tit {margin-bottom: 40px;font-size: 3.70em;font-weight: 800;}
#mvis .main-visual .mvis-txt-wrap > .tit strong {font-weight: 700}
#mvis .main-visual .mvis-txt-wrap > .txt {font-family: var(--font-Oxanium);font-weight: 700;line-height: 1.8;letter-spacing: 30%;}
#mvis .mvis-txt-wrap .tit,
#mvis .mvis-txt-wrap .txt {opacity: 0;animation: fade_in_up 0.9s ease forwards;}
#mvis .mvis-txt-wrap .txt {animation-delay: 0.3s;}

@keyframes fade_in_up {
    0% {opacity:0; transform:translateY(30px);}
    100% {opacity:1; transform:translateY(0);}
}

#mvis .main-visual .scroll-box {display: none;position: absolute;left: 50%;bottom: 50px;transform: translateX(-50%);z-index: 10;} 
#mvis .main-visual .scroll-box .scroll-line {display: block;width: 1px;height: 80px;margin: 0 auto 30px;position: relative;opacity: 1;transition: all 1s;} 
#mvis .main-visual .scroll-box .scroll-line::before,
#mvis .main-visual .scroll-box .scroll-line::after {content: '';width: 1px;height: 80px;background: #fff;position: absolute;} 
#mvis .main-visual .scroll-box .scroll-line::before { opacity: .3; } 
#mvis .main-visual .scroll-box .scroll-line::after { animation-name: scroll-down-line; animation-duration: 2.6s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.77, 0, .175, 1); } 
#mvis .main-visual .scroll-box .txt {margin-right: 5px;color: #fff;font-family: var(--font-Oxanium);font-size: 16px;font-weight: 600;} 
@-webkit-keyframes scroll-down-line { 
    0% { transform-origin: 50% 100%; transform: scaleY(1); } 
    50% { transform-origin: 50% 100%; transform: scaleY(0); } 
    50.0001% { transform-origin: 50% 0; transform: scaleY(0); } 
    to { transform-origin: 50% 0; transform: scaleY(1); } 
 }
@keyframes scroll-down-line { 
    0% { transform-origin: 50% 100%; transform: scaleY(1); } 
    50% { transform-origin: 50% 100%; transform: scaleY(0); } 
    50.0001% { transform-origin: 50% 0; transform: scaleY(0); } 
    to { transform-origin: 50% 0; transform: scaleY(1); } 
}


@media all and (max-width: 1199px){
    #mvis .main-visual .mvis-txt-wrap .tit {margin-bottom: 30px;font-size: 3.50em}
}

@media all and (max-width: 768px){
    #mvis .main-visual .mvis-txt-wrap {text-align: center;}
}
@media all and (max-width: 640px){
    #mvis .main-visual .mvis-txt-wrap .tit {margin-bottom: 20px;font-size: 2.82em;}
    #mvis .main-visual .mvis-txt-wrap .txt {font-size: 16px;}
    #mvis .main-visual .mvis-txt-wrap .txt br {display: block;}
}
@media all and (max-width: 480px){
    #mvis .main-visual .mvis-txt-wrap .tit {font-size: 40px;}
    #mvis .main-visual .mvis-txt-wrap > .txt br {display: none;}
}



/* ******************* *
* MABOUT
* ******************* */
#mabout {padding: 164px 0;background: url(../img/main/mabout-img_bg.jpg) center center / cover no-repeat;}
#mabout .msec-title {margin-bottom: 28px;}
#mabout .contents .txt {margin-bottom: 60px;color: #6B6B6B;text-align: center;line-height: 1.5;}

@media all and (max-width: 1024px){
    #mabout {padding: 124px 0;}
}
@media all and (max-width: 640px){
    #mabout {padding: 100px 0;}
}
@media all and (max-width: 480px){
    #mabout .contents .txt .line-br {display: inline;}
}



/* ******************* *
* MSTRATEGY
* ******************* */
#mstrategy {padding: 110px 0 100px;}
#mstrategy .msec-title {margin-bottom: 50px;position: relative;z-index: 10;}
#mstrategy .mstrategy-list {display: grid;grid-template-columns: repeat(3, 1fr);gap: 50px;}
#mstrategy .mstrategy-item {display: flex;flex-direction: column;border-radius: 15px 15px 20px 20px;overflow: hidden;background: #fff;}
#mstrategy .mstrategy-item .img-cont {border-radius: 10px;overflow: hidden;position: relative;}
#mstrategy .mstrategy-item .txt-cont {flex: 1;display: flex;flex-direction: column;align-items: center;margin-top: -30px;padding: 60px 20px 50px;border: 1px solid #E8E8E8;box-sizing: border-box;border-radius: 20px;background: #fff;text-align: center;}
#mstrategy .mstrategy-item .txt-cont .num {margin-bottom: 6px;color: var(--color-main);font-family: var(--font-Oxanium);font-size: 16px;font-weight: 600;}
#mstrategy .mstrategy-item .txt-cont .tit {margin-bottom: 12px;color: #111;font-size: 1.50em;font-weight: 600;line-height: 1.3;}
#mstrategy .mstrategy-item .txt-cont .txt {color: #666;font-size: max(.90em, 17px);line-height: 1.5;}
#mstrategy .mstrategy-item .txt-cont em {display: inline-block;margin-top: 5px;padding: 5px 20px;border-radius: 15px;background: var(--color-main);color: #fff;font-style: normal;font-size: 17px;font-weight: 600;}
#mstrategy .mstrategy-item .txt-cont em br {display: none;}


@media all and (max-width: 1399px){
    #mstrategy .mstrategy-list {gap: 30px;}
    #mstrategy .mstrategy-item .txt-cont .tit {font-size: 1.40em;}
    #mstrategy .mstrategy-item .txt-cont .txt {font-size: 17px;}
    #mstrategy .mstrategy-item .txt-cont .txt  .line-br {display: inline;}
    #mstrategy .mstrategy-item .txt-cont em {font-size: 16px;}
}
@media all and (max-width: 1199px){
    #mstrategy .mstrategy-list {gap: 15px;}
    #mstrategy .mstrategy-item .txt-cont {padding: 60px 15px 40px;}
    #mstrategy .mstrategy-item .txt-cont .num {font-size: 14px;}
    #mstrategy .mstrategy-item .txt-cont .tit {font-size: 1.20em;}
    #mstrategy .mstrategy-item .txt-cont .txt {font-size: 16px;}
    #mstrategy .mstrategy-item .txt-cont em br {display: block;}
    
}
@media all and (max-width: 768px){
    #mstrategy {padding: 90px 0 80px;}
    #mstrategy .mstrategy-list {grid-template-columns: repeat(2, 1fr);}
    #mstrategy .mstrategy-item .txt-cont {padding: 60px 15px 40px;}
    #mstrategy .mstrategy-item .txt-cont em br {display: none;}
}
@media all and (max-width: 640px){
    #mstrategy .mstrategy-slide {overflow: visible;}
    #mstrategy .mstrategy-list {display: flex;align-items: stretch;gap: 0;}
    #mstrategy .mstrategy-item {height: auto;}
    #mstrategy .mstrategy-item .txt-cont {padding: 60px 30px 40px;}
}


/* ******************* *
* MCONTACT
* ******************* */
#mcontact {padding: 120px 0 130px;background: url(../img/main/mcontact-img_bg.jpg) center center / cover no-repeat;}
#mcontact .contents {display: flex;align-items: flex-start;gap: 100px;}
#mcontact .map-cont {flex: 0 0 auto;max-width: 800px;width: 58%;aspect-ratio: 8 / 5;}
#mcontact .info-cont {width: 100%;padding-top: 38px;color: #fff;}
#mcontact .info-cont .title {margin-bottom: 35px;font-family: var(--font-Oxanium);font-size: 3.50em;font-weight: 600;}
#mcontact .info-cont .list {margin-bottom: 80px;}
#mcontact .info-cont .list > li {display: flex;align-items: baseline;gap: 40px;}
#mcontact .info-cont .list > li:not(:last-child) {margin-bottom: 20px;}
#mcontact .info-cont .list > li .tit {flex: 0 0 auto;display: flex;align-items: baseline;gap: 10px;width: 100px;font-size: 1.10em;font-weight: 600;position: relative;}
#mcontact .info-cont .list > li .tit::before {flex: 0 0 auto;content: '';display: block;width: 16px;aspect-ratio: 4 / 5;}
#mcontact .info-cont .list > li:nth-child(1) .tit::before {background: url(../img/main/ico-marker.svg) center center / cover no-repeat;}
#mcontact .info-cont .btn-wrap {display: flex;align-items: center;gap: 20px;}
#mcontact .info-cont .btn-wrap > .btn-basic {flex: 0 0 auto;}

@media (max-width: 1399px){
    #mcontact .contents {gap: 70px;}
    #mcontact .map-cont {width: 50%;}
    #mcontact .info-cont {padding-top: 20px;}
    #mcontact .info-cont .title {font-size: 3.20em;}
    #mcontact .info-cont .list {margin-bottom: 50px;}
}
@media (max-width: 1199px){
    #mcontact .contents {gap: 50px;}
    #mcontact .info-cont .title {margin-bottom: 20px;font-size: 3.0em;}
    #mcontact .info-cont .list > li {gap: 18px;}
    #mcontact .info-cont .btn-wrap {flex-direction: column;}
    #mcontact .info-cont .btn-wrap > p {text-align: center;}
}
@media all and (max-width: 1024px){
    #mcontact {padding: 100px 0 110px;}
    #mcontact .contents {flex-direction: column-reverse;}
    #mcontact .map-cont {max-width: none;width: 100%;aspect-ratio: 2 / 1;}
    #mcontact .info-cont {padding-top: 0;}
    #mcontact .info-cont .title {text-align: center;}
    #mcontact .info-cont .list {max-width: 400px;margin: 0 auto 30px;}
    #mcontact .info-cont .list > li:not(:last-child) {margin-bottom: 12px;}
    #mcontact .info-cont .btn-wrap > p > .line-br {display: inline;}
}
@media all and (max-width: 768px){
    #mcontact {padding: 80px 0 90px;}
}
@media all and (max-width: 640px){
    #mcontact .map-cont {aspect-ratio: 3 / 2;}
}