@charset "UTF-8";
/* CSS Document */


/*************************************************************************/

body{
	color:#333333;
	font-family:"Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;/*フォント種*/
	font-size:14px;/*フォントサイズfirefox用*/
	}

/*************************************************************************/

*{ margin:0; padding:0;}

img{
     max-width: 100%;
     height: auto;
     width /***/:auto;　
     vertical-align: text-bottom;
     }

html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li {
  margin: 0;
  padding: 0;
}

/*************************************************************************/

/* デフォルトでは改行しない */
.sp-only-break::after {
  content: "";
}

/* スマホのみ改行を入れる */
@media (max-width: 768px) {
  .sp-only-break::after {
    content: "\A";  /* 改行コード */
    white-space: pre;
  }
}

.sp-only-br { display: none; }
@media (max-width: 768px) {
  .sp-only-br { display: inline; }
}

/*************************************************************************/

header {
  width: 100%;          /* 横幅いっぱい */
  background: #005bb5;  /* 背景色は例として */
  border-bottom: 4px solid #66ccff; /* 下部に水色の横ライン */
}

header .inner {
  max-width: 1440px;        /* 最大幅 */
  margin: 0 auto;       /* 中央寄せ */
}

/* h1ロゴ用 */
header h1 {
  margin: 0;                 /* 余計な余白を消す */
  padding: 0;
  text-align: left;          /* 左寄せ */
  display: flex;
  align-items: center;       /* 縦中央揃え（任意） */
}

/* ロゴ画像の調整 */
header h1 img {
  display: block;
  height: auto;              /* 高さは自動 */
  width: auto;               /* 横比率は自動 */
}

/*************************************************************************/

/* ヒーローセクション */
.hero {
  position: relative;
  width: 100%;
  height: 100svh;     /* SPでの余白対策：Viewportの安全な高さ */
  overflow: hidden;
}

/* 背景動画：常に全面、左右トリミング */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;   /* 充填＆はみ出し切り抜き */
  object-position: center;
  z-index: -1;
}

/* オーバーレイ（暗めフィルター） */
.hero__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,0.35);
  z-index: 0;
}

/* 中央コンテンツ（重ね画像/テキスト） */
.hero__content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  justify-content: center;  /* 水平方向中央 */
  align-items: center;      /* 垂直方向中央 */
  padding: 0 1rem;          /* 端ギリギリに行かないよう余白 */
}

.hero__image {
  max-width: 1280px; /* PCのとき横幅制御 */
  width: 100%;
  height: auto;
}

/* 余計なベースライン隙間対策（念のため） */
img, video { display:block; }

@media (max-width: 768px) {
  .hero__content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* 背景っぽくフィット */
    object-position: center; /* 中央トリミング */
  }
}

/* 1) iOS/Androidの最新環境では 100dvh を優先（アドレスバー高さの揺れ対策） */
@supports (height: 100dvh) {
  .hero { height: 100dvh; }
}

/* 2) 横向きSP（高さが極端に低い時）の文字つぶれ回避 */
@media (max-width: 768px) and (orientation: landscape) {
  .hero { height: 80svh; }              /* ちょい低めに */
  .hero__overlay { background-color: rgba(0,0,0,0.45); }  /* コントラスト補強 */
}

/* 3) 被写体の寄せ微調整（必要なら） */
/* 例：もう少し左を見せたい時 → 40% に */
.hero__video { object-position: 50% 50%; }
/* .hero__video { object-position: 40% 50%; } */

/* 4) 低速回線＆モーション弱者配慮：動画オフ時はポスターに切替 */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero {
    background: url('poster.jpg') center/cover no-repeat;
  }
}

/* 5) 画像のサイズ指定（CLS対策） */
.hero__content picture > img.hero__image {
  width: 1280px;   /* 実サイズを明示 */
  height: 720px;
  max-width: 100%;
  height: auto;
}

/* 6) SPの縦書き画像（高さ基準）の保険 */
@media (max-width: 768px) {
  .hero__content picture > img.hero__image {
    width: auto;
    height: min(80vh, 92svh);
    max-width: 100%;
  }
}

/*************************************************************************/

/* パンくずナビ */
.breadcrumb {
  background: #005bb5;
  padding: 12px 20px;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.2) inset; /* 上側にうっすら影 */
}

/* 内側を1440pxに制御 */
.breadcrumb ul {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: center;
}

/* 項目をボタン風に */
.breadcrumb li {
  display: inline-block;
  font-size: 14px;
  color: #fff;              /* 白文字 */
  padding: 4px 10px;
  margin: 0 4px;
  border: 1px solid #fff;   /* 白枠 */
  border-radius: 4px;
  transition: all 0.3s;
}

.breadcrumb li:hover {
  background: #fff;         /* ホバーで白背景 */
  color: #005bb5;           /* 文字を青に反転 */
}

/* 区切り記号 */
.breadcrumb li+li::before {
  content: ">";
  padding: 0 6px;
  color: #fff;
  font-weight: bold;
}

/* リンク */
.breadcrumb a {
  color: inherit;           /* liの色を継承（白→ホバー時青） */
  text-decoration: none;
  font-weight: 500;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* スマホは左寄せ */
@media (max-width: 768px) {
  .breadcrumb ul {
    text-align: left;
    padding-left: 10px;
  }
}

/*************************************************************************/

/* セクション全体：背景画像はそのまま */
.main-section {
  width: 100%;
  background: url('../images/bg_body_wide.webp') center/cover no-repeat;
  padding: 60px 10px;
  box-sizing: border-box;
}

/* 内部：親は透明のまま */
.main-section .inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
}

/* 本文（黒の下地を個別に） */
.main-section .content {
  flex: 3;
  color: #fff;
  background-color: rgba(0,0,0,0.7);
  padding: 24px;
  border-radius: 4px;
  margin-right: 40px;   /* PC用に右余白確保 */
  text-align: left;
  font-size: 16px;
  line-height: 1.8;
  color: #f5f5f5;
  font-weight: 400;
}

.main-section .content p {
  text-align: justify;
  text-justify: inter-ideograph; /* 日本語文字の均等割り付けを指定 */
}

/* --- 画面が狭いとき（SP） --- */
@media (max-width: 992px) {
  .main-section .inner {
    display: block;         /* flex解除で縦積みに */
  }

  .main-section .content {
    margin-right: 0;        /* 右余白を消す */
    margin-bottom: 1.5rem;  /* 下に少し余白を追加（必要なら） */
  }
}

/* 見出し（最適化） */
.main-section .content h2 {
  margin: 10px 0 20px;
  padding: 12px 0 12px 10px; /* 上 右 下 左 */
  font-size: 24px;
  line-height: 1.35;   /* 24pxにピッタリより少し余裕を持たせて可読性UP */
  font-weight: 700;     /* 600 と bold の重複を統一 */
  color: #fff;
  text-align: left;
  border-block: 2px solid #fff; /* 論理プロパティで上/下 */
}

/* 段落 */
.main-section .content p {
  margin-bottom: 1.2em;
}

/*************************************************************************/

/* サイドメニュー（白系の下地） */
.main-section .sidebar {
  flex: 1;
  background-color: rgba(0,0,0,0.7); 
  padding: 20px;
  border-radius: 4px;
}

/* スマホ：1カラムでサイドバー非表示 */
@media (max-width: 768px) {
  .main-section .sidebar {
    display: block;          /* 非表示を打ち消し */
    border-radius: 0;
    padding: 20px;           /* 必要なら維持 */
  }
}

/* 調整しやすいように変数化（202×50px 相当） */
:root{
  --menu-w: 20.0rem;
  --menu-h: 5.0rem;
  --menu-bg: #005bb5;
  --menu-bg-hover: #0a66cc;
  --menu-border: #66ccff;
  --menu-radius: 0.5rem;
}

/* サイドバー土台（必要に応じて） */
.sidebar {
  width: var(--menu-w);
  margin: 0 auto;
}

/* ===== メインメニュー（画像→テキストボタン） ===== */

@media (min-width: 993px) {
  .hamburger,
  .sp-nav-backdrop {
    display: none;
  }
  /* 念のため：PCではサイドバーを通常レイアウトに */
  .sidebar {
    position: static;
    width: var(--menu-w);
    height: auto;
    transform: none;
    overflow: visible;
  }
}

/* ハンバーガー用の隠しトグルは常に画面外へ（視覚非表示） */
.sp-nav-toggle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  /* 完全に消してもOKなら↓でも可（DOMにある限りセレクタは効く） */
  /* display: none; */
}

/* メニュー全体 */
.sidebar-menu .menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

/* 各メニューリンク */
.sidebar-menu .menu a {
  position: relative;
  display: flex;
  flex-direction: column;        /* 縦に並べる */
  justify-content: center;
  width: 100%;
  min-height: 3.5rem;            /* 高さ確保 */
  background: #fff;
  color: #0f2240;
  text-decoration: none;
  font-weight: 700;
  padding: 0.6rem 1rem 0.6rem 1.5rem; 
  border-radius: 0.25rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: background-color .25s ease, color .25s ease;
}

/* 縦ライン */
.sidebar-menu .menu a::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 6px;
  border-radius: 3px;
  background: #005bb5;
  transition: background-color .25s ease;
}

/* ホバー・フォーカス */
.sidebar-menu .menu a:hover::before,
.sidebar-menu .menu a:focus-visible::before {
  background: #ffa400;
}
.sidebar-menu .menu a:hover,
.sidebar-menu .menu a:focus-visible {
  background: #e6f2ff;
  outline: none;
}

/* メイン文字 */
.menu-title {
  font-size: clamp(1rem, 1.1vw, 1.05rem); /* ≒16px */
  line-height: 1.3;
}

/* サブ文字 */
.menu-sub {
  font-size: clamp(0.75rem, 0.9vw, 0.85rem); /* ≒12?13px */
  font-weight: 400;
  color: #555;
  line-height: 1.2;
  margin-top: 0.2rem;
}

/* 現在ページ */
.sidebar-menu .menu a.is-current {
  background: #e6f2ff;
}
.sidebar-menu .menu a.is-current::before {
  background: #ffa400;
}

/* ===== バナー（お問い合わせ等） ===== */
.sidebar-banners{
  margin-top: 1rem;
  display: grid;
  gap: 0.75rem;
}

/* 通常バナー */
.banner{
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 8.5rem; /* 旧: 135?145px 相当の箱 */
  text-decoration: none;
  color: #0f2240;
  background: #fff;
  border: 2px solid #e6e9f2;
  border-radius: 0.75rem;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease, background-color .15s ease;
}
.banner:hover,
.banner:focus-visible{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  border-color: #dfe4f1;
  outline: none;
}

/* 重要CTA（お問い合わせ）だけ色反転 */
.banner--primary{
  color: #fff;
  background: linear-gradient(180deg, #ff6a00, #ff8800);
  border-color: #ffa400;
}
.banner--primary:hover,
.banner--primary:focus-visible{
  background: linear-gradient(180deg, #ff7a1c, #ff9a1c);
  box-shadow: 0 10px 24px rgba(255,122,28,.35);
}

/* キーボードフォーカスの視認性 */
.sidebar-menu .menu a:focus-visible,
.banner:focus-visible{
  box-shadow:
    0 0 0 3px rgba(255,255,255,.6),
    0 0 0 6px rgba(0,91,181,.35);
}

/* 文字縮小しすぎ防止（任意） */
.sidebar-menu .menu a,
.banner{
  font-size: clamp(0.95rem, 1.1vw, 1rem);
}

/* モバイルで幅可変にしたい場合（任意） */
/*
@media (max-width: 640px){
  .sidebar { width: min(100%, 22rem); }
}
*/

/* ===== SP時ハンバーガー対応 ===== */
@media (max-width: 992px) {
  .sp-nav-toggle { position: absolute; left: -9999px; }

  /* ボタン本体 */
  .hamburger {
    position: fixed;
    top: 12px;
    right: 12px;
    width: 52px;   /* ボタンサイズ */
    height: 52px;
    border-radius: 8px;
    z-index: 1100;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    background: #005bb5;
    border: 2px solid #fff;
    box-sizing: border-box;
  }

  /* 共通：三本線 */
  .hamburger::before,
  .hamburger::after,
  .hamburger span {
    position: absolute;
    left: 11px;
    right: 11px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: top .25s ease, transform .25s ease, opacity .25s ease;
    transform-origin: center;
    will-change: transform, opacity;
  }

  /* 疑似要素には content 必須 */
  .hamburger::before,
  .hamburger::after {
    content: "";
  }

  /* 位置調整 */
  .hamburger::before { top: 14px; }
  .hamburger span    { top: 22px; }
  .hamburger::after  { top: 30px; }

  /* チェック時の変形 */
  .sp-nav-toggle:checked + .hamburger span {
    opacity: 0; /* 真ん中を消す */
  }
  .sp-nav-toggle:checked + .hamburger::before {
  transform: translateY(8px) rotate(45deg);
  }
  .sp-nav-toggle:checked + .hamburger::after {
  transform: translateY(-8px) rotate(-45deg);
  }

  /* サイドバー */
  .sidebar {
    position: fixed; top:0; right:0; z-index:1350;
    width: min(80vw, 22rem); height: 100dvh;
    transform: translateX(100%);
    transition: transform .25s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sp-nav-toggle:checked ~ .sidebar {
    transform: translateX(0);
  }

  /* 背景 */
  .sp-nav-backdrop {
    position: fixed; inset: 0; z-index:1040;
    background-color: rgba(0,0,0,.4);
    opacity: 0; pointer-events: none;
    transition: opacity .2s;
  }
  .sp-nav-toggle:checked ~ .sp-nav-backdrop {
    opacity: 1; pointer-events: auto;
  }
}

/*************************************************************************/

/* フッター全体 */
.site-footer {
  background: #005bb5;
  color: #fff;
  text-align: center;
  padding: clamp(1rem, 2vw, 1.5rem);
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  box-sizing: border-box;
  position: relative;
  z-index: 0; /* ← スタッキングを通常に */
}

/* 内側コンテナ */
.footer__inner {
  max-width: 90rem;              /* 1440px */
  margin: 0 auto;
}

/* 届出番号 */
.footer__license {
  margin: 0 0 0.25rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* コピーライト */
.footer__copy {
  margin: 0;
  font-size: 1.0em;
  opacity: 0.85;
}


/* --- スマホ時：固定CTA分の余白＋背景色連続 --- */
@media (max-width: 768px) {
  .site-footer {
    padding-bottom: calc(
      clamp(1rem, 2vw, 1.5rem) +
      var(--cta-bar-h, 64px) + 24px + env(safe-area-inset-bottom)
    );
  }

  .site-footer::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: calc(var(--cta-bar-h, 64px) + 24px + env(safe-area-inset-bottom));
    background: #005bb5;      /* 背景を下まで塗る */
    z-index: 0;               /* ← -1 をやめて 0 に（確実に前面で塗る） */
    pointer-events: none;
  }
}

/*************************************************************************/

/* ページトップボタン（既存） */
#page_top {
  position: fixed;
  z-index: 1300; /* ← CTAより上に設定（CTAは1000） */
  bottom: 24px;
  right: 12px;
}
#page_top a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  background-color: rgba(0, 0, 0, 0.7);
  font-size: 24px; font-weight: bold; color: #fff;
  border: 2px solid #fff; border-radius: 50%;
  transition-duration: 0.5s; text-decoration: none;
}
#page_top a:hover { transform: scale(0.80); text-decoration: none; }

/*************************************************************************/

/*******************************
  SP固定CTA（電話：オレンジ／LINE：グリーン＋案内女性画像）
  スクロール後にふわっと表示（アニメは is-visible 時のみ）
*******************************/

/* PC/タブレットでは出さない */
.sp-cta-bar { display: none !important; visibility: hidden; }
@media (min-width: 769px) {
  .sp-cta-bar * { display: none !important; }
}

/* --- 初期状態：非表示 --- */
.sp-cta-bar {
  opacity: 0;
  transform: translateY(40px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
  animation: none; /* ← 初期ではアニメ無効 */
}

/* --- 表示トリガーON時のみアニメ実行 --- */
.sp-cta-bar.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  animation: cta-slide-up .45s ease-out both;
}

/* スマホのみ表示 */
@media (max-width: 768px) {
  :root {
    --cta-bar-h: 64px;
    --cta-gap: 12px;
    --cta-radius: 12px;
    --cta-z: 1000; /* ハンバーガー(1100)より下に */
    --cta-shadow: 0 6px 24px rgba(0,0,0,.2);
    --cta-border: 2px;
    --cta-visual-pad: 48px; /* 上方向の視覚的余白量 */
    --tel-bg: linear-gradient(180deg, #ff8800, #ff6a00);
    --tel-bg-hover: linear-gradient(180deg, #ff9c33, #ff7a1c);
    --line-bg: #06C755;
    --line-bg-hover: #05b84f;
  }

  .sp-cta-bar {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: var(--cta-z);
    display: grid !important; visibility: visible;
    grid-template-columns: auto 1fr 1fr; /* 画像 + ボタン×2 */
    align-items: end;
    gap: var(--cta-gap);
    box-sizing: border-box;
    padding:
      calc(12px + var(--cta-visual-pad))
      calc(12px + env(safe-area-inset-right))
      calc(12px + env(safe-area-inset-bottom))
      calc(12px + env(safe-area-inset-left));
    background: transparent;
    animation: none; /* ← 常時アニメ削除 */
  }

  /* 背景ブロック */
  .sp-cta-bar::before {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: calc(var(--cta-bar-h) + var(--cta-visual-pad) + 24px + env(safe-area-inset-bottom));
    background: linear-gradient(
      to top,
      rgba(0, 91, 181, 0.65),
      rgba(0, 91, 181, 0.35) 60%,
      rgba(0, 91, 181, 0.00)
    );
    z-index: -1;
    pointer-events: none;
  }

  /* 案内女性画像 */
  .sp-cta-image {
    width: 142px;
    height: 128px;
    object-fit: contain;
    object-position: left bottom;
    align-self: end;
    margin-bottom: calc(var(--cta-bar-h) * -0.25);
    pointer-events: none;
    user-select: none;
  }

  /* ボタン */
  .sp-cta-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--cta-bar-h);
    padding: 0 8px;
    border-radius: var(--cta-radius);
    text-decoration: none;
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
    line-height: 1;
    border: var(--cta-border) solid #fff;
    box-shadow: var(--cta-shadow);
    transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
    will-change: transform, filter;
  }

  .sp-cta-btn--tel { background: var(--tel-bg); }
  .sp-cta-btn--tel:hover {
    background: var(--tel-bg-hover);
    box-shadow: 0 0 14px rgba(255,255,255,.35);
  }

  .sp-cta-btn--line { background: var(--line-bg); }
  .sp-cta-btn--line:hover {
    background: var(--line-bg-hover);
    box-shadow: 0 0 14px rgba(255,255,255,.35);
  }

  /* アイコン */
.sp-cta-btn::before {
    content: "";
    display: inline-block;
    width: 1.1em;  /* ← アイコンを少し小さく */
    height: 1.1em;
    margin-right: 0.35em; /* ← 0.5em → 0.35em に */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.15));
    }

  .sp-cta-btn--tel::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'><path d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.1.37 2.29.57 3.58.57a1 1 0 011 1v3.5a1 1 0 01-1 1C11.3 22 2 12.7 2 2.99A1 1 0 013 2h3.5a1 1 0 011 1c0 1.29.2 2.48.57 3.58a1 1 0 01-.24 1.01l-2.2 2.2z'/></svg>");
  }

  .sp-cta-btn--line::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'><path d='M12 3C6.48 3 2 6.94 2 11.8c0 2.73 1.47 5.17 3.78 6.8l-.6 2.86a.6.6 0 00.86.67l3.18-1.67c.7.13 1.42.2 2.17.2 5.52 0 10-3.94 10-8.8S17.52 3 12 3z'/></svg>");
  }

  /* ページトップボタン干渉回避 */
  #page_top {
    bottom: calc(var(--cta-bar-h) + 24px + env(safe-area-inset-bottom));
    right: 12px;
  }

  @keyframes cta-slide-up {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .sp-cta-bar { animation: none; }
    .sp-cta-btn { transition: none; }
  }
}