@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/




/* ===== 株式会社英知：元データ（index.html + eichi.css）をそのまま使う =====
   本文に元サイトのヘッダー・フッターが入っているので、SWELL側は隠して全幅にする。
   ※ SWELLは <body> ではなく #body_wrap にクラスを付けるので「.page」で書く。 */
.page #header,
.page .l-header,
.page #footer,
.page .l-footer,
.page .p-breadcrumb,
.page .c-pageTitle,
.page .l-topTitleArea,
.page .p-articleThumb,
.page .c-postTitle {
	display: none !important;
}
.page #content,
.page .l-content,
.page .l-mainContent,
.page .l-mainContent__inner,
.page .post_content,
.page .l-article {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
#body_wrap.page {
	padding-top: 0 !important;
}
/* SWELLが本文の見出しなどに付ける装飾を打ち消す（元データは自前で完結している） */
.page .post_content :is(h1,h2,h3,h4,h5,h6) { padding:0; background:none; border:none; }
.page .post_content :is(h1,h2,h3,h4,h5,h6)::before,
.page .post_content :is(h1,h2,h3,h4,h5,h6)::after { content:none !important; display:none !important; }
.page .post_content :is(p,ul,ol,li,dl,dd,table,figure,blockquote) { margin:0; padding:0; background:none; }
.page .post_content :is(ul,ol) { list-style:none; }

/* ===== ここから下は元データの eichi.css をそのまま取り込んだもの ===== */
:root{--paper:#f6f3ee;--paper-2:#efeae2;--white:#fff;--ink:#17140f;--ink-2:#4a443b;--ink-3:#6b6358;--taupe:#c4b29b;--line:#ddd3c5;--accent:#e8740a;--accent-ink:#b55600;--g:'Zen Kaku Gothic New',sans-serif;--n:'Archivo',sans-serif;--max:1200px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--g);line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--ink);text-decoration:none}a:hover{color:var(--accent-ink)}
img{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* header */
header{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,box-shadow .3s}
header.solid{background:rgba(246,243,238,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.logo{display:flex;align-items:center;gap:12px}
.logo img{width:42px;height:42px;border-radius:50%}
.logo .wm{display:flex;flex-direction:column;line-height:1.15}
.logo .ja{font-weight:900;font-size:17px;letter-spacing:.12em}
.logo .en{font-family:var(--n);font-size:10.5px;letter-spacing:.22em;color:var(--ink-3);text-transform:uppercase}
.menu{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:500;letter-spacing:.06em}
.menu a{color:var(--ink-2)}.menu a:hover{color:var(--ink)}
.menu .cta{background:var(--ink);color:var(--paper);padding:11px 20px;font-weight:700}
.menu .cta:hover{background:var(--accent);color:var(--white)}
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.burger span{width:22px;height:2px;background:var(--ink)}

/* hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:120px 0 80px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:center}
.kicker{display:flex;align-items:center;gap:14px;font-family:var(--n);font-size:12.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:28px}
.kicker::before{content:"";width:36px;height:2px;background:var(--accent)}
.hero h1{font-weight:900;font-size:clamp(34px,5.4vw,72px);line-height:1.28;letter-spacing:.01em}
.hero h1 .ac{color:var(--accent)}
.hero .lead{margin-top:30px;max-width:560px;font-size:clamp(15px,1.5vw,17px);line-height:2.05;color:var(--ink-2)}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.btn{display:inline-flex;align-items:center;gap:12px;padding:17px 30px;font-weight:700;font-size:15px;letter-spacing:.06em;background:var(--accent);color:var(--white);transition:background .25s}
.btn:hover{background:var(--accent-ink);color:var(--white)}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.line:hover{background:var(--ink);color:var(--paper)}
.rings{position:relative;aspect-ratio:1;width:100%;max-width:500px;justify-self:center}
.rings svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rings circle{fill:none;stroke:var(--taupe);stroke-width:1;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 2.4s cubic-bezier(.6,0,.2,1) forwards}
.rings circle.ac{stroke:var(--accent);stroke-width:2}
@keyframes draw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.rings circle{animation:none;stroke-dashoffset:0}}
.rings .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.rings .big{font-family:var(--n);font-weight:800;font-size:clamp(64px,9vw,120px);line-height:1;letter-spacing:-.03em}
.rings .big small{font-size:.32em;font-weight:700;margin-left:4px;letter-spacing:0}
.rings .cap{margin-top:10px;font-size:13px;color:var(--ink-2);letter-spacing:.06em}
.rings .tag{position:absolute;font-size:12px;font-weight:700;letter-spacing:.08em;background:var(--paper);padding:4px 10px;color:var(--ink-2)}

/* sections */
section.band{padding:clamp(80px,10vw,128px) 0}
.alt{background:var(--white)}
.dark{background:var(--ink);color:var(--paper)}
.shead{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(44px,6vw,72px)}
.idx{font-family:var(--n);font-size:12.5px;font-weight:600;letter-spacing:.24em;color:var(--accent-ink);text-transform:uppercase;margin-bottom:18px;display:block}
.dark .idx{color:var(--accent)}
.shead h2{font-weight:900;font-size:clamp(26px,3.3vw,44px);line-height:1.38;letter-spacing:.01em}
.shead p{color:var(--ink-2);font-size:16px;line-height:2.05}
.dark .shead p{color:#cfc6b8}

/* problem */
.probs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #3a342b}
.prob{padding:36px 32px 40px 0;border-right:1px solid #3a342b}
.prob+.prob{padding-left:32px}.prob:last-child{border-right:0}
.prob .who{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--accent)}
.prob h3{font-size:22px;font-weight:900;line-height:1.5;margin:14px 0 14px}
.prob p{font-size:14.5px;line-height:2;color:#cfc6b8}
.verdict{margin-top:56px;font-size:clamp(20px,2.4vw,28px);font-weight:900;line-height:1.6}
.verdict .ac{color:var(--accent)}

/* proof */
.proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.proof-ph{position:relative;aspect-ratio:4/5;background:var(--paper-2)}
.proof-ph img{width:100%;height:100%;object-fit:cover}
.proof-ph .badge{position:absolute;left:-1px;bottom:-1px;background:var(--ink);color:var(--paper);padding:18px 22px}
.proof-ph .badge b{display:block;font-family:var(--n);font-size:13px;letter-spacing:.2em;color:var(--accent)}
.proof-ph .badge span{font-weight:700;font-size:17px;letter-spacing:.06em}
.proof h2{font-weight:900;font-size:clamp(28px,3.8vw,48px);line-height:1.38}
.proof .txt{margin-top:24px;color:var(--ink-2);font-size:16px;line-height:2.1}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px;border-top:1px solid var(--line)}
.stat{padding:24px 16px 0 0}
.stat .v{font-family:var(--n);font-weight:800;font-size:clamp(34px,4vw,52px);line-height:1;letter-spacing:-.02em}
.stat .v small{font-family:var(--g);font-size:.36em;font-weight:700;margin-left:3px}
.stat .l{margin-top:10px;font-size:13px;color:var(--ink-3);line-height:1.6}

/* services */
.svcs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.svc{background:var(--white);padding:34px 28px 38px;display:flex;flex-direction:column;gap:14px;transition:background .3s}
.svc:hover{background:var(--paper)}
.svc .no{font-family:var(--n);font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--accent-ink)}
.svc h3{font-size:19px;font-weight:900;line-height:1.5}
.svc p{font-size:14px;color:var(--ink-2);line-height:1.95}
.svc.main{grid-column:span 2;background:var(--ink);color:var(--paper)}
.svc.main:hover{background:#221e17}
.svc.main .no{color:var(--accent)}
.svc.main h3{font-size:24px}
.svc.main p{color:#cfc6b8;font-size:15px}

/* targets */
.targets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.tg{border-top:3px solid var(--ink);padding-top:20px}
.tg h3{font-size:17px;font-weight:900;line-height:1.5}
.tg p{margin-top:10px;font-size:13.5px;color:var(--ink-2);line-height:1.9}

/* why */
.whys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.why .n{font-family:var(--n);font-weight:800;font-size:64px;line-height:1;color:var(--taupe)}
.why h3{margin-top:18px;font-size:21px;font-weight:900;line-height:1.5}
.why p{margin-top:12px;font-size:14.5px;color:var(--ink-2);line-height:2}

/* flow */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));counter-reset:f}
.step{position:relative;padding:0 24px 0 0}
.step::before{counter-increment:f;content:"STEP 0" counter(f);display:block;font-family:var(--n);font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--accent-ink);margin-bottom:18px}
.step .bar{height:2px;background:var(--line);margin-bottom:22px;position:relative}
.step .bar::after{content:"";position:absolute;left:0;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.step h3{font-size:18px;font-weight:900}
.step p{margin-top:10px;font-size:14px;color:var(--ink-2);line-height:1.95}

/* company */
.co{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px)}
.co table{width:100%;border-collapse:collapse;font-size:15px}
.co th,.co td{text-align:left;padding:18px 0;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.8}
.co th{width:150px;font-weight:700;color:var(--ink-3);font-size:13.5px;letter-spacing:.06em;padding-right:20px}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px)}
.contact-side h2{font-weight:900;font-size:clamp(28px,3.8vw,46px);line-height:1.38}
.contact-side p{margin-top:20px;color:#cfc6b8;font-size:15.5px;line-height:2}
.contact-side .tel{margin-top:36px;padding-top:24px;border-top:1px solid #3a342b}
.contact-side .tel b{display:block;font-family:var(--n);font-size:32px;font-weight:800;letter-spacing:.02em}
.contact-side .tel span{font-size:13px;color:#a79d8f}
form.f{background:var(--paper);color:var(--ink);padding:clamp(24px,4vw,44px);display:grid;gap:20px}
.f .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f label{display:block;font-size:13.5px;font-weight:700;margin-bottom:8px;letter-spacing:.04em}
.f label em{font-style:normal;color:var(--accent-ink);font-size:11.5px;margin-left:6px}
.f input,.f select,.f textarea{width:100%;font:inherit;font-size:15px;padding:13px 14px;border:1px solid var(--line);background:var(--white);color:var(--ink)}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
.f textarea{min-height:130px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{margin:0;font-weight:500;font-size:13.5px;cursor:pointer}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-block;padding:9px 14px;border:1px solid var(--line);background:var(--white);transition:.2s}
.chips input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chips input:focus-visible+span{outline:2px solid var(--accent)}
.f button{justify-self:start;border:0;cursor:pointer;font:inherit}
.f .note{font-size:12px;color:var(--ink-3)}

/* footer */
footer{background:#0f0d0a;color:#a79d8f;padding:56px 0 32px;font-size:13px}
.ft{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-bottom:32px;border-bottom:1px solid #2a251e}
footer .logo .ja{color:var(--paper)}
footer a{color:#cfc6b8}footer a:hover{color:var(--accent)}
.fnav{display:flex;flex-wrap:wrap;gap:24px}
.fb{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;font-size:12px}

/* typography: no orphans, phrase-aware JP breaks */
h1,h2,h3,.verdict,.cap,.stat .l{text-wrap:balance;word-break:auto-phrase;line-break:strict}
p,td,.tg p,.svc p{text-wrap:pretty;word-break:auto-phrase;line-break:strict}
.nb{display:inline-block}

/* UI polish */
.hero h1{line-height:1.32}
.hero .lead{max-width:34em}
.shead p{max-width:34em}
.shead h2,.proof h2,.contact-side h2{letter-spacing:.005em}
.idx{display:inline-flex;align-items:center;gap:10px}
.idx::after{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
.svc{min-height:220px}
.svc h3{font-size:18px}
.svc.main{justify-content:flex-end}
.svc.main h3{font-size:26px}
.tg{display:flex;flex-direction:column}
.tg h3{min-height:3em;display:flex;align-items:flex-end}
.why{padding-top:28px;border-top:1px solid var(--line)}
.why .n{font-size:52px}
.prob h3{font-size:21px}
.stat .l br{display:none}
.stat .l{font-size:12.5px}
.co td{word-break:auto-phrase}
.f{box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.f label{color:var(--ink)}
.btn{border-radius:2px}
.f input,.f select,.f textarea{border-radius:2px}
.rings .tag{border:1px solid var(--line)}
.proof-ph{overflow:hidden}
.proof-ph img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.proof-ph:hover img{transform:scale(1.04)}
footer .fnav{gap:20px 28px}

/* responsive */
@media(max-width:1040px){
  .svcs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .targets{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:32px}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
}
@media(max-width:860px){
  .menu{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);box-shadow:0 1px 0 var(--line)}
  .menu.open{display:flex}
  .menu a{padding:16px clamp(20px,4vw,48px);border-top:1px solid var(--line)}
  .menu .cta{text-align:center}
  .burger{display:flex}
  .hero{min-height:auto;padding:110px 0 72px}
  .hero-grid,.shead,.proof,.co,.contact-grid{grid-template-columns:1fr}
  .rings{max-width:340px}
  .probs,.whys{grid-template-columns:1fr}
  .prob,.prob+.prob{padding:28px 0;border-right:0;border-bottom:1px solid #3a342b}
  .proof-ph{aspect-ratio:4/3}
}
@media(max-width:560px){
  .svcs{grid-template-columns:1fr}.svc.main{grid-column:auto}
  .targets{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr}
  .f .row{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr 1fr}
  .co th{width:96px}
}


/* ===== 問い合わせフォーム（Contact Form 7）を元データの見た目に合わせる =====
   元データのフォームは name 属性も無い「デザイン確認用」で送信できなかったため、
   設定済みのCF7（ID 12）に差し替えた。そのままだとラベルと入力欄が重なるので整える。 */
.eichi-cf7 .wpcf7-form { display: grid; gap: 18px; }
.eichi-cf7 .wpcf7-form > div { display: grid; gap: 6px; }
.eichi-cf7 .row { display: grid; gap: 6px; }
.eichi-cf7 label { display: block; margin: 0; }
.eichi-cf7 .wpcf7-form-control-wrap { display: block; }
.eichi-cf7 br { display: none; }
.eichi-cf7 select,
.eichi-cf7 textarea {
	width: 100%;
	font: inherit;
	font-size: 15px;
	padding: 13px 14px;
	border: 1px solid var(--line);
	background: var(--white);
	color: var(--ink);
}
.eichi-cf7 select:focus,
.eichi-cf7 textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.eichi-cf7 .wpcf7-list-item { display: inline-block; margin: 0 16px 6px 0; }
.eichi-cf7 .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; }
.eichi-cf7 input[type="checkbox"],
.eichi-cf7 input[type="radio"] { width: auto; }
.eichi-cf7 .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 17px 30px;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .06em;
	background: var(--accent);
	color: var(--white);
	border: 0;
	cursor: pointer;
	width: auto;
}
.eichi-cf7 .wpcf7-submit:hover { background: var(--accent-ink); }

/* ===========================================================
   狭い画面で読みにくかった3か所（2026-10-24）

   小野寺さん「英知の3つ（表の見出し・ボタン・スマホメニュー）も本番に入れて」

   このLPには、もともと上のほうに
     h1,h2,h3,… { text-wrap: balance; word-break: auto-phrase; line-break: strict }
     p,td,…     { text-wrap: pretty;  word-break: auto-phrase; line-break: strict }
   が入っていて、行末に1〜2文字だけ残る折り返しはほぼ出ません。
   **ただし th とボタン（.btn）がその指定から外れていた**ので、そこだけ直します。
   =========================================================== */

/* ① 会社概要の表の見出し（「グループ会社」）。
   表が table-layout: auto なので、見出しの列が32pxまで潰されて
   390pxでは「…会社／社」、320pxでは3行になっていました（文字は81px）。

   **折り返さない（white-space: nowrap）だけではだめでした。**
   見出しの列は101pxあれば足りますが、「事業内容」の欄は折り返せる場所の都合で
   226px要るので、合計327pxになって**表が320pxの画面からはみ出します**
   （実際に一度そうなりました）。
   そこで、狭い画面では見出しと中身を**縦に積みます**。見出しが枠いっぱいを使えるので
   1行に収まり、中身も読みやすくなります。601px以上はこれまでどおり横並びです。 */
@media (max-width: 600px){
  .co table, .co tbody, .co tr, .co th, .co td {
    display: block;
    width: auto;
  }
  .co th { padding: 14px 0 2px; border-bottom: 0; }
  .co td { padding: 0 0 14px; }
}

@media (max-width: 374px){

  /* ② ボタン「アマタツについて問い合わせる」。
     文字210pxに対してボタンの中が207pxで、**3px足りないだけ**で
     2行になり「る」だけが残っていました。左右の余白を30px→22pxにして中を219pxに。 */
  .btn {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* ③ スマホメニューの7項目（課題・実績・アマタツ・サービス・進め方・会社概要・無料相談）。
     SWELLのスマホメニューは画面幅で文字が縮むので、320pxでだけ11.52pxになります
     （390pxでは12px以上）。道しるべなので12pxを下限にします。 */
  .c-spnav a {
    font-size: 12px;
  }
}

/* ===========================================================
   ロゴの中の社名「Eichi Inc.」（2026-10-24）

   小野寺さん「ロゴの社名（9.5〜11px）も、読みやすさのために12px以上に上げて」

   LPのCSSの `.logo .en { font-size: 10.5px }` を12pxにします。
   このページで `.en` を使っているのは**ヘッダーとフッターのロゴの2か所だけ**で、
   文字の囲みの幅（114px）もロゴの囲み（168×42）も変わりません。
   =========================================================== */
.logo .en {
  font-size: 12px;
}
