@charset "UTF-8";
/* CSS Document */

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}
#christmas2024 img {width:100%;display: block;}
a {text-decoration:none;}
html {width:100%; font-size:62.5%;}
* {box-sizing:border-box;}
body {width:100%;max-width:100%;}

/* backoffice css reset */
#christmas2024 h1,h2,h3,h4,h5,h6{border:none;}
#christmas2024 a:hover {text-decoration:none;}

/*-----------------------------------------------
  basis 
-----------------------------------------------*/
:root {
	--green:  #078F67;
	--red:    #D92723;
	--pink:   #F8D2DC;
	--yellow: #FEE585;
	--white: #ffffff;
	--brown: #42240F;
  --dwblue: #009CDE;
  --light-yellow: #fef5f1;
  --light-green:  #8EC7B4;
  --gray:#707070;
	--lightgray:#999999;
}


#christmas2024 {
    position: relative;
    font-size: 1.2rem;
    color: var(--white);
    line-height: 1.3;
    letter-spacing: 0.1rem;
    font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    font-style: normal;
    font-weight: 100;
    background: var(--green);
    -webkit-text-size-adjust: 100%;
    overflow: hidden;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


a:hover {
	opacity: 0.65;
	transition: opacity 0.5s ease-out;
}

.fadein {
	opacity : 0;
	transform: translateY(0px);
	transition: all 1s;
}




/* text
-----------------------------*/

strong {
    display: contents;
    font-weight: 600;
}
.en {
    font-family: athelas, sans-serif;
}
.notes {
	color: var(--gray);
    text-align: center;
    font-size: 12px;
    margin: 7px 0 0;
}
.small {
    font-size: 70%;
}



/* link
-----------------------------*/
/*f-link*/
.f-link {
    position: relative;
    cursor: pointer;
    transition: all 0.5s ease-out;
}
.f-link:hover {
    opacity: 0.6;
}
.f-link a {
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
}

.no-link {
    pointer-events: none;
}


/*arrow*/
#christmas2024 .arrow-r {
    position: relative;
    display: inline-block;
    padding-right: 12px;
}
#christmas2024 .arrow-r::after {
    content: '';
    width: 6px;
    height: 6px;
    border: 0px;
    border-top: solid 2px var(--gray-dark);
    border-right: solid 2px var(--gray-dark);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -3px;
}

#christmas2024 .arrow-b {
    position: relative;
    display: inline-block;
    padding-right: 12px;
}
#christmas2024 .arrow-b::after {
    content: '';
    width: 6px;
    height: 6px;
    border: 0px;
    border-top: solid 2px var(--gray-dark);
    border-right: solid 2px var(--gray-dark);
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -3px;
}

#christmas2024 .arrow-b-light {
    position: relative;
    display: inline-block;
	font-size: clamp(11px,1vw,13px);
    padding-right: 12px;
}
#christmas2024 .arrow-b-light::after {
    content: '';
    width: 6px;
    height: 6px;
    border: 0px;
    border-top: solid 1px var(--gray);
    border-right: solid 1px var(--gray);
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -5px;
}



/*----------------------------------------------------------------------------------------------
  PC
----------------------------------------------------------------------------------------------*/

#christmas2024 .sp {
	display: none;
}
#christmas2024 .pc {
	display: block;
}


/*btn*/
#christmas2024 .btn {
    display: block;
    color: var(--white);
    font-size: clamp(1.2rem, 0.7vw + 1rem, 1.6rem);
    font-weight: 500;
    letter-spacing: 0rem;
    text-align: center;
    background: var(--red);
    padding: 2%;
    margin: 2% auto 0;
    width: 60%;
    max-width: 400px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius: 100px;
}
#christmas2024 .btn._red {
    background: var(--red)!important;
	color: var(--white)!important;
}
#christmas2024 .btn._pink {
    background: var(--pink)!important;
	color: var(--red)!important;
}
#christmas2024 ._yellow .btn {
    background: var(--yellow);
	color: var(--brown);
}
#christmas2024 .btn._gray {
    background: var(--lightgray)!important;
	color: var(--white)!important;
}
#christmas2024 ._blue .btn {
    background: var(--blue);
}
#christmas2024 ._pink .btn {
    background: var(--pink);
	color: var(--brown);
}


#christmas2024 .btn:hover {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	transition: all 0.5s ease;
	opacity: 0.7;
}



/* teaser
----------------------------------------------------------*/
.teaser {
    position: relative;
    width: 100%;
    height: 100vh;
    background-position: center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}
.teaser-box {
    width: 70vh;
    margin-left: -1%;
    margin-right: -1%;
    font-size: clamp(3.2rem, 3vw + 1rem, 8.0rem);
    text-align: center;
}




/* layout
----------------------------------------------------------*/
._inside {
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
}

._list {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}
.col-4 li {
    width: 23%;
    margin: 0 0 7%;
}
._col-5::after{
	content:"";
	display: block;
	width: 18%;
	height: 0;
	order: 1;
}
.img-box {
    position: relative;
}
.txt-box {
    position: relative;
}


/* article
----------------------------------------------------------*/
.article-inner {
    /* max-width: 1200px; */
    margin: 0 auto;
    padding: 0 0 7vh;
}



/* header
---------------------------------------------------------*/

/*mv*/
.main-img {
    position: relative;
    z-index: 100;
}
#christmas2024 .main-title {
    position: absolute;
    width: 60%;
    min-width: 280px;
    max-width: 900px;
    top: 32%;
    left: 50%;
    -ms-transform: translate(-50%);
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    margin: 0;
    padding: 0;
}

.scroll-img {
    width: 100%;
    height: 23vh;
    position: relative;
    background: url(../img/christmas2022_scroll-item.jpg) repeat-x 0 0;
    background-size: auto 90%;
    animation: bg-slider 80s linear infinite;
    margin: 0;
    padding: 0;
}
@keyframes bg-slider {
	from { background-position: 0 0; }
    to { background-position: -4795px 0; } /* 1518pxとは使用した背景画像の長さ */
}

/*intro*/
.intro {
    text-align: center;
    margin: 4vh auto;
}
.main-txt {
    font-size: clamp(1.2rem, 0.8vw + 1rem, 1.8rem);
    font-weight: 700;
    line-height: 1.5;
	color: var(--white);
}

/*anchor-nav*/
.anchor-nav {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    margin: 4% 6%;
    font-size: clamp(1.2rem, 0.8vw + 1rem, 1.6rem);
    font-weight: 700;
    text-align: center;
    color: var(--brown);
}
.anchor-nav li {
    width: 23%;
    padding: 1.5% 1%;
    background: var(--white);
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
	box-shadow: 6px 6px var(--pink);
}

/*bnr*/
.bnr {
    justify-content: center;
}
.bnr li {
    width: 70%;
}
.bnr li img {
    border-radius: 5px;
}



/* container
---------------------------------------------------------*/
#christmas2024 .container {
    width: 100%;
    background: var(--green);
    padding: 0 0 7vh;
}


/* contents
---------------------------------------------------------*/

._yellow { color: var(--yellow);}
._green { color: var(--green);}
._pink { color: var(--pink);}

/*twinkle*/
.twinkle-L {
    width: 100%;
    height: 25vh;
    position: relative;
    background: url(../img/twinkle-L.png) no-repeat 0 0;
    background-size: auto 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 5vh;
    left: 15%;
}
.twinkle-R {
    width: 100%;
    height: 25vh;
    position: relative;
    background: url(../img/twinkle-R.png) no-repeat 0 0;
    background-size: auto 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 5vh;
    left: 78%;
}


#christmas2024 .contents {
    position: relative;
    padding: 7vh 0 0;
}

.c-title-catch {
    margin: 0 auto;
}
.c-title-catch {
    width: calc(20%);
    padding: 0 0 0.5%;
}
._pickup .c-title-catch {
    width: calc(15% * 1.4);
    min-width: 180px;
    padding: 0 0 1vh;
}
._category .c-title-catch {
    width: calc(15% * 1.1);
    min-width: 145px;
    padding: 0 0 0.5%;
}
._present .c-title-catch {
    width: calc(15% * 0.9);
    min-width: 120px;
    padding: 0 0 0.5%;
}
._wrapping .c-title-catch {
    width: calc(15% * 1.1);
    min-width: 150px;
    padding: 0 0 0.5%;
}
.c-title {
    font-size: clamp(1.8rem, 0.8vw + 1rem, 2.8rem);
    font-weight: 700;
    text-align: center;
	color: var(--white);
    /* margin: 0 0 3%; */
}
.c-title-sub {
    font-size: clamp(1.6rem, 0.8vw + 1rem, 2.2rem);
    font-weight: 700;
    text-align: center;
    margin: 0 0 2vh;
}
.c-title-lead {
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    margin: 1% 0 0;
	color: var(--red);
}
.c-txt{
	font-size: 16px;
    font-weight: 500;
    text-align: center;
    margin: 1% 0 0;
	color: var(--brown);
}
.c-box-wrapper{
	display: flex;
	justify-content: center;
	align-items: stretch;
}
.c-box {
    background: var(--white);
    border-radius: 10px;
    /* padding: 3.5vh 0; */
    margin-top: 3vh;
}
._info .c-box .c-title,
._wrapping .c-box .c-title {color: var(--red);}
._pickup .c-box {
    padding: 3.5vh 0;
}
._category .c-box {
    padding: 3.5vh 0;
}
.c-box-title {
    font-size: clamp(1.8rem, 1vw + 1rem, 2.4rem);
    text-align: center;
    font-weight: 700;
	color: var(--brown);
}
.c-box-title._red{color: var(--red);}
.c-box-title-lead {
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    margin: 1vh 0 3vh;
	color: var(--brown);
}
.c-box-txt {font-size: 14px;}

/*main-item*/
._pink .main-item._list {
    align-items: center;
    background: var(--light-yellow);
    padding: 0 5%;
    margin: 3% 0;
}
._blue .main-item._list {
    align-items: center;
    background: var(--light-blue);
    padding: 0 5%;
    margin: 3% 0;
}
.main-item .img-box {
    width: 50%;
    padding: 2%;
}
.main-item .txt-box {
    width: 50%;
    padding: 0 3%;
	text-align: center;
}
.main-item .comment {
    margin: 5% 0 0;
}
.main-item .title {
    font-weight: 600;
    text-align: center;
	display: flex;
    align-items: center;
}

.main-item .title:before {
	margin-right: 1rem;
}
.main-item .title:after {
	margin-left: 1rem;
}
.main-item .txt {
    color: var(--gray);
    font-size: clamp(1.2rem, 0.8vw + 1rem, 1.5rem);
    line-height: 1.5;
    padding: 3% 0 6%;
}
.main-item .brand {
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    margin: 1% 0;
	color: var(--brown);
}
.main-item .name {
    color: var(--red);
    font-size: clamp(1.6rem, 1vw + 1rem, 2.0rem);
    font-weight: 700;
    text-align: center;
}


#christmas2024 .arrow{
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: var(--white);
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
}
#christmas2024 .arrow::before,
#christmas2024 .arrow::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
#christmas2024 .arrow::before {
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border: 1px solid var(--white);
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
#christmas2024 .arrow::after {
    top: -2px;
    left: 6.5px;
    width: 6px;
    height: 6px;
    border-top: 1px solid var(--white);
    border-right: 1px solid var(--white);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}


/*tabs*/
.tabs-tab-list,
.tabs-tab-list2{
    text-align: center;
    font-size: clamp(1.0rem, 0.3vw + 1rem, 1.5rem);
    font-weight: 500;
    padding: 0 3%;
    margin: 3vh 0;
}
.tabs-tab-list li,
.tabs-tab-list2 li{
    width: 10%;
	margin-left: 1%; margin-right:1%;
}
.tabs-tab-list li p,
.tabs-tab-list2 li p{color: var(--white);}
.tabs-tab {
    cursor: pointer;
}
.tabs-tab .img {
    margin: 0 0 6%;
}

/*tabs add*/
.tab-btn,
.tab2-btn{
display:none; /*タブの切り替えを制御するラジオボタンを非表示に*/
}

#tab-btn1:checked ~ .tabs-tab-list #tabs-tab1 .arrow::before,
#tab-btn2:checked ~ .tabs-tab-list #tabs-tab2 .arrow::before,
#tab-btn3:checked ~ .tabs-tab-list #tabs-tab3 .arrow::before,
#tab-btn4:checked ~ .tabs-tab-list #tabs-tab4 .arrow::before,
#tab-btn5:checked ~ .tabs-tab-list #tabs-tab5 .arrow::before,
#tab-btn6:checked ~ .tabs-tab-list #tabs-tab6 .arrow::before,
#tab-btn7:checked ~ .tabs-tab-list #tabs-tab7 .arrow::before,
#tab2-btn8:checked ~ .tabs-tab-list2 #tabs-tab8 .arrow::before,
#tab2-btn9:checked ~ .tabs-tab-list2 #tabs-tab9 .arrow::before,
#tab2-btn10:checked ~ .tabs-tab-list2 #tabs-tab10 .arrow::before,
#tab2-btn11:checked ~ .tabs-tab-list2 #tabs-tab11 .arrow::before,
#tab2-btn12:checked ~ .tabs-tab-list2 #tabs-tab12 .arrow::before,
#tab2-btn13:checked ~ .tabs-tab-list2 #tabs-tab13 .arrow::before,
#tab2-btn14:checked ~ .tabs-tab-list2 #tabs-tab14 .arrow::before,
#tab2-btn15:checked ~ .tabs-tab-list2 #tabs-tab15 .arrow::before{
	background: var(--red); border-color: var(--red);
}

#tab-btn1:checked ~ .tabs-tab-list #tabs-tab1 .arrow::after,
#tab-btn2:checked ~ .tabs-tab-list #tabs-tab2 .arrow::after,
#tab-btn3:checked ~ .tabs-tab-list #tabs-tab3 .arrow::after,
#tab-btn4:checked ~ .tabs-tab-list #tabs-tab4 .arrow::after,
#tab-btn5:checked ~ .tabs-tab-list #tabs-tab5 .arrow::after,
#tab-btn6:checked ~ .tabs-tab-list #tabs-tab6 .arrow::after,
#tab-btn7:checked ~ .tabs-tab-list #tabs-tab7 .arrow::after,
#tab2-btn8:checked ~ .tabs-tab-list2 #tabs-tab8 .arrow::after,
#tab2-btn9:checked ~ .tabs-tab-list2 #tabs-tab9 .arrow::after,
#tab2-btn10:checked ~ .tabs-tab-list2 #tabs-tab10 .arrow::after,
#tab2-btn11:checked ~ .tabs-tab-list2 #tabs-tab11 .arrow::after,
#tab2-btn12:checked ~ .tabs-tab-list2 #tabs-tab12 .arrow::after,
#tab2-btn13:checked ~ .tabs-tab-list2 #tabs-tab13 .arrow::after,
#tab2-btn14:checked ~ .tabs-tab-list2 #tabs-tab14 .arrow::after,
#tab2-btn15:checked ~ .tabs-tab-list2 #tabs-tab15 .arrow::after{
    border-top: 1px solid var(--white);
    border-right: 1px solid var(--white);
}
.tab-content,
.tab2-content{
    display: none;
}
#tab-btn1:checked ~ .tab-content-wrap #tab-content1,
#tab-btn2:checked ~ .tab-content-wrap #tab-content2,
#tab-btn3:checked ~ .tab-content-wrap #tab-content3,
#tab-btn4:checked ~ .tab-content-wrap #tab-content4,
#tab-btn5:checked ~ .tab-content-wrap #tab-content5,
#tab-btn6:checked ~ .tab-content-wrap #tab-content6,
#tab-btn7:checked ~ .tab-content-wrap #tab-content7,
#tab2-btn8:checked ~ .tab2-content-wrap #tab2-content8,
#tab2-btn9:checked ~ .tab2-content-wrap #tab2-content9,
#tab2-btn10:checked ~ .tab2-content-wrap #tab2-content10,
#tab2-btn11:checked ~ .tab2-content-wrap #tab2-content11,
#tab2-btn12:checked ~ .tab2-content-wrap #tab2-content12,
#tab2-btn13:checked ~ .tab2-content-wrap #tab2-content13,
#tab2-btn14:checked ~ .tab2-content-wrap #tab2-content14,
#tab2-btn15:checked ~ .tab2-content-wrap #tab2-content15{
display: block;/*対応するボタンにチェックが入ったときに表示*/
}


/* category
----------------------------------------------------------*/
.category-list {
    color: var(--brown);
    font-size: 14px;
    font-weight: 500;
    padding: 0 5%;
    justify-content: center;
}
.category-list._yellow li {
    width: calc(82% / 4);
    padding: 1.5% 2%;
    background: var(--yellow);
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 2% 2%;
}
.category-list._pink li {
    width: 28%;
    padding: 1.5% 2%;
    background: var(--pink);
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 2% 2%;
}



/* present
----------------------------------------------------------*/
._present .c-box {
    width: 48%;
    /* padding: 0 0 4%; */
    margin: 5vh 1% 4%;
}
._present .c-box .detail {
    position: relative;
    padding: 0 0 3.5vh;
}
.c-box .detail .close {
    color: var(--white);
    font-size: 3rem;
    font-weight: 600;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    z-index: 50;
}
._present .c-box .detail.closeover:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    z-index: 10;
}
._present .c-box-title-lead {
    font-size: clamp(1.4rem, 0.8vw + 1rem, 1.8rem);
    margin: 0 0 1%;
}
._present .date {
    width: 120px;
    position: absolute;
    margin: -20px 0 0 -10px;
}
._present .date-inner {
    width: 100%;
	padding-top: 100%;
    border-radius: 50%;
    background: var(--yellow);
}
._present .date p {
    position: absolute; line-height: 1.2;
	font-size: 15px;
    /*font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);*/
    font-weight: 700;
    text-align: center;
    color: var(--green);
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
}
._present .date span {font-size: 60%;}
._present .c-box-wrapper.polarB {display: flex;}
._present .c-box-wrapper.polarB .c-box{width: 50%;}

/* wrapping
----------------------------------------------------------*/
._wrapping .main-item {
    align-items: center;
    padding: 0;
    margin: 3vh 3%;
}
._wrapping .img-box {
    width: 40%;
    padding: 0;
}
._wrapping .txt-box {
    width: 60%;
    padding: 3vh 3%;
	border-radius: 10px;
    background: var(--white);
}
._wrapping .notes{text-align: left !important; padding: 0 4% 6%;}
._wrapping .c-title-lead {padding: 6% 4%;}
._wrapping .c-box._lightgreen{background-color: var(--light-green);}
._wrapping .c-box .detail {
    position: relative;
    padding: 3.5vh 0;
	
}
._wrapping .c-box .detail.closeover:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    z-index: 10;
}
/* info
----------------------------------------------------------*/
._info .c-box{
	border: 6px solid var(--white);
}
._info .img-box {
    width: 40%;
    padding: 0;
	
}
._info .img-box img {border-radius: 10px;}
._info .txt-box {
    width: 60%;
    padding: 3vh 3%;
}
/* outro
----------------------------------------------------------*/
.outro {
    margin: 5vh 0 0;
}




@media screen and (max-width: 1320px) {
/*----------------------------------------------------------------------------------------------
  PC small (1200px + 5%)
----------------------------------------------------------------------------------------------*/

._inside {
    margin-right: 5%;
    margin-left: 5%;
}


}/* Media queries (1320px) - END -*/

@media screen and (max-width: 768px) {
/*----------------------------------------------------------------------------------------------
  TB
----------------------------------------------------------------------------------------------*/

#christmas2024 .sp {
	display: none;
}
#christmas2024 .tb {
	display: block;
}
#christmas2024 .pc {
	display: block;
}


#christmas2024 .main-title {
    bottom: -10.5vh;
}

#christmas2024 .contents {
    padding: 2vh 0 0;
}
/*twinkle*/
.twinkle_odd-L {
    width: 100%;
    height: 9vh;
    position: relative;
    background: url(../img/twinkle_odd-L.png) no-repeat 0 0;
    background-size: auto 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 5vh;
    left: 8%;
}
.twinkle_odd-R {
    width: 100%;
    height: 7vh;
    position: relative;
    background: url(../img/twinkle_odd-R.png) no-repeat 0 0;
    background-size: auto 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 5vh;
    left: 80%;
}
.twinkle_even-L {
    width: 100%;
    height: 7vh;
    position: relative;
    background: url(../img/twinkle_even-L.png) no-repeat 0 0;
    background-size: auto 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 3vh;
    left: 10%;
}
.twinkle_even-R {
    width: 100%;
    height: 12vh;
    position: relative;
    background: url(../img/twinkle_even-R.png) no-repeat 0 0;
    background-size: auto 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 5vh;
    left: 80%;
}


}/* Media queries (768px) - END -*/

@media screen and (max-width: 559px) {
/*----------------------------------------------------------------------------------------------
  SP
----------------------------------------------------------------------------------------------*/

#christmas2024 {
	line-height:1.3;
    letter-spacing: 0.05rem;
}

#christmas2024 .sp {
	display: block;
}
#christmas2024 .pc {
	display: none;
}

#christmas2024 .btn {
    padding: 3.5%;
    width: 80%;
}

/*twinkle*/
.twinkle-L {
    height: 14vh;
    background-size: auto 100%;
    top: 3vh;
    left: -2%;
}
.twinkle-R {
    height: 14vh;
    background-size: auto 100%;
    top: 5vh;
    left: 86%;
}

/* 
-----------------------------*/
#christmas2024 .main-title {
	top: 41%;

}
.scroll-img {
    height: 120px;
}

.anchor-nav {
    margin: 4% 0;
}
.anchor-nav li {
    width: 48%;
    padding: 3% 1%;
    margin: 0 0 3%;
}

.bnr li {
    width: 100%;
}

.tabs-tab-list {
    padding: 0;
}
.tabs-tab-list li{
    width: 23%;
    margin: 0 1% 4%;
}
.tabs-tab-list2 li{
    width: 21%;
    margin: 0 2% 4%;
}
#christmas2024 .arrow::before {
    width: 16px;
    height: 16px;
}
#christmas2024 .arrow::after {
    left: 5.5px;
    width: 5px;
    height: 5px;
}


._yellow .main-item._list {
    flex-direction: column;
	background: none;
	padding: 0;
}
._blue .main-item._list {
    flex-direction: column;
	background: none;
	padding: 0;
}
.main-item .img-box {
    width: 100%;
    padding: 2%;
}
.main-item .txt-box {
    width: 100%;
    padding: 0 7% 3%;
}
.main-item .txt{
		padding-bottom: 3%;
}


.category-list {
    font-size: clamp(1.2rem, 0.8vw + 1rem, 1.4rem);
    padding: 1.5vh 5% 0;
}
.category-list._yellow li {
    width: 45%;
    padding: 3.5% 0;
    margin: 0 2% 5%;
}
.category-list._pink li {
    width: 45%;
    padding: 3.5% 0;
    margin: 0 2% 5%;
}
._present .date {
    width: 100px;
	margin: -30px 0 0 -5px;
	}
._present .c-box-wrapper.polarB .date {
	width: 80px;
}
._present .date p {
	font-size: 13px;
	}
._present .c-box-wrapper {display: block;}
._present .c-box {
    width: 100%;
}


._wrapping .main-item {
    margin: 0;
}
._wrapping .img-box {
    padding: 0;
}
._wrapping .txt-box {
    padding: 3vh 0;
	width: 90%;
}
.charm-point li {
    width: 100%;
    flex-direction: row-reverse;
    align-items: center;
}
.charm-point li:nth-child(odd) {
    background: var(--light-yellow);
    flex-direction: row;
}
#christmas2024 .charm-point .img {
    width: 45%;
}
.charm-point .txt {
    width: 55%;
    padding: 0;
}




}/* Media queries (559px) - END -*/