/*
 * サイト共通ヘッダー（ロゴ・戻る）のスタイル。
 *
 * もとは patterns/_header.php のページ内 <style>（2026-08-21 に外へ出した）。
 * 読み込む位置は元の <style> と同じ行 ―― wp_head() の直後。
 */

#back{
	margin: 40px 0;
}
#logo_pc{
	display:flex;
	flex:1; 
	justify-content:space-between;
	font-weight:normal;
}
.header-title{
	flex: 1;
	padding-right: 100px;
	max-width: 820px;
}
/* 書体の指定は外した（利用者の指示・2026-08-20）。
   "Libre Bodoni" はこのテーマのどこからも読み込んでおらず、
   **かつ次の候補も書いていなかった**ので、ブラウザの既定書体（多くは明朝）に
   落ちていた。狙って明朝にしていたのではなく、当たらない名前が残っていただけ。
   外したことで、ロゴを「テキスト」にしているサイトのサイト名は
   ヘッダーの書体（header a）に従う。画像ロゴのサイトには関係しない。 */
/* PCのロゴは**上マージンを詰めて上へ寄せる**（利用者の指示・2026-09-05
   「PCのとき、ロゴ画像がもう少し上」）。20px → 6px で14px上がる。

   **この値はヘッダーのアイコン列と対になっている** ―― アイコンは
   「ロゴ画像の上端から14px下」にそろえる約束で、style.css の
   nav#header{margin-top} がその足し算（上マージン＋14px）を持っている。
   片方だけ動かすとアイコンだけ取り残されるので、必ず両方そろえること。

   下マージンは触らない ―― ロゴの下端と本文の間の間合いは変えない。
   768px以下では下の @media が margin:0 にするので、ここはPCだけに効く。 */
.header-title .pc{
	font-weight: normal;
	font-size: 20px;
	line-height: 30px;
	margin: 6px 0 20px;
}
.header-title .sp{
	font-weight: normal;
	font-size: 11px;
	line-height: 20px;
}
#header{
	max-width: 400px;
}
.sp{
	display:none;
}
@media only screen and (max-width: 480px) {
	.sp{
		display:block;
	}
	.pc{
		display:none;
	}
	#back{
		margin: 0px;
	}
	.header-title{
		padding-right: 0px;
	}
}

/* ロゴは9割の大きさにする（利用者の指示・2026-08-20）。
   **PCだけ元の大きさへ戻した**（利用者の指示・2026-09-08「PCのとき
   ロゴは小さくしなくても良い」）。スマホは9割のまま ―― 画面が狭い側は
   ロゴが場所を取りすぎる、というのが 08-20 の趣旨だった。 */
.header-title .sp img{
    max-width: 117px;   /* 130 の 90% */
    width: 100%;
}
.header-title .pc{
    width: max-content;
}
.header-title .pc img{
    max-width: 100%;
    /* **480pxのSP/PC切替で大きさが飛ばないようにする**（08-20 の決めごと）。
       下限はスマホと同じ 117px、上限は元の 200px に戻す。あいだの係数は
       「480px でちょうど 117px になる」値にしてある（480 × 0.244 ≒ 117）
       ―― こうすると切り替わりの前後で幅が連続し、上限まで素直に伸びる。 */
    width: clamp(117px, 24.4vw, 200px);
    transition: width .24s ease;
}
.header-title {
    text-align: left;
}
@media only screen and (max-width: 768px) {
    .header-title .pc {
        margin: 0;
    }
    /* **スマホはヘッダーの上を詰める**（利用者の指示・2026-09-08
       「スマホでの左上のロゴは、もっと上につめて」）。

       style.css の header は margin-top:15px ＋ padding-top:10px で、
       画面の上に25pxの空きを作っていた。狭い画面ではここが効いて、
       ロゴがひと呼吸ぶん下がって見える。**PCは触らない** ――
       あちらはアイコン列の位置（nav#header の margin-top:40px）と
       対になっており、動かすと右上だけ取り残される。 */
    header {
        /* !important は**当てるため**（利用者の指示・2026-09-08
           「スマホでのロゴは上、左に詰める」）。style.css の
           header{margin:15px 0 0; padding-top:10px} と同じ詳細度なので、
           読み込み順が入れ替わると負ける ―― 実測でちょうど 25px
           （15＋10）残っていた。 */
        margin-top: 0 !important;
        /* **上も端まで**（利用者の指示・2026-09-08「フレームレスのとき、
           左上にロゴをもうすこしつめて」）。残していた 2px も外す。 */
        padding-top: 0 !important;
    }
    /* **左は端まで詰める**（利用者の指示・2026-09-08「ロゴは左まで
       詰めてください」）。右（アイコン列の側）は 20px のまま ――
       押す相手なので端へは寄せない。動かすのはロゴのある側だけ。 */
    .header-wrap {
        /* 打ち消す相手（style.css の .header-wrap{padding:0px 20px}）とは
           同じ詳細度で、読み込み順で決まってしまう。ページによって順が
           違うので、ここは言い切る。 */
        padding-left: 0 !important;
    }
    /* 入れ物の側にも左の余白を持たせない（ロゴを本当に端まで出すため）。 */
    .header-wrap > div:first-child,
    #logoTitle {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    /* **右のアイコン列の高さは変えない**（利用者の指示・2026-09-08
       「右のアイコンの高さはかえないでください」）。

       上の打ち消しはヘッダーごと持ち上げるので、放っておくとアイコンも
       同じだけ上がる。詰めたぶん（もとの 25px）をこちら側へ
       足し返して、**元の位置に置いたまま**にする。
       25px は**上の値と対**（header の padding-top を動かしたら、
       この数字も同じだけ動かすこと）。 */
    nav#header {
        margin-top: 25px;
    }
    /* ロゴの入れ物が上に余白を持たないことを、ここで言い切っておく
       （テーマやページごとの上書きに引きずられないため）。 */
    #logoTitle,
    #logoTitle .sp,
    #logoTitle .pc {
        margin-top: 0 !important;
    }
    /* 画像を行の中に置かない。インラインのままだとベースラインの下に
       文字の下端ぶんの空きが残り、ロゴの下だけ間延びする。 */
    .header-title .sp img,
    .header-title .pc img {
        display: block;
    }
}

/* --- プロフィール系（設定・ニックネーム編集・ログアウト）の
       ヘッダーを、撮影一覧（body.fp-captured-layout）と同じ重ね置きにする。
       利用者の報告・2026-08-23「ヘッダーの位置が違う」。

   **写す先は photo-header.css の @media(min-width:481px) の1組**。
   切り替わり幅（481px）も pointer-events の扱いも、あちらに合わせてある
   ―― 値がずれると「ページを移るとロゴが動く」が別の形で戻ってくる。

   重ね置きにするとヘッダーは本文を押し下げないので、本文側に受けの余白が要る。
   登録/ログイン（_auth-head-styles.php）と同じ 110px。無いと一覧が
   アイコン列の下に潜り込む（LP v1 で実際に踏んだ・2026-08-18「上過ぎる」）。

   body クラスは functions.php の body_class フィルタが付ける。 */
@media screen and (min-width: 481px) {
  body.hs-profile-layout header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 90;
    /* 重ねた面が下のクリックを奪わないようにする。ロゴの入れ物
       （p#logoTitle.header-title）は flex で横に広がり、右に 100px の
       padding も持つ。その透明な面がリンクの上に乗ると押せなくなる
       （利用者の報告・2026-08-18「リンクが押せない」）。 */
    pointer-events: none !important;
  }
  body.hs-profile-layout header a,
  body.hs-profile-layout header button,
  body.hs-profile-layout header input,
  body.hs-profile-layout header select { pointer-events: auto; }
  /* 本文の始まりも撮影一覧に合わせる（あちらは h3.head に clamp(80px,5vw,120px)）。
     数式をそろえておかないと、ヘッダーは同じ位置なのに中身の開始位置だけ
     ずれて「まだ違う」になる。 */
  body.hs-profile-layout { padding-top: 0 !important; }
  body.hs-profile-layout h3.head { margin-top: clamp(80px, 5vw, 120px) !important; }
  /* 設定ページだけは見出しが無く、いきなり一覧が来る。同じ位置から始める。
     一覧側の margin-top:60px はテンプレートのインライン指定で、スマホでは
     そのまま使う ―― ここ（PC）だけ !important で上書きする。 */
  body.hs-profile-layout .wrapeer > ul.post-lists { margin-top: clamp(80px, 5vw, 120px) !important; }
  /* **背の上限は外した**（利用者の指示・2026-09-08「PCの左上のロゴは
     大きさをTOPとかえないように」）。TOP には上限が無いので、ここだけ
     縮めるとページを移るたびにロゴの大きさが変わって見えていた。

     **代わりに本文を押し下げることもしない**（利用者の指示・同日
     「PCでタイトルの位置をもっと上に」）。見出しは中央、ロゴは左なので
     横には当たらない ―― 2026-08-23 に上限を付けた理由は「横いっぱいの帯」
     との重なりで、いまの帯は中央寄せの札になっている。
     **もし横いっぱいの帯を戻すときは、ここも一緒に見直すこと。** */
}