@charset "utf-8";

/* ------------------------------------------------------------ common */
section{ position: relative; }
#wrapper{ overflow: hidden; }

.main-en-ttl{ z-index: -1; position: absolute; top: 0; left: 0; width: 100%; font-size: 250px; color: #F2F2F2; text-align: center; font-family: "cormorant", sans-serif; font-weight: 400; font-style: normal; line-height: 100%; }
.main-ja-title{ font-size: 34px; text-align: center; font-family: "fot-tsukuaoldmin-pr6n", sans-serif; font-weight: 300; }
.main-sub{ padding: 0 0 60px; font-size: 14px; line-height: 230%; }

.slider-items img{ width: 100%; height: auto; }


.btn-arrow{ position: relative; display: block; padding-left: 30px; font-size: 17px; }
.btn-arrow:before{ position: absolute; top: -25px; left: 0; content: ""; width: 80px; height: 80px; border-radius: 100%; border: 1px solid #DDDBD7; }
.btn-arrow .arrow{ transform: skew(45deg); display: inline-block; width: 40px; height: 10px; margin-left: 10px; border-right: 1px solid #000; border-bottom: 1px solid #000; }



/* ------------------------------------------------------------ fv */
#fv{ padding: 0 0 100px; }
.kv{ display: flex; align-items: flex-end; justify-content: center; }
.kv-contentA{ width: 50%; }


.kv-contentB{ width: 40%; padding-left: 10%; }
.kv-contentB .text{ padding: 40px 0 0; }
.kv-contentB .text h2{ padding: 0 0 20px; font-size: 55px; line-height: 120%; font-family: "fot-tsukuaoldmin-pr6n", sans-serif; font-weight: 300; }
.kv-contentB .text .en{ padding: 0 0 25px; font-size: 14px; font-family: "josefin-sans", sans-serif; font-weight: 300; font-style: normal; letter-spacing: 0.16em; }
.kv-contentB .text .ja{ font-size: 17px; line-height: 210%; }

.sliderB{ position: relative; }
.sliderB:after{ z-index: -1; position: absolute; content: ""; top: 20px; right: -20px; width: 100%; height: 100%; background: #F4F4F4; }


/* ------------------------------------------------------------ concept */
#concept{ padding: 130px 0 100px; }
#concept .text{ width: 780px; margin: 0 auto; padding: 0 0 78px; }
#concept .text p{ padding: 30px 0 0; font-size: 17px; line-height: 250%; }

#concept .list{ width: 980px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
#concept .list li{ width: calc(100% / 3 - 1%); }
#concept .list li img{ width: 100%; height: auto; }


/* ------------------------------------------------------------ lineup */
#lineup{ padding: 70px 0 100px; }
#lineup:before{ z-index: -1; position: absolute; top: 0; left: 0; content: ""; width: 87%; height: 87%; background: #F7F5EF; }
#lineup .main-en-ttl{ top: -31px; color: #fff; }
#lineup .main-ja-title{ padding: 60px 0 50px; }

.lineup{ display: flex; align-items: center; justify-content: space-between; margin: 0 0 85px; }

.lineup .text{ width: 31%; }
.lineup .text h3{ padding: 0 0 30px; font-size: 40px; font-family: "fot-tsukuaoldmin-pr6n", sans-serif; font-weight: 300; line-height: 140%; }
.lineup .text h3 span{ display: block; padding: 10px 0 0; font-size: 14px; font-family: "josefin-sans", sans-serif; font-weight: 300; font-style: normal; letter-spacing: 0.16em; }
.lineup .text p{ padding: 0 0 80px; font-size: 17px; line-height: 230%; }
.lineup .item{ position: relative; right: -7%; width: 67%; height: auto; }

.lineup.flex-r{ flex-direction: row-reverse; }
.lineup.flex-r .item{ left: -9% }
.lineup.flex-r .text{ width: 36%; }
.lineup.flex-r .text p{ padding: 0 0 60px; }


/* ------------------------------------------------------------ works */
#works { padding: 0 0 100px; }
#works .main-en-ttl{ padding-left: 3%; text-align: left; }

#works .contents{ overflow: hidden; padding: 80px 0 0; }
#works .text{ box-sizing: border-box; float: left; width: 300px; margin: 200px 0 0 17%; }
#works .text .main-ja-title{ padding: 0 0 35px; font-size: 34px; text-align: left; }

#works .works-list{ float: right; position: relative; display: flex; align-items: flex-start; width: min(1200px, 60vw); padding: 50px 0 50px 50px; }
#works .works-list:before{ z-index: -1; position: absolute; left: 0; bottom: 0; content: ""; width: 100%; height: 230px; background: #F7F5EF; }
#works .slider-items{ width: 400px; padding: 0 15px; }
#works .slider-items img{ width: 100%; height: auto; }
#works .slider-items .name{ padding: 20px 0 5px; font-size: 20px; }
#works .slider-items .prefecture{ font-size: 13px; }


.slick-arrow{ position: absolute; left: -38%; bottom: 3%; }
.prev-arrow{ }
.next-arrow{ left: -25%; }

.slick-num{ position: absolute; left: -33%; bottom: 2%; font-size: 14px; }
.slick-num small{ width: 1px; height: 25px; background: #C4C4C4; transform: rotate(15deg); margin: 0 15px; display: inline-block; position: relative; top: 6px; }


/* ------------------------------------------------------------ magazine */
#magazine{ clear: both; padding: 90px 0 100px; background: #D87C3B; }
#magazine .main-en-ttl{ z-index: 0; top: -32px; color: #fff; font-size: 230px; }
#magazine .main-ja-title{ padding: 0 0 40px; text-align: left; }

.article picture{ position: relative; display: block; }
.article picture img{ width: 100%; height: auto; }
.article figcaption{ position: absolute; bottom: 0; left: 0; padding: 5px 15px; background: #fff; color: #D87C3B; text-align: center; font-size: 14px; font-weight: 600; } 

.article .text{ padding: 10px 0 0; color: #fff; }
.article .title{ font-size: 18px; font-weight: 600; }
.article .date{ padding: 10px 0 0; font-size: 12px; }


.main-article{ padding: 0 0 100px; display: flex; justify-content: space-between; align-items: center; }
.main-article figcaption{ font-size: 18px; }
.main-article .caption{ width: 25%; color: #fff; }
.main-article .btn-arrow{ color: #fff; }
.main-article .btn-arrow .arrow{ border-color: #fff; }
.main-article .article{ width: 65%; }

.sub-article{ display: flex; align-items: flex-start; justify-content: space-between; }
.sub-article li{ width: calc(100% / 3 - 1%); }


/* ------------------------------------------------------------ news */
#news{ padding: 170px 0 100px; }
#news .main-en-ttl{ top: 65px; padding-left: 4%; text-align: left; font-size: 230px; }
#news .main-ja-title{ padding: 0 0 20px; text-align: left; }
#news .flex{ display: flex; align-items: flex-start; justify-content: space-between; }
#news .text{ width: 25%; padding: 50px 0 0; }
#news .news-list{ width: 64%; }

/* .news-list li:first-of-type a{ border-top: 1px solid #E2E2E2; } */
.news-list li a{ display: block; padding: 20px 0; border-bottom: 1px solid #E2E2E2; }
.news-list li .news-date{ padding: 0 0 10px; font-size: 14px; color: #ACACAC; }
.news-list li .news-title{ font-size: 20px; font-weight: 600; }



@media only screen and (max-width: 1300px) {
	#works .works-list{ width: max(700px,55vw); }
}


/* ----------------------------- mobile ------------------------------- */
@media only screen and (max-width: 768px) {

/* ------------------------------------------------------------ common */

	.main-en-ttl{ font-size: 110px; white-space: nowrap; }
	.main-ja-title{ font-size: 20px; }
	
	.btn-arrow{ font-size: 14px; }
	.btn-arrow::before{ width: 70px; height: 70px; }
	.btn-arrow .arrow{ width: 34px; height: 6px; }
	
	.main-sub{ padding: 0 0 40px; }


/* ------------------------------------------------------------ fv */
	#fv{ padding: 0 0 50px; }
	
	.kv{ display: block; }
	
	.kv-contentA{ width: 100%; }
	
	.kv-contentB{ box-sizing: border-box; width: 100%; padding: 5% 2%; display: flex; align-items: flex-start; justify-content: space-between; }
	.sliderB{ width: 40%; }
	.sliderB::after{ top: 10px; right: -10px; }
	
	.kv-contentB .text{ width: 55%; padding: 0; }
	.kv-contentB .text h2{ padding: 0 0 10px; font-size: 24px; }
	.kv-contentB .text .en{ padding: 0 0 15px; font-size: 12px; }
	.kv .ja{ width: 90%; margin: 0 auto; padding: 10px 0 0; font-size: 14px; }


/* ------------------------------------------------------------ concept */
	#concept{ padding: 50px 0; }
	#concept .main-en-ttl{ font-size: 90px; }
	#concept .text{ width: 100%; padding: 0 0 30px; }
	#concept .text p{ padding: 20px 0 0; font-size: 14px; }
	
	#concept .list{ display: block; width: 85%; margin: 0 auto; }
	#concept .list li{ width: 100%; margin: 0 0 20px; }
	#concept .list li:last-of-type{ margin: 0; }


/* ------------------------------------------------------------ lineup */
	#lineup{ padding: 35px 0 50px; }
	#lineup::before{ width: 95%; }
	#lineup .main-en-ttl{ top: -13px; }
	#lineup .main-ja-title{ padding: 20px 0 30px; }
	
	.lineup{ display: block; margin: 0 0 60px; }
	.lineup .text{ width: 100%; padding: 0 0 40px; }
	.lineup .text h3{ padding: 0 0 20px; font-size: 24px; }
	.lineup .text p{ padding: 0 0 40px; font-size: 14px; }
	
	.lineup:last-of-type{ margin: 0; }
	.lineup .item{ position: initial; width: 100%; }
	
	.lineup.flex-r .text{ width: 100%; }
	.lineup.flex-r .text p{ padding: 0 0 40px; }



/* ------------------------------------------------------------ works */
	#works{ padding: 0 0 50px; }
	#works .main-en-ttl{ padding-left: 0; text-align: center; }
	#works .contents{ padding: 40px 0 0; }
	#works .text{ float: none; width: 100%; margin: 30px 0 50px; padding: 0 5%; }
	#works .text .main-ja-title{ padding: 0 0 25px; font-size: 26px; }
	
	#works .works-list{ float: none; width: 100%; padding: 30px 0 30px; }
	#works .works-list::before{ height: 130px; }
	#works .slider-items{ width: 250px; padding: 0 10px;  }
	#works .slider-items .name{ padding: 15px 0 5px; font-size: 17px; }
	
	.slick-arrow{ left: 8%; bottom: initial; top: 0; }
	.next-arrow{ left: 35%; }
	
	.slick-num{ left: 18%; bottom: initial; top: -15px; }


/* ------------------------------------------------------------ magazine */
	#magazine{ padding: 50px 0; }
	#magazine .main-en-ttl{ top: -10px; font-size: 80px; }
	#magazine .main-ja-title{ padding: 0 0 20px; }
	
	.article .title{ font-size: 15px; }
	.article .date{ padding: 6px 0 0; font-size: 11px; }
	
	.main-article{ padding: 0 0 20px; display: block; }
	.main-article .caption{ width: 100%; padding: 10px 0 60px; }
	
	.main-article .article{ width: 100%; }
	.main-article figcaption{ font-size: 14px; }
	
	.sub-article{ display: block; }
	.sub-article .article{ width: 100%; padding: 0 0 20px; }
	.sub-article .article:last-of-type{ padding: 0; }
	

/* ------------------------------------------------------------ news */
	#news{ padding: 50px 0; }
	
	#news .flex{ display: block; }
	#news .main-en-ttl{ padding: 0; }
	#news .text{ width: 100%; padding: 30px 0 70px; }
	
	#news .news-list{ width: 100%; }
	.news-list li a{ padding: 10px 0; }
	.news-list li .news-date{ padding: 0 0 5px; font-size: 12px; }
	.news-list li .news-title{ font-size: 15px; }


}