@charset "UTF-8";

/* ======================================================
   ■ カラー変数
====================================================== */
:root {
  --mint:#c7f0e5;
  --mint-deep:#9de1cf;
  --ink:#12423b;
  --ink-soft:#1c4f49;
}

/* ======================================================
   ■ フォント
====================================================== */
body, h1, h2, h3, h4, h5, h6, p, a, li, span {
  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic Medium",
    "Yu Gothic",
    "Meiryo",
    sans-serif !important;
  font-variant-east-asian: normal;
}

/* ======================================================
   ■ 全体
====================================================== */
body {
  margin:0;
  background:linear-gradient(to bottom,#eaf9f6 0%,#ffffff 100%);
  color:#003366;
  overflow-x:hidden;
}

/* ======================================================
   ■ HERO（背景写真：画面いっぱい）
====================================================== */
.hero {
  position:relative;
  height:100vh;
  width:100%;
  overflow:hidden;
}

.hero img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity 1s ease-in-out;
}

/* 下グラデーション */
.hero::after {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:25vh;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.9) 80%,
    #fff 100%
  );
  pointer-events:none;
}

/* hero 内のリンクが押せるように */
.hero a {
  position:relative;
  z-index:10 !important;
}

/* ======================================================
   ■ ヘッダー（上固定）
====================================================== */
.overlay-top {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:rgba(255,255,255,0.25);
  backdrop-filter:blur(10px);
  text-align:center;
  padding:1rem 0;
  z-index:10;
  transition:opacity .6s ease, transform .6s ease;
}

.overlay-top img {
  width:120px;
}

.overlay-top h1 {
  margin:0.3rem 0;
  font-size:2.0rem;
}

.overlay-top nav ul {
  list-style:none;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.6rem;
  padding:0;
  margin:0;
}

.overlay-top nav a {
  text-decoration:none;
  color:#004080;
  background:rgba(255,255,255,0.6);
  border-radius:8px;
  padding:6px 12px;
  font-weight:600;
}

/* ======================================================
   ■ Hero 下のコピーカード（軽井沢の風を感じて）
====================================================== */
.overlay-bottom {
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:10vh;
  background:rgba(255,255,255,0.35);
  backdrop-filter:blur(12px);
  border-radius:20px;
  padding:1.5rem 2rem;
  text-align:center;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
  z-index:9;
  transition:opacity .6s ease, transform .6s ease;
  pointer-events:auto !important;
}

.overlay-bottom h2 {
  margin:0 0 .6rem 0;
  color:var(--ink);
}

.overlay-bottom p {
  margin:.3rem 0;
  color:var(--ink-soft);
}

/* ======================================================
   ■ 99周年バナー PC版（巨大版）
====================================================== */
@media screen and (min-width:769px) {
  .centennial-banner {
    position:fixed;
    inset:50% auto auto 50%;
    transform:translate(-50%,-50%);
    background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(240,255,250,.85));
    backdrop-filter:blur(22px);
    border-radius:50px;
    padding:2rem 3rem;
    text-align:center;
    box-shadow:0 12px 40px rgba(0,0,0,.25);
    font-size:2rem;
    font-weight:800;
    color:var(--ink);
    opacity:0;
    transition:opacity 1s ease, filter 5s ease;
    z-index:20;
    animation: softGlow 8s ease-in-out infinite;
    pointer-events:none;
  }

  .centennial-banner .hl {
    background: linear-gradient(90deg, #1a8c7b, #38d1b8, #1a8c7b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* ============================
   ★ スマホ用 99周年バナー
============================ */
@media screen and (max-width: 768px) {
  .centennial-banner {
    position: fixed !important;
    top: 12% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: 86% !important;
    max-width: 360px !important;

    padding: 0.5rem 0.8rem !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;

    border-radius: 12px !important;
    background: rgba(255,255,255,0.92) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;

    opacity: 1;                 /* ← ← これが悪さしてます */
    z-index: 40;
  }

  .centennial-banner .hl {
    background: none !important;
    -webkit-text-fill-color: #12423b !important;
  }
}

/* ======================================================
   ■ main コンテンツ
====================================================== */
main {
  position:relative;
  z-index:1;
  margin-top:-6vh;
  padding:4rem 2rem;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
  background:transparent;
}

.block {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.block h3 {
  color: #004d40;
  border-left: 4px solid #9de1cf;
  padding-left: 0.5rem;
  margin-bottom: 1rem;
}

.photo {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 1rem;
}

/* ======================================================
   ■ footer
====================================================== */
footer {
  text-align:center;
  padding:2rem 1rem;
  background:rgba(230,247,247,0.6);
  border-top:1px solid #aee0da;
  margin-top:3rem;
}
/* Hero の白グラデを弱めて高さも縮める — スマホ専用 */
@media screen and (max-width: 768px) {
  .hero::after {
    height: 10vh !important;   /* ← 25vh → 10vh に縮める */
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.6) 70%,
      #fff 100%
    ) !important;
  }

  /* Hero 内のテキストが “写真の上” に収まるように */
  .overlay-bottom {
    bottom: 4vh !important;   /* ← 下げすぎていたので上に寄せる */
  }
}
/* ============================
   ★ スマホ時：overlay-bottom を横長・中央に
============================ */
@media screen and (max-width: 768px) {
  .overlay-bottom {
    width: 88% !important;
    max-width: 420px !important;
    padding: 1.4rem 1.6rem !important;
    border-radius: 22px !important;
    bottom: 7vh !important;
    left: 50%;
    transform: translateX(-50%);
  }
}
/* =============================
   修正① お問い合わせフォーム復元
============================= */
.contact-section {
  max-width: 750px !important;
  margin: 4rem auto !important;
  padding: 2.5rem 2rem !important;
}

.contact-form label {
  display: block !important;
}

.contact-form input,
.contact-form textarea {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* =============================
   修正② 99周年バナーの位置調整
============================= */
@media screen and (max-width: 768px) {
  .centennial-banner {
    top: 21% !important;      /* ← 少し下へ */
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: 86% !important;
    max-width: 360px !important;

    padding: 0.55rem 1rem !important;
    font-size: 1.05rem !important;
    line-height: 1.35 !important;

    background: rgba(255,255,255,0.92) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.15) !important;

    z-index: 40 !important;
  }
}

/* =============================
   修正③ Hero のテキスト（軽井沢の風）2行化 & 下げる
============================= */
@media screen and (max-width: 768px) {
  .overlay-bottom {
    width: 88% !important;
    max-width: 420px !important;

    padding: 1.4rem 1.6rem !important;
    border-radius: 22px !important;

    bottom: 8vh !important;   /* ← もっと下へ */
    left: 50%;
    transform: translateX(-50%);
  }

  .overlay-bottom h2 {
    font-size: 1.45rem !important;
    line-height: 1.5 !important;
    white-space: normal !important; /* ← 強制折返し許可 */
    text-align: center;
  }
}
/* ============================
   スマホ調整：
   ・99周年バナーを画面半分より下へ
   ・「軽井沢の風…」カードを低く＆1行ずつ
============================ */
@media screen and (max-width: 768px) {

  /* ① 99周年バナー位置：画面の半分より少し下 */
  .centennial-banner {
    top: 55% !important;              /* ← 50% より下に */
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* ② Hero テキストカード（軽井沢の風） */
  .overlay-bottom {
    bottom: 5vh !important;           /* ← もう少し下へ */
    width: 92% !important;
    max-width: 460px !important;
    padding: 1rem 1.2rem !important;  /* ← 高さを低く */
    border-radius: 20px !important;
  }

  /* 見出し「軽井沢の風を感じて、やさしい旅を。」を 1 行固定 */
  .overlay-bottom h2 {
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;   /* ← 1 行に収める */
    margin-bottom: 0.4rem !important;
  }

  /* 説明文「最良の設備と…」も 1 行固定 */
  .overlay-bottom p {
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;   /* ← 1 行に収める */
    margin-top: 0.2rem !important;
    margin-bottom: 0 !important;
  }
}
.office-small {
  width: 12.5%;   /* ← これで8分の1サイズ */
  height: auto;
}

/* ==========================
   ★ トップへ戻るフローティングボタン
========================== */
/* ★ トップへ戻る（シャープ・青系・シンプル版） */
.floating-top {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 9999;

  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.35);

  color: #6ac7e3; /* ← 青寄りのミント。シャープで見える */
  font-weight: 500; /* 細めで上品 */
  font-size: 1rem;
  letter-spacing: 0.02em;

  padding: 0.6rem 1.15rem;
  border-radius: 12px;
  text-decoration: none;

  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  transition: all 0.25s ease;
}

/* ホバー時：少しだけ濃い青で反応 */
.floating-top:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.36);
  color: #4db0d1;  /* ← 少し濃い青へ */
  box-shadow: 0 6px 18px rgba(0,0,0,0.34);
}