@charset "utf-8";
/* ============================================================
   i-ShareDX ヘッダー・フッター（2026-10-14 デザインの決まり 確定版に合わせた案）
   置き場所：/contents/assets/isharedx/v2/css/frame.css（今と同じ）
   - 旧デザインのページと一緒に読み込んでもぶつからないよう、クラス名・変数は「isdx-」で始める
   - 色・文字サイズ・余白の値は style.css の変数と同じ値（このファイルだけ読み込むページがあるため、ここにも書く）
   今からの変更点：
   - ヘッダーの「デモ・無料トライアル」を青 → オレンジ（主ボタンの色を全ページで1色に）
   - ヘッダーのボタンは主ボタン・副ボタンの小さい版（高さ40・文字15）
   - メニューの文字 15.5 → 15、角の丸み 8・10 → 6・12、フッターの文字 15.5・14 → 15・13
   ============================================================ */

@font-face{font-family:"isdx-yugo";src:local("Yu Gothic Medium"),local("YuGothic-Medium");font-weight:100 600}
@font-face{font-family:"isdx-yugo";src:local("Yu Gothic Bold"),local("YuGothic-Bold");font-weight:700 900}

.isdx-hd,.isdx-ft{
  --isdx-navy:#1F3F55;
  --isdx-navy-deep:#152736;
  --isdx-blue:#396E8E;
  --isdx-orange:#C9502A;
  --isdx-orange-dark:#B8461F;
  --isdx-ink:#1A2A38;
  --isdx-text:#4A6478;
  --isdx-line:#D0E2EE;
  --isdx-tint:#E3EEF5;
  --isdx-r-s:6px;
  --isdx-r-m:12px;
  --isdx-sh-hover:0 8px 24px rgba(31,63,85,.14);
  font-family:"isdx-yugo",YuGothic,"Yu Gothic","游ゴシック","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.isdx-hd *,.isdx-ft *{box-sizing:border-box}
.isdx-hd a,.isdx-ft a{text-decoration:none}

/* ── ヘッダー ── */
.isdx-hd{display:flex;align-items:center;gap:32px;padding:0 40px;height:72px;border-bottom:1px solid var(--isdx-line);background:#fff;position:relative;z-index:2;margin:0}
.isdx-logo{display:flex;align-items:center;flex:none}
.isdx-logo img{height:30px;width:auto;display:block}
.isdx-nav{display:flex;gap:32px;font-size:15px;font-weight:500;margin-left:auto;white-space:nowrap}
.isdx-nav a{color:var(--isdx-text);transition:color .15s}
.isdx-nav a:hover{color:var(--isdx-blue)}
.isdx-hdbtns{display:flex;gap:8px}

/* 現在地：<body> のクラスとリンクの目印クラスの組み合わせ */
.p-features .isdx-nav .isdx-nav-features,
.p-cases .isdx-nav .isdx-nav-cases,
.p-case .isdx-nav .isdx-nav-cases,
.p-pricing .isdx-nav .isdx-nav-pricing,
.p-faq .isdx-nav .isdx-nav-faq{color:var(--isdx-blue);font-weight:700}

/* ── ヘッダーのボタン（主ボタン・副ボタンの小さい版） ── */
.isdx-btn-p,.isdx-btn-s{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;white-space:nowrap;font-weight:700;font-size:15px;line-height:1;border-radius:var(--isdx-r-s);transition:background .2s,color .2s,border-color .2s}
.isdx-btn-p{background:var(--isdx-orange);color:#fff;border:1px solid var(--isdx-orange)}
.isdx-btn-p:hover{background:var(--isdx-orange-dark);border-color:var(--isdx-orange-dark);color:#fff}
.isdx-btn-s{background:#fff;color:var(--isdx-navy);border:1px solid var(--isdx-line)}
.isdx-btn-s:hover{border-color:var(--isdx-blue);color:var(--isdx-blue)}

/* ── フッター（紺・濃） ── */
.isdx-ft{background:var(--isdx-navy-deep);color:#fff;padding:48px 40px 24px;margin:0}
.isdx-ft-in{display:flex;justify-content:space-between;align-items:flex-start;max-width:1120px;margin:0 auto;gap:24px;flex-wrap:wrap}
.isdx-ft-logo img{height:26px;width:auto;display:block;background:#fff;border-radius:var(--isdx-r-s);padding:4px 8px;box-sizing:content-box}
.isdx-ft-nav{display:flex;gap:24px 64px;font-size:15px;flex-wrap:wrap}
.isdx-ft-col{display:flex;flex-direction:column;gap:12px}
.isdx-ft-col b{font-size:13px;font-weight:700;color:#fff;letter-spacing:.06em}
.isdx-ft-nav a{color:#C9D6E0}
.isdx-ft-nav a:hover{color:#fff}
.isdx-ft-bottom{max-width:1120px;margin:32px auto 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;font-size:13px;color:#C9D6E0;flex-wrap:wrap;gap:8px}
.isdx-ft-bottom a{color:#C9D6E0}
.isdx-ft-bottom a:hover{color:#fff}
.isdx-ft-tm{max-width:1120px;margin:8px auto 0;font-size:12px;color:#C9D6E0} /* 10-19 登録商標の一文 */

/* ヘッダーを画面上部に付いてくるようにする */
@media(min-width:761px){.isdx-hd{position:sticky;top:0;z-index:100}}

/* 1行に収まらない幅では、メニューを2段目に回す */
@media(max-width:1200px){
  .isdx-hd{flex-wrap:wrap;height:auto;padding:12px 24px;gap:8px 16px}
  .isdx-hdbtns{margin-left:auto}
  .isdx-nav{order:3;width:100%;margin-left:0;flex-wrap:wrap;gap:8px 32px}
}

/* ── 「お役立ち情報」のメニュー（形は今のまま。角の丸み・矢印を決まりに合わせた） ── */
.isdx-dd{display:flex;align-items:center}
.isdx-dd-btn{font:inherit;font-weight:inherit;color:var(--isdx-text);background:none;border:0;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:color .15s}
.isdx-dd-btn::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.isdx-dd-btn:hover{color:var(--isdx-blue)}
.isdx-dd-menu{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--isdx-line);border-bottom:1px solid var(--isdx-line);box-shadow:var(--isdx-sh-hover);padding:24px 40px 32px;z-index:110;white-space:normal}
.isdx-dd-menu::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:24px}
.isdx-dd-in{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.isdx-dd-menu a{display:flex;align-items:center;gap:16px;border:1px solid var(--isdx-line);border-radius:var(--isdx-r-m);padding:16px 24px 16px 16px;background:#fff;color:var(--isdx-ink);transition:border-color .15s,box-shadow .15s}
.isdx-dd-menu a:hover{border-color:var(--isdx-blue);box-shadow:var(--isdx-sh-hover)}
.isdx-dd-menu a::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--isdx-blue);border-top:2px solid var(--isdx-blue);transform:rotate(45deg)}
.isdx-dd-ico{flex:none;width:40px;height:40px;border-radius:999px;background:var(--isdx-tint);color:var(--isdx-blue);display:flex;align-items:center;justify-content:center}
.isdx-dd-ico svg{width:22px;height:22px}
.isdx-dd-txt{flex:1;min-width:0}
.isdx-dd-txt b{display:block;font-size:17px;font-weight:700;color:var(--isdx-navy)}
.isdx-dd-txt small{display:block;font-size:13px;color:var(--isdx-text);line-height:1.6;margin-top:4px}
.isdx-dd.open .isdx-dd-menu{display:block}
.isdx-dd.open .isdx-dd-btn{color:var(--isdx-blue)}
.isdx-dd.open .isdx-dd-btn::after{transform:translateY(2px) rotate(-135deg)}
@media(hover:hover){
  .isdx-dd:not(.is-closed):hover .isdx-dd-menu,.isdx-dd:not(.is-closed):focus-within .isdx-dd-menu{display:block}
  .isdx-dd:not(.is-closed):hover .isdx-dd-btn{color:var(--isdx-blue)}
  .isdx-dd:not(.is-closed):hover .isdx-dd-btn::after{transform:translateY(2px) rotate(-135deg)}
}
.p-column .isdx-dd-btn,.p-columns .isdx-dd-btn,.p-seminar .isdx-dd-btn,.p-download .isdx-dd-btn{color:var(--isdx-blue);font-weight:700}
.p-column .isdx-dd-menu .isdx-nav-column,.p-columns .isdx-dd-menu .isdx-nav-column,
.p-seminar .isdx-dd-menu .isdx-nav-seminar,.p-download .isdx-dd-menu .isdx-nav-download{border-color:var(--isdx-blue);background:var(--isdx-tint)}
@media(min-width:761px) and (max-width:1000px){
  .isdx-dd-menu{padding:24px}
  .isdx-dd-menu a{flex-direction:column;align-items:center;text-align:center;gap:8px;padding:16px 12px}
  .isdx-dd-menu a::after{display:none}
}

/* ── スマホ（760px以下）：ハンバーガーメニュー（今の作りのまま。スマホの決まりは別途） ── */
.isdx-burger{display:none}
.isdx-hd-menu{display:contents}
@media(max-width:760px){
  .isdx-hd{flex-wrap:nowrap;height:60px;padding:0 8px 0 16px;gap:12px;position:sticky;top:0;z-index:100}
  .isdx-logo img{height:26px}
  .isdx-burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:48px;height:48px;margin-left:auto;padding:0;background:none;border:0;cursor:pointer}
  .isdx-burger span{display:block;width:24px;height:2px;border-radius:2px;background:var(--isdx-navy);transition:transform .2s,opacity .2s}
  .isdx-hd.sp-open .isdx-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .isdx-hd.sp-open .isdx-burger span:nth-child(2){opacity:0}
  .isdx-hd.sp-open .isdx-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .isdx-hd-menu{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--isdx-line);border-bottom:1px solid var(--isdx-line);box-shadow:var(--isdx-sh-hover);padding:4px 16px 24px;max-height:calc(100vh - 60px);overflow-y:auto}
  .isdx-hd.sp-open .isdx-hd-menu{display:block}
  .isdx-hd-menu .isdx-nav{display:flex;flex-direction:column;gap:0;width:auto;margin:0;font-size:17px;white-space:normal}
  .isdx-hd-menu .isdx-nav>a{display:flex;align-items:center;justify-content:space-between;padding:16px 8px;border-bottom:1px solid var(--isdx-line);color:var(--isdx-ink)}
  .isdx-hd-menu .isdx-nav>a::after{content:"";width:8px;height:8px;border-right:2px solid var(--isdx-blue);border-top:2px solid var(--isdx-blue);transform:rotate(45deg)}
  .isdx-hd-menu .isdx-dd{display:block;padding:16px 0;border-bottom:1px solid var(--isdx-line)}
  .isdx-hd-menu .isdx-dd-btn{pointer-events:none;display:block;padding:0 8px;margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--isdx-text)}
  .isdx-hd-menu .isdx-dd-btn::after{display:none}
  .isdx-hd-menu .isdx-dd-menu{display:block;position:static;padding:0;border:0;box-shadow:none;background:none}
  .isdx-hd-menu .isdx-dd-menu::before{display:none}
  .isdx-hd-menu .isdx-dd-in{grid-template-columns:1fr;gap:8px}
  .isdx-hd-menu .isdx-dd-menu a{flex-direction:row;text-align:left;padding:12px;gap:12px}
  .isdx-hd-menu .isdx-dd-menu a::after{display:block}
  .isdx-hd-menu .isdx-dd-txt small{display:none}
  .isdx-hd-menu .isdx-hdbtns{display:flex;flex-direction:column;gap:12px;margin:24px 0 0}
  .isdx-hd-menu .isdx-btn-p,.isdx-hd-menu .isdx-btn-s{display:flex;height:48px;font-size:17px}
  .isdx-ft{padding:32px 16px 24px}
  .isdx-ft-nav{display:grid;grid-template-columns:1fr 1fr;gap:24px;width:100%}
}