/*
Theme Name: IMALOG 2026
Description: 自作WordPressテーマ IMALOG 2026
Version: 1.0
*/

@charset "utf-8";

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


/*
============================================================
基本スタイル PC用
============================================================
*/

.wrapper {
	max-width: 620px;margin: 0 auto;
}



body {font-size:18px;/*デフォルト 18px*/
	line-height: 36px;/*デフォルト 36px*/
	font-family:Arial,"Helvetica Neue",Meiryo,"BIZ UDPGothic","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
}


.main {margin-top: 143px;}


h1 {font-size:32px;letter-spacing:0.04em;margin-bottom: 1.75em;}/*1.75em 56p*/	
h2 {font-size:28px;letter-spacing:0.04em;margin-bottom: 0.6em;}/*16.8px*/
h3 {font-size:20px;letter-spacing:0.04em;margin-bottom: 0.9em;}/*18px*/
	
	
p {margin-bottom: 2em;

	/*禁則処理 https://ics.media/entry/240411/ */
    line-break: strict; /* 禁則処理を厳格に適用 */
	
	/*自動カーニング https://ics.media/entry/14087/ */
	font-feature-settings: "palt" 1;

}
	

/*
========================================================
スクロールで隠れるヘッダーのスクリプト用css https://disegno-k.biz/blog/scroll-fixed-header
========================================================
*/
.site-header {
    height: 64px;
	border-bottom:solid 1px #dcdedf;
	background: #FFF;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: transform .3s ease;
  z-index: 1000;
}

.site-header.hide {
  transform: translateY(-100%);
}

.inner {
  display: flex;
  justify-content: space-between;
  padding: 16px 20px;
}


/*
========================================================
投稿者情報（.auther-box）の位置調整
========================================================
*/
.auther-box{
    display:flex;
    max-width: 620px;
    height: auto;
	margin-bottom: 56px;
}

.auther-box-img{
	    height: 32px;
		width: 34px;
}

.auther-box-img img{
    width:100%;
	height: 100%;	
	border-radius: 48%;
    object-fit: cover;
}

.auther-box-text{
    width:100%;
	font-size:12px;
}

.auther-name{height:auto;padding-top: 2px;padding-left: 8px;text-box-trim: trim-both;}
.auther-date{height:12px;padding-top: 4px;padding-left: 8px;;text-box-trim: trim-both;}



/*
============================================================
基本スタイル　スマホ用（@media (max-width: 768px)
============================================================
*/

/* タブレット・中型デバイス向け（1024px以下） */
@media (max-width: 1024px) {

/*一旦設定しない*/

}/* end 1024 */




/* スマホ向け（768px以下）のスタイルを設定する場所 */
@media (max-width: 768px) {

 /*  全体の幅をスマホ画面にフィットさせる */
  .wrapper { 
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* デフォルトの文字サイズと行間をスマホ向けに少し小さく */
  body {
    font-size: 16px;
    line-height: 28px;
  }
  
  /* 見出しのサイズと余白をスマホ向けに調整 */
  h2 { font-size: 20px; margin-bottom: 0.5em; }
  h3 { font-size: 18px; margin-bottom: 0.5em; }

  /* メインコンテンツの上の余白 */
  .main {
    margin-top: 0 !important;
    padding-top: 33px !important;
  }

  /* h1のブラウザ余白を確実にリセット */
  h1 { 
    font-size: 20px !important; 
    line-height: 1.3 !important;
    margin-top: 0 !important;
    margin-bottom: 1.2em;
  }
    
  /* ヘッダーの高さ調整 */
  .site-header {
    border-bottom: none;
    position: relative;
    height: 48px;
  }

  /* 擬似要素を使って、下側に極細の線を引く */
  .site-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #dcdedf;
    transform: scaleY(0.5);
    transform-origin: bottom;
  }

  /* ヘッダー内側の余白（ロゴの周囲）を設定する箱 */
  .inner {
    padding: 13px 16px 13px 16px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }

  /* ロゴ画像のサイズと配置を強制固定 */
  .inner img {
    width: 98px !important;
    height: 22px !important;
    display: block;
    margin: 0;
    padding: 0;
    position: relative;
    top: -1px;
  }

/*
========================================================
投稿者情報（.auther-box）の位置調整
========================================================
*/

.auther-box {
    display: flex !important;
    align-items: center !important;
    margin-top: 0 !important;
    padding-top: 25px !important;
    margin-bottom: 0 !important;
  }

  /* 名前と日付のテキスト箱 */
  .auther-box-text {
    margin-top: -1px !important;   
    padding-left: 1px !important;  
  }


/*
========================================================
本文（pタグ）の位置調整
========================================================
*/
 
  /* 最初の段落の上の余白設定（★2px引いて50pxへ：本文全体が2px上がります） */
  .auther-box + p,
  .main > p:first-of-type {
    margin-top: 50px !important;
  }

  /* 本文（pタグ）全体の共通設定 */
  p {
    line-height: 32px !important;     
    margin-bottom: 2.0em !important;  
  }



}/* end 768 */