/* 参考サイトの構成を踏まえた共通デザイン。 */
:root{--ink:#263744;--muted:#72808b;--line:#dfeaf2;--accent:#0099ff;--paper:#f6f6f6;--soft:#f6f6f6;--dark:#0099ff}
body{font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,Arial,sans-serif;letter-spacing:.08em}
.container{width:min(1148px,calc(100% - 64px))}
header{height:148px;background:var(--accent);border-bottom:1px solid rgba(255,255,255,.18)}
.header-inner{width:min(1180px,calc(100% - 64px))}
.logo{font-family:Arial,sans-serif;font-size:28px;font-weight:700;color:#fff;letter-spacing:.08em;z-index:31}
.logo small{font-size:9px;letter-spacing:.25em;margin-top:8px}
nav{display:none;position:fixed;inset:0;width:100%;height:100dvh;padding:140px 24px 60px;background:var(--accent);overflow:auto;z-index:30;flex-direction:column;justify-content:center;gap:28px}
nav.open{display:flex}
nav a{width:auto;color:#fff;font-size:18px;padding:12px;text-align:center}
nav a:after{background:#fff;bottom:0}
.menu-btn{display:block;z-index:31;width:50px;height:50px}
.menu-btn span,.menu-btn:before,.menu-btn:after{background:#fff;width:34px;height:2px}
.menu-btn:before{top:14px}.menu-btn span{top:24px}.menu-btn:after{top:34px}
.menu-btn.open:before,.menu-btn.open:after{top:24px}
body.menu-open{overflow:hidden}
.home header{position:absolute;top:0;left:0;width:100%;height:148px;background:transparent;border-bottom:0}
.hero{height:500px;background:linear-gradient(0deg,rgba(10,32,52,.48) 0%,rgba(10,32,52,.12) 42%,rgba(10,32,52,0) 75%),url("images/hero-desktop.jpg") center 38%/cover no-repeat,#0099ff;color:#fff}
.hero:before,.hero:after,.hero-visual,.hero-kicker,.hero-line,.scroll{display:none}
.hero-inner{align-items:flex-end;padding-bottom:72px;width:min(1180px,calc(100% - 64px))}
.hero-copy{margin:0;transform:none;width:100%}
.hero-copy h1{font-family:Oswald,"Arial Narrow",Arial,sans-serif;font-size:60px;line-height:1.3;letter-spacing:.025em;color:#fff;font-weight:400;text-shadow:0 2px 12px #173e5555}
.hero h1 span{font-size:.8em}.mobile-break{display:none}
.section,.section.soft,.content{background:var(--paper)}
.section{padding:80px 0}
.news-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:40px;background:linear-gradient(90deg,#0099ff 0%,#0099ff 33%,transparent 33%);padding:48px 0 48px 48px}
.section-head{display:block;color:#fff;margin:0}
.section-head h2,.contact h2,.content h2{font-family:Oswald,"Arial Narrow",Arial,sans-serif;font-weight:400}
.section-head h2{font-size:40px;line-height:1.3}
.section-head span{display:block;color:#fff;font-size:14px;margin-top:16px}
.news-list{border:0;align-self:start}
.news-row{grid-template-columns:115px minmax(0,1fr) 24px;gap:16px;background:#fff;border:0;border-radius:3px;padding:28px 30px;margin-bottom:16px;font-size:14px;line-height:1.8}
.news-row:last-child{margin-bottom:0}
.news-row:hover{padding-left:30px;background:#fff;box-shadow:0 4px 20px #0099ff10}
.news-row .arrow{color:#0099ff;transform:rotate(90deg);text-align:center}
.news-row:hover .arrow{transform:rotate(90deg)}
.news-row.expanded .arrow{transform:rotate(-90deg)}
.news-detail{grid-column:1/-1}
.section.soft{padding:0 0 80px}
.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;background:transparent;align-items:stretch}
.feature{display:block;background:#fff;padding:0;min-height:0;overflow:hidden}
.feature:hover{background:#fff;transform:translateY(-3px);box-shadow:0 8px 24px #0099ff14}
.feature-image{display:block;width:100%;height:auto;aspect-ratio:1.65;object-fit:cover;transition:transform .4s}
.feature:hover .feature-image{transform:scale(1.025)}
.feature-copy{padding:28px 24px 32px;position:relative}
.feature .num,.feature .circle{display:none}
.feature h3{font-size:20px;font-weight:400;margin:0 0 16px}
.feature p{font-size:13px;line-height:1.9;margin:0;color:#444}
.contact{display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:60px;text-align:left;padding:44px max(32px,calc((100% - 1180px)/2));background:var(--dark)}
.contact h2{font-size:60px;margin:0 0 20px;grid-column:1}
.contact p{color:#fff;font-size:13px;margin:0;line-height:2}
.contact a{grid-column:2;grid-row:1/3;align-self:center;margin:0;width:100%;height:76px;border:0;border-radius:50px;background:#ffffff;color:#006eae;font-size:16px;padding:0 45px 0 20px}
.contact a:hover{background:#e5f4ff;color:#006eae}
footer{background:var(--dark);color:#fff;padding:0 0 32px}
.footer-inner{width:min(1180px,calc(100% - 64px));font-size:11px}
.page-hero{background:var(--accent);border:0;color:#fff}
.page-hero .en{color:#fff}.content h2{color:#0099ff}
.visual-module,.step{background:#eaf5fd}.submit{background:#0099ff;border-radius:30px}
.backtop{border:0;border-radius:50%;background:#0099ff;color:#fff}.backtop:hover{background:#ffffff;color:#006eae}
@media(max-width:1024px){
 .hero{height:440px}.hero-copy h1{font-size:44px}.hero-inner{padding-bottom:65px}
 .news-layout{grid-template-columns:1fr;gap:24px;padding:32px;background:linear-gradient(90deg,#0099ff 40%,transparent 40%)}
 .section-head{display:flex;align-items:center;gap:20px}.section-head span{margin:0}
 .contact{column-gap:30px;grid-template-columns:minmax(0,1fr) 300px}
}
@media(max-width:640px){
 .container,.header-inner,.hero-inner,.footer-inner{width:calc(100% - 32px)}
 header,.home header{height:112px}.logo{font-size:21px}.logo small{font-size:7px}
 nav{padding:120px 24px 32px;justify-content:flex-start;gap:18px}nav a{font-size:16px}
 .hero{height:375px;background-image:linear-gradient(0deg,rgba(10,32,52,.55) 0%,rgba(10,32,52,.12) 50%,rgba(10,32,52,0) 85%),url("images/hero-mobile.jpg");background-position:center,55% center}
 .hero-inner{padding-bottom:35px}.hero-copy h1{font-size:36px;line-height:1.15;text-shadow:0 2px 10px #173e5577}.mobile-break{display:block}
 .section{padding:32px 0}.news-layout{padding:20px 16px;background:#0099ff;gap:22px}
 .section-head h2{font-size:30px}.section-head span{font-size:12px}
 .news-row,.news-row:hover{padding:18px 16px;grid-template-columns:minmax(0,1fr) 22px;gap:8px;font-size:12px;margin-bottom:10px}
 .news-row time{grid-column:1;grid-row:1}.news-row>span:not(.arrow){grid-column:1;grid-row:2}.news-row>.arrow{grid-column:2;grid-row:1/3}
 .feature-grid{grid-template-columns:1fr;gap:16px}.feature{display:grid;grid-template-columns:40% 60%}
 .feature-image{height:100%;min-height:160px;aspect-ratio:auto}.feature-copy{padding:20px 16px}.feature h3{font-size:16px;margin:0 0 12px}.feature p{font-size:11px}
 .section.soft{padding-bottom:40px}
 .contact{display:block;padding:30px 24px}.contact h2{font-size:38px;margin-bottom:16px}.contact p{font-size:12px}.contact a{margin-top:24px;height:60px;font-size:14px}
 .footer-inner{display:flex;gap:16px;flex-wrap:wrap;font-size:10px}footer{padding-bottom:24px}
}

/* 広い画面では横版、小さい画面では縦版のロゴを表示。 */
.logo{display:block;flex-shrink:0;line-height:0}
.logo picture{display:block;padding:8px 16px;background:transparent}
.logo img{display:block;width:280px;height:auto;object-fit:contain}
@media(max-width:640px){.logo picture{padding:4px 10px}.logo img{width:auto;height:92px;max-width:calc(100vw - 130px)}}

/* ニュース非表示時のメイン画像と紹介カードの間隔。 */
.home .hero + .section.soft{padding-top:80px}
@media(max-width:640px){.home .hero + .section.soft{padding-top:32px}}

.office-map{display:block;width:100%;height:420px;margin-top:28px;border:1px solid #dfeaf2;border-radius:8px;background:#eaf5fd}
@media(max-width:640px){.office-map{height:320px;margin-top:20px}}

/* 導入手順は横一列に表示し、小さい画面では縦に並べる。 */
.flow{grid-template-columns:repeat(8,minmax(0,1fr));gap:24px;padding:0;list-style:none}
.content .flow .step{position:relative;min-height:120px;padding:24px 10px;text-align:center;border-radius:6px;color:#29485b;font-size:14px;line-height:1.6}
.flow .step b{font-family:Oswald,Arial,sans-serif;font-size:13px;color:#0099ff;margin-bottom:14px}
.step-arrow{position:absolute;right:-22px;top:50%;transform:translateY(-50%);width:20px;color:#0099ff;font-size:23px;line-height:1}
@media(max-width:1100px){
 .flow{grid-template-columns:1fr;gap:30px}
 .content .flow .step{min-height:0;padding:20px 24px;text-align:left;display:flex;align-items:center;gap:24px}
 .flow .step b{margin:0;min-width:44px}
 .step-arrow{right:auto;left:50%;top:auto;bottom:-26px;transform:translateX(-50%) rotate(90deg)}
}

/* プライバシーポリシー本文と会社の連絡先の表示。 */
.privacy-content{max-width:900px}
.privacy-content section{margin-top:38px}
.privacy-content h3{color:#29485b}
.privacy-content a,.form label a{color:#006eae;text-decoration:underline;text-underline-offset:3px}
.privacy-content ul{padding-left:1.5em}
.privacy-details{display:grid;grid-template-columns:140px minmax(0,1fr);margin:20px 0;background:#edf6fc;border-radius:8px;padding:12px 24px;font-size:13px;line-height:1.9}
.privacy-details dt,.privacy-details dd{padding:12px 0;margin:0;overflow-wrap:anywhere}
.privacy-details dt{font-weight:500;color:#29485b}
@media(max-width:640px){.privacy-details{grid-template-columns:1fr;padding:16px 20px}.privacy-details dt{padding:8px 0 0}.privacy-details dd{padding:2px 0 12px}}

/* メイン画像の鮮やかさを維持し、カードとフォーカスの配色を抑える。 */
.hero{background-blend-mode:normal}
.feature-image{filter:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline-color:#0099ff}
::selection{background:#cceaff;color:#173e55}

/* 省エネコンサルティングのサービス紹介。 */
.consulting-intro{max-width:850px;margin-bottom:64px}
.content .consulting-label{font-size:11px;letter-spacing:.16em;color:var(--accent);margin:0 0 16px}
.consulting-intro h3{font-size:clamp(22px,3vw,32px);line-height:1.7;color:var(--ink)}
.content .consulting-heading{margin-top:0}

.form-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-status{min-height:2em}.form-status[data-state="error"]{color:#a33333}
.submit:disabled{opacity:.6;cursor:wait}

/* 青い領域でもキーボード操作の位置を明確に表示。 */
header a:focus-visible,header button:focus-visible,.contact a:focus-visible,footer a:focus-visible{outline-color:#fff}

/* メニュー表示中はロゴの青い文字が背景に埋もれないようにする。 */
body.menu-open .logo picture{background:#f7fbff;border-radius:8px;box-shadow:0 2px 12px rgba(10,52,80,.08)}

/* ==== AIB 独自調整（ロゴ可読性＋親会社との差別化） ==== */

/* 内ページのヘッダーは白背景。ロゴ（黒＋青）は白背景前提の配色のため */
body:not(.home) header{background:#fff;border-bottom:1px solid var(--line)}
body:not(.home) .menu-btn span,body:not(.home) .menu-btn:before,body:not(.home) .menu-btn:after{background:#0079c8}
body.menu-open .menu-btn span,body.menu-open .menu-btn:before,body.menu-open .menu-btn:after{background:#fff}

/* 内ページ上部の帯とContact帯: 単色→深い青へのグラデーション＋円弧の抜き */
.page-hero{background:linear-gradient(120deg,#0064b4 0%,#0099ff 80%);position:relative;overflow:hidden}
.page-hero:after{content:"";position:absolute;right:-70px;top:-130px;width:330px;height:330px;border-radius:50%;background:rgba(255,255,255,.08)}
.page-hero .container{position:relative}
.contact{background:linear-gradient(120deg,#0064b4 0%,#0099ff 85%)}

/* コンテンツ見出しにブランドの短いアンダーライン */
.content h2{position:relative;padding-bottom:14px}
.content h2:after{content:"";position:absolute;left:0;bottom:0;width:44px;height:3px;border-radius:2px;background:linear-gradient(90deg,#0099ff,#7fcaff)}

/* 角丸をそろえて柔らかく */
.feature{border-radius:12px}
.feature-image{border-radius:12px 12px 0 0}
.news-row,.visual-module,.step{border-radius:12px}
@media(max-width:640px){.feature{border-radius:12px}.feature-image{border-radius:12px 0 0 12px}}

/* フッターは濃紺にして全体を締める */
footer{background:#0b2e4f}

/* ==== メニュー画面: 青ベタ→白のすりガラスに ==== */
nav{background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
nav a{color:var(--ink);font-size:22px;font-weight:500;letter-spacing:.12em}
nav a:after{background:#0099ff;height:2px}
nav a:hover{color:#0099ff}
/* 開いている間の閉じるボタンとロゴ: 白背景用の色に */
body.menu-open .menu-btn span,body.menu-open .menu-btn:before,body.menu-open .menu-btn:after{background:#0079c8}
body.menu-open .logo picture{background:transparent;box-shadow:none}
@media(max-width:640px){nav a{font-size:18px}}

/* ==== Contact帯: 左寄せ巨大英字→中央揃え・日本語主役の構成に ==== */
.contact{display:block;text-align:center;padding:76px 24px;background:linear-gradient(160deg,#00a0ff 0%,#0080d8 55%,#0063b0 100%)}
.contact h2{font-size:14px;letter-spacing:.4em;color:#7fcaff;margin:0}
.contact h2:after{content:"お問い合わせ";display:block;font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;font-size:30px;font-weight:500;letter-spacing:.1em;color:#fff;margin-top:14px}
.contact p{max-width:560px;margin:20px auto 0}
.contact a{display:inline-flex;width:auto;min-width:300px;height:64px;margin-top:32px;padding:0 56px 0 32px;border-radius:50px}
@media(max-width:640px){
 .contact{padding:52px 20px}
 .contact h2:after{font-size:23px}
 .contact a{min-width:0;width:100%;max-width:340px;height:58px;margin-top:26px}
}

/* ==== Contact帯: PCは左見出し＋右ボタンの2カラム(スマホは中央揃えのまま) ==== */
@media(min-width:900px){
 .contact{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:64px;text-align:left;padding:64px max(32px,calc((100% - 1148px)/2))}
 .contact h2{grid-column:1}
 .contact p{grid-column:1;margin:16px 0 0;max-width:640px}
 .contact a{grid-column:2;grid-row:1/3;margin:0}
}