@charset "utf-8";
/*■■■PC・SP共通*/

body{
	font-size:18px;
	word-break:break-all;
	top:10px;
	background-color:#FFFFFF;
	margin:0 auto;
	padding:0;
	line-height:150%;
	text-align:center;
}

a {color:#0000FF; text-decoration:none; font-style:oblique;}
a:hover {color:#999999; text-decoration:none;}
a:focus {color: #FFFF00;}

/*■幅バリエーション■*/
.wid45per{ width:45%; }
.wid100per{ width:100%; }

/*■DIV関連■*/
/*幅を内容物に合わせる*/
.ilb{ display:inline-block; }
/*角丸*/
.br3{ border-radius:3px; }
.br5{ border-radius:5px; }
.br10{ border-radius:10px; }
.br15{ border-radius:15px; }
.br20{ border-radius:20px; }

/*■ボーダー■*/
.bor_sol1{ border:1px #666666 solid; }
.bor_top_Deepblue_dot{ border-top:2px #FF9F38 dotted; }
.bor_none{ border:none; }
.bor_collapse{ border-collapse:collapse; }

/*■行間■*/
.lh150{ line-height:150%; }
.lh200{ line-height:200%; }
.lh250{ line-height:250%; }
.lh300{ line-height:300%; }

/*■フロート■*/
.fl{ float:left; }
.fr{ float:right; }
.fc{ float:center; }
.cb{ clear:both; }

/*■アンダーライン■*/
.underline{ text-decoration:underline; }

/*■アライン■*/
.align_left{ text-align:left; }
.align_right{ text-align:right; }
.align_center{ text-align:center; }

/*■センタリング■*/
.centre{ margin:0px auto; }

/*■マージン■*/
.margin_top5{ margin-top:5px; }
.margin_top7{ margin-top:7px; }
.margin_top10{ margin-top:10px; }
.margin_top20{ margin-top:20px; }
.margin_all3{ margin:3px; }
.margin_all5{ margin:5px; }
.margin_all10{ margin:10px; }
.margin_0_15{ margin:0px 15px; }
.marl5{ margin: 0px 0px 0px 5px; }
.marl10{ margin: 0px 0px 0px 10px; }
.marl20{ margin: 0px 0px 0px 20px; }
.mar_verticality5{ margin: 5px 0px 5px 0px; }
.mar_verticality10{ margin: 10px 0px 10px 0px; }
.mar_verticality20{ margin: 20px 0px 20px 0px; }
.mar_verticality30{ margin: 30px 0px 30px 0px; }
.mar_bottom5{ margin: 0px 0px 5px 0px; }
.mar_bottom10{ margin: 0px 0px 10px 0px; }

/*■パディング■*/
.padd2{ padding:2px; }
.padd2_3{ padding:2px 3px; }
.padd3{ padding:3px; }
.padd5{ padding:5px; }
.padd_lr5{ padding:0px 5px; }
.padd_ver2lr5{ padding:2px 5px; }
.padd10{ padding:10px; }
.padd5_10{ padding:5px 20px; }
.padd5_20{ padding:5px 20px; }

/*■フォントサイズ■*/
.f08{ font-size:8px; }
.f10{ font-size:10px; }
.f12{ font-size:12px; }
.f14{ font-size:14px; }
.f16{ font-size:16px; }
.f18{ font-size:18px; }
.f20{ font-size:20px; }

/*■バックグラウンドカラー■*/
.cbgblack{ background-color:#000000; }
.cbgwhite{ background-color:#FFFFFF; }
.cbgblue{ background-color:#0000FF; }
.cbgred{ background-color:#FF0000; }
.cbgpink{ background-color:#ff00ff; }
.cbggreen{ background-color:#00FF00; }
.cbglightgreen{ background-color:#00cc33; }
.cbglightblue{ background-color:#DDDDFF; }
.cbglightyellow{ background-color:#FFFF88; }
.cbgyellow{ background-color:#FFFF00; }
.cbgorange{ background-color:#ffcc00; }
.cbggray{ background-color:#DDDDDD; }

/*■フォントカラー■*/
.cblack{ color:#0000FF; }
.cblue{ color:#0000FF; }
.cred{ color:#FF0000; }
.cpink{ color:#ff1493; }
.cgreen{ color:#00AA00; }
.corange{ color:#FF8800; }
.cyellow{ color:#FFCC00; }
.cwhite{ color:#FFFFFF; }
.cbrown{ color:#C88A00; }
.crat{ color:#90B2A7; }
.cgray{ color:#666666; }

/*■フォントウエイト■*/
.bold{ font-weight:bold; }

/*■その他■*/

/* ■■文字のオーバーフローを…にし、改行しない■■ */
.overflow_hidden_norap{
	width:300px;
	overflow:hidden;
	text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis; /* Safari */
	-o-text-overflow: ellipsis; /* Opera */
	white-space: nowrap;
	display:block;
}



/*▼ハンバーガーメニューCSS▼▼▼▼▼▼▼*/
/*▼ハンバーガーメニューCSS▼▼▼▼▼▼▼*/
/*▼ハンバーガーメニューCSS▼▼▼▼▼▼▼*/
/*ヘッダーまわりはサイトに合わせて調整してください*/
header {
  padding:5px;
}

#nav-drawer {
  position: fixed;
	display:inline-block;
	right:2%;
	top:1%;
}

/*チェックボックス等は非表示に*/
.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: #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: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

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

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

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

/*▲ハンバーガーメニューCSS▲▲▲▲▲▲▲*/
/*▲ハンバーガーメニューCSS▲▲▲▲▲▲▲*/