@charset "utf-8";

/* CSS id と class の記述方法  id名を「 #id名 」 class名を「 .class名 」*/

/* PC用のcss============================================================*/
/*ウィンドウ幅が767px以上の場合に適用*/
@media screen and (min-width: 767px) { 
	
	/*スマホ用メニューを表示させない */
	#nav-drawer {display: none;}

	/*ヘッダー設定  */
	header {
		position: relative;			/*相対位置*/
		position: fixed;			/*絶対位置*/
		font-size: 15px;			/*文字サイズ*/
		top: 0px;					/*上からの配置場所指定*/
		left: 0px;					/*左からの配置場所指定*/
		width: 100%;				/*幅*/
		height:120px;
		background-color:#000000;	/*黒*/
		text-align: left;			/*テキストを中央*/
		line-height: 1.2;			/*行間*/
		/*opacity: .8;				/*要素の透明度 0透明 1不透明*/
		z-index: 2;
	}

	/* メニューのdiv設定 */
	#menu-h {
		/*overflow: auto;					/*スクロールバーを表示*/
		position: fixed;					/*スクロールしても移動しない指定*/
		left: 0px;							/*左からの場所指定*/
		top: 0px;							/*上からの場所指定*/
		width: 100%;						/*ブロックの幅*/
		height: 120px;						/*ブロックの高さ*/
		margin: 0px;						/*ブロックの余白*/
		text-align: left;					/*文字をセンタリング*/
		background: #000000;				/*背景色（古いブラウザ用）黒 */
		/*background: rgba(225,140,0,1);	/*背景色。76,94,34はRGB値での色指定。0.8は80%色が出た状態の事。*/
		/*	box-shadow: 0px 0px 30px rgba(0,0,0,0.5) inset;	/*テキストの影。右へ、下へ、ぼかす幅、0,0,0は黒の事で0.5は色が50%出た状態。insetは内側へ向けて影を出す指定。*/
	}

	/*メニュー用のリストを横並びにする */
	#menu-h ul li{ 	
		display: inline;
	} 

	/*メニュー１個あたりの設定*/
	#menu-h li a {
		/*display:  block; */
		color: #fff;
		text-decoration: none;		/*リンクの下線無し*/
		padding: 5px 10px;			/*上下、左右への余白*/
		line-height: 1.5;			/*行間*/
	}

	/*マウスオン時の設定*/
	#menu-h li a:hover {
		/*background: #ff4500;		/*背景色*/
		color: blue;
		overflow: auto;				/* ボックスに収まらない時の表示をユーザーに依存する。スクロールバーなどが表示される */
	}

	/*topimgの設定  */
	.topimg img {
		width: 100%;				/*widthを固定にするとレスポンシブ に対応しなくなる必ず100%*/
		background-color: #fff;
		/*margin: 120px 0px 50px 0px;*/
		margin: 120px auto 0;		/*上に余白を120px ヘッダーエリアが120pxだから*/
		padding-bottom: 0px;		/*フッターを50pxと指定しているから*/
	}
	
	/*フロート ----------------------------------------------------------------- */

	/*その他　通常用htmlのフロート指定 幅100%高さ自動フロート*/
	.fl100 {
		/*background:#ff8c00; darkorange*/
		width: 100%;
		height: auto;
		margin:0px;
		float: left;
		word-wrap:break-word;			/*テキストがはみ出ないようにする*/
	}

	/*その他　通常用htmlのフロート指定 幅90%高さ自動フロート*/
	.fl90 {
		/*background:#ff8c00; darkorange*/
		width: 90%;
		height: auto;
		margin:10px;
		float: left;
		word-wrap:break-word;			/*テキストがはみ出ないようにする*/
	}

	/*その他　通常用htmlのフロート指定 幅70%高さ自動フロート*/
	.fl70 {
		/*background:#ff8c00; darkorange*/
		width: 70%;
		height: auto;
		margin:10px;
		float: left;
		word-wrap:break-word;			/*テキストがはみ出ないようにする*/
	}

	/*その他　通常用htmlのフロート指定 幅65%高さ自動フロート*/
	.fl65 {
		/*background:#ff8c00; darkorange*/
		width: 65%;
		height: auto;
		margin: 20px;
		float: left;
		word-wrap:break-word;			/*テキストがはみ出ないようにする*/
	}

	/*その他　通常用htmlのフロート指定 幅65%高さ自動フロート*/
	.fl60 {
		/*background:#ff8c00; darkorange*/
		width: 60%;
		height: auto;
		margin: 20px;
		float: left;
		word-wrap:break-word;			/*テキストがはみ出ないようにする*/
	}

	/*その他　通常用htmlのフロート指定 幅45%高さ自動フロート*/
	.fl48 {
		/*background:#ff8c00; darkorange*/
		width: 48%;
		height: auto;
		margin:10px;
		float: left;
		word-wrap:break-word;			/*テキストがはみ出ないようにする*/
	}

	/*その他　通常用htmlのフロート指定 幅45%高さ自動フロート*/
	.fl45 {
		/*background:#ff8c00; darkorange*/
		width: 45%;
		height: auto;
		margin:10px;
		float: left;
		word-wrap:break-word;			/*テキストがはみ出ないようにする*/
	}

	/*その他　通常用htmlのフロート指定 幅40%高さ自動フロート*/
	.fl40 {
		/*background:#ff8c00; darkorange*/
		width: 40%;
		height: auto;
		margin:10px;
		float: left;
		word-wrap:break-word;			/*テキストがはみ出ないようにする*/
	}

	/*その他　通常用htmlのフロート指定 幅28%高さ自動フロート*/
	.fl30 {
		/*background:#ff8c00; darkorange*/
		width: 30%;
		height: auto;
		margin:10px;
		float: left;
		word-wrap:break-word;			/*テキストがはみ出ないようにする*/
	}

	/*その他　通常用htmlのフロート指定 幅28%高さ自動フロート*/
	.fl29 {
		/*background:#ff8c00; darkorange*/
		width: 29%;
		height: auto;
		margin:10px;
		float: left;
		word-wrap:break-word;			/*テキストがはみ出ないようにする*/
	}

	/*その他　通常用htmlのフロート指定 幅28%高さ自動フロート*/
	.fl28 {
		/*background:#ff8c00; darkorange*/
		width: 28%;
		height: auto;
		margin:10px;
		float: left;
		word-wrap:break-word;			/*テキストがはみ出ないようにする*/
	}

	/*その他　通常用htmlのフロート指定 幅25%高さ自動フロート*/
	.fl25 {
		/*background:#ff8c00; darkorange*/
		width: 25%;
		height: auto;
		margin:10px;
		float: left;
		word-wrap:break-word;			/*テキストがはみ出ないようにする*/
	}

	/*その他　通常用htmlのフロート指定 幅20%高さ自動フロート*/
	.fl20 {
		/*background:#ff8c00; darkorange*/
		width: 20%;
		height: auto;
		margin:10px;
		float: left;
		word-wrap:break-word;			/*テキストがはみ出ないようにする*/
	}
	
}	
/* PC用のcss END =========================================================== */

/* タブレット用のcss =========================================================*/
/*ウィンドウ幅が最大767pxまでの場合に適用*/
@media screen and (max-width: 767px) {

	/*PC用メニューを非表示にする */
	#menu-h {display: none;} 

	/*フロートをオフにする*/
	#floatnone {
		float:none;
	}

	/*献立htmlのフロート指定 フロート解除後のdivの指定を行う*/
	/*クラス名を同じにして、画面幅で指定を切り替え
	.flkondate {
	width: 90%;
	height: auto;
	margin:10px;
	word-wrap:break-word;			/*テキストがはみ出ないようにする
	}*/

	/*ハンバーガーメニュー =-=-=-=-=-=-=-=-=-=-=-=-=-=-= ここから */
	/*ヘッダーまわりはサイトに合わせて調整してください*/
	header {
		padding:10px;
		background: #000000; /*黒*/
	}

	#nav-drawer {
		position: relative;
	}

	/*チェックボックス等は非表示に*/
	.nav-unshown {
		display:none;
	}

	/*アイコンのスペース*/
	#nav-open {
		display: inline-block;
		width: 30px;
		height: 22px;
		vertical-align: middle;
	}

	/*ハンバーガーアイコンをCSSだけで表現*/
	#nav-open span, #nav-open span:before, #nav-open span:after {
		position: absolute;
		height: 3px;				/*線の太さ*/
		width: 25px;				/*長さ*/
		border-radius: 3px;
		background: #ffffff ;		/*#555;*/
		display: block;
		content: '';
		cursor: pointer;
	}
	#nav-open span:before {
		bottom: -8px;
	}
	#nav-open span:after {
		bottom: -16px;
	}

	/*閉じる用の薄黒カバー*/
	#nav-close {
		display: none;				/*はじめは隠しておく*/
		position: fixed;
		z-index: 99;
		top: 0;						/*全体に広がるように*/
		left: 0;
		width: 100%;
		height: 100%;
		background: #000000;
		opacity: 0;					/*要素の透明度 0透明 1不透明*/
		transition: .3s ease-in-out; 	/*効果（時間的変化）をまとめて指定する際に使用します ease-in-out ゆっくり始まりゆっくり終わる*/
	}

	/*中身*/
	#nav-content {
		overflow: auto;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;							/*最前面に*/
		width: 90%;								/*右側に隙間を作る（閉じるカバーを表示）*/
		max-width: 330px;						/*最大幅（調整してください）*/
		height: 100%;
		background: #000000;					/*背景色 darkorange */
		transition: .3s ease-in-out;			/*滑らかに表示*/
		-webkit-transform: translateX(-105%);
		transform: translateX(-105%);			/*左に隠しておく*/
	}

	/*チェックが入ったらもろもろ表示*/
	#nav-input:checked ~ #nav-close {
		display: block;							/*カバーを表示*/
		opacity: .5;							/*要素の透明度 0透明 1不透明*/
	}

	#nav-input:checked ~ #nav-content {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);				/*中身を表示（右へスライド）*/
		box-shadow: 6px 0 25px rgba(0,0,0,.15);
	}

	/*メニュー１個あたりの設定*/
	#nav-content li a {
		color: #ffffff;
		display:  block;text-decoration: none;
		padding: 5px 5px;						/*上下、左右への余白*/
		line-height: .8;						/*行間*/
	}

	/*マウスオン時と、現在表示中(current)設定*/
	#nav-content li a:hover, 
	#nav-content  li.current a {
		background: #ff4500;					/*背景色*/
		color: #fff;
		overflow: auto;							/* ボックスに収まらない時の表示をユーザーに依存する。スクロールバーなどが表示される */
	}
	/*ハンバーガーメニュー =-=-=-=-=-=-=-=-=-=-=-=-=-=-= ここまで */

	/*topimgの設定  */
	.topimg img {
		width: 100%;					/*widthを固定にするとレスポンシブ に対応しなくなる必ず100%*/
		background-color: #fff;
		/*margin: 120px 0px 50px 0px;*/
		margin: 0px auto 0;				/*上に余白を0px */
		padding-bottom: 0px;			/*フッターを50pxと指定しているから*/
	}

	/*フロート解除*/
	.clear-s{			      
		clear:both;
	}

}	
/* タブレット用のcss END ========================================================== */

/* スマホ用のcss ================================================================= */
/*ウィンドウ幅が最大479pxまでの場合に適用*/
@media screen and (max-width: 479px) {

	/*PC用メニューを非表示にする */
	#menu-h {display: none;} 

	/*フロートをオフにする*/
	#floatnone {
		float:none;
	}

}	
/* スマホ用のcss END =============================================================*/


/*全体の設定 ===================================================================== */

/* htmlの高さ */
body,html {
	/*height: 100%;   jQueryでスクロール量を取得するには、heightの設定は邪魔になる*/
	overflow-x : hidden;				/*スマホで表示した時の横揺れをなくす*/
	-webkit-overflow-scrolling: touch;	/*スマホで表示した時の横揺れをなくす*/
}

/* html bodyの設定 */
body {
	padding: 0px;
	margin: 0px;			/*内側余白 なし	 */
	color: #000;			/*全体の文字色 黒*/
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	
							/*フォント種類*/
	font-size: 22px;		/*文字サイズ*/
	line-height: 1.8;		/*行間*/
	background: #fff;		/*背景の色白*/
}

/* htmlの文系タグの設定 */
/*基本フォントサイズ * パーセント指定 -> 表示文字サイズ です。つまり、基本フォントが12pxの時の84%は10px*/
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form,input,textarea {
	margin: 0px;
	padding: 0px;
	/*font-size: 100%;		/*100%指定なので、上記指定のタグを基本フォントサイズと同じにする指定*/
	/*font-weight: normal;	太字にしない指定 */
}	

video {max-width: 100%;}
iframe {width: 100%;}

/* imgタグの設定 縦方向の揃え位置 vertical-align: middle; 中央揃え */
img {
	border: none;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

/*ロゴの画像の設定*/
.logo img {
	width:200px;
	margin: 10px 5px 5px 20px;	/*上 右 下 左*/
}

/*アイコンのサイズ*/
.icon img {
	display: inline;
	width:30px;
	height:auto;
}

/*SNS表示位置指定*/
.sns_icon {
	display:block;
	text-decoration: none;
	text-align: center:
	zindex: 999;
	position: fixed;	/*絶対位置*/
	width: 190px;		/*divの幅*/
	height: auto;
	top: 10px;
	right:5px;	
}

/*ボックス ------------------------------------------------------------ */

/*Facebook シェアボタン*/
.sh_fb {
	color: #FFF;
	text-align:center;
	font-size: 15px;
	font-weight:bold;
	background-image: linear-gradient(45deg, #87cefa 0%, #00008b 100%);
	border-radius: 50px;
	display: inline-block;
	padding: 3px 10px;		/*上下　左右*/
	margin: 5px;
	text-decoration: none;
}

.sh_fb a {
	color:#fff;
}

/*Twitter シェアボタン*/
.sh_tw {
	color: #fff;
	text-align:center;
	font-size: 15px;
	font-weight:bold;
	background-image: linear-gradient(45deg, #87cefa 0%, #1e90ff 100%);
	border-radius: 50px;
	display: inline-block;
	padding: 3px 10px;		/*上下　左右*/
	margin: 5px;
	text-decoration: none;
}
.sh_tw a {
	color:#fff;
}

/*LINE シェアボタン*/
.sh_ln {
	color: #fff;
	text-align:center;
	font-size: 15px;
	font-weight:bold;
	background-image: linear-gradient(45deg, #adff2f 0%, #008000 100%);
	border-radius: 50px;
	display: inline-block;
	padding: 3px 10px;		/*上下　左右*/
	margin: 5px;
	text-decoration: none;
}
.sh_ln a {
	color:#fff;
}

/*ボックス　ブルーグラデーション*
.box_blgr {
	color: #FFF;
	text-align:center;
	font-weight:bold;
	background-image: linear-gradient(45deg, #87cefa 0%, #1e90ff 100%);
	border-radius: 5px;
	display: inline-block;
	padding: 5px 20px;		/*上下　左右*/
/*	margin: 10px 3px;
}

/*ボックス　レッドグラデーション*
.box_rdgr {
	color: #FFF;
	text-align:center;
	font-weight:bold;
	background-image: linear-gradient(45deg, #fa8072 0%, #ff0000 100%);
	border-radius: 5px;
	display: inline-block;
	padding: 5px 20px;		/*上下　左右*/
/*	margin: 10px 5px;
}

/*ボックス　ライトグレイ
.box01 {
	/*color:#696969;				/*dimgray*/
/*	text-align:left;
	font-size:15px;
	background-color:lightgray;
	height:auto;
  padding: 5px 10px;		/*上下　左右*/
/*  margin: 0px;
  border:solid 1px gray;
}

/*ボックス　上線なし
.box02 {
  /*color:#696969;			/*dimgray*/
/*  text-align:left;
  font-size:15px;
  height:auto;
  padding: 5px 10px;		/*上下　左右*/
/*  margin: 0px;
  border-color:gray;
  border-left-style:solid;
  border-left-width: 1px;
  border-right-style:solid;
  border-right-width:1px;
  border-bottom-style:solid;
  border-bottom-width:1px;
}*/

/*下線 ------------------------------------------------------------ */

/*下線編集用 黒*/
.kasen1 {
	background: linear-gradient(transparent 95%, black 95%);
	font-weight: bold;
	margin-top: 20px;		/*上余白*/
	margin-bottom: 20px;	/*下余白*/
}

/*下線　赤*/
/*.kasen_rd {
	border-bottom: solid 1.5px red;
}*/

/*下線　黒*/
.kasen_bk {
	border-bottom: solid 1.5px black;
}

/*二重下線　赤*/
/*.kasen2_rd {
	border-bottom: double 5px red;
}*/


/*main ============================================================================ */

#main {
	clear: both;		/*左寄せ、または右寄せされた全ての要素に対する回り込みを解除します。*/
	background-color: #fff;
	margin: 20px 20px 20px 20px;	/*上下左右に余白10px*/
	/*padding-bottom: 30px;			/*フッターを30pxと指定しているから*/
}

/*メインコンテンツの段落タグ設定*/
#main p {
	padding: 0px 0px 20px 0px;		/*上、右、下、左への余白*/
}

#main ul {
	padding: 0px 0px 0px 30px;		/*上、右、下、左への余白*/
}

#main a {
	color:#000;
	text-decoration: none;			/*リンクの下線なし*/
}

/*contents ========================================================================== */
#contents {
	/*width: 960px;				/*widthを固定にするとレスポンシブ に対応しなくなる必ず */
	background-color: #fff;		/*背景色白*/
}

/*float class ======================================================================= */

/*フロートを囲み、以下に影響させない命令 */
.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

/*フロート解除*/
.clear{			      
	clear:both;
}

/*画像の設定　丸く切り抜く　親要素に影響されず、画面いっぱいに表示*/
.rsimg100ct img {
	max-width: 100%;
	width:  100%;
	height: 400px;			/* ※縦横を同値に */
	object-fit: cover;
	border-radius: 5%;		/* 角丸半径を50%にする(=円形にする) */
	object-position: left top;
	/*background-position: cneter center;	/* 画像の真ん中を基準に表示 他にも指定可能*/
	/*background-position: left top;  	/* 画像の左上を基準に表示 */
	/*display: inline-block;          /* 複数の画像を横に並べたい場合 */
}

/*画像の設定　丸く切り抜く　親要素に影響されず、画面いっぱいに表示*/
.rsimg100m img {
	width:  100%;
	max-width: 100%;
	height: auto;							/* ※縦横を同値に */
	border-radius: 50%;						/* 角丸半径を50%にする(=円形にする) */
	background-position: center center;		/* 画像の真ん中を基準に表示 他にも指定可能*/
	/*background-position: left top;		/* 画像の左上を基準に表示 */
	/*display: inline-block;				/* 複数の画像を横に並べたい場合 */
}

/*画像の設定　丸く切り抜く　親要素に影響されず、画面いっぱいに表示*/
.rsimg70m img {
	width:  70%;
	max-width: 100%;
	height: auto;       					/* ※縦横を同値に */
	border-radius: 50%;  					/* 角丸半径を50%にする(=円形にする) */
	background-position: center center;		/* 画像の真ん中を基準に表示 他にも指定可能*/
	/*background-position: left top;  		/* 画像の左上を基準に表示 */
	/*display: inline-block;				/* 複数の画像を横に並べたい場合 */
}

/*画像の設定　丸く切り抜く　親要素に影響されず、画面いっぱいに表示*/
.rsimg50m img {
	width:  50%;
	max-width: 100%;
	height: auto;       					/* ※縦横を同値に */
	border-radius: 50%;  					/* 角丸半径を50%にする(=円形にする) */
	background-position: center center;		/* 画像の真ん中を基準に表示 他にも指定可能*/
	/*background-position: left top;  		/* 画像の左上を基準に表示 */
	/*display: inline-block;          		/* 複数の画像を横に並べたい場合 */
}

/*画像の設定　丸く切り抜く　親要素に影響されず、画面いっぱいに表示*/
.rsimg45m img {
	width:  45%;
	max-width: 100%;
	height: auto;       					/* ※縦横を同値に */
	border-radius: 50%;  					/* 角丸半径を50%にする(=円形にする) */
	background-position: center center;		/* 画像の真ん中を基準に表示 他にも指定可能*/
	/*background-position: left top;  		/* 画像の左上を基準に表示 */
	/*display: inline-block;          		/* 複数の画像を横に並べたい場合 */
}

/*画像の設定　丸く切り抜く　親要素に影響されず、画面いっぱいに表示*/
.rsimg40m img {
	width:  40%;
	max-width: 100%;
	height: auto;       					/* ※縦横を同値に */
	border-radius: 50%;  					/* 角丸半径を50%にする(=円形にする) */
	background-position: center center;		/* 画像の真ん中を基準に表示 他にも指定可能*/
	/*background-position: left top;  		/* 画像の左上を基準に表示 */
	/*display: inline-block;          		/* 複数の画像を横に並べたい場合 */
}

/*角丸＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*画像の設定　角を丸く　親要素に影響されず、画面いっぱいに表示*/
.rsimg100km img {
	width:  100%;
	max-width: 100%;
	height: auto;       				/* ※縦横を同値に */
	border-radius: 5%;  				/* 角丸半径を50%にする(=円形にする) */
	background-position: center;		/* 画像の真ん中を基準に表示 他にも指定可能*/
	/*background-position: left top;  	/* 画像の左上を基準に表示 */
	/*display: inline-block;          	/* 複数の画像を横に並べたい場合 */
}

/*画像の設定　角を丸く　親要素に影響されず、画面いっぱいに表示*/
.rsimg90km img {
	width:  90%;
	max-width: 100%;
	height: auto;       				/* ※縦横を同値に */
	border-radius: 5%;  				/* 角丸半径を50%にする(=円形にする) */
	background-position: center;		/* 画像の真ん中を基準に表示 他にも指定可能*/
	/*background-position: left top;  	/* 画像の左上を基準に表示 */
	/*display: inline-block;          	/* 複数の画像を横に並べたい場合 */
}

/*画像の設定　角丸　親要素に影響されず、画面いっぱいに表示*/
.rsimg40km img {
    width:  40%;
	max-width: 100%;
    height: auto;       				/* ※縦横を同値に */
    border-radius: 5%;  				/* 角丸半径を50%にする(=円形にする) */
    background-position: center;		/* 画像の真ん中を基準に表示 他にも指定可能*/
    /*background-position: left top;  	/* 画像の左上を基準に表示 */
    /*display: inline-block;          	/* 複数の画像を横に並べたい場合 */
}

/*画像の設定　親要素に影響されず、画面いっぱいに表示*/
.rsimg100 img {
	width: 100%;
	max-width: 100% ;					/*max-width 表示空間の横幅に合わせて自動調整*/
	height: auto;
	border: none;
	/*vertical-align: middle;*/
}

/*画面サイズの横幅に対して90％の大きさで画像を表示1*/
.rsimg90 img { 
	width: 90%;
	max-width: 100%;
	height: auto; 
	margin:10px;
}

/*画面サイズの横幅に対して80％の大きさで画像を表示1*/
.rsimg80 img { 
	width: 80%;
	max-width: 100%;
	height: auto; 
	margin:10px;
}

/*画面サイズの横幅に対して75％の大きさで画像を表示1*/
.rsimg75 img { 
	width: 75%;
	max-width: 100%;
	height: auto; 
	margin:10px;
}

/*画面サイズの横幅に対して50％の大きさで画像を表示1*/
.rsimg50 img { 
	width: 50%;
	max-width: 100%; 
	height: auto;
	margin:10px;
}

/*画面サイズの横幅に対して40％の大きさで画像を表示 */
.rsimg40 img { 
	width: 40%;
	max-width: 100%; 
	height: auto;
	margin:10px;
}

/*画面サイズの横幅に対して30％の大きさで画像を表示1*/
.rsimg30 img { 
	width: 30%;
	max-width: 100%; 
	height: auto;
	margin:10px;
}

/*フッター設定 ============================================================================ */

.wrapper {
	min-height: 100vh;
	position: relative;			/*←相対位置*/
	padding-bottom: 50px;		/*←footerの高さ*/
	box-sizing: border-box;		/*←全て含めてmin-height:100vhに*/
}

footer {
	z-index: 999;
	clear: both;
	color:#ffffff;				/*白*/
	font-size: 15px;			/*文字サイズ*/
	position: fixed;			/*絶対位置指定*/
	left: 0px;					/*左からの配置場所指定*/
	bottom: 0px;				/*下からの配置場所指定*/
	width: 100%;				/*幅*/
	height:30px;				/*高さ*/
	text-align: center;			/*テキストを中央*/
	line-height: 1.2;			/*行間*/
	background-color:#000000;	/*黒*/
	opacity: 1;					/*要素の透明度 0透明 1不透明*/
}

/*リンクテキスト*/
footer a {
	color:#ffffff;
	text-decoration: none;
}	/* 下線を非表示 */

footer a visited {
	color:#ffffff;
}

/*ページ内リンク ========================================================== */

#pgmenu {
	clear: both;				/*floatで指定された回り込みを解除*/
	font-size: 15px;
	background-color: #fff;
	margin: 0px;
	padding: 5px 5px;
}

/*リストを横並びにする */
#pgmenu ul li{ 	
	display: inline;
} 

#pgmenu a {
	text-decoration: none; 		/*リンクの下線なし*/
}

/*PAGE TOP（↑）設定 ========================================================== */

/*page top css のみ版*/
#page_top{
	width: 40px;
	height: 40px;
	position: fixed;
	right: 0;
	bottom: 30px;
	background: #000;			/*黒*/
	opacity: 0.6;
}

#page_top a{
	position: relative;
	display: block;
	width: 40px;
	height: 40px;
	text-decoration: none;
}

#page_top a::after{
	content: '▲';
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	position: absolute;
	top: 10px;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}

/*ボタン設定 ========================================================== */

/* 角フラットボタン */
.btn-orggr {
	display: inline-block;
	padding: 5px 20px;		/*上下　左右*/
	margin: 10px 3px;
	border-radius: 5px;		/*丸くする場合は25px*/
	text-decoration: none;
	color: #FFF;
	background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
	transition: .4s;
}

.btn-orggr:hover {
	background-image: linear-gradient(45deg, #FFC107 0%, #f76a35 100%);
}

/* 角フラットボタン */
.btn-redgr {
	display: inline-block;
	padding: 5px 20px;		/*上下　左右*/
	margin: 10px 3px;
	border-radius: 5px;
	text-decoration: none;
	color: #FFF;
	background-image: linear-gradient(45deg, #fa8072 0%, #ff0000 100%);
	transition: .4s;
}

.btn-redgr:hover {
	background-image: linear-gradient(45deg, #ffa07a 0%, #dc143c 100%);
}

/*QA設定 ===================================================== */
/* dl dt dd の吹き出し指定 *
.cp_qa *, .cp_qa *:after, .cp_qa *:before {
	font-family: 'FontAwesome', sans-serif;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.cp_qa dt,.cp_qa dd {
	position: relative;
	padding: 0.5em;
	box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
	border-radius: 0.3em;
}

/* dtの設定 *
.cp_qa dt {
	margin: 0 3em 1em 3em;
	background: #ffe4e1;  /* 背景色 */
}

/* ddの設定 *
.cp_qa dd {
	margin: 0 3em 3em 3em;
	background: #e0ffff;	/* 背景色 */
}

/* 吹き出し▶︎ *
.cp_qa dt::before,.cp_qa dd::before{
	position: absolute;
	z-index: 99;
	top: 0.5em;
	display: inline-block;
	width: 0;
	height: 0;
	content: '';
	border-style: solid;
}

/* 質問吹き出し▶︎ *
.cp_qa dt::before {
	left: -0.5em;
	border-width: 5px 8.7px 5px 0;
	border-color: transparent #ffe0b2 transparent transparent;
}

/* 答え吹き出し▶︎ *
.cp_qa dd::before {
	right: -0.5em;
	border-width: 5px 0 5px 8.7px;
	border-color: transparent transparent transparent #b2ebf2;
}

/* ?!アイコン *
.cp_qa dt::after,.cp_qa dd::after {
	font-size: 1.2em;
	position: absolute;
	top: 0;
	color: #ffffff;			/* #ffffff 白*
	border-radius: 50%;		/* ボックスの角を丸める *
	display: inline-block;	/* inline -block 横に並ぶ *
	width: 2em;				/* 幅の指定 *
	height: 2em;			/* 要素の高さ指定 *
	line-height: 1.2em;		/* 行の高さ *
}

/* ?アイコン *
.cp_qa dt::after {
	left: -2.5em;
	margin: 0 0.5em 0 0;
	padding: 0.2em 0.4em;
	content: url(../img21/qa.q.png);	/* 文字や画像の指定  -> '\f128' Font Awesome のチートシートから引用*
	background: #ff0000;	/* 背景色 レッド *
}

/* !アイコン *
.cp_qa dd::after {
	right: -2.5em;
	margin: 0 0 0 0.5em;
	padding: 0.2em 0.55em;
	content: url(../img21/qa.a.png);
	background: #0097a7;
}

/*ブログのdl設定 ===============================================*
.bgsetei dl dt {
	font-weight:bold;
}
.bgsetei dl dd {
	padding-left: 20px;
	padding-bottom: 20px;
}

.bgsetei img {
	width:50px;
	height:auto;
}


/*その他　文字編集 ===============================================*
ul.kome li {
  list-style-type: none;
  text-indent: -1em;
}
ul.kome li:before {
  display: inline;
  content: "※";
}

ul.daiya li {
  list-style-type: none;
  text-indent: -1em;
}
ul.daiya li:before {
  display: inline;
  content: "◆ ";
}

/*フェードイン ==================================================*/
/* cssのみでフェードイン　ここから */
.fadedr02 {
  animation-name: fade;
  animation-duration: 2s;           /*フェード時間秒 */
  animation-iteration-count: 2;     /*フェード回数 */
}

@keyframes fade{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
/* cssのみでフェードイン　ここまで */


/* jQueryを利用 ふわっと　ここから */
.fade01{
  opacity : 0;
  transition: opacity 3s;   /* 3秒かけてフェード*/
}
 
.fade01.view{
  opacity: 1;
}
/* jQueryを利用 ふわっと　ここまで */

/* ページ読み込み時にふわっと ここから */
.fade02{
  opacity : 0;
  transition: opacity 3s;
}
 
.fade02.view{
  opacity: 1;
}
/* ページ読み込み時にふわっと ここまで */

/*下線アニメーション*/

/*下線カラー クリムゾン*/
.Text-Spancr {
  position: relative;
  z-index: 1;
}
.Text-Spancr:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -14px;
  width: 0%;
  height: 4px;
  background: #dc143c;			/*カラー　クリムゾン*/
  z-index: -1;
  transition: all 0.8s;
}
.Text-Spancr.isActive:after {
  width: 100%;
}

/*下線カラー ブラック*/
.Text-Spanbk {
  position: relative;
  z-index: 1;
}
.Text-Spanbk:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -14px;
  width: 0%;
  height: 4px;
  background: #000000;			/*カラー ブラック*/
  z-index: -1;
  transition: all 0.8s;
}
.Text-Spanbk.isActive:after {
  width: 100%;
}

/* END */