@charset "utf-8";

/***************************************************
	common.css
	共通レイアウトスタイル定義
***************************************************/


/* Base
------------------------------------------------------------ */
html {
	font-size: 62.5%;
}
body {
	line-height: 1.8;
	color: #444444;
	margin: 0;
	padding: 0;
	min-width: 1020px;
	background: #ffffff;
	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 {
	width: 1000px;
	margin: 0 auto;
}
@media only screen and (max-width: 767px) {
	.innerBox {
		width: auto;
		padding: 0 10px;
	}
}

/* Link
------------------------------------------------------------ */
a { outline: none; }
a:link {
	color: #444444;
	text-decoration: underline;
}
a:visited {
	color: #444444;
	text-decoration: underline;
}
a:hover {
	color: #444444;
	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: #000;
 border-bottom: 1px solid #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 .link{
 width: 246px;
 position: absolute;
 top: 11px;
 left: 576px;
}
.head .link img{
 width: 100%;
 height: auto;
 transition: .3s;
}
.head .link 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: block;
 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: 15px 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 {
}
#header .headerTtl {
	margin: 0;
	text-align: center;
}


/* main
-------------------------------------------------------------------*/
#main {
	display: block;
	clear: both;
	font-size: 1.6rem;
	margin: 2em 0 4em 0;
}
@media only screen and (max-width: 767px) {
#wrapper {
 padding: 50px 0 0;
 clear: both;
}
.head{
 width: 100%;
 height: 50px;
 background-color: #000;
 border-bottom: 1px solid #fff;
 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 .link{
 width: 95px;
 position: absolute;
 top: 10px;
 left: 209px;
}
.head .link img{
 width: 100%;
 height: auto;
 transition: .3s;
}
.head .link 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;
}
}



/* お問い合わせ
------------------------------------------------------------ */
#contact{
 width: 100%;
}
#contact .contactT{
 margin: 0 auto;
 padding: 15px 0 11px;
 width: 80%;
 background-color: #000;
 font-size: 30px;
 line-height: 100%;
 text-align: center;
 font-weight: bold;
 color: #fff;
}
#contact .con{
 margin: 0 auto;
 width: 80%;
}
#contact .con th{
 padding: 10px 0 0;
 width: 100%;
 font-size: 16px;
 text-align: left;
 display: block;
}
#contact .con td{
 padding: 0;
 width: 100%;
 display: block;
}
textarea,input {
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 background: transparent;
 border: none;
 border-radius: 0;
 font-family: inherit;
 outline: none;
}
#contact .con td .wpcf7-text,
#contact .con td .wpcf7-textarea{
 padding: 5px 2%;
 width: 100%;
 border: 1px solid #999;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
#contact .con td .wpcf7-textarea{
 height: 200px;
}
#contact .wpcf7-submit{
 margin: 0 auto;
 padding: 10px 0 8px;
 width: 150px;
 font-size: 20px;
 line-height: 100%;
 text-align: center;
 font-weight: bold;
 color: #fff;
 background-image: -webkit-linear-gradient(90deg,rgba(144,6,7,1.00) 0%,rgba(252,0,0,1.00) 100%);
 background-image: -moz-linear-gradient(90deg,rgba(144,6,7,1.00) 0%,rgba(252,0,0,1.00) 100%);
 background-image: -o-linear-gradient(90deg,rgba(144,6,7,1.00) 0%,rgba(252,0,0,1.00) 100%);
 background-image: linear-gradient(to top, #900607 0%, #fc0000 100%);
 border-radius: 10px;
 display: block;
 transition: .3s;cursor: pointer;
}
#contact .wpcf7-submit:hover{
 opacity: .5;
}
@media only screen and (max-width: 767px) {
#contact{
 width: 100%;
}
#contact .contactT{
 margin: 0 auto;
 padding: 3vw 0 2vw;
 width: 90%;
 background-color: #000;
 font-size: 4.6vw;
 line-height: 100%;
 text-align: center;
 font-weight: bold;
 color: #fff;
}
#contact .con{
 margin: 0 auto;
 width: 90%;
}
#contact .con th{
 padding: 2.5vw 0 1vw;
 width: 100%;
 font-size: 3.6vw;
 line-height: 100%;
 text-align: left;
 display: block;
}
#contact .con td{
 padding: 0;
 width: 100%;
 display: block;
}
textarea,input {
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 background: transparent;
 border: none;
 border-radius: 0;
 font-family: inherit;
 outline: none;
}
#contact .con td .wpcf7-text,
#contact .con td .wpcf7-textarea{
 padding: 1vw 2% 0.5vw;
 width: 100%;
 border: 1px solid #999;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
#contact .con td .wpcf7-textarea{
 height: 30vw;
}
#contact .wpcf7-submit{
 margin: 0 auto;
 padding: 2vw 0 1.5vw;
 width: 40%;
 font-size: 4.6vw;
 line-height: 100%;
 text-align: center;
 font-weight: bold;
 color: #fff;
 background-image: -webkit-linear-gradient(90deg,rgba(144,6,7,1.00) 0%,rgba(252,0,0,1.00) 100%);
 background-image: -moz-linear-gradient(90deg,rgba(144,6,7,1.00) 0%,rgba(252,0,0,1.00) 100%);
 background-image: -o-linear-gradient(90deg,rgba(144,6,7,1.00) 0%,rgba(252,0,0,1.00) 100%);
 background-image: linear-gradient(to top, #900607 0%, #fc0000 100%);
 border-radius: 10px;
 display: block;
 transition: .3s;cursor: pointer;
}
#contact .wpcf7-submit:hover{
 opacity: .5;
}
}




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