/* ===== かんたん説明モード ===== */
:root{--coach:#f08c00;--coach-soft:#fff3d6}

/* Mode switch (topbar) */
.mode-switch{display:flex;padding:3px;border-radius:12px;background:#e9efe6;border:1px solid #d6e2d3}
.mode-switch button{border:0;background:transparent;border-radius:9px;padding:7px 12px;font-size:13px;font-weight:800;color:#3d5a4b;white-space:nowrap}
.mode-switch button[aria-pressed="true"]{background:#fff;color:var(--forest);box-shadow:0 1px 3px #17392b26}

.story-steps,.story-panel{display:none}

body.story-mode .hero,
body.story-mode .navigation,
body.story-mode .stage,
body.story-mode .demo-tag,
body.story-mode .present-toggle,
body.story-mode .line-area .view-label span:last-child{display:none}

/* Step bar */
body.story-mode .story-steps{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;list-style:none;margin:22px 0 18px;padding:0;counter-reset:none}
.story-step{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border:2px solid #d6e2d3;border-radius:14px;background:#fffdf8;text-align:left;font-size:16px;font-weight:800;color:#4b6457;min-height:58px}
.story-step:hover{background:#f0f6ec}
.story-num{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:#e6eee2;font:800 17px/1 system-ui;color:#3d5a4b}
.story-step.finished{border-color:#bcd9be}
.story-step.finished .story-num{background:#2c945f;color:#fff}
.story-step.current{border-color:var(--forest);background:var(--forest);color:#fff;box-shadow:0 8px 20px -10px #17392b99}
.story-step.current .story-num{background:var(--lime);color:var(--forest)}

/* Layout: phone + explanation */
body.story-mode .desk{gap:clamp(20px,3vw,48px)}
body.story-mode .story-panel{display:block;position:sticky;top:96px}
.story-inner{background:#fffdf8;border:1px solid #d8e2d6;border-radius:24px;padding:clamp(22px,3vw,40px);box-shadow:0 18px 40px -24px #193a2440}
.story-count{display:inline-block;margin:0 0 14px;padding:6px 14px;border-radius:99px;background:#e6f1df;color:#215436;font-size:16px;font-weight:800}
.story-inner h2{margin:0 0 16px;font-size:clamp(28px,2.8vw,42px);line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
.story-body{font-size:clamp(18px,1.5vw,21px);line-height:1.85;color:#2f473b;white-space:pre-line}
.story-task{display:flex;gap:14px;align-items:flex-start;margin-top:24px;padding:18px 20px;border-radius:16px;background:var(--coach-soft);border:2px solid #f6c56b;color:#5a3a00}
.story-task svg{width:34px;height:34px;flex:none;color:var(--coach);stroke-width:1.8}
.story-task p{font-size:clamp(17px,1.4vw,20px);line-height:1.7;font-weight:800}
.story-task.done{background:#e3f4e1;border-color:#9ccf9f;color:#17502f}
.story-task.done svg{color:#2c945f}
.story-nav{display:grid;grid-template-columns:auto 1fr;gap:12px;margin-top:26px}
.story-back,.story-next{min-height:62px;border-radius:16px;font-size:20px;font-weight:900;padding:0 24px}
.story-back{border:2px solid #cfdccc;background:#fff;color:#3d5a4b}
.story-back:hover:not(:disabled){background:#f0f6ec}
.story-next{border:0;background:var(--forest);color:#fff}
.story-next:hover{background:#0f2a1e}
.story-link{margin-top:14px;border:0;background:transparent;font-size:16px;font-weight:800;color:#206749;text-decoration:underline;text-underline-offset:4px;padding:6px 0}

/* Bigger, easier phone contents (営業プレゼン) */
body.story-mode .desk{grid-template-columns:minmax(360px,460px) minmax(0,1fr)}
body.story-mode .chat{padding:14px 12px 18px;background:#e2ede7}
body.story-mode .chat-date{font-size:13px;padding:4px 14px;color:#24493a;background:#ffffffd9}

/* Card frame */
body.story-mode .chat-card{border-radius:18px;background:#fff;box-shadow:0 1px 2px #163d2314,0 6px 16px -8px #163d2340}
body.story-mode .card-main{padding:18px 18px 16px}
body.story-mode .card-head{gap:9px;margin-bottom:12px;font-size:14px;color:#1f3b30}
body.story-mode .card-head img{width:30px;height:30px}
body.story-mode .card-head .card-kicker{font-size:12px;padding:4px 9px;border-radius:7px;color:#1e4d35;background:#e6f1e3;font-weight:800}

/* Text */
body.story-mode .chat-card h3{font-size:23px;line-height:1.4;margin:0 0 10px;color:#10241b;letter-spacing:0}
body.story-mode .chat-card p,body.story-mode .bubble{font-size:17px;line-height:1.85;color:#1d3128;letter-spacing:.01em}
body.story-mode .bubble{padding:11px 15px}
body.story-mode .msg-meta{font-size:11px;color:#3c5a4c}
body.story-mode .msg-avatar{width:34px;height:34px}
body.story-mode .review-stars{font-size:22px;color:#b27a00}

/* Buttons inside the chat */
body.story-mode .card-actions{gap:8px;padding:0 16px 16px}
body.story-mode .card-button{font-size:17px;min-height:52px;border-radius:12px;font-weight:800}
body.story-mode .weekly-card .card-actions{padding:0 16px 16px}

/* Support list (初回のご案内) */
body.story-mode .support-list{gap:8px;margin:12px 0 14px}
body.story-mode .support-row{grid-template-columns:28px 1fr auto;gap:10px;padding:12px 12px;border-radius:10px;font-size:16px;background:#edf5ea}
body.story-mode .support-row strong{font-size:19px;color:#1c6a45}
body.story-mode .support-row b{font-weight:800;color:#13281f}
body.story-mode .support-row span{font-size:13px;padding:4px 9px;border-radius:7px;background:#fff;color:#1e4d35;box-shadow:inset 0 0 0 1px #cfe2cd}

/* Carousel hint + next card */
body.story-mode .carousel .chat-card{flex-basis:90%}
body.story-mode .carousel-hint{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 2px 14px;font-size:14px;color:#24493a;font-weight:800}
body.story-mode .carousel-hint button{flex:none;margin:0;font-size:16px;font-weight:900;padding:10px 16px;border-radius:12px;background:#fff;color:#17392b;box-shadow:0 1px 0 #c9dbc8,inset 0 0 0 1.5px #b8cfba}

/* Weekly cards */
body.story-mode .weekly-card-head{padding:16px 18px 14px}
body.story-mode .weekly-brand{font-size:14px}
body.story-mode .weekly-brand span{font-size:12px}
body.story-mode .weekly-kicker{font-size:13px}
body.story-mode .weekly-card-head h3{font-size:23px}
body.story-mode .weekly-card-head p{font-size:14px}
body.story-mode .weekly-card-body{padding:14px 18px 10px}
body.story-mode .publication-content h4,body.story-mode .weekly-sources h4{font-size:17px}
body.story-mode .publication-content .publication-label{font-size:13px}
body.story-mode .publication-content .destination-copy{font-size:17px;line-height:1.85}
body.story-mode .weekly-sources p{font-size:15px}
body.story-mode .weekly-source-link{font-size:15px}
body.story-mode .small-button{font-size:14px;min-height:40px}

/* Metrics (毎月の報告) */
body.story-mode .chat .metric-grid{gap:8px;margin:12px 0}
body.story-mode .chat .metric{padding:11px 10px;font-size:13px;color:#24493a;border-radius:11px}
body.story-mode .chat .metric strong{font-size:27px}
body.story-mode .chat .metric-delta{font-size:11px;padding:2px 7px}

/* Phone header */
body.story-mode .phone-top{height:58px}
body.story-mode .phone-top b{font-size:19px}
body.story-mode .phone-top div span{font-size:13px;color:#3c5a4c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Bottom of phone */
body.story-mode .composer input{height:42px;font-size:16px}
body.story-mode .input-status{font-size:13px;padding:7px 14px}

/* The button to press next */
.coach-target{position:relative;z-index:1;outline:3px solid var(--coach)!important;outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .coach-target{animation:coach 1.3s ease-in-out infinite}
  .story-next.pulse{animation:next-pulse 1.6s ease-in-out infinite}
}
@keyframes coach{0%,100%{outline-offset:3px;outline-color:var(--coach)}50%{outline-offset:7px;outline-color:#f08c0066}}
@keyframes next-pulse{0%,100%{box-shadow:0 0 0 0 #2c945f80}50%{box-shadow:0 0 0 10px #2c945f00}}

/* Tablet */
@media(max-width:1100px){
  .story-step{font-size:14px;padding:8px;gap:7px}
  .story-num{width:28px;height:28px;font-size:15px}
}
@media(max-width:850px){
  body.story-mode .desk{grid-template-columns:1fr}
  body.story-mode .story-panel{position:static;order:-1}
  body.story-mode .line-area{max-width:430px;width:100%;margin:0 auto}
  body.story-mode .story-steps{display:flex;overflow-x:auto;gap:6px;margin:14px 0 12px;padding-bottom:4px;scroll-margin-top:70px}
  body.story-mode .story-steps li{flex:none}
  .story-step{min-height:48px}
  .story-task:not(.done) p::after{content:"↓ 下のスマホ画面で操作します";display:block;margin-top:6px;font-size:.85em;color:#8a5a00}
}
/* Phone */
@media(max-width:575px){
  .mode-switch button{padding:5px 8px;font-size:11px}
  .story-step b{display:none}
  .story-step.current b{display:inline}
  .story-inner{padding:20px 18px;border-radius:18px}
  .story-inner h2{font-size:25px}
  .story-body{font-size:17px}
  .story-task{padding:14px;margin-top:16px}
  .story-task svg{width:28px;height:28px}
  .story-task p{font-size:16px}
  .story-back,.story-next{min-height:56px;font-size:18px;padding:0 16px}
  body.story-mode .store-select{display:none}
}

/* ===== 営業メモ（営業担当だけが見る） ===== */
.talk{margin-top:16px;border-radius:20px;background:#1d3a2e;color:#e8f1e9;padding:18px 20px 16px;box-shadow:0 14px 30px -20px #0f2a1c}
.talk-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.talk-title{display:flex;align-items:center;gap:8px;min-width:0}
.talk-title svg{width:20px;height:20px;color:var(--lime)}
.talk-title b{font-size:16px;color:#fff}
.talk-title small{font-size:11px;color:#a9c3b2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.talk-toggle{flex:none;border:1px solid #4d6b5c;background:transparent;color:#d8e8dc;border-radius:9px;padding:6px 10px;font-size:12px;font-weight:800}
.talk-toggle:hover{background:#2a4b3c}
.talk.collapsed{padding:12px 16px;background:#e6eee2;color:var(--ink);box-shadow:none}
.talk.collapsed .talk-title b{color:var(--forest)}
.talk.collapsed .talk-title svg{color:#2c945f}
.talk.collapsed .talk-title small{color:var(--muted)}
.talk.collapsed .talk-toggle{border-color:#bccdbb;color:var(--forest)}
.talk-row{display:grid;grid-template-columns:84px 1fr;gap:10px;align-items:start;margin-top:12px}
.talk-row p{font-size:15px;line-height:1.7;color:#f2f7f2}
.talk-label{display:inline-block;justify-self:start;padding:3px 9px;border-radius:99px;font-size:12px;font-weight:900;background:#2e5241;color:#cfe5d4;white-space:nowrap}
.talk-row.say .talk-label{background:var(--lime);color:#17392b}
.talk-row.ask .talk-label{background:#ffd98a;color:#4f3500}
.talk-qa{margin-top:14px;padding-top:12px;border-top:1px solid #355a49}
.talk-qa h4{margin:0 0 6px;font-size:12px;color:#a9c3b2;letter-spacing:.06em}
.talk-qa details{border-radius:10px;background:#244536;margin-top:6px}
.talk-qa summary{cursor:pointer;padding:9px 12px;font-size:14px;font-weight:800;color:#fff;list-style:none}
.talk-qa summary::-webkit-details-marker{display:none}
.talk-qa summary::after{content:"＋";float:right;color:#a9c3b2}
.talk-qa details[open] summary::after{content:"－"}
.talk-qa details p{padding:0 12px 10px;font-size:14px;line-height:1.7;color:#d8e8dc}
@media(max-width:1100px){.story-step b{font-size:13px}}
@media(max-width:575px){.talk{padding:14px}.talk-row{grid-template-columns:1fr;gap:4px}.talk-title small{display:none}}
@media(max-width:850px){
  body.story-mode .story-panel{display:contents}
  body.story-mode .story-inner{order:-1}
  body.story-mode .talk{order:1;margin-top:0}
}

/* ===== MEO ===== */
.meo-factors{margin-top:18px}
.meo-caption{font-size:14px;font-weight:800;color:#3d5a4b;margin-bottom:8px}
.meo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.meo-card{border-radius:14px;padding:12px 14px;background:#f1f3ef;border:1.5px solid #dfe3dc}
.meo-card.ours{background:#eef7ea;border-color:#a9d0aa}
.meo-card-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px}
.meo-card-head b{font-size:19px;color:#13281f}
.meo-card-head span{font-size:11px;font-weight:900;padding:3px 8px;border-radius:99px;background:#dfe3dc;color:#5d6b63;white-space:nowrap}
.meo-card.ours .meo-card-head span{background:#206749;color:#fff}
.meo-what{font-size:14px;line-height:1.6;color:#2f473b}
.meo-how{margin-top:6px;font-size:13px;line-height:1.6;font-weight:800;color:#1b6a43}
.meo-card:not(.ours) .meo-how{color:#7a847e}
.story-meo{margin-top:18px;padding:14px 16px;border-radius:14px;background:#eef4ff;border:1.5px solid #c4d6f5}
.meo-tag{display:inline-flex;align-items:center;gap:8px;margin-bottom:6px}
.meo-tag b{font-size:14px;font-weight:900;color:#1f4f9a}
.meo-tag span{font-size:12px;font-weight:900;padding:3px 9px;border-radius:99px;background:#1f5fbf;color:#fff}
.story-meo p{font-size:clamp(16px,1.3vw,18px);line-height:1.75;color:#1f3350}
mark.kw{background:linear-gradient(transparent 55%,#ffe08a 55%);color:inherit;font-weight:800;padding:0 1px}
@media(max-width:1100px){.meo-grid{grid-template-columns:1fr}}
@media(max-width:575px){.story-meo{padding:12px}.meo-card-head b{font-size:17px}}