/* ------------------------------------------------------------
   トップページ（自然検索流入向けデザイン / index.php）専用CSS
   すべて .organic-top 配下にスコープしている。
   （index.php では共通の style.css / bootstrap.min.css を
   dequeue しているため、他ページの見た目には影響しない）
------------------------------------------------------------ */

.organic-top{
  --teal-900:#045C66;
  --teal-700:#03A0B3;
  --teal-500:#29AEC0;
  --teal-100:#D9F1F4;
  --teal-050:#F2F8F7;
  --ink:#1C2B29;
  --ink-sub:#5A6E6B;
  --line:#D8E4E2;
  --sun:#F2C14E;
  --white:#FFFFFF;
  --radius:16px;

  font-family:'Noto Sans JP',sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.7;
  font-size:16px;
}
.organic-top, .organic-top *{margin:0;padding:0;box-sizing:border-box;}
html:has(.organic-top){scroll-behavior:smooth;}
.organic-top h1, .organic-top h2, .organic-top h3, .organic-top .display{
  font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;
}
.organic-top img{max-width:100%;display:block;}
.organic-top .wrap{max-width:1040px;margin:0 auto;padding:0 24px;}

/* ---- ヘッダー ---- */
.organic-top .site-header{
  padding:10px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--white);z-index:10;
}
.organic-top .logo{
  display:flex;align-items:center;text-decoration:none;
}
.organic-top .logo img{width:140px;height:auto;display:block;}
.organic-top .header-right{display:flex;align-items:center;gap:24px;}
.organic-top nav{display:flex;align-items:center;gap:28px;font-size:15px;font-weight:700;color:var(--ink-sub);}
.organic-top nav > a{text-decoration:none;color:inherit;}
.organic-top .nav-cta{
  background:var(--teal-700);color:var(--white);
  padding:9px 20px;border-radius:999px;font-size:14.5px;font-weight:700;text-decoration:none;
  transition:background-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.organic-top .nav-cta:hover{
  background:var(--teal-900);
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(4,92,102,0.25);
}
.organic-top .nav-ctas{display:flex;gap:10px;align-items:center;}
.organic-top .nav-signup{
  color:var(--teal-700);border:1.4px solid var(--teal-700);
  padding:8px 16px;border-radius:999px;font-size:14.5px;font-weight:700;text-decoration:none;
  transition:background-color .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.organic-top .nav-signup:hover{
  background:var(--teal-700);color:var(--white);
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(4,92,102,0.18);
}

/* ハンバーガーメニュー（800px以下でnavの代わりに表示） */
.organic-top .menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:32px;height:32px;
  background:none;border:none;padding:0;
  cursor:pointer;
}
.organic-top .menu-toggle span{
  display:block;width:100%;height:2px;
  background:var(--teal-900);
  border-radius:1px;
  transition:transform .2s ease, opacity .2s ease;
}
.organic-top .menu-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.organic-top .menu-toggle.is-active span:nth-child(2){opacity:0;}
.organic-top .menu-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---- FV（比較の手間を代行） ---- */
.organic-top .fv{
  background:var(--teal-050);
  padding:56px 24px 48px;
}
.organic-top .fv-inner{
  display:grid;grid-template-columns:0.85fr 1.15fr;gap:32px;align-items:center;
}
/* grid item のデフォルト min-width:auto は画像の実サイズ(横1000px)がそのまま
   下限になり、幅の狭い画面で行全体が横に溢れる。min-width:0 で明示的に解除する */
.organic-top .fv-inner > *{min-width:0;}
.organic-top .fv-eyebrow{
  display:inline-block;
  background:var(--teal-100);color:var(--teal-900);
  font-size:13.5px;font-weight:700;
  padding:5px 14px;border-radius:999px;margin-bottom:18px;
}
.organic-top .fv h1{font-size:clamp(26px,3.8vw,36px);font-weight:900;line-height:1.5;color:var(--ink);margin-bottom:14px;}
.organic-top .fv h1 em{font-style:normal;color:var(--teal-700);}
.organic-top .fv-sub{color:var(--ink-sub);font-size:16px;margin-bottom:28px;max-width:440px;}
.organic-top .cta-btn{
  display:inline-block;background:var(--teal-700);color:var(--white);
  font-weight:800;font-size:16px;padding:15px 32px;border-radius:999px;
  text-decoration:none;
  transition:background-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.organic-top .cta-btn:hover{
  background:var(--teal-900);
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(4,92,102,0.3);
}
.organic-top .cta-sub{font-size:13px;color:var(--ink-sub);margin-top:10px;}

.organic-top .compare-visual-img img{
  width:100%;height:auto;display:block;
  border-radius:var(--radius);
}

/* ---- 導線3分岐 ---- */
.organic-top .branch{padding:48px 24px;border-bottom:1px solid var(--line);}
.organic-top .branch-title{text-align:center;font-size:15px;color:var(--ink-sub);margin-bottom:20px;}
.organic-top .branch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:900px;margin:0 auto;}
.organic-top .branch-card{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 18px;text-align:center;text-decoration:none;color:var(--ink);
  transition:border-color .15s ease,background-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.organic-top .branch-card:hover{
  border-color:var(--teal-500);
  background:var(--teal-050);
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(4,92,102,0.12);
}
.organic-top .branch-card .icon{font-size:22px;margin-bottom:10px;}
.organic-top .branch-card strong{display:block;font-size:16px;margin-bottom:4px;}
.organic-top .branch-card span{font-size:13.5px;color:var(--ink-sub);}

/* ---- DX WAYとは（4特長・信頼性構築の導出） ---- */
.organic-top .about{padding:64px 24px;}
.organic-top .section-head{text-align:center;margin-bottom:40px;}
.organic-top .section-head h2{font-size:24px;font-weight:900;color:var(--teal-900);margin-bottom:8px;}
.organic-top .section-head p{color:var(--ink-sub);font-size:16px;}
.organic-top .feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.organic-top .feature-card{
  background:var(--teal-050);border-radius:var(--radius);padding:22px 16px;text-align:center;
}
.organic-top .feature-card .feature-icon{
  width:56px;height:56px;border-radius:50%;
  background:var(--white);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 12px;
}
.organic-top .feature-card .feature-icon svg{width:32px;height:32px;}
.organic-top .feature-card strong{display:block;font-size:15px;margin-bottom:6px;}
.organic-top .feature-card span{font-size:13.5px;color:var(--ink-sub);}

/* ---- スピード比較（補強・アクション喚起） ---- */
.organic-top .speed-proof{
  max-width:960px;margin:40px auto 0;
}
.organic-top .speed-title{
  text-align:center;font-size:20px;font-weight:900;color:var(--ink);margin-bottom:20px;
}

.organic-top .speed-band{
  display:grid;
  grid-template-columns:150px 1fr 170px;
  gap:20px;
  align-items:center;
  border-radius:var(--radius);
  padding:20px 24px;
}
.organic-top .speed-band--before{background:#F8F4E8;border:1px solid #EDE6D2;}
.organic-top .speed-band--after{background:var(--teal-050);border:1px solid var(--line);}

.organic-top .speed-badge{
  display:inline-block;
  font-size:13px;font-weight:700;
  padding:5px 12px;border-radius:999px;
  background:#BAAF8F;color:var(--white);
  margin-bottom:8px;
}
.organic-top .speed-badge--accent{background:var(--teal-700);}
.organic-top .speed-caption{font-size:13px;color:var(--ink-sub);}

.organic-top .speed-flow{position:relative;}
.organic-top .speed-flow-img{width:100%;height:auto;display:block;border-radius:8px;margin-bottom:6px;}
.organic-top .speed-steps{
  position:relative;
  min-height:2.6em;
  font-size:12.5px;color:var(--ink-sub);font-weight:700;
}

/* 画像内の各イラストの実際の位置（left/width、%）に文字ラベルを重ねて対応させる。
   left/width は index.php 側の inline style で各アイコンごとに指定している */
.organic-top .speed-step-label{
  position:absolute;
  top:0;
  text-align:center;
  line-height:1.3;
}
.organic-top .step-arrow{
  position:absolute;
  top:0;
  transform:translateX(-50%);
  color:var(--line);font-weight:700;
}

.organic-top .speed-result{
  text-align:center;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 10px;
}
.organic-top .speed-result-label{display:block;font-size:11.5px;color:var(--ink-sub);margin-bottom:4px;}
.organic-top .speed-result-value{display:block;font-size:22px;font-weight:900;color:var(--ink);}
.organic-top .speed-result-note{display:block;font-size:11px;color:var(--ink-sub);margin-top:2px;}
.organic-top .speed-result--accent .speed-result-value{color:var(--teal-700);}
.organic-top .speed-result-badge{
  display:inline-block;background:var(--sun);color:var(--teal-900);
  font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;margin-bottom:4px;
}

.organic-top .speed-vs{
  text-align:center;font-size:13px;font-weight:700;color:var(--ink-sub);
  margin:12px 0;
}

/* ---- 取り扱い製品 ---- */
.organic-top .products{padding:64px 24px;background:var(--teal-050);}
.organic-top .product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:960px;margin:0 auto;}
.organic-top .product-card{
  display:block;
  background:var(--white);border-radius:var(--radius);padding:20px 16px;text-align:center;border:1px solid var(--line);
  text-decoration:none;color:inherit;
  transition:border-color .15s ease,background-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.organic-top .product-card:hover{
  border-color:var(--teal-500);
  background:var(--teal-050);
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(4,92,102,0.12);
}
.organic-top .product-card .name{
  font-weight:800;font-size:16px;line-height:1.3;margin-bottom:8px;
  min-height:2.6em;
  display:flex;align-items:center;justify-content:center;
}
.organic-top .tag-row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;}
.organic-top .tag{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;}
.organic-top .tag.compare{background:var(--teal-100);color:var(--teal-900);}
.organic-top .tag.buy{background:var(--sun);color:var(--teal-900);}

/* ---- 中間CTA（取り扱い製品とFAQの間） ---- */
.organic-top .mid-cta{padding:56px 24px;background:var(--white);text-align:center;border-bottom:1px solid var(--line);}
.organic-top .mid-cta-title{color:var(--ink);font-size:18px;font-weight:700;margin-bottom:24px;}

/* ---- FAQ ---- */
.organic-top .faq{padding:64px 24px;}
.organic-top .faq-list{max-width:720px;margin:0 auto;}
.organic-top .faq-item{border-bottom:1px solid var(--line);padding:18px 0;}
.organic-top .faq-item strong{display:block;font-size:16px;margin-bottom:6px;}
.organic-top .faq-item p{font-size:15px;color:var(--ink-sub);}

/* ---- フッター ---- */
.organic-top .site-footer{background:var(--white);padding:36px 24px 28px;text-align:center;border-top:1px solid var(--line);}
.organic-top .footer-links{
  display:flex;justify-content:center;flex-wrap:wrap;gap:14px;
  font-size:14px;margin-bottom:34px;
}
.organic-top .footer-links a{color:var(--teal-700);text-decoration:underline;}
.organic-top .footer-links span{color:var(--line);}
.organic-top .footer-logo{
  width:180px;
  margin:0 auto;
}
.organic-top .footer-bar{
  background:var(--teal-700);
  color:var(--white);
  font-size:14.5px;
  padding:14px 24px;
  text-align:center;
}

@media(max-width:800px){
  .organic-top .fv-inner{grid-template-columns:1fr;}
  .organic-top .branch-grid, .organic-top .feature-grid, .organic-top .product-grid{grid-template-columns:1fr;}

  /* CTAボタンとその下の所要時間キャプションだけを中央揃えにする
     （見出し・本文は左揃えのまま） */
  .organic-top .fv .cta-btn{display:block;width:fit-content;margin-left:auto;margin-right:auto;}
  .organic-top .fv .cta-sub{text-align:center;}

  .organic-top .speed-band{
    grid-template-columns:1fr;
    text-align:center;
  }
  .organic-top .speed-band-head{text-align:center;}

  .organic-top .logo img{width:120px;}
  .organic-top .menu-toggle{display:flex;}
  .organic-top .site-header{padding:8px 16px;}

  /* nav（リンク3つ＋会員登録/ログイン）をまとめてドロップダウン化し、
     ヘッダー行にはハンバーガーボタンだけを残す */
  .organic-top nav{
    display:none;
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--white);
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 24px rgba(4,92,102,0.1);
    padding:4px 24px 20px;
  }
  .organic-top nav.is-open{display:flex;}
  .organic-top nav > a{padding:14px 0;border-bottom:1px solid var(--line);}

  .organic-top .nav-ctas{
    flex-direction:column;
    gap:10px;
    margin-top:10px;
    padding-top:16px;
    border-top:1px solid var(--line);
  }
  .organic-top .nav-ctas a{width:100%;text-align:center;}
}