@charset "utf-8";

/*====================================================================================================
  WHOLE
====================================================================================================*/
* { margin: 0; padding: 0;}
:root { 
	--primary-color: #539455;
	--accent-color: #443315;
	--h-height: 180px;
	--bottom: 5rem; /*80px*/
	--bottom-sm: 3rem; /*45px*/
}
html { scroll-behavior: smooth;}
body {
	margin: 0;
	padding: 0;
	color: #000;
	font-family: "Noto Sans JP", sans-serif, system-ui;
	line-height: 1.7;
	font-weight: 400;
	font-size: 16px; 
    overflow-x: hidden; 
}

h1, h2, h3, h4, h5, h6, th, strong { font-weight: 700;}
ul { list-style: none;}
a { color: var(--primary-color);}
a:hover { opacity: 0.8;}
div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd {	margin: 0; padding: 0;}
img { width: 100%; height: auto; vertical-align: bottom; border: none;}
.pc {display:block;}
.sm {display:none!important;}
.drag-sort-y { display:flow-root;}
#header a,
#footer a { color: #fff; text-decoration: none;}

[id] { scroll-margin-top: var(--h-height);}

/*====================================================================================================
  BASE
====================================================================================================*/
#base { position: relative; margin: 0; padding: 0; width: 100%;}

/*====================================================================================================
  HEADER
====================================================================================================*/
#header {
	position: absolute;
	width: 100%;
	line-height: 0;
	height: var(--h-height);
	z-index: 9999;
}
#header .h_wrap1,
#header .h_wrap2 {
	width: 100%;
}
#header .h_wrap1 {
	background: #fff;
	z-index: 9999;
}
#header .h_wrap1.hide {
	opacity: 0;
	visibility: hidden;
}
#header .h_box1 {
	width: 100%;
	margin: 0 auto;
	height: 100px;
	display: flex;
	justify-content: space-between;
	background: #fff;
	align-items: center;
}
#header h1 {width: fit-content; height: auto;}
#header h1 a {
	margin-left: 31px;
	display: block;
	width: 551px;
	height: 58px;
	line-height: 58px;

}
#header h1 a {
	text-indent: -9999px;
	background: url(../image/logo.png) no-repeat left center;
}
#header .contact {
	width: fit-content;
	margin-right: 2rem;
}
#header .contact a {
	width: 100%;
	display: block;
	padding: 24px 32px;
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
	background: var(--accent-color);
	border-radius: 100vh;
}
#header .h_wrap2 {
	width: 100%;
	height: 80px;
	background: rgba(88,145,88,0.9);
	border-bottom: solid 2px #fff;
}
.h_wrap2.fixed {
  position: fixed;
}
#header .h_nav {
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
}
#header .h_nav ul {
	width: 1200px;
	display: flex;
	margin: 0 auto;
}
#header .h_nav ul li {
	width: calc(100% / 5);
	padding-inline: 2px;
	text-align: center;
	line-height: 80px;
	background: linear-gradient(to top, #fff 0 50%, transparent 50% 100%);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 2px 100%;
	text-align: center;
}
#header .h_nav ul li:last-child {
  background-image: 
    linear-gradient(to top, #fff 0 50%, transparent 50% 100%), /* 左線 */
    linear-gradient(to top, #fff 0 50%, transparent 50% 100%); /* 右線 */
  background-repeat: no-repeat;
  background-position: left center, right center;
  background-size: 2px 100%, 2px 100%;
}
#header .h_nav ul li a {
	display: block;
	padding-inline: 2.5px;
	color: #fff;
	font-weight: 700;
	font-size: clamp(1.125rem, 1.085rem + 0.14vw, 1.25rem); /* 18px/468px, 20px/1920px */
}
#header .openbtn { display: none;}
#header #h_nav_sm { display: none;}

/*====================================================================================================
  MAIN
====================================================================================================*/
#main {
	width: 100%;
	max-width:1200px;
	margin: 0 auto;
}

/*====================================================================================================
  FOOTER
====================================================================================================*/
#footer {
	width: 100%;
	color: #fff;
	background: var(--primary-color);
}
#footer a { color: #fff;}
#footer .f_wrap { 
	width: 100%;
	margin-inline:auto;
	padding-block: 3rem;
	max-width: 1200px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#footer .f_box_l,
#footer .f_box_r { width: fit-content;}

#footer .f_box_l ul { line-height: 1.8;}
#footer .f_box_l ul li:first-child {
	font-size: 1.125rem;
	line-height: 2.5;
	font-weight: 700;
}
#footer .f_nav {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
#footer .f_nav ul {
	display: flex;
	column-gap: 1.9375rem;
	justify-content: end;
}
#footer .copy {
	font-weight: 400;
	font-size: 1rem;
	line-height: 2.875;
	background-color: var( --accent-color);
	text-align: center;
}

/*====================================================================================================
  PAGETOP
====================================================================================================*/
#pagetop {
	position: fixed;
	right: 20px;
	bottom: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1.2s ease, visibility 1.2s ease;
	z-index: 999;
}
#pagetop.show {
	opacity: 1;
	visibility: visible;
}
#pagetop a {
	display: block;
	width:78px;
	height:78px;
	border-radius: 50%;
	border: solid 2px var(--primary-color);
	text-indent: -999px;
	background: url(../image/pagetop.svg) no-repeat #fff center center;
}