@charset "UTF-8";
/* ==================================================================
   TOP風パーツ（prefix: yt-）
   本文に「yt-」が含まれるページだけ読み込まれる
   色は site-theme.css の --yt- 変数を使い、無い場合の予備値も持たせる
   ================================================================== */

/* ------------------------------------------------------------------
   1. セクション見出し（筆文字＋小さな副題）
   <h2 class="yt-sec-title">買取手順<span class="yt-sec-title__sub">ご利用の流れ</span></h2>
   ------------------------------------------------------------------ */
.post_content .yt-sec-title,
.yt-sec-title {
	position: relative;
	margin: 2.5em 0 1.2em;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	color: var(--yt-ink, #002111);
	font-family: "Yuji Syuku", serif;
	font-size: 2.2em;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: .08em;
	text-align: center;
}
.post_content .yt-sec-title::before,
.post_content .yt-sec-title::after,
.yt-sec-title::before,
.yt-sec-title::after {
	content: none;
	display: none;
}
.yt-sec-title__sub {
	display: block;
	margin-top: .5em;
	font-family: var(--yt-font, sans-serif);
	font-size: .38em;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--yt-brown, #55401a);
}

/* 英字タイトル（金色の明朝イタリック）
   <h2 class="yt-en-title">FAQ<span class="yt-sec-title__sub">よくあるご質問</span></h2> */
.post_content .yt-en-title,
.yt-en-title {
	margin: 2.5em 0 1.2em;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	font-family: "Cormorant Garamond", serif;
	font-size: 2.6em;
	font-style: italic;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: .04em;
	text-align: center;
	color: var(--yt-gold-dark, #a07b33);
}
.post_content .yt-en-title::before,
.post_content .yt-en-title::after,
.yt-en-title::before,
.yt-en-title::after {
	content: none;
	display: none;
}
.yt-en-title .yt-sec-title__sub {
	font-style: normal;
	font-size: .3em;
}

/* ------------------------------------------------------------------
   2. STEPバー（ゴールドの番号札＋深紅の帯）
   <div class="yt-stepbar"><span class="yt-stepbar__num">STEP.01</span><span class="yt-stepbar__text">ギフト券を選択</span></div>
   ------------------------------------------------------------------ */
.yt-stepbar {
	display: flex;
	align-items: stretch;
	margin: 2em 0 1em;
	background: var(--yt-crimson, #880809);
	color: #fff;
	font-weight: 700;
	line-height: 1.4;
}
.yt-stepbar__num {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	padding: .55em .9em;
	background: var(--yt-metal, #dab127);
	color: var(--yt-crimson, #880809);
	letter-spacing: .04em;
}
.yt-stepbar__text {
	display: flex;
	align-items: center;
	padding: .55em 1em;
}

/* ------------------------------------------------------------------
   3. 手順カード（順番がある流れ専用）
   <ol class="yt-steps">
     <li class="yt-step">
       <p class="yt-step__num"><span>手順</span>01</p>
       <figure class="yt-step__img"><img src="" alt=""></figure>  ← 任意
       <p class="yt-step__title">見出し</p>
       <p class="yt-step__text">説明文</p>
     </li>
   </ol>
   ------------------------------------------------------------------ */
.post_content .yt-steps,
.yt-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	margin: 1.5em 0 2em;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
.post_content .yt-steps > li,
.yt-step {
	position: relative;
	margin: 0;
	padding: 18px 16px 16px;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: var(--yt-radius, 8px);
	list-style: none;
}
.post_content .yt-steps > li::before,
.post_content .yt-steps > li::marker {
	content: none;
	display: none;
}
/* 次の手順への矢印（SP：下向き） */
.yt-step:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -20px;
	transform: translateX(-50%);
	border-style: solid;
	border-width: 10px 10px 0;
	border-color: var(--yt-crimson, #880809) transparent transparent;
}
.post_content .yt-step__num,
.yt-step__num {
	display: flex;
	align-items: baseline;
	gap: .35em;
	margin: 0 0 .6em;
	color: var(--yt-crimson, #880809);
	font-size: 1.9em;
	font-weight: 700;
	line-height: 1;
}
.yt-step__num span {
	font-size: .4em;
	color: var(--yt-brown, #55401a);
}
.post_content .yt-step__img,
.yt-step__img {
	margin: 0 0 .8em;
	text-align: center;
}
.yt-step__img img {
	max-width: 100%;
	height: auto;
}
.post_content .yt-step__title,
.yt-step__title {
	margin: 0 0 .4em;
	color: var(--yt-red, #c30d23);
	font-weight: 700;
	line-height: 1.5;
}
.post_content .yt-step__text,
.yt-step__text {
	margin: 0;
	font-size: .9em;
	line-height: 1.7;
}

@media (min-width: 768px) {
	.post_content .yt-steps,
	.yt-steps {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}
	/* PC：右向き矢印 */
	.yt-step:not(:last-child)::after {
		left: auto;
		right: -21px;
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
		border-width: 9px 0 9px 12px;
		border-color: transparent transparent transparent var(--yt-crimson, #880809);
	}
}

/* ------------------------------------------------------------------
   4. 特徴カード（クリーム地＋金の枠）
   <div class="yt-feature">
     <p class="yt-feature__label">特徴01</p>
     <p class="yt-feature__title">見出し</p>
     <p class="yt-feature__text">説明文</p>
     <figure class="yt-feature__img"><img src="" alt=""></figure>  ← 任意
   </div>
   ------------------------------------------------------------------ */
.yt-feature {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 16px;
	margin: 0 0 1.25em;
	padding: 18px 20px;
	background: linear-gradient(180deg, #fff6d3 0, #fff 25%, #fff6d3 100%);
	border: 2px solid var(--yt-gold-dark, #a07b33);
	border-radius: var(--yt-radius, 8px);
	box-shadow: 0 0 0 4px #fff inset;
}
.post_content .yt-feature__label,
.yt-feature__label {
	margin: 0 0 .2em;
	color: var(--yt-brown, #55401a);
	font-size: .85em;
	font-weight: 700;
}
.post_content .yt-feature__title,
.yt-feature__title {
	margin: 0 0 .4em;
	color: var(--yt-crimson, #880809);
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1.4;
}
.post_content .yt-feature__text,
.yt-feature__text {
	margin: 0;
	font-size: .92em;
	line-height: 1.7;
}
.post_content .yt-feature__img,
.yt-feature__img {
	margin: .8em 0 0;
	text-align: center;
}
.yt-feature__img img {
	max-width: 100%;
	height: auto;
}

@media (min-width: 768px) {
	.yt-feature:has(.yt-feature__img) {
		grid-template-columns: 1fr 200px;
		grid-template-areas:
			"label img"
			"title img"
			"text  img";
		align-items: start;
	}
	.yt-feature:has(.yt-feature__img) .yt-feature__label { grid-area: label; }
	.yt-feature:has(.yt-feature__img) .yt-feature__title { grid-area: title; }
	.yt-feature:has(.yt-feature__img) .yt-feature__text  { grid-area: text; }
	.yt-feature:has(.yt-feature__img) .yt-feature__img   { grid-area: img; margin: 0; align-self: center; }
}

/* ------------------------------------------------------------------
   5. ボタン
   <p class="yt-btn-wrap"><a class="yt-btn" href="">買取を申し込む</a></p>
   色違い：yt-btn--line（LINE緑） / yt-btn--dark（黒）
   ------------------------------------------------------------------ */
.post_content .yt-btn-wrap,
.yt-btn-wrap {
	margin: 1.5em 0;
	text-align: center;
}
.post_content a.yt-btn,
.yt-btn {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 360px;
	box-sizing: border-box;
	padding: .9em 2.4em .9em 1.4em;
	background: linear-gradient(45deg, var(--yt-btn-from, #fe2f32), var(--yt-btn-to, #b81921) 95%);
	border: none;
	border-radius: var(--yt-radius, 8px);
	box-shadow: 0 3px 0 rgba(0, 0, 0, .25);
	color: #fff;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	transition: transform .15s, box-shadow .15s;
}
.yt-btn::after {
	content: "";
	position: absolute;
	right: 1.1em;
	top: 50%;
	transform: translateY(-50%);
	border-style: solid;
	border-width: 5px 0 5px 7px;
	border-color: transparent transparent transparent currentColor;
}
.post_content a.yt-btn:hover,
.yt-btn:hover {
	color: #fff;
	transform: translateY(2px);
	box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}
.post_content a.yt-btn:focus-visible,
.yt-btn:focus-visible {
	outline: 3px solid var(--yt-gold, #dab127);
	outline-offset: 2px;
}
.post_content a.yt-btn--line,
.yt-btn--line {
	background: var(--yt-line, #00b900);
}
.post_content a.yt-btn--dark,
.yt-btn--dark {
	background: #000;
}

@media (prefers-reduced-motion: reduce) {
	.yt-btn { transition: none; }
}

/* ------------------------------------------------------------------
   6. 金の額縁ボックス
   <div class="yt-frame">…</div>
   ------------------------------------------------------------------ */
.yt-frame {
	margin: 1.5em 0;
	padding: 18px 20px;
	background: #fff;
	border: 4px solid #968006;
	border-image: var(--yt-metal-frame, linear-gradient(90deg, #564903, #fff9c1 25%, #968006 50%, #564903)) 1;
}
.yt-frame > :first-child { margin-top: 0; }
.yt-frame > :last-child  { margin-bottom: 0; }

/* ------------------------------------------------------------------
   7. 注意ボックス（枠線の上にタイトル）
   <div class="yt-warning"><p class="yt-warning__ttl">偽サイトにご注意ください</p><p>本文</p></div>
   ------------------------------------------------------------------ */
.yt-warning {
	position: relative;
	margin: 2.2em 0 1.5em;
	padding: 1.4em 1.2em 1.1em;
	background: #fff;
	border: 2px solid var(--yt-red, #c30d23);
	border-radius: var(--yt-radius, 8px);
}
.post_content .yt-warning__ttl,
.yt-warning__ttl {
	position: absolute;
	top: -.8em;
	left: 12px;
	margin: 0;
	padding: 0 10px;
	background: #fff;
	color: var(--yt-red, #c30d23);
	font-size: 1.1em;
	font-weight: 700;
	line-height: 1.5;
}
.yt-warning > p:not(.yt-warning__ttl):last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------
   8. スマホ調整
   ------------------------------------------------------------------ */
@media (max-width: 599px) {
	.post_content .yt-sec-title,
	.yt-sec-title { font-size: 1.8em; }
	.post_content .yt-en-title,
	.yt-en-title { font-size: 2.1em; }
	.yt-feature { padding: 16px; }
}

/* ==================================================================
   v2.3.0 追加パーツ
   ================================================================== */

/* ------------------------------------------------------------------
   9. 広告カード（商標記事の冒頭に置く）
   <div class="yt-adcard">
     <p class="yt-adcard__name">サイト名</p>
     <div class="yt-adcard__banner">画像（jump付き）</div>
     <div class="yt-stats">…</div>
     <p class="yt-btn-wrap">ボタン</p>
   </div>
   ------------------------------------------------------------------ */
.yt-adcard {
	margin: 1.5em 0 2em;
	padding: 0 0 16px;
	background: #fff;
	border: 2px solid var(--yt-gold-dark, #a07b33);
	border-radius: var(--yt-radius, 8px);
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(85, 64, 26, .12);
}
.post_content .yt-adcard__name,
.yt-adcard__name {
	margin: 0;
	padding: .6em 1em;
	background: var(--yt-crimson, #880809);
	border-bottom: 3px solid var(--yt-gold, #dab127);
	color: #fff;
	font-weight: 700;
	text-align: center;
	line-height: 1.4;
}
.yt-adcard__banner {
	display: block;
	margin: 14px 14px 0;
	cursor: pointer;
	line-height: 0;
	text-align: center;
}
.yt-adcard__banner img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}
.yt-adcard .yt-stats {
	margin: 14px 14px 0;
}
.yt-adcard .yt-btn-wrap {
	margin: 14px 14px 0;
}
.post_content .yt-adcard__note,
.yt-adcard__note {
	margin: 8px 14px 0;
	font-size: .75em;
	color: #666;
	text-align: center;
	line-height: 1.5;
}

/* ------------------------------------------------------------------
   10. 数値タイル（3つ並び）
   <div class="yt-stats">
     <div class="yt-stats__item"><p class="yt-stats__label">項目</p><p class="yt-stats__value">85<small>%</small></p></div>
   </div>
   ------------------------------------------------------------------ */
.yt-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin: 1.2em 0;
}
.yt-stats__item {
	padding: 10px 4px 8px;
	background: var(--yt-cream, #fffbda);
	border: 1px solid #eacf8c;
	border-radius: 6px;
	text-align: center;
}
.post_content .yt-stats__label,
.yt-stats__label {
	margin: 0 0 4px;
	font-size: .72em;
	font-weight: 700;
	color: var(--yt-brown, #55401a);
	line-height: 1.3;
}
.post_content .yt-stats__value,
.yt-stats__value {
	margin: 0;
	font-size: 1.25em;
	font-weight: 700;
	color: var(--yt-red, #c30d23);
	line-height: 1.2;
}
.yt-stats__value small {
	font-size: .6em;
	margin-left: 1px;
}

/* ------------------------------------------------------------------
   11. タイトル付きボックス（グループブロックに yt-box を付けて使う）
   <div class="wp-block-group yt-box"><p class="yt-box__ttl">タイトル</p>…</div>
   yt-box--gold：クリーム地 / yt-box--point：要点まとめ
   ------------------------------------------------------------------ */
.post_content .yt-box,
.yt-box {
	position: relative;
	margin: 1.8em 0;
	padding: 1.1em 1.1em 1em;
	background: #fff;
	border: 2px solid var(--yt-crimson, #880809);
	border-radius: var(--yt-radius, 8px);
}
.post_content .yt-box > .yt-box__ttl,
.yt-box__ttl {
	display: inline-block;
	margin: -1.1em 0 .9em -1.1em;
	padding: .35em 1em;
	background: var(--yt-crimson, #880809);
	color: #fff;
	font-size: .92em;
	font-weight: 700;
	line-height: 1.5;
	border-radius: calc(var(--yt-radius, 8px) - 3px) 0 var(--yt-radius, 8px) 0;
}
.post_content .yt-box > :last-child {
	margin-bottom: 0;
}
.post_content .yt-box > ul,
.post_content .yt-box > ol {
	margin-top: 0;
}
.post_content .yt-box--gold,
.yt-box--gold {
	background: linear-gradient(180deg, #fff6d3 0, #fff 40%);
	border-color: var(--yt-gold-dark, #a07b33);
}
.post_content .yt-box--gold > .yt-box__ttl,
.yt-box--gold .yt-box__ttl {
	background: var(--yt-gold-dark, #a07b33);
}

/* ------------------------------------------------------------------
   12. 脚注（本文の [n] と記事末の「脚注・出典」）
   本文：<sup class="yt-sup"><a href="#yt-fn1" id="yt-ref1">[1]</a></sup>
   末尾：<ol class="yt-fn"><li id="yt-fn1">… <a class="yt-fn__back" href="#yt-ref1">↩</a></li></ol>
   ------------------------------------------------------------------ */
.yt-sup {
	font-size: 11px;
	font-weight: 700;
	line-height: 0;
	vertical-align: super;
	margin: 0 1px;
}
.yt-sup a {
	color: var(--yt-crimson, #880809);
	text-decoration: none;
}
.yt-sup a:hover {
	text-decoration: underline;
}
.post_content .yt-fn,
.yt-fn {
	margin: 1em 0 0;
	padding: 0 0 0 1.6em;
	font-size: 13px;
	line-height: 1.8;
	word-break: break-all;
}
.post_content .yt-fn li,
.yt-fn li {
	margin: 0 0 10px;
	scroll-margin-top: 90px;
}
.yt-fn li:target {
	background: var(--yt-cream, #fffbda);
}
.post_content a.yt-fn__back,
.yt-fn__back {
	margin-left: 4px;
	color: #888;
	text-decoration: none;
}
[id^="yt-ref"] {
	scroll-margin-top: 90px;
}

/* jumpリンク（spanで作るボタン）にもカーソルを出す */
span.yt-btn {
	cursor: pointer;
}

@media (max-width: 599px) {
	.yt-stats__value { font-size: 1.1em; }
	.post_content .yt-box,
	.yt-box { padding: 1em .9em .9em; }
	.post_content .yt-box > .yt-box__ttl,
	.yt-box__ttl { margin: -1em 0 .8em -.9em; }
}

/* ------------------------------------------------------------------
   v2.3.1 ボタンの文字色・下線の修正
   jumpリンク系プラグインがリンク色（青）と下線を付けるため、
   yt-btn の中だけ白文字・下線なしに固定する（影響範囲は yt-btn 内のみ）
   ------------------------------------------------------------------ */
body .post_content .yt-btn,
body .post_content .yt-btn:hover,
body .post_content .yt-btn:visited,
body .post_content .yt-btn:focus,
body .post_content .yt-btn * {
	color: #fff !important;
	text-decoration: none !important;
}
body .post_content .yt-btn {
	font-size: 1.05em;
	letter-spacing: .03em;
}

/* ------------------------------------------------------------------
   13. こんな人向けライン（v2.4.0）
   <p class="yt-fit"><span class="yt-fit__label">こんな人向け</span>本文</p>
   ------------------------------------------------------------------ */
.post_content .yt-fit,
.yt-fit {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: .7em 0 1em;
	padding: .55em .8em;
	background: var(--yt-cream, #fffbda);
	border-left: 4px solid var(--yt-gold-dark, #a07b33);
	border-radius: 0 6px 6px 0;
	font-size: .92em;
	font-weight: 700;
	line-height: 1.6;
	color: var(--yt-ink, #002111);
}
.yt-fit__label {
	flex-shrink: 0;
	margin-top: .1em;
	padding: .15em .6em;
	background: var(--yt-crimson, #880809);
	border-radius: 3px;
	color: #fff;
	font-size: .78em;
	line-height: 1.5;
	white-space: nowrap;
}

/* ------------------------------------------------------------------
   v2.4.1 注意ボックス（yt-warning）の中で yt-box__ttl を使った場合も
   yt-warning__ttl と同じ見た目（枠線の上にタイトル）にそろえる
   ------------------------------------------------------------------ */
.post_content .yt-warning > .yt-box__ttl,
.yt-warning > .yt-box__ttl {
	position: absolute;
	top: -.8em;
	left: 12px;
	display: block;
	margin: 0;
	padding: 0 10px;
	background: #fff;
	border-radius: 0;
	color: var(--yt-red, #c30d23);
	font-size: 1.1em;
	font-weight: 700;
	line-height: 1.5;
}