/* CSS Document */

.drawer {
	position: relative;
}

header .for_sp {
	display: none;
}

body {
	background-color: #212121;
}

/* 背景ビデオ表示
----------------------------------------------------------------------------------------------------*/
.contents-video {
  height: 100%; /* //高さを画面いっぱいに指定する。(vhが効かない場合の対策) */
/*  height: 100vh;  // 高さを画面いっぱいに指定する。*/
  position: relative;  /* //横幅がウィンドウズサイズの縦幅よりもはみ出てしまう場合に、左にずらすために指定。*/
  width: 100%; /* // 横幅もいっぱいに。*/
	margin-top: 3px;
}
.contents-video #video {
  background: url("../images/bg_yakyuken.jpg") no-repeat; /* 動画が再生を始めるまで、cssのほうでも背景を設定します。*/
  background-attachment: fixed; /* // 中央揃えになるように、fixed。*/
  background-position: center center; /* // positionも中央に。*/
  background-size: cover; /* // 画面サイズに応じてサイズを可変するように設定。*/
  left: 0;
  /* // 以下、画面いっぱいにするためのCSS設定 */
  min-height: 100%;
/*  min-height: 100vh;*/
  min-width: 100%;
/*  min-width: 100vw;*/
  /* // wrapperのサイズに応じて、leftの位置をjQueryで指定するため、positionはabsoluteにします。*/
  /*position: absolute;
  top: 0;*/
  /* // z-indexは調整してください。*/
  z-index: 1;
}
.contents-video .for_sp {
	display: none;
}


/* コンテンツ表示
----------------------------------------------------------------------------------------------------*/
.contents-text {
	width: 100%;
	height: 100%;
	background: url(../images/bg_dot.png);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	text-align: center;
}
.contents-text .logo {
	margin: 55px 0 36px 0;
}

/* ボタン */
.contents-button {
overflow: hidden;
max-width: 1200px;
margin: 0 auto;
position: absolute;
bottom: 31px;
left: -3px;
right: 0;
width: 100%;
}
.contents-button ul {
/*	overflow: hidden;*/
	width: 100%;
	display:table;
	text-align:center;
	margin:0 auto;
}
.contents-button ul li {
  width: 49%;
	width: 32.3%;
	float: left;
	margin-left: 1%;
	margin:0 0.5%;
	text-align:center;
}
.contents-button ul li:first-child {
	margin-left: 0;
}
.contents-button ul li a {
	display: block;
	border-radius: 15px;
	line-height: 1.6;
	font-size: 14px;
	text-align: center;
	color: #FFF;
	padding: 20px 15px 30px;
	font-weight: 300;
    -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.8);
    -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.8);
    box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.5);
    text-shadow: 0px -1px 0px rgba(0,0,0,0.2), 0px 1px 0px rgba(255,255,255,0.4);
}
.contents-button ul li a:hover {
	transition:0.3s;
}
.contents-button ul li a strong {
	display: inline-block;
	font-size: 20px;
	position: relative;
	margin: 0 0 10px 0;
	padding: 0 0 0 1.4em;
}
.contents-button ul li a strong::before {
	font-family: 'FontAwesome';
	content:"\f138";
	position: absolute;
	top: 4%;
	left: 0;
}
.contents-button ul li.btn-company a{
    background: -moz-linear-gradient( top, #1975d2 0%, #0c559e);
    background: -webkit-gradient( linear, left top, left bottom, from(#1975d2), to(#0c559e));
    background: -ms-linear-gradient( top, #1975d2 0%, #0c559e);
    border: 3px solid #0c559e;
}
.contents-button ul li.btn-company a:hover {
    background: -moz-linear-gradient( top, #0c559e 0%, #023d78);
    background: -webkit-gradient( linear, left top, left bottom, from(#0c559e), to(#023d78));
    background: -ms-linear-gradient( top, #0c559e 0%, #023d78);
    border: 3px solid #023d78;
}
.contents-button ul li.btn-citizen a{
    background: -moz-linear-gradient( top, #ff2266 0%, #da145d);
    background: -webkit-gradient( linear, left top, left bottom, from(#ff2266), to(#da145d));
    background: -ms-linear-gradient( top, #ff2266 0%, #da145d);
    border: 3px solid #da145d;
}
.contents-button ul li.btn-citizen a:hover {
    background: -moz-linear-gradient( top, #da145d 0%, #bc0247);
    background: -webkit-gradient( linear, left top, left bottom, from(#da145d), to(#bc0247));
    background: -ms-linear-gradient( top, #da145d 0%, #bc0247);
    border: 3px solid #bc0247;
}
.contents-button ul li.btn-certi a{
    background: -moz-linear-gradient( top, #1e7e75 0%, #005951);
    background: -webkit-gradient( linear, left top, left bottom, from(#1e7e75), to(#005951));
    background: -ms-linear-gradient( top, #1e7e75 0%, #005951);
    border: 3px solid #005951;
}
.contents-button ul li.btn-certi a:hover {
    background: -moz-linear-gradient( top, #005951 0%, #034842);
    background: -webkit-gradient( linear, left top, left bottom, from(#005951), to(#034842));
    background: -ms-linear-gradient( top, #005951 0%, #034842);
    border: 3px solid #034842;
}


/* フッター
----------------------------------------------------------------------------------------------------*/
footer {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 2px;
	height: 0;
	z-index: 2;
}
.pagetop {
    display: none;
}

@media screen and (max-width: 1024px) {
.contents-video {
	margin-top: 1px !important;
}
/* ボタン */
.contents-button {
	max-width: 96%;
}
.contents-button ul li a {
	font-size: 11px;
	padding: 15px 10px 20px;
}
.contents-button ul li a strong {
	font-size: 16px;
}
}

@media screen and (max-width: 768px) {
body {
	background-color: #FFF;
}
header .for_sp {
	display: block;
}
.contents-video #video {
	display: none;
}
.contents-video .for_sp {
	display: block;
	margin: -1px 0 0 0;
}

.contents-text {
	background: #212121;
	position: relative;
	min-height: auto;
}
.contents-text .logo {
	display: none;
}
/* 検索窓 */
.contents-search {
	background-color: #000;
	width: 100%;
	border-radius: 0;
	padding: 15px;
}
.contents-search #search-box-text {
	font-size: 18px;
	width: 600px;
}
.contents-search dl {
	margin-left: 10px;
}
.contents-search dl dd ul li a {
	margin: 0 6px;
	font-size: 18px;
}
/* ボタン */
.contents-button {
	background: #212121;
	margin: 0;
	padding: 0;
	position: relative;
	bottom: auto;
	width: 100%;
}
.contents-button ul {
	margin-top: 30px;
	margin-left: 30px;
	margin-bottom: 30px;
}
.contents-button ul li {
  width: 96%;
  float: none;
  margin: 0 0 2% 0;
}
  /*
.contents-button ul li {
	width: 30.7%;
	float: left;
	margin-left: 2%;
}
*/
  
.contents-button ul li a {
	font-size: 18px;
	padding: 20px 20px 30px;
  height: auto !important; /* ボタン2つ時 */
}
.contents-button ul li a strong {
	font-size: 26px;
	padding: 0 0 0 1em;
}

footer {
	position: relative;
}
footer .sp-pagetop {
	display: none;
}
}

@media screen and (max-width: 480px) {
/* 検索窓 */
.contents-search {
	padding: 10px;
}
.contents-search #search-box-text {
	font-size: 16px;
	width: 235px;
}
.contents-search dl {
	margin-left: 0;
}
.contents-search dl dt{
	margin-right: 10px;
}
.contents-search dl dd ul li a {
	font-size: 14px;
	margin: 0 3px;
	padding: 10px 10px 14px;
}
.contents-search dl dd ul li:nth-child(4),
.contents-search dl dd ul li:nth-child(5) {
	display: none;
}
/* ボタン */
.contents-button {
	background: #212121;
	margin: 0;
	padding: 0;
	position: relative;
	bottom: auto;
	width: 100%;
  max-width: 100%;
}
.contents-button ul {
	margin: 10px;
}
.contents-button ul li {
	width:96%;
	float: none;
	margin: 0 0 10px 0 !important;
}
.contents-button ul li a {
	font-size: 12px;
	padding: 15px 5px 20px;
}
.contents-button ul li a strong {
	font-size: 16px;
}
}

@media screen and (max-width: 360px) {
/* 検索窓 */
.contents-search #search-box-text {
	width: 180px;
	font-size: 14px;
}
.contents-search dl dt{
	font-size: 14px;
	margin-right: 5px;
}
.contents-search dl dd ul li a {
	margin: 0 1px;
	padding: 10px 6px 14px;
}
.contents-button ul li a {
	padding: 15px 10px 20px;
}

}