/* ==========================================================================
   COMESTA 72 — Prima Pasta 業務用ページ
   ========================================================================== */

:root{
  --ink:        #211B14;
  --ink-soft:   #3B3226;
  --paper:      #F7F2E8;
  --paper-deep: #EFE6D3;
  --bronze:     #B8873C;
  --bronze-dark:#8E6529;
  --brick:      #A8412C;
  --line:       rgba(33,27,20,.14);
  --line-on-dark: rgba(247,242,232,.22);

  --serif-jp:  "Shippori Mincho", "Noto Serif JP", serif;
  --serif-en:  "Cormorant Garamond", "EB Garamond", serif;
  --sans-jp:   "Noto Sans JP", "Hiragino Sans", sans-serif;

  --max: 1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body.comesta-page{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans-jp);
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}

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

.comesta-page .wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 28px;
}

.comesta-page a{ text-decoration:none; }
.c-footer a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.c-footer a:hover{ color:var(--paper); }

/* -------------------------------------------------- eyebrow / labels */
.comesta-page .eyebrow{
  font-family:var(--serif-en);
  font-size:14px;
  letter-spacing:.14em;
  color:var(--bronze-dark);
  font-style:italic;
  margin:0 0 10px;
}

.comesta-page .rule{
  width:44px;
  height:2px;
  background:var(--bronze);
  margin:0 0 22px;
}

/* -------------------------------------------------- top nav */
.c-nav{
  position:sticky; top:0; z-index:40;
  background:rgba(247,242,232,.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.c-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.c-nav__brand{ display:flex; align-items:center; gap:14px; }
.c-nav__brand img{ height:30px; width:auto; }
.c-nav__brand span{
  font-family:var(--serif-jp);
  font-size:15px;
  letter-spacing:.06em;
  color:var(--ink-soft);
  border-left:1px solid var(--line);
  padding-left:14px;
}
.c-nav__cta{
  font-family:var(--serif-en);
  font-size:15px;
  letter-spacing:.02em;
  color:var(--paper);
  background:var(--ink);
  padding:11px 26px;
  border-radius:2px;
  text-decoration:none;
  transition:background .2s ease;
  white-space:nowrap;
}
.c-nav__cta:hover{ background:var(--bronze-dark); }

/* -------------------------------------------------- hero */
.c-hero{
  position:relative;
  min-height:640px;
  background:#151109;
  overflow:hidden;
  /* display: flex と align-items: flex-end を削除 */
}
.c-hero__bg{
  position:absolute; inset:0;
  background-image:url("../images/hero-bg.jpg");
  background-size:cover;
  background-position:center 30%;
  filter:saturate(.9) brightness(.62);
  transform:scale(1.02);
}
.c-hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(21,17,9,.35) 0%, rgba(21,17,9,.55) 55%, rgba(21,17,9,.92) 100%);
}
.c-hero__inner{
  position:relative;
  width:100%;
  padding:90px 0 68px; /* 上部の余白を調整 */
  color:var(--paper);
}
.c-hero__top{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:56px;
}
.c-hero__badge{
  font-family:var(--serif-en);
  font-size:12.5px;
  letter-spacing:.16em;
  color:var(--paper);
  border:1px solid var(--line-on-dark);
  padding:7px 16px;
  border-radius:999px;
}
.c-hero__number{ display:flex; align-items:baseline; gap:12px; }
.c-hero__number .num{
  font-family:var(--serif-en);
  font-weight:600;
  font-size:56px;
  color:var(--bronze);
  line-height:1;
}
.c-hero__number .label{
  font-family:var(--serif-jp);
  font-size:14px;
  color:var(--paper);
  line-height:1.6;
  border-left:1px solid var(--line-on-dark);
  padding-left:12px;
}
.c-hero__grid{
  display:grid;
  grid-template-columns: 1fr minmax(260px, 380px); /* 左側のテキスト領域と右側の画像領域を固定割合で分割 */
  gap: 40px;
  align-items:center;
}
.c-hero__content{
  min-width: 0;
}
.c-hero__eyebrow{
  font-family:var(--serif-en);
  font-style:italic;
  letter-spacing:.1em;
  color:#D9C79B;
  font-size:15px;
  margin:0 0 18px;
}
.c-hero h1{
  font-family:var(--serif-jp);
  font-weight:600;
  font-size:clamp(30px, 4.5vw, 60px);
  line-height:1.35;
  margin:0 0 26px;
  max-width:15ch;
}
.c-hero h1 em{
  font-style:normal;
  color:var(--bronze);
}
.c-hero__lede{
  font-size:16.5px;
  line-height:1.95;
  color:#EDE4D2;
  max-width:46ch;
  margin:0 0 40px;
}
.c-hero__actions{ display:flex; gap:16px; flex-wrap:wrap; }
.btn{
  display:inline-block;
  font-family:var(--serif-en);
  font-size:16px;
  letter-spacing:.02em;
  text-decoration:none;
  padding:15px 34px;
  border-radius:2px;
  transition:all .2s ease;
}
.btn--primary{ background:var(--bronze); color:#211B14; }
.btn--primary:hover{ background:#CC9A4B; }
.btn--ghost{ border:1px solid var(--line-on-dark); color:var(--paper); }
.btn--ghost:hover{ border-color:var(--paper); }

/* -------------------------------------------------- hero visual (eye-catch) */
.c-hero__visual{
  position:relative;
  width:100%;
  justify-self:center;
}
.c-hero__frame{
  width:100%;
  max-width:380px;
  aspect-ratio:4/5;
  padding:10px;
  background:rgba(247,242,232,.92);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55);
  transform:rotate(1.5deg);
}
.c-hero__frame img{
  width:100%; height:100%;
  object-fit:cover;
}
.c-hero__visual-tag{
  position:absolute;
  bottom:-16px; left:24px;
  background:var(--bronze);
  color:var(--ink);
  font-family:var(--serif-en);
  font-style:italic;
  font-size:12.5px;
  letter-spacing:.03em;
  padding:7px 16px;
  transform:rotate(1.5deg);
  box-shadow:0 8px 20px -6px rgba(0,0,0,.5);
  white-space:nowrap;
}

/* -------------------------------------------------- lede section */
.c-lede{
  padding:96px 0 88px;
  border-bottom:1px solid var(--line);
}
.c-lede .wrap{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:64px;
  align-items:start;
}
.c-lede h2{
  font-family:var(--serif-jp);
  font-weight:600;
  font-size:30px;
  line-height:1.7;
  margin:0;
  color:var(--ink);
}
.c-lede h2 span{ color:var(--bronze-dark); }
.c-lede p{
  margin:0 0 18px;
  color:var(--ink-soft);
  font-size:15.5px;
}
.c-lede p:last-child{ margin-bottom:0; }

/* -------------------------------------------------- features */
.c-features{ padding:96px 0; }
.c-features__head{
  max-width:640px;
  margin:0 0 56px;
}
.c-features__head h2{
  font-family:var(--serif-jp);
  font-weight:600;
  font-size:32px;
  margin:0;
}
.c-features__body{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.c-features__photo{
  position:relative;
  border-radius:2px;
  overflow:hidden;
}
.c-features__photo img{
  width:100%; height:560px; object-fit:cover;
}
.c-features__photo figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:18px 22px;
  background:linear-gradient(0deg, rgba(21,17,9,.72), transparent);
  color:var(--paper);
  font-family:var(--serif-en);
  font-size:13px;
  letter-spacing:.06em;
  font-style:italic;
}
.c-feature-list{
  display:flex;
  flex-direction:column;
}
.c-feature{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:20px;
  padding:26px 0;
  border-top:1px solid var(--line);
}
.c-feature:last-child{ border-bottom:1px solid var(--line); }
.c-feature__icon{
  width:48px; height:48px;
  border:1px solid var(--line);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper-deep);
}
.c-feature__icon img{ width:22px; height:22px; }
.c-feature h3{
  font-family:var(--serif-jp);
  font-size:17px;
  font-weight:600;
  margin:2px 0 8px;
  color:var(--ink);
}
.c-feature p{
  margin:0;
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:1.85;
}
.c-feature__tag{
  display:inline-block;
  margin-top:10px;
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--brick);
  border:1px solid rgba(168,65,44,.35);
  padding:3px 10px;
  border-radius:999px;
}

/* -------------------------------------------------- scenes */
.c-scenes{
  padding:96px 0;
  background:var(--paper-deep);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.c-scenes__head{ max-width:640px; margin:0 0 48px; }
.c-scenes__head h2{
  font-family:var(--serif-jp);
  font-size:32px; font-weight:600; margin:0;
}
.c-scene-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.c-scene{
  background:var(--paper-deep);
  display:flex;
  flex-direction:column;
}
.c-scene__img{ height:200px; overflow:hidden; }
.c-scene__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.c-scene:hover .c-scene__img img{ transform:scale(1.05); }
.c-scene__body{ padding:22px 20px 26px; }
.c-scene__num{
  font-family:var(--serif-en);
  font-size:12px;
  color:var(--bronze-dark);
  letter-spacing:.08em;
}
.c-scene h3{
  font-family:var(--serif-jp);
  font-size:16px;
  margin:8px 0 10px;
}
.c-scene p{
  margin:0;
  font-size:13.5px;
  color:var(--ink-soft);
  line-height:1.8;
}

/* -------------------------------------------------- lineup */
.c-lineup{ padding:96px 0; }
.c-lineup__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  margin:0 0 48px;
}
.c-lineup__head h2{
  font-family:var(--serif-jp);
  font-size:32px; font-weight:600; margin:0;
}
.c-lineup__head p{
  margin:0; max-width:38ch;
  color:var(--ink-soft); font-size:14.5px;
}
.c-lineup-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
}
.c-lineup-card{
  border:1px solid var(--line);
}
.c-lineup-card__img{ height:230px; overflow:hidden; }
.c-lineup-card__img img{ width:100%; height:100%; object-fit:cover; }
.c-lineup-card__body{ padding:26px 24px 30px; }
.c-lineup-card__time{
  display:inline-flex; align-items:baseline; gap:6px;
  font-family:var(--serif-en);
  color:var(--bronze-dark);
  font-size:13px;
  letter-spacing:.04em;
  margin-bottom:14px;
}
.c-lineup-card__time strong{ font-size:20px; }
.c-lineup-card h3{
  font-family:var(--serif-jp);
  font-size:20px;
  margin:0 0 10px;
}
.c-lineup-card p{
  margin:0;
  font-size:14px;
  color:var(--ink-soft);
  line-height:1.85;
}

/* -------------------------------------------------- evidence */
.c-evidence{
  padding:96px 0;
  background:var(--ink);
  color:var(--paper);
}
.c-evidence .wrap{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:64px;
  align-items:center;
}
.c-evidence .eyebrow{ color:#D9C79B; }
.c-evidence h2{
  font-family:var(--serif-jp);
  font-size:30px; font-weight:600;
  line-height:1.6;
  margin:0 0 22px;
}
.c-evidence p{
  color:#D8CFBE;
  font-size:15px;
  margin:0 0 16px;
}
.c-evidence__figure{
  background:var(--paper);
  padding:22px;
  border-radius:2px;
}
.c-evidence__figure img{ width:100%; }
.c-evidence__note{
  margin-top:22px;
  padding-top:22px;
  border-top:1px solid var(--line-on-dark);
  font-size:13.5px;
  color:#B9AF9C;
}

/* -------------------------------------------------- CTA / contact */
.c-cta{
  padding:96px 0;
  text-align:center;
}
.c-cta .eyebrow{ justify-content:center; text-align:center; }
.c-cta h2{
  font-family:var(--serif-jp);
  font-size:clamp(26px,3.4vw,36px);
  font-weight:600;
  max-width:20ch;
  margin:0 auto 20px;
}
.c-cta p{
  max-width:44ch;
  margin:0 auto 36px;
  color:var(--ink-soft);
  font-size:15px;
}
.c-cta .btn--primary{ background:var(--brick); color:var(--paper); }
.c-cta .btn--primary:hover{ background:#8C3221; }

/* -------------------------------------------------- footer */
.c-footer{
  background:var(--ink);
  color:#B9AF9C;
  padding:56px 0 40px;
}
.c-footer .wrap{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:40px;
}
.c-footer h4{
  font-family:var(--serif-jp);
  color:var(--paper);
  font-size:16px;
  margin:0 0 14px;
  font-weight:600;
}
.c-footer p, .c-footer address{
  font-size:13.5px;
  line-height:1.9;
  margin:0;
  font-style:normal;
}
.c-footer__bottom{
  max-width:var(--max);
  margin:44px auto 0;
  padding:24px 28px 0;
  border-top:1px solid var(--line-on-dark);
  font-size:12.5px;
  color:#8A8272;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

/* -------------------------------------------------- responsive */
@media (max-width: 768px){
  .c-hero__grid{ grid-template-columns:1fr; gap:36px; }
  .c-hero__visual{ justify-self:center; }
  .c-hero__frame{ max-width:280px; }
  .c-lede .wrap{ grid-template-columns:1fr; gap:28px; }
  .c-features__body{ grid-template-columns:1fr; }
  .c-features__photo img{ height:340px; }
  .c-scene-grid{ grid-template-columns:repeat(2, 1fr); }
  .c-lineup-grid{ grid-template-columns:1fr; }
  .c-evidence .wrap{ grid-template-columns:1fr; }
  .c-footer .wrap{ grid-template-columns:1fr; gap:30px; }
  .c-nav__brand span{ display:none; }
}
@media (max-width: 560px){
  .c-hero__inner{ padding:96px 0 48px; }
  .c-hero__top{ flex-direction:column; align-items:flex-start; gap:18px; margin-bottom:40px; }
  .c-scene-grid{ grid-template-columns:1fr; }
  .c-lede h2{ font-size:24px; }
  .c-features__head h2, .c-scenes__head h2, .c-lineup__head h2{ font-size:26px; }
}
.header-nav-banners {
  background-color: #6b0b0e; /* 全体の背景色（必要に応じて調整） */
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}

.nav-banners-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5つのリンクを均等に配置 */
  gap: 1px; /* 各バナーの間の細い隙間（境界線代わり） */
  background-color: #a30006; /* 隙間の色 */
}

.nav-banner-item {
  background-color: #6b0b0e; /* 各バナーの背景色（赤い帯） */
  color: #ffffff;
  text-decoration: none;
  padding: 14px 10px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.nav-banner-item:hover {
  background-color: #b52c15; /* ホバー時に少し暗くする */
}

.banner-title {
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* スマホ表示時の折り返しや縦並び調整（必要に応じて） */
@media (max-width: 768px) {
  .nav-banners-container {
    grid-template-columns: repeat(2, 1fr);
  }
}