/* component.css — カード・ボタン・フォーム等のコンポーネント */

.logo{display:flex;align-items:center;gap:14px;font-weight:700;font-size:18px;color:var(--navy);letter-spacing:.02em;flex:0 0 auto;}
.logo:hover{text-decoration:none;}
.logo-mark{height:42px;width:auto;display:block;}
.logo-text{line-height:1;font-size:14px;}
.btn.small{padding:7px 16px;font-size:13px;white-space:nowrap;}
.hero p.hero-subtitle{font-size:20px;font-weight:700;color:var(--navy);margin:0 0 2px;}
.hero p.sub{font-size:18px;color:var(--muted);max-width:52ch;margin-top:0;}
.btn{
  display:inline-block;
  padding:10px 22px;
  border-radius:4px;
  font-size:14px;
  font-weight:600;
}
.btn.primary{background:var(--accent);color:#fff;}
.btn.primary:hover{background:#b92e27;text-decoration:none;}
.btn.ghost{background:#6180e5;border:1px solid #6180e5;color:#fff;}
.btn.ghost:hover{background:#4d6bd1;border-color:#4d6bd1;}
.card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:6px;
  padding:16px 20px;
  text-align:left;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:16px;
  align-items:center;
  text-decoration:none;
  color:inherit;
}
.card h3{grid-column:2;grid-row:1;margin:0;font-size:16px;color:#6180e5;}
.card p{grid-column:2;grid-row:2;margin:0;font-size:13px;color:var(--muted);}
.card-icon{
  grid-column:1;
  grid-row:1 / 3;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  margin:0;
  color:#6180e5;
}
.card-icon svg{width:28px;height:28px;}
.pillar-list{list-style:none;margin:0;padding:0;}
.pillar-list li{
  display:flex;
  gap:20px;
  padding:22px 0;
  border-bottom:1px solid var(--border);
}
.pillar-list li:first-child{border-top:1px solid var(--border);}
.pillar-num{
  font-size:28px;
  font-weight:700;
  color:#000;
  flex:0 0 48px;
  text-align:center;
  /* 見出し(h3: 20px × 1.8)の1行と同じ高さにして、数字と見出しの高さをそろえる */
  line-height:36px;
}
.pillar-body h3{margin:0 0 6px;font-size:20px;color:var(--navy);}
.pillar-body p{margin:0 0 10px;font-size:14px;color:var(--muted);}
.pillar-body p:last-child{margin-bottom:0;}
.pillar-tagline{font-weight:700;color:var(--navy)!important;font-size:16px;margin:0!important;}
.plan-card{border:1px solid var(--border);border-radius:8px;padding:32px;background:#f5f5f5;}
.plan-card h3{margin:0 0 12px;font-size:19px;color:var(--navy);}
.plan-card p{margin:0 0 20px;font-size:14px;color:var(--muted);line-height:1.8;}
.plan-points{list-style:none;margin:0;padding:0;}
.plan-points li{position:relative;padding:8px 0 8px 20px;font-size:13.5px;color:var(--fg);border-bottom:1px dashed #c4c4c4;}
.plan-points li:last-child{border-bottom:none;}
.plan-points li::before{content:"";position:absolute;left:2px;top:17px;width:6px;height:6px;border-radius:50%;background:#6180e5;}
.detail-category{border:1px solid var(--border);border-radius:6px;margin-bottom:10px;overflow:hidden;}
.detail-category summary{
  cursor:pointer;
  padding:10px 20px;
  font-size:15.5px;
  font-weight:400;
  color:var(--navy);
  background:var(--card-bg);
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.detail-category[open] summary{font-weight:700;}
.detail-category summary::after{content:"+";color:#000;display:inline-block;width:16px;flex:0 0 auto;text-align:center;}
.detail-category[open] summary::after{content:"-";}
.detail-body{padding:20px 20px 4px;}
.detail-screen{margin-bottom:20px;}
.detail-screen h4{font-size:18px;color:#000;margin:28px 0 8px;font-weight:700;letter-spacing:.02em;}
.detail-screen:first-child h4{margin-top:0;}
.detail-screen ul{margin:0;padding:0;list-style:none;}
.detail-screen li{font-size:13.5px;color:var(--muted);padding:8px 0;border-bottom:1px dashed #c4c4c4;line-height:1.7;}
.detail-screen li:last-child{border-bottom:none;}
.detail-screen li strong{color:var(--fg);font-weight:600;}
.detail-table{width:100%;table-layout:fixed;border-collapse:collapse;margin:0 0 4px;border-top:1px dashed #c4c4c4;}
.detail-table tr{border-bottom:1px dashed #c4c4c4;}
.detail-table tr:last-child{border-bottom:none;}
.detail-table th,.detail-table td{text-align:left;font-weight:400;vertical-align:top;padding:16px 0;font-size:13.5px;line-height:1.7;}
.detail-table th{color:var(--fg);font-weight:600;padding-right:20px;width:220px;}
.detail-table td{color:var(--muted);}
@media (max-width:600px){
  .detail-table,.detail-table tbody,.detail-table tr,.detail-table th,.detail-table td{display:block;width:auto;}
  .detail-table tr{padding:10px 0;}
  .detail-table th{padding:0 0 4px;color:var(--fg);}
  .detail-table td{padding:0;}
}
.section-list li{padding:0;border:1px solid var(--border);border-radius:10px;background:white;overflow:hidden;box-shadow:0 0 10px rgba(0,0,0,.1);}
.section-list-img{display:block;width:100%;height:160px;object-fit:cover;margin:0;}
.section-list-body{padding:24px;}
.section-list h3{margin:0 0 8px;font-size:16px;color:var(--navy);}
.section-list p{margin:0;font-size:14px;color:var(--muted);line-height:1.7;}
.eyebrow{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:#1a1a1a;
  color:#fff;
  padding:4px 10px;
  border-radius:3px;
  margin-bottom:14px;
}
.eyebrow-trial{background:#fed700;color:#000;}
.trial-banner{border:1px solid var(--border);border-radius:12px;padding:40px;box-shadow:0 4px 16px rgba(0,0,0,.06);}
.trial-banner .trial-grid{gap:20px;}
.trial-banner .cta-row{margin-top:20px;}
@media (max-width:700px){
  .trial-banner{padding:24px 18px;}
}
.trial-grid p{color:var(--muted);}
.trial-card{background:none;border:none;padding:0;}
.trial-table{width:100%;border-collapse:collapse;}
.trial-table tr{border-bottom:1px solid var(--border);}
.trial-table tr:last-child{border-bottom:none;}
.trial-table th,.trial-table td{padding:14px 0;text-align:left;vertical-align:top;font-weight:400;}
.trial-table th{font-size:12.5px;font-weight:700;color:var(--muted);width:130px;white-space:nowrap;padding-right:16px;}
.trial-table td{margin:0;font-size:14px;color:var(--fg);line-height:1.7;}
.trial-form-block .page-lead{max-width:680px;margin:0 auto 24px;}
.form-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:6px;
  padding:32px;
  max-width:680px;
  margin:0 auto;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
.form-group{margin-bottom:20px;}
.form-group label{display:block;font-size:13.5px;font-weight:600;color:var(--fg);margin-bottom:8px;}
.form-group .req{display:inline-block;font-size:10.5px;font-weight:700;background:var(--accent);color:#fff;padding:2px 6px;border-radius:3px;margin-left:6px;vertical-align:middle;}
.form-group .opt{display:inline-block;font-size:10.5px;font-weight:600;background:var(--border);color:var(--muted);padding:2px 6px;border-radius:3px;margin-left:6px;vertical-align:middle;}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:4px;
  font-size:14px;
  font-family:inherit;
  color:var(--fg);
  background:#fff;
}
.form-group textarea{min-height:110px;resize:vertical;}
.radio-group{display:flex;gap:10px;flex-wrap:wrap;}
.radio-group label{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--border);border-radius:4px;
  padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer;
  margin:0;
}
.radio-group input[type="radio"]{
  appearance:none;-webkit-appearance:none;
  width:16px;height:16px;margin:0;
  border:2px solid var(--accent);border-radius:50%;
  background:#fff;position:relative;cursor:pointer;flex:0 0 auto;
}
.radio-group input[type="radio"]::after{
  content:"";position:absolute;top:50%;left:50%;
  width:8px;height:8px;border-radius:50%;
  background:#fff;transform:translate(-50%,-50%);
}
.radio-group input[type="radio"]:checked::after{background:var(--accent);}
.form-agree{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);margin:4px 0 24px;}
.form-agree a{color:var(--fg);text-decoration:underline;}
@media (max-width:600px){ .form-row{grid-template-columns:1fr;} }
.step-head{display:flex;flex-direction:column;align-items:center;gap:4px;}
.step-num{font-weight:800;font-size:26px;color:#6180e5;line-height:1.1;}
.step-label{font-size:11px;letter-spacing:.15em;font-weight:700;color:var(--muted);}
.step-dot{
  display:block;
  width:16px;
  height:16px;
  margin:14px auto 0;
  border-radius:50%;
  background:#6180e5;
  border:3px solid #fff;
  box-shadow:0 0 0 2px #6180e5;
  background-clip:padding-box;
}
.step-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:72px;
  height:72px;
  margin:30px auto 18px;
  border-radius:50%;
  background:#eef1fc;
  color:#6180e5;
}
.step-icon svg{width:36px;height:36px;}
.step-text strong{display:block;color:var(--navy);font-size:18px;font-weight:700;}
.step-text span{display:block;color:var(--muted);font-size:14.5px;margin-top:6px;}
.story-title{font-size:22px;margin:0 0 28px;color:var(--navy);}
.story-block{margin:0 0 30px;}
.story-block h3{margin:0 0 8px;font-size:17px;color:var(--navy);}
.story p{font-size:15.5px;color:var(--fg);margin:0;}
.story p.closing{font-weight:700;color:var(--navy);font-size:17px;border-top:1px solid var(--border);padding-top:24px;margin-top:8px;}
.concept-photo-track{display:flex;width:max-content;animation:conceptBandScroll 50s linear infinite;}
.concept-photo-track img{flex:0 0 auto;height:208px;width:auto;aspect-ratio:3/2;object-fit:cover;display:block;}
@keyframes conceptBandScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (max-width:700px){
  .concept-photo-track img{height:120px;}
}
@media (prefers-reduced-motion:reduce){
  .concept-photo-track{animation:none;}
}
.story-band .story{margin:0;}
.story-slider{position:relative;margin:0 0 32px;}
.story-viewport{overflow:hidden;border:1px solid var(--border);border-radius:12px;background:#fff;}
.story-track{display:flex;}
.story-slide{flex:0 0 100%;width:100%;display:flex;align-items:stretch;transition:none;}
.story-slide-img{flex:0 0 42%;width:42%;object-fit:cover;min-height:320px;}
.story-slide-body{flex:1 1 auto;padding:36px 40px;display:flex;flex-direction:column;justify-content:center;}
.story-slide-num{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--muted);margin-bottom:10px;}
.story-slide-body h3{margin:0 0 10px;font-size:19px;color:var(--navy);}
.story-slide-body p{margin:0;font-size:15.5px;color:var(--fg);line-height:1.8;}
.story-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--navy);padding:0;}
.story-nav.prev{left:-20px;}
.story-nav.next{right:-20px;}
.story-nav svg{width:18px;height:18px;}
.story-dots{display:flex;justify-content:center;gap:8px;margin-top:18px;}
.story-dot{width:8px;height:8px;border-radius:50%;background:var(--border);border:none;cursor:pointer;padding:0;}
.story-dot.active{background:var(--navy);}
@media (max-width:700px){
  .story-slide{flex-direction:column;}
  .story-slide-img{width:100%;flex:0 0 auto;min-height:180px;height:180px;}
  .story-slide-body{padding:22px;}
  .story-nav{display:none;}
}
.timeline .step{flex:1 1 220px;}
.timeline .year{font-weight:700;color:var(--accent);font-size:15px;}
.timeline h3{margin:6px 0 8px;font-size:16px;color:var(--navy);}
.timeline p{font-size:14px;color:var(--muted);margin:0;}
.faq-notice{margin:0 0 28px;padding:16px 20px;background:var(--bg-soft,#f7f8fa);border-radius:8px;}
.faq-notice p{margin:0 0 6px;font-size:13.5px;line-height:1.7;color:var(--muted);}
.faq-notice p:last-child{margin-bottom:0;}
.faq-notice a{color:var(--navy);text-decoration:underline;}
.faq-list{list-style:none;margin:0;padding:0;}
.faq-list > li{padding:28px 0;border-bottom:1px solid var(--border);}
.faq-list > li:first-child{border-top:1px solid var(--border);}
.faq-list h3{margin:0 0 16px;font-size:18px;color:var(--navy);}
.faq-list .faq-sub{margin:0 0 14px;font-size:13.5px;color:var(--muted);}
.faq-box{border:1px dashed var(--border);border-radius:6px;min-height:56px;display:flex;align-items:center;}
.faq-box p{margin:0;padding:16px 20px;color:var(--muted);font-size:14px;}
.faq-qa{list-style:none;margin:0;padding:0 10px;}
.faq-qa > li{padding:3px 0;}
/* 質問が複数行になってもQマークと＋が1行目に並ぶよう flex-start にし、
   それぞれ margin-top で質問文1行目の中心（上から 4px + 28.8px/2）に合わせる */
.faq-qa details summary{display:flex;align-items:flex-start;gap:16px;list-style:none;cursor:pointer;padding:4px 0;}
.faq-q-badge{flex:0 0 auto;width:24px;height:24px;margin-top:6px;background:#fed700;color:#1a1a1a;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;border-radius:50%;}
.faq-question{flex:1 1 auto;font-weight:400;font-size:16px;color:var(--navy);padding-top:4px;}
.faq-qa details[open] .faq-question{font-weight:700;}
.faq-toggle-icon{flex:0 0 auto;width:24px;height:24px;margin-top:6px;font-size:20px;line-height:1;color:#1a1a1a;text-align:center;}
.faq-toggle-icon::before{content:"+";}
.faq-qa details[open] .faq-toggle-icon::before{content:"\2212";}
.faq-answer{margin:0 0 20px 40px;padding-right:40px;color:var(--muted);font-size:16px;line-height:1.8;}

/* Contact Form 7 互換調整
   trial.html の .form-card 相当を wpcf7-form に、.radio-group の見た目を
   CF7が生成する .wpcf7-list-item 構造にも適用する。 */
.wpcf7-form{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:6px;
  padding:32px;
  max-width:680px;
  margin:0 auto;
}
.wpcf7-form .radio-group,
.wpcf7-form .wpcf7-radio{display:flex;gap:10px;flex-wrap:wrap;}
.wpcf7-form .wpcf7-list-item{margin:0;}
.wpcf7-form .wpcf7-radio .wpcf7-list-item label,
.radio-group label{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--border);border-radius:4px;
  padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer;
  margin:0;
}
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item label{
  display:inline-flex;align-items:center;gap:8px;
  border:none;padding:0;font-size:13.5px;font-weight:400;
  color:var(--muted);cursor:pointer;margin:0;
}
.wpcf7-form input[type="radio"],
.radio-group input[type="radio"]{
  appearance:none;-webkit-appearance:none;
  width:16px;height:16px;margin:0;
  border:2px solid var(--accent);border-radius:50%;
  background:#fff;position:relative;cursor:pointer;flex:0 0 auto;
}
.wpcf7-form input[type="radio"]::after,
.radio-group input[type="radio"]::after{
  content:"";position:absolute;top:50%;left:50%;
  width:8px;height:8px;border-radius:50%;
  background:#fff;transform:translate(-50%,-50%);
}
.wpcf7-form input[type="radio"]:checked::after,
.radio-group input[type="radio"]:checked::after{background:var(--accent);}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:4px;
  font-size:14px;
  font-family:inherit;
  color:var(--fg);
  background:#fff;
}
.wpcf7-form select{
  width:auto;
  max-width:100%;
  padding:9px 36px 9px 12px;
  border:1px solid var(--border);
  border-radius:4px;
  font-size:14px;
  font-family:inherit;
  color:var(--fg);
  background:#fff;
}
.wpcf7-form textarea{min-height:110px;resize:vertical;}
.wpcf7-form input.wpcf7-submit{
  display:inline-block;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  border:none;
  padding:10px 22px;
  border-radius:4px;
  font-size:14px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  background:var(--accent);
  color:#fff;
}
.wpcf7-form input.wpcf7-submit:hover{background:#b92e27;}
.wpcf7-form input.wpcf7-submit:disabled{opacity:.6;cursor:default;}
.wpcf7-form .wpcf7-not-valid-tip{display:block;font-size:12px;color:var(--accent);margin-top:4px;}
.wpcf7-form .wpcf7-response-output{
  border:1px solid var(--border);border-radius:6px;
  padding:12px 16px;margin-top:20px;font-size:13.5px;color:var(--fg);
}
/* ストーリースライダー：横スワイプはJSで処理し、縦スクロールはブラウザに任せる */
.story-viewport{touch-action:pan-y;}
.story-slide-img{-webkit-user-drag:none;user-select:none;}
/* 白背景のサムネイル（スクリーンショット等）は白(#fff)を #f9f9f9 程度に落として、
   白いカード背景と境目が分かるようにする。255 × 0.976 ≒ 249 (#f9) */
.section-list-img.is-white-bg{filter:brightness(.976);}

/* Contact Form 7：自動で挿入される <p> と <br> による余白のばらつきをなくし、
   「ラベル → 入力欄 8px／項目どうし 24px」にそろえる */
.wpcf7-form p{margin:0;}
.wpcf7-form .form-group br{display:none;}
.wpcf7-form .form-group{margin-bottom:24px;}
.wpcf7-form .form-row{column-gap:20px;row-gap:0;margin-bottom:0;}
.wpcf7-form .form-agree{margin:4px 0 24px;}
/* ラベルの行間を詰め、ラベル → 入力欄の間を 10px に */
.wpcf7-form .form-group label{line-height:1.4;margin-bottom:10px;}

/* FAQ：奇数番目の質問の背景を #f9f9f9 にして、行を見分けやすくする。
   左右の余白を ul から li に移し、背景の内側に文字が来るようにする */
.faq-qa{padding:0;}
.faq-qa > li{padding:3px 10px;border-radius:10px;}
.faq-qa > li:nth-child(odd){background:#f9f9f9;}
@media (max-width:700px){
  .faq-qa > li{padding:2px 8px;}
}