@charset "utf-8";

/* 写真、白いパネル、余白でリズムをつくる。ページ固有のCSSと文字基準の後に読み込む。 */
:root {
  --scene-shadow: 0 12px 36px rgba(112, 65, 26, .075);
  --scene-cream: #fff7e7;
  --scene-yellow: #ffe6a3;
  --scene-apricot: #ffdbb8;
  --scene-paper: #fffaf0;
  /* 外観写真の看板文字から拾ったオレンジ。背景の線とパネルの目印に使用。 */
  --scene-sign-orange: #f36b16;
  --scene-sign-rule: #f69441;
}

/* ホーム：室内写真を背景に、読みやすい白いパネルを重ねる。 */
:root .homeV3.homeRefined .homeHeroRefined {
  isolation: isolate;
  display: flex;
  align-items: center;
  width: calc(100% - 48px) !important;
  max-width: 1600px !important;
  min-height: 660px;
  margin: 92px auto 0;
  padding: 48px clamp(28px, 4vw, 64px);
  border-radius: 28px;
  background: var(--scene-paper);
}
:root .homeV3.homeRefined .homeHeroScene {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  margin: 0;
}
:root .homeV3.homeRefined .homeHeroPhotoFrame { height: 100%; border-radius: 0; }
:root .homeV3.homeRefined .homeHeroPhoto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 58%;
}
:root .homeV3.homeRefined .homeHeroCopy {
  width: min(530px, 52%);
  padding: clamp(28px, 3.2vw, 48px);
  border-radius: 20px 64px 20px 20px;
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--scene-shadow);
}
:root .homeV3.homeRefined .homeHeroConcept {
  margin-top: 22px;
  font-size: clamp(30px, 2.9vw, 44px);
  line-height: 1.55;
}
:root .homeHeroTransportTag { padding: 0; border-radius: 0; box-shadow: none; background: transparent; }
:root .homeHeroActions { width: 100%; }
:root .homeHeroActions :is(.refinedPrimaryLink, .refinedPhoneLink) { min-height: 60px; }
:root .homeHeroActions .refinedPrimaryLink { font-size: 18px; }
:root .homeHeroActions .refinedPhoneLink { border-color: var(--brand-line); }
:root .homeHeroPhotoCaption {
  position: absolute;
  right: 24px;
  bottom: 18px;
  padding: 6px 13px;
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
}

/* 白い余白の中に、小さな情報パネルを置く。 */
:root .homeV3.homeRefined .homeDaycare { padding-top: 88px; }
:root .homeDaycareSchedule {
  border: 1px solid var(--brand-line);
  border-left: 8px solid var(--scene-sign-orange);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(112, 65, 26, .04);
}

/* サービス：全幅の色帯ではなく、白い写真カードを淡い色面の上に載せる。 */
:root .homeV3.homeRefined .homeServices {
  position: relative;
  isolation: isolate;
  background: #fff;
}
:root .homeV3.homeRefined .homeServices::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 350px 24px 38px;
  border-radius: 80px 24px 80px 24px;
  background: var(--scene-cream);
  pointer-events: none;
}
:root .homeV3.homeRefined .homeServiceSummary { gap: 32px; }
:root .homeV3.homeRefined .homeServiceFeature {
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--scene-shadow);
}
:root .homeV3.homeRefined .homeServiceFeature > img { aspect-ratio: 16 / 10; border-radius: 0; }
:root .homeV3.homeRefined .homeServiceBody { padding: 30px 32px 34px; }
:root .homeServiceBody .refinedTextLink { padding-top: 24px; }
:root .homeServiceExtras { gap: 24px; margin-top: 30px; padding-top: 0; border: 0; }
:root .homeServiceExtras article { padding: 24px; border-radius: 16px; background: #fff; }
:root .homeServiceExtras img { border-radius: 12px; }

/* ご利用案内：明るい黄色の背景に白い情報欄を重ねる。 */
:root .homeV3.homeRefined .homeSituations {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  align-items: start;
  gap: 28px 48px;
  width: min(1180px, calc(100% - 80px));
  max-width: 1180px;
  padding: 56px;
  border-radius: 28px 80px 28px 28px;
  background: var(--scene-yellow) !important;
}
:root .homeV3.homeRefined .homeSituations > header { padding-top: 20px; }
:root .homeV3.homeRefined .homeSituations h2 { max-width: 7em; line-height: 1.65; }
:root .homeV3.homeRefined .homeSituations ol { margin: 0; padding: 10px 28px; border-radius: 20px; background: #fff; }
:root .homeV3.homeRefined .homeSituations li { grid-template-columns: 42px minmax(0, 1fr); gap: 18px; padding: 22px 0; }
:root .homeV3.homeRefined .homeSituationIcon { width: 42px; height: 48px; }
:root .homeV3.homeRefined .homeSituationIcon svg { width: 38px; height: 38px; }
:root .homeV3.homeRefined .homeSituations > .homeWideLink { grid-column: 2; justify-self: start; margin: 0; }

/* FAQ：イラストを添えた導入と、白い質問カード。 */
:root .homeV3.homeRefined .homeFaqPreview {
  grid-template-columns: .75fr 1.25fr;
  gap: 28px 64px;
  align-items: start;
  background: #fff;
}
:root .homeFaqIntro { grid-column: 1; grid-row: 1 / 3; }
:root .homeFaqIntro > img { display: block; width: min(230px, 80%); height: auto; margin: 30px 0 0; }
:root .homeV3.homeRefined .homeFaqList { grid-column: 2; grid-row: 1; display: grid; gap: 16px; }
:root .homeV3.homeRefined .homeFaqList article {
  padding: 24px;
  border: 1px solid var(--brand-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 22px rgba(112, 65, 26, .04);
}
:root .homeV3.homeRefined .homeFaqPreview > .homeWideLink { grid-column: 2; grid-row: 2; margin-top: 0; }

/* 外観写真と案内カードをずらして重ね、ページ末尾に場面の変化をつくる。 */
:root .homeV3.homeRefined .homeAccess {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: min(1280px, calc(100% - 80px));
  min-height: 580px;
  margin: 20px auto 80px;
  padding: 56px 0;
  background: #fff;
}
:root .homeV3.homeRefined .homeAccess > img {
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: 68%;
  height: 100%;
  object-fit: cover;
  object-position: 46% center;
  border-radius: 24px 80px 24px 24px;
}
:root .homeV3.homeRefined .homeAccess > div {
  width: 48%;
  padding: 44px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--scene-shadow);
}
:root .homeV3.homeRefined .homeAccess h2 { font-size: clamp(28px, 3vw, 40px); }
:root .homeV3.homeRefined .homeConsult {
  background: var(--scene-apricot);
}
:root .homeV3.homeRefined .homeNews::before { border: 1px solid var(--brand-line); border-radius: 20px; }

/* 下層ページも、色帯より写真と白い内容パネルを主役にする。 */
:root .serviceDesigned .svHeroGrid { grid-template-columns: .9fr 1.1fr; gap: 0; }
:root .serviceDesigned .svHeroCopy {
  position: relative;
  z-index: 1;
  margin-right: -48px;
  padding: 40px;
  border-radius: 20px 64px 20px 20px;
  background: #fff;
  box-shadow: var(--scene-shadow);
}
:root .serviceDesigned .svHeroPhoto img { aspect-ratio: 1.2; border-radius: 24px; }
:root .serviceDesigned .svSpeech { background: var(--scene-cream); }
:root .serviceDesigned .svSpeech .svFeatureCopy { padding: 32px; border-radius: 20px; background: #fff; }
:root .aboutRefined .aboutHeroCopy { box-shadow: 12px 18px 36px rgba(112, 65, 26, .07); }
:root .aboutRefined .aboutTeam { background: var(--scene-yellow); }
:root .aboutRefined .aboutTeamRoles { padding: 28px; border: 0; border-radius: 20px; background: #fff; }
:root .aboutRefined .aboutVisitPrompt { background: var(--scene-apricot); }
:root .aboutRefined .aboutVisitCopy { padding: 36px; border-radius: 20px; background: #fff; box-shadow: var(--scene-shadow); }
:root .visitDesigned > .vgStart { background: var(--scene-yellow); }
:root .visitDesigned .vgSteps { gap: 18px; border: 0; padding-top: 0; }
:root .visitDesigned .vgSteps > li { padding: 26px; border: 0; border-radius: 16px; background: #fff; }
:root .visitV2 .visitGuideHeroCopyV5 { background: #fff; box-shadow: var(--scene-shadow); border-radius: 16px 48px 16px 16px; }

/* 写真背景の上に白い相談パネル。写真の上へ直接文字を置かない。 */
:root :is(.serviceDesigned .svVisit, .visitDesigned .vgVisit) {
  padding: 80px 0;
  background: linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12)), url("../images/yasuragi-interior.jpg") center 58% / cover no-repeat;
}
:root :is(.svVisit > .svInner, .vgVisit > .vgInner) {
  width: min(1040px, calc(100% - 96px));
  padding: 44px;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--scene-shadow);
}
:root .contactDesigned > .ctTrial { background: var(--scene-apricot); }
:root .contactDesigned .ctTrialGrid { gap: 0; grid-template-columns: 1.1fr 1fr; }
:root .contactDesigned .ctTrialCopy {
  position: relative;
  margin-left: -36px;
  padding: 36px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--scene-shadow);
}
:root .contactDesigned .ctTrialNotes { padding: 26px; border: 0; border-radius: 16px; background: #fff; }
:root .contactDesigned > .ctWebConsult { background: var(--scene-paper); }
:root .contactDesigned .ctForm { border: 0; box-shadow: var(--scene-shadow); }
:root .faqDesigned { background: var(--scene-cream); }
:root .faqDesigned .faqList { display: grid; gap: 14px; border: 0; border-radius: 0; background: transparent; }
:root .faqDesigned .faqList details { border: 1px solid var(--brand-line); border-radius: 16px; background: #fff; }
:root .faqDesigned .fqConsult { background: #fff; box-shadow: var(--scene-shadow); }

@media (max-width: 1100px) {
  :root .homeV3.homeRefined .homeHeroRefined { margin-top: 78px; min-height: 600px; padding: 32px; }
  :root .homeV3.homeRefined .homeHeroCopy { width: min(500px, 64%); }
  :root .homeV3.homeRefined .homeSituations { gap: 28px; padding: 36px; }
  :root .homeV3.homeRefined .homeFaqPreview { gap: 28px 36px; }
  :root .homeServiceExtras article { grid-template-columns: 82px minmax(0, 1fr); padding: 20px; gap: 18px; }
  :root .homeV3.homeRefined .homeAccess > div { width: 54%; padding: 32px; }
  :root .serviceDesigned .svHeroCopy { padding: 28px; }
  :root .serviceDesigned .svSpeech .svFeatureCopy { padding: 24px; }
  :root .contactDesigned .ctTrialCopy { padding: 26px; }
  :root :is(.svVisit > .svInner, .vgVisit > .vgInner) { width: calc(100% - 64px); padding: 32px; gap: 28px; }
}

@media (max-width: 760px) {
  /* モバイルは写真を上部に見せ、その下へ白いパネルを少し重ねる。 */
  :root .homeV3.homeRefined .homeHeroRefined {
    display: block;
    width: calc(100% - 24px) !important;
    min-height: 0;
    margin-top: 14px;
    padding: 204px 14px 18px;
    border-radius: 20px;
    background: var(--scene-paper);
  }
  :root .homeV3.homeRefined .homeHeroScene { bottom: auto; height: 286px; }
  :root .homeV3.homeRefined .homeHeroPhoto { object-position: 62% 52%; }
  :root .homeV3.homeRefined .homeHeroCopy { width: 100%; padding: 26px 22px; border-radius: 16px 40px 16px 16px; background: #fff; }
  :root .homeV3.homeRefined .homeHeroConcept { font-size: clamp(22px, 7vw, 38px); margin-top: 14px; }
  :root .homeHeroTransportTag { font-size: 13px; gap: 6px; margin-top: 18px; }
  :root .homeHeroTransportTag img { width: 24px; height: 24px; }
  :root .homeHeroActions .refinedPrimaryLink { padding-inline: 14px; font-size: 16px; }
  :root .homeHeroActions :is(.refinedPrimaryLink, .refinedPhoneLink) { min-height: 58px; }
  :root .homeHeroActions .refinedPhoneLink { padding-inline: 14px; gap: 12px; }
  :root .homeHeroActions .refinedPhoneLink strong { font-size: clamp(20px, 6.4vw, 26px); }
  :root .homeHeroPhotoCaption { top: 14px; right: 14px; bottom: auto; font-size: 10px; }
  :root .homeV3.homeRefined .homeDaycare { padding-top: 60px; }
  :root .homeV3.homeRefined .homeServices::before { inset: 245px 0 24px; border-radius: 48px 0 48px 0; }
  :root .homeV3.homeRefined .homeServiceSummary { gap: 24px; }
  :root .homeV3.homeRefined .homeServiceBody { padding: 24px; }
  :root .homeServiceExtras { gap: 18px; }
  :root .homeServiceExtras article { grid-template-columns: 80px minmax(0, 1fr); }
  :root .homeServiceExtras h3 { font-size: 21px; }
  :root .homeV3.homeRefined .homeSituations { grid-template-columns: 1fr; width: calc(100% - 28px); padding: 32px 20px; gap: 24px; border-radius: 24px 56px 24px 24px; }
  :root .homeV3.homeRefined .homeSituations > header { padding-top: 0; }
  :root .homeV3.homeRefined .homeSituations h2 { max-width: none; }
  :root .homeV3.homeRefined .homeSituations ol { padding-inline: 18px; }
  :root .homeV3.homeRefined .homeSituations li { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
  :root .homeV3.homeRefined .homeSituationIcon, :root .homeV3.homeRefined .homeSituationIcon svg { width: 30px; }
  :root .homeV3.homeRefined .homeSituations > .homeWideLink { grid-column: 1; }
  :root .homeV3.homeRefined .homeFaqPreview { grid-template-columns: 1fr; gap: 24px; }
  :root .homeFaqIntro { position: relative; grid-column: 1; grid-row: auto; padding-right: 100px; }
  :root .homeFaqIntro > img { position: absolute; right: 0; bottom: 0; width: 100px; margin: 0; }
  :root .homeV3.homeRefined .homeFaqPreview > :is(.homeFaqList, .homeWideLink) { grid-column: 1; grid-row: auto; }
  :root .homeV3.homeRefined .homeFaqList article { padding: 20px; }
  :root .homeV3.homeRefined .homeAccess { display: block; width: calc(100% - 28px); min-height: 0; margin: 0 auto 52px; padding: 230px 14px 0; }
  :root .homeV3.homeRefined .homeAccess > img { width: 100%; height: 300px; border-radius: 20px 56px 20px 20px; object-position: center 38%; }
  :root .homeV3.homeRefined .homeAccess > div { position: relative; width: 100%; padding: 28px 24px; }
  :root .serviceDesigned .svHeroGrid { display: flex; flex-direction: column-reverse; }
  :root .serviceDesigned .svHeroPhoto { width: 100%; }
  :root .serviceDesigned .svHeroPhoto img { aspect-ratio: 3 / 2; }
  :root .serviceDesigned .svHeroPhoto figcaption { top: 12px; bottom: auto; }
  :root .serviceDesigned .svHeroCopy { width: calc(100% - 24px); margin: -28px 0 0; padding: 28px 24px; }
  :root .serviceDesigned .svSpeech .svFeatureCopy { padding: 26px 22px; }
  :root .aboutRefined .aboutTeamRoles { padding: 8px 22px; }
  :root .aboutRefined .aboutVisitCopy { padding: 28px 22px; }
  :root .aboutRefined .aboutPrimaryLink { min-width: 0; width: 100%; padding-inline: 18px; gap: 16px; }
  :root .visitDesigned .vgSteps > li { padding: 24px; }
  :root :is(.serviceDesigned .svVisit, .visitDesigned .vgVisit) { padding: 52px 0; }
  :root :is(.svVisit > .svInner, .vgVisit > .vgInner) { display: grid; grid-template-columns: 1fr; width: calc(100% - 36px); padding: 28px 24px; gap: 26px; }
  :root :is(.svVisit .svPrimaryLink, .vgVisit .vgPrimaryLink) { width: 100%; min-width: 0; }
  :root .contactDesigned .ctTrialGrid { grid-template-columns: 1fr; }
  :root .contactDesigned .ctTrialCopy { margin: 20px 0 0; padding: 28px 22px; }
  :root .contactDesigned .ctTrialNotes { padding: 24px 20px; }
  :root .contactDesigned .ctForm { padding: 26px 22px; }
}

/* 暖色の余白に、看板のオレンジを太いラインで添える。本文の外側に配置する。 */
:root :is(
  .homeV3.homeRefined .homeSituations,
  .homeV3.homeRefined .homeConsult,
  .serviceDesigned .svSpeech,
  .aboutRefined .aboutTeam,
  .visitDesigned > .vgStart,
  .contactDesigned > .ctTrial
) {
  position: relative;
}
:root :is(
  .homeV3.homeRefined .homeSituations,
  .homeV3.homeRefined .homeConsult,
  .serviceDesigned .svSpeech,
  .aboutRefined .aboutTeam,
  .visitDesigned > .vgStart,
  .contactDesigned > .ctTrial
)::before {
  content: "";
  position: absolute;
  top: 24px;
  left: clamp(28px, 4vw, 56px);
  width: clamp(120px, 30%, 360px);
  height: 8px;
  background: var(--scene-sign-orange);
  pointer-events: none;
}
:root :is(
  .homeV3.homeRefined .homeSituations,
  .homeV3.homeRefined .homeConsult,
  .serviceDesigned .svSpeech,
  .aboutRefined .aboutTeam,
  .visitDesigned > .vgStart,
  .contactDesigned > .ctTrial
)::after {
  content: "";
  position: absolute;
  right: clamp(28px, 4vw, 56px);
  bottom: 24px;
  width: clamp(80px, 18%, 220px);
  height: 4px;
  background: var(--scene-sign-rule);
  pointer-events: none;
}

/* 写真に重ねた白いパネルは、短いラインで看板と色を揃える。 */
:root :is(
  .homeV3.homeRefined .homeHeroCopy,
  .homeV3.homeRefined .homeAccess > div,
  .serviceDesigned .svHeroCopy,
  .contactDesigned .ctTrialCopy,
  .aboutRefined .aboutVisitCopy,
  .faqDesigned .fqConsult
) {
  background-image: linear-gradient(var(--scene-sign-orange), var(--scene-sign-orange));
  background-repeat: no-repeat;
  background-position: 32px 0;
  background-size: 96px 8px;
}
:root .faqDesigned .faqList {
  padding-top: 28px;
  background-image: linear-gradient(var(--scene-sign-orange), var(--scene-sign-orange));
  background-repeat: no-repeat;
  background-position: left top;
  background-size: min(240px, 40%) 8px;
}

@media (max-width: 760px) {
  :root :is(
    .homeV3.homeRefined .homeSituations,
    .homeV3.homeRefined .homeConsult,
    .serviceDesigned .svSpeech,
    .aboutRefined .aboutTeam,
    .visitDesigned > .vgStart,
    .contactDesigned > .ctTrial
  )::before { top: 14px; left: 24px; width: 112px; height: 6px; }
  :root :is(
    .homeV3.homeRefined .homeSituations,
    .homeV3.homeRefined .homeConsult,
    .serviceDesigned .svSpeech,
    .aboutRefined .aboutTeam,
    .visitDesigned > .vgStart,
    .contactDesigned > .ctTrial
  )::after { right: 24px; bottom: 16px; width: 64px; }
  :root :is(
    .homeV3.homeRefined .homeHeroCopy,
    .homeV3.homeRefined .homeAccess > div,
    .serviceDesigned .svHeroCopy,
    .contactDesigned .ctTrialCopy,
    .aboutRefined .aboutVisitCopy,
    .faqDesigned .fqConsult
  ) { background-position: 24px 0; background-size: 72px 6px; }
  :root .faqDesigned .faqList { padding-top: 24px; background-size: 112px 6px; }
}

/* トップページ：施設名・コピー・案内文の強弱と明るいアクセント。 */
:root .homeV3.homeRefined .homeHeroCopy {
  width: min(580px, 60%);
  padding: clamp(28px, 3vw, 44px);
}

:root .homeV3.homeRefined .homeHeroLead {
  font-size: 18px !important;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .02em;
  text-wrap: balance;
}

:root .homeV3.homeRefined .homeHeroName {
  display: block;
  white-space: nowrap;
  margin: 10px 0 0;
  color: #ed8936;
  font-family: var(--type-serif);
  font-size: clamp(36px, 3.4vw, 46px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .04em;
}

:root .homeV3.homeRefined .homeHeroConcept {
  margin-top: 22px;
  font-size: clamp(30px, 2.7vw, 40px);
}

:root .homeV3.homeRefined .homeHeroTransportTag {
  gap: 10px;
  margin-top: 24px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
}

:root .homeV3.homeRefined .homeHeroTransportTag img {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

:root .homeV3.homeRefined .homeHeroTransportTag span {
  min-width: 0;
  text-wrap: balance;
}

@media (min-width: 761px) and (max-width: 1100px) {
  :root .homeV3.homeRefined .homeHeroCopy {
    width: min(540px, 76%);
  }
}

@media (max-width: 760px) {
  :root .homeV3.homeRefined .homeHeroCopy {
    width: 100%;
    padding: 26px 22px;
  }
  :root .homeV3.homeRefined .homeHeroLead {
    font-size: 18px !important;
  }
  :root .homeV3.homeRefined .homeHeroName {
    font-size: clamp(32px, 8.5vw, 38px);
  }
  :root .homeV3.homeRefined .homeHeroConcept {
    margin-top: 18px;
    font-size: clamp(22px, 7vw, 32px);
  }
  :root .homeV3.homeRefined .homeHeroTransportTag {
    gap: 8px;
    margin-top: 18px;
    font-size: 20px;
  }
  :root .homeV3.homeRefined .homeHeroTransportTag img {
    width: 24px;
    height: 24px;
  }
}

/* 施設名を同色に揃え、名前の幅に沿ったマーカー風の下線で強調。 */
:root .homeV3.homeRefined .homeHeroNameLabel {
  position: relative;
  display: inline-block;
  isolation: isolate;
  color: inherit;
}

:root .homeV3.homeRefined .homeHeroNameLabel::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.04em;
  right: 0;
  bottom: .02em;
  height: .2em;
  border-radius: 60% 25% 50% 35%;
  background: linear-gradient(100deg, #ffe9a8, #ffd58a 70%, #ffe8b6);
  transform: rotate(-1.5deg);
  pointer-events: none;
}