@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


/*初期設定
----------------------------------------------------*/
html {
	min-width: 320px;
	font-size: 62.5%;/*10px*/
}

body {
	padding: 0;
	min-width: 320px;
	line-height: 1.8;
	color: #222;
	font-size: 14px;
	font-size: 1.4rem;
	font-family: 'Noto Sans JP', sans-serif;
	letter-spacing: 0.1em;
	background: #fff;
}

img {
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: none;
	vertical-align: bottom;
}

.ie8 img{
	width: auto;
}

h1,h2,h3,h4,h5,ul,dl,dt,dd {
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
}

i {
	padding: 0 0.5em 0 0;
}

p {
	margin: 0 0 10px;
}

br.pc {
	display: none;
}

/*
a:hover {
	opacity:0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
}
*/

.green {
	color: #225e39;
}

.red {
	color: #b33737;
}

.mb0 {
	margin-bottom: 0 !important;
}

a.jump_point {
	height: 1px;
	display: block;
	padding-top: 6em;
	margin-top: -6em;
}

/*clearfix*/
.clearfix,
article section,
article .section02 {
	zoom: 1;
}

.clearfix:after,
article section:after,
article .section02:after {
	content: "";
	display: block;
	clear: both;
}

.slide_right.active { 
	visibility: visible !important;
	animation: slide_right 2.0s cubic-bezier(.8, 0, .2, 1) 0.5s forwards;
	clip-path: inset(0 0 0 100%);
}

@keyframes slide_right {
	0% {
	clip-path: inset(0 0 0 100%);
	}
	100%{
	clip-path: inset(0 0 0 0);
	}
}

.slide_left.active { 
	visibility: visible !important;
	animation: slide_left 2.0s cubic-bezier(.8, 0, .2, 1) 0.5s forwards;
	clip-path: inset(0 100% 0 0);
}

@keyframes slide_left {
	0% {
	clip-path: inset(0 100% 0 0);
	}
	100%{
	clip-path: inset(0 0 0 0);
	}
}

.slide_up.active { 
	visibility: visible !important;
	animation: slide_up 1.5s 0.5s forwards;
	opacity: 0;
}

@keyframes slide_up {
	0% {
	opacity: 0;
	transform: translateY(40px);
	}
	100%{
	opacity: 1;
	transform: translateY(0);
	}
}

.img_big {
	width: 100%;
	height: auto;
	overflow: hidden;
}

.img_big img{
  	transition: 0.3s;
}
 
.img_big img:hover{
	transform: scale(1.03);
}

a.button01 {
	position: relative;
	display: block;
	background: #fff;
	padding: 0.8em;
	text-align: center;
	margin-bottom: 1em;
	color: #222;
	text-decoration: none;
	border: 1px solid #aeaeae;
	border-radius: 7px;
	transition: .3s ease;
	font-size: 15px;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: 4px 4px 0px 0 rgb(207, 207, 207);
}

a.button01 span {
	position: relative;
	z-index: 2;
}

a.button01::before {
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background: #888;
	border-radius: 7px;
	position: absolute;
	left: 0;
	top: 0;
	margin: auto;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
	z-index: 1;
	opacity: 0.1;
	background-blend-mode: darken;
} 

a.button01:hover::before {
	transform-origin: left top;
	transform: scale(1, 1);
}

a.button02 {
	position: relative;
	display: block;
	background: #225e39;
	padding: 0.8em 1.5em;
	text-align: center;
	margin-bottom: 1em;
	color: #fff;
	text-decoration: none;
	border-radius: 7px;
	transition: .3s ease;
	font-size: 15px;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: 4px 4px 0px 0 rgb(207, 207, 207);
	width: fit-content;
	margin: 0 auto;
}

a.button02 span {
	position: relative;
	z-index: 2;
}

a.button02::before {
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background: #7fd4aa;
	border-radius: 7px;
	position: absolute;
	left: 0;
	top: 0;
	margin: auto;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
	z-index: 1;
	opacity: 0.3;
	background-blend-mode:hard-light;
} 

a.button02:hover::before {
	transform-origin: left top;
	transform: scale(1, 1);
}




/*layout
----------------------------------------------------*/
header {
	position: fixed;
	top: 0;
	left: 0;	
	width: 100%;
	z-index: 10000;
	background: rgba(255,255,255,0.9);
	box-sizing: border-box;
	padding: 13px 15px;
	height: 80px;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

header h1 {
	width: 240px;
	margin: 0;
}

#menu_btn {
	opacity: 0.9;
	position: fixed;
	top:   0px;
	right: 0;
	z-index: 10000;
	width: 40px;
	height: 40px;
	padding: 20px;
	margin: 0;
	cursor: pointer;
	background: #225e39;
}

.menu__line {
	position: absolute;
	display: block;
	width: 50%;
	height: 2px;
	background: #fff;
	transition: transform .3s;
}

.menu__line--top {
	top: calc(50% - 12px);
	left: calc(50% - 20px);
}

.menu__line--center {
	top: 50%;
	left: calc(50% - 20px);
}

.menu__line--bottom {
	top: calc(50% + 12px);
	left: calc(50% - 20px);
}

.menu__line--top.active {
	top: 50%;
	transform: rotate(45deg);
	background: #fff;
}

.menu__line--center.active {
	transform: scaleX(0);
	background: #fff;
}

.menu__line--bottom.active {
	top: 50%;
	transform: rotate(135deg);
	background: #fff;
}

nav#g_nav {
	position: fixed;
	max-width: 1040px;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100000;
}

nav#g_nav ul.menu {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 85px 0 0;
	background: rgb(34, 94, 57);
	text-align: center;
}

nav#g_nav ul.menu > li a {
	display: block;
	padding: 20px 1em;
	background: #225e39;
	border-top: 1px solid rgba(255,255,255,0.1);
	color: #fff;
	text-decoration: none;
	font-size: 18px;
	font-size: 1.8rem;
	zoom: 1;
	font-weight: 400;
}

nav#g_nav ul.menu > li > a:hover {
	background: #31744b; 
}

#mainImage {
	position: relative;
	width: 100%;
	min-height: 100vh;
	background: url("/img/top_main.jpg") 50% 50% / cover;
}

#mainImage::before {
	content:"";
	display: block;
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(.5rem);
	background-color: rgba(170, 226, 192, 0.3);
	background-blend-mode: soft-light;
	z-index:1;
	animation: blur_clear 4.0s cubic-bezier(.8, 0, .2, 1) 0.5s forwards;
}

@keyframes blur_clear {
	0% {
		backdrop-filter: blur(.5rem);
		background-color: rgba(170, 226, 192, 0.3);
		background-blend-mode: soft-light;
	}
	100%{
		backdrop-filter: none;
		background-color: rgba(170, 226, 192, 0.1);
		background-blend-mode: none;
	}
}

#mainImage .text {
	position: absolute;
	top: 40%;
	left: 0;
	z-index: 100;
	width: 100%;
}

#mainImage .text p {
	margin: 0 auto;
	width: fit-content;
	font-weight: bold;
	text-align: center;
	color: #000;
	letter-spacing: 0.1em;
	line-height: 2;
	font-size: 20px;
	font-size: 2.0rem;
	font-weight: 300;
	background-color: hsla(0,0%,100%,.7);
	background-blend-mode: soft-light;
	padding: 0.5em 1em;
}

#mainImage .top_img_scroll {
	position: absolute;
	bottom: 0;
	padding: 0 0 6em;
	left: 50%;
	z-index: 100;
	writing-mode: vertical-rl;
	color: #000;
	display: block;
	font-size: 0.9em;
}

#mainImage .top_img_scroll::after {
	content: "";
	position: absolute;
	display: block;
	width: 1px;
	height: 5em;
	bottom: 0;
	left: 48%;
	background: #000;
	animation: Top_Img_Scroll 2s cubic-bezier(.76,0,.24,1) infinite;
}

@keyframes Top_Img_Scroll {
	0% {
	 transform-origin:top;
	 transform:scaleY(0)
	}
	50% {
	 transform-origin:top;
	 transform:scaleY(1)
	}
	51% {
	 transform-origin:bottom;
	 transform:scaleY(1)
	}
	to {
	 transform-origin:bottom;
	 transform:scaleY(0)
	}
}

.pagetitle {
	padding: 110px 0 20px;
	position: relative;
	text-align: center;
	line-height: 1.5;
	font-weight: 700;
	background: #225e39;
	font-weight: 400;
}

.pagetitle p span.en {
	font-size: 18px;
	font-size: 1.8rem;
	color: #ccc;
}

.pagetitle p span.ja {
	font-size: 28px;
	font-size: 2.8rem;
	color: #fff;
}

#wrapper {
	clear: both;
}

section {
	max-width: 1200px;
	margin: 0 auto;
	padding: 5% 10px;
}

section.full {
	max-width: none;
	padding: 5% 0;
}

section.bg_gray {
	background: #f4f4f4;
}

section .inner {
	padding: 0 10px;
	max-width: 1200px;
	margin: 0 auto;
}

.section02 {
	margin: 0 0 30px;
}

h2.title01 {
	margin-bottom: 2.5em;
	line-height: 1.8;
	font-weight: 400;
	text-align: center;
}

h2.title01 span.en {
	font-size: 15px;
	font-size: 1.5rem;
	color: #777;
}

h2.title01 span.ja {
	font-size: 30px;
	font-size: 3.0rem;
	color: #225e39;
}

.title02 {
	font-size: 22px;
	font-size: 2.2rem;
	color: #225e39;
	font-weight: 600;
	text-align: center;
	margin-bottom: 1em;
}

.title03 {
	padding: 0.3em;
	margin-bottom: 0.8em;
	font-size: 1.3em;
	background: rgba(34, 94, 57, 0.1);
	color: #225e39;
	font-weight: 700;
	text-align: center;
}

dl.list01 dt {
	font-size: 1.1em;
	font-weight: 600;
}

dl.list01 dd,
ul.list01 li {
	position: relative;
	padding-left: 1.5em;
	line-height: 1.2;
	margin-bottom: 1em;
}

dl.list01 dd::before,
ul.list01 li::before {
	content: "";
	display: block;
	width: 0.8em;
	height: 0.8em;
	background: #225e39;
	position: absolute;
	left: 0;
	top: 0.3em;
}

ul.list02 li {
	position: relative;
	padding-left: 1em;
	margin-bottom: 1em;
}

ul.list02 li::before {
	content: "";
	display: block;
	border-radius: 50%;
	width: 0.4em;
	height: 0.4em;
	background: #225e39;
	position: absolute;
	left: 0;
	top: 0.8em;
}

.page_top {
	display:none;
	position: fixed;
	width:100%;
	height:0;
}

.page_top a {
	position: fixed;
	bottom: 90px;
	left: auto;
	padding: 6em 0 0;
	right: 3%;
	margin-left:100%;
	z-index: 2000;
	writing-mode: vertical-rl;
	text-decoration: none;
	color: #225e39;
	display: inline-block;
	font-size: 0.9em;
	font-weight: 500;
}

.page_top a::after {
	content: "";
	position: absolute;
	display: block;
	width: 1px;
	height: 5em;
	top: 0;
	left: 48%;
	background: #225e39;
	animation: pageTop-bar 2s cubic-bezier(.76,0,.24,1) infinite;
}

@keyframes pageTop-bar {
 0% {
  transform-origin:bottom;
  transform:scaleY(0)
 }
 50% {
  transform-origin:bottom;
  transform:scaleY(1)
 }
 51% {
  transform-origin:top;
  transform:scaleY(1)
 }
 to {
  transform-origin:top;
  transform:scaleY(0)
 }
}

footer {
	clear: both;
	background: rgba(34, 94, 57, 0.1);
	text-align: center;
}

footer .cover {
	padding: 1em;
}

footer .cover .info {
	padding: 1em;
}

footer h2 {
	margin-bottom: 0.5em;
}

footer .info p.tel {
	font-size: 1.8em;
}

footer .info p.address {
	margin: 1em 0 2em;
}

footer .info table {
	width: 100%;
	margin: 1em 0 0.5em;
	border-collapse: separate;
    border-spacing: 3px;
	text-align: center;
}

footer .info table th,
footer .info table td {
	padding: 3px;
	font-size: 13px;
	font-size: 1.3rem;
}

footer .info table thead th {
	background: #225e39;
	color: #fff;
}

footer .info table tbody th {
	background: #fff;
}

footer .info table tbody td {
	background: #fff;
	color: #225e39;
}

footer .info dl.hours_note {
	text-align: left;
	font-size: 0.9em;
}

footer .info dl.hours_note dt {
  font-weight: bold;
  margin-top: 1em;
  color: #225e39;
}

footer .gmap {
	position: relative;
	padding: 0 0 56.25%;
	height: 0;
	overflow: hidden;
	margin: 2em 0;
}

footer .gmap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

footer ul.foot_nav li {
	font-size: 0.9em;
	padding: 1em;
	border-bottom: 1px solid rgba(0,0,0,0.2);
}

footer ul.foot_nav li:first-child {
	border-top: 1px solid rgba(0,0,0,0.2);
} 

footer ul.foot_nav li a {
	color: #222;
	text-decoration: none;
	display: block;
	position: relative;
}

footer ul.foot_nav li a:hover {
	color: #777;
}

footer .copy {
	padding: 1.5em 1em;
	background: #225e39;
	color: #fff;
}


/*media Queries
----------------------------------------------------*/
@media only screen and (min-width: 600px) {

	br.sp {
		display: none;
	}

	#mainImage .text p {
		font-size: 30px;
		font-size: 3.0rem;
	}
	
	.section02 {
		margin: 0 0 4%;
	}

	footer ul.foot_nav li:first-child,
	footer ul.foot_nav li {
		border: none;
		text-align: left;
		position: relative;
		padding-left: 1.2em;
		line-height: 1;
		display: inline-block;
	}

	footer ul.foot_nav li::after {
		position: absolute;
		display: block;
		content:"";
		top: 50%;
		left: 0;
		height: 0.5em;
		width: 0.5em;
		margin-top: -0.2em;
		transform: rotate(45deg);;
		border-top: 1px solid #225e39;
		border-right: 1px solid #225e39;
	}

}
	
@media only screen and (min-width: 800px) {
	body {
		font-size: 16px;
		font-size: 1.6rem;
	}

	br.tab {
		display: none;
	}

	br.pc {
		display: inline;
	}

	a.button01,
	a.button02 {
		padding: 1em 2em;
		font-size: 18px;
		font-size: 1.8rem;
	}

	header {
		padding: 15px 30px;
		height: auto;
	}

	header .head_inner {
		transition: .3s;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	header .is-animation {
		padding: 6px 3% 3px;
	}
	
	header h1 {
		width: 350px;
		max-width: 40%;
		padding: 0;
	}
	
	header h1 img {
		transition:all 0.3s;
	}

	header .is-animation h1 img {
		transform: scale(0.8,0.8);
	}
	
	nav#g_nav {
		position:relative;
		top: auto;
		left: auto;
	}
		
	nav#g_nav.fixed {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: rgba(255,255,255,0.9);
		z-index: 100000;
	}	
	
	nav#g_nav #menu_btn{
		display: none;
	}
	
	nav#g_nav ul.menu {
		position: relative;
		display: flex;
		box-shadow: none;
		background: none;
		justify-content: flex-end;
		gap: 2em;
		padding: 0;
	}
	
	nav#g_nav ul.menu > li {
		width: auto;
		position: relative;
		padding: 20px 0;
	}

	nav#g_nav ul.menu > li::before {
		display: block;
		content: "";
		width: 100%;
		height: 2px;
		background: #225e39;
		border-radius: 2px;
		position: absolute;
		left: 0;
		bottom: 10px;
		margin: auto;
		transform-origin: right top;
		transform: scale(0, 1);
		transition: transform .3s;
	  }
	
	nav#g_nav ul.menu > li a {
		display: block;
		border-top: none;
		background: none;
		color: #000;
		padding: 0;
		height: auto;
		line-height: 1em;
		overflow: hidden;
	}

	nav#g_nav ul.menu > li a:hover {
		background: none;
	}
	
	nav#g_nav ul.menu > li:hover::before {
		transform-origin: left top;
		
		transform: scale(1, 1);
	}

	.pagetitle {
		padding: 150px 0 30px;
	}

	.pagetitle p span.en {
		font-size: 22px;
		font-size: 2.2rem;
	}
	
	.pagetitle p span.ja {
		font-size: 40px;
		font-size: 4.0rem;
	}

	.title02 {
		font-size: 28px;
		font-size: 2.8rem;
	}

	footer .cover {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	footer .cover .info {
		width: 40%;
	}

	footer .cover .map_nav {
		width: 50%;
	}

	footer .gmap {
		margin: 0 0 2em;
	}

}

@media only screen and (min-width: 1200px) {

	#mainImage .text p {
		font-size: 30px;
		font-size: 3.0rem;
	}

	section {
		font-size: 16px;
		font-size: 1.6rem;
	}
	
	h2.title01 span.en {
		font-size: 22px;
		font-size: 2.2rem;
	}

	h2.title01 span.ja {
		font-size: 46px;
		font-size: 4.6rem;
	}

	footer .info table th,
	footer .info table td {
		font-size: 16px;
		font-size: 1.6rem;		
		padding: 0.6em 0;
	}

	
}