/* ===========================
   /imakoso  映像制作工房LAC ショート動画制作
   色はチラシ（福祉団体向け）から。ページ内だけに効くよう .ik の下に書く
   =========================== */
.ik {
  --ik-green: #1F706A;
  --ik-green-dark: #175a55;
  --ik-yellow: #F6DA89;
  --ik-yellow-hover: #F2CF6B;
  --ik-pale: #EFF5F3;
  --ik-ink: #1E2C2F;
  --ik-text: #33403F;
  --ik-muted: #5F6F6D;
  --ik-line: #DCE6E3;
  --ik-maru: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  --ik-num: "Inter", "Noto Sans JP", sans-serif;
  --ik-r: 20px;
  color: var(--ik-text);
  line-height: 1.8;
  /* 句読点を使わないので、折り返しは文節で（対応していないブラウザは JS で BudouX を使う） */
  word-break: auto-phrase;
  line-break: strict;
}
.ik p, .ik li, .ik dd, .ik summary { text-wrap: pretty; }
.ik h1, .ik h2, .ik h3, .ik h4 { text-wrap: balance; }
.ik budoux-ja { display: inline; }
/* このページはヘッダーを最初から白地に（緑のヒーローの上で文字が読めるように） */
.site-header { background: rgba(255,255,255,.97); box-shadow: 0 1px 12px rgba(0,0,0,.06); }

.ik *, .ik *::before, .ik *::after { box-sizing: border-box; }
.ik .ik-wrap { width: min(1100px, 100% - 32px); margin: 0 auto; }
.ik section { padding: 88px 0; scroll-margin-top: calc(var(--header-h, 72px) + 48px); }
.ik .ik-label { font-family: var(--ik-num); font-weight: 700; color: var(--ik-green); font-size: 14px; letter-spacing: .14em; }
.ik .ik-title { font-family: var(--ik-maru); font-weight: 900; color: var(--ik-ink); font-size: clamp(26px, 4.2vw, 38px); line-height: 1.45; margin: 6px 0 16px; }
.ik .ik-lead { color: var(--ik-muted); max-width: 660px; }
.ik .ik-todo { display: inline-block; font-size: 12px; font-weight: 700; color: #8A5A00; background: #FFF1CC; border-radius: 6px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }

/* ボタン（フラット・単色） */
.ik .ik-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--ik-maru); font-weight: 700; font-size: 17px;
  text-decoration: none; border-radius: 999px; padding: 16px 30px; border: 0; cursor: pointer; transition: background .2s, transform .2s; line-height: 1.4; }
.ik .ik-btn:hover { transform: translateY(-2px); }
.ik .ik-btn-main { background: var(--ik-yellow); color: var(--ik-ink); }
.ik .ik-btn-main:hover { background: var(--ik-yellow-hover); }
.ik .ik-btn-green { background: var(--ik-green); color: #fff; }
.ik .ik-btn-green:hover { background: var(--ik-green-dark); }
.ik .ik-btn-line { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.ik .ik-arrow { width: 18px; height: 18px; }

/* ページ内の目次 */
.ik .ik-subnav { background: #fff; border-bottom: 1px solid var(--ik-line); }
.ik .ik-subnav .ik-wrap { display: flex; gap: 6px 22px; flex-wrap: wrap; padding: 12px 0; font-size: 14px; }
.ik .ik-subnav a { color: var(--ik-text); text-decoration: none; }
.ik .ik-subnav a:hover { color: var(--ik-green); }

/* ヒーロー */
.ik .ik-hero { background: var(--ik-green); color: #fff; padding: calc(var(--header-h, 72px) + 56px) 0 72px; overflow: hidden; }
.ik .ik-hero .ik-wrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; align-items: center; }
.ik .ik-eyebrow { font-weight: 700; font-size: 15px; opacity: .92; }
.ik .ik-brandline { font-family: var(--ik-maru); font-weight: 700; font-size: 15px; display: inline-block; border: 1.5px solid rgba(255,255,255,.55); border-radius: 999px; padding: 3px 14px; margin-bottom: 14px; }
.ik .ik-hero h1 { font-family: var(--ik-maru); font-weight: 900; font-size: clamp(32px, 4.5vw, 60px); line-height: 1.3; margin: 12px 0 18px; word-break: keep-all; letter-spacing: .02em; color: #fff; }
.ik .ik-hero .ik-hero-lead { font-size: 17px; opacity: .95; }
.ik .ik-price-pill { display: inline-flex; align-items: baseline; gap: 10px; background: #fff; color: var(--ik-ink); border-radius: 999px; padding: 12px 26px; margin: 26px 0 30px; flex-wrap: wrap; }
.ik .ik-price-pill b { font-family: var(--ik-num); font-size: 34px; color: var(--ik-green); line-height: 1; }
.ik .ik-price-pill small { font-size: 13px; color: var(--ik-muted); }
.ik .ik-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.ik .ik-phone-note { text-align: center; font-size: 13px; opacity: .85; margin-top: 14px; }
@media (max-width: 860px) { .ik .ik-hero h1 { font-size: clamp(30px, 8.6vw, 56px); } .ik .ik-hero .ik-wrap { grid-template-columns: 1fr; gap: 40px; } .ik .ik-hero { padding-top: calc(var(--header-h, 72px) + 36px); } }

/* スマホの枠（YouTubeショートを埋め込む） */
.ik .ik-phone { position: relative; width: min(300px, 78vw); aspect-ratio: 9 / 19.5; margin: 0 auto; background: var(--ik-ink); border-radius: 44px; padding: 12px; }
.ik .ik-screen { position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: #000; }
.ik .ik-yt { position: absolute; inset: 0; cursor: pointer; display: grid; place-items: center; border: 0; padding: 0; background: none; width: 100%; }
.ik .ik-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ik .ik-yt img.ik-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ik .ik-play { position: relative; z-index: 1; width: 68px; height: 68px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; transition: transform .2s; }
.ik .ik-yt:hover .ik-play { transform: scale(1.08); }
.ik .ik-play svg { width: 26px; height: 26px; margin-left: 4px; fill: var(--ik-ink); }
.ik .ik-badge { position: absolute; left: 12px; bottom: 12px; z-index: 1; font-size: 11px; font-weight: 700; background: rgba(0,0,0,.55); color: #fff; padding: 3px 10px; border-radius: 999px; }

/* 動画がまだ無いときの仮の絵（トーンごと） */
.ik .pv { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 26px 18px; text-align: center; gap: 12px; }
.ik .pv .s { font-size: 12px; letter-spacing: .1em; }
.ik .pv .h { font-size: 26px; line-height: 1.35; }
.ik .pv .steps { display: flex; gap: 6px; margin-top: 6px; }
.ik .pv .steps i { width: 34px; height: 8px; border-radius: 4px; display: block; }
.ik .pv.SOL { background: #1F3550; color: #fff; font-family: "Noto Sans JP", sans-serif; font-weight: 500; }
.ik .pv.SOL .s { color: #7FB3D5; } .ik .pv.SOL .steps i { background: #7FB3D5; border-radius: 0; height: 3px; }
.ik .pv.SHP { background: #111; color: #fff; font-family: "Noto Sans JP", sans-serif; font-weight: 700; }
.ik .pv.SHP .h { font-size: 32px; letter-spacing: -.02em; } .ik .pv.SHP .s { color: #FF4D2E; font-weight: 700; } .ik .pv.SHP .steps i { background: #FF4D2E; border-radius: 0; }
.ik .pv.YUR { background: #F6EFE4; color: #6A5A50; font-family: var(--ik-maru); font-weight: 700; }
.ik .pv.YUR .s { color: #B98D84; } .ik .pv.YUR .steps i { background: #E7A9A0; border-radius: 50%; width: 10px; height: 10px; }
.ik .pv.POP { background: #FFD84D; color: var(--ik-ink); font-family: var(--ik-maru); font-weight: 900; }
.ik .pv.POP .h { font-size: 30px; -webkit-text-stroke: 1px var(--ik-ink); color: #fff; paint-order: stroke fill; text-shadow: 3px 3px 0 #FF5FA2; }
.ik .pv.POP .s { background: #FF5FA2; color: #fff; padding: 2px 10px; border-radius: 999px; }
.ik .pv.POP .steps i { background: var(--ik-ink); border-radius: 50%; width: 12px; height: 12px; }
.ik .pv.POP .steps i:nth-child(2) { background: #3BB6FF; } .ik .pv.POP .steps i:nth-child(3) { background: #FF5FA2; }

/* 無料サンプル（黄色の帯）＋3つの特長 */
.ik .ik-free { padding-bottom: 0; }
.ik .ik-free-card { background: var(--ik-yellow); border-radius: 28px; padding: 44px 48px; display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center; }
.ik .ik-tag { display: inline-block; background: var(--ik-ink); color: #fff; font-weight: 700; font-size: 14px; border-radius: 999px; padding: 6px 18px; }
.ik .ik-free h2 { font-family: var(--ik-maru); font-weight: 900; color: var(--ik-ink); font-size: clamp(22px, 6.2vw, 38px); line-height: 1.45; margin: 16px 0 14px; }
.ik .ik-free p { color: var(--ik-ink); }
.ik .ik-mini-phone { width: 150px; aspect-ratio: 9/16; border: 4px solid var(--ik-ink); border-radius: 22px; background: #fff; display: grid; place-items: center; text-align: center; }
.ik .ik-mini-phone b { font-family: var(--ik-maru); font-size: 30px; color: var(--ik-green); display: block; line-height: 1.2; }
.ik .ik-mini-phone small { font-size: 12px; font-weight: 700; color: var(--ik-ink); }
.ik .ik-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.ik .ik-point { background: var(--ik-pale); border-radius: var(--ik-r); padding: 28px 26px; }
.ik .ik-point .n { font-family: var(--ik-num); font-weight: 700; color: var(--ik-green); font-size: 22px; }
.ik .ik-point h3 { font-family: var(--ik-maru); font-weight: 900; color: var(--ik-ink); font-size: 20px; margin: 8px 0 6px; }
.ik .ik-point p { font-size: 15px; color: var(--ik-muted); margin: 0; }
@media (max-width: 760px) { .ik .ik-free-card { grid-template-columns: 1fr; padding: 32px 24px; } .ik .ik-mini-phone { display: none; } .ik .ik-points { grid-template-columns: 1fr; } }

/* トーン見本 */
.ik .ik-tones { background: var(--ik-pale); }
.ik .ik-tone-layout { display: grid; grid-template-columns: 360px 1fr; gap: 56px; align-items: center; margin-top: 40px; }
.ik .ik-matrix { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 28px 0 0 28px; }
.ik .ik-matrix .ax { position: absolute; font-size: 12px; color: var(--ik-muted); font-weight: 700; }
.ik .ik-matrix .ax.top { top: 0; left: 28px; right: 0; display: flex; justify-content: space-around; }
.ik .ik-matrix .ax.left { left: 0; top: 28px; bottom: 0; display: flex; flex-direction: column; justify-content: space-around; writing-mode: vertical-rl; }
.ik .ik-tone-btn { border: 0; cursor: pointer; border-radius: 16px; padding: 18px 10px; text-align: center; background: #fff; color: var(--ik-ink); transition: transform .2s, box-shadow .2s; font-family: var(--ik-maru); font-weight: 900; font-size: 18px; }
.ik .ik-tone-btn small { display: block; font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 12px; color: var(--ik-muted); margin-top: 2px; }
.ik .ik-tone-btn .sw { display: flex; gap: 4px; justify-content: center; margin-bottom: 8px; }
.ik .ik-tone-btn .sw i { width: 14px; height: 14px; border-radius: 50%; display: block; }
.ik .ik-tone-btn[aria-selected="true"] { box-shadow: 0 0 0 3px var(--ik-green); transform: translateY(-2px); }
.ik .ik-tone-stage { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; }
.ik .ik-tone-stage .ik-phone { width: 250px; }
.ik .ik-tone-desc h3 { font-family: var(--ik-maru); font-weight: 900; font-size: 28px; color: var(--ik-ink); margin: 0; }
.ik .ik-tone-desc .kw { color: var(--ik-green); font-weight: 700; margin: 4px 0 18px; }
.ik .ik-tone-now { display: grid; gap: 2px; background: #fff; border-radius: 16px; padding: 16px 20px; margin-bottom: 18px; }
.ik .ik-tone-now .lbl { font-size: 12px; font-weight: 700; color: var(--ik-muted); }
.ik .ik-tone-now b { font-family: var(--ik-maru); font-weight: 900; font-size: 19px; color: var(--ik-ink); line-height: 1.5; }
.ik .ik-tone-now .meta { font-size: 13px; color: var(--ik-muted); }
.ik .ik-shuffle { font-size: 15px; padding: 12px 22px; }
.ik .ik-shuffle[hidden] { display: none; }
.ik .ik-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ik .ik-chip { border: 1px solid var(--ik-line); background: #fff; border-radius: 999px; padding: 6px 16px; font-size: 14px; cursor: pointer; color: var(--ik-text); font-family: "Noto Sans JP", sans-serif; }
.ik .ik-chip[aria-pressed="true"] { background: var(--ik-green); border-color: var(--ik-green); color: #fff; }
@media (max-width: 960px) { .ik .ik-tone-layout { grid-template-columns: 1fr; gap: 32px; } .ik .ik-matrix { max-width: 380px; } }
@media (max-width: 600px) { .ik .ik-tone-stage { grid-template-columns: 1fr; } .ik .ik-tone-stage .ik-phone { width: 220px; } }

/* 作例 */
.ik .ik-filters { display: flex; gap: 10px 18px; flex-wrap: wrap; margin: 28px 0 8px; }
.ik .ik-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 24px; }
.ik .ik-card { cursor: pointer; background: none; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; }
.ik .ik-card .thumb { position: relative; aspect-ratio: 9/16; border-radius: 16px; overflow: hidden; background: var(--ik-pale); }
.ik .ik-card .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ik .ik-card .thumb .ik-play { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; }
.ik .ik-card .thumb .ik-play svg { width: 14px; height: 14px; margin-left: 2px; }
.ik .ik-card h4 { font-size: 14px; font-weight: 700; color: var(--ik-ink); margin: 10px 0 0; line-height: 1.5; }
.ik .ik-card .meta { font-size: 12px; color: var(--ik-muted); margin-top: 2px; }
.ik .ik-card .pv .h { font-size: 17px; }
.ik .ik-card .pv.SHP .h { font-size: 20px; } .ik .ik-card .pv.POP .h { font-size: 19px; }
.ik .ik-empty { color: var(--ik-muted); padding: 24px 0; }
.ik .ik-more { text-align: center; margin-top: 32px; display: flex; gap: 14px 24px; justify-content: center; align-items: center; flex-wrap: wrap; }
.ik .ik-channel { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ik-green); font-weight: 700; text-decoration: none; }
@media (max-width: 960px) { .ik .ik-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .ik .ik-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

/* 料金 */
.ik .ik-price-table { margin-top: 32px; border: 1px solid var(--ik-line); border-radius: var(--ik-r); overflow: hidden; }
.ik .ik-price-row { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; padding: 20px 28px; border-top: 1px solid var(--ik-line); }
.ik .ik-price-row:first-child { border-top: 0; background: var(--ik-pale); font-size: 14px; font-weight: 700; color: var(--ik-muted); padding: 12px 28px; }
.ik .ik-price-row b { font-family: var(--ik-num); font-size: 26px; color: var(--ik-ink); }
.ik .ik-price-row.reco { background: #FCF6E3; }
.ik .ik-price-row .lbl { font-family: var(--ik-maru); font-weight: 700; color: var(--ik-ink); font-size: 17px; }
.ik .ik-price-row .lbl em { font-style: normal; font-size: 12px; background: var(--ik-yellow); color: var(--ik-ink); border-radius: 999px; padding: 2px 10px; margin-left: 8px; }
.ik .ik-cond { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 20px; }
.ik .ik-cond div { background: var(--ik-pale); border-radius: 14px; padding: 16px 18px; font-size: 14px; }
.ik .ik-cond b { display: block; font-family: var(--ik-maru); font-size: 17px; color: var(--ik-ink); }
@media (max-width: 760px) { .ik .ik-price-row { grid-template-columns: 1fr; gap: 2px; } .ik .ik-price-row:first-child { display: none; } .ik .ik-cond { grid-template-columns: 1fr 1fr; } }

/* 流れ */
.ik .ik-flow { background: var(--ik-pale); }
.ik .ik-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 36px 0 0; padding: 0; list-style: none; }
.ik .ik-steps li { background: #fff; border-radius: var(--ik-r); padding: 24px 20px; }
.ik .ik-steps .n { font-family: var(--ik-num); font-weight: 700; color: var(--ik-green); font-size: 13px; letter-spacing: .1em; }
.ik .ik-steps h3 { font-family: var(--ik-maru); font-weight: 900; color: var(--ik-ink); font-size: 18px; margin: 6px 0; }
.ik .ik-steps p { font-size: 14px; color: var(--ik-muted); line-height: 1.7; margin: 0; }
.ik .ik-steps li.free { background: var(--ik-yellow); }
.ik .ik-steps li.free p { color: var(--ik-ink); }
@media (max-width: 960px) { .ik .ik-steps { grid-template-columns: 1fr; } }

/* 制作体制 */
.ik .ik-team .ik-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ik .ik-team .photo { aspect-ratio: 4/3; border-radius: 24px; background: var(--ik-pale); overflow: hidden; display: grid; place-items: center; color: var(--ik-muted); font-size: 14px; text-align: center; }
.ik .ik-team .photo img { width: 100%; height: 100%; object-fit: cover; }
.ik .ik-team ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.ik .ik-team li { display: flex; gap: 12px; align-items: flex-start; }
.ik .ik-team li svg { flex: 0 0 22px; margin-top: 4px; }
.ik .ik-team .by { margin-top: 20px; font-size: 14px; color: var(--ik-muted); }
@media (max-width: 860px) { .ik .ik-team .ik-wrap { grid-template-columns: 1fr; gap: 32px; } }

/* よくある質問 */
.ik .ik-faq .list { margin-top: 24px; max-width: 820px; }
.ik .ik-faq details { border-bottom: 1px solid var(--ik-line); padding: 20px 0; }
.ik .ik-faq summary { cursor: pointer; font-weight: 700; color: var(--ik-ink); list-style: none; display: flex; justify-content: space-between; gap: 16px; font-size: 17px; }
.ik .ik-faq summary::-webkit-details-marker { display: none; }
.ik .ik-faq summary::after { content: "+"; font-family: var(--ik-num); color: var(--ik-green); font-size: 22px; line-height: 1; }
.ik .ik-faq details[open] summary::after { content: "\2212"; }
.ik .ik-faq details p { margin: 10px 0 0; color: var(--ik-muted); }

/* 最後の誘導 */
.ik .ik-final { background: var(--ik-green); color: #fff; text-align: center; }
.ik .ik-final h2 { font-family: var(--ik-maru); font-weight: 900; font-size: clamp(28px, 4.6vw, 44px); line-height: 1.4; color: #fff; margin: 0; }
.ik .ik-final p { opacity: .92; margin: 14px 0 30px; }
.ik .ik-contact-box { display: inline-grid; gap: 4px; margin-top: 36px; background: rgba(255,255,255,.1); border-radius: 18px; padding: 20px 36px; font-size: 15px; }
.ik .ik-contact-box b { font-family: var(--ik-maru); font-size: 20px; }
.ik .ik-contact-box a { color: #fff; }

/* スマホ下部の固定ボタン */
.ik .ik-sticky { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 900; display: none; transition: opacity .25s, transform .25s; }
.ik .ik-sticky .ik-btn { width: 100%; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.ik .ik-sticky.hide { opacity: 0; transform: translateY(20px); pointer-events: none; }
@media (max-width: 760px) { .ik .ik-sticky { display: block; } }

/* 動画の拡大表示 */
.ik .ik-modal { position: fixed; inset: 0; z-index: 2000; background: rgba(20,30,30,.82); display: none; place-items: center; padding: 20px; }
.ik .ik-modal.open { display: grid; }
.ik .ik-modal .box { width: min(380px, 100%); }
.ik .ik-modal .frame { position: relative; aspect-ratio: 9/16; max-height: 80vh; margin: 0 auto; border-radius: 20px; overflow: hidden; background: #000; }
.ik .ik-modal .frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ik .ik-modal .cap { color: #fff; margin-top: 12px; font-size: 14px; display: flex; justify-content: space-between; gap: 12px; }
.ik .ik-modal .close { background: none; border: 0; color: #fff; font-size: 14px; cursor: pointer; text-decoration: underline; }

/* ===========================
   縦⇔横の切り替え
   =========================== */
/* 端末 */
.ik .ik-device { position: relative; width: 100%; }
.ik .ik-dev-body { position: relative; margin: 0 auto; background: var(--ik-ink); transform-origin: 50% 50%; will-change: transform;
  box-shadow: 0 30px 60px -28px rgba(10,30,30,.55); }
.ik .ik-dev-body::before { /* スピーカーの切り欠き。縦では上、横では左に回る */
  content: ""; position: absolute; z-index: 2; background: var(--ik-ink); border-radius: 999px;
  left: 50%; top: 0; width: 26%; height: 2.2%; min-height: 10px; transform: translate(-50%, 70%); }
.ik .ik-device[data-mode="wide"] .ik-dev-body::before { left: 0; top: 50%; width: 1.25%; height: 26%; min-width: 10px; min-height: 0; transform: translate(70%, -50%); }
.ik .ik-device.is-turning .ik-dev-body::before { opacity: 0; }
.ik .ik-dev-screen { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; cursor: pointer; isolation: isolate; }
.ik .ik-dev-layer { position: absolute; inset: 0; display: grid; place-items: center; }
.ik .ik-dev-layer > img.ik-poster, .ik .ik-dev-layer > iframe, .ik .ik-dev-layer > div:not(.pv) { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.ik .ik-device[data-mode="short"] .ik-dev-layer[data-l="wide"],
.ik .ik-device[data-mode="wide"] .ik-dev-layer[data-l="short"] { visibility: hidden; }
.ik .ik-device.is-turning .ik-dev-layer { visibility: visible !important; }
.ik .ik-device.is-turning .ik-play { opacity: 0; }
.ik .ik-dev-layer .ik-play { position: absolute; left: 50%; bottom: 9%; margin-left: -34px; z-index: 1; transition: transform .2s, opacity .2s; }
.ik .ik-dev-screen:hover .ik-play { transform: scale(1.08); }
.ik .ik-dev-layer[data-l="wide"] .pv .h br { display: none; }
.ik .ik-dev-layer[data-l="wide"] .pv .h { max-width: 80%; }
.ik .ik-dev-toast { position: absolute; left: 50%; bottom: 14%; z-index: 3; background: rgba(255,255,255,.95); color: var(--ik-ink); font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 999px; white-space: nowrap; }

/* 縦/横の切り替えボタン */
.ik .ik-orient { position: relative; display: inline-flex; background: var(--ik-pale); border-radius: 999px; padding: 4px; isolation: isolate; }
.ik .ik-orient .knob { position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 0; width: 50%; background: var(--ik-green); border-radius: 999px; }
.ik .ik-orient button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; padding: 8px 16px 8px 12px; border-radius: 999px;
  font-family: var(--ik-maru); font-weight: 700; font-size: 14px; color: var(--ik-text); transition: color .25s; white-space: nowrap; }
.ik .ik-orient button[aria-pressed="true"] { color: #fff; }
.ik .ik-orient button small { font-family: var(--ik-num); font-size: 11px; opacity: .7; font-weight: 500; }
.ik .ik-orient .ico { width: 12px; height: 18px; border: 2px solid currentColor; border-radius: 3px; transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.ik .ik-orient button[data-mode="wide"] .ico { transform: rotate(-90deg); }
.ik .ik-orient button[aria-pressed="true"] .ico { animation: ik-wiggle .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes ik-wiggle { 30% { scale: 1.25; } }
.ik .ik-hero .ik-orient, .ik .ik-modal .ik-orient { background: rgba(255,255,255,.14); }
.ik .ik-hero .ik-orient button, .ik .ik-modal .ik-orient button { color: #fff; }
.ik .ik-hero .ik-orient .knob, .ik .ik-modal .ik-orient .knob { background: #fff; }
.ik .ik-hero .ik-orient button[aria-pressed="true"], .ik .ik-modal .ik-orient button[aria-pressed="true"] { color: var(--ik-green); }
.ik .ik-hero-media { display: grid; justify-items: center; gap: 18px; min-width: 0; }
.ik .ik-subnav { position: sticky; top: var(--header-h, 72px); z-index: 50; }
.ik .ik-subnav .ik-wrap { align-items: center; justify-content: space-between; padding: 8px 0; }
.ik .ik-subnav .links { display: flex; gap: 6px 22px; flex-wrap: wrap; }
.ik .ik-subnav .ik-orient { padding: 3px; } .ik .ik-subnav .ik-orient .knob { top: 3px; bottom: 3px; }
.ik .ik-subnav .ik-orient button { padding: 5px 12px 5px 10px; font-size: 13px; }
@media (max-width: 760px) { .ik .ik-subnav .links { display: none; } .ik .ik-subnav .ik-wrap { justify-content: center; } }

/* 一覧: 縦は5列、横は3列 */
.ik .ik-card .thumb .tl { position: absolute; inset: 0; transition: opacity .35s; }
.ik .ik-card .thumb .tl > * { position: absolute; inset: 0; }
.ik .ik-grid[data-mode="short"] .tl[data-l="wide"], .ik .ik-grid[data-mode="wide"] .tl[data-l="short"] { opacity: 0; }
.ik .ik-grid[data-mode="wide"] { grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ik .ik-grid[data-mode="wide"] .thumb { aspect-ratio: 16/9; }
.ik .ik-grid[data-mode="wide"] .pv .h br { display: none; }
.ik .ik-card .thumb { transform-origin: 0 0; transition: box-shadow .2s; }
.ik .ik-card:hover .thumb, .ik .ik-card:focus-visible .thumb { box-shadow: 0 0 0 3px var(--ik-green); }
.ik .ik-card:focus { outline: none; }
@media (max-width: 960px) { .ik .ik-grid[data-mode="wide"] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ik .ik-grid[data-mode="wide"] { grid-template-columns: 1fr; } }

/* 拡大表示 */
.ik .ik-modal .box { width: min(960px, 100%); display: grid; gap: 14px; justify-items: center; }
.ik .ik-modal .ik-device { width: min(900px, 100%); }
.ik .ik-modal .cap { width: 100%; max-width: 900px; align-items: center; flex-wrap: wrap; margin: 0; }

/* 見出しの1字ずつ */
.ik .ch { display: inline-block; }
/* 寸法が決まってから端末を出す */
.ik .ik-device { transition: opacity .4s; }
.ik:not(.is-ready) .ik-device { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ik * { transition: none !important; animation: none !important; } }

/* 料金表 */
.ik .ik-price-row .lbl small { display: block; font-family: "Noto Sans JP", sans-serif; font-size: 13px; font-weight: 500; color: var(--ik-muted); }
.ik .ik-price-row .per { font-family: var(--ik-num); font-weight: 700; font-size: 18px; color: var(--ik-green); }
.ik .ik-price-h { font-family: var(--ik-maru); font-weight: 900; font-size: 20px; color: var(--ik-ink); margin: 28px 0 0; }
.ik .ik-price-h small, .ik .ik-wide-price .lbl small { font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 13px; color: var(--ik-muted); margin-left: 10px; }
.ik .ik-price-h + .ik-price-table { margin-top: 12px; }
.ik .ik-wide-price { margin-top: 24px; border: 1px solid var(--ik-line); border-radius: var(--ik-r); padding: 20px 28px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; transition: background .4s, border-color .4s; }
.ik .ik-wide-price .lbl { font-family: var(--ik-maru); font-weight: 900; font-size: 20px; color: var(--ik-ink); }
.ik .ik-wide-price .v b { font-family: var(--ik-num); font-size: 28px; color: var(--ik-ink); margin: 0 4px; }
.ik .ik-wide-price .v small { font-size: 13px; color: var(--ik-muted); }
.ik[data-mode="wide"] .ik-wide-price { background: rgba(31,112,106,.08); border-color: var(--ik-green); }
@media (max-width: 760px) {
  .ik .ik-price-row { grid-template-columns: 1fr 1fr; }
  .ik .ik-price-row .lbl { grid-column: 1 / -1; }
  .ik .ik-price-row:first-child { display: none; }
  .ik .ik-price-row .per::before { content: "1本あたり "; font-size: 12px; color: var(--ik-muted); font-weight: 500; }
}
.ik .ik-price-row.max { background: #FFF6F2; }
.ik .ik-price-row.max .lbl::after { content: "1本あたりがいちばん高い"; display: inline-block; font-style: normal; font-size: 12px; background: #F3D9CF; color: var(--ik-ink); border-radius: 999px; padding: 2px 10px; margin-left: 8px; font-family: "Noto Sans JP", sans-serif; }
.ik .ik-price-row.max .lbl small { margin-top: 0; }
.ik .ik-price-row b { font-size: 24px; }
.ik .ik-price-notes { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 4px; font-size: 14px; color: var(--ik-muted); }
.ik .ik-price-notes li::before { content: "※"; margin-right: 4px; }
.ik .ik-price-notes b { color: var(--ik-ink); }
.ik .ik-prepare { margin-top: 28px; background: var(--ik-pale); border-radius: var(--ik-r); padding: 24px 28px; }
.ik .ik-prepare h3 { font-family: var(--ik-maru); font-weight: 900; color: var(--ik-ink); font-size: 18px; margin: 0 0 8px; }
.ik .ik-prepare ul { margin: 0; padding-left: 1.2em; font-size: 15px; }

/* トーン欄の端末: 縦は横に説明、横は端末を全幅にして説明を下へ */
.ik .ik-tone-stage .ik-device { width: 290px; }
.ik[data-mode="wide"] .ik-tone-stage { grid-template-columns: 1fr; gap: 24px; }
.ik[data-mode="wide"] .ik-tone-stage .ik-device { width: 100%; }
@media (max-width: 600px) { .ik .ik-tone-stage .ik-device { width: 100%; } }

.ik .ik-wide-price .v b { font-family: var(--ik-maru); font-size: 24px; }
.ik .ik-other { margin-top: 14px; font-size: 14px; color: var(--ik-muted); }
.ik .ik-other a { color: var(--ik-green); font-weight: 700; margin: 0 4px; }

/* 白地の表紙でも境目が見えるように薄い縁 */
.ik .ik-card .thumb { outline: 1px solid var(--ik-line); outline-offset: -1px; }