@charset "utf-8";

/*リセットCSSの読み込み--------------*/
@import url("sanitize.css");

/*スライダーslick.cssの読み込み--------------*/
@import url("slick.css");

/*Font Awesomeの読み込み--------------*/
@import url("all.min.css");

/*専用cssファイルの読み込み--------------*/
@import url("animation.css");

/*全体の設定--------------*/
html,body {
	height: 100%;
}

body {
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;	/*フォント種類（ゴシック）*/
	-webkit-text-size-adjust: none;
	background: #fff;	/*背景色*/
	color: #444;		/*文字色*/
	line-height: 2;		/*行間*/
	border-top: 5px solid #5683d6;	/*上の線の幅、線種、色*/
	animation: opa1 0.3s 0.5s both;	/*0.5秒の間だけ非表示*/
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav {margin: 0;    padding: 0 6%;}

p {
    display: block;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
ul{
	list-style: none;
	padding: 0;
    margin: 0 auto 2rem;
}
/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*他*/
input {font-size: 1rem;}
section + section {
	margin-top: 3rem;
}
.fontbld{
	font-weight: bold;
}

/*左回り込み(中央)*/
.flt-l{
	float:left;
	width:49%;
}
.flt-r{
	float:right;
	width:49%;
}
.flt-c{
	clear:both;
}
/*文字サイズの設定--------------*/
/*「大」ボタンを押した時*/
body.f-large {
	font-size: 24px;
}

/*「小」ボタンを押した時*/
body.f-small {
	font-size: 16px;
}

/*背景色の設定--------------*/
/*「白」ボタンを押した時*/
body.f-middle-w {
    background: #FFF;
}
/*「黒」ボタンを押した時*/
body.f-middle-blk
,body.f-middle-blk main h4 span
,body.f-middle-blk main h3 span
,body.f-middle-blk main .hr span
,body.f-middle-blk main .hr2 span
,body.f-middle-blk .sepa li:nth-child(2n+1)
,body.f-middle-blk .sepa tr:nth-child(2n+1){

    background: #000;
	color:#FFF;
}
/*「青」ボタンを押した時*/
body.f-middle-b
,body.f-middle-b main h4 span
,body.f-middle-b main h3 span
,body.f-middle-b main .hr span
,body.f-middle-b main .hr2 span
,body.f-middle-b .sepa li:nth-child(2n+1)
,body.f-middle-b .sepa tr:nth-child(2n+1){
    background: #0000FF;
	color:#FFF;
}
/*「黄色」ボタンを押した時*/
body.f-middle-y
,body.f-middle-y .sepa li:nth-child(2n+1)
,body.f-middle-y .sepa tr:nth-child(2n+1){
    background: #FFF700;
}

/*リンクテキスト全般の設定--------------*/
a {
	color: #444;	/*文字色*/
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

.f-middle-blk a
,.f-middle-b a {
	color: aqua;	/*文字色*/
}

/*マウスオン時*/
a:hover {
	filter: brightness(1.1);	/*少しだけ明るくする*/
}

.txt-c{
	text-align: center;
}

/*コンテナー（サイト全体を囲むブロック）--------------*/
#container {
	height: 100%;
	display: flex;	/*flexボックスを使う指定*/
	flex-direction: column;	/*子要素を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
/*	max-width: 1800px;	/*サイトの最大幅。これ以上広がらない*/
	margin: 0 auto;
}


/*コンテンツ（フッター関連「以外」を囲むブロック）--------------*/
#contents {
/*	flex: 1;
	padding: 0 6% 100px;	/*上、左右、下への余白。*/
*/	background: url(../images/footer_bg.png) repeat-x center bottom / auto 50px;	/*下部の背景画像*/
}


/*header（ロゴが入った最上段のブロック）--------------*/
/*ヘッダーブロック*/
header {
	flex: 1;
	padding: 10px 6%;	/*上、左右、下への余白。*/
/*	padding: 10px 0;	/*上下、左右へのブロック内の余白*/
	position: relative;	/*要素を絶対配置する為に必用な指定*/
	min-height: 80px;	/*最低限の高さ*/
}

	/*画面幅900px「以下」の追加指定。要素と重ならないようにする為。*/
	@media screen and (max-width:900px) {
	
	/*ヘッダーブロック*/
	header {
		min-height: 150px;
	}
	.mainimg {
    margin-bottom: -100px !important;
    padding-top: 150px !important;
	}

	}/*画面幅900px「以下」の追加指定ここまで*/

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	/*ヘッダーブロック*/
	header {
		display: flex;			/*flexボックスを使う指定*/
		align-items: center;	/*垂直揃えの指定。天地中央に配置*/
		padding-right: 230px;	/*要素と重ならないようにする為*/
	}
	
	}/*画面幅900px以上の追加指定ここまで*/


/*ロゴ*/
#logo {
	margin: 0;
}

	/*画面幅650px「以下」の追加指定。要素と重ならないようにする為。*/
	@media screen and (max-width:650px) {
	
		/*ロゴ*/
		#logo {
			width: calc(100% - 220px);	/*ロゴの幅。*/
		}
		#logo a{
				display:block;
				margin: 8px 0 0 8px;
				width: 180px;	/*幅*/
				height:64px;
		   		background:left top / 180px 64px no-repeat url(../images/logo_s.png);  
		}
		body.f-middle-blk #logo a
		,body.f-middle-b #logo a{
		   		background:left top / 180px 64px no-repeat url(../images/logo_s_w.png);
		}

		/*ヘッダーブロック*/
		header {
			padding: 0px 0 10px 0;
		}
		#footermenu{
			display:block !important;
			font-size: 1.0em !important;
		}
		.ta1, .ta3{
			width:100% !important;
		}
		.list-grid.c3 .list figure {
		    width: 100% !important;
		}
		.flt-r,.flt-l {
		    float: none !important;
		    width: 100% !important;
		}
	
	}/*画面幅650px「以下」の追加指定ここまで*/


	/*画面幅650px以上の追加指定*/
	@media screen and (min-width:650px) {
	
	/*ロゴ*/
	#logo a{
		display:block;
		margin: 0;
		margin-right: 3%;
		width: 400px;	/*幅*/
		height:60px;
   		background:left top / 400px 60px no-repeat url(../images/logo.png);  
   	}
	body.f-middle-blk #logo a
	,body.f-middle-b #logo a{
	   		background:left top / 400px 60px no-repeat url(../images/logo_w.png);
	}
	
	}/*画面幅650px以上の追加指定ここまで*/


/*ヘッダーの中央に配置するブロック*/
#header-center {
	display: none;	/*非表示にする*/
	text-align: center;
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
	
	/*ヘッダーの中央に配置するブロック*/
	#header-center {
		display: flex;				/*flexボックスを使う指定*/
		align-items: center;		/*垂直揃えの指定。天地中央に配置*/
/*		width: calc(100% - 300px);*/	/*pxの数値はロゴのwidth*/
		width: calc(100% - 660px);	/*pxの数値はロゴのwidth*/
	}
	#header-center * {
		margin: 3px;	/*バナー同士に空けるスペース*/
	}
	
	}/*画面幅900px以上の追加指定ここまで*/


/*ヘッダー右側の言語ボタン--------------*/
/*言語ブロック全体*/
ul#lang {
	margin: 0;padding: 0;
	list-style: none;
	position: absolute;	/*headerに対して絶対配置する*/
	right: 0px;			/*右からの配置場所*/
	bottom: 10px;		/*下からの配置場所*/
	display: flex;		/*flexボックスを使う指定*/
	font-size: 0.85rem;	/*文字サイズ。85%*/
}

/*ボタン１個あたり*/
ul#lang a {
	display: block;text-decoration: none;
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	border-radius: 5px;		/*角を少しだけ丸くする指定*/
	padding: 0 1rem;		/*ボタン内の余白。*/
	margin: 2px;			/*ボタンの外側にとるスペース。ボタン同士の隙間部分*/
	background: #fff;		/*背景色*/
}


/*文字サイズ変更ボタン--------------*/
/*ボタンブロック全体*/
#f-size
,#bg-color {
	box-shadow: 0px 0px 8px rgba(0,0,0,0.2);	/*影の設定。右へ、下へ、ぼかし幅*/
	border-radius: 0px 0px 5px 5px;	/*角丸のサイズ。*/
	display: flex;			/*flexボックスを使う指定*/
	align-items: center;	/*垂直揃えの指定。天地中央に配置*/
	padding: 10px 15px;		/*ブロック内の余白。上下、左右へ。*/
	position: absolute;		/*headerに対して絶対配置する*/
	right: 0px;				/*右からの配置場所*/
	top: 0px;				/*上からの配置場所*/
}
#bg-color {
right: 260px;
}
	/*画面幅900px「以下」の追加指定。ハンバーガーアイコンが出る分、位置をずらす。*/
	@media screen and (max-width:900px) {
	
	#f-size {
		left: 0px;
		top: 80px;
	}
	#bg-color {
		right: 0px;
		top: 80px;
		z-index:100;
		box-shadow:none;
		border:none;
	}
	.pankuzu{
		display:none;
	}
	.fixed {
	    height: 160px !important;
	}
	.f-small main.c2{
		padding-top: 160px !important;
	}
	main .pagelink {
	    margin-top: -160px !important;
	    padding-top: 160px !important;
	}	
	}/*画面幅900px「以下」の追加指定ここまで*/


/*「文字サイズ」のテキスト*/
#f-size p
#bg-color p, {
	margin: 0;
	margin-right: 10px;	/*右側に空けるスペース。ボタンとの間にとるスペース*/
	font-size: 0.85rem;	/*文字サイズ*/
}

	/*画面幅500px「以下」の追加指定。*/
	@media screen and (max-width:500px) {
	
	#f-size p
	,#bg-color p {
		display: none;	/*画面が狭くなるので、非表示*/
	}
	
	}/*画面幅500px「以下」の追加指定ここまで*/


/*「小」「大」を囲むブロック*/
#f-size ul
,#bg-color ul {
	list-style: none;margin: 0;padding: 0;
	display: flex;			/*flexボックスを使う指定*/
	align-items: center;	/*垂直揃えの指定。天地中央に配置*/
}

/*「小」ボタン設定*/
#f-size ul li#f-small::before {
	display: block;
	content: "小";		/*「小」の文字を出力*/
	font-size: 16px;	/*文字サイズ*/
	width: 40px;		/*幅*/
	line-height: 40px;	/*高さ*/
	text-align: center;	/*内容をセンタリング*/
	background: #eee;	/*背景色*/
	margin: 0 5px;	/*右側に空けるスペース。*/
	color: #444;		/*文字色*/
}
#bg-color ul li#f-middle-w::before
,#bg-color ul li#f-middle-blk::before
,#bg-color ul li#f-middle-b::before
,#bg-color ul li#f-middle-y::before {
	display: block;
	font-size: 16px;	/*文字サイズ*/
	width: 40px;		/*幅*/
	line-height: 40px;	/*高さ*/
	text-align: center;	/*内容をセンタリング*/
	margin: 0 5px;	/*右側に空けるスペース。*/
	border:1px #999 solid;
	border-radius: 50%;
}
#bg-color ul li#f-middle-w::before
,.f-middle-w .fixed{
	content: "白";		/*「白」の文字を出力*/
	background: #FFF;	/*背景色*/
	color:#444;
}
#bg-color ul li#f-middle-blk::before
,.f-middle-blk .fixed{
	content: "黒";		/*「黒」の文字を出力*/
	background: #000;	/*背景色*/
	color:#fff;
}
#bg-color ul li#f-middle-b::before
,.f-middle-b .fixed{
	content: "青";		/*「青」の文字を出力*/
	background: #0000FF;	/*背景色*/
	color:#fff;
}
#bg-color ul li#f-middle-y::before
,.f-middle-y .fixed{
	content: "黄";		/*「黄」の文字を出力*/
	background: #FFF700;	/*背景色*/
	color:#444;
}

/*「大」ボタン設定*/
#f-size ul li#f-large::before {
	display: block;
	content: "大";		/*「大」の文字を出力*/
	font-size: 30px;	/*文字サイズ*/
	width: 50px;		/*幅*/
	line-height: 50px;	/*高さ*/
	text-align: center;	/*内容をセンタリング*/
	background: #eee;	/*背景色*/
	color: #444;		/*文字色*/
}

/*選択中の設定*/
#f-size li#f-large.current::before,
#f-size li#f-small.current::before {
	background: #5683d6;	/*背景色*/
	color: #fff;			/*文字色*/
}
#menubar ul li.m-current a{
	background: #009999;	/*背景色*/
	color: #fff;			/*文字色*/
}

.f-large main.c2 {
	padding-top:184px;
}
.f-small main.c2 {
	padding-top:137px;
}

/*マウスオン時に手のマーク*/
#f-size li
,#bg-color li {
	cursor: pointer;
}

/* 階層を現わすリスト */
ul li ul.kaiso{
margin-left: -1.5rem;
}
ul li ul.kaiso li{
    list-style-type: none;
}
ul li ul.kaiso li::before{
	content:"┗ ";
}

.fixed{
  width: 100%;
  height: 137px;
  position: fixed;
  top: 0;
  left: 0;
  z-index:100;
  border-top: 5px solid #5683d6;
}

/*メニューブロック設定--------------*/
#menubar a {display: block;text-decoration: none;}
#menubar ul {list-style: none;margin: 0;padding: 0;font-family: "Font Awesome 5 Free";}
#menubar.d-n, #menubar_hdr.d-n, #menubar .ddmenu_parent ul {display: none;}
#menubar.d-b {display: block;background: #5683d6;}
#menubar_hdr.d-b {display: flex;}
#menubar {position: relative;z-index: 1;}

/*ドロップダウンメニューのリンクタグ*/
#menubar .ddmenu {
	cursor: default;	/*リンク要素のカーソルを矢印に変更しておく*/
}

/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
a.ddmenu::before {
	content: "\f078";	/*使いたいアイコン名をここで指定。*/
	font-weight: bold;	/*この手の設定がないとアイコンが出ない場合あり*/
	margin-right: 1em;	/*アイコンとテキストとの間に空けるスペース*/
}


/*大きな端末用のメニューブロック設定--------------*/
.p #menubar > nav > ul {
	display: flex;					/*flexボックスを使う指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	margin: 0 auto;
}

/*メニュー１個あたりの設定*/
.p #menubar li {
	text-align: center;	/*テキストをセンタリング*/
	flex: 1;			/*個々のメニューを均等にし、幅いっぱいまで使う設定*/
	position: relative;	/*ドロップダウンの幅となる基準を作っておく*/
}
.p #menubar a {
	padding: 10px;			/*メニュー内の余白*/
	background: #5683d6;	/*背景色*/
	color: #fff;			/*文字色*/
    line-height: 1.0em;
	height: 52px;
	display: flex;
    align-items: center;
    justify-content: center;
}
.p #menubar a.active {
	background: #2b67d6;	/*背景色*/
}
/*「大」の文字の選択時のメニューブロック*/
.f-large #menubar nav ul {
	flex-wrap: wrap;	/*メニューの折り返しを許可する*/
}

/*「大」の文字の選択時のメニュー1個あたり*/
.f-large #menubar nav > ul > li {
	flex: auto;
	width: 33%;	/*6つのメニューを2段にする為に幅を指定。1段あたり3個*/
}

/*大きな端末用のドロップダウンメニュー--------------*/
/*ドロップダウンメニューブロック全体*/
.p #menubar ul ul {
	position: absolute;z-index: 100;
	width: 100%;
}


/*小さな端末用の開閉ブロック--------------*/
/*メニューブロック設定*/
.s #menubar.d-b {
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding: 100px 20px 20px;			/*ブロック内の余白。上、左右、下。*/
	background: rgba(0,0,0,0.9);		/*背景色。*/
	text-align: center;					/*内容をセンタリング*/
	animation: animation1 0.2s both;	/*animation.cssのanimation1を実行。*/
}

/*メニュー１個あたりの設定*/
.s #menubar a {
	padding: 10px;		/*メニュー内の余白*/
	color: #fff;		/*文字色*/
}


/*３本バー（ハンバーガー）アイコン設定--------------*/
/*大きな端末では非表示にしておく*/
.p #menubar_hdr {display: none;}

/*３本バーを囲むブロック*/
.s #menubar_hdr {
	position: fixed;z-index: 101;
	cursor: pointer;
	right: 30px;		/*右からの配置場所指定*/
	top: 25px;			/*上からの配置場所指定*/
	padding: 16px 14px;	/*上下、左右への余白*/
	width: 46px;		/*幅（３本バーが出ている場合の幅になります）*/
	height: 46px;		/*高さ*/
	display: flex;					/*flexボックスを使う指定*/
	flex-direction: column;			/*子要素（３本バー）を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	background: #5683d6;	/*背景色*/
	color: #fff;			/*文字色*/
	transform: scale(1.3);	/*実寸の130%に。*/
}

/*バー１本あたりの設定*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;	/*アニメーションにかける時間。0.3秒。*/
	border-top: 2px solid #fff;	/*線の幅、線種、色*/
}

/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/
#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
	transform-origin: center center;	/*変形の起点。センターに。*/
	width: 20px;						/*バーの幅*/
}

/*×印が出ている状態の設定。※１本目のバー。*/
#menubar_hdr.ham span:nth-of-type(1){
	transform: rotate(45deg) translate(3.8px, 5px);	/*回転45°と、X軸Y軸への移動距離*/
}

/*×印が出ている状態の設定。※３本目のバー。*/
#menubar_hdr.ham span:nth-of-type(3){
	transform: rotate(-45deg) translate(3.8px, -5px);	/*回転-45°と、X軸Y軸への移動距離*/
}

/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2){
	display: none;	/*２本目は使わないので非表示*/
}


/*mainブロック設定--------------*/
/*mainブロックの設定*/
main {
	flex: 1;
	padding: 0 6% 50px;	/*上、左右、下への余白。*/
	margin: 0;	/*ブロックの外側に空けるスペース*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	/*2カラムで使う為の指定*/
	main.c2 {
		display: flex;	/*flexボックスを使う指定*/
		justify-content: space-between;	/*並びかたの種類の指定*/
		padding-top:137px;
	}
	main.top {
		margin-top: -187px;
	}
	
	/*2カラムの中にある.main要素*/
	main.c2 .main {
		width: calc(100% - 300px);	/*幅。*/
		padding-top: 2.5rem;
/*		order: 1;*/
	}
	main.c2 #side {
		padding-top: 2rem;
	}
	main.c2 #side a.active{
		background-color: #2B67D6;
    	color: #ffffff;
	}
	/*2カラムの中にある.sub要素*/
	main.c2 .sub {
		width: 270px;	/*幅*/
	}

	}/*画面幅900px以上の追加指定ここまで*/


/*mainブロック内のh2タグ*/
main h2 {
	margin: 0 0 1rem;		/*h2の外側にとるスペース。*/
	padding-left: 1rem;		/*左側に１文字分の余白を作る*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くとる*/
	background: #5683d6;	/*背景色*/
	color: #fff;			/*文字色*/
}

main .pagelink{
	margin-top: -137px;
	padding-top: 137px;
	display:block;
}

/*h3タグ*/
main h3 {
	margin: 0 0 1rem;
	letter-spacing: 0.1em;
	border-left: 5px solid #5683d6;
	padding-left: calc(1rem - 3px);
	border-bottom: 1px solid #ccc;
}
main h3.m-title {
	border-left: 5px solid #ff69b4;
}

/*h3タグ*/
main h3.bdr-none {
	border-bottom: 0;	/*下線の幅、線種、色*/
	margin-bottom: 0;
}

main h3 span{
	font-size:0.8em;
	font-weight:normal;
}

/*h4タグ*/
main h4 {
	margin: 0 1rem 1em;
	letter-spacing: 0.1em;
	border-bottom: 1px solid #ccc;
	padding-left: 0.5rem;
	font-size:1.2em;
    line-height: 28px;
}
main h4.hlb {
	border-left: 5px solid #13baa8;	
}

main h4 span
,main h3 span{
	font-size: 0.8em;
    font-weight: normal;
    color: #666;
    display: block;
    line-height: 20px;
}

/*pタグ*/
main p {
	margin: 0 1rem 1rem;	/*pの外側にとるスペース。*/
}

/*微調整*/
main p + p {
	margin-top: -1rem;	/*段落が続いた場合に、少し上に詰める。*/
}


/*subブロック設定--------------*/
.sub h3::before {border: none;padding: 0;}
/*ブロック内のh3タグ*/
.sub h3 {
	margin: 0;border: none;
	font-weight: normal;
	background: #5683d6;	/*背景色*/
	color: #fff;			/*文字色*/
	text-align: center;
	padding: 0.5em;
}
.sub h3 a {color: inherit;}

.sub h3.btn {
	padding: 0em;
}
.sub h3.btn a{
	display:block;
	padding: 0.5em;
	text-decoration: none;
	background: #ff7e00;
	line-height: 1.4em;
}

/*サブメニュー設定--------------*/
/*サブメニューブロック全体*/
.submenu {
	padding: 0;
	margin: 0 0 1rem;
}

/*メニュー１個あたり*/
.submenu li {
	border-bottom: 1px solid rgba(0,0,0,0.1);	/*下線の幅、線種、色。*/
}
.submenu a {
	display: block;
	text-decoration: none;
	background: #fff;		/*背景色*/
	padding: 0.2rem 1rem;	/*上下、左右へのメニュー内の余白*/
}
.sidetbl {
	margin: 0 auto 0rem !important;
}
.sidetbl th {
	width: 60% !important;
	padding: 0 !important;
}
.sidetbl a {
	text-decoration: none;
	display: block;
	padding: 10px 6px !important;
}
.sidetbl a:hover {
	background: #0000FF;		/*背景色*/
	color:#FFF;
}
.sidetbl td {
	width: 20% !important;
	background: #fff;		/*背景色*/
	border-left: 1px solid #999;
	text-align:center;
}
.f-middle-blk .sidetbl td
,.f-middle-b .sidetbl td{
	background: none;		/*背景色*/
	color:#FFF;
}
.f-middle-blk .submenu a
,.f-middle-b .submenu a{
	background: none;		/*背景色*/
	color:#FFF;
	border-left: 1px solid #FFF;
	border-right: 1px solid #FFF;
	border-bottom: 1px solid #FFF;
}

/*アイコン（Font Awesome）*/
.submenu a::before
,#footermenu a::before {
	transition: 0.3s;
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
	content: "\f0da";		/*使いたいアイコン名をここで指定。*/
	color: #00E6E6;			/*アイコンの色*/
	padding-right: 0.8em;	/*アイコンとテキストの間の余白*/
	font-weight: bold;		/*この設定がないとアイコンが出ない場合あり*/
}

#footermenu li{
	color:#fff;
}
#footermenu li.secound a::before {
	content: "┗";
}
#footermenu li.title2 a::before {
	padding-right:0;
	content: "";
}
#footermenu li.title2 a{
	font-size:2em;
	font-weight: bold;
}

/*マウスオン時のアイコン設定*/
.submenu a:hover::before {
	color: #5683d6;			/*アイコンの色*/
}


/*box1設定（このテンプレートでは、2カラム時のsubブロックでのみ使用）--------------*/
/*ボックス全体の設定*/
.box1 {
	background: rgba(0,0,0,0.05);	/*背景色。0,0,0は黒*/
	padding: 10px;					/*ボックス内の余白*/
	border-radius: 5px;				/*角を丸くする指定*/
	margin-bottom: 1rem;			/*ボックスの下に空けるスペース*/
}

/*box1内で使った場合、下のマージンをなくす*/
.sub .box1 .submenu {
	margin-bottom: 0;
}



/*フッターのコンテンツ（住所やマップが入っているブロック）--------------*/
/*ブロック全体*/
#footer-contents {
	background: #5683D6;	/*背景色*/
	color: #fff;		/*文字色*/
	padding: 50px 3%;	/*上下、左右へのボックス内の余白*/
}
#footer-contents h3{
	line-height: 1.5em;
}
#footer-contents a {
	color: inherit;
}

/*左側のブロック*/
#footer-contents .left {
	margin-bottom: 50px;	/*下に空けるスペース*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
	
	#footer-contents {
		display: flex;					/*flexボックスを使う指定*/
		justify-content: space-between;	/*並びかたの種類の指定*/
		align-items: center;			/*垂直揃えの指定。天地中央に配置*/
	}
	
	/*左側のブロック*/
	#footer-contents .left {
		margin-bottom: 0;	/*下のマージンをリセット*/
		width: 50%;			/*幅。leftとrightで合計100*/
	}
	#footer-contents .right {
		width: 50%;			/*幅。leftとrightで合計100*/
		padding-left: 3%;	/*左側に空ける余白。左右ブロックの間の隙間*/
	}

	}/*画面幅900px以上の追加指定ここまで*/


/*テーブル（week）footer-contents内で使っています。--------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.week caption {
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	border-bottom: none;	/*下線だけ消す*/
	background: #2B67D6;		/*背景色*/
	padding: 0.5rem 1rem;	/*caption内の余白。*/
}

/*weekテーブルブロック設定*/
.week {
	width: 100%;
	table-layout: fixed;
	text-align: center;	/*テーブル内のテキストをセンタリング*/
}
.week, .week td, .week th {
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色。*/
}


/*footer-contents内のマップ。レスポンシブ--------------*/
.iframe-box {
	width: 100%;
	height: 0;
	padding-top: 56.25%;	/*マップの高さ*/
	position: relative;
	overflow: hidden;
}
.iframe-box iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}


/*フッターメニュー設定--------------*/
/*ボックス全体の設定*/
#footermenu {
	background: #2B67D6;	/*背景色*/
	color: #ccc;		/*文字色*/
	font-size: 0.8em;	/*文字サイズ。*/
	padding: 20px 3%;	/*上下、左右へのボックス内の余白*/
	display: flex;		/*flexボックスを使う指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	align-items: flex-start;		/*垂直揃えの指定。上に配置*/
}

/*ボックス内のリンクテキスト設定*/
#footermenu a {
	text-decoration: none;
	color: inherit;
}

/*ulタグ（メニューの１列あたり）*/
#footermenu ul {
	margin: 0;list-style: none;
	padding: 0 0.3rem;
	flex: 1;
}

/*メニューの見出し(title)*/
#footermenu .title {
	font-weight: bold;		/*太字にする*/
	color: #FFF;			/*文字色*/
	padding-bottom: 5px;	/*下に空けるスペース*/
}


/*フッター設定--------------*/
footer {
	font-size: 1.0rem;		/*文字サイズ。*/
	background: #004BD6;		/*背景色*/
	color: #fff;			/*文字色*/
	text-align: center;		/*内容をセンタリング*/
	padding: 20px;			/*ボックス内の余白*/
}

/*リンクテキスト*/
footer a {color: inherit;text-decoration: none;}

/*著作部分*/
footer .pr {display: block;}


/*「お知らせ」ブロック--------------*/
/*お知らせブロック*/
.new {
	margin: 0;
	padding: 0 1rem;	/*上下、左右へのボックス内の余白*/
		display: flex;		/*flexボックスを使う指定*/
		flex-wrap: wrap;	/*折り返す指定*/
		max-height: 150px;
	    overflow: auto;
}

/*日付(dt)、記事(dd)共通設定*/
.new dt,
.new dd {
	padding: 5px 0;		/*上下、左右へのボックス内の余白*/
    line-height: 1.2em;
}
.new dt
	font-weight:bold;
}

/*日付の横のマーク（共通設定）*/
.new dt span {
	display: none;	/*小さな端末では非表示*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	/*お知らせブロック*/
/*	.new {
		display: flex;
		flex-wrap: wrap;
		max-height: 150px;
	    overflow: auto;
	}*/

	/*日付(dt)設定*/
	.new dt {
		width: 14em;	/*幅。*/
		display: flex;	/*flexボックスを使う指定*/
		justify-content: space-between;	/*日付とアイコンをそれぞれ端に寄せる*/
	}
	
	/*日付の横のマーク（共通設定）*/
	.new dt span {
		display: inline-block;	/*表示させる*/
		width: 7em;				/*幅。7文字(em)分。*/
		background: #999;		/*背景色*/
		color: #fff;			/*文字色*/
		font-size: 0.8em;		/*文字サイズを親要素の80%に。*/
		text-align: center;		/*文字をセンタリング*/
		margin-right: 1em;		/*アイコンの右側に空けるスペース*/
		align-self: flex-start;	/*高さを間延びさせない指定*/
		line-height: 1.8;		/*行間を少し狭く*/
		position: relative;top: -0.1em;	/*上下の配置バランスの微調整*/
		border-radius: 2px;		/*角を丸くする指定*/
	}

	/*icon-bg1設定。*/
	.new dt span.icon-bg1 {
		background: #cd0000;	/*背景色*/
	}

	/*icon-bg2設定。*/
	.new dt span.icon-bg2 {
		background: #006acd;	/*背景色*/
	}

	/*icon-bg3設定。*/
	.new dt span.icon-bg3 {
		background: #1b7a1e;	/*背景色*/
	}

	/*記事(dd)設定*/
	.new dd {
		width: calc(100% - 14em);	/*「14em」は上の「.new dt」のwidthの値*/
	}

	}/*画面幅900px以上の追加指定ここまで*/


/*.listブロック共通--------------*/
.list {
	position: relative;	/*子要素のアイコンを絶対配置する為の設定*/
}

/*ボックス内のアイコン*/
.list .list-icon {
	font-size: 0.6rem;		/*文字サイズ*/
	background: #ff0000;	/*背景色*/
	color: #fff;			/*文字色*/
	width: 50px;			/*幅*/
	line-height: 50px;		/*高さ*/
	border-radius: 50%;		/*角丸のサイズ。円形になります。*/
	text-align: center;		/*テキストをセンタリング*/
	position: absolute;		/*親のブロックのrelative（この場合は.list）に対して絶対配置*/
	left: -10px;			/*listブロックに対して左からの配置場所の指定*/
	top: -10px;				/*listブロックに対して上からの配置場所の指定*/
}

/*figure画像*/
.list figure {
	margin-bottom: 2rem;	/*下に空けるスペース。２文字分。*/
}


/*３列タイプのボックス--------------*/
/*ボックス１個あたり*/
.list-grid .list {
	margin-bottom: 30px;	/*上下間に空けるスペース*/
	padding: 20px;			/*ボックス内の余白*/
	background: #fff;		/*背景色*/
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1);	/* 影*/
	z-index: 99;
}

.f-middle-blk .list-grid .list
,.f-middle-b .list-grid .list {
	background: none;		/*背景色*/
	color:#FFF;
	border: 1px solid #FFF;
}

.f-middle-y .list-grid .list {
	background: none;		/*背景色*/
}

/*dl（下のdtとddを囲むブロック）*/
.list-grid .list dl {
	height: 10em;	/*高さ*/
	overflow: auto;	/*自動でスクロールバー*/
}

/*dt（タイトル、日付が入っている所）*/
.list-grid .list dl dt {
	color: #333;		/*文字色*/
	font-weight: bold;	/*太字にする*/
}

.f-middle-blk .list-grid .list dl dt
,.f-middle-b .list-grid .list dl dt{
	color:#FFF;
}

/*dd（サンプルテキストが入っている所）*/
.list-grid .list dl dd {
	margin-bottom: 0.5em;	/*下に空けるスペース*/
}
.list-grid.c1 .list dl dd {
	margin-left: 1.5em;	/*下に空けるスペース*/
	margin-bottom: 0.5em;	/*下に空けるスペース*/
}
.list-grid.c2 .list dl dd {
	margin-left: 0em;	/*下に空けるスペース*/
	margin-bottom: 0em;	/*下に空けるスペース*/
}
.list-grid.c2 .list dl dd::before {
	transition: 0.3s;
	font-family: "Font Awesome 5 Free";	/*Font Awesome指定*/
	content: "\f0da";		/*使いたいアイコン名*/
	color: #00E6E6;			/*アイコンの色*/
	padding-right: 0.8em;	/*アイコンとテキストの間の余白*/
	font-weight: bold;		/*設定がないと出ない場合あり*/
}
.list-grid.c2 .list dl dt {
   background-image:url(../images/pdf.png);  /* 画像のURLを指定       */
    background-repeat:  no-repeat;                         /* 画像の繰り返しを指定  */              
    background-position: left center;                    /* 画像の横・縦の位置を指定*/
	padding-left:2em;
}

/*ボックス内のh4タグ*/
.list-grid .list h4 {
	margin: 1em 0 15px;
/*	padding: 1rem;	/*余白。１文字分。*/
}

/*ボックス内のh4タグ内のiタグ（アイコンの事）*/
.list-grid .list h4 i {
	transform: scale(1.5);	/*デフォルトの1.5倍に*/
	margin-right: 1rem;		/*右側に空けるスペース。*/
}



/*タイトルの背景色バリエーション（共通）*/
.bg-color0, .bg-color1, .bg-color2, .bg-color3, .bg-color4, .bg-color5, .bg-color6
, .bg-color7, .bg-color8, .bg-color9, .bg-color10, .bg-color11 {
	color: #fff;	/*文字色*/
	margin-bottom: 1rem !important;	/*下に空けるスペース*/
}
.bg-color0 a, .bg-color1 a, .bg-color2 a, .bg-color3 a, .bg-color4 a, .bg-color5 a, .bg-color6 a
, .bg-color7 a, .bg-color8 a, .bg-color9 a, .bg-color10 a, .bg-color11 a {
	display: block;
	color: inherit;
	padding: 0.8rem;
    text-decoration: none;
}

/*bg-color0への追加指定*/
.bg-color0 {
	background: #5683d6 !important;	/*背景色*/
}
/*bg-color1への追加指定*/
.bg-color1 {
	background: #ff9a18 !important;	/*背景色*/
}
/*bg-color2への追加指定*/
.bg-color2 {
	background: #189aff !important;	/*背景色*/
}
/*bg-color3への追加指定*/
.bg-color3 {
	background: #dd3d8c !important;	/*背景色*/
}
/*bg-color4への追加指定*/
.bg-color4 {
	background: #6f3eb9 !important;	/*背景色*/
}
/*bg-color5への追加指定*/
.bg-color5 {
	background: #1b7a1e !important;	/*背景色*/
}
/*bg-color6への追加指定*/
.bg-color6 {
	background: #7a3a1b !important;	/*背景色*/
}
/*bg-color7への追加指定*/
.bg-color7 {
	background: #000080 !important;	/*背景色*/
}
/*bg-color8への追加指定*/
.bg-color8 {
	background: #dc143c !important;	/*背景色*/
}
/*bg-color9への追加指定*/
.bg-color9 {
	background: #6b8e23 !important;	/*背景色*/
}
/*bg-color10への追加指定*/
.bg-color10 {
	background: #9400d3 !important;	/*背景色*/
}
/*bg-color11への追加指定*/
.bg-color11 {
	background: #a0522d !important;	/*背景色*/
}


/*ボックス内のpタグ*/
.list-grid .list p {
	margin: 0;
	line-height: 1.5em;
}

/*ボックス内のfigure画像*/
.list-grid.c1 .list figure
,.list-grid.c3 .list figure {
	float: right;
    width: 25%;
	margin-left: 1rem;
/*	margin-top: 2.5rem;*/
	margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
	height: 100%;
    text-align: center;
}
/*ボックス内のfigure画像*/
.list-grid.c1 .list .img figure {
    width: 17%;
	margin-right: 0.5rem;
}
/*ボックス内のfigure画像*/
.list-grid.c1 .list .img5 figure {
    width: 19%;
	margin-right: 0.5rem;
}
/*ボックス内のfigure画像*/
.list-grid.c2 .list figure {
	float: right;
    width: 20%;
	margin-right: 1rem;
	margin-bottom:0;
}
/*ボックス内のfigure画像*/
.list-grid.c3 .list figure {
    width: 30%;
}


	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	/*listブロック全体を囲むブロック*/
	.list-grid {
		display: flex;		/*flexボックスを使う指定*/
		flex-wrap: wrap;	/*折り返す指定*/
	}

	/*１個あたりのボックス設定*/
	.list-grid .list {
		width: 32%;			/*幅。３列になります。*/
		margin-right: 2%;	
	}
	
	/*1カラムにしたい場合*/
	.list-grid.c1 .list
	,.list-grid.c3 .list {
		width: 100%;
		margin-right: 0;
	}
	/*1カラムにしたい場合のdl（dtとddを囲むブロック）*/
	.list-grid.c1 .list dl
	,.list-grid.c3 .list dl {
		height: auto;	/*高さ*/
		overflow: auto;	/*自動でスクロールバー*/
	}

	/*2カラムにしたい場合*/
	.list-grid.c2 .list {
		width: 49%;
		margin-right: 1% !important;
	}
	/*2カラムにしたい場合のdl（dtとddを囲むブロック）*/
	.list-grid.c2 .list dl {
		height: 7.5em;	/*高さ*/
	}

	/*3の倍数目のボックスの右側のマージンをなくす*/
	.list-grid .list:nth-of-type(3n) {
		margin-right: 0;
	}

	/*ボックス内のtextブロック*/
	.list-grid .list .text {
		flex: 1;
	}
	/*ボックス内のテキスト
	.list-grid.c1 .list .text2 dl dd {
		width: 12%;
	    margin-right: 0.5rem;
	    float: left;
	}*/

	}/*画面幅900px以上の追加指定ここまで*/


/*btnの設定（「btn1」と「btn2」）--------------*/
/*ボタン共通*/
a.btn1, a.btn2 {
	display: inline-block;text-decoration: none;
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くとる*/
	border-radius: 3px;		/*角を丸くする指定*/
	padding: 0.3rem 2rem;	/*上下、左右へのボタン内の余白*/
	box-shadow: 1px 2px 3px rgba(0,0,0,0.2);	/*ボックスの影。*/
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*iタグ共通（アイコンの事）*/
a.btn1 i, a.btn2 i {
	margin-left: 20px;
}

/*btn1の追加指定*/
a.btn1 {
	background: #fff;	/*背景色*/
	color: #444;		/*文字色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
}

/*btn1内のiタグ（アイコンの事）*/
a.btn1 i {
	color: #5683d6;	/*文字色*/
}

/*btn2の追加指定*/
a.btn2 {
	background: #5683d6;	/*背景色*/
	color: #fff;			/*文字色*/
}


/*スライドショー（slickを使用）--------------*/
/*画像を囲むブロック*/
.mainimg {
	margin-bottom: 80px;	/*画像の下に空けるスペース*/
	padding-top: 132px;
}

/*丸いページナビボタン全体を囲むブロック*/
ul.slick-dots {
	margin:0;padding: 0;
	line-height: 1;
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: -30px;	/*下からの配置場所指定。*/
}

/*丸いページナビボタン１個あたりの設定*/
ul.slick-dots li {
	display: inline-block;
	margin: 0 10px;
	cursor: pointer;
}

/*buttonタグ*/
ul.slick-dots li button {
	border: none;padding: 0;
	display: block;
	text-indent: -9999px;	/*デフォルトで文字が出るので画面の外に追い出す指定*/
	width: 12px;			/*ボタンの幅*/
	height: 12px;			/*ボタンの高さ*/
	border-radius: 50%;		/*丸くする指定*/
	cursor: pointer;		/*hover時にpointer*/
	background: #ccc;		/*背景色。白。*/	
}

/*buttonのアクティブ時（現在表示されている画像を示すボタン）*/
ul.slick-dots li.slick-active button {
	background: #5683d6;	/*色*/
}
p.brd{
	text-decoration: underline;
}
.sepa{
	border-top: 1px solid #999;
}
.sepa li{
	padding:6px 10px;
	border-bottom: 1px solid #999;
}
.sepa li:nth-child(2n+1)
,.sepa tr:nth-child(2n+1){
	background: #eee;
}

/*開く＆閉じる--------------*/
#d1t,#d2t,#d3t,#d4t{
margin-bottom: 2rem;
}
#d1t ul
,#d2t ul
,#d3t ul
,#d4t table{
    margin:0;
}
#d1t .dropdown
,#d2t .dropdown
,#d3t .dropdown
,#d4t .dropdown{
    display: none;
}
#d1t .more-button
,#d2t .more-button
,#d3t .more-button
,#d4t .more-button{
    color: blue;
    text-decoration: underline;
    float: right;
    display: block;
position: relative;
    top: -50px;
    right: 10px;
}
#d4t .more-button{
    top: 0px;
}
#d1t .more-button::before
,#d2t .more-button::before
,#d3t .more-button::before
,#d4t .more-button::before{
    content: "もっと見る";
}

#d1t input[type="checkbox"]#trigger1
,#d2t input[type="checkbox"]#trigger2
,#d3t input[type="checkbox"]#trigger3
,#d4t input[type="checkbox"]#trigger4{
    display: none;
}
#d1t input[type="checkbox"]#trigger1:checked ~ .dropdown
,#d2t input[type="checkbox"]#trigger2:checked ~ .dropdown
,#d3t input[type="checkbox"]#trigger3:checked ~ .dropdown
,#d4t input[type="checkbox"]#trigger4:checked ~ .dropdown{
	border-top: 0px solid #999;
    display: block;
}
#d4t input[type="checkbox"]#trigger4:checked ~ .dropdown{
    display: inline-table;
}
#d1t input[type="checkbox"]#trigger1:checked ~ .more-button::before
,#d2t input[type="checkbox"]#trigger2:checked ~ .more-button::before
,#d3t input[type="checkbox"]#trigger3:checked ~ .more-button::before
,#d4t input[type="checkbox"]#trigger4:checked ~ .more-button::before{
    content: "閉じる";
}

/*FAQ--------------*/
/*FAQボックス全体*/
.faq {
	padding: 0 1rem;	/*上下、左右へのボックス内の余白*/
}

/*質問*/
.faq dt {
	border-radius: 3px;		/*枠を角丸にする指定*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	background: #fff;		/*背景色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	text-indent: -2rem;				/*テキストのインデント。*/
	padding: 5px 1em 5px 3em;		/*ボックス内の余白。*/
}

/*アイコン（Font Awesome）*/
.faq dt::before {
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
    content: "\f059";	/*アイコンのコード*/
	color: #5683d6;		/*アイコンの色*/
	padding-right: 1rem;	/*アイコンとテキストとの間のスペース*/
}

/*回答*/
.faq dd {
	padding: 5px 1rem 30px 3rem;		/*ボックス内の余白**/
}

/*opencloseを適用した要素のカーソル*/
.openclose {
	cursor: pointer;	/*カーソルの形状。*/
}


/*トップページの「キャンペーン中」ボタン--------------*/
#message a {
	text-decoration: none;display: block;
	writing-mode: vertical-rl;
	text-orientation: upright;
	background: #5683d6;/*背景色*/
	color: #fff;		/*文字色*/
	position: fixed;	/*スクロールしてもボタンが移動しない指定。*/
	z-index: 1;
	right: 0px;			/*ボタンの右からの配置場所指定*/
	top: 200px;			/*ボタンの上からの配置場所指定*/
	padding: 20px 15px;	/*ボタン内の余白。上下、左右。*/
	border-radius: 10px 0px 0px 10px;	/*角を丸くする指定。*/
	letter-spacing: 0.1rem;	/*文字間隔を少しだけ広く*/
}

/*ふきだしアイコン*/
#message i {
	transform: scale(1.3);	/*1.3倍に*/
	margin-bottom: 10px;	/*下に空ける余白*/
}


/*テーブル（ta1）--------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	font-weight: bold;		/*太字に*/
	padding: 10px 5px;		/*上下、左右へのボックス内の余白。*/
	background: #555;		/*背景色*/
	color: #fff;			/*文字色*/
	margin-bottom: 15px;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*ta1テーブルブロック設定*/
.ta1,.ta3 {
	border-top: 1px solid #999;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;
	margin: 0 auto 1rem;		/*テーブルの下に空けるスペース*/
}

/*ta2テーブルブロック設定*/
.ta2 {
	border-top: 1px solid #999;	/*テーブルの一番上の線。幅、線種、色*/
}
.ta3 {
	width: 65%;
	margin: 1rem 0 1rem;		/*テーブルの下に空けるスペース*/
}

/*tr（１行分）タグ設定*/
.ta1 tr,.ta2  tr,.ta3  tr{
	border-bottom: 1px solid #999;	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td
,.ta2 th, .ta2 td
,.ta3 th, .ta3 td {
	padding: 10px 5px;		/*上下、左右へのボックス内の余白。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。*/
}

td span{
	padding:4px 0px 3px;
	display: table-cell;
}
td.vtop{
	vertical-align: top;
}
/*td aの設定*/
.ta1 td a{
	color:blue;
}
.f-middle-b .ta1 td a
,.f-middle-blk .ta1 td a{
	color:aqua;
}

/*th（左側）のみの設定*/
.ta1 th,.ta2 th,.ta3 th {
	width: 30%;			/*幅*/
	text-align: center;	/*中央揃え*/
	background: #eee;	/*背景色*/
}
.f-middle-b .ta1 th
,.f-middle-blk .ta1 th
,.f-middle-b .ta3 th
,.f-middle-blk .ta3 th {
	background: #004BD6;	/*背景色*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		/*テーブル１行目に入った見出し部分（※caption）*/
		.ta1 caption {
			padding: 5px 15px;		/*上下、左右へのボックス内の余白*/
		}

		/*th（左側）、td（右側）の共通設定*/
		.ta1 th, .ta1 td
		,.ta2 th, .ta2 td
		,.ta3 th, .ta3 td {
			padding: 10px 15px;		/*上下、左右へのボックス内の余白*/
			line-height: 1.4em;
		}

		/*th（左側）のみの設定*/
		.ta1 th {
			width: 20%;		/*幅*/
		}
		.ta2 th {
			width: 50%;			/*幅*/
		}
		/*th（左側）のみの設定*/
		.ta3 th {
			width: 25%;		/*幅*/
		}

	}/*画面幅900px以上の追加指定ここまで*/


/*PAGE TOP（↑）設定--------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5em;	/*文字サイズ*/
	background: rgba(0,0,0,0.2);	/*背景色。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}


/*その他--------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #ff0000 !important;}
.color-theme, .color-theme a {color: #5683d6 !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 98%;display: block;}
.wl {width: 98%;display: block;}
.mt30 {margin-top: 30px !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #eee;border: 1px solid #ccc; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 3em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.img {margin: 0 0 1rem;}
.block {display: block !important;}
main .hr
,main .hr2 {
    font-size: 22px;
    font-weight: bold;
	line-height: 1.2em;
}
main .hr span
,main .hr2 span{
    font-weight: normal;
    color: #666;
    display: block;
}

	/*画面幅1200px以上の追加指定*/
	@media screen and (min-width:1200px) {
		main .hr
		,main .hr2 {
			float: right;
		    margin-top: -3.0em;
			width: 55%;
		}
		main .hr2 {
			width: 65%;
		}

		main .hr span
		,main .hr2 span{
			font-size: 0.8em;
		}
	}/*画面幅1200px以上の追加指定ここまで*/

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		.ws {width: 48%;display: inline;}
		.sh {display: none;}
		.pc {display: block;}
	}/*画面幅900px以上の追加指定ここまで*/

	/*画面幅1200px以下の追加指定*/
	@media screen and (max-width:1200px) {
		main .hr span, main .hr2 span {
		    line-height: 1em !important;
		}

		main .hr
		,main .hr2 {
			float: none !important;
		    margin-top: 0px !important;
			width: 100% !important;
		}
	}/*画面幅120px以下の追加指定ここまで*/

	/*画面幅1600px以上の追加指定*/
	@media screen and (min-width:1600px) {
		main .hr
		,main .hr2 {
			width: 40%;
		}
		main .hr2 {
			width: 50%;
		}

	}/*画面幅1600px以上の追加指定ここまで*/