@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Lusitana:wght@400;700&family=Noto+Serif+JP:wght@600;700&display=swap');

/* 総合トップ本文。PC 1870:21576 / SP 1870:21791。
   写真はPC/SP別に書き出し、aspect-ratioで比率を保つ。 */
:root { --rnw-top-font-mincho:'Noto Serif JP','Yu Mincho','YuMincho',serif; --rnw-top-font-en:'Lusitana',var(--rnw-top-font-mincho); --rnw-top-gold:#c9a96e; --rnw-top-red:#912344; --rnw-top-line:#e2e2e2; }
.rnw-top,.rnw-top *,.rnw-top *::before,.rnw-top *::after { box-sizing:border-box; }
.rnw-top { color:var(--rnw-text); font-family:var(--rnw-font-jp); }
.rnw-top :where(h1,h2,h3,p,ul,ol,li,figure,section,article) { margin:0; padding:0; }
.rnw-top :where(ul,ol) { list-style:none; }
.rnw-top :where(img) { display:block; max-width:100%; height:auto; }
.rnw-top a { text-decoration:none; }
.rnw-top [hidden] { display:none!important; }
.rnw-top :focus-visible { outline:2px solid var(--rnw-top-red); outline-offset:4px; }
.rnw-top-only-pc { display:none!important; }
.rnw-top-main { min-width:0; container-type:inline-size; }
.rnw-top-main :where(section,article,[id]) { scroll-margin-top:calc(var(--rnw-header-h-pc) + 16px); }

/* FVの陰影は書き出し画像に含め、コピーだけをHTMLで重ねる。 */
.rnw-top-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 375 / 442;
  max-height: calc(100svh - var(--rnw-header-h-sp) - 1px - var(--rnw-top-cta-h));
  overflow: hidden;
  background: #fff;
}
.rnw-top-hero__slides { position:absolute; inset:0; }
.rnw-top-hero__slide { position:absolute; inset:2.335% 0 0; opacity:0; visibility:hidden; transition:opacity 1s ease,visibility 1s; }
.rnw-top-hero__slide.is-active { opacity:1; visibility:visible; }
.rnw-top-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.rnw-top-hero h1 {
  position: absolute;
  top: auto;
  bottom: 3.44%;
  left: 0;
  width: 100%;
  color: #fff;
  font-family: var(--rnw-top-font-mincho);
  font-size: clamp(20px, 6.667cqi, 36px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 2px;
  text-align: center;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .8);
}
.rnw-top-hero h1 span { display:block; }

.rnw-top-quicknav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; padding:16px 40px; background:linear-gradient(0deg,#ffdfe7,rgba(255,232,241,.4) 64.423%); }
.rnw-top-quicknav a { display:flex; align-items:center; justify-content:flex-end; gap:8px; min-height:18px; color:#626262; font-size:10px; font-weight:700; line-height:1.3; letter-spacing:1.2px; text-align:right; }
.rnw-top-quicknav img { flex:none; width:19px; height:19px; transform:rotate(-90deg); }

.rnw-top-services { display:grid; grid-template-columns:minmax(0,1fr); }
.rnw-top-service { position:relative; display:flex; flex-direction:column; align-items:center; gap:20px; min-width:0; padding:40px 32px; color:#626262; font-family:var(--rnw-top-font-mincho); letter-spacing:1.2px; }
.rnw-top-service--nanny { background:linear-gradient(180deg,#ffdfe7,rgba(255,232,241,.4) 64.423%); }
.rnw-top-service--sitter { background:linear-gradient(180deg,rgba(160,214,253,.6),rgba(181,218,244,.29) 64.423%); }
.rnw-top-service--vipcare { background:linear-gradient(180deg,rgba(98,189,147,.38),rgba(98,189,147,.07) 64.423%); }
.rnw-top-service--nursery,.rnw-top-service--afterschool,.rnw-top-service--palis,.rnw-top-service--als,.rnw-top-service--hawaii { background:linear-gradient(180deg,#a1b5f0,rgba(216,225,253,0)); }
.rnw-top-service--professional { background:linear-gradient(180deg,rgba(15,126,145,.5),rgba(15,126,145,.07) 50.962%); }
.rnw-top-service--petcare { background:linear-gradient(180deg,rgba(237,110,0,.31),rgba(244,157,81,.05) 64.423%); }
.rnw-top-service__anchor { position:absolute; top:0; }
.rnw-top-service__heading { display:flex; flex-direction:column; align-items:center; gap:17px; width:100%; }
.rnw-top-service h2 { width:100%; color:#626262; font-family:inherit; font-size:16px; font-weight:700; line-height:1.4; text-align:center; }
.rnw-top-service__brand { display:flex; align-items:center; justify-content:center; width:100%; min-height:60px; }
.rnw-top-service__brand picture { display:block; max-width:100%; }
.rnw-top-service__brand img { height:auto; object-fit:contain; }
.rnw-top-service--sitter .rnw-top-service__brand picture { width:179.556px; }
.rnw-top-service--vipcare .rnw-top-service__brand picture { width:165.563px; }
.rnw-top-service--nursery .rnw-top-service__brand picture { width:140.997px; }
.rnw-top-service--afterschool .rnw-top-service__brand picture { width:154.951px; }
.rnw-top-service--palis .rnw-top-service__brand picture { width:192px; }
.rnw-top-service--als .rnw-top-service__brand picture { width:130.175px; }
.rnw-top-service--petcare .rnw-top-service__brand picture { width:188px; }
.rnw-top-service__brand picture img { width:100%; }
.rnw-top-service__brand p { color:#444; font-size:clamp(18px,6.4cqi,24px); font-weight:600; line-height:1.4; text-align:center; }
.rnw-top-service--hawaii .rnw-top-service__brand,.rnw-top-service--professional .rnw-top-service__brand { min-height:0; }
@media (max-width:767px) {
  .rnw-top-service--professional .rnw-top-service__brand p { font-size:min(24px,calc((100cqi - 79.6px) / 13)); white-space:nowrap; }
}
.rnw-top-service__content { display:flex; flex-direction:column; gap:8px; width:100%; }
/* containで書き出し画像全体を表示し、追加の顔切れを防ぐ。 */
.rnw-top-service__photo { display:block; width:100%; aspect-ratio:311 / 200; }
.rnw-top-service__photo img { width:100%; height:100%; object-fit:contain; }
.rnw-top-service--nursery .rnw-top-service__photo { width:calc(100% * 308.696 / 311); aspect-ratio:308.696 / 200; }
.rnw-top-service--professional .rnw-top-service__photo { width:calc(100% * 304.828 / 311); aspect-ratio:304.828 / 200; }
.rnw-top-service--petcare .rnw-top-service__photo { width:calc(100% * 305.435 / 311); aspect-ratio:305.435 / 200; }
.rnw-top-service__text { font-size:14px; font-weight:600; line-height:1.6; overflow-wrap:anywhere; }
.rnw-top-service__text small { font-size:12px; }
.rnw-top-service__link { display:flex; flex-direction:column; align-items:center; gap:8px; color:#867047; font-size:14px; font-weight:600; line-height:1.4; white-space:nowrap; }
.rnw-top-service__link img { max-width:none; }

.rnw-top-news { padding:80px 16px; background:#fff; }
.rnw-top-news__inner { display:grid; grid-template-columns:minmax(0,1fr); gap:32px; width:100%; max-width:980px; margin-inline:auto; }
.rnw-top-h2 { display:flex; flex-direction:column; gap:8px; letter-spacing:1.2px; }
.rnw-top-h2__en { color:#bc326c; font-family:var(--rnw-top-font-en); font-size:18px; font-weight:400; line-height:1.3; }
.rnw-top-h2__jp { color:#444; font-family:'Yu Mincho Pr6N','Yu Mincho',var(--rnw-top-font-mincho); font-size:28px; font-weight:600; line-height:1.3; }
.rnw-top-news__list { padding-bottom:8px; }
.rnw-top-news__item { border-bottom:1px solid var(--rnw-top-line); }
.rnw-top-news__item:first-child { border-top:1px solid var(--rnw-top-line); }
.rnw-top-news__link { display:flex; align-items:flex-start; gap:8px; padding:16px 15px; color:#444; }
.rnw-top-news__thumb { flex:none; width:100px; aspect-ratio:10 / 7; overflow:hidden; }
.rnw-top-news__thumb img { width:100%; height:100%; object-fit:cover; }
.rnw-top-news__body { display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }
.rnw-top-news__meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px; letter-spacing:1.2px; }
.rnw-top-news__date { color:var(--rnw-top-red); font-family:var(--rnw-top-font-en); font-size:12px; line-height:1.3; }
.rnw-top-news__tag { padding:4px 8px; border:.745px solid #f6beca; border-radius:8px; background:#fff; color:#bc326c; font-size:12px; font-weight:700; line-height:1.3; }
.rnw-top-news__title { font-size:14px; font-weight:700; line-height:1.8; letter-spacing:.168px; overflow-wrap:anywhere; }
.rnw-top-news__more { justify-content:space-between; gap:24px; width:100%; padding:16px 32px; border:2px solid var(--rnw-top-red); background:#fff; color:var(--rnw-top-red); }
.rnw-top-news__more img { flex:none; transform:rotate(-90deg); }

@media (min-width:768px) {
  #site_index.rnw-menu-open .rnw-menu__inner { padding-bottom:40px; }
  .rnw-top-only-sp { display:none!important; }
  .rnw-top-only-pc { display:block!important; }
  .rnw-top { display:flex; align-items:stretch; padding-top:var(--rnw-header-h-pc); }
  .rnw-top-main { flex:1 1 auto; }
  #container { overflow:visible; }
  /* 通常は元の比率を維持し、低い画面だけFVの高さを上限にする。 */
  .rnw-top-hero {
    aspect-ratio: 1140 / 727;
    max-height: calc(100svh - var(--rnw-header-h-pc));
  }
  .rnw-top-hero__slide { inset:0; }
  .rnw-top-hero h1 {
    top: auto;
    bottom: 4.68%;
    padding-left: 7.018%;
    font-size: clamp(24px, 3.5088cqi, 48px);
  }
  .rnw-top-hero h1 span { display:inline; }
  .rnw-top-services { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:100%; max-width:1140px; padding:80px; margin-inline:auto; }
  .rnw-top-service__heading { min-height:131px; }
  .rnw-top-service h2 { font-size:clamp(16px,2.1053cqi,24px); }
  .rnw-top-service__brand { min-height:80px; }
  .rnw-top-service--sitter .rnw-top-service__brand picture { width:239.407px; }
  .rnw-top-service--vipcare .rnw-top-service__brand picture { width:220.75px; }
  .rnw-top-service--nursery .rnw-top-service__brand picture,.rnw-top-service--afterschool .rnw-top-service__brand picture { width:189.952px; }
  .rnw-top-service--palis .rnw-top-service__brand picture { width:240px; }
  .rnw-top-service--als .rnw-top-service__brand picture { width:173.566px; }
  .rnw-top-service--petcare .rnw-top-service__brand picture { width:200px; }
  .rnw-top-service__brand p { font-size:clamp(20px,2.4561cqi,28px); }
  .rnw-top-service--hawaii .rnw-top-service__brand,.rnw-top-service--professional .rnw-top-service__brand { flex:1; }
  .rnw-top-service__content { gap:16px; }
  .rnw-top-service .rnw-top-service__photo { width:100%; aspect-ratio:422 / 300; }
  .rnw-top-service__text { font-size:clamp(14px,1.57895cqi,18px); }
  .rnw-top-service__link { padding-inline:4px; color:#a57a43; font-size:20px; }
  .rnw-top-service--afterschool { background:linear-gradient(180deg,#71c5b2,rgba(113,197,178,0)); }
  .rnw-top-service--palis { background:linear-gradient(180deg,#ffbfdf,rgba(255,191,223,0)); }
  .rnw-top-service--als { background:linear-gradient(180deg,#ffefb4,rgba(249,230,168,0)); }
  .rnw-top-service--hawaii { background:linear-gradient(180deg,#83e3d9,rgba(121,219,209,0)); }
  .rnw-top-news { padding:80px; background:linear-gradient(107.413deg,#fff8fa,#fff); }
  .rnw-top-news__inner { grid-template-columns:minmax(0,1fr) auto; row-gap:56px; }
  .rnw-top-h2 { grid-column:1; grid-row:1; }
  .rnw-top-h2__en { color:var(--rnw-top-red); font-size:24px; }
  .rnw-top-h2__jp { font-size:42px; }
  .rnw-top-news__list,.rnw-top-news__empty { grid-column:1 / -1; grid-row:2; }
  .rnw-top-news__link { gap:35.143px; }
  .rnw-top-news__thumb { width:142.857px; }
  .rnw-top-news__date { font-size:16px; }
  .rnw-top-news__tag { padding:8px 16px; color:var(--rnw-top-red); font-size:14px; }
  .rnw-top-news__title { font-size:20px; font-weight:500; letter-spacing:1.2px; }
  .rnw-top-news__more { grid-column:2; grid-row:1; align-self:end; width:auto; height:55px; }
}
@media (min-width:768px) and (max-width:1125px) {
  #container { min-width:0; }
  .rnw-top-services { padding:48px 32px; }
  .rnw-top-service { padding:32px 24px; }
  .rnw-top-news { padding:64px 32px; }
  .rnw-top-news__inner { column-gap:16px; }
  .rnw-top-h2__jp { font-size:32px; }
  .rnw-top-news__title { font-size:16px; }
  .rnw-top-news__more { padding-inline:20px; font-size:15px; }
}
@media (min-width:768px) and (max-width:1023px) { .rnw-top-side { display:none!important; } }
@media (max-width:374px) { .rnw-top-quicknav { padding-inline:24px; } .rnw-top-news__more { padding-inline:20px; font-size:16px; } }
@media (hover:hover) {
  .rnw-top-service__link:hover,.rnw-top-quicknav a:hover,.rnw-top-news__link:hover { opacity:.7; }
  .rnw-top-news__more:hover { background:#fff; color:var(--rnw-top-red); opacity:.7; }
}
@media (prefers-reduced-motion:reduce) { .rnw-top-hero__slide { transition:none; } }

/* 既存サイドバー・SP固定CTA */
:root { --rnw-top-cta-h: 49px; }

.rnw-top-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  /* ドロワー（--rnw-z-menu 13）より上。開いている間もバーを出したままにする。
     お問い合わせモーダル（.rnw-contact）はさらに上（15）。 */
  z-index: 14;
  display: flex;
  gap: 1.923px;  /* Figma実測 */
  width: 100%;
  background-color: var(--rnw-white);
  filter: drop-shadow(0 -6.779px 7.344px rgba(0, 0, 0, 0.08));  /* Figma実測 */
}

/* ドロワーを開いている間、バーの下に隠れる分だけ中身を送る。
   ドロワーの中身は .rnw-menu__inner（common.css 6-2）で pb-40 を持つ。
   追従CTAは総合トップにしか無いので、トップの body（#site_index）に限定する。 */
#site_index.rnw-menu-open .rnw-menu__inner {
  padding-bottom: calc(40px + var(--rnw-top-cta-h));
}

/* 「お問い合わせ」はモーダルを開くだけなので <button>。<a> と同じ見た目に
   揃えるため、ブラウザ既定の枠線・フォント・角丸を打ち消しておく。 */
.rnw-top-cta__btn {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 16.346px 31.731px;   /* Figma実測 */
  border: 0;
  border-radius: 0;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  text-align: center;
  white-space: nowrap;
}

/* Figma 363:55450 / common/accent/gold */
.rnw-top-cta__btn--service {
  background-color: var(--rnw-top-gold);
  color: var(--rnw-text);
}

/* Figma 363:55452 / common/accent/red */
.rnw-top-cta__btn--contact {
  border-left: 0.962px solid var(--rnw-white);   /* Figma実測 */
  background-color: var(--rnw-top-red);
  color: var(--rnw-white);
}

/* =====================================================================
   7. レスポンシブ
   ===================================================================== */

/* ---------- SP（〜767px） ---------- */
@media only screen and (max-width: 767px) {

  /* 固定ヘッダー（.rnw-header / position:fixed）のぶん本文を下げる。
     旧CSSの #container は padding を持たないため、ここで確保しないと
     メインビジュアルの上端がヘッダーに隠れる。1px は SPヘッダーの下線ぶん。 */
  .rnw-top { padding-top: calc(var(--rnw-header-h-sp) + 1px); }

  /* 追従CTA（6節）はページ最下部＝フッターの最下部に重なる。
     コピーライトが隠れないよう、バーの高さ（約49px）ぶんを足しておく。
     このCSSは総合トップでしか読み込まれないため、他ページには影響しない。 */
  .rnw-footer__legal { padding-bottom: 73px; }  /* Figma実測24 ＋ バー49 */
}

@media (min-width: 768px) {
  .rnw-top-side {
    flex: 0 0 20.834%;              /* Figma実測 300 ÷ 1440 */
    max-width: 300px;               /* Figma実測 */
    background-color: #FAF7F2;      /* Figma common/bg */
  }

  .rnw-top-side__inner {
    position: sticky;
    top: var(--rnw-header-h-pc);
    display: flex;
    flex-direction: column;
    gap: 20px;          /* Figma実測（グループ間） */
    padding: 40px 24px; /* Figma実測 */
    /* 見出し・項目の文字をこの幅（cqi）に合わせて縮めるため（2026-09-24） */
    container-type: inline-size;
  }

  .rnw-top-side__group {
    display: flex;
    flex-direction: column;
    gap: 8px;   /* Figma実測 */
  }

  /* Figma 1694:12323 / PC/text/large/bold */
  /* サイドバーは画面幅の20.834%で縮むので、最長の「法人・自治体のお客様」
     （10文字＋字間）が1行に収まるよう、幅に合わせて縮める。上限はFigmaの20px（2026-09-24）。 */
  .rnw-top-side__title {
    font-size: min(20px, calc(100cqi / 10.5 - 1.2px));
    white-space: nowrap;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 1.2px;
    color: #333333;   /* Figma Fill/Default */
  }

  /* Figma 1694:12324（stroke-dasharray "2 2"） */
  .rnw-top-side__line {
    --rnw-dash-c: #333333;
    display: block;
    width: 100%;
    height: 1px;
  }

  .rnw-top-side__list {
    display: flex;
    flex-direction: column;
    gap: 8px;   /* Figma実測（項目間） */
  }

  .rnw-top-side__item {
    display: flex;
    flex-direction: column;
  }

  /* Figma 1694:12326 / PC/text/dafalut/bold
     Figmaは16px。サイドバー幅（300px・画面幅の20.834%）では
     「法人向け教育ベビーシッター」等が改行されるため90%に落とした（2026-09-24）。
     さらに狭い幅でも最長の「法人向け教育ベビーシッター」（13文字＋字間）が
     1行に収まるよう、幅に合わせて縮める。 */
  .rnw-top-side__label {
    font-size: min(14.4px, calc(100cqi / 13.5 - 1.2px));
    white-space: nowrap;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 1.2px;
    color: #333333;
  }

  /* 遷移先未確定の項目（<span> 出力） */
  .rnw-top-side__label--pending { cursor: default; }

}

@media (min-width:768px) and (max-width:1125px) {
  .rnw-top-side__inner { gap:16px; padding:24px 16px; }
  .rnw-top-side__title { font-size:min(17px,calc(100cqi / 10.5 - 1.2px)); }
  .rnw-top-side__label { font-size:min(12.6px,calc(100cqi / 13.5 - 1.2px)); }
}
