@charset "UTF-8";

/* ===============================================
   focus合同会社 LP
   白基調・高コントラスト・スマホ最優先
   =============================================== */

:root{
  --bg:            #FFFFFF;
  --bg-soft:       #F5F7FA;
  --bg-contact:    #16293F;
  --ink:           #333333;
  --ink-strong:    #16293F;
  --ink-mute:      #5C6672;
  --accent:        #1E4FD8;
  --accent-dark:   #163CA6;
  --line:          #DFE4EB;
  --line-strong:   #C7D0DB;

  --font: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont,
          "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic",
          "Meiryo", sans-serif;

  --pad: clamp(20px, 5.5vw, 32px);
  --gap-sec: clamp(56px, 11vw, 100px);
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  font-family:var(--font);
  font-size:17px;
  font-weight:400;
  line-height:1.95;
  letter-spacing:.02em;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ display:block; max-width:100%; height:auto; }

a{ color:inherit; }

.link{
  color:var(--accent);
  text-underline-offset:.25em;
  text-decoration-thickness:1px;
}
.link:hover{ color:var(--accent-dark); }

/* ---------- レイアウト ---------- */
.container{
  width:100%;
  max-width:1080px;
  margin-inline:auto;
  padding-inline:var(--pad);
}
.container--narrow{ max-width:760px; }

.section{ padding-block:var(--gap-sec); }
.section--soft{ background:var(--bg-soft); }

.section__title{
  font-size:clamp(24px, 5.6vw, 34px);
  font-weight:700;
  line-height:1.6;
  letter-spacing:.01em;
  color:var(--ink-strong);
  margin-bottom:clamp(28px, 6vw, 44px);
  padding-bottom:16px;
  border-bottom:2px solid var(--ink-strong);
}

/* ---------- ヘッダー ---------- */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.header__inner{
  width:100%;
  max-width:1080px;
  margin-inline:auto;
  padding-inline:var(--pad);
}
.header__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:52px;
}
.header__logo{
  font-size:22px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--ink-strong);
  text-decoration:none;
}
.header__nav{
  display:flex;
  gap:clamp(14px, 4vw, 26px);
  padding-bottom:9px;
  overflow-x:auto;
  scrollbar-width:none;
}
.header__nav::-webkit-scrollbar{ display:none; }
.header__nav a{
  flex:none;
  font-size:13px;
  font-weight:500;
  line-height:1.4;
  color:var(--ink-mute);
  text-decoration:none;
  white-space:nowrap;
  padding-bottom:2px;
  border-bottom:2px solid transparent;
}
.header__nav a:hover{ color:var(--accent); border-bottom-color:var(--accent); }

@media (min-width:820px){
  /* ロゴ ─ メニュー ─ 相談ボタン の順に一列で並べる */
  .header__inner{
    display:flex;
    align-items:center;
    gap:32px;
    min-height:72px;
  }
  .header__bar{ display:contents; }
  .header__logo{ order:1; }
  .header__nav{ order:2; margin-left:auto; padding-bottom:0; }
  .header__nav a{ font-size:15px; }
  .header__cta{ order:3; }
}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
  padding:17px 26px;
  border-radius:6px;
  border:2px solid transparent;
  font-family:inherit;
  font-size:17px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:.02em;
  text-decoration:none;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn--primary:hover{ background:var(--accent-dark); border-color:var(--accent-dark); }

.btn--ghost{ background:#fff; color:var(--ink-strong); border-color:var(--ink-strong); }
.btn--ghost:hover{ background:var(--ink-strong); color:#fff; }

.btn--sm{ padding:9px 16px; font-size:14px; border-radius:5px; }
.btn--lg{ padding:20px 34px; font-size:18px; }

.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:clamp(26px, 5vw, 34px);
}
.btn-row .btn{ flex:1 1 240px; }
@media (min-width:560px){
  .btn-row .btn{ flex:0 0 auto; }
}

/* ---------- 01 ファーストビュー ---------- */
.hero{
  padding-block:clamp(38px, 8vw, 72px) clamp(48px, 9vw, 84px);
}
.hero__grid{ display:grid; gap:clamp(30px, 6vw, 56px); }

.hero__title{
  font-size:clamp(25px, 6.4vw, 36px);
  font-weight:700;
  line-height:1.65;
  letter-spacing:.01em;
  color:var(--ink-strong);
}
.hero__lead{
  margin-top:clamp(20px, 4vw, 28px);
  font-size:clamp(16px, 4.1vw, 19px);
  line-height:2;
}
.hero__meta{
  margin-top:20px;
  font-size:14px;
  font-weight:500;
  color:var(--ink-mute);
  letter-spacing:.04em;
}
.hero__photo img{
  width:100%;
  max-height:min(58vh, 460px);
  object-fit:cover;
  object-position:center 22%;
  border-radius:10px;
}

@media (min-width:900px){
  .hero__grid{
    grid-template-columns:1fr 320px;
    gap:48px;
    align-items:center;
  }
  .hero__photo img{ max-height:460px; }
}

/* ---------- 02 できること ---------- */
.cards{
  display:grid;
  gap:16px;
}
@media (min-width:760px){
  .cards{ grid-template-columns:1fr 1fr; }
}
.card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--line-strong);
  border-radius:10px;
  padding:clamp(24px, 5vw, 32px);
}
.card__trouble{
  font-size:16px;
  font-weight:500;
  line-height:1.75;
  color:var(--ink-mute);
  padding-left:15px;
  border-left:4px solid var(--line-strong);
}
.card__name{
  margin-top:18px;
  font-size:clamp(20px, 4.6vw, 23px);
  font-weight:700;
  line-height:1.6;
  color:var(--ink-strong);
}
.card__text{
  margin-top:12px;
  font-size:16px;
  line-height:1.9;
  flex:1;
}
.card__link{
  align-self:flex-start;
  margin-top:20px;
  font-size:16px;
  font-weight:700;
  color:var(--accent);
  text-decoration:none;
  border-bottom:2px solid currentColor;
  padding-bottom:3px;
}
.card__link::after{ content:" →"; }
.card__link:hover{ color:var(--accent-dark); }

/* ---------- 本文ブロック ---------- */
.prose p + p{ margin-top:1.7em; }

.block__title{
  font-size:clamp(19px, 4.4vw, 22px);
  font-weight:700;
  line-height:1.7;
  color:var(--ink-strong);
  margin-top:clamp(34px, 6vw, 48px);
  margin-bottom:18px;
}
.block__title:first-of-type{ margin-top:0; }

.checklist{ list-style:none; }
.checklist li{
  position:relative;
  padding-left:28px;
  font-size:16px;
  line-height:1.9;
}
.checklist li + li{ margin-top:12px; }
.checklist li::before{
  content:"";
  position:absolute;
  left:4px;
  top:.72em;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--accent);
}

.steps{ list-style:none; counter-reset:step; }
.steps > li{
  counter-increment:step;
  position:relative;
  padding-left:44px;
}
.steps > li + li{ margin-top:28px; }
.steps > li::before{
  content:counter(step);
  position:absolute;
  left:0;
  top:2px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--ink-strong);
  color:#fff;
  font-size:15px;
  font-weight:700;
  line-height:30px;
  text-align:center;
}
.steps h4{
  font-size:clamp(17px, 4.2vw, 19px);
  font-weight:700;
  line-height:1.75;
  color:var(--ink-strong);
}
.steps p{
  margin-top:8px;
  font-size:16px;
  line-height:1.9;
}

.note{
  margin-top:clamp(34px, 6vw, 48px);
  padding:clamp(24px, 5vw, 32px);
  background:#fff;
  border:1px solid var(--line-strong);
  border-radius:10px;
}
.section:not(.section--soft) .note{ background:var(--bg-soft); }
.note__title{
  font-size:clamp(18px, 4.3vw, 21px);
  font-weight:700;
  line-height:1.7;
  color:var(--ink-strong);
  margin-bottom:16px;
}
.note p{ font-size:16px; line-height:1.9; }
.note p + p{ margin-top:1.4em; }
.note .checklist{ margin-block:1.4em; }

/* ---------- 08 focusのやり方 ---------- */
.way + .way{ margin-top:clamp(34px, 6vw, 46px); }
.way h3{
  font-size:clamp(19px, 4.4vw, 22px);
  font-weight:700;
  line-height:1.7;
  color:var(--ink-strong);
  margin-bottom:14px;
}
.way p{ font-size:16px; line-height:1.95; }
.way p + p{ margin-top:1.4em; }

/* ---------- 09 代表 ---------- */
.ceo{ display:grid; gap:clamp(24px, 5vw, 40px); }
.ceo__photo img{
  width:100%;
  max-height:min(52vh, 420px);
  object-fit:cover;
  object-position:center 22%;
  border-radius:10px;
}
.ceo__name{
  font-size:clamp(21px, 4.8vw, 25px);
  font-weight:700;
  line-height:1.6;
  color:var(--ink-strong);
}
.ceo__ruby{ font-size:16px; font-weight:400; color:var(--ink-mute); }
.ceo__role{
  margin-top:6px;
  margin-bottom:22px;
  font-size:15px;
  font-weight:500;
  color:var(--ink-mute);
}
.ceo__body p{ font-size:16px; line-height:1.95; }
.ceo__body p + p{ margin-top:1.5em; }
.ceo__links{ margin-top:1.6em; font-weight:500; }
.ceo__links a{ line-height:2.2; }

@media (min-width:760px){
  .ceo{ grid-template-columns:300px 1fr; align-items:start; }
  .ceo__photo img{ max-height:400px; }
}

/* ---------- 10 よくある質問 ---------- */
.faq__item{
  background:#fff;
  border:1px solid var(--line-strong);
  border-radius:10px;
}
.faq__item + .faq__item{ margin-top:12px; }

.faq__item summary{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:20px clamp(18px, 4vw, 26px);
  cursor:pointer;
  list-style:none;
  font-weight:700;
  color:var(--ink-strong);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::before{
  content:"Q";
  flex:none;
  font-size:16px;
  font-weight:700;
  color:var(--accent);
  line-height:1.75;
}
.faq__item summary::after{
  content:"";
  flex:none;
  width:11px;
  height:11px;
  margin-left:auto;
  margin-top:.55em;
  border-right:2px solid var(--ink-mute);
  border-bottom:2px solid var(--ink-mute);
  transform:rotate(45deg);
  transition:transform .2s ease;
}
.faq__item[open] summary::after{ transform:rotate(-135deg); }
.faq__q{ font-size:17px; line-height:1.75; }

.faq__a{
  padding:0 clamp(18px, 4vw, 26px) 22px;
  border-top:1px solid var(--line);
  margin-inline:clamp(18px, 4vw, 26px);
  padding-inline:0;
}
.faq__a p{
  margin-top:16px;
  font-size:16px;
  line-height:1.95;
}

/* ---------- 11 会社概要 ---------- */
.profile{
  border-top:1px solid var(--line-strong);
}
.profile__row{
  display:grid;
  gap:2px;
  padding-block:16px;
  border-bottom:1px solid var(--line-strong);
}
.profile dt{
  font-size:14px;
  font-weight:700;
  color:var(--ink-mute);
  letter-spacing:.04em;
}
.profile dd{ font-size:16px; line-height:1.85; }

@media (min-width:600px){
  .profile__row{ grid-template-columns:150px 1fr; gap:16px; align-items:baseline; }
  .profile dt{ font-size:15px; }
}

/* ---------- 12 お問い合わせ ---------- */
.section--contact{
  background:var(--bg-contact);
  color:#EDF1F6;
}
.contact__title{
  font-size:clamp(22px, 5.4vw, 32px);
  font-weight:700;
  line-height:1.7;
  color:#fff;
  margin-bottom:clamp(24px, 5vw, 32px);
}
.section--contact .prose p{ font-size:17px; line-height:2; }
.section--contact .btn--ghost{ background:transparent; color:#fff; border-color:#fff; }
.section--contact .btn--primary{ background:#fff; color:var(--ink-strong); border-color:#fff; }
.section--contact .btn--primary:hover{ background:#DDE6F5; border-color:#DDE6F5; }
.contact__mail{
  margin-top:clamp(30px, 6vw, 40px);
  font-size:15px;
  line-height:2.1;
  color:#C3CEDC;
}
.section--contact .link{ color:#fff; text-decoration:underline; }
.section--contact .link:hover{ color:#DDE6F5; }

/* ---------- 13 フッター ---------- */
.footer{
  padding-block:clamp(40px, 8vw, 60px);
  border-top:1px solid var(--line);
  background:#fff;
}
.footer__name{ font-size:17px; font-weight:700; color:var(--ink-strong); }
.footer__addr{ margin-top:4px; font-size:15px; color:var(--ink-mute); }
.footer__nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  margin-top:24px;
}
.footer__nav a{
  font-size:15px;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--line-strong);
  padding-bottom:2px;
}
.footer__nav a:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.footer__copy{
  margin-top:32px;
  font-size:13px;
  color:var(--ink-mute);
  letter-spacing:.04em;
}

/* ---------- 法務ページ（プライバシーポリシー） ----------
   本文の書体・文字サイズ・行間は本体と同じものを使う。
   章の区切りは1pxの罫線だけ。装飾は入れない。 */
.legal-head{
  padding-block:clamp(44px, 9vw, 76px) clamp(30px, 6vw, 44px);
  border-bottom:1px solid var(--line);
}
.legal-head h1{
  font-size:clamp(24px, 5.6vw, 34px);
  font-weight:700;
  line-height:1.6;
  color:var(--ink-strong);
}
.legal-lead{ margin-top:clamp(18px, 4vw, 24px); }

.legal-section{
  padding-block:clamp(34px, 6.5vw, 54px);
  border-bottom:1px solid var(--line);
}
.legal-num{
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--ink-mute);
}
.legal-section h2{
  margin:6px 0 20px;
  font-size:clamp(19px, 4.4vw, 23px);
  font-weight:700;
  line-height:1.7;
  color:var(--ink-strong);
}
.legal-section p + p{ margin-top:1.5em; }

.legal-list{ list-style:none; margin-block:1.5em; }
.legal-list li{
  padding:14px 0;
  border-top:1px solid var(--line);
}
.legal-list li:first-child{ border-top:none; padding-top:0; }
.legal-list li:last-child{ padding-bottom:0; }

.legal-table{
  width:100%;
  border-collapse:collapse;
  margin-top:.5em;
}
.legal-table th,
.legal-table td{
  text-align:left;
  vertical-align:top;
  padding:16px 0;
  border-top:1px solid var(--line);
  line-height:1.9;
}
.legal-table tr:first-child th,
.legal-table tr:first-child td{ border-top:none; padding-top:0; }
.legal-table th{
  width:9em;
  font-size:15px;
  font-weight:700;
  color:var(--ink-mute);
  white-space:nowrap;
}
.legal-table td{ padding-left:1.4em; }

/* スマホでは横に伸ばさず縦積みにする（横スクロールを出さない） */
@media (max-width:600px){
  .legal-table,
  .legal-table tbody,
  .legal-table tr,
  .legal-table th,
  .legal-table td{ display:block; width:auto; }
  .legal-table tr{ padding:14px 0; border-top:1px solid var(--line); }
  .legal-table tr:first-child{ border-top:none; padding-top:0; }
  .legal-table th{ padding:0 0 2px; border-top:none; }
  .legal-table td{ padding:0; }
}

.legal-enacted{
  margin-bottom:clamp(28px, 6vw, 40px);
  font-size:15px;
  color:var(--ink-mute);
}

/* ---------- スクロール表示（控えめ） ---------- */
.js .reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
  will-change:opacity, transform;
}
.js .reveal.is-visible{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .btn, .faq__item summary::after{ transition:none; }
}