/* ========================================================================
   トップページの追加分（ピンク案）
   style.css のあとに読み込みます。ここに書いたものが「追加した分」です。
   - 装飾（葉・波）をSVGで表示するための指定
   - 写真を写真枠にはめる指定
   - アニメーション
   このファイルを外せば、色だけ変わった状態に戻ります。
   ======================================================================== */

:root {
  /* 装飾の色。ここを変えると葉と波の色が変わります */
  --leaf-dark: #F08FB0;
  --leaf-mid: #F7B4C8;
  --leaf-light: #FDDFE9;
  --leaf-vein: #FFFFFF;
  --wave-deep: #F294B2;
  --wave-main: #F7B8CA;
  --wave-soft: #FBD6E1;
  --wave-pale: #FEF0F4;
  --wave-accent-a: #F7DE93;   /* やわらかい黄。桜色に合わせて明るく */
  --wave-accent-b: #F9C0CE;   /* 明るい珊瑚色 */
}

/* --- 装飾をSVGで置くための指定 ------------------------------------------
   もとのCSSは .decor img を対象にしていたので、svg にも同じ指定を足します。 */
.decor svg { position: absolute; display: block; }
.decor .leaf { aspect-ratio: 1 / 1; }
.decor-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 葉と波の色。SVGの属性ではなくCSSで指定します。
   （var() を stop-color などの属性に直接書くと、効かないブラウザがあるため） */
.blade { fill: url(#g-leaf); }
.stem  { fill: none; stroke: var(--leaf-mid); stroke-width: 12; stroke-linecap: round; }
.vein  { fill: none; stroke: var(--leaf-vein); stroke-linecap: round; opacity: .7; }

.rb   { fill: none; stroke-linecap: round; }
.rb-1 { stroke: url(#g-w1); opacity: .58; }
.rb-2 { stroke: url(#g-w2); opacity: .68; }
.rb-3 { stroke: url(#g-w3); opacity: .52; }
.rb-4 { stroke: url(#g-w4); opacity: .58; }

.lf-1 { stop-color: var(--leaf-dark); }
.lf-2 { stop-color: var(--leaf-mid); }
.lf-3 { stop-color: var(--leaf-light); }

.w1-1 { stop-color: var(--wave-deep); }
.w1-2 { stop-color: var(--wave-main); }
.w1-3 { stop-color: var(--wave-soft); }
.w1-4 { stop-color: var(--wave-pale); }

.w2-1 { stop-color: var(--wave-main); }
.w2-2 { stop-color: var(--wave-soft); }
.w2-3 { stop-color: #FAD2DC; }

.w3-1 { stop-color: var(--wave-deep); }
.w3-2 { stop-color: var(--leaf-mid); }
.w3-3 { stop-color: var(--leaf-light); }

.w4-1 { stop-color: var(--wave-pale); }
.w4-2 { stop-color: var(--wave-accent-a); }
.w4-3 { stop-color: var(--wave-accent-b); }

/* --- ロゴ --------------------------------------------------------------
   ヘッダー（常に画面の上にある）とフッターの2か所に置きます。
   画像は 481×488px の正方形に近い形なので、object-fit:contain で
   つぶれないようにしています。角丸は付けません（円の縁が欠けるため）。 */
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  flex: 0 0 auto;
  width: 54px; height: 54px;
  object-fit: contain;
  display: block;
}
.brand-text { display: block; min-width: 0; }

@media (min-width: 1024px) {
  .brand-mark { width: 66px; height: 66px; }
}
/* 狭い画面では、事業所名が折り返さないように少し小さくします */
@media (max-width: 400px) {
  .brand-mark { width: 42px; height: 42px; }
  .brand { gap: 9px; }
}
.site-footer .brand-mark { width: 60px; height: 60px; }

/* 開いたときに、ロゴだけがふわっと出ます。
   事業所名の文字は最初から出したままにしています（名前が一瞬消えないように）。 */
/* 注：ここで scale は動かしません。
   animation の forwards は最後の値を保持するため、scale を動かすと
   カーソルを置いたときの拡大（下のホバー指定）が効かなくなります。 */
@keyframes markIn {
  from { opacity: 0; translate: 0 5px; }
  to   { opacity: 1; translate: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .site-header .brand-mark {
    opacity: 0;
    animation: markIn .6s cubic-bezier(.22,.61,.36,1) .08s forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .brand-mark { opacity: 1; animation: none; translate: none; }
}

/* --- 写真枠に実際の写真を入れる ---------------------------------------- */
.photo.has-photo { padding: 0; overflow: hidden; }   /* 背景色は残します。
     写真が斜めに開いていく途中、まだ出ていない部分に下地が見えるようにするためです */
.photo.has-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block; border-radius: inherit;
}

/* ========================================================================
   アニメーション
   動かすのは opacity と translate だけです。
   translate は transform とは別の指定なので、
   もとのCSSが持っている傾き（写真の -1.4度 など）を壊しません。
   ======================================================================== */

@keyframes riseIn {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: none; }
}

/* --- 1. 最初の画面：見出し→本文→写真 の順に現れる --------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 span,
  .hero p,
  .hero-photo {
    opacity: 0;
    animation: riseIn .72s cubic-bezier(.22,.61,.36,1) forwards;
  }
  .hero h1 span:nth-child(1) { animation-delay: .05s; }
  .hero h1 span:nth-child(2) { animation-delay: .17s; }
  .hero p                    { animation-delay: .30s; }
  .hero-photo                { animation-delay: .40s; }
}

/* --- 2. スクロールで下から浮かび上がる --------------------------------
   .reveal-ready は app.js が付けます。
   JavaScriptが動かない場合は付かないので、文章は最初から全部見えます。 */
.reveal-ready [data-reveal] > * {
  opacity: 0;
  translate: 0 16px;
  transition: opacity .55s ease-out,
              translate .55s cubic-bezier(.22,.61,.36,1);
}
.reveal-ready [data-reveal].is-in > * {
  opacity: 1;
  translate: none;
}
.reveal-ready [data-reveal].is-in > *:nth-child(2) { transition-delay: .07s; }
.reveal-ready [data-reveal].is-in > *:nth-child(3) { transition-delay: .14s; }
.reveal-ready [data-reveal].is-in > *:nth-child(4) { transition-delay: .21s; }
.reveal-ready [data-reveal].is-in > *:nth-child(5) { transition-delay: .28s; }

/* --- 3. カーソルを置いたときの反応 -------------------------------------
   @media (hover: hover) で囲みます。
   これがないと、スマホでタップしたあとに反応が残ったままになります。 */
@media (hover: hover) {

  /* ロゴ。カーソルを置くとほんの少し大きくなります */
  .site-header .brand-mark { transition: scale .2s ease-out; }
  .site-header .brand:hover .brand-mark { scale: 1.06; }

  /* 電話ボタン。もともとの「1px上・押すと2px沈む」を滑らかにします */
  .button {
    transition: transform .16s ease-out,
                box-shadow .16s ease-out,
                background-color .16s ease-out,
                border-color .16s ease-out;
  }
  .button:hover {
    box-shadow: 0 8px 0 #A02B58, 0 10px 22px #be40742e;
  }
  .button:active {
    transition-duration: .06s;
  }

  /* ヘッダーの電話ボタン */
  .header-call {
    transition: background-color .16s ease-out, transform .16s ease-out;
  }
  .header-call:hover { transform: translateY(-1px); }

  /* 「詳しく見る」系のリンク。矢印が右へすべります */
  .work-detail-link, .schedule-detail-link,
  .guide-detail-link, .about-detail-link {
    gap: 8px;
  }
  .work-detail-link::after, .schedule-detail-link::after,
  .guide-detail-link::after, .about-detail-link::after {
    content: '→';
    display: inline-block;
    transition: translate .18s ease-out;
  }
  .work-detail-link:hover::after, .schedule-detail-link:hover::after,
  .guide-detail-link:hover::after, .about-detail-link:hover::after {
    translate: 5px 0;
  }

  /* よくある質問の見出し */
  .faq-list summary {
    transition: background-color .16s ease-out;
  }
  .faq-list summary:hover { background: #FFFBFC; }

  /* メニューのリンク */
  .desktop-nav a, .mobile-nav nav a, .footer-nav a {
    transition: color .16s ease-out;
  }
}

/* --- 4. 動きを減らす設定の方には、すべて止めます -----------------------
   もとのCSSにも同じ趣旨の指定がありますが、
   translate は別指定なので、ここで明示的に止めます。 */
@media (prefers-reduced-motion: reduce) {
  .hero h1 span, .hero p, .hero-photo {
    opacity: 1;
    animation: none;
    translate: none;
  }
  .reveal-ready [data-reveal] > *,
  .reveal-ready [data-reveal].is-in > * {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* --- 印刷では動きも装飾も出しません ------------------------------------ */
@media print {
  .decor { display: none; }
  .hero h1 span, .hero p, .hero-photo,
  .reveal-ready [data-reveal] > * {
    opacity: 1 !important;
    translate: none !important;
    animation: none !important;
  }
}

/* ========================================================================
   2026-09-17 追加分
   ・トップ写真を大きく
   ・項目にカーソルを載せたときの反応
   ・よくある質問のスライド開閉に必要な指定
   ・全体の仕上げ
   ======================================================================== */

/* --- 1. トップの写真を大きく --------------------------------------------
   パソコンでは、写真の列を広げ、さらに画面の右端へ向かって伸ばします。
   伸ばす量は「本文枠の外側の余白 － 40px」。40px 残すのは、
   写真の右下に出る影（24px）がはみ出して横スクロールが出ないようにするためです。 */
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.2fr 1.08fr; gap: 44px; }
  .hero-photo {
    aspect-ratio: 3 / 2;                     /* 16:10 より少しだけ背を高く */
    justify-self: start;
    width: calc(100% + max(0px, (100vw - min(1120px, 100vw - 64px)) / 2 - 88px));
    margin-top: 0;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-photo { width: 100%; aspect-ratio: 3 / 2; }
}

/* --- 2. 項目にカーソルを載せたら、やや大きく --------------------------- */
@media (hover: hover) {
  .assurances .card,
  .steps .card,
  .work .card,
  .timeline li {
    position: relative;
    transition: scale .2s ease-out,
                box-shadow .2s ease-out,
                border-color .2s ease-out;
  }
  .assurances .card:hover,
  .steps .card:hover,
  .work .card:hover,
  .timeline li:hover {
    scale: 1.025;                 /* transform ではなく scale。
                                     カードの段差（transform）を壊さないため */
    z-index: 2;
    box-shadow: 0 14px 34px rgba(58, 42, 48, .13);
    border-color: var(--green);
  }
  .info > div { transition: background-color .18s ease-out; }
  .info > div:hover { background: var(--mint); }
}

/* --- 3. よくある質問のスライド開閉 --------------------------------------
   faq.js が、summary 以外の中身を .faq-body で包みます。
   包まれると `details > p` の指定が外れるので、ここで指定し直します。
   JavaScript が動かない場合は包まれず、元の指定のまま普通に開閉します。 */
.faq-list .faq-body { overflow: hidden; }
.faq-list .faq-body > p { padding: 0 4px 24px 38px; }

/* ＋ と − の向きが変わるところも、なめらかにします */
.faq-list summary:after { transition: rotate .25s ease-out; }
.faq-list details[open] summary:after { rotate: 180deg; }

/* --- 4. 全体の仕上げ ----------------------------------------------------- */

/* 見出しの上の短い線を、太く・角丸に・二色のグラデーションに */
.section-title:before {
  width: 56px;
  height: 5px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--green), var(--wave-accent-b));
}

/* カードの角と影を少し深く */
.card {
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(58, 42, 48, .05);
}

/* ボタンに、ごく薄い光沢を重ねます。
   background-color は元のまま残すので、カーソルを載せたときの色変化も効きます */
.button {
  background-image: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,0) 60%);
}

/* 電話番号を少し大きく、主色で */
.contact-actions .phone { color: var(--green-dark); }

/* --- 見出しの改行位置（2026-09-17 追加）---------------------------------

   もとのHTMLは、意味の切れ目で span に分けてあります。

     <h1><span>自分に合った一歩を、</span><span>ここから。</span></h1>

   ところが span が `display:inline-block` だったため、2つが横に並び、
   幅が足りないと**語の途中で折り返して**いました。
   span ごとに行を分けて、書いた人が意図した切れ目で折り返すようにします。 */
.hero h1 span,
.section-title span {
  display: block;
}

/* 画面が狭いとき、文字を200%に拡大したときなどは、
   span の中でもさらに折り返す必要があります。そのときの折り返し方の指定です。

   ・overflow-wrap: normal
       もとは `anywhere`（どこでも切ってよい）でした。日本語では不要なうえ、
       不自然な位置で切れる原因になるので戻します。
   ・word-break: auto-phrase
       日本語を**文節の切れ目**で折り返します。
       （対応していないブラウザでは無視されるだけで、害はありません）
   ・text-wrap: balance
       複数行になったとき、各行の長さをそろえます。 */
.hero h1,
.section-title,
.hero p,
.intro p {
  overflow-wrap: normal;
  word-break: auto-phrase;
  text-wrap: balance;
}

/* 本文は行数が多いので、balance ではなく pretty のほうが向いています
   （最終行が1文字だけ残るのを防ぐ指定。非対応ブラウザでは無視されます） */
.hero p,
.intro p {
  text-wrap: pretty;
}

/* --- 紹介区画の写真枠を縦長に（2026-09-17）------------------------------
   事業所に飾っている絵（縦長 2776×3566px）を入れるため、
   もとの 3:2（横長）から 7:9（縦長）に変えました。

   7:9 = 0.778 は、絵の写真の縦横比 0.7785 とほぼ同じです。
   ぴったり合わせてあるので、object-fit: cover でもほとんど切れません。

   枠はもともと「白い縁10px・角丸・1.2度の傾き・背面に色面」という
   額に入れて飾ったような作りなので、絵との相性が良い場所です。 */
.about-photo { aspect-ratio: 7 / 9; }

/* --- 見出しが3行になる問題（2026-09-29 修正）----------------------------
   実際に画面で測ったところ、こうなっていました。

     1行目「自分に合った一歩を、」が必要な幅 … 560px
     文字の列の幅（写真を大きくした後）      … 556px

   **4px足りずに3行**になっていました。
   写真の大きさは決まったものなので動かさず、見出しを少しだけ小さくします。

     60px → 56px（56px なら1行目は 523px。33px の余裕）

   資料8の「h1は48〜60px」の範囲に収まっています。 */
@media (min-width: 1024px) {
  h1 { font-size: clamp(3rem, 4.2vw, 3.5rem); }
}

/* --- 建物の写真の切り取り位置（2026-09-29 修正）-------------------------
   元の写真は 1254×1254 の正方形で、枠は 3:2 の横長です。
   真ん中で切ると屋根も空も切れて、日よけの列だけが残っていました。
   上寄りで切って、屋根と空が入るようにします。 */
.hero-photo img { object-position: 50% 32%; }

/* 2026-09-29 追記：1024px ちょうどでは、見出しが clamp の下限 48px になります。
   このとき1行目は 448px 必要ですが、文字の列は 440px しかなく3行になっていました。
   列の比を 1fr:1.08fr → 1.2fr:1.08fr に変え、どの幅でも収まるようにしています。

     1024px … 文字482px / 必要448px（余裕34px）
     1440px … 文字566px / 必要523px（余裕43px）

   写真は 1440px で 582px（現行案531px より大きいまま）。 */