@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');

#container,
#page-event {
}


.f_Abril{
font-family: 'Abril Fatface', cursive;
}
.c_gold span{
  display: inline;
  background: repeating-linear-gradient(0deg, #B67B03 0.1em, #DAAF08 0.2em, #FEE9A0 0.3em, #DAAF08 0.4em, #B67B03 0.5em); 
  -webkit-background-clip: text;
  color: transparent;
}

#page-event .page-header {
  display: none;
}
#page-event .page-header.fixed {
  display: block;
}

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

.txt-place.btn.btn_round {
  padding: 0.2rem 10px;
}

.line {
    height: 6px;
	background-size: auto auto;
	background-color: rgba(255, 255, 255, 0);
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(191, 140, 13, 1) 6px, rgba(191, 140, 13, 1) 16px );
}

.line-box{
    padding-top: 40px;
    position: relative;
}
.line-box:before{
    content: "";
    background-image: url(../images/icon/line01.svg);
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    width: 100%;
    background-size: cover;
}

.line-box.line-tree{
    padding-top: 55px;
    position: relative;
}
.line-box.line-tree:before{
	content: "";
    background-image: url(../images/icon/tree01.svg);
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.txt-box{
    position: relative;
    border-left: 2px #dcdddd solid;
    padding: 15px;
    margin: 10px 5px;
}
.txt-box:before,.txt-box:after{
	content: "";
    position: absolute;
    top: 0;
    left: -6px;
    height: 2px;
    width: 10px;
    background-color: #ddd;
}
.txt-box:after{
    top: auto;
    bottom: 0;
}

.line02{
	display:inline-block;
}
.line02:after{
	content: "";
    background-image: url(../images/icon/line02.svg);
    height: 15px;
    width: 100%;
    background-size: cover;
    background-position: center center;
    position: relative;
    display: block;
    margin: 0 auto;;
}

.new-icon:before{
	content: "";
    background-image: url(../images/icon/new.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 40px;
    height: 40px;
    display: block;
    margin: 0;
    position: absolute;
    left: -5px;
    top: -30px;
}


.cat-eng {
    color: #e91e63;
    position: absolute;
    z-index: 3;
    display: table;
    left: 2%;
	top: -6vw;
}
.cat-eng p {
	position: relative;
    z-index: 1;
    letter-spacing: 2px!important;
    font-style: italic;
    font-size: 8vw;
    transform: rotate(-5deg);
}

.cat-eng p:before {
    content: attr(data-label);
    font-size: 8vw;
    position: absolute;
    width: 100%;
    display: block;
    color: rgba(255,235,59,0.8);
    z-index: -1;
    left: 3px;
    top: 3px;
}

.catchphrase {
    font-size:2.1vw;
    line-height: 1.4;
    letter-spacing: 5px!important;
    text-align: left;
    margin: 0 auto;
    display: block;
    z-index: 2;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    -o-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
	padding: 10px;
	white-space: nowrap;
    text-shadow: 2px 2px 5px #000, -1px -1px 5px #000, 0px 1px 5px #000, 0px -1px 5px #000;
    right: 10%;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}




.img-wide:before {
    content: "";
    width: 100%;
    background: #fff;
	height: 70px;
    display: block;
    position: absolute;
	top: -1px;
    left: 0;
	clip-path: polygon(51% 100%, 0 0, 100% 0);
}


.cat-catch {
    color: #ffffff;
    position: absolute;
    z-index: 0;
    display: table;
    bottom: 0%;
    right: 8%;
}


.img-clip{
	position: relative;
}
.img-clip:before,.img-clip:after{
	content: "";
    background-image: url(../images/icon/line01.svg);
    position: absolute;
	top: 8px;
    left: 0;
    height: 5px;
    width: 35%;
    background-size: contain;
    background-repeat: repeat-x;
    background-position: center;
    display: block;
}
.img-clip:after{
	top: auto;
    left: auto;
	bottom: 8px;
    right: 0;
}
.clip {
	position: relative;
    display: block;
    background: #999;
    -webkit-clip-path: polygon(0 7%,34% 7%,38% 0,100% 0,100% 93%,66% 93%,62% 100%,0 100%);
    clip-path: polygon(0 7%,34% 7%,38% 0,100% 0,100% 93%,66% 93%,62% 100%,0 100%);
}

.img-line{
	position: relative;
}
.img-line:before {
    content: "";
    border: 1px #ddd8d1 solid;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 5px;
    left: 5px;
}


.txt-round {
	border-radius: 5px;
    display: inline-block;
    margin: 0 auto;
    position: relative;
    padding: 5px;
}



.round-event{
    width: 250px;
    height: 250px;
    background: #000;
    border-radius: 9999px;
    position: relative;
}
.round-event .round-inner{
    font-size: 1.2rem;
    color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
    width: 85%;
    margin: 0 auto;
}
.round-event .round-inner .large{
	font-size:180%;
}
.round-event .round-inner .small{
	font-size:55%;
}

.round-spot{
    width: 150px;
    height: 150px;
    background: #000;
    border-radius: 9999px;
    position: relative;
	margin: 0 auto;
}
.round-spot .round-inner{
    font-size: 1rem;
    color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
    width: 85%;
    margin: 0 auto;
    line-height: 1!important;
}
.round-spot .round-inner .large{
	font-size:250%;
	margin-top: -10px;
    line-height: 1!important;
}
.round-spot .round-inner .small{
	font-size:90%;
}


.scroll-img {
    position: relative;
    padding-top:50%;
}

.scroll-img .fade-slider{
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
	opacity: 0;
}
.section .catchphrase{
	opacity: 0;
}
.section.show .scroll-img .fade-slider,
.section.show .catchphrase{
	opacity: 1;
}
.section.show .scroll-img .fade-slider{
background-color: #fff;
}

.scroll-img:before{
	content:"";
	padding-top:50%;
    background-size: cover;
    background-repeat: no-repeat;
	background-position: center bottom;
	width: 100%;
    display: none;
    position: none;
    top: 0;
    z-index: 0;
}
.scroll-img .mv-img{
height: 100vh;
}

@media screen and (max-width: 736px) {
	.cat-catch {
	    right: auto;
	    left: 5%;
	    bottom: 65%;
	}
	.catchphrase {
		font-size: 2.5vh;
	    padding: 0px 0px 10px;
	    top: auto;
	        right: 0%;
	    -webkit-transform: none;
	    transform: none;
	    writing-mode: rl;
	}
	.catchphrase-sp {
		font-size: 2vh;
	    -ms-writing-mode: tb-rl;
	    -webkit-writing-mode: vertical-rl;
	    -o-writing-mode: vertical-rl;
	    writing-mode: vertical-rl;
	}
	.cat-eng {
	    font-size:6vh;
	}
	.img-wide:before {
	    height: 30px;
	}
	.cat-eng p,
	.cat-eng p:before {
	    font-size: 7vh;
	}
	.scroll-img .mv-img {
	  padding-top: 110%;
	  height: auto;
	}


}

.slick-dots {
    position: absolute;
    bottom: -20px;
    right: 170px;
	right: 0;
    left: 0;
    width: auto;
}
.slick-dots li {
    list-style: none;
    display: inline-block;
    margin: 0 2px;
}
.slick-dots li button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    text-indent: -9999px;
    width: 12px;
    height: 12px;
    border-radius: 100px;
    cursor: pointer;
    background: #ddd;
}
.slick-dots li.slick-active button {
    background: #999;
}


.slick-arrow {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: absolute;
  border: none;
  padding: 0;
  display: block;
  width: 32px;
  height: 32px;
  z-index: 100;
  cursor: pointer;
  outline: none;
	background: #fff;
    border: 1px #999 solid;
  border-radius: 50%;
	bottom: -40px;
	top: auto;
	-webkit-transition: background 300ms;
	transition: background 300ms;
}

.slick-prev:before,
.slick-next:before{
	display:none;
}

.slick-arrow:hover {
	background: #999;
}
.slick-arrow.slick-next {
    right: 40px;
    
  }
.slick-arrow.slick-prev {
	right: 80px;
	left: auto
}
.slick-arrow.slick-prev::after {
  right: 7px;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}

.slick-arrow::after {
  border: solid #999;
  border-width: 0 2px 2px 0;
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  position: absolute;
  right: 11px;
  top: calc(50% - 4px);
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.slick-arrow:hover::after {
  border-color:#fff;
}


@media screen and (max-width: 767px) {
	.slick-arrow.slick-next {
		right: 10px!important;
	}
	.slick-arrow.slick-prev {
		right: 50px!important;
	}
	.slick-arrow {
	}
	.slick-dots {
	    right: 28%!important;
	    right: 0%!important;
	}

	.scroll-img {
	    padding-top: initial;
	}
	.scroll-img .fade-slider {
	    position: relative;
	}

}

/*****************************************
common
*****************************************/

.txt-border-under{
	border-bottom:2px #000 solid;
}

.triangle {
  width: 100%;
  height: 100px;
  clip-path: polygon(0 0, 100% 100%, 100% 0);
}

.rectangle-img{
  padding-top: 140%;
}


@media screen and (max-width: 767px) {
}


/*****************************************
#kv
*****************************************/
#kv{
}
#kv:after{
	content: "";
}
#kv .logo-img{
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 0;
  left: 2%;
  z-index: 999;
  width: 35%;
  display: block;
}


@media screen and (max-width: 736px) {
	#kv .logo-img{
		width: 100%;
		left: 0;
		right: 0;
		margin: -20% auto 0;
		position: relative;
		padding-top: 55%;
	}
}
}


/*****************************************
#tagline
*****************************************/
#tagline{
}
#tagline:after{
}



#tagline::after {
  content: "";
}

#tagline .ttl{
	display: inline-block;
    position: relative;
}
#tagline .ttl{
	font-size: 2vw;
}
#tagline .ttl p span{
	    font-size: 70%;
}

#tagline .ttl:before{
    content: "Happy Xmas";
    font-family: 'Caveat', cursive;
    color: #c9bc9c;
    width: 100%;
    text-align: left;
    position: absolute;
    top: -60px;
    left: -30px;
    transform: rotate(-8deg);
    font-size: 2rem;
    display:none;
}
#tagline .ttl:after{
    content: "";
}



@media screen and (max-width: 736px) {
	#tagline .ttl {
	    display: block;
	    position: relative;
	}
	#tagline .ttl {
	 font-size: 2.4vh;
}
}

@media screen and (max-width: 767px) {
	.txt-large {
	    font-size: 1.35rem!important;
	}
	.data-label:before{
	      font-size: 3rem;
	}
	.data-label:before{
	      font-size: 3rem;
	}
	.main-img {
	    width: calc(120vw - 20%);
	}
	.main-img-l {
	    width: calc(120vw + 20%);
	    margin: 0 0 0 calc(-120vw + 80%);
	}
	.main-img-l-sp-clear {
	    width: calc(120vw - 20%);
	   margin:  auto;
	}
	.main-img-clear {
	    width: auto!important;
	    margin: auto!important;
	}
	.sub-img:before {
		  width: 40%;
		  padding-top: 40%;
	}
	.mv {
	    padding: 0rem 0 1.5rem;
	}
}