/* reset */
html, body, div, span, p, a, img, ul, li, section {
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	margin: 0;
	padding: 0;
	margin-top: 0;
}
ul {
	list-style: none;
}
/* .row {
	margin-right: 0 !important;
	margin-left: 0 !important;
}
.container, .col-sm-1, .col-sm-10, .col-sm-12, .col-sm-2, .col-sm-8 {
	padding-right: 0 !important;
	padding-left: 0 !important;
} */
.container {
	width: 100% !important;
}
a {
	outline: none;
	color: #000;
	text-decoration: none;
}
a:link {
	color: #333;
}
a:hover {
	text-decoration: none;
}

/* global */
section {
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
.ff {
	font-family: 'Cochin', "GFS Didot", Arial, sans-serif;
}
.fs {
	font-family: 'Times New Roman', 'YuMincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'MS PMincho', serif !important;
}
.fs2 {
	font-family: Didot,Didot LT STD,Hoefler Text,Garamond,Times New Roman,serif;
}
section img {
	width: 100%;
	max-width: 100%;
	vertical-align: bottom;
}

/* common */
#pageTop {
	position: fixed;
	bottom: 2vw;
	right: 2vw;
	z-index: 9;
}
#pageTop a {
	display: block;
	z-index: 9;
	padding: 8px;
	border-radius: 0;
	width: 35px;
	height: 35px;
	background-color: #231815;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
}
@media screen and (max-width: 767px) {
   /* SP */
	.pc {
		display: none !important;
   }
}
@media screen and (min-width: 768px) {
   /* PC */
	.sp {
		display: none !important;
   }
	.container {
		padding-right: 0px;
		padding-left: 0px;
		margin-right: auto;
		margin-left: auto;
   }
}

/* FS_page_init */
#header {
	/*はじめの高さを設定*/
	height: 7vw;
	width: 100%;
	/*以下はレイアウトのためのCSS*/
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/*HeightMinというクラス名がついたら高さを小さく、上部固定に*/
/*
#header.HeightMin {
	position: fixed;
	z-index: 999;
	最前面へ
	height: 0px;
	animation: DownAnime 0.5s forwards;
	margin-top: -7vw !important;
}

@keyframes DownAnime {
	from {
		opacity: 0;
		transform: translateY(-14vw);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
*/

main {
	height: 100%;
	padding: 0 0px;
	background-color: #fff;
	transition: all .5s;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media screen and (max-width: 767px) {
	main {
		margin-top: 0vw;
	}
}

@media screen and (min-width: 768px) {
	main {
		margin-top: 0vw !important;
	}
}

@media screen and (min-width: 768px) {
	.container {
		padding-right: 0px;
		padding-left: 0px;
		margin-right: auto;
		margin-left: auto;
	}
}

@media screen and (max-width: 767px) {
	#line_frds_add_pdct {
		border-style: none;
		margin: 0 auto;
		padding: 0 0 1vw;
	}
	#line_frds_add_pdct img {
		width: 100vw;
        height: 100%;
	}
}

@media screen and (min-width: 768px) {
	#line_frds_add_pdct {
		border-style: none;
		margin: 0 auto;
		padding: 0 0 1vw;
	}
	#line_frds_add_pdct img {
		width: 70vw;
        height: 100%;
	}
}


/* section */
@media screen and (max-width: 767px) {
   /* SP */
	.head_kv {
		width: 100%;
		position: relative;
   }
	.head_kv img {
		width: 100%;
		height: 100%;
   }
	#pageTop a {
		display: block;
		width: 20vw;
		height: 20vw;
		border-radius: 50px;
   }
   .is-webp #pageTop a {
		background-image: url(/wp-content/themes/mytrex/img/page/xmas22/pagetop.png.webp);
		background-color: transparent;
		background-position: left;
		background-size: contain;
		background-repeat: no-repeat;
	}
   .is-no-webp #pageTop a {
		background-image: url(/wp-content/themes/mytrex/img/page/xmas22/pagetop.png);
		background-color: transparent;
		background-position: left;
		background-size: contain;
		background-repeat: no-repeat;
	}
	#pageTop a img {
		display: none;
   }
}
@media screen and (min-width: 768px) {
   /* PC */
	.head_kv {
		width: 100%;
		position: relative;
   }
	.head_kv img {
		width: 100%;
		height: 100%;
   }
	#pageTop a {
		display: block;
		width: 7vw;
		height: 7vw;
		border-radius: 50px;
   }
   .is-webp #pageTop a {
		background-image: url(/wp-content/themes/mytrex/img/page/xmas22/pagetop.png.webp);
		background-color: transparent;
		background-position: left;
		background-size: contain;
		background-repeat: no-repeat;
	}
   .is-no-webp #pageTop a {
		background-image: url(/wp-content/themes/mytrex/img/page/xmas22/pagetop.png);
		background-color: transparent;
		background-position: left;
		background-size: contain;
		background-repeat: no-repeat;
	}
	#pageTop a img {
		display: none;
   }
}

/* foot */
@media screen and (max-width: 767px) {
	.foot_shop {
		background: #000000;
		color: #fff;
		text-align: center;
		font-size: 2.0vw;
		line-height: 3vw;
		padding: 2vw 0vw 2vw;
   }
	.foot_shop a {
		color: #fff;
   }
	.foot_shop a:hover {
		color: #e5e7ff;
   }
}
@media screen and (min-width: 768px) {
	.foot_shop {
		background: #000000;
		color: #fff;
		text-align: center;
		font-size: 0.7vw;
		line-height: 1.1vw;
		padding: 1vw 0vw 1vw;
   }
	.foot_shop a {
		color: #fff;
   }
	.foot_shop a:hover {
		color: #e5e7ff;
   }
}


/* anniversary */
.menu_list {
	display: flex;
}
.item_list {
	background-color: #f5f5f5;
	padding: 0 3.75vw 10vw;
}
.item_img {
	margin-bottom: 3.5vw;
}
.item_link {
	margin-inline: 14.5vw;
}
.item_link a {
	display: block;
	background-color: #333333;
	color: #fff;
	font-size: 3.5vw;
	letter-spacing: 0.15em;
	text-align: center;
	padding: 2.5vw 0;
}
.item_link span {
	position: relative;
}
.item_link span::before,
.item_link span::after {
	content: "";
	position: absolute;
	top: calc(50% - 1px);
	right: -7.5vw;
	width: 11px;
	height: 2px;
	background-color: #fff;
	transform-origin: calc(100% - 1px) 50%;
}
.item_link span::before {
	transform: rotate(45deg);
}
.item_link span::after {
	transform: rotate(-45deg);
}
#item_warm .col-sm-6 {
	padding-bottom: 15vw;
}
#pageTop {
	right: 0;
}
#pageTop a {
	padding: 0;
	height: auto;
}
#pageTop a img {
	display: block;
}

@media screen and (min-width: 768px) {
	.mytrex_rebive-series > section {
		position: relative;
	}
	.mytrex_rebive-series > section::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
		background: url(/wp-content/themes/mytrex/img/product/anniversary/pc_bg.png) no-repeat left top;
		background-size: cover;
    }
	footer {
		position: relative;
	}
	.item_link {
		margin-inline: 14.5%;
	}
	.item_link a {
		font-size: 1.5vw;
		padding: 0.5vw 0;
	}
	.item_link span::before, .item_link span::after {
		right: -5.5vw;
	}
	#item_warm .col-sm-6 {
		padding-bottom: 7vw;
	}
}

@media screen and (max-width: 767px) {
	#pageTop a {
		width: 9vw;
	}
}

/* accordion */
.accordion {
	position: relative;
}
.accordion__ttl {
	cursor: pointer;
}
.accordion__ttl.is-active {
	opacity: 0;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
}
.accordion__cnt {
	width: 100%;
	height: 0;
	overflow: hidden;
	transition: 0.2s ease height;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}


/* 8th Anniversary
=========================================*/
.image-accordion {
    overflow: hidden;
    position: relative;
}
.image-wrapper {
    overflow: hidden;
    transition: max-height 0.5s ease;
}
.image-wrapper.open {
    max-height: 1800px; 
}
.image-accordion img {
    width: 100%;
    display: block;
}
.toggle-btn {
    width: 100%;
    border: none;
    background: #f4f4f4;
    cursor: pointer;
    position: relative;
}
.image-wrapper.open + .toggle-btn::after {
    transform: rotate(180deg);
}
.event {
    background: url(img/product/anniversary2/event_bg.jpg) no-repeat top left;
    background-size: cover;
}
.event_ttl{
    line-height: 1;
    width: fit-content;
    position: relative;
}
.event_ttl::before,
.event_ttl::after {
    display: inline-block;
    content: '';
    position: absolute;
}
.event_ttl::before{
    left: 0;
}
.event_ttl::after{
    right: 0;
}
#event-carousel .splide__pagination__page {
    background: none;
    opacity: 1;
    margin: 0;
}
#event-carousel .splide__pagination__page.is-active {
    background: #333;
    transform: scale(1.1);
}
.uv_cnt {
    width: 100%;
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
}
.scroll-container {
    width: max-content; 
}
.scroll-container img {
    height: auto;
    width: auto;
    display: block;
}
.sns {
    position: relative;
}
.sns_nav {
    display: flex;
    position: absolute;
}
.sns_nav a {
    display: block;
}
@media screen and (max-width:767px){
    .event {
        padding: 11vw 7vw 26vw;
    }
    .event_ttl {
        font-size: 3.2vw;
        letter-spacing: .15em;
        padding: 0 3.5vw;
        margin: 0 auto 3vw;
    }
    .event_ttl::before,
    .event_ttl::after {
        border: 1.1vw solid transparent;
        border-top: 2.3vw solid;
        top: 25%;
    }
    #event-carousel .splide__arrow {
        top: auto;
        bottom: -10vw !important;
    }
    #event-carousel .splide__arrow--prev {
        left: 0 !important;
        content: '';
        height: 3vw;
        width: 3vw;
        border-top: 1px solid;
        border-left: 1px solid;
        border-radius: 0;
        transform: rotate(-45deg);
    }
    #event-carousel .splide__arrow--next {
        right: 0 !important;
        content: '';
        height: 3vw;
        width: 3vw;
        border-top: 1px solid;
        border-right: 1px solid;
        border-radius: 0;
        transform: rotate(45deg);
    }
    #event-carousel .splide__pagination {
        bottom: -10vw !important;
        gap: 3vw;
    }
    #event-carousel .splide__pagination__page {
        border: 1px solid #333;
        height: 2.4vw;
        width: 2.4vw;
    }
    .image-wrapper{
        max-height: 112vw;
    }
    .toggle-btn {
        padding: 7vw 0;
        font-size: 3.6vw;
        letter-spacing: .13em;
    }
    .toggle-btn::after {
        display: inline-block;
        content: '';
        border: 1.1vw solid transparent;
        border-top: 2.3vw solid;
        position: absolute;
        top: 46%;
        right: 35%;
    }
    .image-wrapper.open + .toggle-btn::after {
        top: 40%;
    }
    .scroll-container img{
        max-height: 62vw;
    }
    .sns_nav {
        top: 32%;
        left: 16%;
        gap: 5vw;
    }
    .sns_nav a {
        height: 13vw;
        width: 13vw;
    }
    footer {
        padding: 0;
    }
    .footer_inner {
        padding-top: 8vw;
    }
    .footer_menu_product {
        padding: 0;
        border-top: none;
    }
}
@media screen and (min-width:768px){
    .menu_pc #header.HeightMin {
        margin-top: 0 !important;
    }
    .mytrex_rebive-series > section::before{
        background: none;
    }
    .pc_bg{
        background: url("img/product/anniversary2/pc_bg.jpg") no-repeat center top;
        background-size: cover;
        background-attachment: fixed;
        z-index: 0;
    }
    .event {
        padding: 5.5vw 4vw 12.5vw;
    }
    .event_ttl {
        margin: 0 auto 1.5vw;
        font-size: 1.65vw;
        letter-spacing: .15em;
        padding: 0 1.5vw;
    }
    .event_ttl::before,
    .event_ttl::after {
        border: .5vw solid transparent;
        border-top: 1.1vw solid;
        top: 19%;
    }
    #event-carousel .splide__arrow {
        top: auto;
        bottom: -7% !important;
    }
    #event-carousel .splide__arrow--prev,
    #event-carousel .splide__arrow--next{
        content: '';
        height: 1.5vw;
        width: 1.5vw;
        background: none;
        border-top: .1vw solid;
        border-radius: 0;
    }
    #event-carousel .splide__arrow--prev {
        left: 0 !important;
        border-left: .15vw solid;
        transform: rotate(-45deg);
    }
    #event-carousel .splide__arrow--next {
        right: 0 !important;
        border-right: .15vw solid;
        transform: rotate(45deg);
    }
    #event-carousel .splide__pagination {
        bottom: -7% !important;
        gap: 1.8vw;
    }
    #event-carousel .splide__pagination__page {
        border: .15vw solid #333;
        height: 1.1vw;
        width: 1.1vw;
    }
    .image-wrapper{
        max-height: 57vw;
    }
    .toggle-btn {
        padding: 4vw 0;
        font-size: 1.7vw;
        letter-spacing: .13em;
    }
    .toggle-btn::after {
        display: inline-block;
        content: '';
        border: .6vw solid transparent;
        border-top: 1.2vw solid;
        position: absolute;
        top: 46%;
        right: 36%;
    }
    .image-wrapper.open + .toggle-btn::after {
        top: 40%;
    }
    .scroll-container img{
        max-height: 31vw;
    }
    .sns_nav {
        display: flex;
        position: absolute;
        top: 31%;
        left: 17%;
        gap: 1.5vw;
    }
    .sns_nav a {
        height: 7vw;
        width: 7vw;
    }
    footer{
        z-index: 2;
    }
}

@media screen and (max-width: 767px) {
  .menu_sp .menu_sp_list_logo {
    padding: 1.5vw 0 3.3vw 1.6vw !important;
  }
}