﻿/* **************#venue************* */

#venue {
	padding: 5% 0 0 0;
	margin: 0 auto;
	width: 100%;
	/*background-color: #22B0C7;*/
/*	float: left;
	display: inline;*/
}

@media screen and (max-width: 640px) {
#venue {
	padding: 25% 0 0 0;
	margin: 0 auto;
	width: 100vw;
	background-size: cover;
	background-position: center;
}
}

#venue h1 {
	color: #22B0C7;
	font-family: 'Roboto', sans-serif;
	font-weight: 200;
	font-size: 200%;
	margin: 0 0 5% 0;
	background-image:url(image);
	max-height: 100%;
	text-align: center;
	letter-spacing:5px;
}

@media screen and (max-width: 640px) {
#venue h1 {
	margin: 0 0 5% 0;
	}
}

#venue h2 {
	font-family: 'Noto Sans Japanese', serif;
	font-weight: 400;
	font-size:248%;	
	line-height:1.6em;	
	letter-spacing:3px;
	text-align:center;
	margin-bottom: 10%;
}

@media screen and (max-width: 1440px) {
#venue h2 {
	font-size:168%;	
}
}

@media screen and (max-width: 640px) {
#venue h2 {
	font-size:144%;
	letter-spacing:2px;
}
}

#venue h3 {
	font-family: 'Roboto', sans-serif;
	font-weight: 200;
	font-size: 200%;
	margin: 0 0 3% 0;
	background-image:url(image);
	max-height: 100%;
	text-align: center;
	letter-spacing:5px;
}

#venue h4 {
	font-family: 'Roboto', sans-serif;
	font-weight: 200;
	font-size: 200%;
	margin: 0 0 10% 0;
	background-image:url(image);
	max-height: 100%;
	text-align: center;
	letter-spacing:5px;
}

@media screen and (max-width: 640px) {
#venue h4 {
	margin: 0 0 2% 0;
}
}

#venue h5 {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:14px;
	line-height:1.6em;
	text-align: center;
	background-image:url(image);
	max-height: 100%;
	margin-bottom: 10%;
}

#venue p {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:14px;
	line-height:1.6em;
	text-align: left;
	background-image:url(image);
	max-height: 100%;
}

/* **************#venue_menu************* */

#venue_menu {
	padding: 0;
	margin: 0 auto;
	width:100%;
}

@media screen and (max-width: 1440px) {
#venue_menu {
	padding: 0;
	margin: 0 auto;
	width:100%;
}
}

@media screen and (max-width: 640px) {
#venue_menu {
	padding: 0;
	margin: 0 auto;
	width:100%;
}
}

#venue_menu .dit {
	-js-display: flex;
	display: flex;
	 flex: 1;
	margin:0 auto;
	align-items: center;
	justify-content: center;
}

@media screen and (max-width: 640px) {
#venue_menu .dit  {
 -webkit-flex-direction: column; /* Safari */
  flex-direction:         column;
}
}

#venue_menu .dit section {
	width:100%;
	background-position: center;
}

@media screen and (max-width: 640px) {
#venue_menu .dit section {
	padding:0;
	width:100%;
}
}

#venue_menu .txt {
	margin: 0 auto;
	width: 45%;
	padding: 0 10% 10% 10%;
}

@media screen and (max-width: 1440px) {
#venue_menu .txt {
	width: 55%;
}
}

@media screen and (max-width: 640px) {
#venue_menu .txt {
	width: 90%;
	padding: 0% 5% 10% 5%;
	}
}

#venue_menu .txt h5 {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:14px;
	line-height:1.6em;
	max-height: 100%;
	text-align: center;
	font-weight:normal;
	letter-spacing:2px;
	margin: 0;
}

#venue_menu .map {
	margin: 0 auto;
	padding: 0 10% 10% 0;
}

@media screen and (max-width: 640px) {
#venue_menu .txt {
	width: 90%;
	padding: 0% 5% 10% 5%;
	}
}

/* **************#varea************* */

#varea {
	padding: 0;
	margin: 0 auto;
 	-js-display: flex;
	display: flex;
	-webkit-align-items: center; /* Safari */
	align-items:         center;
}

@media screen and (max-width: 640px) {
	#varea {
	padding: 0;
	width:100%;
	}
}

#varea h2 {
	font-family: 'Noto Sans Japanese', serif;
	font-weight: 400;
	font-size:144%;
	line-height:1.6em;	
	letter-spacing:3px;
	color:#FFFFFF;
	text-align:center;
	margin-bottom: 10%;
}

#varea h3 {
	font-family: 'Noto Sans Japanese', serif;
	font-weight: 400;
	font-size:144%;
	line-height:1.6em;	
	letter-spacing:3px;
	color:#FFFFFF;
	text-align:center;
}

#varea p {
	color: #FFFFFF;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:14px;
	line-height:1.6em;
	text-align: left;
	background-image:url(image);
	max-height: 100%;
}

/* **************#varea_menu************* */

#varea_menu {
	padding: 0;
	margin: 0 auto;
	width:100%;
}

@media screen and (max-width: 1440px) {
#varea_menu {
	padding: 0;
	margin: 0 auto;
	width:100%;
}
}

@media screen and (max-width: 640px) {
#varea_menu {
	padding: 0;
	margin: 0 auto;
	width:100%;
}
}

#varea_menu .dit {
	-js-display: flex;
	display: flex;
	 flex: 1;
	margin:0 auto;
	align-items: stretch;
	justify-content: stretch;
}

@media screen and (max-width: 640px) {
#varea_menu .dit  {
 -webkit-flex-direction: column; /* Safari */
  flex-direction:         column;
}
}

#varea_menu .dit section {
	width:100%;
	background-position: center;
	background-color: rgba(0,0,0,0.7);
}

@media screen and (max-width: 640px) {
#varea_menu .dit section {
	padding:0;
	width:100%;
}
}

#varea_menu .dit section a {
	display:block;
	background-color: rgba(0,0,0,0.7);
}

#varea_menu .dit section a:hover{
/*  opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: "alpha(opacity=50)";*/
  text-decoration:none;
	background-color: rgba(255,255,255,0);
}

#varea_menu .dit section img {
	width: 70%;
}

#varea_menu .toyako {
	background-image: url(img/ph_toyako.jpg);
	background-size: cover;
}

#varea_menu .sobetsu {
	background-image: url(img/ph_sobetsu.jpg);
	background-size: cover;
}

#varea_menu .toyoura {
	background-image: url(img/ph_toyoura.jpg);
	background-size: cover;
}

#varea_menu .makkari {
	background-image: url(img/ph_makkari.jpg);
	background-size: cover;
}

#varea_menu .rusutsu {
	background-image: url(img/ph_rusutsu.jpg);
	background-size: cover;
}

#varea_menu .kimobetsu {
	background-image: url(img/ph_kimobetsu.jpg);
	background-size: cover;
}

#varea_menu .kyogoku {
	background-image: url(img/ph_kyogoku.jpg);
	background-size: cover;
}

#varea_menu .kutchan {
	background-image: url(img/ph_kutchan.jpg);
	background-size: cover;
}

#varea_menu .rankoshi {
	background-image: url(img/ph_rankoshi.jpg);
	background-size: cover;
}

#varea_menu .niseko {
	background-image: url(img/ph_niseko.jpg);
	background-size: cover;
}

#varea_menu .area {
	padding: 15% 10%;
}

@media screen and (max-width: 640px) {
#varea_menu .area {
	width: 90%;
	padding: 10% 5%;
	}
}

#varea_menu .sarea {
	padding: 30% 10%;
}

@media screen and (max-width: 640px) {
#varea_menu .sarea {
	width: 90%;
	padding: 10% 5%;
	}
}

/* **************#avenue************* */

#avenue {
	padding: 7% 0 5% 0;
	margin: 0 auto;
	width: 100%;
	background-size: cover;
	background-position: center;
}

@media screen and (max-width: 1440px) {
#avenue {
	padding: 10% 0 5% 0;
	margin: 0 auto;
	width: 100%;
	background-size: cover;
	background-position: center;
}
}

@media screen and (max-width: 640px) {
#avenue {
	padding: 25% 0 0 0;
	margin: 0 auto;
	width: 100vw;
	background-size: cover;
	background-position:center;
}
}

#avenue h1 {
	font-family: 'Noto Sans Japanese', serif;
	font-weight: 400;
	font-size:248%;	
	line-height:1.6em;	
	letter-spacing:3px;
	text-align:center;
}

@media screen and (max-width: 1440px) {
#avenue h1 {
	font-size:168%;	
}
}

@media screen and (max-width: 640px) {
#avenue h1 {
	font-size:144%;
	letter-spacing:2px;
}
}

#avenue h2 {
	color: #22B0C7;
	font-family: 'Roboto', sans-serif;
	font-weight: 200;
	font-size:144%;
	margin: 0 0 5% 0;
	background-image:url(image);
	max-height: 100%;
	text-align: center;
	letter-spacing:5px;
}

@media screen and (max-width: 640px) {
#avenue h2 {
	margin: 0 0 5% 0;
	}
}

#avenue h3 {
	color: #22B0C7;
	font-family: 'Roboto', sans-serif;
	font-weight: 200;
	font-size:144%;
	margin: 0 0 10% 0;
	background-image:url(image);
	max-height: 100%;
	text-align: center;
	letter-spacing:5px;
}

#avenue h4 {
	font-family: 'Roboto', sans-serif;
	font-weight: 200;
	font-size: 200%;
	background-image:url(image);
	max-height: 100%;
	text-align: center;
	letter-spacing:5px;
}

#avenue h5 {
	font-family: 'Noto Sans Japanese', serif;
	font-weight: 400;
	font-size:144%;
	line-height:1.6em;	
	letter-spacing:3px;
	text-align:center;
	margin-bottom: 5%;
}

#avenue p {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:14px;
	line-height:1.6em;
	text-align: left;
	background-image:url(image);
	max-height: 100%;
}

/* **************#avenue_menu************* */

#avenue_menu {
	padding: 0;
	margin: 0 auto;
	width:100%;
}

@media screen and (max-width: 1440px) {
#avenue_menu {
	padding: 0;
	margin: 0 auto;
	width:100%;
}
}

@media screen and (max-width: 640px) {
#avenue_menu {
	padding: 0;
	margin: 0 auto;
	width:100%;
}
}

#avenue_menu .dit {
	-js-display: flex;
	display: flex;
	 flex: 1;
	margin:0 auto;
	align-items: center;
	justify-content: center;
}

@media screen and (max-width: 640px) {
#avenue_menu .dit  {
 -webkit-flex-direction: column; /* Safari */
  flex-direction:         column;
}
}

#avenue_menu .dit section {
	width:100%;
}

@media screen and (max-width: 640px) {
#avenue_menu .dit section {
	padding:0;
	width:100%;
}
}

#avenue_menu .txt {
	margin: 0 auto;
	padding: 10%;
	width: 55%;
	background: rgba(255,255,255,0.8);
}

@media screen and (max-width: 1440px) {
#avenue_menu .txt {
	width: 60%;
}
}

@media screen and (max-width: 640px) {
#avenue_menu .txt {
	width: 90%;
	padding: 10% 5%;
	}
}

#avenue_menu .txt img {
	width: 100%;
}

#avenue_menu .marea {
	margin: 0 auto;
	padding: 10%;
	width: 55%;
	background: rgba(0,0,0,0.7);
}

@media screen and (max-width: 1440px) {
#avenue_menu .marea {
	width: 60%;
}
}

@media screen and (max-width: 640px) {
#avenue_menu .marea {
	width: 90%;
	padding: 10% 5%;
}
}


#avenue_menu .map {
	margin: 0 auto;
	width: 55%;
}

@media screen and (max-width: 1440px) {
#avenue_menu .map {
	width: 65%;
}
}

@media screen and (max-width: 640px) {
#avenue_menu .map {
	width: 100%;
	}
}

#avenue_menu .mtxt {
	padding: 10%;
	background: rgba(255,255,255,0.8);
}

@media screen and (max-width: 640px) {
#avenue_menu .mtxt {
	background: rgba(255,255,255,1);
}
}

#avenue_menu .lul {
	margin: 0px 0px 0px 15px;
	padding:0;
	list-style-position: outside;
}

#avenue_menu .lul li {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 14px;
	line-height: 1.6em;
	list-style: circle;
	text-align:left;
	max-height: 100%;
	color:#22B0C7;
}

#avenue_menu .lul li span {
	color:#000000;
}

#avenue_menu .lul a:link{
	text-decoration:none;
	color: #0A889C;
}

#avenue_menu .lul a:visited {
	text-decoration:none;
	color: #0A889C;
}

#avenue_menu .lul a:hover{
	text-decoration: underline;
	color: #F57200;
}

#avenue_menu .lul a:active {
	text-decoration:none;
	color: #0A889C;
}

#avenue_menu .sm {
	display: none;
}

@media screen and (max-width: 640px) {
#avenue_menu .sm {
	display: block;
}
}

/* **************#svenue************* */

#svenue {
	padding: 0;
	margin: 0 auto;
	width: 100%;
	background-size: cover;
	background-position: center;
}

@media screen and (max-width: 640px) {
#svenue {
	padding: 0;
	margin: 0 auto;
	width: 100vw;
	background-size: cover;
	background-position:center;
}
}

#svenue h3 {
	font-family: 'Noto Sans Japanese', serif;
	font-weight: 400;
	font-size:144%;
	line-height:1.6em;	
	letter-spacing:3px;
	text-align:center;
	margin-bottom: 5%;
}

#svenue h4 {
	font-family: 'Noto Sans Japanese', serif;
	font-weight: 400;
	font-size:144%;
	line-height:1.6em;	
	letter-spacing:3px;
	text-align:center;
	margin-bottom: 3%;
}

#svenue h5 {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:14px;
	font-weight: normal;
	line-height:1.6em;
	text-align: center;
	background-image:url(image);
	max-height: 100%;
}

#svenue p {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:14px;
	line-height:1.6em;
	text-align: left;
	background-image:url(image);
	max-height: 100%;
}

/* **************#svenue_menu************* */

#svenue_menu {
	padding: 0;
	margin: 0 auto;
	width:100%;
}

@media screen and (max-width: 1440px) {
#svenue_menu {
	padding: 0;
	margin: 0 auto;
	width:100%;
}
}

@media screen and (max-width: 640px) {
#svenue_menu {
	padding: 0;
	margin: 0 auto;
	width:100%;
}
}

#svenue_menu .dit {
	-js-display: flex;
	display: flex;
	 flex: 1;
	margin:0 auto;
	align-items: center;
	justify-content: center;
}

@media screen and (max-width: 640px) {
#svenue_menu .dit  {
 -webkit-flex-direction: column; /* Safari */
  flex-direction:         column;
}
}

#svenue_menu .dit section {
	width:100%;
}

@media screen and (max-width: 640px) {
#svenue_menu .dit section {
	padding:0;
	width:100%;
}
}

#svenue_menu .txt {
	margin: 0 auto;
	width: 75%;
	background: rgba(255,255,255,0.8);
}

@media screen and (max-width: 1440px) {
#svenue_menu .txt {
	width: 80%;
}
}

@media screen and (max-width: 640px) {
#svenue_menu .txt {
	width: 100%;
	background: rgba(255,255,255,1);
	}
}

#svenue_menu .data {
	padding: 10% 10% 0 10%;
}

@media screen and (max-width: 640px) {
#svenue_menu .data {
	padding: 10%;
}
}

#svenue_menu .photo {
	padding: 5% 10% 10% 10%;
}

@media screen and (max-width: 640px) {
#svenue_menu .photo {
	padding: 0;
	}
}

#svenue_menu .photo p {
	text-align: center;
}

#svenue_menu .pc {
	display: block;
}

@media screen and (max-width: 640px) {
#svenue_menu .pc {
	display: none;
}
}

#svenue_menu .sm {
	display: none;
}

@media screen and (max-width: 640px) {
#svenue_menu .sm {
	display: block;
}
}
