/* 基本スタイル */

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

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

blockquote {
	display: block;
}

img[class*="wp-image-"],
img[class*="attachment-"] {
	height: auto;
	max-width: 100%;
}

body {
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #666666;
	line-height: 1.8em;
	letter-spacing: 0;
	font-size: 15px;
}

a:focus,
*:focus {
	outline: none;
}

a {
	color: #666666;
	&:visited {
		color: #666666;
	}
	&:hover {
		text-decoration: none;
		img {
			opacity: 0.7;
			-moz-opacity: 0.7;
			filter: alpha(opacity=70);
			cursor: pointer;
		}
	}
}

img {
	max-width: 100%;
	max-height: 100%;
}

/* ほぼresetcssのようなもの */
#header, #nav, #footer, #aside {
	ul {
		list-style: none !important;
	}
}

/* 書き直した必要なスタイルはここ */
#main:not(.under), .thumbnail_contents + .column_contents {
	> h3 {
		border-block-end: 2px solid #000;
		padding-block-end: 1rem;
		font-size: 1.3rem;
	}
}

/*==========================
	base
==========================*/

#header > .inner,
#nav > .inner,
#contents > .inner,
#footer .inner {
	width: 1000px;
	margin: 0 auto;
	max-width: 96%;
}

.pc {
	@media (width <= 767px) {
		display: none !important;
	}
}

.sp {
	/* 768pxを含めるため <= を使用 */
	@media (width >= 768px) {
		display: none !important;
	}
}

/* ヘッダー */
#header {
	.textwidget {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.headerinner {
		display: flex;
		justify-content: space-between;

		.h1 {
			display: block;
			width: 100%;
			margin: 0;

			a {
				&:hover {
					img {
						opacity: 0.8;
					}
				}
			}

			.sub_h1 {
				color: #2a7bae;
				font-size: 12px;
				line-height: 1.2;
				margin-block-end: 0.5rem;

				@media (width <= 767px) {
					display: none !important;
				}
			}

			.logo {
				img {
					max-width: 100%;
					width: 304px;
				}
			}

			@media (width <= 767px) {
				padding: 0.5rem;
			}
		}

		ul {
			img {
				display: block;
			}

			&.pc {
				width: 480px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				list-style: none;
				flex: 1 0 auto;
				padding-inline-start: 0;
			}
		}

		.txt {
			img {
				width: 140px;
			}
		}

		.tel {
			text-align: center;
			box-sizing: border-box;

			img.telimg {
				width: 297px;
			}
		}

		.inq {
			background: #f4f0ea;
			padding: 2%;
			margin-left: 2%;
			box-sizing: border-box;

			ul {
				padding-inline-start: 0;
			}

			.btn {
				display: flex;
				justify-content: space-between;
				margin: 10px auto 0;
				img {
					width: 142px;
				}
			}
		}

		@media (width <= 767px) {
			display: block;
		}
	}

	@media (767px < width) {
		padding-block-start: 20px;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
	}

	@media (width <= 767px) {
		padding-block-start: 0.5rem;
		.btm_inq {
			position: fixed;
			bottom: 0;
			width: 100%;
			right: 0;
			text-align: right;

			/* .btm_inq a: 全体的なリンクのスタイル */
			a {
				display: inline-block;
				width: 50%;
				float: left;
				max-width: 385px;
			}

			/* .btm_inq .inq01 a: 特定クラス内のリンク（上書き） */
			.inq01 a {
				width: 100%;
			}

			/* .btm_inq .clearfix ...: clearfix内の要素に対する指定 */
			.clearfix {
				> a {
					display: inline-block;
					width: 50%;
					float: left;
					max-width: 385px;

					/* .btm_inq .clearfix > a:last-child */
					&:last-child {
						float: right;
					}

					/* .btm_inq .clearfix > a img */
					img {
						width: 100%;
					}
				}
			}
		}
	}
}

/* --- メインメニューコンテナ --- */
#menu-header-nav {
	@media (767px < width) {
		display: flex;
		padding-inline-start: 0 !important;
		background-color: #fff;
		border-inline: 1px solid #ccc;

		/* 全てのメニューアイテム共通 */
		a {
			text-decoration: none;
			display: block;
			text-align: center;
			line-height: 1.35em;
			transition: all 0.3s var(--transition-easeout-quint);
		}

		> .menu-item {
			+ .menu-item {
				border-inline-start: 1px solid #ccc;
			}
		}

		.menu-item {
			transition: all 0.3s ease-in-out;
			box-sizing: border-box;

			/* 矢印アイコン (子メニューがある場合) */
			&.has_children > a:hover:after {
				border-top: 4px solid #fff !important;
			}

			/* メガメニュー用設定 */
			&.mega .sub-menu {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				width: 500px !important;
			}
		}

		/* 第1階層 (トップレベル) */
		> .menu-item {
			flex: 1 0 auto;
			position: relative;

			&.menu-item-has-children > a::after {
				content: "";
				position: absolute;
				width: 0;
				height: 0;
				top: auto;
				left: 0;
				right: 0;
				bottom: -3px;
				margin: auto;
				border-top: 4px solid #6ebcb0 !important;
				border: 3px solid transparent;
			}

			/* 第1階層のリンクスタイル */
			> a {
				padding-block: 0.5rem;
				padding-inline: 0.5rem;
				color: #666666;
				position: relative;
				z-index: 20000;
				line-height: 1.5;

				&:hover {
					color: #fff;
					cursor: pointer;
					background: rgba(42, 123, 174, 0.9);
				}
			}

			/* ホバー時のサブメニュー表示制御 */
			&:hover {
				> ul.sub-menu {
					opacity: 1;
					pointer-events: all;
					top: 100%;
				}
			}
		}

		/* === 第2階層 (サブメニュー) 共通設定 === */
		ul.sub-menu {
			border-block-start: 1px solid #fff;
			position: absolute;
			padding: 0;
			background: none;
			z-index: 9999;
			top: 95%;
			left: 0;
			width: 100%;
			text-align: left;
			transition: all 0.3s var(--transition-easeout-quint);
			opacity: 0;
			pointer-events: none;

			> .menu-item {
				width: 100%;
				a {
					position: relative;
					text-align: left;
					text-indent: inherit;
					color: #fff;
					gap: 0.5rem;
					padding-inline: 1rem;
					padding-block: 0.5rem;
					display: flex;
					align-items: center;
					background-color: rgba(42, 123, 174, 0.8);
					transition: all 0.3s var(--transition-easeout-quint) background-color;

					&::before {
						content: "";
						width: 5px;
						height: 5px;
						border-top: solid 1px #fff;
						border-right: solid 1px #fff;
						z-index: 1;
						transform: rotate(45deg);
					}

					&:hover {
						background-color: rgba(42, 123, 174, 1);
					}
				}
			}
		}
	}

	@media (width <= 767px) {
		display: none;
		&.is-slide-open {
			display: block;
		}
	}
}

/* フッター */
#footer {
	padding-block: 40px;
	text-align: left;
	border-top: 1px solid #d9d5ce;

	.inner {
		display: flex;
		flex-flow: column;
		gap: 1rem;
	}

	.f_info {
		padding-left: 0;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		width: 100%;
		gap: 1rem;
		min-width: 0;
		> li {
			flex: 0 1 auto;
			min-width: 0;
		}

		.tel {
			text-align: center;
			a {
				display: block;
				padding: 1rem;
				background: #f4f0ea;
			}
			.telimg {
				width: 100%;
			}
		}

		@media (width <= 767px) {
			flex-flow: column;
			align-items: center;
		}
	}

	#menu-footer-nav {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		padding-left: 0;
		font-size: 0.9rem;

		li:before {
			content: "・";
		}
		a {
			color: #666666;
			text-decoration: none;
			&:hover {
				color: #888;
				text-decoration: underline;
			}
		}
	}

	.info-table {
		width: 100%;
		th, td {
			border: 0px;
		}
		th {
			width: 100px;
			text-align: left;
			border-bottom: 1px solid #d9d5ce;
			font-weight: bold;
			padding: 0.5em 0;
			color: #3581b1;
		}
		td {
			border-bottom: 1px solid #d9d5ce;
			padding: 0.5em 0;
		}

		tr:last-of-type {
			th, td {
				border-bottom: none;
			}
		}
	}

	.copyright {
		padding: 0;
		font-size: 14px;
		color: #666666;
		line-height: 1.5;
		text-align: center;
	}
}

#nav {
	background: #fff;
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px));
	z-index: 100;

	#sp-menu-btn {
		.sp {
			margin-block: 0;
			padding-left: 0;
			display: flex;
			li {
				display: block;
				width: 20%;
				border: 1px solid #fff;
				background: #2a7bae;
				box-sizing: border-box;
			}
		}
	}

	@media (767px < width) {
		left: 0;
		width: 100%;

		padding-block: 1rem;
	}

	@media (width <= 767px) {
		background: #fff;
		box-sizing: border-box;
		padding: 0;

		.inner {
			width: 100%;
			max-width: 100%;
		}

		&.fixed {
			height: 100%;
			overflow-x: scroll;
			position: inherit !important;
			top: auto !important;
		}

		#menu-header-nav {
			background: #fff;
			left: 0;
			margin: 0;
			padding: 0 !important;
			width: 100%;
			position: absolute;
			z-index: 99999999;
			border-top: 1px solid #ccc;
			list-style: none;
		}

		#menu-header-nav .menu-item {
			display: block;
			text-align: left;
			background: none;
			float: none;
			height: auto;
			width: 100%;
			padding: 0;
			box-sizing: border-box;
			border: none;
			border-bottom: 1px solid #ccc;
			margin: 0;

			/* .subtxt / br 非表示 */
			.subtxt,
			> a br {
				display: none;
			}

			/* #nav ul li a, #nav ul li > span */
			a {
				display: block;
				padding: 14px 6px 13px 15px;
				background-position: 5px center;
				background-size: 16px auto;
				width: 100%;
				float: none;
				box-sizing: border-box;
				text-align: left;
				height: auto;
				line-height: 1.5;
				font-size: 15px;
				text-decoration: none;
				position: relative;
				color: #666666;
				&:hover {
					color: #6ebcb0;
					cursor: pointer;
				}
				&:before {
					content: "・";
				}
			}
			span:hover {
				cursor: pointer;
			}

			/* 矢印アイコン (has_children > a::after / nav05 > span::after) */
			&.menu-item-has-children > a::after {
				display: block;
				content: "";
				position: absolute;
				width: 8px;
				height: 8px;
				top: 50%;
				right: 18px;
				margin: -5px 0 0 0;
				border-bottom: solid 3px #ccc;
				border-right: solid 3px #ccc;
				transform: rotate(45deg);
			}

			/* ボーダー打ち消し等の調整 */
			&:first-child a {
				border-left: none;
			}

			/* #nav ul li ul li.last */
			ul li.last {
				border-bottom: none;
			}

			&.is-open {
				.sub-menu {
					display: block;
				}
			}
		}

		/* #nav ul.sub-menu */
		#menu-header-nav ul.sub-menu {
			display: none;
			li {
				a {
					padding-left: 25px;
				}

				&:last-child {
					border-bottom: none;
				}
			}
		}
	}
}

#aside {
	@media (767px < width) {
		.inq {
			position: fixed;
			right: 0;
			bottom: 30%;
			width: 90px;
			z-index: 5;

			a {
				display: block;

				&:hover img {
					opacity: 0.8;
				}
			}
			.clearfix a:not(:last-child) {
				margin-bottom: 5px;
			}
		}
		.inq01 {
			position: fixed;
			bottom: 0;
			right: 0;
			z-index: 100;
		}
	}
	@media (width <= 767px) {
		margin-bottom: 0;
		.inq {
			bottom: 0;
			position: fixed;
			z-index: 1;
			right: 0;
			width: 20%;
			max-width: 93px;

			.clearfix a {
				float: left;
				width: 33%;
			}

			a:not(:first-child) {
				margin-left: 0.5%;
			}
		}
		.inq01 {
			position: relative;
			bottom: 0px;
			text-align: right;
		}
	}
}

/* H2タイトル */
.page-title {
	background: url(../../img/bg_img001.png);
	padding: 2.5em 0;
	h2 {
		color: #6ebcb0;
		font-size: 32px;
		letter-spacing: 0.1em;
		position: relative;
		font-weight: bold;
		text-align: center;
		line-height: 1.4;
		margin: 0 auto;
	}
}

/* パンくずリスト */
.bread_wrap {
	margin-bottom: 2.5em;
	.home & {
		margin-bottom: 0;
	}

	.bread {
		box-sizing: border-box;
		margin-left: auto;
		margin-right: auto;
		width: 1000px;
		max-width: 96%;
		padding: 0.4em 0 0.4em;
		font-size: 82%; /* 13px */
		margin-bottom: 0.5em;
		text-align: right;

		li {
			display: inline-block;
			line-height: 1.3em;

			a {
				color: #666666;

				&:hover {
					text-decoration: none;
				}
			}
		}
	}
}

.inq01 {
	position: fixed;
	bottom: 0px;
	right: 0;
	z-index: 100;
}

.contentbottom {
	text-align: center;
	padding: 60px 0;
	.contact-bn {
		text-align: center;
		a {
			display: inline-block;
			margin: 0 0.5%;
			width: 320px;
			max-width: 96%;
		}
	}
}

/********************************
	Responsive
*********************************/

@media (767px < width) {
	/* コンテンツのmin-height -------------*/
	#contents #main {
		min-height: 600px;
	}
}

@media screen and (width <= 767px) {
	.page-title {
		padding: 1em 0;
	}

	/* .headerinner ul img */
	.headerinner ul img {
		width: 100%;
		padding: 0px 5px;
	}

	/* #header > .inner */
	#header > .inner {
		max-width: 100%;
	}

	.sub-menu {
		background: none;
		font-size: 15px;
	}

	/*==========================
	  #contents / Breadcrumbs
	==========================*/
	.bread_wrap {
		margin-bottom: 1em;
	}

	#contents {
		margin-bottom: 0;
	}

	.contentbottom {
		.contact-bn {
			a {
				display: block;
				margin: 0 auto 10px;
			}

			img {
				display: block;
			}
		}
	}

	.footer_access ul.f_info > li {
		width: 100%;

		&:last-child {
			width: 100%;
			max-width: 323px;
			margin: 1em auto 0;
			padding: 10px;
		}
	}
}

* {
	word-wrap: break-word;
	overflow-wrap: break-word;
}

body.single-column, body.post-type-archive-column, body.tax-column-category {
	#contents {
		.inner {
			display: grid;
			grid-template-columns: 1fr 250px;
			gap: 2rem;
			@media (width <= 767px) {
				grid-template-columns: 1fr;
			}
		}
	}
}

body.archive {
	.date {
		margin-block: 0;
	}
}

body.post-type-archive-column, body.tax-column-category {
	.column_link {
		display: block;
		width: fit-content;
		border: 1px solid #000;
		padding-inline: 1rem;
		padding-block: 0.5rem;
		margin-block-start: 1rem;
	}

	.column_block {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 1rem;
		@media (width <= 767px) {
			grid-template-columns: 1fr;
		}
	}

	.thumbnail_img {
		border: solid 1px #eee;
	}
}

body.single {
	.single_date {
		text-align: right;
	}
	.single_wrap {
		display: flex;
		justify-content: flex-end;
		gap: 0 20px;
		.list {
			padding-left: 20px;
			position: relative;
			&::before {
				content: "";
				width: 14px;
				height: 14px;
				background: url(../../img/tag_icon.png) no-repeat center / cover;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				margin: auto;
			}
		}
	}
}