@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Pacifico);

/* reset */
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;
}
ul {
 list-style: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
caption,
th {
 text-align: left;
}
q:before,
q:after {
 content: '';
}
object,
embed {
 vertical-align: top;
}
legend {
 display: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
 font-size: 100%;
}
img,
abbr,
acronym,
fieldset {
 border: 0;
}

body {
 font: 14px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,
  'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,
  sans-serif;
 font-weight: 300;
 -webkit-text-size-adjust: 100%;
 overflow-x: hidden;
 color: #000;
 background: #fff;
}

a {
 color: #0066ff;
 text-decoration: none;
}

a:hover,
.active {
 text-decoration: underline;
}

a:active,
a:focus,
input:active,
input:focus {
 outline: 0;
}

/* ヘッダー
------------------------------------------------------------*/
#header {
 text-align: center;
}

#header h1 {
 padding-top: 60px;
}

#mainnav a {
 color: #000;
}

#mainImg {
 position: relative;
 overflow: hidden;
 width: 100%;
 height: 5px;
}

#mainImg img {
 position: absolute;
 left: 50%;
 max-width: 1280px;
 width: 1280px;
 height: 632px;
 margin-left: -640px;
}

/* フッター
------------------------------------------------------------*/
#footer {
 clear: both;
 padding: 50px 10px 50px 0;
 text-align: center;
 font-size: 12px;
}

/* 共通
------------------------------------------------------------*/

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

section {
 clear: both;
 padding-top: 70px;
}

section h2 {
 font-family: 'Kozuka Mincho Pr6N', cursive;
 width: 100%;
 max-width: 1000px;
 margin: 0 auto 40px;
 font-size: 24px;
 font-weight: normal;
 text-align: center;
 position: relative;
}

section h2::before {
 content: '';
 position: absolute;
 top: 50%;
 left: 0;
 width: 100%;
 height: 2px;
 background: #000;
}

section h2 span {
 background: #fff;
 padding: 0 20px;
 position: relative;
 z-index: 1;
}

section h3 {
 margin-bottom: 10px;
 font-size: 16px;
 text-decoration: underline;
}

.inner {
 width: 94%;
 margin: 0 auto;
 padding-bottom: 50px;
}

.innerS {
 width: 60%;
 margin: 0 auto;
 padding-bottom: 80px;
}

.innerS2 {
 width: 70%;
 margin: 0 auto;
 padding-bottom: 20px;
}

/* SEC02 Gallery
------------------------------------------------------------*/
#sec02 {
 padding: 0 0 70px 0;
}

#sec02 .slick-next {
 right: 10px;
 width: 30px;
 height: 30px;
 background: #fff;
 border-radius: 20px;
 -moz-box-shadow: 0px 3px 21px 7px rgba(0, 0, 0, 0.35);
 -webkit-box-shadow: 0px 3px 21px 7px rgba(0, 0, 0, 0.35);
 -ms-box-shadow: 0px 3px 21px 7px rgba(0, 0, 0, 0.35);
 box-shadow: 0px 3px 21px 7px rgba(0, 0, 0, 0.35);
 opacity: 0.8;
}

#sec02 .slick-prev {
 left: 10px;
 z-index: 1;
 width: 30px;
 height: 30px;
 background: #fff;
 border-radius: 20px;
 -moz-box-shadow: 0px 3px 21px 7px rgba(0, 0, 0, 0.35);
 -webkit-box-shadow: 0px 3px 21px 7px rgba(0, 0, 0, 0.35);
 -ms-box-shadow: 0px 3px 21px 7px rgba(0, 0, 0, 0.35);
 box-shadow: 0px 3px 21px 7px rgba(0, 0, 0, 0.35);
 opacity: 0.8;
}

#sec02 .slick-slide {
 margin: 0 5px;
}

#sec02 .slick-prev:before,
#sec02 .slick-next:before {
 content: '';
 position: absolute;
 top: 9px;
 width: 10px;
 height: 10px;
 border-top: 3px solid #000;
 border-right: 3px solid #000;
}

#sec02 .slick-next:before {
 transform: rotate(45deg);
 right: 10px;
}

#sec02 .slick-prev:before {
 transform: rotate(-135deg);
 left: 10px;
}

#sec02 .slick-dotted.slick-slider {
 margin-bottom: 20px;
}

#sec02 .dots {
 position: relative;
}

/* SEC03 PROJECT
------------------------------------------------------------*/
#sec03 {
 padding-top: 0;
}

#sec03 .charge-txt {
 display: block;
 text-align: center;
}

#sec03 .charge-txt span {
 background: #000;
 color: #fff;
 padding: 0 40px;
 display: inline-block;
 font-weight: bold;
}

#sec03 .menu {
 display: flex;
 flex-flow: row wrap;
 justify-content: flex-start;
 align-items: flex-start;
 max-width: 1000px;
 width: 94%;
}

#sec03 .menu .menu-box {
 margin: 20px 0 0 0;
 width: 30%;
 text-align: left;
}

#sec03 .menu .menu-box:nth-child(2n),
#sec03 .menu .menu-box:nth-child(3n) {
 margin-left: 5%;
}

#sec03 .menu .menu-box h3:not(:first-child) {
 margin-top: 20px;
}

#sec03 .menu-list {
 display: flex;
 flex-flow: row wrap;
 justify-content: space-between;
}

#sec03 .menu-list dt {
 width: 80%;
}

#sec03 .menu-list dd {
 width: 20%;
 text-align: right;
}

#sec03 .frozen-menu-list dt {
 width: calc(100% - 70px);
}

#sec03 .frozen-menu-list dd {
 width: 70px;
}

#sec03 .frozen-menu {
 font-size: 12px;
 display: block;
 line-height: 1.5;
 padding: 10px;
 border: 1px solid #999;
 background: #eee;
 margin-top: 5px;
}

/*---カクテルメニュー---*/
#sec03 .cocktail-menu {
 margin-top: 40px;
}

#sec03 .cocktail-menu-ttl {
 display: block;
 text-align: center;
 position: relative;
 font-size: 20px;
}

#sec03 .cocktail-menu-ttl::before {
 content: '';
 position: absolute;
 top: 50%;
 left: 20%;
 width: 60%;
 height: 1px;
 background: #000;
 z-index: 0;
}

#sec03 .cocktail-menu-ttl span {
 display: inline-block;
 background: #fff;
 padding: 0 10px;
 z-index: 1;
 position: relative;
}

/* SEC04 BRAND
------------------------------------------------------------*/
.col3 img {
 display: block;
 margin: 0 auto 5px;
}

.col3 li {
 line-height: 2;
}

.col3 .img {
 padding: 80px 50px;
 margin-bottom: 40px;
 line-height: 0 !important;
 background: #f6f6f6;
}

#sec04_02 {
 background: url(../images/bgSec04.jpg) no-repeat 100% 100% fixed;
 background-size: cover;
 -webkit-background-size: cover;
 text-align: center;
 padding: 220px 20px;
}

#sec04_02 img {
 width: auto;
}

/* SEC05 COMPANY
------------------------------------------------------------*/
#sec05 p {
 margin-bottom: 5px;
}

.col2 li {
 display: inline-block;
 width: 100%;
 margin: 10px 0;
}

#sns img {
 padding: 35px 10px 5px 0;
}

#sns a:hover img {
 opacity: 0.8;
}

#map {
 position: relative;
 padding-bottom: 75%;
 height: 0;
 overflow: hidden;
 z-index: 0;
}

#map iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100% !important;
 height: 100% !important;
 border: 0;
}

/* RESPONSIVE 設定
------------------------------------------------------------*/

@media only screen and (min-width: 1200px) {
 .inner {
  width: 1024px;
 }
}

@media screen and (max-width: 1000px) {
 section h2 {
  width: 94%;
 }
}

@media only screen and (min-width: 800px) {
 body {
  font-size: 14px;
 }

 a#menu {
  display: none;
 }

 .panel {
  display: block !important;
 }

 #mainnav li {
  display: inline-block;
  padding: 50px 25px;
  font-size: 15px;
 }

 /* SEC03 PROJECT
	-----------------*/
 .col3 {
  text-align: center;
 }

 .col3 li {
  display: inline-block;
  width: 28%;
  padding: 0 2.5% 50px;
  margin-bottom: 0;
  vertical-align: top;
  text-align: left;
 }

 #footer {
  padding: 30px 10px 70px 0;
 }
}

@media screen and (max-width: 767px) {
 #sec03 .menu .menu-box {
  width: 45%;
 }

 #sec03 .menu .menu-box:nth-child(2n) {
  margin-left: 10%;
 }

 #sec03 .menu .menu-box:nth-child(3n) {
  margin-left: 0;
 }

 #sec03 .menu-list dt {
  width: calc(100% - 60px);
 }

 #sec03 .menu-list dd {
  width: 60px;
 }
}

@media only screen and (min-width: 641px) {
 .col2 li {
  width: 60%;
  vertical-align: top;
 }
 .col2 li:first-child {
  width: 35%;
  padding-right: 4%;
 }
}

@media only screen and (max-width: 640px) {
 .innerS {
  width: 94%;
  padding-bottom: 70px;
 }
 .col3 li {
  line-height: 1.7;
 }
 .col3 img {
  margin: 0 auto;
 }
 .col3 .img {
  padding: 30px;
  margin-bottom: 20px;
 }
 #map iframe {
  width: 96% !important;
  left: 2%;
 }
 #sec04_02 {
  padding: 50px 20px;
 }
}

@media screen and (max-width: 500px) {
 #sec02 .slick-slide img {
  width: 300px;
  height: auto;
 }

 #sec03 .menu .menu-box {
  width: 100%;
  max-width: 375px;
  margin: 20px auto 0;
 }

 #sec03 .menu .menu-box:nth-child(2n),
 #sec03 .menu .menu-box:nth-child(3n) {
  margin: 20px auto 0;
 }
}

@media only screen and (max-width: 799px) {
 #header {
  position: fixed;
  width: 100%;
  z-index: 500;
 }

 #headerWrap {
  position: relative;
  width: 100%;
  height: 70px;
  background: #fff;
  border-bottom: 1px solid #ccc;
 }

 #header h1 {
  padding-top: 10px;
 }

 #header h1 img {
  margin-top: 3px;
  max-height: 45px;
  width: auto !important;
 }

 a#menu {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  margin: 10px;
 }

 #menuBtn {
  display: block;
  position: absolute;
  top: 60%;
  left: 50%;
  width: 18px;
  height: 2px;
  margin: -1px 0 0 -7px;
  background: #000;
  transition: 0.2s;
 }

 #menuBtn:before,
 #menuBtn:after {
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 2px;
  background: #000;
  transition: 0.3s;
 }

 #menuBtn:before {
  margin-top: -7px;
 }

 #menuBtn:after {
  margin-top: 5px;
 }

 a#menu .close {
  background: transparent;
 }

 a#menu .close:before,
 a#menu .close:after {
  margin-top: 0;
 }

 a#menu .close:before {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
 }

 a#menu .close:after {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
 }

 .panel {
  width: 100%;
  display: none;
  overflow: hidden;
  position: relative;
  left: 0;
  top: 0;
  z-index: 100;
 }

 #mainnav {
  position: absolute;
  top: 0;
  width: 100%;
  text-align: right;
  z-index: 500;
 }

 #mainnav ul {
  border-bottom: 1px solid #ccc;
  background: #fff;
  text-align: left;
 }

 #mainnav li a {
  position: relative;
  display: block;
  padding: 15px 25px;
  border-bottom: 1px solid #ccc;
  color: #000;
  font-weight: 400;
 }

 #mainnav li a:before {
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: 5px;
  width: 6px;
  height: 6px;
  margin: -4px 0 0 0;
  border-top: solid 2px #000;
  border-right: solid 2px #000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
 }
 #mainImg {
  padding-top: 60px;
  z-index: -100;
 }
 .col3 li {
  margin: 50px auto 0 auto;
  display: block;
 }
 section {
  padding-top: 50px;
 }
 section h2 {
  margin: 0 auto 10px;
 }
 section h2 span {
  padding: 0 10px;
 }
}