@charset "utf-8";

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　初期設定　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

*{
	margin: 0px;
	padding: 0px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

img{
	vertical-align: middle;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝　ページレイアウト　＝＝＝＝＝＝＝＝＝＝＝＝＝ */

body{
	width: 100%;
	-webkit-text-size-adjust: 100%;
}

p.resizeimage img { width: 100%; }

.f-color-red {
	color: #F00;
}

.f-color-blue {
	color: #00F;
}

.f-color-brown {
	color: #863428;
}

h2{
	position: relative;
	font-size: 16px;
	padding-top: 0.5em;
	padding-right: 0;
	padding-bottom: 0.25em;
	padding-left: 0;
}
h2:after {
content: "";
display: block;
height: 4px;
background: -moz-linear-gradient(to right, rgb(0, 0, 255), transparent);
background: -webkit-linear-gradient(to right, rgb(0, 0, 255), transparent);
background: linear-gradient(to right, rgb(0, 0, 255), transparent);
}

/* margin set
--------------------------------------------------*/
.mt3  { margin-top:  3px;} .mt4  { margin-top:  4px;} .mt5  { margin-top:  5px;}
.mt7  { margin-top:  7px;} .mt8  { margin-top:  8px;} .mt10 { margin-top: 10px;}
.mt15 { margin-top: 15px;} .mt18 { margin-top: 18px;} .mt20 { margin-top: 20px;}
.mt24 { margin-top: 24px;} .mt25 { margin-top: 25px;} .mt30 { margin-top: 30px;}
.mt40 { margin-top: 40px;} .mt45 { margin-top: 45px;} .mt50 { margin-top: 50px;}
.mt60 { margin-top: 60px;} .mt70 { margin-top: 70px;}

.mb15,
.mb1em {
	margin-bottom: 15px;
}

.mb3  { margin-bottom:  3px;}
.mb5  { margin-bottom:  5px;} .mb10 { margin-bottom: 10px;} .mb20 { margin-bottom: 20px;} .mb25 { margin-bottom: 25px;} .mb30 { margin-bottom: 30px;}
.mb40 { margin-bottom: 40px;} .mb50 { margin-bottom: 50px;} .mb60 { margin-bottom: 60px;}

.ml3  { margin-left:  3px;} .ml5  { margin-left:  5px;} .ml10 { margin-left: 10px;} .ml15 { margin-left: 15px;}
.ml20 { margin-left: 20px;} .ml25 { margin-left: 25px;} .ml30 { margin-left: 30px;}
.ml40 { margin-left: 40px;} .ml50 { margin-left: 50px;} .ml60 { margin-left: 60px;}
.ml70 { margin-left: 70px;} .ml80 { margin-left: 80px;} .ml85 { margin-left: 85px;} .ml90 { margin-left: 90px;}
.ml100 { margin-left: 100px;} .ml110 { margin-left: 110px;} .ml120 { margin-left: 120px;}
.ml140 { margin-left: 140px;} .ml160 { margin-left: 160px;} .ml180 { margin-left: 180px;}

.mr5  { margin-right:  5px;} .mr10 { margin-right: 10px;} .mr15 { margin-right: 15px;}
.mr20 { margin-right: 20px;} .mr25 { margin-right: 25px;} .mr30 { margin-right: 30px;}
.mr40 { margin-right: 40px;} .mr50 { margin-right: 50px;} .mr60 { margin-right: 60px;}
.mr65 { margin-right: 65px;} .mr80 { margin-right: 80px;} .mr100 { margin-right: 100px;}
.mr120 { margin-right: 120px;}

/* width
--------------------------------------------------*/
.w10p{width:10%;}
.w15p{width:15%;}
.w20p{width:20%;}
.w25p{width:25%;}
.w30p{width:30%;}
.w40p{width:40%;}
.w50p{width:50%;}
.w60p{width:60%;}
.w70p{width:70%;}
.w80p{width:80%;}
.w90p{width:90%;}

.w90{width:90px;}
.w100{width:100px;}
.w110{width:110px;}
.w120{width:120px;}
.w124{width:124px;}
.w130{width:130px;}
.w140{width:140px;}
.w160{width:160px;}
.w180{width:180px;}
.w200{width:200px;}
.w210{width:210px;}
.w240{width:240px;}
.w247{width:247px;}
.w248{width:248px;}
.w250{width:250px;}
.w260{width:260px;}
.w280{width:280px;}
.w298{width:298px;}
.w310{width:310px;}
.w300{width:300px;}
.w325{width:325px;}
.w330{width:330px;}
.w335{width:335px;}
.w350{width:350px;}
.w370{width:370px;}
.w400{width:400px;}
.w450{width:450px;}
.w460{width:460px;}
.w470{width:470px;}
.w490{width:490px;}
.w500{width:500px;}
.w505{width:505px;}
.w515{width:515px;}
.w520{width:520px;}
.w540{width:540px;}
.w560{width:560px;}
.w590{width:590px;}
.w600{width:600px;}
.w630{width:630px;}
.w650{width:650px;}
.w670{width:670px;}
.w680{width:680px;}

/* float set
--------------------------------------------------*/
.floLeft{float:left;}
.floRight{float:right;}
.floCenter{
	margin-right: auto;
	margin-left: auto;
}

/*テーブル
---------------------------------------------------------------------------*/
table {
	border-collapse:collapse;
	font-size: 100%;
	border-spacing: 0;
}

/*テーブル１
---------------------------------------------------------------------------*/
.ta1 {
	width: 95%;
}
.ta1, .ta1 td, .ta1 th{
	border: 1px solid #CCC;	/*テーブルの枠線の幅、線種、色*/
	line-height: 2;
}
/*テーブル内の右側*/
.ta1 td{
	padding: 5px;
}
/*テーブル内の左側*/
.ta1 th{
	width: 180px;
	padding: 5px;
	text-align: center;
	background-color: #F0F0F0;	/*背景色*/
}
/*テーブル１行目に入った見出し部分*/
.ta1 th.tamidashi{
	width: auto;
	text-align: left;
	color: #FFF;	/*文字色*/
	background-color: #333;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background-image: -webkit-gradient(linear, left top, left bottom, from(#4b4b4b), to(#333));	/*グラデーション*/
	background-image: -webkit-linear-gradient(#4b4b4b, #333);	/*同上*/
	background-image: linear-gradient(#4b4b4b, #333);			/*同上*/
}
/*テーブルのキャプション設定*/
.ta1 caption{
	padding: 5px;
	border-top: 1px solid #CCC;		/*上側の線の幅、線種、色*/
	border-right: 1px solid #CCC;	/*右側の線の幅、線種、色*/
	border-left: 1px solid #CCC;	/*左側の線の幅、線種、色*/
	text-align: left;
	background-color: #e9ddae;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background-image: -webkit-gradient(linear, left top, left bottom, from(#efe6c5), to(#e9ddae));	/*グラデーション*/
	background-image: -webkit-linear-gradient(#efe6c5, #e9ddae);	/*同上*/
	background-image: linear-gradient(#efe6c5, #e9ddae);			/*同上*/
	font-weight: bold;	/*文字を太字にする設定*/
}


/*テーブル２
---------------------------------------------------------------------------*/
.ta2 {
	width: 95%;
}
.ta2, .ta2 td, .ta2 th{
	border: 1px solid #4D1E17;	/*テーブルの枠線の幅、線種、色*/
	line-height: 2;
}
/*テーブル内の右側*/
.ta2 td{
	padding: 3px;
}

/*FAQ*/
dl.qa {
overflow: hidden;
_zoom: 1;
}
dl.qa dd,
dl.qa dt {
text-indent: -2.6em; 
padding: 0 20px 0px 50px;
}
dl.qa dt {
margin: 20px 20px 0 0;
}
dl.qa dd:first-letter,
dl.qa dt:first-letter {
font-size: 1.6em;
font-weight: bold;
margin-right: 10px;
padding: 5px;
}
dl.qa dd {
margin: 10px 0 -1px 0;
padding-bottom: 20px;
border-bottom: solid 1px #aaa;
}
dl.qa dt:first-letter {
color: #3498db;
}
dl.qa dd:first-letter {
color: #ff6767;
}

.c {
	text-align: center;
}

/*submitボタンの設定*/
input[type="submit"],
input[type="button"] {
	width: 250px;	/*ボタン幅*/
	padding: 10px;	/*ボタン内の余白*/
	margin-bottom: 20px;
	border-radius: 30px;	/*角丸のサイズ*/
	font-size: 16px;	/*文字サイズ*/
	letter-spacing: 0.1em;	/*文字間隔を少し広めにとる設定。*/
	border: 1px solid #999;	/*枠線の幅、線種、色*/
	background-color: #FFF;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#dcdcdc));	/*グラデーション*/
	background-image: -webkit-linear-gradient(#FFF, #dcdcdc);	/*同上*/
	background-image: linear-gradient(#FFF, #dcdcdc);			/*同上*/
	-webkit-box-shadow: 1px 2px 5px #ccc;	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
	box-shadow: 1px 2px 5px #ccc;			/*同上*/
}
/*submitボタンのマウスオン時の設定*/
input[type="submit"]:hover,
input[type="button"]:hover {
	background-color: #dcdcdc;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background-image: -webkit-gradient(linear, left top, left bottom, from(#dcdcdc), to(#FFF));	/*グラデーション*/
	background-image: -webkit-linear-gradient(#dcdcdc, #FFF);	/*同上*/
	background-image: linear-gradient(#dcdcdc, #FFF);			/*同上*/
}


@media only screen and (min-width:801px) {
	body{
		width: 1030px;
		padding: 0px 15px;
		margin: 0px auto;
	}
}

header{
	width: 100%;
}

#main{
	width: 100%;
	margin: 40px 0px;
	padding: 0px 15px;
}
@media only screen and (min-width:801px) {
	#main{
		width: 700px;
		float: left;
		margin-left: -15px;
	}
}

aside{
	width: 300px;
	margin: 40px auto;
}
#sidebar-2{
	display: none;
}
@media only screen and (min-width:651px) {
	aside{
		width: 620px;
	}
	#sidebar-1{
		width: 300px;
		float: left;
	}
	#sidebar-2{
		width: 300px;
		float: right;
		display: block;
	}
}
@media only screen and (min-width:801px) {
	aside{
		width: 300px;
		float: right;
	}
}

aside:after{
	display: table;
	content: "";
	clear: both;
}

footer{
	width: 100%;
	clear: both;
	padding: 15px 20px;
	background: #000;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　ヘッダー　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

#logo{
	display: block;
	float: left;
	width: 180px;
	margin: 15px 0px 3px 10px;
}
@media only screen and (min-width:651px) {
	#logo{
		width: 270px;
	}
}

#header-top-link{
	float: right;
	margin: 10px 10px 5px;
	list-style-type: none;
}

#header-top-link li{
	display: inline-block;
	margin-left: 10px;
}

#header-top-link a{
	display: block;
	text-decoration: none;
}

#header-top-link img{
	height: 30px;
}
@media only screen and (min-width:651px) {
	#header-top-link img{
		height: 18px;
		padding-right: 5px;
	}
}

#header-top-link span{
	display: none;
}
@media only screen and (min-width:651px) {
	#header-top-link span{
		display: inline;
		color: #666;
		font-size: 15px;
	}
}

#header-top:after{
	display: table;
	content: "";
	clear: both;
}

#header-img{
	height: 200px;
	background-image: url("../images/header-img.jpg");
	background-size: contain;
	background-position: bottom;
}
@media only screen and (min-width:651px){
	#header-img{
		height: 250px;
	}
}
@media only screen and (min-width:801px) {
	#header-img{
		height: 300px;
	}
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝　ナビゲーション　＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

#sp-menu{
	background: #000;
	color: #FFF;
	font-weight: bold;
	font-size: 16px;
	padding-left: 15px;
	line-height: 45px;
}
@media only screen and (min-width:651px) {
	#sp-menu{
		display: none;
	}
}

#sp-menu img{
	height: 30px;
	padding-bottom: 4px;
	margin-right: 8px;
}

nav ul{
	list-style-type: none;
	display: none;
}
@media only screen and (min-width:651px) {
	nav ul{
		display: block;
	}
}

nav li{
	width: 50%;
	float: left;
	border-bottom: solid 2px #666;
}
nav li:nth-child(odd){
	border-right: solid 2px #666;
}
@media only screen and (min-width:651px) {
	nav li{
		width: 16.66666667%;
		border-right: solid 2px #666;
		border-bottom: none;
	}
	nav li:last-child{
		border-right: none;
	}
}

nav a{
	display: block;
	color: #FFF;
	font-weight: bold;
	font-size: 13px;
	line-height: 45px;
	padding-left: 15px;
	text-decoration: none;
	background-color: #4D1E17;
}
@media only screen and (min-width:651px) {
	nav a{
		line-height: 36px;
		text-align: center;
		padding-left: 0;
	}
}

nav a:hover{
	background: #C30;
}

nav ul:after{
	display: table;
	content: "";
	clear: both;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　メイン用　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

#main section{
	margin-bottom: 60px;
}

h1{
	color: #336;
	line-height: 1.2;
	border-bottom: solid 2px #336;
	margin-bottom: 8px;
	max-height: 999999px;
}
h1{font-size: 20px;}
@media only screen and (min-width:651px) {
	h1{font-size: 24px;}
}

.main-text{
	text-align: justify;
	font-size: 15px;
	line-height: 1.5;
	max-height: 999999px;
}
@media only screen and (min-width:651px) {
	.main-text{
		font-size: 16px;
	}
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝　サイドバー用　＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.banner{
	margin-bottom: 15px;
	text-align: center;
	font-size: 14px;
	padding-top: 15px;
}

aside p{
	font-size: 12px;
	line-height: 1.3;
	margin-bottom: 10px;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝　フッター用　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

footer ul{
	width: 100%;
	margin-bottom: 30px;
	list-style-type: none;
}
@media only screen and (min-width:801px) {
	footer ul{
		width: 300px;
	}
}

footer li{
	width: 50%;
	float: left;
}

footer li a{
	display: block;
	color: #FFF;
	font-size: 13px;
	line-height: 45px;
	padding-left: 10px;
	text-decoration: none;
}
@media only screen and (min-width:801px) {
	footer li a{
		line-height: 24px;
	}
}

footer li a:hover{
	background: #C30;
}

footer ul:after{
	display: table;
	content: "";
	clear: both;
}

#select-layout{
	margin-bottom: 30px;
	text-align: right;
	color: #FFF;
	font-size: 13px;
}

#PC-site,#MO-site{
	padding: 5px 8px;
	border: solid 1px #999;
	display: none;
}

#copyright{
	text-align: right;
	color: #FFF;
	font-size: 12px;
}

@media only screen and (min-width:651px) {
	#copyright br{
		display: none;
	}
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝　グリッドシステム　＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.row{
	margin: 10px -15px;
}
.row:after{
	display: table;
	content: "";
	clear: both;
}

.sm-1-div, .sm-2-div, .sm-3-div, .sm-4-div{
	display: block;
	float: left;
	padding: 0px 15px;
}
.sm-1-div{width: 100%;}
.sm-2-div{width:  50%;}
.sm-3-div{width:  33.33333333%;}
.sm-4-div{width:  25%;}
@media only screen and (min-width:651px) {
	.bg-1-div{width: 100%;}
	.bg-2-div{width:  50%;}
	.bg-3-div{width:  33.33333333%;}
	.bg-4-div{width:  25%;}
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝　汎用クラス　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* 縦方向の間隔調整 */
.height-space{
	height: 0px;
	margin-bottom: 40px;
}

/* 小画面－内余白ゼロ */
@media only screen and (max-width:650px) {
	.sm-nopad{
		padding: 0;
	}
}