@charset "utf-8";

/* DEFAULT
---------------------------------------------------------------------------*/
html {overflow-y: scroll;font-size: 62.5%; line-height:1.5;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {margin: 0;padding: 0;}
address, caption, cite, code, dfn, em, strong, th, var {font-style: normal !;}
table {border-collapse: collapse;border-spacing: 0;}
th {font-weight:lighter;}
caption, th {text-align: left;}
q:before ,q:after {content: '';}
object, embed, td, th {vertical-align: top;}
hr, legend {display: none;}
h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight:lighter;}
img, abbr, acronym, fieldset {border: 0;}

li {list-style-type: none;}
img{vertical-align: bottom;}
p{line-height: 1.5; margin:0 0 1em;}
body {font-size:1.4rem;}

*, *:before, *:after { -webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}

div:after,ul:after,li:after,dd:after,section:after {content: ""; display: block; clear: both;}

img{max-width: 100%;height: auto;width /***/:auto;　}

a:hover img {opacity: 0.7;filter: alpha(opacity=70);-ms-filter: "alpha(opacity=70)";}

/* ALL
---------------------------------------------------------------------------*/
body {color: #333;font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; -webkit-text-size-adjust: 100%; font-size:1.6rem;}

#wrapper{}

.pad{padding:10px;}
.clear{clear:both;}
.clearfix { overflow:hidden; _zoom:1;}

/* LINK-STYLE
---------------------------------------------------------------------------*/
a:link{color: #0099FF;text-decoration: underline;}
a:visited{color: #0099CC;text-decoration: underline;}
a:hover{ color:#663399; text-decoration:underline;}
a:active{color:#663399;text-decoration: underline;}

/* HEADER
---------------------------------------------------------------------------*/
header{}
header #logo{text-align:center; padding:15px 10px;}
header #logo img{}
header nav{ background:#231815; border-bottom:7px #CC0001 solid;}
header nav ul{ display:table; width:100%; text-align:center;}
header nav ul li{ display:table-cell; width:25%; font-size:1.4rem; border-right:1px #666 solid;}
header nav ul li:first-child{border-left:1px #666 solid;}
header nav ul li a{ display:block; padding:10px;}
header nav ul li a:link,
header nav ul li a:visited,
header nav ul li a:active{color: #fff;text-decoration:none;}
header nav ul li a:hover{color: #fff;text-decoration:none; background:#444;}

header .sns{ float:right;}
header .sns ul{}
header .sns ul li{ float:left;}

@media screen and (max-width: 768px) {
	header{ height:50px; border:0;}
}

/* CONTENTS
---------------------------------------------------------------------------*/
#container{ padding-bottom:20px; max-width:980px; margin:0 auto;}
#contents{}
.none-box{ text-align:center; padding:80px 0 100px; font-size:2.0rem;}
#pankuzu{}
.inner{ max-width:980px; margin:0 auto;}

h1{ text-align:center; padding:0 10px; margin:40px 0; font-weight:600; font-size:2.6rem; color:#231815;}
h1 span{}
h2{ background:#231815; padding:10px; font-weight:600; border-radius:6px;margin:40px 0 20px; color:#fff;} 
h3{ background:#f9f9f9; padding:10px; font-weight:600; border-radius:6px;margin:40px 0 20px;} 

@media screen and (max-width: 768px) {
	#container{padding:0 10px 60px; max-width:none;}
	#contents{}
	h1 img{ height:30px;}
}






/* Hamburger menu
---------------------------------------------------------------------------*/
#nav-drawer{ display:none;}

.drawer__title {
	background: #333;
	color:#fff;
	position: relative;
	padding: 7px 15px;
	font-size: 22px;
	font-weight: 700;
	text-align: center;
	letter-spacing: 2px;
}
	
	.close {
	color: #fff;
	display: inline-block !important;
	padding: 10px 3px;
    display: none;
    position: absolute;
    z-index: 999999;
    top: 0;
    left: 10px;
    cursor: pointer;
}


.close span {
	background: #fff;
    margin: 0 20px 0 7px;
    display: inline-block;
    position: relative;
    width: 3px;
    height: 30px;
    padding: 0;
    transition: .3s ease-in-out;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.close span::before {
    display: block;
    position: absolute;
    top: 50%;
    left: -13px;
    width: 30px;
    height: 3px;
    margin-top: -2px;
    background: #fff;
    content: "";
}



@media screen and (max-width: 768px) {
	header{ display: none;}
	#nav-drawer{ display: block; position: fixed; width: 100%; z-index: 1000; background:#fff; border-bottom: 1px #999 solid;}
	#nav-drawer .logo{ height:30px; margin:15px 10px;}
	#nav-open{ float: right;}
	#contents{ padding-top:60px; }
}




/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

#nav-open{ width: 60px; height: 60px; position: relative;}
#nav-open span:nth-of-type(1),
#nav-open span:nth-of-type(2),
#nav-open span:nth-of-type(3){
    top: 13px;
    left: 13px;
    width: 34px;
    background: #333;
	position: absolute;
	height: 2px;
	border-radius: 4px;
}
#nav-open span:nth-of-type(2){top: 21px;}
#nav-open span:nth-of-type(3){top: 29px;}
#nav-open span:nth-of-type(4){ color: #333; position: absolute;top: 35px; font-weight:600; font-size: 10px; text-align: center; width: 60px;}


/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  right: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  right: 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);}


#nav-content ul.main-navi{ margin-bottom: 20px;}
#nav-content ul.main-navi li span{ display: block; padding: 15px 10px;color:#fff;text-decoration:none;}

#nav-content ul.main-navi li{ border-bottom: 1px #333 solid;}
#nav-content ul.main-navi li a{ display: block; padding: 15px 10px;color:#fff;text-decoration:none;}
#nav-content ul.main-navi li a:link{color:#333;text-decoration:none;}
#nav-content ul.main-navi li a:visited{color:#333;text-decoration:none;}
#nav-content ul.main-navi li a:hover{color:#333;text-decoration:none;}
#nav-content ul.main-navi li a:active{color:#333;text-decoration:none;}



#nav-content .sns{position: relative;  overflow: hidden; font-size:20px; margin:0 0 20px; text-align: center;}
#nav-content .sns ul{position: relative;left: 50%;float: left;}
#nav-content .sns ul li{position: relative;left: -50%; float: left; list-style: none; margin:0 10px;}
#nav-content .sns ul li a{ display: inline-block; background:#f3f3f3; border-radius:4px; width:40px; height:40px; line-height:40px; color: #333;}



/* FOOTER
---------------------------------------------------------------------------*/
footer{ text-align:center; color:#fff; padding-top:15px; background:#231815;}
@media (max-width: 768px) {
	footer{padding-top:0;}
}

footer nav{width:100%; font-weight:400; margin-bottom:20px;}
footer nav .nav_ttl{ display:none;}
footer nav ul{display:table;margin: 0 auto;}
footer nav ul li{ display:table-cell; font-size:1.2rem;}
footer nav ul li a{ display:block; color:#FFF; text-decoration:none; margin:0 10px; }
footer nav ul li a:before{font-family: "Font Awesome 5 Free"; content:"\f0da"; margin:0 0.3em 0 0; font-weight: 900;}
footer nav ul li a:link{ color:#fff;text-decoration:none;}
footer nav ul li a:visited{ color:#fff;text-decoration:none;}
footer nav ul li a:hover{ color: #666;text-decoration:none;}
footer nav ul li a:active{ color:#fff;text-decoration:none;}

@media (max-width: 768px) {
	
	footer nav{background:#fff;}
	footer nav .nav_ttl{ display: block; background:#231815; padding:3px;}
	footer nav ul{display: block;margin: 0 auto; text-align:left;}
	footer nav ul li{ display: block; border-top:1px #111 solid; font-size:1.3rem;}
	footer nav ul li a{ border:0; margin:0; display:block; padding:10px 10px; color:#111; text-decoration:none; }
	footer nav ul li a:link{ color:#111;;text-decoration:none;}
	footer nav ul li a:visited{ color:#111;text-decoration:none;}
	footer nav ul li a:hover{ color:#111;text-decoration:none; background:#f3f3f3;}
	footer nav ul li a:active{  color:#111;text-decoration:none;}
}

footer .sns{position: relative;  overflow: hidden; font-size:20px; margin:0 0 20px; text-align: center;}
footer .sns-box{}
footer .sns-title{font-size: 14px; margin-bottom: 5px; color: #fff;}
footer .sns ul{position: relative;left: 50%;float: left;}
footer .sns ul li{position: relative;left: -50%; float: left; list-style: none; margin:0 10px;}
footer .sns ul li a{ display: inline-block; background:#FFF; border-radius:4px; width:40px; height:40px; line-height:40px; color: #3c3232;}


#copy{ font-size:1.3rem; padding-bottom:10px;}