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

@import url(https://fonts.googleapis.com/css?family=Oswald);

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

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

main {
display: block;
}

li {
list-style-position: inside;
}

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

article th,article td,
section th,section td{
padding: .75em 1.5em;
}

article td,section td{
text-align:left;
}

/* -- font -- */

h1 {
font-size: 175%;/*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: 125%;
}
.small {
font-size: 75%;
}
.pad_r {
padding-right: .5em;
}
.pad_l {
padding-left: .5em;
}

a {
text-decoration: none;
}

.title {
text-align: center;
}


/*--line waku back--*/

a, a:hover{
color: #231F20;
}

.waku_black{
box-sizing: border-box;
background-color: white;
border: 1px solid #231F20;
background-color: white;
}

.b_black,.b_black a,.t_black th{
color:white;
}

.b_black,.t_black th {
background-color: #231F20;
}

/*--float_kiji--*/

a.cta{
width:100%;
display:block;
background-color: white;
text-align:center;
font-weight:600;
padding:.75em 0;
border:2px solid #231F20;
color:#231F20;
-webkit-transition: color .3s, background-color .3s, box-shadow .3s, -webkit-transform .3s;
transition: color .3s, background-color .3s, box-shadow .3s, transform .3s;
}


a.cta:hover{
color:white;
background-color:black;
-webkit-transform: translateY(.125em);
transform: translateY(.125em);
}

/*--float_kiji--*/

.float_l, .float_r{
overflow:hidden;
}

.float_l_kiji, .float_r_kiji {
padding: 1.5em 8.3333%;
box-sizing:border-box;
position:relative;

}
.float_l_kiji p br, .float_r_kiji p br {
display: none;
}
.float_l_img, .float_r_img{
position:relative;
}
.float_l_img img, .float_r_img img {
width: 100%;
}

.float_l_kiji h1,.float_r_kiji h1,
.float_l_kiji h2,.float_r_kiji h2{
margin-top:0;
}

/* --selection---*/

::selection {
background: #231F20;
color:white;
}
::-moz-selection {
background: #231F20;
color:white;
}

/*--contents--*/

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

/*--header--*/

#header {
z-index: 9990;
width:100%;
position: fixed;
background-color:white;
box-sizing: border-box;
top:0;
}

#logo {
width:25%;
margin: .75em auto .75em 16.6666%;
}

#header_pc {
overflow:hidden;
}

#top_margin {
margin-top: 10em;
}

.fixed {
position: fixed !important;
top: 0;
border-bottom:1px solid black;
-webkit-animation-duration:1s;
animation-duration:1s;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
visibility: visible !important;
}

@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0);  transform: translateY(0); }
}

#menu_btn span {
display: block;
}

/* ----- drawermenu ----- */

#drawer_menu {
width: 100%;
right: -100%;
top: 0;
z-index: 9998;
opacity:0;
transition:opacity 0.1s linear;
text-align:center;
}

#drawer_menu,
#drawer_menu ul>li a,
#drawer_menu ul>li a:hover{
color: white;
}

#drawer_menu ul li {
width:50%;
float:left;
list-style: none;
box-sizing:border-box;

}

#drawer_menu ul>li a{
display:block;
}

#drawer_menu ul>li a img{
width:75%;
border-radius:50%;
padding: 0 12.5%;
}

#drawer_menu ul>li a,.close{
display: block;
padding: 1.5em 0;
}

#drawer_menu ul>li a:hover{
color:#231F20;
background-color:white;
}

#drawer_menu.block {
opacity:1;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
background-color:black;
}

#drawer.block:not(:target) {
right: 0\9;
}

#drawer_menu .close {
color:black;
background-color:white;
display:block;
}

#drawer_menu .close:hover {
cursor: pointer;
}

#drawer_menu .close:after {
content: "";
position: absolute;
top: 0;
right: 0;
}

#drawer_menu_overlay {
z-index: -1;
transition: .1s;
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;
}

#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 {
display: none;
}

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

.bar {
width: 50%;
height: 3%;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-transform-origin: left top;
transform-origin: left top;
background-color: black;
}
#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, #menu_shop {
position: relative;
}
#menu_btn,#menu_shop:hover{
cursor: pointer;
}

#menu_btn, #menu_shop {
font-size: 66.6%;
line-height: 2;
width: 16.6666%;
height: 100%;
position:absolute;
top:0;
}

#menu_btn{
right:0;
}

#menu_shop{
background-color: #231F20;
right:16.6666%;
}

#menu_shop a{
width: 100%;
display:block;
}

#menu_shop a:hover{
background-color:#666;
}

#menu_btn p, #menu_shop img, #menu_shop p {
position: absolute;
text-align: center;
}

#menu_shop img {
left: 0;
right: 0;
bottom: 0;
top: -25%;
margin: auto;
width:50%;
}

#menu_btn p, #menu_shop p {
bottom: -7.5%;
}

#menu_shop p {
width: 100%;
}
.bar, #menu_btn p {
left: 25%;
right: 25%;
color:black;
}

#menu_btn,#menu_btn:hover,
#menu_shop a{
color: white;
}

#menu_btn:hover a, #menu_shop:hover a{
background-color: #888;
}


/*--submenu&col--*/

.col2>li,.col3>li,.col4>li{
list-style:none;
padding: 1.5em 0;
}

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

.col2>li li,.col3>li li{
float:none;
width:100%;
font-size:87.5%;
padding:0;
list-style-type:square;
list-style:inside;
}

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

.col2>li p a:hover,.col3>li p a:hover,.col4>li p a:hover{
background-color:#231F20;
color:white;
}

.col3>li{
float:left;
margin:0 4.1666%;
width:25%;
}

/*--top--*/

#slider,
#topmenu li img{
width: 100%;
}

#slider{
color:white;
text-align: center;
padding: 3em 0;
}

#topmenu li img{
border-radius:25%;
}

#slider h1{
margin:0;
font-size:300%;
line-height:1.5;
letter-spacing:.125em;
font-family: 'helvetica','Open Sans',sans-serif;
}

/* calender */

.googlecal {
position: relative;
padding-bottom: 100%; /* 縦横比 */
height: 0;
}
.googlecal iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

/*--footer--*/

footer img{
width:20%;
}

#copy{
font-size:75%;
}

/* --mail---*/

table{
width: 100%;
border: 1px #eee solid;
border-collapse: collapse;
word-break: break-all;
box-sizing:border-box;
}

th,td {
display: block;
}

th{
padding: 1em 4.1666%;
text-align: center;
border: 1px #eee solid;
background-color: #231F20;
color:white;
}

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

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

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;
box-sizing: border-box;
}
input[type=date], input[type=text], option, 
input[type=email], input[type=name], input[type=tel],textarea,select {
display: inline-block;
width: 100%;
}

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:200%;
padding:.25em .75em;
background-color: #231F20;
color:white;
border-radius: .25em;
}

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

::-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,td ul:after,
#header_pc:after, #drawer_menu li:after,#drawer_menu>ul:after,
.col2:after,.col3:after,.col4:after,
.float_r:after,.float_r_img:after,
.float_l:after,.float_l_img:after{
display: block;
clear: both;
content: ''
}

@media screen and (min-width:375px) {
.big {
font-size: 150%;
}
p br {
display:inline-block;
}

}

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

#drawer_menu ul>li {
width:25%;
}

.col2>li,.col4>li{
float:left;
margin:0 4.1666%;
padding:1.5em 0;
overflow:hidden;
width:41.6666%;
}
}

@media screen and (min-width:768px) {
html {
font-size: 100%;/*16px*/
line-height: 2.25;/*36px*/
}

table th{
width:30%;
}

th,td{
display:table-cell;
}

td br{
display:inline-block;
}

#menu_btn p, #menu_shop p {
bottom: 0;
}

.contents {
width: 81.3333%;
}

section {
padding-bottom: 3em;
}

#top h1{
font-size:500%;
}
#top br{
display:inline-block;
}
}

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

#header_pc{
position: relative;
}

#logo {
margin: 0 16.6666% 0 0;
width: 16.6666%;
}

#header_pc {
width: 75%;
}

#top_margin {
margin-top: 6em;
}

#drawer_menu {
width: auto;
opacity: 1;
right: 0;
top: 18.3333%;
left: 33.3333%;
}

#drawer_menu,#menu_shop{
font-size: 125%;
font-weight: 600;
position: absolute;
}

#drawer_menu ul>li {
width:auto;
margin:0 3.3333%;
text-align: center;
background-color: transparent;
position:relative;
}

#drawer_menu ul>li a {
padding:0;
color:black;
}

#drawer_menu ul>li a:after {
content: '';
position: absolute;
bottom: 1em;
left: 0;
width: 100%;
height: 2px;
-webkit-transform: scaleX(0);
transform: scaleX(0);
background-color:#231F20;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}

#drawer_menu ul>li a:hover:after {
-webkit-transform: scaleX(1);
transform: scaleX(1);
color: black;
}

#header_pc {
margin: 0 auto;
padding: 1.5em 0;
}

#menu_shop{
right: 0;
overflow: hidden;
background-color: #231F20;
top: 33.3333%;
width:25%;
border-radius:1em;
z-index:9999;
}

#menu_shop,#menu_shop a{
height: 2em;
}

#menu_shop img {
right: 62.5%;
width:auto;
top: 6.25%;
}

#menu_shop p{
margin: 0;
bottom: 0;
left: 6.25%;
}

#slider{
width:75%;
margin:0 auto 3em auto;
padding: 12em 0;
}

.col4>li{
width:20%;
margin:0 2.5%;
}

.waku_black, .waku_ussky {
padding: 1.5em 3em;
}

#menu_btn,#drawer_menu .close,
#drawer_menu .sp,#drawer_menu ul>li a img{
display: none;
}

.float_l_kiji h1,.float_r_kiji h1,
.float_l_kiji h2,.float_r_kiji h2{
margin-top:0;
}

.float_l_img, .float_r_img{
width: 45% !important;
}

.float_r_img img,.float_l_img img{
object-fit: cover;
}

.float_l_kiji,.float_r_img{
float: right;
}
.float_r_kiji,.float_l_img{
float: left;
}

.float_l_kiji, .float_r_kiji {
width:55% !important;
padding:4.1666%;
margin-top: 0;
}

.float_l_kiji{
padding: 3em 4.1666% 3em 8.3333%;
}

.float_r_kiji {
padding: 3em 8.3333% 3em 4.1666%;
}

.googlecal { padding-bottom: 75%; }
}

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

@media screen and (min-width:1600px) {
.contents {
width: 58.3333%;
}
section th,section td{
padding: 1.5em 3em;
}
#logo {
width: 8.3333%;
}
}

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

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