@charset "utf-8";

/* loadingAnimation 
.loadingAnimation{
    width: 100%;
    height: 100vh;            
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}
.loadingAnimation:before{
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    animation: opacity 2s ease-out forwards;
}

.loadingAnimation.loaded:before {            
    background-image: url(../images/top/bg03.png);
    opacity: 0.5;
}

.loadingAnimation p {
    width: 35%;
    position: absolute;
    bottom: -50px; 
    opacity: 0;
}
@keyframes slideUp {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
.loadingAnimation p:first-of-type {
    left: 0;
}
.loadingAnimation p:last-of-type {
    right: 0;
}

.loadingAnimation h2 {
    width: 450px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
        filter: blur(30px);
    }
    100% {
        opacity: 1;
        filter: blur(0px);
    }
}

.loadingAnimation.fadeout {
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.5s ease-out;
}

.no-scroll {
    overflow: hidden;
}
@media (max-width: 1500px) {
    .loadingAnimation h2 {
        width: 30%;
    }
}
@media (max-width: 768px) {
    .loadingAnimation h2 {
        width: 58.59%;
    }

    .loadingAnimation p {
        width: 70%;
    }
}*/

/* topWrap  eyeCatch_wrap*/
.topWrap{
    background-image: url(../images/top/bg01.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}
.eyeCatch_wrap{
    aspect-ratio: 1920/1080;
    width: 100%;
    height: 100%;
    background-color: #000;
    position: relative;
}
.eyeCatch_wrap:before{
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    position: absolute;
    top: 0;
    left: 0;
}
.eyeCatch_wrap video{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.eyeCatch_wrap>.eyeCatch_videoTxt{
    width: 100%;
    position: absolute;
    top: 0;
    left:0;
    animation: fadeIn 2s ease-in-out forwards;
    z-index: 1;
}        
.eyeCatch_wrap>.eyeCatch_img{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index:2;
}
.eyeCatch_wrap > .eyeCatch_img.show{
    animation: fadeIn 2s ease-in-out forwards;
}
@keyframes fadeIn{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
.eyeCatch_img>.afterVideo{
    position: relative;
    overflow: hidden;
}
.eyeCatch_img>.afterVideo>.absolute{
    z-index: 3;
}
.particleBox{
    aspect-ratio: 300/1600;
    width:10%;
    position: absolute;
    left: 30%;
    bottom: 6%;
    transform: translate(-30%,0);
    z-index: 2;
}
.particleBox canvas{
    width: 100%;
    height: 100%;
}
@media (max-width:768px){
    .eyeCatch_wrap{
        aspect-ratio: 768/1000;
    }
    .particleBox{
        aspect-ratio: 300/2000;
        width:18%;
        position: absolute;
        left: 50%;
        bottom: 29%;
        transform: translate(-50%,0);
    }
}

/* appearPoint */
.appearPoint{
    background-image: url(../images/common/bg01.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 30px 0;
    border-top: 1px solid #d3adaf;
    border-bottom: 1px solid #d3adaf;
}
.fadeSlide{
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 1s ease-out,transform 1s ease-out;
}
.fadeSlide.show{
    opacity: 1;
    transform: translateX(0);
}
.appearPoint_inner{
    width: 1100px;
    margin: 0 auto;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out,transform 1s ease-out;
}
.appearPoint_inner.show{
    opacity: 1;
    transform: translateY(0);
}
.appearDeco{
    width: 100%;
    height: 10px;
    position: relative;
    margin-bottom: 20px;
    opacity: 0;
    transition: opacity 0.5s ease-out;
}
.appearDeco.show{
    opacity: 1;
}
.appearDeco span{
    content: '';
    position: absolute;
    width:0%;
    height: 1px;
    background-color:#b46c62;
    left: 50%;
    transform: translate(-50%,0);
    transition:width 0.5s ease-out,left 0.5s ease-out;
}
.appearDeco span:first-of-type{
    top: 0;
}
.appearDeco span:nth-of-type(2){
    top: 5px;
}
.appearDeco span:last-of-type{
    top: 10px;
}
.appearDeco.show span{
    width: 100%;
    left: 0;
    transform: translate(0,0);
}
.appearNotice{
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out,transform 1s ease-out;
}
.appearNotice.show{
    opacity: 1;
    transform: translateY(0px);
}
.appearNotice p{
    width: 1100px;
    margin: 0 auto;
    font-size: 0.75em;
    text-align: center;
    color: #727171;
}
.under1200,
.under500{
    display: none;
}
@media (max-width:1500px){
    .appearPoint_inner{
        width: 73.33%;
    }
    .appearNotice p{
        width: 90%;
    }
}
@media (max-width:1200px){
    .appearPoint_inner{
        width: 80%;
    }
    .under1200{
        display: block;
    }
}
@media (max-width:1000px){
    .appearPoint_inner{
        width: 90%;
    }
}
@media (max-width:768px){
    .appearPoint_inner{
        width: 500px;
    }
}
@media (max-width:600px){
    .appearPoint_inner{
        width: 83.33%;
    }
}
@media (max-width:500px){
    .appearPoint_inner{
        width: 90%;
    }
    .under500{
        display:block;
    }
}

/* appearPoint02 */
.appearPoint02{
    background-color: #b46c62;
    padding: 10px 0;
}
.appearPoint_inner02{
    width: 1320px;
    margin: 0 auto;
}
.appearPoint_inner02>ul{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.appearPoint_inner02>ul>li{
    font-size:1.25em;
    letter-spacing: 0.05em;
    color: #fff;
    padding: 20px;
    box-sizing: border-box;
}
.appearPoint_inner02>ul>li>span{
    font-size: 1.25em;
    letter-spacing: 0.05em;
    color: #fff;
}
.appearPoint_inner02>ul>li>span.small {
    font-size:0.75em;
}
.appearPoint_inner02>ul>li:first-of-type,
.appearPoint_inner02>ul>li:nth-of-type(2),
.appearPoint_inner02>ul>li:nth-of-type(3),
.appearPoint_inner02>ul>li:nth-of-type(4){
    border-right: 1px solid #fff;
}
@media (max-width:1584px){
    .appearPoint_inner02{
        width: 90%;
    }
}
@media (max-width:1400px){
    .appearPoint_inner02>ul>li{
        padding: 20px 80px;
    }
    .appearPoint_inner02>ul>li:nth-of-type(3){
        border-right: none;
    }
}
@media (max-width:1200px){
    .appearPoint_inner02 {
        width: 90%;
    }
    .appearPoint_inner02>ul>li{
        font-size:1.15em;
    }
}
@media (max-width:1112px){
    .appearPoint_inner02>ul>li{
        padding: 20px 60px;
    }
}
@media (max-width:1000px){
    .appearPoint_inner02>ul{
        flex-direction: column;
    }
    .appearPoint_inner02>ul>li{
        text-align: center;
        padding: 20px 0px;        
    }
    .appearPoint_inner02>ul>li:first-of-type,
    .appearPoint_inner02>ul>li:nth-of-type(2),
    .appearPoint_inner02>ul>li:nth-of-type(3),
    .appearPoint_inner02>ul>li:nth-of-type(4){
        border-right: none;
        border-bottom: 1px solid #fff;      
    }
}
@media (max-width:768px){
    .appearPoint_inner02{
        width: 90%;
    }
}
@media (max-width:350px){
    .appearPoint_inner02{
        width: 95%;
    }
}

/* mainTxt */
.mainTxt{
    padding: 80px 0;
}
.mainTxt_inner{
    width: 1100px;
    margin: 0 auto;
    text-align: center;
}
.mainTxt_inner p.em{
    width: 90px;
    margin: 0 auto;
    margin-bottom: 50px;                
}
.mainTxt_inner p.em.scroll_fadeIn{
    opacity: 0;
    transition: opacity 5s ease-out;
}
.mainTxt_inner p.em.scroll_fadeIn.show{
    opacity: 1;
}
.scroll_fadeIn{
    opacity: 0;
    transition: opacity 2s ease-out;
}
.scroll_fadeIn.show{
    opacity: 1;
}
.mainTxt_inner h3{
    margin-bottom: 20px;
}
.requestBtn p{
    width: 430px;
    margin: 0 auto;
    margin-top: 20px;
}
.requestBtn p a{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #b46c62;
    font-size: 1.5em;
    color: #fff;
    transition: 0.5s all;
}
.requestBtn p a:hover,
.requestBtn p a:active{
    transition: 0.5s all;
    background-color: #873a30;
}
@media (max-width:1500px){
    .mainTxt_inner{
        width: 73.33%;
    }
    .mainTxt_inner p.em{
        width: 8.18%;
    }
    .requestBtn p{
        width: 28.66%;
    }
}
@media (max-width:1200px){
    .mainTxt_inner{
        width: 80%;
    }
    .mainTxt_inner p.em{
        width: 9.37%;
    }
    .requestBtn p{
        width: 35.83%;
    }
}
@media (max-width:1000px){
    .mainTxt_inner{
        width: 90%;
    }
    .mainTxt_inner p.em{
        width: 10%;
    }
    .requestBtn p{
        width: 43%;
    }
}
@media (max-width:768px){
    .mainTxt_inner{
        width: 500px;
    }
    .mainTxt_inner p.em{
        width: 100%;
    }
    .mainTxt_inner h3{
        margin-bottom: 30px;
    }
    .requestBtn p{
        width: 400px;
    }
}
@media (max-width:600px){
    .mainTxt_inner{
        width: 83.33%;
    }
    .requestBtn p{
        width: 66.66%;
    }
}
@media (max-width:500px){
    .mainTxt{
        padding: 50px 0;
    }
    .mainTxt_inner{
        width: 90%;
    }
    .requestBtn p{
        width: 70%;
    }
}

/* contentsRow */
.contentsRow{
    display: flex;
    flex-wrap: wrap;
    background-image: url(../images/top/bg02.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.contentsTxt,
.contentsVideo{
    width: 50%;
    height: auto;
}
.contentsVideo video{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.relative{
    position: relative;
}
.absolute{
    position: absolute;
    top: 0;
    left: 0;
}
.contentsTxt a{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: #727171;
    transition: 0.5s all;
    padding: 50px 0;
}
.contentsTxt a:hover,
.contentsTxt a:active{
    opacity: 0.5;
    transition: 0.5s all;
}
.contentsRow:nth-of-type(odd)>.contentsTxt>a{
    justify-content: flex-start;
}
.contentsRow:nth-of-type(even)>.contentsTxt>a{
    justify-content: flex-end;
}
.contentsTxt a .ttlBox{
    width: 100px;
    margin: 0 10%;                
}
.contentsTxt a .txtBox h4{
    font-size: 2em;
    font-weight: 400;
    margin-bottom: 20px;
}
.contentsTxt a .txtBox p{
    font-size: 1em;
    line-height: 2;
}
@media (max-width:1800px){
    .contentsTxt a .ttlBox{
        margin: 0 8%;                
    }
}
@media (max-width:1600px){
    .contentsTxt a .ttlBox{
        margin: 0 5%;                
    }
}
@media (max-width:1500px){
    .contentsTxt a .ttlBox{
        width: 13.33%;               
    }
    .contentsTxt a .txtBox h4{
        font-size: 1.75em;
    }
}
@media (max-width:1400px){
    .contentsTxt a .txtBox h4{
        font-size: 1.5em;
    }
    .contentsTxt a .txtBox p{
        font-size: 0.9em;
    }
}
@media (max-width:1200px){
    .contentsRow{
        height: auto;
    }
    .contentsTxt,
    .contentsVideo{
        width: 100%;
    }
    .contentsVideo{
        aspect-ratio: 1200/500;
    }
    .contentsTxt a{
        flex-direction: column;
        padding: 80px 0;
    }
    .contentsTxt a .ttlBox{
        width: 66.66%;
        margin: 0 auto;
        margin-bottom: 30px;             
    }
    .contentsRow:nth-of-type(even)>.contentsTxt>a>.txtBox{
        order: 1;
    }
    .contentsRow:nth-of-type(even)>.contentsVideo{
        order: 1;
    }
    .contentsTxt a .txtBox h4{
        font-size: 1.75em;
    }
    .contentsTxt a .txtBox p{
        font-size: 1em;
    }
}
@media (max-width:1000px){
    .contentsTxt a .ttlBox{
        width: 70%;           
    }
}
@media (max-width:768px){
    .contentsVideo{
        aspect-ratio: 768/400;
    }
    .contentsTxt a .ttlBox{
        width: 80%;           
    }
}
@media (max-width:600px){
    .contentsTxt a .ttlBox{
        width: 90%;           
    }
}
@media (max-width:500px){
    .contentsTxt a{
        padding: 50px 0;
    }
}
@media (max-width:450px){
    .contentsTxt a .ttlBox{
        width: 100%;           
    }
}

/* specialContents */
.specialContents{
    padding: 80px 0;
}
.specialContents_wrap{
    width: 1100px;
    margin: 0 auto;
    position: relative;
}
.specialContents_wrap:before{
    width: 100%;
    height: 100%;
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    background-color: #767676;
    mix-blend-mode: multiply;
}
.specialContents_wrapInner{
    padding: 50px 0;
    position: relative;
}
.specialContents_wrapInner h3{
    width: 90%;
    margin: 0 auto;
}
.specialContents_wrapInner p.subTtl{
    width: 90%;
    margin: 0 auto;
    margin-bottom: 20px;
}
.decoBox{
    width: 100%;
    height: 10px;
    position: relative;
}
.decoBox span{
    content:'';
    width: 100%;
    height: 1px;
    background-color: #fff;
    position: absolute;
}
.decoBox span:first-of-type{
    top: 0;
    left: 0;
}
.decoBox span:nth-of-type(2){
    top: 5px;
    left: 0;
}
.decoBox span:last-of-type{
    top: 10px;
    left: 0;
}
.specialContents_wrapInner h3{
    padding: 20px 0;
}
.specialContents_txt{
    color: #fff;
    text-align: center;
    margin-top: 20px;
}
.specialContents_txt ul{
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.specialContents_txt ul li{
    font-size: 1em;
    padding: 0 1.25em;
    box-sizing: border-box;
    position: relative;
}
.specialContents_txt ul li:before{
    content: '';
    width: 1em;
    height: 1em;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0,-50%);
}
.specialContents_txt>p:first-of-type{
    font-size: 1em;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}
.specialContents_txt>p:last-of-type{
    font-size: 1em;
}
.loginBtn p{
    width: 430px;
    margin: 0 auto;
    margin-top: 30px;
}
.loginBtn p a{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #b46c62;
    font-size: 1.5em;
    color: #fff;
    transition: 0.5s all;
}
.loginBtn p a:hover,
.loginBtn p a:active{
    transition: 0.5s all;
    background-color: #873a30;
}
.under1400{
    display: none;
}
@media (max-width:1500px){
    .specialContents_wrap{
        width: 73.33%;
    }
    .loginBtn p{
        width: 39.09%;
    }
}
@media (max-width:1400px){
    .under1400{
        display: block;
    }
}
@media (max-width:1300px){
    .specialContents_txt ul{
        width: 300px;
        margin: 0 auto;
        margin-bottom: 20px;
        flex-direction: column;
        text-align: left;
    }
}
@media (max-width:1200px){
    .specialContents_wrap{
        width: 80%;
    }
    .loginBtn p{
        width: 44.79%;
    }
}
@media (max-width:1000px){
    .specialContents_wrap{
        width: 90%;
    }
    .loginBtn p{
        width: 47.77%;
    }
}
@media (max-width:768px){
    .specialContents_wrap{
        width: 80%;
    }
    .specialContents_wrapInner{
        padding: 30px 0;
    }
    .specialContents_txt ul{
        width: 220px;
    }
    .loginBtn p{
        width: 400px;
    }
}
@media (max-width:600px){
    .loginBtn p{
        width: 83.33%;
    }
}
@media (max-width:500px){
    .specialContents{
        padding: 50px 0;
    }
    .specialContents_wrap{
        width: 90%;
    }
    .loginBtn p{
        width: 77.78%;
    }
}
@media (max-width:300px){
    .specialContents_txt ul{
        width: 90%;
    }
}

/* footerBtn */
.footerBtn{
    margin-bottom: 80px;
}
.footerBtn_wrap>.requestBtn>p{
    margin-top: 0;
}
@media (max-width:500px){
    .footerBtn{
        margin-bottom: 50px;
    }
}