@charset "utf-8";

.toppage{ padding: 70px 0 0; }
.toppage .btn{ width: 380px; }

.slick-slider{ position: relative; }
.slide-arrow{ z-index: 1; position: absolute; top: 35%; transform: translate(0,-50%); width: 70px; height: auto; }
.prev-arrow{ left: 0; }
.next-arrow{ right: 0; }


/* ------------------------------------------------------------ fv */
#fv{ position: relative; display: flex; align-items: center; justify-content: flex-end; }
.fv__chach{ position: absolute; left: 3%; top: 50%; transform: translate(0,-50%); width: 485px; }
.fv__en{ padding: 0 0 20px; font-size: 16px; font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 600; font-style: normal; color: var(--main-color); }
.fv__ja{ padding: 0 0 12px; font-size: 43px; font-family: "Hiragino Sans", sans-serif; font-weight: 800; line-height: 1.5; }
.fv__desc{ line-height: 2; }

.fv__kv{ width: calc(100% - 580px); margin: 0 0 0 auto; }
.fv__kv.pic-stripe::before{ width: 102%; right: 0; }
.fv__kv img{ width: 100%; height: auto; }


/* ------------------------------------------------------------ bread */
#bread{ display: flex; align-items: center; padding: 20px 3%; }
#bread a{ position: relative; padding: 0 50px 0 0; }
#bread a:before{ position: absolute; content: ""; right: 12px; top: 10px; width: 23px; height: 1px; background: #000; }
#bread .title{ font-size: 12px; }


/* ------------------------------------------------------------ pager */
.pager{ display: flex; justify-content: center; align-items: center; gap: 18px; padding: 80px 0 0; }
.pager__item{ width: 47px; height: 47px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #707070; font-size: 17px; transition: opacity .25s; font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 600; font-style: normal; }
.pager__item:hover{ opacity: .65; }
.pager__item.is-current{ background: #707070; color: #fff; }



/* ----------------------------- mobile ------------------------------- */
@media only screen and (max-width: 768px) {
	
	.toppage{ margin: 0 auto; padding: 40px 0 0; }
	.toppage .btn{ width: 80%; }
	
	.slide-arrow{ width: 40px; }


/* ------------------------------------------------------------ fv */
	#fv{ overflow: hidden; flex-direction: column-reverse; }

	.fv__chach{ position: initial; transform: none; width: 90%; margin: 30px auto 0; text-align: center; }
	.fv__en{ padding: 0 0 13px; font-size: 15px; }
	.fv__ja{ font-size: 28px; }
	.fv__kv{ width: 95%; }


/* ------------------------------------------------------------ bread */
	#bread{ padding: 9px 3%; margin: 20px 0; background: var(--gray); }
	#bread a{ padding: 0 27px 0 0; }
	#bread a::before{ top: 13px; right: 7px; width: 13px; }
	#bread .title{ font-size: 10px; }


/* ------------------------------------------------------------ pager */
	.pager{ gap: 12px; padding: 35px 0 0; flex-wrap: wrap; }
	.pager__item{ width: 40px; height: 40px; font-size: 14px; }
	


}