/*!
Theme Name: butagoya
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: butagoya
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

butagoya is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

:root{

	--content_inner_wrap_width: 1184px;
	--black_color: #4D4D4D;
	--black2_color: #545252;
	--green_color: #008E52;
	--gray_color: #707070;
	--gray2_color: #808080;
	--gray3_color: #4d4d4d;
	--background_gray: #f2f2f2;
	--white_color: #FFFFFF;
	--border-radius_L: 70px;
	--border-radius_LL: 80px;
}


h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder }


body{
	background: #fffbef;
	margin: 50px 0 0;
}

.page_common{
	margin: 30px auto 0;
	max-width: var(--content_inner_wrap_width);
}

img{
	width: 100%;
}

a{
	transition: 0.5s;
}

a:hover{
	opacity: 0.6;
}

/* 共通パーツ */
.contents_wrap{
	max-width: var(--content_inner_wrap_width);
	width: 100%;
	margin: 0 auto;
}

.red{
	color: #F14153;
}

@media screen and (max-width:1224px) {
	.contents_wrap{
		width: calc(100% - 80px);
		margin: 0 40px;
	}
}

@media screen and (max-width: 600px) {
	.contents_wrap{
		width: calc(100% - 40px);
		margin: 0 20px;
	}

	body{
		margin: 30px 0 0;
	}
}

@media screen and (max-width: 400px) {
	.contents_wrap{
		width: calc(100% - 20px);
		margin: 0 10px;
	}
}

/* 波線処理↓↓ */
.cstm_wave_top_bottom {
--mask:
    radial-gradient(33.6px at 50% 47px, #000 99%, #0000 101%) calc(50% - 40px) 0/80px 51% repeat-x,
    radial-gradient(33.6px at 50% -27px, #0000 99%, #000 101%) 50% 20px/80px calc(51% - 20px) repeat-x,
    radial-gradient(33.6px at 50% calc(100% - 47px), #000 99%, #0000 101%) calc(50% - 40px) 100%/80px 51% repeat-x,
    radial-gradient(33.6px at 50% calc(100% + 27px), #0000 99%, #000 101%) 50% calc(100% - 20px)/80px calc(51% - 20px) repeat-x;
-webkit-mask: var(--mask);
mask: var(--mask);

@media (max-width: 1023px) {

--mask:
    radial-gradient(30.24px at 50% 42.3px, #000 99%, #0000 101%) calc(50% - 36px) 0/72px 51% repeat-x,
    radial-gradient(30.24px at 50% -24.3px, #0000 99%, #000 101%) 50% 18px/72px calc(51% - 18px) repeat-x,
    radial-gradient(30.24px at 50% calc(100% - 42.3px), #000 99%, #0000 101%) calc(50% - 36px) 100%/72px 51% repeat-x,
    radial-gradient(30.24px at 50% calc(100% + 24.3px), #0000 99%, #000 101%) 50% calc(100% - 18px)/72px calc(51% - 18px) repeat-x;
  @media (max-height: 500px) {
    --mask:
      radial-gradient(16.01px at 50% 22.5px, #000 99%, #0000 101%) calc(50% - 20px) 0/40px 51% repeat-x,
      radial-gradient(16.01px at 50% -12.5px, #0000 99%, #000 101%) 50% 10px/40px calc(51% - 10px) repeat-x,
      radial-gradient(16.01px at 50% calc(100% - 22.5px), #000 99%, #0000 101%) calc(50% - 20px) 100%/40px 51% repeat-x,
      radial-gradient(16.01px at 50% calc(100% + 12.5px), #0000 99%, #000 101%) 50% calc(100% - 10px)/40px calc(51% - 10px) repeat-x;
  }
}
@media (max-width: 600px) {
  --mask:
    radial-gradient(16.01px at 50% 22.5px, #000 99%, #0000 101%) calc(50% - 20px) 0/40px 51% repeat-x,
    radial-gradient(16.01px at 50% -12.5px, #0000 99%, #000 101%) 50% 10px/40px calc(51% - 10px) repeat-x,
    radial-gradient(16.01px at 50% calc(100% - 22.5px), #000 99%, #0000 101%) calc(50% - 20px) 100%/40px 51% repeat-x,
    radial-gradient(16.01px at 50% calc(100% + 12.5px), #0000 99%, #000 101%) 50% calc(100% - 10px)/40px calc(51% - 10px) repeat-x;
}
}

.cstm_wave_top {
  --mask:
    radial-gradient(33.6px at 50% 47px, #000 99%, #0000 101%) calc(50% - 40px) 0/80px 100%,
    radial-gradient(33.6px at 50% -27px, #0000 99%, #000 101%) 50% 20px/80px 100% repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);

  @media (max-width: 1023px) {
    --mask:
      radial-gradient(30.24px at 50% 42.3px, #000 99%, #0000 101%) calc(50% - 36px) 0/72px 100%,
      radial-gradient(30.24px at 50% -24.3px, #0000 99%, #000 101%) 50% 18px/72px 100% repeat-x;

    @media (max-height: 500px) {
      --mask:
        radial-gradient(16.01px at 50% 22.5px, #000 99%, #0000 101%) calc(50% - 20px) 0/40px 100%,
        radial-gradient(16.01px at 50% -12.5px, #0000 99%, #000 101%) 50% 10px/40px 100% repeat-x;
    }
  }

  @media (max-width: 600px) {
    --mask:
      radial-gradient(16.01px at 50% 22.5px, #000 99%, #0000 101%) calc(50% - 20px) 0/40px 100%,
      radial-gradient(16.01px at 50% -12.5px, #0000 99%, #000 101%) 50% 10px/40px 100% repeat-x;
  }
}

/* フッター */
.footer_content{
	background: #5a2e06;
}

.copy_right{
	font-family: NotoSansJP-Regular;
	font-weight: normal;
	font-size: 9.89px;
	letter-spacing: 0.18em;
	line-height: 25.54px;
	text-align: center;
	color: #fff;
	padding: 20px 0;

}

/* ヘッダー */

/*=============================
.btn-trigger
=============================*/
.hamburger_menu{
	position: fixed;
	top: 0;
	right: 0;
	background-color: #FF8189;
	padding: 25px 16px 19px;
	z-index: 11;
	cursor: pointer;
}

.hamburger_menu > p{
	font-family: NotoSansJP-Medium;
	font-weight: normal;
	font-size: 18.88px;
	letter-spacing: 0.02em;
	line-height: 20.04px;
	text-align: center;
	color: #fff;
    margin: 6px 0 0;
	min-width: 68px;
}

.btn-trigger {
	position: relative;
	width: 100%;
	height: 26px;
	cursor: pointer;

}
.btn-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
  border-radius: 4px;
}

.btn-trigger.active span{
	left: 7px;
    width: 80%;
}

.btn-trigger, .btn-trigger span {
  display: inline-block;
  transition: all .5s;
  box-sizing: border-box;
}
.btn-trigger span:nth-of-type(1) {
  top: 0;
}
.btn-trigger span:nth-of-type(2) {
  top: 12px;
}
.btn-trigger span:nth-of-type(3) {
  top: 24px;
}


/*=============================
#btn02
=============================*/
#btn02.active span:nth-of-type(1) {
  -webkit-transform: translateY(9px) rotate(45deg);
  transform: translateY(9px) rotate(45deg);
}
#btn02.active span:nth-of-type(2) {
  opacity: 0;
}
#btn02.active span:nth-of-type(3) {
  -webkit-transform: translateY(-15px) rotate(-45deg);
  transform: translateY(-15px) rotate(-45deg);
}

.menu_wraps{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgb(0 0 0 / 10%);
	z-index: 10;
}

.menu_content{
	background: #fffbef;
	position: absolute;
	height: 100%;
	right: 0;
	padding: 90px 170px;
}

.menu_content .btn-reserve{
	background: #5a2e06;
	font-family: ZenMaruGothic-Bold;
	font-weight: normal;
	font-size: 24px;
	letter-spacing: 0.1em;
	line-height: 42px;
	text-align: center;
	color: #fff;
	text-decoration: none;
	border-radius: 14px;
	padding: 15px 40px;
	position: relative;
}

.menu_content .btn-reserve::before{
	content: '';
	background-image:  url(./images/reserve_icon.svg);
	width: 25.38px;
	height: 25.49px;
	position: relative;
    left: 0px;
    top: 2px;
    display: inline-block;
}

.header_menu_nav{
	text-align: center;
	list-style: none;
	padding: 0;
	margin-top: 40px;
}

.header_menu_nav li a{
	font-family: ZenMaruGothic-Bold;
	font-weight: normal;
	font-size: 21.42px;
	letter-spacing: 0.1em;
	line-height: 37.48px;
	color: #5a2e06;
	text-decoration: none;
	padding: 15px 0;
    display: inline-block;
}


.sns_box{
	display: flex;
	gap: 10px;
    justify-content: center;
	margin-top: 50px;
}

.sns_box > a{
	display: inline-block;
	background: #5a2e06;
    padding: 18px;
	border-radius: 50%;
	position: relative;
}

.sns_box > a > img{
	-webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	position: absolute;
	left: 50%;
	top: 50%;
	width: 20px;
}

.sns_box .tiktok_icon > img{
	width: 18px;
}

/* 追従ボタン */

.follow_sns_box{
	position: fixed;
	right: 0;
	top: 50%;
	-webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
	display: flex;
	flex-direction: column;
	z-index: 5;
}

.follow_sns_box a{
	width: 30px;
	display: inline-block;
}

.follow_sns_box a{
	display: inline-block;
    padding: 18px;
	position: relative;
}

.follow_sns_box > a > img{
	-webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	position: absolute;
	left: 50%;
	top: 50%;
	width: 20px;
}

.snsfollow_sns_box_box .tiktok_icon > img{
	width: 18px;
}

.follow_reservation_box .btn-reserve{
	background-color: #FF8189;
	color: #fff;
	text-decoration: none;
	font-family: ZenMaruGothic-Black;
	font-weight: normal;
	font-size: 17.38px;
	letter-spacing: 0.1em;
	line-height: 35.84px;
    padding: 16px 40px;
	border-radius: 30.25px 30.25px 0 0;
	display: inline-block;
	position: fixed;
    right: 15px;
    bottom: 0;
	z-index: 5;
}

.follow_reservation_box .btn-reserve::before{
	content: '';
	background-image:  url(./images/reserve_icon.svg);
	background-size: cover;
	width: 23.38px;
    height: 24.49px;
    position: relative;
    left: 0px;
    top: 4px;
    display: inline-block;
}

@media screen and (max-width: 768px) {
	.menu_content{
		padding: 120px 20px;
		width: 100%;
		text-align: center;
	}
}

@media screen and (max-width: 600px) {
	.hamburger_menu{
		text-align: center;
		padding: 18px 6px 16px;
	}

    .btn-trigger {
        width: 73%;
    }

	.hamburger_menu > p{
		font-size: 15.88px;
		line-height: 10.04px;
	}


	.follow_sns_box{
		display: none;
	}

	.follow_reservation_box .btn-reserve{
		width: calc(100% - 30px);
		text-align: center;
		padding: 6px 39px;
		border-radius: 21.25px 21.25px 0 0;
	}
}