@charset "utf-8";

/* =======================================================================================
	COMMON
======================================================================================= */

/* =======================================================================================
	PAGE 
======================================================================================= */
	/*.mainHeaderVisualWrap .imgcapkeep {
		inset: auto auto 0 0;
	}*/



/* ------------------------------------------------------------------------
 modelTabWrap
------------------------------------------------------------------------ */
	.modelTabWrap {
	}
	/*.modelTabWrap[data-js_show_target="moveUp30"] {
		transition: opacity 1500ms ease-out 100ms, transform 1000ms ease-in-out 50ms;
	}*/


/* modelTabBtnWrap | タブボタン
------------------------------------------------------------------------ */
	.modelTabBtnWrap {
		margin: 0 auto 100px;
	}
	.modelTabBtn ul {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.modelTabBtn li {
		display: grid;
	}
	.modelTabBtn li a {
		display: grid;
		line-height: 1.35;
		color: #fff;
		font-family: var(--site-font_family-en_2);
		font-size: clamp(1.05rem, (12 / 1100 * 100vw), 1.2rem);
		letter-spacing: .1em;
		background: #4e2618;
		padding: .8em .8em 1.2em;
	}
	.modelTabBtn li a .ln {
		display: grid;
		grid-template: 
			"type type" auto
			"ldk area" 1fr /
			auto auto;
		gap: .8em .9em;
	}
	.modelTabBtn li a .typeBox {	grid-area: type;}
	.modelTabBtn li a .ldkBox {		grid-area: ldk;		justify-self: end;}
	.modelTabBtn li a .areaBox {	grid-area: area;	justify-self: start;}

	.modelTabBtn li a .typeBox {
		display: block;
		font-size: 1.3rem;
		text-align: center;
		background: rgba(255, 255, 255, .25);
		padding: .25em .4em .175em;
		transition: background .2s ease-out;
	}
	.modelTabBtn li a .typeBox .typeName {
		line-height: 1;
		font-size: 1.35em;
		margin-right: -.06em;
	}
	.modelTabBtn li a .ldkBox,
	.modelTabBtn li a .areaBox .num {
		line-height: 1;
		font-size: 2.7em;
	}
	.modelTabBtn li a .areaBox .num {
		margin-left: .07em;
	}
	/* hover, current */
	.modelTabBtn li a:hover .typeBox,
	.modelTabBtn li a:focus .typeBox {
		background: rgba(var(--site-variationColor-yellow), .3);
	}
	.modelTabBtn li.is-current a .typeBox {
		background: rgba(var(--site-variationColor-yellow), .4);
	}
@media screen and (max-width: 900px) {
	.modelTabBtnWrap {
		margin-bottom: 80px;
	}
}
@media screen and (max-width: 750px) {
	.modelTabBtn li a {
		padding: 1em 1em 1.2em;
	}
	.modelTabBtn li a .ln {
		display: grid;
		grid-template: 
			"type" auto
			"ldk" auto
			"area" 1fr /
			1fr;
		gap: .9em 0;
	}
	.modelTabBtn li a .ldkBox {		justify-self: center;}
	.modelTabBtn li a .areaBox {	justify-self: center;}
}
@media screen and (max-width: 600px) {
	.modelTabBtnWrap {
		margin-bottom: 60px;
	}
	.modelTabBtn ul {
		gap: 4px;
	}
}
@media screen and (max-width: 480px) {
	.modelTabBtn li a {
		font-size: 1rem;
	}
	.modelTabBtn li a .typeBox {
		font-size: 1.2rem;
	}
	.modelTabBtn li a .ldkBox,
	.modelTabBtn li a .areaBox .num {
		font-size: 2.5em;
	}
}


/* modelTabContWrap | タブコンテンツ
------------------------------------------------------------------------ */
	.modelTabContWrap {
	}


/* modelContSection | 各タイプのセクション
------------------------------------------------------------------------ */
	.modelContSection {
	}


/* modelContSpecWrap | 各タイプのスペック
---------------------------------------------------- */
	.modelContSpecWrap {
		display: flex;
		align-items: flex-end;
		gap: 0 2.5%;
		line-height: 1.35;
		color: #54372f;
		font-family: var(--site-font_family-en_2);
		font-size: min((16 / 1300 * 100vw), 1.6rem); /* 文字が少し落ちる場合はここのサイズ調整で対応。1300～1400くらいなら可。 */
		font-weight: 400;
		letter-spacing: normal;
		margin-bottom: clamp(25px, (25 / 900 * 100vw), 50px);
	}
	.modelContSpecWrap .typeNameBox {
		font-size: 1.5625em;
		letter-spacing: .04em;
		padding-left: .2em;
	}
	.modelContSpecWrap .typeNameBox .typeName {
		line-height: .8;
		font-size: 3.2em;
	}
	.modelContSpecWrap .specLdkBox {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		line-height: 1;
		font-size: 2.0625em;
		letter-spacing: .06em;
	}
	.modelContSpecWrap .specLdkBox .ldk {
		font-size: 1.606060em;
	}
	.modelContSpecWrap .specLdkBox .ldk .ldkNum {
		line-height: .9;
		font-size: 1.0377358490em;
	}
	.modelContSpecWrap .specLdkBox .element {
		display: inline-block;
	}
	.modelContSpecWrap .specLdkBox .element b {
	}
	.modelContSpecWrap .specLotBox {
	}
	.modelContSpecWrap .specLotBox .ttl {
		display: block;
		font-size: max(.9rem, .75em);
		margin-bottom: .2em;
	}
	.modelContSpecWrap .specLotBox .value {
		line-height: .9;
		font-size: 1.9375em;
	}
	.modelContSpecWrap .specLotBox .value .num {
		line-height: 1;
		font-size: 1.709677em;
	}
	.modelContSpecWrap .specEtcBox {
		padding-left: 1.4em;
	}
	.modelContSpecWrap .specEtcBox .specEtc {
		display: block;
	}
	.modelContSpecWrap .specEtcBox .ttl {
		margin-right: .15em;
	}
	.modelContSpecWrap .specEtcBox .ttl::before {
		content: "■";
	}
	.modelContSpecWrap .specEtcBox .value {
	}
	.modelContSpecWrap .specEtcBox .value .num {
		font-size: 1.125em;
	}
@media screen and (max-width: 900px) {
	/* 通常はこちらを使用（上3列、下1列） */
	.modelContSpecWrap {
		flex-wrap: wrap;
		gap: 15px 5%;
		font-size: min((14 / 750 * 100vw), 1.4rem); /* 文字が少し落ちる場合はここのサイズ調整で対応。700～820くらいなら可。 */
		margin-bottom: 20px;
	}
	.modelContSpecWrap .specEtcBox {
		flex: 0 0 100%;
	}
	/* 文字が落ちる場合はこちらを使用（上2列、下2列） */
	/*.modelContSpecWrap {
		flex-wrap: wrap;
		gap: 15px 5%;
		font-size: min((14 / 800 * 100vw), 1.4rem);
		margin-bottom: 30px;
	}
	.modelContSpecWrap .typeNameBox,
	.modelContSpecWrap .specLotBox {
		flex: 0 0 min((170 / 800 * 100vw), 170px);
	}
	.modelContSpecWrap .specLdkBox,
	.modelContSpecWrap .specEtcBox {
		flex: 0 0 calc(100% - min((170 / 800 * 100vw), 170px) - 5%); // gap分引く //
	}*/
	
	/* ---- 詳細 ---- */
	.modelContSpecWrap .typeNameBox {
		padding-left: 0;
	}
	.modelContSpecWrap .typeNameBox .typeName {
		font-size: 2.7em;
	}
	.modelContSpecWrap .specLdkBox .ldk {
		font-size: 1.35em;
	}
	.modelContSpecWrap .specLotBox .ttl {
		font-size: max(.9rem, .85em);
	}
	.modelContSpecWrap .specLotBox .value {
		font-size: 1.7em;
	}
	.modelContSpecWrap .specEtcBox {
		display: flex;
		flex-wrap: wrap;
		gap: .1em 1em;
		padding-left: 0;
	}
}
@media screen and (max-width: 600px) {
	.modelContSpecWrap {
		gap: .6em 0;
		font-size: clamp(1.2rem, (12 / 480 * 100vw), 1.3rem);
	}
	.modelContSpecWrap > * {
		flex: 0 0 100%;
	}
	
	/* ---- 詳細 ---- */
	.modelContSpecWrap .typeNameBox {
		position: relative;
		font-size: 1.666667em;
		text-align: center;
	}
	.modelContSpecWrap .typeNameBox::after {
		content: "";
		position: absolute;
		inset: auto 0 .25em;
		z-index: 0;
		border-bottom: 1px solid currentColor;
	}
	.modelContSpecWrap .typeNameBox .typeName {
		line-height: 1;
		font-size: 2.2em;
	}
	.modelContSpecWrap .specLdkBox {
		font-size: 1.833333em;
		padding-bottom: .15em;
	}
	.modelContSpecWrap .specLdkBox .ldk {
		font-size: 1.454545em;
	}
	.modelContSpecWrap .specLdkBox .ldk .ldkNum {
		line-height: 1;
		font-size: 1.0625em;
	}
	.modelContSpecWrap .specLotBox .ttl {
		display: inline;
		font-size: 1em;
		margin-bottom: 0;
		margin-right: .15em;
	}
	.modelContSpecWrap .specLotBox .ttl::before {
		content: "■";
	}
	.modelContSpecWrap .specLotBox .value {
		font-size: 1.666667em;
	}
	.modelContSpecWrap .specLotBox .value .num {
		font-size: 1.6em;
	}
	.modelContSpecWrap .specEtcBox {
		gap: .6em 0;
	}
	.modelContSpecWrap .specEtcBox .specEtc {
		flex: 0 0 100%;
	}
	.modelContSpecWrap .specEtcBox .value .num {
		font-size: 1.166667em;
	}
}


/* modelSliderBox | スライダー
---------------------------------------------------- */
	.modelSliderBox {
	}
	.modelSliderBox img {
		width: 100%;
		max-width: none;
		height: auto;
	}
	.modelSliderBox .slider-for .slide,
	.modelSliderBox .slider-nav .slide {
		padding: 0 .5px; /* 微調整 */
	}
	
	/* ---------- for */
	.modelSliderBox .slider-for .slick-slide {
		cursor: grab;
	}
	.modelSliderBox .slider-for .slick-slide:active {
		cursor: grabbing;
	}
	.modelSliderBox .slider-for .slide {
		position: relative;
	}
	.modelSliderBox .slider-for .slide .pic {
	}
	.modelSliderBox .slider-for .slide .title {
		position: absolute;
		inset: auto 0 0 auto;
		line-height: 1.35;
		color: #fff;
		font-family: var(--site-font_family-serif);
		font-size: 1.2em;
		text-shadow: 0 0 10px rgba(0, 0, 0, .5), 0 0 5px rgba(0, 0, 0, .5), 1px 1px 1px rgba(0, 0, 0, .3);
		padding: .85em 1em;
	}
	#model01 .modelSliderBox .slider-for .slide.s04 .title,
	#model01 .modelSliderBox .slider-for .slide.s05 .title,
	#model01 .modelSliderBox .slider-for .slide.s10 .title,
	#model01 .modelSliderBox .slider-for .slide.s11 .title,
	#model01 .modelSliderBox .slider-for .slide.s12 .title,
	#model01 .modelSliderBox .slider-for .slide.s13 .title,
	#model01 .modelSliderBox .slider-for .slide.s14 .title {
		color: #000;
		text-shadow: 0 0 10px rgba(190, 189, 189, .5), 0 0 5px rgba(255, 255, 255, .5), 1px 1px 1px rgba(190, 189, 189, .3);
	}
	#model02 .modelSliderBox .slider-for .slide.s04 .title,
	#model02 .modelSliderBox .slider-for .slide.s05 .title,
	#model02 .modelSliderBox .slider-for .slide.s10 .title,
	#model02 .modelSliderBox .slider-for .slide.s11 .title,
	#model02 .modelSliderBox .slider-for .slide.s12 .title,
	#model02 .modelSliderBox .slider-for .slide.s13 .title,
	#model02 .modelSliderBox .slider-for .slide.s14 .title {
		color: #000;
		text-shadow: 0 0 10px rgba(190, 189, 189, .5), 0 0 5px rgba(255, 255, 255, .5), 1px 1px 1px rgba(190, 189, 189, .3);
	}
	
	/* ---------- nav */
	.modelSliderBox .slider-nav .slick-slide {
		line-height: 0;
		cursor: pointer;
	}
	.modelSliderBox .slider-nav .slick-slide .pic {
		position: relative;
		width: 100%;
		aspect-ratio: 1200 / 760;
		overflow: hidden;
		line-height: 1;
		background: #000;
	}
	.modelSliderBox .slider-nav .slick-slide img {
		position: absolute; /* [縦長サムネを拡大する]関係でposition配置にする */
		inset: 0;
		z-index: 0;
		width: 100%;
		opacity: .4;
	}
	.modelSliderBox .slider-nav .slick-slide.slick-current img {
		opacity: 1;
	}
	.modelSliderBox .slider-nav .slide .title {
		display: none;
		font-size: 1rem;
	}
	#model01 .modelSliderBox .slider-nav .slide.s05 .pic img,
	#model01 .modelSliderBox .slider-nav .slide.s10 .pic img,
	#model01 .modelSliderBox .slider-nav .slide.s11 .pic img,
	#model01 .modelSliderBox .slider-nav .slide.s12 .pic img,
	#model01 .modelSliderBox .slider-nav .slide.s13 .pic img,
	#model01 .modelSliderBox .slider-nav .slide.s14 .pic img,
	#model02 .modelSliderBox .slider-nav .slide.s04 .pic img,
	#model02 .modelSliderBox .slider-nav .slide.s05 .pic img,
	#model02 .modelSliderBox .slider-nav .slide.s10 .pic img,
	#model02 .modelSliderBox .slider-nav .slide.s11 .pic img,
	#model02 .modelSliderBox .slider-nav .slide.s12 .pic img,
	#model02 .modelSliderBox .slider-nav .slide.s14 .pic img { /* [縦長サムネを拡大する] */
		top: -50%;
		left: -50%;
		width: 200%;
	}
@media screen and (max-width: 600px) {
	/* ---------- for */
	.modelSliderBox .slider-for .slide .title {
		font-size: .8em;
		letter-spacing: .04em;
		font-weight: 450;
		padding: .75em .9em;
	}
}

/* ---------------------------------
	slick_parts
--------------------------------- */
	/* Arrows */
	.modelSliderBox .slick-prev,
	.modelSliderBox .slick-next {
		display: grid;
		place-content: center;
		z-index: 1;
		width: clamp(30px, (56 / 1200 * 100vw), 56px);
		height: auto;
		aspect-ratio: 1;
		background: rgba(33, 33, 34, .68);
		clip-path: circle(50%);
	}
	.modelSliderBox .slick-prev:hover,
	.modelSliderBox .slick-prev:focus,
	.modelSliderBox .slick-next:hover,
	.modelSliderBox .slick-next:focus {
		background: rgba(33, 33, 34, .35);
	}
	.modelSliderBox .slick-prev::before,
	.modelSliderBox .slick-next::before {
		content: '';
		display: block;
		width: clamp(9.6px, (17 / 1200 * 100vw), 17px);
		height: auto;
		aspect-ratio: 1 / 2;
		font-family: inherit;
		font-size: 1rem;
		line-height: 1;
		opacity: 1;
		color: #fff;
		background: rgba(246, 244, 245, .81);
	}
	.modelSliderBox .slick-prev {				left: calc(35 / 1200 * 100%);}
	.modelSliderBox [dir='rtl'] .slick-prev {	right: calc(35 / 1200 * 100%);	left: auto;}

	.modelSliderBox .slick-next {				right: calc(35 / 1200 * 100%);}
	.modelSliderBox [dir='rtl'] .slick-next {	left: calc(35 / 1200 * 100%);	right: auto;}

	.modelSliderBox .slick-prev::before,
	.modelSliderBox [dir='rtl'] .slick-next::before {	clip-path: polygon(100% 0, 0 50%, 100% 100%);	translate: -13% 0;	/*content: '←';*/}
	.modelSliderBox .slick-next::before,
	.modelSliderBox [dir='rtl'] .slick-prev::before {	clip-path: polygon(0 0, 100% 50%, 0 100%);		translate: 13% 0;	/*content: '→';*/}