@charset "utf-8";
/*==================================================
	2026AW TOPリニューアル用 追加スタイル
	※グレー部分は画像入稿後に <img> へ差し替え
==================================================*/
/* --- 画像未入稿のグレープレースホルダー（カード） --- */
#Top main .img_wrap.is_ph {
	background-color: #b3b3b3;
	display: flex;
	align-items: center;
	justify-content: center;
}
#Top main .img_wrap.is_ph .ph_label {
	font-size: 14px;
	line-height: 1.5;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: #000;
	text-align: center;
	padding: 0 10px;
	box-sizing: border-box;
}
#Top main .card_wrap .img_wrap.is_ph .ph_label {
	position: relative;
	z-index: 2;
}

/* --- 画像未入稿のグレープレースホルダー（横長バナー） --- */
#Top main .ph_banner {
	background-color: #cccccc;
	aspect-ratio: 2048/930;
	display: flex;
	align-items: center;
	justify-content: center;
}
#Top main .ph_banner span {
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: #000;
	text-align: center;
}
@media (max-width: 899px) {
	#Top main .ph_banner {
		aspect-ratio: 750/1080;
	}
}

/* --- FEATURE --- */
#Top main .feature_sec {
	padding: 0 0 60px 0;
}
#Top main .feature_sec .feature_txt {
	display: block;
	text-align: center;
	color: #000;
	text-decoration: none;
}
#Top main .feature_sec .feature_txt .feature_num {
	display: block;
	font-size: 12px;
	line-height: 1.35;
	letter-spacing: 0.02em;
	font-weight: 300;
	margin-bottom: 5px;
}
#Top main .feature_sec .feature_txt .feature_product {
	display: block;
	font-size: 20px;
	line-height: 1.35;
	letter-spacing: 0.02em;
}
@media (max-width: 899px) {
	#Top main .feature_sec .feature_txt .feature_product {
		font-size: 16px;
	}
}

/* --- STORE（6枚並び） --- */
#Top main .store_sec {
	padding: 0 0 60px 0;
}
@media (min-width: 900px) {
	.swiper-category-container.store_slider > .swiper-wrapper > .swiper-slide {
		width: 204px;
	}
}
@media (max-width: 899px) {
	.swiper-category-container.store_slider > .swiper-wrapper > .swiper-slide {
		width: 40%;
	}
}

/* --- HYOD SELECTION（フルワイドバナー） --- */
#Top main .selection_sec {
	padding: 0 0 45px 0;
}
#Top main .selection_sec .banner_list .banner_item {
	margin: 0;
}
#Top main .selection_sec .banner_list .banner_item + .banner_item {
	margin-top: 45px;
}
#Top main .selection_sec .banner_list .banner_item img {
	width: 100%;
	height: auto;
	display: block;
}
@media (max-width: 899px) {
	#Top main .selection_sec .banner_list .banner_item + .banner_item {
		margin-top: 30px;
	}
}

/* --- CONCEPT COLUMN（コラムスライダー） --- */
#Top main .column_sec {
	padding: 0 0 60px 0;
}

/* --- SPOT LIGHT --- */
#Top main .arrival_sec.spot_sec {
	margin-top: 20px;
}
#Top main .arrival_sec.spot_sec .product_box .arrival_container h2 {
	font-size: 30px;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-align: left;
	margin-bottom: 30px;
}
@media (max-width: 899px) {
	#Top main .arrival_sec.spot_sec .product_box .arrival_container h2 {
		font-size: 40px;
		margin-bottom: 47px;
	}
}
#Top main .arrival_sec.spot_sec .product_box .arrival_container .arrival_list li a .arrival_img img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;   /* PRODUCT LINEUP の .card_wrap .img_wrap img と同じR */
}
#Top main .arrival_sec.spot_sec .product_box .arrival_container .link_wrap02 {
	margin-bottom: 0;
}

/* --- HYOD CORE --- */
#Top main .core_sec {
	padding: 30px 0 40px 0;
}
/* HYOD CORE はスライダー化（SP の「横スライド」指示）。
   PC は slidesPerView:2 で 2 枚とも収まるため矢印は不要 */
#Top main .core_sec {
	overflow: hidden;
}
@media (min-width: 900px) {
	#Top main .core_sec .swiper-core-container .swiper-button-next,
	#Top main .core_sec .swiper-core-container .swiper-button-prev {
		display: none;
	}
}
#Top main .core_sec .core_card {
	position: relative;
	display: block;
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 3/2;
	background-color: #cccccc;
	transition: transform 0.3s cubic-bezier(0.38, 0.41, 0.27, 1);
}
@media (min-width: 900px) {
	#Top main .core_sec a.core_card:hover {
		transform: scale(1.02);
	}
}
#Top main .core_sec .core_card .img_wrap {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
#Top main .core_sec .core_card .img_wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	font-family: "object-fit: cover;object-position: center;";
}
#Top main .core_sec .core_card .img_wrap::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.25);
}
#Top main .core_sec .core_card.is_ph .img_wrap::after {
	display: none;
}
#Top main .core_sec .core_card .core_text {
	position: relative;
	z-index: 2;
	padding: 32px;
}
@media (max-width: 899px) {
	#Top main .core_sec .core_card .core_text {
		padding: 20px;
	}
}
#Top main .core_sec .core_card .core_ttl {
	font-size: 30px;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: #fff;
	margin: 0 0 10px;
}
#Top main .core_sec .core_card .core_lead {
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0.06em;
	color: #fff;
	margin: 0 0 18px;
}
#Top main .core_sec .core_card .core_button {
	display: inline-block;
	background-color: #fff;
	color: #000;
	font-size: 16px;
	line-height: 1;
	font-weight: 500;
	padding: 12px 15px;
	width: 128px;
	text-align: center;
	border-radius: 20px;
	box-sizing: border-box;
}

/*==================================================
	デザイン赤字指示の反映（2026/09/05 版 .ai の order レイヤー）
==================================================*/

/* --- 「●サイズ変更 W600×H700px」PRODUCT LINEUP のカードのみ 6:7 --- */
#Top main .mv_sec02 .swiper-slide.ww .card_wrap .img_wrap {
	aspect-ratio: 600 / 700;
}

/* --- 「サイズ正方形に変更になります」HYOD CORE のカード --- */
#Top main .core_sec .core_card {
	aspect-ratio: 1 / 1;
}

/* --- 「見出しは左端に統一」--- */
/* INSTAGRAM だけ SP で中央寄せになっていたので他の見出しに揃える */
@media (max-width: 899px) {
	#Top main .insta_sec .sec_ttl {
		text-align: left;
	}
}


/* --- 「間隔狭めてください」「画像と文字の間も間隔狭めてください」 ---
   デザイン comp のセクション間は 46〜56px、見出し⇔コンテンツは 30px 前後。
   赤字はそれを「さらに詰める」指示なので、
   セクション間 40px / 見出し⇔コンテンツ 16px に統一する。 */

/* 見出し → コンテンツ */
#Top main .container-fluid h2.tit,
#Top main .arrival_sec.spot_sec .product_box .arrival_container h2,
#Top main .insta_sec .sec_ttl {
	margin-bottom: 16px;
}

/* セクション間を 40px に統一 */
#Top main .mv_sec02 {
	padding-bottom: 40px;
}
#Top main .feature_sec {
	padding-bottom: 20px;   /* + .spot_sec の margin-top 20px = 40px */
}
#Top main .arrival_sec.spot_sec {
	margin-bottom: 0;
}
#Top main .selection_sec {
	/* 「ラインアップを見る」ボタン → HYOD SELECTION 見出しはボタンの
	   まわりに余白があるぶん広く見えるので、他より詰めて 24px にする
	   （SP は .link_wrap02 の padding-bottom があるので別途 8px） */
	padding-top: 24px;
	padding-bottom: 10px;   /* + .core_sec の padding-top 30px = 40px */
}
#Top main .core_sec {
	padding: 30px 0 40px;
}
#Top main .column_sec {
	padding-bottom: 40px;
}
#Top main .store_sec {
	padding-bottom: 0;
}
#Top main .insta_sec {
	padding-top: 40px;
}

/* バナー間（HYOD SELECTION / CONCEPT COLUMN） */
#Top main .selection_sec .banner_list .banner_item + .banner_item,
#Top main .column_sec .banner_list .banner_item + .banner_item {
	margin-top: 30px;
}

/* --- 横スクロール防止 ---
   右見切れスライダー（.right-visible-container）は overflow: visible なので、
   style.css では `#Top main .mv_sec { overflow: hidden }` や
   `.story_sec.story3_sec .right-visible-container` でセクション側にクリップしている。
   CONCEPT COLUMN を .column_sec に作り替えた際にその受け皿が無くなり、
   3枚目より右のスライドがページ幅を押し広げていたため、セクションでクリップする。
   （.mv_sec と同じくセクション幅で切るので左右の矢印は見切れない） */
#Top main .column_sec {
	overflow: hidden;
}


/*==================================================
	SP（〜899px）デザイン反映
	260910_HYOD_Web_TOP_mobile.pdf / アートボード 375px
==================================================*/
@media (max-width: 899px) {

	/* --- 「フォントサイズ下げる」見出し 40px → 20px ---
	   デザイン実測：見出しの字幅が PC の 0.667 倍（PC 30px → SP 20px） */
	body#Top main .container-fluid h2.tit,
	body#Top main .container-fluid.right-visible-container h2.tit,
	body#Top main .mv_sec .right-visible-container h2.tit,
	body#Top main .insta_sec .sec_ttl,
	body#Top main .arrival_sec.spot_sec .product_box .arrival_container h2 {
		font-size: 20px;
		line-height: 1.2;
		/* 「見出しは左端に統一」PRODUCT LINEUP / FEATURE / STORE が中央寄せだった */
		text-align: left;
	}

	/* --- 「画像と文字の間も間隔狭めてください」
	   デザインは 見出しベースライン → コンテンツ上端 が約10px --- */
	body#Top main .container-fluid h2.tit,
	body#Top main .container-fluid.right-visible-container h2.tit,
	body#Top main .mv_sec .right-visible-container h2.tit,
	body#Top main .insta_sec .sec_ttl,
	body#Top main .arrival_sec.spot_sec .product_box .arrival_container h2 {
		margin-bottom: 6px;
	}

	/* --- 「間隔狭めてください」セクション間を 24px に統一 ---
	   style_sp.css の .container-fluid は padding-top:40px を持っていて
	   すべての見出しの上に 40px 乗ってしまうため、TOP では 0 にしてから
	   セクション側の padding で間隔を作る */
	body#Top main .container-fluid,
	body#Top main .mv_sec .right-visible-container {
		padding-top: 0;
	}
	body#Top main .container-fluid h2.tit,
	body#Top main .mv_sec .right-visible-container h2.tit,
	body#Top main .insta_sec .sec_ttl {
		margin-top: 0;
	}
	#Top main .mv_sec02 {
		padding-top: 24px;
		padding-bottom: 24px;
	}
	#Top main .feature_sec {
		padding-bottom: 24px;
	}
	#Top main .arrival_sec.spot_sec {
		margin-top: 0;
		margin-bottom: 0;
	}
	/* style_sp.css の .link_wrap02 は padding: 15px 0 30px。
	   ボタン下の 30px を半分にする */
	#Top main .arrival_sec.spot_sec .product_box .arrival_container .link_wrap02 {
		padding-bottom: 15px;
	}
	#Top main .selection_sec {
		padding-top: 8px;    /* ボタン → 見出しはさらに詰める */
		padding-bottom: 24px;
	}
	#Top main .core_sec {
		padding: 0 0 24px;
	}
	#Top main .column_sec {
		padding-bottom: 24px;
	}
	#Top main .store_sec {
		padding-bottom: 24px;
	}
	#Top main .insta_sec {
		padding-top: 0;
	}
	#Top main .selection_sec .banner_list .banner_item + .banner_item,
	#Top main .column_sec .banner_list .banner_item + .banner_item {
		margin-top: 20px;
	}

	/* --- カード幅をデザインに合わせる（コンテンツ幅 335px 基準） --- */
	/* PRODUCT LINEUP / FEATURE：290px（右に次カードが少し見える） */
	.swiper-category-container > .swiper-wrapper > .swiper-slide {
		width: 86.5%;
	}
	/* STORE：206px */
	.swiper-category-container.store_slider > .swiper-wrapper > .swiper-slide {
		width: 61.5%;
	}

	/* HYOD SELECTION：SP 用の横長バナー（750x500）を 2026/09/16 に入稿いただいたので
	   PC 画像の代用表示は解除し、通常どおり .sp を表示する */

	/* --- CONCEPT COLUMN ---
	   style_sp.css は SP だとテキストを画像の下に出す指定（position:relative /
	   文字色 #000 / 見る 非表示）になっているが、デザインは PC と同じく
	   画像の上に白文字で重ねる形なので戻す */
	#Top main .column_sec .card_wrap.column_card .text_wrap {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		justify-content: flex-end;
		padding: 15px 20px 18px;
	}
	#Top main .column_sec .card_wrap.column_card .text_wrap .border-text {
		font-size: 11px;
		color: #fff;
		padding-left: 26px;
		margin: 0 0 8px;
	}
	#Top main .column_sec .card_wrap.column_card .text_wrap .border-text::before {
		width: 18px;
		background-color: #fff;
	}
	#Top main .column_sec .card_wrap.column_card .text_wrap .column-title {
		font-size: 14px;
		line-height: 1.45;
		color: #fff;
		margin-bottom: 10px;
	}
	/* SP はホバーが無いので 見る は常時表示 */
	#Top main .column_sec .card_wrap.column_card .text_wrap .hover_button {
		display: inline-block;
		opacity: 1;
		transform: none;
		font-size: 11px;
		width: 88px;
		padding: 8px 10px;
	}

	/* --- 「サイズ変更 / 横スライド」HYOD CORE ---
	   デザインは画面幅いっぱいの正方形カードが横に流れる */
	#Top main .core_sec .swiper-core-container {
		margin-left: -20px;
		margin-right: -20px;
	}
	/* SP はテキストがカード下部（PC は上部） */
	#Top main .core_sec .core_card {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
	/* カードが画面幅いっぱいなので矢印は内側に置く */
	#Top main .core_sec .swiper-core-container .swiper-button-next {
		right: 20px;
	}
	#Top main .core_sec .swiper-core-container .swiper-button-prev {
		left: 20px;
	}
}


/*==================================================
	Swiper の高さ暴走対策
	swiper.css の `.swiper-wrapper{height:100%}` / `.swiper-slide{height:100%}` は
	従来カード（.tall = height:462px 固定）なら問題なかったが、
	aspect-ratio でしか高さが決まらないカードだと参照先が不定になり、
	スライドがビューポート高さまで伸びて巨大な余白ができてしまう。
	TOP のスライダーは明示的に高さ auto にする。
==================================================*/
#Top main .swiper-main,
#Top main .swiper-main > .swiper-wrapper,
#Top main .swiper-main > .swiper-wrapper > .swiper-slide,
#Top main .swiper-category-container,
#Top main .swiper-category-container > .swiper-wrapper,
#Top main .swiper-category-container > .swiper-wrapper > .swiper-slide,
#Top main .swiper-core-container,
#Top main .swiper-core-container > .swiper-wrapper,
#Top main .swiper-core-container > .swiper-wrapper > .swiper-slide,
#Top main .swiper-column-container,
#Top main .swiper-column-container > .swiper-wrapper,
#Top main .swiper-column-container > .swiper-wrapper > .swiper-slide,
#Top main .swiper-insta-container,
#Top main .swiper-insta-container > .swiper-wrapper,
#Top main .swiper-insta-container > .swiper-wrapper > .swiper-slide {
	height: auto;
}


/*==================================================
	CONCEPT COLUMN カード画像
	img には max-width:100% しか効いていないため、画像の実寸が
	カード幅より小さいと引き伸ばされず右側に余白が出る。
	画像を必ず枠いっぱいに広げ、高さは画像の比率どおりにする
	（＝トリミングせず画像データに合わせる）。
==================================================*/
#Top main .column_sec .card_wrap.column_card .img_wrap {
	overflow: hidden;
}
#Top main .column_sec .card_wrap.column_card .img_wrap img {
	width: 100%;
	height: auto;
	display: block;
}