@charset "UTF-8";

html { line-height:1.15; /* 1 */ -webkit-text-size-adjust:100%; /* 2 */ overflow-x: hidden; }

body { margin:0; background:url(../common/images/bg.gif) left top repeat!important; }

h1 { font-size:2em; margin:0 50px 0 0; }

#wrapper { margin:auto; }

#contents { max-width:1200px; margin:auto; }

@media screen and (max-width: 736px) {
	#contents { padding:0 10px; }
}

.SP { display:none; }

@media screen and (max-width:1015px) { .PC { display:none!important; } .SP { display:block; } }

ul,li{
	list-style-type:none;
}

a img{
	border:none;
}

a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=80);
}

hr{
	display:none;
}

a {
	color:#1f9dd3;
	word-break:break-all;
	outline:none;
	text-decoration:underline;
}
a:hover {
	color:#1f9dd3;
	text-decoration:none;
}

strong{
	font-weight:900;
}



/******************************************************************
common
******************************************************************/
.mainImg{
}

.mainImg img{
	width:100%;
	height:auto;
	min-height:1300px;
	max-height:1310px;
	object-fit:cover;
}

@media screen and (max-width: 736px) {
	.mainImg img{
		min-height:auto;
		min-height:630px;
		max-height:640px;
	}
}

.menuArea{
	position:absolute;
	top:50px;
	width:1200px;
	padding:0;
}

.menuArea ul li{
	float:left;
}

.menuArea ul li.menuList{
	margin-top:25px;
}

.menuArea ul li.menuList.bgW{
	background:#fff;;
}

.spLogo{
	position:absolute;
	top:10px;
	left:10px;
	width:100%;
	margin:0;
}

.spLogo img{
	width:10%;
}

.titleArea{
	position:absolute;
	top:40px;
	width:1200px;
	text-align:center;
}

@media screen and (max-width: 736px) {
	.titleArea{
		top:20px;
		width:95%;
		display: flex;
		justify-content: center;
	}

	.titleArea .mainTitle{
		width:88%;
	}
}

h2.title{
	margin:60px 0 50px 0;
}

@media screen and (max-width: 736px) {
	h2.title{
		margin:25px 0 20px 0;
	}
}



/******************************************************************
taisyou
******************************************************************/
dl.taisyouList{
	width:100%;
}

dl.taisyouList dt{
	background:#fdffad;
	float:left;
	width:35%;
	text-align:right;
	padding-right:3%;
	margin-bottom:10px;
}

dl.taisyouList dd{
	background:#fdffad;
	float:left;
	width:62%;
	margin-bottom:10px;
}

@media screen and (max-width: 736px) {
	dl.taisyouList dt{
		width:100%;
		text-align:center;
		padding-right:0;
		font-size:110%;
		font-weight:bold;
	}

	dl.taisyouList dd{
		background:#fff;
		width:100%;
		text-align:center;
		margin-bottom:15px;
	}
}

.taisyouCaution{
	font-size:105%;
	font-weight:bold;
	text-align:center;
	margin-top:-20px;
}

@media screen and (max-width: 736px) {
	.taisyouCaution{
		font-size:80%;
		margin-top:-25px;
		line-height:150%;
	}
}

#taisyou h3{
	text-align:center;
	margin:30px 0 30px 0;
}

#taisyou #taisyouTable{
	width:100%;
	margin-bottom:30px;
}

#taisyou #taisyouTable th{
	border:solid #999;
	background:#f3f3f3;
	padding:5px;
	text-align:center;
	vertical-align:middle;
}

#taisyou #taisyouTable td{
	border:solid #999;
	padding:5px;
}

#taisyou h4{
	font-size:125%;
	font-weight:bold;
	margin-bottom:15px;
}



/******************************************************************
campaign
******************************************************************/
#campaign{
	width:100vw;
	background:#edf3f3;
	margin-left: calc(-50vw + 50%);
	display: flex;
	justify-content: center;
}

#campaign .campaignInner{
	width:100vw;
	width:1200px;
}

@media screen and (max-width: 736px) {
	#campaign .campaignInner{
		padding:0 10px;
	}
}

.campaignCaution{
	width:1100px;
	margin:25px auto 60px;
}

@media screen and (max-width: 736px) {
	.campaignCaution{
		width:100%;
		margin:10px auto 30px;
		font-size:80%;
		line-height:180%;
	}
}

.cauTitle{
	background:#fff333;
	border:1px solid #000;
	padding:5px 10px;
	font-weight:bold;
	font-size:105%;
}


/******************************************************************
ski
******************************************************************/
#ski{
	width:100vw;
	background:url("../images/map_bg.png");
	margin-left: calc(-50vw + 50%);
	display: flex;
	justify-content: center;
}

#ski .skiInner{
	width:100vw;
	width:1200px;
	margin-bottom:60px;
}

@media screen and (max-width: 736px) {
	#ski .skiInner{
		padding:0 10px;
		margin-bottom:30px;
	}
}



/******************************************************************
area
******************************************************************/
#area{
	width:100vw;
	margin-left: calc(-50vw + 50%);
	display: flex;
	justify-content: center;
}

#area .areaInner{
	width:100vw;
	width:1020px;
}

@media screen and (max-width: 736px) {
	#area .areaInner{
		padding:0 10px;
	}
}

#area ul.areaBox{
	width:1020px;
	margin:60px 0 50px 0;
}

#area ul.areaBox li{
	width:480px;
	float:left;
	padding-bottom:20px;
}

#area ul.areaBox li.box1{
	margin-right:60px;
}

#area ul.areaBox li.box2{
	margin-right:0;
}

@media screen and (max-width: 736px) {
	#area ul.areaBox{
		width:100%;
		margin:30px 0 30px 0;
	}

	#area ul.areaBox li{
		width:100%;
		padding-bottom:15px;
	}

	#area ul.areaBox li.box1{
		margin:0;
	}

	#area ul.areaBox li.box2{
		margin:0;
	}
}

.areaTitle01{
	margin:15px 0 8px 0;
	font-weight:bold;
	font-size:110%;
	color:#ea758b;
}

.areaTitle02{
	margin:15px 0 8px 0;
	font-weight:bold;
	font-size:110%;
	color:#155bbb;
}

.areaTitle03{
	margin:15px 0 8px 0;
	font-weight:bold;
	font-size:110%;
	color:#f39800;
}

.areaTitle04{
	margin:15px 0 8px 0;
	font-weight:bold;
	font-size:110%;
	color:#006600;
}



/******************************************************************
insta
******************************************************************/
#insta{
	width:100vw;
	margin-left: calc(-50vw + 50%);
	display: flex;
	justify-content: center;
}

#insta .instaInner{
	width:100vw;
	width:1100px;
	margin-bottom:20px;
}

@media screen and (max-width: 736px) {
	#insta .instaInner{
		padding:0 10px;
		margin-bottom:10px;
	}
}



/******************************************************************
footer
******************************************************************/
#footer{
	width:100vw;
	background:#f5f5f5;
	margin-left: calc(-50vw + 50%);
	display: flex;
	justify-content: center;
	border-top:1px solid #c1c1c1;
}

#footer .footerInner{
	width:1200px;
	margin:auto;
	padding:20px 0 45px 0;
}

@media screen and (max-width: 736px) {
	#footer .footerInner{
		padding:15px 0 45px 0;
	}
}

#footer .footerInnerLeft{
	float:left;
}

#footer .footerInnerRight{
	float:right;
}

@media screen and (max-width: 736px) {
	#footer .footerInnerLeft{
		width:100%;
		padding-bottom:10px;
		line-height:180%;
		text-align:center;
	}

	#footer .footerInnerRight{
		width:100%;
	}
}

@media screen and (max-width:1015px) {
	#footer{
		font-size:80%;
		margin-top:0;
	}

	#footer .footerInner{
		width:90%;
		margin:auto;
	}
}

.footImg{
	width:1200px;
	margin:auto;
	position: relative;
	top:1px;
}


#footer a {
	color:#000;
}

#footer a:hover {
	color:#000;
}



/******************************************************************
layout - header
******************************************************************/
.l-header { position: absolute; top: 0; width: 100%; }

@media screen and (max-width: 736px) { .l-header { position: relative; align-items: center; } }

.l-header__logo { position: absolute; top: 2.5rem; left: 2.5rem; z-index: 100; width: 195px; text-align: center; }

@media screen and (max-width: 736px) { .l-header__logo { top: 1.05rem; left: 1.05rem; max-width: 150px; width: 30%; } }

.l-header__logo a:first-child { display: inline-block; margin-bottom: 1.8rem; }

.l-header__logo a:first-child img { width: 100%; }

@media screen and (max-width: 736px) { .l-header__logo a:first-child { margin-bottom: 1rem; } }

@media screen and (max-width: 736px) { .l-header__logo a:nth-child(2) img { width: 56%; } }

.l-header__menu { position: fixed; top: 2.5rem; right: 2.5rem; z-index: 100; display: flex; line-height: 1; }

@media screen and (max-width: 736px) { .l-header__menu { top: 1.05rem; right: 1.05rem; } }

.l-header__btn { border: 1px solid #a5a5a5; border-right: 0; }

@media screen and (max-width: 736px) { .l-header__btn { margin-right: 0; } }

.l-header__btn li { font-family: "ÓÎ¥´¥·¥Ã¥¯Ìå",YuGothic,"¥á¥¤¥ê¥ª",Meiryo,"¥Ò¥é¥®¥Î½Ç¥´ Pro W3","Hiragino Kaku Gothic Pro","£Í£Ó £Ð¥´¥·¥Ã¥¯","MS PGothic",sans-serif; letter-spacing: 0; box-sizing: border-box; background: rgba(255, 255, 255, 0.6); }

.l-header__btn li:first-child { border-bottom: 1px solid #a5a5a5; }

@media screen and (max-width: 736px) { .l-header__btn li:first-child { margin-bottom: 0; } }

.l-header__btn a { display: block; color: inherit; text-decoration: none; transition-property: all; transition-duration: 0.3s; }

.l-header__btn a:hover, .l-header__btn a:focus { color: inherit; text-decoration: none; }

.l-header__btn a.is-active, .l-header__btn a:hover:not(:disabled) { opacity: 0.6; }

.l-header__btn a img { height: 22px; }

@media screen and (max-width: 736px) { .l-header__btn a img { height: 18px; } }

.l-header__hamburger { background: rgba(255, 255, 255, 0.6); box-sizing: border-box; height: 47px; width: 46px; padding: 15px 0 0 9px; cursor: pointer; position: relative; border: 1px solid #a5a5a5; }

@media all and (-ms-high-contrast: none) { .l-header__hamburger { padding: 17px 0 0 9px; } }

@media screen and (max-width: 736px) { .l-header__hamburger { height: 39px; width: 39px; padding: 11px 0 0 8px; } }

.l-header__hamburger span { display: block; display: inline-block; top: -2px; vertical-align: middle; position: relative; border-top: 2px solid #444; width: 25px; }

.l-header__hamburger span::before, .l-header__hamburger span::after { position: absolute; content: ""; margin: auto; box-sizing: border-box; vertical-align: middle; width: 0; height: 0; left: 0; }

.l-header__hamburger span::before { border-bottom: 2px solid #444; width: 25px; bottom: 8px; }

.l-header__hamburger span::after { border-bottom: 2px solid #444; width: 25px; bottom: -8px; }

@media screen and (max-width: 736px) { .l-header__hamburger span { display: inline-block; top: -2px; vertical-align: middle; position: relative; border-top: 2px solid #444; width: 20px; }
  .l-header__hamburger span::before, .l-header__hamburger span::after { position: absolute; content: ""; margin: auto; box-sizing: border-box; vertical-align: middle; width: 0; height: 0; left: 0; }
  .l-header__hamburger span::before { border-bottom: 2px solid #444; width: 20px; bottom: 7px; }
  .l-header__hamburger span::after { border-bottom: 2px solid #444; width: 20px; bottom: -7px; } }

.l-header__hamburger:hover span { opacity: 0.6; }

.l-header__hamburger.is-active span { border-top-color: transparent; }

.l-header__hamburger.is-active span::before { bottom: 0; transform: rotate(-45deg); }

.l-header__hamburger.is-active span::after { bottom: 0; transform: rotate(45deg); }



/******************************************************************
layout - expandmenu
******************************************************************/
.l-expandmenu { display: none; position: fixed; right: 0; top: calc(2.5rem + 47px - 1px); box-sizing: border-box; margin-right: 2.5rem; width: 300px; background: rgba(255, 255, 255, 0.9); padding-right: 1rem; padding-left: 1rem; padding-bottom: 0rem; z-index: 100; border: 1px solid #a5a5a5; }

@media screen and (max-width: 736px) { .l-expandmenu { margin-right: 1.05rem; top: calc(1.5rem + 32px - 1px); width: 200px; } }

.l-expandmenu__main li { border-bottom: 1px dotted rgba(0, 0, 0, 0.4); }

.l-expandmenu__main li.last { border-bottom: none; }

.l-expandmenu__main a { color: inherit; text-decoration: none; display: block; padding: 0.5em 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.l-expandmenu__main a:hover, .l-expandmenu__main a:focus { color: inherit; text-decoration: none; }

.l-expandmenu__main a:hover { opacity: 0.6; }

.l-expandmenu__main li.is-active a { color: #15587a; }

.l-expandmenu__sns { margin-top: 1rem; display: flex; justify-content: center; }

.l-expandmenu__sns li { margin: 0 0.6rem; }

.l-expandmenu__sns li img { width: 27px; }

@media screen and (max-width: 736px) { .l-expandmenu__sns li { margin: 0 0.4rem; }
  .l-expandmenu__sns li img { width: 23px; } }

.l-expandmenu p { margin-top: 0.3rem; text-align: center; }

@media screen and (max-width: 736px) { .l-expandmenu p img { width: 100px; } }



/******************************************************************
map
******************************************************************/
.map_area{
	position: relative;

	margin: 0 auto;
}

.map_area .fuki{
	cursor: pointer;
	background:#fff;
	width:520px;
}


.map_bandai{
	position: absolute;
	top:50px;
	left:35px;
	display: none;
	padding:20px;
	border: solid 1px #b9b9b9;
}

.map_aizu{
	position: absolute;
	top:250px;
	left:350px;
	display: none;
	padding:20px;
	border: solid 1px #b9b9b9;
}

.map_adatara{
	position: absolute;
	top:150px;
	left:230px;
	display: none;
	padding:20px;
	border: solid 1px #b9b9b9;
}

.map_shirakawa{
	position: absolute;
	top:380px;
	left:650px;
	display: none;
	padding:20px;
	border: solid 1px #b9b9b9;
}


h3.skiTitle{
	margin:15px 0 10px 0;
	font-weight:bold;
	border-bottom:1px solid #000;
}

ul.skiList{
	margin-bottom:10px;
}

ul.skiList li{
	float:left;
	width:50%;
	font-size:90%;
	line-height:125%;
}

@media screen and (max-width: 736px) {
	ul.skiList li{
		width:48%;
	}
	ul.skiList li:first-child{
		margin-right:4%;
	}
}

.fuki{
	cursor: pointer;
	background:#fff;
}

.fuki_ttl{
	margin-bottom:5px;
	font-weight:bold;
}



/******************************************************************
page top
******************************************************************/
.button{
  position: fixed;
  right: 0;
  bottom: 0;
  padding: 10px;
  cursor: pointer;
  transition: .3s;
  
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
}

/*このクラスが付与されると表示する*/
.active{
  opacity: 1;
  visibility: visible;
}



/******************************************************************
clear
******************************************************************/
.topMenu,
dl.taisyouList,
#area ul.areaBox,
#footer .footerInner,
ul.skiList{
	display:inline-block;
}

.topMenu:after,
dl.taisyouList:after,
#area ul.areaBox:after,
#footer .footerInner:after,
ul.skiList:after{
	content:".";display: block;
	height: 0;
	visibility:hidden;
	clear: both;
}

* .topMenu,
* dl.taisyouList,
* #area ul.areaBox,
* #footer .footerInner,
* ul.skiList{
	height:1%;
}

/* Hides MacIE5 \*/

.topMenu,
dl.taisyouListj,
#area ul.areaBox,
#footer .footerInner,
ul.skiList{
	display:block;
}

/* Hides MacIE5 */