@charset "utf-8";

@font-face {
	font-family: 'myfont';
	src: url('../font/MPLUSRounded1c-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'myfont';
	src: url('../font/MPLUSRounded1c-Bold.ttf') format('truetype');
	font-weight: bold;
}
@font-face {
	font-family: 'youfont';
	src: url('../font/Sriracha-Regular.ttf') format('truetype');
}
  ページ全体の設定 
html *,
::before,
::after {
	box-sizing: border-box;
}
body {
	font-size: 20px;
	font-family: sans-selif;
	font-weight: bold;
	color: #134098;
	margin: 0 auto;
}
img {
	width: 100%;
	vertical-align: bottom;
}
h1, h2, h3{
	margin: 0;
}
h1, h2 {
	font-family: 'myfont';
	font-weight: bold;
}
h3 {
	font-family: 'myfont';
}
strong {
	font-size: 1.5rem;
}
ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
a {
	color: #134098;
	text-decoration: none;
}
a:hover {
	opacity: 0.6;
}
ul {
	list-style: none;
}
.w {
	max-width: 1000px;
	margin: 0 auto;
}
@media (max-width:790px){
	body {
		max-width: 790px;
		font-size: 16px;
	}
}
@media (max-width: 480px){
	body {
		max-width: 480px;
		font-size: 16px;
	}
}
/*//////*/
/*header*/
/*//////*/
.header {
	background-image: url(../img/top_not_pole.png);
	background-size: cover;
	height: auto;
	padding-bottom: 100px;
}
.header-logo {
	width: 200px;
	padding: 1% 0 0 15px;
	margin: 0;
	}
.sekai {
	font-family: 'myfont';
	font-weight: bold;
	line-height: 2;
	text-align: center;
	margin: 10% auto 0 auto;
	background-color: rgba(255,255,255,0.9);
	max-width: 600px;
}
@media(axn-width: 767px){
	.header {
		height: 100%;
	}
	.header-logo {
		width: 200px;
	}
	.sekai {
		margin: 30% 20px 0 20px;
	}
}
@media(max-width: 480px){
	.header {
		height: 100%;
		padding-bottom: 100px;
	}
	.header-logo {
		width: 200px;
	}
	.sekai {
		margin: 20% 10px 0 10px;
		font-size: 15px;
	}
}
/*//////////*/
/*///メイン///*/
/*//////////*/
.all {
	display: flex;
}
.surf {
	background-image: url(../img/surf_p1.png);
	width: 100%;
	height: 400px;
	background-repeat: no-repeat;
	background-size: cover;
}
.surf-img {
	display: flex;
	flex-direction: column;
}
.w-button {
	font-size: 1.8rem;
	width: 120px;
	height: 40px;
	background-color: #fff;
	text-align: center;
	line-height: 40px;
	border-radius: 10px;
		margin: 150px 0 0 60%;
}
.w-button a {
	color: skyblue;
}
.w-button:hover {
	box-shadow: none;
	background: #000;
}
.surf p {
	margin: 25px 0 0 15px;
	padding-left: 10px;
	line-height: 1.8;
	background-color: rgba(255,255,255,0.9);
	max-width: 400px;
}
.snow {
	background-image: url(../img/snow_p1.png);
	width: 100%;
	height: 400px;
	background-repeat: no-repeat;
	background-size: cover;
}
.snow p {
	margin: 0;
	margin: 25px 0 0 15px;
	line-height: 1.8;
	background-color: rgba(255,255,255,0.9);
	max-width: 400px;
	padding-left: 10px;
}
.bk-button {
	font-size: 1.8rem;
	width: 120px;
	height: 40px;
	background-color: #000;
	text-align: center;
	line-height: 40px;
	border-radius: 10px;
		margin: 150px 0 0 60%;
}
.bk-button a {
	color: skyblue;
}
.bk-button:hover {
	box-shadow: none;
	background: #fff;
}
.snow-img {
	display: flex;
	flex-direction: column;
}
@media(max-width: 767px){
	.all {
		display: block;
	}
	.surf-img {
		align-items: center;
	}
	.surf-img p {
		margin-left: 0;
		font-size: 20px;
	}
	.snow-img {
		align-items: center;
	}
	.snow-img p {
		margin-left: 0;
		font-size: 20px;
	}
}
@media(max-width: 480px){
	.all {
		display: block;
	}
	.surf-img {
		align-items: center;
	}
	.surf-img p {
		margin: 50px 10px 0 10px;
		font-size: 20px;
	}
	.snow-img {
		align-items: center;
	}
	.snow-img p {
		margin: 50px 10px 0 10px;
		font-size: 20px;
	}
}
.footer-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: black;
}
.footer-p {
	color: #000;
	font-size: 0.8rem;
	text-align: right;
	margin: 2px 5px 0 0 ;
}
.footer-logo{
	width: 200px;
	height: 100%;
	padding: 5px 0 5px 10px;
}
.footer-container p {
	color: #fff;
	font-size: 0.8rem;
	padding-right: 10px;
}
@media(max-width: 480px){
	.footer-container p {
		text-align: right;
	}
}
/*/////////*/
/*surf.html*/
/*/////////*/
.surf-main {
	background-image: url(../img/surf_p2.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	padding-bottom: 20px;
}
.surf-main h2 {
	padding: 70px 0 20px 50px;
}
.style {
	background-color: rgba(255,255,255,0.9);
	text-align: center;
	margin: 0 50px;
	border-radius: 10px;
}
.style h3 {
	padding: 16px 0 0 10px;
	text-align: start;
}
.style p {
	color: #000;
	margin-bottom: 0;
	line-height: 1.6;
	padding: 0 0 20px 15px;
	text-align: start;
}
.mind {
	background-color: rgba(255,255,255,0.9);
	text-align: center;
	margin: 50px 50px 0 50px;
	border-radius: 10px;
}
.mind h3 {
	padding: 16px 0 0 10px;
	text-align: start;
}
.mind p {
	color: #000;
	margin-bottom: 0;
	line-height: 1.6;
	padding: 0 0 20px 15px;
	text-align: start;
}
.time {
	background-color: rgba(255,255,255,0.9);
	text-align: center;
	margin: 50px 50px 0 50px;
	border-radius: 10px;
}
.time h3 {
	padding: 16px 0 0 10px;
	text-align: start;
}
.time p {
	color: #000;
	margin-bottom: 0;
	line-height: 1.6;
	padding: 0 0 20px 15px;
	text-align: start;
}
.love {
	background-color: rgba(255,255,255,0.9);
	text-align: center;
	margin: 50px 50px 0 50px;
	border-radius: 10px;
}
.love h3 {
	padding: 16px 0 0 10px;
	text-align: start;
}
.love p {
	color: #000;
	margin-bottom: 0;
	line-height: 1.6;
	padding: 0 0 20px 15px;
	text-align: start;
}
.dem {
	background-color: rgba(255,255,255,0.9);
	text-align: center;
	margin: 0 50px;
	border-radius: 10px;
}
.dem h3 {
	padding: 16px 0 0 10px;
	text-align: start;
}
.dem p {
	color: #000;
	margin-bottom: 0;
	line-height: 1.6;
	padding: 0 0 20px 15px;
	text-align: start;
}
.start {
	background-color: rgba(255,255,255,0.9);
	text-align: center;
	margin: 50px 50px 0 50px;
	border-radius: 10px;
}
.start h3 {
	padding: 16px 0 0 10px;
	text-align: start;
}
.start p {
	color: #000;
	margin-bottom: 0;
	line-height: 1.6;
	padding: 0 0 20px 15px;
	text-align: start;
}
.item {
	background-color: rgba(255,255,255,0.9);
	text-align: center;
	margin: 50px 50px 0 50px;
	border-radius: 10px;
}
.item h3 {
	padding: 16px 0 0 10px;
	text-align: start;
}
.item p {
	color: #000;
	padding-bottom: 20px;
	line-height: 1.6;
	padding: 0 0 20px 15px;
	text-align: start;
}
.station {
	max-width: 80%;
	margin: 10px auto 10px;
	padding: 10px;
	border: 2px solid;
	border-radius: 10px;
}
.station h4 {
	margin-top: 0;
	font-size: 1.5rem;
}
.station p {
	color: #000;
	line-height: 1.6;
}
.station a {
	font-family: 'myfont';
}
.station ul {
	line-height: 2;
}
.adres {
	display: flex;
	justify-content: space-around;
	margin: 50px auto 0 auto;
	padding-top: 10px;
	color: #000;
	border: 2px solid #585858;
	border-radius: 10px;
}
@media(max-width: 767px){
	.station {
		flex-direction: column;
		align-items: center;
	}
	.map {
		margin-top: 20px;
	}
}
.map {
	width: 300px;
}
@media(max-width: 480px){
	.station {
		flex-direction: column;
		align-items: center;
	}
	.map {
		margin-top: 50px;
	}
}

.footer {
	background-color: #000;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px;
}
.footer img {
	width: 200px;
	margin: 1% 0;
}
.copy {
	color: #000;
	font-size: 0.8rem;
	text-align: right;
	margin: 2px 5px 0 0 ;
}
.footer-p-snow a, .footer-p-surf a {
	color: #fff;
	font-family: 'youfont';
	font-size: 2rem;
}
/*//////////*/
/*///snow///*/
/*//////////*/
.snow-main {
	background-image: url(../img/snow_p1.1.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	padding-bottom: 15px;
}
.snow-main h2 {
	padding: 70px 0 20px 50px;
}
.refresh {
	background-color: rgba(255,255,255,0.9);
	text-align: center;
	margin: 0 50px;
	border-radius: 10px;
}
.refresh h3 {
	padding: 16px 0 0 10px;
	text-align: start;
}
.refresh p {
	color: #000;
	margin-bottom: 0;
	line-height: 1.6;
	padding: 0 0 20px 15px;
	text-align: start;
}
.health {
	background-color: rgba(255,255,255,0.9);
	text-align: center;
	margin: 50px 50px 0 50px;
	border-radius: 10px;
}
.health h3 {
	padding: 16px 0 0 10px;
	text-align: start;
}
.health p {
	color: #000;
	margin-bottom: 0;
	line-height: 1.6;
	padding: 0 0 20px 15px;
	text-align: start;
}
.snow-main2 {
	background-image: url(../img/ski_area.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	padding-bottom: 20px;
}
.snow-main2 section:first-child {
	padding-top: 20px;
}
.snow-main2 h2 {
	padding: 70px 0 20px 50px;
}
.naeba {
	background-color: rgba(255,255,255,0.9);
	text-align: center;
	margin: 0 50px;
	border-radius: 10px;
}
.naeba h3 {
	color: #134098;
	padding: 16px 0 0 10px;
	text-align: start;
}
.naeba p {
	color: #000;
	margin-bottom: 0;
	line-height: 1.6;
	padding: 0 0 20px 15px;
	text-align: start;
}
.access {
	background-color: rgba(255,255,255,0.9);
	text-align: center;
	margin: 50px 50px 0 50px;
	border-radius: 10px;
}
.access h3 {
	color: #134098;
	padding: 16px 0 0 10px;
	text-align: start;
}
.access h4 {
	padding-left: 10px;
	text-align: start;
}
.access p {
	color: #000;
	margin-bottom: 0;
	line-height: 1.6;
	padding: 0 0 20px 15px;
	text-align: start;
}
.car {
	margin-top: 50px;
}
.maiko {
	background-color: rgba(255,255,255,0.9);
	text-align: center;
	margin: 100px 50px 0 50px;
	border-radius: 10px;
}
.maiko h3 {
	color: #134098;
	padding: 16px 0 0 10px;
	text-align: start;
}
.maiko p {
	color: #000;
	margin-bottom: 0;
	line-height: 1.6;
	padding: 0 0 20px 15px;
	text-align: start;
}
.maiko-access {
	background-color: rgba(255,255,255,0.9);
	text-align: center;
	margin: 50px 50px 0 50px;
	border-radius: 10px;
}
.maiko-access h3 {
	color: #134098;
	padding: 16px 0 0 10px;
	text-align: start;
}
.maiko-access h4 {
	padding-left: 10px;
	text-align: start;
}
.maiko-access p {
	color: #000;
	margin-bottom: 0;
	line-height: 1.6;
	padding: 0 0 20px 15px;
	text-align: start;
}
@media(max-width: 767px){
.snow-main {
	background-image: url(../img/snow_p1.2.png);
	background-size: cover;
	background-attachment: fixed;
}
	.style, .mind, .time, .love, .dem, .start, .item, .refresh, .health, .naeba, .access, .maiko, .maiko-access {
		padding: 0 20px;
	}
	.style, .mind, .time, .love, .dem, .start, .item, .refresh, .health, .naeba, .access, .maiko, .maiko-access p {
		line-height: 2;
	}
	br {
		display: none;
	}
}

.tooltip.bottom {
	background: url(../img/maiko.png);
	padding-top: 40px;
	height: 55px;
}
.tooltip.bottom {
	background: url(../img/maiko.png);
}