/* AI退去立会のご案内（/moveout-guide）専用。入居者向けの案内ページ。
   現行 STUDIO 版（service.remodela.jp/moveout-guide）のレイアウト・余白・文字サイズ・色をページ専用にそのまま写している。値は現行のスタイル規則（幅ごと）から取った。
   - 表示アニメーション: 現行と同じく、ファーストビューの見出し・説明・イラストと「よくある質問」の見出し・質問一覧が、画面に入ってから 0.6 秒後に 0.6 秒でフェード表示
   - 現行はサイト共通のヘッダー・フッターを使わない（ロゴ＋ページ内メニューのヘッダー、紺地に © だけのフッター）。右下の「ページ先頭へ」ボタンも無い
   - 840px 以下はヘッダーのメニューを出さない（現行どおりロゴのみ）
   ブレークポイントは現行と同じ 1280 / 840 / 540 / 320px。 */
.mg-page{--mg-green:#085f2a;--mg-g2:#309873;--mg-txt:#333;--mg-ink:#242528;--mg-f:Overpass,'Noto Sans JP','Open Sans',sans-serif}
html:has(body.mg-page){scroll-padding-top:90px}
.mg{display:flex;flex-direction:column;align-items:center;background:#fff;color:var(--mg-txt)}
.mg *{flex-shrink:0;max-width:100%}
.mg :is(p,h1,h2,h3,h4,li,span){overflow-wrap:anywhere}
/* 見やすさの改善: <wbr> を入れた文節の区切りでだけ折り返す（1行に収まる幅の見た目は現行と同じ） */
.mg .mg-kw{word-break:keep-all;overflow-wrap:anywhere}
.mg img{display:block;height:auto}
/* 表示アニメーション（top.css の [data-appear] を使う。現行は 0.6 秒待ってから 0.6 秒でフェード） */
.mg [data-appear]{--ad:.6s;--adl:.6s}

/* ---------- ヘッダー（このページ専用。現行は固定表示。ここは追従表示で同じ高さを占める） ---------- */
.mg-header{z-index:60;padding:0 30px;border-bottom:0;background:#fff;font-family:var(--mg-f);line-height:1.4}
.mg-header .header-inner{width:1280px;max-width:100%;height:90px;min-height:0;margin:0 auto;gap:0;justify-content:space-between}
.mg-brand{flex:none;display:flex;align-items:flex-end;color:var(--mg-green)}
.mg-brand__ai{padding-bottom:1px;font-size:37px;font-weight:800;line-height:1}
.mg-brand__name{font-size:30px;font-weight:900;line-height:1.25}
.mg-nav{margin:0;display:flex;align-items:center;gap:0}
.mg-nav a{padding:10px 20px;color:var(--mg-ink);font-size:18px;font-weight:700;line-height:1.4;text-align:center;text-decoration:none;white-space:nowrap;transition:color .3s cubic-bezier(.4,.4,0,1)}
.mg-nav a:hover{color:#286b4a}

/* ---------- ファーストビュー ---------- */
/* 見出しの左端をヘッダーのロゴ（幅1280px・左右30px）にそろえる */
.mg .mg-hero{position:relative;z-index:1;width:100%;padding:0 30px;background:var(--mg-green);display:flex;flex-direction:column;align-items:center;justify-content:center}
.mg .mg-hero__in{width:1280px;padding:150px 0;display:flex;align-items:stretch;justify-content:center}
.mg .mg-hero__text{width:70%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
/* 現行は見出しの右に空の文字要素（4vw・行の高さ 1.4）があり、その分だけ見出しの上下が広い */
.mg .mg-hero__head{min-height:5.6vw;display:flex;align-items:center;justify-content:center}
.mg .mg-hero__title{margin:0;color:#fff;font-size:3.6vw;font-weight:800;line-height:1.4;text-align:left}
.mg .mg-hero__sub{margin:15px 0;color:#fff;font-size:1.5vw;font-weight:600;line-height:1.7}
.mg .mg-hero__box{margin-top:15px;padding:30px;border:1px solid #f6f7f9;color:#f0f8f3;font-size:18px;font-weight:500;line-height:1.7}
.mg .mg-hero__fig{width:30%;display:flex;align-items:flex-end;justify-content:center}
.mg .mg-hero__fig>div{width:100%}
.mg .mg-hero__fig img{width:100%}

/* ---------- 手間なくラクラク退去立会！ ---------- */
.mg .mg-merit{width:100%;padding:80px 0 40px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mg .mg-merit__head{width:1280px;padding:0 40px;display:flex;flex-direction:column;align-items:flex-start}
.mg .mg-merit__title{width:100%;margin:0;display:flex;align-items:center;justify-content:center;gap:5px;color:var(--mg-ink);font-size:40px;font-weight:700;line-height:1.35;font-feature-settings:'palt' 1}
.mg .mg-merit__em{color:#277a5c}
.mg .mg-merit__lead{width:100%;margin-top:15px;color:var(--mg-txt);font-size:24px;font-weight:500;line-height:1.7;text-align:center}
.mg .mg-merit__list{width:980px;display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center}
.mg .mg-merit__list li{width:33.3%;padding:30px 0;background:#fff;display:flex;flex-direction:column;align-items:center;gap:15px}
.mg .mg-merit__list img{width:70%}
.mg .mg-merit__list p{width:100%;color:var(--mg-ink);font-size:20px;font-weight:700;line-height:1.5;text-align:center}

/* ---------- AI退去立会とは？ ---------- */
.mg .mg-about{width:100%;padding:80px 0 100px;background:#f6f7f9;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mg .mg-about__fig{width:500px;margin-bottom:40px}
.mg .mg-about__body{width:1280px;padding:0 40px;display:flex;flex-direction:column;align-items:center}
.mg .mg-about__title{width:100%;margin:0;color:var(--mg-ink);font-size:40px;font-weight:700;line-height:1.35;text-align:center;font-feature-settings:'palt' 1}
/* 2行以上の文は左そろえ（文のかたまりはページの中央に置く） */
.mg .mg-about__body p{width:100%;max-width:760px;margin-top:15px;color:var(--mg-txt);font-size:18px;font-weight:500;line-height:1.7;text-align:left}

/* ---------- ご利用の流れ ---------- */
.mg .mg-flow{width:100%;padding:80px 100px 60px;border-bottom:1px solid rgba(36,37,40,.1);display:flex;flex-direction:column;align-items:center;justify-content:center}
.mg .mg-flow__title{width:1100px;margin:0 0 30px;padding:0 40px;color:var(--mg-ink);font-size:40px;font-weight:700;line-height:1.35;text-align:center;font-feature-settings:'palt' 1}
.mg .mg-phase{width:1280px;margin:0 0 40px;padding:15px 0 8px;background:var(--mg-g2);color:#fff;font-size:28px;font-weight:700;line-height:1.35;text-align:center;font-feature-settings:'palt' 1}
.mg .mg-steps{width:1280px;margin-bottom:50px;display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center}
.mg .mg-step{width:30%;background:#fff;display:flex;flex-direction:column;align-items:center}
.mg .mg-step img{width:220px;margin-bottom:30px}
.mg .mg-step__head{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
/* 手順の番号は全ページ共通の「STEP 1」の札。見出しより目立たせない */
.mg .mg-step__no{width:fit-content;margin:5px 0 0;padding:4px 12px 3px;border:1px solid #286b4a;border-radius:99px;background:#fff;color:#286b4a;font-size:13px;font-weight:700;line-height:1.4;letter-spacing:.04em;white-space:nowrap}
.mg .mg-step__head h4{margin:0;color:#277a5c;font-size:22px;font-weight:700;line-height:1.5;text-align:left}
.mg .mg-step__desc{width:100%;color:var(--mg-txt);font-size:16px;font-weight:500;line-height:1.7;text-align:left}
.mg .mg-step__desc p{margin:10px 0}
.mg .mg-step__desc--b p{margin:0 0 10px}
.mg .mg-arrow{width:5%;height:400px;display:flex;align-items:center;justify-content:center}
.mg .mg-arrow svg{width:24px;height:24px;fill:#222}

/* ---------- ガイドラインに基づくから安心 ---------- */
.mg .mg-check{width:100%;padding:100px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mg .mg-check__title{width:1100px;margin:0 0 20px;padding:0 40px;color:var(--mg-ink);font-size:40px;font-weight:700;line-height:1.35;text-align:center;font-feature-settings:'palt' 1}
.mg .mg-check__text{width:100%;max-width:880px;margin-bottom:30px;color:var(--mg-txt);font-size:18px;font-weight:500;line-height:1.7;text-align:left}
.mg .mg-check__fig{width:1000px}

/* ---------- よくある質問（現行と同じく押すと 0.3 秒で開閉。複数同時に開ける） ---------- */
.mg .mg-faq{width:100%;padding:100px;background:#f0f8f3;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mg .mg-faq__head{display:flex;flex-direction:column;align-items:center}
.mg .mg-faq__title{width:1100px;margin:0 0 50px;padding:0 40px;color:var(--mg-ink);font-size:40px;font-weight:700;line-height:1.35;text-align:center;font-feature-settings:'palt' 1}
.mg .mg-faq__wrap{width:1100px;display:flex;align-items:flex-start;gap:80px}
.mg .mg-faq__list{flex:2;min-width:0;display:flex;flex-direction:column;gap:10px}
.mg .mg-faq__item{margin:0;padding:0;border:0;border-radius:0;background:#fff}
.mg .mg-faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:0;padding:30px;border:1px solid transparent;list-style:none;cursor:pointer;transition:border-color .3s cubic-bezier(.4,.4,0,1)}
.mg .mg-faq__item summary::before,.mg .mg-faq__item summary::after{content:none}
.mg .mg-faq__item summary::-webkit-details-marker{display:none}
.mg .mg-faq__item summary:hover{border-color:#286b4a}
.mg .mg-faq__q-row{flex:1;min-width:0;display:flex;align-items:center;gap:20px}
.mg .mg-faq__q{flex:none;color:var(--mg-ink);font-size:28px;font-weight:700;line-height:1}
.mg .mg-faq__question{width:calc(90% - 2px);color:var(--mg-ink);font-size:20px;font-weight:700;line-height:2;text-align:left}
.mg .mg-faq__icon{flex:none;width:40px;height:40px;padding:7px;border:1px solid rgba(36,37,40,.1);border-radius:96px;fill:var(--mg-ink);transition:rotate .3s cubic-bezier(.4,.4,0,1),border-color .3s cubic-bezier(.4,.4,0,1),fill .3s cubic-bezier(.4,.4,0,1)}
.mg .mg-faq__item summary:hover .mg-faq__icon{border-color:rgba(36,37,40,.7);fill:#286b4a}
.mg .mg-faq__item[open] .mg-faq__icon{rotate:180deg}
.mg .mg-faq__item.is-closing .mg-faq__icon{rotate:0deg}
.mg .mg-faq__answer{overflow:hidden}
.mg .mg-faq__answer p{padding:30px;color:var(--mg-ink);font-size:16px;font-weight:500;line-height:1.75;text-align:left}

/* ---------- フッター（このページ専用。紺地に ©） ---------- */
.mg-footer{width:100%;padding:60px 100px;background:#001a2b;display:flex;flex-direction:column;align-items:center;font-family:var(--mg-f)}
.mg-footer__in{width:1100px;max-width:100%;display:flex;align-items:flex-end;justify-content:flex-end}
.mg-footer p{margin:0;color:rgba(255,255,255,.6);font-size:13px;font-weight:400;line-height:1.4}

/* ---------- 1280px 以下 ---------- */
@media (max-width:1280px){
  .mg-header{padding:0}
  .mg-header .header-inner{width:100%}
  .mg-brand{margin-left:20px}
  .mg .mg-hero{padding:0 20px}
  .mg .mg-hero__in{width:100%}
  .mg .mg-hero__title{font-size:6vw}
  .mg .mg-hero__sub{font-size:2vw}
  .mg .mg-hero__fig{align-items:center;justify-content:flex-start}
  .mg .mg-merit{padding:100px 60px}
  .mg .mg-merit__title{font-size:32px}
  .mg .mg-merit__list li{width:33.33%;gap:20px}
  .mg .mg-merit__list img{width:180px}
  .mg .mg-about{padding:100px 60px}
  .mg .mg-about__title{font-size:32px}
  .mg .mg-flow{padding:100px 60px}
  .mg .mg-step{padding:25px 30px}
  .mg .mg-step__head h4{font-size:20px}
  .mg .mg-check{padding:100px 60px}
  .mg .mg-faq{padding:100px 60px}
  .mg .mg-faq__wrap{flex-direction:column;gap:40px}
  .mg .mg-faq__list{flex:none;width:calc(100% + 20px);max-width:none;margin:0 -10px}
  .mg .mg-faq__item summary{gap:20px}
  .mg-footer{padding:100px 60px}
}
/* ---------- 840px 以下 ---------- */
@media (max-width:840px){
  .mg-header .header-inner{justify-content:center}
  .mg-nav{display:none}
  .mg .mg-hero{padding:0}
  .mg .mg-hero__in{flex-direction:column;align-items:center;justify-content:flex-start;padding:50px 40px 40px}
  .mg .mg-hero__text{width:100%;align-items:center;justify-content:flex-start}
  .mg .mg-hero__title{font-size:7vw}
  .mg .mg-hero__sub{margin:15px 0 30px;font-size:3vw}
  .mg .mg-hero__box{margin:15px 0 30px;font-size:16px}
  .mg .mg-hero__fig{width:100%;flex-direction:column;align-items:center;justify-content:flex-start}
  .mg .mg-hero__fig>div{width:40%}
  .mg .mg-merit{padding:60px 40px 40px}
  .mg .mg-merit__head{padding:0 20px}
  .mg .mg-merit__title{font-size:28px}
  .mg .mg-merit__lead{font-size:16px}
  .mg .mg-merit__list{column-gap:30px}
  .mg .mg-merit__list li{width:100%;padding:15px 0;gap:15px}
  .mg .mg-about{padding:60px 40px}
  .mg .mg-about__body{padding:0 20px}
  .mg .mg-about__title{font-size:28px}
  .mg .mg-about__body p{font-size:16px}
  .mg .mg-flow{padding:60px 40px 100px}
  .mg .mg-flow__title{font-size:28px}
  .mg .mg-phase{font-size:24px}
  .mg .mg-steps{column-gap:30px}
  .mg .mg-step{width:100%}
  .mg .mg-step__head{align-items:center}
  .mg .mg-step__head h4{width:729px;font-size:24px;text-align:center}
  .mg .mg-arrow{display:none}
  .mg .mg-check{padding:50px 40px}
  .mg .mg-check__title{font-size:24px}
  .mg .mg-check__text{font-size:16px}
  .mg .mg-faq{padding:50px 40px}
  .mg .mg-faq__title{font-size:28px}
  .mg .mg-faq__wrap{padding:0 20px}
  .mg .mg-faq__list{width:calc(100% + 40px);margin:0 -20px}
  .mg-footer{padding:100px 40px}
  .mg-footer__in{flex-direction:column;align-items:center;justify-content:flex-start;gap:15px;padding:0 40px}
  .mg-footer p{font-size:14px}
}
/* ---------- 540px 以下 ---------- */
@media (max-width:540px){
  html:has(body.mg-page){scroll-padding-top:80px}
  .mg-header .header-inner{height:80px}
  .mg-brand__ai{font-size:30px}
  .mg-brand__name{font-size:26px}
  .mg .mg-hero__in{padding:50px 15px 40px}
  .mg .mg-hero__title{font-size:37.8px}
  .mg .mg-hero__sub{margin:15px 0;font-size:20px}
  .mg .mg-hero__box{width:100%}
  .mg .mg-hero__fig>div{width:60%}
  .mg .mg-merit{padding:60px 20px}
  .mg .mg-merit__head{padding:0}
  .mg .mg-merit__lead{text-align:left}
  .mg .mg-merit__title{font-size:20px}
  .mg .mg-merit__list{align-items:flex-start;padding-top:20px}
  .mg .mg-merit__list li{flex-direction:row;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:10px}
  .mg .mg-merit__list li:first-child{align-items:center}
  .mg .mg-merit__list img{width:calc(60% - 4px)}
  .mg .mg-merit__list p{font-size:18px}
  .mg .mg-about{padding:60px 20px}
  .mg .mg-about__fig{width:80%}
  .mg .mg-about__body{padding:0 10px}
  .mg .mg-about__title{font-size:20px}
  .mg .mg-flow{padding:60px 20px}
  .mg .mg-flow__title{font-size:24px}
  .mg .mg-phase{width:100%;margin:0;font-size:20px}
  .mg .mg-steps{align-items:flex-start;padding-top:20px}
  .mg .mg-steps--day{margin-bottom:0}
  .mg .mg-step{flex-direction:row;flex-wrap:wrap;align-items:flex-start;justify-content:center;padding:25px 0}
  .mg .mg-step__head{width:100%;align-items:center;justify-content:flex-start}
  .mg .mg-step__head h4{font-size:20px}
  .mg .mg-check{padding:60px 20px}
  .mg .mg-faq{padding:60px 20px}
  .mg .mg-faq__title{font-size:24px}
  .mg .mg-faq__wrap{padding:0 10px}
  .mg .mg-faq__list{width:calc(100% + 20px);margin:0 -10px}
  .mg .mg-faq__question{font-size:16px;line-height:1.6}
  .mg .mg-faq__answer p{padding:30px 15px;font-weight:400}
  .mg-footer{padding:80px 0 30px}
}
/* ---------- 320px 以下 ---------- */
@media (max-width:320px){
  .mg-brand__ai{font-size:24px}
  .mg-brand__name{font-size:20px}
  .mg .mg-hero__title{font-size:28px}
  .mg .mg-hero__sub{font-size:18px}
  .mg .mg-hero__box{padding:15px}
  .mg .mg-hero__fig>div{width:75%}
  .mg .mg-merit{padding:60px 15px}
  .mg .mg-merit__list{padding-top:0}
  .mg .mg-about{padding:60px 15px}
  .mg .mg-about__fig{width:100%}
  .mg .mg-about__body{padding:0}
  .mg .mg-flow{padding:60px 15px}
  .mg .mg-flow__title{margin-bottom:15px;padding:0}
  .mg .mg-phase{padding:5px 0}
  .mg .mg-phase--day{margin-bottom:30px}
  .mg .mg-step--last{padding:25px 15px}
  .mg .mg-check{padding:40px 15px}
  .mg .mg-check__title{margin-bottom:30px;padding:0}
  .mg .mg-faq{padding:40px 15px}
  .mg .mg-faq__title{margin-bottom:30px;padding:0}
  .mg .mg-faq__q-row{gap:10px}
  .mg-footer{padding:80px 30px 30px}
  .mg-footer p{font-size:13px}
}