@charset "utf-8";

@import url("tab-accordion.css");
@import url("loading-icon.css");
@import url("button.css");
@import url("top-page.css");
@import url("patapata-text.css");

@import url("top-category.css");

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 初期設定 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/*ブラウザごとの差異を解消する*/
*{
	margin: 0px;
	padding: 0px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box; /*ボックスサイズを枠線まで含めたサイズで指定できるように*/
	font-family: '游ゴシック体', 'Yu Gothic', "Hiragino Kaku Gothic ProN", 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	/*font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; */
}

img{
	vertical-align: middle; /*画像の縦の配置,隙間なく表示するための書式設定*/
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝ ページレイアウト ＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/*▼ページレイアウト画面801px以上、大画面のレイアウト*/
@media print,screen and (min-width:801px) {
	body{
		width: 1030px;
		padding: 0px 15px; /*内余白,左右15px,実際の表示幅は1000px*/
		margin: 0px auto;/*marginにauto指定し、画面中央に表示*/
	}
}

/*画面幅800px以下651px以上のとき、中画面のレイアウト*/
@media print,screen and (max-width:800px) and (min-width:651px) {
	body{
		padding-top: 0px;/*内余白を0pxに変更,大画面から中画面に,ハンバーガーメニュdiv非表示*/
	}
}

/*画面幅650px以下のとき、小画面レイアウト*/
@media print,screen and (max-width:650px) {
body{
	width: 100%; /*Webページを画面全体に表示する*/
	-webkit-text-size-adjust: 100%;
		padding: 50px 0px; /*内余白を指定し50px下に移動させる*/
 }
}

/*文字サイズを自動調節するモバイル端末の自動調節機能を無効にする。レイアウトが乱れるのを防ぐため*/
body{
	-webkit-text-size-adjust:100%;
	-moz-text-size-adjust:none;
}

/*ヘッダーの書式設定*/
header{
	width: 100%; /*headerの親要素はbodyなので,小・中画面は画面全体,大画面は1000px*/
}

/*メイン領域,画面幅801px以上,大画面*/
@media print,screen and (min-width:801px) {
	#main{
		width: 700px; /*右サイドの残りの画面幅*/
		float: left; /*左寄せの配置,右サイドバー*/
		margin-left: -15px; /*ネガティブマージン,メイン領域の左右15px内余白により右にずれた本文を15px左側にずらして配置する。グリッドシステムを利用するため左右余白を残す*/
		margin-top:40px;  /*ＰＣファースト、上の余白がなくなるので余白40pxを追加する*/
		padding: 0px 15px; /*左右の内余白15px,読みやすいレイアウト*/
		}
}

/*メイン領域,中小画面800px以下*/
@media print,screen and (max-width:800px) {
	#main{
		width: 100%;
		margin: 40px 0px; /*上下の外余白40px,ヘッダー、フッターとの間隔調整*/
		padding: 0px 15px; /*左右の内余白15px,読みやすいレイアウト*/
 		}
}


/* ＝＝＝＝＝トップページのレイアウト ＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/*▼ページレイアウト画面801px以上、大画面のレイアウト*/

/*メイン領域,画面幅801px以上,大画面*/
@media print,screen and (min-width:801px) {
	#top-main{
		width: 1030px; /*全面使用の画面幅*/
		float: left; /*左寄せの配置,右サイドバー*/
		margin-left: -15px; /*ネガティブマージン,メイン領域の左右15px内余白により右にずれた本文を15px左側にずらして配置する。グリッドシステムを利用するため左右余白を残す*/
	margin-top:40px;  /*ＰＣファースト、上の余白がなくなるので余白40pxを追加する*/
	padding: 0px 15px; /*左右の内余白15px,読みやすいレイアウト*/
	}
}


/*▼サイドバー,大画面用のレイアウト*/
@media print,screen and (min-width:801px) {
	aside{
		width: 300px;
		float: right;/*右にサイドバー表示*/
		margin-top: 20px ; /*marginにauto指定し、画面中央に表示。上下メイン領域と同じ値の外余白でヘッダー・フッターとの間隔を調整する*/
	}
		#sidebar-area{
		width: 299px;/*280px*/
		padding-top:5px;
		padding-bottom:15px;
		background: #D4EFFF;/*緑#52953A青#105FD2,#0075C2,#122FEA,空色#00A0E9,#D4EFFF*/
	}/*サイドバーのボタンを隠れボタンにするためボタンエリアに背景を付ける*/
}

/*サイドバー,中画面用のレイアウト*/
@media print,screen and (max-width:800px) and (min-width:651px) {
	aside{
		width: 620px; /*サイドバーを２段組みで配置*/
		margin: 40px auto; /*marginにauto指定し、画面中央に表示。上下メイン領域と同じ値の外余白でヘッダー・フッターとの間隔を調整する*/
	}
	#sidebar-1{
		width: 300px;
		float: left; /*２段組みの左に配置*/
	}
	#sidebar-2{
		width: 300px;
		float: right; /*２段組みの右に配置*/
	}
}

/*サイドバー,小画面用*/
@media print,screen and (max-width:650px) {
aside{
	width: 300px;
	margin: 40px auto;/*marginにauto指定し、画面中央に表示。上下メイン領域と同じ値の外余白でヘッダー・フッターとの間隔を調整する*/
	}
	#sidebar-1{
	display: none; /*非表示、重要でないコンテンツの表示を省略する*/
 }
	#sidebar-2{
	display: none; /*非表示、重要でないコンテンツの表示を省略する*/
 }
}


/*clearfix,floatを解除する*/
aside:after{
	display: table;
	content: "";
	clear: both; /*clearプロパティで解除しないとaside要素の高さが正しく認識されない*/
 }

/*フッターレイアウト*/
footer{
	width: 100%; /*親要素はbodyとなるので,小中画面用レイアウトは画面幅,大画面は1000px*/
	clear: both; /*大画面用レイアウトでメイン領域とサイドバーに指定されている回り込みを解除*/
	padding: 15px 20px;
	background: #52953A;/*緑#52953A青#105FD2空色#00A0E9に変更,初期値#222黒色*/
}

/*汎用clearfix フロート解除*/
.clearfix:after{
	content:"";
	display: block;
	clear: both;
}
.clearfix{*zoom:1;}/*IE6,IE7*/


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

/*▼ ロゴ画像,中画面用,大画面用レイアウト*/
@media print,screen and (min-width:651px) {
	#logo{
	display: block; /*img要素をインライン要素からブロックレベル要素に変更*/
	float: left; /*ロゴ画像を左寄せに配置*/
	width: 270px; /*ロゴ画像の幅,中・大画面レイアウトに画像の表示サイズ*/
	margin: 15px 0px 3px 10px; /*ロゴ画像の上下左右の間隔調整*/
	}
}

/*ロゴ画像,小画面用レイアウト*/
@media print,screen and (max-width:650px) {
#logo{
	display: block; /*img要素をインライン要素からブロックレベル要素に変更*/
	float: left; /*ロゴ画像を左寄せに配置*/
	width: 180px; /*小画面用レイアウト,ロゴ画像の表示サイズの指定*/
	margin: 15px 0px 3px 10px; /*ロゴ画像の上下左右の間隔調整*/
	}
}


/*▼ページ右上ユーティリティナビのリンク*/
#header-top-link{
	float: right; /*ul要素を右寄せ配置*/
	margin: 10px 10px 5px; /*上下左右の間隔調整*/
	list-style-type: none; /*マーカーなし*/
}
/*ユーティリティナビのリンクのul要素内のli要素の書式指定*/
#header-top-link li{
	display: inline-block; /*li要素をインラインブロック要素に変更し,各項目を横に並べて配置*/
	margin-left: 10px; /*各項目の間隔を調整*/
}
/*ユーティリティナビのリンクのa要素*/
#header-top-link a{
	display: block; /*a要素をブロックレベル要素に変更し,文字の周囲もリンクとして機能*/
	text-decoration: none; /*文字に装飾なし指定*/
}

/*中画面用,大画面用アイコン*/
@media print,screen and (min-width:651px) {
	#header-top-link img{
		height: 18px;
		padding-right: 5px; /*アイコンとリンクの文字の間隔調整*/
	}
}

/*小画面用アイコン*/
@media print,screen and (max-width:650px) {
	#header-top-link img{ /*小画面,アイコン画像のみ表示*/
	height: 30px;
	}
}

/*中画面大画面span要素内のリンク文字の表示非表示*/
@media print,screen and (min-width:651px) {
	#header-top-link span{
		display: inline;
		color: #666;  /*リンクの文字を表示*/
		font-size: 15px;
	}
}

/*小画面span要素内のリンク文字の表示非表示*/
@media print,screen and (max-width:650px) {
	#header-top-link span{
	display: none; /*リンクの文字を非表示*/
	}
}

/*clearfix,ロゴ画像とリンクに指定したfloatを解除*/
#header-top:after{
	display: table;
	content: "";
	clear: both;
}

/*▼大画面用レイアウト,背景画像を指定*/
@media print,screen and (min-width:801px) {
	#header-img{
	height: 310px; /*画像の高さ,大画面用背景画像レイアウト*/
	background-image: url("../image/header-img.jpg");
	background-position: bottom; /*下を基準に背景画像を配置*/
	filter:brightness(100%);
	-webkit-filter:brightness(100%);
	-moz-filter:brightness(100%);
	-o-filter:brightness(100%);
	-ms-filter:brightness(100%);
	/*アニメーション
	-webkit-animation: topimg 18s cubic-bezier(0.42,0,1.0,1.0) 1; chrome
	-webkit-animation-fill-mode: forwards;
	-moz-animation: topimg 18s cubic-bezier(0.42,0,1.0,1.0) 1; firefox
	-moz-animation-fill-mode: forwards;
	-ms-animation: topimg 18s cubic-bezier(0.42,0,1.0,1.0) 1; IE
	-ms-animation-fill-mode: forwards;
	animation: topimg 18s cubic-bezier(0.42,0,1.0,1.0) 1; *初期値18s
	animation-fill-mode: forwards;最後の状態のまま*/
	}
	/*chrome
	@-webkit-keyframes topimg{
	0%{background-position:bottom;}
	100%{background-position:top;}
	}
	firefox
	@-moz-keyframes topimg{
	0%{background-position:bottom;}
	100%{background-position:top;}
	}
	IE
	@-ms-keyframes topimg{
	0%{background-position: bottom;}
	100%{background-position: top;}
	}
	@keyframes topimg{
	0%{background-position:bottom;}
	100%{background-position:top;}
	}*/
}

/*中画面用レイアウト,背景画像を指定*/
@media print,screen and (max-width:800px) and (min-width:651px) {
	#header-img{
	height: 280px; /*中画面用背景画像レイアウト*/
	background-image: url("../image/header-img.jpg");
	background-position: bottom; /*下を基準に背景画像を配置*/

	/*アニメーション
	-webkit-animation: topimg 18s cubic-bezier(0.42,0,1.0,1.0) 1; chrome
	-webkit-animation-fill-mode: forwards;
	-moz-animation: topimg 18s cubic-bezier(0.42,0,1.0,1.0) 1; firefox
	-moz-animation-fill-mode: forwards;
	-ms-animation: topimg 18s cubic-bezier(0.42,0,1.0,1.0) 1; IE
	-ms-animation-fill-mode: forwards;
	animation: topimg 18s cubic-bezier(0.42,0,1.0,1.0) 1; 初期値18s
	animation-fill-mode: forwards; 最後の状態のまま*/
	}
	/*chrome
	@-webkit-keyframes topimg{
	0%{background-position:bottom;}
	100%{background-position:top;}
	}
	firefox
	@-moz-keyframes topimg{
	0%{background-position:bottom;}
	100%{background-position:top;}
	}
	IE
	@-ms-keyframes topimg{
	0%{background-position: bottom;}
	100%{background-position: top;}
	}
	@keyframes topimg{
	0%{background-position:bottom;}
	100%{background-position:top;}
	}*/
}

/*小画面用レイアウト,背景画像を指定*/
@media print,screen and (max-width:650px) {
	#header-img{
	height: 200px; /*小画面用背景画像レイアウト*/
	background-image: url("../image/header-img.jpg");
	background-size: cover;  /*全体を覆うように配置*/
	background-position: bottom; /*下を基準に背景画像を配置*/
	
	/*アニメーション
	-webkit-animation: topimg 18s cubic-bezier(0.42,0,1.0,1.0) 1; chrome
	-webkit-animation-fill-mode: forwards;
	-moz-animation: topimg 18s cubic-bezier(0.42,0,1.0,1.0) 1; firefox
	-moz-animation-fill-mode: forwards;
	-ms-animation: topimg 18s cubic-bezier(0.42,0,1.0,1.0) 1; IE
	-ms-animation-fill-mode: forwards;
	animation: topimg 18s cubic-bezier(0.42,0,1.0,1.0) 1; 初期値18s
	animation-fill-mode: forwards; 最後の状態のまま*/
	}
	/*chrome
	@-webkit-keyframes topimg{
	0%{background-position:bottom;}
	100%{background-position:top;}
	}
	firefox
	@-moz-keyframes topimg{
	0%{background-position:bottom;}
	100%{background-position:top;}
	}
	IE
	@-ms-keyframes topimg{
	0%{background-position: bottom;}
	100%{background-position: top;}
	}
	@keyframes topimg{
	0%{background-position:bottom;}
	100%{background-position:top;}
	}*/
}


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

/*中画面大画面のとき,ハンバーガーナビゲーションメニュー非表示*/
@media print,screen and (min-width:651px) {
	#sp-menu{
	display: none; /*非表示*/	
	}
}

/*小画面ハンバーガーナビゲーションメニュー*/
@media print,screen and (max-width:650px) {
	#sp-menu{
	position: fixed;/*画面上部に固定する*/
	top: 0px;/*画面上部に固定する*/
	left: 0px;/*画面上部に固定する*/
	width: 100%;/*画面の幅に合わせて表示*/
	background: #000;
	color: #FFF;
	font-weight: bold;
	font-size: 100%; /*初期値16px*/
	padding-left: 15px;
	line-height: 45px;/*指でタップしやすいように行間45px*/
	z-index:99;/*画像等が上に表示されるためナビゲーションを最上位にする*/
	}
}

/*ハンバーガーメニューアイコン表示*/
@media print,screen and (max-width:650px) {
	#sp-menu img{
	height: 30px;
	padding-bottom: 4px; /*スマートフォンは文字の上下中央より下の画像が配置されるため,配置調整,下の内余白*/
	margin-right: 8px; /*ハンバーガーアイコンと文字の間の配置調整,右の外余白*/
	}
}

/*▼ナビゲーションメニュー,中画面大画面のとき表示*/
@media print,screen and (min-width:651px) {
nav #dropmenu{
	list-style-type: none;
	width:100%;
	margin: 0px auto 0px;/*autoで中央に調整する*/
	padding: 0;
	}
/*li要素に指定したfloat:leftを解除するclearfix*/
nav #dropmenu::before,nav #dropmenu::after{
	content: "";
	display: table;
	}
nav #dropmenu::after{
	clear: both;
	}/*ナビゲーションメニュー(ul要素)の高さを確定するため*/
#dropmenu li{
	position: relative; /*親要素を基準にして配置*/
	width: 16.666667%; /*メニューが６個,100/6*/
	float: left; /*メニューを横並びにするため*/
	margin: 0; /*隙間をなくす*/
	padding: 0; /*隙間をなくす*/
	text-align: center; /*文字を中心に*/
	}

#dropmenu li a{
	display: block;
	margin: 0;
	padding: 18px 0 11px;
	background: #0D75F1;/*#0C419A*/
	color: #fff;
	font-weight:bold;
	font-size: 110%;/*初期値15px*/
	line-height: 1;
	text-decoration: none; /*下線なし*/
	height:50px; /*ナビの高さ*/
	}

#dropmenu li ul{
	display:none;
	list-style: none;
	position: absolute; /*#dropmenu liを基準に表示位置を指定する*/
	top: 100%;
	left: 0;
	margin: 0;
	padding: 0;
}
#dropmenu li ul li{
	width: 120%; /*ドロップメニュー幅*/
	}

/*右端のドロップメニュー幅,左に移動し右にはみ出ないようにする*/
#dropmenu li:last-child ul{
left: -20%;
width: 100%
}

/*サブメニューの設定,背景色など*/
#dropmenu li ul li a{
	padding: 18px 0 14px;
	border-top: 1px solid #4D8EC7;
	background: #5638ED;/*ドロップダウンの背景色*/
	text-align: center;
	}
#dropmenu li:hover ul{
	display:block;/*マウスオーバーした時のみ表示*/
	z-index: 9999;
	}

/*ブラウザの大きさを変更するとドロップダウンメニューが現れ消えないのを防ぐ*/
#dropmenu li ul li{
	overflow:hidden;/*ドロップダウンメニューは、通常は表示しない*/
	height:0;
	}

#dropmenu li:hover ul li{
	overflow:hidden;/*ドロップダウンメニューは、通常は表示しない*/
	height:50px;
	-moz-transition:0.6s;
	-webkit-transition:0.6s;
	-o-transition:0.6s;
	-ms-transition:0.6s;
	transition:0.6s;
	}/*マウスオーバーした時のみ表示*/

#dropmenu li:hover ul li:last-child a{
	border-radius:0 0 10px 10px;
	}/*ドロップダウンメニュー最後の子要素の角を丸める*/

/*サブメニューにマウスオーバーしたときのメインメニューナビの背景色*/
#dropmenu li:hover > a{
	background: #6EC6EE;
	}

/*マウスオーバー時に背景を白に変化させ文字を青色にする*/
#dropmenu li a:hover{
	background: #FFF;
	color:#0051FF;/*文字を青色*/
	border:2px solid #4D8EC7;
	}
}

/*ナビゲーションメニュー,小画面のとき表示*/
@media print,screen and (max-width:650px) {
	nav ul#dropmenu{
	list-style-type: none; /*マーカーなし*/
	display: none; /*最初はメニュー項目を非表示にしておくのでul要素を非表示*/
	position: fixed;/*画面上端から45pxの位置に固定*/
	top: 45px;/*画面上端から45pxの位置に固定*/
	left: 0px;/*画面上端から0pxの位置に固定*/
	width: 100%;
	z-index:2;
	}
}


/*小画面nav li要素ナビゲーション*/
@media print,screen and (max-width:650px) {
	nav #dropmenu li{
	width: 50%; /*ナビ項目を２列で表示*/
	float: left; /*ナビ項目左寄せ*/
	border-bottom: solid 2px #2551D9; /*青色に変更,各項目の下に灰色(#666)の枠線を描画する*/
}
	nav li:nth-child(odd){ /*奇数番目のli要素だけを対象とするセレクタ*/
	border-right: solid 2px #2551D9; /*青色に変更,1,3,5番目のli要素に右の枠線を描画しメニューの中央に線を表示する*/
	}
}

/*ナビゲーションメニュー,小画面のときulのドロップダウン部分を非表示（旧dropsm）*/
@media print,screen and (max-width:650px) {
	nav #dropmenu li ul li{
	display: none; /*小画面ドロップダウンメニュー項目を非表示にする*/
	}
}


/*小画面a要素ナビゲーション*/
@media print,screen and (max-width:650px) {
	nav #dropmenu a{
	display: block; /*a要素をブロックレベル要素に変更しリンクの範囲を文字の部分まで拡張する*/
	background: #0C419A; /*背景色,青色に変更#0C419A,淡い黒色#333。目に優しくコントラストを弱める。*/
	color: #FFF; /*白色*/
	font-weight: bold; /*太字*/
	font-size: 100%; /*初期値13px*/
	line-height: 45px; /*li要素の高さを指定しない代わりに行間を指定する。タップには45px必要*/
	padding-left: 15px; /*小画面,左を揃える*/
	text-decoration: none; /*下線なし*/
	}
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ パン屑リスト ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

#breadcrumbs{
	margin:0px 0 15px 5px;
	}
#breadcrumbs ol li {
	display: inline;
	list-style-type: none;
	}
#breadcrumbs ol li:before {
	content: " > ";
	}
#breadcrumbs ol li:first-child:before {
	content:"";
	}
#breadcrumbs ol li a{
	text-decoration: none; /*下線なし*/
		color:black;
	}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ メイン用 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/*各記事を分ける*/
#main section{
	margin-bottom: 2.5rem; /*下との間隔*/
	}

/*中画面大画面用h1,h2 ulblue下線表示*/
@media print,screen and (min-width:651px) {
	h1,h2{
	color: #336; /*藍色*/
	line-height: 1.2;
	margin-bottom: 8px; /*下8px間隔*/
	max-height: 999999px;/*高さの最大値,Chromeのfont-size大きくなるバグ修正する方法*/
	}
	h1{font-size: 24px;}
	h2{font-size: 20px;}
	h3{font-size: 17px;}
	h1.ulblue,h2.ulblue{
	color: #336; /*藍色*/
	line-height: 1.2;
	border-bottom: solid 2px #0051FF;/*下線#0051FF,藍色#336*/
	margin-bottom: 8px; /*下8px間隔*/
	max-height: 999999px;/*高さの最大値,Chromeのfont-size大きくなるバグ修正する方法*/
	}
/*大中画面上左位置指定*/
	.h-margintop20{
	margin-top:20px;
	}
	.h-margintop15{
	margin-top:15px;
	}
	.h-margintop10{
	margin-top:10px;
	}
	.h-margintop5{
	margin-top:5px;
	}

	.h-marginleft20{
	margin-left:20px;
	}
	.h-marginleft15{
	margin-left:15px;
	}
	.h-marginleft10{
	margin-left:10px;
	}

	h3.ulblue{
	color: #336; /*藍色*/
	line-height: 1.2;
	border-bottom: solid 2px #0051FF;/*下線#0051FF,藍色#336*/
	margin-bottom: 6px; /*下8px間隔*/
	max-height: 999999px;/*高さの最大値,Chromeのfont-size大きくなるバグ修正する方法*/
	}
	h1.ulblue{font-size: 24px;}
	h2.ulblue{font-size: 20px;}
	h3.ulblue{font-size: 17px;}

	/*下線が緑色*/
	h1.ulgreen,h2.ulgreen{
	color: #222; /*文字の色*/
	line-height: 1.2;
	border-bottom: solid 2px #239D55; /*緑*/
	margin-bottom: 8px; /*下8px間隔*/
	max-height: 999999px;/*高さの最大値,Chromeのfont-size大きくなるバグ修正する方法*/
	}
	h3.ulgreen{
	color: #222; /*文字の色*/
	line-height: 1.2;
	border-bottom: solid 2px #239D55; /*緑*/
	margin-bottom: 6px; /*下8px間隔*/
	max-height: 999999px;/*高さの最大値,Chromeのfont-size大きくなるバグ修正する方法*/
	}
	h1.ulgreen{font-size: 24px;}
	h2.ulgreen{font-size: 20px;}
	h3.ulgreen{font-size: 17px;}

	/*下線が橙色*/
	h1.ulred,h2.ulred{
	color: #222; /*文字の色*/
	line-height: 1.2;
	border-bottom: solid 2px #E74F04; /*橙*/
	margin-bottom: 8px; /*下8px間隔*/
	max-height: 999999px;/*高さの最大値,Chromeのfont-size大きくなるバグ修正する方法*/
	}
	h3.ulred{
	color: #222; /*文字の色*/
	line-height: 1.2;
	border-bottom: solid 2px #E74F04; /*橙*/
	margin-bottom: 6px; /*下8px間隔*/
	max-height: 999999px;/*高さの最大値,Chromeのfont-size大きくなるバグ修正する方法*/
	}
	h1.ulred{font-size: 24px;}
	h2.ulred{font-size: 20px;}
	h3.ulred{font-size: 17px;}

	/*下線が紫色*/
	h1.ulpurple,h2.ulpurple{
	color: #222; /*文字の色*/
	line-height: 1.2;
	border-bottom: solid 2px #662F7C; /*紫*/
	margin-bottom: 8px; /*下8px間隔*/
	max-height: 999999px;/*高さの最大値,Chromeのfont-size大きくなるバグ修正する方法*/
	}
	h3.ulpurple{
	color: #222; /*文字の色*/
	line-height: 1.2;
	border-bottom: solid 2px #662F7C; /*紫*/
	margin-bottom: 6px; /*下8px間隔*/
	max-height: 999999px;/*高さの最大値,Chromeのfont-size大きくなるバグ修正する方法*/
	}
	h1.ulpurple{font-size: 24px;}
	h2.ulpurple{font-size: 20px;}
	h3.ulpurple{font-size: 17px;}

/*中画面大画面用h1,h2左に縦棒アクセントbleft*/
	h1.bleft{
	border-bottom: none;
	border-left:8px solid #0051FF; /*明るい青色*/
	padding-left:1.2rem;}
	h2.bleft{
	border-bottom: none;
	border-left:8px solid #0051FF;
	padding-left:1.0rem;}
	h1.gleft{
	border-bottom: none;
	border-left:8px solid #239D55; /*緑*/
	padding-left:1.2rem;}
	h2.gleft{
	border-bottom: none;
	border-left:8px solid #239D55;
	padding-left:1.0rem;}
	h1.rleft{
	border-bottom: none;
	border-left:8px solid #E74F04; /*橙*/
	padding-left:1.2rem;}
	h2.rleft{
	border-bottom: none;
	border-left:8px solid #E74F04;
	padding-left:1.0rem;}
	h1.pleft{
	border-bottom: none;
	border-left:8px solid #662F7C; /*紫*/
	padding-left:1.2rem;}
	h2.pleft{
	border-bottom: none;
	border-left:8px solid #662F7C;
	padding-left:1.0rem;}
	h1.cleft{
	border-bottom: none;
	border-left:8px solid #0599D9; /*シアン色#009DDA*/
	padding-left:1.2rem;}
	h2.cleft{
	border-bottom: none;
	border-left:8px solid #0599D9; /*シアン色#009DDA*/
	padding-left:1.0rem;}


/*中画面大画面用h1,h2装飾無し*/
	h1.normal{
	border-bottom: none;
	padding-left:5px;}
	h2.normal{
	border-bottom: none;
	padding-left:5px;}
	h3.normal{
	border-bottom: none;
	padding-left:5px;}

/*中画面大画面用h1,h2ホワイト文字装飾無し*/
	h1.normalwhite{
	color: #FFF; /*白色*/
	border-bottom: none;
	padding-left:5px;}
	h2.normalwhite{
	color: #FFF; /*白色*/
	border-bottom: none;
	padding-left:5px;}

/*装飾h1,h2,背景をグレーにして下に下線*/
	h1.square{
	padding-top:0.5rem;
	padding-bottom:0.3rem;
	background-color: #f6f6f6;
	border-radius: 4px;
	border-bottom: 1px solid #ccc;
	margin-bottom:2rem;/**/
	}
	h2.square{
	padding-top:0.5rem;
	padding-bottom:0.3rem;
	background-color: #f6f6f6;
	border-radius: 4px;
	border-bottom: 1px solid #ccc;
	margin-bottom:2rem;/**/
	}


/*トップページh1キャッチコピー*/
	.texteffect01{
	color:#E80101; /*#105FD2,#DC0000*/
	font-size: 28px;
	}
	.texteffect02{
	color:#105FD2; /*#105FD2*/
	font-size: 30px;
	}
	.texteffect03{
	color:#0C419A;/*#0C419A*/
	font-size:1rem;
	font-weight:bold;
	/*文字に枠線を付けて背景が暗い色でも可読できるようにする*/
	text-shadow:
	0 2px 0 #caeaff,
	2px 0 0 #caeaff,
	0 -2px 0 #caeaff,
	-2px 0 0 #caeaff,
	-2px -2px 0 #caeaff,
	2px -2px 0 #caeaff,
	-2px 2px 0 #caeaff,
	2px 2px 0 #caeaff;
	}
}/*△中大画面*/

/*▽小画面用h1,h2*/
@media print,screen and (max-width:650px) {
	h1,h2{
	color: #336; /*藍色*/
	line-height: 1.2;
	margin-bottom: 8px; /*下8px間隔*/
	max-height: 999999px;/*高さの最大値,Chromeのfont-size大きくなるバグ修正する方法*/
	}
	h1{font-size: 20px;}
	h2{font-size: 18px;}
	h3{font-size: 16px;}

/*小画面上左位置指定,間隔の値を大中の２分の１に*/
	.h-margintop20{
	margin-top:10px;
	}
	.h-margintop15{
	margin-top:8px;
	}
	.h-margintop10{
	margin-top:5px;
	}

	.h-marginleft20{
	margin-left:10px;
	}
	.h-marginleft15{
	margin-left:8px;
	}
	.h-marginleft10{
	margin-left:5px;
	}


	h1.ulblue,h2.ulblue{
	color: #336; /*藍色*/
	line-height: 1.2;
	border-bottom: solid 2px #0051FF;/*下線#0051FF,藍色#336*/
	margin-bottom: 8px; /*下8px間隔*/
	max-height: 999999px;/*高さの最大値,Chromeのfont-size大きくなるバグ修正する方法*/
	}
	h1.ulblue{font-size: 20px;}
	h2.ulblue{font-size: 18px;}

	/*下線が緑色*/
	h1.ulgreen,h2.ulgreen{
	color: #222; /*文字の色*/
	line-height: 1.2;
	border-bottom: solid 2px #239D55; /*緑*/
	margin-bottom: 8px; /*下8px間隔*/
	max-height: 999999px;/*高さの最大値,Chromeのfont-size大きくなるバグ修正する方法*/
	}
	h3.ulgreen{
	color: #222; /*文字の色*/
	line-height: 1.2;
	border-bottom: solid 2px #239D55; /*緑*/
	margin-bottom: 6px; /*下8px間隔*/
	max-height: 999999px;/*高さの最大値,Chromeのfont-size大きくなるバグ修正する方法*/
	}
	h1.ulgreen{font-size: 20px;}
	h2.ulgreen{font-size: 18px;}
	h3.ulgreen{font-size: 16px;}

	/*下線が橙色*/
	h1.ulred,h2.ulred{
	color: #222; /*文字の色*/
	line-height: 1.2;
	border-bottom: solid 2px #E74F04; /*橙*/
	margin-bottom: 8px; /*下8px間隔*/
	max-height: 999999px;/*高さの最大値,Chromeのfont-size大きくなるバグ修正する方法*/
	}
	h3.ulred{
	color: #222; /*文字の色*/
	line-height: 1.2;
	border-bottom: solid 2px #E74F04; /*橙*/
	margin-bottom: 6px; /*下8px間隔*/
	max-height: 999999px;/*高さの最大値,Chromeのfont-size大きくなるバグ修正する方法*/
	}
	h1.ulred{font-size: 20px;}
	h2.ulred{font-size: 18px;}
	h3.ulred{font-size: 16px;}

	/*下線が紫色*/
	h1.ulpurple,h2.ulpurple{
	color: #222; /*文字の色*/
	line-height: 1.2;
	border-bottom: solid 2px #662F7C; /*紫*/
	margin-bottom: 8px; /*下8px間隔*/
	max-height: 999999px;/*高さの最大値,Chromeのfont-size大きくなるバグ修正する方法*/
	}
	h3.ulpurple{
	color: #222; /*文字の色*/
	line-height: 1.2;
	border-bottom: solid 2px #662F7C; /*紫*/
	margin-bottom: 6px; /*下8px間隔*/
	max-height: 999999px;/*高さの最大値,Chromeのfont-size大きくなるバグ修正する方法*/
	}
	h1.ulpurple{font-size: 20px;}
	h2.ulpurple{font-size: 18px;}
	h3.ulpurple{font-size: 16px;}

/*小画面h1,h2左に縦棒アクセント*/
	h1.bleft{
	border-bottom: none;
	border-left:8px solid #0051FF; /*明るい藍色*/
	padding-left:0.8rem;}
	h2.bleft{
	border-bottom: none;
	border-left:8px solid #0051FF;
	padding-left:0.8rem;}
	h1.gleft{
	border-bottom: none;
	border-left:8px solid #239D55; /*緑*/
	padding-left:0.8rem;}
	h2.gleft{
	border-bottom: none;
	border-left:8px solid #239D55;
	padding-left:0.8rem;}
	h1.rleft{
	border-bottom: none;
	border-left:8px solid #E74F04; /*橙*/
	padding-left:0.8rem;}
	h2.rleft{
	border-bottom: none;
	border-left:8px solid #E74F04;
	padding-left:0.8rem;}
	h1.pleft{
	border-bottom: none;
	border-left:8px solid #662F7C; /*紫*/
	padding-left:0.8rem;}
	h2.pleft{
	border-bottom: none;
	border-left:8px solid #662F7C;
	padding-left:0.8rem;}
	h1.cleft{
	border-bottom: none;
	border-left:8px solid #0599D9; /*シアン色#009DDA*/
	padding-left:0.8rem;}
	h2.cleft{
	border-bottom: none;
	border-left:8px solid #0599D9; /*シアン色#009DDA*/
	padding-left:0.8rem;}



/*小画面h1,h2装飾無し*/
	h1.normal{
	border-bottom: none;
	padding-left:3px;}
	h2.normal{
	border-bottom: none;
	padding-left:3px;}

/*小画面h1,h2ホワイト文字装飾無し*/
	h1.normalwhite{
	color: #FFF; /*白色*/
	border-bottom: none;
	padding-left:5px;}
	h2.normalwhite{
	color: #FFF; /*白色*/
	border-bottom: none;
	padding-left:5px;}
	
	/*トップページh1キャッチコピー*/
	.texteffect01{
	color:#E80101; /*#105FD2,#DC0000*/
	}
	.texteffect02{
	color:#105FD2;
	}
	.texteffect03{
	color:#0C419A;
	font-weight:bold;
	font-size:1rem;
	/*文字に枠線を付けて背景が暗い色でも可読できるようにする*/
	text-shadow:
	0 2px 0 #caeaff,
	2px 0 0 #caeaff,
	0 -2px 0 #caeaff,
	-2px 0 0 #caeaff,
	-2px -2px 0 #caeaff,
	2px -2px 0 #caeaff,
	-2px 2px 0 #caeaff,
	2px 2px 0 #caeaff;
	}
}

/*▼中画面大画面,p要素*/
@media print,screen and (min-width:651px) {
	.main-text{
	color: #000; /*#306藍色*/
	text-align: justify; /*両端揃え*/
	font-size: 16px;/*16px*/
	font-weight:600;/*太さ,太くする700*/
	line-height: 1.5; /*行間1.5*/
	max-height: 999999px;
	}
	/*行間狭く*/
	.main-textline1{
	color: #000; /*#306藍色*/
	text-align: justify; /*両端揃え*/
	font-size: 16px;/*16px*/
	font-weight:600;
	line-height: 0.8; /*行間1.0*/
	max-height: 999999px;
	}

/*項目タイトル用p表示大きい*/
	.title-text{
	color: #306; /*#306藍色*/
	text-align: justify; /*両端揃え*/
	font-size: 18px;
	font-weight:700;
	line-height: 1.5; /**/
	max-height: 999999px;
	}

/*トップページ用*/
/*トップページ項目タイトル用p表示大きい*/
	.titletop-text{
	color: #fff; /*#000藍色*/
	text-align: justify; /*両端揃え*/
	font-size: 20px;
	font-weight:700;
	line-height: 1.5; /**/
	max-height: 999999px;
	}
/*トップページ項目用サブタイトルp表示*/
	.subtitletop-text{
	color: #fff; /*#000藍色*/
	text-align: justify; /*両端揃え*/
	font-size: 14px;
	line-height: 1.5; /**/
	max-height: 999999px;
	}

/*トップページ項目pコメント表示,行間詰める*/
	.maintop-text{
	color: #fff; /*文字の色*/
	text-align: justify; /*両端揃え*/
	font-size: 100%;
	line-height: 1; /*行間*/
	max-height: 999999px;
	}

/*文字下げ*/
	.indenttext1-1{
	padding-left:1em;
	}/*１行目から１文字下げる*/
	.indenttext1-15{
	padding-left:1.5em;
	}/*１行目から１.5文字下げる*/
	.indenttext1-2{
	padding-left:2em;
	}/*１行目から2文字下げる*/
	.indenttext1-3{
	padding-left:3em;
	}/*１行目から3文字下げる*/
	.indenttext1-35{
	padding-left:3.5em;
	}/*１行目から3.5文字下げる*/

	.indenttext2-1{
	padding-left:1em;
	text-indent:-1em
	}/*2行目から1文字下げる*/
	.indenttext2-2{
	padding-left:2em;
	text-indent:-2em
	}/*2行目から2文字下げる*/
	.indenttext2-3{
	padding-left:3em;
	text-indent:-3em
	}/*2行目から3文字下げる*/

	.indenttext2-1-left15{
	padding-left:1.5em;
	text-indent:-1em
	}/*左に1.5em開ける2行目から1文字下げる*/
	.indenttext2-1-left20{
	padding-left:2.0em;
	text-indent:-1em
	}/*左に2.0em開ける2行目から1文字下げる*/
	.indenttext2-1-left25{
	padding-left:2.5em;
	text-indent:-1em
	}/*左に2.5em開ける2行目から1文字下げる*/
	.indenttext2-1-left30{
	padding-left:3.0em;
	text-indent:-1em
	}/*左に3.0em開ける2行目から1文字下げる*/
	.indenttext2-1-left35{
	padding-left:3.5em;
	text-indent:-1em
	}/*左に3.5em開ける2行目から1文字下げる*/
	.indenttext2-1-left40{
	padding-left:4.0em;
	text-indent:-1em
	}/*左に4.0em開ける2行目から1文字下げる*/

	.indenttext1-15-2-2{
	padding-left:3.5em;
	text-indent:-2em
	}/*１行目から１.5文字下げる2行目から2文字下げる*/

/*文字上げ*/
	.indenttext1-1left{
	padding-left:0em;
	text-indent:-1em
	}/*1行目から1文字上げる*/


/*文字右揃え*/
	.textindent-right{
	text-align:right;
	}/*右寄せ*/

/*文章の上下に開ける*/
	.margintop05{
	margin-top:0.5em;
	}
	.marginbottom05{
	margin-bottom:0.5em;
	}
	.margintop10{
	margin-top:1em;
	}
	.marginbottom10{
	margin-bottom:1em;
	}
	.margintop15{
	margin-top:1.5em;
	}
	.marginbottom15{
	margin-bottom:1.5em;
	}
	.margintop20{
	margin-top:2em;
	}
	.marginbottom20{
	margin-bottom:2em;
	}

/*pタグ文章の上下を開けないようにする*/
	.margintopbottom00{
	margin-top:0em;
	margin-bottom:0em
	}
}


/*小画面,p要素*/
@media print,screen and (max-width:650px) {
	.main-text{
	color: #000; /*#306藍色*/
	text-align: justify; /*両端揃え*/
	font-size: 15px;
	font-weight:600;
	line-height: 1.3; /*行間1.5*/
	max-height: 999999px;
	}

/*小画面用トップページのメッセージ表示*/
	.smtop-message{
	color: #333; /*文字の色*/
	text-align: justify; /*両端揃え*/
	font-size: 1rem;
	font-weight:900;
	line-height: 1.2rem; /*行間*/
	max-height: 999999px;
	}


}



/*リンク文字を縦に並べるときのレスポンシブ化,ボタンで表示する*/
/* ＝＝＝＝＝＝＝＝＝＝＝＝ リンク一覧表示の書式指定１ ＝＝＝＝＝＝＝＝＝＝＝＝＝ */

@media print,screen and (min-width:801px) {
	#shop-list{
	list-style-type: none;
	padding: 10px 15px;
	}
}

@media print,screen and (max-width:800px) {
#shop-list{
	list-style-type: none;
	}
}

@media print,screen and (min-width:801px) {
	#shop-list li{
	width: 100%;
	margin: 0px;
	}
}

@media print,screen and (max-width:800px) {
#shop-list li{
	width: 100%;
	margin: 10px 0px;
	}
}

@media print,screen and (min-width:801px) {
	#shop-list a{
		display: inline;
		background: transparent;
		border-radius: 0;
		color: #333;/*#00F*/
		font-size: 16px;
		font-weight:600;
		line-height: 28px;
		text-align: center;
		text-decoration: none;
	}
}

@media print,screen and (max-width:800px) {
	#shop-list a{
		display: block;
		background: #369;
		border-radius: 5px;
		color: #FFF;/*#FFF*/
		font-size: 14px;
		font-weight:600;
		line-height: 40px;
		text-align: center;
		text-decoration: none;
	}
}


/*リンク文字を縦に並べるとき,グループリスト形式で表示する,レスポンシブ化*/
/* ＝＝＝＝＝＝＝＝＝＝＝＝ リンク一覧表示の書式指定2 ＝＝＝＝＝＝＝＝＝＝＝＝＝ */

#shop-list2{
	list-style-type: none;
	margin: 15px 0px;
}

@media print,screen and (min-width:801px) {
	#shop-list2 li{
		width: 100%;
		background-image: none;
		background-position: 100% center;
		background-repeat: no-repeat;
		border: none;
		border-radius: 0;
		margin-bottom: 0px;
	}
}

@media print,screen and (max-width:800px) {
#shop-list2 li{
	width: 100%;
	background-image: url("arrow.png");
	background-position: 100% center;
	background-repeat: no-repeat;
	border: solid 1px #69C;
	margin-bottom: -1px;
	}
}
#shop-list2 li:first-child{
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}
#shop-list2 li:last-child{
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}

@media print,screen and (min-width:801px) {
	#shop-list2 a{
		display: inline;
		padding-left: 15px;
		color: #111;/*#00F*/
		font-size: 16px;
		line-height: 28px;
		text-decoration: none;
	}
}

@media print,screen and (max-width:800px) {
#shop-list2 a{
	display: block;
	padding-left: 15px;
	color: #036;
	font-size: 14px;
	line-height: 45px;
	text-decoration: none;
	}
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ テーブル表組み ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/*▼中画面大画面,表要素*/
@media print,screen and (min-width:651px) {
#table-aa1{
	width: 100%;/*初期値100%*/
	border-collapse: collapse;
	margin-bottom:30px;
	font-weight:700;
	}

#table-aa1 th{
	width: 30%;/*初期値30%*/
	padding: 5px;
	font-weight: bold;
	border-bottom:1px solid #ccc;
	}

#table-aa1 td{
	padding: 5px;
	border-bottom:1px solid #ccc;
	}

.table-aa1column02{
	width:450px;/*th幅を450px*/
	}


#table-aa1 thead th{
	background:#e6e6e6;
	}
}


/*小画面,表からリスト表示に変更する*/
@media print,screen and (max-width:650px) {
	#table-aa1{
	width: 100%;
	display: block;
	font-weight:700;
	}
	#table-aa1 tbody{
	display: block;
	}
	#table-aa1 tbody tr{
	display: block;
	margin-bottom: 1.5em;
	}
	#table-aa1 tbody th,
	#table-aa1 tbody td{
	display: list-item;
	border: none;
	}
	#table-aa1 tbody th{
	width: 90%;
	margin-bottom: 5px;
	list-style-type: none;
	color: #fff;
	background: #005DB1; /*青色,小画面テーブル表示部分*/
	}
	#table-aa1 tbody td{
	margin-left: 20px;
	padding: 0;
	list-style:none;
	}
}


/*▼中画面大画面,表要素 グループ会社用*/
@media print,screen and (min-width:651px) {
#table-aa2{
	width: 100%;/*初期値100%*/
	border-collapse: collapse;
	margin-bottom:30px;
	font-weight:700;
	}

#table-aa2 th{
	width: 50%;/*初期値30%*/
	padding: 5px 5px 5px 40px;
	text-align:left;/*左寄せ*/
	font-weight: bold;
	border-bottom:1px solid #ccc;
	}

#table-aa2 th a{
	text-decoration:none;/*リンク下線を消す*/
	color:#000;/*リンクの色を消す*/
	}

#table-aa2 td{
	padding: 5px;
	border-bottom:1px solid #ccc;
	}

.table-aa2column02{
	width:450px;/*th幅を450px*/
	}


#table-aa2 thead th{
	background:#e6e6e6;
	}
}


/*小画面,表からリスト表示に変更する*/
@media print,screen and (max-width:650px) {
	#table-aa2{
	width: 100%;
	display: block;
	font-weight:700;
	}
	#table-aa2 tbody{
	display: block;
	}
	#table-aa2 tbody tr{
	display: block;
	margin-bottom: 1.5em;
	}
	#table-aa2 tbody th,
	#table-aa2 tbody td{
	display: list-item;
	border: none;
	}
	#table-aa2 tbody th{
	width: 90%;
	margin-bottom: 5px;
	list-style-type: none;
	color: #fff;
	background: #005DB1; /*青色,小画面テーブル表示部分*/
	}
	#table-aa2 tbody th a{
	list-style-type: none;
	text-decoration:none;/*下線を消す*/
	color: #fff;/*リンクしているので初期値青から白にする*/
	}
	#table-aa2 tbody td{
	margin-left: 20px;
	padding: 0;
	list-style:none;
	}
}


/*▼縦テーブル２列,横に項目,小画面中画面大画面,表要素*/

#table2{
	width: 100%;
	border-collapse: collapse;
	margin-bottom:30px;
	font-weight:700;
	}

#table2 th{
	width: 40%;
	padding: 5px;
	font-weight: bold;
	border-bottom:0px solid #ccc;
	}

#table2 td{
	padding: 5px 20px 5px;
	}
#table2 th.table-leftcol{
	border-left: 0px solid #222;
	}/*真中の縦に線を入れる*/
#table2 td.table-leftcol{
	border-left: 1px solid #222;
	}/*真中の縦に線を入れる*/


/*▼HTMLで縦に記述してあるものを大画面の時はテーブル２列に表示する*/
@media print,screen and (min-width:651px) {
	div.table-outer{display:table;
	width:100%;
	}
	div.table-inner{display:table-cell;
	width:50%;
	padding:5px 20px 5px;
	}
}


/*▼レスポンシブ対応,テーブル３列以上を横から縦に変更する*/
section table   { width: 100%; }
section th, section td  { padding: 10px; border: 1px solid #ddd; }
/*section th  { background: #f4f4f4; }テーブルtable-ab1の時のみ使用*/

/*-------表のパターン１,table---------------------------*/
.table-ab1 th  { width: 20%; font-weight:700; background: #f4f4f4; } /*▼テーブル4列100÷4 追加background:#f4f4f4*/
.table-ab1 td  { text-align: center; font-weight:700; }
.table-ab1 td:first-child  { text-align: left; }
.table-ab1 caption { caption-side: bottom; }
/*小画面のとき縦横表示を変えて表示する*/
@media print,screen and (max-width: 650px) { 
	.table-ab1 { 
	display: block;
	width: 100%; 
	margin: 0 -10px;
	font-weight:700;
	}
	.table-ab1 thead{ 
	display: block;
	float: left;
	overflow-x:scroll;
	}
	.table-ab1 tbody{ 
	display: block;
	width: auto; 
	overflow-x: auto; 
	white-space: nowrap;
	}
	.table-ab1 th{ 
	display: block;
	width:auto;
	}
	.table-ab1 tbody tr{
	display: inline-block; 
	margin: 0 -3px;
	}
	.table-ab1 td{
	display: block;
	}
	.table-ab1 caption{
	float:left !important;
	display: none;  /*小画面のときは縦になるので表示しない*/
	}
}


/*-------表のパターン２,最初の列に項目名,横に列項目にするtable---------------------------*/
.table-content01 th  { text-align: center; width: 14%; font-weight:700; } /*▼テーブル4列100÷7*/
.table-content01 td  { text-align: center; font-weight:700; }
.table-content01 caption { caption-side: bottom; }
.table-content01 td:first-child  { background: #f4f4f4; }/*左列の項目をグレー色に*/
/*小画面のとき,テーブルレスポンシブ対応,縦に項目名ごとに項目内容を表示する*/
@media print,screen and (max-width: 650px) { 
	.table-content01 thead{ 
	display: none;
	}
	.table-content01 td{
	display: block;
	position:relative;
	padding:0.4em 0.4em 0.4em 5em;
	
	}
	.table-content01 td:first-child  { text-align: center; }
	.table-content01 td:before{
	content:attr(data-th)":";/*カスタムデータ属性で設定した値を取得しコロンを付けて表示*/
	display:inline-block;
	position:absolute;
	top:0;
	left:0;
	witdth:5em;
	padding:0.4em 0 0 0.8em;
	}
	.table-content01 caption{
	float:left !important;
	display: none;  /*小画面のときは縦になるので表示しない*/
	}
}


/*-------表のパターン３,最初の行にメイン項目名,最初の列に内容説明項目にするtable---------------------------*/
.table-resp01 th  { text-align: center; width: 20%; font-weight:700; } /*▼テーブル5列100÷5*/
.table-resp01 td  { text-align: center; font-weight:700; }
.table-resp01 caption { caption-side: bottom; }


/* ＝＝＝ 画像の拡大表示パソコン・スマートフォン切り替え ＝＝＝＝ */

@media print,screen and (min-width:651px) {
.sp-image{display:none;}
}

@media print,screen and (max-width:650px){
.pc-image{display:none;}
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ Google Map ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/*▼gmaps.jsのGoogleMap大画面レイアウト*/
@media print,screen and (min-width:768px) {
	#gmap-01{
	display: block;
	width: 90%;
	height: 400px;
	margin: 0 auto;
	-moz-box-shadow: 0px 5px 20px #ccc;
	-webkit-box-shadow: 0px 5px 20px #ccc;
	box-shadow: 0px 5px 20px #ccc;
	}
}

/*▼gmaps.jsのGoogleMap小画面レイアウト*/
@media print,screen and (max-width:767px){
	#gmap-01{
	display: block;
	width: 95%;
	height: 350px;/*%指定では表示しなくなる*/
	margin: 0 auto;
	-moz-box-shadow: 0px 5px 20px #ccc;
	-webkit-box-shadow: 0px 5px 20px #ccc;
	box-shadow: 0px 5px 20px #ccc;
	}
}


/*googlemapをそのまま使用する場合*/
/*▼GoogleMap大画面レイアウト*/
@media print,screen and (min-width:768px) {
	.googlemap{
	width:600px;
	margin: 0 auto; /*中央に配置する*/
	}
}

/*▼GoogleMap小画面レイアウト*/
@media print,screen and (max-width:767px){
	.googlemap{
	position: relative;/*子要素の基準とする*/
	padding-bottom: 250px; /*地図の縦横比の指定,56.25%指定の場合は縦横比16:9,9÷16＝56.25%。地図横幅600px高さ450pxの時は450÷600=75%,又は高さを固定,250px*/
	padding-top: 30px;
	height: 0;/*古いIE用*/
	overflow: hidden;
	}/**/
	
	.googlemap iframe,
	.googlemap object,
	.googlemap embed {
	position: absolute;/*親要素のパディング領域に配置するため絶対配置を指定*/
	top: 0;/*トップに配置*/
	left: 0;/*左に配置*/
	width: 100%;/*親コンテナの幅いっぱい*/
	height: 100%;/*親コンテナの幅いっぱい*/
	}
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ サイドバー用 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* ＝＝＝ ▼大画面用サイドバータイトル用 ＝＝＝ */
@media print,screen and (min-width:801px) {


#sidebar-1{
	margin-top:-3px;
	}

#sidebar-2{
	margin-top:30px;
	}

/*サイドバー,カテゴリーの間を空ける*/
.sidebar-space-top{
	margin-top:30px;
	}

/*大画面サイドバー*/
.side-banner{
	width:298px;/*初期値260px*/
	height: 42px;/*初期値52px*/
	margin:0px auto;/*初期値10px*/
	text-align:center;
	display:block;
	padding:0px; /*初期値10px,ボタンの大きさを変更できる*/
	border-radius:3px;
	box-shadow:1px 1px 3px #666;
	}

.side-banner p{
	padding:4px 0 0 0;
	color:#FFF;/*#f6f6f6*/
	line-height:1.8;/*2*/
	text-decoration:none;
	font-family:Helvetica, Arial, san-serif;
	font-weight:bold;
	font-size:130%; /*カテゴリー文字サイズ,ボタンの大きさを変更できる*/
	letter-spacing:10px;
	text-shadow:0 0.125px 0 #ccc,
				0 0.1875px 0 #c9c9c9,
				0 0.25px 0 #bbb,
				0 0.3125px 0 #b9b9b9,
				0 0.375px 0 #aaa,
				0 0.5px 0.125px rgba(0,0,0,.1),
				0 0 0.3125px rgba(0,0,0,.1),
				0 0.25px 0.1875px rgba(0,0,0,.3),
				0 0.1875px 0.3125px rgba(0,0,0,.2),
				0 0.25px 0.375px rgba(0,0,0,.25),
				0 0.375px 0.375px rgba(0,0,0,.2),
				0 0.625px 0.625px rgba(0,0,0,.15);
	} /*text-shadow立体的に表示する*/

.side-banner2{
	width:298px;/*初期値260px*/
	height: 42px;/*初期値52px*/
	margin:0px auto;/*初期値10px*/
	text-align:center;
	display:block;
	padding:0px; /*初期値10px,ボタンの大きさを変更できる*/
	border-radius:3px;
	box-shadow:1px 1px 3px #666;
	}
.side-banner2 p{
	padding:4px 0 0 0;
	color:#FFF;/*#f6f6f6*/
	line-height:1.8;/*2*/
	text-decoration:none;
	font-family:Helvetica, Arial, san-serif;
	font-weight:bold;
	font-size:130%; /*カテゴリー文字サイズ,ボタンの大きさを変更できる*/
	letter-spacing:4px;
	text-shadow:0 0.125px 0 #ccc,
				0 0.1875px 0 #c9c9c9,
				0 0.25px 0 #bbb,
				0 0.3125px 0 #b9b9b9,
				0 0.375px 0 #aaa,
				0 0.5px 0.125px rgba(0,0,0,.1),
				0 0 0.3125px rgba(0,0,0,.1),
				0 0.25px 0.1875px rgba(0,0,0,.3),
				0 0.1875px 0.3125px rgba(0,0,0,.2),
				0 0.25px 0.375px rgba(0,0,0,.25),
				0 0.375px 0.375px rgba(0,0,0,.2),
				0 0.625px 0.625px rgba(0,0,0,.15);
	} /*letter-spacingを変更*/

#banner-blue{
	background-color:#006AE3;
	}
#banner-green{
	background-color:#239D55;
	}
#banner-red{
	background-color:#E74F04;
	}
#banner-purple{
	background-color:#662F7C;
	}
#banner-yellow{
	background-color:#FFA234;
	}
#banner-cyan{
	background-color:#0599D9; /*シアン色#009DDA*/
	}


/*コンテンツの内容がサイドバーの高さより低い場合、コンテンツの高さを高くする*/
.content-height-bottom10px{
	padding-bottom:10px;
	}
.content-height-bottom20px{
	padding-bottom:20px;
	}
.content-height-bottom30px{
	padding-bottom:30px;
	}
.content-height-bottom40px{
	padding-bottom:40px;
	}
.content-height-bottom50px{
	padding-bottom:50px;
	}
.content-height-bottom60px{
	padding-bottom:60px;
	}
.content-height-bottom70px{
	padding-bottom:70px;
	}
.content-height-bottom80px{
	padding-bottom:80px;
	}
.content-height-bottom90px{
	padding-bottom:90px;
	}
.content-height-bottom100px{
	padding-bottom:100px;
	}
.content-height-bottom110px{
	padding-bottom:110px;
	}
.content-height-bottom120px{
	padding-bottom:120px;
	}
.content-height-bottom130px{
	padding-bottom:130px;
	}
.content-height-bottom140px{
	padding-bottom:140px;
	}
.content-height-bottom150px{
	padding-bottom:150px;
	}
.content-height-bottom160px{
	padding-bottom:160px;
	}
.content-height-bottom170px{
	padding-bottom:170px;
	}
.content-height-bottom180px{
	padding-bottom:180px;
	}
.content-height-bottom190px{
	padding-bottom:190px;
	}
.content-height-bottom200px{
	padding-bottom:200px;
	}
.content-height-bottom210px{
	padding-bottom:210px;
	}
.content-height-bottom220px{
	padding-bottom:220px;
	}
.content-height-bottom230px{
	padding-bottom:230px;
	}
.content-height-bottom240px{
	padding-bottom:240px;
	}
.content-height-bottom250px{
	padding-bottom:250px;
	}
.content-height-bottom260px{
	padding-bottom:260px;
	}
.content-height-bottom270px{
	padding-bottom:270px;
	}
.content-height-bottom280px{
	padding-bottom:280px;
	}
.content-height-bottom290px{
	padding-bottom:290px;
	}
.content-height-bottom300px{
	padding-bottom:300px;
	}
.content-height-bottom310px{
	padding-bottom:310px;
	}
.content-height-bottom320px{
	padding-bottom:320px;
	}
.content-height-bottom330px{
	padding-bottom:330px;
	}
.content-height-bottom340px{
	padding-bottom:340px;
	}
.content-height-bottom350px{
	padding-bottom:350px;
	}
.content-height-bottom360px{
	padding-bottom:360px;
	}
.content-height-bottom370px{
	padding-bottom:370px;
	}
.content-height-bottom380px{
	padding-bottom:380px;
	}
.content-height-bottom390px{
	padding-bottom:390px;
	}
.content-height-bottom400px{
	padding-bottom:400px;
	}
.content-height-bottom410px{
	padding-bottom:410px;
	}
.content-height-bottom420px{
	padding-bottom:420px;
	}
.content-height-bottom430px{
	padding-bottom:430px;
	}
.content-height-bottom440px{
	padding-bottom:440px;
	}


}/*△大画面*/

/* ＝＝＝ ▼中画面用サイドバータイトル用 ＝＝＝ */
@media print,screen and (max-width:800px) and (min-width:651px) {

/*中画面サイドバー*/
.side-banner{
	width:220px;/*大画面240pxから変更*/
	height: 50px;/*大画面52pxから変更*/
	margin:8px auto;/*初期値10px*/
	text-align:center;
	display:block;
	padding:3px; /*初期値10px,ボタンの大きさを変更できる*/
	border-radius:3px;
	box-shadow:1px 1px 3px #666;
	}
.side-banner p{
	color:#fff;
	line-height:1.8;/*初期値2*/
	text-decoration:none;
	font-family:Helvetica, Arial, san-serif;
	font-weight:bold;
	font-size:140%; /*大画面150%から140%に変更*/
	letter-spacing:10px;
	text-shadow:0 0.5px 0 #ccc, 
				0 0.75px 0 #c9c9c9,
				0 1px 0 #bbb,
				0 1.25px 0 #b9b9b9,
				0 1.5px 0 #aaa,
				0 2px 0.5px rgba(0,0,0,.1),
				0 0 1.25px rgba(0,0,0,.1),
				0 1px 0.75px rgba(0,0,0,.3),
				0 0.75px 1.25px rgba(0,0,0,.2),
				0 1px 1.5px rgba(0,0,0,.25),
				0 1.5px 1.5px rgba(0,0,0,.2),
				0 2.5px 2.5px rgba(0,0,0,.15);
	} /*text-shadow立体的に表示する*/

.side-banner2{
	width:220px;/*大画面240pxから変更*/
	height: 50px;/*大画面52pxから変更*/
	margin:8px auto;/*初期値10px*/
	text-align:center;
	display:block;
	padding:3px; /*初期値10px,ボタンの大きさを変更できる*/
	border-radius:3px;
	box-shadow:1px 1px 3px #666;
	}
.side-banner2 p{
	color:#fff;
	line-height:1.8;/*初期値2*/
	text-decoration:none;
	font-family:Helvetica, Arial, san-serif;
	font-weight:bold;
	font-size:140%; /*大画面150%から140%に変更*/
	letter-spacing:5px;
	text-shadow:0 0.5px 0 #ccc, 
				0 0.75px 0 #c9c9c9,
				0 1px 0 #bbb,
				0 1.25px 0 #b9b9b9,
				0 1.5px 0 #aaa,
				0 2px 0.5px rgba(0,0,0,.1),
				0 0 1.25px rgba(0,0,0,.1),
				0 1px 0.75px rgba(0,0,0,.3),
				0 0.75px 1.25px rgba(0,0,0,.2),
				0 1px 1.5px rgba(0,0,0,.25),
				0 1.5px 1.5px rgba(0,0,0,.2),
				0 2.5px 2.5px rgba(0,0,0,.15);
	} /*letter-spacingの変更*/

#banner-blue{
	background-color:#006AE3;
	}
#banner-green{
	background-color:#239D55;
	}
#banner-red{
	background-color:#E74F04;
	}
#banner-purple{
	background-color:#662F7C;
	}
#banner-yellow{
	background-color:#FFA234;
	}
#banner-cyan{
	background-color:#0599D9; /*シアン色#009DDA*/
	}


}/*△中画面*/

/* ＝＝＝ ▼小画面用サイドバータイトル用 ＝＝＝ */
@media print,screen and (max-width:651px) {
/*小画面サイドバー*/
.side-banner{
	width:200px;/*中画面220pxから変更*/
	height: 48px;/*中画面50pxから変更*/
	margin:8px auto;/*初期値10px*/
	text-align:center;
	display:block;
	padding:2px; /*初期値10px,ボタンの大きさを変更できる*/
	border-radius:3px;
	box-shadow:1px 1px 3px #666;
	}
.side-banner p{
	color:#fff;
	line-height:1.6;/*初期値2*/
	text-decoration:none;
	font-family:Helvetica, Arial, san-serif;
	font-weight:bold;
	font-size:130%; /*大画面150%から130%に変更*/
	letter-spacing:10px;
	text-shadow:0 0.5px 0 #ccc, 
				0 0.75px 0 #c9c9c9,
				0 1px 0 #bbb,
				0 1.25px 0 #b9b9b9,
				0 1.5px 0 #aaa,
				0 2px 0.5px rgba(0,0,0,.1),
				0 0 1.25px rgba(0,0,0,.1),
				0 1px 0.75px rgba(0,0,0,.3),
				0 0.75px 1.25px rgba(0,0,0,.2),
				0 1px 1.5px rgba(0,0,0,.25),
				0 1.5px 1.5px rgba(0,0,0,.2),
				0 2.5px 2.5px rgba(0,0,0,.15);
	} /*text-shadow立体的に表示する*/

.side-banner{
	width:200px;/*中画面220pxから変更*/
	height: 48px;/*中画面50pxから変更*/
	margin:8px auto;/*初期値10px*/
	text-align:center;
	display:block;
	padding:2px; /*初期値10px,ボタンの大きさを変更できる*/
	border-radius:3px;
	box-shadow:1px 1px 3px #666;
	}
.side-banner p{
	color:#fff;
	line-height:1.6;/*初期値2*/
	text-decoration:none;
	font-family:Helvetica, Arial, san-serif;
	font-weight:bold;
	font-size:130%; /*大画面150%から130%に変更*/
	letter-spacing:4px;
	text-shadow:0 0.5px 0 #ccc, 
				0 0.75px 0 #c9c9c9,
				0 1px 0 #bbb,
				0 1.25px 0 #b9b9b9,
				0 1.5px 0 #aaa,
				0 2px 0.5px rgba(0,0,0,.1),
				0 0 1.25px rgba(0,0,0,.1),
				0 1px 0.75px rgba(0,0,0,.3),
				0 0.75px 1.25px rgba(0,0,0,.2),
				0 1px 1.5px rgba(0,0,0,.25),
				0 1.5px 1.5px rgba(0,0,0,.2),
				0 2.5px 2.5px rgba(0,0,0,.15);
	} /*letter-spacingの変更*/

#banner-blue{
	background-color:#006AE3;
	}
#banner-green{
	background-color:#239D55;
	}
#banner-red{
	background-color:#E74F04;
	}
#banner-purple{
	background-color:#662F7C;
	}
#banner-yellow{
	background-color:#FFA234;
	}
#banner-cyan{
	background-color:#0599D9; /*シアン色#009DDA*/
	}

}/*△小画面*/

/* ＝＝＝ △サイドバータイトル用 ＝＝＝ */

/*バーナー画像の書式指定*/
.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;
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ フッター用 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/*▼フッター大画面レイアウトインフォメーション*/
@media print,screen and (min-width:801px) {
	#footerInfo{
	margin-bottom: 30px;/*コピーライト表記との間隔を調整*/
	}
	.footerInfo-a{
	width: 25%; /*大画面要素幅,100%÷分割数*/
	float:left;
	}
	.footerInfo-b{
	width: 25%; /*大画面要素幅,100%÷分割数*/
	float:left;
	}
	.footerInfo-c{
	width: 25%; /*大画面要素幅,100%÷分割数*/
	float:left;
	}
	.footerInfo-d{
	width: 25%; /*大画面要素幅,100%÷分割数*/
	float:left;
	}
	#footerInfo2{
	margin-bottom: 30px;/*コピーライト表記との間隔を調整*/
	}
	.footerInfo2-a{
	width: 100%; /*大画面はul要素幅300px*/
	float:left;
	}
}


/*▼フッター中画面レイアウトインフォメーション*/
@media print,screen and (max-width:800px) and (min-width:651px) {
	#footerInfo{
	margin-bottom: 30px;/*コピーライト表記との間隔を調整*/
	}
	.footerInfo-a{
	width: 25%; /*大画面要素幅,100%÷分割数*/
	float:left;
	}
	.footerInfo-b{
	width: 25%; /**/
	float:left;
	}
	.footerInfo-c{
	width: 25%; /**/
	float:left;
	}
	.footerInfo-d{
	width: 25%; /**/
	float:left;
	}
	#footerInfo2{
	margin-bottom: 30px;/*コピーライト表記との間隔を調整*/
	}
	.footerInfo2-a{
	width: 100%; /*大画面はul要素幅300px*/
	float:left;
	}
}

/*▼フッター小画面レイアウトインフォメーション*/
@media print,screen and (max-width:650px){
	#footerInfo{
	margin-bottom: 30px;/*コピーライト表記との間隔を調整*/
	}
	.footerInfo-a{
	width: 50%; /*大画面要素幅,100%÷分割数*/
	float:left;
	}
	.footerInfo-b{
	width: 50%; /**/
	float:left;
	}
	.footerInfo-c{
	width: 51%; /*２段目にするため51%にする*/
	float:left;
	}
	.footerInfo-d{
	width: 49%; /**/
	float:left;
	}
	#footerInfo2{
	margin-bottom: 30px;/*コピーライト表記との間隔を調整*/
	}
	.footerInfo2-a{
	width: 100%; /*大画面はul要素幅300px*/
	float:left;
	}
}


@media print,screen and (max-width:800px) and (min-width:651px) {
	#footerInfo{
	margin-bottom: 30px;/*コピーライト表記との間隔を調整*/
	}
}

/*▼フッター大画面レイアウト*/
@media print,screen and (min-width:801px) {
	footer ul{
	list-style-type: none; /*マーカーなし*/
	}
}

/*フッター中画面レイアウト*/
@media print,screen and (max-width:800px) and (min-width:651px) {
	footer ul{
	list-style-type: none; /*マーカーなし*/
	}
}

/*フッター小画面レイアウト*/
@media print,screen and (max-width:650px) {
	footer ul{
	width: 100%; /*小画面中画面ul要素幅100%*/
	margin-bottom: 0px; /*コピーライト表記と間隔を調整30px*/
	list-style-type: none; /*マーカーなし*/
	}
}

/*フッター,リストの項目,ul要素ol要素の子要素*/

@media print,screen and (min-width:801px) {
footer li{
	width: 100%; /*マウスオーバー時の横幅*/
	}
	#footerInfo2 li{
	width: 50%; /*マウスオーバー時の横幅*/
	float:left;
	}
}

@media print,screen and (max-width:800px) and (min-width:651px) {
footer li{
	width: 100%; /*マウスオーバー時の横幅*/
	}
}

@media print,screen and (max-width:650px) {
footer li{
	width: 100%; /*マウスオーバー時の横幅*/
	}
}

/*▼大画面レイアウト,li a要素*/
@media print,screen and (min-width:801px) {
	footer li a{
	display: block; /*a要素をブロックレベル要素に変更しリンクの範囲を文字の部分まで拡張する*/
	color: #FFF; /*白色*/
	font-size: 15px;
	line-height: 24px; /*マウス操作を想定し行間を狭くする*/
	padding-left: 10px; /**/
	text-decoration: none; /**/
	}
}
/*▼中画面レイアウト,li a要素*/
@media print,screen and (max-width:800px) and (min-width:651px) {
	footer li a{
	display: block; /*a要素をブロックレベル要素に変更しリンクの範囲を文字の部分まで拡張する*/
	color: #FFF; /*白色*/
	font-size: 14px;
	line-height: 43px; /*リンクをタップしやすく行間を広げる*/
	padding-left: 10px; /**/
	text-decoration: none; /**/
	}
}

/*小画面レイアウト,li a要素,リンク書式指定*/
@media print,screen and (max-width:650px) {
	footer li a{
	display: block; /*a要素をブロックレベル要素に変更しリンクの範囲を文字の部分まで拡張する*/
	color: #FFF; /*白色*/
	font-size: 13px;
	line-height: 45px; /*リンクをタップしやすく行間を45px*/
	padding-left: 10px; /**/
	text-decoration: none; /**/
	}
}

/*マウスオーバー時に選択した文字の背景を変化させる*/
footer li a:hover{
	background: #00683E; /*緑89B11D空色#00A0E9青色#105FD2,初期値#C30朱色*/
}

/*li要素に指定したfloat:leftを解除するclearfix*/
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;/*span要素を非表示*/
}

/*小画面レイアウト*/
#copyright{
	text-align: right; /*コピーライトを右揃えで配置brで２行表示*/
	color: #FFF; /*白色*/
	font-size: 12px;
}
/*中画面大画面レイアウト*/
@media print,screen and (min-width:651px) {
	#copyright br{
		display: none; /*br要素を非表示。改行が不要となるため*/
	}
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝ グリッドシステム ＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/*マイナス設定はネガティブマージン,行の左右の端を親要素の幅に揃えて配置する*/
.row{
	margin: 10px -15px; /*上下間隔,ネガティブマージン行の領域を左右に15px拡張し左右の端を揃える*/
}
/*clearfix各ブロックのfloat:leftを解除する*/
.row:after{
	display: table;
	content: "";
	clear: both;
}
/*小画面,ブロックを横に並べる*/
.sm-1-div, .sm-2-div, .sm-3-div, .sm-4-div{
	display: block; /*インライン要素のimgをブロックレベル要素に変更し、divで囲む必要をなくす*/
	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%;}

/*小画面の時、画像の大きさを小さくするfinanceの画像*/
.sm-10-div{width: 50%;
 margin: 15px 0px 0px 50px;
}

/*中画面,大画面の時だけ有効*/
@media print,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%;}
}
/*中画面,大画面の時、画像の大きさを小さくする*/
@media print,screen and (min-width:651px) {
	.bg-20-div{width: 42%;}
	.bg-21-div{width: 38%; margin: 15px 0px 0px 20px;}/*financeの画像のみ*/
	.bg-30-div{width: 28%;}
	.bg-40-div{width: 22%;}
}


/*トップページナビ用掲示板用グリッドシステム*/
/*サイドバーなし,トップページなどに使用予定,掲示板4列で中画面,大画面の時だけ有効*/
@media print,screen and (min-width:801px) { /*初期値651px*/
	.bgtop-4-div{width: 22%; margin:0 10px;}
	.bgtop-4L-div{width: 22%; margin-left:25px; margin-right:10px;}/*左のみ使用*/
}

/*サイトマップ,サイドバーなし,一面のみ使用,掲示板2列で中画面,大画面の時だけ有効,トップボックスに使用*/


/*サイドバーなし,一面のみ使用,掲示板2列で中画面,大画面の時だけ有効,トップボックスに使用*/
@media print,screen and (min-width:801px) { /*初期値651px*/
	.bgtop-2-div{width: 48%;}
	.bgtop-2L-div{width:48%;}/*左のみ使用*/
}
/*中画面*/
@media print,screen and (max-width:800px) and (min-width:651px) {
	.bgtop-2-div{width: 48%;}
	.bgtop-2L-div{width:48%;}/*左のみ使用*/
}
/*小画面*/
@media print,screen and (max-width:650px) {
	.bgtop-2-div{width: 48%;}
	.bgtop-2L-div{width:48%;}/*左のみ使用*/
}


/*サイドバーなし,トップページなどに使用,掲示板2列で小画面の時だけ有効*/
@media print,screen and (max-width:800px) { /*初期値650px*/
.smtop-2-div{
	float: left; /*ブロックを横に並べる*/
	padding: 0px 15px;/*隣接するブロックとの間に間隔を設ける*/
	margin:10px;
}
.smtop-2L-div{
	float: left; /*ブロックを横に並べる*/
	padding: 0px 15px;/*隣接するブロックとの間に間隔を設ける*/
	margin:10px 10px 10px 30px;
}
.smtop-2-div{width: 42%;}
.smtop-2L-div{width: 42%;}
}


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

/* 小画面のとき幅100%で表示 */

.width-full{
	width: 100%;
}

/* 小画面のとき幅80%で表示 */

.width-full-80{
	width: 80%;
	margin-left:20px;
	}

/*文字と画像をセットで表示したとき,縦一列の小画面の時だけ下の余白を30pxに変更する*/
@media print,screen and (max-width:650px) {
	.sm-btm-pad{
		padding-bottom: 30px;
	}
}

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

/* 小画面のときだけ内余白ゼロにし画像などの間隔をなくす */
@media print,screen and (max-width:650px) {
	.sm-nopad{
		padding: 0;
	}
}

/* 中画面＆大画面－角丸10px */
@media print,screen and (min-width:651px) {
	.mdlg-round{
		border-radius: 10px;
	}
}

/*小画面の時,要素の非表示をクラスで指定する*/
@media print,screen and (max-width:650px) {
	.sm-hide{
	display: none; /*非表示、divやspan要素に指定し、小画面の時だけ非表示にする*/
 }
}





/* ＝＝＝＝＝＝＝＝＝トップページに戻るボタン ＝＝＝＝＝＝＝＝＝＝ */

/*▼大画面ボタンレイアウト基本部分,a要素*/
@media print,screen and (min-width:651px) {
#topbutton {
/* ▽表示位置を画面の右下に固定 */
	position: fixed;
	bottom: 18px;/*初期値18px*/
	right: 18px;
	width: 8em; /*初期値の文字数7emでは一行にならないm*/

/* ▽最初は非表示にしておく */
display: none;

/* ▽配色・配置・文字の装飾など */
	background-color: #2525aa;
	opacity: 0.75;
	border-radius: 24px;
	text-align: center;
	font-size: 120%;/*初期値120%*/
	font-weight: bold;
	margin: 0px;
	padding: 10px;
	}
#topbutton a {
/* ▽リンクの装飾 */
	color: white;
	text-decoration: none;
	}
#topbutton a:hover {
/* ▽マウスが載ったときの装飾 */
	color: yellow;/*青の反対色である黄色を使う,補色は使用しない*/
	/*ゴッホ,フェルメールの絵のように青と黄色の対比が美しい配色である。*/
	text-decoration: underline;
	}
}


/*フッター小画面レイアウト*/
@media print,screen and (max-width:650px) {
#topbutton {
/* ▽表示位置を画面の右下に固定 */
	position: fixed;
	bottom: 18px;/*初期値18px*/
	right: 18px;
	width: 8em; /*初期値の文字数7emでは一行にならない*/

/* ▽最初は非表示にしておく */
display: none;

/* ▽配色・配置・文字の装飾など */
	background-color: #2525aa;
	opacity: 0.75;
	border-radius: 24px;
	text-align: center;
	font-size: 100%;/*スマートフォン対応*/
	font-weight: bold;
	margin: 0px;
	padding: 10px;
	}
#topbutton a {
/* ▽リンクの装飾 */
	color: white;
	text-decoration: none;
	}
#topbutton a:hover {
/* ▽マウスが載ったときの装飾 */
	color: yellow; /*青の反対色*/
	text-decoration: underline;
	}
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ CSSで作成するアコーディオン式コンテンツ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/*▼大中画面用レイアウト,アコーディオン*/

@media print,screen and (min-width:651px) {
#adcontents {
	position: relative;
	width: 100%;
	margin: 10px auto 20px;
	padding: 10px 10px 10px;
	box-sizing: border-box;  /*padding幅に左右されずwidthの指定値にするため*/
}

.accordion {
	background: #eee;
	}/*▲アコーディオン,色グレー*/

.accordion input {
	display: none;
	}

.accordion label {
	cursor: pointer;
	}

.accordion .adsection {
	overflow: hidden;
	height: 50px;
	border-top: 2px solid rgba(255,255,255,0.4);
	border-bottom: 2px solid rgba(0,0,0,0.2);
	color: #336;/*文字の色*/
	transition-property: height, background;
	transition-duration: .6s, .6s;
	transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1), ease;
	box-sizing: border-box;
	}

.accordion .adsection h2.normal:hover{
	color:white;
	}/*ホーバー時のタイトルを変更*/

.accordion label #adsection1 {
	border-top: 0;
	background-color: #f5f5f5;
	}  /*▲色,#e57981,#c9e2f2*/
.accordion label #adsection2 {
	background-color: #f5f5f5;
	}  /*▲色,#e6c455*/
.accordion label #adsection3 {
	background-color: #f5f5f5;
	}  /*▲色,#86ab4e*/
.accordion label #adsection4 {
	background-color: #f5f5f5;
	}  /*▲色,#23a1ad*/
.accordion label #adsection5 {
	background-color: #f5f5f5;
	}  /*▲色,#866d99*/
.accordion label #adsection6 {
	background-color: #f5f5f5;
	}  /*▲色,#e57981*/

.accordion .adsection h2 {
	padding: .9em 0 2em 20px;/*文字の位置,初期値.5em 30px*/
	font-size: 1.0em;
	overflow: hidden;
	text-overflow: ellipsis; /*領域を超えたら「....」表示する*/
	white-space: nowrap; /*自動的に改行しない*/
	box-sizing: border-box;
	}

.accordion .adsection .inner {
	padding: .5em 30px 1em;
	opacity: 0;
	transition: opacity 1s;
}

.inner{
	margin-top:-2.6rem; /*表題と説明文が開きすぎる*/
	}

.accordion #adsection1:hover {
	background-color: #4f9bff;
	color:white;
	}  /*▲マウスポインタが乗った時の色,#ec959b*/
.accordion #adsection2:hover {
	background-color: #4f9bff;
	color:white;
	}  /*▲マウスポインタが乗った時の色,#ecd274*/
.accordion #adsection3:hover {
	background-color: #4f9bff;
	color:white;
	}  /*▲マウスポインタが乗った時の色,#a0be6e*/
.accordion #adsection4:hover {
	background-color: #4f9bff;
	color:white;
	}  /*▲マウスポインタが乗った時の色,#40b6c0*/
.accordion #adsection5:hover {
	background-color: #4f9bff;
	color:white;
	}  /*▲マウスポインタが乗った時の色,#a08ab0*/
.accordion #adsection6:hover {
	background-color: #4f9bff;
	color:white;
	}  /*▲マウスポインタが乗った時の色,#0095D9*/

.accordion input:checked + #adsection1 {
	height: 300px;
	}
.accordion input:checked + #adsection2 {
	height: 160px;
	}
.accordion input:checked + #adsection3 {
	height: 210px;
	}
.accordion input:checked + #adsection4 {
	height: 160px;
	}
.accordion input:checked + #adsection5 {
	height: 135px;
	}
.accordion input:checked + #adsection6 {
	height: 235px;
	}

.accordion input:checked + .adsection .inner {
	opacity: 1;
	transition-delay: .4s;
	}
}
/*▲大中画面用レイアウト,アコーディオン*/

/*▽小画面用レイアウト,アコーディオン*/
@media print,screen and (max-width:650px) {
#adcontents {
	position: relative;
	width: 100%;
	margin: 10px auto 20px;
	padding: 10px 10px 10px;
	box-sizing: border-box;  /*padding幅に左右されずwidthの指定値にするため*/
}

.accordion {
	background: #eee;
	}/*▲アコーディオン,色グレー*/

.accordion input {
	display: none;
	}

.accordion label {
	cursor: pointer;
	}

.accordion .adsection {
	overflow: hidden;
	height: 60px;
	border-top: 2px solid rgba(255,255,255,0.4);
	border-bottom: 2px solid rgba(0,0,0,0.2);
	color: #336;/*文字の色*/
	transition-property: height, background;
	transition-duration: .6s, .6s;
	transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1), ease;
	box-sizing: border-box;
	}

.accordion .adsection h2.normal:hover{
	color:white;
	}/*ホーバー時のタイトルを変更*/

.accordion label #adsection1 {
	border-top: 0;
	background-color: #f5f5f5;
	}  /*▲色,#e57981,#c9e2f2*/
.accordion label #adsection2 {
	background-color: #f5f5f5;
	}  /*▲色,#e6c455*/
.accordion label #adsection3 {
	background-color: #f5f5f5;
	}  /*▲色,#86ab4e*/
.accordion label #adsection4 {
	background-color: #f5f5f5;
	}  /*▲色,#23a1ad*/
.accordion label #adsection5 {
	background-color: #f5f5f5;
	}  /*▲色,#866d99*/
.accordion label #adsection6 {
	background-color: #f5f5f5;
	}  /*▲色,#e57981*/

.accordion .adsection h2 {
	padding: .9em 0 2em 10px;/*文字の位置,初期値.5em 30px*/
	font-size: 1.0em;
	overflow: hidden;
	word-wrap:break-word; /*文字を折り返して表示する*/
	overflow-wrap:break-word; /*文字を折り返して表示する*/
	box-sizing: border-box;
	height:60px;/*文字の折り返しのため高さを高くする*/
	}

.accordion .adsection .inner {
	padding: .5em 30px 1em;
	opacity: 0;
	transition: opacity 1s;
}

.inner{
	margin-top:-1.2rem;
	}
	

.accordion #adsection1:hover {
	background-color: #4f9bff;
	color:white;
	}  /*▲マウスポインタが乗った時の色,#ec959b*/
.accordion #adsection2:hover {
	background-color: #4f9bff;
	color:white;
	}  /*▲マウスポインタが乗った時の色,#ecd274*/
.accordion #adsection3:hover {
	background-color: #4f9bff;
	color:white;
	}  /*▲マウスポインタが乗った時の色,#a0be6e*/
.accordion #adsection4:hover {
	background-color: #4f9bff;
	color:white;
	}  /*▲マウスポインタが乗った時の色,#40b6c0*/
.accordion #adsection5:hover {
	background-color: #4f9bff;
	color:white;
	}  /*▲マウスポインタが乗った時の色,#a08ab0*/
.accordion #adsection6:hover {
	background-color: #4f9bff;
	color:white;
	}  /*▲マウスポインタが乗った時の色,#0095D9*/

.accordion input:checked + #adsection1 {
	height: 27rem;
	}
.accordion input:checked + #adsection2 {
	height: 13rem;
	}
.accordion input:checked + #adsection3 {
	height: 16.7rem;
	}
.accordion input:checked + #adsection4 {
	height: 14.5rem;
	}
.accordion input:checked + #adsection5 {
	height: 11rem;
	}
.accordion input:checked + #adsection6 {
	height: 22rem;
	}

.accordion input:checked + .adsection .inner {
	opacity: 1;
	transition-delay: .4s;
	}
}
/*△小画面用レイアウト,アコーディオン*/


/* IE8はロールオーバーで開く */

.ie8 .accordion .adsection h2 {
  padding: 1em 30px .5em;
}

.ie8 .accordion .adsection:hover {
  height: 390px;
}

.ie8 .accordion .adsection .inner {
  filter: alpha(opacity=0);
}

.ie8 .accordion .adsection:hover .inner {
  filter: alpha(opacity=100);
}


/* ＝＝＝＝＝ 自動車アコーディオン高さの変更 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/*▼大中画面用レイアウト,アコーディオン*/
@media print,screen and (min-width:651px) {
#adcontents-car {
	position: relative;
	width: 100%;
	margin: 10px auto 40px;
	padding: 10px 10px 10px;
	box-sizing: border-box;
	}

.accordion-car {
	background: #eee;
	}/*▲アコーディオン,色グレー*/

.accordion-car input {
	display: none;
	}

.accordion-car label {
	cursor: pointer;
	}

.accordion-car .adsection {
	overflow: hidden;
	height: 46px;/*50px*/
	border-top: 2px solid rgba(255,255,255,0.4);
	border-bottom: 2px solid rgba(0,0,0,0.2);
	color: #336;/*文字の色*/
	transition-property: height, background;
	transition-duration: .6s, .6s;
	transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1), ease;
	box-sizing: border-box;
	}

.accordion-car .adsection h2.normal:hover{
	color:white;
	}/*ホーバー時のタイトルを変更*/

.accordion-car label #adsection1car {
	border-top: 0;
	background-color: #f5f5f5;
	}  /*▲自動車アコーディオンの色*/

.accordion-car label #adsection2car {
	background-color: #f5f5f5;
	}  /*▲自動車アコーディオンの色*/

.accordion-car label #adsection3car {
	background-color: #f5f5f5;
	}  /*▲自動車アコーディオンの色*/
.accordion-car label #adsection4car {
	background-color: #f5f5f5;
	}  /*▲自動車アコーディオンの色*/

.accordion-car .adsection h2 {
	margin: 0;
	padding: 0.8em 0 0.9em 30px;/*初期値.9em 30px*/
	font-size: 1.0rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	box-sizing: border-box;
	}

.accordion-car .adsection .inner {
	padding: .5em 30px 1em; /*.5em 30px 1em;*/
	opacity: 0;
	transition: opacity 1s;
	}

.accordion-car .adsection .inner-car {
	padding: .0em 30px 1em; /*.5em 30px 1em;*/
	opacity: 1.0; /*文字を表記*/
	transition: opacity 1s;
	}


.accordion-car #adsection1car:hover {
	background-color: #4f9bff;
	color:white;
	}  /*▲自動車リース,マウスポインタが乗った時の色*/

.accordion-car #adsection2car:hover {
	background-color: #4f9bff;
	color:white;
	}  /*▲自動車リース,マウスポインタが乗った時の色*/

.accordion-car #adsection3car:hover {
	background-color: #4f9bff;
	color:white;
	}  /*▲自動車リース,マウスポインタが乗った時の色*/
.accordion-car #adsection4car:hover {
	background-color: #4f9bff;
	color:white;
	}  /*▲自動車リース,マウスポインタが乗った時の色*/

.accordion-car input:checked + #adsection1car {
	height: 130px;
	}

.accordion-car input:checked + #adsection2car {
	height: 140px;
	}

.accordion-car input:checked + #adsection3car {
	height: 110px;
	}

.accordion-car input:checked + #adsection4car {
	height: 110px;
	}

}
/*▲大中画面用レイアウト,自動車アコーディオン*/


/*▽小画面用レイアウト,自動車アコーディオン*/
@media print,screen and (max-width:650px) {
#adcontents-car {
	position: relative;
	width: 100%;
	margin: 10px auto 40px;
	padding: 10px 10px 10px;
	box-sizing: border-box;
	}

.accordion-car {
	background: #eee;
	}/*▲アコーディオン,色グレー*/

.accordion-car input {
	display: none;
	}

.accordion-car label {
	cursor: pointer;
	}

.accordion-car .adsection {
	overflow: hidden;
	height: 50px;
	border-top: 2px solid rgba(255,255,255,0.4);
	border-bottom: 2px solid rgba(0,0,0,0.2);
	color: #336;/*文字の色*/
	transition-property: height, background;
	transition-duration: .6s, .6s;
	transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1), ease;
	box-sizing: border-box;
	}

.accordion-car .adsection h2.normal:hover{
	color:white;
	}/*ホーバー時のタイトルを変更*/

.accordion-car label #adsection1car {
	border-top: 0;
	background-color: #f5f5f5;
	}  /*▲自動車アコーディオンの色*/

.accordion-car label #adsection2car {
	background-color: #f5f5f5;
	}  /*▲自動車アコーディオンの色*/

.accordion-car label #adsection3car {
	background-color: #f5f5f5;
	}  /*▲自動車アコーディオンの色*/
.accordion-car label #adsection4car {
	background-color: #f5f5f5;
	}  /*▲自動車アコーディオンの色*/

.accordion-car .adsection h2 {
	margin: 0;
	padding: .9em 30px;/*初期値.5em 30px*/
	font-size: 1.0em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	box-sizing: border-box;
	}

.accordion-car .adsection .inner {
	padding: .5em 30px 1em; /*.5em 30px 1em;*/
	opacity: 0;
	transition: opacity 1s;
	}

.accordion-car .adsection .inner-car {
	padding: .0em 30px 1em; /*.5em 30px 1em;*/
	opacity: 1.0; /*文字を表記*/
	transition: opacity 1s;
	}


.accordion-car #adsection1car:hover {
	background-color: #4f9bff;
	color:white;
	}  /*▲自動車リース,マウスポインタが乗った時の色*/

.accordion-car #adsection2car:hover {
	background-color: #4f9bff;
	color:white;
	}  /*▲自動車リース,マウスポインタが乗った時の色*/

.accordion-car #adsection3car:hover {
	background-color: #4f9bff;
	color:white;
	}  /*▲自動車リース,マウスポインタが乗った時の色*/
.accordion-car #adsection4car:hover {
	background-color: #4f9bff;
	color:white;
	}  /*▲自動車リース,マウスポインタが乗った時の色*/

.accordion-car input:checked + #adsection1car {
	height: 13rem;
	}

.accordion-car input:checked + #adsection2car {
	height: 12rem;
	}

.accordion-car input:checked + #adsection3car {
	height: 8rem;
	}

.accordion-car input:checked + #adsection4car {
	height: 8rem;
	}

}
/*△小画面用レイアウト,アコーディオン*/



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ トップページのキャッチフレーズの位置指定 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

@media print,screen and (min-width:651px) {
#catchphrase1{
	padding:0px 0 0 60px;
	}
#catchphrase2{
	padding:1px 0 0 200px;
	}
#catchphrase3{
	margin:0px 0 0 100px;
	}
}

@media print,screen and (max-width:650px) and (min-width:422px) {
#catchphrase1{
	padding:30px 0 0 30px;
	}/*marginは画像自体が下に移動するのでpaddingを使用する*/
#catchphrase2{
	margin:2px 0 0 80px;
	}
#catchphrase3{
	margin:2px 30px 0 60px;
	}
}

@media print,screen and (max-width:421px) {
#catchphrase1{
	padding:30px 7px 0 30px;
	}/*marginは画像自体が下に移動するのでpaddingを使用する*/
#catchphrase2{
	margin:2px 5px 0 20px;
	}
#catchphrase3{
	margin:2px 30px 0 30px;
	}
}