/* =============================================================
   dep-top.css  ―  トップページ（フロントページ）専用スタイル
   - すべて .dep-top 配下にスコープ（他ページ・dep-base等と非干渉）
   - トークンは .dep-top に自前定義（dep-tokens.css 非依存で自己完結）
   - 画像は background-image: url(../img/...) の相対参照
     （配置：astra-child/assets/css/dep-top.css ⇔ astra-child/assets/img/...）
   - 静的モック：カルーセル/IGはビジュアルのみ（JSなし）
   ============================================================= */

.dep-top{
  /* --- tokens（ブランド確定値・自己完結） --- */
  --dep-primary:#0081CC; --dep-primary-light:#00AAE8; --dep-accent:#FF750E;
  --dep-bg:#FAF9F2; --dep-text:#323232; --dep-gray:#B2ADAD;
  --dep-line:#e6e4da; --dep-surface:#ffffff; --dep-muted:#6f6d66;
  --dep-accent-bg:#fff6ef; --dep-accent-line:#f1d9c4; --dep-accent-ink:#9a4d12;
  --dep-radius:12px; --dep-radius-s:8px;
  --dep-jp:"Zen Kaku Gothic Antique","Noto Sans JP","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  --dep-en:"Montserrat","Zen Kaku Gothic Antique","Noto Sans JP",sans-serif;
  --dep-wrap:1200px;
  /* 画像ベースパス（CSS位置基準の相対） */
  color:var(--dep-text);
  font-family:var(--dep-jp);
  line-height:1.8;
}
.dep-top *{box-sizing:border-box;}
.dep-top a{color:inherit;text-decoration:none;}

/* ===== 全幅化（Astra本文幅制限を突破）＋横スクロール防止 ===== */
.dep-top .dep-notice,
.dep-top .dep-sec{width:100vw;margin-inline:calc(50% - 50vw);}
/* ※ ローダー/テーマ側で body.home #content{overflow-x:clip;} を担保 */

/* ===== shared primitives（.dep-top配下に自前定義） ===== */
.dep-top .dep-wrap{width:min(1100px,92%);max-width:none;margin:0 auto;padding:0;}
.dep-top .dep-wrap--rel{position:relative;}
.dep-top .dep-sec{padding:84px 0;position:relative;overflow:hidden;}
.dep-top .dep-sec--white{background:var(--dep-surface);}
.dep-top .dep-sec--bg{background:var(--dep-bg);}
.dep-top .dep-eyebrow{font-family:var(--dep-en);font-size:13px;font-weight:600;letter-spacing:.16em;
     color:var(--dep-primary);margin:0 0 8px;text-transform:uppercase;}
.dep-top .dep-sec-title{font-size:30px;font-weight:700;letter-spacing:.02em;margin:0 0 14px;line-height:1.4;}
.dep-top .dep-sec-lead{font-size:15px;color:var(--dep-muted);margin:0 0 40px;}
.dep-top .dep-head{margin-bottom:44px;}
.dep-top .dep-head--center{text-align:center;}
.dep-top .dep-head--center .dep-sec-lead{margin-left:auto;margin-right:auto;max-width:760px;}
.dep-top .dep-ph{background:linear-gradient(135deg,#eceae1,#e3e1d7);
     display:flex;align-items:center;justify-content:center;
     color:#a8a49a;font-size:12px;letter-spacing:.08em;border-radius:var(--dep-radius);}
.dep-top .dep-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;
     color:var(--dep-primary);transition:gap .2s;}
.dep-top .dep-link::after{content:"→";transition:transform .2s;}
.dep-top .dep-link:hover{gap:10px;}
.dep-top .dep-link:hover::after{transform:translateX(2px);}
.dep-top .dep-more{display:flex;justify-content:center;margin-top:48px;}
.dep-top .dep-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
     background:var(--dep-accent);color:#fff;font-weight:700;font-size:15px;
     padding:13px 30px;border-radius:999px;transition:transform .15s,box-shadow .2s,background .2s;}
.dep-top .dep-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,117,14,.28);}
.dep-top .dep-btn--outline{background:#fff;color:var(--dep-accent);border:1.5px solid var(--dep-accent);}
.dep-top .dep-btn--outline:hover{background:var(--dep-accent);color:#fff;}

/* ===== 共通：画像系の素地 ===== */
.dep-top .dep-photo{background-size:cover;background-position:center;background-repeat:no-repeat;}
.dep-top .dep-pict{background-size:contain;background-position:center;background-repeat:no-repeat;}

/* ===== 見出し装飾ピクト ===== */
.dep-top .dep-headpict{position:absolute;pointer-events:none;z-index:2;}
.dep-top .dep-headpict--ticket{top:-78px;right:128px;width:150px;height:150px;
     background-image:url(../img/pict/pict_ticket01.svg);}
.dep-top .dep-headpict--binoc{top:-6px;left:150px;width:128px;height:128px;
     background-image:url(../img/pict/pict_field-glasses01.svg);}
.dep-top .dep-headpict--bus{top:-10px;right:214px;width:158px;height:158px;
     background-image:url(../img/pict/pict_bus01.svg);}
.dep-top .dep-headpict--bag{top:-4px;right:282px;width:126px;height:126px;
     background-image:url(../img/pict/pict_travel-bag01.svg);}

/* ===== 0. 告知バー ===== */
.dep-top .dep-notice{background:var(--dep-bg);padding:22px 0;}
.dep-top .dep-notice__inner{width:min(1100px,92%);max-width:none;margin:0 auto;padding:0;}
.dep-top .dep-notice__band{position:relative;display:flex;align-items:center;
     background:#fff;border:1px solid var(--dep-accent-line);border-radius:999px;
     padding:14px 26px;box-shadow:0 4px 16px rgba(0,0,0,.05);min-height:58px;}
.dep-top .dep-notice__pict{position:absolute;left:26px;top:50%;transform:translateY(-50%);
     width:92px;height:92px;background-image:url(../img/pict/pict_signboard01.svg);}
.dep-top .dep-notice__text{flex:1;font-size:15px;font-weight:700;text-align:center;padding:0 40px;}
.dep-top .dep-notice__text .arrow{color:var(--dep-accent);}
.dep-top .dep-notice__text .lnk{color:var(--dep-primary);}

/* ===== card共通（サービス・名所） ===== */
.dep-top .dep-cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;}
.dep-top .dep-card{background:var(--dep-surface);border:1px solid var(--dep-line);border-radius:var(--dep-radius);
     overflow:hidden;transition:transform .18s,box-shadow .25s;display:flex;flex-direction:column;}
.dep-top .dep-card:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(0,0,0,.10);}
.dep-top .dep-card__photo{aspect-ratio:378/280;width:100%;}
.dep-top .dep-card__body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1;}
.dep-top .dep-card__en{font-family:var(--dep-en);font-size:12px;font-weight:600;letter-spacing:.12em;
     color:var(--dep-primary);margin:0 0 4px;text-transform:uppercase;}
.dep-top .dep-card__ttl{font-size:21px;font-weight:700;margin:0 0 12px;}
.dep-top .dep-card__desc{font-size:14px;color:var(--dep-muted);margin:0 0 18px;line-height:1.75;flex:1;}
/* サービス写真 */
.dep-top .dep-card__photo--corp{background-image:url(../img/service/photo_service_corporate01.webp);}
.dep-top .dep-card__photo--school{background-image:url(../img/service/photo_service_school01.webp);}
.dep-top .dep-card__photo--indiv{background-image:url(../img/service/photo_service_individual01.webp);}

/* ===== 2. FEATURES ===== */
.dep-top .dep-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.dep-top .dep-feat__card{background:var(--dep-surface);border:1px solid var(--dep-line);
     border-radius:var(--dep-radius);padding:30px 28px;position:relative;min-height:220px;}
.dep-top .dep-feat__head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.dep-top .dep-feat__en{font-family:var(--dep-en);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--dep-gray);}
.dep-top .dep-feat__num{font-family:var(--dep-en);font-size:32px;font-weight:700;color:var(--dep-primary-light);line-height:1;}
.dep-top .dep-feat__icon{position:absolute;top:22px;right:20px;width:120px;height:100px;}
.dep-top .dep-feat__icon--01{background-image:url(../img/pict/pict_features01.svg);}
.dep-top .dep-feat__icon--02{background-image:url(../img/pict/pict_features02.svg);}
.dep-top .dep-feat__icon--03{background-image:url(../img/pict/pict_features03.svg);}
.dep-top .dep-feat__ttl{font-size:24px;font-weight:700;margin:0 0 12px;line-height:1.4;}
.dep-top .dep-feat__ttl-sm{display:block;font-size:18px;font-weight:700;line-height:1.5;}
.dep-top .dep-feat__desc{font-size:14px;color:var(--dep-muted);margin:0;}

/* ===== 3. TOURS（横スクロール／モバイルは横スワイプ・スナップ付き） ===== */
.dep-top .dep-tours{
     display:flex;gap:36px;
     overflow-x:auto;overflow-y:hidden;            /* 横スクロール（タッチでスワイプ） */
     scroll-snap-type:x mandatory;                 /* カード単位でスナップ */
     -webkit-overflow-scrolling:touch;             /* iOS慣性スクロール */
     scrollbar-width:none;                          /* Firefox：スクロールバー非表示 */
     padding-bottom:8px;                            /* hover影のクリップ回避 */
}
.dep-top .dep-tours::-webkit-scrollbar{display:none;}  /* WebKit：スクロールバー非表示 */
.dep-top .dep-tour{flex:0 0 720px;max-width:720px;scroll-snap-align:start;
     display:grid;grid-template-columns:42% 1fr;
     background:var(--dep-surface);border:1px solid var(--dep-line);border-radius:var(--dep-radius);
     overflow:hidden;transition:box-shadow .25s;}
.dep-top .dep-tour:hover{box-shadow:0 14px 30px rgba(0,0,0,.10);}
.dep-top .dep-tour__photo{aspect-ratio:380/400;}
.dep-top .dep-tour__photo--takarazuka{background-image:url(../img/placeholder/placeholder_photo_tours01.webp);}
.dep-top .dep-tour__photo--zekkei{background-image:url(../img/placeholder/placeholder_photo_tours02.webp);}
.dep-top .dep-tour__body{padding:30px 28px;display:flex;flex-direction:column;}
.dep-top .dep-tour__en{font-family:var(--dep-en);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--dep-primary);margin:0 0 8px;}
.dep-top .dep-tour__ttl{font-size:22px;font-weight:700;margin:0 0 14px;}
.dep-top .dep-tour__desc{font-size:14px;color:var(--dep-muted);margin:0 0 auto;line-height:1.75;}
.dep-top .dep-tour .dep-btn{align-self:flex-start;margin-top:22px;}
.dep-top .dep-carousel{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:42px;}
.dep-top .dep-carousel__arrow{width:46px;height:46px;border-radius:50%;border:1px solid var(--dep-line);
     background:#fff;display:flex;align-items:center;justify-content:center;color:var(--dep-text);
     cursor:pointer;transition:.2s;}
.dep-top .dep-carousel__arrow:hover{background:var(--dep-primary);color:#fff;border-color:var(--dep-primary);}
.dep-top .dep-dots{display:flex;gap:9px;}
.dep-top .dep-dots span{width:10px;height:10px;border-radius:50%;background:var(--dep-line);}
.dep-top .dep-dots span.is-active{background:var(--dep-primary);}

/* ===== 5. NEWS ===== */
.dep-top .dep-news{max-width:880px;margin:0 auto;}
.dep-top .dep-news__row{display:flex;align-items:center;gap:20px;padding:18px 4px;border-bottom:1px solid var(--dep-line);transition:background .2s;}
.dep-top .dep-news__row:first-child{border-top:1px solid var(--dep-line);}
.dep-top .dep-news__row:hover{background:#fafaf6;}
.dep-top .dep-news__date{font-family:var(--dep-en);font-size:14px;color:var(--dep-muted);flex:none;width:96px;letter-spacing:.02em;}
.dep-top .dep-news__cat{flex:none;width:84px;text-align:center;font-size:12px;font-weight:700;
     color:var(--dep-primary);border:1px solid var(--dep-primary);border-radius:999px;padding:3px 0;}
.dep-top .dep-news__cat--tour{color:var(--dep-accent);border-color:var(--dep-accent);}
.dep-top .dep-news__ttl{font-size:15px;font-weight:500;}

/* ===== 6. BLOG ===== */
.dep-top .dep-bloggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;}
.dep-top .dep-blog{background:var(--dep-surface);border:1px solid var(--dep-line);border-radius:var(--dep-radius);
     overflow:hidden;transition:transform .18s,box-shadow .25s;}
.dep-top .dep-blog:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(0,0,0,.10);}
.dep-top .dep-blog__photo{aspect-ratio:378/240;}
.dep-top .dep-blog__photo--01{background-image:url(../img/placeholder/placeholder_photo_blog01.webp);}
.dep-top .dep-blog__photo--02{background-image:url(../img/placeholder/placeholder_photo_blog02.webp);}
.dep-top .dep-blog__photo--03{background-image:url(../img/placeholder/placeholder_photo_blog03.webp);}
.dep-top .dep-blog__body{padding:22px 24px 24px;}
.dep-top .dep-blog__cat{display:inline-block;font-size:12px;font-weight:700;color:#fff;
     background:var(--dep-primary-light);border-radius:6px;padding:3px 12px;margin-bottom:12px;}
.dep-top .dep-blog__ttl{font-size:16px;font-weight:700;margin:0 0 12px;line-height:1.6;}
.dep-top .dep-blog__date{font-family:var(--dep-en);font-size:13px;color:var(--dep-gray);}

/* ===== 7. COMPANY ===== */
.dep-top .dep-company{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:stretch;}
.dep-top .dep-company__col{display:flex;flex-direction:column;}
.dep-top .dep-sublabel{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;margin:0 0 18px;}
.dep-top .dep-sublabel::before{content:"";width:4px;height:20px;border-radius:2px;background:var(--dep-primary);}
.dep-top .dep-corpcard{background:var(--dep-surface);border:1px solid var(--dep-line);border-radius:var(--dep-radius);
     padding:24px 30px;flex:1;display:flex;flex-direction:column;}
.dep-top .dep-corpcard__top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:14px;}
.dep-top .dep-corpcard__name{font-size:22px;font-weight:700;margin:0;}
.dep-top .dep-corpcard__logo{width:150px;height:72px;flex:none;
     background-image:url(../img/logo/company_logo_departures.svg);}
.dep-top .dep-corpcard__addr{font-size:14px;color:var(--dep-muted);margin:0 0 8px;line-height:1.9;}
.dep-top .dep-corpcard__tel{font-size:18px;font-weight:700;letter-spacing:.01em;margin:2px 0 8px;line-height:1.3;}
.dep-top .dep-corpcard__hours{font-size:14px;color:var(--dep-muted);margin:0;line-height:1.9;}
.dep-top .dep-corpcard .dep-link{margin-top:auto;padding-top:18px;}
.dep-top .dep-related{display:flex;flex-direction:column;gap:20px;flex:1;}
.dep-top .dep-rel{display:grid;grid-template-columns:1fr 150px;gap:18px;align-items:center;
     background:var(--dep-surface);border:1px solid var(--dep-line);border-radius:var(--dep-radius);
     padding:18px 24px;flex:1;transition:transform .18s,box-shadow .25s;}
.dep-top .dep-rel:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.08);}
.dep-top .dep-rel__en{font-family:var(--dep-en);font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--dep-primary);margin:0 0 4px;}
.dep-top .dep-rel__ttl{font-size:18px;font-weight:700;margin:0 0 4px;}
.dep-top .dep-rel__sub{font-size:13px;color:var(--dep-muted);margin:0 0 10px;}
.dep-top .dep-rel__logo{width:140px;height:120px;}
.dep-top .dep-rel__logo--tabisup{background-image:url(../img/logo/company_logo_tabi_sup01.svg);}
.dep-top .dep-rel__logo--cozy{background-image:url(../img/logo/company_logo_cozy_cuppa01.png);}

/* 会社情報カードの社名「株式会社ディパーチャーズ」は実測260px。ロゴ150px＋gap20px と
   横並びにすると、カード内幅が430pxを切る表示幅で折り返して「ズ」だけが2行目に落ちる
   （実測＝769〜1195pxの帯で発生。820px以下では3行になる）。
   カード内幅430pxを確保できるのは表示幅1109px以上のため、余裕をみて1140px以下では
   ロゴを下段へ。≦768px も同じ形になるので、この1本にまとめている。 */
@media(max-width:1140px){
  .dep-top .dep-corpcard__top{flex-direction:column;align-items:flex-start;gap:10px;}
}

/* ===== 8. INSTAGRAM ===== */
.dep-top .dep-ig__head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:36px;}
.dep-top .dep-ig__right{text-align:right;}
.dep-top .dep-ig__handle{font-family:var(--dep-en);font-weight:700;font-size:15px;color:var(--dep-text);margin:0 0 4px;}
.dep-top .dep-ig__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
.dep-top .dep-ig__grid .dep-ph{aspect-ratio:1/1;}

/* ===== レスポンシブ（〜768px） ===== */
@media(max-width:768px){
  .dep-top .dep-sec{padding:56px 0;}
  .dep-top .dep-wrap{padding:0;}
  .dep-top .dep-sec-title{font-size:23px;}
  .dep-top .dep-head{margin-bottom:32px;}
  .dep-top .dep-sec-lead{margin-bottom:28px;}
  .dep-top .dep-headpict{display:none;}
  .dep-top .dep-cardgrid,
  .dep-top .dep-feat,
  .dep-top .dep-bloggrid,
  .dep-top .dep-company{grid-template-columns:1fr;gap:20px;}
  .dep-top .dep-tours{gap:14px;}                       /* 横スワイプ維持・縦積み解除 */
  .dep-top .dep-tour{flex:0 0 85%;max-width:85%;grid-template-columns:1fr;}  /* 次カードが少し覗く */
  .dep-top .dep-tour__photo{aspect-ratio:16/10;}
  .dep-top .dep-notice__band{padding:14px 16px 14px 70px;min-height:0;}
  .dep-top .dep-notice__pict{left:8px;width:58px;height:58px;}
  .dep-top .dep-notice__text{font-size:13.5px;padding:0;text-align:left;}
  .dep-top .dep-feat__card{min-height:0;}
  .dep-top .dep-feat__icon{width:84px;height:64px;}
  .dep-top .dep-news__row{flex-wrap:wrap;gap:8px 12px;padding:14px 2px;}
  .dep-top .dep-news__date{width:auto;}
  .dep-top .dep-news__ttl{width:100%;font-size:14px;}
  .dep-top .dep-blog__photo{aspect-ratio:16/10;}
  .dep-top .dep-ig__grid{grid-template-columns:repeat(3,1fr);gap:10px;}
  .dep-top .dep-ig__head{align-items:flex-start;}
  .dep-top .dep-ig__right{text-align:left;}
  .dep-top .dep-more{margin-top:32px;}
}

/* ===== 全幅帯の横スクロール防止（ホームのみ・スコープ外で1行だけ担保） ===== */
body.home #content{overflow-x:clip;}

/* ============================================================
   追補パッチ（2026-06-21）
   リンクのアンダーライン非表示（Astra/entry-content の下線を上書き）
   ※ モバイルのヒーロー直下グレー帯は画像側の白帯が原因のため、
     画像（hero_01.webp）差し替えで対応（CSSでの対処は不要）。
   ============================================================ */

/* リンクの下線を全状態で非表示 */
.dep-top a,
.dep-top a:link,
.dep-top a:visited,
.dep-top a:hover,
.dep-top a:focus,
.dep-top a:active{ text-decoration:none !important; }

/* ============================================================
   追補パッチ（2026-08-18）＝トップの動的化に伴う調整
   TOURS／日本の名所／NEWS／スタッフブログ／Instagram は
   ショートコード出力に切り替えた（functions.php 末尾）。
   マークアップ・クラス名はモックと同一なので、上の定義はそのまま効く。
   ここで足すのは「写真が未登録のときの見え方」だけ。
   ============================================================ */

/* 写真が無い枠は .dep-ph（グレーのPHOTO枠）に落ちる。
   カード上端の写真は角丸をカード側（overflow:hidden）に任せるため、
   .dep-ph が持つ border-radius を打ち消して角が二重に丸まらないようにする。 */
.dep-top .dep-card__photo.dep-ph,
.dep-top .dep-tour__photo.dep-ph,
.dep-top .dep-blog__photo.dep-ph{ border-radius:0; }

/* ツアーが1件だけのときは横スクロールが起きないので、左寄せのままだと間が空く。
   （矢印・ドットは1件のときショートコード側が出力しない） */
.dep-top .dep-tours:has(> .dep-tour:only-child){ justify-content:center; }

/* ============================================================
   追補パッチ②（2026-08-18）＝TOURSカードのhoverを他セクションと揃える
   ------------------------------------------------------------
   ずれていた原因は2つあった（実機の computed style で確認）。
     ① `.dep-tour:hover` に **transform:translateY(-5px) が無かった**
        （`.dep-card` / `.dep-blog` は持っている＝浮き上がる）。
        transition も box-shadow だけで transform が入っていなかった。
     ② `.dep-tours` は横スワイプのために `overflow:auto hidden` を持つ
        **スクロールコンテナ**なので、**影が容器の縁で切られていた**。
        padding-bottom は 8px しか無く、影は下へ約29px伸びる（14px offset＋blur30の半分）。
   ⚠ `overflow-x:auto` を指定した時点で `overflow-y:visible` は使えない
     （CSSの仕様で自動的に auto に格上げされる）ため、**影を逃がす余白を padding で作り、
       同じ量の負のマージンでレイアウト上の位置を元に戻す**方法をとる。
   数値の根拠：影 `0 14px 30px` の広がり＝下 14+15=29px／上 15-14=1px／左右 15px。
     浮き上がり5pxを足しても、下34px・上8px・左右16pxの余白で収まる。
   ============================================================ */
.dep-top .dep-tour{ transition:transform .18s, box-shadow .25s; }
.dep-top .dep-tour:hover{ transform:translateY(-5px); box-shadow:0 14px 30px rgba(0,0,0,.10); }
.dep-top .dep-tours{
  padding:8px 16px 34px;      /* 影の逃げ場（旧：padding-bottom:8px のみ） */
  margin:-8px -16px -26px;    /* 見た目の位置と下の余白は従来どおり（34-26=8＝旧padding相当） */
}