@charset "UTF-8";
/* =========================================================
   SIMPLACT サイトデザイン（SWELL子テーマ）
   コンセプト：設計図（ブループリント）。
   長崎の会社の「現場」を、県外に届く「図面」に描き直す。
   すべてのクラスは sp- で始まります（SWELL本体と衝突しないため）。
   ========================================================= */

:root{
  --sp-ink:#1B2430;        /* 文字 */
  --sp-indigo:#1F3B57;     /* 藍：基調色 */
  --sp-indigo-deep:#152B41;
  --sp-steel:#5B6B7A;      /* 補助の文字 */
  --sp-paper:#F3F5F6;      /* 淡い面 */
  --sp-line:#D5DCE1;       /* 罫線 */
  --sp-white:#FFFFFF;
  --sp-copper:#C8642D;     /* アクセント：銅 */
  --sp-copper-dark:#A84F1F;
  --sp-copper-soft:#F6E7DD;
  --sp-font-head:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
  --sp-font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sp-inner:1080px;
  --sp-radius:6px;
}

/* ---------- SWELL本体との調整 ---------- */
#body_wrap{overflow-x:clip}
.sp-page .l-content{padding-top:0;margin-bottom:0}
.sp-page .post_content{margin-top:0;margin-bottom:0}
.sp-page .post_content > .sp-full{margin-top:0;margin-bottom:0}
.sp-page .l-mainContent__inner > .post_content{margin-top:0}

/* ---------- 全幅セクション ---------- */
.sp-full{
  width:100vw;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  max-width:none !important;
}
.sp-sec{padding:clamp(56px,8vw,104px) max(20px,4vw)}
.sp-sec--paper{background:var(--sp-paper)}
.sp-sec--indigo{background:var(--sp-indigo);color:var(--sp-white)}
.sp-inner{max-width:var(--sp-inner);margin-left:auto !important;margin-right:auto !important}
.sp-inner > *:last-child{margin-bottom:0 !important}
.sp-narrow{max-width:760px;margin-left:auto !important;margin-right:auto !important}

/* ---------- 見出し ---------- */
.post_content .sp-label{
  font-family:var(--sp-font-mono);font-size:.78rem;letter-spacing:.18em;
  color:var(--sp-copper);text-transform:uppercase;margin:0 0 .6em !important;
  display:flex;align-items:center;gap:.8em;
}
.post_content .sp-label::before{content:"";width:28px;height:1px;background:currentColor}
.post_content h2.sp-h2{
  font-family:var(--sp-font-head);font-weight:900;font-size:clamp(1.5rem,3.2vw,2.15rem);
  line-height:1.45;letter-spacing:.02em;color:var(--sp-ink);
  margin:0 0 .9em !important;padding:0 !important;border:none !important;background:none !important;
  text-wrap:balance;
}
.post_content h2.sp-h2::before,.post_content h2.sp-h2::after{display:none !important}
.sp-sec--indigo .post_content h2.sp-h2,.sp-sec--indigo h2.sp-h2{color:var(--sp-white)}
.post_content h3.sp-h3{
  font-family:var(--sp-font-head);font-weight:700;font-size:1.15rem;line-height:1.55;
  margin:0 0 .5em !important;padding:0 !important;border:none !important;background:none !important;color:var(--sp-ink);
}
.post_content h3.sp-h3::before,.post_content h3.sp-h3::after{display:none !important}
.post_content .sp-lead{font-size:1.05rem;line-height:2;color:var(--sp-steel);max-width:40em}
.sp-sec--indigo .sp-lead{color:#C9D5E0}

/* ---------- ボタン ---------- */
.sp-btns{gap:12px !important;margin-top:1.8em !important}
.sp-btns .wp-block-button__link{
  font-family:var(--sp-font-head);font-weight:700;letter-spacing:.04em;
  border-radius:var(--sp-radius) !important;padding:1em 1.8em !important;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.sp-btn-primary .wp-block-button__link{background:var(--sp-copper) !important;color:#fff !important;border:2px solid var(--sp-copper)}
.sp-btn-primary .wp-block-button__link:hover{background:var(--sp-copper-dark) !important;border-color:var(--sp-copper-dark)}
.sp-btn-primary .wp-block-button__link::after{content:"→";margin-left:.7em;font-family:var(--sp-font-mono)}
.sp-btn-ghost .wp-block-button__link{background:transparent !important;color:inherit !important;border:2px solid currentColor}
.sp-btn-ghost .wp-block-button__link:hover{background:rgba(255,255,255,.08) !important}
.sp-sec:not(.sp-sec--indigo):not(.sp-hero) .sp-btn-ghost .wp-block-button__link{color:var(--sp-indigo) !important}
.sp-btns .wp-block-button__link:focus-visible{outline:3px solid var(--sp-copper-soft);outline-offset:3px}

/* ---------- ヒーロー（設計図の方眼と寸法線） ---------- */
.sp-hero{
  position:relative;color:var(--sp-white);overflow:hidden;
  background-color:var(--sp-indigo);
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,24px 24px,24px 24px;
  padding-top:clamp(72px,11vw,140px);padding-bottom:clamp(72px,11vw,140px);
}
/* 右側の寸法線：「長崎 → 県外」 */
.sp-hero::before{
  content:"NAGASAKI";position:absolute;right:max(20px,6vw);top:clamp(40px,7vw,90px);
  font-family:var(--sp-font-mono);font-size:.72rem;letter-spacing:.3em;color:rgba(255,255,255,.55);
}
.sp-hero::after{
  content:"";position:absolute;right:max(20px,6vw);bottom:clamp(36px,6vw,80px);
  width:min(36vw,420px);height:14px;
  border-left:1px solid var(--sp-copper);border-right:1px solid var(--sp-copper);
  background:linear-gradient(var(--sp-copper),var(--sp-copper)) center/100% 1px no-repeat;
  opacity:.9;
}
.post_content .sp-hero__eyebrow{
  font-family:var(--sp-font-mono);font-size:.8rem;letter-spacing:.2em;color:var(--sp-copper-soft);
  margin:0 0 1.4em !important;
}
.post_content h1.sp-hero__title{
  font-family:var(--sp-font-head);font-weight:900;color:#fff;
  font-size:clamp(2rem,5.4vw,3.6rem);line-height:1.35;letter-spacing:.02em;
  margin:0 0 .7em !important;padding:0 !important;border:none !important;background:none !important;
  text-wrap:balance;
}
.post_content h1.sp-hero__title::before,.post_content h1.sp-hero__title::after{display:none !important}
.sp-hero__title em,.sp-h2 em{font-style:normal;color:var(--sp-copper);}
.sp-hero .sp-h2 em,.sp-hero__title em{color:#F0A877}
.post_content .sp-hero__lead{font-size:clamp(1rem,1.6vw,1.12rem);line-height:2.05;color:#D9E3EC;max-width:34em}
.post_content .sp-hero__note{font-family:var(--sp-font-mono);font-size:.78rem;color:#9FB2C4;margin-top:1.2em !important}
.sp-hero--sub{padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(48px,7vw,80px)}
.sp-hero--sub::after{width:min(28vw,300px)}
.sp-hero--sub h1.sp-hero__title{font-size:clamp(1.8rem,4.2vw,2.7rem)}

/* ヒーロー右側：設計図の枠（PCのみ） */
.sp-hero > .sp-inner::after{
  content:"A-01 ／ SITE PLAN";position:absolute;right:max(20px,6vw);top:50%;transform:translateY(-50%);
  width:min(28vw,340px);aspect-ratio:4/3;box-sizing:border-box;padding:10px 12px;
  border:1px dashed rgba(255,255,255,.35);
  background:
    linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)) center/100% 1px no-repeat,
    linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,.22)) center/1px 100% no-repeat,
    radial-gradient(circle at center,transparent 38px,rgba(240,168,119,.9) 39px,rgba(240,168,119,.9) 40px,transparent 41px);
  font-family:var(--sp-font-mono);font-size:.68rem;letter-spacing:.2em;color:rgba(255,255,255,.6);
}
.sp-hero > .sp-inner::before{
  content:"TO OUTSIDE NAGASAKI →";position:absolute;right:max(20px,6vw);bottom:calc(clamp(36px,6vw,80px) + 22px);
  font-family:var(--sp-font-mono);font-size:.68rem;letter-spacing:.2em;color:#F0A877;
}
.sp-hero--sub > .sp-inner::after{display:none}
@media (max-width:1023px){.sp-hero > .sp-inner::after{display:none}}

/* ---------- お悩み（チェックリスト） ---------- */
.post_content ul.sp-checks{list-style:none !important;padding:0 !important;margin:1.6em 0 0 !important;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.post_content ul.sp-checks li{
  background:#fff;border:1px solid var(--sp-line);border-radius:var(--sp-radius);
  padding:1.1em 1.2em 1.1em 3.1em !important;margin:0 !important;position:relative;line-height:1.75;font-weight:500;
}
.post_content ul.sp-checks li::before{
  content:"" !important;position:absolute;left:1.15em;top:1.35em;width:16px;height:16px;
  border:2px solid var(--sp-copper);border-radius:3px;background:none !important;transform:none !important;
}
.post_content ul.sp-checks li::after{
  content:"";position:absolute;left:1.42em;top:1.5em;width:6px;height:10px;
  border:solid var(--sp-copper);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.post_content .sp-turn{
  margin-top:2em !important;font-family:var(--sp-font-head);font-weight:700;font-size:1.15rem;line-height:1.8;
  border-left:4px solid var(--sp-copper);padding-left:1em;
}

/* ---------- カード（選ばれる理由・サービス） ---------- */
.sp-cards{gap:20px !important;margin-top:2em !important;align-items:stretch !important}
.sp-card{
  background:#fff;border:1px solid var(--sp-line);border-radius:var(--sp-radius);
  padding:28px 26px !important;position:relative;
}
.sp-sec--paper .sp-card{border-color:#E1E6EA}
.post_content .sp-card__num{
  font-family:var(--sp-font-mono);font-size:.78rem;letter-spacing:.2em;color:var(--sp-copper);
  margin:0 0 .9em !important;padding-bottom:.7em;border-bottom:1px dashed var(--sp-line);
}
.sp-card p{line-height:1.9}
.post_content .sp-card__more{margin-top:1em !important;font-family:var(--sp-font-head);font-weight:700}
.sp-card__more a{color:var(--sp-indigo);text-decoration:none;border-bottom:1px solid var(--sp-copper)}
.sp-card__more a::after{content:" →";font-family:var(--sp-font-mono);color:var(--sp-copper)}
.post_content ul.sp-ticks{list-style:none !important;padding:0 !important;margin:.8em 0 0 !important}
.post_content ul.sp-ticks li{padding:.25em 0 .25em 1.4em !important;margin:0 !important;position:relative;line-height:1.75}
.post_content ul.sp-ticks li::before{content:"" !important;position:absolute;left:0;top:.95em;width:8px;height:2px;background:var(--sp-copper) !important;border-radius:0}

/* ---------- 流れ（工程表） ---------- */
.post_content ol.sp-flow{list-style:none !important;counter-reset:sp-step;padding:0 !important;margin:2em 0 0 !important;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--sp-line);border-left:1px solid var(--sp-line)}
.post_content ol.sp-flow > li{
  counter-increment:sp-step;margin:0 !important;padding:26px 22px !important;
  border-right:1px solid var(--sp-line);border-bottom:1px solid var(--sp-line);background:#fff;line-height:1.85;
}
.post_content ol.sp-flow > li::before{
  content:"STEP " counter(sp-step,decimal-leading-zero) !important;display:block;position:static !important;
  font-family:var(--sp-font-mono);font-size:.74rem;letter-spacing:.2em;color:var(--sp-copper);
  margin-bottom:.7em;background:none !important;width:auto !important;height:auto !important;border:none !important;
}
.post_content ol.sp-flow > li strong{display:block;font-family:var(--sp-font-head);font-size:1.08rem;color:var(--sp-ink);margin-bottom:.3em}

/* ---------- 料金表 ---------- */
.sp-price{margin-top:1.6em !important}
.sp-price table{border-collapse:collapse;width:100%;background:#fff;font-size:.95rem}
.sp-price table th,.sp-price table td{border:none !important;border-bottom:1px solid var(--sp-line) !important;padding:1.1em 1em !important;vertical-align:top;text-align:left}
.sp-price table thead th{background:var(--sp-indigo) !important;color:#fff !important;font-family:var(--sp-font-head);font-weight:700;font-size:.9rem}
.sp-price table td:last-child{font-family:var(--sp-font-mono);font-weight:500;white-space:nowrap;color:var(--sp-indigo);text-align:right}
.sp-price table thead th:last-child{text-align:right}
.sp-price table td:first-child{font-family:var(--sp-font-head);font-weight:700;color:var(--sp-ink);white-space:nowrap}
.post_content .sp-note{font-size:.85rem;color:var(--sp-steel);line-height:1.8}
.sp-price + .sp-note{margin-top:1em !important}

/* ---------- 実績（準備中の枠） ---------- */
.sp-work{background:#fff;border:1px solid var(--sp-line);border-radius:var(--sp-radius);overflow:hidden;padding:0 !important}
.post_content .sp-work__thumb{
  aspect-ratio:16/10;margin:0 !important;display:flex;align-items:center;justify-content:center;
  background-color:var(--sp-paper);
  background-image:linear-gradient(var(--sp-line) 1px,transparent 1px),linear-gradient(90deg,var(--sp-line) 1px,transparent 1px);
  background-size:20px 20px;font-family:var(--sp-font-mono);font-size:.75rem;letter-spacing:.2em;color:var(--sp-steel);
}
.sp-work__body{padding:20px 22px 24px !important}
.post_content .sp-work__tag{font-family:var(--sp-font-mono);font-size:.72rem;letter-spacing:.14em;color:var(--sp-copper);margin:0 0 .4em !important}

/* ---------- 代表あいさつ ---------- */
.sp-message{gap:clamp(24px,5vw,64px) !important;align-items:flex-start !important}
.post_content .sp-photo{
  aspect-ratio:4/5;border-radius:var(--sp-radius);margin:0 !important;display:flex;align-items:flex-end;padding:16px !important;
  background:linear-gradient(160deg,var(--sp-indigo),var(--sp-indigo-deep));color:#9FB2C4;
  font-family:var(--sp-font-mono);font-size:.75rem;letter-spacing:.16em;
}
.sp-message .wp-block-column:first-child{flex:0 0 32% !important;max-width:340px}
.post_content .sp-sign{font-family:var(--sp-font-head);font-weight:700;margin-top:1.6em !important;text-align:right}
.post_content .sp-sign span{display:block;font-family:var(--sp-font-mono);font-weight:400;font-size:.75rem;letter-spacing:.16em;color:var(--sp-steel)}

/* ---------- 会社概要表 ---------- */
.sp-table table{border-collapse:collapse;width:100%;background:#fff}
.sp-table th,.sp-table td{border:none !important;border-bottom:1px solid var(--sp-line) !important;padding:1.1em 1em !important;text-align:left;vertical-align:top;line-height:1.85}
.sp-table td:first-child{width:28%;font-family:var(--sp-font-head);font-weight:700;color:var(--sp-indigo);white-space:nowrap}

/* ---------- よくある質問 ---------- */
.sp-faq{margin-top:1.6em !important}
.sp-faq .wp-block-details{background:#fff;border:1px solid var(--sp-line);border-radius:var(--sp-radius);padding:0 !important;margin:0 0 12px !important}
.sp-faq .wp-block-details summary{
  list-style:none;cursor:pointer;padding:1.2em 3em 1.2em 3.2em;position:relative;
  font-family:var(--sp-font-head);font-weight:700;line-height:1.7;color:var(--sp-ink);
}
.sp-faq .wp-block-details summary::-webkit-details-marker{display:none}
.sp-faq .wp-block-details summary::before{content:"Q";position:absolute;left:1.2em;top:1.15em;font-family:var(--sp-font-mono);color:var(--sp-copper);font-weight:500}
.sp-faq .wp-block-details summary::after{content:"+";position:absolute;right:1.2em;top:1.05em;font-family:var(--sp-font-mono);font-size:1.2rem;color:var(--sp-steel)}
.sp-faq .wp-block-details[open] summary::after{content:"−"}
.sp-faq .wp-block-details summary:focus-visible{outline:3px solid var(--sp-copper-soft);outline-offset:2px}
.sp-faq .wp-block-details > *:not(summary){padding:0 1.4em 0 3.2em !important;margin:0 0 1.2em !important;color:var(--sp-steel);line-height:1.95}

/* ---------- 締めのCTA ---------- */
.sp-cta{text-align:center;position:relative}
.sp-cta .sp-btns{justify-content:center}
.sp-cta .sp-lead{margin-left:auto;margin-right:auto}
.sp-cta .sp-label{justify-content:center}
.sp-cta .sp-label::after{content:"";width:28px;height:1px;background:currentColor}

/* ---------- お問い合わせ ---------- */
.sp-form{background:#fff;border:1px solid var(--sp-line);border-radius:var(--sp-radius);padding:clamp(20px,4vw,40px) !important}
.sp-form input[type=text],.sp-form input[type=email],.sp-form input[type=tel],.sp-form select,.sp-form textarea{
  width:100%;border:1px solid var(--sp-line);border-radius:4px;padding:.8em .9em;font-size:1rem;background:var(--sp-paper)}
.sp-form input:focus,.sp-form select:focus,.sp-form textarea:focus{outline:2px solid var(--sp-copper);background:#fff}
.sp-form input[type=submit]{background:var(--sp-copper);color:#fff;border:none;border-radius:var(--sp-radius);padding:1em 2.4em;font-weight:700;cursor:pointer}
.sp-form input[type=submit]:hover{background:var(--sp-copper-dark)}
.sp-form .sp-req{color:var(--sp-copper);font-size:.8em;margin-left:.4em}

/* ---------- スマホ ---------- */
@media (max-width:781px){
  .post_content ul.sp-checks{grid-template-columns:1fr}
  .post_content ol.sp-flow{grid-template-columns:1fr}
  .sp-hero::before,.sp-hero > .sp-inner::before{display:none}
  .sp-hero::after{width:44vw;bottom:24px}
  .sp-price table td:first-child{white-space:normal}
  .sp-price table td:last-child{white-space:normal}
  .sp-table td:first-child{width:auto;white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .sp-btns .wp-block-button__link{transition:none}
}

/* よくある質問は少し狭い幅で */
.sp-narrow-wrap .sp-inner{max-width:820px}

/* ---------- グローバルナビの「無料相談」ボタン ----------
   外観 → メニュー で、メニュー項目の「CSSクラス」に sp-nav-btn を入れてください */
.c-gnav > .menu-item.sp-nav-btn > a{
  background:var(--sp-copper);color:#fff !important;border-radius:var(--sp-radius);
  padding:.6em 1.2em !important;margin-left:.6em;font-weight:700;height:auto;align-self:center;
}
.c-gnav > .menu-item.sp-nav-btn > a:hover{background:var(--sp-copper-dark)}
.c-gnav > .menu-item.sp-nav-btn > a::after{display:none}