@charset "UTF-8";
/*
  juniors.jp 共通スタイル
  ※ IE11 でも崩れないように：flex/grid の gap・CSS変数・aspect-ratio・object-fit を使うときは
    ファイル末尾の「IE11フォールバック」にも代わりの指定を書く
*/

/*
  色（デザイン指定）：文字の黒 #333333／緑 #239615
  文字サイズ：本文 16px／タイトル 26px（h2）／リード文 19px（class="lead"）／KV のコピー 34px（PC。タブレット・SP は下の表）
  幅：ヘッダー・コンテンツとも最大 1000px（.container）
  ブレイクポイント：SP ＝ 767px 以下、ヘッダーのメニューだけ 900px 以下で切り替え
*/

/* ---------- 基本 ---------- */
body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  line-height: 1.8;
  color: #333333;
  background: #fff;
}

/* ---------- 文字サイズ ----------
   PC はデザイン指定。SP は PC をもとに読みやすさで決めた推奨値。
   間は clamp() で画面幅に合わせてなめらかに変わる（375px で SP の値 → 1024px で PC の値、それより外は固定）
                     SP(375)   タブレット(768)の目安   PC(1024〜)
   KV のコピー         25px     約30px                  34px   ※ top.css
   タイトル（h2）      22px     約24px                  26px
   リード文（.lead）   16px     約18px                  19px
   本文（body）        15px     約16px                  16px
   ・SP の本文 15px：1行 22 文字前後になり、日本語で読みやすい幅に収まる
   ・リード文はどの幅でも本文より大きく、タイトルとの差もつくようにしている

   clamp の真ん中の式の出し方（SP 値 a、PC 値 b）：
     傾き = (b - a) ÷ (1024 - 375) × 100 → 〇vw
     切片 = a - (b - a) × 375 ÷ 649        → 〇px
   例：h2（22→26）＝ 19.69px + 0.616vw
   IE11 は clamp を読めないので、1行前に PC の値を px で書いておく（IE11 は PC でしか使われないため） */
body {
  font-size: 16px;
  font-size: clamp(15px, 14.42px + 0.154vw, 16px);
}
h2 {
  font-size: 26px;
  font-size: clamp(22px, 19.69px + 0.616vw, 26px);
  font-weight: 700;
  line-height: 1.4;
}
.lead {
  font-size: 19px;
  font-size: clamp(16px, 14.27px + 0.462vw, 19px);
  line-height: 1.9;
}

/* 幅 1000px の中身の箱（左右に最低 20px の余白） */
.container {
  width: calc(100% - 40px);
  max-width: 1000px;
  margin: 0 auto;
}

/* セクション見出し：緑の文字の左右に白い斜線 3 本（\\\ 事業内容 \\\）
   斜線は繰り返しグラデーションで 3 本描いて skew で傾ける（IE11 も可） */
.sec-title {
  color: #239615;
  text-align: center;
  letter-spacing: 0.05em;
}
.sec-title::before,
.sec-title::after {
  content: "";
  display: inline-block;
  width: 26px;
  height: 0.9em;
  margin: 0 18px;
  background: repeating-linear-gradient(90deg, #fff 0, #fff 4px, transparent 4px, transparent 9px);
  vertical-align: -0.05em;
  -webkit-transform: skewX(35deg);
  transform: skewX(35deg);
}

/* 明るい背景の上：文字は緑のまま、斜線を黒に */
.sec-title--light::before,
.sec-title--light::after {
  background: repeating-linear-gradient(90deg, #333333 0, #333333 4px, transparent 4px, transparent 9px);
}

/* 下層ページの見出し：緑の文字を左に置き、下に幅いっぱいの緑の線 */
.line-title {
  padding: 0 0 14px 1em;
  border-bottom: 2px solid #239615;
  color: #239615;
}

/* 写真や動画の上に置くときの白い見出し */
.sec-title--white {
  color: #fff;
}

/* 明るいグレーの背景（bg_white）を敷くセクション共通：
   横幅は常に画面幅いっぱい、縦ははみ出した分を下で切る（下の模様が隠れてもよい）。
   画像より高いセクション（主に SP）は、画像を縦にタイルのように繰り返す。
   画像は各セクションの style に bg_style('/images/common/bg_white.jpg') で指定 */
.bg-white {
  background-color: #dfdfdf; /* 画像の読み込み前に見える色 */
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 100% auto;
}

/* 画面には出さず、読み上げ・検索エンジン向けにだけ残す */
.u-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 文節のかたまり：中では折り返さず、かたまりの切れ目でだけ改行させる */
.u-phrase {
  display: inline-block;
}

/* 表示の出し分け */
.u-sp { display: none; }
@media (max-width: 767px) {
  .u-sp { display: inline; }
  .u-pc { display: none; }
}

/* ---------- ヘッダー ----------
   KV の上に重ねる白い帯（最大1000px）。画面の上に固定してスクロールしても付いてくる
   （電話確認ダイアログ 2000 より下、ページ内のどの要素よりも上） */
.site-header {
  position: fixed;
  top: 20px;
  left: 0;
  width: 100%;
  z-index: 1000;
}
.site-header-inner {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  width: calc(100% - 40px);
  max-width: 1000px;
  height: 50px;
  margin: 0 auto;
  padding-left: 16px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.site-logo {
  margin-right: auto; /* ナビを右端に寄せる */
  line-height: 1;
}
.site-logo a {
  display: block;
  color: #333333;
  text-decoration: none;
  white-space: nowrap;
}
.site-logo img {
  width: 68px;
  vertical-align: middle;
}
.site-logo-name {
  margin-left: 12px;
  font-size: 15px;
  font-weight: 700;
  vertical-align: middle;
}

.site-nav ul {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}
.site-nav li {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.site-nav li + li {
  border-left: 1px solid #ccc;
}
.site-nav a {
  display: block;
  padding: 0 14px;
  color: #333333;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.site-nav a:hover,
.site-nav .is-current a {
  color: #239615;
}
/* お問い合わせ：右端の緑ボタン（ヘッダーの高さ 50px いっぱい） */
.site-nav .is-contact {
  margin-left: 10px;
  border-left: 0;
}
.site-nav .is-contact a {
  height: 50px;
  line-height: 50px;
  padding: 0 28px;
  background: #239615;
  color: #fff;
  transition: opacity 0.2s;
}
.site-nav .is-contact a:hover {
  color: #fff;
  opacity: 0.85;
}

/* SP用メニューボタン（PC では非表示） */
.site-menu-btn {
  display: none;
}

@media (max-width: 900px) {
  .site-header {
    top: 10px;
  }
  .site-header-inner {
    position: relative;
    width: calc(100% - 20px);
    height: 50px;
    padding-left: 10px;
  }
  .site-logo img {
    width: 56px;
  }
  .site-logo-name {
    margin-left: 8px;
    font-size: 13px;
  }

  /* 三本線ボタン：真ん中の線は span、上下は擬似要素 */
  .site-menu-btn {
    display: block;
    position: relative;
    width: 50px;
    height: 50px;
    background: #239615;
  }
  .site-menu-btn-bar,
  .site-menu-btn-bar::before,
  .site-menu-btn-bar::after {
    position: absolute;
    left: 50%;
    width: 24px;
    height: 2px;
    margin-left: -12px;
    background: #fff;
    transition: transform 0.25s, opacity 0.25s;
  }
  .site-menu-btn-bar {
    top: 50%;
    margin-top: -1px;
  }
  .site-menu-btn-bar::before,
  .site-menu-btn-bar::after {
    content: "";
    left: 0;
    margin-left: 0;
  }
  .site-menu-btn-bar::before { top: -8px; }
  .site-menu-btn-bar::after  { top: 8px; }
  .is-menu-open .site-menu-btn-bar { background: transparent; }
  .is-menu-open .site-menu-btn-bar::before { -webkit-transform: translateY(8px) rotate(45deg); transform: translateY(8px) rotate(45deg); }
  .is-menu-open .site-menu-btn-bar::after  { -webkit-transform: translateY(-8px) rotate(-45deg); transform: translateY(-8px) rotate(-45deg); }
  .site-menu-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  /* メニュー本体：ボタンを押すとヘッダーの下に開く
     開くとき：全体が上から 12px 下りながらフェードイン → 項目が 1 つずつ少し遅れて出る
     閉じるとき：全体がフェードアウト（visibility は消え終わってから hidden にして、閉じている間はタブ移動の対象にしない）
     display の切り替えはアニメーションできないので、opacity / transform / visibility で出し入れする（IE11 も可） */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: calc(100vh - 80px); /* 画面が低いときはメニューの中だけスクロール */
    overflow-y: auto;
    background: #fff;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
  }
  .is-menu-open .site-nav {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
  }
  /* 項目：左から少しずつ、上から順に出す */
  .site-nav li {
    opacity: 0;
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .is-menu-open .site-nav li {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  .is-menu-open .site-nav li:nth-child(1) { transition-delay: 0.1s; }
  .is-menu-open .site-nav li:nth-child(2) { transition-delay: 0.15s; }
  .is-menu-open .site-nav li:nth-child(3) { transition-delay: 0.2s; }
  .is-menu-open .site-nav li:nth-child(4) { transition-delay: 0.25s; }
  .is-menu-open .site-nav li:nth-child(5) { transition-delay: 0.3s; }
  .site-nav ul {
    display: block;
  }
  .site-nav li {
    font-size: 15px;
  }
  .site-nav li + li {
    border-left: 0;
    border-top: 1px solid #e5e5e5;
  }
  .site-nav a {
    padding: 16px 20px;
  }
  .site-nav .is-contact {
    margin-left: 0;
  }
  .site-nav .is-contact a {
    height: auto;
    line-height: 1.4;
    padding: 16px 20px;
    text-align: center;
  }
}

/* 動きを減らす設定の人には、SP メニューの動きを付けない（出る・消えるだけ） */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .site-nav,
  .is-menu-open .site-nav,
  .site-nav li {
    -webkit-transform: none;
    transform: none;
    transition: none;
  }
}

/* ---------- メイン ---------- */
/* 中身がまだの下層ページ（見出し h1 だけ）の仮：ヘッダーに隠れないよう上を空ける */
body:not(.page-top) .main > h1:first-child {
  padding: 120px 20px 40px;
}

/* ---------- 下層ページの見出し（写真＋左の緑の帯＋白い大見出し） ----------
   写真はページごとに style で指定（bg_style()）。上に黒を薄く重ねて文字を読みやすくする */
.page-hero {
  position: relative;
  overflow: hidden;
  height: 320px;
  padding-top: 70px; /* 固定ヘッダーの分。残りの高さの中で見出しを縦中央に */
  background-color: #333333;
  background-position: center;
  background-size: cover;
  color: #fff;
}
.page-hero::before,
.page-hero::after {
  content: "";
  position: absolute;
  top: 0;
}
/* 写真を暗くして、細かいドットの網をかける（TOP の「選ばれる3つの理由」と同じ網） */
.page-hero::before {
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.35);
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.6) 1px, transparent 1.3px);
  background-size: 5px 5px;
}
/* 左端の緑の直角三角形（直角は左下。左上の角から右下へ斜めに切る）。網の上に重ねる
   幅 160px の箱に「右上へ向かうグラデーション」を 50% で切り替えると、左上の角と右下の角を結ぶ線で分かれる */
.page-hero::after {
  left: 0;
  width: 160px;
  height: 100%;
  background: linear-gradient(to top right, rgba(40, 175, 70, 0.85) 50%, transparent 50%);
}
.page-hero .container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  z-index: 1;
  height: 100%;
}
.page-hero-title {
  font-size: 34px;
  font-size: clamp(25px, 19.80px + 1.387vw, 34px); /* KV のコピーと同じ SP 25px 〜 PC 34px */
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.05em;
}
.page-hero-en {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
}
@media (max-width: 767px) {
  .page-hero {
    height: 220px;
    padding-top: 66px;
  }
  .page-hero::after {
    width: 90px;
  }
}

/* ---------- フッター ----------
   黒いタイヤ跡の背景（KV と同じ画像）。上に電話バナー、下に 左ロゴ／右ナビ・QR・お問い合わせ */
.site-footer {
  padding: 50px 0 24px;
  background: #1c1c1c url(../images/common/bg_black.jpg) no-repeat center top;
  /* WebP 対応ブラウザは WebP（IE11 は image-set を知らないので上の JPG のまま） */
  background-image: -webkit-image-set(url(../images/common/bg_black.webp) type("image/webp"), url(../images/common/bg_black.jpg) type("image/jpeg"));
  background-image: image-set(url(../images/common/bg_black.webp) type("image/webp"), url(../images/common/bg_black.jpg) type("image/jpeg"));
  background-size: cover;
  color: #fff;
}
.site-footer a {
  color: #fff;
  text-decoration: none;
}

/* 電話バナー：画像の左右は人物がはみ出す透過部分なので、幅いっぱいに置く */
.footer-tel a {
  display: block;
  transition: opacity 0.2s;
}
.footer-tel a:hover {
  opacity: 0.85;
}
.footer-tel img {
  width: 100%;
}

/* 繋がらないとき用の番号：白地（右下だけ斜めに薄いグレー）に緑の枠、緑の大きな番号 */
.footer-tel-sub {
  max-width: 440px;
  margin: 28px auto 0;
}
.footer-tel-sub a {
  display: block;
  padding: 8px 10px 10px;
  border: 2px solid #239615;
  background: #fff;
  background: linear-gradient(160deg, #fff 55%, #e8eaea 55%);
  color: #333333;
  text-align: center;
  transition: opacity 0.2s;
}
.footer-tel-sub a:hover {
  opacity: 0.85;
}
.footer-tel-sub-note {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}
.footer-tel-sub-num {
  display: block;
  color: #239615;
  font-size: 30px;
  font-size: clamp(24px, 20.53px + 0.925vw, 30px); /* SP 24px 〜 PC 30px */
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

/* 下段：左にロゴ、右にナビ・QR・ボタン（右寄せ） */
.footer-main {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 40px;
}
.footer-logo {
  text-align: center;
}
.footer-logo img {
  display: block;
  width: 110px;
  margin: 0 auto;
}
.footer-logo-name {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.footer-side {
  text-align: right;
}
.footer-nav ul {
  font-size: 0; /* inline-block の隙間を消す */
}
.footer-nav li {
  display: inline-block;
  margin-left: 26px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.footer-nav li:first-child {
  margin-left: 0;
}
.footer-nav a:hover {
  color: #239615;
}

.footer-actions {
  margin-top: 22px;
  font-size: 0;
}
.footer-qr,
.footer-qr li,
.footer-contact {
  display: inline-block;
  vertical-align: middle;
}
.footer-qr li {
  margin-right: 24px;
}
.footer-qr img {
  display: block;
  width: 64px;
  background: #fff;
}
.footer-contact {
  width: 190px;
  padding: 14px 0;
  border: 1px solid #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  transition: background 0.2s, color 0.2s;
}
.site-footer .footer-contact:hover {
  background: #fff;
  color: #333333;
}

.footer-copyright {
  margin-top: 40px;
  font-size: 11px;
  text-align: center;
  opacity: 0.7;
}

/* SP：すべて中央そろえで縦に積む */
@media (max-width: 767px) {
  .site-footer {
    padding-top: 36px;
  }
  /* SP 用の縦長バナー：画面いっぱいだと大きすぎる幅（小さめのタブレット等）では 480px で止めて中央に */
  .footer-tel img {
    display: block;
    max-width: 480px;
    margin: 0 auto;
  }
  .footer-main {
    display: block;
    margin-top: 32px;
  }
  .footer-logo img {
    width: 96px;
  }
  .footer-side {
    margin-top: 28px;
    text-align: center;
  }
  .footer-nav li {
    margin: 0 10px 12px;
  }
  .footer-nav li:first-child {
    margin-left: 10px;
  }
  .footer-actions {
    margin-top: 12px;
  }
  .footer-qr {
    display: block;
  }
  .footer-qr li {
    margin: 0 12px;
  }
  .footer-contact {
    display: block;
    width: auto;
    max-width: 300px;
    margin: 24px auto 0;
  }
}

/* ---------- 電話確認ダイアログ（inc/footer.php の #telconfirm、js/main.js で開閉） ----------
   yama.show と同じ見た目。IE11 でも崩れないよう flex・CSS変数は使わず
   中央寄せは top/left 50% + transform、ボタンは inline-block で並べる */
.telconfirm-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
}
.telconfirm-overlay.is-open {
  display: block;
}
.telconfirm {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 360px;
  padding: 30px 20px 25px;
  background: #fff;
  border-radius: 8px;
  text-align: center;
}
.telconfirm-q {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: bold;
}
.telconfirm-num {
  margin: 0 0 22px;
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.telconfirm-btns {
  font-size: 0; /* inline-block の隙間を消す */
}
.telconfirm-btns li {
  display: inline-block;
  width: 44%;
  margin: 0 3%;
  font-size: 16px;
  vertical-align: top;
}
.telconfirm-btns a {
  display: block;
  padding: 12px 0;
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
}
.telconfirm-yes {
  background: #239615; /* はい：サイトの緑 */
  color: #fff;
}
.telconfirm-no {
  background: #e6e6e6;
  color: #333333;
}
.telconfirm-btns a:hover {
  opacity: 0.8;
}

/* ==========================================================
   IE11フォールバック（IE10/11 だけが読む）
   ここに書く指定は「なぜ必要か」をコメントで残す
   ========================================================== */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* TOP「3つの理由」の背景動画：IE11 は object-fit が無く、縦長の動画が枠の中で小さく表示されるため隠す（下の静止画 reason.jpg が見える） */
  .reason-movie {
    display: none;
  }
}