@charset "utf-8";
/* ============================================================
   Figma: 202609保護者向け
   PC = node 1:2 (1440) / SP = node 52:4 (375)
   SPブレークポイント: 767px以下
   ============================================================ */
:root{
  --orange:#ff4800;
  --text:#222;
  --pink:#fff1eb;
  --gray:#f5f5f5;
  --dark:#222;
  --line:#7a7a7a;
  --voice-name:#ff976e;
  --font:"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","Hiragino Sans","Noto Sans JP","Yu Gothic Medium",Meiryo,sans-serif;
  --side:100px;
  --content:1240px;
}
*,*::before,*::after{box-sizing:border-box;}
/* スクロールはテーマ側のJS（a[href^="#"] を1秒でアニメーション）に任せる。smooth を併用すると約10秒かかるため指定しない */
html{-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--font);font-weight:300;color:var(--text);background:#fff;line-height:normal;}
img{display:block;max-width:100%;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit;}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{transition:none!important;}}

.wrap{max-width:1440px;margin:0 auto;overflow:hidden;}
/* テーマ側の p{margin-bottom:1.75em} / .entry-content p{margin-bottom:1.6em} を打ち消し */
div.wrap p{margin-bottom:0;}
.sec{padding:100px var(--side);}
.sec--pink{background:var(--pink);}
.sec--gray{background:var(--gray);}
.sec--orange{background:var(--orange);}
.sec--dark{background:var(--dark);}
.inner{max-width:var(--content);margin:0 auto;}
.sp-br{display:none;}
.sp-only{display:none;}

/* ---- 共通見出し ---- */
.head{display:flex;flex-direction:column;align-items:flex-start;gap:30px;max-width:722px;}
.head--center{align-items:center;text-align:center;margin-left:auto;margin-right:auto;}
.head--wide{max-width:780px;}
.head__top{display:flex;flex-direction:column;gap:20px;align-items:flex-start;}
.head--center .head__top{align-items:center;}
.eyebrow{display:inline-block;font-weight:600;font-size:16px;letter-spacing:.8px;color:var(--orange);border-bottom:2px solid var(--orange);padding-bottom:10px;}
.head__title{font-weight:600;font-size:28px;line-height:42px;letter-spacing:1.4px;}
/* テーマ側の .entry-content h2{text-align:center} を打ち消し */
.head .head__title{text-align:left;}
.head--center .head__title{text-align:center;}
.head__lead{font-size:16px;line-height:30px;letter-spacing:.8px;}
.sec--orange .eyebrow{color:#fff;border-bottom-color:#fff;}
.sec--orange .head__title,.sec--orange .head__lead{color:#fff;}
.sec--dark .head__title,.sec--dark .head__lead{color:#fff;}

/* ============================================================
   1. HEADER
   ============================================================ */
.header{display:flex;flex-direction:column;align-items:center;gap:19px;background:#fff;}
.header__bar{width:100%;aspect-ratio:1898/121;}
.header__bar img{width:100%;height:100%;object-fit:cover;}
.header__bar--sp{display:none;aspect-ratio:375/49;}
.gnav{display:flex;align-items:center;gap:50px;flex-wrap:wrap;justify-content:center;padding:0 20px;}
.gnav__list{display:flex;align-items:center;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.gnav__list li{display:flex;align-items:center;justify-content:center;padding:0 20px;border-right:1px solid var(--line);}
.gnav__list li:first-child{border-left:1px solid var(--line);}
.gnav__list a{font-size:13px;letter-spacing:.65px;white-space:nowrap;}
.gnav__cta{display:flex;align-items:center;justify-content:center;background:var(--orange);border-radius:5px;padding:10px 20px;font-weight:600;font-size:13px;letter-spacing:.65px;color:#fff;white-space:nowrap;}

/* ============================================================
   2. HERO
   ============================================================ */
.hero{position:relative;height:762px;overflow:hidden;}
.hero__bg{position:absolute;left:50%;transform:translateX(-50%);top:-85px;width:1440px;height:816px;}
.hero__bg img{width:100%;height:100%;object-fit:cover;}
.hero__body{position:absolute;left:var(--side);top:92px;width:710px;max-width:calc(100% - var(--side)*2);display:flex;flex-direction:column;align-items:flex-start;gap:50px;}
.hero__eyebrow{display:inline-block;font-weight:600;font-size:18px;letter-spacing:.9px;color:var(--orange);border-bottom:2px solid var(--orange);padding-bottom:10px;}
.hero__copy{display:flex;flex-direction:column;gap:30px;}
.hero__lines{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.hero__line{font-weight:600;font-size:35px;letter-spacing:1.75px;}
.hero__mark{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.hero__mark b{display:inline-flex;align-items:center;justify-content:center;background:var(--orange);border-radius:5px;padding:10px 20px;font-weight:600;font-size:40px;letter-spacing:2px;color:#fff;}
.hero__lead{font-size:16px;line-height:30px;letter-spacing:.8px;}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:20px;background:#fff;border:2px solid var(--orange);border-radius:5px;padding:20px 30px;font-weight:600;font-size:16px;letter-spacing:.8px;color:var(--orange);}
.btn-outline img{width:5px;height:9px;}

/* ============================================================
   3. FAQ FROM PARENTS
   ============================================================ */
.parents{position:relative;}
.parents__deco{position:absolute;right:0;top:46px;width:258px;pointer-events:none;}
.parents__grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:66px;row-gap:40px;margin-top:73px;position:relative;}
.parents__item{display:flex;flex-direction:column;gap:20px;}
.parents__q{background:#fff;border-radius:5px;padding:18px 20px;text-align:center;font-weight:600;font-size:18px;letter-spacing:.9px;color:var(--orange);}
.parents__a{font-size:16px;line-height:29px;letter-spacing:.8px;}

/* ============================================================
   4. WHY THOMAS LIVING
   ============================================================ */
.why__list{display:flex;flex-direction:column;gap:60px;margin-top:60px;}
.why__row{display:flex;align-items:flex-start;gap:70px;}
.why__row--rev{flex-direction:row-reverse;}
.why__photo{flex:0 0 325px;width:325px;height:325px;border-radius:50%;overflow:hidden;}
.why__photo img{width:100%;height:100%;object-fit:cover;}
.why__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
.why__label{display:flex;align-items:center;gap:10px;}
.why__label::before{content:"";flex:0 0 11px;width:11px;height:11px;border-radius:50%;background:var(--orange);}
.why__label span{font-weight:600;font-size:16px;letter-spacing:.8px;color:var(--orange);}
.why__title{font-weight:600;font-size:24px;line-height:36px;letter-spacing:1.2px;margin-top:15px;}
.why__text{font-size:16px;line-height:30px;letter-spacing:.8px;margin-top:27px;}
.why__tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.tag{background:var(--orange);border-radius:5px;padding:10px 20px;font-weight:600;font-size:14px;line-height:21px;letter-spacing:.7px;color:#fff;}

/* ============================================================
   5. SCHEDULE
   ============================================================ */
.schedule__cal{margin-top:50px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.schedule__cal img{width:1240px;max-width:none;height:auto;}
.schedule__cal .cal-sp{display:none;}
.schedule__notes{display:flex;gap:50px;align-items:flex-start;margin-top:10px;}
.schedule__deco{flex:0 0 209px;width:209px;padding-top:13px;}
.schedule__body{display:flex;flex-direction:column;gap:28px;padding-top:52px;min-width:0;}
.note{border-left:4px solid var(--orange);padding:0 20px;font-weight:600;font-size:16px;letter-spacing:.8px;line-height:1.5;}
.note em{font-style:normal;color:var(--orange);}

/* ============================================================
   6. FLOW
   ============================================================ */
.flow__steps{display:flex;flex-direction:column;align-items:center;gap:50px;margin-top:73px;}
.flow__group{position:relative;display:grid;gap:27px;width:100%;}
.flow__group--3{grid-template-columns:repeat(3,1fr);max-width:924px;--n:3;}
.flow__group--4{grid-template-columns:repeat(4,1fr);gap:26px;--n:4;}
.flow__line{position:absolute;top:24px;left:calc(50% / var(--n));right:calc(50% / var(--n));height:1px;background:var(--orange);}
.flow__step{position:relative;display:flex;flex-direction:column;align-items:center;gap:28px;}
.flow__num{flex:0 0 49px;width:49px;height:49px;border-radius:50%;background:var(--orange);color:#fff;font-weight:600;font-size:20px;display:flex;align-items:center;justify-content:center;}
.flow__card{background:#fff;border-radius:5px;padding:30px 10px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;width:100%;}
.flow__icon{width:80px;height:80px;display:flex;align-items:center;justify-content:center;flex:0 0 80px;}
.flow__name{display: block;font-weight:600;font-size:16px;letter-spacing:.8px;color:var(--orange);}
.flow__desc{font-size:14px;line-height:20px;letter-spacing:.7px;}

/* ============================================================
   7. CHECKLIST
   ============================================================ */
.check__grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:35px;row-gap:36px;margin-top:73px;}
.check__card{border:1px solid var(--orange);border-radius:5px;padding:20px;display:flex;flex-direction:column;gap:20px;}
.check__head{display:flex;align-items:center;gap:20px;width:100%;cursor:default;}
.check__title{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;font-weight:600;font-size:1.2em;line-height:27px;letter-spacing:.9px;margin:0;}
/* テーマ側の button:hover（背景#333・文字白）と h3 の文字サイズを打ち消し */
.check__card .check__head,.check__card .check__head:hover,.check__card .check__head:focus,.check__card .check__head:active{background:transparent;border-color:transparent;color:inherit;transition:none;}
.check__head .check__title{font-size:1.2em;color:#222;}
.check__title img{flex:0 0 15px;width:15px;height:16px;}
.check__mark{display:none;flex:0 0 10px;width:10px;height:10px;}
.check__text{font-size:14px;line-height:24px;letter-spacing:.7px;}

/* ============================================================
   8. FOR NEW WORKERS
   ============================================================ */
.nw__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:31px;margin-top:73px;}
.nw__card{background:#fff;border-radius:5px;padding:30px 20px;display:flex;flex-direction:column;align-items:center;gap:10px;}
.nw__icon{width:95px;height:103px;display:flex;align-items:flex-end;justify-content:center;flex:0 0 auto;}
.nw__icon img{width:auto;height:100%;}
.nw__name{font-weight:600;font-size:16px;letter-spacing:.8px;color:var(--orange);text-align:center;}
.nw__desc{font-size:14px;line-height:20px;letter-spacing:.7px;}
.nw__sched{display:flex;gap:45px;align-items:center;margin-top:73px;}
.nw__deco{flex:0 0 211px;width:211px;}
.nw__sched-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:40px;}
.nw__sched-head{display:flex;flex-direction:column;align-items:flex-start;}
.nw__sched-title{font-weight:600;font-size:28px;line-height:42px;letter-spacing:1.4px;color:#fff;margin:0;}
.nw__sched-head .nw__sched-title{color:#fff;}
.nw__badge{display:inline-flex;background:var(--dark);border-radius:5px;padding:10px 20px;font-weight:600;font-size:16px;letter-spacing:.8px;color:#fff;margin-top:20px;}
.nw__table{background:#fff;border-radius:5px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.nw__cell{padding:16px 30px;display:flex;flex-direction:column;gap:10px;border-right:1px solid var(--orange);}
.nw__cell:last-child{border-right:0;}
.nw__cell b{font-weight:600;font-size:16px;line-height:30px;letter-spacing:.8px;color:var(--orange);}
.nw__cell span{font-size:14px;line-height:22px;letter-spacing:.7px;}

/* ============================================================
   9. AREA GUIDE
   ============================================================ */
section.area{float:none;margin:0;}
.area__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:73px;}
.area__card{padding:20px;border-radius:5px;display:flex;flex-direction:column;gap:15px;}
.area__main{display:flex;flex-direction:column;gap:15px;flex:1 1 auto;}
.area__thumb{height:160px;background:#d8d8d8;overflow:hidden;}
.area__thumb img{width:100%;height:100%;object-fit:cover;}
.area__info{display:flex;flex-direction:column;gap:15px;min-width:0;}
.area__name{font-weight:600;font-size:1.1rem;letter-spacing:.8px;margin:0;}
.area__info .area__name{font-size:1.1rem;}
.area__rent{font-size:14px;line-height:24px;letter-spacing:.7px;margin-top:10px;}
.area__points{font-size:14px;line-height:24px;letter-spacing:.7px;list-style:none;margin:0;padding:0;}
.area__points li::before{content:"✓ ";color:var(--orange);}
.area__btns{display:flex;gap:10px;}
.btn-sm-outline{display:inline-flex;align-items:center;justify-content:center;background:#fff;border:2px solid var(--orange);border-radius:5px;padding:10px 15px;font-weight:600;font-size:12px;letter-spacing:.6px;color:var(--orange);white-space:nowrap;}
.area__btns a.btn-sm-outline{background:#fff;border:2px solid var(--orange);text-decoration:none;transition:background-color .2s,color .2s;}
.area__btns a.btn-sm-outline:hover,.area__btns a.btn-sm-outline:focus-visible{background:var(--orange);color:#fff;text-decoration:none;}
.btn-sm-solid{display:inline-flex;flex:1 1 auto;align-items:center;justify-content:center;background:var(--orange);border-radius:5px;padding:10px 15px;font-weight:600;font-size:12px;letter-spacing:.6px;color:#fff;white-space:nowrap;}
.area__btns a.btn-sm-solid{background:var(--orange);border:2px solid var(--orange);color:#fff;text-decoration:none;transition:background-color .2s,color .2s;}
.area__btns a.btn-sm-solid:hover,.area__btns a.btn-sm-solid:focus-visible{background:#fff;color:var(--orange);text-decoration:none;}

/* ============================================================
   10. VOICE
   ============================================================ */
.voice__cards{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:73px;}
.voice__card{background:#fff;border-radius:5px;padding:30px 20px;display:flex;flex-direction:column;align-items:center;gap:15px;}
.voice__stars{width:95px;height:15px;flex:0 0 15px;}
.voice__text{font-size:14px;line-height:20px;letter-spacing:.7px;}
.voice__name{font-weight:600;font-size:13px;letter-spacing:.65px;color:var(--voice-name);margin-top:10px;}
.voice__deco{width:824px;max-width:100%;margin:40px auto 0;}

/* ============================================================
   11. FAQ
   ============================================================ */
.faq__list{max-width:940px;margin:60px auto 0;display:flex;flex-direction:column;gap:15px;}
.faq__item{background:#fff;border-radius:5px;overflow:hidden;}
.faq__q{display:flex;align-items:center;justify-content:space-between;width:100%;gap:20px;padding:10px 30px;min-height:53px;}
.faq__q-text{display:flex;align-items:center;gap:20px;font-weight:600;min-width:0;}
.faq__q-text i{font-style:normal;font-size:22px;letter-spacing:1.1px;color:var(--orange);flex:0 0 auto;}
.faq__q-text span{font-size:16px;line-height:24px;letter-spacing:.8px;}
.faq__mark{flex:0 0 10px;width:10px;height:10px;}
.faq__a{padding:0 30px 10px 69px;font-size:14px;line-height:20px;letter-spacing:.7px;}
.faq__item .faq__q:hover,.faq__item .faq__q:focus,.faq__item .faq__q:active{background:transparent;border-color:transparent;color:inherit;}

/* ============================================================
   12. CONTACT
   ============================================================ */
.contact__box{max-width:940px;margin:73px auto 0;background:#fff;min-height:884px;display:flex;align-items:center;justify-content:center;}
/* お問い合わせ種別（CF7 で p.pm_business に「借りたい」を初期選択済み）を非表示 ※/pm-business/ と同じ方式 */
.wpcf7 .pm_business{display:none;}
.contact__box p{font-size:16px;line-height:30px;letter-spacing:.8px;color:red;}
.sitefoot img{width:100%;height:auto;}

/* ============================================================
   タブレット（768〜1240px）— PCレイアウトの段階的縮小
   ============================================================ */
@media (max-width:1240px) and (min-width:768px){
  :root{--side:48px;}
  .hero{height:auto;padding:60px 0 80px;}
  .hero__bg{display:none;}
  .hero__body{position:static;width:100%;padding:0 var(--side);max-width:none;}
  .parents__deco{display:none;}
}
@media (max-width:1080px) and (min-width:768px){
  .why__row,.why__row--rev{flex-direction:column;gap:30px;}
  .why__photo{flex:0 0 auto;width:280px;height:280px;}
  .schedule__notes{flex-direction:column;gap:20px;}
  .schedule__body{padding-top:0;}
  .nw__sched{flex-direction:column;align-items:flex-start;gap:30px;}
  .nw__table{grid-template-columns:repeat(2,1fr);}
  .nw__cell:nth-child(2n){border-right:0;}
  .area__grid,.voice__cards{grid-template-columns:repeat(2,1fr);}
  .flow__group--4{grid-template-columns:repeat(2,1fr);--n:2;}
  .parents__grid,.check__grid,.nw__cards{grid-template-columns:repeat(2,1fr);}
}

/* ============================================================
   SP（〜767px）— Figma node 52:4 (375px) に準拠
   ============================================================ */
@media (max-width:767px){
  :root{--side:20px;}
  .sp-br{display:inline;}
  .sp-only{display:block;}
  .pc-only{display:none!important;}
  .sec{padding:100px var(--side);}

  /* --- 見出し --- */
  .head,.head--wide{max-width:none;width:100%;}
  .head--center{align-items:flex-start;text-align:left;}
  .head--center .head__top{align-items:flex-start;}
  .head--center .head__title{text-align:left;}

  /* --- HEADER --- */
  .header{gap:0;}
  .header__bar--pc{display:none;}
  .header__bar--sp{display:block;}
  .gnav{display:none;}

  /* --- HERO --- */
  .hero{height:auto;overflow:visible;margin-bottom:40px;}
  .hero__bg{position:relative;left:auto;transform:none;top:auto;width:100%;height:123.2vw;overflow:hidden;}
  .hero__bg img{width:260.8vw;height:147.7vw;max-width:none;object-fit:fill;margin-left:-140.8vw;margin-top:-24.5vw;}
  .hero__body{position:static;width:100%;max-width:none;padding:20px var(--side) 0;gap:26px;}
  .hero__eyebrow{font-size:16px;letter-spacing:.8px;}
  .hero__copy{gap:15px;}
  .hero__line{font-size:26px;letter-spacing:1.3px;line-height:1.5;}
  .hero__mark b{font-size:30px;letter-spacing:1.5px;padding:5px 10px;}
  .hero__lead{font-size:14px;line-height:27px;letter-spacing:.7px;}
  .btn-outline{padding:15px 20px;font-size:13px;letter-spacing:.65px;}

  /* --- FAQ FROM PARENTS --- */
  .parents__deco{width:133px;top:21px;right:0;}
  .parents__grid{grid-template-columns:1fr;row-gap:25px;margin-top:40px;}
  .parents__q{padding:18px 10px;}

  /* --- WHY --- */
  .why__list{gap:60px;margin-top:40px;}
  .why__row,.why__row--rev{flex-direction:column;gap:20px;align-items:stretch;}
  .why__photo{flex:0 0 auto;width:100%;max-width:325px;height:auto;aspect-ratio:1/1;margin:0 auto;}
  .why__title{font-size:24px;line-height:36px;}
  .why__tags{flex-direction:column;gap:10px;align-items:stretch;}
  .tag{width:100%;padding:10px 20px;}

  /* --- SCHEDULE --- */
  .schedule__cal{margin-top:50px;}
  .schedule__cal .cal-pc{display:none;}
  .schedule__cal .cal-sp{display:block;width:726px;max-width:none;}
  .schedule__notes{flex-direction:column;gap:0;margin-top:0;}
  .schedule__deco{flex:0 0 auto;width:127px;padding-top:0;margin-top:30px;}
  .schedule__body{padding-top:30px;gap:28px;width:100%;}
  .note{font-size:16px;line-height:28px;}

  /* --- FLOW（縦並び・番号は左） --- */
  .flow__steps{gap:30px;margin-top:40px;}
  .flow__group,.flow__group--3,.flow__group--4{grid-template-columns:1fr;gap:27px;max-width:none;}
  .flow__line{top:24px;bottom:24px;left:24px;right:auto;width:1px;height:auto;}
  /* 3→4 の間（.flow__steps の gap 30px＋4側の開始位置 24px）までつなげる */
  .flow__group--3 .flow__line{bottom:-54px;}
  .flow__step{flex-direction:row;align-items:center;gap:28px;}
  .flow__card{flex-direction:row;align-items:center;gap:10px;padding:20px 10px;text-align:left;}
  .flow__card-body{display:flex;flex-direction:column;gap:10px;min-width:0;}
  .flow__desc br{display:none;}

  /* --- CHECKLIST（アコーディオン） --- */
  .check__grid{grid-template-columns:1fr;row-gap:10px;margin-top:40px;}
  .check__card{gap:0;}
  .check__head{cursor:pointer;}
  .check__mark{display:block;}
  .check__text{display:none;padding-top:20px;}
  .check__card.is-open .check__text{display:block;}

  /* --- NEW WORKERS --- */
  .nw__cards{grid-template-columns:1fr;gap:31px;margin-top:40px;}
  .nw__desc{line-height:20px;}
  .nw__sched{flex-direction:column;align-items:center;gap:0;margin-top:40px;}
  .nw__deco{flex:0 0 auto;width:101px;}
  .nw__sched-body{width:100%;gap:20px;margin-top:12px;}
  .nw__sched-head{align-items:center;text-align:center;}
  .nw__sched-title{font-size:28px;line-height:42px;}
  .nw__badge{margin-top:20px;}
  .nw__table{grid-template-columns:1fr;gap:0;}
  .nw__cell{padding:10px 20px;border-right:0;border-bottom:1px solid var(--orange);}
  .nw__cell:last-child{border-bottom:0;}

  /* --- AREA（画像左・テキスト右） --- */
  .area__grid{grid-template-columns:1fr;gap:50px;margin-top:40px;}
  .area__card{padding:0;gap:15px;}
  .area__main{flex-direction:row;gap:15px;}
  .area__thumb{flex:0 0 160px;width:160px;height:160px;}
  .area__info{flex:1 1 auto;gap:15px;}
  .area__btns{gap:10px;}
  .btn-sm-outline{flex:1 1 0;}
  .btn-sm-solid{flex:1 1 0;}

  /* --- VOICE --- */
  .voice__cards{grid-template-columns:1fr;gap:26px;margin-top:40px;}
  .voice__deco{width:calc(100% + 40px);max-width:none;margin:30px -20px 0;}

  /* --- FAQ --- */
  .faq__list{margin-top:40px;}
  .faq__q{padding:10px 15px;gap:15px;}
  .faq__q-text{gap:20px;align-items:flex-start;}
  .faq__q-text i{line-height:24px;}
  .faq__mark{margin-top:7px;}
  .faq__a{padding:0 15px 10px 54px;}

  /* --- CONTACT --- */
  .contact__box{margin-top:40px;min-height:560px;}
}

@media (max-width:374px){
  .hero__line{font-size:22px;}
  .hero__mark b{font-size:24px;}
  .area__main{flex-direction:column;}
  .area__thumb{flex:0 0 auto;width:100%;}
}