@charset "utf-8";

/* 全ページ共通の文字基準。各ページのCSSより後に読み込む。
   本文はPC/SPとも16px。補足・操作・キャプションは役割別に指定する。 */
:root {
  --type-sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --type-serif: "Yu Mincho", "Hiragino Mincho ProN", serif;
  --type-body: 1rem;
  --type-note: .875rem;
  --type-label: .8125rem;
  --type-caption: .75rem;
  --type-title: clamp(2rem, 3.8vw, 3rem);
}

body { font-family: var(--type-sans); }

/* 短い見出しの意味のまとまり。極端に狭い場合は内部でも折り返せる。 */
.typePhrase {
  display: inline-block;
  max-width: 100%;
  word-break: normal;
  overflow-wrap: normal;
  line-break: strict;
  text-wrap: wrap;
}

/* 本文：装飾用のラベル・時刻・数値は含めない。 */
:root :is(
  .homeDaycareDescription,
  .homeDaycarePoints p:not(.homeDaycarePointLabel),
  .homeServiceBody > p:not(.homeServiceLabel):not(.homeServiceSchedule),
  .homeServiceExtras div > p:not(.homeServiceLabel),
  .homeSituations p:not(.homeEyebrow),
  .homeFaqPreview small,
  .aboutHeroDescription,
  .aboutSectionDescription,
  .aboutPrinciplesHeading > p:last-child,
  .aboutStoryCopy > p:last-child,
  .aboutTeamRoles dd,
  .aboutTransportCopy p:not(.aboutTransportNote),
  .aboutVisitCopy > p:not(.aboutEyebrow),
  .svLead,
  .svDescription,
  .svSectionHead > p,
  .svPace p,
  .svStepContent > p:not(.svProgramLabel),
  .svVisit h2 + p,
  .vgEligibilityNote,
  .vgStartHead > div > p:last-child,
  .vgSteps > li > p:not(.vgStepLabel),
  .vgFeesPanel > div > p:not(.vgEyebrow),
  .vgAreaPlaces,
  .vgAreaNote,
  .vgRegions details > p,
  .vgAvailabilityIntro,
  .vgAvailabilityNote,
  .vgVisit h2 + p,
  .fqHeroDescription,
  .faqDesigned .faqList .fqAnswerCopy p,
  .fqConsultCopy > p:last-child,
  .ctLead,
  .ctDescription,
  .ctExamples li,
  .ctTrialNotes dd,
  .ctAccessDetails dd,
  .ppHeroDescription,
  .ppItemBody > p,
  .flowHeroV5 > p:last-child,
  .flowListV5 li p,
  .partnershipV3 .partnershipHeroV2 > p:last-child,
  .newsHeroV1 > p:last-child,
  .articleHeaderV1 > p,
  .articleBodyV1 > p:not(.articleAuthorV1)
) {
  font-size: var(--type-body);
  line-height: 1.95;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
  text-wrap: pretty;
}

/* 日時・条件・フォーム案内など、読み飛ばせない補足。 */
:root :is(
  .homeServiceBody > p.homeServiceSchedule,
  .aboutStaffAvailability,
  .aboutTransportCopy .aboutTransportNote,
  .svAvailability strong,
  .svKeyFact,
  .svFocusWords,
  .svActivityMenu p,
  .svFootName,
  .svPrice > span,
  .svFlowNote,
  .svProgramStep ul,
  .vgOpeningDetails dt,
  .vgServiceHours > p,
  .vgFeeFactors li,
  .vgAvailabilityTable th,
  .vgStatus,
  .ctContactMethods small,
  .ctChoiceLabel,
  .ctTrialNotes dt,
  .ctRequiredNote,
  .ctFormNotice > strong,
  .ctFormNotice > p,
  .ctField > label,
  .ctFieldHelp,
  .ctPrivacy label,
  .ctFormSubmit p,
  .ctAccessDetails dt,
  .ctAccessDetails small,
  .ppItemBody .ppContactDetails,
  .articleAuthorV1,
  .footerInfo > p,
  .footerSiteMap a,
  .footerSiteMap strong,
  .footerDocuments a,
  .footerDocuments strong
) { font-size: var(--type-note); line-height: 1.85; }

:root :is(
  .homeTimeLegend,
  .aboutTeamRoles dt small,
  .svAvailability small,
  .svClockLegend,
  .svJourneyHead p,
  .svProgramLabel,
  .vgClosedDays,
  .vgServiceHours > p > span,
  .vgPhone small,
  .fqPhone > small,
  .ctFormNotice p > span,
  .ctMapFallback p,
  .ctMapFallback > span
) { font-size: var(--type-label); }

:root :is(
  .aboutHeroPhoto figcaption,
  .aboutStoryVisual figcaption,
  .aboutTeamScene figcaption,
  .aboutTown p,
  .aboutTown p.aboutNetworkPlace,
  .aboutTownCenter,
  .serviceDesigned figcaption,
  .vgUpdated > span,
  .vgAvailabilityTable th small,
  .ctTrialPhoto figcaption,
  .ctEntrance figcaption,
  .ctRequired,
  .ctOptional
) { font-size: var(--type-caption); line-height: 1.7; }

:root .aboutTeamRoles dt small { font-family: var(--type-sans); }

/* 既存の本文ゴシック／見出し明朝という使い分けを維持する。 */
:root :is(.partnershipV3 h1, .partnershipV3 h2, .newsPageV1 h1,
  .newsDetailV1 h1, .footerIdentity strong) { font-family: var(--type-serif); }

:root :is(.flowHeroV5 h1, .partnershipV3 .partnershipHeroV2 h1,
  .newsPageV1 .newsHeroV1 h1, .newsDetailV1 .articleHeaderV1 h1,
  .faqDesigned .faqHero h1, .contactDesigned .ctHero h1,
  .privacyDesigned .ppHero h1) {
  font-size: var(--type-title);
  line-height: 1.55;
  letter-spacing: .02em;
}
.newsDetailV1 .articleHeaderV1 h1 { text-wrap: balance; }

/* ページ内の案内とボタン。幅不足は文字を縮めず、列数で解消する。 */
:root :is(.aboutPageNav a, .svContents span, .vgPageNav a, .ctPageNav a,
  .aboutTextLink, .svPrimaryLink, .svSecondaryLink, .vgTextLink,
  .vgPrimaryLink, .fqRelatedLink, .fqConsultButton, .ctTextLink,
  .ctMapLink) { font-size: var(--type-note); }
.svContents a, .vgPageNav a { min-width: 0; }
.svContents span, .vgPageNav a > span { word-break: normal; line-break: strict; }

/* 写真をそのまま使い、文字の背景と領域を確保する。 */
.visitV2 .visitGuideHeroCopyV5 {
  width: fit-content;
  max-width: 620px;
  padding: 24px 28px;
  border-radius: 8px;
  background: rgba(255, 249, 241, .94);
}
.visitV2 .visitGuideHeroV5 h1 {
  color: #a84925 !important; /* 旧CSSの !important を上書き */
  font-size: var(--type-title);
  letter-spacing: .04em;
  line-height: 1.5;
}
.visitV2 .visitGuideHeroCopyV5 p {
  color: #65584c !important;
  font-family: var(--type-sans);
  font-size: var(--type-note);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 0;
}

.aboutVisitCopy > p:not(.aboutEyebrow) { max-width: none; }
.aboutVisitPrompt h2 { font-size: clamp(30px, 3.3vw, 42px); }

@media (max-width: 1100px) {
  .svContents { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 0; }
  .svContents a { border-bottom: 1px solid var(--sv-line); }
  .svContents a:nth-child(4) { border-left: 0; }
  .vgPageNav > .vgInner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vgPageNav a:nth-child(4) { border-left: 0; }
}

@media (max-width: 800px) {
  /* 長い説明の隣に専門職名を無理に詰め込まない。 */
  .aboutTeamRoles { grid-template-columns: 1fr; }
  .aboutTeamRoles > div { display: block; padding: 24px 0; }
  .aboutTeamRoles > div + div { border-left: 0; border-top: 1px solid var(--brand-line); }
  .aboutTeamRoles dd { margin-top: 12px; }
  .aboutTeamRoles dd br { display: none; }
}

@media (max-width: 760px) {
  .visitV2 .visitGuideHeroCopyV5 {
    width: fit-content !important; /* 旧CSSの幅58%を解除 */
    max-width: 100% !important;
    padding: 18px 20px;
    transform: translateY(44px);
  }
  .visitV2 .visitGuideHeroV5 h1 { font-size: clamp(30px, 8vw, 34px); }
}

@media (min-width: 761px) and (max-width: 900px) {
  .visitV2 .visitGuideHeroCopyV5 {
    transform: translateY(34px);
  }
}

@media (max-width: 600px) {
  :root { --type-title: clamp(28px, 7.8vw, 34px); }
  :root .newsDetailV1 .articleHeaderV1 h1 { font-size: clamp(26px, 7.2vw, 32px); letter-spacing: 0; }
  .serviceDesigned .svHero h1 { font-size: clamp(28px, 7.5vw, 34px); }
  .aboutVisitPrompt h2 { font-size: clamp(26px, 7.5vw, 34px); }
  .aboutVisitPrompt > .aboutInner { width: calc(100% - 44px); }
  .aboutHeroPhoto figcaption { max-width: calc(100% - 124px); text-align: left; }
  .aboutPrinciplesHeading h2, .aboutTeamLead h2 {
    font-size: clamp(26px, 7.2vw, 34px);
    letter-spacing: 0;
  }
  .aboutTransportHeading { gap: 12px; }
  .aboutTransportHeading > svg { width: 40px; flex-basis: 40px; height: 44px; }
  .aboutTransportHeading h3 { font-size: clamp(20px, 5.5vw, 23px); }
  .aboutVisitPrompt h2, .svVisit h2, .vgVisit h2 { letter-spacing: 0; }
  .svVisit h2, .vgVisit h2 { font-size: clamp(26px, 7.2vw, 32px); }

  .ctPageNav { grid-template-columns: 1fr; gap: 0; }
  .ctPageNav a { align-items: center; min-height: 54px; padding: 12px 0; }
  .svContents { grid-template-columns: 1fr; }
  .svContents a { grid-template-columns: 24px minmax(0,1fr) 18px; align-items: center; min-height: 54px; padding: 12px 8px; gap: 12px; }
  .svContents a + a { border-left: 0; }
  .svContents span { grid-column: 2; grid-row: 1; }
  .svContents b { grid-column: 3; }
  .vgPageNav > .vgInner { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .vgPageNav a { align-items: center; padding: 14px 9px; }
  .vgPageNav a + a { border-left: 0; }
  .vgPageNav a:nth-child(even) { border-left: 1px solid var(--vg-line); }

  /* 長いページ名は文節で2行に。24pxまで縮めて1行に詰めない。 */
  .ctHero h1 > .typePhrase, .ppHero h1 > span { display: block; }
  .contactDesigned .ctExamples h2 { font-size: 22px; }
  .ctTrialNotes > div, .ctTrialNotes > div:first-child { grid-template-columns: 1fr; gap: 6px; }
  .ctTrialNotes dd br { display: none; }
  .ctAccessDetails > div { grid-template-columns: 1fr; gap: 6px; }
  .ctEntrance { grid-template-columns: 100px minmax(0,1fr); }
  .faqDesigned .faqList summary { font-size: 16px; }
  .vgAvailabilityTable thead th:first-child { width: 24%; }
  .vgAvailabilityTable tbody th { white-space: nowrap; }
  .vgStatus { padding-inline: 4px; gap: 4px; }
  .vgStatus::before { display: none; }
  .vgAvailabilityTable th small { white-space: nowrap; letter-spacing: -.02em; }
  :root footer .footerInfo, :root footer .footerIdentity > div { min-width: 0; }
  :root footer .footerLogo { flex: 0 0 46px; width: 46px; height: 46px; }
  :root footer .footerIdentity strong { font-size: 18px; white-space: normal; word-break: normal; }
}

:root footer .footerLogo {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  overflow: visible;
}

:root footer .footerLogo img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

@media (max-width: 600px) {
  :root footer .footerLogo {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
  }
}

@media (max-width: 360px) {
  /* この幅では左のイラストも132pxになるため、注記の幅を少し広げる。 */
  .aboutHeroPhoto figcaption { max-width: calc(100% - 112px); }
}

/* 各ページの文字・操作色を local-overrides.css の共通配色に揃える。 */
:root :is(
  .homeV3.homeRefined,
  .serviceDesigned,
  .visitDesigned,
  .aboutRefined,
  .contactDesigned,
  .faqDesigned,
  .privacyDesigned,
  .flowV5,
  .partnershipV3,
  .newsPageV1,
  .newsDetailV1
) {
  --ink: var(--brown);
  --orange: var(--brand-orange);
  --rose: var(--brand-accent);
  --yellow: var(--soft-yellow);
  --peach: var(--brand-paper);
  --forest: var(--brand-accent);
  --forest-dark: var(--brown);
  color: var(--brown);
}

.homeV3.homeRefined {
  --editorial-accent: var(--brand-accent);
  --editorial-paper: var(--brand-paper);
  --editorial-line: var(--brand-line);
}

.serviceDesigned {
  --sv-accent: var(--brand-accent);
  --sv-ink: var(--brown);
  --sv-muted: var(--muted);
  --sv-paper: var(--brand-paper);
  --sv-line: var(--brand-line);
}

.visitDesigned {
  --vg-accent: var(--brand-accent);
  --vg-ink: var(--brown);
  --vg-muted: var(--muted);
  --vg-paper: var(--brand-paper);
  --vg-line: var(--brand-line);
}

.aboutRefined {
  --about-accent: var(--brand-accent);
  --about-orange: var(--brand-orange);
  --about-ink: var(--brown);
  --about-muted: var(--muted);
  --about-paper: var(--brand-paper);
  --about-line: var(--brand-line);
}

.contactDesigned {
  --ct-accent: var(--brand-accent);
  --ct-ink: var(--brown);
  --ct-muted: var(--muted);
  --ct-trial: var(--brand-surface);
  --ct-trial-line: var(--brand-line);
  --ct-line: var(--brand-line);
}

.faqDesigned {
  --fq-accent: var(--brand-accent);
  --fq-ink: var(--brown);
  --fq-muted: var(--muted);
  --fq-paper: var(--brand-paper);
  --fq-line: var(--brand-line);
}

.privacyDesigned {
  --pp-accent: var(--brand-accent);
  --pp-ink: var(--brown);
  --pp-muted: var(--muted);
  --pp-line: var(--brand-line);
}

:root :is(
  .homeHeroLead,
  .homeEyebrow,
  .homeServiceLabel,
  .homeDaycarePointLabel,
  .homeFaqList article > span,
  .homeSituationIcon,
  .svEyebrow,
  .svChapter,
  .svContents small,
  .svContents b,
  .vgEyebrow,
  .vgPageNav b,
  .vgStepLabel,
  .aboutEyebrow,
  .aboutPageNav small,
  .aboutStoryLabel,
  .ctEyebrow,
  .ctHeroTagline,
  .fqEyebrow,
  .fqHeroLead,
  .fqQuestionMark,
  .fqAnswerMark,
  .ppEyebrow,
  .ppHeroLead
) {
  color: var(--brand-accent) !important;
}

:root :is(
  .homeV3.homeRefined h1,
  .homeV3.homeRefined h2,
  .serviceDesigned h1,
  .serviceDesigned h2,
  .visitDesigned h1,
  .visitDesigned h2,
  .aboutRefined h1,
  .aboutRefined h2,
  .contactDesigned h1,
  .contactDesigned h2,
  .faqDesigned h1,
  .faqDesigned h2,
  .privacyDesigned h1,
  .privacyDesigned h2,
  .newsHeroV1 h1,
  .newsArchiveV1 > header h2,
  .articleHeaderV1 h1,
  .flowV5 h1,
  .flowV5 h2,
  .partnershipV3 .partnershipHeroV2 h1,
  .partnershipV3 .localCircleSectionV2 > header h2,
  .partnershipV3 .medicalTransportV3 .transportCopyV2 h2
) {
  color: var(--brown) !important;
}

/* 小見出しは本文に近い濃さを保つ。 */
:root :is(
  .homeV3.homeRefined h3,
  .serviceDesigned h3,
  .serviceDesigned h4,
  .visitDesigned h3,
  .aboutRefined h3,
  .newsCardsV1 h3,
  .privacyDesigned h2,
  .contactDesigned .ctExamples h2
) {
  color: var(--brown) !important;
}

:root :is(
  .homeDaycareDescription,
  .homeDaycarePoints p:not(.homeDaycarePointLabel),
  .homeServiceBody > p:not(.homeServiceLabel),
  .homeServiceExtras div > p:not(.homeServiceLabel),
  .homeSituations p,
  .homeFaqList article small,
  .homeNewsList time,
  .svDescription,
  .svLead,
  .svSectionHead > p,
  .svActivityMenu p,
  .vgEligibilityNote,
  .vgStartHead > div > p:last-child,
  .vgSteps > li > p:not(.vgStepLabel),
  .aboutSectionDescription,
  .aboutHeroDescription,
  .aboutPrinciplesHeading > p:last-child,
  .aboutStoryCopy > p:last-child,
  .ctDescription,
  .ctLead,
  .ctExamples li,
  .fqHeroDescription,
  .fqConsultCopy > p:last-child,
  .ppHeroDescription,
  .ppItemBody > p,
  .newsHeroV1 > p:last-child,
  .articleHeaderV1 > p,
  .articleBodyV1 > p:not(.articleAuthorV1),
  .partnershipV3 .partnershipHeroV2 > p:last-child,
  .partnershipV3 .transportCopyV2 > p:not(:first-child)
) {
  color: var(--muted) !important;
}

:root :is(
  .refinedPrimaryLink,
  .svPrimaryLink,
  .vgPrimaryLink,
  .fqConsultButton,
  .ctContactMethods > .ctPhoneChoice,
  .homeBackToTop,
  .homeV3.homeRefined .homeConsultActions a[href*="web-form"]
) {
  background-color: var(--brand-button) !important;
  border-color: var(--brand-button) !important;
  color: var(--brand-button-ink) !important;
}

:root :is(
  .refinedPrimaryLink:hover,
  .svPrimaryLink:hover,
  .vgPrimaryLink:hover,
  .fqConsultButton:hover,
  .ctContactMethods > .ctPhoneChoice:hover,
  .homeBackToTop:hover,
  .homeV3.homeRefined .homeConsultActions a[href*="web-form"]:hover,
  .homeV3.homeRefined .homeConsultActions a[href*="web-form"]:focus-visible
) {
  background-color: var(--brand-button-hover) !important;
  border-color: var(--brand-button-hover) !important;
}


/* 導入部は白に揃え、写真と強調色が引き立つ余白を保つ。 */
:root :is(
  .serviceDesigned .svHero,
  .aboutRefined .aboutStoryHero,
  .contactDesigned .ctHero,
  .faqDesigned .faqHero,
  .privacyDesigned .ppHero,
  .newsHeroV1,
  .flowHeroV5,
  .partnershipV3 .partnershipHeroV2
) {
  background: var(--brand-hero);
}

:root .homeV3.homeRefined .homeFaqPreview {
  background: var(--brand-paper);
}

/* 共通の内容エリアは薄いクリーム。場面ごとの濃淡は scene-composition.css で指定。 */
:root :is(
  .vgPageNav,
  .vgEligibility,
  .visitDesigned > .vgStart,
  .aboutRefined .aboutTeam,
  .serviceDesigned .svSpeech
) {
  background: var(--brand-surface);
}

:root .visitV2 .visitGuideHeroV5 {
  background: var(--brand-paper) !important;
}

:root .visitV2 .visitGuideHeroV5::before {
  background: rgba(255, 255, 255, .52);
}

:root .homeV3.homeRefined .homeHeroConcept > span:last-child {
  color: var(--brand-heading);
}

:root .compactSiteBrand small,
:root .compactSiteBrand strong {
  color: #1f1714;
}

:root :is(.ctFormSubmit button:not(:disabled), .ctFormSubmit input[type="submit"]:not(:disabled), .ctFormSubmit .ctSubmit:not(:disabled), .ctFormSubmit .wpcf7-submit:not(:disabled), .aboutRefined .aboutPrimaryLink) {
  background: var(--brand-button);
  border-color: var(--brand-button);
  color: var(--brand-button-ink);
}

:root :is(.ctFormSubmit button:not(:disabled), .ctFormSubmit input[type="submit"]:not(:disabled), .ctFormSubmit .ctSubmit:not(:disabled), .ctFormSubmit .wpcf7-submit:not(:disabled), .aboutRefined .aboutPrimaryLink):is(:hover, :focus-visible) {
  background: var(--brand-button-hover);
  border-color: var(--brand-button-hover);
}

:root .ctContactMethods .ctPhoneChoice small {
  color: var(--brand-button-ink);
}
