/*
Theme Name: Mihara Dental Performance
Description: Performance-focused child theme for BIRTH.
Template: birth_tcd057
Version: 1.0.10
Text Domain: miharadental-performance
*/

/*
 * BIRTH clears the slider's CSS padding before it finishes setting each
 * slide's inline height. Reserve the same 16:9 height up front on desktop so
 * #main_contents does not jump when the JavaScript initialises the slider.
 */
@media screen and (min-width: 1281px) {
	#header_slider {
		padding-top: 0;
	}

	#header_slider,
	#header_slider .item {
		height: 56.25vw;
	}
}

/*
 * Slick fades in the first slide only after its JavaScript has initialised.
 * Expose that known first slide during the short pre-initialisation state.
 * The mobile rule below also removes its initial fade only.
 */
#header_slider .item1 {
	display: block;
	opacity: 1;
}

/*
 * On mobile, Slick fades in the first hero after its JavaScript finishes.
 * Keep only that initial slide visible immediately; subsequent rotations
 * retain the theme's original transition and no dimensions are changed.
 */
@media screen and (max-width: 1280px) {
	#header_slider:not(.slick-initialized) .item1,
	#header_slider.slick-initialized .item1.slick-current {
		opacity: 1 !important;
		transition: none !important;
	}
}

/*
 * The Google Maps embed ships with a fixed 600 × 450 HTML size. Let it use
 * the available content width at every breakpoint, while retaining that 4:3
 * ratio so narrow screens cannot create horizontal page overflow.
 */
.gmap {
	max-width: 100%;
}

.gmap iframe {
	display: block;
	width: 100% !important;
	max-width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	border: 0;
}

/* Keep the recruitment button below both desktop columns with the standard gap. */
#index_company > .button {
	clear: both;
	margin-top: 50px;
	text-align: center;
}

/*
 * Give the schedule table 100px more room on desktop without exceeding the
 * existing content width: its right edge remains aligned with the section.
 */
@media screen and (min-width: 1281px) {
	#index_company .right_area {
		width: 660px;
	}

	#index_company .left_area {
		width: 520px;
	}
}