@charset "utf-8";
/* Top */
.container{max-width: 1200px;}

/* MV */
@media screen and (min-width: 769px){
    .mv{overflow: hidden; background: url("../img/top/mv-bg.webp") no-repeat top left/cover; width: 100%; line-height: 0; text-align: center; height: 55.55vw; position: relative;}
    .mv picture{display: block;}
    .mv-info{position: absolute; top: 3.25%; left: 0; right: 0; margin: 0 auto; width: 94.1%;}
    .mv-img{position: absolute; top: 27%; left: 0; right: 0; margin: 0 auto; width: 94.45%;}
    .mv-cap{position: absolute; top: 81.125%; right: 2.8%; width: 17.09%;}
    .mv-tit{position: absolute; top: 85.25%; left: 0; right: 0; margin: 0 auto; width: 95.14%;}   
}

@media screen and (max-width: 768px){
	.mv{overflow: hidden; background: url("../img/top/mv-bg_sp.webp") no-repeat top left/cover; width: 100%; line-height: 0; height: 160vw; position: relative;}
    .mv picture{display: block;}
    .mv-info{position: absolute; top: 1%; right: -0.1%; width: 86.667%;}
    .mv-img{position: absolute; top: 9.5%; left: 19.2%; width: 61.34%;}
    .mv-cap{position: absolute; top: 78%; right: 19.2%; width: 43.73%;}
    .mv-tit{position: absolute; top: 1.1%; left: 1%; width: 10.933%;}    
}

/* MV Annimation */
.mv-img{will-change: filter; filter: /* grayscale(100%) */ /* brightness(80%)*/;  opacity: 0; transition: opacity 1s, filter .8s ease 2.2s;}
.mv.is-view .mv-img{ opacity: 1; filter: /* grayscale(0) */ /* brightness(100%) */;}

.mv-info{opacity: 0; transition: opacity 1s ease .6s;}
.mv.is-view .mv-info{opacity: 1;}

.mv-cap{opacity: 0; transition: opacity 1s;}
.mv.is-view .mv-cap{opacity: 1;}

.mv-tit{opacity: 0; transform: translateY(50px); transition: .8s ease 1s;}
.mv.is-view .mv-tit{opacity: 1; transform: translateY(0);}

/* Message */
.message{background: rgba(236, 240, 234, 0.60); border-bottom: 8px solid #CAA73A; padding: 60px 25px 80px;}
.message .inner{max-width: 796px; width: 100%; margin: 0 auto;}
.message .tit{font-size: 4rem; line-height: 1.12; color: #00B1A0; font-weight: 600; letter-spacing: 0.1em; font-family: "Noto Serif JP", serif;}
.message .txt{margin: 30px 0;}
.message .txt p:not(:last-of-type){margin-bottom: 20px;}

@media screen and (max-width: 768px){
    .message{padding: 44px 25px 36px;}
	.message .tit{font-size: 3.6rem; line-height: 1.25;}
    .message .txt{margin: 20px 0 30px;}
    .message .txt p:not(:last-of-type){margin-bottom: 16px;}
}

/* Title */
.title{text-align: center; font-size: 1.8rem; font-weight: 500; line-height: 1; letter-spacing: 0.15em; font-family: "Noto Serif JP", serif;}
.title span{display: block; font-size: 4.8rem; font-weight: 600; line-height: 1; letter-spacing: 0.1em; color: #CAA73A; font-family: "Cormorant", serif; margin: 0 0 12px; overflow: hidden;}
.title big{font-size: 100%; transition: .8s ease .4s; transform: translateY(100%); display: block;}
.title.cl-green span{color: #00B1A0;}
.title.is-view big{transform: translateY(0);}

@media screen and (max-width: 768px){
	.title{font-size: 1.6rem;}
	.title span{font-size: 4rem; margin: 0 0 8px;}
}

/* Info */
@media screen and (min-width: 769px){
    .info{border-bottom: 8px solid rgba(202, 167, 58, 0.20); padding: 60px 0;}	
}

@media screen and (max-width: 768px){
	.info{padding: 36px 0 47px;}
}

/* Special */
@media screen and (min-width: 769px){
    .special{display: flex; justify-content: space-between; margin: 0 0 60px;}
    .special li{width: 30.75%;}
    .special a{display: block; transition: .3s;}
    .special a:hover{box-shadow: 0 0 15px rgba(0,0,0,.3);}	
}

@media screen and (max-width: 768px){
    .special{margin: 0 auto 40px; max-width: 369px; width: 100%;}
	.special li:not(:last-of-type){margin: 0 0 16px;}
}

/* News */
.news{margin: 0 0 45px;}
.news .title{margin: 0 0 15px;}
.news-list{max-width: 744px; margin: 0 auto;}
.news-list li{border-bottom: 1px solid #CAA73A; padding: 20px 0 16px;}
.news-list time{line-height: 1; display: block; margin: 0 0 16px; font-family: "Noto Serif JP", serif; letter-spacing: 0.1em; font-weight: 600;}
.news-list .txt{line-height: 1.375; position: relative; padding-right: 20px;}
.news-list .txt::after{content: ""; border: solid #CAA73A; border-width: 0 1px 1px 0; display: inline-block; padding: 4px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); position: absolute; top: 50%; right: 3px; margin-top: -4px;}
.news-list a:hover{color: #CAA73A;}

@media screen and (min-width: 769px){
	.news-list .txt{text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
}

@media screen and (max-width: 768px){
    .news{margin: 0 0 30px;}
	.news-list li{padding: 15px 0 12px;}
    .news-list time{margin: 0 0 10px;}
    .news-list .txt{font-size: 1.4rem; line-height: 1.58; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
}

/* Button X */
.btn-x{width: 418px; margin: 0 auto;}
.btn-x a{width: 100%; height: 70px; display: flex; justify-content: center; align-items: center; border-left: 8px solid #CAA73A; background: url("../img/top/bg-btn.webp") no-repeat top left/100% 100%; transition: .3s;}
.btn-x p{margin: 0 0 0 28px; font-weight: 600; line-height: 1.4; letter-spacing: 0.1em; color: #00B1A0; background: #fff; display: inline-block; padding: 0 6px;}
.btn-x p::after{content: ""; border: solid #00B1A0; border-width: 0 1px 1px 0; display: inline-block; padding: 4px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); margin: 0 0 0 15px; position: relative; top: -1px;}
.btn-x a:hover{background: #00B1A0;}
.btn-x a:hover p{background: none; color: #fff;}
.btn-x a:hover p::after{border: solid #fff; border-width: 0 1px 1px 0;}

@media screen and (max-width: 480px){
	.btn-x{width: calc(100% + 50px); margin: 0 -25px;}
    .btn-x p{font-size: 1.4rem; line-height: 1.78; letter-spacing: 0.1em; margin: 0 0 0 20px;}
}

/* Profile */
@media screen and (min-width: 769px){
	.profile{border-bottom: 8px solid rgba(0, 177, 160, 0.20); padding: 60px 0;}
    .profile .title{margin: 0 0 40px;}
}

@media screen and (max-width: 768px){
    .profile .container{width: 100%;}
	.profile .title{margin: 0 0 20px;}
}

.profile-box .item{background: rgba(236, 240, 234, 0.60); border-top: 8px solid #00B1A0; padding: 35px 33px 90px; position: relative;}
.profile-box .name{font-size: 3.4rem; line-height: 1; color: #CAA73A; font-weight: 600; letter-spacing: 0.15em; font-family: "Noto Serif JP", serif; margin: 0 0 20px;}
.profile-box .txt{font-size: 1.4rem; line-height: 1.7; letter-spacing: 0.06em;}
.profile-box .name-en{font-size: 5rem; font-weight: 400; line-height: 1; color: rgba(202, 167, 58, 0.30); font-family: "Sorts Mill Goudy", serif; position: absolute; bottom: -0.24em; right: 0; text-align: right;}

@media screen and (min-width: 1024px){
    .profile-box{display: flex; justify-content: space-between; width: 100%;}
    .profile-box .item{width: 30.75%;}
}

@media screen and (max-width: 1023px){
    .profile-box .item{margin: 0 0 40px;}
}

@media screen and (max-width: 768px){
	.profile-box .item{padding: 35px 25px 60px;}
	.profile-box .item:nth-of-type(2){padding-bottom: 90px;}
    .profile-box .name-en{font-size: min(12.3vw,5rem);}
}

/* Audio */
@media screen and (min-width: 769px){
	.audio{padding: 50px 0;}
    .audio .title{margin: 0 0 30px;}
}

@media screen and (max-width: 768px){
	.audio{padding: 0 0 50px;}
    .audio .container{width: 100%;}
    .audio .title{margin: 0 0 20px;}
}

.audio-box{text-align: center;}
.audio-box .head{background: #00B1A0; color: #fff; padding: 16px 0; font-family: "Noto Serif JP", serif;}
.audio-box .name{font-size: 2rem; line-height: 1.5; font-weight: 500; margin: 6px 0 0 0;}
.audio-box .name span{font-size: 3rem; line-height: 1; letter-spacing: 0.05em;}
.audio-box .txt{margin: 30px 0;}

@media screen and (min-width: 769px){
	.audio-box{width: 655px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start;}
    .audio-box .img{width: 232px;}
    .audio-box .inner{width: 377px;}
}

@media screen and (max-width: 768px){
	.audio-box .img{width: 184px; margin: 0 auto 30px;}
    .audio-box .head{padding: 10px 0;}
    .audio-box .name{margin: 2px 0 0 0;}
}