@charset "utf-8";
/*-----------------------------------------------
 * INTRODUCTION
-------------------------------------------------*/
.introduction {
    margin-top: min(calc(var(--vw-min-height) / var(--vw-min) * 100vw),calc(var(--vw-min-height) * 1px));
}
@media screen and (max-width:768px){
    .introduction {
        margin-top: 0;
    }
}
.introWrap {
    position: relative;
    padding: calc(134 / var(--vw-min) * 100vw) 0;
}
@media screen and (max-width:768px){
    .introWrap {
        padding: calc(83 / var(--vw-min) * 100vw) 0;
    }
}
.cont-tit {
   font-size:calc(50 / var(--vw-min) * 100vw);
   color: var(--color-orange);
   line-height: 1;
   font-weight: 800;
   text-align: center;
   writing-mode: vertical-rl;
   text-orientation: sideways;
   display: inline-block;
   position: absolute;
   top: 0;
   right: calc(40 / var(--vw-min) * 100vw);
   bottom: 0;
   margin: auto;
   z-index: 1;
}
@media screen and (max-width:768px){
    .cont-tit {
        font-size: calc(40 / var(--vw-min) * 100vw);
        display: flex;
        justify-content: center;
        writing-mode: unset;
        text-orientation: unset;
        position: relative;
        top: unset;
        right: unset;
        bottom: unset;
        margin: unset;
        padding-top: calc(70 / var(--vw-min) * 100vw);
    }
}
.intro__txtCont {
    width: calc(720 / var(--vw-min) * 100vw);
    height: calc(540 / var(--vw-min) * 100vw);
    position: relative;
    margin: 0 auto;
    border: calc(10 / var(--vw-min) * 100vw) solid var(--color-orange);
    overflow: hidden;
}
@media screen and (max-width:768px){
    .intro__txtCont {
        width: calc(560 / var(--vw-min) * 100vw);
        height: calc(672 / var(--vw-min) * 100vw);
    }
}
.intro__txtBg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background-color: var(--color-brown);
}
.intro__txtBg img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: multiply;
    filter: brightness(200%)
}
.intro__txtWrap {
    position: relative;
    z-index: 1;
    padding: calc(48 / var(--vw-min) * 100vw) calc(130 / var(--vw-min) * 100vw) calc(48 / var(--vw-min) * 100vw) calc(55 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .intro__txtWrap  {
        padding: calc(30 / var(--vw-min) * 100vw) calc(47 / var(--vw-min) * 100vw) calc(84 / var(--vw-min) * 100vw) calc(47 / var(--vw-min) * 100vw);
    }
}
.intro__txt {
    font-size: calc(24 / var(--vw-min) * 100vw);
    color: var(--color-orange);
    text-align: center;
    line-height: 2;
    font-weight: 700;
}
@media screen and (max-width:768px){
    .intro__txt {
        font-size: calc(24 / var(--vw-min) * 100vw);
        line-height: 1.85;
    }
}
.intro__txt:not(:last-child) {
    margin-bottom: calc(20 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .intro__txt:not(:last-child) {
        margin-bottom: calc(15 / var(--vw-min) * 100vw);
    }
}
.intro__imgWrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.intro__img-top,
.intro__img-bottom {
    width: 100%;
    height: calc(135 / var(--vw-min) * 100vw);
    display: flex;
    position: absolute;
}
@media screen and (max-width:768px){
    .intro__img-top,
    .intro__img-bottom {
        height: calc(84 / var(--vw-min) * 100vw);
    }
}
.intro__img-right,
.intro__img-left {
    width: calc(240 / var(--vw-min) * 100vw);
    height: 100%;
    position: absolute;
    top: calc(134 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .intro__img-right,
    .intro__img-left {
        width: calc(95 / var(--vw-min) * 100vw);
        top: calc(84 / var(--vw-min) * 100vw);
    }
    .intro__img-right .intro__img ,
    .intro__img-left .intro__img  {
        width: calc(95 / var(--vw-min) * 100vw);
        height: calc(84 / var(--vw-min) * 100vw);
    }
}
.intro__img-top {
    top: 0;
}
.intro__img-bottom {
    bottom: max(calc(-1 / var(--vw-min) * 100vw),-1px);
}
.intro__img-right {
    right: 0;
}
.intro__img-left {
    left: 0;
}
.intro__img {
    width: calc(240 / var(--vw-min) * 100vw);
    height:calc(135 / var(--vw-min) * 100vw);
    position: relative;
}
@media screen and (max-width:768px){
    .intro__img {
        width: calc(150 / var(--vw-min) * 100vw);
    }
    .intro__img-top .intro__img,
    .intro__img-bottom .intro__img {
        height: calc(89 / var(--vw-min) * 100vw);
    }
    .intro__img-right .intro__img,
    .intro__img-left .intro__img {
        height: calc(84 / var(--vw-min) * 100vw);
    }
}
.intro__img img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    object-fit: cover;
    pointer-events: none;
}
.is-imgChange img {
    animation: imgChange .6s ease-in-out;
}
@keyframes imgChange {
    0% {
        transform: rotateY(0deg);
        opacity: 1;
    }
    50% {
        transform: rotateY(180deg);
        opacity: 0;
    }
    100% {
        transform: rotateY(360deg);
        opacity: 1;
    }
}
@supports (background-image:url(../assets/img/introduction/intro_img1.webp)){
	.subSecBg {
        background: #fff;
    }
    body[data-page="introduction"] .subFullWrap .mainWrap {
        height: unset;
    }
}