/* ==========================================================
50th anniversary / history page (50th.html) dedicated styles
========================================================== */

/* ------------------------
on-page anchor nav
------------------------*/
.hx_nav { display: flex; justify-content: center; flex-wrap: wrap; margin: 0 auto 60px auto; }
.hx_nav li { margin: 8px 30px; }
.hx_nav a { color: #1d3d79; text-decoration: none; letter-spacing: 1px; transition: 0.3s; }
.hx_nav a:hover { opacity: 0.6; }

@media screen and (min-width: 651px) { .hx_nav a { font-size: 1.1em; } }
@media screen and (max-width: 650px) {
	.hx_nav { display: flex; flex-direction: column; align-items: center; }
	.hx_nav li { margin: 8px 0; text-align: center; }
}

/* ------------------------
section common
------------------------*/
.hx_section { margin-bottom: 8%; padding-top: 30px; }

.hx_h2 { text-align: center; font-weight: bold; letter-spacing: 2px; margin-bottom: 40px; }

@media screen and (min-width: 651px) { .hx_h2 { font-size: 1.5em; } }
@media screen and (max-width: 650px) { .hx_h2 { font-size: 1.2em; } }

.hx_h3 { text-align: center; font-weight: bold; letter-spacing: 1px; margin: 20px 0 35px 0; }
@media screen and (min-width: 651px) { .hx_h3 { font-size: 1.2em; } }
@media screen and (max-width: 650px) { .hx_h3 { font-size: 1.05em; } }

/* ------------------------
dummy / photo box
------------------------*/
.hx_photo_box { position: relative; width: 100%; overflow: hidden; background: #e6ded4; }
.hx_photo_box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.hx_photo_box.r_16_9 { padding-top: 56.25%; }
.hx_photo_box.r_4_3 { padding-top: 75%; }
.hx_photo_box.r_3_4 { padding-top: 133.3%; }
.hx_photo_box.r_1_1 { padding-top: 100%; }

.hx_photo_box.vintage img { filter: sepia(0.55) saturate(1.6) hue-rotate(300deg) contrast(0.95) brightness(0.9); }

.hx_caption { font-size: 0.8em; color: #666; margin-top: 10px; }

/* ------------------------
timeline (トーナメント開催の歴史)
------------------------*/
.hx_timeline { position: relative; z-index: 0; margin: 40px 0; }
.hx_timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #c9bfa4; opacity: 0.2; z-index: 0; }

.hx_entry { position: relative; margin-bottom: 70px; }
.hx_entry:last-child { margin-bottom: 0; }

.hx_badge { position: relative; z-index: 1; width: 100px; height: 100px; border-radius: 50%; background: #a6975c; color: #FFF; display: flex; align-items: center; justify-content: center; flex-direction: column; font-family: 'Merriweather', serif; font-weight: bold; letter-spacing: 1px; text-align: center; line-height: 1.3; margin: 0 auto 30px auto; }

.hx_row { display: flex; justify-content: space-between; align-items: center; }
.hx_row .hx_photo { width: 44%; }
.hx_row .hx_text { width: 44%; }
.hx_row.hx_reverse { flex-direction: row-reverse; }

.hx_text h3 { font-weight: bold; color: #1d3d79; margin-bottom: 15px; }
.hx_text p { line-height: 190%; }

.hx_winner_list { margin-top: 15px; }
.hx_winner_list li { display: flex; align-items: baseline; border-bottom: 1px dotted #CCC; padding: 6px 0; }
.hx_winner_list .w_round { width: 45%; color: #666; font-size: 0.85em; }
.hx_winner_list .w_name { width: 55%; font-weight: bold; }

@media screen and (min-width: 651px) {
	.hx_badge { font-size: 1.3em; }
	.hx_text h3 { font-size: 1.3em; }
}

@media screen and (max-width: 650px) {
	.hx_timeline::before { opacity: 0.12; }
	.hx_badge { width: 80px; height: 80px; font-size: 1em; margin-bottom: 20px; }
	.hx_row, .hx_row.hx_reverse { flex-direction: column; }
	.hx_row .hx_photo, .hx_row .hx_text { width: 100%; }
	.hx_row .hx_photo { margin-bottom: 20px; }
	.hx_text h3 { font-size: 1.15em; text-align: center; }
	.hx_text p { text-align: center; }
}

/* ------------------------
JLPGA section heading
------------------------*/
.jlpga_title { position: relative; z-index: 1; font-weight: bold; text-align: center; letter-spacing: 2px; color: #1d3d79; margin: 20px 0 40px 0; }

/* white halo so the translucent timeline line doesn't cut through text sitting on top of it */
.hx_text_glow {
	position: relative; z-index: 1;
	text-shadow:
		1px 0 0 #FFF, -1px 0 0 #FFF, 0 1px 0 #FFF, 0 -1px 0 #FFF,
		2px 2px 0 #FFF, -2px 2px 0 #FFF, 2px -2px 0 #FFF, -2px -2px 0 #FFF,
		0 0 6px #FFF, 0 0 6px #FFF, 0 0 10px #FFF, 0 0 10px #FFF;
}

/* connector: spacing wrapper for each JLPGA era's gold badge (line comes from .hx_timeline::before, which now spans this whole section) */
.hx_connector { text-align: center; padding-top: 50px; padding-bottom: 20px; }

.jlpga_era_title { text-align: center; font-weight: bold; color: #1d3d79; margin-bottom: 20px; }
@media screen and (min-width: 651px) { .jlpga_era_title { font-size: 1.15em; } }
@media screen and (max-width: 650px) { .jlpga_era_title { font-size: 1em; } }

@media screen and (min-width: 651px) {
	.jlpga_title { font-size: 1.5em; }
}
@media screen and (max-width: 650px) {
	.jlpga_title { font-size: 1.2em; }
}

/* ------------------------
JLPGA winners card grid
------------------------*/
.jlpga_grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 3%; }
.jlpga_card { width: 17.6%; margin-bottom: 30px; }
.jlpga_card .hx_photo_box { border: 4px solid #cba94a; }
.jlpga_card .meta { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
.jlpga_card .year { font-family: 'Merriweather', serif; font-weight: bold; color: #a6975c; }
.jlpga_card .name { font-weight: bold; }

@media screen and (min-width: 651px) { .jlpga_card .year { font-size: 1.5em; } .jlpga_card .name { font-size: 0.95em; } }

@media screen and (max-width: 650px) {
	.jlpga_card { width: 48%; }
	.jlpga_card .year { font-size: 1.2em; }
	.jlpga_card .name { font-size: 0.85em; }
}

/* ------------------------
step-up tour supplemental info
------------------------*/
.info_box { background: #f7f5f1; border: 1px solid #c9bfa4; border-radius: 8px; padding: 20px 25px; margin: 40px 0 30px 0; }
.info_box_title { font-weight: bold; color: #7e7761; margin-bottom: 8px; letter-spacing: 1px; }
.info_box p { line-height: 180%; }

/* ------------------------
開場当時の様子
------------------------*/
.opening_wrap { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.opening_wrap .opening_photo { width: 65%; }
.opening_wrap .opening_photo img { display: block; width: 100%; height: auto; }
.opening_wrap .opening_text { width: 31%; }
.opening_text h3 { font-weight: bold; margin-bottom: 20px; }
.opening_text p { line-height: 200%; margin-bottom: 15px; }

.opening_photos { display: flex; justify-content: space-between; }
.opening_photos li { width: 32%; }
.opening_photos .hx_caption { text-align: center; }

@media screen and (min-width: 651px) { .opening_text h3 { font-size: 1.8em; } }

@media screen and (max-width: 650px) {
	.opening_wrap { display: block; }
	.opening_wrap .opening_photo, .opening_wrap .opening_text { width: 100%; }
	.opening_wrap .opening_photo { margin-bottom: 20px; }
	.opening_text { text-align: center; }
	.opening_text h3 { font-size: 1.3em; }
	.opening_photos { display: block; }
	.opening_photos li { width: 100%; margin-bottom: 20px; }
}

/* ------------------------
クラブハウスの今昔
------------------------*/
.era_block { display: flex; justify-content: space-between; align-items: center; margin: 30px 0 25px 0; }
.era_block.hx_reverse { flex-direction: row-reverse; }
.era_block .hx_photo { width: 48%; }
.era_block .era_text { width: 48%; }

.era_year { font-family: 'Merriweather', serif; font-weight: bold; color: #a6975c; line-height: 1; }
.era_heading { font-weight: bold; margin: 15px 0; }
.era_text p { line-height: 180%; }

.era_gallery { display: flex; flex-wrap: wrap; gap: 1.5%; margin-bottom: 60px; }
.era_gallery li { width: 32.3%; margin-bottom: 1.5%; }

@media screen and (min-width: 651px) {
	.era_year { font-size: 3em; }
	.era_heading { font-size: 1.4em; }
}

@media screen and (max-width: 650px) {
	.era_block, .era_block.hx_reverse { display: block; }
	.era_block .hx_photo, .era_block .era_text { width: 100%; }
	.era_block .hx_photo { margin-bottom: 20px; }
	.era_text { text-align: center; margin-bottom: 30px; }
	.era_year { font-size: 2.2em; }
	.era_heading { font-size: 1.15em; }
	.era_gallery li { width: 48.5%; margin-bottom: 3%; }
}