@charset "UTF-8";
/* ==========================================================================
   支援方針（policy.html）専用スタイル
   ・共通部分（ヘッダー・フッター・アニメーション）は style.css
   ・パソコン版は元サイトと同じく「1440px 幅のデザインを中央寄せ」または「% で伸縮」
   ========================================================================== */

/* 見出し用の手書き風フォント（元サイトでアップロードされている「07ラノベPOP」） */
@font-face {
  font-family: "LightNovelPOP";
  src: url("../assets/fonts/lightnovelpop.woff2") format("woff2");
  font-display: swap;
}
.plc { --font-pop: "LightNovelPOP", "07ラノベPOP", "07LightNovelPOP", var(--font); }

.plc section { position: relative; }
:where(.plc) :where(p, h1, h2, h3, h4, h5, h6) { margin: 0; font-size: inherit; font-weight: inherit; }

/* --------------------------------------------------------------------------
   ページタイトル（POLICY）
   -------------------------------------------------------------------------- */
.plc .pg-hero { height: 338px; overflow: hidden; }
.plc .pg-hero__bg { position: absolute; inset: 0; }
.plc .pg-hero__sub {
  position: absolute; left: 0; right: 0; top: 116px;
  font-size: 16px; line-height: 16px; letter-spacing: .4em;
  color: var(--c-text2); text-align: center;
}
.plc .pg-hero__title {
  position: absolute; left: 0; right: 0; top: 133px;
  font-family: var(--font-pop); font-size: 50px; line-height: 70px;
  color: var(--c-title); text-align: center;
}

/* --------------------------------------------------------------------------
   3つの支援方針
   -------------------------------------------------------------------------- */
.pc-policy { height: 874px; background: #fff; }
.pc-policy__icon { position: absolute; top: 65px; left: calc(50% - 27px); width: 54px; height: 64px; }
.pc-policy__icon svg { width: 100%; height: 100%; }
.pc-policy__title {
  position: absolute; top: 159px; left: 0; right: 0;
  font-size: 30px; line-height: 42px; font-weight: 700; color: var(--c-title); text-align: center;
}
.pc-policy__lead {
  position: absolute; top: 238px; left: calc(50% - 420px); width: 838px;
  font-size: 16px; line-height: 22.4px; color: var(--c-text2); text-align: center;
}
.pc-cols {
  position: absolute; top: 372px; left: 0; right: 0; margin: 0 auto;
  width: max(980px, 73.611%); height: 502px;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.pc-col { position: relative; }
.pc-col__img { position: absolute; top: 74px; left: calc(50% - 76px); width: 152px; height: 151px; object-fit: cover; }
.pc-col--2 .pc-col__img { left: calc(50% - 78px); }
.pc-col__title {
  position: absolute; top: 258px; left: 0; right: 0;
  font-size: 25px; line-height: 36px; font-weight: 700; text-align: center;
}
.pc-col--1 .pc-col__title { color: #1668b3; }
.pc-col--2 .pc-col__title { color: #ff7c00; }
.pc-col--3 .pc-col__title { color: var(--c-title); }
.pc-col__text {
  position: absolute; top: 311px; left: calc(50% - 143.5px); width: 287px;
  font-size: 14px; line-height: 22.4px; letter-spacing: .05em; color: var(--c-text2); text-align: center;
}

/* --------------------------------------------------------------------------
   職員研修の実施について（4 枚の写真の上に白い帯）
   -------------------------------------------------------------------------- */
.pc-training { height: 532px; overflow: hidden; }
.pc-training__photos { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 5px; }
.pc-training__img { width: 100%; height: 532px; object-fit: cover; background: #b9bbbd; }
.pc-training__band { position: absolute; left: 0; right: 0; top: 338px; height: 155px; background: #fff; }
.pc-training__title {
  position: absolute; top: 57px; left: calc(39.6% - 386.5px); width: 386px;
  font-size: 28px; line-height: 40px; font-weight: 700; color: var(--c-title); text-align: center;
}
.pc-training__text {
  position: absolute; top: 42px; left: calc(44.6% + 32.3px); width: 483px;
  font-size: 14px; line-height: 22.4px; letter-spacing: .05em; color: var(--c-text2); text-align: center;
}

/* --------------------------------------------------------------------------
   私たちの目指すところ
   -------------------------------------------------------------------------- */
.pc-mission { height: 392px; background: rgba(255, 255, 255, .8); }
.pc-mission__title {
  position: absolute; top: 84px; left: 0; right: 0;
  font-size: 30px; line-height: 60px; font-weight: 700; letter-spacing: .05em; color: #ff4040; text-align: center;
}
.pc-mission__line { position: absolute; top: 164px; left: calc(50% - 65px); width: 128px; height: 5px; border-top: 1px solid #424242; }
.pc-mission__text {
  position: absolute; top: 207px; left: calc(50% - 382px); width: 763px;
  font-size: 14px; line-height: 22.4px; letter-spacing: .05em; color: var(--c-text2); text-align: center;
}

/* --------------------------------------------------------------------------
   スタッフ配置状況・ご利用料金・支援プログラム・その他（サーモンピンクの背景）
   -------------------------------------------------------------------------- */
.pc-info { height: 1414px; background: #fc7474; overflow: hidden; }
.pc-info__bg { position: absolute; inset: 0; opacity: .09; }
.pc-info::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 101px; z-index: 1;
  background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 100 1920 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFFFFF' d='M0 100 960 300 1920 100z'/%3E%3C/svg%3E") 50% 0 / 8.3333% 100% repeat-x;
  pointer-events: none;
}
.pc-block > * { position: absolute; z-index: 2; }
.pc-block__icon svg { width: 100%; height: 100%; }
.pc-block__title { font-size: 25px; line-height: 36px; font-weight: 700; color: #fff; text-align: center; }

/* 表 */
.pc-table { display: flex; flex-direction: column; gap: 3.33px; }
.pc-row { display: flex; height: 51px; }
.pc-cell { height: 51px; padding-top: 14px; font-size: 16px; line-height: 22.4px; color: var(--c-text2); }
.pc-cell--label { padding-left: 25px; background: #ffd8c7; letter-spacing: .05em; }
.pc-cell--value { background: #fff; letter-spacing: .2em; text-align: center; }

/* 左列（右寄せ）：スタッフ配置状況　※ 左列の右端 = 45.45% + 1px */
.pc-block__icon--staff { top: 171px; left: calc(45.45% - 250px); width: 53px; height: 64px; }
.pc-block--staff .pc-block__title { top: 257px; left: calc(45.45% - 419px); width: 395px; }
.pc-table--staff { top: 344px; left: calc(45.45% - 435px); width: 422px; }
.pc-table--staff .pc-cell--label { width: 316px; }
.pc-table--staff .pc-cell--value { width: 106px; }

/* 右列：ご利用料金・支援プログラム */
.pc-block__icon--fee { top: 189px; left: calc(54.6% + 193px); width: 64px; height: 46px; }
.pc-block--fee .pc-block__title { top: 257px; left: calc(54.6% + 47px); width: 359px; }
.pc-table--fee { top: 344px; left: calc(54.6% + 14px); width: 422px; }
.pc-table--fee .pc-cell--label { width: 220px; }
.pc-table--fee .pc-cell--value { width: 202px; }

.pc-block__icon--prog { top: 558px; left: calc(54.6% + 193px); width: 64px; height: 46px; }
.pc-block--prog .pc-block__title { top: 624px; left: calc(54.6% + 45px); width: 359px; }
.pc-btns { top: 678px; left: calc(54.6% + 48px); display: flex; flex-direction: column; gap: 8px; }
.pc-btn { width: 353px; height: 50px; font-size: 14px; line-height: 19.6px; }
.pc-btn:hover { border-color: #fff; }

/* 中央：その他 */
.pc-block__icon--other { top: 953px; left: calc(50% - 32px); width: 64px; height: 58px; }
.pc-block--other .pc-block__title { top: 1036px; left: calc(50% - 111px); width: 222px; }
.pc-table--other { top: 1118px; left: calc(50% - 454px); width: 909px; }
.pc-table--other .pc-cell--label { width: 267px; }
.pc-table--other .pc-cell--value { width: 642px; padding-left: 26px; letter-spacing: normal; text-align: left; }
.pc-table--other .pc-cell--value a { color: #ff6161; text-decoration: underline; }

/* --------------------------------------------------------------------------
   関連ページ（4 つのアイコン）
   -------------------------------------------------------------------------- */
.plc .pg-links { display: grid; grid-template-columns: repeat(4, 1fr); height: 326px; }
.plc .pg-link { position: relative; background: rgba(255, 255, 255, .8); }
.plc .pg-link__img { position: absolute; top: 44px; left: calc(50% - 112.5px); width: 225px; height: 225px; }
.plc .pg-link__img img { width: 100%; height: 100%; object-fit: cover; }
.plc .pg-link__title {
  position: absolute; top: 290px; left: calc(50% - 107px); width: 214px;
  font-size: 25px; line-height: 35px; font-weight: 700; color: var(--c-title); text-align: center;
}

/* ==========================================================================
   アニメーション（このページで新しく使う種類）
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* ふわっと表示（Fade In） */
  .a-fade { animation: 1200ms cubic-bezier(.445, .05, .55, .95) var(--d, 1ms) 1 normal backwards m-fadeIn; }
  /* アイコン：3 秒ごとにぷるぷる（ずっと繰り返す） */
  .p-rubber { animation: 3000ms linear 1ms infinite m-rubber; }
}

/* ==========================================================================
   スマホ（750px以下）
   ========================================================================== */
@media (max-width: 750px) {
  /* タイトル */
  .plc .pg-hero { height: 156px; }
  .plc .pg-hero__sub { left: 20px; right: 20px; top: 53px; font-size: 12px; line-height: 12px; }
  .plc .pg-hero__title { left: 20px; right: 20px; top: 66px; font-size: 25px; line-height: 35px; }

  /* 3つの支援方針：流し込み */
  .pc-policy { height: auto; padding-top: 30px; }
  .pc-policy__icon, .pc-policy__title, .pc-policy__lead, .pc-cols,
  .pc-col__img, .pc-col__title, .pc-col__text { position: static; }
  .pc-policy__icon { width: 33px; height: 40px; margin: 0 auto; }
  .pc-policy__title { margin: 10px 20px 0; font-size: 20px; line-height: 29px; }
  .pc-policy__lead { width: auto; margin: 20px 20px 11px; font-size: 12px; line-height: 16.8px; }
  .pc-cols { display: block; width: auto; height: auto; margin: 0; }
  .pc-col { padding: 20px 0 16px; }
  .pc-col--1 { padding: 30px 0 10px; }
  .pc-col--3 { padding-bottom: 30px; }
  .pc-col__img, .pc-col--2 .pc-col__img { display: block; width: 110px; height: 110px; margin: 0 auto; }
  .pc-col__title { margin: 10px 20px 0; font-size: 20px; line-height: 29px; }
  .pc-col__text { width: auto; margin: 10px 35px 0; font-size: 12px; line-height: 19.2px; }

  /* 職員研修：写真 → 白い帯 → 写真 */
  .pc-training { height: auto; margin-bottom: 0; display: flex; flex-direction: column; background: #fff; }
  .pc-training__photos { display: contents; }
  .pc-training__img { height: auto; aspect-ratio: 320 / 170; }
  .pc-training__img--1 { order: 1; }
  .pc-training__img--2, .pc-training__img--3 { display: none; }
  .pc-training__img--4 { order: 3; }
  .pc-training__band { position: static; order: 2; height: auto; padding: 37px 20px 38px; }
  .pc-training__title, .pc-training__text { position: static; width: auto; }
  .pc-training__title { font-size: 20px; line-height: 29px; }
  .pc-training__text { margin-top: 20px; font-size: 12px; line-height: 19.2px; }

  /* 私たちの目指すところ */
  .pc-mission { height: auto; padding: 30px 20px; }
  .pc-mission__title, .pc-mission__line, .pc-mission__text { position: static; }
  .pc-mission__title { font-size: 20px; line-height: 40px; }
  .pc-mission__line { width: 87px; margin: 10px auto 0; }
  .pc-mission__text { width: auto; margin-top: 20px; font-size: 12px; line-height: 19.2px; }

  /* スタッフ・料金・支援プログラム・その他 */
  .pc-info { height: auto; padding: 50px 20px 42px; }
  .pc-info::before { height: 20px; }
  .pc-block > * { position: static; }
  .pc-block + .pc-block { margin-top: 32px; }
  .pc-block__icon { margin: 0 auto; }
  .pc-block__icon--staff { width: 32px; height: 38px; }
  .pc-block__icon--fee, .pc-block__icon--prog { width: 45px; height: 33px; }
  .pc-block__icon--other { width: 42px; height: 39px; }
  .pc-block__title,
  .pc-block--staff .pc-block__title, .pc-block--fee .pc-block__title,
  .pc-block--prog .pc-block__title, .pc-block--other .pc-block__title { width: auto; margin-top: 15px; font-size: 20px; line-height: 28px; }
  .pc-block--fee .pc-block__title { font-size: 18px; line-height: 26px; }

  .pc-table, .pc-table--staff, .pc-table--fee, .pc-table--other { width: auto; margin-top: 20px; }

  /* スタッフ表：2 列のまま */
  .pc-table--staff { gap: 6.78px; }
  .pc-table--staff .pc-row { height: 38px; }
  .pc-table--staff .pc-cell { height: 38px; padding-top: 10px; font-size: 12px; line-height: 16.8px; }
  .pc-table--staff .pc-cell--label { width: auto; flex: 1; padding-left: 22px; }
  .pc-table--staff .pc-cell--value { width: 87px; flex: none; }

  /* 料金表・その他：項目名の下に内容 */
  .pc-table--fee, .pc-table--other { gap: 10.5px; }
  .pc-table--fee .pc-row, .pc-table--other .pc-row { display: block; height: auto; }
  .pc-table--fee .pc-cell, .pc-table--other .pc-cell { width: auto; height: auto; }
  .pc-table--fee .pc-cell--label, .pc-table--other .pc-cell--label {
    height: 38px; padding: 9px 0 0; font-size: 14px; line-height: 19.6px; text-align: center;
  }
  .pc-table--fee .pc-cell--value { height: 50px; margin-top: 1px; padding-top: 13px; }
  .pc-table--other .pc-cell--value {
    display: flex; align-items: center; justify-content: center; min-height: 50px; margin-top: 1px;
    padding: 13px 0; font-size: 12px; line-height: 16.8px; text-align: center;
  }
  /* 内容の文字枠の幅は元サイトの行ごとの値（改行位置を合わせるため） */
  .pc-table--other .pc-row:nth-child(1) .pc-cell--value > span { max-width: 219px; }
  .pc-table--other .pc-row:nth-child(2) .pc-cell--value > span { max-width: 257px; }
  .pc-table--other .pc-row:nth-child(3) .pc-cell--value > span { max-width: 181px; }
  .pc-table--other .pc-row:nth-child(4) .pc-cell--value > span { max-width: 238px; }
  /* 元サイトでは「レクリエーション代」だけ左寄せ */
  .pc-table--other .pc-row:nth-child(3) .pc-cell--label { text-align: left; padding-left: 60px; }

  /* 支援プログラムのボタン */
  .pc-btns { margin-top: 19px; gap: 11px; }
  .pc-btn { width: auto; height: 42px; font-size: 13.1px; line-height: 18.34px; }

  /* 関連ページ */
  .plc .pg-links { height: auto; grid-template-columns: repeat(2, 133px); justify-content: center; column-gap: 14px; row-gap: 20px; padding: 20px 0 31px; background: rgba(255, 255, 255, .8); }
  .plc .pg-link { background: none; }
  .plc .pg-link__img { position: static; display: block; width: 133px; height: 133px; }
  .plc .pg-link__title { position: static; width: auto; font-size: 16px; line-height: 23px; }
}