@charset "utf-8";
/* レイアウトシフト対策 */
.wp-headerarea-wrap {
	min-height: 152px;
}

@media (max-width: 767px) {
	.wp-headerarea-wrap {
		min-height: 125px;
	}
}

/* ■■■■■■■■■■共通■■■■■■■■■■ */
h1.fs-c-heading{
	font-weight: 700;
	text-align: center;
	width: var(--inner-w);
	max-width: var(--pc-maw);
  color: var(--txt-c-base);
	margin-inline: auto;
  font-family: var(--ff-base);
  padding: 0;
  border: none;
}
@media screen and (min-width: 768px){
  h1.fs-c-heading{
		font-size: var(--fz-30);
		margin-block: var(--spc-40);
	}
}
@media screen and (max-width: 767px){
  h1.fs-c-heading{
		font-size: 18px;
		margin-bottom: 20px;
	}
}
/* g-heading */
h1.g-heading {
	padding: var(--sec-spc-half) 0;
}

/* s-txt */
.s-txt {
	display: grid;
}

.s-txt mark {
	background: linear-gradient(transparent 70%, #fff799 30%);
}

.s-txt__list>li {
	position: relative;
	margin-left: 10px;
}

.s-txt__list>li::before {
	content: '';
	display: inline-block;
	background: var(--c-black);
	aspect-ratio: 1/1;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

.s-txt__note li {
	position: relative;
	color: var(--txt-c-addon);
}

.s-txt__note li::before {
	content: '※';
	position: absolute;
	top: 0;
	left: 0;
}

.s-txt__order {
	counter-reset: original-counter;
}

.s-txt__order>li::before {
	content: counter(original-counter)'.';
	counter-increment: original-counter;
}

@media screen and (min-width: 768px) {
	.s-txt * {
		font-size: 16px;
		line-height: 2;
	}

	.s-txt p:has(mark) {
		line-height: 2.5;
	}

	.s-txt>p:not(:first-child) {
		margin-top: var(--spc-20);
	}

	.s-txt>*+.s-txt__list {
		margin-top: var(--spc-20);
	}

	.s-txt mark {
		padding: 2px 5px 3px;
	}

	.s-txt__list>li {
		padding-left: 13px;
	}

	.s-txt__list>li::before {
		width: 4px;
		top: 17px;
	}

	.s-txt__note li {
		font-size: var(--fz-12);
		padding-left: 15px;
	}
}

@media screen and (max-width: 767px) {
	.s-txt * {
		font-size: var(--fz-14);
		line-height: 1.8;
	}

	.s-txt p:has(mark) {
		line-height: 2.5;
	}

	.s-txt>p:not(:first-child) {
		margin-top: var(--spc-20);
	}

	.s-txt>*+.s-txt__list {
		margin-top: var(--spc-20);
	}

	.s-txt mark {
		padding: 2px 5px 3px;
	}

	.s-txt__list>li {
		padding-left: 12px;
	}

	.s-txt__list>li::before {
		width: 3px;
		top: 12px;
	}

	.s-txt__note li {
		font-size: var(--fz-12);
		padding-left: 15px;
	}
}

/* s-descWithImg */
.s-descWithImg {
	display: grid;
	gap: var(--sec-spc);
}

.s-descWithImg__desc {
	display: grid;
}

@media screen and (min-width: 768px) {
	.s-descWithImg li {
		display: flex;
		gap: var(--spc-40);
		align-items: flex-start;
	}

	.s-descWithImg--crossList li:nth-child(even) {
		flex-direction: row-reverse;
	}

	.s-descWithImg li>* {
		flex: 1;
	}

	.s-descWithImg__desc {
		gap: var(--spc-30);
	}
}

@media screen and (max-width: 767px) {
	.s-descWithImg li {
		display: grid;
		gap: var(--spc-20);
	}

	.s-descWithImg__desc {
		gap: var(--spc-30);
	}
}

/* ========================================
   お買い物ガイド：雛形の2カラム・目次・本文パーツ
   XD基準1440px：全体1000px・目次220px・間隔100px・本文680px。
   freepage.css内で完結。SP目次の開閉ルールは維持。
======================================== */
.s-guidePage {
	letter-spacing: .05em;
}

@media screen and (min-width: 768px) {
	.s-guidePage .g-btnContainer {
		margin-top: var(--spc-30) !important;
	}
}

@media screen and (max-width: 767px) {
	.s-guidePage .g-btnContainer {
		margin-top: 25px !important;
	}
}

.s-guideContainer {
	display: grid;
	max-width: 1000px;
	grid-template-columns: 220px minmax(0, 1fr);
	align-items: start;
	gap: var(--spc-100);
	margin-top: var(--spc-100);
}

.s-guideContents {
	min-width: 0;
	display: grid;
	gap: var(--sec-spc);
}

.s-guideColumn {
	min-width: 0;
	scroll-margin-top: 30px;
}

.s-guideColumn__heading {
	margin: 0 0 var(--spc-40);
	padding: 0 10px 6px;
	border-bottom: 1px solid var(--orange-600);
	font-size: var(--fz-28);
	font-weight: 700;
	line-height: 1.428572;
}

.s-guideColumn__part {
	padding-inline: 10px;
}
.s-guideColumn .s-guideColumn__part .s-guideColumn__ttl{
	padding-top: var(--spc-40);
	border-top: 1px solid var(--orange-500);
}
.s-guideColumn .s-guideColumn__part:nth-child(2) .s-guideColumn__ttl{
	border: none;
	padding-top: 0px;
}

.s-guideColumn__part+.s-guideColumn__part {
	margin-top: var(--spc-50);
}

.s-guideColumn__ttl {
	margin: 0 0 14px;
	font-size: var(--fz-22);
	font-weight: 700;
	line-height: 1.454546;
}

.s-guideColumn__subttl {
	border-left: 3px solid var(--orange-500);
	padding-left: 12px;
	margin-block: var(--spc-30) 10px !important;
	font-size: var(--fz-18);
	font-weight: 700;
}

.s-guideColumn__subttl:first-child {
	margin-top: 0;
}

.s-guidePage a:focus-visible,
.s-guidePage button:focus-visible {
	outline: 2px solid var(--orange-600);
	outline-offset: 4px;
}

/* -----------------目次：PCは追従・SPは開閉----------------- */
.s-guideNav {
	position: sticky;
	top: 120px;
}

.s-guideNav__spTrigger {
	display: none;
}

.s-guideNav__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.s-guideNav__item li {
	border-bottom: 1px solid rgb(219 173 132 / 50%);
}

.s-guideNav__item a {
	display: block;
	padding: 18px 22px 18px 0;
	position: relative;
	font-size: var(--fz-16);
	line-height: 1.7;
	font-weight: 700;
}

.s-guideNav__item a::after {
	content: '';
	position: absolute;
	right: 5px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-right: 2px solid var(--orange-500);
	border-bottom: 2px solid var(--orange-500);
	transform: translateY(-70%) rotate(45deg);
}

.s-guideNav__item .is-current a {
	color: var(--orange-600);
}

.s-guideNav__item a:hover {
	color: var(--orange-600);
}

/* -----------------本文：段落・箇条書き・注記----------------- */
.s-guidePage .s-txt {
	display: block;
	overflow-wrap: anywhere;
}

.s-guidePage .s-txt,
.s-guidePage .s-txt p,
.s-guidePage .s-txt li,
.s-guidePage .s-txt a {
	font-size: var(--fz-16);
	line-height: 1.625;
}

.s-guidePage .s-txt>*+* {
	margin-top: var(--spc-20);
}

.s-guidePage .s-txt__list {
	padding: 0;
	list-style: none;
}

.s-guidePage .s-txt__list>li {
	padding-left: 1em;
	margin-left: 0;
}

.s-guidePage .s-txt__list>li::before {
	width: 4px;
	top: .95em;
}

.s-guidePage .s-txt a {
	text-decoration: underline;
	text-underline-offset: .2em;
}

.s-guideNotice {
	padding: var(--spc-20);
	background: var(--c-white);
}

/* -----------------決済ロゴ：CSV記載の関連画像----------------- */
.s-guideCredit {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	margin: var(--spc-20) 0 0;
	padding: 20px;
	width: fit-content;
	max-width: 100%;
	background: var(--c-white);
}

.s-guideCredit li {
	width: 57px;
}
@media screen and (max-width: 767px){
	.s-guideCredit li {
		width:49px;
	}
}

.s-guidePaymentLogo {
	display: block;
	width: 120px;
	max-width: 100%;
	height: auto;
	margin-top: var(--spc-20);
}

.s-guideCredit .s-guidePaymentLogo {
	width: 100%;
	height: 38px;
	object-fit: contain;
	margin: 0;
}

/* -----------------決済画像の白背景・d払いの表示トリミング----------------- */
.s-guidePaymentFrame {
	width: fit-content;
	max-width: 100%;
	margin-top: var(--spc-20);
	padding: 20px;
	background: var(--c-white);
}
.s-guidePaymentFrame:has(img[src="/asset2026/images/inside/payment-auPAY.png"]) {
	padding: 0px 10px;
}

.s-guidePaymentFrame:has(.s-guidePaymentCrop) {
	padding: 10px;
}

.s-guidePaymentFrame .s-guidePaymentLogo {
	margin: 0;
}

/* 元画像1500px四方の中央にあるロゴ部分を表示する */
.s-guidePaymentCrop {
	position: relative;
	display: block;
	width: 140px;
	height: 50px;
	overflow: hidden;
}

.s-guidePaymentCrop .s-guidePaymentLogo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 130px;
	max-width: none;
	height: 130px;
	transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px){
	.s-guidePaymentCrop{
		width: 120px;
    height: 50px;
	}
	.s-guidePaymentCrop .s-guidePaymentLogo{
		width: 120px;
		height: 120px;
	}
}

/* -----------------送料・領収書の表----------------- */
.s-guideTable {
	width: 100%;
	border-collapse: collapse;
	margin-block: var(--spc-20);
	font-size: var(--fz-16);
	line-height: 1.8;
}

.s-guideTable th,
.s-guideTable td {
	padding: 14px 18px;
	border: 1px solid rgb(219 173 132 / 50%);
	text-align: left;
	vertical-align: middle;
}

.s-guideTable th,
.s-guideTable td {
	font-weight: 500;
	background: var(--c-white);
}

.s-guideTable thead th {
	font-weight: 700;
}

.s-guideTable--postage td {
	width: 110px;
	white-space: nowrap;
	text-align: right;
}

.s-guideTable__caption {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* -----------------PC目次：XDの26px行高・30px間隔----------------- */
@media screen and (min-width: 901px) {
	.s-guideNav__item li {
		border: 0;
	}

	.s-guideNav__item li+li {
		margin-top: var(--spc-30);
	}

	.s-guideNav__item a {
		padding: 0;
		font-size: var(--fz-18);
		line-height: 1.444445;
	}

	.s-guideNav__item a::after {
		display: none;
	}

	.s-guideNav__item .is-current a {
		padding-left: 20px;
	}

	.s-guideNav__item .is-current a::after {
		display: block;
		left: 0;
		right: auto;
		transform: translateY(-50%) rotate(-45deg);
	}
}

/* -----------------タブレット・スマートフォンの目次----------------- */
@media screen and (max-width: 900px) {
	.s-guideContainer {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	/* 初期雛形と同じ、右端からスライドする目次 */
	.s-guideNav {
		--guide-nav-sp-box: 300px;
		--guide-nav-sp-box-trigger: 40px;
		position: fixed;
		right: calc(var(--guide-nav-sp-box-trigger) - var(--guide-nav-sp-box));
		top: 100px;
		display: flex;
		align-items: flex-start;
		width: var(--guide-nav-sp-box);
		transition: right .5s;
		z-index: 99;
		opacity: 0;
		pointer-events: none;
	}

	body.scroll .s-guideNav {
		animation: var(--anime-fade-in);
		pointer-events: auto;
	}

	body.scroll.returnTop .s-guideNav {
		opacity: 1;
		animation: var(--anime-fade-out);
		pointer-events: none;
	}

	.s-guideNav.active {
		right: 0;
	}

	.s-guideNav__spTrigger {
		flex: 0 0 var(--guide-nav-sp-box-trigger);
		width: var(--guide-nav-sp-box-trigger);
		height: 100px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		font: inherit;
		color: inherit;
		writing-mode: vertical-rl;
		background: rgba(255, 255, 255, .8);
		border: 1px solid var(--orange-450);
		border-right: 0;
		border-radius: 5px 0 0 5px;
		cursor: pointer;
		transition: background-color .3s;
	}

	.s-guideNav.active .s-guideNav__spTrigger {
		background: var(--c-white);
	}

	.s-guideNav__panel {
		flex: 1;
		min-width: 0;
	}

	.s-guideNav__item {
		background: var(--c-white);
		border: 1px solid var(--orange-450);
	}

	.s-guideNav__item li:not(:last-child) {
		border-bottom: 1px solid var(--orange-450);
	}

	.s-guideNav__item a {
		padding: 8px 30px 8px 15px;
		font-size: 13px;
	}

	.s-guideNav__item a::after {
		right: 15px;
	}

	.s-guideNav__item li:last-child {
		border-bottom: 0;
	}
}

/* -----------------スマートフォンの本文・表----------------- */
@media screen and (max-width: 767px) {
	.s-guideContainer {
		margin-top: 30px;
	}

	.s-guideColumn {
		padding: 0;
	}

	.s-guideColumn__part {
		padding-inline: 4px;
	}

	.s-guideColumn__heading {
		font-size: 22px;
		margin-bottom: 30px;
	}

	.s-guideColumn__ttl {
		font-size: 18px;
		margin-bottom: 16px;
	}

	.s-guideColumn__part+.s-guideColumn__part {
		margin-top: 36px;
	}

	.s-guidePage .s-txt,
	.s-guidePage .s-txt p,
	.s-guidePage .s-txt li,
	.s-guidePage .s-txt a {
		font-size: 14px;
		line-height: 1.9;
	}

	.s-guideColumn__subttl {
		font-size: 16px;
	}

	.s-guideTable {
		font-size: 13px;
	}

	.s-guideTable th,
	.s-guideTable td {
		padding: 12px 10px;
	}

	.s-guideTable--postage td {
		width: 76px;
	}

	.s-guideNotice {
		padding: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.s-guideNav,
	.s-guideNav__spTrigger {
		transition: none;
	}
}

/* タイムテーブル */
.s-timeTable {
	width: 95%;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
	gap: 7px;
}

.s-timeTable__dial {
	--size: 100%;
	--bg: #e3e3e3;
	--accent: var(--theme-c-main);
	--ring: 0px;
	--start-time: 9;
	--end-time: 12.5;
	--wrap: 0;
	--start-deg: calc(var(--start-time) * 30deg);
	--span-deg: calc(((var(--end-time) - var(--start-time)) + (var(--wrap) * 12)) * 30deg);
	--this-mask: radial-gradient(circle,
			transparent max(0px, var(--ring) - 1px),
			#000 max(0px, var(--ring)));

	inline-size: var(--size);
	mask: var(--this-mask);
	-webkit-mask: var(--this-mask);
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--bg);
	background-image: conic-gradient(from calc(var(--start-deg) - 0deg),
			var(--accent) 0 var(--span-deg),
			transparent var(--span-deg) 1turn);
	display: grid;
	place-items: center;
	position: relative;
}

.s-timeTable__chip {
	display: inline-block;
	padding: .1em .2em;
	border-radius: 3px;
	background: rgba(255, 255, 255, .9);
	color: #1a1a1a;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
	white-space: nowrap;
	font-size: 10px;
	letter-spacing: 0.03em;
}

/* ■■■■■■■■■■よくあるご質問■■■■■■■■■■ */
/* -----------------コンテンツ幅・検索（TOPのg-searchを利用）----------------- */
.s-faq {
	max-width: 920px;
	margin-top: var(--spc-60);
}

.s-faq__search {
	width: 85%;
	max-width: 780px;
	margin: 0 auto clamp(36px, 4.861vw, 70px);
}

.s-faq__search .s-faq__searchInput {
	height: clamp(48px, 4.167vw, 60px);
	padding: 0 65px 0 30px;
	border: 1px solid var(--txt-c-base) !important;
	font: inherit;
	font-size: var(--fz-16);
	color: inherit;
}

.s-faq__searchInput::placeholder {
	color: #a6a6a6;
}

.s-faq__searchSubmit {
	width: 55px;
	border: 0;
	cursor: pointer;
}

.s-faq__srOnly {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* -----------------質問・回答・開閉アイコン----------------- */
.s-faq__item {
	border-bottom: 1px solid var(--orange-450);
}
.s-faq__item a{
	text-decoration: underline;
	font-weight: bold;
}

.s-faq__item[hidden],
.s-faq__empty[hidden] {
	display: none;
}

.s-faq__heading {
	margin: 0;
	font: inherit;
}

.s-faq__question {
	position: relative;
	display: block;
	width: 100%;
	padding: clamp(24px, 2.431vw, 35px) 60px clamp(24px, 2.431vw, 35px) 44px;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: var(--fz-16);
	line-height: 1.8;
	text-align: left;
	cursor: pointer;
}
@media screen and (min-width: 768px){
	.s-faq__question{
		font-size: var(--fz-18);
	}
}

.s-faq__question::before,
.s-faq__answerText::before {
	position: absolute;
	left: 0;
	font-family: Arial, sans-serif;
	font-size: clamp(22px, 1.944vw, 28px);
	font-weight: 700;
	line-height: 1;
}

.s-faq__question::before {
	content: 'Q';
	top: clamp(26px, 2.569vw, 37px);
}

.s-faq__question::after {
	content: '';
	position: absolute;
	right: 24px;
	top: 50%;
	width: 14px;
	height: 14px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-75%) rotate(45deg);
	transition: transform .55s ease;
}

.s-faq__question[aria-expanded="true"]::after {
	transform: translateY(-25%) rotate(225deg);
}

.s-faq__question:focus-visible,
.s-faq__searchInput:focus-visible,
.s-faq__searchSubmit:focus-visible {
	outline: 2px solid var(--orange-600);
}

.s-faq__answer {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows .55s ease, visibility .55s;
}

.s-faq__heading:has([aria-expanded="true"])+.s-faq__answer {
	grid-template-rows: 1fr;
	visibility: visible;
}

.s-faq__answerInner {
	min-height: 0;
	overflow: hidden;
}

.s-faq__answerText {
	position: relative;
	padding: 0 60px clamp(24px, 2.431vw, 35px) 44px;
	font-size: var(--fz-16);
	line-height: 1.8;
	overflow-wrap: anywhere;
}

.s-faq__answerText::before {
	content: 'A';
	top: 3px;
	color: var(--orange-600);
}

.s-faq__empty {
	padding-block: 30px;
	text-align: center;
	line-height: 1.8;
}

/* -----------------スマートフォン----------------- */
@media screen and (max-width: 767px) {
	.s-faq__search {
		width: 100%;
	}

	.s-faq__search .s-faq__searchInput {
		padding-left: 20px;
		font-size: 16px;
	}

	.s-faq__question {
		padding: 24px 32px 24px 32px;
		font-size: 14px;
	}

	.s-faq__question::after {
		right: 5px;
		width: 11px;
		height: 11px;
	}

	.s-faq__answerText {
		padding: 0 15px 24px 32px;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.s-faq__answer,
	.s-faq__question::after {
		transition: none;
	}
}