/* style.css : reset + base + index を結合（リクエスト削減のため） */
*,::after,::before{box-sizing:border-box}
blockquote,body,dd,dl,figcaption,figure,h1,h2,h3,h4,li,ol[class],p,ul[class]{margin:0}
body{min-height:100vh;scroll-behavior:smooth;text-rendering:optimizeSpeed;line-height:1.5;color:#444}
ol[class],ul[class]{padding:0;list-style:none}
a{text-decoration:none}
a:not([class]){text-decoration-skip-ink:auto}
img{max-width:100%;display:block}
article>*+*{margin-top:1em}
button,input,select,textarea{font:inherit}
@media (prefers-reduced-motion:reduce){
*{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}
}
:root{--main-color:rgb(53, 148, 227);--main-color-op07:rgba(53, 148, 227, 0.7);--comp-color:#ff642c;--gray-color:#999;--accent:var(--main-color);--accent-bg:#f2f8fd}
/* サービス別アクセントカラー（body に付与） */
body.svc-dev{--accent:#3594e3;--accent-bg:#f2f8fd}
body.svc-server{--accent:#1a94a3;--accent-bg:#eef7f8}
body.svc-consulting{--accent:#e0703a;--accent-bg:#fdf4ef}
body.svc-education{--accent:#3f9e6d;--accent-bg:#f0f8f4}
/* scroll-behavior は body ではなく html に指定しないと文書全体のスクロールに効かない
   （reset.css の body 側の指定は無効。prefers-reduced-motion では reset.css が打ち消す） */
html{font-family:"游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;font-size:1.2em;height:100%;scroll-behavior:smooth}
/* 高さは固定値にする。JSで測るとスクロール中の値とずれ、サブメニューが潜り込むため */
header{align-items:center;height:88px;padding:0 1em 0 2em;box-shadow:0 2px 6px -2px var(--gray-color);position:fixed;top:0;left:0;width:100%;background:#fff;z-index:1000;transition:height .3s ease,box-shadow .3s ease}
header.scrolled{height:56px;box-shadow:0 2px 8px rgba(0,0,0,0.15)}
header.scrolled #comp-title{font-size:0.9em}
header.scrolled #comp-title p{display:none}
header.scrolled .nav-menu__list{font-size:0.9em}
body{display:flex;flex-direction:column;min-height:100%}
main{flex:1;margin-top:88px}
footer{background:#1a3355;color:rgba(255,255,255,0.7);padding:2em;margin-top:auto}
table{width:100%}
table.nothead th{text-align:left}
td,th{padding:1em}
.en{font-family:Arial,Helvetica,sans-serif}
.emph{font-size:1.5em}
.gray-bg{background:#eef3f9}
.no-list-dec{padding-inline-start:0;list-style-type:none}
.flex-area{display:flex;justify-content:space-between}
#comp-title p{font-size:13px;font-weight:700}
.nav-menu{font-size:.7em}
.nav-menu li{display:inline-block;border:1px solid var(--gray-color);padding:.25em 1em;margin-right:1em}
.nav-menu__sublist{display:none}
.category-box h1,.title-box h1{text-align:center}
/* font ショートハンドは font-family 必須。指定漏れで無効だったので個別指定に直す */
.category-box .title-ruby,.title-box .title-ruby{display:block;color:var(--accent);font-size:.8em;font-weight:700;letter-spacing:.12em;text-align:center;margin-bottom:1em}
/* ===== 下層ページの見出し帯 ===== */
.title-box{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--accent-bg) 0%,#fff 70%);border-top:5px solid var(--accent);padding:3.4em 1em 2.8em;text-align:center}
/* 薄いドットのテクスチャ。主張しすぎない程度に */
.title-box:before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(53,148,227,.18) 1.5px,transparent 1.5px);background-size:24px 24px;opacity:.5;pointer-events:none}
.title-box>*{position:relative}
.title-box h1{font-size:1.9em;margin:0 0 .3em}
.title-box .title-ruby{margin-bottom:0}
.category-box{padding:3.5em 0 2.5em 0}
.category-box h2{font-size:1.25em;margin:2.2em 0 1.2em;position:relative}
.category-box h2:before{background-color:var(--accent);content:'';position:absolute;bottom:-.4em;left:0;height:3px;width:60px}
/* h3 は h2 の下線と紛らわしくならないよう、罫線ではなく角丸の四角で示す */
.category-box h3{position:relative;margin:1.6em 0 .5em;padding-left:1.3em;border:none;font-size:1.05em;color:#2b3a4a}
.category-box h3:before{content:'';position:absolute;left:0;top:.6em;width:.6em;height:.6em;background:var(--accent);border-radius:2px}
/* 1行が長すぎると読みにくいので本文幅を制限する */
.center-box{margin:0 auto;max-width:min(90%,820px)}
.center{text-align:center}
.desc-box{margin:1em 0;padding:1.5em 1.7em;background:#fff;border:1px solid rgba(53,148,227,0.1);border-radius:8px;box-shadow:0 4px 16px rgba(26,50,87,0.08)}
/* カード内は上下の余白を詰めて、周囲の margin と二重にならないようにする */
.desc-box h3{margin-top:0;color:var(--accent)}
.desc-box p:last-child{margin-bottom:0}
/* ===== ハンバーガーボタン（スマホのみ表示） ===== */
.nav-toggle{display:none;position:relative;width:44px;height:44px;padding:0;border:none;background:none;cursor:pointer;flex-shrink:0}
.nav-toggle span{position:absolute;top:50%;left:11px;width:22px;height:2px;margin-top:-1px;background:#333;transition:background .2s ease}
.nav-toggle span:before,.nav-toggle span:after{content:'';position:absolute;left:0;width:100%;height:2px;background:#333;transition:transform .25s ease}
.nav-toggle span:before{top:-7px}
.nav-toggle span:after{top:7px}
/* 開いている間は×印にする */
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span:before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:after{transform:translateY(-7px) rotate(-45deg)}
/* ドロップダウンメニュー */
/* flex + align-items で、枠線付きの項目と CONTACT ボタンの高さを揃える */
.nav-menu__list{display:flex;align-items:center;padding:0 2em}
.nav-menu__list > li{position:relative;padding:0.3em 0.8em}
.nav-menu__list > li > a{color:inherit;text-decoration:none}
.nav-menu__list > li:hover .nav-menu__sublist{display:block;opacity:1;visibility:visible;transform:translateY(0)}
.nav-menu__sublist{display:block;opacity:0;visibility:hidden;position:absolute;top:calc(100% + 10px);left:0;transform:translateY(-10px);background:#fff;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,0.1);min-width:140px;z-index:100;transition:all 0.2s ease;padding:0.4em 0}
.nav-menu__sublist li{display:block;padding:0;margin:0;white-space:nowrap}
.nav-menu__sublist li:hover{background:var(--main-color-op07)}
.nav-menu__sublist a{color:var(--base-color);text-decoration:none;display:block;padding:0.6em 1em;font-size:0.85em;transition:background 0.2s ease}
/* 画面端での位置調整 */
.nav-menu__list > li:last-child .nav-menu__sublist{left:auto;right:0}
/* サービスページ ヒーロー */
.service-hero{background:linear-gradient(135deg,var(--accent-bg) 0%,#fff 68%);border-top:5px solid var(--accent);padding:3.2em 0 2.8em}
.service-hero__inner{display:flex;align-items:center;gap:3em;max-width:80%;margin:0 auto}
.service-hero__text{flex:1}
.service-hero__text h1{font-size:2em;margin:0.2em 0 0.6em}
.service-hero__text p{line-height:1.8;color:#444}
.service-hero__ruby{display:block;color:var(--accent);font-size:0.8em;font-weight:bold;letter-spacing:0.1em}
.service-hero__img{width:320px;flex-shrink:0}
/* お問い合わせボタン */
.contact-btn{display:inline-block;background:var(--main-color);color:#fff;padding:0.8em 2em;border-radius:4px;text-decoration:none}
.contact-btn:hover{opacity:0.85}
.contact-section p+p{margin-top:2em}
/* ===== 余白・行間 ===== */
body{line-height:1.8}
header{line-height:1.5}/* 固定ヘッダーの高さを変えないため本文の行間は適用しない */
main p{margin-bottom:1em}
main p:last-child{margin-bottom:0}
.center-box>h2:first-child{margin-top:0}
.center-box+.center-box{margin-top:2.4em}
/* 本文中のリンク。ボタン等はクラスを持つので :not([class]) で除外する */
.center-box p a:not([class]){color:var(--accent);text-decoration:underline;text-underline-offset:.2em}
.center-box p a:not([class]):hover{opacity:.7}
/* ===== ヘッダーCTA ===== */
.nav-menu__list>li.nav-cta{border:none;padding:0;margin-right:0}
.nav-cta a{display:block;background:var(--main-color);color:#fff;padding:.55em 1.4em;border-radius:4px;transition:background .2s ease,transform .2s ease}
.nav-cta a:hover{background:#1f7bc4;transform:translateY(-1px)}
/* ===== 数字で見るディープネット ===== */
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5em;margin-top:2.5em;padding:0 1em}
.stats__item{flex:1 1 200px;max-width:260px;background:#fff;border:1px solid rgba(53,148,227,.12);border-radius:8px;box-shadow:0 4px 16px rgba(26,50,87,.08);padding:2em 1em;text-align:center}
.stats__num{display:block;color:var(--main-color);font-family:Arial,Helvetica,sans-serif;font-size:2.8em;font-weight:700;line-height:1.1}
.stats__unit{font-size:.36em;margin-left:.2em}
.stats__label{display:block;margin-top:.6em;font-weight:700;font-size:.9em}
.stats__note{display:block;margin-top:.4em;font-size:.75em;color:var(--gray-color)}
/* ===== フッター直前のCTAバンド ===== */
.cta-band{background:var(--main-color);color:#fff;padding:4em 2em;text-align:center}
.cta-band h2{color:#fff;font-size:1.4em;margin:0 0 .6em}
.cta-band h2:before{content:none}
.cta-band p{color:rgba(255,255,255,.9);margin-bottom:2em}
.cta-band p:last-of-type{margin-bottom:0}
.cta-band .contact-btn{background:#fff;color:var(--main-color);font-weight:700;padding:.9em 2.6em;box-shadow:0 4px 14px rgba(0,0,0,.18);transition:transform .2s ease,box-shadow .2s ease}
.cta-band .contact-btn:hover{opacity:1;transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.24)}
.cta-band__sub{display:block;margin-top:1.4em;font-size:.8em;color:rgba(255,255,255,.9)}
.cta-band__sub a{color:#fff;text-decoration:underline}
/* ===== 本文の読みやすさ ===== */
/* 結論を先出しするリード文。各見出しの直下に置く。
   h2 に下線があるため、こちらに罫線を付けると線が重なって見えるので付けない */
.lead{font-size:1.12em;font-weight:700;line-height:1.9;color:#2b3a4a;margin-bottom:1.6em}
/* ===== チェックリスト ===== */
.check-list{list-style:none;padding-left:0;margin:1.2em 0}
.check-list li{position:relative;padding:.5em 0 .5em 1.9em}
.check-list li:before{content:'';position:absolute;left:.35em;top:1.15em;width:.5em;height:.28em;border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:rotate(-45deg)}
/* お悩み提示用。カード状にまとめる */
.problem-box{background:var(--accent-bg);border-radius:8px;padding:1.6em 1.8em;margin:1.4em 0}
/* 背景色で既に区切られているので、見出しの四角マーカーは付けない */
.problem-box h3{margin:0 0 .6em;padding:0;border:none;font-size:1.05em;color:var(--accent)}
.problem-box h3:before{content:none}
.problem-box .check-list{margin:0}
/* ===== 本文脇のイラスト ===== */
.feature-figure{display:grid;grid-template-columns:1fr 250px;gap:2.4em;align-items:center;margin:1.4em 0}
.feature-figure>*{min-width:0}
.feature-figure .problem-box{margin:0}
@media screen and (max-width:768px){
.feature-figure{grid-template-columns:1fr;gap:1.4em}
.feature-figure img{max-width:200px;margin:0 auto}
}
/* ===== 番号付きステップ ===== */
.step-list{list-style:none;counter-reset:step;padding-left:0;margin:1.6em 0}
.step-list li{position:relative;counter-increment:step;padding:0 0 1.8em 3.6em}
/* 番号バッジ */
.step-list li:before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0;width:2.4em;height:2.4em;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border-radius:50%;font-family:Arial,Helvetica,sans-serif;font-size:.85em;font-weight:700;line-height:1}
/* 番号どうしを縦線でつなぐ（最後の項目には引かない） */
.step-list li:after{content:'';position:absolute;left:1.02em;top:2.3em;bottom:.4em;width:2px;background:rgba(0,0,0,.09)}
.step-list li:last-child{padding-bottom:0}
.step-list li:last-child:after{content:none}
/* 番号バッジがあるので四角マーカーは付けない */
.step-list h3{margin:.2em 0 .3em;padding:0;border:none;font-size:1.05em}
.step-list h3:before{content:none}
.step-list p{margin:0;font-size:.95em}
/* ===== よくあるご質問（JSなしで開閉） ===== */
.faq{margin:1.4em 0}
.faq details{background:#fff;border:1px solid rgba(26,50,87,.12);border-radius:8px;margin-bottom:.8em}
.faq summary{position:relative;cursor:pointer;list-style:none;padding:1.1em 3em 1.1em 2.8em;font-weight:700;line-height:1.7}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:'Q';position:absolute;left:1.1em;top:1.05em;color:var(--accent);font-family:Arial,Helvetica,sans-serif;font-weight:700}
/* 開閉マーク */
.faq summary:after{content:'';position:absolute;right:1.4em;top:1.5em;width:.5em;height:.5em;border-right:2px solid var(--gray-color);border-bottom:2px solid var(--gray-color);transform:rotate(45deg);transition:transform .2s ease}
.faq details[open] summary:after{transform:rotate(-135deg)}
.faq summary:hover{background:var(--accent-bg)}
.faq__body{position:relative;padding:0 1.6em 1.3em 2.8em;font-size:.95em}
.faq__body:before{content:'A';position:absolute;left:1.1em;top:0;color:var(--gray-color);font-family:Arial,Helvetica,sans-serif;font-weight:700}
/* ===== 企業理念ページ ===== */
/* トップと同じ写真を薄く敷いて、文字を主役にする */
.statement{position:relative;background:url(/img/main.jpg) center center/cover no-repeat;background-image:image-set(url(/img/main.webp) type("image/webp"),url(/img/main.jpg) type("image/jpeg"));padding:5em 0 4.5em;text-align:center}
/* 文字を読ませたいので、写真はほぼ気配だけ残す濃さにする */
.statement:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.955) 0%,rgba(238,243,249,.975) 100%)}
.statement>*{position:relative}
.statement__label{display:block;color:var(--accent);font-size:.8em;font-weight:700;letter-spacing:.12em;margin-bottom:1.2em}
.statement h2{position:relative;font-size:1.75em;line-height:1.6;color:#1a3355;margin:0 0 2.4em}
/* 見出しの下に短い罫を中央寄せで置く */
.statement h2:after{content:'';position:absolute;left:50%;bottom:-1.1em;width:48px;height:3px;background:var(--accent);transform:translateX(-50%)}
.statement p{max-width:640px;margin:0 auto 1.2em}
.statement p:last-child{margin-bottom:0}
/* ===== 会社概要の表 ===== */
/* 角丸を効かせるため collapse ではなく separate を使う */
.company-table{border-collapse:separate;border-spacing:0;background:#fff;border:1px solid rgba(26,50,87,.1);border-radius:8px;overflow:hidden;box-shadow:0 4px 16px rgba(26,50,87,.08)}
.company-table th,.company-table td{text-align:left;vertical-align:top;border-bottom:1px solid rgba(26,50,87,.1)}
.company-table tr:last-child>*{border-bottom:none}
.company-table th{background:var(--accent-bg);color:#2b3a4a;font-weight:700;white-space:nowrap}
.company-table ul{margin:0}
.company-table li+li{margin-top:.4em}
/* ===== 行動指針の一覧 ===== */
.value-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2em;counter-reset:value;margin-top:1.8em}
.value-list .desc-box{position:relative;counter-increment:value;margin:0;padding-top:2.8em}
/* 背景に薄く番号を置く */
.value-list .desc-box:before{content:counter(value,decimal-leading-zero);position:absolute;top:.55em;left:1.7em;color:var(--accent);opacity:.32;font-family:Arial,Helvetica,sans-serif;font-size:1.7em;font-weight:700;line-height:1}
/* 番号があるので四角マーカーは重複させない */
.value-list h3{margin-top:0;padding-left:0}
.value-list h3:before{content:none}
/* ===== セクション内ナビ（常時表示のサブメニュー） ===== */
/* 固定ヘッダーの真下に貼り付く。ヘッダーは縮むので --header-h-scrolled を使う */
.section-nav{position:sticky;top:56px;z-index:900;background:rgba(255,255,255,.96);border-bottom:1px solid rgba(26,50,87,.1);box-shadow:0 2px 8px -4px rgba(26,50,87,.25)}
@supports (backdrop-filter:blur(6px)){
.section-nav{background:rgba(255,255,255,.85);backdrop-filter:blur(6px)}
}
.section-nav ul{display:flex;max-width:min(92%,900px);margin:0 auto;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.section-nav ul::-webkit-scrollbar{display:none}
.section-nav li{flex-shrink:0}
.section-nav a{display:block;padding:1em 1.4em;font-size:.82em;color:#5a6b7d;white-space:nowrap;border-bottom:2px solid transparent;transition:color .2s ease,border-color .2s ease,background .2s ease}
.section-nav a:hover{color:var(--accent);background:var(--accent-bg)}
/* 表示中のセクションを示す */
.section-nav a.is-current{color:var(--accent);font-weight:700;border-bottom-color:var(--accent)}
/* 固定ヘッダーとサブメニューに隠れないようアンカー位置をずらす */
.category-box[id],.center-box[id]{scroll-margin-top:calc(56px + var(--nav-h,52px) + 1.5em)}
/* ===== スクロール連動フェードイン（JS有効時のみ） ===== */
.js-fade main>section,.js-fade .fade-up{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.js-fade main>section.is-visible,.js-fade .fade-up.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
.js-fade main>section,.js-fade .fade-up{opacity:1;transform:none}
}
@media screen and (max-width:768px){
.service-hero__inner{flex-direction:column;text-align:center}
.service-hero__img{width:180px}
.stats__item{padding:1.4em 1em}
.stats__num{font-size:2.2em}
.cta-band{padding:3em 1.2em}
}
@media screen and (max-width:768px){
header{height:64px;padding:0 1em}
header.scrolled{height:56px}
main{margin-top:64px}
.nav-toggle{display:block}
/* メニューはヘッダー直下に開くパネルにする */
.nav-menu{display:none;position:absolute;top:100%;left:0;width:100%;background:#fff;border-top:1px solid rgba(26,50,87,.1);box-shadow:0 10px 16px -10px rgba(0,0,0,.35);max-height:calc(100vh - 64px);overflow-y:auto;font-size:.85em}
.nav-menu.is-open{display:block}
.nav-menu__list{flex-direction:column;align-items:stretch;padding:0}
.nav-menu li{display:block;border:none;margin:0;padding:0}
.nav-menu__list>li{padding:.9em 1.4em;border-bottom:1px solid rgba(26,50,87,.08)}
/* 見出し以外のリンクは項目全体をタップ領域にする */
.nav-menu__list>li:not(.nav-cta)>a{display:block;margin:-.9em -1.4em;padding:.9em 1.4em}
/* タップでは hover が使えないので、サブメニューは常に開いた状態で並べる */
.nav-menu__sublist{display:block;opacity:1;visibility:visible;position:static;transform:none;background:none;box-shadow:none;border-radius:0;min-width:0;padding:.3em 0 0;margin-top:.5em;border-left:2px solid rgba(53,148,227,.25)}
.nav-menu__sublist li:hover{background:none}
.nav-menu__sublist a{padding:.55em 0 .55em 1em;font-size:1em}
.nav-menu__sublist a:hover{color:var(--main-color)}
.nav-menu__list>li.nav-cta{padding:1em 1.4em;border-bottom:none}
.nav-cta a{text-align:center;padding:.9em}
.center-box{max-width:95%}
.desc-box{margin:1em 0;padding:0.8em}
table.sidehead td,table.sidehead th,table.sidehead tr{display:block}
table.sidehead th{background-color:#f8f9fa}
}
@media screen and (min-width:769px){
table.nothead th{width:25%}
table.sidehead th{background-color:#f8f9fa}
.nav-menu{margin-left:auto}
}
/* WebP対応ブラウザは webp、非対応は jpg にフォールバック */
#main-pan{width:100%;min-height:480px;background:url(/img/main.jpg) center center/cover no-repeat;background-image:image-set(url(/img/main.webp) type("image/webp"),url(/img/main.jpg) type("image/jpeg"))}
.comp-desc{width:460px;min-height:480px;background-color:var(--main-color-op07);color:#fff;font-size:1.25em;padding:5em 2.4em 2.5em}
.comp-desc h1{font-size:1.2em;margin-bottom:.4em}
.hero-cta{margin-top:.8em;font-size:.85em}
.hero-cta a{display:inline-block;background:#fff;color:var(--main-color);font-weight:700;padding:.8em 2em;border-radius:4px;box-shadow:0 4px 14px rgba(0,0,0,.18);transition:transform .2s ease,box-shadow .2s ease}
.hero-cta a:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.24)}
.comp-desc span{color:var(--comp-color);font:1.25em bold}
/* サービス一覧: 枚数が変わっても割り切れるようグリッドで組む */
.service-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.6em;max-width:1200px;margin:2.5em auto 0;padding:0 1.5em}
/* サービスごとのアクセントカラー */
.category-box__item--dev{--accent:#3594e3;--accent-bg:#f2f8fd}
.category-box__item--server{--accent:#1a94a3;--accent-bg:#eef7f8}
.category-box__item--consulting{--accent:#e0703a;--accent-bg:#fdf4ef}
.category-box__item--education{--accent:#3f9e6d;--accent-bg:#f0f8f4}
.category-box__item{display:flex;flex-direction:column;margin:0;background:var(--accent-bg);padding:1.4em 1.2em;border:none;border-top:5px solid var(--accent);border-radius:6px;box-shadow:0 4px 16px rgba(26,50,87,0.08);transition:box-shadow .2s ease,transform .2s ease}
.category-box__item:hover{box-shadow:0 10px 26px rgba(26,50,87,0.16);transform:translateY(-3px)}
.category-box__item>div{display:flex;flex-direction:column;flex:1}
/* アイコンの縦横比がばらばらなので表示高さを揃える */
.category-box__item img{height:130px;width:auto;object-fit:contain;margin:0 auto}
.category-box__item h2{text-align:center;font-size:1.25em;color:var(--accent);margin:1em 0}
.category-box__item h2:before{content:none}
/* margin-top:auto でカードの高さに関係なくボタンを下端に揃える */
.page-link{margin:auto 0 0;padding-top:1.2em;text-align:right}
.page-link a{display:inline-flex;align-items:center;gap:.4em;background:#fff;color:var(--accent);border:1px solid var(--accent);border-radius:999px;font-size:.85em;font-weight:700;padding:.75em 1.5em;transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.page-link a:after{content:'→';transition:transform .2s ease}
.page-link a:hover{background:var(--accent);color:#fff;box-shadow:0 6px 14px rgba(26,50,87,.2)}
.page-link a:hover:after{transform:translateX(3px)}
/* ニュースは主役ではないので、見出しも余白も控えめにする */
.news{padding:2.8em 0 2.4em}
.news h1{font-size:1.45em}
/* 日付と本文を1行に並べる（dt=左列 / dd=右列） */
.news>dl{display:grid;grid-template-columns:auto 1fr;max-width:min(90%,760px);margin:1.6em auto 0}
.news>dl>dt{padding:.75em 1.6em .75em 0;border-bottom:1px dashed rgba(26,50,87,.2);color:var(--gray-color);font-family:Arial,Helvetica,sans-serif;font-size:.85em;white-space:nowrap}
.news>dl>dd{margin:0;padding:.75em 0;border-bottom:1px dashed rgba(26,50,87,.2);font-size:.9em}
@media screen and (max-width:768px){
.comp-desc{width:auto;min-height:0;padding:4em 1.5em 2.5em}
#main-pan{min-height:0}
}