@charset "utf-8";
/*--12px/36px 960/12grid(1col 8.3333%)--*/

@import url(https://fonts.googleapis.com/css?family=Lato:400,700);

html {
font-size: 75%;/*12px*/
line-height: 2;/*18px*/
color: #4D4D4D;
background-color:white;
font-weight: normal;
font-family: Lato,"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}

body, ul, ol, dl, dd,tr,th,td,figure,#logo{
margin: 0;
padding: 0;
}

article{
overflow:hidden;
}

main {
display: block;
}

li {
list-style-position: inside;
}

section {
padding-bottom: 1.5em;
}

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

.bg img {
width: 100%;
}

table{
width: 100%;
border-collapse: collapse;
word-break: break-all;
box-sizing:border-box;
}

table,th{
border: 1px #e7e7e7 solid;
}

td li{
list-style:none;
float:left;

}

td li:after{
content: '／';
}

td li:last-child:after{
content: '';
}

th{
width:25%;
padding: 1em 4.1666%;
text-align: center;
color:white;
background-color: #b92d23;
}

tr:nth-child(2n+1){
background-color: #F9F9F9;
}

td{
color:#666;
padding: 1.5em 4.1666%;
border:1px #eee solid;
}

table strong{
padding: .25em 1em;
color: black;
background-color: white;
font-size: 75%;
}

/* -- font -- */

h1 {
font-size: 200%;/*32px*/
line-height: 1.5;/*48px*/
}

h2 {
font-size: 150%;/*24px*/
line-height: 1.5;/*36px*/
}

h3 {
font-size: 125%;/*20px*/
line-height: 1.8;/*36px*/
}

h4 {
font-size: 112.5%;/*18px*/
line-height: 1.3333;/*24px*/
}

.text-r {
text-align: right;
}
.big {
font-size: 175%;
}
.small {
font-size: 75%;
}
.pad_r {
padding-right: .5em;
}
.pad_l {
padding-left: .5em;
}

.min {
font-family:Times New Roman,A1 Mincho, YuMincho,Hiragino Mincho ProN,Meiryo, serif;
font-weight:300;
}

a {
text-decoration: none;
}

.title {
text-align: center;
padding:.75em;
box-sizing: border-box;
}

/*--logo bg waku color--*/

a,.red{
color: #b92d23;
}

.b_red,.b_red a{
color:white;
}

#logo {
position: absolute;
top: 20%;
bottom: 20%;
left: 4.1666%;
width:66.6666%;
}

#logo a {
color: #333;
}

a.b_red{
display:block;
transition: all .3s;
}

a.b_red:hover{
background-color:#4D4D4D;
}

.b_red{
background-color:#b92d23;
}

.waku_red{
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 1.5em;
margin:1.5em 0;
border-radius:1em;
border: 1px solid #b92d23;
}

/*--float_kiji--*/

.float_r, .float_l{
padding: 1.5em 0;
}

.float_l_kiji, .float_r_kiji {
margin: 0 4.16665%;
}
.float_l_kiji br, .float_r_kiji br {
display: none;
}
.float_l>img, .float_r>img {
width: 100%;
}

/* --selection---*/

::selection {
background: #efefef;
}
::-moz-selection {
background: #efefef;
}

/*--contents--*/

.contents {
width: 91.6666%;
margin:0 auto;
padding:1.5em 0;
}

/*--header--*/

header {
z-index: 9998;
position: relative;
color:white;
background-color:white;
}

.fixed {
position: fixed;
top: 0;
animation: fade ease 1s;
border-bottom:1px solid #efefef;
}

@keyframes fade {
 0% { -webkit-transform: translateY(-30em); -ms-transform: translateY(-30em); transform: translateY(-30em); }
 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

#menu_btn span {
display: block;
}

#tel{
display: none;
}
 
/* ----- drawermenu ----- */

#drawer_menu {
width: 66.6666%;
right: -66.6666%;
background-color:#333;
font-size: 150%;/*24px*/
line-height: 3;/*72px*/
top: 0;
z-index: 9998;
-webkit-transition: transform .3s ease-out;
transition: transform .3s ease-out;
}
#drawer_menu li a, #drawer_menu li a:hover, #drawer_menu .close:hover {
color: white;
}
#drawer_menu li {
list-style: none;
}
#drawer_menu li a, #drawer_menu .close {
padding: 0 8.3333%;
background-color: transparent;
display: block;
-webkit-transition: .5s;
transition: .5s;
}
#drawer_menu li a:hover {
background-color: #0f6482;
}
#drawer_menu.block {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
#drawer.block:not(:target) {
right: 0\9;
}
#drawer_menu .close {
position: relative;
background-color: white;
color:black;
}
#drawer_menu .close:hover {
cursor: pointer;
background-color: gray;
}
#drawer_menu .close:after {
content: "";
position: absolute;
top: 0;
right: 0;
}
#drawer_menu_overlay {
z-index: -1;
transition: .3s;
background-color: rgba(0, 0, 0, .3);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
#drawer_menu_overlay.block {
z-index: 5;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}
header, #drawer_menu .close:after, #drawer_menu_overlay, #drawer_menu_overlay_android {
width: 100%;
}
#drawer_menu, #drawer_menu .close:after, #drawer_menu_overlay, #drawer_menu_overlay_android {
height: 100%;
}
#drawer_menu, #drawer_menu_overlay, #drawer_menu_overlay_android {
position: fixed;
}
#drawer_menu_overlay, #drawer_menu_overlay_android {
right: 0;
top: 0;
}
#drawer_menu_overlay_android {
background-color: rgba(0, 0, 0, 0.5);
display: none;
}

/* ----- menubtn ----- */

.bar {
width: 50%;
height: 2%;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-transform-origin: left top;
transform-origin: left top;
background-color: white;
}
#menu_btn:hover, .bar.top, .bar.middle, .bar.bottom {
opacity: 1;
}
.bar.top {
top: 15%;
}
.bar.middle {
top: 30%;
}
.bar.bottom {
top: 45%;
}
.bar, #menu_btn {
position: relative;
}
#menu_btn {
cursor: pointer;
float: right;
font-size: 66.6%;
line-height: 2;
width: 16.6666%;
height: 6em;
background-color:#b92d23;
}
#menu_btn p {
position: absolute;
text-align: center;
bottom: -7.5%;
right: 0;
left: 0;
}
.bar {
left: 25%;
right: 25%;
}
#menu_btn, #menu_btn:hover {
color: white;
}
#menu_btn:hover a {
background-color: #888;
}

/*--top--*/

#top img {
width: 100%;
height: auto;
}

#topmenu li {
float: left;
list-style: none;
box-sizing: border-box;
border: 1px solid #e7e7e7;
padding: 1.5em 2.083325%;
position:relative;
}

#topmenu li>a:first-child{
	position:absolute;
	width:100%;
	height:100%;
	display:block;
}


#topmenu li img{
width:100%;
height:auto;
}

/*--col--*/

#footmenu li,
.col2 li,.col3 li,.col4 li,
.col2 li a,.col3 li a,.col4 li a{
box-sizing:border-box;
}

#footmenu li,
.col2 li,.col3 li,.col4 li{
list-style:none;
}

.col2 li a,.col3 li a,.col4 li a,
.col2 li img,.col3 li img,.col4 li img{
width:100%;
}

.col3 li{
border: 1px solid #e7e7e7;
padding:1.5em 2.0833%;
}

/*--sekou--*/

#sekou{
background:url(images/bg_sekou.jpg) no-repeat;
background-size:cover;
padding:3em 0;
color:white;
}

#sekou,
.before,.after{
box-sizing:border-box;
}

.before,.after{
float:left;
margin:1.5em 4.1666%;
padding:.75em 2.0833%;
text-align:center;
border: 1px solid #e7e7e7;
}

.before img,.after img{
width:100%;
}

.before{
width:27.5%;
margin-right:4.1666%;
}

.after{
width:54.1666%;
color:#007EF5;
}

.ba_arrow {
display: inline-block;
position: relative;
}

.ba_arrow:before {
content: "";
display: inline-block;
border: 1.5em solid transparent;
border-left-color:#007EF5;
position: absolute;
left: 33.3333%;
top: 25%;
margin-top: -1.5em;
}


/*--footer--*/

#footmenu li{
margin:1.5em 0;
box-sizing: border-box;
}

#footmenu li a{
color:black;
border: 1px solid #e7e7e7;
padding:1.5em 2.0833%;
display:block;
transition: all .3s;
}

#footmenu li a:before,#footmenu li a:after {
position: absolute;
z-index: -1;
display: block;
content: '';
}

#footmenu li a:after{
top: -100%;
width: 100%;
height: 100%;
display: block;
}

#footmenu li a:hover {
background-color: #e7e7e7;
}

footer {
clear:both;
}

#footer,footer{
text-align:center;
}

/* --mail---*/

input[type=date], option, 
input[type=text], input[type=email], input[type=tel],input[type=name],textarea,select {
font-size: 125%;/*20px*/
line-height: 2.1;/*42px*/
padding:.75em 4.1666%;
}
input[type=date], input[type=text], option, 
input[type=email], input[type=name], input[type=tel],textarea,select {
display: inline-block;
width: 91.6666%;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
color: transparent;
}

input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
color: transparent;
}

input[type="button"], input[type="reset"], input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
border: 0;
font-size:300%;
padding:.25em .75em;
background-color:#b92d23;
color:white;
border-radius: .25em;
}

input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
background-color:#333;
}

::-webkit-input-placeholder { /* WebKit browsers */
color: #ccc;
font-style: italic;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #ccc;
font-style: italic;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #ccc;
font-style: italic;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #ccc !important;
font-style: italic;
}


/*--clear--*/

header:after,#header_pc:after,#drawer_menu li:after,#topmenu:after,#link:after,
#footmenu:after,.col2:after,.col3:after,.col4:after,.waku_red:after,
.float_l:after, .float_r:after{
display: block;
clear: both;
content: ''
}

@media screen and (min-width:568px) {
html {
font-size: 87.5%;/*14px*/
line-height: 2.5714;/*36px*/
}
}

 @media screen and (min-width:768px) {
html {
font-size: 100%;/*16px*/
line-height: 2.25;/*36px*/
}
.contents {
width: 81.3333%;
}
section {
padding-bottom: 3em;
}

#topmenu li {
width:50%;
float:left;
}

#footmenu li,
.col2>li,.col3>li,.col4>li{
float:left;
}

.col2>li,.col4>li{
margin:0 4.1666%;
}

.col2>li,.col4>li{
padding:1.5em 0;
overflow:hidden;
}

.col2>li,.col4>li{
width:41.6666%;
}

#footmenu li,
.col3 li{
width:30%;
margin:1.5em 1.6666%;
}
.ba_lound{
width:50%;
float:left;
}
}


@media screen and (min-width:960px) {
html {
font-size: 112.5%;/*18px*/
line-height: 2;/*36px*/
letter-spacing:0.025em;
}

header,#logo {
position: relative;
}

#drawer_menu {
background-color: #b42d23;
width: 100%;
position: relative;
overflow: hidden;
right: 0;
}
#drawer_menu li {
font-size: 56.25%;/*9px*/
line-height: 4;/*36px*/
float: left;
width: 20%;
text-align: center;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}

#drawer_menu li span {
display: block;
}

#header_pc {
padding:.75em 0;
text-align:center;
}

#header_pc,
#drawer_menu ul {
width: 91.6666%;
margin: 0 auto;
}

#drawer_menu ul li a {
color: white;
}

#topmenu li {
width:33.3333%;
}

#drawer_menu li a.active {
background-color: #333;
}

#drawer_menu li a.active:hover {
color: black;
}
#drawer_menu li a.active:hover {
background-color: #efefef;
}

#menu_btn, #drawer_menu .close {
display: none;
}

.float_l,.float_r {
padding:0;
}

.float_l>img, .float_r>img{
width: 45.8334%;
}

.float_l_kiji, .float_r_kiji {
width: 41.6666%;
padding:1.5em 4.1666%;
}
.float_l_kiji br, .float_r_kiji br {
display: inline-block;
}
.float_l_kiji {
margin: 0 0 0 4.1666%;
}
.float_r_kiji {
margin: 0 4.1666% 0 0;
}
.float_r>img{
float: right;
}
.float_l_kiji, .float_r_kiji, .float_l>img {
float: left;
}

}

@media screen and (min-width:1024px) {
.contents {
width: 75%;
}

#footer{
position:relative;
text-align:left;
}
#footer_r{
position: absolute;
bottom: 2em;
right: 0;
text-align:right;
}
}

@media screen and (min-width:1280px) {
#drawer_menu ul {
width: 83.3333%;
margin: 0 auto;
}
}
@media screen and (min-width:1600px) {
#header_pc {
width: 50%;
}
#drawer_menu ul, .contents {
width: 66.6666%;
}
section th,section td{
padding: 1.5em 3em;
}
.col4>li{
width:20%;
margin:0 2.5%;
}
}

@media screen and (min-width:2560px) {
.contents {
width: 50%;
}
}

@media print {
body {
color: black;
}
header, br, footer {
display: none;
}
}