@charset "UTF-8";
/* =========================================================
   WEB制作まるごとパッケージ  mk3d.jp/web/
   共通の ../css/style.css を読んだうえで、このページだけ上書きする。
   本体のオレンジ（#FF6600）の役割を、ターコイズ（#40e0d0）に置き換え。
   ========================================================= */
:root{
  --orange:#40e0d0;          /* キーカラー：ターコイズ */
  --orange-dark:#2ccbbb;
  --accent-text:#007A70;     /* 白背景の上の文字用（ターコイズのままだと薄くて読めないため） */
}

/* ---------- ボタン：ターコイズの上の文字はネイビー ---------- */
.btn--orange{color:var(--navy);box-shadow:0 4px 12px rgba(1,74,115,.18)}
.btn--orange:hover{color:var(--navy)}
.gnav a.gnav__cta{color:var(--navy)}

/* ---------- 白背景の上でオレンジを文字に使っていた所 ---------- */
.sec-head__num{color:var(--accent-text)}
.section--navy .sec-head__num{color:var(--orange)}
.price{color:var(--navy)}
.profile__name .bebas{color:var(--accent-text)}
.text-orange{color:var(--accent-text)}
.journal__item a:hover p,.journal__more:hover{color:var(--accent-text)}
.footer__sns a:hover,.footer__sns a:focus-visible{color:var(--orange)}
.footer__nav a:hover{color:var(--orange)}

/* ---------- お問い合わせボックス：ターコイズ地にネイビー文字 ---------- */
.contact{color:var(--navy);box-shadow:0 10px 30px rgba(1,74,115,.18)}
.req{color:var(--accent-text)}
.faq-mark--a{color:var(--navy)}

/* =========================================================
   このページ専用のレイアウト
   ========================================================= */

/* ---------- ヘッダー：本サイトへのテキストリンク（ページ内メニューと区切る） ---------- */
@media (min-width:768px){
  .gnav li.lp-nav-home{padding-left:24px;border-left:1px solid rgba(255,255,255,.35)}
  .gnav li.lp-nav-home a{font-weight:500;opacity:.85}
  .gnav li.lp-nav-home a:hover{opacity:1}
}
/* 幅の狭いタブレットでは収まらないので隠す（ロゴから本サイトへ戻れる） */
@media (min-width:768px) and (max-width:959px){
  .gnav li.lp-nav-home{display:none}
}
@media (max-width:767px){
  .gnav li.lp-nav-home a{font-size:15px;font-weight:500;opacity:.85}
}

/* ---------- FV ---------- */
/* PC・タブレット：写真を背景全面に敷き、縦は浅めにトリミング。
   左側（壁と椅子の側）に白っぽいグラデーションをかけて、その上に文字を載せる。
   ノートパソコンは右側に見せる */
.lp-fv{position:relative;overflow:hidden;background:var(--gray);
  min-height:clamp(480px, 38vw, 580px);display:flex;align-items:center;padding:48px 0}
.lp-fv__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 22%;z-index:0}
.lp-fv::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(244,246,248,.97) 0%,rgba(244,246,248,.93) 28%,rgba(244,246,248,.55) 46%,rgba(244,246,248,0) 60%)}
.lp-fv__inner{position:relative;z-index:2;width:100%;max-width:1240px}
.lp-fv__text{max-width:600px}
.lp-fv .hero__copy{margin-top:20px;font-size:clamp(32px,3.8vw,54px)}
.lp-fv .hero__sub{margin-top:18px;font-weight:700;color:var(--text)}
.lp-fv .badge{color:var(--navy)}

/* ---------- 02 なぜ今 ---------- */
.lp-why{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:56px;align-items:start;max-width:1000px;margin:0 auto}
.lp-why .sec-head{text-align:left;margin-bottom:0}
.lp-why__body p{font-size:16px}
.lp-why__body p+p{margin-top:1em}
.lp-why__body p.lp-why__lead{font-size:clamp(18px,1.8vw,22px);font-weight:900;color:var(--navy);line-height:1.6;margin-bottom:6px}
.lp-why__body .btn{margin-top:28px}
/* noteへのボタン：本サイトの実績ボタンと同じゴールド */
.lp-why__body .btn{background:#998641;border-color:#998641;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.14)}
.lp-why__body .btn:hover,.lp-why__body .btn:focus-visible{background:#a8964f;border-color:#a8964f;color:#fff}

/* ---------- 03 つくり方：説明文 ---------- */
.lp-flow-lead{text-align:center;max-width:640px;margin:-24px auto 40px;font-size:15px;opacity:.9}

/* ---------- 04 含まれるもの ---------- */
.lp-inc{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.lp-inc__item{padding:24px 26px;border:1px solid var(--line);box-shadow:none}
.lp-inc__item h3{font-size:18px;font-weight:900;color:var(--navy);margin-bottom:8px;padding-left:12px;border-left:4px solid var(--orange);line-height:1.4}
.lp-inc__item p{font-size:14.5px}

/* ---------- 05 料金 ---------- */
.lp-price{max-width:860px;margin:0 auto}
.lp-price .price-card{border:none;border-top:6px solid var(--orange)}
.lp-price-sub{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:20px}
.lp-price-sub__box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.lp-price-sub--single{grid-template-columns:1fr}
.lp-price-sub__box h3{font-size:16px;font-weight:900;color:var(--navy);margin-bottom:8px}
.lp-price-sub__box ul{list-style:disc;padding-left:1.3em;font-size:14.5px}
.lp-price-sub__box li+li{margin-top:4px}

/* ---------- 05 料金：オプションプラン（公開後・月額） ---------- */
.lp-opt{margin-top:48px;padding-top:40px;border-top:1px dashed #b8c4cf}
.lp-opt__head{text-align:center;margin-bottom:28px}
.lp-opt__en{display:block;font-family:var(--en);font-size:22px;letter-spacing:.12em;color:var(--accent-text)}
.lp-opt__title{margin-top:4px;font-size:clamp(20px,2.2vw,26px);font-weight:900;color:var(--navy);line-height:1.5}
.lp-opt__lead{margin-top:6px;font-size:14.5px;color:var(--muted)}
.lp-opt__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.lp-opt__card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px 24px;display:flex;flex-direction:column}
.lp-opt__card--rec{border:2px solid var(--orange);box-shadow:0 8px 24px rgba(1,74,115,.10)}
.lp-opt__tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--orange);color:var(--navy);font-size:12px;font-weight:900;padding:3px 14px;border-radius:999px;white-space:nowrap}
.lp-opt__name{font-size:17px;font-weight:900;color:var(--navy);text-align:center}
.lp-opt__price{margin:6px 0 14px;text-align:center;color:var(--navy);font-weight:900;font-size:16px;line-height:1.1}
.lp-opt__price .bebas{font-size:44px;margin-right:2px}
.lp-opt__price small{font-size:13px;font-weight:700;color:var(--muted)}
.lp-opt__price--ask{font-size:20px;padding:12px 0 6px}
.lp-opt__list{list-style:none;padding:14px 0 0;border-top:1px solid var(--line);font-size:14px;line-height:1.7}
.lp-opt__list li{position:relative;padding-left:1.3em}
.lp-opt__list li+li{margin-top:8px}
.lp-opt__list li::before{content:"";position:absolute;left:.2em;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.lp-opt__list strong{color:var(--navy)}
.lp-opt__note{margin-top:auto;padding-top:14px;font-size:13px;font-weight:700;color:var(--accent-text);line-height:1.6}
.lp-opt__foot{margin-top:18px;font-size:13px;color:var(--muted);line-height:1.8}

/* ---------- 06 プロフィール ---------- */
.lp-about__en{display:block;font-family:var(--en);font-size:22px;letter-spacing:.12em;color:var(--accent-text);margin-bottom:6px}

/* ---------- 08 お問い合わせ ---------- */
.lp-contact{max-width:680px;margin:0 auto}
.lp-contact .contact__title{text-align:center}
.lp-contact .contact__lead{text-align:center}
.lp-contact .btn--navy{color:#fff}

/* =========================================================
   Tablet / Smartphone
   ========================================================= */
@media (max-width:1024px){
  .lp-inc{grid-template-columns:repeat(2,1fr)}
  .lp-opt__grid{grid-template-columns:1fr;max-width:520px;margin:0 auto;gap:22px}
  .lp-why{gap:32px}
}
@media (min-width:768px) and (max-width:1024px){
  .lp-fv{min-height:500px}
  .lp-fv__bg{object-position:80% 25%}
  .lp-fv::after{background:linear-gradient(90deg,rgba(244,246,248,.97) 0%,rgba(244,246,248,.94) 50%,rgba(244,246,248,.55) 64%,rgba(244,246,248,0) 78%)}
  .lp-fv__text{max-width:400px}
  .lp-fv .hero__sub{font-size:15px}
  .lp-fv .hero__btns{flex-direction:column;align-items:flex-start}
}
@media (max-width:767px){
  /* スマホ：写真は上に全幅・元の比率のまま（トリミングなし）、文字はその下に */
  .lp-fv{display:block;min-height:0;padding:0 0 48px}
  .lp-fv__bg{position:static;display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:fill}
  .lp-fv::after{display:none}
  .lp-fv__inner{padding-top:28px}
  .lp-fv .hero__copy{font-size:clamp(28px,8.4vw,34px)}
  .lp-fv .hero__btns{flex-direction:column}
  .lp-fv .hero__btns .btn{width:100%}
  .lp-why{grid-template-columns:1fr;gap:20px}
  .lp-why__body .btn{width:100%}
  .lp-flow-lead{margin-top:-12px;text-align:left}
  .lp-inc{grid-template-columns:1fr;gap:12px}
  .lp-price-sub{grid-template-columns:1fr;gap:12px}
  .lp-opt{margin-top:36px;padding-top:32px}
  .lp-opt__grid{grid-template-columns:1fr;gap:22px}
}