@charset "utf-8";
/* =====================================================================
   field-c.net 2026 リニューアル トップページ（index.php）
   - 共通部品（ヘッダ・カード・交通費・CTA・お問合せ・フッタ）は fc2026.css
   - メディアクエリはファイル末尾に集約
   ===================================================================== */

/* ---------------------------------------------------------------------
   ファーストビュー
   PC：.hero に .is-pin が付くと .hero_stage が sticky になる。
       下のキャッチはデザインと同じ大きさ（大きい文字 75px／1680px = 4.46vw）。
       4行すべてを一度に見せるのではなく、前半2行 → 後半2行の順に写真の上へ出す。
       その間、集合写真も同じスクロールに連動して少し下げ、cover_bottom_img の裏へ沈める。
       index.php 末尾のスクリプトがスクロール量から移動量を求めて各要素の transform に書き込み、
       ロゴ側のキャッチが上へ抜け（フレームアウト）、下のキャッチが下から入って（フレームイン）
       集合写真の上まで上がる。途中と最後に止まる区間があり、使い切ると固定が外れる。
   TAB・SP（と PC の視差効果オフ時）：固定せず、キャッチを縦に並べて表示する。
--------------------------------------------------------------------- */
/* FV はページの最上部から始め、半透明のヘッダの裏にオレンジの面を回り込ませる。
   中身と背景の写真はヘッダの高さ分（--gh-full）下げる */
.hero { position: relative; margin-top: calc(var(--gh-full) * -1); }
.hero_stage {
  position: relative;
  overflow: hidden;
  background: var(--c-orange) url(../img/cover_bg.webp) 50% var(--gh-full) / 100% auto no-repeat;
}
.hero.is-pin .hero_stage { position: sticky; top: 0; }

.hero_inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--gh-full) + clamp(20px, 3.4vw, 58px));
  color: #fff;
  text-align: center;
}
.hero_head {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
/* 移動量は index.php 末尾のスクリプトが各要素の transform に直接書き込む */
.hero.is-pin .hero_head { will-change: transform; }
.hero_catch {
  font-size: clamp(18px, 3vw, 50px);
  font-weight: bold;
  letter-spacing: .28em;
  line-height: 1.3;
}
.hero_catch span { font-weight: normal; letter-spacing: 0; }
.hero_logo { width: min(84%, max(31.5vw, 500px)); margin-top: .4em; }
.hero_logo img { width: 100%; }
/* ロゴの上の冠。基本はロゴ幅の 5.67%（PC で 30px）
   （ロゴ幅 min(84%, max(31.5vw, 500px)) × 5.67% を vw と px に展開した値）。
   ただしロゴが 500px で止まる TAB ではロゴに比べて画面が狭く、冠が上のキャッチより大きく見えるため、
   キャッチ（3vw）の 0.9 倍を上限にする（SP は 18px を下限に残す） */
.hero_logo_sub { display: block; font-size: min(4.76vw, max(1.79vw, 28.35px), max(2.7vw, 18px)); line-height: 1.8; }

/* 子供から高齢者まで…（PCは集合写真の背後を通って上がる） */
.hero_sub {
  margin-top: 1.6em;  /* ロゴの下端から大きい文字1字分（TAB・SPデザイン） */
  font-family: var(--ff-head);
  font-size: clamp(14px, 2.6vw, 28px);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.5;
  text-shadow: 0 0 .6em rgba(200, 80, 0, .35);
}
.hero_sub span { display: block; }
.hero_sub b { font-size: 1.75em; font-weight: 900; letter-spacing: .02em; }
.hero_sub span:nth-child(n+3) b { font-size: 1.55em; }
.hero_sub_l { margin-top: .4em; }
.hero.is-pin .hero_sub {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  transform: translateY(100vh);  /* スクリプトが動くまでは画面外に置く */
  will-change: transform;
}
/* 行送りは大きい文字の 1.2 倍、2つのまとまりの間はさらに 0.88 字分（デザインの比率） */
.hero.is-pin .hero_sub { font-size: 2.23vw; letter-spacing: 0; }
.hero.is-pin .hero_sub span { line-height: 2.4; }
.hero.is-pin .hero_sub b,
.hero.is-pin .hero_sub span:nth-child(n+3) b { font-size: 2em; line-height: 1; letter-spacing: .02em; }
.hero.is-pin .hero_sub_l { margin-top: 1.76em; }
.hero.is-pin .hero_team { will-change: transform; }

/* 集合写真の下端は cover_bottom_img の不透明部分（中央で幅の約7.9%）の裏に隠す */
.hero_team { position: relative; z-index: 2; width: min(96%, max(53.6vw, 880px)); margin-top: clamp(12px, 1.4vw, 24px); }
.hero_bottom {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: -9vw;
}

/* ---------------------------------------------------------------------
   フィールドクルーズ？
--------------------------------------------------------------------- */
.intro { overflow: hidden; background: var(--c-bg); }
.intro_inner {
  display: grid;
  grid-template-columns: 1fr min(594px, 50%);
  width: min(100% - var(--gutter) * 2, 1190px);
  margin-inline: auto;
}
.intro_body { padding-block: clamp(48px, 5.6vw, 100px); }
.intro_ttl {
  color: var(--c-orange);
  font-family: var(--ff-head);
  font-size: var(--fs-h2);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.3;
}
.intro_txt { margin-top: 1.2em; max-width: 27.5em; line-height: 2; }
.intro_free {
  display: inline-block;
  margin-top: 1em;
  padding: .2em .8em;
  background: var(--c-gray);
  color: var(--c-red);
  font-size: var(--fs-xl);
  font-weight: bold;
  letter-spacing: .18em;
}
.intro_feature {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  margin-top: 1.4em;
}
.intro_feature li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3em;
  padding: .2em clamp(10px, 1.4vw, 24px);
  color: var(--c-orange);
  font-size: var(--fs-m);
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}
.intro_feature li + li { border-left: 1px solid #dddddd; }
.intro_feature li:first-child { padding-left: 0; }
.intro_feature img { width: auto; height: clamp(40px, 3.6vw, 60px); }
.intro_line {
  display: flex;
  align-items: center;
  gap: 1em;
  width: min(100%, 560px);
  margin-top: 1.4em;
  padding: 1em 1.4em;
  border-radius: 8px;
  background: var(--c-line-bg);
  color: #000;
  font-size: var(--fs-s);
  line-height: 1.5;
  transition: opacity .2s;
}
.intro_line img { flex: none; width: clamp(40px, 3.4vw, 58px); }
.intro_line b { display: block; color: #448855; font-size: clamp(17px, 12px + 1.25vw, 32px); letter-spacing: .02em; white-space: nowrap; }

.intro_visual { position: relative; align-self: end; padding-top: clamp(32px, 3vw, 52px); }
.intro_visual img { width: 100%; }
.intro_more {
  position: absolute;
  right: -6vw;
  bottom: 0;
  left: 8%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5em;
  padding: .4em 2.4em .4em 2em;
  background: var(--c-orange);
  clip-path: polygon(1.6em 0, 100% 0, 100% 100%, 0 100%);
  color: #fff;
  font-size: var(--fs-xl);
  font-weight: bold;
  letter-spacing: .1em;
  white-space: nowrap;
  transition: background-color .2s;
}
.intro_more::after {
  content: "";
  position: absolute;
  right: 1.2em;
  top: 50%;
  width: .38em;
  height: .38em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

/* ---------------------------------------------------------------------
   フィールドクルーズでできること
   車の写真は左端の外へはみ出させ、下部を次の交通費セクションの下に潜らせる
--------------------------------------------------------------------- */
.cando { padding-top: var(--sec-pad); background: var(--c-gray); }
.cando_ttl {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: .2em;
  margin-bottom: clamp(24px, 2.6vw, 44px);
  padding-inline: var(--gutter);
}
.cando_ttl .sec_logo { height: 1.08em; transform: translateY(.12em); }
.cando_ttl small { font-size: .55em; }

.cando_foot {
  position: relative;
  padding: clamp(56px, 6vw, 110px) var(--gutter) clamp(64px, 7vw, 120px);
  text-align: center;
}
.cando_msg {
  position: relative;
  z-index: 1;
  margin-bottom: 1.4em;
  color: var(--c-orange);
  font-size: var(--fs-xl);
  font-weight: bold;
  line-height: 1.75;
}
.cando_foot .btn { position: relative; z-index: 1; }
.cando_car {
  position: absolute;
  bottom: 0;
  left: -3vw;
  width: 31.7vw;
  transform: translateY(35%);
}

/* ---------------------------------------------------------------------
   訪問介護事業所バナー
--------------------------------------------------------------------- */
.banner { padding-block: var(--sec-pad) calc(var(--sec-pad) + 6vw); background: var(--c-bg); }
.banner a { display: block; width: min(100% - var(--gutter) * 2, var(--w-narrow)); margin-inline: auto; }
.banner span {
  display: block;
  margin-top: .8em;
  color: #638c63;
  font-size: var(--fs-s);
  font-weight: bold;
  text-align: center;
}

/* ---------------------------------------------------------------------
   よくあるご質問
--------------------------------------------------------------------- */
.faq {
  position: relative;
  padding-block: clamp(24px, 3vw, 60px) var(--sec-pad);
  background: var(--c-yellow);
}
.faq::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  width: 100%;
  aspect-ratio: 1920 / 200;
  background: url(../img/bg_wave_lightyellow.svg) 50% 100% / 100% 100% no-repeat;
}
.faq_ttl { display: flex; flex-direction: column; align-items: center; }
.faq_ttl .sec_logo { height: 1.1em; }
.faq_list {
  display: grid;
  gap: clamp(14px, 1.6vw, 26px);
  width: min(100% - var(--gutter) * 2, var(--w-narrow));
  margin: clamp(24px, 2.6vw, 44px) auto 0;
}
/* 開閉は CSS のみでアニメーション（::details-content の高さを auto まで補間する）。
   未対応ブラウザでは従来どおり即時に開閉する */
.faq_item { overflow: hidden; border-radius: var(--radius); background: #fff; interpolate-size: allow-keywords; }
.faq_item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .35s ease, content-visibility .35s allow-discrete;
}
.faq_item[open]::details-content { block-size: auto; }
.faq_item summary {
  position: relative;
  padding: 1.2em 3.6em 1.2em 1.7em;
  color: var(--c-orange);
  font-size: var(--fs-l);
  font-weight: bold;
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
}
.faq_item summary::-webkit-details-marker { display: none; }
.faq_item summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1em;
  width: 1.2em;
  height: 1.2em;
  margin-top: -.6em;
  border-radius: 50%;
  background: var(--c-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 12l10 10 10-10' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 55% / 55% no-repeat;
  transition: transform .2s, background-color .2s;
}
.faq_item[open] summary::after { background-color: #dddddd; transform: rotate(180deg); }
.faq_a { padding: 0 1.7em 2em; color: var(--c-text-sub); }
.faq_lead { margin-bottom: .8em; color: var(--c-text); font-size: var(--fs-l); font-weight: bold; line-height: 1.55; }
.faq_a p:not(.faq_lead) { line-height: 1.85; }

/* =====================================================================
   メディアクエリ
   ===================================================================== */

/* ---- ホバー（マウス環境のみ） ---- */
@media (hover: hover) {
  .intro_line:hover { opacity: .75; }
  .intro_more:hover { background: var(--c-red); }
  .faq_item summary:hover { color: var(--c-red); }
}

/* ---- タブレット ---- */
@media (max-width: 1024px) {
  /* FV：集合写真を縮め、下端は cover_bottom_img の裏に隠す */
  .hero_team { width: 70%; }

  /* フィールドクルーズ？：本文は左に 8vw 空け、画像は右端の外へはみ出させる */
  .intro_inner { grid-template-columns: 1fr 40%; width: auto; margin: 0 0 0 8vw; }
  .intro_visual { margin-right: -8vw; }
  .intro_more { right: 8vw; left: auto; font-size: var(--fs-l); }  /* 帯の幅は文字に合わせ、狭い幅では左へ伸ばす（斜めの切り欠きに文字が掛からないように） */
  .intro_feature { justify-content: space-between; }
  .intro_feature li { padding-inline: 1.2vw; font-size: clamp(15px, 1.8vw, 18px); }

  /* 車：TABはセクション下端に揃える */
  .cando_car { left: -5.3vw; width: 29vw; transform: none; }
}

/* ---- スマートフォン ---- */
@media (max-width: 767px) {
  .hero_team { width: 96%; }
  .hero_bottom { margin-top: -16vw; }

  /* フィールドクルーズ？：1カラム、特色アイコンは2×2 */
  .intro_inner { display: block; width: auto; margin: 0; padding-inline: var(--gutter); }
  .intro_body { padding-bottom: 32px; }
  .intro_ttl { text-align: center; }
  .intro_txt { font-size: 18px; }
  .intro_free { display: table; margin-inline: auto; }
  .intro_feature { grid-template-columns: repeat(2, 1fr); justify-content: stretch; margin-inline: 4%; }
  .intro_feature li { padding: 1em 0; font-size: min(20px, 5.2vw); }
  .intro_feature li + li { border-left: 0; }
  .intro_feature li:nth-child(even) { border-left: 1px solid #ddd; }
  .intro_feature li:nth-child(-n+2) { border-bottom: 1px solid #ddd; }
  .intro_feature img { height: 52px; }
  .intro_line { margin-inline: auto; padding: .8em 1em; }
  .intro_visual { width: 78%; margin-inline: auto; padding-top: 0; }
  .intro_more { position: relative; right: auto; left: auto; margin: -2.4em calc(-14% - var(--gutter)) 0 -14%; }

  /* できること：メッセージは3行に収め、車は大きく左へはみ出させる */
  .cando_msg { font-size: min(var(--fs-xl), 4.6vw); }
  .cando_foot { padding-bottom: 34vw; }
  .cando_car { left: -11.5vw; width: 62vw; transform: translateY(10%); }
}