@charset "utf-8";

/* ===============================================================
   ご利用ガイド メニュー（CSSのみ・画像不使用）
   =============================================================== */
.guide-menu {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	max-width: 672px; /* 150px×4 + gap×3 */
}
.guide-menu li {
	width: 150px;
}
.guide-menu a {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 150px;
	height: 150px;
	box-sizing: border-box;
	padding: 10px;
	background-color: #6b2238;
	color: #fff;
	text-decoration: none;
	text-align: center;
	line-height: 1.6;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.guide-menu .ja {
	display: block;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 14px;
}
.guide-menu .en {
	display: block;
	font-size: 13px;
	font-weight: normal;
	letter-spacing: 0.04em;
}

/* コーナー枠（4隅の独立したL字）。通常は非表示。
   1つの疑似要素に複数グラデーションで8本（横4・縦4）の線を描く */
.guide-menu a::before {
	content: "";
	position: absolute;
	top: 14px;
	right: 14px;
	bottom: 14px;
	left: 14px;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
	background-image:
		/* 横の腕（長さ16px・太さ1px） */
		linear-gradient(#6b2238, #6b2238),
		linear-gradient(#6b2238, #6b2238),
		linear-gradient(#6b2238, #6b2238),
		linear-gradient(#6b2238, #6b2238),
		/* 縦の腕（太さ1px・長さ16px） */
		linear-gradient(#6b2238, #6b2238),
		linear-gradient(#6b2238, #6b2238),
		linear-gradient(#6b2238, #6b2238),
		linear-gradient(#6b2238, #6b2238);
	background-repeat: no-repeat;
	background-size:
		16px 1px, 16px 1px, 16px 1px, 16px 1px,
		1px 16px, 1px 16px, 1px 16px, 1px 16px;
	background-position:
		left top, right top, left bottom, right bottom,
		left top, right top, left bottom, right bottom;
}

/* ---------------------------------------------------------------
   ホバー（PC=ホバー可能デバイスのみ）
   --------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
	.guide-menu a:hover {
		background-color: #fff;
		color: #6b2238;
	}
	.guide-menu a:hover .ja,
	.guide-menu a:hover .en {
		color: #6b2238;
	}
	.guide-menu a:hover::before {
		opacity: 1;
	}
}

/* スマホ等の狭い画面では2列に */
@media screen and (max-width: 700px) {
	.guide-menu {
		max-width: 324px;
		gap: 24px;
	}
}

/* ===============================================================
   ご利用ガイド 各ページ共通レイアウト
   =============================================================== */

/* ---- ページ見出し ---- */
.guide-title {
	max-width: 900px;
	margin: 40px auto 28px;
	padding: 0 16px;
	font-size: 22px;
	font-weight: bold;
	color: #333;
	text-align: center;
	line-height: 1.4;
}
.guide-title span {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: normal;
	letter-spacing: 0.08em;
	color: #333;
	text-transform: uppercase;
}

/* ---- 2カラムレイアウト ---- */
.guide-layout {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	max-width: 900px;
	margin: 0 auto 64px;
	padding: 0 16px;
	box-sizing: border-box;
}

/* ===============================================================
   左サイドメニュー
   =============================================================== */
.guide-side {
	flex: 0 0 160px;
	width: 160px;
}
.guide-side ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.guide-side li {
	margin-bottom: 8px;
}
.guide-side a {
	display: block;
	padding: 12px 10px;
	background-color: #6b2238;
	color: #fff;
	text-decoration: none;
	text-align: center;
	line-height: 1.5;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}
.guide-side .ja {
	display: block;
	font-size: 13px;
	font-weight: bold;
}
.guide-side .en {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	font-weight: normal;
	letter-spacing: 0.04em;
}
/* 現在表示中のページ */
.guide-side a.current {
	background-color: #fff;
	color: #6b2238;
	border: 1px solid #6b2238;
	padding: 11px 9px; /* border分を相殺 */
	cursor: default;
}
/* PCホバーのみ（現在ページ以外） */
@media (hover: hover) and (pointer: fine) {
	.guide-side a:not(.current):hover {
		background-color: #84304a;
	}
}

/* ===============================================================
   本文（helpInfo）
   =============================================================== */
.helpInfo {
	flex: 1 1 auto;
	min-width: 0;
}
.helpInfo dl {
	margin: 0;
}
.helpInfo dt {
	margin: 28px 0 14px;
	padding: 10px 14px;
	background-color: #f3ecee;
	border-left: 4px solid #6b2238;
	font-size: 15px;
	font-weight: bold;
	color: #6b2238;
}
.helpInfo dt:first-child {
	margin-top: 0;
}
.helpInfo dd {
	margin: 0 0 8px;
	padding: 0;
	font-size: 13px;
	line-height: 1.9;
	color: #333;
	overflow: hidden; /* floatクリア */
}
.helpInfo dd a {
	color: #6b2238;
	text-decoration: underline;
}

/* 説明画像（左寄せ回り込み） */
.helpInfo .leftimg {
	float: left;
	width: 280px;
	max-width: 45%;
	height: auto;
	margin: 0 20px 12px 0;
	border: 1px solid #e2e2e2;
}

/* 箇条書きリスト（dd内のul） */
.helpInfo dd ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.helpInfo dd ul li {
	position: relative;
	margin-bottom: 8px;
	padding-left: 1em;
}
.helpInfo dd ul li:before {
	content: "・";
	position: absolute;
	left: 0;
	color: #6b2238;
}

/* dd内の小見出し（【PC】 / (Windows) など） */
.helpInfo dd .gi_ttl01 {
	margin: 16px 0 6px;
	font-weight: bold;
	color: #6b2238;
}
.helpInfo dd .gi_ttl01:first-child {
	margin-top: 0;
}
.helpInfo dd .gi_ttl02 {
	margin: 10px 0 4px;
	font-weight: bold;
	color: #555;
}

/* dd内の番号付き手順リスト（クラス指定なしのol） */
.helpInfo dd ol {
	margin: 4px 0 12px;
	padding-left: 1.6em;
	list-style: decimal;
}
.helpInfo dd ol li {
	margin-bottom: 6px;
}

/* 入れ子のサブリスト（配達時間帯など） */
.helpInfo dd ul .subBox {
	margin: 6px 0 4px;
	padding-left: 1em;
}
.helpInfo dd ul .subBox li {
	margin-bottom: 2px;
}

/* 本文中の表（代引手数料など） */
.helpInfo dd table {
	border-collapse: collapse;
	margin: 14px 0 4px;
	width: auto;
	max-width: 100%;
}
.helpInfo dd table td,
.helpInfo dd table th {
	padding: 7px 16px;
	border: 1px solid #d9cdd1;
	font-size: 13px;
	white-space: nowrap;
	text-align: center;
}
.helpInfo dd table th,
.helpInfo dd table tr:first-child td {
	background-color: #6b2238 !important;
	color: #fff;
	font-weight: bold;
}

/* 手順番号リスト */
.helpInfo ol.markno {
	margin: 0;
	padding-left: 1.6em;
	list-style: decimal;
}
.helpInfo ol.markno > li {
	margin-bottom: 10px;
	padding-left: 4px;
}
.helpInfo ol.markno > li span {
	display: inline-block;
}
.helpInfo ol.markno > li.nomark {
	list-style: none;
	margin-left: -1.6em;
	margin-top: 16px;
}
.helpInfo ol.markno > li.nomark p {
	margin: 0;
	font-weight: bold;
	color: #6b2238;
}

/* ===============================================================
   よくあるご質問（FAQ）ページ専用
   =============================================================== */
/* 上部のよくいただくご質問ボックス */
.helpInfo.faq .menu_block {
	margin-bottom: 32px;
	padding: 20px 24px;
	background-color: #f7f3f4;
	border: 1px solid #e2d5d9;
}
.helpInfo.faq .menu_block_ttl {
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid #e2d5d9;
	font-size: 15px;
	font-weight: bold;
	color: #6b2238;
}
.helpInfo.faq .menu_l,
.helpInfo.faq .menu_r {
	display: inline-block;
	width: 48%;
	vertical-align: top;
	margin: 0;
	padding: 0;
	list-style: none;
}
.helpInfo.faq .menu_l li,
.helpInfo.faq .menu_r li {
	position: relative;
	margin-bottom: 14px;
	padding-left: 1.8em;
	font-size: 13px;
	line-height: 1.8;
}
.helpInfo.faq .menu_l li:last-child,
.helpInfo.faq .menu_r li:last-child {
	margin-bottom: 0;
}
.helpInfo.faq .menu_l li:before,
.helpInfo.faq .menu_r li:before {
	content: "Q.";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: bold;
	color: #6b2238;
}

/* 目次（2カラム） */
.helpInfo.faq .l_list {
	float: left;
	width: 48%;
}
.helpInfo.faq .r_list {
	float: right;
	width: 48%;
}
.helpInfo.faq .l_list h3,
.helpInfo.faq .r_list h3 {
	margin: 20px 0 8px;
	font-size: 14px;
	font-weight: bold;
	color: #6b2238;
}
.helpInfo.faq .l_list h3:first-child,
.helpInfo.faq .r_list h3:first-child {
	margin-top: 0;
}
.helpInfo.faq .l_list ol,
.helpInfo.faq .r_list ol {
	margin: 0 0 4px;
	padding-left: 1.8em;
	list-style: decimal;
}
.helpInfo.faq .l_list li,
.helpInfo.faq .r_list li {
	margin-bottom: 6px;
	font-size: 13px;
	line-height: 1.5;
}
.helpInfo.faq .l_list a,
.helpInfo.faq .r_list a,
.helpInfo.faq .menu_l a,
.helpInfo.faq .menu_r a {
	color: #444;
	text-decoration: none;
}
.helpInfo.faq .l_list a:hover,
.helpInfo.faq .r_list a:hover,
.helpInfo.faq .menu_l a:hover,
.helpInfo.faq .menu_r a:hover {
	color: #6b2238;
	text-decoration: underline;
}

/* 回答ブロック */
.helpInfo.faq .fqa_cate {
	clear: both;
	margin-bottom: 8px;
	padding-top: 24px;
}
.helpInfo.faq .fqa_cate h2 {
	margin: 0 0 16px;
	padding: 10px 16px;
	background-color: #6b2238;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
}
.helpInfo.faq .fqa_cate h4 {
	margin: 24px 0 8px;
	padding-bottom: 6px;
	border-bottom: 2px solid #e2d5d9;
	font-size: 14px;
	font-weight: bold;
	color: #333;
	line-height: 1.6;
}
.helpInfo.faq .fqa_cate p,
.helpInfo.faq .fqa_cate .p_div {
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 1.9;
	color: #333;
}
.helpInfo.faq .fqa_cate a {
	color: #6b2238;
	text-decoration: underline;
}
/* 回答内の箇条書き（お支払いの説明など） */
.helpInfo.faq .fqa_cate ul {
	margin: 6px 0 12px;
	padding: 0;
	list-style: none;
}
.helpInfo.faq .fqa_cate ul li {
	position: relative;
	margin-bottom: 6px;
	padding-left: 1em;
	font-size: 13px;
	line-height: 1.8;
}
.helpInfo.faq .fqa_cate ul li:before {
	content: "・";
	position: absolute;
	left: 0;
	color: #6b2238;
}
/* 回答内の表（代引手数料） */
.helpInfo.faq .fqa_cate table {
	border-collapse: collapse;
	margin: 12px 0;
	max-width: 100%;
}
.helpInfo.faq .fqa_cate table td {
	padding: 7px 16px;
	border: 1px solid #d9cdd1;
	font-size: 13px;
	text-align: center;
}
.helpInfo.faq .fqa_cate table tr:first-child td {
	background-color: #6b2238 !important;
	color: #fff;
	font-weight: bold;
}
/* スペーサーgif行は非表示に */
.helpInfo.faq .fqa_cate table td[colspan] {
	padding: 0;
	border: 0;
	line-height: 0;
}
.helpInfo.faq .fqa_cate table td[colspan] img {
	display: none;
}

/* topへ戻るリンク */
.helpInfo.faq .back_to_top {
	display: inline-block;
	margin-top: 8px;
	font-size: 12px;
	color: #9a6776;
	text-decoration: none;
}
.helpInfo.faq .back_to_top:hover {
	color: #6b2238;
	text-decoration: underline;
}

/* ===============================================================
   レスポンシブ（スマホ）
   =============================================================== */
@media screen and (max-width: 700px) {
	.guide-layout {
		flex-direction: column;
		gap: 24px;
	}
	.guide-side {
		flex: none;
		width: 100%;
	}
	.guide-side ul {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		align-items: stretch; /* 同じ行のliを同じ高さに */
	}
	.guide-side li {
		margin-bottom: 0;
		flex: 1 1 calc(50% - 4px);
		display: flex; /* 中のaをliの高さいっぱいに */
	}
	.guide-side a {
		flex: 1; /* liの高さに合わせて伸びる */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.helpInfo .leftimg {
		float: none;
		display: block;
		width: 100%;
		max-width: 360px;
		margin: 0 0 14px;
	}

	/* FAQ：2カラム→1カラム */
	.helpInfo.faq .menu_l,
	.helpInfo.faq .menu_r,
	.helpInfo.faq .l_list,
	.helpInfo.faq .r_list {
		float: none;
		display: block;
		width: 100%;
	}
}