/*####################################################


全体のレイアウト設定


####################################################*/





/*=============================================

領域分け

=============================================*/

.specialcontents_summer {
	font-size: 160%;
	line-height: 180%;
	text-align: left;
	width: 400px !important;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}

.specialcontents_summer p,
.specialcontents_summer li,
.specialcontents_summer dt,
.specialcontents_summer dd {
	font-size: 100%;
}

.specialcontents_summer img {
	vertical-align: top;
}

.specialcontents_summer .share {
	margin: 0;
	padding: 30px 0 30px 0;
	background-color: #eff2e8;
}

.asobikata {
	margin: 0;
	padding: 30px 0 10px 0;
	text-align: center;
}

.asobikata img {
	width: 80%;
	height: auto;
}



/*=============================================

本体フォーマットの修正

=============================================*/

body { position: fixed; }


/*フッタを消す*/

.l-footer {
	display: none;
}




/*=============================================

共通

=============================================*/



/*------------------------------------------------*/
/*見出し*/

.card_contents h2 {
	margin: 0;
	padding: 5px 0;
	font-weight: bold !important;
	font-size: 120%;
}

.card_contents h3 {
	margin: 0 0 10px 0;
	padding: 5px 10px;
	font-weight: bold !important;
	font-size: 120%;
}

.card_contents h4 {
	margin: 0 0 10px 0;
	padding: 5px 10px;
	font-weight: bold !important;
	font-size: 120%;
}

.card_contents h5 {
	margin: 0 0 10px 0;
	padding: 4px 8px;
	font-weight: bold !important;
	font-size: 100%;
}

h3.sub_title {
	font-size: 160%;
	line-height: 140%;
	text-align: center;
	font-weight: bold;
}

.in { margin-top:2em !important; }

.tx_center {text-align: center;}

.card_contents .small {
	font-size: 80%;
}

.card_contents .small_text {
	font-size: 90%;
}

/*山で遊ぶ　赤色*/
.c01color{ color: #ff0000; }
.c02color{ color: #3b61ca; }
.c02_2color{ color: #5f9900; }
.c03color{ color: #b9121b; }



/*白馬ライオンアドベンチャー*/
.hakuba_color{ color: #af7332; }

/*そのほかの色*/
.color_brown{ color: #a98446; }
.color_blue{ color: #3b61ca; }
.color_maroon{ color: #b9121b; }

/*------------------------------------------------*/
/*ボックス割*/

.flexbox {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

/*子*/
.flexbox .cell {
	position: relative;
	margin: 0 0 20px 0;
	padding: 0;
}

/*2分割*/
.two .cell {
	margin-right: 10px;
	-ms-flex-preferred-size: calc((100% - 10px) / 2);
	flex-basis: calc((100% - 10px) / 2);
}
.two .cell:nth-of-type(2n) {
	margin-right: 0;
}

/*3分割*/
.three .cell {
	margin-right: 10px;
	-ms-flex-preferred-size: calc((100% - 20px) / 3);
	flex-basis: calc((100% - 20px) / 3);
}
.three .cell:nth-of-type(3n) {
	margin-right: 0;
}

/*4分割*/
.four .cell {
	margin-right: 20px;
	-ms-flex-preferred-size: calc((100% - 60px) / 4);
	flex-basis: calc((100% - 60px) / 4);
}
.four .cell:nth-of-type(4n) {
	margin-right: 0;
}


/*------------------------------------------------*/
/*写真枠*/

.card_contents .photo {
	position: relative;
	padding: 4px;
	background-color: #ffffff;
	box-shadow: 0 1px 6px 0 #babbb7;
}

.card_contents .photo.mgn {
	margin-top: 10px;
	margin-bottom: 10px;
}

.circlephoto {
	position: relative;
	padding: 4px;
	background-color: #ffffff;
	border-radius: 50%;
}


/*------------------------------------------------*/
/*マージン*/

.mt5 { margin-top:5px !important; }
.mt10 { margin-top:10px !important; }
.mt15 { margin-top:15px !important; }
.mt20 { margin-top:20px !important; }
.mt25 { margin-top:25px !important; }
.mt30 { margin-top:30px !important; }

.mb5 { margin-bottom:5px !important; }
.mb10 { margin-bottom:10px !important; }
.mb15 { margin-bottom:15px !important; }
.mb20 { margin-bottom:20px !important; }
.mb25 { margin-bottom:25px !important; }
.mb30 { margin-bottom:30px !important; }

.pt5 { padding-top:5px !important; }
.pt10 { padding-top:10px !important; }
.pt15 { padding-top:15px !important; }
.pt20 { padding-top:20px !important; }
.pt25 { padding-top:25px !important; }
.pt30 { padding-top:50px !important; }

/*------------------------------------------------*/
/*角丸*/

.r10 { border-radius: 10px; }
.r20 { border-radius: 20px; }
.r30 { border-radius: 30px; }
.r40 { border-radius: 40px; }
.r50 { border-radius: 50px; }


/*------------------------------------------------*/
/*施設説明枠*/

.info_text_box {
	position: relative;
	margin: -20px 15px 0px;
	padding: 20px;
	border: 1px solid #cbc2a6;
	background-color: #ffffff;
	border-radius: 10px;
	font-size: 90%;
}

.info_text_box h2 {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 10px 0px;
}

h4.sub_title {
	position: relative;
	margin: -20px 15px 0px;
	padding: 10px;
	border: 1px solid #cbc2a6;
	background-color: #ffffff;
	border-radius: 10px;
	font-size: 95%;
	text-align: center;
}


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

/*領域分け*/




/*------------------------------------------------*/
/*色*/

.red {color:#ff3300;}
.card_contents strong { font-weight:800; }


/*------------------------------------------------*/
/*ライオンロゴ*/

.hakuba_lion_rogo{
	background: url(../img/sp/common/Hakuba-Lion2.png) center center no-repeat;
	background-size: 100%;
	border:2px solid #ffffff;
	border-radius: 50%;
	width:70px;
	height:70px;
}

/*おたりロゴ*/

.otari_rogo{
	background: url(../img/sp/common/otari.png) center center no-repeat;
	background-size: 100%;
	background-color: #ffffff;
	border-radius: 50%;
	width:70px;
	height:70px;
}

/**/

.yama_kawa_rogo{
	background: url(../img/sp/common/yama-kawa.png) center center no-repeat;
	background-size: 100%;
	border:2px solid #FFFFFF;
	background-color: #5f9900;
	border-radius: 50%;
	width:70px;
	height:70px;
}

.image_left{
	float: left;
	margin-right: 20px;
}


/*=============================================

背景レイヤー（表紙）

=============================================*/

.bg_photo {
	position: relative;
}

.bg_photo .innerbox {
	position: relative;
	overflow-y: scroll;
	width: 100%;
	height: calc(100% - 170px);
	margin: 0;
	padding: 0 0 50px 0;
}


.bg_photo .innerbox::after {
	content: "";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100px;
	background: url("../img/sp/fv_top_cloud.png") top left -80px no-repeat;
	background-size: 100%;
}

.bg_photo .lead_text {
	position: relative;
	margin: 40px 30px 0 30px;
}

.bg_photo .lead_text i {display: none;}

.bg_photo .logo {
	position: absolute;
	top: 13%;
	left: 0;
	width: 100%;
	height: 30%;
}

.bg_photo .logo i{display: none;}

.bg_photo h1 {
	z-index:1;
	position: absolute;
	top: 10px;
	left: 0;
	display: block;
	overflow: hidden;
	margin: 0;
	padding-top: 35%;
	height: 0 !important;
	line-height: 250%;
	width: 100%;
	background: url(../img/sp/logo.png) center center no-repeat;
	background-size: 60%;
}



/*スタイドショー*/

.top_mainimage_list_image_switch img{
animation: top_mainimage_list_image_switch_anim 1.5s forwards;
}

@keyframes top_mainimage_list_image_switch_anim {
	0% {filter: blur(0px);}
	100% {filter: blur(10px);opacity:0;}
}

.specialcontents_summer .photo_slider {
	position: relative;
	z-index:0;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 500px;
	list-style-type: none;
}

.specialcontents_summer .photo_slider li {
	position: absolute;
	top: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
	text-align: center;
	width: 100%;
	height: 100%;
}

.specialcontents_summer .photo_slider img {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
}


.specialcontents_summer .photo_slider2 img {
	position: absolute;
	left: 50%;
	top:-50px;
	margin: 0 0 0 -1000px;
}


/*ロゴアニメ*/

.fv_fade_anime .logo_ele1{
	-webkit-animation: rv_animname_logo_ele1 0.3s forwards .5s;
	animation: rv_animname_logo_ele1 0.3s forwards .5s;
}

.fv_fade_anime .logo_ele2{
	-webkit-animation: rv_animname_logo_ele2 0.5s forwards 1s;
	animation: rv_animname_logo_ele2 0.5s forwards 1s;
}

.fv_fade_anime .logo_main{
	-webkit-animation: rv_animname_logo 0.5s forwards 1.5s , rv_animname_logo_main 2s linear forwards 2s infinite;
	animation: rv_animname_logo 0.5s forwards 1.5s , rv_animname_logo_main 2s linear forwards 2s infinite;
}

@keyframes rv_animname_logo {
	0% {transform: scale(1.2); opacity: 0; }
	100% {transform: scale(1); opacity: 1; }
}

@keyframes rv_animname_logo_ele1 {
	0% {transform: translate(0px, 40px); opacity: 0; }
	90% {transform: translate(0px, -5px); opacity: 1; }
	100% {transform: translate(0px, 0px); opacity: 1; }
}

@keyframes rv_animname_logo_ele2 {
	0% {transform: translate(0px, 40px) scale(2); opacity: 0; }
	100% {transform: translate(0px, 0px) scale(1); opacity: 1; }
}

@keyframes rv_animname_logo_main {
	0% {transform: translate(0px, 0px); }
	30% {transform: translate(0px, -3px); }
	80% {transform: translate(0px, 3px); }
	100% {transform: translate(0px, 0px); }
}



/*=============================================

メニューエリア

=============================================*/

.navi_menu {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	width: 100%;
	box-shadow: 0 -1px 8px 4px #b2bc99;
}

.navi_menu li {
	margin: 0;
	padding: 0;
	-ms-flex-preferred-size: calc(100% / 3);
	flex-basis: calc(100% / 3);
}

.navi_menu li a {
	display: block;
	overflow: hidden;
	margin: 0;
	padding-top: 60px;
	height: 0 !important;
	line-height: 250%;
	width: 100%;
}

.navi_menu li:nth-child(1) {
	position: absolute;
	top: -80px;
	left: 10px;
	width: 50px;
	height: 50px;
}

.navi_menu li a.card_close {
	padding-top: 43px;
}

.navi_menu li:nth-child(2) a {
	background: url(../img/sp/menu1.svg) center center no-repeat;
	background-size: auto 50px;
	background-color: #ff4d00;
}

.navi_menu li:nth-child(3) a {
	background: url(../img/sp/menu2.svg) center center no-repeat;
	background-size: auto 50px;
	background-color: #3b61ca;
}

.navi_menu li:nth-child(4) a {
	background: url(../img/sp/menu3.svg) center center no-repeat;
	background-size: auto 50px;
	background-color: #b9121b;
}

.navi_menu li:nth-child(5) a {
	background: url(../img/sp/menu4.svg) center center no-repeat;
	background-size: auto 50px;
	background-color: #2ba738;
}

.navi_menu li:nth-child(6) a {
	background: url(../img/sp/menu5.svg) center center no-repeat;
	background-size: auto 50px;
}

.navi_menu li:nth-child(7) a {
	background: url(../img/sp/menu6.svg) center center no-repeat;
	background-size: auto 50px;
	background-color: #2ba738;
}



/*=============================================

アクティブに遊ぶ

=============================================*/

.c01 .inner {
	position: relative;
	padding: 0 0px 30px 0px !important;
}

.c01 .inner_w {
	padding-bottom:100px;
	position: relative;
}

.c01 .inner_w::after {
	z-index: 0;
	content: "";
	display: block;
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 100%;
	height: 120px;
	background: url(../img/c01/bg_pattern.svg) top center repeat-x;
	background-size: auto 100%;
}

.c01 h1 {
	z-index: 1;
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0 auto;
	padding-top: 30%;
	height: 0 !important;
	line-height: 250%;
	width: 100%;
	background: url(../img/sp/c01_contents_title.svg) bottom center no-repeat;
	background-size: auto 85%;
	mix-blend-mode: multiply;
}

.c01 .fv_photo {
	z-index: 0;
	position: relative;
	margin: -30px 0px 0px 0px;
	padding: 0px;
	background-color: #fff2df;
}

.c01 .in_photo {
	position: relative;
	margin: 0px;
	padding: 0px;
	background-color: #fff2df;
}

.c01 .in_box{
	position: relative;
	padding: 20px 20px 30px 20px;
	background-color: #fff2df;
}

/*ライオンアイコン*/

.c01 .hakuba_lion{
	position: relative;
}

.c01 .hakuba_lion::after {
	content: "";
	display: block;
	position: absolute;
	top: -20px;
	right: 5px;
	background: url(../img/sp/common/Hakuba-Lion2.png) center center no-repeat;
	background-size: 100%;
	border:2px solid #ffffff;
	border-radius: 50%;
	width:50px;
	height:50px;
}

.c01 .hakuba_lion2{
	position: relative;
}

.c01 .hakuba_lion2::after {
	content: "";
	display: block;
	position: absolute;
	bottom: -20px;
	right: 5px;
	background: url(../img/sp/common/Hakuba-Lion2.png) center center no-repeat;
	background-size: 100%;
	border:2px solid #ffffff;
	border-radius: 50%;
	width:35px;
	height:35px;
}

.c01 .memo{
	position: relative;
	margin: 0px 0px 0px 0px;
	padding: 20px;
	background: url(../img/sp/course1/note.png) top center repeat-x;
	background-size: 10px;
	background-color: #ffffff;
	font-size: 90%;
	line-height: 170%;
}

.c01 .memo p{
	background: url(../img/sp/common/Hakuba-Lion3.png) top left no-repeat;
	background-size: 70px;
	padding-left: 80px;
}




/*=============================================

自然で遊ぶ

=============================================*/

.c02 .inner {
	position: relative;
	padding: 0 0px 30px 0px !important;
}

.c02 .inner_w {
	padding-bottom:100px;
	position: relative;
}

.c02 .inner_w::after {
	z-index: 0;
	content: "";
	display: block;
	position: absolute;
	bottom: -20px;
	left: 0;
	width: 100%;
	height: 120px;
	background: url(../img/c02/bg_pattern.svg) top center repeat-x;
	background-size: auto 100%;
}

.c02 h1 {
	z-index: 1;
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0 auto;
	padding-top: 30%;
	height: 0 !important;
	line-height: 250%;
	width: 100%;
	background: url(../img/sp/c02_contents_title.svg) bottom center no-repeat;
	background-size: auto 85%;
	mix-blend-mode: multiply;
}

.c02 .fv_photo {
	z-index: 0;
	position: relative;
	margin: -30px 0px 0px 0px;
	padding: 0px;
	background-color: #ecf2ff;
}

.c02 .in_photo {
	position: relative;
	margin: 0px;
	padding: 0px;
	background-color: #ecf2ff;
}

.c02 .in_box{
	position: relative;
	padding: 20px 20px 30px 20px;
	background-color: #ecf2ff;
}

/*オタリアイコン*/

.c02 .otari,.c03 .otari{
	position: relative;
}

.c02 .otari::after,
.c03 .otari::after {
	content: "";
	display: block;
	position: absolute;
	top: -20px;
	right: 5px;
	background: url(../img/sp/common/otari.png) center center no-repeat;
	background-size: 100%;
	border:2px solid #ffffff;
	border-radius: 50%;
	width:50px;
	height:50px;
}

/*ヤマカワ*/

.c02 .yama_kawa{
	position: relative;
}

.c02 .yama_kawa::after {
	content: "";
	display: block;
	position: absolute;
	top: -20px;
	right: 5px;
	background: url(../img/sp/common/yama-kawa.png) center center no-repeat;
	background-size: 100%;
	border:2px solid #ffffff;
	background-color: #5f9900;
	border-radius: 50%;
	width:50px;
	height:50px;
}

.c02 .memo{
	position: relative;
	margin: 0px 0px 0px 0px;
	padding: 20px;
	background: url(../img/sp/course2/note.png) top center repeat-x;
	background-size: 10px;
	background-color: #ffffff;
	font-size: 90%;
	line-height: 170%;
}

.c02 .memo.otari_memo p{
	background: url(../img/sp/common/otari.png) top left no-repeat;
	background-size: 70px;
	padding-left: 80px;
}

.c02 .memo.yama_kawa_memo p{
	background: url(../img/sp/common/yama-kawa2.png) top left no-repeat;
	background-size: 70px;
	padding-left: 80px;
}



/*=============================================

ホテルで遊ぶ

=============================================*/

.c03 .inner {
	position: relative;
	padding: 0 0px 30px 0px !important;
}

.c03 .inner_w {
	padding-bottom:100px;
	position: relative;
}

.c03 .inner_w::after {
	z-index: 0;
	content: "";
	display: block;
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 100%;
	height: 120px;
	background: url(../img/c03/bg_pattern.svg) top center repeat-x;
	background-size: auto 100%;
}

.c03 h1 {
	z-index: 1;
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0 auto;
	padding-top: 30%;
	height: 0 !important;
	line-height: 250%;
	width: 100%;
	background: url(../img/sp/c03_contents_title.svg) center center no-repeat;
	background-size: auto 85%;
	mix-blend-mode: multiply;
}

.c03 .fv_photo {
	z-index: 0;
	position: relative;
	margin: -30px 0px 0px 0px;
	padding: 0px;
	background-color: #ffefff;
}

.c03 .in_photo {
	position: relative;
	margin: 0px;
	padding: 0px;
	background-color: #ffefff;
}

.c03 .in_box{
	position: relative;
	padding: 20px 20px 30px 20px;
	background-color: #ffefff;
}

.c03 .memo{
	position: relative;
	margin: 0px 0px 0px 0px;
	padding: 20px;
	background: url(../img/sp/course3/note.png) top center repeat-x;
	background-size: 10px;
	background-color: #ffffff;
	font-size: 90%;
	line-height: 170%;
}


/*=============================================

コルチナポイントの確認

=============================================*/

.c04 h1 {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 10px -10px;
	padding-top: 35%;
	height: 0 !important;
	line-height: 250%;
	width: calc(100% + 20px);
	background: url(../img/sp/c04_contents_title.png) center center no-repeat;
	background-size: 100%;
}

.c04 .cortina_point {
	margin: 30px 0 20px 0;
	padding: 10px;
	background: url(../img/sp/note.png) top center repeat-x;
	background-size: 13px;
	background-color: #f9f5f6;
	color: #5a3133;
}

.c04 .cortina_point strong {
	display: block;
	margin: 0 0 10px 0;
	padding: 5px 0 5px 0;
	border-bottom: 1px solid #5a3133;
	font-size: 120%;
	text-align: center;
	font-weight: 800;
}

/*セレクト*/

.cp_ipselect {
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	position: relative;
}

.cp_ipselect select {
	-webkit-appearance: none;
	appearance: none;
	width: 100% !important;
	margin: 0 !important;
	padding: 10px 0 10px 10px !important;
	box-sizing: border-box;
	font-size: 1em;
	border-radius: 5px;
	border: 2px solid #9da8b5;
	background: #fff;
	font-size: 16px;
}

.cp_ipselect::after {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	position: absolute;
	right: 15px;
	top: 35%;
	border-bottom: #333 2px solid;
	border-right: #333 2px solid;
	transform: rotate(45deg)translateY(-30%);
}


/*ポイント確認*/


.point_check_data {
	position: relative;
}

.point_check_data dl {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	position: relative;
	margin: 10px 0 20px 0;
	padding: 0;
}

.point_check_data dt,
.point_check_data dd {
	margin: 0;
	padding: 0;
	border-bottom: 1px dotted #858a8e;
}

.point_check_data dt {
	-ms-flex-preferred-size: 30%;
	flex-basis: 32%;
}

.point_check_data dd {
	-ms-flex-preferred-size: 70%;
	flex-basis: 68%;
}

.point_check_data strong {
	font-weight: bold !important;
	font-size: 120%;
	line-height: 200%;
	border-bottom: 1px solid #858a8e;
}

.point_check_data .point_check_data_close {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	overflow: hidden;
	margin: 0 auto;
	padding-top: 30px;
	height: 0 !important;
	line-height: 250%;
	width: 30px;
	background: url(../img/common/point_check_data_close.svg) center center no-repeat;
	background-size: 100%;
}



/*=============================================

宿泊プラン

=============================================*/

.c06 h4 {
	border: 1px solid #00633d;
	border-left: 5px solid #00633d;
	color: #00633d;
}


a.reserve {
	display: block;
	margin: 10px 0 0 0;
	padding: 14px 20px 14px 20px;
	background-color: #2a930e;
	background: linear-gradient(180deg, #2a930e 0%, #196903 100%);
	border: 4px solid #ffffff;
	box-shadow: 0 1px 6px 0 #cdcbcb;
	color: #ffffff;
	font-size: 120%;
	line-height: 150%;
	text-align: center;
	font-weight: bold !important;
	border-radius: 15px;
	transition: all .2s;
}

a.reserve i {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 80%;
	line-height: 200%;
}