@charset "UTF-8";
/* CSS Document */

@font-face {
	font-family: YuGothR;
    src: url('../fonts/yugothic.ttf');
}

@font-face {
	font-family: YuGothB;
    src: url('../fonts/YuGothB.ttc');
}

html {
	font-size: 19px;
	background-color: #000000;	
}

p {
    border: 0;
    margin: 0;
    padding: 0;
	font-family: YuGothR;	
}

textarea {
    resize: vertical;
}

a, a:hover {
    color: inherit;
	text-decoration: none;
}

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

ul, li {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wrapper {
	width: 100%;
	margin: 0 auto;
}

.br-sp {
	display: none;
}

/* ==========================================================================
   header //
   ========================================================================== */

.PC-TEL {
	background: url("../image/bg-img.png") repeat center top;
	width: 425px;
	height: 100px;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1;
}

.PC-TEL p {
	font-family: YuGothB;
	text-align: center;
	font-size: 40px;
	line-height: 1.0em;
}

.PC-TEL span {
	font-family: YuGothB;
	text-align: center;
	font-size: 19px;
}

#PC_header {
	width: 1200px;
	margin: 0 auto;
	
}

.header-top_p {
	color: #ffffff;
	text-align: left;
	font-size: 14px;
	padding: 20px 0;
}

.PC_header--box {
	display: flex;
	width: 80%;
	margin: 0 auto;
	align-items: center;
	margin-top: 30px;
}

.PC_header--img {
	width: 188px;
}


.PC_header--box_in ul {
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 20px;
}

.PC_header--box_in li {
	color: #FFFFFF;
	font-family: park-lane, serif;
	font-weight: 700;
	font-size: 26px;
	padding-left: 80px;
	line-height: 2.0em;
}

a.header-btn {
  display:block;
transition-duration: 0.8s;		
}

a.header-btn:hover {
  opacity:0.6;
	color: #ba9b19;
}

.arrow_box{
    position:relative;
    padding:10px 30px;
	border: 1px solid #ffffff;
    text-align:center;
    color:#FFFFFF;
	font-family: park-lane, serif;
	margin-right: 17px;
	font-size: 17px;
}
.arrow_box:after,.arrow_box:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    left:100%;
    top:50%;
}
.arrow_box:after{
    border-color: rgba(0, 0, 0, 0);
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    margin-top: -10px;
    border-left-color:#000000;
}
.arrow_box:before{
    border-color: rgba(255, 255, 255, 0);
    border-top-width:11px;
    border-bottom-width:11px;
    border-left-width:11px;
    border-right-width:11px;
    margin-top: -11px;
    margin-left: 1px;
    border-left-color:#FFFFFF;
}

.icon-img {
	width: 42px;
	height: 42px;
}

.PC_header--box_sns {
	display: flex;
	justify-content: space-around;
}

.PC_snsbox {
	display: flex;
	align-items: center;
}

a.sns-btn {
  display:block;
transition-duration: 0.8s;		
}

a.sns-btn:hover {
  opacity:0.6;
}

.main {
	background: url(../image/main_img.png) no-repeat left top;
    background-size: 90%;
	margin: 40px 0;
}

#SP_header {
	display: none;
}

@media only screen and (max-width: 767px) {
	
	.br-sp {
		display: block;
	}
	
	.PC-TEL {
		display: none;
	}
	
	#PC_header {
		display: none;
	}
	
	.main {
		display: none;
	}
	
	#SP_header {
		display: block;
		width: 90%;
		margin: 0 auto;
	}
	
	.SP-sns-area--box {
		display:flex;
		justify-content: space-between;
    	align-items: center;
	}
	
	.SP-sns-area--box p {
		color: #ffffff;
		font-size: 0.6em;
    	line-height: 1.5em;
		font-family: YuGothB;
	}
	
	.SP-sns-area {
		display: flex;
		justify-content: end;
		padding: 15px 0;
	}
	
	.sp-margin {
		margin-left: 10px;
	}
	
	.SP_header--box {
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
	}
	
	.SP_header--img {
		width: 30%;
	}
	
	.SP_header--box_in {
		width: 65%;
	}
	
	.SP-TEL {
		background: url("../image/bg-img.png") repeat center top;
		padding: 6px;
		margin: 10px 0 0 0;
	}

	.SP-TEL p {
		font-family: YuGothB;
		text-align: center;
		font-size: 20px;
		line-height: 1.2em;
		color: #000000;
	}
	
	.SP-TEL span {
		font-size: 11px;		
	}
	
	.arrow{
		position: relative;
		display: inline-block;
		padding: 0 0 0 0;
		color: #000;
		vertical-align: middle;
		text-decoration: none;
		font-size: 15px;
		border-bottom: 1px solid #ffffff;
	}
	.arrow::before,
	.arrow::after{
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		content: "";
		vertical-align: middle;
	}
	
	.sample4-1::before{
		right: -15px;
		box-sizing: border-box;
		width: 4px;
		height: 4px;
		border: 4px solid transparent;
		border-left: 4px solid #FFFFFF;
	}
	
	.arrow p {
		font-size: 15px;
		font-family: YuGothB;
		color: #ffffff;
	}
	
	.SP-menu--box {
		padding: 30px 0;
	}
	
	.SP-menu--box ul {
		display: flex;
		flex-wrap:wrap;
	}
	
	.SP-menu--box li {
		color: #ffffff;
		font-family: park-lane, serif;
		font-weight: 700;
		padding-right: 14px;
    	line-height: 2.0em;
	}	
	
}


/* ==========================================================================
   sec01 //
   ========================================================================== */

#sec01 {
	background-image: url(../image/sec01-img.png), url(../image/sec01-img02.png);
	background-position: right top, left bottom;
	background-size: 1502px 710px, 1218px 540px;
	background-repeat: no-repeat, no-repeat;
    height: 1000px;
	margin: 130px 0;	
}

.sec01--inbox {
	width: 1200px;
	margin: 0 auto;
	text-align: right;
	position: relative;
}

.sec01--p01 {
	position: absolute;
	top: 140px;
    right: 0;
}

.sec01--p02 {
	position: absolute;
	top: 750px;
    left: 0;
}

.sec01-tittle {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-align: left;
	display: block;
	font-family: dnp-shuei-mincho-pr6n, sans-serif;
	font-weight: 600;
	color: #ffffff;
	font-size: 60px;
	line-height: 1.5em;
	padding-left:1em;
	text-indent:-1em;
}

.sec01-tittle span {
	color: #ffd522;
}

.sec01-comment {
	text-align: left !important;
}

@media only screen and (max-width: 767px) {
	
	#sec01 {
		width: 100%;
		margin: 0 auto;
		background-image: url(../image/sec01-img.png), url(../image/sec01-img02_sp.png);
		background-position: right top, left bottom;
		background-size: 90%, 84%;
		background-repeat: no-repeat, no-repeat;
		height: 100vw;
		margin-top: 30px;
	}
	
	.sec01--inbox {
		width: 100% !important;
		position: relative;
	}
	
	.sec01--p01 {
		position: absolute;
    	top: 54px;
		right: 50px;
	}
	
	.sec01--p02 {
		position: absolute;
		top: 175px;
    	left: 10px;
	}
	
	.sec01-tittle {
		font-size: 20px;
	}
	
	.sec01-comment {
		font-size: 12px;
		font-family: YuGothB;
	}
}

/* ==========================================================================
   sec02 //
   ========================================================================== */

#sec02 {
	display:block;
  	position: relative;
  	overflow: hidden;
  	margin: 0 auto;
	background: url("../image/sec02-img_bg.png") no-repeat right bottom;
}

.sec02--bg_tittle {
  	position: absolute;
    display: inline-block;
    white-space: nowrap;
    font-size: 122pt;
    color: #ffffff;
    /*opacity: 0.2;*/
    top: 0;
    left: -52px;
}

.sec02--bg_tittle p {
	font-family: park-lane, serif;
	font-weight: 700;	
}

.sec02--inbox {
	width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 80px;
}

.sec02--img {
	width: 638px;
}

.sec02--h1 {
	font-family: dnp-shuei-mincho-pr6n, sans-serif;
	font-weight: 600;
	color: #ffffff;
	font-size: 60px;
	line-height: 1.2em;
}

.sec02--tittle {
	font-family: dnp-shuei-mincho-pr6n, sans-serif;
    position: relative;
    padding: 5px 5px 5px 9px;
    background: rgb(186, 155, 25);
    font-size: 33px;
    color: white;
    margin-right: 145px;
    line-height: 1.3;
    z-index: -1;
}

.sec02--tittle:before {
  position: absolute;
    content: '';
    right: -2px;
    top: -2px;
    border: none;
    border-right: solid 40px #000000;
    border-bottom: solid 79px transparent;
    z-index: -2;
}

.sec02--midashi_02 p {
	background-color: #ba9b19;
	padding: 50px 40px;
	color: #ffffff;
}

.menu--area {
	margin: 80px 0 130px 0;
}

.menu-btn--area {
	width: 830px;
	margin: 0 auto;
	background: url("../image/bg-img.png") repeat center top;
	margin-bottom: 30px;
}

.menu-btn p {
	padding: 20px 40px;
	text-align: center;	
	font-family: park-lane, serif;
    font-weight: 700;
	font-size: 45px;
}

.menu-btn{
    position: relative;
    display: block;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
transition-duration: 0.8s;		
}
.menu-btn::before,
.menu-btn::after{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 50px;
    margin: auto;
    content: "";
    vertical-align: middle;
}

.sample4-5::before{
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    border: 3px solid #000;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.sample4-5::after{
    right: 53px;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    border: 10px solid transparent;
    border-left: 10px solid #000;
}

.menu-btn:hover {
  opacity:0.6;
}

@media only screen and (max-width: 767px) {
	
	#sec02 {
		padding-top: 130px;
		background-size: 80%;
	}
	
	.sec02--inbox {
		width: 95%;
		margin-bottom: 30px;
	}
	
	.sec02--img {
    	width: 50%;
	}
	
	.sec02--bg_tittle {
		font-size: 85px;
		top: 49px;
    	left: -20px;
	}
	
	.sec02--h1 {
		font-size: 20px;
	}
	
	.sec02--tittle {
		margin: 0;
		font-size: 16px;
		margin-bottom: 10px;
	}
	
	.sec02--midashi_02 p {
		background-color: #ba9b19;
		padding: 20px 12px;
		color: #ffffff;
		font-size: 12px;
		text-align: left !important;
		font-family: YuGothB;
	}
	
	.sec02--tittle:before {
		right: -20px;
	}
	
	.menu-btn--area {
		width: 80%;
	}
	
	.menu-btn p {
		font-size: 20px;
	}
	
	.menu-btn::before,
	.menu-btn::after{
		right: 20px;
	}
	
	.sample4-5::before {
		box-sizing: border-box;
		width: 25px;
		height: 25px;
		border: 2px solid #000;
		-webkit-border-radius: 50%;
		border-radius: 50%;
	}
	
	.sample4-5::after {
		right: 22px;
		box-sizing: border-box;
		width: 6px;
		height: 6px;
		border: 6px solid transparent;
		border-left: 6px solid #000;
	}
	
	.menu--area {
		margin: 30px 0 0 0;
	}
}


/* ==========================================================================
   sec03 //
   ========================================================================== */

#sec03 {
	display:block;
  	position: relative;
  	overflow: hidden;
  	margin: 0 auto;
	padding-top: 130px;
	background: url("../image/sec03-img_bg.png") no-repeat left bottom;	
	padding-bottom: 80px;
}

.sec03--bg_tittle {
  	position: absolute;
    display: inline-block;
    white-space: nowrap;
    font-size: 122pt;
    color: #ffffff;
    /*opacity: 0.2;*/
    top: -10px;
    right: 10px;
}

.sec03--bg_tittle p {
	font-family: park-lane, serif;
	font-weight: 700;	
}

.sec03--inbox {
	width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 80px;
}


.sec03--img {
	width: 808px;
	text-align: left;
}

.sec03--inbox {
	width: 1200px;
	margin: 0 auto;
	position: relative;
}

.sec03--midashi {
	position: absolute;
	top: 35%;
    right: 0;
}

.sec03--h1 {
	font-family: dnp-shuei-mincho-pr6n, sans-serif;
	font-weight: 600;
	color: #ffffff;
	font-size: 60px;
	line-height: 1.2em;
	text-align: right;
}

	.order01 {
		order:2;
	}
	.order02 {
		order:1;
	}


@media only screen and (max-width: 767px) {
	
	#sec03 {
		padding-top: 130px;
		background-size: 80%;
		padding-bottom: 30px;
	}
	
	.sec03--inbox {
		width: 95%;
	}
	
	.sec-right {
		text-align: right;
	}
	
	.sec03--bg_tittle {
		font-size: 85px;
		top: 49px;
		right: 3px;
	}
	
	.sec03--img {
		width: 80%;
	}
	
	.sec03--h1 {
		font-size: 20px;
	}
	
	.sec03--inbox {
		display: block;
	}
	
}


/* ==========================================================================
   sec04 //
   ========================================================================== */

.sec04--midashi {
	font-family: park-lane, serif;
	font-weight: 700;	
	text-align: center;
	font-size: 60px;
	color: #ffffff;
	margin: 130px 0 50px 0;
}

.sec04-inbox {
	width: 1000px;
	margin: 0 auto;
	border-bottom: 1px solid #ffffff;
	margin-top: 30px;
}

.sec04-p {
	font-family: YuGothB;
	color: #ffffff;
	line-height: 1.3em;
	padding-bottom: 10px;
}

.sec04-midashi {
	font-family: YuGothB;
	color: #ffffff;
	line-height: 1.3em;	
	font-size: 27px;
    margin-bottom: 20px;
}

.sec04-p02 {
	font-family: YuGothR;
	color: #ffffff;
	line-height: 1.6em;
	font-size: 15px;
}

.sec04-inbox02 {
	width: 1000px;
	margin: 0 auto;
	margin-top: 30px;
}

#gmap {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
	width: 1200px;
	margin: 0 auto;
	margin-top: 30px;
}
#gmap iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}


@media only screen and (max-width: 767px) {
	
	.sec04-inbox {
		width: 95%;
	}
	
	.sec04-p {
		font-size: 15px;
	}
	
	.sec04-midashi {
		font-size: 20px;
	}
	
	.sec04-inbox02 {
		width: 95%;
	}
	
	#gmap {
		width: 95%;
	}	
}

/* ==========================================================================
   sec05 //
   ========================================================================== */

#sec05 {
	background: url("../image/bg-img.png") no-repeat center bottom;	
}


.insta-box {
	width: 770px;
	margin: 0 auto;
	background-color: #ffffff;
	filter: drop-shadow(5px 5px 5px #aaa);
	padding-bottom: 20px;
}

.insta-logo {
	width: 25%;
	display: block;
    margin: 0 auto;
	padding: 20px 0;
}

.insta-box_in {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
    justify-content: center;
}

.insta-box_in div {
	width: 30%;
	filter: drop-shadow(5px 5px 5px #aaa);
}

@media only screen and (max-width: 767px) {
	
	#sec05 {
		background-size: 100%;
	}
	
	.insta-box {
		width: 95%;
	}
	
	.insta-box_in {
		padding: 5px 10px;
	}
	
	.insta-logo {
		width: 40%;
		display: block;
		margin: 0 auto;
		padding: 20px 0 10px 0;
	}	
}

/* ==========================================================================
   footer //
   ========================================================================== */

.footer_inbox {
	width: 1200px;
	margin: 0 auto;
	background: url("../image/bg-img.png") repeat center top;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0 30px;
	padding-top: 30px;
	padding-bottom: 30px;
}

.footer_logo {
	width: 188px;
}

.footer_in-menu ul {
	display: flex;
	gap: 6px 12px;
	border-top: 1px solid #000000;
	padding-top: 25px;
}

.footer_in-menu li {
	font-family: park-lane, serif;
	font-weight: 700;
	font-size: 20px;
}

.footer_in-menu p {
	font-family: YuGothB;
	font-size: 14px;
	margin-top: 15px;
}

@media only screen and (max-width: 767px) {
	
	.footer_inbox {
		width: 100%;
		gap: 0 10px;
		padding-top: 30px;
		padding-bottom: 20px;
	}
	
	.footer_logo {
		width: 20%;
		padding-left: 20px;
	}
	
	.footer_in-menu {
		width: 80%;
	}
	
	.footer_in-menu ul {
		flex-wrap: wrap;
		width: 90%;
	}
	
	.footer_in-menu li {
		font-size: 15px;
	}	
}

/* ==========================================================================
   drink menu //
   ========================================================================== */

.drink-menu_area {
	margin-top: 80px;
}

.menu_midashi {
	font-family: park-lane, serif;
	font-weight: 700;
	padding: 30px 0 20px 0;
	text-align: center;
	font-size: 40px;
}

.row {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 25px;
	justify-content: center;
}

.item {
	width: 45%;
}

.item p {
	font-size: 14px;
	color: #999999;
	padding-top: 5px;
}

h3 {
	font-family: YuGothB;
	padding: 5px 0;
	font-size: 16px;
    background: #000000;
    color: #fff;
    text-align: center;
    margin-bottom: 1px;
	margin-top: 0;
}

.item dl {
	display: table;
    line-height: 1.7em;
	padding-top: 10px;
	margin: 0;
    border-bottom: 1px solid #dbdbdb;
    width: 100%;
	font-family: YuGothR;
	font-size: 15px;
}

.item dt {
	display: table-cell;
	font-family: YuGothR;
}

.item dd {
	display: table-cell;
	text-align: right;
}

.item__p {
	font-family: YuGothB;
	font-size: 15px;
	text-align: center;
	padding: 30px 0 20px 0;
}

.item-btn__area {
	text-align: center;
}

.item-btn{
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
	border-bottom: 1px solid #000000;
}
.item-btn::before,
.item-btn::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}

.item-btn p {
	font-family: YuGothB;
	font-size: 15px;
}

.sample1-1::before{
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    border: 1px solid #000000;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.sample1-1::after{
    right: 97px;
    box-sizing: border-box;
    width: 3px;
    height: 3px;
    border: 3px solid transparent;
    border-right: 3px solid #000000;
}

@media only screen and (max-width: 767px) {
	
	.drink-menu_area {
		margin-top: 0;
	}
	
	.row {
		display: block;
	}
	
	.item {
		width: 90%;
		margin: 0 auto;
		padding-bottom: 30px;
	}
	
	
}