/* profitllc.co.jp PCレイアウト＋プルダウン修正（2025-08-24）
既存サイトを崩さずPC表示だけ“上書き”する最小CSS。
設置：の一番最後に
*/
@media (min-width: 1024px) {
:root {
--container: 1120px;
--side-pad: 28px;
--lh: 1.9;
--gap: 24px;
}
html, body {
line-height: var(--lh);
letter-spacing: 0.02em;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
line-break: strict;
}
/* 横幅と左右余白を統一 */
.global-nav-in,
.site-header,
.main-body-in,
.section-in,
.site-footer-in {
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--side-pad);
box-sizing: border-box;
}
/* ===== ▼ プルダウン（ドロップダウン）修正 ▼ =====
想定マークアップ：
1) 親に position を与えて層を上げ、2) 子ULは absolute で重ねる、3) hover/focus-within で表示 */
.global-nav,
.global-nav-in {
position: relative;
z-index: 2000;
overflow: visible !important; /* 旧CSSではみ出しトリムされる対策 */
}
#menu {
display: flex;
gap: 20px;
align-items: center;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
#menu > li {
position: relative; /* 子ULの基準 */
list-style: none;
padding: 10px 12px; /* テキスト(例:「サービス」)がaタグでなくても当たり判定を持たせる */
white-space: nowrap;
}
#menu > li > a,
#menu > li > span,
#menu > li {
cursor: default;
}
/* 下層UL（第2階層） */
#menu > li > ul {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 220px;
margin: 0;
padding: 8px 0;
list-style: none;
background: #fff;
border: 1px solid rgba(0,0,0,.08);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,.12);
display: none;
z-index: 2100;
}
/* 3階層目以降（必要な場合のみ） */
#menu li ul li { position: relative; }
#menu li ul li ul {
position: absolute;
top: 0;
left: 100%;
min-width: 220px;
margin-left: 4px;
padding: 8px 0;
background: #fff;
border: 1px solid rgba(0,0,0,.08);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,.12);
display: none;
z-index: 2150;
}
/* 項目の見た目とホバー */
#menu li ul li a {
display: block;
padding: 10px 16px;
text-decoration: none;
color: inherit;
line-height: 1.5;
}
#menu li ul li a:hover {
background: rgba(0,0,0,.05);
}
/* 表示トリガー（マウス＆キーボード） */
#menu > li:hover > ul,
#menu > li:focus-within > ul {
display: block;
}
#menu li ul li:hover > ul,
#menu li ul li:focus-within > ul {
display: block;
}
/* 他の要素に隠れないようヘッダーも重ね優先度を上げる */
.site-header { position: relative; z-index: 1990; }
/* ===== ▲ プルダウン修正 ここまで ▲ ===== */
/* 文章と見出しの縦リズム */
p, li, dd { line-height: var(--lh); margin: 0.6em 0; }
h1, h2, h3, h4 { line-height: 1.35; margin: 1.2em 0 0.6em; }
/* 画像や埋め込みのはみ出し防止＋余白 */
img, video, iframe { max-width: 100%; height: auto; }
iframe, audio { display: block; margin: 12px 0; }
/* ヒーロー部分の見栄えと中央寄せ */
.main-image-in-text.wide {
min-height: 360px;
display: flex;
align-items: center;
background-position: center;
background-size: cover;
}
/* ヘッダーボックスの横並びと間隔 */
.header-box {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin: 12px 0;
}
/* バナーとカードのグリッド化 */
.banner-list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--gap);
}
.col3-wrap {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--gap);
}
/* ニュースカードの内側の余白 */
.news .news-item {
padding: 16px 20px;
border-radius: 8px;
}
/* FAQの読みやすさ（質問→答えの間隔） */
.qa-list dt { margin-top: 1.2em; }
.qa-list dd { margin-top: 0.3em; }
/* フッターナビの横並び整列 */
.site-footer-nav {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
}
@media (min-width: 1400px) {
:root { --container: 1200px; }
}
/* 表示枠（額縁）。16:9 で見せる例 */
.katsu-labo-media {
position: relative;
width: 100%;
aspect-ratio: 16 / 9; /* モバイルで扱いやすい比率 */
overflow: hidden;
}
/* 額縁の中の画像は全面フィット（歪みなし・必要分だけトリミング） */
.katsu-labo-media > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover; /* 重要：歪まずにカバー */
object-position: center; /* 見せたい中心を維持 */
}
/* 古いブラウザのフォールバック（aspect-ratio未対応） */
@supports not (aspect-ratio: 1) {
.katsu-labo-media {
height: 0;
padding-top: 56.25%; /* 16:9 = 9/16 * 100 */
}
.katsu-labo-media > img {
position: absolute;
}
}
/* 画面幅で見せ方を微調整（任意） */
@media (max-width: 480px) {
.katsu-labo-media { aspect-ratio: 4 / 3; } /* スマホ縦は少し縦長に */
}
/* --- Katsu Labo: モバイルの縦伸び修正 & 比率固定 --- */
.katsu-labo { margin: 0; }
.katsu-labo .katsu-labo-media{
position: relative;
overflow: hidden;
/* デフォルト比率（PC想定） */
aspect-ratio: 16 / 9;
}
/* 画像は枠いっぱい＝トリミング（歪ませない） */
.katsu-labo .katsu-labo-media > img{
width: 100%;
height: 100%;
display: block;
object-fit: cover; /* 歪み防止＋枠にフィット */
object-position: center;
}
/* モバイルは少し縦寄りに（見やすい比率&高さ制限） */
@media (max-width: 767px){
.katsu-labo .katsu-labo-media{
aspect-ratio: 4 / 3; /* 必要に応じて 3/2 や 1/1 に変更可 */
max-height: 60vh; /* 画面の6割より高くしない（任意） */
}
}
/* 古いブラウザ向けフォールバック（aspect-ratio未対応時） */
@supports not (aspect-ratio: 1 / 1){
.katsu-labo .katsu-labo-media{
height: auto;
}
.katsu-labo .katsu-labo-media::before{
content: "";
display: block;
padding-top: 56.25%; /* 16:9 = 9/16*100 */
}
@media (max-width: 767px){
.katsu-labo .katsu-labo-media::before{
padding-top: 75%; /* 4:3 = 3/4*100 */
}
}
.katsu-labo .katsu-labo-media > img{
position: absolute; inset: 0;
}
}
/* 念のためのリセット：どこかで height:100% が当たっている場合を無効化 */
.katsu-labo .katsu-labo-media > img{
max-width: none; /* テンプレ側のmax-width干渉対策（必要なら） */
}
/* === HERO：見やすく明るいカード化（他は触らない） === */
header .main-image-in-text .main-image-in-text-box{
/* 半透明の白パネルで背景をやわらげ、文字は濃いチャコール */
background: rgba(255,255,255,.88);
color: #233042; /* 真っ黒ではない落ち着いた濃紺グレー */
padding: clamp(16px, 2vw + 8px, 28px);
border-radius: 14px;
border: 1px solid rgba(0,0,0,.06);
box-shadow: 0 12px 28px rgba(0,0,0,.15);
max-width: min(760px, 96vw);
margin: 12px auto;
backdrop-filter: saturate(140%) blur(6px);
-webkit-backdrop-filter: saturate(140%) blur(6px);
}
/* 古い端末向けフォールバック（ぼかし未対応時は白を少し濃く） */
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
header .main-image-in-text .main-image-in-text-box{
background: rgba(255,255,255,.94);
}
}
/* タイトルの行分けをそのまま活かしつつ視認性UP */
header .hero-title{
margin: 0 0 .25em;
line-height: 1.25;
font-weight: 800;
letter-spacing: .01em;
font-size: clamp(22px, 3.4vw + .6rem, 44px);
}
header .hero-line{ display: block; }
/* 先頭行（キッカー）は少しだけ控えめに */
header .hero-kicker{ font-weight: 700; font-size: .96em; }
/* 「36年」にブランド寄りの鮮やかさを。下線でアクセント */
header .hero-accent{
color: #c81f2d; /* ボタン類の赤と相性の良いトーン */
background: linear-gradient(transparent 60%, rgba(200,31,45,.22) 60%);
padding: 0 .06em;
border-radius: 2px;
}
/* サブ行（社名）は落ち着いたグレーで読みやすく */
header .hero-sub{
margin: .1em 0 0;
font-weight: 700;
letter-spacing: .05em;
color: #4b5563;
font-size: clamp(14px, 1.2vw + .6rem, 18px);
}
/* モバイルは左右に少し余白を追加して圧迫感を軽減 */
@media (max-width: 480px){
header .main-image-in-text .main-image-in-text-box{ margin-inline: 16px; }
header .hero-title{ font-size: clamp(20px, 5.4vw + .5rem, 34px); }
}