@charset "UTF-8";

/* ------------------------------------------------------------
   変数
------------------------------------------------------------ */
:root {
	--pink: #e95377;
	--blue: #60a9dd;
	--green: #45b035;
	--orange: #ed6d0f;
	--sec-s: 30px;
	--sec-m: 50px;
	--sec-l: 80px;
}

@media (min-width:768px) {
	:root {
	--sec-s: 50px;
	--sec-m: 80px;
	--sec-l: 110px;
}
}

@media (min-width:1180px) {
	:root {
	--sec-s: 60px;
	--sec-m: 80px;
	--sec-l: 120px;
}
}

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

   base

------------------------------------------------------------ */
* {
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html,body {
	width: 100%;
	overflow-x: hidden;
}
html {
    font-size: 62.5%;
    /*scroll-behavior: smooth;*/
}
body {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
    line-height: 1.5;
	color: #333;
	background-color: #fff5bb;
	background-image: url("../img/dot-w.png");
	background-size: 30px;
	font-size: 1.4rem;
}

@media screen and (min-width:768px) {
    body {
	font-size: 1.5rem;
}
}

a {
	text-decoration: none;
	transition: .3s;
}
/*a:link,a:visited {
	color: var(--green);
}*/
a:hover {
	opacity: .85;
}
a:focus, *:focus { outline: none; }
img {
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
}
a:hover img {
	/*opacity:0.7;
	filter:alpha(opacity=70);*/
}
ul {
    list-style:none;
}
ul,li {
	list-style-type:none;
}

@media screen and (min-width:1100px) {
    body {
	font-size: 1.6rem;
}
}

/* Font style
----------------------------------------------------*/
/* 太字　*/
dt,
.b,
strong {
	font-weight: 600;
}
/* インデント　*/
.indent {
	padding-left: 1em;
	text-indent: -1em;
}
/* 本文　*/
.txt {
	line-height: 2;
}
.txt:not(:last-of-type) {
	margin-bottom: 1em;
}
/* キャプション */
.cap {
	font-size: .8em;
	margin-top: .5em;
	color: #666;
}
.fz-s {
	font-size: .8em;
}
/* 蛍光線 */
.line {
	background: linear-gradient(transparent 70%,rgba(var(--gold-rgb),.35) 70%);
}
.bgc {
	background-color: var(--bg-color);
}
/* 縦書き */
.rl {
	writing-mode: vertical-rl;
}
/* 英語表記　*/
.en {
	font-family: "Oswald", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	letter-spacing: .1em;
}
/* 水平線　*/
.hr {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	column-gap: 1em;
	align-items: center;
}
.hr::before,
.hr::after {
	min-width: 1em;
	height: 1px;
	content: "";
	border-top: 1px solid #000;
}
@media (min-width:768px) { 
	.hr {
	column-gap: 1.5em;
}
	.txt {
	line-height: 2.5;
}
	.txt:not(:last-of-type) {
	margin-bottom: 1.5em;
}
}
@media (min-width:1180px) { 
	.hr {
	column-gap: 2em;
}
}

/* 水平方向のスペース
----------------------------------------------------*/
.inner {
	padding-left: 4%;
	padding-right: 4%;
}
@media (min-width:1180px) {
	.inner {
	width: 95%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 2.5%;
	padding-right: 2.5%;
}
}
@media (min-width:1400px) {
	.inner {
	/*padding-left: 0;
	padding-right: 0;*/
}
}

/* センター寄せ */
.ma {
	margin-left: auto;
	margin-right: auto;
}
.wfc {
	width: fit-content;
}

/* 見出し
----------------------------------------------------*/
.ttl-main {
	font-size: var(--fz-main);
}
.ttl-main.en {
	font-size: calc(var(--fz-main) * 1.5);
}

.ttl-sub {
	font-size: var(--fz-sub);
}
.ttl-sub.en {
	font-size: calc(var(--fz-sub) * 1.5);
}


/* 背景色
----------------------------------------------------*/
.sec-bg {
}


/* 垂直方向のスペース
----------------------------------------------------*/
.sec-s { margin-top: var(--sec-s); margin-bottom: var(--sec-s); }
.sec-m { margin-top: var(--sec-m); margin-bottom: var(--sec-m); }
.sec-l { margin-top: var(--sec-l); margin-bottom: var(--sec-l); }
/* 背景色がある時はpadding */
.sec-bg.sec-s { padding-top: var(--sec-s); padding-bottom: var(--sec-s); margin-top: 0; margin-bottom: 0; }
.sec-bg.sec-m { padding-top: var(--sec-m); padding-bottom: var(--sec-m); margin-top: 0; margin-bottom: 0; }
.sec-bg.sec-l { padding-top: var(--sec-l); padding-bottom: var(--sec-l); margin-top: 0; margin-bottom: 0; }

.no-mt {
	margin-top: 0!important;
}
.no-mb {
	margin-bottom: 0!important;
}



/* responsive
----------------------------------------------------*/
.sp { display: none; }
.tb { display: none; }
.pc { display: none; }

@media (max-width:767px) {
	.sp { display: block; }
}
@media (min-width:768px) and (max-width:1179px) {
	.tb { display: block; }
}
@media (min-width:1180px) {
	.pc { display: block; }	
}

/* hoverで下線
----------------------------------------------------*/
.hover-line {
	position: relative;
}
.hover-line::before {
	background: var(--green);
	content: '';
	width: 100%;
	height: 2px;
	position: absolute;
	left: 0;
	bottom: -3px;
	margin: auto;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hover-line:hover::before {
	transform-origin: left top;
	transform: scale(1, 1);
}

/* hoverで画像拡大
----------------------------------------------------*/
.p-zoom {
	position: relative;
	overflow: hidden;
}
.p-zoom img {
	transition: .5s;
	will-change: transform;
}
.p-zoom:hover img {
	transform: scale(103%);
}

/* ボタン
----------------------------------------------------*/
.btn a {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	font-size: .9em;
	font-weight: 600;
	padding: 1.5em 2em;
	background-color: var(--pink);
	border-radius: 999px;
	color: #fff;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0 3px 5px rgba(0,0,0,.2);
} 



/* page-top
----------------------------------------------------*/
.page-top {
	position:fixed;
    z-index: 999;
	bottom: 20px;
	right: 20px;
}
.page-top a {
	display: block;
	background-color: #f8b62b;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	position: relative;
}
.page-top a::before {
	position: absolute;
	content: "";
	display: block;
	width: 15px;
	height: 15px;
	left: calc(50% - 7px);
	top: calc(50% - 4px);
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(-45deg);
}
@media screen and (min-width:768px) {
	.page-top a {
	width: 50px;
	height: 50px;
}
}


/*=====================================================*/
/* 全体囲み */
/*=====================================================*/
/* 旗 */
/*.wrapper {
	position: relative;
}*/
.wrapper .flag {
	position: absolute;
	content: "";
	display: block;
	top: 0;
	background-image: url("../img/flag.png");
	background-repeat: repeat-x;
	background-position: center top;
	background-size: auto 50px;
	height: 15%;
	width: 100%;
}

/* ヒーローエリア */
.hero {
	text-align: center;
/*	margin-top: 50px;*/
	background-image: url("../img/hero-bg2.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	max-height: 1000px;
	/*margin-bottom: var(--sec-s);*/
}
.hero h1 {
	padding: 50px 0 15px;
}
/* 近日公開 */
.coming {
	background-color: #ea5414;
	color: #fff;
	text-align: center;
	font-weight: bold;
	font-size: 1.5em;
	padding: 1em 0;
}
/* 終了 */
.finish {
	background-color: #fff;
	border: 5px solid #c00;
	color: #c00;
	border-radius: 20px;
	font-weight: bold;
	font-size: 1.5em;
	padding: 1em;
	width: 90%;
	max-width: 1300px;
	margin: 0 auto var(--sec-s);
}
/* インスタ */
.ig-intro {
	margin-bottom: var(--sec-s);
	background: linear-gradient(to right,
        #0f47e4,
        #bf42c0 40%,
        #fc7435 70%,
        #ffd461);
	/*display: grid;
	place-content: center;
	align-items: center;
	padding: 1em;*/
}
.ig-intro a {
	display: block;
	width: 100%;
	height: 100%;
	padding-top: 1em;
	padding-bottom: 1em;
}
.ig-intro a p {
	display: grid;
	justify-content: center;
	align-items: center;
	grid-template-columns: auto 1fr;
	margin: auto;
	width: fit-content;
}
.ig-intro a p .ico {
	width: 2em;
	margin-right: .75em;
}
.ig-intro a p .txt {
	color: #fff;
	font-weight: 700;
	font-size: 1.2em;
	text-shadow: 1px 1px 1px rgba(0,0,0,.2);
}

@media (min-width:768px) { 
	.coming {
	font-size: 2.2em;
}
/* 終了 */
	.finish {
	text-align: center;
}
}

/* 日程 */
.date-wrap {
	
	margin-top: 0;
}
.date-wrap .date-list {
	width: 75%;
	max-width: 350px;
	margin: auto;
	display: grid;
	grid-row-gap: var(--sec-s);
}
.date-wrap .date-list .img {
	display: none;
}

@media (min-width:768px) { 
	.date-wrap .date-list {
	width: 100%;
	max-width: none;
	margin: auto;
	display: grid;
	grid-template-columns: repeat(3,1fr);
	grid-column-gap: 4%;
}

}

@media (min-width:960px) { 

}


/* 参加方法 */
.step-list li {
	background-color: var(--orange);
	padding: 5px;
	border-radius: 20px;
	position: relative;
}
.step-list li:not(:last-of-type) {
	margin-bottom: 40px;
}
.step-list li:not(:last-of-type)::after {
	position: absolute;
	content: "";
	display: block;
	width:0;
	height:0;
	border-style:solid;
	border-width: 20px 16px 0 16px;
	border-color: var(--orange) transparent transparent transparent;
	left: calc(50% - 15px);
	top: calc(100% + 10px);
}
.step-list .list-inner {
	background-color: #fff;
	padding: 5%;
	border-radius: 17px;
	position: relative;
}
.step-list .list-inner::before {
	position: absolute;
	content: "";
	display: block;
	width:0;
	height:0;
	border-top: 40px solid transparent;
	border-right: 40px solid var(--orange);
	right: 0;
	bottom: 0;
	border-radius: 0 0 15px 0;
}
.step-list li .ttl-step {
	color: #ea5414;
	position: relative;
	font-weight: bold;
	font-size: 1.4em;
	line-height: 1.5;
	padding-left: 2.5em;
	padding-top: .25em;
}
.step-list li .ttl-step::before {
	position: absolute;
	content: "1";
	display: block;
	border-radius: 50%;
	width: 1.5em;
	height: 1.5em;
	line-height: 1.5em;
	background-color: #ea5414;
	color: #fff;
	text-align: center;
	font-weight: bold;
	font-size: 1.4em;
	left: 0;
	top: 0;
}
.step-list li:nth-of-type(2) .ttl-step::before {
	content: "2";
}
.step-list li:nth-of-type(3) .ttl-step::before {
	content: "3";
}
.step-list li .img {
	margin: 1.5em auto;
	width: fit-content;
	max-width: 500px;
}
.step-list li:nth-of-type(2) .img {
	width: 40%;
	max-width: 200px;
}
.step-list li .step-txt {
	font-size: 1.1em;
}

/* ステップ英語 */
.en {
	font-family: "Helvetica Neue",Arial,sans-serif;
}
.step-list li .en .en-ttl {
	color: #ea5414;
	font-weight: bold;
	margin-top: 1em;
}

/* パスポート */
.passport-wrap {
	border: 5px solid #71411b;
	margin: var(--sec-s) auto;
	background-color: #fff;
	border-radius: 20px;
	text-align: center;
}
.passport-wrap h2 {
	background-color: #71411b;
	color: #fff;
	font-weight: 700;
	font-size: 1.4em;
	line-height: 1.25;
	border-radius: 10px 10px 0 0;
	padding: .5em 0;
}
.passport-wrap h2 .en {
	display: block;
	font-size: .75em;
	padding-top: .5em;
}
.passport-inner {
	padding: 20px;
}
.passport-inner .fz-s {
	font-size: .9em;
}
.passport-price {
	font-weight: 500;
	font-size: 1.5em;
	line-height: 1;
}
.passport-price strong {
	font-size: 1.5em;
	font-weight: 700;
}
.passport-place {
	margin: 1em auto;
}
.passport-place dt {
	border: 1px solid #333;
	width: fit-content;
	margin: 0 auto .5em;
	font-weight: normal;
	font-size: .9em;
	padding: 0 .5em;
}
.passport-place dd {
	font-size: 1.4em;
	font-weight: 500;
}
.rules {
	text-align: left;
	padding: 0 20px 20px;
}
.rules dt span {
	background-color: #71411b;
	color: #fff;
	padding: .3em 1em;
	margin: 0 auto .75em;
	width: fit-content;
	border-radius: 1em;
}
.rules dt::before,
.rules dt::after {
	border-top: 2px solid #71411b;
}
.rules dd {
	padding-left: 1em;
	font-size: .98em;
}
.rules dd::before {
	content: "●";
	color: #71411b;
	margin-left: -1em;
}
.rules dd:not(:last-of-type) {
	margin-bottom: .3em;
}
/* パスポート英語 */
.passport-en {
	margin: 0 20px 20px;
}
.passport-en .en-price strong {
	font-size: 1.5em;
}
.passport-en .en-place {
	font-size: 1.2em;
}
.passport-en .add {
	font-size: .9em;
}
.passport-en dt {
	color: #71411b;
	margin-top: 1em;
}
.passport-en dd {
	text-align: left;
	padding-left: 1em;
}
.passport-en dd::before {
	content: "●";
	color: #71411b;
	margin-left: -1em;
}

/* バルを楽しむ心得 */
.enjoy-wrap h2 {
	margin: auto;
	width: fit-content;
	max-width: 550px;
}
.enjoy-wrap h2 .en {
	display: block;
	text-align: center;
	background-color: #fff;	
}
.kokoroe-wrap {
	background-color: #fff;
	padding: 10px 15px 15px;
	border-radius: 0 0 20px 20px;
}
.kokoroe-box {
	background-color: #f9eec0;
	padding: 1.5em;
	border-radius: 10px;
}
.kokoroe01 {
	margin-bottom: 15px;
}
.kokoroe-ttl {
	color: #71411b;
	font-weight: bold;
	position: relative;
	font-size: 1.4em;
	line-height: 1.5;
	padding-left: 2.0em;
	margin-bottom: .75em;
}
.kokoroe-ttl::before {
	position: absolute;
	content: "1";
	display: block;
	border-radius: 50%;
	width: 1.25em;
	height: 1.25em;
	line-height: 1.25em;
	background-color: #71411b;
	color: #fff;
	text-align: center;
	font-weight: bold;
	font-size: 1.2em;
	left: 0;
	top: 0;
}
.kokoroe02 .kokoroe-ttl::before {
	content: "2";
}
.kokoroe-box figure {
	width: 50%;
	max-width: 200px;
	margin: 1em auto 0;
}
.kokoroe02 .kokoroe-txt {
	line-height: 1.6;
}
/* 心得英語 */
.kokoroe-box .en {
	margin-top: 20px;
}
.kokoroe-box .en dt {
	color: #71411b;
	padding-bottom: .5em;
}
.kokoroe-box .en li {
	font-size: .9em;
}

@media (min-width:768px) { 
	.passport-wrap h2 {
    font-size: 1.5em;
    padding: .75em 0;
}
	.passport-flex {
	display: grid;
	grid-template-columns: 4fr 6fr;
	align-items: center;
}
	.passport-flex .rules {
	padding: 30px;
}
	.rules dd:not(:last-of-type) {
	margin-bottom: .5em;
}
/* バルを楽しむ心得 */
	.kokoroe-wrap {
	padding: 30px 30px 30px;
	border-radius: 20px;
}
}

@media (min-width:960px) { 
	.step-list {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	grid-column-gap: 4%;
}
	.step-list li {
	display: grid;
}
	.step-list li:not(:last-of-type) {
	margin-bottom: 0px;
}
	.step-list li:not(:last-of-type)::after {
	border-width: 16px 0 16px 20px;
	border-color: transparent transparent transparent var(--orange);
	left: 104%;
	top: calc(50% + 10px);
}
	.step-list .list-inner {
	padding: 25px;
	/*display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;*/
}
	.step-list li .ttl-step {
	font-size: 1.4em;
	padding-left: 2.0em;
	padding-top: 0em;
}
	.step-list li .ttl-step::before {
	width: 1.3em;
	height: 1.3em;
	line-height: 1.3em;
	font-size: 1.2em;
}
	.step-list li .step-txt {
	font-size: 1.03em;
}
/* パスポート英語 */
	.passport-en {
	margin: 0 40px 30px;
}
	.passport-en dl {
	display: table;
	margin: auto;
}
/* バルを楽しむ心得 */
	.kokoroe-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 30px;
	padding: 30px;
}
	.kokoroe-wrap .kokoroe-box {
	padding: 2.5em;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto 1fr;
}
	.kokoroe-wrap .kokoroe01 {
	margin-bottom: 0;
}
	.kokoroe-wrap .kokoroe-ttl {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
}
	.kokoroe-wrap .kokoroe-txtwrap {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}
	.kokoroe-wrap .kokoroe-txt {
	/*grid-column: 1 / 2;
	grid-row: 2 / 3;*/
}
	.kokoroe-wrap ul {
	margin-top: 1em;
	/*grid-row: 2 / 3;*/
}
	.kokoroe-wrap figure {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	width: 90%;
}
	.kokoroe-wrap .en {
	grid-column: 1 / 3;
	grid-row: 3 / 4;
	width: 90%;
}
}

/*=====================================================*/
/* 店舗リスト */
/*=====================================================*/
.shop-wrap {
	margin-bottom: 0;
}
.tab-wrap {
	margin: 0 auto;
}
.tab-wrap .tab-inner {
	padding-left: 3%;
    padding-right: 3%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}
.ttl-tabtap {
	text-align: center;
	font-weight: 700;
	font-size: 1.2em;
	color: #ea5413;
	padding-bottom: 1em;
}
/* タブ */
.tab-list {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.tab-list-item {
	width: calc(98% / 3);
	text-align: center;
	height: 5em;
	cursor: pointer;
	color: #fff;
	position: relative;
	border-radius: 10px 10px 0 0;
	line-height: 1.3;
	background-color: var(--pink);
	display: none;
}
.tab-list-item .kikan {
	border-radius: 50px;
	background-color: #fff;
	display: inline-block;
	margin: 0 auto 2px;
	padding: .1em 1em;
	font-size: .8em;
	font-weight: 500;
	color: var(--pink);
}
.tab-list-item .area-name {
	font-weight: 700;
}
.tab-list-item .area-name strong {
	font-size: 1.3em;
}
.tab-list-item .date {
	font-size: .7em;
}
.tab-list-item .date-end {
	background-color: #c00;
	color: #fff;
	width: fit-content;
	margin: .2em auto 0;
	padding: .1em .5em;
}
.tab-list-item.is-btn-active {
	height: 6em;
}
.tab-list-item.tab02 {
	background-color: #ed6d10;
}
.tab-list-item.tab02 .kikan {
	color: #ed6d10;
}
.tab-list-item.tab03 {
	background-color: var(--green);
}
.tab-list-item.tab03 .kikan {
	color: var(--green);
}

/* タブの内容 */
.tab-contents-wrap:has(.tab-contents01.is-contents-active) {
	border-top: 8px solid var(--pink);
	border-bottom: 8px solid var(--pink);
}
.tab-contents-wrap:has(.tab-contents02.is-contents-active) {
	border-top: 8px solid var(--orange);
	border-bottom: 8px solid var(--orange);
}
.tab-contents-wrap:has(.tab-contents03.is-contents-active) {
	border-top: 8px solid var(--green);
	border-bottom: 8px solid var(--green);
}
.tab-contents {
	display: none;
	background-size: 200vw;
}
.tab-contents .comingsoon {
	text-align: center;
	width: fit-content;
	background-color: #fff;
	padding: 2em;
	border-radius: 10px;
	margin: auto;
}

/* 下のタブ */
.tab-inner-btm {
	margin-bottom: var(--sec-s);
}
.tab-inner-btm .tab-list {
	align-items: flex-start;
}
.tab-inner-btm .tab-list-item {
	border-radius: 0 0 10px 10px;
}

/* スワイプ */
.swipe-wrap {
	/*background-color: #ef8eaf;*/
	padding: 1em 0;
}
.swipe {
	text-align: center;
	border-radius: 50px;
	background-color: #fff;
	padding: .2em 2em;
	border: 2px solid var(--pink);
	margin: 0 auto;
	width: fit-content;
	display: flex;
	align-items: center;
	color: var(--pink);
	font-size: .9em;
	font-weight: 500;
	line-height: 1;
}

/* エリア地図 */
.tab-contents .map {
	height: 300px;
	width: 100vw;
	overflow-x: scroll;
}
.tab-contents .map img {
	max-width: none;
	/*width: 100%;*/
	height: 100%;
	display: block;
}

.tab-contents-inner {
	padding: 20px 3%;
}
.tab-contents.tab-contents01 { background-image: url("../img/bg-east.png"); }
.tab-contents.tab-contents02 { background-image: url("../img/bg-shiokoji.png"); }
.tab-contents.tab-contents03 { background-image: url("../img/bg-west.png"); }
.is-contents-active {
	display: block;
}

/* アンカーボタン */
.anc-btn {
	width: fit-content;
	display: flex;
	column-gap: 1em;
	margin: 0 auto 20px;
}
.anc-btn .btn-garapon a {
	background-color: #ffe900;
	color: #6a3906;
}
.tab-contents.tab-contents02 .anc-btn .btn-bartime a {
	background-color: var(--orange);
}
.tab-contents.tab-contents03 .anc-btn .btn-bartime a {
	background-color: var(--green);
}

/* 店舗内容 */
.shop-list {
	display: grid;
	gap: 1em;
	margin-bottom: 20px;
}
.shop-list li {
	background-color: #fff;
	border-radius: 10px;
	padding: 2%;
	border-width: 2px;
	border-style: solid;
	border-color: var(--pink);
}
.tab-contents02 .shop-list li {
	border-color: var(--orange);
}
.tab-contents03 .shop-list li {
	border-color: var(--green);
}
.tab-contents .shop-list li .tel {
	text-align: center;
	border-top: 1px dotted #ccc;
	padding-top: .3em;
	margin-top: .3em;
	font-weight: 500;
}

/* バルタイム */
.bartime-wrap {
	background-color: #fff;
	border-radius: 10px;
	padding: 20px 5px;
}
.bartime-wrap .bartime-ttl {
	width: 60%;
	max-width: 350px;
	margin: auto;
}
.bartime-wrap .swipe {
	
	margin-top: .5em;
}
.bartime-wrap {
	background-color: #fff;
	border-radius: 10px;
	padding: 20px 5px;
}
.bartime-imgwrap {
	display: flex;
	height: 80vh;
	background-color: #fff;
	overflow-x: scroll;
}
.tab-contents02 .bartime-imgwrap {
	height: 60vh;
}
.bartime-imgwrap .bartime-box {
	height: 100%;
}
.bartime-imgwrap .bartime-box img {
	height: 100%;
	max-width: none;
}

/* ガラポン */
.garapon-wrap {
	background-color: #fff;
    border-radius: 10px;
    padding: 20px 5px;
}
.garapon-wrap h3 {
	background-color: #ffe900;
	color: #6a3906;
	font-weight: 700;
	font-size: 1.3em;
	text-align: center;
	padding: .75em 3em;
	margin: 0 auto 1em;
	width: fit-content;
	border-radius: 50px;
}
.garapon-wrap dt {
	background-color: var(--pink);
	color: #fff;
	text-align: center;
	padding: .2em 1em;
	font-size: 1.1em;
	width: fit-content;
	margin: 1em auto .5em;
	border-radius: 3px;
}
.tab-contents.tab-contents02 .garapon-wrap dt {
	background-color: var(--orange);
}
.tab-contents.tab-contents03 .garapon-wrap dt {
	background-color: var(--green);
}
.garapon-wrap dd {
	font-weight: 700;
	font-size: 1.5em;
	text-align: center;
}


@media (min-width:768px) { 
	.ttl-tabtap {
	font-size: 1.5em;
}
/* タブ */
	.tab-list-item {
	height: 7.25em;
	border-radius: 15px 15px 0 0;
}
	.tab-list-item .kikan {
	margin: 0 auto 2px;
	padding: .1em 1em;
	font-size: 1em;
}
	.tab-list-item .area-name {
	font-size: 1.2em;
	margin: .1em 0;
}
	.tab-list-item .area-name strong {
	font-size: 1.5em;
}
	.tab-list-item .date {
	font-size: 1em;
}
	.tab-list-item .date-end {
	font-size: .8em;
	margin: .5em auto 0;
}
	.tab-list-item.is-btn-active {
	height: 8.5em;
}
	.tab-contents-inner {
    padding: 30px 3%;
}
/* スワイプ */
	.swipe-wrap {
	padding: 1.5em 0;
}
	.swipe {
	padding: .5em 2em;
	font-size: 1em;
}
	.anc-btn {
    margin: 0 auto 30px;
}
/* エリア地図 */
	.tab-contents .map {
	height: 400px;
}
	.shop-list {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 20px;
}
/* バルタイム */
	.bartime-wrap {
	border-radius: 20px;
    padding: 30px 10px;
}
/* ガラポン */
	.garapon-wrap {
    border-radius: 20px;
    padding: 30px;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}
	.garapon-flex {
	
	/*display: grid;
	width: fit-content;
	grid-template-columns: 1fr 1fr;
	column-gap: 10%;
	justify-content: center;
	position: relative;
	margin: auto;*/
}
/*
	.garapon-flex::before {
	position: absolute;
	content: "";
	display: block;
	width: 2px;
	height: 100%;
	background: linear-gradient(#ccc 0,#ccc 100%);
	left: 50%;
}
	.garapon-flex dl {
	margin: 0 auto;
}*/
}

@media (min-width:1200px) { 
	.ttl-tabtap {
	font-size: 1.8em;
}
/* タブ */
	.tab-list-item {
	height: 7.75em;
}
	.tab-list-item .area-name strong {
	font-size: 1.8em;
}
	.tab-list-item.is-btn-active {
	height: 9em;
}
/* エリア地図 */
	.tab-contents .map {
	height: 512px;
}
	.shop-list {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 30px;
}
/* バルタイム */
	.bartime-wrap {
	border-radius: 20px;
    padding: 30px 30px;
}
}


/*=====================================================*/
/* ミュージックバル */
/*=====================================================*/
.music-wrap {
	padding-top: 0!important;
	padding-bottom: 0 !important;
	background: rgb(255,255,255);
	background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(206,147,191,1) 100%);
}
.music-wrap2,
.music-wrap3 {
	background-repeat: no-repeat;
	background-size: 150vw;
}
.music-wrap2 {
	background-image: url("../img/music-bg-top.png");
	background-position: center top;
	padding-top: var(--sec-s);
}
.music-wrap3 {
	background-image: url("../img/music-bg-btm.png");
	background-position: center bottom;
	padding-bottom: var(--sec-s);
}
.music-wrap h2 {
	width: 75%;
	max-width: 570px;
	margin: auto;
}
.music-box {
	background-color: #fff;
	border: 2px solid #a40b5e;
	border-radius: 20px;
	margin-top: 60px;
	padding: 0 4% 20px;
}
.music-box h3 {
	width: 40%;
	min-width: 180px;
	max-width: 250px;
	margin: -40px auto 20px;
}
/* アーティスト写真 */
.music-pht {
	width: 90%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 4%;
	row-gap: 15px;
	margin: 0 auto 1em;
}
.music-pht figure {
	width: 48%;
}
.music-pht figcaption {
	font-size: .9em;
	text-align: center;
	padding-top: .5em;
}
/* タイムテーブル */
.music-box .timetable {
	background-color: #a40b5e;
	font-weight: 700;
	font-size: .9em;
	color: #fff;
	text-align: center;
	padding: .25em 0;
	margin-bottom: .75em;
}
.music-box .place {
	margin-bottom: .2em;
	font-weight: normal;
}
.music-box .place::before {
	content: "▶︎";
	color: #a40b5e;
}
.music-box table {
	margin: 0 auto;
}
.music-box.music-box0314 table {
	margin: 0 auto;
}
.music-box.music-box0314 table td {
	padding-left: .5em;
}
.music-box.music-box0314 table td:last-of-type {
	padding-right: 0;
}
.music-box td {
	padding-left: 1em;
	padding-right: 1em;
}
.music-box .fz-s {
	margin-top: .5em;
}

@media (min-width:768px) { 
	.music-box-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
}

@media (min-width:1200px) { 
	.music-wrap2,
	.music-wrap3 {
	background-size: 100vw;
}
	.music-box-wrap {
	grid-template-columns: 1fr 1fr 1fr;
	gap: 30px;
}

}


/*=====================================================*/
/* 協賛 */
/*=====================================================*/
.kyosan-wrap h2 {
	margin: 0 auto 1.5em;
	width: fit-content;
	font-weight: 700;
	font-size: 1.75em;
	position: relative;
}
.kyosan-wrap h2::after {
	position: absolute;
	content: "";
	display: block;
	width: 1.5em;
	height: 4px;
	background-color: var(--orange);
	left: calc(50% - .75em);
	top: calc(100% + .25em);
}
.kyosan-wrap .kyosan-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
	margin-bottom: 1em;
}
.kyosan-wrap .kyosan-list li {
	background-color: #fff;
	padding: .75em .8em;
	font-weight: 500;
	border-radius: 5px;
	box-shadow: 0 0 5px #f6df9d;
	align-content: center;
	border-left: 5px solid #f7ad00;
}
.kyosan-wrap .add {
	text-align: right;
	font-size: .8em;
}

@media (min-width:768px) { 
	.kyosan-wrap h2 {
	font-size: 2em;
	margin: 0 auto 2em;
}
	.kyosan-wrap h2::after {
	height: 5px;
}
	.kyosan-wrap .kyosan-list {
	gap: 1.25em;
}
	.kyosan-wrap .kyosan-list li {
	padding: 1.1em;
	border-radius: 8px;
	border-left: 8px solid #f7ad00;
}
}

@media (min-width:1100px) { 
	.kyosan-wrap h2 {
	font-size: 2em;
}
	.kyosan-wrap .kyosan-list {
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1.5em;
	margin-bottom: 0;
}
	.kyosan-wrap .kyosan-list li {
	padding: 1.25em;
	border-radius: 8px;
}
}

/*=====================================================*/
/* フッター */
/*=====================================================*/
footer {
	background-color: #71411b;
	background-image: url("../img/footer-bg.png");
	color: #fff;
	font-size: .9em;
}
footer dt {
	background-color: #fff;
	color: #71411b;
	border-radius: 4px;
	padding: .2em 1em;
	width: fit-content;
	margin: 0 auto .5em;
}
footer dt:not(:first-of-type) {
	margin-top: 1em;
}
footer dd {
	text-align: center;
}

@media (min-width:768px) { 
	footer dt {
	margin: 0 0 .5em;
}
	footer dd {
	text-align: left;
}
}

@media (min-width:960px) { 
	footer dl {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	grid-row-gap: 1em;
	align-items: center;
}
	footer dt,
	footer dt:not(:first-of-type){
	margin: 0;
}
	footer dd {
	padding-left: 1em;
	padding: .2em 1em;
}

}


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

   トップページ

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


/*=====================================================*/
/* トップページコンテンツ */
/*=====================================================*/


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

   動き

------------------------------------------------------------ */
@keyframes DownAnime {
  from {
	opacity: 0;
	transform: translateY(-150px);
  }
  to {
	opacity: 1;
	transform: translateY(0);
  }
}
/*@keyframes UpAnime {
  from {
    opacity: 1;
	transform: translateY(0);
  }
  to {
    opacity: 0;
	transform: translateY(-100px);
  }
}*/

/*フェードアップ*/
.fadeup {
	opacity: 0;
    transform: translateY(30px);
	/*transition-delay: 1s;*/
	transition-property: transform;
	transition-duration: 1s;
}
.fadeup.show {
	opacity: 1;
    transform: translateY(0);	
	animation: opacity 1s;
}
@-webkit-keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade {
	opacity: 0;
    transform: translateY(40px);
    transition: 1s;
	perspective: 1000;
	-webkit-backface-visibility: hidden;
backface-visibility: hidden;
	
	width:200px;
	height:100px;
	background-color:#f00;
	margin: auto;
}
.fade-in {
	opacity: 1;
    transform: translateY(0);
}

/* 文字が左から右に表示 */
.extendtxt {
	position: relative;
	display: inline-block;
}
.extendtxt span {
	opacity: 0;
	transition-property: opacity;
	transition-delay: .5s;
}
.extendtxt.show span {
	opacity: 1;
}
.extendtxt.show::after {
	animation: ExtendAnime .7s cubic-bezier(0,1.01,.85,1) forwards;
	position: absolute;
    content: "";
    display: block;
    height: 100%;
    top: 0;
    background-color: #000;
}

@keyframes ExtendAnime {
  0% {
	width: 0;
	left: 0;
/*    right: 0;*/
  }
  50% {
  	left: 0;
	width: 100%;
  }
  70% {
  	right: 0;
	width: 100%;
  }
  100% {
	width: 0;
	right: 0;
  }
}


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

   ●●●

------------------------------------------------------------ */
@media screen and (min-width:768px) { 
	
}
@media screen and (min-width:1100px) {
	
}