/*
Theme Name: carobex 2026
Theme URI: --
Description: --
Author: --
Author URI: --
*/

:root{
	--color-black:#232323;
	--color-navy:#002656;
	--color-navy-rgb:0, 38, 86;
	--color-blue:#185589;

	--bg-color-blue:#E4F4FF;

	--border-color:#B4B4B4;

	--h-header:120px;

	--px:20px;
	--py:90px;
	
	--bs-body-color:var(--color-black);
	--bs-border-radius:25px;
}

/* WP
----------------------------------------------- */
body.admin-bar{margin-top:0;}
@media (max-width:1199.98px){
	body.admin-bar #header,
	body.admin-bar [class*="drawer-pannel"]{top:32px;}
}
@media (max-width:782px){
	#wpadminbar{position:fixed;}
	body.admin-bar{margin-top:0;}
	body.admin-bar #header,
	body.admin-bar [class*="drawer-pannel"]{top:46px;}
}

/* Bootstrap
----------------------------------------------- */
.container,
.container-fluid,
.row:not([class*="g-"])/* :not([class*="gx-"]) */{
	--bs-gutter-x:calc(var(--px) * 2);
}

.row.g-sm{
	--bs-gutter-x:calc(var(--px) * 1);
	row-gap:calc(var(--px));
}

@media (max-width:991.98px){
	.container,
	.container-fluid{max-width:100%;}
}

/*
.form-control-plaintext{background-color:transparent !important;}
select{display:inline-block !important; width:auto !important;}
*/

/* Main Layout
----------------------------------------------- */
html{font-size:16px;}
body{
	font-family:"Zen Maru Gothic", sans-serif;
	font-style:normal;
	font-weight:500;
	line-height:1.8;
}
body.menu-open{
	overflow:hidden;
}
#container{line-height:1.8;}

.py-content{padding-top:var(--py); padding-bottom:var(--py);}
.py-content-sm{padding-top:calc(var(--py) / 2); padding-bottom:calc(var(--py) / 2);}

.my-content{margin-top:var(--py); margin-bottom:var(--py);}
.mb-content{margin-bottom:var(--py);}
.my-content-sm{margin-top:calc(var(--py) / 2); margin-bottom:calc(var(--py) / 2);}
.mt-content-sm{margin-top:calc(var(--py) / 2);}
.mb-content-sm{margin-bottom:calc(var(--py) / 2);}

.thin-lg{max-width:1000px; margin-left:auto; margin-right:auto;}
.container.thin-lg{max-width:calc(1000px + var(--px) * 2);}

@media (min-width:768px){
	html{font-size:18px;}
}
@media (max-width:767.98px){
	:root{
		--py:60px;
		--bs-border-radius:20px;
	}
}

/* header & footer
-------------------------------------------------------------- */
@media (min-width:1400px){
	#header>*,
	#footer>*{max-width:none; padding-left:calc(80px - var(--px)); padding-right:calc(80px - var(--px));}
}

.nav-link{transition:.3s;}
.nav-menu .nav-link{color:var(--color-black);}
.nav-menu .nav-link:hover{color:var(--color-navy);}

.nav-menu li.nav-btn .nav-link{color:white; background-color:var(--color-navy); border:1px solid transparent; border-radius:10em;}
.nav-menu li.nav-btn .nav-link:hover{color:var(--color-navy); background-color:transparent; border-color:var(--color-navy);}

/* header
-------------------------------------------------------------- */
#header{display:flex; width:100%; align-items:center; background-color:white; position:relative;}
#header .nav-bar{display:flex; height:var(--h-header); align-items:center; justify-content:space-between;}

a.brand{min-width:380px; position:relative; z-index:1000;}
a.brand img{width:100%;}

#gnavi{gap:1rem;}

#lang-navi{
	justify-content:center;
	gap:.5rem;
}
#lang-navi .nav-link{
	display:flex;
	justify-content:center;
	align-items:center;
	width:2.6em;
	aspect-ratio:1/1;
	padding:0;
	color:var(--color-black);
	background-color:#eee;
	border-radius:10em;
}
#lang-navi li.is-active .nav-link,
#lang-navi .nav-link:hover{
	color:white;
	background-color:var(--color-black);
}

[class*="drawer-pannel"]{
	display:flex;
	gap:1rem;
}

@media (min-width:1200px){
	#btn-menu{display:none;}
}
@media (max-width:1199.98px){
	:root {
		--h-header:70px;
	}
	#container{padding-top:var(--h-header);}

	a.brand{min-width:inherit; max-width:70%;}

	#header{position:fixed; top:0; left:0; z-index:1000;}
	#gnavi{flex-direction:column; text-align:center; font-size:1.2em; max-width:10em; margin:0 auto;}

	[class*="drawer-pannel"]{
		flex-direction:column;
		width:100%;
		height:100vh;
		height:100dvh;
		padding:calc(var(--h-header) + 2em) var(--px) var(--py);
		position:fixed;
		top:0;
		right:0;
		background:white;
		overflow-y:auto;
		z-index:999;
		-webkit-transform:translateX(100%);
		transform:translateX(100%);
	}

	body.menu-open [class*="drawer-pannel"]{
		-webkit-transform:translateX(0);
		transform:translateX(0);
		-webkit-transition:ease .3s;
		transition:ease .3s;
	}
	
}

/* footer
--------------------------------------------------------------*/
#footer{font-size:16px;}

#footer .upper{
	display:flex;
	justify-content:center;
	color:white;
	background:url(assets/img/bg-footer-dmy.webp) no-repeat center center/cover;
}
#footer .upper p{
	display:flex;
	flex-direction:column;
	font-size:clamp(27px, 4vw, 38px);
	line-height:1.4;
	white-space:pre-wrap; /* flexにすると半角スペースがなくなる */
}
#fnavi{flex-direction:column; align-items:center; row-gap:.5em;}

#footer address{text-align:center;}
#footer address .d-flex{flex-direction:column;}

#copyright{display:block; padding-top:1rem; font-size:13px; text-align:center; border-top:1px solid var(--border-color);}

@media (min-width:992px){
	#footer .upper{
		align-items:center;
		height:400px;
	}
	#footer .upper p{
		flex-direction:row;
	}
	#footer .col-navi{order:1; min-width:580px; max-width:580px;}
	#fnavi{flex-direction:row; justify-content:flex-end;}

	#footer address{text-align:left;}
	#footer address .d-flex{flex-direction:row; flex-wrap:wrap; gap:0 1em;}

	#copyright{font-size:14px;}
}

/* Cover
----------------------------------------------- */
#cover{position:relative; overflow-x:clip;}
#cover h1{
	display:inline-flex;
	flex-direction:column;
	align-items:flex-start;
	gap:.25em;
	font-size:clamp(20px, 4vw, 45px);
	color:white;
/*
	-webkit-text-stroke:6px var(--color-navy);
	text-stroke:6px  var(--color-navy);
	paint-order:stroke;
*/
}
#cover h1>*{
	background-color:rgba(var(--color-navy-rgb),.85);
	padding:0 .25em;
}
#cover.swiper-active .h1-wrap{display:flex; align-items:center; width:100%; height:100%; position:absolute; top:0; left:0; z-index:10;}

.cover-swiper{overflow:visible;}
.cover-swiper .swiper-wrapper{align-items:center;}
.cover-swiper .swiper-slide{width:min(900px, 90%);}
.cover-swiper .swiper-slide img{
	display:block;
	width:100%;
	border-radius:106px;
}

.cover-swiper.swiper-count-2 .swiper-slide,
.cover-swiper.swiper-count-1 .swiper-slide{width:100%;}
.cover-swiper.swiper-count-2 .swiper-slide img,
.cover-swiper.swiper-count-1 .swiper-slide img{
	max-height:calc(100vh - var(--h-header));
	max-height:calc(100dvh - var(--h-header));
	object-fit:cover;
	border-radius:0 !important;
}

@media (max-width:991.98px){
	#cover.swiper-active .h1-wrap{align-items:flex-end;}
	#cover h1{transform:translateY(20%);}
}
@media (max-width:767.98px){
	#cover h1{margin-left:calc(var(--px) / -2);}
	.cover-swiper .swiper-slide img{border-radius:45px;}
}

/* h
--------------------------------------------------------------*/
p, .mb-p{margin-bottom:1.6rem;}
strong{font-weight:700;}

h1,.h1,h2,.h2,h3,.h3,h4,.h4{line-height:1.6; font-weight:500; margin-bottom:0;}
h1,.h1{font-size:min(8vw, 42px); margin:0;}
h2,.h2{font-size:min(8vw, 42px); margin-bottom:3rem; color:var(--color-navy); letter-spacing:.1em;}
h3,.h3{font-size:min(5.5vw, 32px); margin-bottom:2rem; color:var(--color-navy);}
h4,.h4{font-size:min(4.8vw, 26px); margin-bottom:1rem;}

h2 span.en{display:block; font-size:1rem;}
.fs-lg{font-size:clamp(30px, 4vw, 38px);}

.h-label{text-align:center;}
.h-label span{display:inline-block; color:white; background-color:var(--color-navy); padding:.15em 1em; border-radius:10em;}

.normal{font-size:1rem !important;}
.bold{font-weight:700 !important;}

.c-navy{color:var(--color-navy);}
.c-white{color:white;}

.bg-navy{background-color:var(--color-navy); color:white;}
.bg-grad{background:url(assets/img/bg-grad.webp) no-repeat center bottom/cover;}
.bg-blue{background-color:var(--bg-color-blue);}
.bg-gray{background-color:#F6FAFD;}

.wave-y{width:100%; overflow-x:clip;}
.wave-y::before,
.wave-y::after{
	content:'';
	display:block;
	width:calc(100% + 10px);
	aspect-ratio:1490/50;
	background-color:var(--color-navy);
	-webkit-mask:url(assets/img/bg-wave.svg) no-repeat center top/cover;
	mask:url(assets/img/bg-wave.svg) no-repeat center top/cover;
}
.wave-y::before{transform:translateY(2px);}
.wave-y::after{transform:translateY(-2px) scale(-1,-1);}

.wave-btm{text-align:center;}
.wave-btm::after{
	content:'';
	display:block;
	width:100%;
	height:11px;
	margin-top:1rem;
/* 	aspect-ratio:240/11; */
	background:url(assets/img/wave.svg) no-repeat center center/contain;
}

.btn{
	--bs-btn-padding-x:2em;
	--bs-btn-padding-y:1em;
	--bs-btn-font-weight:500;
	--bs-btn-border-radius:10em;
}

.btn-ol-main{
	--bs-btn-color:var(--color-blue);
	--bs-btn-bg:white;
	--bs-btn-border-color:var(--color-blue);

	--bs-btn-hover-color:white;
	--bs-btn-hover-bg:var(--color-blue);;
}

.btn-arrow{
	--bs-btn-padding-x:1.5em;
	display:inline-flex;
	justify-content:space-between;
	align-items:center;
	width:min(100%, 360px);
}
.btn-arrow::before,
.btn-arrow::after{
	content:'';
	width:.5em;
	aspect-ratio:1/1;
	border:1px solid var(--color-blue);
	border-width:2px 2px 0 0;
	transform:translateY(1px) rotate(45deg);
}
.btn-arrow::before{
	transform:translateY(1px) rotate(45deg) scale(-1,-1);
	visibility:hidden;
}

.btn-ol-main.btn-arrow:hover::after{border-color:white;}

/* content-header
----------------------------------------------- */
.content-header{height:240px; background-color:var(--color-navy); position:relative; position:relative;}
.content-header>*{position:relative;}
/*
.content-header::before{
	content:'';
	display:block;
	width:50%;
	height:100%;
	background:url(assets/img/bg-header.webp) no-repeat left center/cover;
	position:absolute;
	top:0;
	right:0;
	opacity:.3;
}
*/
.content-header::after{
	content:'';
	display:block;
	width:100%;
	aspect-ratio:1490/50;
	background-color:white;
	-webkit-mask:url(assets/img/bg-wave.svg) no-repeat center top/cover;
	mask:url(assets/img/bg-wave.svg) no-repeat center top/cover;
	position:absolute;
	bottom:-2px;
	left:0;
	z-index:2;
}
.content-header h1,
.content-header .h1{color:white;}
.content-header h1 span,
.content-header .h1 span{display:block; font-size:1rem; font-weight:500;}

.breadcrumbs{font-size:13px; padding:1rem 0 2rem;}
.breadcrumbs,
.breadcrumbs a{color:white;}
.breadcrumbs>span{display:flex; gap:.5em; flex-wrap:wrap;}
.breadcrumbs>span>span{display:inline-flex; align-items:center; gap:.5em;}
.breadcrumbs>span>span::after{
	content:'';
	display:inline-block;
	width:.5em;
	aspect-ratio:1/1;
	border:1px solid white;
	border-width:1px 1px 0 0;
	transform:translateY(1px) rotate(45deg);
}
.breadcrumbs>span>span.breadcrumb_last::after{content:none;}

@media (max-width:575.98px){
	.content-header{height:160px;}
	.breadcrumbs{padding:.75rem 0;}
}


/* widget
----------------------------------------------- */


/* archive & single
----------------------------------------------- */
/*
.single-header,
.archive-header{
}
*/

.archive-list .post{border-bottom:1px solid rgba(0,0,0,.1);}
.archive-list .post a{display:flex; column-gap:1em; color:var(--color-dark); padding:.75em .5em;}
.archive-list .post a:hover{background-color:rgba(0,0,0,.02);}
.archive-list .post a h2{color:var(--color-dark); font-size:1rem; margin:0;}
.archive-list .post a time{min-width:8em;}

.archive-grid .post-tmb{margin-bottom:.5rem;}
.single.category-case header time{display:none;}

/* the_posts_pagination */
nav.navigation{justify-content:center;}
nav.navigation ul{display:flex; column-gap:20px; margin:0; padding:0; list-style:none;}
nav.navigation ul *{display:flex;}
nav.navigation ul li>*{width:40px; aspect-ratio:1/1; color:var(--color-navy); border:1px solid var(--color-navy); justify-content:center; align-items:center; border-radius:20px;}
nav.navigation ul li a{text-decoration:none;}
nav.navigation ul li a:hover,
nav.navigation ul li>*.current{color:white; background-color:var(--color-navy); border-color:var(--color-navy);}

@media (max-width:575px){
	.archive-block.archive-list{padding:20px 0;}
	.archive-list .post a{flex-direction:column;}
	.archive-list .post a time{font-size:.85em;}
}

/* single
----------------------------------------------- */


/* pages
--------------------------------------------------------------*/

/* home
--------------------------------------------------------------*/
#pos-about{overflow-x:clip; z-index:1;}
#pos-about h2{margin-bottom:2em; text-shadow:0 0 2px white, 0 0 4px white; position:relative; width:60%; max-width:13em;}

#pos-about .row>*{position:relative; z-index:1;}
#pos-about .row>*::after{
	content:'';
	width:55%;
	max-width:260px;
	aspect-ratio:1/1;
	background:url(assets/img/abo.webp) no-repeat center center/cover;
	border-radius:50%;
	position:absolute;
	top:0;
	right:0;
	transform:translate(0,-15%);
	z-index:-1;
}
/*
#pos-about h2::after{
	content:'';
	width:min(45%, 320px);
	aspect-ratio:1/1;
	background:url(assets/img/abo.webp) no-repeat center center/cover;
	border-radius:50%;
	position:absolute;
	top:50%;
	right:0;
	z-index:-1;
	transform:translate(5%,-50%);
}
*/

#pos-service{position:relative;}
#pos-service.wave-y::before{position:absolute; top:0; left:0; transform:translateY(calc(-100% + 2px)); z-index:1;}

#pos-facility .row.g-0{
	margin-right:calc(var(--px) * -1);
	margin-left:calc(var(--px) * -1);
}

@media (min-width:768px){
	#pos-about h2{line-height:2;}
}
@media (min-width:992px){
	#pos-about h2{position:static; width:100%; max-width:inherit;}
	#pos-about .row>*::after{
		width:105%;
		max-width:inherit;
		right:auto;
		left:100%;
		top:50%;
		transform:translate(0,-50%);
	}
}
@media (min-width:1200px){
	#pos-about p{line-height:2.2; font-size:20px;}
	#pos-about .row>*::after{transform:translate(10%,-50%);}
}

/* about
--------------------------------------------------------------*/
#pos-message p span{display:block; line-height:1.6;}

.round-box{
	display:flex;
	gap:0 2rem;
	height:246px;
	background-color:var(--bg-color-blue);
	border-radius:var(--bs-border-radius);
}
.round-box p.h3{
	align-self:center;
	font-weight:700;
	padding:1em var(--px);
	margin:0;
}
.round-box[class*="im-"]::before{
	content:'';
	min-width:325px;
	border-radius:var(--bs-border-radius) 0 0 var(--bs-border-radius);
}
.round-box.im-01::before{background:url(assets/img/phi01.webp) no-repeat center center/cover;}
.round-box.im-02::before{background:url(assets/img/phi02.webp) no-repeat center center/cover;}
.round-box.im-03::before{background:url(assets/img/phi03.webp) no-repeat center center/cover;}

.table-bordered{
	--bs-table-border-color:#B4B4B4;
	border:1px solid var(--bs-table-border-color);
}
.table-bordered>:not(caption)>*>*{
	padding:1rem 2em;
	border-width:0;
}
.table-bordered th{background-color:#EFF7FC; white-space:nowrap; width:10%;}

.g-map{
	width:100%;
	aspect-ratio:16/9;
}
.g-map iframe{
	width:100%;
	height:100%;
	object-fit:cover;
}

@media (max-width:767.98px){
	.round-box{
		flex-direction:column;
		height:auto;
		padding:.75em;
	}
	.round-box[class*="im-"]::before{
		width:100%;
		min-width:inherit;
		aspect-ratio:2/1;
		border-radius:var(--bs-border-radius);
	}
	
	.table-bordered>:not(caption)>*>*{display:block; padding:1rem;}
	.table-bordered th{white-space:normal; width:100%;}
}


/* products
--------------------------------------------------------------*/
.item{background-color:#e8F2F8; border-radius:var(--bs-border-radius); padding:2rem var(--px);}

.item .inner{max-width:700px; margin:0 auto;}

.item .col-chara{text-align:center; padding-left:0; padding-right:0;}
.item .chara-wrap{/* display:flex; flex-direction:column-reverse; gap:1rem; */ margin-bottom:1rem; /* position:sticky; top:40px; */}
.item .chara-wrap img{display:block; max-width:180px; margin:0 auto;}
#item-sorbex .chara-wrap img{max-width:150px;}
/*
.speech-bubble{
	position:relative;
	display:flex;
	justify-content:center;
	text-align:left;
	padding:1em;
	background-color:var(--bg-color-blue);
	color:var(--color-blue);
	border-radius:12px;
	font-size:14px;
}
.speech-bubble::after {
	content:'';
	position:absolute;
	top:100%;
	left:50%;
	border-width:10px;
	border-style:solid;
	border-color:var(--bg-color-blue) transparent transparent transparent;
	transform:translateX(-50%);
}
*/
.item .video-container{
	width:100%;
	max-width:250px;
	margin:0 auto;
}
.item .video-container video{
	display:block;
	width:100%;
	height:auto;
}

.item h3{font-weight:700; color:var(--color-navy); text-align:center;}
.item h3 span{display:block; font-size:1rem;}
.item h4{font-size:1rem; font-weight:700; color:var(--color-navy);}
.item h4::before{content:'\25A0'; padding-right:.25em;}

ul.labels{font-size:14px; gap:10px;}
ul.labels li{padding:0 1em; color:var(--color-blue); background-color:white; border:1px solid var(--color-blue); border-radius:10em;}
ul.labels li.etc{border:none; padding:0; background-color:transparent;}

dl.spec{max-width:700px;}
dl.spec{
	display:flex;
	flex-wrap:wrap;
	gap:.5rem 2rem;
}
dl.spec>*{width:100%; border-bottom:1px solid var(--border-color); display:flex; justify-content:space-between; align-items:center; gap:1rem;}
dl.spec dt{font-weight:500;}
dl.spec dd{margin:0;}

.note{background-color:#f4f4f4; padding:1rem; border-radius:6px;}

.stars{display:flex; gap:2px; align-items:center;}
.stars>*:not(.num){
	min-width:1em;
	aspect-ratio:1/1;
	background-color:#eee;
	-webkit-mask:url(assets/img/ic-star-fill.svg) no-repeat center center/contain;
	mask:url(assets/img/ic-star-fill.svg) no-repeat center center/contain;
}
.stars .fill{background-color:#ffcc01;}
.stars .half{background-image:linear-gradient(90deg, #ffcc01 50%, #eee 50%);}
.stars .num{padding-left:.25em; font-size:1.2em; font-weight:700;}

@media (min-width:575px){
	.item{padding:2rem;}
}
@media (min-width:767px){
	.item .chara{width:100%;}
	.item .col-chara{max-width:250px;}
	.item h3{text-align:left;}
/*
	.item .chara-wrap{flex-direction:column; gap:2rem;}
	.speech-bubble::after {
		top:0;
		border-color:transparent transparent var(--bg-color-blue) transparent;
		transform:translate(-50%, -100%);
	}
*/
}
@media (min-width:992px){
	dl.spec>*{width:calc(100% / 2 - 2rem);}
}

/* privacy-policy
--------------------------------------------------------------*/
.privacy-contents h2{font-size:1.2rem; margin:2em 0 1em;}

/* plug-in contact form 7
----------------------------------------------- */
.form-control{
	--bs-border-radius:0;
}
/* form.wpcf7-form{background-color:white; border:1px solid var(--border-color);} */
form .form-group{display:flex; margin-top:-1px; border:1px solid var(--border-color); background-color:white;}
form .form-group:last-child{border:none;}
form .form-group>*{padding:1rem 2rem;}
form .form-group>label{min-width:15rem; padding-top:calc(1rem + .25rem); white-space:nowrap; background-color:#EFF7FC;}
form .form-group>label.req::after{
	content:'必須';
	display:inline-block;
	font-size:12px;
	line-height:1;
	color:white;
	background-color:#c2272c;
	padding:.25em .5em;
	margin-left:.5em;
	border-radius:3px;
}
form .form-group>span{width:100%; align-self:center;}

.submit-bar{margin-top:2em;}

@media (max-width:767.98px){
	form .form-group{flex-direction:column;}
	form .form-group>*{padding:1rem;}
	form .form-group>label{padding:.5rem 1rem;}
}