@charset "utf-8";

/* noto-sans-jp-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 200;
  src: url('../css/fonts/noto-sans-jp-v54-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-jp-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 300;
  src: url('/css/fonts/noto-sans-jp-v54-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-jp-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: url('/css/fonts/noto-sans-jp-v54-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-jp-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  src: url('/css/fonts/noto-sans-jp-v54-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-jp-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 600;
  src: url('/css/fonts/noto-sans-jp-v54-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-jp-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  src: url('/css/fonts/noto-sans-jp-v54-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-jp-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 800;
  src: url('/css/fonts/noto-sans-jp-v54-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-jp-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 900;
  src: url('/css/fonts/noto-sans-jp-v54-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html {
	/* ルートのフォントサイズを10pxに設定しておく */
	font-size: 62.5%;
	/*scroll-behavior: smooth;*/
}

body {
	/* ルートのフォントサイズを1.6em（16pxと同等のサイズ）に設定 */
	font-size: 1.6em;
	/*font-family:"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic","ヒラギノ角ゴ Pro W2", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
	font-family: "Noto Sans JP", sans-serif;
	color: #2B2B2B;
	line-height: 1.8;
}

a[href^="tel:"] {
	color: inherit;
	pointer-events: none;
	text-decoration:none;
	display: inline-block;
}

@media screen and ( max-width: 559px ){

	a[href^="tel:"] {
		color: inherit;
		pointer-events: auto;
	}

}

ul{ padding: 0; list-style-type: none;}

.pc{ display: block ; }
.tab{ display: block ; }
.sp{ display: none ; }

@media screen and ( max-width: 1024px ){
	.tab{ display: none ; }
}

@media screen and ( max-width: 559px ){
	.pc{ display: none ; }
	.sp{ display: block ; }
}

a{
	color: #1E1E1E;
	transition: .5s;
}

a:hover{
	opacity: 0.6;
	color: #1E1E1E;
	text-decoration: none;
}

img{ max-width: 100%;}

dl, ol, ul {
    margin-top: 0;
    margin-bottom: 0;
}

/*----------------------------------------*/

.mt-2 { margin-top: 2rem;}
.mt-3 { margin-top: 3rem;}
.mt-4 { margin-top: 4rem;}
.mt-5 { margin-top: 5rem;}
.mt-6 { margin-top: 6rem;}
.btn {
	padding: 1rem 2rem;
	font-size: 1.6rem;
}
.font-red {color: #CC0000;}
.font-25 {font-size: 2.5rem;}
.font-24 {font-size: 2.4rem;}
.font-23 {font-size: 2.3rem;}
.font-22 {font-size: 2.2rem;}
.font-21 {font-size: 2.1rem;}
.font-20 {font-size: 2rem;}
.font-19 {font-size: 1.9rem;}
.font-18 {font-size: 1.8rem;}
.font-17 {font-size: 1.7rem;}
.font-16 {font-size: 1.6rem;}
.font-15 {font-size: 1.5rem;}
.font-14 {font-size: 1.4rem;}
.font-13 {font-size: 1.3rem;}
.font-12 {font-size: 1.2rem;}
.font-11 {font-size: 1.1rem;}
.font-10 {font-size: 1rem;}

.pc-pd15 {margin-left: 15px; margin-right: 15px;}

.mg-b2{ margin-bottom: 2rem;}
.mg-b3{ margin-bottom: 3rem;}
.mg-b4{ margin-bottom: 4rem;}
.mg-b5{ margin-bottom: 5rem;}
.mg-b6{ margin-bottom: 6rem;}
.mg-b7{ margin-bottom: 7rem;}
.mg-b8{ margin-bottom: 8rem;}
.mg-b9{ margin-bottom: 9rem;}
.mg-b10{ margin-bottom: 10rem;}
.mg-b11{ margin-bottom: 11rem;}
.mg-b12{ margin-bottom: 12rem;}
.mg-b13{ margin-bottom: 13rem;}
.mg-b14{ margin-bottom: 14rem;}
.mg-b15{ margin-bottom: 15rem;}

.pdt15{ padding-top: 15rem; }
.pdb15{ padding-bottom: 15rem; }
.pd-9{ padding-top: 9rem; padding-bottom: 9rem; }


@media screen and ( max-width: 559px ){

	.mg-b2{ margin-bottom: 1rem;}
	.mg-b3{ margin-bottom: 1.5rem;}
	.mg-b4{ margin-bottom: 2rem;}
	.mg-b5{ margin-bottom: 2.5rem;}
	.mg-b6{ margin-bottom: 3rem;}
	.mg-b7{ margin-bottom: 4rem;}
	.mg-b8{ margin-bottom: 4rem;}
	.mg-b9{ margin-bottom: 5rem;}
	.mg-b10{ margin-bottom: 5rem;}
	.mg-b11{ margin-bottom: 6rem;}
	.mg-b12{ margin-bottom: 6rem;}
	.mg-b13{ margin-bottom: 6.5rem;}
	.mg-b14{ margin-bottom: 7rem;}
	.mg-b15{ margin-bottom: 7.5rem;}
	
	.pdt15{ padding-top: 8rem; }
	.pdb15{ padding-bottom: 8rem; }
	.pd-9{ padding-top: 5rem; padding-bottom: 5rem; }

}

/*---------------------------------------------------------------------------------------------*/

header.top_page{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 12svh;
}

header.top_page .head_logo{
	max-width: 65svh;
}

header.top_page .head_logo h1{
	margin-bottom: 0;
}

@media screen and ( max-width: 820px ){

	header.top_page{
		height: 8svh;
	}

	header.top_page .head_logo{
		max-width: 40rem;
	}

}

@media screen and ( max-width: 700px ){

	header.top_page{
		height: 11svh;
	}

	header.top_page .head_logo{
		max-width: 25rem;
	}

}

/*-----------------------------*/

.top_page_area{
	width: 100%;
	display: flex;
	height: 74svh;
}

@media screen and ( max-width: 1180px ){

.top_page_area{
	height: 69svh;
}

}

@media screen and ( max-width: 820px ){

	.top_page_area{
		/* height: 69svh; */
		height: 70svh;
	}

}

@media screen and ( max-width: 768px ){

	.top_page_area{
		height: 72svh;
	}

}

@media screen and ( max-width: 760px ){

	.top_page_area{
		height: auto;
	}

}

@media screen and ( max-width: 559px ){

	.top_page_area{
		height: 89svh;
	}

}

.top_page_area li{
	width: 50%;
	overflow: hidden;
	position: relative;
	transition: .5s;
}

@media screen and ( max-width: 820px ){

	.top_page_area{
		flex-wrap: wrap;
	}

	.top_page_area li{
		width: 100%;
	}

}

.top_page_area li.left .cover{
	background: url(../img/top/top-01-original.jpg);
}
.top_page_area li.right .cover{
	background: url(../img/top/top-02-original.jpg);
}

.top_page_area li.left .cover,
.top_page_area li.right .cover{
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	transition: .5s;
	z-index: 0;

	/* filter: grayscale(70%); */
	opacity: 0.7;
	transition: all .6s;
}

.top_page_area li.left .cover:hover,
.top_page_area li.right .cover:hover{
	background-size: cover;
	/* filter: grayscale(0%); */
	opacity: 1;
	transition: all .6s;
	transform: scale(1.05);
}

/* .top_page_area li.right{
	background: url(../img/top/top-02-original.jpg);
	background-size: cover;
} */

.top_page_area li a{
	width: 100%;
	height: 100%;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.top_page_area li a:hover{
	opacity: 1;
}

.top_page_area li::after{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,0.5);
	background-image: radial-gradient(circle, rgba(0,0,0,0.1) 1px, transparent 1px), radial-gradient(circle, rgba(0,0,0,0.1) 1px, transparent 1px);
	background-position: 0 0, 2px 4px;
	background-size: 4px 8px;
	z-index: 0;
	pointer-events: none;
	transition: .5s;
}

.top_page_area li:hover::after{
	background-color: rgba(0,0,0,0.0);
	background-image: radial-gradient(circle, rgba(0,0,0,0.0) 1px, transparent 1px), radial-gradient(circle, rgba(0,0,0,0.0) 1px, transparent 1px);
	pointer-events: none;
	transition: .5s;
}

.top_page_area li .box{
	position: relative;
	background: rgba(255, 255, 255, .7);
	z-index: 5;

	width: 30rem;
	height: 25rem;
	padding: 2rem 1rem;
	border-radius: 2rem;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	transition: .5s;
	overflow: hidden;
	text-align: center;
}

@media screen and ( max-width: 700px ){

	.top_page_area li .box{
		width: 22rem;
		height: 18rem;
		padding: 2rem 1rem;
		border-radius: 2rem;
	}

}

.top_page_area li:hover .box{
	background-color: rgba(255,255,255,1);
	transition: .5s;
	z-index: 5;
	position: relative;
	transition: .5s;
}
.top_page_area li .box::after{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0rem solid #67bc6f;
	border-radius: 2rem;
	transition: .5s;
	z-index: -1;
}
.top_page_area li:hover .box::after{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 20rem solid #67bc6f;
	border-radius: 2rem;
	transition: .5s;
}

.top_page_area li .box div{
	width: 100%;
}

.top_page_area li .box div.icon{
	width: 4rem;
}

.top_page_area li .box div.icon img{

}

.top_page_area li:hover .box div.icon img{
	mix-blend-mode: multiply;
}

.top_page_area li .box div.title{
	font-size: 3rem;
	font-weight: bold;
	line-height: 1.5;
}

.top_page_area li:hover .box div.title{
	color: #fff;	
}

.top_page_area li .box div.here{
	font-size: 2.4rem;
	font-weight: bold;
	color: #5DBD6E;
}

.top_page_area li:hover .box div.here{
	color: #fff;	
}

@media screen and ( max-width: 700px ){

	.top_page_area li .box div.title{
		font-size: 2.1rem;
	}

	.top_page_area li .box div.here{
		font-size: 1.8rem;
	}

}

/*-----------------------------*/

footer#top_page_footer{
	background: #5DBD6E;
	height: 14svh;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	
	min-height: 15rem;
}

footer#top_page_footer .footer{
	max-width: 120rem;
	width: 100%;
	padding-left: 3rem;
	padding-right: 3rem;
}

footer#top_page_footer .footer_area{

}

footer#top_page_footer .footer_area .footer_data{
	width: 100%;
	justify-content: space-between;
	display: flex;
	color: #fff;
}

footer#top_page_footer .footer_area .footer_data li{
	
}

footer#top_page_footer .footer_area .footer_data li:last-child{
	
}

footer#top_page_footer .footer_area .footer_data a{
	color: #fff;
	text-decoration: underline;
}

footer#top_page_footer .footer_area .footer_data a.tel{
	text-decoration: none;
}

footer#top_page_footer .footer_area .footer_data a:hover{
	text-decoration: none;
}

@media screen and ( max-width: 1400px ){

	footer#top_page_footer .footer_area .footer_data li:last-child{
		padding-right: 10rem;
	}

}

@media screen and ( max-width: 1180px ){

	footer#top_page_footer{
		height: 19svh;
	}

	footer#top_page_footer .footer_area .footer_data li:last-child{
		padding-right: 0;
	}

}

@media screen and ( max-width: 820px ){

	footer#top_page_footer{
		/* height: auto; */
		height: 22svh;
		padding-top: 4rem;
		padding-bottom: 3rem;
	}

	footer#top_page_footer .footer_area {
		font-size: 1.5rem;
	}

	footer#top_page_footer .footer_area .footer_data{
		flex-wrap: wrap;
	}

	footer#top_page_footer .footer_area .footer_data li{
		width: 100%;
		margin-bottom: 2rem;
	}

	footer#top_page_footer .footer_area .footer_data li:last-child{
		display: flex;
		justify-content: space-between;
		margin-bottom: 0rem;
	}

}

@media screen and ( max-width: 820px ){

	footer#top_page_footer{
		height: 20svh;
	}

	footer#top_page_footer .footer_area .footer_data li:nth-child(2) {
		width: 47%;
	}

}

@media screen and ( max-width: 700px ){

	footer#top_page_footer{
		height: auto;
		padding-top: 4rem;
		padding-bottom: 3rem;
	}

	footer#top_page_footer .footer_area {
		font-size: 1.4rem;
	}

	footer#top_page_footer .footer_area .footer_data li:nth-child(2) {
		width: 100%;
	}

}

footer#top_page_footer .footer_area .footer_data .logo{
	max-width: 30rem;
}

