@charset "UTF-8";

/************************************************** common */

/* icon内のテキスト非表示 */
i span{
	display: none;
}

/* margin-top */
.mt30{ margin-top: 30px; }
.mt40{ margin-top: 40px; }
.mt50{ margin-top: 50px; }

/* color */
.red{
	color: #ff0000;
}

img{
	max-width: 100%;
}
a:hover img{
	opacity:0.6;
	filter:alpha(opacity=80);
	-ms-filter: “alpha( opacity=80 )”;
}
h2{
	padding-bottom: 20px;
	border-bottom: 1px #eee dotted;
	color: #666;
	font-size: 2.3rem;
}
h3{
	margin-top: 30px;
	padding: 15px 0 15px 5px;
	border-top: 1px solid;
	border-bottom: 1px solid;
	font-size: 2.3rem;
	color: #666;
}
h4{
	margin-top: 10px;
	padding: 15px 0 15px 5px;
	border-bottom: 1px solid;
	font-size: 2.3rem;
	color: #888;
}
h5{
	margin-top: 10px;
	padding: 15px 0 15px 5px;
	border-bottom: 1px solid;
	font-size: 2.0rem;
	color: #999;
}
h6{
	margin-top: 10px;
	padding: 15px 0 15px 5px;
	border-bottom: 1px solid;
	font-size: 1.8rem;
	color: #aaa;
}
.boxh{
	margin-top: 10px;
	padding: 10px 15px 15px 15px;
	background: #daebf3;
	font-size: 2rem;
	font-weight: bold;
}

.boxh span{
	margin: -30px 10px 0 0;
	width: 60px;
	height: 60px;
	display: inline-block;
}
.boxh span.rank1{
	background: url(../img/rank1.png) no-repeat;
	background-size: contain;
}
.boxh span.rank2{
	background: url(../img/rank2.png) no-repeat;
	background-size: contain;
}
.boxh span.rank3{
	background: url(../img/rank3.png) no-repeat;
	background-size: contain;
}
.boxh span.rank0{
	background: url(../img/rank0.png) no-repeat;
	background-size: contain;
}
.boxh span span{
	display: none;
}

.onepoint {
	width: 100%;
	margin: 5px auto 15px auto;
	overflow: hidden;
	background:#E0E0E0;
}

.onepoint p {
	padding: 1em;
	line-height: 1.75em;
	text-align: justify;
	text-indent: 0;
}

.imgc{
	margin-top: 30px;
	text-align: center;;
}

table.kashi {
	margin-top: 30px;
	width: 100%;
	border-collapse: collapse;
	background-color: #FFFFFF;
}
table.kashi th,
table.kashi td{
	padding: 13px 15px;
	border: 1px #999 solid;
	width: 50%;
	text-align: center;
}
table.kashi th{
	background-color: #c3dcb8;
}

table.kashi2 {
	margin-top: 30px;
	width: 100%;
	border-collapse: collapse;
	background-color: #FFFFFF;
}
table.kashi2 th,
table.kashi2 td{
	padding: 13px 15px;
	border: 1px #999 solid;
}
th.name{
	width: 35%;
}
th.address{
	width: 65%;
}
table.kashi2 th{
	background-color: #c3dcb8;
}

table.kashi input{
	margin-right: 3px;
	padding: 2px 5px;
	border: 1px #999 solid;
}

td.hai{
	background-color: #f6f6f6;
}

/* スマホナビ開閉 */
/* 開閉処理はjsで行なっている */
#spnavi-oc{
	padding-top: 8px;
	width: 50px;
	height: 50px;
	background: #4B99B5;
	color: #fff;
	text-align: center;
	position: fixed;
	top: 0;
	right: 0;
	display: none;
	cursor: pointer;
}
#spnavi-oc .fa-times{
	display: none;
}

/* ページ上部へ */
#totop{
	padding-top: 3px;
	width: 46px;
	height: 40px;
	background: #323944;
	color: #fff;
	cursor: pointer;
	text-align: center;
	position: fixed;
	bottom: 0;
	right: 4px;
	z-index: 20000;
	display: none;
	opacity: 0.6;
	-moz-opacity:0.6;
	-khtml-opacity: 0.6;
	-ms-filter: "alpha(opacity=60)";
	zoom:1;
}


/************************************************** 会話部分 */

.talk{
	margin-top: 20px;
	width: 100%;
}
.talk td{
	vertical-align: top;
}
.talk .person{
	min-width: 50px;
}
.talk .text{
	width: 90%;
}
.talk .person img{
	border-radius: 50%; 
	max-width: 50px;
	-moz-border-radius: 50%; 
	-webkit-border-radius: 50%;
	-o-border-radius: 50%; 
	-ms-border-radius: 50%; 
	box-shadow: 0px 0px 5px #bbb;  
	-moz-box-shadow: 0px 0px 5px #bbb;  
	-webkit-box-shadow: 0px 0px 5px #bbb;
	-o-box-shadow: 0px 0px 5px #bbb;  
	-ms-box-shadow: 0px 0px 5px #bbb;
}

/* 吹き出し 左 */
.arrow_box_left {
	margin-left: 20px;
	padding: 15px 10px;
	position: relative;
	background: #fff;
	border: 3px solid #eee;
	border-radius: 5px; 
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
}
.arrow_box_left:after, .arrow_box_left:before {
	right: 100%;
	top: 40%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.arrow_box_left:after {
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #fff;
	border-width: 10px;
	margin-top: -10px;
}
.arrow_box_left:before {
	border-color: rgba(204, 204, 204, 0);
	border-right-color: #eee;
	border-width: 14px;
	margin-top: -14px;
}

/* 吹き出し 右 */
.arrow_box_right {
	margin-right: 20px;
	padding: 15px 10px;
	position: relative;
	background: #fff;
	border: 3px solid #eee;
	border-radius: 5px; 
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
}
.arrow_box_right:after, .arrow_box_right:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.arrow_box_right:after {
	border-color: rgba(255, 255, 255, 0);
	border-left-color: #fff;
	border-width: 10px;
	margin-top: -10px;
}
.arrow_box_right:before {
	border-color: rgba(204, 204, 204, 0);
	border-left-color: #eee;
	border-width: 14px;
	margin-top: -14px;
}




/************************************************** base */

body{
	min-width: 320px;
	background: url(../img/bg_body.png) center repeat;
	font-size: 1.5rem;
	line-height: 180%;
}
#header{
	padding: 15px 0;
	width: 100%;
	background: #8fbc8f;
	color: #fff;
}
#contents{
	margin: 0 auto;
	padding: 30px 0;
	max-width: 1100px;
}
	#main{
		padding: 0 30px 0 0;
		width: 70%;
		float: left;
	}
	#main-in{
		padding: 30px;
		background: #fff;
		/* 角丸 */
		border-radius: 3px; 
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		-o-border-radius: 3px;
		-ms-border-radius: 3px;
		/* 影 */
		box-shadow: 0px 0px 5px #bbb;  
		-moz-box-shadow: 0px 0px 5px #bbb;  
		-webkit-box-shadow: 0px 0px 5px #bbb;
		-o-box-shadow: 0px 0px 5px #bbb;  
		-ms-box-shadow: 0px 0px 5px #bbb;
	}
	#side{
		padding: 0;
		width: 30%;
		float: right;
	}
	#side-in{
	}
#footer{
	padding: 20px 0;
	background: #323944;
	color: #86909E;
	font-size: 1.2rem;
	text-align: center;
	position: relative;
	clear: both;
}


/****************************** header */

#header p{
	margin: 0 auto;
	width: 1100px;
	font-size: 1.1rem;
}
#header h1{
	margin: 0 auto;
	font-size: 1.6rem;
	width: 1100px;
}
#header h1 a{
	color: #fff;
	text-decoration: none;
}
#header h1 a:hover{
	color: #ffe605;
}

/****************************** contents:main */

/*  */
.box1{
}
	.box1 p{
		margin: 30px 0 0 0;
	}
	.box1 a:hover{
	text-decoration: none;
	}
	/* 青丸数字 */
	.box1 ol{
		margin: 30px 0 0 0;
		counter-reset: number;
	}
	.box1 ol li{
		padding-left: 25px;
		position:relative;
	}
	.box1 ol li::before {
		counter-increment: number;
		content: counter(number);
		background: #00afdc;
		color: #fff;
		width: 1.9rem;
		height: 1.9rem;
		font-size: 1.3rem;
		font-weight: bold;
		display: block;
		text-align: center;
		line-height: 2rem;
		border-radius: 50%;
		position: absolute;
		left: 0;
		top: 3px;
	}



/* 背景色あり、ボーダーあり、角丸あり */
.box2{
	margin: 30px 0 0 0;
	padding: 20px;
	background: lightyellow;
	border: 1px #ccc solid;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
}
	.box2 p{
		padding-left: 3px;
		display: inline-block;
	}
	.box2 ul{
		padding-left: 20px;
		list-style-type: disc;
	}

/* ボーダーあり */
.box3{
	margin: 30px 0 0 0;
	padding: 15px;
	border: 3px #ccc solid;
}
	.box3 .title1{
		margin-top: 20px;
		padding-bottom: 10px;
		color: #8fc31f;
		border-bottom: 2px #666 dotted;
		font-size: 1.9rem;
		font-weight: bold;
	}
	.box3 .title2{
		margin-top: 30px;
		color: #8fc31f;
		font-size: 1.5rem;
		font-weight: bold;
		clear: both;
	}
	.box3 .red{
		color: #ff0000;
		font-weight: bold;
	}
	/* バナー・キャッチコピー*/
	.box3 .banner{
		margin-top: 20px;
	}
	.box3 .banner .banner1,
	.box3 .banner .banner2{
		padding: 0 15px;
		float: left;
	}
	.box3 .banner .banner1 img{
		max-width: 200px;
	}
	.box3 .banner .banner2 ul{
		padding-left: 20px;
		list-style-type: disc;
	}
	/* 詳細ページ・公式サイトボタン*/
	.box3 .button{
		margin-top: 20px;
	}
	.box3 .button .button1,
	.box3 .button .button2{
		padding: 0 15px;
		width: 50%;
		text-align: center;
		float: left;
	}
	.box3 .button .button3{
		padding: 0 15px;
		width: 100%;
		text-align: center;
		float: center;
	}
	.box3 .button .button1 div,
	.box3 .button .button2 div,
	.box3 .button .button3 div{
		padding: 10px 5px;
		width: 100%;
		display: block;
		border-radius: 5px; 
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		-o-border-radius: 5px;
		-ms-border-radius: 5px;
	}
	.box3 .button .button1 div{
		background: #09C;
	}
	.box3 .button .button1 div:hover{
		background: #31CCFF;
	}
	.box3 .button .button2 div{
		background: #228b22;
	}
	.box3 .button .button2 div:hover{
		background: #2CA52C;
	}
	.box3 .button .button3 div{
		background: #228b22;
	}
	.box3 .button .button3 div:hover{
		background: #2CA52C;
	}
	.box3 .button .button1 a,
	.box3 .button .button2 a,
	.box3 .button .button3 a{
		color: #fff;
		text-decoration: none;
		display: block;
	}
	.box3 .button i{
		padding-left: 4px;
	}

/* box center */
.boxC{
	margin-top: 20px;
	text-align: center;
}

/* ディレクトリごとのトップページ用 */
.box0{
	margin: 30px 0 0 0;
	padding: 20px;
	background: #f9f9f9;
	border: 1px #ccc solid;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
}
	.box0 p{
		padding-left: 3px;
		display: inline-block;
	}
	.box0 ul{
		padding-left: 20px;
		list-style-type: disc;
	}
	.box0 a:hover{
	text-decoration: none;
	}

/* 最下部外部リンク */
.link{
	margin-top: 30px;
	text-align: right;
}
.link a{
	color: #74B7CF;
	font-weight: bold;
}
.link a:hover{
	text-decoration: none;
}/****************************** contents:side */

/* カテゴリー名 */
#side .title{
	padding: 3px;
	background: #8fbc8f;
}
	#side .title div{
		padding: 15px 10px;
		border: 1px #fff solid;
		color: #fff;
	}

/****************************** contents:side */

/* カテゴリー名 */
#side .title{
	padding: 3px;
	background: #8fbc8f;
}
	#side .title div{
		padding: 15px 10px;
		border: 1px #fff solid;
		color: #fff;
	}

/* カテゴリー内容・サブカテゴリー内容 */
#side ul li{
	padding: 10px 5px;
	width: 100%;
	border-bottom: 1px #ccc solid;
	display: table;
}
#side ul li.sub{
	padding-left: 15px;
}
	#side ul li a{
		padding-right: 8px;
		width: 95%;
		display: table-cell;
		text-decoration: none;
	}
	#side ul li a:hover{
		opacity: 0.6;
		-moz-opacity:0.6;
		-khtml-opacity: 0.6;
		-ms-filter: "alpha(opacity=60)";
		zoom:1;
	}
	/* 内容右端の「>」マーク */
	#side ul li i{
		width: 5%;
		color: #74B7cf;
		font-weight: bold;
		text-align: left;
		display: table-cell;
		vertical-align: middle;
	}
	#side ul li:hover i{
		text-align: right;
	}


/****************************** footer */

#footer a{
	color: #B0B4BA;
	text-decoration: none;
}
#footer a:hover{
	text-decoration: underline;
}




/************************************************** 狭幅画面対応 */

/* 基本サイズ未満 */
@media screen and (max-width:1099px){
	#header p{
		padding: 0 60px 0 5px;
		width: 100%;
		line-height: 1.5rem;
	}
	#header h1{
		padding: 0 60px 0 5px;
		width: 100%;
	}
	#contents{
		width: 100%;
	}
	#main{
		margin: 0;
		padding: 0 10px;
		width: 70%;
	}
	#main-in{
		padding: 30px 10px;
	}
	#side{
		padding: 0 10px;
		width: 30%;
	}
}

/* iPad P 未満*/
@media screen and (max-width:767px){
	body{
		font-size: 1.3rem;
	}
	h2{
		font-size: 2rem;
	}
	h3{
		font-size: 2rem;
	}
	h4{
		font-size: 1.8rem;
	}
	#main{
		width: 100%;
		z-index: 10000;
	}
		.box2{
			padding: 20px 5px;
		}
	#side{
		width: 100%;
		height: 100%;
		display: none;
		z-index: 20000;
	}
	#side ul li a{
		width: 98%;
	}
	#side ul li i{
		width: 2%;
	}
}

/* 横並びのバナーとボタンの配置 */
@media screen and (max-width:700px){
	.box3 .banner .banner1,
	.box3 .banner .banner2,
	.box3 .button .button1,
	.box3 .button .button2,
	.box3 .button .button3{
		width: 100%;
		float: none;
	}
	.box3 .banner .banner1 img{
		margin: 0 auto;
		max-width: 100%;
	}
	.box3 .button .button1,
	.box3 .button .button2,
	.box3 .button .button3{
		margin: 10px 0;
	}
	table.kashi{
	margin-top: 10px;
	margin-bottom: 50px;
	width: 100%;
	border-collapse: collapse;
	}
	table.kashi th{
	padding: 4px;
	}
	table.kashi td{
	padding: 4px;
	}
}

/* カテゴリー名と「>」の割合 */
@media screen and (max-width:600px){
	#side ul li a{ width: 97.5%; }
	#side ul li i{ width: 2.5%; }
}
@media screen and (max-width:500px){
	#side ul li a{ width: 97%; }
	#side ul li i{ width: 3%; }
}
@media screen and (max-width:400px){
	#side ul li a{ width: 96%; }
	#side ul li i{ width: 4%; }
}