@charset "UTF-8";
/* ==========================================================================
 * 全応募作品ページ（page-allworks.php）WordPress版の調整
 *
 * /contest/css/allworks_pc.css ・ allworks_sp.css は静的HTML前提で
 * 書かれているため、テーマ（FAMOUS）と衝突する箇所だけここで上書きする。
 * 読み込み順は allworks_pc / sp の後（functions.php で依存指定）。
 *
 * 元のCSSは触っていない。静的HTML側の見た目を変えたいときは
 * これまでどおり css_sass/ を編集して CodeKit でビルドする。
 * ========================================================================== */


/* --------------------------------------------------------------------------
 * 1. box-sizing を静的HTMLと同じ前提に戻す
 *
 * テーマは * { box-sizing: border-box } を全要素に当てているが、
 * allworks のCSSは content-box 前提で幅・高さを書いている。
 * そのまま読むと、
 *   ・検索窓： height 20px + padding 16px + border 4px = 40px のはずが 20px
 *   ・#aw_view： width 490px + padding 60px = 550px のはずが 490px
 *   ・#content_body： 1000px + padding 100px のはずが 1000px
 * のように、padding を持つ要素がすべて縮む。
 * 全応募作品ブロックの中だけ content-box に戻す。
 * -------------------------------------------------------------------------- */
#wholepage,
#wholepage * {
	box-sizing: content-box;
}


/* --------------------------------------------------------------------------
 * 2. 外枠をテーマの記事枠（.p-entry-page__inner）に収める
 *
 * 静的HTMLでは #wholepage が 1100px 固定で、#content_body が
 * 左右50px・下100px の余白を持っていた。WordPressでは記事枠側が
 * 余白（上下80px・左右70px）を持つので、こちらの余白は外す。
 * SP版の #wholepage { width:100vw; margin-top:13.6vw } も同様。
 * -------------------------------------------------------------------------- */
#wholepage {
	min-width: 0;
	width: auto;
	margin-top: 0;
}
#whole_contents #content_body {
	width: auto;
	padding: 0;
}

/* 記事枠を広げて本文幅を確保する。
 * 静的HTMLの作品ビューは「左 550px ＋ 右のサムネイル4列 ≒ 400px」で、
 * 本文幅が 970px を切るとサムネイルが3列に落ちる。
 * テーマ標準（.l-inner 88.9%・内側余白70px）だと画面幅 1200px 以上でないと
 * 970px に届かないため、このページに限り記事枠の外側・内側の余白を詰める。
 * 他ページとの統一より、要素が収まることを優先するという判断。 */
.page-template-page-allworks .p-entry-page.l-inner {
	width: calc(100% - 40px);
	max-width: 1180px;
}
.page-template-page-allworks .p-entry-page__inner {
	padding-left: 20px;
	padding-right: 20px;
}


/* --------------------------------------------------------------------------
 * 3. 検索ブロック上下の余白
 *
 * 静的HTMLの見出しSVG（.block_title）を外し、タイトルはテーマの
 * ページヘッダー（h1）に移したため、見出しと揃えるための上余白
 * （PC 72px）は不要になった。
 * 下の余白は作品ビューとの間隔。好みで調整してよい。
 * -------------------------------------------------------------------------- */
#aw_header {
	padding-top: 0;
	/* 静的HTMLでは左に見出しSVG、右に検索という2要素の両端揃えだった。
	 * 見出しを外したので、残った検索ブロックを右端（サムネイル列の右端）に揃える */
	justify-content: flex-end;
}
#aw_header #aw_search_block {
	padding-top: 0;
	padding-bottom: 30px;
}


/* --------------------------------------------------------------------------
 * 4. フォントをテーマ（本文）に合わせる
 *
 * allworks のCSSは #wholepage #whole_contents にヒラギノ角ゴを
 * 直接指定している。inherit にして、記事本文と同じフォント
 * （テーマオプションのフォント設定）に追従させる。
 * -------------------------------------------------------------------------- */
#wholepage #whole_contents {
	font-family: inherit;
}


/* --------------------------------------------------------------------------
 * 5. サムネイル（円形）の画像ずれ
 *
 * サムネイルは 90px の円の中に 140px の画像を置き、-25px ずらして
 * 中央を切り抜く作り。テーマの img { max-width:100% } で画像の幅が
 * 90px に縮むと、90×140 に歪んだうえ左に寄って、右側に空きが出る。
 * -------------------------------------------------------------------------- */
#aw_works_view #aw_thumbnails button img {
	max-width: none;
}


/* --------------------------------------------------------------------------
 * 6. スマホ：記事枠を画面幅いっぱいにする
 *
 * allworks_sp.css は #wholepage が 100vw ある前提で、検索窓やサムネイルの
 * 幅を vw 単位で組んでいる（例：入力欄 53.333vw ＋ ボタン 18.667vw、
 * サムネイル 5列）。テーマの記事枠（.l-inner 88.9% ＋ 内側余白）の中に
 * 入れると幅が足りず、検索ボタンが折り返し、サムネイル5列目がはみ出す。
 *
 * このページに限り、スマホでは記事枠の左右余白を無くして本文を 100vw にする。
 * 左右の余白は allworks_sp.css 側が持っている 20px がそのまま効く
 * （静的HTMLと同じ見た目になる）。受賞者ページとの統一より
 * 要素が収まることを優先するという判断。
 *
 * メディアクエリは allworks_sp.css の読み込み条件と同じにして、
 * 切り替わるタイミングを揃えている。
 * -------------------------------------------------------------------------- */
@media (orientation: portrait) and (max-width: 574px),
       (orientation: landscape) and (max-width: 780px) {

	.page-template-page-allworks .p-entry-page.l-inner {
		width: 100%;
		max-width: none;
	}
	.page-template-page-allworks .p-entry-page__inner {
		padding-left: 0;
		padding-right: 0;
	}
}


/* --------------------------------------------------------------------------
 * 7. タブレット〜小さめPC（画面幅 1049px 以下）：サムネイル3列＋作品ビュー広め
 *
 * 上の余白調整をしても、本文幅が 970px を切る画面（およそ 1050px 未満、
 * iPad縦 820px など）では静的HTMLと同じ「ビュー 550px ＋ 4列」が収まらない。
 * 4列を維持するとビューが 260px 程度まで縮んで作品が小さすぎるため、
 * この範囲ではサムネイルを3列（90px×3 ＋ 13px×2 ＝ 296px）に固定し、
 * 作品ビュー側を「残り全部」にして作品を大きく見せる。
 * 作品画像は 490px 固定だったのをビュー幅に追従させる。
 *
 * allworks_pc.css は4列前提で「4個目ごとに右マージン0」としているので、
 * 3列用に「3個目ごとに右マージン0」へ差し替える（そうしないと
 * 2段目以降の列がずれる）。
 * -------------------------------------------------------------------------- */
@media (orientation: portrait) and (min-width: 575px) and (max-width: 1049px),
       (orientation: landscape) and (min-width: 781px) and (max-width: 1049px) {

	#aw_works_view #aw_thumbnails {
		flex: 0 0 296px;
		width: 296px;
	}
	#aw_works_view #aw_thumbnails button:nth-child(4n) {
		margin-right: 13px;
	}
	#aw_works_view #aw_thumbnails button:nth-child(3n) {
		margin-right: 0;
	}
	#aw_works_view #aw_view {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}
	#aw_works_view #aw_view #aw_work_img {
		width: 100%;
	}
}


/* --------------------------------------------------------------------------
 * 8. スマホ：サムネイル一覧の高さを 4段半にする
 *
 * allworks_sp.css は #aw_thumbnails を 54vh（画面の高さ基準）にしていて、
 * iPhone 14 Pro だと 6段半ほど表示される。初期表示で作品詳細が見えるよう、
 * 4段＋5段目が少し見切れる高さに詰める。
 *
 * 1段の高さ ＝ ボタン 14.933vw ＋ 下マージン 3.733vw ＝ 18.666vw
 * 4段 ＋ ボタン半分 ＝ 18.666vw × 4 ＋ 7.47vw ≒ 82vw（上の padding 分を足して 83vw）
 * 画面の幅基準（vw）にしているのは、サムネイルの大きさ自体が vw で
 * 決まっていて、端末が変わっても「段数」が変わらないようにするため。
 * -------------------------------------------------------------------------- */
@media (orientation: portrait) and (max-width: 574px),
       (orientation: landscape) and (max-width: 780px) {

	#aw_works_view #aw_thumbnails {
		height: 83vw;
		max-height: 83vw;
	}
}