/* ================================================================ common.css — NetPrompt 全ページ共通スタイル 読み込み: 全ページの で ================================================================ */ :root { --navy: #0a1f44; --navy-mid: #112960; --accent: #3b7dd8; --accent-b: #5b9bf0; --coral: #f26b4e; --teal: #0ea5c4; --gold: #c9a84c; --green: #22c55e; --warm: #fdf8f2; --off: #f5f7fb; --dark: #0d1c35; --mid: #4a5772; --bd: #e2e8f0; } *{box-sizing:border-box;margin:0;padding:0;word-break: break-all;} body{font-family:'Noto Sans JP',sans-serif;color:var(--dark);background:#fff;overflow-x:hidden} body.page-inner{background:#fff} .clearfix:after,.clearfix:before,.row:after,.row:before{display:table;content:" "} .clearfix:after,.row:after{clear:both} /* ===== KEYFRAMES ===== */ @keyframes fadeUp {from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeLeft {from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:translateX(0)}} @keyframes fadeRight{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:translateX(0)}} @keyframes scaleIn {from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}} @keyframes fadeIn {from{opacity:0}to{opacity:1}} @keyframes float {0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @keyframes pulseBt {0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(242,107,78,.5)}70%{transform:scale(1);box-shadow:0 0 0 14px rgba(242,107,78,0)}100%{transform:scale(.95);box-shadow:0 0 0 0 rgba(242,107,78,0)}} @keyframes pan { 0% { transform: scale(1.00) translate(0px, 0px); } 33% { transform: scale(1.06) translate(-12px, -4px); } 66% { transform: scale(1.10) translate( 10px, -6px); } 100% { transform: scale(1.00) translate(0px, 0px); } } @keyframes lineGrow {from{width:0}to{width:44px}} @keyframes sweep {0%{transform:translateX(-100%) skewX(-20deg)}100%{transform:translateX(300%) skewX(-20deg)}} @keyframes numCount {from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} .fade-up{animation:fadeUp .7s ease both} .fade-in{animation:fadeIn .7s ease both} .d1{animation-delay:.10s}.d2{animation-delay:.22s}.d3{animation-delay:.36s} .d4{animation-delay:.50s}.d5{animation-delay:.65s} /* ============================================== スクロールリビール 全バリアント：初期は opacity:0 .on クラスが付いたタイミングで animation 発火 ============================================== */ @keyframes rvUp {from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} @keyframes rvL {from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}} @keyframes rvR {from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}} @keyframes rvF {from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @keyframes rvLine{from{width:0}to{width:44px}} /* 初期：非表示（ヒーロー直下の要素は除く） */ .reveal,.reveal-l,.reveal-r,.reveal-s,.reveal-p,.reveal-b,.reveal-f{ opacity:0; } .sline{ width:0;display:block;height:3px;border-radius:2px; background:linear-gradient(90deg,var(--accent),var(--gold)); } /* .on が付いたら全バリアント共通：ふわっと上昇フェードイン */ .reveal.on,.reveal-s.on,.reveal-p.on,.reveal-b.on,.reveal-f.on{ animation:rvF 1.1s cubic-bezier(.22,1,.36,1) both; } .reveal-l.on{animation:rvL 1.1s cubic-bezier(.22,1,.36,1) both} .reveal-r.on{animation:rvR 1.1s cubic-bezier(.22,1,.36,1) both} .sline.on {animation:rvLine 1.0s cubic-bezier(.22,1,.36,1) forwards} /* 遅延 */ .rd1{animation-delay:.08s}.rd2{animation-delay:.22s} .rd3{animation-delay:.37s}.rd4{animation-delay:.52s} .rd5{animation-delay:.68s}.rd6{animation-delay:.84s} /* ===== HEADER ===== */ header{position:fixed;inset:0 0 auto 0;z-index:300;width:100%;background:rgba(10,31,68,.97);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.07);transition:box-shadow .3s,transform .35s cubic-bezier(.4,0,.2,1)} header.hide{transform:translateY(-100%)} header.scr{box-shadow:0 4px 32px rgba(0,0,0,.3)} .hi{max-width:1200px;margin:0 auto;padding:0 28px;height:66px;display:flex;align-items:center;justify-content:space-between} /* Logo */ .lw{display:flex;align-items:center;gap:10px;text-decoration:none} /* ロゴ枠: 126×138px 実寸 → ヘッダー内 h:46px 基準で表示 */ .lph{ width:42px;height:46px;flex-shrink:0; display:flex;align-items:center;justify-content:center; overflow:hidden; } .lph span{font-family:'DM Sans',sans-serif;font-size:.42rem;color:rgba(255,255,255,.35);text-align:center;line-height:1.4} /* ロゴ画像が入ったとき */ .lph img{width:42px;height:46px;object-fit:contain;object-position:center;display:block} .lt{font-family:'DM Sans',sans-serif;font-weight:700;font-size:1.3rem;letter-spacing:-.02em;color:#fff} .lt em{font-style:normal;color:#fff} /* Desktop nav */ .dn{display:flex;align-items:center;gap:26px} .nl{font-size:.77rem;color:rgba(255,255,255,.76);text-decoration:none;padding:5px 2px;position:relative;transition:color .22s;letter-spacing:.03em} .nl::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1.5px;background:var(--accent-b);transition:width .26s} .nl:hover{color:#fff}.nl:hover::after{width:100%} .ncta{display:inline-block;padding:7px 18px;background:var(--coral);color:#fff;border-radius:5px;font-size:.77rem;font-weight:500;letter-spacing:.04em;text-decoration:none;transition:background .22s,transform .18s} .ncta:hover{background:#e05540;transform:translateY(-1px)} /* Dropdown */ .ni{position:relative;padding:22px 0;margin:-22px 0} .ni>.nl{display:inline-flex;align-items:center;gap:5px} .chv{display:inline-block;width:7px;height:7px;border-right:1.5px solid rgba(255,255,255,.5);border-bottom:1.5px solid rgba(255,255,255,.5);transform:rotate(45deg) translateY(-2px);transition:transform .22s,border-color .22s;margin-top:1px} .ni:hover .chv{transform:rotate(-135deg) translateY(-2px);border-color:#fff} /* --- ヘッダー・ドロップダウンメニューの幅広化 --- */ .dd { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-6px); /* ★ここを 196px からお好みの幅に変更してください */ min-width: 240px; background: rgba(6, 18, 48, .97); border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; padding: 8px 0; /* 上下の余白も少し広げるとゆったりします */ box-shadow: 0 18px 52px rgba(0, 0, 0, .45); backdrop-filter: blur(16px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, transform .2s, visibility .2s; z-index: 400; } /* 矢印（三角）の位置調整：既存のままでOK */ .dd::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 11px; height: 11px; background: rgba(6, 18, 48, .97); border-top: 1px solid rgba(255, 255, 255, .1); border-left: 1px solid rgba(255, 255, 255, .1); } .ni:hover .dd { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .dd ul { list-style: none; margin: 0; padding: 0; } .dd ul li+li { border-top: 1px solid rgba(255, 255, 255, .05); } /* リンクエリア：幅を広げた分、クリックしやすく調整 */ .dd ul li a { display: block; padding: 12px 24px; /* 左右の余白を少し増やしました */ font-size: .85rem; /* 文字サイズを .79 から少し上げると視認性が良くなります */ color: rgba(255, 255, 255, .7); text-decoration: none; transition: background .16s, color .16s, padding-left .16s; } .dd ul li a::after { display: none !important; } .dd ul li a:hover { background: rgba(59, 125, 216, .18); color: #fff; padding-left: 30px; /* ホバー時の動きを少し強調 */ } /* Hamburger */ #hbg{cursor:pointer;display:none;flex-direction:column} #hbg span{display:block;width:22px;height:2px;background:#fff;margin:5px 0;transition:all .3s} #hbg.op span:nth-child(1){transform:translateY(7px) rotate(45deg)} #hbg.op span:nth-child(2){opacity:0} #hbg.op span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} #mmenu{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(8,22,56,.98);border-top:1px solid rgba(255,255,255,.07);padding:14px 24px 22px;flex-direction:column} #mmenu.op{display:flex} #mmenu .ml{font-size:.9rem;color:rgba(255,255,255,.84);text-decoration:none;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07);display:block} #mmenu .ms{padding-left:14px} #mmenu .ms a{font-size:.8rem;color:rgba(255,255,255,.52);text-decoration:none;padding:4px 0;display:block} /* ticker CSS 削除済 */ /* ===== FOOTER ===== */ footer{background:var(--navy);color:rgba(255,255,255,.6)} .fl{font-family:'DM Sans',sans-serif;font-weight:700;font-size:1.15rem;color:#fff} .fl em{font-style:normal;color:rgba(255,255,255,.9)} footer a{color:rgba(255,255,255,.52);text-decoration:none;font-size:.8rem;transition:color .2s} footer a:hover{color:rgba(255,255,255,.9)} .fh{font-size:.72rem;font-weight:600;color:rgba(255,255,255,.8);letter-spacing:.1em;margin-bottom:14px;text-transform:uppercase} .fh a { color: inherit; text-decoration: none; font-size: inherit; font-weight: inherit; transition: color .2s; display: block; } .fh a:hover { color: #fff; } #fgrid {grid-template-columns: 2fr 1fr 1fr 1fr 1fr !important;} /* ===== HEADER-DIVIDER ===== */ .hd-divider{margin-top:66px;height:3px;background:linear-gradient(90deg,#c8d2dc 0%,#e8edf2 20%,#b0bcc8 38%,#f0f4f8 50%,#a8b8c8 62%,#dce4ec 80%,#c0ccd8 100%);box-shadow:0 1px 4px rgba(0,0,0,.08);} /* ===== RESPONSIVE ===== */ @media(max-width:768px){ /* PCメニューは非表示 */ .dn { display: none !important; } /* ① ヘッダー内枠を基準点（relative）にし、右側にボタン用の安全地帯（60px）を確保 */ .hi { position: relative !important; padding-right: 60px !important; padding-left: 16px !important; } /* ② ハンバーガーメニューをFlexboxの並びから切り離し、右端に「絶対配置」で強制固定 */ #hbg { display: flex !important; position: absolute !important; top: 50% !important; right: 16px !important; /* 画面右端からピッタリ16pxの位置に強制ピン留め */ transform: translateY(-50%) !important; margin: 0 !important; padding: 0 !important; width: 44px !important; height: 44px !important; justify-content: center !important; align-items: center !important; } } /* ---- タブレット (〜860px) ---- */ @media(max-width:860px){ /* ブログスライダー：2枚見せ */ .bc{flex:0 0 calc(50% - 11px)} /* サービス大カード：2列 */ #svc-main{grid-template-columns:1fr 1fr !important} /* サービス小カード：2列 */ #svc-sub{grid-template-columns:1fr 1fr !important} /* お悩み：2列 */ #wc-grid{grid-template-columns:1fr 1fr !important} /* CTA：2列 */ #cta-grid{grid-template-columns:1fr 1fr !important} /* フッター：2列 */ #fgrid{grid-template-columns:1fr 1fr !important} /* セクション横パディング縮小 */ section[style*="padding:96px 28px"], section[style*="padding:88px 28px"]{padding-left:20px !important;padding-right:20px !important} } /* ---- スマートフォン (〜560px) ---- */ @media(max-width:560px){ /* ブログスライダー：1枚＋少し次が見える */ .bc{flex:0 0 88%} .sb{display:none} .sd{margin-top:14px} /* サービス大カード：1列・中央寄せ・幅90% */ #svc-main{ grid-template-columns: 1fr !important; padding:0 5% !important; } /* サービス小カード：2列 */ #svc-sub{ grid-template-columns: 1fr 1fr !important; gap:12px !important; } /* お悩み：1列・幅92% */ #wc-grid{ grid-template-columns: 1fr !important; padding:0 4% !important; } /* CTA：1列・幅92% */ #cta-grid{ grid-template-columns: 1fr !important; padding:0 4% !important; } /* フッター：1列 */ #fgrid{grid-template-columns:1fr !important;gap:28px !important} /* ヒーロー テキスト余白 */ .hero .hsub{font-size:.88rem} .sbar{width:100%} /* セクション横パディングをさらに縮小 */ section[style*="padding:96px 28px"], section[style*="padding:88px 28px"]{ padding-left:16px !important; padding-right:16px !important; padding-top:64px !important; padding-bottom:64px !important; } /* mc（サービス大カード）の内側padding調整 */ .mc-inner{padding:28px 24px 26px !important} /* ニュース行 折り返し対応 */ .ni-row{flex-wrap:wrap;gap:8px} .ni-t{width:100%} /* ヒーローのボタン縦並び */ .fade-up.d4{flex-direction:column !important} .bp,.bs{width:100%;justify-content:center} } /* ================================================================ 内部ページ共通レイアウト ================================================================ */ /* page-inner: 内部ページのbody背景は白 */ body.page-inner { background: #fff; } /* ページヘッダー（内部ページのタイトルエリア） */ .page-header { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%); padding: 52px 28px 48px; position: relative; overflow: hidden; } .page-header::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%233b7dd8' fill-opacity='0.04'%3E%3Cpath d='M0 0h40v40H0V0zm40 40h40v40H40V40z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 80px 80px; } .page-header-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; } .page-label { font-family: 'DM Sans',sans-serif; font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-b); display: block; margin-bottom: 10px; } .page-header h1 { font-size: clamp(1.6rem,4vw,2.4rem); font-weight: 700; color: #fff; line-height: 1.28; letter-spacing: -.01em; } .page-header p { margin-top: 10px; font-size: .9rem; color: rgba(255,255,255,.62); line-height: 1.9; } /* パンくず */ .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; } .breadcrumb a { font-size: .78rem; color: var(--accent-b); text-decoration: none; } .breadcrumb a:hover { color: #fff; } .breadcrumb .sep { font-size: .7rem; color: rgba(255,255,255,.4); } .breadcrumb span { font-size: .78rem; color: rgba(255,255,255,.5); } /* ---------------------------------------------------------------- 1カラムレイアウト ---------------------------------------------------------------- */ .layout-1col { max-width: 860px; margin: 0 auto; padding: 52px 28px 80px; } .layout-1col .main-content {} /* ---------------------------------------------------------------- 2カラムレイアウト（本文 + サイドバー） ---------------------------------------------------------------- */ .layout-2col { max-width: 1100px; margin: 0 auto; padding: 52px 28px 80px; display: grid; grid-template-columns: 1fr 280px; gap: 52px; align-items: start; } /* 本文エリア */ .prose h2 { font-size: 1.35rem; font-weight: 700; color: var(--navy); margin: 2.4em 0 .8em; padding-bottom: .5em; border-bottom: 2px solid var(--bd); } .blog-prose h2{border-bottom: none; } .prose h3 { font-size: 1.1rem; font-weight: 700; color: var(--navy); margin: 2em 0 .6em; padding-left: 12px; border-left: 3px solid var(--accent); } .prose p { font-size: .94rem; color: var(--dark); line-height: 1.9; margin-bottom: 1.4em; } .prose ul { margin: 1em 0 1.4em 1.2em; } .prose ul li { font-size: .94rem; color: var(--dark); line-height: 1.9; margin-bottom: .4em; } .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .eyecatch { width: 100%; border-radius: 12px; aspect-ratio: 16/9; object-fit: cover; margin-bottom: 36px; } /* 記事メタ */ .post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--bd); } .post-date { font-family: 'DM Sans',sans-serif; font-size: .8rem; color: var(--mid); } .post-cat { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: .7rem; font-weight: 600; background: rgba(59,125,216,.1); color: var(--accent); } /* サイドバー */ .sidebar-cta { background: linear-gradient(135deg, var(--navy), var(--navy-mid)); border-radius: 14px; padding: 24px 20px; text-align: center; margin-bottom: 24px; } .sidebar-cta h3 { font-size: .95rem; font-weight: 700; color: #fff; margin-bottom: 8px; line-height: 1.5; } .sidebar-cta p { font-size: .78rem; color: rgba(255,255,255,.62); line-height: 1.8; margin-bottom: 16px; } .sidebar-cta a { display: block; padding: 11px 20px; background: var(--coral); color: #fff; border-radius: 6px; font-size: .84rem; font-weight: 500; text-decoration: none; transition: background .22s; } .sidebar-cta a:hover { background: #e05540; } .sidebar-widget { background: #fff; border: 1.5px solid var(--bd); border-radius: 14px; overflow: hidden; margin-bottom: 24px; } .sidebar-widget-hd { padding: 14px 20px; background: var(--navy); display: flex; align-items: center; gap: 8px; } .sidebar-widget-hd span { font-family: 'DM Sans',sans-serif; font-size: .78rem; font-weight: 600; color: #fff; letter-spacing: .06em; } .sidebar-widget-body { padding: 18px 20px; } .sw-list { list-style: none; } .sw-list li + li { border-top: 1px solid var(--bd); } .sw-list li a, .sw-list li span { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; text-decoration: none; color: var(--dark); font-size: .84rem; transition: color .2s; } .sw-list li a:hover { color: var(--accent); } .sw-list li .cnt { font-family: 'DM Sans',sans-serif; font-size: .76rem; color: var(--mid); } /* タグクラウド */ .tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; } .tag-cloud a { display: inline-block; padding: 4px 12px; border: 1px solid var(--bd); border-radius: 100px; font-size: .75rem; color: var(--mid); text-decoration: none; transition: all .2s; } .tag-cloud a:hover { border-color: var(--accent); color: var(--accent); background: rgba(59,125,216,.05); } /* ページネーション */ .pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 52px; flex-wrap: wrap; } .page-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; font-family: 'DM Sans',sans-serif; font-size: .88rem; text-decoration: none; transition: all .2s; font-weight: 500; border: 1.5px solid var(--bd); color: var(--mid); background: #fff; } .page-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(59,125,216,.05); } .page-btn.current { background: var(--accent); color: #fff; border-color: var(--accent); } .page-btn.disabled { opacity: .35; pointer-events: none; } /* ================================================================ レスポンシブ（2カラム→1カラム） ================================================================ */ @media(max-width:860px) { .layout-2col { grid-template-columns: 1fr; gap: 36px; padding: 36px 20px 64px; } .sidebar { order: -1; } .sidebar-cta { display: none; } } @media(max-width:560px) { .layout-1col { padding: 36px 16px 60px; } .layout-2col { padding: 36px 16px 60px; } .page-header { padding: 40px 16px 36px; } } /* ================================================================ ハンバーガーメニュー 最強リセット（Flexboxバグ回避版） ================================================================ */ @media(max-width:768px){ /* ヘッダー内枠：右側にボタン用の安全地帯（60px）を強制確保 */ .hi { position: relative !important; padding-right: 60px !important; } /* 枠（#hbg）：Flexboxを捨てて、右端に絶対配置でピン留め */ #hbg { display: block !important; /* ← Flexboxを使わないのが最大のポイント */ position: absolute !important; top: 50% !important; right: 12px !important; /* 右端から12pxの位置に完全固定 */ transform: translateY(-50%) !important; width: 44px !important; height: 44px !important; background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; z-index: 9999 !important; } /* 3本線：枠内の左から10pxの座標に強制配置（絶対に右にはみ出さない） */ #hbg span { position: absolute !important; display: block !important; width: 24px !important; height: 2px !important; background: #fff !important; left: 10px !important; /* ここで横位置を固定 */ margin: 0 !important; padding: 0 !important; transition: all 0.3s ease-in-out !important; transform-origin: center center !important; } /* 通常時の3本線（上からの座標をピクセルで完全指定） */ #hbg span:nth-child(1) { top: 14px !important; transform: none !important; } #hbg span:nth-child(2) { top: 21px !important; opacity: 1 !important; } #hbg span:nth-child(3) { top: 28px !important; transform: none !important; } /* バッテン（X）になった時（中央の21pxに集めて回転） */ #hbg.op span:nth-child(1) { top: 21px !important; transform: rotate(45deg) !important; } #hbg.op span:nth-child(2) { opacity: 0 !important; } #hbg.op span:nth-child(3) { top: 21px !important; transform: rotate(-45deg) !important; } } .link-more {font-size: .82rem;color: var(--accent);text-decoration: none;font-weight: 500;display: inline-flex;align-items: center;gap: 4px;padding-bottom: 4px;position: relative;} .link-more::before {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 1px;background: rgba(59, 125, 216, 0.2); } .link-more::after {content: '';position: absolute;bottom: 0;left: 0;width: 0;height: 1.5px;background: var(--accent);transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1);} .link-more:hover::after {width: 100%;} .link-more svg { transition: transform 0.3s ease;} .link-more:hover svg {transform: translateX(3px);} ._cmsn_video{position:relative;width:100%;padding-top:56.25%;} ._cmsn_video iframe{position:absolute;top:0;right:0;width:100%;height:100%;} ._cmsn_video2{position:relative;width:100%;padding-top:125%;} ._cmsn_video2 iframe{position:absolute;top:0;right:0;width:100%;height:100%;} ._cmsn_ggmap{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;} ._cmsn_ggmap iframe,._cmsn_ggmap object,._cmsn_ggmap embed{position:absolute;top:0;left:0;width:100%;height:100%;} .youtube-responsive {width: 100%;max-width: 100%;aspect-ratio: 16 / 9;} .youtube-responsive iframe {width: 100%;height: 100%;border: none;}