@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;900&display=swap');
/***************************************************
	common.css
	共通レイアウトスタイル定義
***************************************************/


/* Base
------------------------------------------------------------ */
html {
	font-size: 62.5%;
}
body {
	line-height: 1.8;
	color: #000;
	margin: 0;
	padding: 0;
	min-width: 1020px;
	background: #000;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	word-break: break-all;
}
@media only screen and (max-width: 767px) {
	body {
		min-width: inherit;
	}
}

img {
	vertical-align: top;
	max-width: 100%;
	height: auto;
}
@media only screen and (max-width: 767px) {
	img {
	}
}
.innerBox {
	margin: 0 auto;
	width: 1000px;
}
@media only screen and (max-width: 767px) {
	.innerBox {
		width: 95%;
		padding: 0;
	}
}

/* Link
------------------------------------------------------------ */
a { outline: none; }
a:link {
	color: #000;
	text-decoration: underline;
}
a:visited {
	color: #000;
	text-decoration: underline;
}
a:hover {
	color: #000;
	text-decoration: none;
}
a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
}
main a {
	color: #ff4c4c;
}


/* wrapper
-------------------------------------------------------------------*/
#wrapper {
 padding: 100px 0 0;
 clear: both;
}


.head{
 width: 100%;
 height: 100px;
 background-color: #fff;
 position: fixed;
 top: 0;
 z-index: 20;
}
.head .top{
 width: 246px;
 position: absolute;
 top: 11px;
 left: 17px;
}
.head .top img{
 width: 100%;
 height: auto;
 transition: .3s;
}
.head .top a{
 display: block;
 width: 100%;
}
.head .mail{
 width: 246px;
 position: absolute;
 top: 11px;
 left: 296px;
}
.head .mail img{
 width: 100%;
 height: auto;
 transition: .3s;
}
.head .mail a{
 display: block;
 width: 100%;
}
.head #hmenu-bt{
 width: 100px;
 position: absolute;
 top: 11px;
 right: 11px;
 cursor: pointer;
 transition: .3s;
}
.head #hmenu-bt:hover{
 opacity: 0.5;
}
.head #hmenu-bt img{
 width: 100%;
 height: auto;
}
#hmenu{
 background-color: #FFF;
  padding: 0;
 width: 100%;
 height: calc(100vh - 101px);
 position: absolute;
 z-index: 10;
 top: 101px;
 display: none;
 font-family: 'Noto Sans JP';
 color: #000;
}
#hmenu .menu{
 margin: 20px auto 0;
 width: 80%;
 text-align: center;
 position: relative;
}
#hmenu .menu:before{
 border-top: 1px solid #000;
 content: "";
 position: absolute;
 top: 50%;
 left: 0;
 width: 100%;
}
#hmenu .menu span{
  background-color: #fff;
  display: inline-block;
  padding: 0 15px;
  position: relative;
 font-size: 40px;
 font-weight: 900;
}
#hmenu ul#h_navi{
	margin: 0 auto 40px;
	padding: 0;
	width: 60%;
		list-style-type: none;
}
#hmenu ul#h_navi li{
 width: 100%;
 border-bottom: 1px solid #000;
		list-style-type: none;
}
#hmenu ul#h_navi li a{
 padding: 25px 0 5px;
	width: 100%;
 display: block;
 text-decoration: none;
 font-size: 30px;
 font-weight: 400;
 color: #000;
	text-align: center;
 transition: .3s;
}
#hmenu ul#h_navi li a:hover{
 opacity: .5;
}
#hmenu .contact{
	margin: 0 auto;
	width: 40%;
}
#hmenu .contact a{
 padding: 15px 0 15px;
 width: 100%;
 display: block;
 text-decoration: none;
 font-size: 35px;
 line-height: 100%;
 font-weight: 500;
 color: #000;
 text-align: center;
 background-color: #e5e5e5;
 border: 5px solid #000;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 transition: .3s;
}
#hmenu .contact a:hover{
 opacity: .5;
}

/* header
-------------------------------------------------------------------*/
#header {
 margin: 0 auto;
 width: 1125px;
}
#header .innerBox {
	margin: 0 auto;
	width: 100%;
}
#header .headerTtl {
	margin: 0;
	text-align: center;
}
#header .headerTtl img{
 width: 100%;
 height: auto;
}


/* main
-------------------------------------------------------------------*/
#main {
	display: block;
	clear: both;
	font-size: 1.6rem;
	margin: 0 0 15px 0;
 padding: 0 0 50px;
}

#tab{
 padding: 0;
 width: 100%;
 background-color: #000;
}
#tab ul{
 margin: 0 auto;
 padding: 0;
 width: 1125px;
 list-style-type: none;
}
#tab li{
 float: left;
 margin: 0;
 padding: 10px 9px;
 width: 253px;
		list-style-type: none;
  cursor: pointer;
  transition: .3s;
}
#tab li:nth-child(1){
 width: 294px;
}
#tab li:hover{
 opacity: .5;
}
#tab li.active:hover{
 opacity: 1;
}
#tab li img{
 width: 100%;
 height: auto;
}
.tabT{
 margin: 15px auto 0;
 width: 1125px;
 text-align: center;
}
.tabT img{
 margin: 0 auto;
 width: 100%;
 height: auto;
}
.tabTresult{
 margin: 15px auto 0;
 padding: 28px 10px 20px;
 width: 1105px;
 font-size: 25px;
 line-height: 100%;
 text-align: center;
 font-weight: bold;
 color: #fff;
 background-color: #000;
}
#tabBox1,#tabBox2,#tabBox3,#tabBox4,#tabBox5,#tabBox7{
 display: none;
}

#rTab{
 padding: 0;
 width: 100%;
 background-color: #000;
}
#rTab ul{
 margin: 0 auto;
 padding: 0;
 width: 1125px;
 list-style-type: none;
}
#rTab li{
 float: left;
 margin: 0;
 padding: 10px 9px;
 width: 356px;
		list-style-type: none;
  cursor: pointer;
  transition: .3s;
}
#rTab li:hover{
 opacity: .5;
}
#rTab li.active:hover{
 opacity: 1;
}
#rTab li img{
 width: 100%;
 height: auto;
}
#rBox2,#rBox3,#rBox4,#rBox5,#rBox6,#rBox7{
 display: none;
}

.tabBox .topBannerBox01{
 margin: 0 auto;
 padding: 0;
 width: 100%;
}


@media only screen and (max-width: 767px) {
.spOnly{
 display: block;
}
#wrapper {
 padding: 50px 0 0;
 clear: both;
}
.head{
 width: 100%;
 height: 50px;
 background-color: #000;
 position: fixed;
 top: 0;
 z-index: 20;
}
.head .top{
 width: 95px;
 position: absolute;
 top: 10px;
 left: 7px;
}
.head .top img{
 width: 100%;
 height: auto;
 transition: .3s;
}
.head .top a{
 display: block;
 width: 100%;
}
.head .mail{
 width: 95px;
 position: absolute;
 top: 10px;
 left: 108px;
}
.head .mail img{
 width: 100%;
 height: auto;
 transition: .3s;
}
.head .mail a{
 display: block;
 width: 100%;
}
.head #hmenu-bt{
 width: 46px;
 position: absolute;
 top: 7px;
 right: 7px;
 cursor: pointer;
 transition: .3s;
}
.head #hmenu-bt:hover{
 opacity: 1;
}
.head #hmenu-bt img{
 width: 100%;
 height: auto;
}
#hmenu{
 background-color: #FFF;
  padding: 0;
 width: 100%;
 height: calc(100vh - 50px);
 position: absolute;
 z-index: 10;
 top: 50px;
 display: block;
 font-family: 'Noto Sans JP';
 color: #000;
}
#hmenu .menu{
 margin: 6vw auto 0;
 width: 90%;
 text-align: center;
 position: relative;
}
#hmenu .menu:before{
 border-top: 1px solid #000;
 content: "";
 position: absolute;
 top: 50%;
 left: 0;
 width: 100%;
}
#hmenu .menu span{
  background-color: #fff;
  display: inline-block;
  padding: 0 2vw;
  position: relative;
 font-size: 6vw;
 font-weight: 900;
}
#hmenu ul#h_navi{
	margin: 0 auto 8vw;
	padding: 0;
	width: 70%;
		list-style-type: none;
}
#hmenu ul#h_navi li{
 width: 100%;
 border-bottom: 1px solid #000;
		list-style-type: none;
}
#hmenu ul#h_navi li a{
 padding: 3.5vw 0 1vw;
	width: 100%;
 display: block;
 text-decoration: none;
 font-size: 5vw;
 font-weight: 400;
 color: #000;
	text-align: center;
 transition: .3s;
}
#hmenu ul#h_navi li a:hover{
 opacity: 1;
}
#hmenu .contact{
	margin: 0 auto;
	width: 90%;
}
#hmenu .contact a{
 padding: 2vw 0 2.6vw;
 width: 100%;
 display: block;
 text-decoration: none;
 font-size: 6vw;
 line-height: 100%;
 font-weight: 500;
 color: #000;
 text-align: center;
 background-color: #e5e5e5;
 border: 5px solid #000;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 transition: .3s;
}
#hmenu .contact a:hover{
 opacity: 1;
}

/* header
-------------------------------------------------------------------*/
#header {
	margin: 0 auto;
 width: 100%;
}
#header .innerBox {
	margin: 0 auto;
	width: 100%;
}
#header .headerTtl img{
 width: 100%;
 height: auto;
}

/* main
-------------------------------------------------------------------*/
#main {
	display: block;
	clear: both;
	font-size: 1.6rem;
	margin: 0 0 15px 0;
 padding: 0 0 3vw;
}

#tab{
 padding: 0;
 width: 100%;
 background-color: #000;
}
#tab ul{
 margin: 0 auto;
 padding: 0;
 width: 100%;
 list-style-type: none;
}
#tab li{
 float: left;
 margin: 0;
 padding: 1.5vw 1%;
 width: 22%;
		list-style-type: none;
  cursor: pointer;
  transition: .3s;
}
#tab li:nth-child(1){
 width: 25.4%;
}
#tab li:hover{
 opacity: 1;
}
#tab li.active:hover{
 opacity: 1;
}
#tab li img{
 width: 100%;
 height: auto;
}
.tabT{
 margin: 3vw auto 0;
 width: 95%;
 text-align: center;
}
.tabT img{
 margin: 0 auto;
 width: 100%;
 height: auto;
}
.tabTresult{
 margin: 3vw auto 0;
 padding: 3vw 4% 2.2vw;
 width: 95%;
 font-size: 3vw;
 line-height: 130%;
 font-weight: bold;
 text-align: center;
 color: #fff;
 background-color: #000;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

#rTab{
 padding: 0;
 width: 100%;
 background-color: #333;
}
#rTab ul{
 margin: 0 auto;
 padding: 0;
 width: 100%;
 list-style-type: none;
}
#rTab li{
 float: left;
 margin: 0;
 padding: 1.5vw 1%;
 width: 31.3%;
		list-style-type: none;
  cursor: pointer;
  transition: .3s;
}
#rTab li:hover{
 opacity: .5;
}
#rTab li.active:hover{
 opacity: 1;
}
#rTab li img{
 width: 100%;
 height: auto;
}
#rBox1,#rBox2,#rBox3,#rBox4,#rBox5,#rBox7{
 display: none;
}

.tabBox .topBannerBox01{
 margin: 0 auto;
 padding: 0;
 width: 92%;
}

}


/* footer
-------------------------------------------------------------------*/
#footer {
	clear: both;
	color: #ffffff;
	padding: 2em;
	background: #000;
 text-align: center;
}
#footer span {
 margin: 0;
 font-size: 1.8rem;
 text-align: center;
}
#footer .cr {
 margin: 0;
 font-size: 1.2rem;
 text-align: center;
 display: inline-block;
}
@media only screen and (max-width: 767px) {
	#footer {
	}
#footer span {
 display: block;
}
}




.text-red{
 color: #cc0000;
}
.text-blue{
 color: #0033cc;
}
.text-green{
 color: #339900;
}
/* other
---------------------------------------------------------*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { display: inline-table; }  
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
.inline{
display: inline;
}