/* ver2 で追加した「おみやげ」章のみ。ver1 のファイルは変更しない。
   色・書体は styles.css の :root をそのまま使う（--night/--paper/--red/--amber/--display/--label）。 */

.takehome{padding:11vw 4vw;background:var(--brown);color:var(--paper);position:relative;overflow:hidden}
.takehome::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 18%,rgba(215,53,32,.22),transparent 42%);pointer-events:none}
.takehome>*{position:relative;z-index:1}
.takehome .chapter-head{border-color:var(--paper)}
.takehome .chapter-head>p{color:var(--amber)}
.takehome .chapter-head h2{font:400 clamp(46px,7vw,105px)/1.08 var(--display);letter-spacing:-.06em}
.takehome .chapter-head>span{color:rgba(240,229,210,.62);font-size:14px}

.takehome-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--paper)}
.takehome-list li{display:grid;grid-template-columns:70px .75fr 1.25fr;column-gap:30px;row-gap:0;align-items:start;padding:29px 0;border-bottom:1px solid var(--line)}
.takehome-list li>b{color:var(--red);font:13px var(--label)}
.takehome-list h3{font:400 clamp(22px,2.5vw,38px)/1.35 var(--display)}
.takehome-list p{color:rgba(240,229,210,.72)}

/* 「準備中」は、まだ売っていないことを一目で伝えるための印。見出しの真上に置く */
.takehome-list li{grid-template-rows:auto auto}
.takehome-flag{grid-column:2;grid-row:1;justify-self:start;margin-bottom:12px;padding:5px 9px;border:1px solid var(--amber);color:var(--amber);font:600 9px var(--label);font-style:normal;letter-spacing:.14em;white-space:nowrap}
.takehome-list h3{grid-column:2;grid-row:2}
.takehome-list p{grid-column:3;grid-row:2;margin-top:.5em}

/* 下部の固定バー。主CTA2つ（今日の営業・優先入店）の上に、サブでオンラインショップ。
   スクロール位置に関係なく押せるので、物販へ行くのにページの下まで送らなくて済む。 */
.mobile-bar.has-sub{grid-template-columns:1fr 1fr}
.mobile-bar.has-sub .bar-sub{grid-column:1/-1;padding:11px 14px;background:#1b100a;border-bottom:1px solid var(--line);text-align:center}
.mobile-bar.has-sub .bar-sub b{display:inline;font-size:11px;letter-spacing:.04em}
.mobile-bar.has-sub .bar-sub b::after{content:" →";color:var(--amber)}
.mobile-bar.has-sub>a+a{background:#2b170f}
.mobile-bar.has-sub>a:last-child{background:var(--red)}

.takehome-foot{margin-top:52px;display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.takehome-foot p{color:rgba(240,229,210,.62);font-size:13px}
.takehome-foot a{padding:14px 20px;background:var(--red);color:#fff;font:600 11px var(--label);letter-spacing:.1em;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px))}

@media(max-width:820px){
  .takehome{padding:90px 20px}
  .takehome .chapter-head h2{margin:20px 0;font-size:clamp(39px,12vw,52px)}
  .takehome .chapter-head>span{font-size:13px}
  .takehome-list li{grid-template-columns:42px 1fr;grid-template-rows:auto auto auto;gap:8px;padding:24px 0}
  .takehome-flag{grid-column:2;grid-row:1;margin-bottom:4px;padding:4px 7px;font-size:8px;letter-spacing:.1em}
  .takehome-list h3{grid-column:2;grid-row:2;font-size:23px}
  .takehome-list p{grid-column:2;grid-row:3;font-size:14px}
  .takehome-foot{margin-top:38px}
  .takehome-foot a{width:100%;text-align:center}
}


/* 「おみやげ」章から売り場へ送るボタン。グッズは自社ショップ、冷凍は宅麺へ。
   母体の ticket と同じく角を斜めに落として、押せるものだと分かる形にする。 */
.takehome-go{grid-column:2;grid-row:3;justify-self:start;margin-top:14px;padding:11px 18px;background:var(--red);color:#fff;font:600 11px var(--label);letter-spacing:.08em;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
.takehome-go:hover{filter:brightness(1.12)}
.takehome-go.ext{background:transparent;border:1px solid var(--line);color:var(--paper)}
.takehome-go.ext::after{content:" ↗";color:var(--amber)}
.takehome-list li{grid-template-rows:auto auto auto}
@media(max-width:820px){.takehome-go{grid-column:2;grid-row:4;margin-top:12px;font-size:10px;padding:10px 14px}}