/*
 * 高砂食堂 / Concept Modern
 * ?concept=modern のときだけ適用する別デザイン案。
 */

.concept-modern{
  --cm-ink:#352d27;
  --cm-paper:#fbf7ef;
  --cm-white:#fffefa;
  --cm-vermilion:#b84b32;
  --cm-gold:#c79a61;
  --cm-line:rgba(91,65,42,.12);
  background:var(--cm-paper);
  color:var(--cm-ink);
}
.concept-modern .label{color:var(--cm-vermilion);letter-spacing:.22em}
.concept-modern .label{font-size:10px;font-weight:600}

/* ファーストビュー：写真とコピーを大胆に見せるエディトリアル構成 */
.concept-modern .hero{height:min(880px,92vh);min-height:680px;background:#d8cab6}
.concept-modern .hero__img{object-position:center 48%;filter:brightness(1.1) saturate(.94)}
.concept-modern .hero__veil{background:linear-gradient(90deg,rgba(35,27,21,.38) 0%,rgba(35,27,21,.12) 45%,rgba(35,27,21,0) 75%),linear-gradient(0deg,rgba(35,27,21,.22),transparent 50%)}
.concept-modern .header{position:absolute;top:22px;left:3.2vw;right:3.2vw;width:auto;padding:11px 13px 11px 24px;border:1px solid rgba(255,255,255,.68);border-radius:999px;background:rgba(255,254,250,.94);box-shadow:0 14px 40px rgba(53,36,20,.13);backdrop-filter:blur(16px)}
.concept-modern .header__logo{color:var(--cm-ink);font-size:20px;letter-spacing:.17em;text-shadow:none}
.concept-modern .nav{gap:4px}
.concept-modern .nav a{padding:10px 11px;color:var(--cm-ink);font-size:12px;text-shadow:none;border-radius:999px}
.concept-modern .nav a:hover{background:rgba(169,71,49,.09);color:var(--cm-vermilion)}
.concept-modern .nav__tel{padding:10px 17px!important;border:0!important;background:var(--cm-vermilion)!important;color:#fff!important}
.concept-modern .lang-toggle{width:48px;height:40px;border-color:rgba(33,30,26,.28);border-radius:999px;color:var(--cm-ink);background:#fff}
.concept-modern .burger{border-color:rgba(33,30,26,.26);color:var(--cm-ink)}
.concept-modern .burger span{background:var(--cm-ink)}
.concept-modern .catch{left:6vw;right:auto;top:clamp(175px,23vh,210px);bottom:auto;display:flex;align-items:flex-start;gap:18px;width:auto;height:470px;padding:0;color:#fff}
.concept-modern .catch::before{display:none}
.concept-modern .catch__main{order:1;writing-mode:vertical-rl;max-height:none;margin:0;white-space:nowrap;font-size:clamp(34px,4vh,40px);line-height:1.35;letter-spacing:.08em;text-shadow:0 3px 20px rgba(0,0,0,.28)}
.concept-modern .catch__sub{order:2;writing-mode:vertical-rl;max-height:445px;margin:0;padding:0 0 0 10px;border-left:1px solid rgba(225,183,120,.85);font-size:13px;line-height:2;letter-spacing:.08em}
.concept-modern .hero__stamp{right:4vw;bottom:38px;border:0;background:rgba(255,253,249,.9);color:var(--cm-ink);box-shadow:0 12px 30px rgba(0,0,0,.2)}
.concept-modern .hero__stamp i{width:30px;height:30px;margin:-2px 0;border:1.5px solid var(--cm-vermilion);border-radius:2px;background:var(--cm-vermilion);color:#fff;font-size:14px;font-weight:600;transform:rotate(-3deg)}

/* 店舗情報：ファーストビューに重なるカード */
.concept-modern .info{position:relative;z-index:4;width:min(1180px,calc(100% - 64px));margin:-46px auto 0;border:1px solid rgba(91,65,42,.1);border-radius:22px;background:var(--cm-white);box-shadow:0 20px 50px rgba(67,43,20,.12);overflow:hidden}
.concept-modern .info__cell{padding:29px 32px;border-color:var(--cm-line)}
.concept-modern .info__tel{color:var(--cm-ink)}
.concept-modern .info__route{color:var(--cm-vermilion)}
.concept-modern .news{width:min(1120px,calc(100% - 80px));margin:28px auto;padding:13px 20px;border:1px solid var(--cm-line);border-radius:999px;background:rgba(255,254,250,.82)}
.concept-modern .news .label{border-radius:999px;background:var(--cm-vermilion)}

/* お得情報・紹介 */
.concept-modern .value-offer{width:min(1180px,calc(100% - 64px));margin:26px auto 0;padding:19px 26px;border:1px solid #e7d9c7;border-left:4px solid var(--cm-vermilion);border-radius:16px;background:#fffdf8;box-shadow:0 8px 26px rgba(85,56,31,.045)}
.concept-modern .value-offer__content{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:4px 22px;max-width:none;margin:0;text-align:left}
.concept-modern .value-offer__label{grid-row:1/3;display:inline-flex;padding:7px 12px;border-radius:999px;background:#a94731;color:#fff}
.concept-modern .value-offer h2{grid-column:2;margin:0;font-family:var(--sans);font-size:23px;font-weight:600;letter-spacing:.02em;color:var(--cm-ink)}
.concept-modern .value-offer h2 strong{color:var(--cm-vermilion)}
.concept-modern .value-offer p{grid-column:2;margin:2px 0 0;font-size:12px;color:#6b5b4c}
.concept-modern .value-offer small{display:none}
.concept-modern .value-offer a{grid-column:3;grid-row:1/3;margin:0;color:var(--cm-vermilion);white-space:nowrap}
.concept-modern .about{position:relative;margin:0;padding:94px var(--pad) 98px;background:#fffdf8}
.concept-modern .about::before{content:"いつもの味";position:absolute;right:5vw;top:34px;font-family:var(--serif);font-size:clamp(64px,10vw,150px);letter-spacing:.08em;color:rgba(169,71,49,.045);white-space:nowrap}
.concept-modern .about__lead{font-size:clamp(27px,3.3vw,42px);line-height:1.65;letter-spacing:.1em}
.concept-modern .about p{max-width:760px;font-size:16px;line-height:2.25}

/* ヒストリーと手仕事を雑誌の見開きのように */
.concept-modern .history{gap:7vw;padding:100px max(var(--pad),7vw);background:#fbf7ef}
.concept-modern .history__photo{padding:0;border:1px solid rgba(91,65,42,.13);background:#fff;box-shadow:18px 18px 0 #c58958;transform:none}
.concept-modern .history__body h2{font-size:clamp(32px,4vw,52px);color:var(--cm-ink)}
.concept-modern .history__body p{line-height:2.15;color:#5c4f40}
.concept-modern .history__body a{color:var(--cm-vermilion)}
.concept-modern .history::before{color:rgba(64,48,32,.06)}
.concept-modern .craft-feature{margin:0;background:#f0e4d3}
.concept-modern .craft-feature__visual{min-height:560px}
.concept-modern .craft-feature__visual::after{inset:24px;border-color:rgba(255,255,255,.65)}
.concept-modern .craft-feature__body{padding:80px clamp(42px,7vw,110px)}
.concept-modern .craft-feature__body h2{font-size:clamp(30px,3.4vw,46px);line-height:1.5;letter-spacing:.07em;word-break:keep-all}
.concept-modern .craft-feature__body h2 .nowrap{white-space:nowrap}
.concept-modern .craft-feature__body p{line-height:2.1;color:#55483d}

/* 御品書：明るさを保ちながら端正に */
.concept-modern .menu-showcase{padding-top:110px;padding-bottom:120px;background-color:#fbf7ef;background-image:radial-gradient(rgba(129,86,47,.075) .6px,transparent .6px);background-size:10px 10px}
.concept-modern .section-heading{margin-bottom:34px}
.concept-modern .section-heading h2{font-family:var(--serif);font-size:clamp(30px,4vw,46px);font-weight:500;letter-spacing:.1em}
.concept-modern .menu-board{border:1px solid rgba(91,65,42,.1);border-radius:24px;box-shadow:0 26px 64px rgba(78,50,25,.12)}
.concept-modern .menu-board::after{width:7px;background:var(--cm-vermilion)}
.concept-modern .menu-board__title{display:none}
.concept-modern .menu-board__body{padding:52px 54px 32px}
.concept-modern .menu-board__photos{border-radius:14px;overflow:hidden}
.concept-modern .menu-board__instagram{border-radius:999px;padding-inline:22px}

/* 3つの利用シーン */
.concept-modern .gates{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:22px;padding:72px max(var(--pad),4vw) 90px;background:#fdf9f2}
.concept-modern .gate{overflow:hidden;border:1px solid var(--cm-line);border-radius:20px;background:#fff;box-shadow:0 14px 34px rgba(74,50,26,.07);transition:transform .25s,box-shadow .25s}
.concept-modern .gate:hover{transform:translateY(-5px);box-shadow:0 22px 48px rgba(74,50,26,.14)}
.concept-modern .gate__img,.concept-modern .takeout-slider{height:270px}
.concept-modern .gate__body{padding:27px 28px 30px}
.concept-modern .gate h2{font-size:22px}

/* フッター */
.concept-modern .site-footer{padding-top:0;background:#eadcc8;color:#4d4035}
.concept-modern .site-footer h2,.concept-modern .site-footer a{color:#3c3129}
.concept-modern .site-footer .copyright{color:#76685c;border-color:rgba(75,55,39,.16)}
.concept-modern .site-footer__visual::after{background:linear-gradient(180deg,rgba(40,31,24,0) 34%,rgba(40,31,24,.64))}
.concept-modern .site-footer__visual-copy,.concept-modern .site-footer__visual-copy a{color:#fff}
.concept-modern .site-footer__visual{height:310px;margin:0 calc(var(--pad) * -1) 16px;border-radius:28px 28px 0 0}
.concept-modern .site-footer__mark{border-color:var(--cm-vermilion);color:var(--cm-vermilion)}
.concept-modern .site-footer h2 small{color:#8a7a67}
.concept-modern .site-footer__since{color:var(--cm-vermilion)}
.concept-modern .site-footer__links a{color:#3c3129}

@media (max-width:1100px) and (min-width:821px){
  .concept-modern .header{left:20px;right:20px;padding-left:18px}
  .concept-modern .nav a{padding-inline:7px;font-size:11px}
  .concept-modern .catch{left:5vw}
}

@media (max-width:820px){
  .concept-modern .hero{height:510px;min-height:0}
  .concept-modern .hero__img{object-position:center 44%}
  .concept-modern .hero__img{filter:brightness(1.12) saturate(.94)}
  .concept-modern .hero__veil{background:linear-gradient(180deg,rgba(35,27,21,.08) 24%,rgba(35,27,21,.52) 84%)}
  .concept-modern .header{top:12px;left:auto;right:14px;width:auto;padding:5px;border-radius:999px}
  .concept-modern .header__logo{display:none}
  .concept-modern .header__actions{gap:5px}
  .concept-modern .nav{left:auto;right:0;top:58px;width:min(300px,calc(100vw - 28px));border-radius:16px;background:rgba(255,253,249,.98)}
  .concept-modern .nav a{color:var(--cm-ink)}
  .concept-modern .nav__tel{color:#fff!important}
  .concept-modern .catch{left:22px;right:22px;top:auto;bottom:22px;display:block;width:auto;height:auto;padding:0;background:transparent;border:0;backdrop-filter:none}
  .concept-modern .catch::before{display:block;margin-bottom:9px;font-size:8px}
  .concept-modern .catch__main{writing-mode:horizontal-tb;max-height:none;font-size:27px;line-height:1.42}
  .concept-modern .catch__sub{writing-mode:horizontal-tb;max-height:none;margin-top:9px;padding-left:18px;font-size:11px;line-height:1.6}
  .concept-modern .hero__stamp{display:none}
  .concept-modern .info{width:100%;margin:0;border-radius:0;box-shadow:none}
  .concept-modern .info__cell{padding:17px 20px}
  .concept-modern .news{width:calc(100% - 32px);margin:14px 16px;border-radius:14px}
  .concept-modern .value-offer{width:calc(100% - 32px);margin:14px 16px 0;padding:14px 16px;border-radius:12px}
  .concept-modern .value-offer__content{grid-template-columns:1fr;grid-template-rows:auto;gap:8px}
  .concept-modern .value-offer__label,.concept-modern .value-offer h2,.concept-modern .value-offer p,.concept-modern .value-offer a{grid-column:1;grid-row:auto}
  .concept-modern .value-offer__label{justify-self:start;padding:6px 10px}
  .concept-modern .value-offer h2{font-size:19px;line-height:1.55}
  .concept-modern .value-offer p{font-size:12px;line-height:1.7}
  .concept-modern .value-offer a{white-space:normal}
  .concept-modern .about{padding:44px 22px 48px}
  .concept-modern .about::before{right:-10px;top:18px;font-size:64px}
  .concept-modern .about__lead{font-size:22px}
  .concept-modern .about p{font-size:14px;line-height:1.85}
  .concept-modern .history{gap:18px;padding:36px 22px 40px}
  .concept-modern .history__photo{height:170px;box-shadow:7px 7px 0 #c58958}
  .concept-modern .history__body h2{font-size:24px}
  .concept-modern .craft-feature__visual{height:170px;min-height:0}
  .concept-modern .craft-feature__visual::after{inset:10px}
  .concept-modern .craft-feature__body{padding:24px 22px 28px}
  .concept-modern .craft-feature__body h2{font-size:21px;line-height:1.55}
  .concept-modern .menu-showcase{padding:48px 18px 54px}
  .concept-modern .section-heading h2{font-size:26px}
  .concept-modern .menu-board{border-radius:16px}
  .concept-modern .menu-board__body{padding:24px 18px 20px}
  .concept-modern .gates{grid-template-columns:1fr;gap:12px;padding:34px 16px 44px}
  .concept-modern .gate{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:12px;border-radius:16px}
  .concept-modern .gate__img,.concept-modern .takeout-slider{width:96px;height:76px;border-radius:11px}
  .concept-modern .gate__body{padding:0}
  .concept-modern .site-footer__visual{height:185px;border-radius:20px 20px 0 0}
  .concept-modern .sticky{background:#fffdf9;box-shadow:0 -8px 28px rgba(77,53,31,.12);border-top:1px solid rgba(91,65,42,.14)}
  .concept-modern .sticky a{color:var(--cm-ink);border-right-color:rgba(91,65,42,.13)}
  .concept-modern .sticky__menu{background:#f0dfcb}
  .concept-modern .sticky a:last-child{background:var(--cm-vermilion);color:#fff}
}

@media (prefers-reduced-motion:reduce){
  .concept-modern .gate{transition:none}
}