:root{
  --bg:#ffffff;
  --muted:#666;
  --line:#e5e5e5;

--primary: #6B8EC6;   /* くすみブルー */
--primary2: #004CC2;   /* ブルー */
--accent:  #E9ECF5;
--bg-soft: #F6F7FB;
--text:    #2A2A2A;

  --radius:18px;
  --container:1100px;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.7;
}

img{max-width:100%;display:block;border-radius: 10px; height: auto;}
.cards img{max-width: 240px;display: block; border-radius: 10px;margin: 0 auto; height: auto;width:100%;}
.flow img{max-width: 90%;display: block;border-radius: 10px;margin: 0 auto;}





a{text-decoration:none;color:inherit;}

.container{
  width:min(var(--container),calc(100% - 40px));
  margin:auto;
}

/* Header */
header{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:10;
}
.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 0;
}
.logo{
  font-weight:800;
  letter-spacing:.05em;
}
.btn{
  display:inline-block;
  padding:12px 20px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
}

@media all and (min-width:360px){
.btn{font-size:18px;}}

.btn-primary{
background: #E89AA5;
    color: #fff;
}
.btn-outline{
  border:2px solid var(--primary);
  color:var(--primary);
}

/* Hero */
.hero{
  padding:60px 0 80px;
  background:
    radial-gradient(circle at top left, #eaf3ff 0%, transparent 60%),
    radial-gradient(circle at bottom right, #fff3e6 0%, transparent 55%);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.3fr .9fr;
  gap:40px;
  align-items:center;
}
.hero h1{
  font-size:clamp(28px,4vw,44px);
  line-height:1.2;
}
.hero p{
  color:var(--muted);
  max-width:520px;
}
.hero-actions{
  margin-top:24px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.hero-tags{
  list-style:none;
  padding:0;
  margin:16px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.hero-tags li{
  padding:8px 12px;
  border-radius:999px;
  background: var(--accent);
  color: var(--text);
  font-weight:600;
  font-size:13px;
}
.hero-note{
  margin:10px 0 0;
  color: var(--muted);
  font-size:13px;
}




/* 画像プレースホルダー */
.img-box {
    /* background: #f2f2f2; */
    /* border: 2px dashed #ccc; */
    /* border-radius: var(--radius); */
    /* aspect-ratio: 4 / 3; */
    display: flex;
    align-items: center;
    justify-content: center;
    /* color: #999; */
    /* font-size: 14px; */
    /* text-align: center; */
}

/* Section */
section{
  padding:80px 0;
}
.section-title{
  font-size:clamp(22px,3vw,32px);
  margin-bottom:12px;
}
.section-desc{
  color:var(--muted);
  max-width:720px;
  margin-bottom:40px;
}

/* Cards */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
}
.card h3{
  margin-top:20px;
  font-size:18px;
}

.step-sub{
  display:block;
  margin-top:6px;
  color: var(--muted);
  font-size:12px;
  line-height:1.4;
}



/* Flow */
.flow{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
}
.step{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  text-align:center;
  font-size:16px;
}
.step strong{
  display:block;
  margin-bottom:6px;
  color:var(--primary2);
}

/* Scene */
.scenes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

/* CTA */
.cta{
  background:#f7faff;
  border-top:4px solid var(--primary);
}

form input,form textarea{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--line);
  margin-bottom:12px;
}

/* Responsive */
@media(max-width:900px){
  .hero-grid,.cta-grid{grid-template-columns:1fr;}
  .cards,.flow,.scenes{grid-template-columns:1fr;}
}



/* ===== ボタン共通：ホバーで“触れる感” ===== */
.btn{
  cursor: pointer;
  transition: 
    background-color .2s ease,
    color .2s ease,
    box-shadow .2s ease,
    transform .15s ease;
}

/* メインCTA */
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(107,142,198,.35);
  filter: brightness(0.97);
}

/* サブCTA */
.btn-outline:hover{
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(107,142,198,.25);
}

/* 押した瞬間 */
.btn:active{
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(107,142,198,.25);
}

.wave-bg {
  height: 110px;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,60 C150,20 350,100 600,60 C850,20 1050,100 1200,60 L1200,120 L0,120 Z' fill='%23F6C1CC' fill-opacity='0.25'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}

.img-boxlist{
  padding: 10px;
}

.service-note{
  margin-top: 16px;
  font-size: 13px;
  color: #777;
}

.form_privacy{
width:13px;
display:block;
}

.form_send{
margin-top:20px;
}

/*フッター*/
.lp-footer{

  padding: 60px 0 20px;
  background: #ffffff;
  font-size: 13px;
  color: #555;
}

.footer-grid{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
}

.footer-logo{
  max-width: 180px;
  margin-bottom: 14px;
}

.company-name{
  font-weight: 700;
  margin-bottom: 8px;
  color: #222;
}

.footer-company p{
  margin: 0 0 10px;
  line-height: 1.6;
}

.footer-company a{
  color: var(--primary);
  text-decoration: underline;
  font-size: 12px;
}

.footer-logos{
  display: flex;
  gap: 14px;
  align-items: center;
}

.footer-logos img{
  max-height: 70px;
  opacity: .8;
}

.footer-links{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links a{
  font-size: 12px;
  color: #555;
}

.footer-bottom{
  margin-top: 40px;
  padding-top: 14px;
  border-top: 1px solid #e5e5e5;
  text-align: center;
  font-size: 12px;
  color: #888;
}

/* Responsive */
@media(max-width:900px){
  .footer-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-logos{
    justify-content: flex-start;
  }
}


/* =========================
   MW WP Form（LP内フォーム）最適化
   ========================= */

/* CTA内では、フォームの“セクション感”を消して馴染ませる */
.cta .toi_section{
  padding: 0;                 /* 80pxとか要らない */
  background: transparent;    /* CTAの背景に溶け込ませる */
  border: none;
}

/* CTAの右カラムにちゃんと収める */
.cta-form{
  width: 100%;
}

/* フォーム見出しはCTA内では小さめに（主役はCTA見出し） */
.cta .toi_section > h2{
  font-size: 18px;
  margin: 0 0 14px;
  color: var(--text);
}

/* フォーム本体をカード化 */
.cta .toi_section form{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 14px 30px rgba(20,32,64,.10);
}

/* ラベル */
.cta .toi_section .ttl{
  margin: 14px 0 8px;
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
}

/* 入力共通 */
.cta .toi_section input[type="text"],
.cta .toi_section input[type="email"],
.cta .toi_section input[type="tel"],
.cta .toi_section textarea{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease;
}

/* textarea */
.cta .toi_section textarea{
  min-height: 140px;
  resize: vertical;
}

/* フォーカス（くすみブルーで上品に） */
.cta .toi_section input:focus,
.cta .toi_section textarea:focus{
  border-color: rgba(107,142,198,.60);
  box-shadow: 0 0 0 4px rgba(107,142,198,.18);
}

/* プレースホルダー */
.cta .toi_section ::placeholder{
  color: rgba(42,42,42,.45);
}

/* プライバシー周り（MW WP Formの出力差を吸収） */
.cta .toi_section .mwform-checkbox-field label,
.cta .toi_section .form_privacy label,
.cta .toi_section label[for*="privacy"]{
  display: inline-flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-soft);
  border: 1px solid rgba(0,0,0,0.06);
  font-size: 13px;
  color: var(--text);
}

/* チェックボックス自体 */
.cta .toi_section input[type="checkbox"]{
  transform: translateY(2px);
}

/* プライバシーリンク */
.cta .toi_section a{
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 12px;
}

/* 送信ボタン：LPのbtn-primaryと同トーン */
.cta .toi_section .form_send,
.cta .toi_section input[type="submit"],
.cta .toi_section button[type="submit"]{
  appearance: none;
  width: 100%;
  margin-top: 16px;
  padding: 14px 18px;
  border: none;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

.cta .toi_section .form_send:hover,
.cta .toi_section input[type="submit"]:hover,
.cta .toi_section button[type="submit"]:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(107,142,198,.35);
  filter: brightness(0.97);
}

.cta .toi_section .form_send:active,
.cta .toi_section input[type="submit"]:active,
.cta .toi_section button[type="submit"]:active{
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(107,142,198,.25);
}

/* エラー（控えめに赤） */
.cta .toi_section .error,
.cta .toi_section .mwform-error-message{
  margin-top: 6px;
  color: #b00020;
  font-size: 12px;
}

/* スマホ */
@media(max-width:900px){
  .cta .toi_section form{
    padding: 18px;
  }
}


.error{
color:red;
}

/* =========================
   FAQ
   ========================= */
.faq{
  padding: 80px 0;
}

.faq .section-desc{
  margin-bottom: 26px;
}

/* FAQ list */
.faq-list{
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius);
  box-shadow: 0 14px 30px rgba(20,32,64,.08);
  overflow:hidden;
}

/* details */
.faq-item{
  border-bottom:1px solid var(--line);
  padding: 0;
}
.faq-item:last-child{
  border-bottom:none;
}

.faq-q{
  list-style:none;
  cursor:pointer;
  padding: 16px 18px;
  font-weight: 600;
  color: var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

.faq-q::-webkit-details-marker{ display:none; }

.faq-q::after{
  content:"+";
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  flex: 0 0 auto;
  background: var(--accent);
  color: var(--primary);
  font-weight: 900;
  transition: transform .2s ease;
}

.faq-item[open] .faq-q::after{
  content:"–";
}

.faq-a{
  padding: 0 18px 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

/* CTA under FAQ */
.faq-cta{
  margin-top: 22px;
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.faq-cta-note{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* Mobile */
@media(max-width:900px){
  .faq{ padding: 60px 0; }
  .faq-q{ padding: 14px 14px; }
  .faq-a{ padding: 0 14px 14px; }
}


/* ====== 料金表直下CTA（BtoB向け・控えめに強い） ====== */
.price-cta{
  margin-top: 80px;
  padding: 18px 18px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.price-cta-lead{
  margin: 0 0 12px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: .01em;
  line-height: 1.5;
}

.price-cta-note{
  font-weight: 700;
  color: #475569;
  font-size: 0.92em;
}

.price-cta-actions{
  display: flex;
  gap: 12px;
}

.btn2{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;      /* タップしやすさ */
  padding: 12px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .01em;
  transition: transform .06s ease, filter .12s ease, box-shadow .12s ease;
}

.btn2:active{
  transform: translateY(1px);
}

.btn-primary{
  background: #e57c9b;   /* 既存CTAのピンクに寄せる */
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(229, 124, 155, 0.25);
}

.btn-primary:hover{
  filter: brightness(0.98);
}

.btn-secondary{
  background: #ffffff;
  color: #0b61a8;        /* ページの青に寄せる */
  border: 1px solid #cbd5e1;
}

.btn-secondary:hover{
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
}

.price-cta-bullets{
  margin: 12px 0 0;
  padding-left: 18px;
  color: #475569;
  font-size: 13px;
  line-height: 1.8;
}

/* ====== スマホ ====== */
@media (max-width: 768px){
  .price-cta{
    padding: 16px 14px 14px;
  }
  .price-cta-actions{
    flex-direction: column;
  }
}

.subtitle{
color: #004CC2;
font-weight: 700;
font-size: 23px;
font-size: clamp(18px, 2.2vw, 26px);
}