/*
Theme Name: BIRTH 子テーマ（いちはし整形外科）
Template: birth_tcd057
Version: 1.0.0
Description: TCD「BIRTH」(birth_tcd057) の子テーマ。親テーマは TCD の配布物のまま更新し、このサイト用の変更は functions.php に置く。
*/

/*
 * このサイト用のCSSの多くは、テーマオプションの「カスタムCSS」と
 * 外観 > カスタマイズ > 追加CSS に保存されている。
 * 親テーマのデザインそのものを変えるものだけ、ここに書く。
 */

/* トップ：最初の枠（新着情報）をスライダー写真に重ねず、写真を下の端まで見せる（親は top:-80px で重ねている） */
.index_content:first-of-type { top: 0; margin: 0 auto; }

/* トップ：「WEB問診」「混雑状況」ボタン（画像をやめてCSSで表示。スマホでも横並び） */
div.webmonsin { display: flex; justify-content: center; gap: 20px; padding: 0 15px 25px; }
div.webmonsin a.webmonsin_button {
	display: flex; align-items: center; justify-content: center; gap: 0.6em;
	box-sizing: border-box; flex: 0 1 300px; height: 43px; padding: 0 1em;
	border-radius: 6px; color: #fff; font-size: 20px; font-weight: bold; letter-spacing: 0.05em; line-height: 1;
	text-decoration: none; white-space: nowrap; transition: opacity 0.2s;
}
div.webmonsin a.webmonsin_button::before {
	content: ""; flex: none; width: 0.45em; height: 0.45em;
	border-top: 3px solid currentColor; border-right: 3px solid currentColor; transform: rotate(45deg);
}
div.webmonsin a.webmonsin_button:hover { color: #fff; opacity: 0.85; }
div.webmonsin a.webmonsin_button--monshin { background: #00a1e9; }
div.webmonsin a.webmonsin_button--konzatsu { background: #f39800; }
@media screen and (min-width: 1281px) {
	div.webmonsin a.webmonsin_button { flex-basis: 400px; height: 57px; font-size: 24px; }
}
@media screen and (max-width: 650px) {
	div.webmonsin { gap: 10px; padding: 10px 10px 15px; }
	div.webmonsin a.webmonsin_button { height: 35px; font-size: 16px; }
}

/*
 * スマホ・タブレット（1280px以下）：上までスクロールしたときの揺れと、更新時のずれ対策
 * 親の responsive.css は body を画面サイズの絶対配置（position:absolute; top/left/right/bottom:0）にしていて、
 * アドレスバーの伸び縮みのたびに大きさが計算し直されるので、普通の配置に戻す。
 * responsive.css はこのファイルより後に読み込まれるので、html body で指定を強くしている。
 */
@media screen and (max-width: 1280px) {
	html body { position: static; }

	/* 下層ページ：本文の上の余白（親は #main_col の margin-top:40px）が外枠を突き抜けて、
	   ヘッダーの下に帯（裏のメニューが透けて灰色に見える）ができるので、内側の余白に変える */
	#container #main_col { margin-top: 0; padding-top: 40px; }

	/* トップ：WEB問診・混雑状況ボタンを固定ヘッダーにくっつけない */
	div.webmonsin { padding-top: 12px; }
}

/* WEB問診ページ（/webmonsin）：「WEB問診を開始する」ボタン（画像をやめてCSSで表示。本文のリンクに class="webmonsin_start"） */
.post_content a.webmonsin_start {
	display: flex; align-items: center; justify-content: center; gap: 0.6em;
	box-sizing: border-box; width: 380px; max-width: 100%; height: 58px; margin: 18px auto;
	border-radius: 6px; background: #00a1e9; color: #fff; font-size: 22px; font-weight: bold; letter-spacing: 0.05em; line-height: 1;
	text-decoration: none; transition: opacity 0.2s;
}
.post_content a.webmonsin_start::before {
	content: ""; flex: none; width: 0.45em; height: 0.45em;
	border-top: 3px solid currentColor; border-right: 3px solid currentColor; transform: rotate(45deg);
}
.post_content a.webmonsin_start:hover { color: #fff; text-decoration: none; opacity: 0.85; }
@media screen and (max-width: 650px) {
	.post_content a.webmonsin_start { height: 50px; font-size: 18px; }
}