/* =========================================================
   Departures 法人の旅LP 専用コンポーネント
   - 出所：確定ラフ dep_corporate_rough.html
   - 衝突回避のため総称クラスは dep-corp- に付け替え
   - 依存：dep-tokens.css（--dep-*）＋ dep-base.css（.dep-wrap/.dep-sec/.dep-eyebrow 等）
   - 共通CTA・フッターは dep-cta-footer.css 側。ここには含めない。
   ========================================================= */

/* ============ ページ地色 ============
   Astraのコンテンツ領域（全幅ラッパー #content）の地色を生成りに。
   これで パンくず〜ヒーローが枠の外まで自動で生成りになり、
   白セクションは後で「白い帯」を乗せる方式にする。
   ※ このCSSは corporate ページのみ読み込まれるためページ限定で安全。 */
#content{background:var(--dep-bg);}

/* ============ HERO（下層・落ち着いた帯） ============ */
.dep-corp-hero{background:var(--dep-bg);padding-top:clamp(28px,4vw,44px);padding-bottom:clamp(48px,7vw,80px);max-width:none !important;width:100vw !important;margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important;}
.dep-corp-hero__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,56px);align-items:center;
}
.dep-corp-hero__lead-en{
  font-family:var(--dep-en);font-size:12px;font-weight:600;
  letter-spacing:.18em;color:var(--dep-primary);
}
.dep-corp-hero h1{
  font-size:clamp(20px,2.4vw,24px);font-weight:500;color:var(--dep-text);
  margin-top:8px;letter-spacing:.04em;
}
.dep-corp-hero__catch{
  font-size:clamp(30px,4.6vw,46px);font-weight:700;line-height:1.4;
  margin:14px 0 20px;letter-spacing:.01em;
}
.dep-corp-hero__catch em{font-style:normal;color:var(--dep-primary);}
.dep-corp-hero__sub{font-size:15px;line-height:2;color:#4a4a4a;}
.dep-corp-hero__sub b{font-weight:700;}
.dep-corp-hero__photo{aspect-ratio:4/3;border-radius:8px;overflow:hidden;}
/* プレースホルダを実写に差し替えたとき、枠の比率のままトリミング表示 */
.dep-corp-hero__photo img,
.dep-corp-svc__photo img{width:100%;height:100%;object-fit:cover;display:block;}

/* ============ お悩み（チェックリスト） ============ */
.dep-corp-worry-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.dep-corp-worry{
  background:#fff;border:1px solid var(--dep-line);border-radius:10px;
  padding:20px 22px;display:flex;gap:14px;align-items:flex-start;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.dep-corp-worry:hover{
  border-color:var(--dep-primary-light);
  box-shadow:0 6px 18px rgba(0,129,204,.07);
}
.dep-corp-worry__box{
  flex:0 0 auto;width:22px;height:22px;border:2px solid var(--dep-gray);
  border-radius:5px;margin-top:3px;position:relative;transition:.2s ease;
}
.dep-corp-worry:hover .dep-corp-worry__box{
  border-color:var(--dep-primary);background:var(--dep-primary);
}
.dep-corp-worry:hover .dep-corp-worry__box::after{
  content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.dep-corp-worry__txt{font-size:15px;line-height:1.8;}

.dep-corp-solve{
  margin-top:clamp(28px,4vw,40px);
  background:var(--dep-primary);color:#fff;border-radius:12px;
  padding:clamp(22px,3vw,30px) clamp(22px,4vw,40px);
  display:flex;flex-direction:column;align-items:center;gap:16px;
  justify-content:center;text-align:center;
}
.dep-corp-solve__bubble{display:inline-flex;line-height:0;flex:0 0 auto;}
.dep-corp-solve__bubble svg{display:block;}
.dep-corp-solve__txt{margin:0 !important;font-size:clamp(18px,2.6vw,24px);font-weight:700;line-height:1.5;}
.dep-corp-solve__txt b{color:#fff;}

/* ============ FEATURES（できること 3枚） ============ */
.dep-corp-features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.dep-corp-feature{
  background:#fff;border:1px solid var(--dep-line);border-radius:12px;
  padding:30px 26px;position:relative;overflow:hidden;
}
.dep-corp-feature__no{
  font-family:var(--dep-en);font-size:13px;font-weight:700;
  letter-spacing:.12em;color:var(--dep-accent);
}
.dep-corp-feature__no b{
  font-size:34px;display:block;line-height:1;margin-top:4px;color:var(--dep-primary);
}
.dep-corp-feature h3{font-size:18px;font-weight:700;line-height:1.6;margin:16px 0 12px;}
.dep-corp-feature p{font-size:14.5px;line-height:1.9;color:#4a4a4a;}
.dep-corp-feature__tag{
  display:inline-block;margin-top:14px;font-size:12px;font-weight:700;
  color:var(--dep-primary);background:#E8F5FC;border-radius:999px;padding:4px 12px;
}

/* ============ FEATURES の下：「できること、くわしく →」 ============
   🔵 トップページの `.dep-top .dep-more` / `.dep-top .dep-link` と**同じ値**にそろえてある
   （中央／#0081CC／700／14px／gap 6px／::after の「→」／hover で gap 10px・矢印 2px 右）。
   それらは `.dep-top` スコープのため LP からは参照できないので、ここで同じ値を再定義している。
   マークアップもトップと同じ＝`<div class="dep-more dep-corp-more"><a class="dep-link">`。
   スタイルの当たりは `.dep-corp-more` 側だけに付け、`.dep-more` / `.dep-link` 単独には
   何も定義しない（他セクションへ漏れないようにするため）。

   🔴 **下線の打ち消しは詳細度に注意（★落とし穴30と同じ構図）。**
   Astra は固定ページ本文のリンクに `.ast-single-post .entry-content a`（**0,2,1**）で
   `text-decoration:underline` を当てている。`.dep-corp-more .dep-link`（**0,2,0**）では**負ける**。
   → 打ち消しは `.entry-content .dep-corp-more a.dep-link`（**0,3,1**）で書くこと。
   （トップページは `.ast-single-post` が付かないためこの競合が起きない＝LP側だけの問題。
     2026/9/7 に実機の computedStyle で確認済み。）
   ★落とし穴30：`<div>` で組んであるので `.entry-content p{margin:0}` とは競合しない。 */
.dep-corp-more{display:flex;justify-content:center;margin-top:48px;}
.dep-corp-more .dep-link{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:700;font-size:14px;
  color:var(--dep-primary);text-decoration:none;transition:gap .2s;
}
/* Astra の本文リンク下線（0,2,1）を確実に上回るための1行（0,3,1） */
.entry-content .dep-corp-more a.dep-link{text-decoration:none;}
.dep-corp-more .dep-link::after{content:"\2192";transition:transform .2s;}
.dep-corp-more .dep-link:hover{gap:10px;}
.dep-corp-more .dep-link:hover::after{transform:translateX(2px);}
@media(max-width:768px){
  .dep-corp-more{margin-top:32px;}
}

/* ============ サービスメニュー（A.カード型） ============ */
.dep-corp-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.dep-corp-svc{
  background:#fff;border:1px solid var(--dep-line);border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column;
}
.dep-corp-svc__photo{aspect-ratio:16/10;overflow:hidden;}/* overflow:hidden でフレックス自動最小サイズを解除し、元画像の比率によらず16:10を厳守 */
.dep-corp-svc__body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
.dep-corp-svc h3{font-size:18px;font-weight:700;line-height:1.5;margin:0;}
/* 英語ラベル：説明文用 .dep-corp-svc p より強い指定にして 11px/グレーを確実に適用 */
.dep-corp-svc .dep-corp-svc__en{
  font-family:var(--dep-en);font-size:11px;font-weight:600;letter-spacing:.1em;
  color:var(--dep-gray);margin:2px 0 0;text-transform:uppercase;line-height:1.4;
}
.dep-corp-svc p{font-size:14px;line-height:1.85;color:#4a4a4a;margin:12px 0 0;}
.dep-corp-svc__ex{margin:16px 0 0;border-top:1px dashed var(--dep-line);padding-top:14px;}
.dep-corp-svc__ex dt{font-size:12px;font-weight:700;color:var(--dep-primary);margin:0 0 8px;}
.dep-corp-svc__ex ul{list-style:none;margin:0;padding:0;}
.dep-corp-svc__ex li{
  font-size:13px;line-height:1.7;padding-left:18px;position:relative;color:#555;margin:0;
}
.dep-corp-svc__ex li::before{
  content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--dep-primary-light);
}

/* ============ ご利用の流れ（縦タイムライン） ============ */
.dep-corp-flow{position:relative;max-width:760px;margin-inline:auto;}
.dep-corp-flow::before{
  content:"";position:absolute;left:23px;top:10px;bottom:10px;
  width:2px;background:var(--dep-line);
}
.dep-corp-step{position:relative;display:flex;gap:24px;padding-bottom:28px;}
.dep-corp-step:last-child{padding-bottom:0;}
.dep-corp-step__no{
  flex:0 0 auto;width:48px;height:48px;border-radius:50%;
  background:var(--dep-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--dep-en);font-weight:700;font-size:18px;
  z-index:1;border:4px solid var(--dep-bg);
}
.dep-sec--white .dep-corp-step__no{border-color:#fff;}
.dep-corp-step__body{padding-top:4px;}
.dep-corp-step__body h3{font-size:17px;font-weight:700;margin:0 0 6px;}
.dep-corp-step__body p{font-size:14.5px;line-height:1.9;color:#4a4a4a;margin:0;}

/* ============ FAQ（details アコーディオン） ============ */
.dep-corp-faq{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:12px;}
.dep-corp-faq details{
  background:#fff;border:1px solid var(--dep-line);border-radius:10px;overflow:hidden;
}
.dep-corp-faq summary{
  list-style:none;cursor:pointer;padding:18px 22px;font-size:15.5px;font-weight:700;
  display:flex;align-items:center;gap:14px;
}
.dep-corp-faq summary::-webkit-details-marker{display:none;}
.dep-corp-faq__q{flex:0 0 auto;font-family:var(--dep-en);font-weight:700;color:var(--dep-primary);}
.dep-corp-faq__ic{
  margin-left:auto;flex:0 0 auto;width:18px;height:18px;position:relative;
  transition:transform .25s ease;
}
.dep-corp-faq__ic::before,.dep-corp-faq__ic::after{
  content:"";position:absolute;background:var(--dep-primary);border-radius:2px;
}
.dep-corp-faq__ic::before{left:0;top:8px;width:18px;height:2px;}
.dep-corp-faq__ic::after{left:8px;top:0;width:2px;height:18px;transition:transform .25s ease;}
.dep-corp-faq details[open] summary .dep-corp-faq__ic::after{transform:scaleY(0);}
.dep-corp-faq__a{padding:0 22px 20px 54px;font-size:14.5px;line-height:1.95;color:#4a4a4a;}
.dep-corp-faq__a-label{font-family:var(--dep-en);font-weight:700;color:var(--dep-accent);margin-right:6px;}

/* ============ レスポンシブ（法人LP分） ============ */
@media (max-width:768px){
  .dep-corp-hero__grid{grid-template-columns:1fr;gap:22px;}
  .dep-corp-solve{gap:8px;}
  .dep-corp-hero__photo{order:-1;aspect-ratio:16/10;}
  .dep-corp-worry-grid{grid-template-columns:1fr;}
  .dep-corp-features{grid-template-columns:1fr;}
  .dep-corp-svc-grid{grid-template-columns:1fr;}
  .dep-corp-flow::before{left:19px;}
  .dep-corp-step{gap:16px;}
  .dep-corp-step__no{width:40px;height:40px;font-size:16px;}
  .dep-corp-faq__a{padding-left:22px;}
}