@charset "utf-8";

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

/* PC用のcss ===========================================================*/
/*ウィンドウ幅が767px以上の場合に適用*/
@media screen and (min-width: 767px) { 

#nav-drawer {display: none;}		/*スマホ用メニューを表示させない */

/*ヘッダー設定 pc ------------------------------------------- */
header {
	/*position: relative;	/*相対位置*/
	/*position: fixed;		/*絶対位置 D 21.06.13 */  
	font-size: 15px;		/*文字サイズ*/
	top: 0px;				/*上からの配置場所指定*/
	/*bottom: 0px;			/*下からの配置場所指定*/
	left: 5px;				/*左からの配置場所指定*/
	width: 100%;			/*幅*/
	height:100px;
	background-color:#4169e1;
	text-align: left;		/*テキストを中央*/
	line-height: 1.2;		/*行間*/
	opacity: 1;				/*要素の透明度 0透明 1不透明*/
	z-index: 9999;			/*最前面に*/
} 

/* メニューのdiv設定 pc ------------------------------------- */
#menu-h {
	overflow: auto;				/*スクロールバーを表示*/
	font-size: 35px;
	/*position: fixed;			/*スクロールしても移動しない指定 D 21.06.13 */
	left: 0px;					/*左からの場所指定*/
	top: 5px;					/*上からの場所指定*/
	/*bottom: 0px;				/*下からの配置場所指定*/
	width: 100%;				/*ブロックの幅*/
	height: 150px;				/*ブロックの高さ*/
	margin: 0px;				/*ブロックの余白*/
	text-align: left;			/*文字の位置*/
	background: #4169e1;		/*背景色（古いブラウザ用）トマト */
	z-index: 9999;				/*最前面に*/
}

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

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

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

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

/*main pc ---------------------------------------------------------- */

#main {
	clear: both;				/*左寄せ、または右寄せされた全ての要素に対する回り込みを解除します。*/
	position: relative;			/*相対位置 relative 絶対位置 fixed*/
	/*top: 140px;				/*上からの配置場所指定 D 21.06.13 */
	top: 50px;					/*上からの配置場所指定 A 21.06.13 */
	left: 0%;					/*左からの配置場所指定*/
	width: 100%;				/*幅*/
	/*background-color: #fff; 	/*bodyでも背景を白にしている */
	/*background: url(img/bg01.jpg) no-repeat center top/50px;*/
	/*background: url(img/pan.jpg); */
	margin: 0px 0px 0px 0px;	/*上下左右に余白10px*/
	/*padding-bottom: 30px;		/*フッターを30pxと指定しているから*/
}

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

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

#main ol {
	padding: 0px 0px 0px 50px;	/*上、右、下、左への余白 2022.05.01 20pxから50pxに変更*/
}

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

/*contents pc ----------------------------------------------------------------- */

#contents {
	/*width: 960px;	/*widthを固定にするとレスポンシブ に対応しなくなる必ず */
	margin: 10px 10px 10px 10px;	/*上下左右に余白10px*/
	/*background-color: #fff;	/*背景色白 bodyで背景白に指定しているので不要*/
}

#contents01 {
	/*width: 960px;	/*widthを固定にするとレスポンシブ に対応しなくなる必ず */
	margin: 0px 0px 0px 0px;		/*外側 上下左右に余白*/
	padding: 10px 10px 10px 10px;	/*内側 上下左右に余白*/
	background-color: #fff;			/*背景色白 bodyで背景白に指定している*/
}

#contents02 {
	/*width: 960px;	/*widthを固定にするとレスポンシブ に対応しなくなる必ず */
	margin: 0px 0px 0px 0px;		/*外側 上下左右に余白*/
	padding: 10px 10px 10px 10px;	/*内側 上下左右に余白*/
	/*color: #f5f5f5;  テキストカラー
	text-shadow: 2px 2px 3px #000000; 
	/*-color: #fff;			/*背景色白 bodyで背景白に指定している*/
}


/*フロート ----------------------------------------------------------------- */

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

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


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

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

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

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


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

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


}  /* @media END */

/* PC用のcss END =========================================================== */

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

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

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

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

#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 ;  	/*文字色*/
  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: #4169e1;
  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: #4169e1;				/*背景色*/
  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: #b0c4de;			/*背景色*/
	color: #fff;
	overflow: auto;				/* ボックスに収まらない時の表示をユーザーに依存する。スクロールバーなどが表示される */
}

/*ハンバーガーメニュー　ここまで ------------------------------------------------　*/

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

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

/*main nopc ----------------------------------------------------------------------- */

#main {
	clear: both;			/*左寄せ、または右寄せされた全ての要素に対する回り込みを解除します。*/
	position: relative;		/*相対位置 relative 絶対位置 fixed*/
	top: 0px;				/*上からの配置場所指定*/
	/* left: 20%;			/*左からの配置場所指定*/
	/* width: 80%;			/*幅*/
	/* background-color: #fff; */
	margin: 0px 0px 0px 0px;	/*上下左右に余白10px*/
	/*padding-bottom: 30px;		/*フッターを30pxと指定しているから*/
}

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

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

#main ol {
	padding: 0px 0px 0px 50px;	/*上、右、下、左への余白 2022.05.01 追加*/   
}

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

/*contents --------------------------------------------------------------- */
#contents {
	/*width: 960px;	/*widthを固定にするとレスポンシブ に対応しなくなる必ず */
	margin: 10px 10px 10px 10px;	/*上下左右に余白10px*/
	/*background-color: #fff;	/*背景色白 bodyで背景白に指定しているので不要*/
}

#contents01 {
	/*width: 960px;	/*widthを固定にするとレスポンシブ に対応しなくなる必ず */
	margin: 0px 0px 0px 0px;		/*外側 上下左右に余白*/
	padding: 10px 10px 10px 10px;	/*内側 上下左右に余白*/
	background-color: #fff;			/*背景色白 bodyで背景白に指定している*/
}

#contents02 {
	/*width: 960px;	/*widthを固定にするとレスポンシブ に対応しなくなる必ず */
	margin: 0px 0px 0px 0px;		/*外側 上下左右に余白*/
	padding: 10px 10px 10px 10px;	/*内側 上下左右に余白*/
	color: #f5f5f5;
	text-shadow: 1px 2px 3px #000000; 
	/*background-color: #fff;			/*背景色白 bodyで背景白に指定している*/
}


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

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

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

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


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


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

/*親要素（例えば pタグやdivタグなど）の横幅いっぱいに表示される*/
/*全イメージを横幅いっぱいに*/
img {
	/*width:100%;		/*実際の画像サイズ以上に拡大される*/
	max-width: 100% ;	/*max-width 表示空間の横幅に合わせて自動調整*/
	height: auto;
}

/* body ------------------------------------------------------------- */

body,html {
	/*height: 100%;						/* htmlの高さ D 21.06.13 jQueryでスクロール量を取得するには、heightの設定は邪魔になる*/
	height: auto; 
/*	overflow-x : hidden;				/*スマホで表示した時の横揺れをなくす D 2021.09.09 スクロールバーが不安定になるので削除*/
										/* 参照 https://teratail.com/questions/240782 */
	-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: 20px;		/*文字サイズ*/
	line-height: 1.8;		/*行間*/
	/*background: #fff;		/*背景の色白*/
	/*background: url(../img/bg01.jpg) no-repeat center center/cover; */
}

/* 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;	/*太字にしない指定 */
}	

/*ul {list-style-type: none;}*/
/*img {border: none;max-width: 100%;height: auto;vertical-align: middle;}*/
/*table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}*/
/*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: 5px 5px 5px 5px;	/*上 右 下 左*/
}

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

/*SNS表示位置指定 --------------------------------------------------------*/
.sns_icon {
	display:block;
	position: fixed;		/*絶対位置*/
	top: 5px;
	right: 5px;
	text-decoration: none;
	text-align: center:
	zindex: 9999;
	/*padding-top: 10px; */
}
.sns_icon ul li {
	display: inline;
}

/*見出し -------------------------------------------------------------- */

/*見出し編集用 茶色 左寄せ　太字　余白上10px 左10px 下10px*/
.ttl01 {
	color:brown;
	text-align:left;
	font-weight:bold;
	margin-top: 10px;	/*上余白*/
	margin-left: 10px;	/*左余白*/
	margin-bottom: 10px;	/*下余白*/
}

/*見出し編集用　左寄せ　太字　下線ダークオレンジ　余白上左下10px*/
.ttl02 {
	text-align:left;
	font-weight:bold;
	background: linear-gradient(transparent 90%, orange 90%);
	font-weight: bold;
	margin-top: 10px;	/*上余白*/
	margin-left: 10px;	/*左余白*/
	margin-bottom: 10px;	/*下余白*/
}

/*見出し編集用 角丸茶色*/
.midasi_brown {
	color:white;
	text-align:center;
	font-weight:bold;
	background-color:brown;
	border-left: solid 24px brown; 
	border-right: solid 24px brown;
	border-radius: 1em;	/*角を丸める*/
	box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.25);
	width:70%;
	margin:0 auto;		/*中央寄せ*/
	margin-top: 40px;	/*上余白*/
	margin-bottom: 40px;	/*下余白*/
}

/*見出し編集用 角丸ダークオレンジ*/
.midasi1 {
	color:#ffffff;
	text-align:center;
	font-weight:bold;
	background-color:#B22222;		/*背景色*/
	border-left: solid 24px #B22222;	/*線色*/
	border-right: solid 24px #B22222;	/*線色*/
	border-radius: 1em;			/*角を丸める*/
	box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.25);
	width:70%;
	margin:0 auto;				/*中央寄せ*/
	margin-top: 40px;			/*上余白*/
	margin-bottom: 40px;			/*下余白*/
}

/*前後 中央線*/
.cosen {
  position: relative;
  color: #000000;
  display: inline-block;
  padding: 0 55px;
	margin-top: 10px;
	margin-bottom: 10px;			/*下余白*/

}

.cosen:before, .cosen:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 2px;
  border-top: solid 1px #000000;
  border-bottom: solid 1px #000000;
}

.cosen:before {
  left:0;
}
.cosen:after {
  right: 0;
}


/*前後 中央線*/
.cosen-w {
  position: relative;
  /*color: #f5f5f5;    テキストカラー*/ 
  display: inline-block;
  padding: 0 55px;
	margin-top: 10px;
	margin-bottom: 10px;			/*下余白*/
}

.cosen-w:before, .cosen-w:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 2px;
  border-top: solid 1px #f5f5f5;
  border-bottom: solid 1px #f5f5f5;
}

.cosen-w:before {
  left:0;
}
.cosen-w:after {
  right: 0;
}


/*吹き出しアイコン付き ------------------------------------------------- */

.ficon {
  position: relative;		/*相対位置*/
  padding-left: 1.2em;		/*アイコン分のスペース*/
  line-height: 1.4;		/*行高*/
}

.ficon:before {
  font-family: "Font Awesome 5 Free";
  content: "\f075";		/*アイコンのユニコード*/
  position: absolute;		/*絶対位置*/
  font-size: 1em;		/*サイズ*/
  left: 0;			/*アイコンの位置*/
  top: 0;			/*アイコンの位置*/
  color: #dc143c; 		/*アイコン色*/
}

/*文字を反射 --------------------------------------------------------- */
.hansya {
  position: relative;
  color: #dc143c;
  line-height: 1.4;
  -webkit-box-reflect: below -10px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 10%,rgba(0, 0, 0, 0.6));
}

/*上下カッコ --------------------------------------------------------- */
.jgkkko {
  position: relative;
  /*color: #dc143c;*/
  color: #000000;
  font-size: 22px;
  padding: 10px 0;
  text-align: center;
  margin: 1.5em 0;
}
.jgkkko:before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 150px;
  height: 58px;
  border-radius: 50%;
  border: 5px solid #696969;
  border-left-color: transparent;
  border-right-color: transparent;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

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

/*上下線 */
.jgsen {
  color: #dc143c;
  text-align: center;
  padding: 0.25em;
  border-top: solid 2px #dc143c;
  border-bottom: solid 2px #dc143c;
  background: -webkit-repeating-linear-gradient(-45deg, #f08080, #f08080 3px,#fa8072 3px, #fa8072 7px);
  background: repeating-linear-gradient(-45deg, #f08080, #f08080 3px,#fa8072 3px, #fa8072 7px);
}

/*下線 */
.kasen {
	padding: 0.25em 0.5em;		/*上下 左右の余白*/
	color: #000000;				/*文字色*/
	background: transparent;	/*背景透明に*/
	border-bottom: solid 2px #000000;
}

/*下線 */
.kasen-w {
	padding: 0.25em 0.5em;		/*上下 左右の余白*/
	color: #ffffff;				/*文字色*/
	background: transparent;	/*背景透明に*/
	border-bottom: solid 2px #ffffff;
}

/*左に線  */
.leftsen {
  padding: 0.25em 0.5em;		/*上下 左右の余白*/
  color: #000000;			/*文字色*/
  background: transparent;		/*背景透明に*/
  border-left: solid 5px #dc143c;	/*左線*/
}

/*左と下に線 */
.leftkasen {
  padding: 0.25em 0.5em;		/*上下 左右の余白*/
  color: #000000;			/*文字色*/
  background: transparent;		/*背景透明に*/
  border-left: solid 5px #dc143c;	/*左線*/
  border-bottom: solid 3px #dc143c;
}

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

/*下線編集用 トマト*/
.kasen2 {
	background: linear-gradient(transparent 90%, #B22222 90%);
	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;
}


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

/*シェアボタン facebook */
.sh_fb {
  color: #ffffff;
  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 5px;		/*上下　左右*/
  margin: 5px 5px;
  /*box-shadow: 0 5px 6px rgba(0, 0, 0, 0.8);/*影*/
}

/*ボックス　レッドグラデーション*/
.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;
}

/*電話するボックス*/
.telbx {
	color: #ffffff;
	text-align:center;
	font-weight:bold;
	background-image: linear-gradient(45deg, #4169e1 0%, #008000 100%);
	border-radius: 5px;
	display: inline-block;
	padding: 5px 20px;		/*上下　左右*/
	margin: 10px 5px;
	box-shadow: 0 5px 6px rgba(0, 0, 0, 0.8);/*影*/

}
.telbx a {
	color: #ffffff;
	text-decoration: none;
}

.telbx a visited {
	color:#ffffff;
}



/* 個別のdl設定 ---------------------------------------------------------- */

/*問合せ*/
.toi dl {
	padding-bottom:20px;
}
.toi dt {				/*dl のdt（タイトル）部分の指定*/
	float: left;
	clear: both;
	width: 120px;
	height: 30px;			/*高さ*/
	line-height: 30px;		/*行の高さ*/
	font-weight: bold;	
}

.toi dd {				/*dl のdd（内容）部分の指定*/
	margin-left: 100px;
	width: 400px;			/*全体の幅*/
	height: 30px;			/*高さ*/
	line-height: 30px;		/*行の高さ*/
}


/*料金*/
.ryokin dl {
	padding-bottom:20px;
}
.ryokin dt {				/*dl のdt（タイトル）部分の指定*/
	float: left;			/*横並びにする */
	clear: both;
	width: 300px;
	height: 30px;			/*高さ*/
	line-height: 30px;		/*行の高さ*/
	/*font-weight: bold;	*/
}

.ryokin dd {				/*dl のdd（内容）部分の指定*/
	text-align:right;
	margin-left: 250px;		/*左側(dt)の余白*/
	width: 200px;			/*全体の幅*/
	height: 30px;			/*高さ*/
	line-height: 30px;		/*行の高さ*/
}

/*料金2*/
.ryokin2 dl {
	padding-bottom:20px;
}
.ryokin2 dt {				/*dl のdt（タイトル）部分の指定*/
	float: left;			/*横並びにする */
	clear: both;
	width: 200px;
	height: 30px;			/*高さ*/
	line-height: 30px;		/*行の高さ*/
	/*font-weight: bold;	*/
}

.ryokin2 dd {				/*dl のdd（内容）部分の指定*/
	text-align:right;
	margin-left: 100px;		/*左側(dt)の余白*/
	width: 250px;			/*全体の幅*/
	height: 30px;			/*高さ*/
	line-height: 30px;		/*行の高さ*/
}


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

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


/*float class ----------------------------------------------------------- */

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

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

/*右側の枠 ------------------------------------------------------------------- */

#mwaku {
	color: #808080;
	font-size: 18px;
	border-style: solid;
	border-width: 1px;
	border-color: #808080; 	/*dark gray*/
	margin-top: 20px;				/*上余白*/
	margin-bottom: 20px;				/*下余白*/

}

/*メニューの設定 ------------------------------------------------------------- */
#menu {
	font-size: 20px;
	text-decoration: none; 		/*リンクの下線なし*/
	/*padding: 10px 10px 10px 10px; /*記述した順に[上][右][下][左]のパディングになります。*/
}

#menu dl {
	padding-bottom:20px;
}
#menu dt {				/*dl のdt（タイトル）部分の指定*/
	float: left;
	clear: both;
	width: 300px;
	height: 30px;			/*高さ*/
	line-height: 30px;		/*行の高さ*/
	font-weight: bold;	
}

#menu dd {				/*dl のdd（内容）部分の指定*/
	margin-left: 300px;
	width: 100px;			/*全体の幅*/
	height: 30px;			/*高さ*/
	line-height: 30px;		/*行の高さ*/
}


/*採用情報  全体の指定 ----------------------------------------------------- */
#saiyo {
	font-size: 20px;
	color:#ffffff;
	background: url(../img/bg01.jpg) no-repeat center center/cover;
	text-decoration:none;
	padding: 10px 10px 20px 20px;	/*上、右、下、左への余白*/
	text-shadow: 1px 2px 3px #000000; 
	}


/*ホームページ概要　全体の指定 ----------------------------------------------- */
#gaiyo {
	/*font-size: 18px;*/
	color: #f5f5f5;			/*文字色*/
	/*background: #fff;		/*背景色*/
	text-shadow: 2px 2px 3px #000000; 	/*文字に影 横 縦 影の色*/
	text-decoration: none; 		/*リンクの下線なし*/
	/*padding-bottom:50px;	*/
	padding: 10px 10px 50px 10px;   /*記述した順に[上][右][下][左]のパディングになります。*/
}

#gaiyo dl {
	padding-bottom:20px;
}

#gaiyo dt {				/*dl のdt（タイトル）部分の指定*/
	float: left;
	clear: both;
	width: 100px;
	height: 30px;			/*高さ*/
	line-height: 30px;		/*行の高さ*/
	font-weight: bold;	
}

#gaiyo dd {				/*dl のdd（内容）部分の指定*/
	margin-left: 100px;
	width: 400px;			/*全体の幅*/
	height: 30px;			/*高さ*/
	line-height: 30px;		/*行の高さ*/
}

#gaiyo a:link { color: #f5f5f5; } 	/*未訪問のリンク*/
#gaiyo a:visited { color: #f5f5f5; } 	/*訪問済みのリンク*/
#gaiyo a:hover { color: #f5f5f5; } 	/*ポイント時のリンク*/
#gaiyo a:active { color: #f5f5f5; }	/*選択中のリンク*/

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

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

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


/*ホームページ概要のdlタグを横並びにする指定　------------------------------------ */

#gaiyo2 {
	/*font-size: 18px;*/
	/*color: #696969;*/		/*dimgray*/
	background: #ffffff;		/*アンティークホワイト*/
	text-decoration: none; 		/*リンクの下線なし*/
	/*padding-bottom:50px;	*/
	/*padding: 10px 10px 50px 10px;	/*記述した順に[上][右][下][左]のパディングになります。*/
}

#gaiyo2 dl {
	padding-bottom:10px;
}

#gaiyo2 dt {				/*dl のdt（タイトル）部分の指定*/
	float: left;
	clear: both;
	width: 100px;
	height: 30px;			/*高さ*/
	line-height: 30px;		/*行の高さ*/
	font-weight: bold;	
}

#gaiyo2 dd {				/*dl のdd（内容）部分の指定*/
	margin-left: 100px;
	width: 400px;			/*全体の幅*/
	height: 30px;			/*高さ*/
	line-height: 30px;		/*行の高さ*/
}

#gaiyo2 a:link { color: #000000; } 	/*未訪問のリンク*/
#gaiyo2 a:visited { color: #000000; } 	/*訪問済みのリンク*/
#gaiyo2 a:hover { color: #000000; } 	/*ポイント時のリンク*/
#gaiyo2 a:active { color: #000000; }	/*選択中のリンク*/

#gaiyo2 p {
	padding: 0px 0px 20px 10px;	/*上、右、下、左への余白*/
}

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

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



/* 画像の設定 ----------------------------------------------------------------- */
/* 画像に文字を重ねる */
.imgmoji1 {
  position: relative;
  }

.imgmoji1 p {
	position: absolute;
	color: #f5f5f5;						/*文字はwhitesmoke*/
	text-shadow: 2px 2px 3px #000000; 	/*文字に影 横 縦 影の色*/
	font-weight: bold; 					/*太字に*/
	font-size: 1.5em;						/*サイズ2倍*/
	font-family: 'Kaiti TC','ヒラギノ明朝 ProN','Hiragino Mincho ProN','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',sans-serif;;
	text-align:left;
	top: 40%;
	left: 40%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
	padding:0;
}

.imgmoji1 img {
	width: 100%;
}

/* 画像に文字を重ねる */
.imgmoji2 {
  position: relative;
  }

.imgmoji2 p {
	position: absolute;
	color: #0000ff;						/*文字はwhitesmoke*/
	text-shadow: 2px 2px 3px #ffffff; 	/*文字に影 横 縦 影の色*/
	font-weight: bold; 					/*太字に*/
	font-size: 1.5em;						/*サイズ2倍*/
	font-family: 'Kaiti TC','ヒラギノ明朝 ProN','Hiragino Mincho ProN','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',sans-serif;;
	text-align:left;
	top: 40%;
	left: 40%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
	padding:0;
}

.imgmoji2 img {
	width: 100%;
}

/* 画像に文字を重ねる */
.imgmoji {
  position: relative;
  }

.imgmoji p {
	position: absolute;
	color: #f5f5f5;						/*文字はwhitesmoke*/
	text-shadow: 2px 2px 3px #800000; 	/*文字に影 横 縦 影の色*/
	font-weight: bold; 					/*太字に*/
	font-size: 2em;						/*サイズ2倍*/
	font-family: 'Kaiti TC','ヒラギノ明朝 ProN','Hiragino Mincho ProN','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',sans-serif;;
	text-align:center;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
	padding:0;
}

.imgmoji img {
	width: 100%;
}

/* 画像に文字を重ねる */
.imgmojikm {
  position: relative;
  }

.imgmojikm p {
	position: absolute;
	color: #f5f5f5;						/*文字はwhitesmoke*/
	text-shadow: 2px 2px 3px #000000; 	/*文字に影 横 縦 影の色*/
	font-weight: bold; 					/*太字に*/
	font-size: 1.5em;						/*サイズ2倍*/
	font-family: 'Kaiti TC','ヒラギノ明朝 ProN','Hiragino Mincho ProN','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',sans-serif;;
	text-align:center;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
	padding:0;
}

.imgmojikm img {
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 5%;
	background-position: center;
}

.imgmojikm2 {
  position: relative;
  }

.imgmojikm2 p {
	position: absolute;
	color: #f5f5f5;						/*文字はwhitesmoke*/
	text-shadow: 2px 2px 3px #800000; 	/*文字に影 横 縦 影の色*/
	font-weight: bold; 					/*太字に*/
	/*font-size: 1.5em;					/*サイズ2倍*/
	font-size: 0.8em;
	font-family: 'Kaiti TC','ヒラギノ明朝 ProN','Hiragino Mincho ProN','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',sans-serif;;
	text-align:center;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
	padding:0;
}

.imgmojikm2 img {
	width: 20%;
	max-width: 20%;
	border-radius: 5%;
	background-position: center;
}


/*画像の設定　丸く切り抜く　親要素に影響されず、画面いっぱいに表示*/

.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;          	/* 複数の画像を横に並べたい場合 */
}

.rsimg30m img {
	width: 30%;
	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;          	/* 複数の画像を横に並べたい場合 */
}
.rsimg165px img {
	width:  165px;
	max-width: 80%;
	height: auto;       			/* ※縦横を同値に */
	border-radius: 5%;  			/* 角丸半径を50%にする(=円形にする) */
	background-position: center;		/* 画像の真ん中を基準に表示 他にも指定可能*/
	/*background-position: left top;  	/* 画像の左上を基準に表示 */
	/*display: inline-block;          	/* 複数の画像を横に並べたい場合 */
}


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

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

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

.rsimg32km img {
	width:  32%;
	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;          	/* 複数の画像を横に並べたい場合 */
}

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

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

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

.rsimg60km img {
	width:  60%;
	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% ;			/* 表示空間の横幅に合わせて自動調整 */
	height: auto;
	margin: 5px;
	/*vertical-align: middle;*/
}

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

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

/*画面サイズの横幅に対して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;
}

/*画面サイズの横幅に対して60％の大きさで画像を表示1*/
.rsimg60 img { 
	width: 60%;
	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:5px;
}

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

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

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


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

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

footer {
	z-index: 999;
	clear: both;
	/*color:#ffffff;				/*文字色*/
	color:#000000;				/*文字色*/
	font-size: 15px;			/*文字サイズ*/
	position: relative;			/*相対位置*/
	/*position: fixed;			/*絶対位置*/
	left: 0%;				/*左からの配置場所指定*/
	bottom: 0px;				/*下からの配置場所指定*/
	width: 100%;				/*幅*/
	height:40px;				/*高さ*/
  	text-align: center;			/*テキストを中央*/
	line-height: 1.2;			/*行間*/
	/*background-color: #4169e1;		/*背景色*/
	background-color: #ffffff;		/*背景色*/
	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 css のみ版*/
#page_top{
width: 70px;
height: 70px;
position: fixed;
right: 0;
bottom: 100px;
background: #4169e1;			/*darkorange*/
opacity: 0.6;
border-radius: 50%;
}

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

#page_top a::before{
  content: '▲';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

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

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

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

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

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

/* 角フラットボタン オレンジ */
.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, #ff0000 0%, #dc143c 100%);
	transition: .4s;
}

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

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

.btn-blue:hover {
	background-image: linear-gradient(45deg, #FFC107 0%, #f76a35 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;
}

/*その他　文字編集 ===============================================*/

/*ul 文字前に空白*/
ul.kuhaku li {
  list-style-type: none;
  text-indent: -1em;
  padding: 0px 0px 0px 20px;	/*上、右、下、左への余白*/

}
ul.kome li:before {
  display: inline;
  content: " ";
}

/*ul 文字前に米印 */
ul.kome li {
  list-style-type: none;
  text-indent: -1em;
  padding: 0px 0px 0px 20px;	/*上、右、下、左への余白*/

}
ul.kome li:before {
  display: inline;
  content: "※";
}

/*ul 文字前に米印 */
ul.dott li {
  list-style-type: none;
  text-indent: -1em;
  padding: 0px 0px 0px 20px;	/*上、右、下、左への余白*/

}
ul.dott li:before {
  display: inline;
  content: "・";
}

/*ul 文字前に◆ */
ul.daiya li {
  list-style-type: none;
  text-indent: -1em;
}
ul.daiya li:before {
  display: inline;
  content: "◆ ";
}

/*ul 文字前に◆ */
ul.daiya2 li {
  list-style-type: none;
  text-indent: -1em;
  padding: 0px 0px 0px 20px;	/*上、右、下、左への余白*/
}
ul.daiya2 li:before {
  display: inline;
  content: "◆ ";
}

/* google map ------------------------------------------------------- */ 
.ggmap {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
 
/*google map レスポンシブ対応*/
.ggmap iframe,
.ggmap object,
.ggmap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 95%;
	height: 95%;
}

/* facebook ウィジット -------------------------------------------------- */
.fbw {
	max-width: 100%;
	padding: 0px 10px 0px 10px;   /*記述した順に[上][右][下][左]のパディングになります。*/
}

/* google カレンダー -------------------------------------------------- */
.gcalendar {
	max-width: 100%;
	padding: 0px 10px 0px 10px;   /*記述した順に[上][右][下][左]のパディングになります。*/
}

/* youtube  -------------------------------------------------- */
.youtube-100 {
	max-width: 100%;
	padding: 0px 10px 0px 10px;   /*記述した順に[上][右][下][左]のパディングになります。*/
}

/*スライドショー ------------------------------------------------------ */
.photo-show { 
	width: 960px;
	height: 400px; 		/*表示したい大きさ*/
	margin: 10px auto; 	/*縦余白10pxは任意*/
	max-width: 100%;
	max-height: 100%;
	position: relative;
	width: 960px; 		/*表示したい大きさ、height と合わせる*/
}

.photo-show img { 
	animation: show 16s infinite;
	-webkit-animation: show 16s infinite;
	/*border-radius: 50%;*/
	height: auto;
	max-width: 100%;
	opacity: 0;
	position: absolute; /*画像を全て重ねる*/
}

/*アニメーション*/

@keyframes show {
	0% {opacity:0}
	5% {opacity:1}
	10% {opacity:1}
	20% {opacity:0}
}

@-webkit-keyframes show {
	0% {opacity:0}
	5% {opacity:1}
	10% {opacity:1}
	20% {opacity:0}
}

/*各画像のアニメーションの開始時間をずらす*/

.photo-show img:nth-of-type(1) {
	animation-delay: 0s;
	-webkit-animation-delay: 0s;
}

.photo-show img:nth-of-type(2) {
	animation-delay: 2s;
	-webkit-animation-delay: 2s;
}

.photo-show img:nth-of-type(3) {
	animation-delay: 4s;
	-webkit-animation-delay: 4s;
}

.photo-show img:nth-of-type(4) {
	animation-delay: 6s;
	-webkit-animation-delay: 6s;
}

.photo-show img:nth-of-type(5) {
	animation-delay: 8s;
	-webkit-animation-delay: 8s
}

.photo-show img:nth-of-type(6) {
	animation-delay: 10s;
	-webkit-animation-delay: 10s;
}

.photo-show img:nth-of-type(7) {
	animation-delay: 12s;
	-webkit-animation-delay: 12s;
} 
.photo-show img:nth-of-type(8) {
    animation-delay: 14s;
    -webkit-animation-delay: 14s;
}

/*マウスが画像に重なった際、動きを止めて四角くする*/

.photo-show img {
	transition: 0.2s;
	-webkit-transition: 0.2s;
}

.photo-show:hover img {
	animation-play-state: paused;
	-webkit-animation-play-state: paused;
	border-radius: 0;
}

									
/*フェードイン ==================================================*/
/* 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 2s;   /* 2秒かけてフェード*/
}
 
.fade01.view{
  opacity: 1;
}
/* jQueryを利用 ふわっと　ここまで */

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

/*下線アニメーション==============================================*/
									
/*下線カラー ブラック*/
.Text-Spanbk {
  position: relative;
  z-index: 1;
}
.Text-Spanbk:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -08px;
  width: 0%;
  height: 4px;
  background: #000000;			/*カラー　クリムゾン*/
  z-index: -1;
  transition: all 0.8s;
}
.Text-Spanbk.isActive:after {
  width: 100%;
}
									
/*下線カラー ブラック*/
.Text-Spanbk2 {
  position: relative;
  z-index: 1;
}
.Text-Spanbk2:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -02px;
  width: 0%;
  height: 2px;
  background: #000000;			/*カラー　ブラック*/
  z-index: -1;
  transition: all 0.8s;
}
.Text-Spanbk2.isActive:after {
  width: 100%;
}
									
/*下線カラー クリムゾン*/
.Text-Spancr {
  position: relative;
  z-index: 1;
}
.Text-Spancr:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -08px;
  width: 0%;
  height: 4px;
  background: #dc143c;			/*カラー　クリムゾン*/
  z-index: -1;
  transition: all 0.8s;
}
.Text-Spancr.isActive:after {
  width: 100%;
}

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

/*下線カラー レッド*/
.Text-Spanrd2 {
  position: relative;
  z-index: 1;
}
.Text-Spanrd2:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -03px;
  width: 0%;
  height: 2px;
  background: #ff0000;			/*カラー レッド*/
  z-index: -1;
  transition: all 0.8s;
}
.Text-Spanrd2.isActive:after {
  width: 100%;
}

/*下線カラー ダークオレンジ*/
.Text-Spando {
  position: relative;
  z-index: 1;
}
.Text-Spando:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -08px;
  width: 0%;
  height: 4px;
  background: #ff8c00;			/*カラー ダークオレンジ*/
  z-index: -1;
  transition: all 0.8s;
}
.Text-Spando.isActive:after {
  width: 100%;
}

/*下線カラー ダークオレンジ*/
.Text-Spangd {
  position: relative;
  z-index: 1;
}
.Text-Spangd:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -08px;
  width: 0%;
  height: 4px;
  background: #ffd700;			/*カラー gold*/
  z-index: -1;
  transition: all 0.8s;
}
.Text-Spangd.isActive:after {
  width: 100%;
}
					
/*下線アニメーション=ここまで========================================*/									
									
/*loadingアニメーション ここから - - - - - - - - - - - - - - - - - */
/*▼▼ ここから追加する ▼▼　中央に表示する*/
.loader-wrap {
	position: fixed;
	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 999;	/*最前面に表示*/
}
/*▲▲ ここまで追加する ▲▲　中央に表示する　ここまで*/

.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(145,145,145, 0.2);
  border-right: 1.1em solid rgba(145,145,145, 0.2);
  border-bottom: 1.1em solid rgba(145,145,145, 0.2);
  border-left: 1.1em solid #919191;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*loadingアニメーション ここまで - - - - - - - - - - - - - - - - - */
									
/* END */