/* ==========================================================================
   OC Theme - Base Stylesheet
   ==========================================================================
   This is the main stylesheet for the OC Theme.
   - Blog-specific styles are in oc-blog-style.css
   - Contact-specific styles are in oc-contact-style.css
   ========================================================================== */


/* ==========================================================================
   1. CSS Reset (Minimal Modern Reset)
   ========================================================================== */

*, *::before, *::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
}

html:focus-within {
	scroll-behavior: smooth;
}

img, picture {
	max-width: 100%;
	height: auto;
	display: block;
}

input, button, textarea, select {
	font: inherit;
}

table {
	border-collapse: collapse;
}

a:not([class]) {
	text-decoration-skip-ink: auto;
}

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ==========================================================================
   2. CSS Custom Properties (Variables)
   ==========================================================================
   Color values come from theme.json via --wp--preset--color--*.
   Blog layout variables are defined here as custom properties.
   ========================================================================== */

/* Blog layout variables are defined in theme.json settings.custom.blog
   and available as --wp--custom--blog--* */


/* ==========================================================================
   3. Base Typography
   ==========================================================================
   Restores sensible defaults for common HTML elements.
   ========================================================================== */

body {
	min-height: 100vh;
	font-family: var(--wp--preset--font-family--body, "Noto Sans JP", sans-serif);
	font-size: 16px;
	line-height: 1.8;
	color: var(--wp--preset--color--text);
	background-color: var(--wp--preset--color--background);
}

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	line-height: 1.3;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p {
	margin-bottom: 1rem;
}

ul, ol {
	padding-left: 0;
	list-style: none;
}

a {
	text-decoration: none;
	color: var(--wp--preset--color--accent);
}

a:hover {
	text-decoration: none;
}


/* ==========================================================================
   4. Theme Component Styles
   ========================================================================== */

/* --- Text Color Utility --- */
.text-primary-color {
	color: var(--wp--preset--color--primary);
}

/* --- Clear Fix --- */
.clear-fix {
	clear: both;
}

/* --- Background Image --- */
.bg-image {
	z-index: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* --- Text Background Top (Hero Banner) --- */
.text-bg-top {
	z-index: 0;
	height: 200px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.text-bg-top .caption {
}

.text-bg-top .caption h1,
.text-bg-top .caption h2 {
	color: #fff;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
}

/* --- 404 Page --- */
.content-none {
	text-align: center;
	font-size: 20px;
	padding: 80px 10px;
}

.content-none .error-number {
	font-size: 70px;
}

.content-none .content-none-btn {
	margin: 20px auto;
	text-align: center;
}


/* ==========================================================================
   5. OC Button Style
   ========================================================================== */

.site-btn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 375px;
	height: 73px;
	max-width: 90%;
	border: 1px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	background-color: transparent;
	transition: all 0.5s;
}


/* ==========================================================================
   6. OC Modal Style
   ========================================================================== */

.modal-design {
	height: 80vh;
	overflow: scroll;
	margin: 15% 0 10% 0;
	border-radius: unset;
}

.modal-dialog {
	max-width: 800px;
	padding: 1rem;
}

@media (min-width: 576px) {
	.modal-dialog {
		max-width: 500px;
		margin: 1.75rem auto;
	}
}

.close-btn {
	position: fixed;
	right: 0;
	top: 25px;
}

.modal-side-margin {
	margin: 0;
}

.modal-body-design {
	padding: 0;
}

.round_btn {
	display: block;
	width: 45px;
	height: 45px;
	border: 2px solid #AA8400;
	border-radius: 50%;
	background: #fff;
}

.round_btn::before,
.round_btn::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3px;
	height: 22px;
	background: #AA8400;
}

.round_btn::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.round_btn::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}


/* ==========================================================================
   7. Layout Utilities
   ========================================================================== */

/* --- Container --- */
.container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* --- Row / Grid --- */
.row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* --- Columns (Mobile First) ---
 * 親 .row の gap: 1rem を考慮した calc 値。
 * N 列並びで `100% + (N-1)*gap` の overflow を起こさないように
 * 各列から `(1 - X/12) * gap` を減算している。
 */
.col-6  { flex: 0 0 calc(50% - 0.5rem); max-width: calc(50% - 0.5rem); }
.col-12 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 576px) {
	.col-sm-6  { flex: 0 0 calc(50% - 0.5rem); max-width: calc(50% - 0.5rem); }
	.col-sm-12 { flex: 0 0 100%; max-width: 100%; }
	.mb-sm-0 { margin-bottom: 0; }
	.mb-sm-3 { margin-bottom: 1rem; }
	.align-items-sm-center { align-items: center; }
}

@media (min-width: 768px) {
	.col-md-1  { flex: 0 0 calc(8.333% - 0.917rem);  max-width: calc(8.333% - 0.917rem); }
	.col-md-2  { flex: 0 0 calc(16.666% - 0.833rem); max-width: calc(16.666% - 0.833rem); }
	.col-md-3  { flex: 0 0 calc(25% - 0.75rem);      max-width: calc(25% - 0.75rem); }
	.col-md-4  { flex: 0 0 calc(33.333% - 0.667rem); max-width: calc(33.333% - 0.667rem); }
	.col-md-5  { flex: 0 0 calc(41.666% - 0.583rem); max-width: calc(41.666% - 0.583rem); }
	.col-md-6  { flex: 0 0 calc(50% - 0.5rem);       max-width: calc(50% - 0.5rem); }
	.col-md-7  { flex: 0 0 calc(58.333% - 0.417rem); max-width: calc(58.333% - 0.417rem); }
	.col-md-8  { flex: 0 0 calc(66.666% - 0.333rem); max-width: calc(66.666% - 0.333rem); }
	.col-md-9  { flex: 0 0 calc(75% - 0.25rem);      max-width: calc(75% - 0.25rem); }
	.col-md-10 { flex: 0 0 calc(83.333% - 0.167rem); max-width: calc(83.333% - 0.167rem); }
	.col-md-11 { flex: 0 0 calc(91.666% - 0.083rem); max-width: calc(91.666% - 0.083rem); }
	.col-md-12 { flex: 0 0 100%; max-width: 100%; }
	.offset-md-1 { margin-left: 8.333%; }
}

@media (min-width: 992px) {
	.col-lg-10 { flex: 0 0 calc(83.333% - 0.167rem); max-width: calc(83.333% - 0.167rem); }
	.col-lg-12 { flex: 0 0 100%; max-width: 100%; }
	.offset-lg-1 { margin-left: 8.333%; }
}


/* ==========================================================================
   8. Display Utilities
   ========================================================================== */

.d-flex   { display: flex; }
.d-block  { display: block; }
.d-none   { display: none; }


/* ==========================================================================
   9. Flexbox Utilities
   ========================================================================== */

.flex-row      { flex-direction: row; }
.flex-column   { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }

.justify-start,   .justify-content-start   { justify-content: flex-start; }
.justify-center,  .justify-content-center  { justify-content: center; }
.justify-end,     .justify-content-end     { justify-content: flex-end; }
.justify-between, .justify-content-between { justify-content: space-between; }

.align-start,  .align-items-start  { align-items: flex-start; }
.align-center, .align-items-center { align-items: center; }
.align-end,    .align-items-end    { align-items: flex-end; }

.align-self-end { align-self: flex-end; }


/* ==========================================================================
   10. Text Utilities
   ========================================================================== */

.text-start  { text-align: left; }
.text-center { text-align: center; }
.text-end    { text-align: right; }

.text-dark { color: var(--wp--preset--color--text); }

.fw-bold   { font-weight: bold; }
.fw-normal { font-weight: normal; }


/* ==========================================================================
   11. Width Utilities
   ========================================================================== */

.w-100 { width: 100%; }


/* ==========================================================================
   11b. Font Size Utilities
   ========================================================================== */

.fs-4 { font-size: 1.5rem; }
.fs-5 { font-size: 1.25rem; }


/* ==========================================================================
   11c. Misc Utilities
   ========================================================================== */


.img-cover-white {
	position: relative;
}
.img-cover-white::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.15);
	pointer-events: none;
}

.more-info-btn-cover {
	display: flex;
	justify-content: center;
}
.more-info-btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 0.75em 2em;
	border: 1px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	background-color: transparent;
	transition: all 0.3s;
}
.more-info-btn:hover {
	background-color: var(--wp--preset--color--primary);
	color: #fff;
}


/* ==========================================================================
   12. Margin Utilities
   ==========================================================================
   Scale: 0=0, 1=0.25rem, 2=0.5rem, 3=1rem, 4=1.5rem, 5=3rem
   ========================================================================== */

/* --- All sides --- */
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 1rem; }
.m-4 { margin: 1.5rem; }
.m-5 { margin: 3rem; }

/* --- Top --- */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }

/* --- Bottom --- */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }

/* --- Start (Left in LTR) --- */
.ms-0 { margin-left: 0; }
.ms-1 { margin-left: 0.25rem; }
.ms-2 { margin-left: 0.5rem; }

/* --- End (Right in LTR) --- */
.me-0 { margin-right: 0; }
.me-1 { margin-right: 0.25rem; }
.me-2 { margin-right: 0.5rem; }

/* --- Vertical (Top + Bottom) --- */
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-3 { margin-top: 1rem; margin-bottom: 1rem; }
.my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-5 { margin-top: 3rem; margin-bottom: 3rem; }

/* --- Horizontal Auto --- */
.mx-auto { margin-left: auto; margin-right: auto; }


/* ==========================================================================
   13. Padding Utilities
   ==========================================================================
   Scale: 0=0, 1=0.25rem, 2=0.5rem, 3=1rem, 4=1.5rem, 5=3rem
   ========================================================================== */

/* --- All sides --- */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }

/* --- Horizontal (Left + Right) --- */
.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }
.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-5 { padding-left: 3rem; padding-right: 3rem; }

/* --- Vertical (Top + Bottom) --- */
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }


/* ==========================================================================
   14. Breadcrumbs
   ========================================================================== */

.bread-crumbs {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-size: 0.75rem;
	margin: 0;
	padding: 10px 1.5rem;
	list-style: none;
}

.bread-crumbs .bc-home-icon {
	margin-right: 3px;
	vertical-align: baseline;
}

.bread-crumbs .bc-link {
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--accent, #0A4B8B);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bread-crumbs .bc-item {
	display: inline-block;
	color: var(--wp--preset--color--text-muted, #707070);
	font-size: 0.75rem;
	font-weight: 500;
	margin: 0 0.75em 0 0;
}

.bread-crumbs .bc-item:not(.bc-home)::before {
	content: "";
	display: inline-block;
	width: 0.45em;
	height: 0.45em;
	margin: 0 0.75em 0 0;
	border-top: 2px solid var(--wp--preset--color--text-muted, #707070);
	border-right: 2px solid var(--wp--preset--color--text-muted, #707070);
	transform: rotate(45deg) translateY(15%);
}