@media screen and (max-width: 768px) {
a.clclbtn_m001 {
  width: 90%;
}
a.clclbtn_s001 {
  width: 80%;
}
}

.contact {
  position: fixed;
  right: 15px;
  bottom: 100px;
  display: block;
  width: 280px;
z-index: 1000;
}

.contact.u-inner{
padding-inline:0
}

.contact li:first-child a {
  background-color: #2563eb;
  color:#fff
}

.contact__item {
  margin-bottom: 10px !important;
}

.contact__link.btn {
 border-radius: 10px;
  border: none;
  background-color: #fff;
  border: solid 2px #2563eb;
  color: #2563eb;
box-shadow:0 4px 12px rgba(37,99,235,0.3);
}

@media screen and (max-width: 768px) {
  .contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    position: fixed;
    bottom: 0;
  right: 0;
    gap: 0;
    margin: 0;
    box-shadow: 0px -3px 5px 0px rgba(0, 0, 0, 0.1);
    width: 100%;
  }
  
  .contact__link.btn {
  border-radius: 0;
}

.contact__item {
  margin-bottom: 0 !important;
}
}

.company-wrap{
display:none;}





 .faq-table { width: 100%; border-collapse: collapse; }
  .faq-table td { padding: 14px 16px; line-height: 1.6; }

  /* Q行（奇数行） */
  .faq-table tr:nth-child(odd) td {
  	display: block;
    cursor: pointer;
     position: relative;
    padding-left: 55px; 
    font-size: clamp(16px,2.2vw,20px);
    border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
  font-weight: 700;
  display: block;
  margin-bottom: 20px;
  }
  .faq-table tr:nth-child(odd) td:hover { background: #e5e7eb; }


  .faq-table tr:nth-child(odd) td::before {
    content: "";
    position: absolute;
     left: 25px; 
     top: 25px;
    font-weight: 700; 
    line-height: 1;
    width:10px;
    height:10px;
    border-top:solid 2px #2764eb;
    border-right:solid 2px #2764eb;
      transform: rotate(45deg); 
  }
  .faq-table tr.is-open:nth-child(odd) td::before { 
  content: "";
  position: absolute;
  left: 25px;
  top: 25px;
  font-weight: 700;
  line-height: 1;
  width: 10px;
  height: 10px;
  border-top: solid 2px #2764eb;
  border-right: solid 2px #2764eb;
  transform: rotate(135deg); }

  
  .faq-table tr:nth-child(even) { display: none; }
  .faq-table tr.is-open + tr { display: table-row; }

   .faq-table tr:focus td { outline: 2px solid #2563eb; outline-offset: -2px; }

.faq-table tr:nth-child(2n) td {
  padding-bottom: 55px;
}

.flex-box{
display:flex;
justify-content:space-between;
}

.flex-box .flex-item40{
width:40%
}

.flex-box .flex-item50{
width:50%
}


@media screen and (max-width: 768px) {

.flex-box{
display:block;
}

.flex-box .flex-item40,
.flex-box .flex-item50{
width:100%
}
}



ul.list-icon--check {
    list-style: none;
}

ul.list-icon--check li {
    position: relative;
}

ul.list-icon--check li::before {
    content: "";
    display: block;
    position: absolute;
    width: 1rem;
    height: 0.5rem;
    border-left: 3px solid #2563eb;
    border-bottom: 3px solid #2563eb;
    top: 0.8rem;
    left: -2rem;
    transform: rotate(-45deg);
}



.text-center{
text-align:center;
}

@media screen and (max-width: 768px) {
.text-center{
text-align:left;
}

}


.gnav-lv2 {
  box-shadow: 0 0 5px rgba(0,0,0,.1);
  background: #fff;
  padding: 20px;
}


.gnav__link, .gnav-lv2__link {
  font-weight: bold;
}






/* ===========================================================
古賀のCSSスタート
=========================================================== */

/* =============================
   トップページ共通レイアウト
   ============================= */
.lp-main{
  max-width:1000px;
  margin:0 auto;
  padding-inline:clamp(12px,3vw,24px);
  color:#111827;
  line-height:1.8;
}

/* セクション幅 */
.lp-section{
  max-width:640px;
  margin:0 auto;
}
.lp-section-wide{
  max-width:960px;
  margin:0 auto;
}

/* 見出し・テキスト */
.lp-hero-title{
  margin:0 0 12px;
  font-weight:800;
  letter-spacing:.02em;
  font-size:clamp(22px,3.2vw,36px);
  line-height:1.3;
}
.lp-hero-lead{
  margin:0 0 16px;
  color:#555;
  font-size:clamp(14px,2vw,18px);
  line-height:1.8;
}
.lp-heading-lg{
  margin:0 0 12px;
  font-weight:700;
  font-size:clamp(18px,2.4vw,28px);
  line-height:1.35;
}
.lp-heading-xl{
  margin:0 0 12px;
  font-weight:800;
  font-size:clamp(20px,2.6vw,30px);
  line-height:1.35;
}
.lp-text{
  margin:0 0 12px;
  color:#222;
  font-size:clamp(14px,2vw,18px);
}
.lp-text-last{
  margin:0 0 16px;
  color:#222;
  font-size:clamp(14px,2vw,18px);
}
.lp-note-small{
  margin:8px 0 0;
  font-size:13px;
  color:#666;
}

/* 区切り線・スペーサー */
.lp-divider{
  height:clamp(16px,3vw,40px);
  border-bottom:1px solid #e5e7eb;
  width:100%;
  margin:clamp(24px,4vw,56px) auto 0;
}
.lp-divider-tight{
  height:clamp(16px,3vw,40px);
  border-bottom:1px solid #e5e7eb;
  width:100%;
  margin:clamp(16px,3vw,40px) auto 0;
}
.lp-spacer{
  height:clamp(16px,3vw,40px);
}

/* 画像・キャプション */
.lp-figure-full{ margin:0; }
.lp-img-full{
  display:block;
  width:100%;
  height:auto;
  border:0;
  border-radius:8px;
}
.lp-caption{
  max-width:640px;
  margin:8px auto 0;
  font-size:13px;
  color:#666;
  line-height:1.7;
}

/* 業種グリッド */
.lp-industries-title{
  margin:clamp(16px,3vw,28px) 0 12px;
  font-weight:700;
  font-size:clamp(16px,2.2vw,22px);
}
.lp-grid-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(12px,2vw,20px);
}
.lp-card-caption{
  margin-top:6px;
  font-size:13px;
  color:#666;
  line-height:1.7;
  text-align:center;
}

/* ステップ・リスト */
.lp-step-list{
  margin:0;
  padding:0;
  list-style:none;
  font-size:clamp(14px,2vw,18px);
  color:#222;
}
.lp-step-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin:0 0 8px;
}
.lp-step-no{
  min-width:1.8em;
  text-align:center;
  font-weight:700;
}
.lp-support-list{
  margin:12px 0 16px;
  padding-left:1.2em;
  color:#222;
  font-size:clamp(14px,2vw,18px);
}
.lp-support-list li{ margin:6px 0; }

/* ボタン */
.lp-btn-primary{
  display:inline-block;
  background:#2563eb;
  color:#fff;
  font-weight:700;
  text-decoration:none;
  padding:12px 20px;
  border-radius:8px;
  font-size:clamp(14px,2vw,18px);
  line-height:1.4;
  text-align:center;
  transition:opacity .3s ease, box-shadow .25s ease;
  box-shadow:0 4px 12px rgba(37,99,235,.18);
}
.lp-btn-primary:hover{
  opacity:.85;
  box-shadow:0 6px 18px rgba(37,99,235,.25);
}

/* 注意ボックス */
.lp-notice{
  margin:10px 0 0;
  padding:12px 14px;
  border-radius:8px;
  font-size:clamp(13px,1.8vw,16px);
  line-height:1.7;
}
.lp-notice-blue{
  background:#f0f6ff;
  color:#1a3a6e;
}
.lp-notice-info{
  background:#f8fbff;
  color:#222;
}
.lp-notice-info strong{ display:block; margin-bottom:4px; }

/* 自動課金メッセージ */
.lp-auto-billing{
  margin:8px 0 6px;
  background:#eff6ff;
  border:1px solid #dbeafe;
  color:#1e3a8a;
  padding:10px 12px;
  border-radius:8px;
  font-size:13px;
  line-height:1.7;
}

/* FAQ */
.lp-faq h2{ margin-bottom:12px; }
.lp-faq details{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:8px 14px;
  margin:0 0 12px;
  transition:background .2s,border-color .2s,box-shadow .2s;
}
.lp-faq details[open]{
  background:#f1f5ff;
  border-color:#bfdbfe;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.lp-faq summary{
  list-style:none;
  cursor:pointer;
  font-weight:700;
  color:#0f172a;
  font-size:clamp(14px,2vw,18px);
  outline:none;
  display:flex;
  align-items:center;
  gap:.5em;
}
.lp-faq summary::-webkit-details-marker{ display:none; }
.lp-faq summary::before{
  content:"";
  width:12px;
  height:12px;
  border-right:2px solid #1d4ed8;
  border-bottom:2px solid #1d4ed8;
  transform:rotate(-45deg);
  transition:transform .2s;
  margin-right:2px;
}
.lp-faq details[open] summary::before{
  transform:rotate(45deg);
}
.lp-faq .faq-a{
  margin:8px 2px 8px 20px;
  color:#334155;
  font-size:clamp(14px,2vw,18px);
}
.lp-faq-footer{
  margin:6px 0 0;
  color:#6b7280;
  font-size:13px;
}

/* 小さい画面向け微調整（任意） */
@media (max-width:480px){
  .lp-support-list{ padding-left:1em; }
}


/* =========================
   トップページ：共通レイアウト2
   ========================= */

/* ページ全体の最大幅・横中央寄せ */
.lp-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

/* 見出しブロック（ヒーローなど、狭めの本文） */
.lp-section-narrow {
  max-width: 640px;
  margin: 0 auto 24px;
  line-height: 1.8;
  color: #111827;
}

/* ヒーロー見出し */
.lp-hero-title {
  margin: 0 0 12px;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: clamp(22px, 3.2vw, 36px);
  line-height: 1.3;
}

/* ヒーロー本文 */
.lp-hero-lead {
  margin: 0 0 16px;
  color: #555;
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.8;
}

/* セクション見出し（h2共通） */
.lp-h2 {
  margin: 0 0 12px;
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 28px);
  line-height: 1.35;
}

/* 区切り線＋スペース */
.lp-separator {
  height: clamp(16px, 3vw, 40px);
  border-bottom: 1px solid #e5e7eb;
  width: 100%;
  margin: clamp(24px, 4vw, 56px) auto 0;
}
.lp-spacer {
  height: clamp(16px, 3vw, 40px);
}

/* 画像ブロック（横幅を中央にまとめる） */
.lp-figure {
  margin: 0;
}
.lp-figure-inner {
  max-width: 1000px;
  margin: 0 auto;
}
.lp-figure-inner img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 8px;
}
.lp-figure-caption {
  max-width: 640px;
  margin: 8px auto 0;
  font-size: 13px;
  color: #666;
  line-height: 1.7;
  padding-inline: clamp(16px, 4vw, 32px);
}

/* =============================
   トップページ：モック紹介ブロック
   ============================= */

/* モック紹介ブロックの余白調整 */
.lp-mock-section {
  margin-top: clamp(-40px, -6vw, -24px) !important;
  margin-bottom: clamp(32px, 5vw, 56px) !important;
}


.lp-mock-lead {
  margin-top: 0 !important;
  margin-bottom: clamp(12px, 2vw, 18px);
}

.lp-mock-lead{
  margin:0 0 14px;
  font-size:clamp(14px,2vw,18px);
  color:#111827;
}

.lp-mock-figure{
  margin:0;
}

.lp-mock-frame{
  max-width:720px;
  margin:0 auto;
  padding:clamp(10px,2vw,18px);
  border-radius:16px;
  background:#ffffff;
  box-shadow:0 10px 30px rgba(15,23,42,.12);
}

.lp-mock-img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
}

.lp-mock-caption{
  max-width:640px;
  margin:8px auto 0;
  font-size:13px;
  color:#64748b;
  line-height:1.7;
  text-align:center;
}

@media (max-width:480px){
  .lp-mock-frame{
    box-shadow:0 6px 18px rgba(15,23,42,.10);
  }
}



/* ===========================================================
   機能一覧 / オプション共通
   2カラム固定・カードUI・Material Symbols
   =========================================================== */

/* ベース変数（色・角丸・幅） */
:root{
  --brand:#2563eb;        /* 機能一覧の青 */
  --brand-ink:#1e293b;
  --brand-text:#334155;
  --brand-line:#e5e7eb;
  --brand-card:#fff;
  --radius:12px;
  --maxw:1000px;

  /* オプション用（緑） */
  --opt-brand:#16a34a;    /* オプションの緑 */
  --opt-chip-bg:#f7fbf9;
  --opt-chip-border:#cfe8da;
}

/* 共有：Material Symbols・アイコン色(既定は青) */
.material-symbols-outlined{
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  vertical-align:-4px;
}
.icon-main{ color:var(--brand); margin-right:8px; }

/* 共有：記事コンテナ/見出し */
.article-features,
.article-option{
  max-width:var(--maxw);
  margin:0 auto;
  padding-inline:clamp(12px,3vw,24px);
  line-height:1.9;
  color:#111;
}
.feature-section{ margin:0 0 40px; }
.feature-section h2{
  margin:0 0 16px;
  display:flex;
  gap:8px;
  align-items:center;
  font-weight:800;
  font-size:clamp(18px,2.6vw,26px);
  color:var(--brand-ink);
}

/* 共有：カードリスト（2カラム固定） */
.article-features .feature-list,
.article-option  .feature-list{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;               /* モバイル1列 */
}
@media (min-width:700px){
  .article-features .feature-list,
  .article-option  .feature-list{
    grid-template-columns:repeat(2,minmax(0,1fr));   /* 700px〜2列 */
  }
}
/* 1280px以上でも2列を維持（テーマ側の3列指定を封じる） */
@media (min-width:1280px){
  .article-features .feature-list,
  .article-option  .feature-list{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* 共有：カード本体 */
.article-features .feature-card,
.article-option  .feature-card{
  background:var(--brand-card);
  border:1px solid var(--brand-line);
  border-radius:var(--radius);
  padding:25px 26px;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.article-features .feature-card>strong,
.article-option  .feature-card>strong{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  color:var(--brand-ink);
  flex-wrap: wrap;
}
.article-features .feature-card p,
.article-option  .feature-card p{
  margin:15px 0 0;
  color:var(--brand-text);
  line-height:1.7;
}
/* 段落内の強調（例：10GB）が行頭に落ちない対策 */
.article-features .feature-card p strong,
.article-option  .feature-card p strong{
  display:inline !important;
  white-space:nowrap;
  overflow-wrap:break-word;
  font-weight:700;
}

/* 共有：バッジ/注釈/CTA */
.feat-badge{
  display:inline-block;
  padding:.18em .5em;
  border-radius:999px;
  font-size:.78em; line-height:1;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(0,0,0,.04);
  vertical-align:middle;
  margin-left:.4em;
  white-space:nowrap;
}
.af-note{ color:#64748b; }

.af-cta{
  margin:28px 0;
  padding:18px 16px;
  border:1px dashed #cfd8dc;
  border-radius:12px;
  background:#f7fbff;
}
.af-cta h3{
  margin:0 0 8px;
  font-size:1.05rem;
  display:flex;
  align-items:center;
  gap:6px;
}
.af-cta p{
  margin:.4em 0 1em;
}
.af-btn{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  padding:10px 16px;
  border-radius:10px;
  border:1px solid var(--brand);
  background:var(--brand);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  box-shadow:0 3px 10px rgba(37,99,235,.15);
  transition:background .25s ease, box-shadow .25s ease;
}
.af-btn:hover{
  background:#1d4ed8;
  box-shadow:0 4px 12px rgba(37,99,235,.25);
}
.af-btn:focus-visible{ outline:2px solid #90c2ff; outline-offset:2px; }

/* ===========================================================
   機能一覧（.article-features）固有差分
   ※既定のブランド色（青）のまま
   =========================================================== */
/* 今のところ個別調整は不要。必要になればここに追記。 */

/* ===========================================================
   オプション一覧（.article-option）固有差分
   =========================================================== */

/* 見出しアイコンだけ緑に（区別しやすく） */
.article-option .material-symbols-outlined.icon-main{
  color:var(--opt-brand) !important;
}

/* 上部の注意バッジ（2つ横並び） */
.article-option .tax-note-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
  margin:0 0 16px;
  line-height:1.6;
}
.article-option .tax-note{
  display:inline-block;
  background:#f1f5f9;
  color:#475569;
  border-radius:6px;
  padding:4px 10px;
  font-size:13px;
  font-weight:600;
}

/* 価格チップ行 */
.article-option .price-chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:8px 0 6px;
}
/* チップピル */
.article-option .chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border:1px solid var(--opt-chip-border);
  background:var(--opt-chip-bg);
  border-radius:999px;
  box-shadow:0 1px 1px rgba(0,0,0,.03);
  font-size:14px;
  line-height:1;
}
.article-option .chip:hover{ background:#f0f7f3; }
.article-option .chip .chip-label{ color:#333; font-weight:700; }
.article-option .chip .chip-value{ color:#111; font-weight:800; }




/* ご契約時に取得する場合は無料です。 */
.article-option small.af-note-success {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 4px 10px;        /* 余白 少し減らす */
  border-radius: 6px;       /* 999px → 6px でボタン感ダウン */
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  font-weight: 600;
  font-size: 12px;
}


/* オプション記事内のボタン/リンクで緑を使いたいとき（任意）
.article-option .af-btn{
  border-color:var(--opt-brand);
  background:var(--opt-brand);
  box-shadow:0 3px 10px rgba(22,163,74,.15);
}
.article-option .af-btn:hover{
  background:#15803d;
  box-shadow:0 4px 12px rgba(22,163,74,.25);
}
*/

/* オプション一覧用：注釈トーン／価格リスト調整 */
.article-option .feature-card p small.af-note{
  display:block;
  margin-top:.4em;
  font-size:.92em;
  line-height:1.6;
  color:#64748b;
}
.article-option .feature-card p small.af-note + small.af-note{
  margin-top:.25em;
}

/* 段階的な料金リスト（例：1〜20名 無料〜） */
.article-option .feature-card p.price-list{
  font-size:.9em;
  color:#475569;
  line-height:1.7;
  margin-top:.4em;
}




/* ===========================================================
   料金ページ（キャンペーン版）スタイル（枠線フォールバック付き）
   =========================================================== */

/* ページ専用の既定値（サイト側に無い場合の保険） */
.pricing-wrap{
  --brand: #2563eb;
  --line: #e5e7eb;
  --maxw: 1000px;
}

/* 期間表示（タイトル直下の行） */
.pricing-wrap .pricing-head .period{
  margin-top: 6px;
  font-size: 0.9em;
  color: #555;
}

/* コンテナ */
.pricing-wrap{
  max-width:min(var(--maxw),96vw);
  margin:0 auto;
  padding-inline:clamp(12px,3vw,24px);
  line-height:1.85;
  color:#111;
}

/* 右上の注意バッジ（税別表記） */
.pricing-wrap .tax-note{
  display:block;
  width:fit-content;
  margin:0 0 12px auto; /* 右寄せ */
  background:#f1f5f9;
  color:#475569;
  border-radius:6px;
  padding:4px 10px;
  font-size:13px;
  font-weight:600;
}

/* 見出し */
.pricing-wrap .pricing-head{
  margin:0 0 18px;
}
.pricing-wrap .pricing-head h1{
  margin:0 0 8px;
  font-weight:800;
  letter-spacing:.02em;
  font-size:clamp(22px,3.6vw,34px);
  line-height:1.3;
}
.pricing-wrap .pricing-head p{
  margin:0;
  color:#374151;
  font-size:clamp(14px,2vw,16px);
}

/* 見出し下のバッジだけ少し上マージンを足す */
.pricing-wrap .plan-badge-top{
  margin:12px 0 10px;
}

/* キャンペーン帯 */
.pricing-wrap .pricing-banner{
  background:#fef3c7;
  border-left:5px solid #f59e0b;
  padding:12px 16px;
  border-radius:8px;
  margin:16px 0 24px;
}
.pricing-wrap .pricing-banner strong{ color:#92400e; }
.pricing-wrap .pricing-banner span{ color:#78350f; }

/* カード並び */
.pricing-wrap .plan-grid{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}
.pricing-wrap .plan-card{
  flex:1 1 360px;
  border:1px solid;
  border-color:var(--line, #e5e7eb);    /* フォールバック色 */
  border-radius:14px;
  padding:20px;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  background:#fff;
}
.pricing-wrap .plan-badge{
  display:inline-block;
  margin-bottom:10px;
  padding:4px 10px;
  border-radius:999px;
  background:#eff6ff;
  color:#1d4ed8;
  border:1px solid #bfdbfe;
  font-weight:700;
  font-size:clamp(11px,1.6vw,12px);
}
.pricing-wrap .plan-title{
  margin:0 0 6px;
  font-weight:800;
  font-size:clamp(18px,2.8vw,22px);
}
.pricing-wrap .plan-lead{
  margin:0 0 16px;
  color:#374151;
  font-size:clamp(14px,2vw,16px);
}

/* 料金ボックス（点線枠） */
.pricing-wrap .price-boxes{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:4px 0 14px;
}
.pricing-wrap .price-box{
  flex:1 1 220px;
  border:1px dashed;
  border-color:var(--line, #e5e7eb);   /* フォールバック色 */
  border-radius:12px;
  padding:14px;
  background:#fff;
}
.pricing-wrap .price-box .label{
  color:#6b7280;
  font-size:clamp(12px,1.8vw,14px);
}
.pricing-wrap .price-box .value{
  font-weight:800;
  font-size:clamp(20px,3vw,24px);
}
/* 年払いの数字だけ少し小さくする */
.pricing-wrap .price-box .value-small{
  font-size:clamp(16px,2.6vw,18px);
}
.pricing-wrap .price-box .sub{
  color:#6b7280;
  font-size:clamp(11px,1.6vw,12px);
  white-space:normal;        /* ← 折り返しOKに変更 */
}

/* 初期費用・作成費枠 */
.pricing-wrap .highlight-box{
  border:1px dashed;
  border-color:var(--line, #e5e7eb);   /* フォールバック色 */
  border-radius:12px;
  padding:14px;
  background:#fff;
}
.pricing-wrap .highlight-box.ok{
  background:#f0fdf4;
}
.pricing-wrap .highlight-box .label{
  color:#6b7280;
  font-size:clamp(12px,1.8vw,14px);
}
.pricing-wrap .highlight-box .value{
  font-weight:800;
  font-size:clamp(18px,2.8vw,20px);
}
.pricing-wrap .highlight-box .value-lg{
  font-size:clamp(20px,3vw,24px);
}
.pricing-wrap .highlight-box.ok .value{
  color:#16a34a;
}
.pricing-wrap .highlight-box .sub{
  color:#6b7280;
  font-size:clamp(11px,1.6vw,12px);
  line-height:1.7;
}

/* 2列並び用 */
.pricing-wrap .row-2{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.pricing-wrap .row-2 > .highlight-box{
  flex:1 1 220px;
}

/* プランの中の補足テキスト */
.pricing-wrap .plan-note{
  margin:8px 0 0;
  font-size:13px;
  color:#6b7280;
  line-height:1.7;
}

/* CTA */
.pricing-wrap .cta-wrap{
  margin:18px 0 6px;
}
.pricing-wrap .btn-primary{
  display:inline-block;
  text-decoration:none;
  background:var(--brand, #2563eb);
  color:#fff;
  font-weight:800;
  border-radius:12px;
  padding:14px 20px;
  font-size:clamp(15px,2.2vw,18px);
  box-shadow:0 4px 14px rgba(37,99,235,.18);
}
.pricing-wrap .btn-outline{
  display:inline-block;
  text-decoration:none;
  background:#fff;
  color:#1d4ed8;
  font-weight:800;
  border:2px solid #60a5fa;
  border-radius:12px;
  padding:12px 18px;
  font-size:clamp(15px,2.2vw,18px);
}

/* 注意書き（3行） */
.pricing-wrap .pricing-notes{
  margin:24px 0 8px;
  color:#6b7280;
  font-size:clamp(12px,1.8vw,14px);
  line-height:1.9;
}
.pricing-wrap .pricing-notes p{
  margin:6px 0;
}

/* 下部案内（区切り線つき） */
.pricing-footer{
  text-align:center;
  margin-top:48px;
  padding-top:32px;
  border-top:1px solid var(--line, #e5e7eb); /* フォールバック色 */
  max-width:min(var(--maxw, 1000px),96vw);
  margin-inline:auto;
}
.pricing-footer p{
  margin-bottom:14px;
  color:#444;
  font-size:15px;
  line-height:1.8;
}
.pricing-footer a{
  display:inline-block;
  background:var(--brand, #2563eb);
  color:#fff;
  font-weight:700;
  font-size:15px;
  padding:10px 18px;
  border-radius:8px;
  text-decoration:none;
  transition:background-color .25s ease;
}



/* ===========================================================
   サポートプラン詳細 
   =========================================================== */
.support-wrap{
  max-width:min(1000px,96vw);
  margin:0 auto;
  padding-inline:clamp(12px,3vw,24px);
  line-height:1.85;
  color:#111;
}

/* 税別注記（右寄せバッジ） */
.support-taxnote{ text-align:right; margin:0 0 12px; }
.support-taxnote .chip{
  display:inline-block;
  background:#f1f5f9;
  color:#475569;
  border-radius:6px;
  padding:4px 10px;
  font-size:13px;
  font-weight:600;
}

/* 見出し・バッジ */
.support-wrap .support-badge{
  display:inline-block;
  margin:8px 0 10px;
  padding:6px 12px;
  border-radius:999px;
  background:#eff6ff;
  color:#1d4ed8;
  border:1px solid #bfdbfe;
  font-weight:700;
  font-size:clamp(12px,1.8vw,14px);
}
.support-wrap .support-title{
  margin:0 0 10px;
  font-weight:800;
  letter-spacing:.02em;
  font-size:clamp(22px,3.6vw,34px);
  line-height:1.3;
}
.support-wrap .support-sublead{
  margin:-6px 0 20px;
  font-size:13px;
  color:#6b7280;
}
.support-wrap .icon-main{ font-size:1.2em; line-height:1; }

/* 料金カード（白＋薄影） */
.support-wrap .card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  padding:20px;
}
.support-wrap .card.narrow{
  max-width:640px;
  margin:0 auto 28px;
}

/* 点線ボックス（料金小枠） */
.support-wrap .dashed{
  border:1px dashed #e5e7eb;
  border-radius:12px;
  padding:14px;
}
.support-wrap .label-muted{
  color:#6b7280;
  font-size:clamp(12px,1.8vw,14px);
}
.support-wrap .value-lg{
  font-weight:800;
  font-size:clamp(20px,3vw,24px);
}
.support-wrap .value-md{
  font-weight:800;
  font-size:clamp(16px,2.6vw,18px);
}
.support-wrap .sub-muted{
  color:#6b7280;
  font-size:12px;
  display:block;
  line-height:1.6;
}
.support-wrap .ok{ background:#f0fdf4; }
.support-wrap .ok .value-accent{ color:#16a34a; }

/* セクション見出し（余白広め） */
.support-wrap .sec{
  margin:48px 0 28px;
}
.support-wrap .card + .sec{
  margin-top:64px;
}
.support-wrap .sec h2{
  margin:0 0 10px;
  font-weight:700;
  font-size:clamp(18px,2.6vw,28px);
  line-height:1.35;
  display:flex;
  align-items:center;
  gap:8px;
}

/* 3カードグリッド（作業範囲） */
.support-wrap .grid-3{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;
}
.support-wrap .grid-3 .panel{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

/* 進行フロー */
.support-wrap .flow{
  margin:0;
  padding:0;
  list-style:none;
  font-size:clamp(14px,2vw,18px);
  color:#222;
}
.support-wrap .flow li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin:0 0 8px;
}
.support-wrap .flow li .no{
  min-width:1.8em;
  text-align:center;
  font-weight:700;
}

/* 注意帯（今は未使用だけど汎用で残し） */
.support-wrap .notice{
  background:#fff7ed;
  border-left:5px solid #fdba74;
  padding:12px 16px;
  border-radius:8px;
}
.support-wrap .notice strong{ color:#9a3412; }

/* CTAボタン */
.support-wrap .btn-primary{
  display:inline-block;
  text-decoration:none;
  background:#2563eb;
  color:#fff;
  font-weight:800;
  border-radius:12px;
  padding:14px 20px;
  font-size:clamp(15px,2.2vw,18px);
  box-shadow:0 6px 18px rgba(37,99,235,.18);
}

/* プラン比較（スクロールラッパ） */
.support-wrap .table-wrap{
  margin:clamp(20px,3vw,36px) 0;
  padding-top:24px;
  border-top:1px solid #e5e7eb;
  overflow-x:auto;
}

/* 比較表 */
.support-wrap .compare-table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
}
.support-wrap .compare-table th,
.support-wrap .compare-table td{
  padding:14px 16px;
  border-bottom:1px solid #e5e7eb;
  vertical-align:middle;
}
.support-wrap .compare-table thead th{
  background:#f8fafc;
  text-align:center;
  font-weight:800;
}
.support-wrap .compare-table tbody th{
  text-align:left;
  font-weight:700;
  white-space:nowrap;
  width:30%;
}
.support-wrap .compare-table tbody td{
  text-align:center;
  width:35%;
}
.support-wrap .compare-table small{
  display:block;
  margin-top:4px;
  color:#6b7280;
  font-size:12px;
  line-height:1.6;
}

/* 表下の脚注 */
.support-wrap .table-notes{
  margin:10px 2px 0;
  padding-top:16px;
  border-top:1px solid #e5e7eb;
  color:#6b7280;
  font-size:13px;
  line-height:1.7;
}

/* 小画面向け微調整 */
@media (max-width:560px){
  .support-wrap .compare-table th,
  .support-wrap .compare-table td{
    padding:12px;
  }
}




/* ===========================================================
古賀のCSS END
=========================================================== */





 .toggle-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 60px;
  justify-content: center;
}
.view-btn {
  flex: 1;
  padding: 10px 0;
  border: none;
  border-radius: 9999px;
  font-weight: 600;
  cursor: pointer;
  background: #666;
  color: #fff;
  transition: background 0.25s, transform 0.18s ease;
  max-width: 250px;
}
.view-btn.active {
  background: #2563eb; /* アクティブ青 */
}
.view-btn:active {
  transform: translateY(1px);
}

/* ===== デバイス枠 ===== */
.device-frame {
 width:100%;
  max-width: 1000px;
  height: 750px;
  border-radius: 10px;
  background: #999;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
  transition: width .42s cubic-bezier(.2,.8,.2,1);
  position: relative;
  box-shadow: 0 10px 24px rgba(2,6,23,.25);
}
.viewport {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 8px;
  overflow-y: auto;
  overflow-x: hidden;
}
.viewport img {
  display: block;
  width: 100%;
  height: auto;
}
.img-sp { display: none !important;}

/* “うねっ”としたアニメーション */
@keyframes responsive-wiggle {
  0%   { transform: scaleX(1) scaleY(1); border-radius: 10px; }
  20%  { transform: scaleX(.985) scaleY(1.01); border-radius: 12px; }
  45%  { transform: scaleX(1.008) scaleY(.992); border-radius: 9px; }
  70%  { transform: scaleX(.997) scaleY(1.003); border-radius: 10.5px; }
  100% { transform: scaleX(1) scaleY(1); border-radius: 10px; }
}

/* スマホ表示状態 */
.case-card.is-sp .device-frame {
width:100%;
  max-width: 420px;
  animation: responsive-wiggle .65s ease both;
  margin: 0 auto;
}
.case-card.is-sp .img-pc { display: none !important }
.case-card.is-sp .img-sp { display: block !important; }

/* ===== リンク ===== */

.case-more {
  text-align: center;
  margin-top: 80px;
  border: solid 1px #ccc;
  background-color: #efefef;
  border-radius: 10px;
}
.case-more__link {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
  display: block;
  padding: 20px 10px;
}
.case-more__link:hover { text-decoration: underline; }
.case-more__link::after { content: "↗"; font-size: 14px; }




.mokuji-wrap {
  background-color: #f8f8f8;
  padding: 20px;
}

ol.mokuji li {
  border-bottom: solid 1px #ccc;
}

ol.mokuji ol li:last-child {
  border: none;
}

ol.mokuji li a {
  display: block;
  padding: 10px 0;
  text-decoration: none;
  color: #333;
}