/* リモデラマイソク（/maisoku）専用。
   現行 LP（https://lp.remodela.jp/maisoku/ 、ソースは remodela-lp の public/maisoku/style.css と lp 共通の style.css・bootstrap-grid）の見た目を、
   サイト共通のヘッダー・フッター（shared.css）に影響しないよう .mk（<main>）の中だけに写したもの。
   - bootstrap-grid は使わず、並びは flex / grid で書き直した（PC の並びは現行と同じ 992px から）
   - よくある質問は現行の checkbox の開閉を <details> に置き換えた（JS なしで開閉・キーボード操作できる）
   - 現行のフッターにあった「サービス規約」は、ページの最後にリンクを置いた */

/* ---- 土台 ---- */
.mk{display:block;overflow-x:hidden;overflow-x:clip;color:#001a2b;font-family:"Noto Sans JP","ヒラギノ角ゴ ProN W3",Meiryo,sans-serif;font-size:16px;line-height:1.7}
.mk *{box-sizing:border-box;margin:0;padding:0}
.mk :is(h1,h2,h3,p){text-wrap:wrap}
.mk img{display:block;max-width:100%;height:auto}
.mk ul,.mk ol{list-style:none}
.mk a{color:inherit}
.mk :is(a,summary):focus-visible{outline:3px solid #e6a400;outline-offset:3px}
.mk-inner{width:min(100%,1140px);margin:0 auto;padding:0 20px}
.mk-accent{color:#ffc600}

/* ---- 見出し ---- */
.mk-sec{padding:60px 0}
.mk-sec__en{margin-bottom:4px;font-family:"Overpass",sans-serif;font-size:14px;text-align:center}
.mk-sec__title{margin-bottom:40px;font-size:28px;font-weight:700;line-height:1.4;text-align:center}
.mk-sec--green{background:#317c5c;color:#fff}

/* ---- メインビジュアル ---- */
.mk-mv{background:url(img/bk-mv.jpg) center/cover no-repeat}
.mk-mv__inner{display:flex;flex-direction:column;align-items:center;width:min(100%,1140px);margin:0 auto;padding:40px 20px 0}
.mk-mv__text{display:flex;flex-direction:column;align-items:center;text-align:center}
.mk-mv__for{font-size:18px;font-weight:700;line-height:1.4}
.mk-mv__title{margin:10px 0 24px;font-size:32px;font-weight:700;line-height:1.3}
.mk-marker{background:linear-gradient(transparent 75%,#ffc600 70%)}
.mk-mv__logo{width:min(90%,430px)}
.mk-mv__free{width:min(100%,370px);margin:16px 0 20px}
.mk-mv__screen{width:min(100%,560px);margin-top:24px}
.mk-dl{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.mk-dl img{width:auto;height:50px}

/* ---- 特徴・機能 ---- */
.mk-features{display:grid;gap:50px;text-align:center}
.mk-feature__img{width:76%;max-width:300px;margin:0 auto;padding-top:15px;border-radius:10px;background:#fff}
.mk-feature__img img{width:80%;margin:0 auto}
.mk-feature__badge{display:flex;align-items:center;justify-content:center;gap:2px;width:110px;height:110px;margin:-22px auto 0;border-radius:50%;background:#317c5c;position:relative}
.mk-feature__label{writing-mode:vertical-rl;font-size:18px;font-weight:700;letter-spacing:.4em;border-bottom:3px solid #fff}
.mk-feature__no{font-family:"Oswald",sans-serif;font-size:50px;line-height:1;color:#ffc600;border-bottom:3px solid #fff}
.mk-feature__title{margin:-5px 0 6px;font-size:22px;font-weight:700}

/* ---- 使い方 ---- */
.mk-steps{display:grid;color:#fff;text-align:center}
.mk-step{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0 16px;padding:40px 20px}
.mk-step__no{grid-column:2;grid-row:1;justify-self:center;margin-bottom:16px;padding:2px 24px;border:2px solid #fff;border-radius:25px;font-size:14px}
.mk-step img{grid-column:1;grid-row:1 / span 2}
.mk-step__text{grid-column:2;grid-row:2}
.mk-step h3{margin-bottom:8px;font-size:20px;font-weight:700}
.mk-step p{font-size:14px}
.mk-step--1{background:#5ead8b;border-radius:10px 10px 0 0}
.mk-step--2{background:#4b9d7a}
.mk-step--3{background:#3b8968}
.mk-step--4{background:#317c5c;border-radius:0 0 10px 10px}
/* 次の段への矢印（スマホは下向き） */
.mk-step:not(.mk-step--4)::after{content:"";position:absolute;left:50%;bottom:-24px;z-index:1;width:60px;height:25px;translate:-50% 0;background:inherit;clip-path:polygon(0 0,100% 0,50% 100%)}

/* ---- 料金プラン ---- */
.mk-sec--plan{background:#2b2b2b url(img/bk-plan.jpg) center/cover no-repeat;color:#fff;text-align:center}
.mk-plan__free{width:min(100%,310px);margin:0 auto}
.mk-plan__lead{margin:40px 0 16px;font-size:24px;font-weight:700;line-height:1.5}
.mk-plan__note{font-size:14px}

/* ---- アプリのダウンロード案内（料金プラン・サポート） ---- */
.mk-appdl{display:flex;flex-direction:column;width:min(100%,950px);margin:60px auto 0;color:#001a2b;text-align:left}
.mk-appdl__icon{position:relative;display:flex;align-items:center;justify-content:center;gap:15px;padding:30px;border-radius:10px 10px 0 0;background:#317c5c;color:#fff;font-weight:700}
.mk-appdl__icon img{width:70px;flex:none}
.mk-appdl__icon::after{content:"";position:absolute;left:0;bottom:-20px;width:100%;height:20px;background:#317c5c;clip-path:polygon(0 0,100% 0,50% 100%)}
.mk-appdl__links{padding:50px 15px 30px;border-radius:0 0 10px 10px;background:#fff}

/* ---- よくある質問 ---- */
.mk-faq{display:grid;gap:10px}
.mk-faq__item{border-radius:10px;box-shadow:0 0 20px 5px rgba(0,0,0,.07);background:#fff}
.mk-faq__item summary{position:relative;display:flex;align-items:center;gap:20px;padding:15px 48px 15px 15px;font-weight:700;cursor:pointer;list-style:none}
.mk-faq__item summary::-webkit-details-marker{display:none}
.mk-faq__item summary::after{content:"";position:absolute;right:24px;top:50%;width:8px;height:8px;border-top:2px solid #000;border-right:2px solid #000;translate:0 -70%;rotate:135deg;transition:rotate .3s}
.mk-faq__item[open] summary::after{translate:0 -30%;rotate:-45deg}
.mk-faq__mark{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:5px;background:#317c5c;color:#fff;font-family:"Overpass",sans-serif;font-size:28px;line-height:1;padding-top:4px}
.mk-faq__mark--a{background:#001a2b}
.mk-faq__answer{display:flex;align-items:center;gap:20px;padding:15px;border-radius:0 0 10px 10px;background:#f9f9f9}

/* ---- サポート ---- */
.mk-support{margin-top:60px;padding:0 20px 40px;border-radius:10px;background:#001a2b;color:#fff}
.mk-support__head{display:flex;align-items:flex-end;justify-content:center;gap:16px}
.mk .mk-support__img{width:35%;max-width:180px;margin-top:-30px}
.mk-support__title{padding-bottom:4px;font-size:20px;font-weight:700;line-height:1.5}
.mk-support .mk-appdl{margin-top:30px}
.mk-links{display:flex;justify-content:center;gap:24px;margin-top:40px;font-size:14px}
.mk-links a{text-decoration:underline}

@media (min-width:768px){
  .mk-sec__title{font-size:38px}
  .mk-support__title{font-size:28px}
}

/* ---- PC（現行と同じ 992px から） ---- */
@media (min-width:992px){
  .mk-sec{padding:110px 0}
  .mk-sec__title{font-size:40px}
  .mk-mv{min-height:620px}
  .mk-mv__inner{flex-direction:row;align-items:stretch;min-height:620px;padding-top:0}
  .mk-mv__text{flex:0 0 42%;align-items:flex-start;justify-content:center;padding-bottom:40px;text-align:left}
  .mk-mv__for{font-size:24px}
  .mk-mv__title{font-size:44px}
  .mk-mv__screen{display:flex;align-items:flex-end;flex:1;width:auto;margin:0}
  .mk-mv__screen img{width:95%}
  .mk-mv .mk-dl{justify-content:flex-start}
  .mk-features{grid-template-columns:repeat(3,1fr);gap:30px}
  .mk-steps{grid-template-columns:repeat(4,1fr)}
  .mk-step{grid-template-columns:1fr;gap:0;padding:40px 16px}
  .mk-step__no,.mk-step img,.mk-step__text{grid-column:1;grid-row:auto}
  .mk-step img{margin:16px 0 24px}
  .mk-step--1{border-radius:10px 0 0 10px}
  .mk-step--4{border-radius:0 10px 10px 0}
  /* 次の段への矢印（PC は右向き） */
  .mk-step:not(.mk-step--4)::after{left:auto;right:-24px;top:40%;bottom:auto;width:25px;height:60px;translate:0;clip-path:polygon(0 0,100% 50%,0 100%)}
  .mk-appdl{flex-direction:row}
  .mk-appdl__icon{flex:0 0 42%;justify-content:center;border-radius:10px 0 0 10px}
  .mk-appdl__icon::after{left:auto;right:-20px;top:0;bottom:auto;width:20px;height:100%;clip-path:polygon(0 0,100% 50%,0 100%)}
  .mk-appdl__links{flex:1;display:flex;align-items:center;padding:30px 15px 30px 40px;border-radius:0 10px 10px 0}
  .mk-support{padding:0 40px 60px}
  .mk .mk-support__img{margin-top:-60px}
  .mk-support__title{font-size:32px}
}