@charset "utf-8";

/* ============================================
   グループページ 共通スタイル
   - 独立ページ(MEN 等): center_b.grp で使用
   - 本店カテゴリページのフリーパーツ貼付(RIDERS JACKET 等): div.grp.grp-embed で使用
   単位は px 固定(貼付先の html font-size に依存しないため)
   ============================================ */
.grp,
.grp * {
	box-sizing: border-box;
}

.center_b {
	width: 100%;
	margin: 0 auto;
}

.grp {
	font-family: "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
	font-size: 15px;
	color: #333;
	line-height: 1.8;
	text-align: left;
}

.grp a {
	text-decoration: none;
	color: inherit;
}

.grp img {
	max-width: 100%;
	height: auto;
	display: block;
	border: 0;
}

.grp ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.grp h1,
.grp h2,
.grp h3,
.grp p {
	margin: 0;
	padding: 0;
}

/* ---------- 共通 ---------- */
.grp-inner {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 16px;
}

/* パンくず(独立ページ用。カテゴリページ貼付時はシステムのパンくずを使うので入れない) */
.grp-bc {
	font-size: 12px;
	color: #666;
	padding: 10px 16px 0;
}

.grp-bc a:hover {
	text-decoration: underline;
}

/* ---------- 見出し(MEN / メンズ) ---------- */
.grp-head {
	text-align: center;
	padding: 36px 16px 8px;
}

.grp-head__en {
	font-family: "Times New Roman", "Yu Mincho", serif;
	font-weight: normal;
	font-size: 44px;
	line-height: 1.2;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	color: #333;
}

.grp-head__ja {
	font-size: 13px;
	color: #666;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	margin: 2px 0 0;
}

/* 長い英字タイトル(RIDERS JACKET 等)は1行に収める */
.grp-head__en--long {
	font-size: 28px;
	letter-spacing: 0.16em;
	text-indent: 0.16em;
	white-space: nowrap;
}

/* ---------- 案内テキスト ---------- */
.grp-intro {
	padding: 12px 16px 0;
	max-width: 720px;
	margin: 0 auto;
}

.grp-intro p {
	font-size: 14px;
	line-height: 1.9;
	margin: 0;
}

/* ---------- カテゴリーで選ぶ / 形状分類アイコン ---------- */
.grp-cats {
	padding: 36px 0 0;
	max-width: 720px;
	margin: 0 auto;
}

.grp-cats__title {
	font-size: 17.6px;
	font-weight: bold;
	padding: 0 16px 12px;
}

.grp-cats__list {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 6px;
	padding: 0 8px;
}

.grp-cats__item {
	width: calc((100% - 12px) / 3);
}

.grp-cats__item a {
	display: block;
}

.grp-cats__item a:hover {
	opacity: 0.8;
}

/* 先頭2枚を大きく(RIDERS JACKET: シングル/ダブル) */
.grp-cats--lead2 .grp-cats__item:nth-child(-n+2) {
	width: calc((100% - 6px) / 2);
}

/* ---------- FEATURE ---------- */
.grp-feat {
	padding: 48px 0 40px;
	max-width: 900px;
	margin: 0 auto;
}

.grp-feat__en,
.grp-rank__en {
	font-family: "Times New Roman", "Yu Mincho", serif;
	font-weight: normal;
	font-size: 33px;
	line-height: 1.2;
	letter-spacing: 0.25em;
	text-indent: 0.25em;
	text-align: center;
	color: #333;
}

.grp-feat__ja,
.grp-rank__ja {
	font-size: 12px;
	color: #666;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	text-align: center;
	margin: 0 0 16px;
}

.grp-feat__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 8px;
}

.grp-feat__item {
	width: calc(50% - 4px);
}

.grp-feat__item a {
	display: block;
}

.grp-feat__item a:hover {
	opacity: 0.85;
}

/* 画像サイズ混在(400/600)でも正方形に揃える */
.grp-feat__item img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* ---------- RANKING(バナー縦積み) ---------- */
.grp-rank {
	padding: 8px 0 32px;
	max-width: 720px;
	margin: 0 auto;
}

.grp-rank__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0 8px;
}

.grp-rank__item a {
	display: block;
}

.grp-rank__item a:hover {
	opacity: 0.85;
}

.grp-rank__item img {
	width: 100%;
}

/* ---------- 商品一覧の下: 選び方(HOW TO CHOOSE) ---------- */
.grp-howto {
	background: #f5f3ee;
	padding: 40px 8px 32px;
	margin: 32px 0 0;
}

.grp-howto__title {
	font-family: "Times New Roman", "Yu Mincho", serif;
	font-weight: normal;
	font-size: 21px;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-align: center;
	color: #333;
}

.grp-howto__sub {
	font-size: 11px;
	color: #888;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	text-align: center;
	margin: 4px 0 20px;
}

.grp-howto__list {
	max-width: 720px;
	margin: 0 auto;
}

.grp-howto__item {
	background: #fff;
	border-left: 4px solid #b28d4a;
	margin: 0 0 12px;
}

.grp-howto__item summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	font-size: 17px;
	font-weight: bold;
	padding: 16px 44px 16px 16px;
	line-height: 1.4;
}

.grp-howto__item summary::-webkit-details-marker {
	display: none;
}

.grp-howto__item summary::after {
	content: "+";
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 24px;
	font-weight: normal;
	color: #b28d4a;
	line-height: 1;
}

.grp-howto__item[open] summary::after {
	content: "−";
}

.grp-howto__body {
	padding: 0 16px 16px;
	font-size: 14px;
	line-height: 1.9;
}

.grp-howto__body p {
	margin: 0 0 12px;
}

.grp-howto__body p:last-child {
	margin-bottom: 0;
}

.grp-howto__body .grp-howto__lead {
	font-weight: bold;
}

/* ---------- PC ---------- */
@media screen and (min-width: 768px) {
	.grp-head {
		padding-top: 48px;
	}

	.grp-head__en {
		font-size: 56px;
	}

	.grp-head__ja {
		font-size: 15px;
	}

	.grp-head__en--long {
		font-size: 48px;
		letter-spacing: 0.25em;
		text-indent: 0.25em;
	}

	.grp-intro p {
		font-size: 15px;
		text-align: center;
	}

	.grp-cats__title {
		text-align: center;
		font-size: 20px;
	}

	.grp-cats__list {
		gap: 24px 16px;
		padding: 0 16px;
	}

	.grp-cats__item {
		width: calc((100% - 32px) / 3);
	}

	.grp-cats--lead2 .grp-cats__item:nth-child(-n+2) {
		width: calc((100% - 16px) / 2);
	}

	.grp-feat__en,
	.grp-rank__en {
		font-size: 40px;
	}

	.grp-feat__list {
		gap: 12px;
		padding: 0 16px;
	}

	.grp-feat__item {
		width: calc((100% - 36px) / 4);
	}

	.grp-rank__list {
		gap: 12px;
		padding: 0 16px;
	}

	.grp-howto {
		padding: 48px 16px 40px;
	}

	.grp-howto__title {
		font-size: 30px;
	}

	.grp-howto__item summary {
		font-size: 18px;
		padding: 18px 48px 18px 20px;
	}

	.grp-howto__body {
		padding: 0 20px 20px;
		font-size: 15px;
	}
}

/* ---------- 目的から探す / FEATURE: キャプション付きタイル(v6) ---------- */
.grp-scene {
	padding: 36px 0 8px;
	max-width: 900px;
	margin: 0 auto;
}

.grp-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	padding: 0 8px;
}

.grp-tiles__item {
	width: calc(50% - 4px);
}

.grp-tiles__item a,
.grp-wide a {
	display: block;
}

.grp-tiles__item a:hover,
.grp-wide a:hover {
	opacity: 0.85;
}

.grp-tiles__item img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.grp-tiles__cap {
	display: block;
	font-size: 12px;
	line-height: 1.4;
	color: #666;
	text-align: center;
	padding: 6px 2px 10px;
}

.grp-wide {
	padding: 4px 8px 0;
}

.grp-wide img {
	width: 100%;
}

.grp-feat .grp-tiles {
	padding-top: 0;
}

@media screen and (min-width: 768px) {
	.grp-tiles {
		gap: 8px 12px;
		padding: 0 16px;
	}

	.grp-tiles__item {
		width: calc((100% - 36px) / 4);
	}

	.grp-tiles__cap {
		font-size: 13px;
	}

	.grp-wide {
		max-width: 720px;
		margin: 0 auto;
		padding: 8px 16px 0;
	}
}

/* 独立ページ用: 共通フッターの上余白を詰める */
#footer > div {
	margin-top: 0 !important;
}

/* ---------- iframe 用固定枠(.grp-frame): iframe 幅が 768px 未満でも PC レイアウトを維持(2026-09-10 楽天PCで右切れ対策) ---------- */
.grp-frame {
	width: 100%;
	max-width: 850px;
	margin: 0 auto;
}
	.grp-frame .grp-head {
	padding-top: 48px;
}

.grp-frame .grp-head__en {
	font-size: 56px;
}

.grp-frame .grp-head__ja {
	font-size: 15px;
}

.grp-frame .grp-head__en--long {
	font-size: 48px;
	letter-spacing: 0.25em;
	text-indent: 0.25em;
}

.grp-frame .grp-intro p {
	font-size: 15px;
	text-align: center;
}

.grp-frame .grp-cats__title {
	text-align: center;
	font-size: 20px;
}

.grp-frame .grp-cats__list {
	gap: 24px 16px;
	padding: 0 16px;
}

.grp-frame .grp-cats__item {
	width: calc((100% - 32px) / 3);
}

.grp-frame .grp-cats--lead2 .grp-cats__item:nth-child(-n+2) {
	width: calc((100% - 16px) / 2);
}

.grp-frame .grp-feat__en,
.grp-frame .grp-rank__en {
	font-size: 40px;
}

.grp-frame .grp-feat__list {
	gap: 12px;
	padding: 0 16px;
}

.grp-frame .grp-feat__item {
	width: calc((100% - 36px) / 4);
}

.grp-frame .grp-rank__list {
	gap: 12px;
	padding: 0 16px;
}

.grp-frame .grp-howto {
	padding: 48px 16px 40px;
}

.grp-frame .grp-howto__title {
	font-size: 30px;
}

.grp-frame .grp-howto__item summary {
	font-size: 18px;
	padding: 18px 48px 18px 20px;
}

.grp-frame .grp-howto__body {
	padding: 0 20px 20px;
	font-size: 15px;
}
	.grp-frame .grp-tiles {
	gap: 8px 12px;
	padding: 0 16px;
}

.grp-frame .grp-tiles__item {
	width: calc((100% - 36px) / 4);
}

.grp-frame .grp-tiles__cap {
	font-size: 13px;
}

.grp-frame .grp-wide {
	max-width: 720px;
	margin: 0 auto;
	padding: 8px 16px 0;
}
/* DOUBLE / SINGLE RIDERS の iframe ページは FEATURE を常に2列(PC も2列・2026-09-10 naokoさん指示) */
.grp-frame.grp--dbl .grp-feat__list,
.grp-frame.grp--sgl .grp-feat__list {
	justify-content: center;
}

.grp-frame.grp--dbl .grp-feat__item,
.grp-frame.grp--sgl .grp-feat__item {
	width: calc((100% - 12px) / 2);
}

/* 見出しが長い(MILITARY / VINTAGE 等)場合: 幅726pxのiframeでも1行に収める(2026-09-10) */
.grp-head__en--xlong {
	font-size: 24px;
	letter-spacing: 0.12em;
	text-indent: 0.12em;
	white-space: nowrap;
}

@media screen and (min-width: 768px) {
	.grp-head__en--xlong {
		font-size: 40px;
	}
}

.grp-frame .grp-head__en--xlong {
	font-size: 40px;
}

/* ---------- TAILORED JACKET 等: コーナー(素材/フィッティング/カラーで選ぶ)+サムネイル一覧(2026-09-10) ---------- */
.grp-anchors {
	text-align: center;
	font-size: 14px;
	margin: 0 0 36px;
	padding: 0 8px;
}

.grp-anchors a {
	display: inline-block;
	color: #333;
	text-decoration: none;
	margin: 0 10px 6px;
}

.grp-anchors a:hover {
	text-decoration: underline;
}

.grp-sec {
	padding: 8px 0 28px;
	text-align: center;
}

.grp-sec__title {
	background: #efefef;
	font-size: 18px;
	font-weight: bold;
	line-height: 2.6;
	margin: 0 8px 28px !important;
	padding: 0;
}

.grp-sec__sub {
	font-size: 17px;
	font-weight: bold;
	margin: 30px 8px 8px !important;
	padding: 0;
}

.grp-sec__lead {
	font-size: 14px;
	line-height: 1.7;
	color: #333;
	margin: 0 12px 18px !important;
}

.grp-tn {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0 8px;
}

.grp-tn__item {
	width: calc(50% - 4px);
}

.grp-tn__item a {
	display: block;
}

.grp-tn__item a:hover {
	opacity: 0.85;
}

.grp-tn__item img {
	width: 100%;
	height: auto;
}

@media screen and (min-width: 768px) {
	.grp-anchors {
		font-size: 16px;
	}

	.grp-sec__title {
		font-size: 22px;
		margin: 0 11% 32px !important;
	}

	.grp-sec__sub {
		font-size: 20px;
	}

	.grp-sec__lead {
		font-size: 15px;
	}

	.grp-tn {
		gap: 16px;
		padding: 0 16px;
	}

	.grp-tn__item {
		width: calc((100% - 24px) / 3);
	}
}

.grp-frame .grp-anchors {
	font-size: 16px;
}

.grp-frame .grp-sec__title {
	font-size: 22px;
	margin: 0 11% 32px !important;
}

.grp-frame .grp-sec__sub {
	font-size: 20px;
}

.grp-frame .grp-sec__lead {
	font-size: 15px;
}

.grp-frame .grp-tn {
	gap: 16px;
	padding: 0 16px;
}

.grp-frame .grp-tn__item {
	width: calc((100% - 24px) / 3);
}