@charset "UTF-8";
/* ===================================================================
   回転寿司 晴れ寿し ブランドページ
   カンプ：お手本デザイン_カンプ/カンプPC晴れ寿し2.jpg
   方針：海都ページ（style.css + kaito.css）をそのまま土台にして、
         ・ヒーロー（写真とキャッチコピー）
         ・メインカラー（臙脂 → 瀬戸内の青）
         ・ヘッダーのロゴ（晴れ寿し1つだけ）
         この3点だけを差し替える。レイアウトは海都と同じ。
   =================================================================== */

/* ============ メインカラー：臙脂 → 瀬戸内の青 ============ */
body.hare{
  --enji:      #0E4C8A;   /* 瀬戸内の青（海都の臙脂にあたる主役色） */
  --enji-dark: #093A6C;
}

/* WEB予約の丸バッジ（style.cssで色が直書きされているので上書き） */
body.hare .reserve-badge{
  background:radial-gradient(circle at 40% 35%,#1A6BB8,var(--enji-dark));
  box-shadow:0 10px 26px rgba(9,45,90,.42);
}

/* 「店舗を探す」の帯は画像なので、青に描き替えたものを使う（HTML側で差し替え済み） */

/* ============ ヘッダー：晴れ寿しのロゴ1つだけ ============ */
body.hare .hare-brandlock{display:flex;align-items:center;}
body.hare .hare-logo-img{
  display:block;height:88px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.28));
  transition:transform .25s var(--ease);
}
body.hare .hare-logo-img img{display:block;height:100%;width:auto;}
body.hare .hare-logo-img:hover{transform:translateY(-1px);}

/* ============ ヘッダー：縦書きナビの文字に青いにじみ ============ */
/* 面でぼかさず、一文字ずつのまわりに青がにじむようにして読みやすくする */
body.hare .kaito-nav a{
  text-shadow:
    0 0 3px  rgba(6,34,72,.95),
    0 0 7px  rgba(6,34,72,.80),
    0 0 14px rgba(6,34,72,.55),
    0 1px 2px rgba(6,34,72,.90);
}

/* ============ ヒーロー ============ */
/* 写真は16:9、ヒーロー枠は約3:1。上下のどこを見せるかをここで調整する
   （数字を小さくすると上＝空と橋寄り、大きくすると下＝寿司寄りになります） */
body.hare .kaito-hero__img{object-position:center 40%;}

/* ---- キャッチコピー ---- */
body.hare .hare-hero__catchwrap{
  position:absolute;inset:0;z-index:3;
  max-width:var(--maxw);margin:0 auto;padding:0 40px;
  display:flex;align-items:center;
  pointer-events:none;
}
body.hare .hare-hero__catch{
  margin:0;
  font-family:var(--serif);font-weight:600;color:#fff;
  font-size:clamp(28px,3.1vw,54px);line-height:1.55;letter-spacing:.06em;
  text-shadow:0 2px 20px rgba(0,0,0,.5),0 0 60px rgba(0,0,0,.3);
}

/* ============ FAIR / NEWS などの英字ラベル：赤 → 青（他と同じ色） ============ */
body.hare .kaito-seclabel__en{color:var(--enji);}

/* ============ こだわり：見出しを紺に（カンプどおり） ============ */
body.hare .kodawari__title,
body.hare .kodawari__lead{color:#12305C;}
/* カンプは2行とも同じ大きさの縦書き見出し */
body.hare .hare-kodawari__title{font-size:32px;letter-spacing:6px;line-height:1.5;white-space:normal;}
body.hare .hare-kodawari__note{
  font-size:14px;line-height:2;letter-spacing:.5px;font-weight:400;
  color:#3A434E;white-space:normal;
}
/* 本文側の小見出し */
body.hare .hare-kodawari__sub{
  font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:.08em;
  color:#12305C;margin:0 0 10px;
}

/* ============ スマホ ============ */
@media (max-width:768px){
  body.hare .hare-logo-img{height:56px;}
  /* スマホはメニューが白いドロワーになるので、青いぼかしは消す */
  body.hare .kaito-nav::before{display:none;}
  body.hare .kaito-nav a{text-shadow:none;}
  /* ヒーローが低いので、コピーは左下へ。左矢印と重ならないよう左を空ける */
  body.hare .hare-hero__catchwrap{padding:0 22px 26px 48px;align-items:flex-end;}
  body.hare .hare-hero__catch{font-size:6.2vw;line-height:1.45;}
  body.hare .hare-kodawari__title{writing-mode:horizontal-tb;font-size:6.4vw;letter-spacing:0;line-height:1.5;}
  body.hare .hare-kodawari__note{writing-mode:horizontal-tb;font-size:3.8vw;line-height:1.8;}
  body.hare .hare-kodawari__sub{font-size:4.6vw;}
}