@charset "utf-8";

/* pageTitle */
.fadeElement {
    opacity: 0;
    /*transform: translateY(20px);  少し下からフェードイン */
    transition: opacity 1s ease/*, transform 1s ease*/;
}
.fadeElement.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.page_eyeCatch_row{
    display: flex;
    justify-content: center;
    height:691.66px;
    position: relative;
    overflow: hidden;
}
.page_eyeCatch_row>.leftBox,
.page_eyeCatch_row>.rightBox{
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 2;
    transition: transform 3s ease;
    background-color: #302a24;
    display: flex;
    justify-content: center;
    align-items: center;
}
.page_eyeCatch_row>.leftBox{
    left: 0;
    transform: translateX(0%);
}
.page_eyeCatch_row>.rightBox{
    right: 0;
    transform: translateX(0%);
}
.page_eyeCatch_row.open>.leftBox{
    transform: translateX(-250px);
}
.page_eyeCatch_row.open>.rightBox{            
    transform: translateX(250px);
}
.page_eyeCatch_row>.leftBox:before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../images/top/bg01.svg);
    background-size: cover;
    background-position: center center;
    mix-blend-mode: multiply;
    opacity: 0.55;        
}
.page_eyeCatch_row>.centerBox{
    width:500px;
}
.page_eyeCatch_row>.leftBox>h4{
    max-width: 300px;
    width: 80%;
    position: relative;
}
.page_eyeCatch_row>.rightBox>p{
    font-size: 1em;
    line-height: 1.8;
    color: #fff;
    text-align: center;
}
.imgNotice{
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 0.75em;
    color: #fff;
    position: absolute;
    bottom: 0.5em;
    right: 0.5em;
}
.imgNotice.black{
    color: #302a24;
}
.under1024{
    display: none;
}
@media (max-width:1024px){
    .page_eyeCatch_row{
        flex-direction: column;
        aspect-ratio: 600/400;
        height:auto;
    }
    .page_eyeCatch_row>.leftBox,
    .page_eyeCatch_row>.rightBox{
        width: 100%;
        height: 50%;
        position: absolute;
        top: auto;
    }
    .page_eyeCatch_row>.leftBox{
        top: 0;
        left: 0;
        transform: translateY(0%);
    }
    .page_eyeCatch_row>.rightBox{
        bottom: 0;
        right: 0;
        transform: translateY(0%);
    }
    .page_eyeCatch_row.open>.leftBox{
        transform: translateY(-100%);
    }
    .page_eyeCatch_row.open>.rightBox{
        transform: translateY(100%);
    }
    .page_eyeCatch_row>.centerBox{
        width:100%;
    }
    .under1024{
        display: block;
    }
    .over1024{
        display: none;
    }
    .page_eyeCatch_row>.leftBox>h4{
        max-width: 250px;
        width: 50%;
    }
    .page_eyeCatch_row>.rightBox>p{
        font-size: 0.9em;
    }
    .imgNotice{
        font-size: 0.7em;
    }
}
@media (max-width:768px){
    .page_eyeCatch_row>.leftBox>h4{
        max-width: 200px;
        width: 50%;
    }
    .page_eyeCatch_row>.rightBox>p{
        font-size: 0.8em;
    }
    .imgNotice{
        font-size: 0.65em;
    }
}

/* mainTable */
.pageWrap{            
    background-color: #edeae8;
    padding: 80px 0;
}
.pageWrap>.mainTxt{
    max-width: 1100px;
    width: 80%;
    margin: 0 auto;
    margin-bottom: 50px;
}
.pageWrap>.mainTxt>p>span{
    font-size: 0.9em;
    line-height: 3;
    color: #343535;
}
.txtAppear{
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
}
.txtAppear.visible {
    animation: slideUpFade 0.8s ease-out forwards;
}
@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (max-width:1024px){
    .pageWrap>.mainTxt{
        margin-bottom: 30px;
    }
    .pageWrap>.mainTxt>p{
        font-size: 0.8em;
    }
}
@media (max-width:768px){
    .pageWrap>.mainTxt>p{
        font-size: 0.75em;
    }
}
@media (max-width:500px){
    .pageWrap{
        padding: 50px 0;
    }
    .pageWrap>.mainTxt{
        width: 90%;
    }
}

/* update */
.imgRow01{
    display: flex;
    justify-content: flex-end;
    background: linear-gradient(180deg,#edeae8 0%,#edeae8 30%,#302a24 30%,#302a24 100%);
    padding-bottom: 80px;
}
.imgRow01>p{
    overflow: hidden;
    position: relative;
}
.imgRow01>p>img{
    opacity: 0;
    transition: opacity 0.5s ease;
    transition-delay: 1s; /* 幕が完全に上がるタイミングに合わせる */
}
.imgRow01>p.show>img{
    opacity: 1;
}
.imgRow01>p:before{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0%;
    background-color: #adaf8d;
    z-index: 2;
}
.imgRow01>p.show:before{
    animation: curtainOpen 1.5s ease forwards;
}
@keyframes curtainOpen {
    0% {
        height: 0%;
        transform: translateY(0);
    }
    60% {
        height: 100%;
        transform: translateY(0);
    }
    100% {
        height: 100%;
        transform: translateY(-100%);
    }
}
.imgRow01>p:first-of-type{
    margin-right: 30px;
}
@media (max-width:1500px){
    .imgRow01>p:nth-child(1){
        width: 21.33%;
    }
    .imgRow01>p:nth-child(2){
        width: 64%;
    }
}
@media (max-width:1024px){
    .imgRow01{
        flex-direction: column;
        align-items: flex-end;
        background: linear-gradient(180deg,#edeae8 0%,#edeae8 15%,#302a24 15%,#302a24 100%);
        padding-bottom: 30px;
    }
    .imgRow01>p:nth-child(1){
        width: 30%;
        margin-bottom: 30px;
    }
    .imgRow01>p:nth-child(2){
        width: 80%;
    }
}
@media (max-width:768px){
    .imgRow01>p:nth-child(1){
        width: 50%;
    }
    .imgRow01>p:nth-child(2){
        width: 100%;
    }
}
@media (max-width:500px){
    .imgRow01{
        padding-bottom: 50px;
    }
}
@media (max-width:375px){
    .imgRow01>p:nth-child(1) {
        width: 60%;
    }
}


.imgRow02{
    background-color: #302a24;
    padding-bottom: 80px;
}
.imgRow02>ul{
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
}
.imgRow02>ul>li>p{
    overflow: hidden;
    position: relative;
}
.imgRow02>ul>li>p>img{
    opacity: 0;
    transition: opacity 0.5s ease;
    transition-delay: 1s; /* 幕が完全に上がるタイミングに合わせる */
}
.imgRow02>ul>li>p.show>img{
    opacity: 1;
}
.imgRow02>ul>li>p:before{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0%;
    background-color: #adaf8d;
    z-index: 2;
}
.imgRow02>ul>li>p.show:before{
    animation: curtainOpen 1.5s ease forwards;
}
.imgRow02>ul>li:first-of-type{
    margin-right: 30px;
}
@media (max-width:1024px){
    .imgRow02>ul{
        flex-direction: column;
    }
    .imgRow02>ul>li{
        width: 100%;
        display: flex;
    }
    .imgRow02>ul>li>p{
        width: 70%;
    }
    .imgRow02>ul>li:first-of-type{
        margin-bottom: 30px;
    }
    .imgRow02>ul>li:last-of-type{
        justify-content: flex-end;
    }
}
@media (max-width:768px){
    .imgRow02>ul>li>p{
        width: 90%;
    }
}


.imgRow03{
    background-color: #302a24;
    padding: 80px 0;
    position: relative;
    margin-bottom: 80px;
}
.imgRow03:before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../images/top/bg01.svg);
    background-position: center center;
    mix-blend-mode: multiply;
    opacity: 0.55;
}
.imgRow03>ul{
    max-width: 1320px;
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
}
.imgRow03>ul>li{
    max-width: 296px;
    width: 23%;
    overflow: hidden;
    position: relative;
}
.imgRow03>ul>li>img{
    opacity: 0;
    transition: opacity 0.5s ease;
    transition-delay: 1s; /* 幕が完全に上がるタイミングに合わせる */
}
.imgRow03>ul>li.show>img{
    opacity: 1;
}
.imgRow03>ul>li:before{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0%;
    background-color: #adaf8d;
    z-index: 2;
}
.imgRow03>ul>li.show:before{
    animation: curtainOpen 1.5s ease forwards;
}
@media (max-width:1024px){
    .imgRow03>ul{
        width: 65%;
    }
    .imgRow03>ul>li{
        max-width: none;
        width: 48%;
        margin-bottom: 30px;
    }
    .imgRow03>ul>li:nth-child(3),
    .imgRow03>ul>li:nth-child(4){
        margin-bottom: 0px;
    }
}
@media (max-width:768px){
    .imgRow03>ul{
        width: 75%;
    }
}
@media (max-width:500px){
    .imgRow03>ul{
        width: 80%;
    }
}


.contentRow01{
    margin-bottom: 80px;
}
.contentRow01>ul,
.contentRow02>ul{
    max-width: 1320px;
    width: 90%;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
}
.contentRow02{
    margin-bottom: 80px;
}
.contentRow03{
    max-width: 1320px;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 80px;
    background-color: #fff;
    padding: 50px;
    box-sizing: border-box;
}
.contentRow01>ul>li,
.contentRow02>ul>li{
    width: 50%;
}
.contentRow01>ul>li.txtBox{
    align-self: flex-end;
    margin-top: 80px;
}
.contentRow02>ul>li.txtBox{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 80px;
}
.contentRow03>.txtBox{
    margin-bottom: 50px;
}
.contentRow01>ul>li>.txtBox_inner,
.contentRow02>ul>li>.txtBox_inner{
    width: 80%;
    margin-bottom: 80px;
}        
.contentRow01>ul>li>.txtBox_inner:last-of-type,
.contentRow02>ul>li>.txtBox_inner:last-of-type{
    margin-bottom: 0px;
}
.txtBox_inner>h5{
    margin-bottom: 50px;
}
.txtBox_inner>p,
.contentRow03>.txtBox>p,
.contentRow03>ul>li.txtBox>p{
    font-size: 0.8em;
    line-height: 3;
    color: #302a24;
}
.txtBox_inner>p.em,
.contentRow03>.txtBox>p.em,
.contentRow03>ul>li.txtBox>p.em{
    font-size: 1em;
    line-height: 2.5;
    color: #302a24;
    margin-bottom: 30px;
}
.contentRow03>ul>li.txtBox>p.em>span{
    display: inline-block;
    padding: 0.5em 1em;
    background-color: #302a24;
    font-size: 1em;
    line-height: 1;
    color: #fff;
    border-radius: 10px;
}
.contentRow01>ul>li.imgBox{
    aspect-ratio: 940/1080;
    background-image: url(../images/hitotsu/bg01.jpg);
    background-size: cover;
    background-position: center center;
}
.contentRow02>ul>li.imgBox{
    aspect-ratio: 940/1080;
    background-image: url(../images/hitotsu/bg04.jpg);
    background-size: cover;
    background-position: center center;
}
.txtBox_innerRow{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.txtBox_innerRow>.imgBox{
    width: 48%;
    aspect-ratio: 320/200;
}
.txtBox_innerRow>.txtBox{
    width: 48%;
}
.colorS>.imgBox{
    background-image: url(../images/hitotsu/bg02.jpg);
    background-size: cover;            
}
.customS>.imgBox{
    background-image: url(../images/hitotsu/bg03.jpg);
    background-size: cover;
}
.txtBox_innerRow>.txtBox>h5{
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 1em;
    line-height: 1.4;
    color: #fff;
    padding: 0.5em 0;
    text-align: center;
    margin-bottom: 10px;
}
.txtBox_innerRow>.txtBox>h5>span{
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 0.8em;
    color: #fff;
    display: block;
}
.colorS>.txtBox>h5{
    background-color: #940006;
}
.customS>.txtBox>h5{
    background-color: #404036;
}
.txtBox_innerRow>.txtBox>p{
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 0.8em;
    line-height: 1.8;
    color: #302a24;
}
.optionBox{
    padding: 30px;
    box-sizing: border-box;
    border: 1px solid #302a24;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.optionBox>.txtBox{
    width: 55%;
}
.optionBox>.imgBox{
    width: 45%;
}
@media (max-width:1500px){
    .contentRow01>ul>li>.txtBox_inner,
    .contentRow02>ul>li>.txtBox_inner{
        width: 90%;
        margin-bottom: 80px;
    }
    .txtBox_inner>p,
    .contentRow03>.txtBox>p,
    .contentRow03>ul>li.txtBox>p,
    .txtBox_innerRow>.txtBox>p{
        font-size: 0.75em;
    }
    .txtBox_inner>p.em,
    .contentRow03>.txtBox>p.em,
    .contentRow03>ul>li.txtBox>p.em,
    .txtBox_innerRow>.txtBox>h5{
        font-size: 0.9em;
    }
}
@media (max-width:1024px){
    .contentRow01{
        margin-bottom: 80px;
    }
    .contentRow03{
        padding: 30px;
    }
    .contentRow01>ul,
    .contentRow02>ul{
        max-width: 600px;
        width: 65%;
        flex-direction: column;
    }
    .contentRow03{
        max-width: 700px;
        width: 75%;
    }
    .contentRow01>ul>li,
    .contentRow02>ul>li{
        width: 100%;
    }
    .contentRow01>ul>li.txtBox{
        order: 1;
        margin-top: 0px;
    }
    .contentRow02>ul>li.txtBox{
        margin-top: 0px;
    }
    .contentRow01>ul>li.imgBox,
    .contentRow02>ul>li.imgBox{
        aspect-ratio: 250/150;
        margin-bottom: 30px;
    }
    .contentRow01>ul>li>.txtBox_inner,
    .contentRow02>ul>li>.txtBox_inner{
        width: 100%;
        margin-bottom: 50px;
    }
    .optionBox{
        padding: 20px;
    }
    .optionBox>.txtBox,
    .optionBox>.imgBox{
        width: 100%;
    }
    .optionBox>.imgBox{
        margin-top: 20px;
    }
}
@media (max-width:768px){
    .contentRow01>ul,
    .contentRow02>ul{
        width: 75%;
    }
    .contentRow03{
        width: 85%;
    }             
    .txtBox_inner>p,
    .contentRow03>.txtBox>p,
    .contentRow03>ul>li.txtBox>p,
    .txtBox_innerRow>.txtBox>p{
        font-size: 0.7em;
    }
    .txtBox_inner>p.em,
    .contentRow03>.txtBox>p.em,
    .contentRow03>ul>li.txtBox>p.em,
    .txtBox_innerRow>.txtBox>h5{
        font-size: 0.8em;
    }
}
@media (max-width:500px){
    .contentRow01>ul,
    .contentRow02>ul{
        width: 100%;
    }
    .contentRow03{
        width: 90%;
    }
    .contentRow01>ul>li.txtBox,
    .contentRow02>ul>li.txtBox {
        width: 90%;
        margin: 0 auto;
    }

}
@media (max-width:375px){
    .contentRow03{
        width: 95%;
    }
    .txtBox_innerRow>.imgBox,
    .txtBox_innerRow>.txtBox{
        width: 100%;
    }
}


.pageNotice{
    width: 1100px;
    margin: 0 auto;
    margin-bottom: 0px;
}
.pageNotice p{
    font-size: 0.75em;
    color: #302a24;
}
@media (max-width:1320px){
    .pageNotice{
        width: 80%;
    }
}
@media (max-width:1200px){
    .pageNotice p{
        font-size: 0.65em;
    }
}
@media (max-width:960px){
    .pageNotice p{
        font-size: 0.55em;
    }
}
@media (max-width:768px){
    .pageNotice{
        width: 90%;
    }
}
@media (max-width:430px){
    .pageNotice{
        margin-bottom: 50px;
    }
}