@charset "utf-8";

/* -----------------------------------------------------------
共通パーツ
------------------------------------------------------------- */
:root {
	--space-inner: 15px;
	--space-outer: 20px;
	--black: #1C222F;
	--darkblue:#203545;
	--gold:#AB9F5F;
	--goldtxt:#988D52;
	--blue:#3881A4;
	--letter-spacing:0.02em;
}

html{
	scroll-behavior: smooth;
}
body{
	color:#555555;
	font-family: "Zen Old Mincho", serif;
	scroll-behavior: smooth;
	line-height: 1.7;
	letter-spacing: var(--letter-spacing);
}
body.child,body.child p{
	line-height: 1.5;
}
p{
	font-size:14px;
	line-height: 1.7;
	/* text-align: justify; */
	letter-spacing: var(--letter-spacing);
	font-weight: 400;
}
img {
	/* width: 100%; */
  	max-width: 100%;
  	height: auto;
  	vertical-align: bottom;
}
a{
  text-decoration: none;
  transition: 0.3s;
  color:#484340;
}
a:hover{
  opacity: 0.7;
}
/* section{
	padding:80px 0;
	margin:auto;
} */
span{
	font-size:inherit;
}

@media(max-width: 540px){
	.sp_none {
		display: none !important;
	}
}
@media(max-width:960px){
	.mb_none {
		display: none !important;
	}
}
@media(min-width:769px){
	.pc_none {
		display: none !important;
	}
}

.cf:before,
.cf:after {
  content: " ";
  display: table;
}
.cf:after {    clear: both; }
.cf {    *zoom: 1; }

.w20{width:22%}
.w30{width:29%;}
.w40{width:38%;}
.w50{width:47%;}
.w60{width:58%;}
.w70{width:68%;}
.w80{width:76%}
.w90{width:86%}
.w100{width:100%;}
@media(max-width: 540px){
  	/* .w20,.w30,.w40,.w50,
	.w60,.w70,.w80,.sp_w100{
		width:100%;
	} */
	.sp_w50{width:48%;}
}

.relative{
	position: relative;
}
.block{
	display: block;
}

.anchor{
	padding-top: 80px;
    margin-top: -80px; 
}
/*_____テキスト_____*/
.m_center { margin-left: auto; margin-right: auto; }
.txtC { text-align: center; }
.txtR{	text-align: right;}
.txtL{	text-align: left;}
.bold{	font-weight: bold;}
.txt10{ font-size: 10px;}
.txt12{ font-size: 12px;}
.txt14{ font-size: 14px;}
.txt15{ font-size: 15px;}
.txt16{ font-size: 16px;}
.txt17{ font-size: 17px;}
.txt18{ font-size: 18px;}
.txt19{ font-size: 19px;}
.txt20{ font-size: 20px;}
.txt21{ font-size: 21px;}
.txt22{ font-size: 22px;}
.txt24{ font-size: 24px;}
.txt30{ font-size: 30px;}
.txt32{ font-size: 32px;}
.txt36{ font-size: 36px;}
.txt40{ font-size: 40px;}
.txt48{ font-size: 48px;}
@media(max-width: 540px){
	.sp_txtC{
		text-align: center;
	}
	.sp_txtL{
		text-align: left;
	}
	/* .txt14{ font-size: 12px;}
	.txt15{ font-size: 14px;}
	.txt18{ font-size: 16px;}
	.txt20{ font-size: 18px;}
	.txt22{ font-size: 20px;}
	.txt24{ font-size: 22px;}
	.txt30{ font-size: 24px;}
	.txt32{ font-size: 26px;}
	.txt36{ font-size: 28px;}
	.txt40{ font-size: 30px;}
	.txt48{ font-size: 32px;} */
}
.indent{
	padding-left: 1em;
  text-indent: -1em;
}
/*_____フレックス_____*/
.flex{
	display: -ms-flexbox;
	display: flex;
}
.justC{justify-content: center;}
.justB{
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.justA{
	-ms-flex-pack: distribute;
	justify-content: space-around;
}
.justE{
	justify-content: flex-end;
}
.flexW{
	flex-wrap: wrap;
}
.alignS{align-items: start;}
.alignC{align-items: center;}
.alignB{align-items: baseline;}
.alignE{align-items: end;}
@media (max-width: 540px) {
	.sp_flclear{
		display: block;
	}
	.sp_flex{
		display: flex;
	}
	.flexrevrse{
	 flex-direction: column-reverse;
	}
}


/*_____余白_____*/
.m0auto{margin: 0 auto}

.mb0{margin-bottom: 0;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}
.mb30{margin-bottom: 30px;}
.mb40{margin-bottom: 40px;}
.mb50{margin-bottom: 50px;}
.mb60{margin-bottom: 60px;}

.mt0{margin-top: 0;}
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.mt20{margin-top: 20px;}
.mt30{margin-top: 30px;}
.mt40{margin-top: 40px;}
.mt50{margin-top: 50px;}
.mt60{margin-top: 60px;}

.mr0{margin-right: 0;}
.mr10{margin-right: 10px;}
.mr15{margin-right: 15px;}
.mr20{margin-right: 20px;}
.mr30{margin-right: 30px;}

.ml0{margin-left: 0;}
.ml10{margin-left: 10px;}
.ml15{margin-left: 15px;}
.ml20{margin-left: 20px;}
.ml30{margin-left: 30px;}

.mar10{margin:10px;}
.mar15{margin:15px;}
.mar20{margin:20px;}
.mar30{margin:30px;}

.pt10{padding-top:10px;}
.pt20{padding-top:20px;}
.pt30{padding-top:30px;}

.pb10{padding-bottom:10px;}
.pb20{padding-bottom:20px;}
.pb30{padding-bottom:30px;}

.mt4{margin-top:4px;}
.mt6{margin-top:6px;}
.mt18{margin-top:18px;}

@media(max-width: 540px){
  .sp_mb0{margin-bottom: 0;}
  .sp_mb10{margin-bottom: 10px;}
  .sp_mb15{margin-bottom: 15px;}
  .sp_mb20{margin-bottom: 20px;}
  .sp_mb30{margin-bottom: 30px;}
  .sp_mt0{margin-top: 0;}
  .sp_mt10{margin-top: 10px;}
  .sp_mt15{margin-top: 15px;}
  .sp_mt20{margin-top: 20px;}
  .sp_mt30{margin-top: 30px;}
}


/* -----------------------------------------------------------
クリスマス共通
------------------------------------------------------------- */
html,body {
height: 100%;
margin: 0;
}
    #snowCanvas {
      position: fixed;
      inset: 0;               /* top:0; right:0; bottom:0; left:0; と同じ */
      pointer-events: none;   /* canvas上のマウス干渉を無効にする（クリック等を邪魔しない） */
      z-index: 9999;          /* 必要に応じて調整 */
    }



h2{
	line-height: 1.4;
	font-weight: 900;
}
dl{
	font-size:15px;
	color:#000;
	letter-spacing: var(--letter-spacing);
}
.eiji{
	font-family: "Gloock", serif;
	font-weight: 400;
}
.black{color:var(--black)}
.blue{color:var(--blue)}
.goldtxt{color:var(--goldtxt)}

.snowflake {
    position: absolute;
	filter: drop-shadow(0 3px 6px #00000029);
}


.content{
	position: relative;
	z-index: 2;
	width:390px;
	margin:0 auto;
	/* background: url(../imgs/top_bg.png),linear-gradient(#B5B5B5,#E6E6E6,#D2D7D8,#E8E8E8,#DDDDDD); */
	background: url(../imgs/bg.png),linear-gradient(#B5B5B5,#E6E6E6,#D2D7D8,#E8E8E8,#DDDDDD);
	background-size: contain;
	/* transition: 1s ease-out; */
	overflow-x: hidden; /* 雪の結晶を見切れさせるため */
}
@media (max-width: 1000px){
	.content{
		margin:0 auto;
	}
}
@media (max-width: 540px){
	.content{
		width: 100%;
		max-width: none;
	}
}

.gold_frame{
	margin: 0 var(--space-outer);
	padding: 0 var(--space-inner);
	border:3px var(--gold) solid;
	background-color: #EBEBEB;
	position: relative;
}
.gold_frame_deco{
	position: absolute;
}
.child_gold_frame{
	margin-top:50px;
	padding-bottom:40px;
}
.child_topleft{
	top:-28px;
	left:-12px;
}
.child_topright{
	top:-16px;
	right:-12px;
}
.child_bottomleft{
	bottom:-14px;
	left:-12px;
}
.child_bottomright{
	bottom:-14px;
	right:-12px;
}

.day{
	/* letter-spacing: 0; */
	margin-top:5px;
}

.btn{
	display: inline-block;
    padding: 10px 4px 15px;
    text-align: center;
    background: var(--darkblue);
	background-image:url(../imgs/btn_pattern.png) ;
	background-position: 0 42px;
	background-repeat: no-repeat;
	background-size: contain;
    color: #FFF;
	font-size:17px;
	font-weight: 700;
	white-space: nowrap;
	width: 260px;
}
.more_btn {
    border-bottom: 1px solid #B5B5B5;
    padding-right: 10px;
    display: inline-block;
}
.more_btn a {
    color: var(--black);
    letter-spacing: var(--letter-spacing);
    font-size: 14px;
	margin-right:14px;
    position: relative;
}
.more_btn a::before {
	content: "";
    position: absolute;
    display: block;
    top: 35%;
	right: -22px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 13px;
	border-color: transparent transparent transparent var(--gold);
    z-index: 2;
}

.between_mark{
	margin:15px 0;
	width:32px;
}
.divider{
	width:70px;
}

.midashi_l{
	color: var(--goldtxt);
    position: relative;
    font-weight: bold;
    padding-left: 8px;
    margin-bottom: 2px;
}
.midashi_l:before{
	content: "";
    position: absolute;
    left: 0;
    top: 50%;
	transform: translateY(-50%);
    background: var(--goldtxt);
    width: 2px;
    height: 14px;
}
.midashi_s{
	color:#fff;
	background-color: #9B998F;
	padding:2px 5px;
	font-weight: bold;
	text-align: center;
	display: inline-block;
	margin-bottom:4px;
}
.slide_dots {
	margin-bottom: 15px;
	padding-bottom: 0px;
	text-align: center;
	position: initial!important;
}
.slide_dots li{
	display: inline-block;
	margin: 5px;
}
.slide_dots li button {
	width:8px;
	height: 8px;
	background-color: #B5B5B5;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	font-size:0;
}
.slide_dots li.slick-active button {
	background-color: #AA9F5E;
}
/* .slick-dotted.slick-slider{
	margin-bottom:10px;
} */


/*--------------------------------------
  メニュー
---------------------------------------*/
/* PC時 */
.pc_bg_wrap{
	position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
	background-image :url("../imgs/pc_bg.png");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-attachment: fixed;
	background-size: cover;
	/* opacity: 0; */
}
.pc_bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}
.pc_menu{
	position: absolute;
    z-index: 2;
    right: 20%;
    top:50%;
	transform: translateY(-50%);
}
.pc_menu a{
	display: block;
	position: relative;
	color:#fff;
	font-size:16px;
	margin:50px 0;
	letter-spacing: 0.1em;
	line-height: 1.4;
}
.pc_menu a span{
	font-family: "Gloock", serif;
	color:#9E9E9E;
	font-size:19px;
}
@media (max-width: 1400px){
	.pc_menu{
		right:10%;
	}
}
@media (max-width: 1000px){
	.pc_menu{
		display: none;
	}
}


.header {
	width: 100%;
	position: fixed;
	top: -100px;
	left: 0;
	right: 0;
	z-index: 3;
	transition: 0.3s ease-out;
	width:100%;
}
.header.header_on {
	top: 0;
}
.header_contents {
	width: 100%;
	margin: 0 auto;
	padding: 10px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: center;
	-webkit-box-pack: center;
		-ms-flex-pack: center;
			justify-content: center;
	background: rgba(0, 0,0,0.7) ;
}

.h_logo{
	width:132px;
}
@media (max-width: 1000px){
	.header{
		margin:0 auto;
	}
}

@media screen and (max-width: 540px) {
	.header{
		width: 100%;
	}
	.header_contents {
		padding: 6px 18px;
	}
	.header_contents .h_logo {
		width: min(33.846vw, 132px);
	}
}

/* ハンバーガーボタン */
.drawer_nav_wrapper {
	position: absolute;
	top: 10px;
	right: 18px;
}
@media (min-width: 1001px){
	.drawer_nav_wrapper{
		display:none;
	}
}
@media screen and (max-width: 540px) {
	.drawer_nav_wrapper {
	  top: 6px;
	}
}
  .menu_trigger {
	width: 40px;
	height: 40px;
	cursor: pointer;
	z-index: 999;
	position: relative;
  }
  .menu_trigger span {
	display: inline-block;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	position: absolute;
	right: 0px;
	width: 18px;
	height: 2px;
	background: #fff;
  }
  .menu_trigger span:nth-of-type(1) {
	top: 15px;
  }
  .menu_trigger span:nth-of-type(2) {
	width: 14px;
	top: 25px;
  }
  .menu_trigger.active span {
	background: #FCF30B;
  }
  .menu_trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(10px) rotate(-45deg);
			transform: translateY(10px) rotate(-45deg);
	width:24px;
  }
  .menu_trigger.active span:nth-of-type(2) {
	-webkit-transform: translateY(-10px) rotate(45deg);
			transform: translateY(-10px) rotate(45deg);
	top: 35px;
	width:24px;
  }
  
/* メニューの中身 */
.header_nav_contents {
	width: 60%;
	max-width:360px;
	height: 100dvh;
	background-image: url(../imgs/header_bg.png);
	background-size:cover;
	position: absolute;
	top: 0;
	right: -60%;/*widthと同じ数値に*/
	visibility: hidden;
	opacity: 0%;
	transition: 0.5s ease; 
	z-index: 9;
}
.header_nav_contents nav {
	width: 100%;
	text-align: center;
}
.header_nav_contents ul {
	position: relative;
}
.header_nav_contents.open {
	right: 0;
	visibility: visible;/*追加*/
	opacity: 100%;/*追加*/
}
.menu a{
	display: block;
	position: relative;
	color:#FFF500;
	font-size:16px;
	margin:40px 0;
	letter-spacing: 0.1em;
	font-family: "Gloock", serif;
}
.menu_logo{
	width:144px;
	position: absolute;
	bottom:50px;
	left:50%;
	transform: translateX(-50%);
}

@media screen and (max-width: 1000px) {
	.menu a{
		font-weight: 900;
		color:#FFF500;
		font-size:16px;
		line-height: 1.4;
	}
	.menu a span{
		font-weight: 500;
		color:#fff;
		font-size: 14px;
	}
}
@media screen and (max-width: 540px) {
	.header_nav_contents {
		width: 220px;
	}
}

/*--------------------------------------
 footer
---------------------------------------*/
.banner_wrap{
	margin:60px var(--space-outer) 0;
	padding:0 var(--space-inner);
}
footer{
	padding:60px 0 90px;
	position: relative;
	background-image: url(../imgs/footer_bg.png);
	background-position: bottom;
    background-size: contain;
    background-repeat: no-repeat;
}
.footer_link a{
	display: block;
	margin:12px 0;
	font-size:16px;
	color: var(--black);
}
a.footer_mslink{
	font-size:14px;
	margin-top:28px;
	position: relative;
  	display: inline-block;
}
a.footer_mslink:after{
	content: '';
	width: 5px;
	height: 5px;
	border: 0;
	border-top: solid 1px var(--black);
	border-right: solid 1px var(--black);
	transform: rotate(45deg);
	position: absolute;
	top: 2px;
	right: -14px;
	bottom: 0;
	margin: auto;
}


/* -----------------------------------------------------------
トップ
------------------------------------------------------------- */
.top_main_wrap{
	margin:30px var(--space-outer);
}
.top_event_gold_frame{
	margin-top:60px;
	padding-bottom:66px;
}
.top_event_topleft{
	top:-28px;
	left:-12px;
}
.top_event_topright{
	top:-16px;
	right:-12px;
}
.top_event_bottomleft{
	bottom:-14px;
	left:-12px;
}
.top_event_bottomright{
	bottom:-14px;
	right:-12px;
}

.top_event_live_wrap {
	display: flex;
}
.top_event_live_inner > img {
  --img-width: 130px;
  --img-height: 188px;
  float: right;
  width: var(--img-width); 
  height: 100%; 
  margin: 4px 0 0 4px; 
  shape-outside: inset(calc(100% - var(--img-height)) 0 0 0); 
  object-fit: contain;
  object-position: bottom;
}

.top_event_pic{
	box-shadow: 0 2px 3px #0000004D;
}
.top_event_btn{
	position: relative;
}
.top_event_btn:after{
	content: "";
	position: absolute;
    display: inline-block;
    width: 24px;
    height: 53px;
	bottom: -100%;
    right: 18%;
    background-image: url('../imgs/top_event_btn.png');
    background-position: center;
    background-size: contain;
}

.top_camp_gold_frame{
	padding-top:18px;
	padding-bottom:40px;
}
.top_camp_topleft{
	top: -20px;
    left: -12px;
}
.top_camp_topright{
    top: -16px;
    right: -14px;
}
.top_camp_bottomleft{
	bottom:-14px;
	left:-12px;
}

.top_shop_gold_frame{
	padding-top:16px;
	padding-bottom:74px;
}
.top_shop_topleft{
	top: -30px;
    left: -12px;
}
.top_shop_bottomright{
	bottom:-20px;
	right:-18px;
}
.top_shop_btn{
	position: relative;
}
.top_shop_btn:after{
	content: "";
	position: absolute;
    display: inline-block;
    width: 35px;
    height: 50px;
	bottom: -90%;
    left: 10%;
    background-image: url('../imgs/top_shop_btn.png');
    background-position: center;
    background-size: contain;
}

.snowflake_top1{
    width: 150px;
    height: 171px;
    right: -38px;
    top: 26px;
}
.snowflake_top2{
    width: 153px;
    height: 155px;
    right: -65px;
    top: 109px;
}
.snowflake_top3{
    width: 150px;
    height: 125px;
    left: -78px;
    top: -68px;
}
.snowflake_top4{
    width: 146px;
    height: 146px;
    right: -70px;
    top: -14px;
}

.top_ornament1{
	position: absolute;
	top: 0px;
	left:22px;
	width:92px;
	transform-origin: 66px 0;
}
.top_ornament2{
	position: absolute;
	top: 58px;
    left: 70px;
	width:74px;
	transform-origin: 73px 0; 
}

@media (max-width: 540px){
	.top_shop_btn:after{
		left:15%;
	}
}


/* -----------------------------------------------------------
イルミネーション
------------------------------------------------------------- */
.snowflake_illumi1{
	width: 150px;
    height: 171px;
    right: -48px;
    bottom: 450px;
}
.snowflake_illumi2{
    width: 153px;
    height: 155px;
    left: -55px;
    top: -75px;
}
.snowflake_illumi3{
    width: 150px;
    height: 125px;
    right: -114px;
    top: 210px;
}

/* -----------------------------------------------------------
イベント
------------------------------------------------------------- */
.snowflake_event1{
	width: 150px;
    height: 171px;
    right: -48px;
    bottom: 783px;
}
.snowflake_event2{
    width: 153px;
    height: 155px;
	right: -20px;
    bottom: 206px;
}
.snowflake_event3{
    width: 150px;
    height: 125px;
    left: -76px;
    top: 1060px;
}
.snowflake_event4{
    width: 84px;
    height: 96px;
    left: -56px;
    bottom: 330px;
}
.snowflake_event5{
	width: 153px;
    height: 155px;
	right: -65px;
    bottom: 98px;
}
.snowflake_event6{
    width: 150px;
    height: 125px;
    left: -68px;
    top: 130px;
}
.snowflake_event7{
    width: 146px;
    height: 146px;
    right: -68px;
    top: 286px;
}
.snowflake_event8{
    width: 153px;
    height: 155px;
    left: -62px;
    top: -26px;
}
.snowflake_event9{
    width: 150px;
    height: 125px;
    right: -76px;
    top: 26px;
}

.event_kathe_title{
	padding:12px 0;
	background: #fff;
	font-weight: 900;
}
.event_kathe_title:before{
	content: "";
	position: absolute;
    width: 39px;
    height: 36px;
    top: -20px;
    right: -7px;
    background-image: url('../imgs/event_kathe_title_topright.svg');
}
.event_kathe_title:after{
	content: "";
	position: absolute;
    width: 30px;
    height: 25px;
    bottom: 0px;
    left: 0px;
    background-image: url('../imgs/event_kathe_title_bottomleft.svg');
}