/*
Theme Name: IMALOG 2026
Description: 自作WordPressテーマ IMALOG 2026
Version: 2.1
2026-10-05
*/
@charset "utf-8";

/*
============================================================
基本リセット & ルート定義（PC・スマホ完全共通基盤）
============================================================
*/

/* 
マージンリセット＆一方向制御
・ブラウザ特有の強制上マージンによる表示崩れを完全排除
・最初の段落の上部に不要な隙間が空くのを防ぐため、margin-topは一律「0」に固定
・余白のコントロールはすべて各要素の「margin-bottom」による下方向への押し出しで一元管理する
*/
h1, h2, h3, p {
margin: 0;
padding: 0;
}

  
html {
font-size:18px;/* ベース文字サイズ　スマホもこの18px（1rem）をそのまま継承 */
color: #000000;


/* 
========================================================
クロスプラットフォーム・タイポグラフィ防壁 
Macはヒラギノ / Windows等は標準搭載のNoto Sans JPを強制 2026-10-12
========================================================
*/
font-family: 
/* 1. Mac/iOS向け */
"Hiragino Kaku Gothic ProN", 
"Hiragino Sans", 

/* 2. Windows 10/11 向け（Macをスルーした環境にNoto Sansを強制的に適用） */
"Noto Sans JP", 
"Noto Sans CJK JP",

/* 3. 古いWindows用（万が一Notoが入っていない旧環境への最終セーフティ） */
"Meiryo", 

/* 4. 汎用ゴシック体指定 */
sans-serif;




/* スクロールバーの分、常にスペースを確保する */
scrollbar-gutter: stable;

/* 禁則処理・文字詰め（PC・スマホ共通） */
font-feature-settings: "palt" 1;
letter-spacing: 0.00em;   /* 文字詰め*/
line-break: strict;       /* 小書き文字を行頭に置かない（厳格な禁則） */
word-break: normal;       /* 通常の改行ルール（日本語は文字単位） */
text-align: justify;      /* 必要に応じて指定。行末をきれいに揃える */
text-justify: inter-character; /* 日本語の文字間を均等に広げて調整 */
}

/* PC用基本コンテナ幅 */
.wrapper {
max-width: 600px;
margin: 0 auto;
}
 

/*
============================================================
タイポグラフィ構造（PC版デフォルト）
============================================================
*/

h1 {
font-size: 1.777rem; /*32px*/	
line-height: 1.188; /*38px*/
/* margin-top: 0;  【重要】ブラウザの上マージンを消す設定は冒頭のマージンリセットに委ねる */
margin-bottom: 2rem; /*36px*/ 
}


h2 {
font-size: 1.444rem; /*26px*/
line-height: 1.307; /*34px*/
margin-top: 1.888rem; /*34px*/ 
margin-bottom: 0.777rem; /*14px*/
}


h3 {
font-size: 1.222rem; /*22px*/
line-height: 1.363; /*30px*/
margin-top: 1.777rem; /*32px 当初2.222rem 40px*/ 
margin-bottom: 0.777rem; /*14px*/
}


p {
font-size: 1rem; /* 18px */
line-height: 1.444; /*行間 約26px*/
/* margin-top: 0;  【重要】ブラウザの上マージンを消す設定は冒頭のマージンリセットに委ねる */
margin-bottom: 0.888rem; /*段落間の余白 16px */
}


.published-date {
font-weight: 300;
font-size: 0.888rem; /* 16px */
line-height: 1.444;  /* 本文pタグに合わせる */
color: #111111; 
display: inline-block; /*pの16px＋日付の16px＝物理的に32pxを生成、相殺の無効化 */
width: 100%;
margin-top: 0.888rem;  /* 16px */
margin-bottom: 3rem;   /* 54px */
text-align: left;
}



/*
============================================================
3. スマホ用上書きセクター（@media (max-width: 768px)）
============================================================
*/

@media (max-width: 768px) {


/* 全体コンテナを画面幅いっぱいに解放＋左右1rem（18px）の絶対余白 */
.wrapper { 
width: 100%;
max-width: none;
padding-left: 1rem;/*18px */
padding-right: 1rem;/*18px */
box-sizing: border-box;
s}


/* 本文要素をスマホ画面幅（1remの余白内）に追従させる */
.main > p, 
.main > h1, 
.main > h2, 
.main > h3,
.published-date {
width: 100% !important;
box-sizing: border-box;
}


/* スマホ環境に合わせた行間・見出しサイズの微調整 */
/* 基本フォントサイズは 1rem(=18px) のまま一切変更していません */

h1 {
font-size: 1.555rem;   /* ★正確に 28px (18px × 1.555 ≒ 27.99px) */
line-height: 1.25;     /* 約35px (28px × 1.25) */
margin-bottom: 1.5rem; /* 27px (18px × 1.5) */
}


h2 {
font-size: 1.333rem;   /* ★正確に 24px (18px × 1.333 ≒ 23.99px) */
line-height: 1.35;     /* 約32.4px (24px × 1.35) */
margin-top: 1.666rem;  /* 30px (18px × 1.666 ≒ 29.98px) */
margin-bottom: 0.6rem; /* 10.8px (18px × 0.6) */
}


h3 {
font-size: 1.222rem;   /* ★正確に 22px (18px × 1.222 ≒ 21.99px) */
line-height: 1.363;    /* 約30px (22px × 1.363) */
margin-top: 1.5rem;    /* 27px (18px × 1.5) */
margin-bottom: 0.5rem; /* 9px (18px × 0.5) */
}


p {
/* font-sizeはPC版の1rem(=18px)が自動適用されます */
line-height: 1.444;    /* ★26px (18px × 1.444) PC版と完全同期 */
margin-bottom: 0.888rem; /* ★16px (18px × 0.888) 段落間の余白もPC版と完全同期 */
}


}/* end 768 */