@charset "utf-8";
/* ==========================================================================
   ホクちゃんのプロフィール専用スタイル
   ---------------------------------------------------------------------------
   元デザイン : 資料/ホクちゃん_プロフィール_0430.jpg（ai アートボード 1366 x 3522.5pt）
   修正       : 20260918修正資料/修正指示.txt により、プロフィール枠を下へ 181.3pt 広げ、
                それより下の要素を同じだけ下げている（ステージ高さ 3522.5 → 3703.8pt）
   実装方法   : #hoku-stage をアートボードと同じ 1366px 幅で組み、
                transform:scale() で表示幅 950px（サイト共通の .wrap 幅）に縮小。
                そのため #hoku-stage の内側の座標値は ai の pt 値と 1:1 で対応する。
   表示幅の変更 : 下記 4 か所の数値を差し替える
                (1) #hoku-page / .hoku-stage-wrap の height
                (2) .hoku-stage-wrap の width
                (3) .hoku-stage の transform:scale()
                (4) 背景帯（.hoku-bg-yellow 他）の top / height
                scale = 表示幅 ÷ 1366   例）950/1366 = 0.6954612
   ========================================================================== */

/* ---------- 全体 ----------
   min-width はステージ幅（950px）と必ず同じ値にする。
   これが無いとウィンドウ幅が 950px を下回ったときに overflow:hidden で
   中身が切り取られ、横スクロールしても要素が出てこなくなる。   */
#hoku-page {
	position: relative;
	width: 100%;
	min-width: 950px;
	height: 2576px;			/* 3703.8pt x 0.6954612 */
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #a6dcf4;	/* 下段の水色 */
	text-align: left;
	/* iOS Safari が本文を勝手に拡大（text autosizing）して
	   レイアウトが崩れるのを防ぐ */
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* ---------- 背景帯（ブラウザ幅いっぱい） ---------- */
.hoku-bg-yellow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 766.8px;		/* 1102.5pt */
	background-color: #fff100;
}
.hoku-bar1 {				/* タイトル背面のオレンジ帯 */
	position: absolute;
	top: 127.8px;			/* 183.8pt */
	left: 0;
	width: 100%;
	height: 30.4px;			/* 43.7pt */
	background-color: #f9c300;
}
.hoku-band2 {				/* 「プロフィール」見出しのオレンジ帯 */
	position: absolute;
	top: 766.8px;			/* 1102.5pt */
	left: 0;
	width: 100%;
	height: 91.3px;			/* 131.2pt */
	overflow: hidden;
	background-color: #f9c300;
}
.hoku-band2-inner {
	position: relative;
	width: 950px;
	height: 100%;
	margin: 0 auto;
}

/* ---------- オレンジ帯の電車（左右から帯の端まで繰り返す） ---------- */
.hoku-train {
	position: absolute;
	top: 16.2px;
	height: 66px;
	background-repeat: repeat-x;
	background-size: 130px 66px;
}
.hoku-train-l {
	left: -3000px;
	right: 663.5px;			/* 左側の電車は x=412pt で終わる */
	background-image: url(../../hokuchan/img/hoku-train-l.png);
	background-position: right bottom;
}
.hoku-train-r {
	left: 666.9px;			/* 右側の電車は x=959.1pt から始まる */
	right: -3000px;
	background-image: url(../../hokuchan/img/hoku-train-r.png);
	background-position: left bottom;
}

/* ---------- ステージ（ai アートボードそのまま） ---------- */
.hoku-stage-wrap {
	position: relative;
	width: 950px;
	height: 2576px;
	margin: 0 auto;
}
.hoku-stage {
	position: absolute;
	top: 0;
	left: 0;
	width: 1366px;
	height: 3703.8px;
	-webkit-transform: scale(0.6954612);
	-ms-transform: scale(0.6954612);
	transform: scale(0.6954612);
	-webkit-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;
}
.hoku-stage div,
.hoku-stage p,
.hoku-stage h2,
.hoku-stage h3,
.hoku-stage h4 {
	position: absolute;
	margin: 0;
	padding: 0;
	clear: none;
}
.hoku-stage img {
	position: static;
	border: 0;
	display: block;
	width: 100%;
	height: 100%;
	vertical-align: bottom;
}

/* 重ね順（ai のレイヤー順）。雲どうしの前後は個別に指定するので 10 刻みにしてある */
.hoku-l-rail   { z-index: 10; }
.hoku-l-cloud  { z-index: 20; }
.hoku-l-panel  { z-index: 30; }
.hoku-l-icon   { z-index: 40; }
.hoku-l-text   { z-index: 50; }
.hoku-l-chara  { z-index: 60; }

/* ---------- 書体（資料の指定どおり） ----------
   見出し・太字の「ラノベPOP v2」、ごあいさつ（教科書体 NP）、
   プロフィール（教科書体 NK）は画像化して埋め込み済み（環境非依存）。
   テキストのままなのは雲の中の箇条書きだけで、
   Windows 標準の UD デジタル 教科書体を第一候補にし、
   iOS / macOS では游教科書体→ヒラギノへ落とす。
   書体が替わると 1 行の幅が変わるため、はみ出さないよう
   hokuchan.js が data-hoku-fit の幅まで自動で詰める。 */
/* 箇条書き＝UD デジタル 教科書体 N（太字） */
.hoku-fnt-nb {
	font-family: "UD デジタル 教科書体 N-B", "UD Digi Kyokasho N-B",
	             "UD デジタル 教科書体 N", "UDDigiKyokashoN-B",
	             "YuKyokasho", "YuKyokasho Yoko", "游教科書体",
	             "Hiragino Sans", "ヒラギノ角ゴシック", "Yu Gothic", "游ゴシック", sans-serif;
	font-weight: bold;
}

/* ---------- 本文テキスト共通 ---------- */
.hoku-stage p {
	color: #000;
	white-space: nowrap;
	letter-spacing: 0;
	text-indent: 0;
}
/* 箇条書きは「外側 div = 位置・文字サイズ・行送り／内側 p = 文字」に分けている。
   共通 CSS（default.css）に p{line-height:1.5em} があり、
   これは継承より強いので、内側 p には必ず inherit を効かせて
   外側で指定した行送り・文字サイズを使わせる。 */
.hoku-body-suki > p,
.hoku-body-nigate > p,
.hoku-body-chosho > p,
.hoku-body-tansho > p {
	font-size: inherit;
	line-height: inherit;
}


/* ==========================================================================
   1. 上段（ごあいさつ）
   ========================================================================== */
.hoku-pill-title  { left: 205px;  top: 108px;  width: 965px; height: 202px; }
.hoku-txt-title   { left: 252px;  top: 142px;  width: 859px; height: 118px; }

.hoku-box-greet {
	left: 46px; top: 347px; width: 1272px; height: 682px;
	background-color: #fff;
	-webkit-border-radius: 94.5px;
	border-radius: 94.5px;
}
.hoku-frame-hoku  { left: 80px;  top: 393px;  width: 344px; height: 97px; }
.hoku-txt-lbl-h   { left: 154px; top: 424px;  width: 196px; height: 36px; }
.hoku-frame-greet { left: 681px; top: 392px;  width: 406px; height: 99px; }
.hoku-txt-lbl-g   { left: 754px; top: 423px;  width: 194px; height: 37px; }
.hoku-sound       { left: 976px; top: 412px;  width: 64px;  height: 55px; }
.hoku-balloon     { left: 443px; top: 465px;  width: 850px; height: 503px; }

/* セリフ（画像）。修正指示により後半4行をカットし、文字を「好きなこと」と同じ 36pt に上げた。
   36pt / 行送り 53pt・8行。文字枠 706 x 424 の外側に 12 ずつ余白を付けて書き出してあり、
   文字枠の中心は元の本文（27.1pt・9行）と同じ位置。吹き出しの大きさは変えていない。 */
.hoku-body-greet  { left: 533.75px; top: 501.65px; width: 729.73px; height: 447.9px; }
.hoku-chara-main  { left: 56px;  top: 499px;  width: 389px; height: 510px; }

/* ==========================================================================
   2. 中段（プロフィール）
   ========================================================================== */
.hoku-txt-profile { left: 505px; top: 1158px; width: 358px; height: 59px; }

/* 枠は元の 726pt から、本文が増えた分（181.3pt）だけ下へ広げている */
.hoku-box-profile {
	left: 46px; top: 1262.6px; width: 1272px; height: 907.3px;
	background-color: #fff;
	-webkit-border-radius: 97.5px;
	border-radius: 97.5px;
}
.hoku-cap    { left: 954px; top: 1326px;   width: 305px; height: 201px; }
.hoku-ribbon { left: 155px; top: 1975.3px; width: 237px; height: 174px; }	/* 枠の左下に付いて下がる（元 1794） */

/* 本文（画像）。修正指示により文字を大きくした（36pt → 40pt、行送り 48 → 53.3pt）。
   教科書体 NK はかなが詰まる書体で、同じ 36pt でも「好きなこと」（教科書体 N）の
   約 92% の幅にしかならないため、見た目の大きさを揃えるために 40pt にしている。
   1行に収まらなくなった2行を改行して 16 行（空行4を含む）。
   文字枠 1160 x 853.3 の外側に 12 ずつ余白を付けて書き出してあり、上端は元の位置のまま。 */
.hoku-body-profile { left: 89.95px; top: 1279.2px; width: 1184.11px; height: 877.83px; }

/* ==========================================================================
   3. 下段（雲・好きなこと／苦手なこと／長所／短所）
      プロフィール枠を広げた分、ai の座標から一律 181.3pt 下げている
      （各行末のコメントが ai の元の top）
   ========================================================================== */
.hoku-rail1 { left: 893px; top: 1939.3px; width: 132px; height: 598px; }	/* 1758 */
.hoku-rail2 { left: 234px; top: 2501.3px; width: 132px; height: 597px; }	/* 2320 */
.hoku-rail3 { left: 223px; top: 3113.3px; width: 291px; height: 588px; }	/* 2932 */
.hoku-rail4 { left: 942px; top: 2847.3px; width: 292px; height: 589px; }	/* 2666 */

/* 雲どうしの重なり順（ai と同じ。手前←→奥：短所 > 苦手なこと > 長所 > 好きなこと） */
.hoku-cloud-suki   { z-index: 20; }
.hoku-cloud-chosho { z-index: 21; }
.hoku-cloud-nigate { z-index: 22; }
.hoku-cloud-tansho { z-index: 23; }

/* 好きなこと */
.hoku-cloud-suki  { left: 39px;  top: 2210.3px; width: 769px; height: 451px; }	/* 2029 */
.hoku-txt-suki    { left: 334px; top: 2282.3px; width: 292px; height: 101px; }	/* 2101 */
.hoku-chara-suki  { left: 89px;  top: 2343.3px; width: 259px; height: 281px; }	/* 2162 */
.hoku-body-suki   { left: 345.9px; top: 2400.3px; width: 470px; }			/* 2219.0 */

/* 苦手なこと */
.hoku-cloud-nigate { left: 558px;  top: 2405.3px; width: 809px; height: 473px; }	/* 2224 */
.hoku-txt-nigate   { left: 654px;  top: 2494.3px; width: 285px; height: 102px; }	/* 2313 */
.hoku-chara-nigate { left: 1048px; top: 2568.3px; width: 265px; height: 284px; }	/* 2387 */
.hoku-body-nigate  { left: 628.9px; top: 2558.4px; width: 470px; }			/* 2377.1 */

/* 長所 */
.hoku-cloud-chosho { left: 54px;  top: 2746.3px; width: 1271px; height: 435px; }	/* 2565 */
.hoku-txt-chosho   { left: 376px; top: 2831.3px; width: 117px;  height: 59px; }	/* 2650 */
.hoku-chara-chosho { left: 141px; top: 2828.3px; width: 224px;  height: 287px; }	/* 2647 */
.hoku-body-chosho  { left: 367.1px; top: 2914.0px; width: 970px; }			/* 2732.7 */

/* 短所 */
.hoku-cloud-tansho { left: 48px;   top: 3146.3px; width: 1278px; height: 440px; }	/* 2965 */
.hoku-txt-tansho   { left: 175px;  top: 3192.3px; width: 118px;  height: 63px; }	/* 3011 */
.hoku-chara-tansho { left: 1028px; top: 3262.3px; width: 212px;  height: 274px; }	/* 3081 */
.hoku-body-tansho  { left: 163.8px; top: 3267.4px; width: 900px; }			/* 3086.1 */

/* ---------- 箇条書き共通 ----------
   雲の中の箇条書きは ai と同じ角度に傾けている。
   回転中心は「1行目のベースライン始点」= (0, halfLeading + ascent)
   36px / 行送り63px の場合 (63-42)/2 + 32 = 42.5px
   外側 div = 位置＋出現アニメーション / 内側 p = 傾き（transform の競合回避）  */
.hoku-body-suki,
.hoku-body-nigate,
.hoku-body-chosho,
.hoku-body-tansho {
	font-size: 36px;
	line-height: 63px;
	text-align: left;
}
.hoku-body-suki > p,
.hoku-body-nigate > p,
.hoku-body-chosho > p,
.hoku-body-tansho > p {
	left: 0;
	top: 0;
	-webkit-transform-origin: 0 42.5px;
	-ms-transform-origin: 0 42.5px;
	transform-origin: 0 42.5px;
}
.hoku-body-suki   > p { -webkit-transform: rotate(-10.224deg); -ms-transform: rotate(-10.224deg); transform: rotate(-10.224deg); }
.hoku-body-nigate > p { -webkit-transform: rotate(10.387deg);  -ms-transform: rotate(10.387deg);  transform: rotate(10.387deg); }
.hoku-body-chosho > p { -webkit-transform: rotate(-1.972deg);  -ms-transform: rotate(-1.972deg);  transform: rotate(-1.972deg); }
.hoku-body-tansho > p { -webkit-transform: rotate(3.434deg);   -ms-transform: rotate(3.434deg);   transform: rotate(3.434deg); }

/* ==========================================================================
   4. スクロール表示アニメーション
      JS が動く環境だけ .js-anim が付き、初期状態を隠す。
      JS 無効／エラー時は最初から表示されたままになる。
   ========================================================================== */
.hoku-rv {
	-webkit-transition: opacity 0.9s ease, -webkit-transform 0.9s cubic-bezier(0.16, 0.84, 0.28, 1);
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 0.84, 0.28, 1);
}
.js-anim .hoku-rv          { opacity: 0; }
.js-anim .hoku-rv-up       { -webkit-transform: translateY(70px);  transform: translateY(70px); }
.js-anim .hoku-rv-down     { -webkit-transform: translateY(-50px); transform: translateY(-50px); }
.js-anim .hoku-rv-left     { -webkit-transform: translateX(-140px); transform: translateX(-140px); }
.js-anim .hoku-rv-right    { -webkit-transform: translateX(140px);  transform: translateX(140px); }
.js-anim .hoku-rv-pop      { -webkit-transform: scale(0.84);       transform: scale(0.84); }
.js-anim .hoku-rv-pop-bl   { -webkit-transform: scale(0.84);       transform: scale(0.84);
                             -webkit-transform-origin: 8% 50%;     transform-origin: 8% 50%; }

.js-anim .hoku-rv.is-in {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
}
/* 雲は少しやわらかくゆっくり */
.js-anim .hoku-l-cloud.hoku-rv {
	-webkit-transition-duration: 1.15s;
	transition-duration: 1.15s;
}
/* 表示順のずらし */
.hoku-d1 { -webkit-transition-delay: 0.10s; transition-delay: 0.10s; }
.hoku-d2 { -webkit-transition-delay: 0.22s; transition-delay: 0.22s; }
.hoku-d3 { -webkit-transition-delay: 0.34s; transition-delay: 0.34s; }
.hoku-d4 { -webkit-transition-delay: 0.46s; transition-delay: 0.46s; }

/* ---------- 音声ボタン ---------- */
.hoku-sound-btn {
	display: block;
	width: 100%;
	height: 100%;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.hoku-sound-btn:hover img {
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
	opacity: 0.6;
}

/* ---------- 印刷 ---------- */
@media print {
	.js-anim .hoku-rv { opacity: 1 !important; -webkit-transform: none !important; transform: none !important; }
}