/* v7.4 下層ページ用の追記(v74.css は改変しない) */
/* 下層ではbodyの文字色が濃色(#243b45)のため、暗い背景のモバイルナビの文字が沈む。
メニュー展開中のヘッダー(v74.css 1433行)と同じ明色を指定する */
body[data-subpage] #mobile-nav{color:#f1f1eb}
/* お問い合わせフォームの入力エラー表示(top-form.js が aria-invalid を付ける) */
.ip-form [aria-invalid="true"]{border-color:#a8503c!important}
.ip-form-status{min-height:1.3em;line-height:1.7}
/* ブログ記事内の画像・コードがはみ出さないようにする */
.ip-journal-body img{max-width:100%;height:auto}
.ip-journal-body pre,.ip-journal-body code{overflow-x:auto;max-width:100%}
/* ヒーローが100vw幅のため、縦スクロールバーがあるPC表示で横に約8pxはみ出す。clipで横スクロールを防ぐ */
#inner-site{overflow-x:clip}
/* 実績・サービス詳細: 案件名が長く、一覧ページ用の特大見出しだと4行に折り返すため縮小する(h1のまま) */
.ip-hero h1 .ip-detail-title{display:block;font-size:.62em;line-height:1.7}
/* 料金表の金額: 昔風数字のGeorgiaをやめ、見出しと同じ明朝系で数字が揃うNoto Serif JP(読み込み済み)にする */
#inner-site .ip-pricing td{font-family:'Noto Serif JP','Hiragino Mincho ProN','Yu Mincho',serif;font-variant-numeric:lining-nums tabular-nums;font-weight:400;letter-spacing:.03em}
/* ===== 改行位置と左右バランスの調整(2026-10 追加。v74.css は改変しない) ===== */
/* ①日本語を文節単位で折り返す(auto-phrase 非対応ブラウザでは無視され、従来どおりになる) */
#inner-site{line-break:strict;word-break:auto-phrase;overflow-wrap:break-word}
/* 見出しは v74.css が word-break:normal を直接指定しており、上の継承が効かないため明示する */
#inner-site :is(h1,h2,h3,h4,.ip-hero-h1){text-wrap:balance;word-break:auto-phrase;overflow-wrap:break-word}
#inner-site :is(p,li,dt,dd,summary,td,th,figcaption,blockquote){text-wrap:pretty}
/* 語句をまとめて折らせない(固有名詞・敬称などに使う) */
#inner-site .nowrap{display:inline-block;white-space:nowrap}
/* ②ヒーロー見出し: 約80pxの見出しで10文字の行が、コピー幅65%(約805px)に収まらず「考え/る。」と折れていた。
見出しの行が収まる幅まで広げる(画像の上に重なる配置は従来どおり) */
@media(min-width:1101px){.ip-hero-copy{width:72%}}
@media(min-width:761px) and (max-width:1100px){.ip-hero-copy{width:100%}}
/* ③左右バランス: セクション見出しは「ラベル(左1/3)・見出し(右2/3)」の2カラムなのに、
その下の項目(番号と本文の2要素の行・FAQ・関連リンク)が別の位置から始まり、
見出しだけが右に寄って見えていた。見出しの右カラムの開始位置に揃える */
@media(min-width:761px){
.ip-service:not(:has(>:nth-child(3))),.ip-step:not(:has(>:nth-child(3))){grid-template-columns:calc((100% - 60px)/3) minmax(0,1fr);column-gap:60px}
.ip-faq,.ip-service-links{padding-left:calc((100% - 60px)/3 + 60px)}
}
/* ④スマホのヒーロー見出し: 10文字の行(「その先まで、考える。」など)が327px幅に収まらず「る。」だけが次の行に落ちていた */
@media(max-width:760px){.ip-hero h1,.ip-hero .ip-hero-h1{font-size:clamp(24px,8.2vw,48px)}}
/* ⑤詳細ページの案件名: 改行(
)を含むと text-wrap:balance が効かず「実績」だけが孤立していた。
各行を独立したブロックにして、行ごとに均等に折り返す(文字・改行位置は同じ) */
.ip-hero h1 .ip-detail-title>span{display:block}
.ip-hero h1 .ip-detail-title br{display:none}
/* ⑥タブレット幅(761〜1100px)の狭い列に特大の見出しが入り、3行以上に折れていたものを縮小 */
@media(min-width:761px) and (max-width:1100px){
.ip-band h3{font-size:clamp(20px,2.6vw,28px)}
.ip-beliefs h3{font-size:clamp(17px,2vw,25px)}
}
@media(min-width:761px) and (max-width:900px){
.ip-contact-aside h2{font-size:clamp(20px,3vw,29px)}
}
/* ⑦実績詳細の改行入りテキスト(lines())は各行をブロックにして、行ごとに text-wrap を効かせる(
は非表示にして同じ改行位置を保つ) */
#inner-site .ip-line{display:block}
#inner-site .ip-line br{display:none}
/* ⑧「ホームページ制作について詳しく見る ↗」など矢印リンクが3行になり「↗」だけ孤立するのを防ぐ */
#inner-site .ip-textlink{text-wrap:balance}
/* ⑨スマホの帯見出し(最適なご提案を。等)が狭い列で3行になっていたものを縮小 */
@media(max-width:760px){.ip-band h3{font-size:clamp(19px,5.6vw,25px)}}
/* ⑩ブログのタイトル・見出しは v74.css が text-wrap:pretty!important にしており、最終行に1〜2文字が残っていた。
見出しなので balance(均等)に統一する */
#inner-site .ip-journal-title,#inner-site .ip-journal-body h2,#inner-site .ip-journal-body h3,#inner-site .ip-journal-item h3{text-wrap:balance!important}
/* 文節単位の折り返し(auto-phrase)にすると、グリッドの子要素の最小幅が「最長の文節」になって
スマホで列がはみ出すため、子要素が列幅まで縮められるようにする */
:is(.ip-work,.ip-service,.ip-step,.ip-profile,.ip-band,.ip-contact-layout,.ip-beliefs,.ip-journal-item,.ip-section-heading)>*{min-width:0}
/* text-wrap は white-space の一部(text-wrap-mode)も上書きするため、v74.css で nowrap にしている料金表の金額を戻す */
#inner-site .ip-pricing td{white-space:nowrap}
/* スマホ幅のブログ: 長い題名が3〜4行にならないよう、番号を題名の上の行に出して幅を広げ、文字も少し小さくする */
@media (max-width:600px){
#inner-site .ip-journal-item{grid-template-columns:minmax(0,1fr) 26px;gap:6px 12px}
#inner-site .ip-journal-item>.ip-no{grid-column:1/-1;padding-top:0}
#inner-site .ip-journal-item h3{font-size:17px;line-height:1.7;margin:10px 0 10px}
#inner-site .ip-journal-title{font-size:20px;line-height:1.75;margin:20px 0 28px}
}
/* 案件ごとのヒーロー画像: 右側に置き、左端を背景になじませる(見出しと重ならない) */
.ip-art--side img{left:auto;right:0;width:62%;object-position:55% 30%;animation:none!important;will-change:auto;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 42%);mask-image:linear-gradient(90deg,transparent 0,#000 42%)}
@media (max-width:900px){
.ip-art--side img{width:100%;opacity:.5;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 45%);mask-image:linear-gradient(180deg,transparent 0,#000 45%)}
}
/* ===== 文字サイズの基準(全下層ページで揃える) =====
* 本文 15px / 補助 12.5px / リンク 13px / ラベル 11px。スマホは本文14px・補助12px・リンク12.5px・ラベル10.5px。
* v7.4の元のCSSには、本文11〜12px・ラベル7〜9pxの箇所があり、読みづらかったため引き上げる。 */
#inner-site{--fs-body:15px;--fs-sub:12.5px;--fs-link:13px;--fs-label:11px}
@media (max-width:760px){#inner-site{--fs-body:14px;--fs-sub:12px;--fs-link:12.5px;--fs-label:10.5px}}
/* 本文: 段落・リスト・表のセル・FAQ・定義リスト・ヒーローの説明 */
#inner-site :is(.ip-hero-copy,.ip-section-heading,.ip-service,.ip-work,.ip-step,.ip-band,.ip-beliefs,.ip-profile,.ip-deliverable,.ip-contact-aside,.ip-journal-item,.ip-faq,.ip-cta,.ip-section)>:is(p,div>p),
#inner-site :is(.ip-hero-copy,.ip-section-heading,.ip-service,.ip-work,.ip-step,.ip-band,.ip-beliefs,.ip-profile,.ip-deliverable,.ip-contact-aside,.ip-journal-item,.ip-faq,.ip-cta) p:not(.ip-note):not(.ip-work-scope):not(.ip-label),
#inner-site .ip-journal-body :is(p,li,td,strong,a),
#inner-site .ip-faq :is(p,summary),
#inner-site .ip-hero-copy p,
#inner-site .ip-contact-aside li,
#inner-site .ip-band li,
#inner-site .ip-line,
#inner-site .ip-facts dd,
#inner-site .ip-pricing td:not(:first-child){font-size:var(--fs-body)}
#inner-site .ip-journal-body :is(p,li,td){line-height:2}
#inner-site .ip-faq p,#inner-site .ip-service p,#inner-site .ip-step p,#inner-site .ip-beliefs p{line-height:2}
/* 補助: 注記・案件の担当範囲・タグ・日付・業種チップ */
#inner-site :is(.ip-note,.ip-work-scope,.ip-work-status,.ip-tags span,.ip-journal-meta time,.ip-journal-meta span,.ip-pricing caption){font-size:var(--fs-sub)}
#inner-site .ip-note a{font-size:var(--fs-sub)}
/* リンク */
#inner-site :is(.ip-textlink,.ip-service-links a){font-size:var(--fs-link)}
/* 表の見出し(料金表の行見出し・列見出し) */
#inner-site .ip-pricing thead th{font-size:var(--fs-label)}
#inner-site .ip-pricing tbody th{font-size:13px;font-weight:400}
@media (max-width:760px){#inner-site .ip-pricing tbody th{font-size:12px;min-width:120px}}
/* ラベル類(英字の小見出し・パンくず・kicker・定義リストの項目名・フォームのラベル) */
#inner-site :is(.ip-label,.ip-kicker,.ip-breadcrumb a,.ip-breadcrumb span,.ip-facts dt,.ip-deliverable>span,.ip-field label){font-size:var(--fs-label)}
#inner-site .ip-field label{font-size:12.5px}
#inner-site .ip-facts dt{font-size:var(--fs-label)}
/* 元のCSSが !important で小さく固定している箇所を、基準に揃える */
#inner-site :is(.ip-note,.ip-work-scope,.ip-note a){font-size:var(--fs-sub)!important}
#inner-site .ip-submit{font-size:13px!important}
#inner-site :is(.ip-journal-meta a,.ip-founder-photo figcaption,.ip-result,.ip-consent a,.ip-consent span){font-size:var(--fs-sub)}
/* ===== 見出しの右カラムの開始位置をそろえる =====
* セクション見出しは「ラベル(左) / 見出し(右)」の2列。下の行(番号+本文)・FAQ・関連リンクが
* 別の計算で右カラムを決めていて、37pxずれていた。見出しの列幅と余白を1つの値にまとめて、同じ位置から始める。 */
@media(min-width:761px){
#inner-site{--sh-gap:6vw}
#inner-site .ip-section-heading{grid-template-columns:minmax(0,.8fr) minmax(0,2fr);column-gap:var(--sh-gap)}
.ip-service:not(:has(>:nth-child(3))),.ip-step:not(:has(>:nth-child(3))){grid-template-columns:calc((100% - var(--sh-gap))*.8/2.8) minmax(0,1fr);column-gap:var(--sh-gap)}
.ip-faq,.ip-service-links{padding-left:calc((100% - var(--sh-gap))*.8/2.8 + var(--sh-gap))}
}
/* ===== セクション見出しを左にそろえる(運営者の判断) =====
* 「ラベル(左)・見出し(右)」の2列をやめ、ラベルを見出しの上に置き、すべて左端から始める。
* 見出しの下のFAQ・関連リンクも左端に戻す。番号+本文の行(.ip-service/.ip-step)は行内の2列のまま。 */
@media(min-width:761px){
#inner-site .ip-section-heading{grid-template-columns:minmax(0,1fr);gap:14px}
.ip-faq,.ip-service-links{padding-left:0}
.ip-service:not(:has(>:nth-child(3))),.ip-step:not(:has(>:nth-child(3))){grid-template-columns:calc((100% - 60px)/3) minmax(0,1fr);column-gap:60px}
#inner-site .ip-section-heading p{max-width:680px}
}