@charset "utf-8";
/* ======================================================
法人・団体向け記念品特集（page-only CSS）
PC（デフォルト） SP（max-width:768px）
====================================================== */

/* ======================================================
Base / Variables
====================================================== */
#index {
	--ktora-brown: #745536;
	--ktora-gold: #c5a437;
	--ktora-ink: #222;
	--ktora-bg: #f4f2ec;
	--ktora-card: #fff;
	--ktora-border: #e6e0d7;
	--ktora-line: #dddddd;
	--ktora-radius: 10px;
	--ktora-btn: #f5b400;
	--ktora-btnText: #222;
	--ktora-muted: #666;
	--ktora-danger: #d40000;
}

#index * {
	box-sizing: border-box;
}

#index img {
	max-width: 100%;
	height: auto;
	display: block;
}

#main {
	background: #fff;
}

#index {
	color: var(--ktora-ink);
	background: var(--ktora-bg);
	padding: 0 0 40px;
	line-height: 1.6;
	font-family: sans-serif;
}

#index a {
	color: inherit;
	text-decoration: none;
}

#index a:hover {
	opacity: .85;
}

/* ページ内コンテナ */
#index>header,
#index>.nav-links,
#index>section,
#index>.cta {
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
}

#index>section,
#index>.cta {
	padding-left: 20px;
	padding-right: 20px;
}

/* ======================================================
1) Heading / Basic typography
====================================================== */
#index p {
	margin: 10px 0;
}

#index ul {
	margin: 10px 0;
	padding-left: 1.2em;
}

#index li {
	margin: 6px 0;
}

#index .section-title {
	text-align: center;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	color: #fff;
	margin: 0 0 22px;
	border-radius: 6px;
	padding: 10px 0;
	font-size: 28px;
	background: var(--ktora-brown);
}

#index h3 {
	margin: 0 0 18px;
	color: var(--ktora-brown);
	font-size: 22px;
	font-weight: 800;
	border-bottom: 3px solid var(--ktora-brown);
	padding-bottom: 6px;
}

#index .sub-title {
	margin: 14px 0 12px;
	font-size: 18px;
	font-weight: 900;
	color: var(--ktora-brown);
	border-bottom: 2px solid var(--ktora-border);
	padding-bottom: 8px;
}

/* ======================================================
2) Header (Hero)
====================================================== */
#index>header {
	padding: 34px 0 28px;
	margin-top: 18px;
}

#index>header h1 {
	margin: 0 0 10px;
	font-size: 30px;
	line-height: 1.3;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

#index>header .banner,
#index>header .lead {
	margin: 6px 0 0;
	font-size: 16px;
	opacity: .95;
}

/* ======================================================
3) Sticky navigation anchors
====================================================== */
#index .nav-links {
	background: #fff;
	border: 1px solid var(--ktora-border);
	border-radius: var(--ktora-radius);
	margin-top: 14px;
	margin-bottom: 18px;
	position: sticky;
	top: 0;
	z-index: 30;
	border-bottom: 1px solid var(--ktora-line);
}

#index .nav-links a {
	display: inline-block;
	margin: 6px 10px;
	padding: 10px 12px;
	border-radius: 6px;
	color: var(--ktora-brown);
	font-weight: 800;
}

#index .nav-links a:hover {
	background: var(--ktora-bg);
}

/* ======================================================
4) “Card” sections (共通ボックス)
====================================================== */
#index section.usecases,
#index section.features,
#index section.useScene,
#index section.picks,
#index section.steps1,
#index section.steps2,
#index section.faq,
#index section.scenePick,
#index section.wrapping,
#index section.omoi,
#index .cta {
	background: var(--ktora-card);
	border: 1px solid var(--ktora-border);
	border-radius: var(--ktora-radius);
	padding: 22px 20px;
	margin-top: 18px;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
}

/* ======================================================
5) Usecases（お悩み）
====================================================== */
#index section.usecases ul {
	list-style: disc;
	padding-left: 20px;
}

#index .usecases .usecases-box {
	display: flex;
	gap: 20px;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
}

#index .usecases .usecases-box .img {
	width: 210px;
	flex: 0 0 auto;
}

#index .usecases .usecases-box .txt {
	flex: 1 1 auto;
	min-width: 0;
}

#index .usecases .usecases-box .txt li {
	margin: 0 0 10px;
	color: #000;
	font-size: 18px;
}

#index .usecases .usecases-box .txt p {
	line-height: 1.75;
	margin: 10px 0;
	color: #000;
	font-size: 20px;
	font-weight: 900;
}

/* ======================================================
6) Features（当店が選ばれる理由）
====================================================== */
.features {
	--accent: #f5b400;
	--ink: #222;
	--muted: #666;
	--bg: #fff;
	--soft: #fff7e0;
}

/* タイトル */
.features .section-title {
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 900;
	margin-bottom: 20px;
	padding-left: 14px;
	position: relative;
}

.features .section-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: .2em;
	width: 6px;
	height: 1.2em;
	background: var(--accent);
	border-radius: 999px;
}

/* グリッド */
.tokucho-box {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

/* カード */
.tokucho-item {
	background: var(--bg);
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 14px;
	padding: 16px 16px 16px 46px;
	position: relative;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
}

/* チェック */
.tokucho-item::before {
	content: "✓";
	position: absolute;
	left: 16px;
	top: 16px;
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	background: var(--accent);
	border-radius: 50%;
	font-weight: 900;
}

/* 見出し */
.tokucho-title {
	font-size: 16px;
	font-weight: 900;
	margin: 0 0 6px;
}

/* 補足 */
.tokucho-desc {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.6;
	margin: 0;
}

/* 特典枠 */
.tokucho-bonus {
	margin: 18px 0 10px;
	padding: 16px;
	background: var(--soft);
	border-left: 6px solid var(--accent);
	border-radius: 12px;
	text-align: center;
}

.bonus-lead {
	font-weight: 700;
	margin: 0;
}

.bonus-main {
	font-size: 20px;
	font-weight: 900;
	margin: 4px 0 0;
}

/* CTA */
.quo-card a {
	display: inline-block;
	background: var(--accent);
	padding: 12px 18px;
	border-radius: 999px;
	font-weight: 900;
	text-decoration: none;
	color: #222;
}

/* ======================================================
7) UseScene（ご利用シーン）
====================================================== */
#index .useScene {
	padding: 44px 0;
	background: #fff;
}

#index .useScene__inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 20px;
}

#index .useScene__title {
	margin: 0 0 22px;
	text-align: center;
	font-weight: 900;
	letter-spacing: .06em;
	color: #fff;
	font-size: clamp(22px, 2.4vw, 34px);
}

#index .useScene__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

#index .useSceneCard {
	position: relative;
	background: #fff;
	border-radius: 14px;
	padding: 54px 18px 18px;
	border: 1px solid rgba(0, 0, 0, .08);
	box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
	min-height: 180px;
}

#index .useSceneCard__label {
	position: absolute;
	left: 50%;
	top: 14px;
	transform: translateX(-50%);
	width: calc(100% - 36px);
	max-width: 260px;
	text-align: center;
	background: #A3744D;
	color: #fff;
	font-weight: 900;
	border-radius: 999px;
	padding: 10px 12px;
	line-height: 1.2;
	box-shadow: 0 6px 14px rgba(47, 134, 201, .25);
}

#index .useSceneCard__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

#index .useSceneCard__list li {
	position: relative;
	padding-left: 1.1em;
	line-height: 1.8;
	color: #333;
	font-size: 15px;
	letter-spacing: .02em;
}

#index .useSceneCard__list li::before {
	content: "・";
	position: absolute;
	left: 0;
	top: 0;
	color: #9a6a3a;
	font-weight: 800;
}

#index .useSceneCard:hover {
	transform: translateY(-2px);
	transition: transform .15s ease, box-shadow .15s ease;
	box-shadow: 0 12px 26px rgba(0, 0, 0, .10);
}

/* ======================================================
8) Picks（おすすめ商品一覧） + カテゴリリンク
====================================================== */
#index .picks {
	margin-top: 22px;
}

#index .picks__inner {
	max-width: 1288px;
	margin: 0 auto;
	padding: 0 16px;
}

#index .picks__lead {
	margin: 8px 0 14px;
	line-height: 1.7;
	color: #000;
	font-weight: 900;
}

/* Slider */
#index .picksSlider {
	position: relative;
}

#index .picksViewport {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	padding: 6px 44px 10px;
}

#index .picksRail {
	display: flex;
	gap: 12px;
	align-items: stretch;
}

#index .picksItem {
	flex: 0 0 260px;
	scroll-snap-align: start;
	display: grid;
	grid-template-columns: 92px 1fr;
	grid-template-rows: auto auto auto;
	column-gap: 10px;
	row-gap: 4px;
	align-items: center;
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	background: #fff;
	padding: 10px;
	min-height: 110px;
}

#index .picksItem__thumb {
	grid-row: 1 / 4;
	width: 92px;
	height: 92px;
	border-radius: 10px;
	overflow: hidden;
	background: #f6f6f6;
}

#index .picksItem__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#index .picksItem__name {
	font-size: 13px;
	line-height: 1.35;
	max-height: 2.7em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
}

#index .picksItem__price {
	font-size: 12px;
	font-weight: 900;
}

#index .picksItem__meta {
	font-size: 12px;
	color: #444;
	margin: 0;
}

/* arrows */
#index .picksNav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border-radius: 999px;
	border: 1px solid #ddd;
	background: #fff;
	cursor: pointer;
	z-index: 2;
}

#index .picksNav--prev {
	left: 6px;
}

#index .picksNav--next {
	right: 6px;
}

#index .picksNav::before {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-top: 2px solid #666;
	border-right: 2px solid #666;
	margin: 0 auto;
}

#index .picksNav--prev::before {
	transform: rotate(-135deg);
}

#index .picksNav--next::before {
	transform: rotate(45deg);
}

#index .picksNav[disabled] {
	opacity: .35;
	cursor: default;
}

/* Buttons (picks内で使用) */
#index .sceneBtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 14px;
	border-radius: 14px;
	text-decoration: none;
	font-weight: 900;
	border: 1px solid transparent;
	min-height: 44px;
	line-height: 1.2;
	letter-spacing: .01em;
	width: 100%;
}

#index .sceneBtn--primary {
	background: var(--ktora-btn);
	color: var(--ktora-btnText);
	box-shadow: 0 6px 16px rgba(245, 180, 0, .22);
}

#index .sceneBtn--primary:hover {
	filter: brightness(1.02);
}

#index .sceneBtn--ghost {
	background: #fff;
	border: 1px solid var(--ktora-line);
	color: #222;
}

#index .sceneBtn--ghost:hover {
	background: #f7f7f7;
}

/* カテゴリリンク */
#index .sceneCategory {
	margin: 60px 0 40px;
	text-align: center;
}

#index .sceneCategory__ttl {
	font-size: 20px;
	font-weight: 900;
	margin-bottom: 25px;
	letter-spacing: .05em;
	border: none;
	color: var(--ktora-ink);
}

#index .sceneCategory__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
}

#index .sceneCategory__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	border-radius: 10px;
	background: #fff;
	border: 2px solid #e7e2d8;
	color: #222;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

#index .sceneCategory__ico {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	background: #f4f2ec;
	border: 1px solid #e7e2d8;
}

#index .sceneCategory__ico svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
	opacity: .9;
}

#index .sceneCategory__label {
	font-weight: 900;
	font-size: 15px;
	text-align: left;
	line-height: 1.2;
}

#index .sceneCategory__arrow {
	margin-left: auto;
	font-size: 22px;
	line-height: 1;
	opacity: .55;
	transform: translateY(-1px);
}

#index .sceneCategory__item:hover {
	background: var(--ktora-brown);
	border-color: var(--ktora-brown);
	color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, .14);
}

#index .sceneCategory__item:hover .sceneCategory__ico {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .25);
}

/* ======================================================
9) Steps1（請求書払い・見積の案内） / 共通ボタン
====================================================== */
#index .ctaRow {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 22px 0 22px;
}

#index .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 16px;
	text-decoration: none;
	border: 1px solid transparent;
	font-weight: 900;
	letter-spacing: .01em;
	min-height: 44px;
}

#index .btnPrimary {
	background: var(--ktora-btn);
	color: var(--ktora-btnText);
}

#index .btnPrimary:hover {
	filter: brightness(1.02);
}

#index .btnGhost {
	background: #fff;
	border: 1px solid var(--ktora-line);
	color: #222;
}

#index .btnGhost:hover {
	background: #f7f7f7;
}

#index .txt-steps-box {
	background: #fff7e6;
	border: 1px solid #f2d3a3;
	border-left: 6px solid var(--ktora-btn);
	border-radius: 12px;
	padding: 14px 16px;
	position: relative;
}

#index .txt-steps-box::before {
	content: "ℹ";
	position: absolute;
	left: 12px;
	top: 10px;
	font-weight: 900;
	opacity: .75;
}

#index .txt-steps-box p {
	margin: 0;
	padding-left: 18px;
}

/* ======================================================
10) Steps2（サービス一覧） + Flow（ご注文の流れ）
====================================================== */
#index .serviceChips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

#index .chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid #e7e2d8;
	font-weight: 800;
}

#index .flowSteps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-top: 14px;
}

#index .flowStep {
	position: relative;
	background: #f8f6f1;
	border: 1px solid #e7e2d8;
	border-radius: 14px;
	padding: 14px 12px;
	text-align: center;
}

#index .flowNo {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	margin: 0 auto 8px;
	border-radius: 999px;
	background: var(--ktora-brown);
	color: #fff;
	font-weight: 900;
}

#index .flowTxt {
	font-weight: 900;
}

/* 矢印（PCのみ） */
#index .flowStep:not(:last-child)::after {
	content: "›";
	position: absolute;
	right: -10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 26px;
	opacity: .45;
}

/* ======================================================
11) FAQ（details/summary）
====================================================== */
#index details {
	border: 1px solid var(--ktora-line);
	border-radius: 16px;
	background: rgba(255, 255, 255, .03);
	padding: 12px 14px;
}

#index details+details {
	margin-top: 10px;
}

#index summary {
	cursor: pointer;
	font-weight: 900;
	list-style: none;
}

#index summary::-webkit-details-marker {
	display: none;
}

#index summary:after {
	content: "＋";
	float: right;
	color: var(--ktora-muted);
}

#index details[open] summary:after {
	content: "－";
}

#index .faqA {
	margin-top: 8px;
	color: var(--ktora-muted);
	font-size: 13px;
}

/* ======================================================
12) ScenePick（シーン別おすすめ商品）
====================================================== */
#index .scenePick {
	padding: 36px 0;
	background: #fff;
}

#index .scenePick__lead {
	margin: 10px 0 16px;
	color: #444;
	line-height: 1.8;
}

#index .scenePickTabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 10px 0 18px;
}

#index .scenePickTabs__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 12px;
	border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, .12);
	background: #fff;
	color: #222;
	font-weight: 900;
	line-height: 1.2;
	font-size: 13px;
}

#index .scenePickTabs__tab:hover {
	background: #faf7f2;
}

#index .scenePickTabs__tab.is-active {
	border-color: #a3744d;
	background: #a3744d;
	color: #fff;
}

#index .scenePickGroup {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid rgba(0, 0, 0, .08);
}

#index .scenePickGroup:first-of-type {
	border-top: none;
	padding-top: 0;
}

#index .scenePickGroup__title {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 900;
	color: #222;
	border: none;
	padding: 0;
}

#index .scenePickGroup__note {
	margin: 0 0 14px;
	color: #555;
	line-height: 1.7;
}

#index .scenePickGrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

#index .sceneCard {
	border: 1px solid rgba(0, 0, 0, .10);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

#index .sceneCard__thumb {
	width: 100%;
	aspect-ratio: 16/9;
	overflow: hidden;
	background: #f3f3f3;
	position: relative;
}

#index .sceneCard__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

#index .sceneCard__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0));
	pointer-events: none;
}

#index .sceneCard__head {
	display: flex;
	gap: 10px;
	justify-content: space-between;
	align-items: center;
	padding: 12px 14px;
	background: #faf7f2;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}

#index .sceneBadge {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: 999px;
	background: #a3744d;
	color: #fff;
	font-weight: 900;
	font-size: 12px;
	line-height: 1;
	white-space: nowrap;
}

#index .sceneQty {
	font-weight: 900;
	font-size: 12px;
	color: #6b4a2f;
	white-space: nowrap;
}

#index .sceneCard__body {
	padding: 14px 14px 0;
}

#index .sceneCard__name {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 900;
	color: #222;
	border: none;
	padding: 0;
}

#index .sceneCard__desc {
	margin: 0 0 10px;
	color: #444;
	line-height: 1.8;
	font-size: 14px;
}

#index .sceneCard__meta {
	margin: 0;
	padding: 0 0 14px 0;
	list-style: none;
}

#index .sceneCard__meta li {
	position: relative;
	padding-left: 1.05em;
	line-height: 1.8;
	color: #444;
	font-size: 13px;
}

#index .sceneCard__meta li::before {
	content: "・";
	position: absolute;
	left: 0;
	top: 0;
	color: #a3744d;
	font-weight: 900;
}

#index .sceneCard__foot {
	margin-top: auto;
	padding: 14px;
	display: flex;
	gap: 10px;
}

#index .scenePick__bottomCta {
	margin-top: 20px;
	padding: 16px;
	background: #fffdf7;
	border: 1px solid rgba(0, 0, 0, .10);
	border-radius: 14px;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	align-items: center;
}

#index .scenePick__bottomText {
	line-height: 1.8;
	color: #333;
}

#index .scenePick__bottomBtns {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	min-width: 280px;
}

#index .scenePick__bottomBtns .sceneBtn {
	width: auto;
	min-width: 220px;
}

/* ======================================================
13) Wrapping（選べる無料ラッピング）
====================================================== */
#index .wrappingLead {
	margin: 8px 0 18px;
	font-weight: 900;
	color: #000;
	line-height: 1.8;
}

/* sub nav (chips) */
#index .wrappingNav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 26px;
}

#index .wrappingNav__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 12px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .12);
	font-weight: 900;
	line-height: 1.2;
	font-size: 13px;
	color: #222;
}

#index .wrappingNav__item:hover {
	background: #faf7f2;
}

/* blocks */
#index .wrappingBlock {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid rgba(0, 0, 0, .08);
}

#index .wrappingBlock:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

#index .wrappingH {
	margin: 0 0 14px;
	font-size: 20px;
	font-weight: 900;
	color: var(--ktora-brown);
	border: none;
	padding: 0;
}

/* paper gallery */
#index .wrapPaperGrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

#index .wrapPaper {
	margin: 0;
	border: 1px solid rgba(0, 0, 0, .10);
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
}

#index .wrapPaper img {
	width: 100%;
	height: auto;
	display: block;
}

#index .wrapPaper figcaption {
	padding: 10px 12px;
	font-weight: 900;
	font-size: 13px;
	color: #222;
	background: #faf7f2;
	border-top: 1px solid rgba(0, 0, 0, .08);
}

/* notes */
#index .wrapNote {
	margin-top: 16px;
	background: #fff7e6;
	border: 1px solid #f2d3a3;
	border-left: 6px solid var(--ktora-btn);
	border-radius: 14px;
	padding: 14px 16px;
}

#index .wrapNote__title {
	margin: 0 0 8px;
	font-weight: 900;
}

#index .wrapNote__list {
	margin: 0;
	padding-left: 1.2em;
}

#index .wrapNote__list li {
	margin: 6px 0;
	line-height: 1.7;
}

/* flow */
#index .wrapFlow {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
}

#index .wrapFlow__step {
	position: relative;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .10);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
}

#index .wrapFlow__step img {
	width: 100%;
	height: auto;
	display: block;
}

#index .wrapFlow__step p {
	margin: 0;
	padding: 10px 12px 12px;
	font-weight: 900;
	font-size: 13px;
	line-height: 1.4;
}

#index .wrapFlow__no {
	position: absolute;
	left: 10px;
	top: 10px;
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: var(--ktora-brown);
	color: #fff;
	font-weight: 900;
	box-shadow: 0 8px 18px rgba(0, 0, 0, .16);
}

#index .wrapFlow__step:not(:last-child)::after {
	content: "›";
	position: absolute;
	right: -10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 28px;
	opacity: .35;
	pointer-events: none;
}

/* 2-col cards */
#index .wrapTwoCol {
	margin-top: 16px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

#index .wrapCard {
	background: #fffdf7;
	border: 1px solid rgba(0, 0, 0, .10);
	border-radius: 14px;
	padding: 14px 14px 12px;
}

#index .wrapCard__title {
	margin: 0 0 8px;
	font-weight: 900;
	font-size: 16px;
	color: #222;
	border: none;
	padding: 0;
}

#index .wrapCard p {
	margin: 0;
	line-height: 1.8;
	color: #444;
	font-size: 14px;
}

/* media rows */
#index .wrapMedia {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 14px;
	align-items: start;
	margin-top: 14px;
	padding: 14px;
	border: 1px solid rgba(0, 0, 0, .10);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
}

#index .wrapMedia__img {
	border-radius: 12px;
	overflow: hidden;
	background: #f3f3f3;
}

#index .wrapMedia__img img {
	width: 100%;
	height: auto;
	display: block;
}

#index .wrapMedia__txt p {
	margin: 0 0 8px;
	line-height: 1.8;
}

#index .wrapMedia__txt p:last-child {
	margin-bottom: 0;
}

#index .wrapStrong {
	font-weight: 900;
	color: #222;
}

#index .wrapMuted {
	color: #666;
	font-size: 13px;
}

#index .wrapCallout {
	margin-top: 10px;
	padding: 10px 12px;
	background: #fff7e0;
	border-left: 6px solid var(--ktora-btn);
	border-radius: 12px;
	font-weight: 900;
}

#index .wrapBullets {
	margin: 0;
	padding-left: 1.2em;
}

#index .wrapBullets li {
	margin: 6px 0;
	line-height: 1.7;
}

/* CTA alignment */
#index .wrapCta {
	margin-top: 16px;
	display: flex;
	justify-content: center;
}


/* ======================================================
14) 思い / CTA（末尾）
====================================================== */
#index .omoi .txt-omoi-box {
	margin-top: 15px;
	background-color: #f1f1f1;
	padding: 10px;
	border-radius: 5px;
}

#index .omoi .txt-omoi-box p {
	font-size: 105%;
}

/* ======================================================
SP overrides（max-width:768px）
====================================================== */
@media (max-width: 768px) {

	/* Layout */
	#index>header {
		margin-top: 0;
		padding: 26px 0 20px;
	}

	#index>header h1 {
		font-size: 24px;
	}

	#index>section,
	#index>.cta {
		padding-left: 14px;
		padding-right: 14px;
	}

	/* nav-links（横スクロール + 矢印） */
	#index .nav-links {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 8px;
		padding: 10px 12px;
		-webkit-overflow-scrolling: touch;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
		position: sticky;
		top: 0;
	}

	#index .nav-links a {
		flex: 0 0 auto;
		white-space: nowrap;
		font-size: 13px;
		padding: 10px 14px;
		border-radius: 999px;
		margin: 0;
	}

	#index .nav-links::after {
		content: "→";
		position: absolute;
		top: 0;
		right: 0;
		width: 44px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to left, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
		color: var(--ktora-brown);
		font-size: 18px;
		font-weight: 900;
		pointer-events: none;
	}

	#index .nav-links::-webkit-scrollbar {
		display: none;
	}

	/* Card sections：SPは角丸を外して“帯”に */
	#index section.usecases,
	#index section.features,
	#index section.useScene,
	#index section.picks,
	#index section.steps1,
	#index section.steps2,
	#index section.faq,
	#index section.scenePick,
	#index section.wrapping,
	#index section.omoi,
	#index .cta {
		border-radius: 0;
		border-left: 0;
		border-right: 0;
		padding: 18px 14px;
	}

	/* headings */
	#index .section-title {
		font-size: 22px;
		margin: 0 0 18px;
	}

	/* Usecases */
	#index .usecases .usecases-box {
		flex-direction: column;
		align-items: stretch;
	}

	#index .usecases .usecases-box .img {
		width: 100%;
		max-width: 280px;
		margin: 0 auto;
	}

	#index .usecases .usecases-box .txt p {
		font-size: 18px;
	}

	/* Features */
	.tokucho-box {
		grid-template-columns: 1fr;
	}

	.tokucho-title {
		font-size: 16px;
	}

	.bonus-main {
		font-size: 18px;
	}

	/* UseScene */
	#index .useScene {
		padding: 34px 0;
	}

	#index .useScene__grid {
		grid-template-columns: 1fr;
	}

	#index .useSceneCard {
		padding: 52px 16px 16px;
	}

	#index .useSceneCard__label {
		width: calc(100% - 32px);
	}

	/* Picks */
	#index .picksViewport {
		padding: 6px 38px 10px;
	}

	#index .sceneCategory {
		margin: 40px 0 30px;
	}

	#index .sceneCategory__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	#index .sceneCategory__item {
		padding: 12px 10px;
		gap: 10px;
	}

	#index .sceneCategory__ico {
		width: 34px;
		height: 34px;
	}

	/* Flow */
	#index .flowSteps {
		grid-template-columns: 1fr;
	}

	#index .flowStep:not(:last-child)::after {
		content: none;
	}

	/* ScenePick */
	#index .scenePickGrid {
		grid-template-columns: 1fr;
	}

	#index .sceneCard__foot {
		flex-direction: column;
	}

	#index .scenePick__bottomCta {
		flex-direction: column;
		align-items: stretch;
	}

	#index .scenePick__bottomBtns {
		min-width: 0;
	}

	#index .scenePick__bottomBtns .sceneBtn {
		width: 100%;
	}

	/* Wrapping */
	#index .wrappingNav {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
	}

	#index .wrappingNav::-webkit-scrollbar {
		display: none;
	}

	#index .wrappingNav__item {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	#index .wrapPaperGrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#index .wrapFlow {
		grid-template-columns: 1fr;
	}

	#index .wrapFlow__step:not(:last-child)::after {
		content: none;
	}

	#index .wrapTwoCol {
		grid-template-columns: 1fr;
	}

	#index .wrapMedia {
		grid-template-columns: 1fr;
		padding: 12px;
	}

}