@charset "utf-8";

/* reset
============================================================================ */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}
p img {vertical-align: bottom;}

/* 基本設定
============================================================================ */
body{
	font-family: 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
	text-align:center;
	line-height:2em;
	color:#333;
	background:#C5D0D5;
}
p{
	margin-bottom:1%;
}
a{
	color:#03C;
	text-decoration:none;
}
a:hover, .active{
	color:#03F;
	text-decoration:underline;
}
img { width: 100%; height:auto; vertical-align:top; }
img.i90 { width: 90%; height:auto; text-align:center; }
img.org { width: auto; }

/*---------------------------------------------------------
PCとSPで画像切り替え
---------------------------------------------------------*/
@media screen and (max-width: 559px) {
	/* 560px未満の時 SP用 */
	.pcimg { display: none !important; }
	.spimg { display: block !important; }
}
@media screen and (min-width: 560px) {
	/* 560px以上の時 PC用 */
	.pcimg { display: block !important; }
	.spimg { display: none !important; }
}

/*---------------------------------------------------------
テンプレ
---------------------------------------------------------*/
.spaceB10{ margin-bottom: 10px; }
.spaceB20{ margin-bottom: 20px; }
.tx_center{ text-align:center; }

/*---------------------------------------------------------
モバイルファースト
---------------------------------------------------------*/
#wrapper{
	width:100%;
	margin:0 auto;
	text-align:left;
}
header{
	margin:0 auto;
	text-align:center;
	height:auto;
}
header p{
	text-align:center;
	font-size:12px;
}
header h1{
	margin:-16px 0 0;
}
.content-inner{
	box-sizing: border-box;
	padding:16px;
	background-color:#FFF;
	border-radius:20px;
	box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.3);
}
.content{
	display:block;
	width:100%;
	margin:0 auto;
}
.content div.contL{
	width:100%;
	padding-right:0;
}
.content div.contR{
	width:100%;
}

footer{
	text-align:center;
}
footer a{
	color:#333;
	text-decoration:none;
}

.mid1{
	position: relative;
	background:#3398cc;
	border-radius:50px;
	color:#FFF;
	font-size:1em;
	padding:0.1em 0.1em 0.1em 4.2em;
	margin:0.4em 0 0.4em 0.4em;
}
.mid1:before {
	position: absolute;
	top:-5px;
	left:-5px;
	content: url(../images/menu_maru1.webp);
}
.mid2{
	position: relative;
	background:#ff6666;
	border-radius:50px;
	color:#FFF;
	font-size:1em;
	padding:0.1em 0.1em 0.1em 4.2em;
	margin:0.4em 0 0.4em 0.4em;
}
.mid2:before {
	position: absolute;
	top:-5px;
	left:-5px;
	content: url(../images/menu_maru2.webp);
}
.mid3{
	position: relative;
	background:#2EBA71;
	border-radius:50px;
	color:#FFF;
	font-size:1em;
	padding:0.1em 0.1em 0.1em 4.2em;
	margin:0.4em 0 0.4em 0.4em;
}
.mid3:before {
	position: absolute;
	top:-5px;
	left:-5px;
	content: url(../images/menu_maru3.webp);
}

.mid1 span,
.mid2 span,
.mid3 span{
	display:block;
	font-size:0.8em;
	margin-top:-10px;
}

h4{
	background:#8C9EAA;
	color:#FFF;
	padding:0.5em 1em 0.2em;
	border-bottom:5px solid #666;
	border-radius: 10px 10px 0px 0px;
}
.information{
	background:#EEE;
	padding:0.5em 0.9em;
	border-radius: 0px 0px 10px 10px;
}
.info h5{
	font-weight:bold;
}
.info p{
	font-size:0.8em;
	line-height:1.8em;
	padding-bottom:1em;
}

footer{
	margin-top:0.5em;
}

#pankuzu{
	margin-bottom:1em;
	border-radius:10px;
	display: flex;
	flex-wrap: nowrap;
	white-space: nowrap;
	overflow-x: scroll;
	list-style: none;
}
#pankuzu li{
	font-size:0.8em;
}
#pankuzu li:not(:last-of-type)::after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f0da";
	margin: 0 .6em; /* 記号の左右の余白 */
	color: #777; /* 記号の色 */
}
#pankuzu a {
	color: inherit;
	text-decoration: none;
}
.tempimg{
	width:100%;
}
.subtext{
	font-size:0.8em;
	line-height:1.8em;
	text-align:left;
}
.btn{
	width:100%;
	margin:0 0.5em 0.5em 0;
}

/*---------------------------------------------------------
PCサイト用
---------------------------------------------------------*/
@media screen and ( min-width:560px ) {
	/* 560px以上の時 PC用 */
	#wrapper{
		width:960px;
	}
	header{
		height:146px;
	}
	header h1{
		margin:-32px 0 0;
	}
	.content{
		display: flex;
		justify-content: space-between;
	}
	.content-inner{
		width:960px;
		padding:24px;
	}
	.content div.contL{
		flex-basis:690px;
		padding-bottom:20px;
	}
	.content div.contR{
		flex-basis:200px;
		padding-bottom:20px;
	}
	.mid1,
	.mid2,
	.mid3{
		position: relative;
		border-radius:50px;
		color:#FFF;
		font-size:1.2em;
		padding:0.4em 0.4em 0.4em 3.5em;
		margin:0.4em 0 0.4em 0.4em;
	}
	.mid1:before,
	.mid2:before,
	.mid3:before {
		top: -11px;
		left: -8px;
	}
	.mid1 span,
	.mid2 span,
	.mid3 span{
		display:inline;
		font-size:0.8em;
	}
	.tempimg{
		width:90%;
	}
	.subtext{
		font-size:0.75em;
		line-height:1.8em;
	}
	.btn{
		width:48%;
	}
	.information{
		display:flex;
		flex-wrap: wrap;
		align-items: stretch;
		margin-bottom:1em;
	}
	.info{
		width:30%;
		padding:0.2em 0.9em;
	}
	.information.rside{
		display:block;
	}
	.information.rside .info{
		width:100%;
		padding:0.2em;
	}

}

/*---------------------------------------------------------
一覧のレスポンシブ
---------------------------------------------------------*/
ul.item-list,
ul.item-list2{
	display:flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin-bottom:1em;
	text-align:center;
}
ul.item-list li img,
ul.item-list2 li img{
	margin-bottom:0;
	padding-bottom:0;
}
ul.item-list li{
	flex-grow: 1; /* 幅いっぱいに広げる */
	width:20%; /* 4つずつ */
	margin:1%;
}
ul.item-list2 li{
	flex-grow: 1; /* 幅いっぱいに広げる */
	width:25%; /* 3つずつ */
	margin:1%;
}
ul.item-list li a,
ul.item-list2 li a{
	display:block;
	width:100%;
	height:100%;
	border:1px solid #CCC;
	box-sizing:border-box;
}
ul.item-list li a:hover,
ul.item-list2 li a:hover{
	text-decoration:none;
	border:2px solid #09F;
}

@media screen and (max-width: 479px) {
	/* 479px以下に適用 */
	ul.item-list li{
		width:30%; /* 3つずつ */
	}
	ul.item-list2 li{
		width:46%; /* 2つずつ */
	}
}