@charset "UTF-8";
/* ホテルNO.1グループ トップページ専用CSS (renew_index.css) ※共通は css/common/renew.css */

/* 各ブロックの背景色と余白 -------------------------------------
   上から順に #FAFAF8 → #FFFFFF を交互に。
   重要案内+予約検索(.intro-block)=FAFAF8 / お知らせ=白 / 施設=FAFAF8 / コンセプト=白 / 会社概要=FAFAF8
   余白は --sec-pad(PC 90px → スマホ 72px まで画面幅に応じて自動で縮む)。広げたい時はここの数字を大きくする */
:root{--paper:#FAFAF8;--sec-pad:clamp(72px,9vw,90px)}
section{padding:var(--sec-pad) 0}
.intro-block,#hotels,#company{background:var(--paper)}
#info,#concept{background:#fff}
.intro-block{padding:clamp(40px,5vw,64px) 0 var(--sec-pad)}
.sec-head{margin-bottom:56px}
/* 見出しの文字サイズ +1px(元は renew.css の値: 英字 12px / 見出し 26px / お知らせ一覧リンク 13px) */
.sec-head .en{font-size:13px}
.sec-head h2{font-size:27px}
#info .text-link{font-size:14px}
/* お知らせだけ余白を詰める(他のブロックの2/3)。もっと詰める/戻す時は、下の数字を変える(元は --sec-pad と同じ clamp(72px,9vw,90px)) */
#info{padding:clamp(48px,6vw,60px) 0}

/* ヒーロー ---------------------------------------------------- */
.hero{position:relative;height:min(56vw,600px);min-height:360px;background:#7fbad6;overflow:hidden}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.hero .slide.on{opacity:1}
.hero .slide.ph{background:linear-gradient(135deg,#7fbad6,#2f93c4)}
.hero .slide.ph::after{color:rgba(255,255,255,.8);font-size:14px}
/* ゆっくり拡大する演出(Ken Burns)
   表示中(.on)と、消えていく最中(.out)の両方で拡大を続けるので、
   切り替わる時に元の大きさへ戻って見える違和感が出ない */
.hero .slide.on img,.hero .slide.out img{animation:kenburns 9s linear forwards}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.05)}}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,25,40,.28),rgba(0,25,40,.28)),linear-gradient(to top,rgba(0,40,60,.35),rgba(0,0,0,0) 45%);z-index:3;pointer-events:none}
/* キャッチコピー: 中央配置・細めの明朝体 */
.hero-copy{position:absolute;z-index:4;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 20px 84px}
.hero-copy h1{font-family:"Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","MS PMincho",serif;font-size:clamp(22px,3.7vw,50px);font-weight:300;letter-spacing:.12em;line-height:1.6;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.hero-copy p{margin-top:clamp(14px,2.2vw,30px);font-size:clamp(10.5px,1.15vw,15px);font-weight:500;letter-spacing:.28em;line-height:2.3;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.hero-copy p span{display:block}
.dots{position:absolute;z-index:4;right:20px;bottom:56px;display:flex;gap:8px}
.dots button{width:10px;height:10px;border-radius:50%;border:1.5px solid #fff;background:transparent;cursor:pointer;transition:.3s}
.dots button.on{background:#fff;transform:scale(1.2)}
/* SCROLL 表示(文字サイズ約2倍) */
.scroll-hint{position:absolute;z-index:4;left:50%;bottom:84px;transform:translateX(-50%);color:#fff;font-size:22px;letter-spacing:.28em;writing-mode:vertical-rl;opacity:.9;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.scroll-hint::after{content:"";position:absolute;left:calc(50% - 1px);top:100%;width:2px;height:40px;background:#fff;margin-top:10px;animation:scrollline 1.8s infinite}
@keyframes scrollline{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* 重要案内(スライダー直下) ------------------------------------- */
.notice{padding:0}
.notice-box{display:flex;align-items:center;gap:28px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--main);border-radius:var(--radius);padding:18px 26px}
.notice-ttl{flex:none;font-size:18px;letter-spacing:.12em;line-height:1.4}
.notice-ttl .en{display:block;color:var(--main);font-size:11px;letter-spacing:.3em;font-weight:700}
.notice-links{display:flex;flex-wrap:wrap;gap:10px 12px;flex:1}
.notice-links a{display:flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--line);border-radius:6px;background:var(--paper);font-size:13.5px;font-weight:600;transition:color .3s,border-color .3s,background .3s,transform .3s var(--ease)}
.notice-links a::before{content:"›";color:var(--main);font-weight:700;transition:transform .3s var(--ease)}
.notice-links a:hover{color:var(--main);border-color:var(--main);background:#fff;transform:translateY(-2px)}
.notice-links a:hover::before{transform:translateX(3px)}

/* 予約検索バー ------------------------------------------------- */
.search{position:relative;z-index:5;padding:28px 0 0}
.search-box{background:#fff;border-radius:10px;box-shadow:0 6px 24px rgba(0,60,90,.14);padding:20px 24px;display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;border-top:4px solid var(--main)}
.search-box .ttl{font-weight:700;color:var(--main);font-size:15px;margin-right:8px;align-self:center}
.field{display:flex;flex-direction:column;font-size:12px;color:var(--sub);flex:1;min-width:140px}
.field select{margin-top:4px;padding:10px;border:1px solid var(--line);border-radius:6px;font-size:14px;background:#fff;color:var(--ink);font-family:inherit}

/* お知らせ ----------------------------------------------------- */
.info-grid{display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:start}
.info-grid .sec-head{margin:0}

/* 施設 --------------------------------------------------------- */
.hotels{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.hotels .card .ph{aspect-ratio:4/3}
.hotels .body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.hotels .badge{align-self:flex-start;margin-bottom:8px}
.hotels h3{font-size:19px;letter-spacing:.05em}
.hotels .desc{font-size:13.5px;color:var(--sub);margin:8px 0 12px;flex:1}
.hotels .addr{font-size:12.5px;color:var(--sub);line-height:1.7;padding-top:12px;border-top:1px dashed var(--line)}
.links{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.sub-links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:12px;font-size:12px}
.sub-links a{color:var(--sub);text-decoration:underline}
.sub-links a:hover{color:var(--main)}

/* 店舗ごとのテーマカラー(.theme-◯◯)は css/common/renew.css の「10」に移しました */
.hotels .card-lift:hover{box-shadow:0 12px 30px rgba(var(--main-rgb),.22)}

/* ブログ ------------------------------------------------------- */
.more-wrap{text-align:center;margin-top:36px}

/* コンセプト --------------------------------------------------- */
.concept{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.concept .ph{aspect-ratio:4/3;border-radius:10px}
/* マイマップ埋め込み: 地図を枠で囲み、上の黒いバー(作成者名・共有ボタン)だけを枠の外へ押し上げて隠す。
   バーの高さ = 67px(PC幅・スマホ幅とも同じ)。下の「Google」ロゴ・利用規約は枠の内側に残る。
   Google側のバーの高さが変わって隠れ残る/削れすぎる時は、--mymap-bar の数字だけ直す。
   地図の中心・拡大は index_new.html の iframe アドレス末尾 ll=(緯度,経度) と z=(拡大率)で決めている */
.concept-map{--mymap-bar:68px;aspect-ratio:4/3;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#e9edf0;box-shadow:0 4px 16px rgba(0,60,90,.08)}
.concept-map iframe{display:block;width:100%;height:calc(100% + var(--mymap-bar));margin-top:calc(var(--mymap-bar) * -1);border:0}
.concept h2{font-family:"Yu Mincho","游明朝",serif;font-size:24px;line-height:1.7;letter-spacing:.06em;margin-bottom:16px}
.concept p{color:#44555e}

/* 会社概要 ----------------------------------------------------- */
.company{max-width:820px;margin:0 auto;border-top:2px solid var(--main)}
.company dl{display:grid;grid-template-columns:180px 1fr;border-bottom:1px solid var(--line)}
.company dt{padding:18px 20px;font-weight:700;background:var(--bg)}
.company dd{padding:18px 24px}

/* 5施設: 3+2 の最終行を中央に寄せる(PC幅のみ) */
@media(min-width:901px){
  .hotels{grid-template-columns:repeat(6,1fr)}
  .hotels .card{grid-column:span 2}
  .hotels .card:nth-child(4){grid-column:2 / span 2}
}
@media(max-width:900px){
  .notice-box{flex-direction:column;align-items:flex-start;gap:14px}
  .hotels{grid-template-columns:repeat(2,1fr)}
  .info-grid{grid-template-columns:1fr;gap:20px}
  .concept{grid-template-columns:1fr}
  .scroll-hint{display:none}
  .hero-copy{padding-bottom:50px}
}
@media(max-width:600px){
  .concept-map{aspect-ratio:4/5} /* スマホは縦長にして、5つのピンが切れないようにする */
  .notice-links{flex-direction:column;width:100%}
  .hotels{grid-template-columns:1fr}
  .company dl{grid-template-columns:1fr}
  .search-box{padding:16px}
  .search-box .ttl{width:100%}
  .dots{bottom:50px}
}