@charset "utf-8";


/* 初期スタイル */
*, *::after, *::before {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  max-width: 100%;
}

/* 共通スタイル */
:root{
  --vw: 1vw;
}
.size-100{
  width: calc(var(--vw) * 100);
}
.size-50{
  width: calc(var(--vw) * 50);
}
body {
  color: #fff;
  font-family: "M PLUS 1p", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-size: clamp(1rem, 0.899rem + 0.51vw, 1.5rem);
}
.pc_only {
  display: block;
}
.sp_only {
  display: none;
}
@media (width < 782px) {
  .pc_only {
    display: none;
  }
  .sp_only {
    display: block;
  }
}


/* 
ネオンタイトルの共通部分
*/
.title {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50px;
}
.title_neon {
  width: 30%;
}
.title_img {
  width: 30%;
}
@media ( width < 768px) {
  .title_img {
    width: 300px;
  }
}
/* 
ネオンタイトルの共通部分 レスポンシブ
*/
@media ( width < 768px) {
  .title {
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
  }
  .title_neon {
    display: none;
  }
  .title_img {
    width: 350px;
  }
}
/* スタイル */
.container {
  background: #1a1a1a;
}
.editor-styles-wrapper .container {
  background: #1a1a1a; 
}
/* 
ヘッダー
*/
.header {
  background-color: #1a1a1a;
  width: calc(var(--vw) * 100);
  height: 95px;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  z-index: 5;
}
.logo_link {
  width: 300px;
}
.logo {
  width: 300px;
}
.nav_pc_header {
  width: 50%;
}
.nav_item {
  margin-left: 20px;
}
.nav_link {
  color: #fff;
  text-shadow:
    0 0 2px #fff,
    0 0 3px #ff00ff,
    0 0 4px #ff00ff,
    0 0 10px #ff00ff,
    0 0 12px #ff00ff,
    0 0 13px #ff00ff,
    0 0 14px #ff00ff,
    0 0 15px #ff00ff;
    font-size: 20px;
    font-family: 'Train One', cursive;
}

.header_right {
   display: block;
}

/* 
ヘッダー レスポンシブ
*/
@media ( width > 987px) {
  .hamburger-nav {
    display: none;
  }
  .pc_only_nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}
@media ( width < 988px) {
  .header {
    padding: 5px;
  }
  .nav_pc_header,
  .header_right {
    display: none;
  }
  .sp_only_nav {
    display: block;
  }
}

/* ここから下がハンバーガーメニューに関するCSS */
/*   
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1900;/* 重なり順を一番上にする */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #fff;
  transition: 0.5s;
  position: absolute;
}


/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}

.graw-icon {
  padding-top: 0;
}

/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 999;
  background: #1a1a1a;
  transition: .5s;
}

.nav-box {
  max-width: 500px;
  margin: 55px auto 0;
  text-align: center;
}
.nav-logo {
  width: 60px;
  height: auto;
}
.nav-text{
  margin-bottom: 35px;
  font-weight: bolder;
}
.nav_item {
  width: 150px;
  margin: 40px auto;
  padding-top: 8px;
  text-align: center;
}

.humberger_links {
  margin-top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  left: 0;  /* メニューを画面に入れる */
} 

.drawer__nav.active {
  opacity: 1;
  visibility: visible;
}

/* sec01 */
.main {
  padding-top: 95px;
}
.sec01 {
  width: 100%;
  position: relative;
}
.picture {
  width: 100%;
}
.sourse {
  width: 100%;
}
.top_img {
  width: 100%;
}
.catch {
  width: 30%;
  position: absolute;
  top: 30px;
  left: 50px;
}
.links {
  position: fixed;
  width: 50px;
  height: 200px;
  top: 95px;
  right: 0;
  z-index: 10;
}
/* 
sec01 レスポンシブ
*/
@media ( width < 950px) {
  .main {
    padding-top: 20px;
  }
  .sec01 {
    position: relative;
  }
  .picture {
    position: absolute;
    top: 300px;
  }
  .catch {
    width: 300px;
    top: 74px;
    left: 50%;
    transform: translateX(-50%);
  }
  .links {
    display: none;
  }
}



/* sec02 */
.sec02 {
  padding: 100px 0 0;
}
.sec02_wrapper {
  padding: 50px 0;
}
.kodawari_link,
.osusume_link,
.message_link {
  display: flex;
  justify-content: center;
  align-items: center;
}
.top_kodawari_box {
  width: 50%;
  text-align: center;
}
.kodawari_img_link,
.osusume_img_link,
.message_img_link {
  width: 100%;
}
.kodawari_img,
.osusume_img,
.message_img {
  margin: 30% auto 0;
  width: 50%;
}
/* 
sec02 レスポンシブ
*/
@media ( width < 950px) {
  .sec02 {
    padding-top: 750px;
  }
}
@media ( width < 768px ) {
  .sec02 {
    padding-top: 1160px;
  }
  .sec02_wrapper {
    padding-top: 0;
  }
}
@media ( width < 682px) {
  .sec02 {
    padding-top: 1032px;
  }
}
@media ( width < 570px) {
  .sec02 {
    padding-top: 175%;
  }
}
@media ( width < 400px) {
  .sec02 {
    padding-top: 194%;
  }
}
/*==================================================
スライダーのためのcss
===================================*/
.slider_wrapper {
  margin-top: 50px;
  margin-bottom: 100px;
}
.slider {
  position:relative;
}

.slider_img_box {
  width: 100%;
}
.slider_img {
  width: 100%;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
  position: absolute;/*絶対配置にする*/
  z-index: 5;
  top: 42%;
  cursor: pointer;/*マウスカーソルを指マークに*/
  outline: none;/*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #ccc;/*矢印の色*/
  border-right: 2px solid #ccc;/*矢印の色*/
  height: 25px;
  width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
  left:2.5%;
  transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
  right:2.5%;
  transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
  position: relative;
  z-index: 3;
  text-align:center;
  margin:-50px 0 0 0;
}

.slick-dots li {
  display:inline-block;
  margin:0 5px;
}

.slick-dots button {
  color: transparent;
  outline: none;
  width:8px;/*ドットボタンのサイズ*/
  height:8px;/*ドットボタンのサイズ*/
  display:block;
  border-radius:50%;
  background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
  background:#333;/*ドットボタンの現在地表示の色*/
}


/* sec03 */
.sec03 {
  text-align: right;
}
.button_link {
  margin: 50px 70px 0 0;
}
@media ( width < 768px) {
  .sec03 {
    padding-bottom: 50px;
    text-align: center;
  }
  .button_link {
    width: 300px;
    margin: 50px auto 0;
  }
}
/* sec04 */
.sec04 {
  padding-top: 100px;
}
.shop_info_flex {
  display: flex;
  justify-content: center;
  align-self: start;
  margin: 100px 0 0;
}
.shop_info_left {
  width: 50%;
}
.shop_info_table {
  display: flex;
  justify-content: center;
}
.shop_info_th {
  font-weight: normal;
  padding-right: 40px;
  padding-bottom: 20px;
}
.shop_info_right {
  width: 50%;
} 
.shop_info_img {
  width: 50%;
}    
@media ( width < 768px) {
  .shop_info_flex {
    align-items: center;
    flex-direction: column;
    margin: 50px 0 0;
  }
  .shop_info_left {
    margin-bottom: 40px;
  }
  .shop_info_right {
    width: 100%;
  }
  .shop_info_table {
    margin-bottom: 30px;
  }
}
@media ( width < 768px) {
  .shop_info_tr {
    display: block;
  }
  .shop_info_th {
    color: blanchedalmond;
    display: block;
    font-weight: bold;
    margin-top: 30px;
    padding-bottom: 10px;
  }
  .shop_info_td {
    line-height: 1.7;
  }
  .shop_info_img {
    width: 100%;
}
}

/* sec05 */
.sec05 {
  padding-top: 150px;
}
.iframe {
  width: 100%;
  height: 500px;
  margin-bottom: 150px;
}

/* footer */
.yoyaku_uketuke {
  text-align: center;
}
.tel {
  text-align: center;
  margin-bottom: 30px;
}
.footer_links {
  margin-left: 100px;
}
.insta_link {
  margin-bottom: 30px;
}
.insta {
  width: 45px;
}
.taberogu_link {
  margin-top: 10px;
  height: 40px;
}
.small_box {
  text-align: center;
  padding: 100px 0;
}
@media ( width < 768px){
  .footer_links {
    margin-left: 50px;
  }
}
/* kodawari page */

/* kodawari_sec01 */
.kodawari_sec01 {
  padding-bottom: 100px;
}
.kodawari_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kodawari_harami_img,
.kodawari_tan_img,
.kodawari_soup_img {
  width: 50%;
}
.kodawari_box {
  width: 50%;
  text-align: center;
  position: relative;
}
.kodawari_image_box {
  position: absolute;
  top: -100px;
  right: 10%;
  transform: rotate( 20deg );
  width: 270px;
}
.kodawari_tan_image_box {
  position: absolute;
  top: -100px;
  left: 10%;
  transform: rotate( -20deg );
  width: 270px;
}
@media ( width < 1110px) {
  .kodawari_image_box {
    transform: rotate( 0deg );
    top: -90px;
    right: 25%;
  }
  .kodawari_tan_image_box {
    transform: rotate( 0deg );
    top: -90px;
    left: 25%;
  }
}
@media ( width < 768px) {
  .kodawari_sec01 {
    padding-bottom: 0;
  }
  .kodawari_wrapper {
    flex-direction: column;
    margin-bottom: 30px;
    justify-content: center;
  }
  .recolumn {
    flex-direction: column-reverse;
  }
  .kodawari_image_box {
    top: 4px;
    right: 50%;
    transform: rotate( 0deg ) translateX(50%);
    max-width: 100%;
    text-align: center;
    margin-bottom: 10px;
  }
  .kodawari_tan_image_box {
    top: 4px;
    left: 50%;
    transform: rotate( 0deg ) translateX(-50%);
    max-width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }
  .kodawari_box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 57%;
  }
  .kodawari_text {
    margin-top: 75px;
    height: 100%;
    margin-bottom: 25px;
  }
  .kodawari_harami_img,
  .kodawari_tan_img,
  .kodawari_soup_img {
    width: 100%;
    margin-bottom: 20px;
  }
}


/* kodawari_sec02 */
.kodawaro_sec02 {
  padding-top: 100px;
}
.osusume_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.osusume_curry_img {
  width: 50%;
}
.osusume_text {
  padding-left: 80px;
  width: 475px;
}
@media ( width < 768px){
  .osusume_wrapper {
    flex-direction: column;
  }
  .osusume_curry_img {
    width: 100%;
    margin-bottom: 20px;
  }
  .osusume_text {
    padding: 0;
    width: 70%;
    margin: 0 auto;
  }
}


/* kodawari_sec03 */
.sec_kodawari_sec03 {
  padding-top: 100px;
  text-align: center;
}
.message_title {
  margin-bottom: 30px;
}
.message_text {
  text-align: left;
  padding-left: 20%;
  line-height: 1.8;
  margin-bottom: 30px;
}
.message_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.message_plate_img {
  width: 50%;
  margin-bottom: 150px;
}
@media ( width < 960px){
  .message_text {
    width: 308px;
    margin: 0 auto 30px;
    text-align: left;
    padding-left: 0%;
  }
}
@media ( width < 768px){
  .message_wrapper {
    display: block;
  }
  .message_text {
    width: 80%;
  }
  .message_plate_img {
    width: 100%;
    margin-bottom: 100px;
  }
}

/* menu page */
#menu_main {
  padding: 95px 0 150px;
}
.menu_wrapper {
  padding-left: 4%;
  padding-right: 4%;
}
/* menu_sec01 */
.menu_grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.menu_title {
  font-family: 'Aoboshi One';
  width: 80%;
  text-align: center;
  padding: 20px;
  margin: 20px auto;
  border: 4px solid #FCA6F2 ;
}
.menu_table {
  text-align: left;
}
.menu_td {
 padding: 8px;
}
.price {
  text-align: right;
}
.tan_td {
  padding-right: 60px;
}
.soup_td {
  padding-right: 110px;
}
@media ( width < 1065px){
  .menu_grid {
    display: block;
    margin-top: 40px;
  }
  .menu_title,
  .menu_table {
    margin: 20px auto;
    width: 80%;
  }
  .menu_td {
    padding: 7px 0px;
  }
}


/* menu_sec02 */
.menu_sec02 {
  padding-top: 100px;
}
.menu_sec02_flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drink_img {
  width: 33%;
}
.makkori {
  margin-bottom: 30px;
}
.right {
  text-align: right;
  padding-right: 20%;
}
.drink_td {
  padding-right: 70px;
}
.softdrink_td,
.cocktail_td {
  padding-right: 112px;
}
@media ( width < 1019px) {
  .menu_sec02 {
    padding-top: 30px;
  }
  .makgeolli_box {
    margin: 20px auto;
    width: 80%;
  }
  .right {
    padding-right: 0;
  }
  .soup_td,
  .drink_td,
  .cocktail_td,
  .softdrink_td {
    padding-right: 0px;
  }
}


/* shop page */

/* shop_sec01 */
.shop_flex_box,
.shop_flex_box_under {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shop_img {
  width: 50%;
}
.text_box {
  width: 50%;
  text-align: center;
}
.shop_text {
  line-height: 1.8;
}
.shop_under_line {
  border-bottom: #ff00ff 3px solid;
  padding-bottom: 2px;
}
/* shop_sec02 */
.shop_sec02 {
  margin-top: 100px;
}
.shop_flex_box_under {
  margin-bottom: 100px;
}
.shop_info_text {
  width: 50%;
}

@media ( width < 768px) {
  .shop_flex_box,
  .shop_flex_box_under {
    flex-direction: column;
  }
  .shop_img {
    width: 100%;
    margin-bottom: 20px;
  }
  .text_box {
    width: 80%;
    margin-bottom: 70px;
  }
  .column_reverse {
    flex-direction: column-reverse;
  }
}

/* 404 */
.container-fluid {
  height: 80vh;
}
.content-404 {
  width: 80%;
  margin: 0 auto;
  padding-top: 30%;
}
input {
  background-color: #fff;
  color: #1a1a1a;
}