@charset "utf-8";
/* ------------------------------------------------------------
   menu-text.css — グローバルナビを「画像」から「テキスト」に置き換え
   ・メニュー構造・項目・並び・リンク先は現状のまま（HTMLは変更なし）
   ・色は現行の global-navi.gif から採取
       上線 #126265 / 背景 #fdfcf5→#e1e1d6 / ホバー #dad9d0→#e0e0da / 区切り #fff + #dddcd1
   ・英語表記は index.html 側で <span> に包み、2段表示（日本語／英語）にしている
   ・PC表示（幅801px以上）のみ有効。
------------------------------------------------------------ */

@media screen and (min-width: 801px) {

  #global-navi {
    height: 49px;
    padding-bottom: 11px;
    background: #fff;                 /* スプライト画像を外す */
    border-top: 0;
    display: flex;
    align-items: stretch;
  }
  /* li に高さを持たせ、画像用の「height:0 + padding-top:49px」を無効化 */
  #global-navi li { height: 49px; }
  #global-navi li#private,
  #global-navi li#family,
  #global-navi li#planning,
  #global-navi li#products,
  #global-navi li#project,
  #global-navi li#service,
  #global-navi li#company {
    width: auto;
    flex: 1 1 0;                      /* 6項目を画面幅で等分 */
    max-width: 240px;
    min-width: 118px;
    position: relative;
  }
  #global-navi li#private { border-left: 0; }

  #global-navi li a,
  #global-navi li#private a, #global-navi li#family a, #global-navi li#planning a,
  #global-navi li#products a, #global-navi li#project a, #global-navi li#service a, #global-navi li#company a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 49px;
    padding: 0 6px;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
    background: linear-gradient(#fdfcf5, #e1e1d6);
    border-top: 3px solid #126265;
    border-left: 1px solid #fff;
    border-right: 1px solid #dddcd1;
    color: #312112;
    font-weight: bold;
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-decoration: none;
    background-position: 0 0;
    transition: background-color .15s;
  }

  /* 2段表示：1段目=日本語、2段目=英語（index.html で英語を <span> に包んである） */
  #global-navi > li > a > span {
    display: block;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.02em;
    color: #1b6d70;
  }
  #global-navi > li > a:hover > span { color: #126265; }

  #global-navi li#private  a:hover, #global-navi li#family   a:hover, #global-navi li#planning a:hover,
  #global-navi li#products a:hover, #global-navi li#project  a:hover, #global-navi li#service  a:hover,
  #global-navi li a.active {
    background: linear-gradient(#dad9d0, #e0e0da);
    color: #126265;
    background-position: 0 0;
  }

  /* スマホ用ハンバーガー（li.menu）は PC では非表示のまま */
  #global-navi li.menu { display: none; }
}

/* ------------------------------------------------------------
   ヘッダー上段へ移動・完全テキスト化（画像・背景なし）
   ・ロゴの右、「会社情報」の下に横並び
   ・日本語＋英語の2段、項目間は細い区切り線
------------------------------------------------------------ */
@media screen and (min-width: 801px) {
  /* ロゴ上の余白をなくす／「会社情報」はナビ末尾に統合 */
  #header { height: 56px !important; padding: 0 !important; }
  #header h1 { padding-top: 5px !important; }
  #guide-navi { display: none !important; }
  #global-navi {
    height: 34px;
    clear: none;                       /* 元CSSの clear:both を解除（上へ引き上げるため） */
    margin: -45px 0 11px 240px;
    padding: 0 var(--fw-gutter, 25px) 0 0;
    background: transparent;
    border: 0;
    justify-content: flex-end;
    position: relative;
    z-index: 6;
  }
  #global-navi li { height: 34px; }
  #global-navi li#private, #global-navi li#family, #global-navi li#planning,
  #global-navi li#products, #global-navi li#project, #global-navi li#service, #global-navi li#company {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: none;
  }
  #global-navi li a,
  #global-navi li#private a, #global-navi li#family a, #global-navi li#planning a,
  #global-navi li#products a, #global-navi li#project a, #global-navi li#service a, #global-navi li#company a {
    height: 34px;
    padding: 0 clamp(5px, .7vw, 12px);   /* 狭い画面でもロゴに食い込まないよう画面幅に追従 */
    background: none;
    border: 0;
    border-left: 1px solid #cfcfc2;
    font-size: clamp(11px, 1vw, 12.5px);
    line-height: 1.2;
  }
  #global-navi li#private a { border-left: 0; }
  #global-navi li#private a:hover, #global-navi li#family a:hover, #global-navi li#planning a:hover,
  #global-navi li#products a:hover, #global-navi li#project a:hover, #global-navi li#service a:hover, #global-navi li#company a:hover,
  #global-navi li a.active {
    background: none;
    color: #126265;
    text-decoration: underline;
  }
}

/* 「会社情報」項目はPCのみ（スマホは従来のメニュー内にあるため） */
#global-navi li#company { display: none; }
@media screen and (min-width: 801px) { #global-navi li#company { display: block; } }

/* ------------------------------------------------------------
   ヘッダー＋メニューをフローティング（スクロール追従）
   ・下へスクロールすると body に is-scrolled が付き、ヘッダーが 56px → 40px に縮む
   ・切替は index.html 末尾の小さなスクリプト
   ・PC表示（幅801px以上）のみ
------------------------------------------------------------ */
@media screen and (min-width: 801px) {
  html { scroll-padding-top: 70px; }       /* アンカー移動時にヘッダーに隠れない */
  body { padding-top: 64px; }              /* 固定ヘッダー(56px)＋下線(3px)＋余白(5px) */
  #header {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: 56px !important;
    background-color: #fff;
    box-shadow: 0 3px 0 #126265;           /* ヘッダー下の緑の線（元デザインの上線と同色） */
    transition: height .2s, box-shadow .2s;
  }
  #header h1 { transform-origin: 0 0; transition: transform .2s; }
  #global-navi {
    position: fixed !important;
    top: 11px; left: 240px; right: 0;
    margin: 0 !important;
    z-index: 1001;
    transition: top .2s;
  }
  body.is-scrolled #header { height: 40px !important; box-shadow: 0 3px 0 #126265, 0 5px 10px rgba(0,0,0,.2); }
  body.is-scrolled #header h1 { transform: scale(.72); }
  body.is-scrolled #global-navi { top: 3px; }
}

/* ロゴに「Since 1996」：スクロールで縮んだ小さいロゴの右の余白にだけ表示（PCのみ）
   ・縦線と文字の上下幅は、縮小ロゴの「文字部分」（J.K. WILTON 上端 〜 & COMPANY 下端）に合わせる
     （ロゴ画像のピクセルを実測：縮小後は上から約11px〜34px、高さ約23px）
   ・「Since」は筆記体で小さめ（J.K. WILTON の行）、「1996」は太字で一回り大きく（& COMPANY の行） */
.since-note { display: none; }
@media screen and (min-width: 801px) {
  .since-note {
    display: block;
    position: absolute;
    left: 172px;
    top: 11px;                /* ロゴ文字の上端 */
    width: 52px;
    height: 23px;             /* ロゴ文字の上端〜下端 */
    box-sizing: border-box;
    border-left: 1px solid #c9ae6a;      /* ゴールドの縦線 */
    color: #8a6516;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
  }
  .since-note small,
  .since-note b { position: absolute; left: 8px; display: block; line-height: 1; }
  .since-note small { top: 1px;  font: 400 10px/1 "Great Vibes", cursive; letter-spacing: .02em; }          /* 筆記体・小さめ */
  .since-note b     { top: 10px; font: 400 14px/1 "Great Vibes", cursive; letter-spacing: .04em; }          /* 1996 も筆記体・Since より大きく */
  body.is-scrolled .since-note { opacity: 1; }
}

/* ===== 小さめのPC画面（801〜1180px）：メニューがロゴに隠れないよう、英字を消し、文字を詰めて折り返し可にする ===== */
@media screen and (min-width: 801px) and (max-width: 1180px) {
  #global-navi { left: 236px !important; right: 6px !important; width: auto !important; }
  #global-navi > li { flex: 1 1 auto !important; min-width: 0 !important; }
  #global-navi > li > a { white-space: normal !important; line-height: 1.2 !important; padding-left: 4px !important; padding-right: 4px !important; font-size: 11px !important; text-align: center !important; }
  #global-navi > li > a > span { display: none !important; }
}