/* 260206 */
@charset "utf-8";

:root {
	--pcv: / 1440 * 100vw;
	--pcp: / 1440 * 100%;
	
	--spv: / 375 * 100vw;
	--spp: / 375 * 100%;
}

/* -------------------------------------------------
	font
------------------------------------------------- */

/* adobe fonts 'Garamond Premier Pro'
	Regular
	font-family: "garamond-premier-pro", serif;
	font-weight: 400;
	font-style: normal;
*/

/* -------------------------------------------------
	reset
------------------------------------------------- */

* {
	margin: 0;
	padding: 0;
	vertical-align: top;
	box-sizing: border-box;
}

html {
}

body {
	line-height: 1;
	-webkit-text-size-adjust: 100%;
	position: relative;
	font-family: "garamond-premier-pro", serif;
	font-weight: 400;
}

p, h1, h2, h3, h4, th, td, li, dt, dd, figcaption, input, select, textarea {
	font-weight: 400;
}

img {
	border: none;
	max-width: 100%;
	height: auto;
}

iframe {
	border: none;
}

a {
	text-decoration: none;
	color: #000;
}
a:hover {
	
}

ul, ol {
	list-style-type: none;
}

main {
	display: block;
}

.bg-white {
	background: #fff;
}

@media print, screen and (min-width:768px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
}

/* -------------------------------------------------
	#fv
------------------------------------------------- */

#fv,
#fv .main-pic,
#fv .main-pic .pic,
#fv .mask {
	width: 100%;
	height: 100vh;
}
#fv {
	/*position: sticky;*/
	position: relative;
	top: 0;
	z-index: 2;
}
#fv .main-pic {
	overflow: hidden;
}
#fv .main-pic .pic {
	background: url(../img/main.jpg) no-repeat center center / cover;
}
#fv h1 {
	width: 276px;
	position: absolute;
	right: calc(230 var(--pcp));
	top: calc(390 / 810 * 100%);
	transform: translateY(-50%);
	z-index: 10;
}

#fv .mask {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #CDCBD8;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 20;
	transition:
		/*opacity 0.8s cubic-bezier(.12,.92,.31,.95) 1.2s,*/
		height 0.8s cubic-bezier(.12,.92,.31,.95) 1.2s;
}
#fv .mask img {
	width: 206px;
	transition:
		opacity 0.6s cubic-bezier(.12,.92,.31,.95) 0.8s,
		transform 0.6s cubic-bezier(.12,.92,.31,.95) 0.8s;
}

/* .hidden */
#fv .mask.hidden {
	/*opacity: 0;*/
	height: 0;
}
#fv .mask.hidden img {
	opacity: 0;
	transform: translateY(-10px);
}

@media screen and (max-width:767px) and (orientation: portrait) {
	#fv {
		height: 100vh;
	}
	#fv h1 {
		width: calc(191 var(--spp));
		right: 50%;
		top: auto;
		/*bottom: calc(100vh + 20vw);*/
		bottom: 20vw;
		transform: translate(50%,0);
	}
	#fv .main-pic {
		/*position: sticky;*/
		position: relative;
		top: 0;
	}
	#fv .main-pic .pic {
		background-image: url("../img/pic_07.webp");
	}
	#fv .mask img {
		width: calc(133 var(--spv));
	}

	#fv .spacer {
		width: 100%;
		height: 100vh;
	}
}

@media screen and (max-width:767px) and (orientation: landscape) {
	#fv h1 {
		width: calc(276px * 0.7);
		right: calc(230 * 0.7 var(--pcp));
	}
}

/* -------------------------------------------------
	.auto-fade
------------------------------------------------- */

.auto-fade {
	position: relative;
}
.auto-fade .pic:last-child {
	opacity: 0;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 4;
	animation: fade1 8s ease-out 0s infinite;
}
#block1 .auto-fade .pic:last-child {
	animation: fade2 6s ease-out 0s infinite;
}

@keyframes fade1 {
	0% { opacity: 0; }
	37.5% { opacity: 0; }
	50% { opacity: 1; }
	87.5% { opacity: 1; }
	100% { opacity: 0; }
}
@keyframes fade2 { /* バッグの表示時間を長く */
	0% { opacity: 0; }
	32% { opacity: 0; }
	40% { opacity: 1; }
	93% { opacity: 1; }
	100% { opacity: 0; }
}
@keyframes fade3 { /* fade2の逆 */
	0% { opacity: 1; }
	32% { opacity: 1; }
	40% { opacity: 0; }
	93% { opacity: 0; }
	100% { opacity: 1; }
}

@media screen and (max-width:767px) {
	.auto-fade.sp-off .pic:last-child {
		opacity: 1;
		position: static;
		animation: none !important;
	}
}

/* -------------------------------------------------
	#under
------------------------------------------------- */

#under {
	background: #E2E2E8;
	position: relative;
	z-index: 4;
}
#under img {
	width: 100%;
}

/* -------------------------------------------------
	.credit
------------------------------------------------- */

.credit-wt-and-pad {
	padding: 22px 60px;
	background: #fff;
	position: relative;
}

.credit li {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	letter-spacing: 0.03em;
	line-height: calc(16 / 13);
	text-align: left;
}

#under .credit a.item img {
	width: auto;
	height: 11px;
}
#under .credit a.item img[alt^="B"],
#under .credit a.item img[alt^="T"],
#under .credit a.item img[alt^="C"],
#under .credit a.item img[alt^="J"] {
	height: 12px;
}
#under .credit a.item img[alt*="Sample"] {
	height: 13px;
	transform: translateX(-1px);
}

#under .credit a.item img[alt="Blouson"],
#under .credit a.item img[alt="Pants"],
#under .credit a.item img[alt="Bonnet"],
#under .credit a.item img[alt="Boots"] { /* 大きいようなので小さく */
	height: 11px;
}

#under .credit .price {
	transform: translateY(1px);
}
#under .credit .price img {
	width: 35.6px;
	height: auto;
}
#under .credit .price.wide img {
	width: 42.3px;
}

@media print, screen and (min-width:768px) {
	.credit a.item:hover {
		opacity: 0.5;
	}
	
	#block1 .col:first-child .credit li { width: 107px; }
	#block1 .col:last-child .credit li { width: 86px; }
	
	#block3 .credit li { width: 116px; }
	#block3 .credit li:last-child { width: 87px; }
	
	#block5 .credit:first-child li { width: 133px; }
	#block5 .credit:last-child li { width: 106px; }
	
	#block6 .credit:first-child li { width: 124px; }
	#block6 .credit:last-child { position: absolute; left: 244px; top: 22px; }
	#block6 .credit:last-child li { width: 98px; }
	
	#block8 .credit:first-child li { width: 116px; }
	#block8 .credit:last-child { position: absolute; left: 236px; top: 22px; }
	#block8 .credit:last-child li { width: 111px; }
	
	#block9 .credit:first-child li { width: 112px; }
	
	#block10 .credit:first-child li { width: 113px; }
	#block10 .credit:last-child { position: absolute; left: 233px; top: 22px; }
	#block10 .credit:last-child li { width: 112px; }
	
	#block11 .credit:first-child li { width: 114px; }
	
	#block12 .credit:first-child li { width: 180px; }
	#block12 .credit:last-child { position: absolute; left: 300px; top: 22px; }
	#block12 .credit:last-child li { width: 106px; }
}

@media screen and (max-width:767px) {
	.credit-wt-and-pad {
		padding: calc(18 var(--spv)) calc(30 var(--spv));
	}
	.credit li {
		/*width: calc(170 var(--spv));*/
		font-size: calc(13 var(--spv));
		line-height: calc(17 / 13);
	}
	
	#block1 .credit li { width: calc(102 var(--spv)); }
	#block3 .credit li { width: calc(128 var(--spv)); }
	#block5 .credit li { width: calc(123 var(--spv)); }
	
	#block6 .credit:first-child li { width: calc(114 var(--spv)); }
	#block6 .credit:last-child { position: absolute; left: calc(194 var(--spv)); top: calc(18 var(--spv)); }
	#block6 .credit:last-child li { width: calc(89 var(--spv)); }
	
	#block8 .credit li { width: calc(106 var(--spv)); }
	#block9 .credit li { width: calc(103 var(--spv)); }
	
	#block10 .credit:first-child li { width: calc(103 var(--spv)); }
	#block10 .credit:last-child { position: absolute; left: calc(183 var(--spv)); top: calc(18 var(--spv)); }
	#block10 .credit:last-child li { width: calc(103 var(--spv)); }
	
	#block11 .credit li { width: calc(104 var(--spv)); }
	#block12 .credit li { width: calc(170 var(--spv)); }
	
	#under .credit a.item img {
		height: calc(11 var(--spv));
	}
	#under .credit a.item img[alt^="B"],
	#under .credit a.item img[alt^="T"],
	#under .credit a.item img[alt^="C"],
	#under .credit a.item img[alt^="J"] {
		height: calc(12 var(--spv));
	}
	#under .credit a.item img[alt*="Sample"] {
		height: calc(13 var(--spv));
	}
	#under .credit .num img[alt$="."] {
		width: auto;
		height: calc(9 var(--spv));
		transform: translateY(14%);
	}
	
	#under .credit a.item img[alt="Blouson"],
	#under .credit a.item img[alt="Pants"],
	#under .credit a.item img[alt="Bonnet"],
	#under .credit a.item img[alt="Boots"] { /* 大きいようなので小さく */
		height: calc(11 var(--spv));
	}
	#under #block12 .credit a.item img[alt="Shirt"] {
		transform: translateX(1px);
	}

	#under .credit .price img {
		width: calc(35.6 var(--spv));
	}
	#under .credit .price.wide img {
		width: calc(42.3 var(--spv));
	}
}

/* -------------------------------------------------
	lead
------------------------------------------------- */

#lead {
	padding: 170px 0;
	text-align: center;
}
#lead p {
	display: inline-block;
	font-size: 13px;
	line-height: 2;
	font-family: "dnp-shuei-gothic-gin-std";
}

@media screen and (max-width:767px) {
	#lead {
		padding: calc(85 var(--spv)) 0;
		text-align: center;
	}
	#lead p {
		font-size: calc(13 var(--spv));
	}
}

/* -------------------------------------------------
	#block1
------------------------------------------------- */

@media print, screen and (min-width:768px) {
	#block1 .col2 {
		display: flex;
	}
	#block1 .col {
		width: 50%;
	}
}

/* -------------------------------------------------
	#block2
------------------------------------------------- */

@media print, screen and (min-width:768px) {
	#block2 {
		padding: 170px 0;
		text-align: center;
	}
	#block2 .pic {
		width: max( calc(550 var(--pcp)) , 550px);
	}
}

@media screen and (max-width:767px) {
	#block2 {
		padding: calc(85 var(--spv)) 0;
		text-align: center;
	}
	#block2 .pic {
		width: calc(250 var(--spp));
	}
}

/* -------------------------------------------------
	#block3
------------------------------------------------- */

@media print, screen and (min-width:768px) {
	#block3 .pics {
		display: flex;
	}
	#block3 .pics li:nth-child(2) {
		width: calc(471 var(--pcp));
	}
	#block3 .pics li:nth-child(3) {
		width: calc(497 var(--pcp));
	}
	#block3 .pics li:nth-child(4) {
		width: calc(472 var(--pcp));
	}
	
	#block3 .credit {
		position: relative;
	}
	#block3 .credit li:last-child {
		position: absolute;
		left: 69%;
		top: 50%;
		transform: translateY(-50%);
	}
}

@media screen and (max-width:767px) {
	#block3 .scroll-box {
		width: 100%;
		overflow: hidden;
	}
	#block3 .pics {
		width: calc( (162 + 162 + 170 + 162) * 4 var(--spv) );
		height: calc(229 var(--spv));
		display: flex;
		animation: autoSlider 36s linear 0s infinite;
	}
	#block3 .pics li {
		height: 100%;
		position: relative;
	}
	
	/* 画像と画像の間に白い線が入るようなので、少しずつずらして（重ねて）解消させる */
	#block3 .pics li:nth-child(2) { transform: translateX(-1px); }
	#block3 .pics li:nth-child(3) { transform: translateX(-2px); }
	#block3 .pics li:nth-child(4) { transform: translateX(-3px); }
	#block3 .pics li:nth-child(5) { transform: translateX(-4px); }
	#block3 .pics li:nth-child(6) { transform: translateX(-5px); }
	#block3 .pics li:nth-child(7) { transform: translateX(-6px); }
	#block3 .pics li:nth-child(8) { transform: translateX(-7px); }
	#block3 .pics li:nth-child(9) { transform: translateX(-8px); }
	#block3 .pics li:nth-child(10) { transform: translateX(-9px); }
	#block3 .pics li:nth-child(11) { transform: translateX(-10px); }
	#block3 .pics li:nth-child(12) { transform: translateX(-11px); }
	#block3 .pics li:nth-child(13) { transform: translateX(-12px); }
	#block3 .pics li:nth-child(14) { transform: translateX(-13px); }
	#block3 .pics li:nth-child(15) { transform: translateX(-14px); }
	#block3 .pics li:nth-child(16) { transform: translateX(-15px); }
	
	#block3 .pics li .pic {
		width: auto;
		height: 100%;
		position: relative;
		z-index: 2;
	}
	#block3 .pics .num {
		font-size: 13px;
		letter-spacing: 0.03em;
		color: #000;
		position: absolute;
		left: calc(10 var(--spv));
		bottom: calc(8 var(--spv));
		z-index: 4;
	}
	/*
	#block3 .pics li:nth-child(4n - 2) .num {
		color: #fff;
	}
	*/
	#block3 .pics .num img {
		width: auto;
		height: calc(9 var(--spv));
	}
	#block3 .credit .num {
		padding-right: 2px;
	}
}

@keyframes autoSlider {
	0% { transform: translateX( 0 ); }
	100% { transform: translateX( calc( (162 + 162 + 170 + 162 - 3) * -3 var(--spv)) ); }
}

/* -------------------------------------------------
	#block4
------------------------------------------------- */

@media print, screen and (min-width:768px) {
	#block4 {
		margin-top: 170px;
	}
	#block4 .pic {
		width: max( calc(550 var(--pcp)) , 550px);
		margin: 0 auto;
	}
	#block4 .pic img {
		transition: transform 0.4s ease-out;
	}
}

/* -------------------------------------------------
	#block5
------------------------------------------------- */

#block5 .auto-fade .pic:last-child {
	animation: fade3 6s ease-out 0s infinite;
}

@media print, screen and (min-width:768px) {
	#block5 {
		margin-top: 170px;
	}
	#block5 .auto-fade {
		width: max( calc(550 var(--pcp)) , 550px);
		margin: 0 auto;
	}
	#block5 .credit:last-child {
		position: absolute;
		left: 253px;
		top: 22px;
	}
}

@media screen and (max-width:767px) {
	#block5 {
		margin-top: calc(85 var(--spv));
	}
	#block5 .sticky-box > .group {
		/*position: sticky;*/
		position: relative;
		top: 0;
		z-index: 2;
	}
	#block5 .sticky-box > .group .anim {
		/*transform: translateY(-1.6vw);  実機でなぜか隙間発生(下stickyの画像がちらみえするため)少し上にずらしておく */
	}
	#block5 .sticky-box > .pic {
		/*margin-top: calc(124 var(--spv));  この画像のと直前のクレジットと間に少し隙間をあけておく */
		
		/*position: absolute;
		left: 0;
		top: 0;
		z-index: 4;*/
		
		/*border-bottom: solid 1.6vw #fff;  実機でなぜか隙間発生(下stickyの画像がちらみえするため)ボーダーで隠す */
	}
	/*#block5 .sticky-box::after {  隙間を作った分、画像下部に高さを足しておく
		content: "";
		display: block;
		width: 1px;
		height: calc(124 var(--spv));
	} */
	
	#block5 .group .credit-wt-and-pad {
		position: relative;
	}
}

/* -------------------------------------------------
	.common-box1 (PCで2カラムのもの。)
------------------------------------------------- */

@media print, screen and (min-width:768px) {
	.common-box1 {
		margin-top: 170px;
	}
	.common-box1 .pics {
		display: flex;
	}
	.common-box1 .pic {
		width: 50%;
	}
	/*
	.common-box1 .credit:last-child {
		position: absolute;
		left: 50%;
		top: 22px;
	}
	*/
}

@media screen and (max-width:767px) {
	.common-box1 {
		margin-top: calc(85 var(--spv));
	}
	/*
	.common-box1 .credit:last-child {
		position: absolute;
		left: calc(203 var(--spp));
		top: calc(20 var(--spv));
	}
	*/
	.common-box1 .credit li {
		width: calc(147 var(--spv));
	}
}

/* -------------------------------------------------
	#block7
------------------------------------------------- */

@media print, screen and (min-width:768px) {
	#block7 {
		margin-top: 170px;
	}
	#block7 .pic {
		width: max( calc(550 var(--pcp)) , 550px);
		margin: 0 auto;
	}
}

@media screen and (max-width:767px) {
	#block7 {
		margin-top: calc(85 var(--spv));
	}
	#block7 .pic {
		width: calc(250 var(--spp));
		margin: 0 auto;
	}
}

/* -------------------------------------------------
	.common-box2 (PCで1カラムのもの)
------------------------------------------------- */

@media print, screen and (min-width:768px) {
	.common-box2 {
		margin-top: 170px;
	}
	.common-box2 .inner {
		width: max( calc(550 var(--pcp)) , 550px);
		margin: 0 auto;
	}
}

@media screen and (max-width:767px) {
	.common-box2 {
		margin-top: calc(85 var(--spv));
	}
	.common-box2 .inner {
		width: calc(230 var(--spp));
		margin: 0 auto;
	}
}

/* -------------------------------------------------
	.common-box3 (PCで3カラムのもの。htmlコードはspベースで作成。)
------------------------------------------------- */

@media print, screen and (min-width:768px) {
	.common-box3 {
		margin-top: 170px;
		position: relative;
		overflow: hidden;
	}
	.common-box3 .sp-top {
		text-align: right;
	}
	.common-box3 .pic {
		width: 33.33%;
	}
	.common-box3 .pic1 {
		display: inline-block;
	}
	.common-box3 .pic2 {
		position: absolute;
		left: 0;
		top: 0;
	}
	.common-box3 .pic3 {
		position: absolute;
		left: 33.33%;
		top: 0;
	}
	
	/* 1pxの隙間が発生することがあるようなので防止 */
	#block8.common-box3 .pic3 img,
	#block12.common-box3 .pic3 img {
		transform: scale(1.008);
		transform-origin: center bottom;
	}
	
	/* #block12 (#block12はpcで左右逆) */
	#block12.common-box3 .sp-top {
		text-align: left;
	}
	#block12.common-box3 .pic2 {
		left: auto;
		right: 0;
	}
}

@media screen and (max-width:767px) {
	.common-box3 {
		margin-top: calc(85 var(--spv));
	}
	.common-box3 .sp-top {
		width: calc(300 var(--spp));
		margin: 0 auto;
	}
	.common-box3 .sp-bottom {
		margin-top: calc(85 var(--spv));
		display: flex;
	}
	.common-box3 .sp-bottom .pic {
		width: 50%;
	}
}

/* -------------------------------------------------
	#video
------------------------------------------------- */

#video {
	padding: 170px 0 235px;
}
#video .video-box {
	width: calc(958 var(--pcp));
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

#video .video-box .mask div {
	position: absolute;
	z-index: 8;
	background: #E2E2E8;
}
#video .video-box .mask div:nth-child(2) {
	height: 1px;
	width: 100%;
	left: 0;
	top: 0;
}
#video .video-box .mask div:nth-child(4) {
	height: 1px;
	width: 100%;
	left: 0;
	bottom: 0;
}

#video video {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	display: block;
}

@media print, screen and (min-width:768px) {
	#video .video-box .mask div:nth-child(1) {
		width: 1px;
		height: 100%;
		left: 0;
		top: 0;
	}
	#video .video-box .mask div:nth-child(3) {
		width: 1px;
		height: 100%;
		right: 0;
		top: 0;
	}
}

@media screen and (max-width:767px) {
	#video {
		padding: calc(85 var(--spv)) 0 calc(88 var(--spv));
	}
	#video .video-box {
		width: 100%;
	}
}

/* -------------------------------------------------
	#bottom-link
------------------------------------------------- */

#bottom-link {
	padding: 25px 0 135px 47px;
	display: flex;
	gap: 0 45px;
	background: #fff;
}
#bottom-link li {
	font-size: 13px;
	letter-spacing: 0.03em;
}
#bottom-link li:first-child a img {
	width: 68px;
}
#bottom-link li:last-child a img {
	width: 52px;
}

@media print, screen and (min-width:768px) {
	#bottom-link li a:hover {
		opacity: 0.5;
	}
}

@media screen and (max-width:767px) {
	#bottom-link {
		padding: calc(27 var(--spv)) 0 calc(68 var(--spv)) calc(27 var(--spp));
		gap: 0 calc(18 var(--spv));
	}
	#bottom-link li {
		font-size: calc(13 var(--spv));
	}
	#bottom-link li:first-child a img {
		width: calc(68 var(--spv));
	}
	#bottom-link li:last-child a img {
		width: calc(52 var(--spv));
	}
}

/* -------------------------------------------------
	animation
------------------------------------------------- */

.anim {
	opacity: 0;
	transition:
		transform 1.2s cubic-bezier(.12,.92,.31,.95),
		opacity 1.2s cubic-bezier(.12,.92,.31,.95);
	transform: translateY(30px);
}
.anim.delay01 { transition-delay: 0.1s; }
.anim.delay02 { transition-delay: 0.2s; }
.anim.delay03 { transition-delay: 0.3s; }
.anim.delay04 { transition-delay: 0.4s; }
.anim.delay05 { transition-delay: 0.5s; }
.anim.delay06 { transition-delay: 0.6s; }

@media print, screen and (min-width:768px) {
	
	.anim.pc-no-anim {
		transition: none;
		opacity: 1;
		transform: translate(0,0);
	}
	
	.anim.pc-delay01 { transition-delay: 0.1s; }
	.anim.pc-delay02 { transition-delay: 0.2s; }
	.anim.pc-delay03 { transition-delay: 0.3s; }
	.anim.pc-delay04 { transition-delay: 0.4s; }
	.anim.pc-delay05 { transition-delay: 0.5s; }
	.anim.pc-delay06 { transition-delay: 0.6s; }
}

@media screen and (max-width:767px) {
	.anim.sp-popup {
		transform: scale(0.8) translateY(30px);
		transform-origin: center bottom;
	}
	
	.anim.sp-no-anim {
		transition: none;
		opacity: 1;
		transform: translate(0,0);
	}
	.anim.sp-delay01 { transition-delay: 0.1s; }
	.anim.sp-delay02 { transition-delay: 0.2s; }
	.anim.sp-delay03 { transition-delay: 0.3s; }
	.anim.sp-delay04 { transition-delay: 0.4s; }
	.anim.sp-delay05 { transition-delay: 0.5s; }
	.anim.sp-delay06 { transition-delay: 0.6s; }
}

.anim.on {
	opacity: 1;
	transform: translate(0,0);
}

/* -------------------------------------------------
	responsive
------------------------------------------------- */

@media print, screen and (min-width:768px) {
	.pc-none {
		display: none !important;
	}
}

@media screen and (max-width:767px) {
	.sp-none {
		display: none !important;
	}
}

/* -------------------------------------------------
	print
------------------------------------------------- */

@media print {
	body {
		width: 980px !important;
	}
}