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



/* ---------------------------------------------------------------------------------------------

   Title-wrap　※TOP スライダーは、6-1-7.cssへ記述

--------------------------------------------------------------------------------------------- */
.title-wrap{
	width: 100%;
	padding: 100px 0 50px 0;
	background-image: url(../images/blackboard.png) ; 
	background-position: center top;
	background-repeat: repeat-y;
	background-size: cover;
	position: relative;
	overflow: hidden;
}

@media screen and (max-width:1000px) {

.title-wrap{
	padding: 100px 0 25px 0;
}
	
}

@media screen and (max-width:700px) {

.title-wrap{
	padding: 100px 0 0 0;
}
	
}




/* ---------------------------------------------------------------------------------------------

   流体シェイプ指定

--------------------------------------------------------------------------------------------- */
h1{
	width: 6em;
	color: #fff;
	font-size: clamp(24px, 3vw, 30px);
	letter-spacing: 0.25em;
	margin: -150px auto 0 auto;
	font-weight: normal;
	writing-mode: vertical-rl; 
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
}


.fluid {
  width: 30vh;
  height: 25vh;
  animation: fluidrotate 15s ease 0s infinite;/*アニメーションの設定 30s*/
	margin: 0 auto;
}

@keyframes fluidrotate {  
	  
0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
}
28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
}
42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
}
84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
	  
}

/* H2 back 流体シェイプカラー
------------------------------------------------------------*/
.brown-fluid{
  background: #996633 ;
}





/* ---------------------------------------------------------------------------------------------

   About-wrap

--------------------------------------------------------------------------------------------- */
.about-wrap{
	width: 100%;
	padding: 150px 0 75px 0;
	background-image: url(../images/blackboard.png) ; 
	background-position: center top;
	background-repeat: repeat-y;
	background-size: cover;
	position: relative;
	overflow: hidden;
}



/* まわる円画像背景1
------------------------------------------------------------*/
.about-circle{
	position: absolute;
	top: 10%;
	left: 10%;
	z-index: 1;
	width: 500px;
}
.about-circle img{
	width: 100%;
	height: auto;
	animation: rotate-anime 100s linear infinite;
}
@keyframes rotate-anime {
  0%  {transform: rotate(0);
  }
  100%  {transform: rotate(-360deg);
  }
}



.about-wrap .eg-h2,.about-wrap h2{
	text-align: center;
	position: relative;
	z-index: 5;
}
.about-wrap h2{
	margin-bottom: 100px;
}

.about-wrap .l-text{
	line-height: 2.5;
	position: relative;
	z-index: 5;
}
.about-wrap .l-text span{
	color: #fe7;
}

@media screen and (max-width:1000px) {

.about-wrap h2{
	margin-bottom: 75px;
}
	
}

@media screen and (max-width:700px) {
	
.about-circle{/*まわる円画像背景*/
	top: 5%;
	left: 5%;
	width: 450px;
}

.about-wrap h2{
	margin-bottom: 50px;
}
	
}


/* ---------------------------------------------------------------------------------------------

   SNSリンク レイアウト※詳細指定は、hamon-icon.css

--------------------------------------------------------------------------------------------- */
/* youtube,insta
------------------------------------------------------------*/
.media-icon{
	width: 250px;
	margin: 50px auto 0 auto;
}

.media-icon .youtube{
	float: left;
	width: 50px;
	height: 50px;
	margin-right: 50px;
}
.media-icon .insta{
	float: left;
	width: 50px;
	height: 50px;
}
.media-icon .g-map{
	float:right;
	width: 50px;
	height: 50px;
}

@media screen and (max-width:700px) {

.media-icon{
	margin: 25px auto 0 auto;
}
	
}




/* ---------------------------------------------------------------------------------------------

   Contents Sliderは、Swiper.cssへ記述

--------------------------------------------------------------------------------------------- */



/* ---------------------------------------------------------------------------------------------

   Dead-space

--------------------------------------------------------------------------------------------- */
.skewed { /*斜め横ライン指定*/
  transform: skewY(-3deg);
  transform-origin: top left;
}

.dead-space{
	width: 100%;
	margin: 0 auto;
	padding: 100px 0 25px 0;
	background-image: url(../images/blackboard.png) ; 
	background-position: center top;
	background-repeat: repeat-y;
	background-size: cover;
	position: relative;
	z-index: 5;
}

.dead-space .l-text{
	text-align: right;
	width: 94%;
	margin: 0 auto;
	position: relative;
	z-index: 20;
}

@media screen and (max-width:1400px) {
	
.dead-space{
	padding: 75px 0 25px 0;
}
	
}

@media screen and (max-width:1000px) {

.dead-space .contents1000{
	float: right;
}
	
}

@media screen and (max-width:700px) {
	
.skewed {
  transform: skewY(-5deg);
}
	
.dead-space{
	padding: 50px 0 25px 0;
}
	
}





/* ぽよぽよ収縮アニメーション
------------------------------------------------------------*/
.anim-box{
	position: absolute;
	bottom: -10%;
	left: 5%;
	z-index: 10;
	width: 200px;
}
.anim-box img{
	width: 100%;
	height: 150px;
}

@media screen and (max-width:700px) {

.rotating-illust{
	bottom: 5%;
	width: 150px;
}
.rotating-illust img{
	height: 112.5px;
}
	
}

@media screen and (max-width:500px) {

.anim-box{
	left: 2%;
	width: 120px;
}
.anim-box img{
	height: 90px;
}
	
}

@media screen and (max-width:375px) {

.anim-box{
	bottom: -5%;
}
	
}

.anim-box.poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}





/* ---------------------------------------------------------------------------------------------

   Menu-wrap

--------------------------------------------------------------------------------------------- */
.menu-wrap{
	width: 100%;
	height: auto;
	padding: 200px 2% 50px 2%;
	margin: -100px auto 0 auto;
	position: relative;
	z-index: 1;
}

.area{
	overflow: hidden;
}

.slides-menu{
	display: flex;
}

.item{
    display: flex;
	flex-direction:column;/*横並びを解除して縦並び指定*/
	padding: 0 2%;
	border-right: 0.5px solid #666;
	width: 100%;
}
.last-item{
	border-right: 0;
}

@media screen and (max-width:1000px) {

.menu-wrap{
	padding: 150px 2% 25px 2%;
}
	
}


/* table menu
------------------------------------------------------------*/
.menu-h3{
	font-size: clamp(12px, 3vw, 16px);
	line-height: 1.35;
	margin-bottom: 15px;
	padding-left: 10px;
	font-weight: normal;
}
.Cafe-h3{
	border-left: 5px #996633 solid;
}
.Food-h3{
	border-left: 5px #556b2f solid;
}
.BBQ-h3{
	border-left: 5px #008080 solid;
}


.menu-h3 .eg-h3{
	font-family: 'Rubik Dirt', cursive;
	font-size: clamp(18px, 3vw, 24px);
	font-weight: normal;
	line-height: 1.35;
}

.table-menu td{
	padding: 7.5px 0;
	vertical-align: middle;
}

.name{
	text-align: left;
	font-size: clamp(10px, 2vw, 14px);
	width: 75%;
	line-height: 1.35;
	border-bottom: 0.5px solid #666;
}
.name span{
	font-size: clamp(8px, 2vw, 12px);
	line-height: 1.35;
}
.name strong{
	font-size: clamp(10px, 2vw, 14px);
	line-height: 1.35;
	font-weight: bold;
}

.price{
	text-align: right;
	font-size: clamp(12px, 3vw, 16px);
	width: 28%;
	line-height: 1.25;
	border-bottom: 0.5px solid #666;
}

.last-name,.last-price{
	border-bottom: 0;
}

.catch-copy{
	text-align: left;
	font-size: clamp(10px, 2vw, 14px);
	width: 100%;
	line-height: 1.35;
	border-bottom: 0.5px solid #666;
}




/* ---------------------------------------------------------------------------------------------

   Others (Shaved ice,Cup noodle,Souvenir,100year plan)

--------------------------------------------------------------------------------------------- */
.Others-table{
	width: 100%;
	height: 100%;
	background-image: url(../images/blackboard02.png) ; 
	background-position: center top;
	background-repeat: repeat-y;
	background-size: cover;
	overflow: hidden;
}

.Shaved-ice-td, /*かき氷屋ブース*/
.Cup-noodle-td, /*カップ麺コーナー*/
.Souvenir-td, /*お土産コーナー*/
.plan-td{ /*オープン100年計画*/
	padding: 3%;
	width: 50%;
}

.Others-table .eg-h2{
	font-size: clamp(30px, 3vw, 48px);
	text-align: center;
}
.Others-table h2 {
	font-size: clamp(14px, 3vw, 18px);
	text-align: center
}

.Shaved-ice-td,
.Souvenir-td{
	border-right: 0.5px #999 solid;
}

.Souvenir-td,
.plan-td{
	padding-top: 100px;
}

.Others-shop{
	width: 100%;
	margin: 25px auto;
}

.Others-shop img{
	width: 100%;
	height: auto;
}

.Others-table .m-text{
	line-height: 1.5;
}

.Others-menu{
	width: 100%;
	padding: 2% 4%;
	margin-top: 25px;
	border-radius: 2.5px;
}

@media screen and (max-width:700px) {
	
.Shaved-ice-td,
.Cup-noodle-td,
.Souvenir-td{
	display: block;
	width: 100%;
	padding: 3% 3% 75px 3%;
}

.plan-td{
	display: block;
	width: 100%;
	padding: 3% 3% 25px 3%;
}
	
.Shaved-ice-td,
.Souvenir-td{
	border-right: 0;
}
	
.Souvenir-td,
.plan-td{
	border-top: 0;
}
	
.Others-table .eg-h2{
	text-align: left;
}
.Others-table h2 {
	text-align: left;
}
	
}




/* ---------------------------------------------------------------------------------------------

   Footer (周辺案内、営業カレンダー、店情報)

--------------------------------------------------------------------------------------------- */
.footer-wrap .eg-h2,.footer-wrap h2{
	text-align: center;
	position: relative;
	z-index: 5;
}
.footer-wrap h2{
	margin-bottom: 75px;
}

.yago-h3 img{
	width: 150px;
	height: 42.5px;
	margin: 0 auto 15px auto;
}
.yago-h3{
	font-size: clamp(16px, 3vw, 20px);
	color: #fff;
	font-weight: bold;
	text-align: center;
	margin-bottom: 15px;
	position: relative;
	z-index: 5;
}

.footer-wrap .m-text{
	text-align: center;
	position: relative;
	z-index: 5;
}
.footer-wrap .m-text a{
  background: -webkit-linear-gradient( 60deg,#12d6df, #f70fff,#faea3d, #fd644f);
  background-size:400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textAnime 5s infinite;
}
@keyframes textAnime{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}


@media screen and (max-width:700px) {

.yago-h3 img{
	width: 120px;
	height: 34px;
	margin: 0 auto 10px auto;
}
	
}



/* table Calendar
------------------------------------------------------------*/
#calendar{
	background: #eee;
	margin-top: 50px;
	border: 1px solid #008080;
}

#calendar caption{
	text-align: center;
	color: #fff;
	font-size: clamp(18px, 3vw, 24px);
	margin-bottom: 5px;
}

#calendar th,
#calendar td{
	text-align: center;
	font-size: clamp(14px, 3vw, 18px);
	line-height: 1.5;
}

#calendar th{
	padding: 1% 2%;
	background: #008080;
	color: #fff;
	vertical-align: middle;
	font-weight: normal;
}

#calendar td{
	padding: 0.5% 2%;
	border: 1px solid #008080;
}

#calendar td .holiday{
	color: #f00;
}
#calendar td .open{
	color: #008080;
}



/* Google-map
------------------------------------------------------------*/
.google-map{
	margin: 50px 0;
}



/* 周辺施設のご案内
------------------------------------------------------------*/
.local-h3{
	font-size: clamp(16px, 3vw, 20px);
	color: #fff;
	font-weight: normal;
	text-align: center;
	line-height: 1;
}

.bunkamura{
	width: 100%;
}

.bunkamura .link{
	width: 250px;
	height: 100px;
	margin: 20px auto 15px auto;
}
.bunkamura .link a img{
	width: 100%;
	height: auto;
}
.bunkamura .link a:hover img{
	opacity: 0.75;
}

.bunkamura .s-text{
	text-align: center;
}
.fa-car-side{
	color: #fff;
}

@media screen and (max-width:700px) {
	
.bunkamura .link{
	width: 200px;
	height: 80px;
}
	
}


/* まわる円画像背景2
------------------------------------------------------------*/
.foot-circle{
	position: absolute;
	top: 1.5%;
	right: 15%;
	z-index: 1;
	width: 400px;
}
.foot-circle img{
	width: 100%;
	height: auto;
	animation: rotate-anime 100s linear infinite;
}
@keyframes rotate-anime {
  0%  {transform: rotate(0);
  }
  100%  {transform: rotate(-360deg);
  }
}

@media screen and (max-width:900px) {
	
.foot-circle{/*まわる円画像背景*/
	top: 0.5%;
	right: 20%;
	width: 300px;
}

}

@media screen and (max-width:700px) {
	
.foot-circle{/*まわる円画像背景*/
	left: 5%;
	width: 250px;
}

}


/* Copyright
------------------------------------------------------------*/
.copy{
	width: 100%;
	padding: 15px 3%;
	text-align: center;
	line-height: 1;
	background: #333;
	font-size: clamp(8px, 2vw, 12px);
}



/* ---------------------------------------------------------------------------------------------

   Page-Top

--------------------------------------------------------------------------------------------- */
#Page-Top {
    position: fixed;
    right: -80px;
    bottom: 50px;
	z-index: 40;
}

#Page-Top a{
    display: flex;
    justify-content: center;
    background: #996633;
    transition: opacity .6s ease;
    align-items: center;
    text-decoration: none;
    border-radius: 100%;
	padding: 20px;
}
#Page-Top a:hover {
    opacity: 0.75;
}

#Page-Top .fa-chevron-up{
	line-height: 1;
	font-size: clamp(12px, 3vw, 18px);
}
#Page-Top a .fa-chevron-up{
	color: #fff;
}