/* Y'S GEAR : /mc/wear/designer_hoodie/css/designer_hoodie.css */


.contentsWidth {
	overflow: hidden;
	padding: 30px 0 0 0;
	background: url(../img/main.jpg) center top / 100% auto no-repeat #fff;
	/* color: #fff; */
	font-size: 1.6rem;
	font-weight: 500;
}

.contentsWidth * {
	box-sizing: border-box;
}

.contentsWidth a,
.contentsWidth a img { transition: all ease .3s; }

@media screen and (max-width: 980px) {
	.contentsWidth {
		padding-top: 12px !important;
	}
} /* */


/*======================================================================*
 *  [ designerMain ] 
 *======================================================================*/

.designerMain {
	margin-bottom: 50px;
	padding-top: 27%;
	text-align: center;
}

/* [ タイトル ] */
.designerMain .ttl {
	margin-bottom: 20px;
}

/* [ テキスト ] */
.designerMain .txt {
	margin-bottom: 20px;
	font-weight: bold;
	line-height: 1.8;
}

/* [ 予約期間・注釈 ] */
.designerMain .rsv {
	display: inline-block;
	margin-right: 10px;
}
.designerMain .note {
	display: inline-block;
	margin-top: 10px;
	padding-left: 1em;
	font-size: 1.2rem;
	text-indent: -1em;
	vertical-align: bottom;
}
.designerMain .notes {
	display: inline-block;
	margin-top: 10px;
	font-size: 1.2rem;
	vertical-align: bottom;
}
.designerMain .notes li {
	padding-left: 1em;
	text-indent: -1em;
}

/* [ 予約期間終了 ] */
.designerMain .end {
	/* color: #FFFF11; */
	/* margin-bottom: 30px; */
	color: red;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
}
.designerMain .end span {
	display: inline-block;
}

/* [ 取扱店舗 ] */
.designerMain .shop {
	display: flex;
	justify-content: center;
	margin-top: 25px;
	padding: 7px 15px;
	border: 1px solid #fff;
	background: #EDEDED;
	font-size: 1.8rem;
	font-weight: bold;
	/* text-align: left; */
}
.designerMain .shop dt {
	font-size: 1.6rem;
	line-height: 1.55;
	white-space: nowrap;
}
.designerMain .shop dd {
	/* flex: 1; */
}
.designerMain .shop dd span {
	display: inline-block;
}

@media screen and (max-width: 568px) {
	/* [ テキスト ] */
	.designerMain .txt {
		font-size: 1.5rem;
	}

	/* [ 予約期間・注釈 ] */
	.designerMain .note {
		font-size: 1.1rem;
	}
	.designerMain .notes {
		font-size: 1.1rem;
	}

	/* [ 予約期間終了 ] */
	.designerMain .end {
		font-size: 1.6rem;
	}

	/* [ 取扱店舗 ] */
	.designerMain .shop {
		padding: 5px 10px;
		font-size: 1.5rem;
		text-align: left;
	}
	.designerMain .shop dt {
		font-size: 1.3rem;
	}
} /* */


/*======================================================================*
 *  [ designerLineup ] 
 *======================================================================*/

/* [ タイトル ] */
.designerLineup h2 {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.8em;
	margin-bottom: 50px;
	font-size: 3rem;
	font-family:
		"游ゴシック体", "Yu Gothic", YuGothic, 
		"メイリオ", Meiryo, 
		"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 
		"ＭＳ Ｐゴシック", "MS PGothic", 
		sans-serif;
	font-weight: bold;
	text-align: center;
}
.designerLineup h2::before, 
.designerLineup h2::after {
	content: "／";
}

/* [ アイテム ] */
.designerLineup .item {
	position: relative;
	margin-bottom: 130px;
	padding-bottom: 60px;
	padding: 39px 39px 49px;
	border: 1px solid #707070;
	text-align: center;
}

/* [ モデル ] */
.designerLineup .model {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 5px;
	z-index: 1;
}
.designerLineup .model img {
	width: min(44%, 220px);
}
.designerLineup .model p {
	flex: 1;
	position: relative;
	color: #666;
	font-size: 1.4rem;
	line-height: 1.8;
}
.designerLineup .model p::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 120px;
	height: 38px;
	background: url(../img/model_ttl.svg) center center / contain no-repeat;
	transform: translate(-35%, -60%);
	content: "";
}
.designerLineup .model p span {
	font-size: calc(1em - 0.2rem);
}

/* [ イラスト ] */
.designerLineup .illust {
	position: absolute;
	top: 39px;
	left: 39px;
	max-width: calc(100% - 78px);
}

/* [ 商品 ] */
.designerLineup .detail {
	position: relative;
	z-index: 1;
}
.designerLineup .detail h3 {
	width: fit-content;
	margin: 0 auto 10px;
	padding-top: 15px;
	border-top: 1px solid #000;
}

/* [ ボタン ] */
.designerLineup .btn {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	right: 39px;
	bottom: 0;
	width: 180px;
	height: 60px;
	/* border: 1px solid #fff; */
	background: #000;
	color: #fff;
	transform: translateY(50%);
	z-index: 1;
}
.designerLineup .btn:hover, 
.designerLineup .btn:active {
	border-color: #fff !important;
	color: #fff !important;
	background: #666;
}
.designerLineup .ow81    .btn:hover,
.designerLineup .ow81    .btn:active { background: #765453; }
.designerLineup .cp2     .btn:hover,
.designerLineup .cp2     .btn:active { background: #3F4859; }
.designerLineup .sr      .btn:hover,
.designerLineup .sr      .btn:active { background: #675748; }
.designerLineup .dsoj    .btn:hover,
.designerLineup .dsoj    .btn:active { background: #636468; }
.designerLineup .tricker .btn:hover,
.designerLineup .tricker .btn:active { background: #797B70; }
.designerLineup .btn::before {
	display: block;
	width: 10px;
	height: 20px;
	background: url(../img/icon_arrow.svg) center center / contain no-repeat;
	content: "";
}
/* 非アクティブ */
.designerLineup .btn.is-disable {
	pointer-events: none;
}
.designerLineup .btn.is-disable::after {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.7);
	font-weight: bold;
	content: "Coming Soon";
}

@media print, screen and (min-width: 721px) {
	/* [ アイテム ] */
	.designerLineup .item {
		/* min-height: 670px; */
		padding-left: 44.45%;
	}

	/* [ イラスト ] */
	.designerLineup .illust {
		max-width: 70%;
	}
} /* */

@media screen and (max-width: 720px) {
	/* [ タイトル ] */
	.designerLineup h2 {
		font-size: 2.6rem;
	}

	/* [ アイテム ] */
	.designerLineup .item {
		margin-bottom:100px;
		padding: 29px 29px 49px;
	}

	/* [ イラスト ] */
	.designerLineup .illust {
		top: auto;
		left: 29px;
		width: 100%;
		max-width: calc(100% - 58px);
	}

	/* [ 商品 ] */
	.designerLineup .detail {
		padding-top: 95%;
	}

	/* [ ボタン ] */
	.designerLineup .btn {
		right: 29px;
	}
} /* */

@media screen and (max-width: 568px) {
	/* [ タイトル ] */
	.designerLineup h2 {
		margin-bottom: 20px;
	}

	/* [ アイテム ] */
	.designerLineup .item {
		padding: 0 0 49px;
		border-top: none;
		border-right: none;
		border-left: none;
	}

	/* [ イラスト ] */
	.designerLineup .illust {
		right: 0;
		left: 0;
		max-width: 100%;
	}

	/* [ モデル ] */
	.designerLineup .model {
		justify-content: right;
		min-height: 130px;
		margin-left: -10px;
		/* overflow-x: hidden;
		overflow-y: visible; */
	}
	.designerLineup .model img {
		position: absolute;
		right: calc(62% + 10px);
		width: 180px;
	}
	.designerLineup .model p {
		flex: none;
		width: 62%;
		font-size: 1.3rem;
	}

	/* [ 商品 ] */
	.designerLineup .detail {
		padding-top: 100%;
	}
	.designerLineup .detail h3 {
		padding-top: 0;
		border-top: none;
	}
	.designerLineup .detail h3 img {
		max-width: 240px;
	}

	/* [ ボタン ] */
	.designerLineup .btn {
		right: 0;
		width: 160px;
		height: 48px;
		font-size: 1.5rem;
	}
} /* */

/* [ アニメーション：フェードイン ] */
@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}  

/* [ アニメーション：スライドアップ ] */
@keyframes slideUp {
	0% {
	  transform: translateY(30px);
	  opacity: 0;
	}
	100% { transform: translateX(0); }
	60%, 100% { opacity: 1; }
}  

/* [ アニメーション：スライドイン ] */
@keyframes slideIn {
	0% {
	  transform: translateX(-100%);
	  opacity: 0;
	}
	100% { transform: translateX(0); }
	60%, 100% { opacity: 1; }
}

/* [ モデル ] */
.designerLineup .item.is-hide .model img {
	opacity: 0;
	transform: translateX(-100%);
}
.designerLineup .item.is-show .model img {
	animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* [ イラスト ] */
.designerLineup .item.is-hide .illust {
	opacity: 0;
}
.designerLineup .item.is-show .illust {
	animation: fadeIn 2s ease forwards;
}

/* [ 商品 ] */
.designerLineup .item.is-hide .detail > img {
	opacity: 0;
	transform: translateY(30px);
}
.designerLineup .item.is-show .detail > img {
	animation: slideUp 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}


/*======================================================================*
 *  [ designerNote ] 
 *======================================================================*/

/* [ プレス痕について ] */
.designerNote {
	margin-bottom: 100px;
	padding: 20px;
	/* background: #000; */
	border: 1px solid #DDD;
	font-size: 1.4rem;
	/* line-height: 1.6; */
	text-align: center;
}
.designerNote dt {
	margin-bottom: 15px;
	font-size: 1.6rem;
	text-align: center;
}
.designerNote dt b {
	display: inline-block;
	padding-bottom: 2px;
	border-bottom: 4px double #000;
}

@media screen and (max-width: 720px) {
	/* [ プレス痕について ] */
	.designerNote {
		margin-bottom: 80px;
	}
} /* */

@media screen and (max-width: 568px) {
	/* [ プレス痕について ] */
	.designerNote {
		padding: 15px 10px;
		/* font-size: 1.4rem; */
	}
} /* */


/*======================================================================*
 *  [ designerLink ] 
 *======================================================================*/

.designerLink {
	display: block;
}

@media screen and (max-width: 568px) {
	.designerLink {
		margin: 0 -10px;
	}
} /* */