@charset "utf-8";

/*----------------------------------------------------------------
 MainLayout
 -----------------------------------------------------------------
 c/p
 <link href="./common/css/layout.css" rel="stylesheet" type="text/css" media="screen,print" />
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 base
----------------------------------------------------------------*/
html,body{
	font-size			: 62.5%; /* 10px */
}
body{
	font-size			: 1.6rem;
	line-height			: 1.625;
	color				: #000;
	font-family			:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO",
							"メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif;
}

/* inline element
-----------------------------------------------------*/

/* link
----------------------------------*/
a{
	text-decoration		: none;
	color				: #669900;
}
a:hover{ text-decoration: none; }

/*-----------------------------------------------------
 class
-----------------------------------------------------*/

/* separater line
-----------------------------------------------------*/
hr.separater{ display: none; }

/* anchor(pagetop)
-----------------------------------------------------*/
p.anchor{
	visibility			: hidden;
	position			: absolute;
	top					: 0px;
	left				: 0px;
}

/* tel
-----------------------------------------------------*/
p.tel{
	position			: fixed;
	bottom				: 0px;
	right				: 0px;
	z-index				: 1;
}
@media screen and (max-width: 768px) {
p.tel{ width: 170px; }
}

/* br
-----------------------------------------------------*/
@media screen and (min-width: 768px) { .br_sp{ display: none; } }

/* hide
-----------------------------------------------------*/
@media screen and (max-width: 768px) { [data-show=hide_sp]{ display: none; } }
@media screen and (min-width: 768px) { [data-show=hide_pc]{ display: none; } }

/* view
-----------------------------------------------------*/
@media screen and (max-width: 768px) { [data-show=show_sp]{ display: block; } }
@media screen and (min-width: 768px) { [data-show=show_pc]{ display: block; } }

/* fixed
-----------------------------------------------------*/
.fixed{
	position			: fixed!important;
	top					: 0px;
	z-index				: 10;
}

/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/

/*-----------------------------------------------------
 wrap
-----------------------------------------------------*/
.wrap{
	position			: relative;
	overflow			: hidden;
}
#wrap{
	width				: 100%;
}

/*-----------------------------------------------------
 area
-----------------------------------------------------*/
.area{
	position			: relative;
	overflow			: hidden;
	clear				: both;
}

#header{ height: 5.5rem; }
@media screen and (min-width: 768px) {
#header{
	height				: 12rem;
	padding				: 1rem 0 0 0;
}
}

@media screen and (max-width: 768px) {
#mainview{ height: 25rem; }
}
@media screen and (min-width: 768px) {
#mainview{ height: 50rem; }
}
@media screen and (min-width: 1050px) {
#mainview{ height: 60rem; }
}

#title{ background: #95bc00; }

#contents{
	padding				: 0.1rem 0 5rem 0;
	background			: #f6f3e4;
}

#nav{ background: #ddd9c8; }

#footer{
	padding				: 1.5rem 0 4rem 0;
	text-align			: center;
	font-size			: 1.2rem;
}
@media screen and (min-width: 768px) {
#footer{
	padding				: 2rem 0;
	font-size			: 1.8rem;
}
}

/*-----------------------------------------------------
 container
-----------------------------------------------------*/
.container{
	position			: relative;
	overflow			: hidden;
	clear				: both;
	margin				: 0 auto;
	width				: 100%;
	min-width			: 30rem;
	padding				: 0 1rem;
}
@media screen and (min-width: 768px) {
.container{
	width				: 768px;
	padding				: 0;
}
}
@media screen and (min-width: 1050px) {
.container{ width: 1000px; }
}

@media screen and (min-width: 768px) {
#navigation .container{ width: 100%; }
}

#title .container{ height: 9rem; }
@media screen and (min-width: 768px) {
#title .container{ height: 19rem; }
}


/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/

/*-----------------------------------------------------
 header
-----------------------------------------------------*/
#header .row{
	display				: flex;
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-wrap			: wrap;
	flex-direction		: row;
	justify-content		: space-between;
}
#header .logo{
	position			: relative;
	z-index				: 15;
}

@media screen and (max-width: 768px) {
#header .logo{ max-width: 18.5rem; }
}

@media screen and (min-width: 768px) {
#header .logo{ top: -0.3rem; }
}

/*-----------------------------------------------------
 navigation
-----------------------------------------------------*/
#navigation .navi{
	display				: flex;
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-wrap			: wrap;
}
@media screen and (min-width: 768px) {
#navigation .navi{ flex-direction: row; }
#navigation .navi li{ margin: 0 0 0 1rem; }
#navigation .navi li a{
	position			: relative;
	display				: block;
	width				: 10rem;
	height				: 10rem;
	border-radius		: 5rem;
	background			: #95bc00;
}
#navigation .navi li.current a,
#navigation .navi li a:hover{ background: #eb9800; }
#navigation .navi li a img{
	position			: absolute;
	top					: 50%;
	left				: 50%;
	transform			: translateY(-50%) translateX(-50%);
}
}

/*-----------------------------------------------------
 mainview
-----------------------------------------------------*/
@media screen and (max-width: 768px) {
#mainview img{
	height				: 25rem;
	object-fit			: cover;
}
}

/*-----------------------------------------------------
 title
-----------------------------------------------------*/
#title h1{
	position			: absolute;
	top					: 50%;
	transform			: translateY(-50%);
	padding				: 1rem 2rem 1rem 0;
	background			: #95bc00;
}
@media screen and (min-width: 768px) {
#title h1{
	padding				: 1rem 2rem 1rem 0;
	background			: #95bc00;
}
}
#title .main{ float: right; }

/*-----------------------------------------------------
 footer
-----------------------------------------------------*/
#footer dl{}
#footer dl dt{ margin: 0 0 2.2rem 0; }
#footer em{ font-size: 1.6rem; }
#footer .logo{ margin: 0 0 1.5rem 0; }
#footer .responsive-map{ margin: 2.2rem 0 0 0; }
@media screen and (max-width: 768px) {
#footer .responsive-map{
	height				: 0;
	overflow			: hidden;
	padding-top			: 57.143%;
	position			: relative;
}
#footer .responsive-map iframe{
	position			: absolute;
	top					: 0;
	left				: 0;
	width				: 100%;
	height				: 100%;
}
}
@media screen and (min-width: 768px) {
#footer em{ font-size: 3rem; }
#footer .logo{ margin: 0 0 2rem 0; }
}



/*----------------------------------------------------------------
 common parts
----------------------------------------------------------------*/
/* content-list
----------------------------------------------------*/
.content-list{ margin: 50px 0; }
.content-list ul{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
}
.content-list li{
	list-style: none;
}
.content-list li a{
	display				: block;
	height				: 100%;
	background			: #FFF;
	text-decoration		: none;
	font-size			: 1.2rem;
	color				: #000;
}
.content-list li dt{
	border-top			: 5px solid #95bc00;
	line-height			: 1px;
}
.content-list li dt img{ width: 100%; }
.content-list li a:hover dt img{ opacity: 0.5; }
.content-list li dd{ padding: 1.5rem 1rem; }
.content-list li dd span{ display: block; }
.content-list li dd span.arrow{
	position			: relative;
	margin				: 0 0 1rem 0;
	padding				: 0 1.3rem 0 0;
	line-height			: 1px;
}
.content-list li dd span.arrow img{ vertical-align: bottom; }
.content-list li dd span i.fas{
	position			: absolute;
	top					: 0.4rem;
	right				: 0;
	vertical-align		: bottom;
	font-size			: 2rem;
	color				: #95bc00;
}
@media screen and (max-width: 767px) {
.content-list{
	margin				: 20px calc(50% - 50vw);
	width				: 100vw;
	padding				: 0 0 0 1rem;
	overflow-x			: auto;
	overflow-y			: hidden;
	-webkit-overflow-scrolling	: touch;
	overflow-scrolling			: touch;
}
.content-list ul{
	width				: calc(46vw * 5);
	margin				: 0 0 1.5rem 0;
}
.content-list li{
	flex				: 0 0 42vw;
	margin				: 0 3vw 0 0;
	list-style			: none;
}
}
@media screen and (min-width: 768px) {
.content-list ul{
	flex-wrap			: wrap;
	justify-content		: space-between;
}
.content-list li{
	list-style			: none;
	margin				: 0;
	width				: auto;
	max-width			: 31%;
}
.content-list li.flex2{
	max-width			: 48.5%;
	margin				: 0 0 30px 0;
}
.content-list li a{ font-size: 1.8rem; }
.content-list li dd{ padding: 1.5rem 1.7rem 2.5rem 1.7rem; }
.content-list li dd span.arrow{ padding: 0 3rem 0 0; }
.content-list li dd span i.fas{
	position			: absolute;
	top					: 1.5rem;
	font-size			: 3rem;
}
}



.btn{
	display				: block;
	max-width: 300px;
	padding				: 0.6rem 0;
	background			: #95bc00;
	border-radius		: 0.5rem;
	text-align			: center;
	text-decoration		: none;
	color				: #FFF;
}
.btn:hover{
	background			: #FFF;
	color				: #95bc00;
}