@charset "utf-8";
@import url("root.css");

* { font-family: "Noto Sans JP", sans-serif !important; font-optical-sizing: auto; }
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) { all: unset; display: revert;}
*,*::before,*::after { box-sizing: border-box;}
ol,ul { list-style: none; padding: 0;}
img { width: 100%; max-width: 100%; vertical-align: bottom; }
html {
	overflow-x: hidden;
}
body {
	color: var(--text-color);
	font-size: clamp(14px, 4.2vw, 17px);
	font-optical-sizing: auto;
	font-style: normal;
	line-height: 1.7;
	overflow: hidden;
	position: relative;
}

a { transition: 0.3s;}
a:hover { opacity: .8; cursor: pointer;}

.container {
	width: var(--container-width);
	margin: 0 auto;
}
@media (min-width: 768px) {
	.sp { display:none!important;}
}
@media (max-width: 767.98px) {
	.pc { display:none!important;}
}
@media (min-width: 600px) {
	a[href^="tel:"] { pointer-events: none;}
}

/*
Commons
*/
h2 {
	text-align: center;
	font-size: clamp(1.5rem,4vw,2.625rem);
	line-height: 1.1;
}
.subText {
	text-align: center;
	margin-top: 2rem;
	font-size: 1.125rem;
}
.link_btn {
	width: min(94%, 400px);
	margin: auto;
	a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 60px;
		background: var(--base-color01);
		border: 1px solid var(--base-color01);
		color: #fff;
		padding: 0 clamp(10px, 2vw, 20px);
		border-radius: 4px;
	}
	a::after {
		content: "";
		display: block;
		width: auto;
		height: .5rem;
		aspect-ratio: 15/4;
		background: url(../img/svg/arrow_wh.svg) no-repeat bottom center / contain;
		transition: .3s;
	}
}
.link_btn a:hover {
	background: #fff;
	color: var(--base-color01);
}
.link_btn a:hover::after {
	background: url(../img/svg/arrow_rd.svg) no-repeat bottom center / contain;
}
.cate {
	font-size: .75em;
	min-width: 100px;
	padding: 2px 10px;
	width: max-content;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.cate01 { background: #e6b076; }
.cate02 { background: #479964; }
.cate03 { background: #476299; }
.cate04 { background: #be0000; }
.cate05 { background: #7a0089; }
.cate06 { background: #724300; }
.cate07 { background: #0090af; }
.cate08 { background: #97b546; }
.cate09 { background: #606060; }

@media (min-width: 600px) {
	#page_top a {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: fixed;
		z-index: 99;
		bottom: 50px;
		color: #fff;
		text-align: center;
		background: var(--base-color01);
		width: 60px;
		height: 60px;
		border: solid 1px #fff;
		border-radius: 8px;
	}
	#page_top a::before {
		content: "";
		width: 1px;
		height: 1px;
		border-right: 8px solid transparent;
		border-bottom: 10px solid #fff;
		border-left: 8px solid transparent;
		margin-bottom: 5px;
	}
	#page_top a span {
		font-size: 1rem;
		font-weight: bold;
		line-height: 1;
	}
}

.text-left {
	text-align: left!important;
}


/*
header
*/

header {
	width: 100%;
	height: 70px;
	margin: 0;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0 5%;
	padding: 0 1rem;
	background: #fff;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
header {
	.header_logo {
		width: clamp(10rem, 50%, 240px);
		margin-right: auto;
		flex-shrink: 0;
		a {
			width: 100%;
			img {
				width:inherit;
				aspect-ratio: 24/5;
				object-fit: contain;
			}
		}
	}
	.header_link {
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 0 clamp(15px, 3vw, 30px);
		margin-left: auto;
		> li {
			height: 50px;
			a {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}

.header_tel {
	width: clamp(160px, 45%, 200px);
	a {
		display:flex;
		flex-direction: column;
	}
	.tel_number {
		font-size: 1.5rem;
		font-weight: bold;
		display: flex;
		align-items: center;
		line-height: 1.2;
	}
	.tel_number::before {
		content: "";
		display: block;
		height: 1em;
		aspect-ratio: 1/1;
		margin-right: .25em;
		background: url(../img/svg/tel_bk.svg) no-repeat center center / contain;
	}
	.open_time {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: .75rem;
		background: var(--base-color01);
	}
}
.header_line {
	width: clamp(80px, 20%, 200px);
 a {
		color: #fff;
		background:#00ab38;
		border-radius: 4px;
	}
}
.header_line a::before {
	content: "";
	display: block;
	height: 1.2rem;
	aspect-ratio: 1/1;
	margin-right: .25em;
	background: url(../img/svg/line_wh.svg) no-repeat center center / contain;
}
.header_contact {
	width: clamp(80px, 20%, 200px);
	a {
		color: #fff;
		background:var(--base-color01);
		border-radius: 4px;
	}
}
.header_contact a::before {
	content: "";
	display: block;
	height: 1.2rem;
	aspect-ratio: 1/1;
	margin-right: .25em;
	background: url(../img/svg/mail_wh.svg) no-repeat center center / contain;
}

/*
header_link
*/
@media (max-width: 1024px) {
	.header_link {
		.header_line,
		.header_contact {
			font-size: 0;
		}
	}
}


/*
Navigation Menu
*/
#navigation {
	position: relative;
	z-index: 2;
}
.nav_menu *:hover {
	opacity: 1;
}
.nav_menu {
	width: 100%;
	height: 120px;
	background: #fff;
	border-radius: 8px 8px 0 0;
}
.navi_list {
	display: flex;
	justify-content: center;
	height: 100%;
}
.navi_parent > a {
	pointer-events: none;
	cursor: pointer;
}

.navi_item {
	position: relative;
	width: calc(100% / 6);
	height: 100%;
}
.navi_item:not(:last-of-type)::after {
	content: "";
	display: block;
	width: 2px;
	height: 80px;
	background: #ddd;
	position: absolute;
	top: 50%;
	right: -1px;
	translate: 0 -50%;
}
.navi_item a {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-size: 1.125rem;
	line-height: 1.0;
	background: #fff;
	padding: 0 1rem;
}
.navi_item:nth-of-type(1) > a { border-radius: 8px 0 0 0;}
.navi_item:nth-of-type(6) > a { border-radius: 0 8px 0 0;}

.navi_item > a::before {
	content: "";
	display: block;
	width: auto;
	height: 2.25rem;
	aspect-ratio: 1/1;
	margin-bottom: .625rem;
	transition: .3s;
}
.navi_item:nth-of-type(1) > a::before {
	background: url(../img/svg/sell_rd.svg) no-repeat top center / contain;
}
.navi_item:nth-of-type(2) > a::before {
	background: url(../img/svg/home_rd.svg) no-repeat top center / contain;
}
.navi_item:nth-of-type(3) > a::before {
	background: url(../img/svg/8key_rd.svg) no-repeat top center / contain;
}
.navi_item:nth-of-type(4) > a::before {
	background: url(../img/svg/staff_rd.svg) no-repeat top center / contain;
}
.navi_item:nth-of-type(5) > a::before {
	background: url(../img/svg/faq_rd.svg) no-repeat top center / contain;
}
.navi_item:nth-of-type(6) > a::before {
	background: url(../img/svg/memo_rd.svg) no-repeat top center / contain;
}

.navi_item > a:hover {
	background: var(--base-color01);
	color: #fff;
}
.navi_item:nth-of-type(1) > a:hover::before {
	background: url(../img/svg/sell_wh.svg) no-repeat top center / contain;
}
.navi_item:nth-of-type(2) > a:hover::before {
	background: url(../img/svg/home_wh.svg) no-repeat top center / contain;
}
.navi_item:nth-of-type(3) > a:hover::before {
	background: url(../img/svg/8key_wh.svg) no-repeat top center / contain;
}
.navi_item:nth-of-type(4) > a:hover::before {
	background: url(../img/svg/staff_wh.svg) no-repeat top center / contain;
}
.navi_item:nth-of-type(5) > a:hover::before {
	background: url(../img/svg/faq_wh.svg) no-repeat top center / contain;
}
.navi_item:nth-of-type(6) > a:hover::before {
	background: url(../img/svg/memo_wh.svg) no-repeat top center / contain;
}

.navi_item:hover > ul {
	opacity: 1;
	transition: opacity .3s, visibility .3s;
	visibility: visible;
}
.dropDown {
	position: absolute;
	top: 100%;
	left: 0;
	opacity: 0;
	transition: opacity .3s, visibility .3s;
	visibility: hidden;
	min-width: 100%;
	width: max-content;
	z-index: 2;
}
.navi_child {
	width: 100%;
	height: 80px;
	a {
		background: #eee;
	}
}
.navi_child a:hover {
	background: #333;
	color: #fff;
}
@media (max-width: 767px) {
	.nav_menu {
		display: none;
	}
}

/*ハンバーガーメニュー*/
@media (max-width: 767px) {
	header {
		position:fixed;
		z-index: 90;
	}
	.menu-wrapper { position: relative;}
	.menu-icon {
		width: 40px;
		height: 30px;
		position: fixed; /* ← fixedにして常に左上固定 */
		top: 20px;
		right: 20px;
		cursor: pointer;
		z-index: 99;
		display: inline-block;
	}
	.menu-icon span {
		display: block;
		height: 4px;
		margin: 6px 0;
		background: #333;
		border-radius: 2px;
		transition: 0.4s;
	}
	/* ハンバーガーがXに変形 */
	#menu-toggle:checked + .menu-icon span:nth-child(1) {
		transform: translateY(10px) rotate(45deg);
	}
	#menu-toggle:checked + .menu-icon span:nth-child(2) {
		opacity: 0;
	}
	#menu-toggle:checked + .menu-icon span:nth-child(3) {
		transform: translateY(-10px) rotate(-45deg);
	}
	/* オーバーレイ背景 */
	.overlay {
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.5);
		opacity: 0;
		pointer-events: none;
		transition: 0.4s;
		z-index: 9;
		margin-top: 70px;
	}
	#menu-toggle:checked ~ .overlay {
		opacity: 9;
		pointer-events: auto;
	}
	.ham_menu {
		position: fixed;
		top: 70px;
		right: calc(min(94%,360px) * -1);
		width: min(94%,360px);
		height: 100%;
		background: var(--base-color01);
		box-shadow: 2px 0 8px rgba(0,0,0,0.2);
		transition: right 0.4s ease;
		z-index: 10;
		padding: 1rem;
		overflow-y: auto;
		overflow-x: hidden;
	}
	#menu-toggle:checked ~ .ham_menu {
		right: 0;
	}
	.ham_menu_wrap {
		width: 100%;
		height: fit-content;
		margin-bottom: 20px;
	}
	.ham_menu_bnr {
		margin-bottom: 100px;
	}
	.ham_menu_item input {
		display: none;
	}
	.ham_menu_item a,
	.ham_menu_item label {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 1rem;
		line-height: 1.0;
		background: #fff;
		padding: .75rem;
	}
	.ham_menu_item:not(:last-of-type) a,
	.ham_menu_item:not(:last-of-type) label {
		border-bottom: 2px dotted #999;
	}
	.ham_menu_item-c a {
		font-size: 1rem;
		height: 3rem;
		padding-left: 3rem;
	}
	.ham_menu_item > a::before,
	.ham_menu_item > label::before {
		content: "";
		display: block;
		width: auto;
		height: 1.5rem;
		aspect-ratio: 1/1;
		margin-right: .625rem;
	}
	.ham_menu_item:nth-of-type(1) > label::before {
		background: url(../img/svg/sell_rd.svg) no-repeat top center / contain;
	}
	.ham_menu_item:nth-of-type(2) > label::before {
		background: url(../img/svg/home_rd.svg) no-repeat top center / contain;
	}
	.ham_menu_item:nth-of-type(3) > label::before {
		background: url(../img/svg/8key_rd.svg) no-repeat top center / contain;
	}
	.ham_menu_item:nth-of-type(4) > a::before {
		background: url(../img/svg/staff_rd.svg) no-repeat top center / contain;
	}
	.ham_menu_item:nth-of-type(5) > a::before {
		background: url(../img/svg/faq_rd.svg) no-repeat top center / contain;
	}
	.ham_menu_item:nth-of-type(6) > a::before {
		background: url(../img/svg/memo_rd.svg) no-repeat top center / contain;
	}
	.ham_menu_item:nth-of-type(7) > a::before {
		background: url(../img/svg/policy_rd.svg) no-repeat top center / contain;
	}
	.navi_item:hover > ul {
		opacity: 1;
		transition: opacity .3s, visibility .3s;
		visibility: visible;
	}
	.ham_menu_item .toggle_dropDown {
		display: none;
		height: 0;
		transition: .4s;
	}
	#toggle-child01:checked ~ .toggle_dropDown,
	#toggle-child02:checked ~ .toggle_dropDown,
	#toggle-child03:checked ~ .toggle_dropDown {
		display: block;
		height: fit-content;
	}
	.ham_menu_item .toggle-child {position: relative; }
	.ham_menu_item .toggle-child:hover {
		opacity: .8;
		cursor: pointer;
	}
	.ham_menu_item .toggle-child::after {
		position: absolute;
		top: auto;
		bottom: auto;
		right: 1em;
		content: "";
		width: 1em;
		height: auto;
		aspect-ratio: 1/1;
		background: url(../img/svg/plus.svg) no-repeat center center / contain;
		display: block;
	}
	#toggle-child01:checked ~ label.toggle-child::after,
	#toggle-child02:checked ~ label.toggle-child::after,
	#toggle-child03:checked ~ label.toggle-child::after {
		background: #333;
		height: 4px;
	}
	.ham_lp_bnr {
		margin: clamp(25px, 5vw, 50px) auto;
		a {
			color: var(--base-color01);
			background: #fff;
			font-weight: bold;
			display: flex;
			gap: 10px;
			border: 4px solid #fff;
			border-radius: 4px;
			line-height: 1.3;
			span {
				background:var(--base-color01);
				color: yellow;
				font-size: .8em;
				padding: .5rem;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
			 }
		}
	}
}
/*
Bread crumb
*/
#Breadcrumb {
	margin-top: clamp(25px, 5vw, 50px);
	margin-bottom: clamp(25px, 5vw, 50px);
  ol {
    display: flex;
    flex-wrap: wrap;
    font-size: .9rem;
    line-height: 1.0;
    width: 100%;
    margin: auto;
    li {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      a {
        line-height: 1.0;
      }
      a:hover {
      	color: var(--base-color01);
        text-decoration: underline;
      }
      span {
        line-height: 1.0;
      }
    }
    li:not(:last-of-type)::after {
      content: ">";
      display: block;
      margin: 0 1rem;
      font-size: 1rem;
      line-height: 1.0;
    }
  }
}

/*
fixed_under_link
*/
@media (max-width: 767px) {
	.fixed_under_link {
		z-index: 77;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 70px;
		background: #fff;
		display: flex;
		align-items: center;
		.under_tel_link,
		.under_line_link,
		.under_contact_link {
			width: 27.5%;
			height: inherit;
			font-size: .8em;
		}
		.under_page_top {
			width: 17.5%;
			height: inherit;
			font-size: .85rem;
		}
		.under_tel_link a {
			width: 100%;
			height: 100%;
			background: #dca004;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #fff;
		}
		.under_line_link a {
			width: 100%;
			height: 100%;
			background: #00ab38;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #fff;
		}
		.under_tel_link a::before {
			content: "";
			display: block;
			height: 1.2rem;
			aspect-ratio: 1/1;
			background: url(../img/svg/tel_wh.svg) no-repeat center center / contain;
		}
		.under_line_link a::before {
			content: "";
			display: block;
			height: 1.2rem;
			aspect-ratio: 1/1;
			background: url(../img/svg/line_wh.svg) no-repeat center center / contain;
		}
		.under_contact_link a {
			width: 100%;
			height: 100%;
			background: var(--base-color01);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #fff;
		}
		.under_contact_link a::before {
			content: "";
			display: block;
			height: 1.2rem;
			aspect-ratio: 1/1;
			background: url(../img/svg/mail_wh.svg) no-repeat center center / contain;
		}
		.under_page_top a {
			width: 100%;
			height: 100%;
			background: #333;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #fff;
		}
		.under_page_top a::before {
			content: "";
			width: 1px;
			height: 1px;
			border-right: 14px solid transparent;
			border-bottom: 16px solid #fff;
			border-left: 14px solid transparent;
			margin-bottom: 2px;
		}
	}
}

/*
Conversion Box
*/

.conversion_area {
	padding: clamp(25px, 5vw, 50px) 0;
	.conversion_box {
		border-radius: 8px;
	}
}

.conversion_box {
	width: 100%;
	padding: clamp(25px, 5vw, 50px);
	background: var(--base-color01);
	border-radius: 0 0 8px 8px;
	position: relative;
	overflow: hidden;
	z-index: 1;
	h2 {
		line-height: 1.0;
		font-size: 1.75rem;
		letter-spacing: .2em;
		color: #fff;
	}
	.subText {
		color: #fff;
	}
}
.conversion_box::after {
	content: "";
	display: block;
	width: min(30%, 240px);
	height: auto;
	aspect-ratio: 24/26;
	background: url(../img/svg/8key_wh.svg) no-repeat bottom right / contain;
	opacity: .25;
	position: absolute;
	bottom: -20px;
	right: -20px;
	z-index: -1;
}

.conversion_link {
	width: 100%;
	display: flex;
	margin-top: 30px;
	gap: clamp(15px, 3vw, 30px) clamp(15px, 3vw, 30px);
}
.conversion_link li {
	width: calc((100% - (clamp(15px, 3vw, 30px) * 2)) / 3);
	a {
		width: 100%;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1.1;
		background: linear-gradient(#fff,#fffaf0);
		border-radius: 4px;
	}
}

.conversion_link .conversion_tel a {
	display: flex;
	flex-direction: column;
	.tel_number {
		font-size: clamp(1.25rem,3vw,1.75rem);
		font-weight: 500;
		line-height: 1.0;
		color: var(--base-color01);
		display: flex;
	}
	.tel_number::before {
		content: "";
		display: block;
		height: 1em;
		aspect-ratio: 1/1;
		margin-right: .25em;
		background: url(../img/svg/tel_rd.svg) no-repeat center center / contain;
	}
	.open_time {
		font-size: .8rem;
		margin-top: .25em;
	}
}

.conversion_link .conversion_line a {
	display: flex;
	font-size: clamp(1.25rem,2.5vw, 1.5rem);
	line-height: 1.0;
	color: #00ab38;
	display: flex;
}
.conversion_link .conversion_line a::before {
	content: "";
	display: block;
	height: 1.75rem;
	aspect-ratio: 1/1;
	margin-right: .5rem;
	background: url(../img/svg/line_gr.svg) no-repeat center center / contain;
}

.conversion_link .conversion_contact a {
	display: flex;
	font-size: 1.125rem;
	line-height: 1.0;
	color: var(--base-color01);
	display: flex;
	text-align: center;
}
.conversion_link .conversion_contact a::before {
	content: "";
	display: block;
	height: 1.75rem;
	aspect-ratio: 1/1;
	margin-right: .5rem;
	background: url(../img/svg/mail_rd.svg) no-repeat center center / contain;
}

@media (max-width: 767px) {
	.conversion_box h2 {
		line-height: 1.5;
	}
	.conversion_link {
		flex-direction: column;
		align-items: center;
		li { width:min(100%, 600px); }
	}
}


/*
Footer section
*/

footer {
	background: #333;
	padding: clamp(25px, 5vw, 50px) 0 clamp(10px, 2vw, 20px);
	color: #fff;
}
footer .logo_area {
	margin: 0 auto clamp(25px, 5vw, 50px);
	width: min(75%, 240px);
}
.footer_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(25px, 5vw, 50px) clamp(35px, 7vw, 70px);
}
.bnr_area {
	width: min(100%, calc(340px + clamp(10px, 2vw, 20px)));
	height: fit-content;
	display: grid;
	gap: clamp(10px, 2vw, 20px) clamp(10px, 2vw, 20px);
	grid-template-rows: auto; /*高さ*/
	grid-template-columns: calc((100% - clamp(10px, 2vw, 20px)) / 2) calc((100% - clamp(10px, 2vw, 20px)) / 2); /*横幅*/
	grid-template-areas:
	"bnrA bnrC"
	"bnrB bnrC"
	"bnrD bnrD";
}

.bnrA {
	grid-area: bnrA;
	width: min(100%, 170px);
	aspect-ratio: 170/75;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	a {
		padding: 0 clamp(10px, 2vw, 20px);
		img { object-fit:contain; }
	}
}
.bnrB {
	grid-area: bnrB;
	width: min(100%, 170px);
	aspect-ratio: 170/75;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	a {
		padding: clamp(10px, 2vw, 20px);
		img { object-fit:contain; }
	}
}
.bnrC {
	grid-area: bnrC;
	width: min(100%, 170px);
	aspect-ratio: 1/1;
	background: #fff;
}
.bnrD {
	grid-area: bnrD;
	width: min(100%, calc(340px + clamp(10px, 2vw, 20px)));
	aspect-ratio: 7/2;
	background: #fff;
}

.link_area {
	flex-grow: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 clamp(25px, 5vw, 50px);
}
.link_menu {
	width: fit-content;
	li:not(:last-of-type) {
		margin-bottom: 1rem;
	}
}
.copyright {
	text-align: center;
	margin: clamp(50px, 10vw, 100px) auto 0;
	font-size: .8rem;
}

@media (max-width: 767px) {
	footer {
		padding-bottom: 90px;
	}
	.bnr_area {
		order: 2;
	}
	.link_area {
		order: 1;
	}
	.link_menu {
		width: 100%;
		padding-bottom: 1rem;
		border-bottom: 1px dashed #999;
		margin-bottom: 1rem;
	}
}


/*
Pagination
*/

.pagination {
  width: 100%;
  margin: clamp(25px, 5vw, 50px) auto 0;
}
.pagination ul {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 600px);
  margin: auto;
}
.pagination li {
  width: 8%;
  line-height: 1.5;
}
.pagination li:not(:last-of-type) {
  margin-right: 2%;
}
.pagination li a {
  display: flex;
  font-size: .9rem;
  color: var(--base-color01);
  border: 1px solid var(--base-color01);
  width: 100%;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
}
.pagination li.active a {
  background: var(--base-color01);
  color: #fff;
}