/* ===========================================================
   プラタナス公式サイト  共通スタイル
   =========================================================== */

:root{
  --bg:        #f4ecdb;   /* 紙色（ロゴの背景に合わせる） */
  --bg-soft:   #ede2c8;   /* 紙色・少し濃い */
  --ink:       #2a201a;   /* 本文・墨 */
  --ink-soft:  #5a4530;   /* 副情報 */
  --ink-mute:  #8a7a60;   /* キャプション */
  --line:      #2a201a;   /* 罫線 */
  --line-soft: #c8b890;
  --accent:    #3a4a3a;   /* 木曽の山の深緑 */
  --paper-shadow: rgba(42,32,26,.08);

  --f-jp:    "Hannari Mincho","Shippori Mincho B1",serif;
  --f-en:    "Josefin Sans","Cormorant Garamond",serif;
  --f-retro: "Zen Old Mincho","Shippori Mincho B1",serif;

  --page-pad-x: clamp(20px, 5vw, 80px);
  --section-gap: clamp(60px, 10vw, 140px);
}

*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-jp);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .04em;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

img{ max-width:100%; display:block; }

a{
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, color .25s ease, opacity .25s ease;
}
a:hover{ border-bottom-color: var(--ink); }

/* ── 区切り罫 ── */
.rule{
  width: 40px;
  height: 1px;
  background: var(--ink);
  margin: 24px 0;
}
.rule.center{ margin-left:auto; margin-right:auto; }

/* ── ヘッダー ── */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fbf5e7;          /* ロゴの紙色に揃え、本体より一段明るく */
  border-bottom: 1px solid var(--line-soft);
}
.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--page-pad-x);
}
.site-header__logo{
  display: flex;
  align-items: center;
  border-bottom: none;
}
.site-header__logo img{
  height: 88px;
  width: auto;
  display: block;
}
.site-header__logo:hover{ opacity:.7; }

.site-nav ul{
  display: flex;
  gap: clamp(18px, 3vw, 40px);
  list-style: none;
}
.site-nav a{
  font-family: var(--f-en);
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--ink-soft);
  text-transform: none;
  font-weight: 300;
  position: relative;
  padding-bottom: 3px;
  border-bottom: none;
}
.site-nav a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s ease;
}
.site-nav a:hover::after{ transform: scaleX(1); }
.site-nav a .jp{
  display:block;
  font-family: var(--f-jp);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-mute);
  margin-top: 2px;
}

/* ── ナビ：モバイル ── */
.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
  margin:-8px;
}
.nav-toggle span{
  display:block;
  width:24px;
  height:1px;
  background: var(--ink);
  margin:6px 0;
  transition: transform .3s ease, opacity .3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ── メインコンテナ ── */
.page{
  padding: clamp(40px, 8vw, 100px) var(--page-pad-x) 0;
}
.section{
  margin-bottom: var(--section-gap);
}

.container{
  max-width: 1080px;
  margin: 0 auto;
}
.container--narrow{
  max-width: 720px;
  margin: 0 auto;
}

/* ── 見出し ── */
.eyebrow{
  font-family: var(--f-en);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .3em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.heading-retro{
  font-family: var(--f-retro);
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--ink);
  line-height: 1.4;
}
.heading-jp{
  font-family: var(--f-jp);
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.5;
}
.heading-en{
  font-family: var(--f-en);
  font-weight: 300;
  letter-spacing: .12em;
  line-height: 1.2;
}

/* ── トップ：ヒーロー ── */
.hero{
  min-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(60px, 12vw, 160px) var(--page-pad-x);
}
.hero__logo{
  width: clamp(280px, 48vw, 620px);
  height: auto;
  margin-bottom: clamp(36px, 6vw, 64px);
}
.hero__sub-en{
  font-family: var(--f-en);
  font-size: clamp(14px, 1.6vw, 18px);
  letter-spacing: .35em;
  color: var(--ink);
  font-weight: 300;
  margin-bottom: 10px;
}
.hero__sub-jp{
  font-family: var(--f-jp);
  font-size: clamp(13px, 1.4vw, 15px);
  letter-spacing: .25em;
  color: var(--ink-soft);
}

/* ── トップ：メインビジュアル ── */
.hero-visual{
  margin: 0 calc(var(--page-pad-x) * -1);
  position: relative;
}
.hero-visual img,
.hero-visual .placeholder{
  width: 100%;
  height: clamp(280px, 56vw, 640px);
  object-fit: cover;
}

/* ── プレースホルダー ── */
.placeholder{
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
  font-family: var(--f-en);
  font-size: 12px;
  letter-spacing: .25em;
  text-transform: uppercase;
  text-align: center;
  padding: 24px;
  position: relative;
}
.placeholder::before{
  content:"";
  position:absolute;
  inset: 12px;
  border: 1px solid var(--line-soft);
  pointer-events: none;
}
.placeholder__label{
  font-family: var(--f-jp);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--ink-mute);
  text-transform: none;
  margin-top: 6px;
  display:block;
}

/* ── トップ：リード ── */
.lead{
  text-align: center;
  padding: clamp(60px, 10vw, 120px) 0;
}
.lead__copy{
  font-family: var(--f-jp);
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 500;
  line-height: 2.2;
  letter-spacing: .12em;
  color: var(--ink);
}
.lead__small{
  font-family: var(--f-jp);
  font-size: clamp(13px, 1.4vw, 15px);
  color: var(--ink-soft);
  letter-spacing: .15em;
  margin-top: 28px;
}
.lead__link{
  display: inline-block;
  margin-top: 44px;
  font-family: var(--f-en);
  font-size: 13px;
  letter-spacing: .25em;
  color: var(--ink);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
}
.lead__link .arrow{ margin-left: 6px; }

/* ── セクション見出し ── */
.section-head{
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 70px);
}
.section-head__en{
  font-family: var(--f-en);
  font-size: 12px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.section-head__jp{
  font-family: var(--f-retro);
  font-size: clamp(20px, 2.8vw, 28px);
  letter-spacing: .15em;
  color: var(--ink);
}

/* ── トップ：Instagram ── */
.ig-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1.5vw, 16px);
}
.ig-grid__item{
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-soft);
}
.ig-grid__item img,
.ig-grid__item .placeholder{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ig-cta{
  text-align: center;
  margin-top: 40px;
}
.ig-cta a{
  font-family: var(--f-en);
  font-size: 13px;
  letter-spacing: .25em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
}

/* ── フッター ── */
.site-footer{
  background: #fbf5e7;          /* ヘッダと同色：ロゴが沈まないよう本体より明るく */
  border-top: 1px solid var(--line-soft);
  margin-top: clamp(80px, 12vw, 160px);
  padding: clamp(50px, 7vw, 90px) var(--page-pad-x) clamp(28px, 4vw, 40px);
  color: var(--ink);
}
.site-footer__inner{
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.site-footer__logo img{ height: 80px; width: auto; display:block; }
.site-footer__name{
  font-family: var(--f-retro);
  font-size: 18px;
  letter-spacing: .15em;
  margin: 20px 0 10px;
}
.site-footer dl{
  display: grid;
  grid-template-columns: 5em 1fr;
  row-gap: 6px;
  column-gap: 14px;
  font-size: 14px;
  letter-spacing: .08em;
  margin-top: 16px;
}
.site-footer dt{
  color: var(--ink-mute);
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding-top: 5px;
}
.site-footer dd{ color: var(--ink); }

.site-footer__links{
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--f-en);
  font-size: 13px;
  letter-spacing: .15em;
}
.site-footer__map{
  margin-top: 16px;
  border: 1px solid var(--line-soft);
  background: var(--bg);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.site-footer__map iframe{
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(.4) contrast(.95);
}
.site-footer__bottom{
  max-width: 1080px;
  margin: clamp(40px, 6vw, 60px) auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--ink-mute);
  text-transform: uppercase;
}

/* ── 想いページ ── */
.about-title{
  text-align: center;
  padding: clamp(40px, 8vw, 100px) 0 clamp(40px, 6vw, 70px);
}
.about-title__en{
  font-family: var(--f-en);
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 300;
  letter-spacing: .12em;
  line-height: 1.2;
}
.about-title__jp{
  font-family: var(--f-jp);
  font-size: clamp(14px, 1.6vw, 18px);
  letter-spacing: .35em;
  color: var(--ink-soft);
  margin-top: 18px;
}
.about-lead{
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 2.4;
  letter-spacing: .12em;
  margin-bottom: 1.8em;
}
.about-lead:last-child{ margin-bottom: 0; }
.about-image{
  margin: clamp(60px, 8vw, 100px) auto;
  max-width: 560px;
}
.about-image .placeholder{ aspect-ratio: 4 / 3; }

.about-block{ margin-bottom: clamp(50px, 7vw, 80px); }
.about-block__title{
  font-family: var(--f-retro);
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: .15em;
  margin-bottom: 24px;
  text-align: center;
}
.about-block p{
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 2.2;
  letter-spacing: .08em;
  margin-bottom: 1.4em;
}

.next-link{
  text-align: center;
  margin: clamp(60px, 8vw, 100px) 0 0;
}
.next-link a{
  font-family: var(--f-en);
  font-size: 13px;
  letter-spacing: .25em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
}

/* ── お品書きページ ── */
.menu-title{
  text-align: center;
  padding: clamp(40px, 8vw, 100px) 0 clamp(40px, 6vw, 70px);
}
.menu-title__en{
  font-family: var(--f-en);
  font-size: 12px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.menu-title__jp{
  font-family: var(--f-retro);
  font-size: clamp(26px, 4vw, 40px);
  letter-spacing: .2em;
}

/* ハイライト枠：木曽・信州の味 */
.menu-highlight{
  border: 1px solid var(--ink);
  background: var(--bg-soft);
  padding: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 56px);
  margin-bottom: clamp(50px, 7vw, 80px);
  position: relative;
}
.menu-highlight::before{
  content:"";
  position:absolute;
  inset: 6px;
  border: 1px solid var(--ink);
  pointer-events: none;
}
.menu-highlight__head{
  text-align: center;
  margin-bottom: 36px;
}
.menu-highlight__en{
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.menu-highlight__title{
  font-family: var(--f-retro);
  font-size: clamp(20px, 2.6vw, 28px);
  letter-spacing: .2em;
}

.menu-list{
  list-style: none;
  max-width: 560px;
  margin: 0 auto;
}
.menu-list li{
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px dotted var(--line-soft);
  font-size: clamp(14px, 1.6vw, 16px);
  letter-spacing: .08em;
}
.menu-list .name{ flex: 0 0 auto; }
.menu-list .dots{
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--line-soft);
  transform: translateY(-6px);
}
.menu-list .price{
  flex: 0 0 auto;
  font-family: var(--f-en);
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--ink-soft);
}
.menu-list .mark{
  display: inline-block;
  font-family: var(--f-en);
  font-size: 12px;
  color: var(--accent);
  margin-left: 4px;
}

.menu-column{
  margin-top: 36px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.menu-column__title{
  font-family: var(--f-jp);
  font-size: clamp(15px, 1.8vw, 18px);
  letter-spacing: .15em;
  font-weight: 500;
  margin-bottom: 18px;
}
.menu-column p{
  font-size: clamp(14px, 1.5vw, 15px);
  line-height: 2.2;
  letter-spacing: .08em;
  text-align: justify;
  text-justify: inter-character;
}
.menu-legend{
  text-align: center;
  font-size: 12px;
  letter-spacing: .15em;
  color: var(--ink-mute);
  margin-top: 18px;
}

.menu-category{
  margin-bottom: clamp(60px, 7vw, 90px);
}
.menu-category__head{
  text-align: center;
  margin-bottom: 32px;
}
.menu-category__name{
  font-family: var(--f-retro);
  font-size: clamp(20px, 2.6vw, 26px);
  letter-spacing: .25em;
}
.menu-category__photo{
  margin: 36px auto 0;
  max-width: 460px;
}
.menu-category__photo img{
  width: 100%;
  height: auto;
  display: block;
}
.menu-category__photo .placeholder{ aspect-ratio: 3 / 2; }

.menu-note{
  text-align: center;
  font-size: 12px;
  letter-spacing: .15em;
  color: var(--ink-mute);
  margin-top: 60px;
}

/* ── 店についてページ ── */
.visit-title{
  text-align: center;
  padding: clamp(40px, 8vw, 100px) 0 clamp(40px, 6vw, 70px);
}
.visit-title__en{
  font-family: var(--f-en);
  font-size: 12px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.visit-title__jp{
  font-family: var(--f-retro);
  font-size: clamp(26px, 4vw, 40px);
  letter-spacing: .2em;
}

.visit-info{
  max-width: 640px;
  margin: 0 auto clamp(50px, 6vw, 70px);
}
.visit-info dl{
  display: grid;
  grid-template-columns: 8em 1fr;
  row-gap: 22px;
  column-gap: 24px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 28px 8px;
}
.visit-info dt{
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 4px;
}
.visit-info dt .jp{
  display:block;
  font-family: var(--f-jp);
  font-size: 13px;
  letter-spacing: .15em;
  color: var(--ink-soft);
  text-transform: none;
  margin-top: 4px;
}
.visit-info dd{
  font-family: var(--f-jp);
  font-size: clamp(15px, 1.7vw, 17px);
  letter-spacing: .1em;
  line-height: 1.9;
}

.visit-map{
  max-width: 1080px;
  margin: 0 auto clamp(50px, 7vw, 80px);
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.visit-map iframe{
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(.35) contrast(.95);
}

.visit-access{
  max-width: 640px;
  margin: 0 auto clamp(50px, 7vw, 80px);
  text-align: center;
}
.visit-access__title{
  font-family: var(--f-retro);
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: .2em;
  margin-bottom: 20px;
}
.visit-access p{
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 2.2;
  letter-spacing: .08em;
}

.visit-contact{
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.visit-contact__title{
  font-family: var(--f-retro);
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: .2em;
  margin-bottom: 20px;
}
.visit-contact ul{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--f-en);
  font-size: 14px;
  letter-spacing: .15em;
}
.visit-contact ul a{
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
}

/* ── レスポンシブ ── */
@media (max-width: 768px){
  body{ line-height: 1.85; }

  .site-header__inner{
    padding: 10px var(--page-pad-x);
  }
  .site-header__logo img{ height: 68px; }
  .nav-toggle{ display: block; }
  .site-nav{
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 78%;
    max-width: 320px;
    background: var(--bg);
    transform: translateX(100%);
    transition: transform .35s ease;
    padding: 80px 32px 40px;
    box-shadow: -10px 0 30px var(--paper-shadow);
  }
  .site-nav.is-open{ transform: translateX(0); }
  .site-nav ul{
    flex-direction: column;
    gap: 28px;
    align-items: flex-start;
  }
  .site-nav a{ font-size: 14px; }

  .hero{ min-height: calc(100vh - 60px); }
  .ig-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .ig-grid__item:nth-child(n+5){ display: none; }

  .site-footer__inner{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .site-footer dl{
    grid-template-columns: 4.5em 1fr;
  }
  .site-footer__bottom{
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .menu-highlight{ padding: 32px 20px; }
  .menu-list li{ font-size: 14px; }
  .visit-info dl{
    grid-template-columns: 1fr;
    row-gap: 20px;
    padding: 24px 4px;
  }
  .visit-info dt{ padding-top: 0; }
}

@media (max-width: 480px){
  :root{
    --page-pad-x: 18px;
  }
  .hero__logo{ width: 64vw; }
  .ig-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ── アニメーション ── */
@media (prefers-reduced-motion: no-preference){
  .fade-in{
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .9s ease, transform .9s ease;
  }
  .fade-in.is-visible{
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── 印刷 ── */
@media print{
  .site-header, .site-footer, .nav-toggle{ display:none; }
  body{ background:#fff; color:#000; }
}