@charset "UTF-8";
/* ============================================================
   サイト共通：変数・リセット・共通パーツ（サイズ以外）
   寸法の基準：デザインPNG 1920px 等倍（＝PDF 1500pt × 1.28）
   PC：1024px以上（style-pc.css）／SP：1023px以下（style-sp.css）
   ============================================================ */

/* ===== 変数 ===== */
:root {
  --c-text: #000;      /* K100 */
  --c-k45: #aaabab;    /* K45：資料請求ボタン・特徴帯・Coming Soon */
  --c-k70: #727171;    /* K70：来場予約ボタン・路線図枠 */
  --c-bg1: #f3f4f4;    /* セクション背景（薄グレー） */
  --c-bg2: #eaefeb;    /* 次代品質の背景 */
  --font-mincho: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif;
  --font-sans-jp: "游ゴシック体", YuGothic, "Yu Gothic Medium", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-en: "Times New Roman", Times, serif;
  --font-garamond: adobe-garamond-pro, "Times New Roman", Times, serif;
  --font-trajan: trajan-pro-3, "Times New Roman", Times, serif;
}

/* ===== リセット ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--c-text);
  background: #fff;
  font-family: var(--font-mincho);
  font-weight: 400;
  font-feature-settings: "palt";
  line-height: 1;
}
h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
br.sp { display: none; }   /* スマホだけで改行 */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

/* ===== ページ枠（最大幅1920pxで中央配置） ===== */
.wrap, .footer { max-width: 1920px; margin: 0 auto; }
body { overflow-x: hidden; }   /* 横スクロール防止は body で行う（.wrap に付けると内側にスクロールバーが出るため） */

/* ===== 背景画像の位置ガイド（header.php の $BG_GUIDE で表示切替） ===== */
.bg-guide {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% 100%;   /* 枠にぴったり合わせる（下の隙間を出さない） */
}
.is-bg-guide .bg-guide { outline: 2px dashed rgba(220, 0, 90, .55); outline-offset: -2px; }
.is-bg-guide .bg-guide::before {
  content: attr(data-label);
  position: absolute;
  right: .5%;
  bottom: .5rem;
  padding: .25rem .6%;
  font-family: var(--font-sans-jp);
  font-size: clamp(.6875rem, .625vw, .75rem);
  line-height: 1.4;
  color: #fff;
  background: rgba(220, 0, 90, .75);
}

/* ===== ヘッダー ===== */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; max-width: 1920px; margin: 0 auto; background: #fff; }
.header__inner { position: relative; height: 100%; }
.logo { position: absolute; }
.logo a { display: block; }
.logo img { width: 100%; max-width: 352px; }
.hbtn { display: flex; align-items: center; justify-content: center; color: #fff; letter-spacing: .2em; text-indent: .2em; white-space: nowrap; }
.hbtn--req { background: var(--c-k45); transition: opacity .3s; }
.hbtn--req:hover { opacity: .75; }
.hnav ul { display: flex; justify-content: space-between; }
.hnav a { display: block; font-family: var(--font-mincho); color: #231815; line-height: 1; white-space: nowrap; transition: opacity .3s; }
.hnav a:hover { opacity: .6; }

/* ===== MENUボタン（参考サイト .openbtn4 と同じ大きさ・動き） ===== */
.menu-btn { position: absolute; top: 6px; right: 20px; width: 70px; height: 30px; cursor: pointer; z-index: 1001; }
.menu-btn__lines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.menu-btn__lines span { position: absolute; left: 14px; width: 60%; height: 2px; border-radius: 5px; background: #000; transition: all .8s; }
.menu-btn__lines span:nth-child(1) { top: 15px; }
.menu-btn__lines span:nth-child(2) { top: 23px; }
.menu-btn__lines span:nth-child(3) { top: 31px; }
.menu-btn.is-active .menu-btn__lines span:nth-child(1) { top: 18px; left: 18px; width: 70%; transform: translateY(6px) rotate(-45deg); }
.menu-btn.is-active .menu-btn__lines span:nth-child(2) { opacity: 0; }
.menu-btn.is-active .menu-btn__lines span:nth-child(3) { top: 30px; left: 18px; width: 70%; transform: translateY(-6px) rotate(45deg); }
.menu-btn.is-active .menu-btn__label { top: 52px; left: 18px; }   /* CLOSE は×の下（×との余白は MENU と3本線の余白と同じ約5px） */
.menu-btn__label { position: absolute; left: 12px; top: 42px; transition: all .8s; font-family: var(--font-mincho); font-size: .83rem; color: #4c4948; text-transform: uppercase; line-height: 1; white-space: nowrap; }

/* ===== グローバルナビ（参考サイト #g-nav と同じ：右から 0.8s でスライド） ===== */
.g-nav { position: fixed; top: 0; right: -100%; z-index: 999; width: 30%; height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff; transition: all .8s; }
.g-nav.is-open { right: 0; }
.g-nav ul { width: 90%; margin: 0 auto; padding: 0 0 140px; }
.g-nav li { text-align: left; font-size: .95rem; font-weight: 700; line-height: 1.9; padding: 8px 0 1px; letter-spacing: .1em; }
.g-nav li:first-child { padding-top: 120px; }
.g-nav li a { position: relative; display: block; color: #4c4948; transition: all .5s; }
.g-nav li a::before { content: ""; position: absolute; left: 0; bottom: 0; width: 85%; height: 1px; background: #333; transition: all .3s; }   /* 下線 */
.g-nav li a::after { content: ""; position: absolute; right: 15%; bottom: 4px; width: 15px; height: 1px; background: #333; transform: rotate(35deg); transition: all .3s; }   /* 矢印 */
.g-nav li a:hover { color: #ccc; }
.g-nav li a:hover::before { left: 20%; }
.g-nav li a:hover::after { right: -5%; }
.g-nav li span { color: #aaa; }

/* ===== information ===== */
.info { position: relative; text-align: center; }
.info > :not(.bg-guide) { position: relative; z-index: 1; }
.info__en { font-family: var(--font-en); }
.info__ttl { letter-spacing: .2em; text-indent: .2em; }
.info__btns { display: flex; justify-content: center; }
.info__btn { display: flex; align-items: center; justify-content: center; color: #fff; letter-spacing: .2em; text-indent: .2em; }
.info__btn--req { background: var(--c-k45); transition: opacity .3s; }
.info__btn--req:hover { opacity: .75; }

/* ===== フッター ===== */
.fnav { border-top: 1px solid var(--c-text); border-bottom: 1px solid var(--c-text); }
.fnav ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; font-family: var(--font-sans-jp); font-weight: 500; font-feature-settings: normal; }
.fnav li + li::before { content: "｜"; margin: 0 1em; }
.fnav li span { color: var(--c-k45); }   /* リンクしていない項目はグレー */
.fnav a:hover { opacity: .6; }
.finfo__tel { display: flex; align-items: flex-end; white-space: nowrap; }
.finfo__num { font-family: var(--font-en); letter-spacing: .05em; line-height: 1; }
.finfo__lead, .finfo__hours, .finfo__role { white-space: nowrap; }
.copyright { font-family: var(--font-en); letter-spacing: .05em; text-align: center; }

/* ===== ページTOPへ戻る（300pxスクロールで表示） ===== */
.ptop {
  position: fixed;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .85);
  border: 1px solid var(--c-k70);
  color: var(--c-k70);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: background-color .3s, color .3s, opacity .4s, visibility .4s;
}
.ptop.on { opacity: 1; visibility: visible; pointer-events: auto; }
.ptop::before { content: ""; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(-45deg); }
.ptop:hover { background: var(--c-k70); color: #fff; }

/* ===== スマホ下部固定ナビ ===== */
.sp-nav { display: none; }

/* ===== スクロールで表示するアニメーション（参考サイトと同じ：fadeIn_up） ===== */
.fadeIn_up { opacity: 0; transform: translate(0, 50%); transition: 2s; }
.fadeIn_up.is-show { opacity: 1; transform: translate(0, 0); }
.fadeIn { opacity: 0; transition: 2s; }                                    /* 移動なしでふわっと表示（メイン画像） */
.fadeIn.is-show { opacity: 1; }