/***********************
* Responsive Breakpoints
* 1025px +          PC
* 768px - 1024px    Tablet - PC
* 0px - 767px       SmartPhone
************************/

@font-face {
	font-family: "bodyFont";
	src: url("fonts/MPLUS1.woff2") format("woff2");
	font-display: swap;
}

@font-face {
	font-family: "titleFont";
	src: url("fonts/MPLUSRounded1c-Black.woff2") format("woff2");
	font-display: swap;
}
html {
	height: -webkit-fill-available;
	scroll-behavior: smooth;
}
body {
	font-family: "bodyFont";
	min-height: 100vh;
}

/*********************
* common
***********************/
:root {
	--color-main: rgb(0, 56, 147);
	--color-sub: rgb(252, 207, 0);
	--color-sub2: rgb(232, 71, 9);
	--color-bg: rgb(243, 253, 255);
	--distance: 50px;
	--distance-s: 25px;
	--distance-l: 100px;
	--distance-xl: 150px;
	--radius: 10px;
	--radius-s: 5px;
	--radius-l: 20px;
	--radius-xl: 30px;
	--fnt-xs: 10px;
	--fnt-s: 12px;
	--fnt-l: 36px;
	--fnt-xl: 48px;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
	:root {
		--distance: 35px;
		--distance-s: 20px;
		--distance-l: 65px;
		--distance-xl: 95px;
		--radius: 10px;
		--radius-s: 5px;
		--radius-l: 20px;
		--radius-xl: 30px;
		--fnt-xs: 9px;
		--fnt-s: 11px;
		--fnt-l: 28px;
		--fnt-xl: 36px;
	}
}
@media screen and (max-width: 767px) {
	:root {
		--distance: 25px;
		--distance-s: 10px;
		--distance-l: 50px;
		--distance-xl: 75px;
		--radius: 7px;
		--radius-s: 3px;
		--radius-l: 15px;
		--radius-xl: 25px;
		--fnt-xs: 9px;
		--fnt-s: 11px;
		--fnt-l: 18px;
		--fnt-xl: 24px;
	}
}

/* svg - logo */

#masthead .site-info a img {
	width: 100%;
	max-height: 60px;
	max-width: fit-content;
}

/* Decoration  Other */
.b {
	font-weight: 900;
}
.color-m {
	color: rgb(0, 56, 147);
}
.color-s {
	color: rgb(252, 207, 0);
}
.color-s2 {
	color: rgb(232, 71, 9);
}
.fnt-xs {
	font-size: 10px;
}
.fnt-s {
	font-size: 12px;
}
.fnt-l {
	font-size: 36px;
}
.fnt-xl {
	font-size: 48px;
}
.fnt-fb {
	font-family: "bodyFont";
}
.fnt-ft {
	font-family: "titleFont";
}
/* youtube & Google Map */
.youtube,
.gmap {
	width: 100%;
	aspect-ratio: 16 / 9;
}
.youtube iframe,
.gmap iframe {
	width: 100%;
	height: 100%;
}

/* Common */
.microCopy {
	text-align: center;
	font-size: var(--fnt-s);
}
ul,
ol,
dl {
	font-size: 24px;
}
dt {
	font-weight: 900;
}

/* Individual */
body::before {
	display: block;
	content: "";
	background: url(img/akagawara.svg) top center repeat;
	background-size: contain;
	height: 104px;
	width: 100%;
	position: relative;
	z-index: 10000000;
}
#page {
	margin-top: -11px;
}

.kv {
	font-weight: 900;

	& .kvCopy {
		-webkit-text-stroke: 10px #fff;
		paint-order: stroke;
		margin-top: 0;

		& h2 {
			padding-bottom: 0;
			color: var(--color-main);
			font-size: var(--fnt-l);

			& span {
				font-size: var(--fnt-xl);
			}
		}
	}

	& .kvCta {
		padding: 0;
		text-align: center;

		& [class*="button"] {
			margin-top: 0.5rem;
			font-size: var(--fnt-l);
			letter-spacing: 0.1rem;
		}
	}
}

.problem {
	color: #fff;
	margin: 0;

	& figure {
		margin: 0;
	}

	& [class*="section2"] {
		background: var(--color-main);

		& h2 {
			text-align: center;
			font-size: var(--fnt-xl);
		}

		& ul {
			width: 60%;
			padding: 0;
			list-style-type: none;

			& li {
				margin-bottom: 1rem;
				padding-left: 45px;
				text-indent: -45px;
				&::before {
					content: "";
					display: inline-block;
					background-image: url("img/list-marker.svg");
					background-size: contain;
					background-repeat: no-repeat;
					width: 35px;
					height: 35px;
					margin-right: 10px;
					vertical-align: middle;
				}
			}
		}

		& p {
			padding-bottom: var(--distance);
			text-align: center;
			font-size: var(--fnt-xl);
			color: var(--color-sub);
			font-family: "titleFont";
		}
	}
}

.whats {
	margin-top: -1px;
	padding-top: calc(var(--distance-xl) * 3) !important;
	padding-bottom: var(--distance-xl) !important;
	background: var(--color-bg) url(img/wave-bottom.svg) top -1px center / contain
		no-repeat !important;

	& h2 {
		text-align: center;
		color: var(--color-main);
		font-size: var(--fnt-xl);
		font-family: "titleFont";

		& img {
			vertical-align: sub;
		}
	}

	& .whatsBox {
		margin-bottom: var(--distance-l);
		padding: var(--distance-s) 15px var(--distance-s) 0;

		& [class*="column"] {
			position: relative;
			background: #fff;
			border: 3px solid #00e1ff;
			border-radius: var(--radius-l);
			box-shadow: 15px 15px var(--color-main);

			& img {
				border-radius: var(--radius-l) var(--radius-l) 0 0;
			}

			& h3 {
				margin: 0;
				padding-bottom: 0;
				color: var(--color-main);
				font-family: "titleFont";
				text-align: center;
			}
			& p {
				margin-top: 0;
				padding: 0 1rem 1rem;
			}
		}
		& .wp-block-column::after {
			position: absolute;
			right: -75px;
			top: 0;
			z-index: 10;
			display: flex;
			align-items: center;
			height: 100%;
			color: var(--color-sub2);
			font-weight: 900;
			font-size: calc(var(--fnt-xl) * 2);
			-webkit-text-stroke: 10px #fff;
			paint-order: stroke;
		}
		& .wp-block-column:first-of-type::after {
			content: "＋";
		}
		& .wp-block-column:nth-last-child(2)::after {
			content: "＝";
		}
	}
}

.reason {
	padding: var(--distance-l) 0 0 !important;

	& h2 {
		text-align: center;
		color: var(--color-main);
		font-size: var(--fnt-xl);
		font-family: "titleFont";

		&::after {
			display: block;
			content: url(img/line-bubble.svg);
			width: fit-content;
			margin: auto;
		}

		& img {
			vertical-align: sub;
		}
	}

	& .reasonBox {
		padding: 1rem;
		border-radius: var(--radius-l);
		background: #fafafa;
		font-weight: 900;
		& .reasonNum {
			display: flex;
			align-items: center;
			justify-content: center;
			border-right: 3px dashed #fff;
			text-align: center;
			font-family: "titleFont";
			& span {
				display: block;
				font-size: var(--fnt-xl);
			}
		}
		& .reasonTxt {
			& h3 {
				margin: 0;
				padding: 0;
				color: var(--color-sub);
				font-family: "titleFont";
			}
			& p {
				margin-top: 0;
			}
		}
	}
}

.mesh {
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	width: 100vw;
	max-width: 100vw !important;
	height: 40vh !important;
	background: #f0f0f0 url(img/mesh-dot.svg) top left / auto repeat;
	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		height: 200px;
		background: white;
		border-bottom-left-radius: 100%;
		border-bottom-right-radius: 100%;
		z-index: 1;
	}
}

/*
.cause {
	padding: var(--distance-l) 0 calc(var(--distance-xl) * 2) !important;
	background: linear-gradient(
		to bottom,
		#1a1a1a 0%,
		#00152a 50%,
		#1a1a1a 100%
	) !important;
	color: #fff;
	text-align: center;
	font-weight: 900;
	& h2 {
		font-size: var(--fnt-xl);
		font-family: "titleFont";

		&::before {
			display: block;
			content: url(img/cause-bubble.svg);
			width: fit-content;
		}
	}
	.wp-block-embed {
		border-radius: var(--radius-l);
		overflow: hidden;
	}
}
*/

.cause {
	padding: var(--distance-l) 0 calc(var(--distance-xl) * 2) !important;
	background: linear-gradient(
		to bottom,
		#fff7cc 0%,
		#fccf00 50%,
		#fff7cc 100%
	) !important;
	color: #000; /* 黄色背景に映えるよう黒系に変更推奨 */
	text-align: center;
	font-weight: 900;

	& h2 {
		font-size: var(--fnt-xl);
		font-family: "titleFont";

		&::before {
			content: none; /* アイコン削除 */
			display: none; /* スペースも消す */
		}
	}

	.wp-block-embed {
		border-radius: var(--radius-l);
		overflow: hidden;
	}
}

.leave {
	& hgroup {
		text-align: center;
		& h2 {
			color: var(--color-main);
			font-size: var(--fnt-xl);
			font-family: "titleFont";

			&::after {
				display: block;
				content: url(img/line-bubble.svg);
				width: fit-content;
				margin: auto;
			}
		}
	}

	& [class$="broken-grid-layout"] {
		left: 50%;
		right: 50%;
		margin-left: -50vw !important;
		margin-right: -50vw !important;
		margin-top: var(--distance-l);
		width: 100vw;
		max-width: 100vw !important;
		height: 100vh !important;

		& h3 {
			padding: 0;
			color: var(--color-sub);
			font-family: "titleFont";
		}

		& img {
			width: 100%;
			height: auto;
		}

		& .leaveImg {
			border-radius: 0 var(--radius-l) var(--radius-l) 0;
		}

		& .leaveImgR {
			border-radius: var(--radius-l) 0 0 var(--radius-l);
		}

		& .leaveTxt {
			padding: var(--distance-l);
			border-radius: var(--radius-l);
			background: rgba(250, 250, 250, 0.8);
			& h3 {
				width: fit-content;
				padding: 0 1rem;
				background-color: var(--color-main);
				border-radius: var(--radius-xl);
			}
			& dl {
				margin-bottom: 0;
			}
		}
	}
}

.voice {
	padding: 0 0 var(--distance-l) !important;
	& h2 {
		text-align: center;
		color: var(--color-main);
		font-size: var(--fnt-xl);
		font-family: "titleFont";

		&::after {
			display: block;
			content: url(img/line-bubble.svg);
			width: fit-content;
			margin: auto;
		}
	}
	& [class*="wp-block-columns"] {
		margin-bottom: var(--distance);
		padding: var(--distance);
		background: #fafafa;
		border-radius: var(--radius-xl);

		& h3 {
			margin: 0;
			padding: 0;
			color: var(--color-sub);
			font-family: "titleFont";
		}

		& img {
			border-radius: 100%;
			border: 3px solid var(--color-sub);
			background: #fff;
		}
	}
}

.office {
	margin-bottom: 0;
	padding: var(--distance-l) 0 !important;
	background: var(--color-sub);

	& h2 {
		text-align: center;
		color: #fff;
		font-size: var(--fnt-xl);
		font-family: "titleFont";

		&::after {
			display: block;
			content: url(img/line-bubble.svg);
			width: fit-content;
			margin: auto;
		}
	}

	& .officeBox {
		& [class*="column"] {
			padding-bottom: 1rem;
			background: #fff;
			border-radius: var(--radius-l);

			& h3 {
				margin: 0;
				padding: 1rem 1rem 0;
				color: var(--color-main);
				font-family: "titleFont";

				&::before {
					content: "";
					display: inline-block;
					margin-right: 1rem;
					width: 5px;
					height: var(--fnt-l);
					background: var(--color-sub);
					border-radius: 10px;
					vertical-align: middle;
				}
			}

			& p {
				margin: 0;
				padding: 1rem 1rem 0;
			}

			& img {
				border-radius: var(--radius-l) var(--radius-l) 0 0;
			}
		}
	}
}

.menu-items {
	font-weight: 900;
	letter-spacing: 0.2rem;
	line-height: 1.3;
	& span {
		letter-spacing: 0.2rem;
		&::before {
			font-family: "icomoon";
			content: "\e949";
		}
	}
	& small {
		margin: 0 !important;
		letter-spacing: 0.1rem;
	}
}
#footer {
	background: var(--color-main);
	color: #fff;
}
.footer-bottom-right-content #scroll-page-top a {
	padding: 0;
	border: none !important;
	background-color: unset !important;
}
/*********************
* PC+
1025px +
***********************/
@media only screen and (min-width: 1025px) {
}

/*********************
* Tablet - PC
769px - 1024px
***********************/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
}

/*********************
* SmartPhone
0px - 768px
***********************/
@media only screen and (max-width: 767px) {
	body::before {
		height: 30px;
	}
	#page {
		margin-top: -5px;
		padding: 0 5% !important;
		overflow: hidden;
	}
	.kvCopy {
		margin: 0;
		padding: 0;
		& h2 {
			margin: 0;
			padding: 0;
		}
		& p {
			margin-top: 30vh;
			font-size: calc(var(--fnt-s) * 1.3) !important;
		}
	}

	.problem {
		& [class*="section2"] {
			& ul {
				width: 100%;
			}
		}
	}

	.whats {
		padding-top: calc(var(--distance-xl) * 2) !important;
		& h2 {
			& img {
				width: 150px;
			}
			& + p {
				line-height: 1.2;
				& span {
					display: block;
					rotate: 90deg;
				}
			}
		}
	}

	.reason {
		& h2 {
			& img {
				width: 150px;
			}
		}
		& .reasonBox {
			width: 90%;
			& [class*="columns"] {
				gap: 0;
			}
			& .reasonNum {
				border-right: none;
				border-bottom: 3px dashed #fff;
			}
		}
	}

	.mesh {
		height: 25vh !important;
		&::before {
			height: 100px;
		}
	}

	.leave {
		& [class$="broken-grid-layout"] {
			left: unset;
			right: unset;
			margin-left: unset !important;
			margin-right: unset !important;
			width: unset;
			max-width: unset !important;
			height: auto !important;
			& .leaveTxt {
				padding: var(--distance);
			}
		}
	}

	.cause {
		& .inner-container {
			width: 80%;
		}
		& h2 {
			&::before {
				content: url(img/cause-bubble-sp.svg);
				margin: auto;
			}
		}
		& .wp-block-embed {
			width: 90%;
		}
	}

	.office {
		& .officeBox {
			width: 80%;
		}
	}

	.overlay.menu-collapse.panel .overlay-inner ul.menu-items li {
		margin-bottom: 1rem;

		& a small {
			display: block;
			text-align: right;
		}
	}
	& .tel a {
		display: block;
		width: fit-content;
		padding: 0.5rem 1rem;
		margin: auto;
		border-radius: 50px;
		border-width: 0px;
		color: #ffffff;
		background-color: #e84709;
		text-decoration: none;
		&::before {
			margin-right: 0.5rem;
			font-family: "icomoon";
			content: "\e949";
		}
	}
}

.is-ios {
	& .kv {
		min-height: 100vh !important;
		& .kvImg {
			top: 25% !important;
		}
	}
}