@charset "utf-8";
/* CSS Document */
/*
========================================================
IMAILOG 2026：ヘッダーセクター用CSS スクロール追従隠滅ヘッダー
2026-10-05　スマホ版を調整
2026-10-08 新ロゴ・記名仕様アップデート
2026-10/12　検索窓制作（サイズ等検証中）
========================================================
*/


/*
========================================================
PC版デフォルトスタイル
========================================================
*/

/* 
========================================================
本文コンテナ（.main）の余白設計
※フォントサイズ18pxの4倍にあたる「72px」の規律で完全固定
========================================================

ヘッダーの高さ（64px）＋純粋な上部余白（例として48px、計112px）を想定していたが
WordPressの隠しマージン25pxのため48 → 73pxで表示されていた。
しかし実際48pxにしてみると非常に窮屈なので、きりよく72pxで表示させることにする。
*/

.main {
/* 浮遊ヘッダー（高さ64px + 下線1px = 65px）の裏への潜り込みを防止 */
margin-top: 65px;

/* ヘッダー下線から、最初の文字までの純粋なデザイン余白（18px × 4 ＝ 72px） */
padding-top: 72px;
}

/* 一番上の要素が持つ独自の「上マージン」によるガタつきを根本から封じる防壁 */
.main > h1:first-child,
.main > p:first-child,
.main > img:first-child,
.main > div:first-child {
margin-top: 0 !important;
}




.site-header {
position: fixed;
top: 0;
left: 0;
right: 0; /* width: 100% から変更。スクロールバーのガタつきを完全排除 */
height: 64px;
background: #FFFFFF;
border-bottom: solid 1px #DCDEDF;/*色設定*/
transition: transform .3s ease;
z-index: 1000;
}

/* ヘッダー隠滅時：直下への移動でスマートに隠す */
.site-header.hide {
transform: translateY(-100%);
}

/* ヘッダー内部：余白調整 */
.inner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px; /* 新仕様：左余白24px（右も24pxで同期） */
height: 100%;
}





/* 
========================================================
左側要素　ロゴ
========================================================
*/

/* 左側要素の集合セクター */
.header-left {
display: flex;
align-items: center; /* 内部要素をすべて縦中央揃え */
height: 32px;        /* 32pxのロゴと高さを一致させる */
}


/* ロゴリンク＆画像 */
.header-logo-link {
display: flex;
align-items: center;
width: 32px;
height: 32px;
}


.header-logo-img {
width: 32px !important;  /* 幅32px強制 */
height: 32px !important; /* 高さ32px強制 */
object-fit: contain;
display: block;
}


/* 縦境界線（ロゴの右側10px、線の右側10pxの余白を担保） */
.header-divider {
display: block;
width: 1px;
height: 32px;
background-color: #000000; /* ご指定の純黒 */
margin: 0 10px; /* 左右に10pxの余白 */
}

/* 記名 */
.header-author-name {
font-family: "Noto Sans JP", sans-serif;
font-size: 14px;
line-height: 1; /* 上下ズレを徹底排除 */
color: #000000;
font-weight: 500;
white-space: nowrap;
}


/* 中央セクター（あえてデザイン上の余白とする） */
.header-center {
flex-grow: 1;
}



/* 
========================================================
右側要素　バックナンバーリンク、検索窓
========================================================
*/

/* 右側セクター：要素（バックナンバーリンク、検索窓）の横並び */
.header-right {
display: flex;
align-items: center;
gap: 20px; /* バックナンバーと検索窓の間のゆとり */
}

/* バックナンバーリンク */
.header-backnumber-link {
display: flex;
align-items: center;
text-decoration: none;
height: 32px;
}

.backnumber-text {
font-family: "Noto Sans JP", sans-serif;
font-size: 14px;
color: #000000;
font-weight: 500;
white-space: nowrap;
}

/* 検索窓（PC版：スマート幅180pxに固定） */
.header-search-form {
width: 180px; 
display: flex;
align-items: center;
}

.header-search-input {
width: 100%;
height: 32px;
padding: 0 10px; /* 左右に最低限の余白 */
font-family: "Noto Sans JP", sans-serif;
font-size: 14px;
color: #000000;
background-color: #ffffff;
border: 1px solid #000000; /* IMAILOGの純黒直線 */

border-radius: 16px; /* 検索窓の角丸 */

outline: none;
box-sizing: border-box;
}





/*
========================================================
スマホ用上書きスタイル（@media (max-width: 768px)）
========================================================
*/
@media (max-width: 768px) {


/* 
本文コンテナ（.main）のスマホ用余白設計
*/
.main {
/* スマホヘッダー（高さ48px）の裏への潜り込みを防止 */
margin-top: 48px !important;

/* スマホ画面での純粋なデザイン余白（きりよく48pxに固定） */
padding-top: 48px !important;
}

/* スマホ版防壁 */
.main > h1:first-child,
.main > p:first-child,
.main > img:first-child,
.main > div:first-child {
margin-top: 0 !important;
}


/* ヘッダー本体のコンパクト化 */
.site-header {
height: 48px; /* スマホ用に高さをPC版の64pxから48pxへ */
border-bottom: none; /* PC版の1px直線を一度クリアし、下の極細線へ移行 */
/* position: fixed; や transition などの隠滅追従コアはPC版から自動継承 */
}


/* 擬似要素による1px未満の極細下線（Retinaディスプレイ対応） */
.site-header::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #DCDEDF;/*色設定*/
transform: scaleY(0.5);
transform-origin: bottom;
}


/* 左右の余白をテキストの「1rem(18px)」に完全上書き・同期 */
.inner {
padding-left: 1rem !important;
padding-right: 1rem !important;
}


/* 
========================================================
スマホ版　左側要素　ロゴ
========================================================
*/

/* 左側セクターの高さも32pxで固定し、上下余白を自動で8pxに均等配置 */
.header-left {
height: 32px;
}


/* スマホ版：ロゴサイズをPC版と同じ32pxで強制維持 */
.header-logo-link,
.header-logo-img {
width: 32px !important;
height: 32px !important;
}


/* スマホ版：縦境界線も32px高さを維持し、左右余白を10pxに完全同期 */
.header-divider {
height: 32px;
margin: 0 10px;
}


/* スマホ版：記名サイズも14pxを維持（小さくしない） */
.header-author-name {
font-size: 14px;
}

/* 
========================================================
スマホ版　右側要素　バックナンバーリンク、検索窓
========================================================
*/


/* 右側セクター：スマホでの要素間スペース調整 */
.header-right {
gap: 16px; /* スマホでは間隔を少しタイトに PCは20px*/
}

.backnumber-text {
font-size: 13px; /*PCの記名は14px*/
}





/* 
【スマホ版：カチッとした枠線パターンの検証ドック】
スマホ画面でもテキスト化せず、PC版と同じ「美しい箱」として維持。
ロゴとの衝突を防ぐため、幅をスマホ用に「100px」へとコンパクト化しています。
*/
.header-search-form {
width: 100px; /* スマホ画面の限界に合わせた引き締まった幅 */
}

.header-search-input {
width: 100%;
height: 28px; /* スマホの48px高ヘッダーに合わせて少し低めに（上下余白10pxずつ） */
padding: 0 8px;
font-family: "Noto Sans JP", sans-serif;
font-size: 13px;
color: #000000;

/* 
========================================================
【スマホ・枠線＆丸みの実験エリア】
PC版の試行錯誤に合わせて、ここの色（#000000）や太さ（1px）、
丸み（14px ＝ 高さ28pxの半分）を自由に変更して実験してください。
========================================================
*/
border: 1px solid #000000; /* PC版と連動させて調整してください */
border-radius: 14px;       /* 高さ28pxの正確に半分で、スマホでも完全なカプセル型になります */

background: #ffffff !important; /* 背景を白にして、下の極細線と重なっても見やすくします */
text-align: left; /* スマホでも通常の左寄せ入力にリセット */
outline: none;
box-sizing: border-box;
-webkit-appearance: none; /* スマホ（iOS）固有の勝手な内臓デザインを解除 */
appearance: none;
}



}