@charset "utf-8";
/* CSS Document */
:root{
	scroll-behavior: smooth;
}

body:not(.js-ready) #age {
  display: none;
}

html, body {
  height: auto;
}

.anchor {
  scroll-margin-top:70px;
}

.en{
font-family: "graphie", sans-serif;
font-weight: 500;
font-style: normal;
}
.en_b{
font-family: "graphie", sans-serif;
font-weight: 700;
font-style: normal;
}

.font_s{font-size: 0.8em; line-height: 160%;}
.font_l{font-size: 1.2em; line-height: 160%;}
.photo_s{max-width: 520px;}

img{display: block; max-width: 100%;}

@media screen and (min-width: 980px) {
.sp-only{display: none;}
a {  
-webkit-transition: 0.2s ease-in-out;  
-moz-transition: 0.2s ease-in-out;  
-o-transition: 0.2s ease-in-out;  
transition: 0.2s ease-in-out;  
}  
a:hover {opacity: 0.8; filter: alpha(opacity=80);}
}

.hamburger {
  width: 32px;
  height: 28px;
  position: relative;
}

.hamburger span {
  position: absolute;
  width: 100%;
  height: 3px;
  background: #fff;
  transition: 0.3s;
}

.hamburger span:nth-child(1) { top: 0; left: 0; }
.hamburger span:nth-child(2) { top: 10px; left: 0;}
.hamburger span:nth-child(3) { top: 20px; left: 0; }

body.mm-wrapper--opened .hamburger span:nth-child(1) {
  top: 12px;
  transform: rotate(45deg);
}
body.mm-wrapper--opened .hamburger span:nth-child(2) {
  opacity: 0;
}
body.mm-wrapper--opened .hamburger span:nth-child(3) {
  top: 12px;
  transform: rotate(-45deg);
}

.mm-page {
	background: #fff;
	min-height: 100vh;
}

/*slick調整*/
	
.slide dl{}

.slick-slider{padding-bottom: 78px;}

.slick-prev{left:0;}
.slick-next{right:0;}
.slick-prev,.slick-next{z-index: 100; top:inherit; bottom: inherit;  bottom:0;}
.slick-next{left: 58px;}

.slick-arrow:before{
	content:""!important;
	width: 48px;
	height:48px;
	position: absolute;
	top: -24px;
	left: 10px;
	background:#fff;
	border:#ff4896 solid 3px;
	border-radius:24px;
	-webkit-transition: 0.3s ease-in-out;  
	-moz-transition: 0.3s ease-in-out;  
	-o-transition: 0.3s ease-in-out;  
	transition: 0.3s ease-in-out; 	
	opacity:1;
}
.slick-next:before{
	background-image: url("/20th/images/arrow_next.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 8px;
}
.slick-prev:before{
	background-image: url("/20th/images/arrow_prev.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 8px;
	opacity: 1;
}	
.slick-arrow:hover::before{opacity: 0.8!important;}

.slick-list{width: 100%!important; overflow: hidden;}

.slick-track {
 	display: flex;
}
.slick-slide {
 	height: auto !important;
	background:;
	margin: 0;
}
#carousel .slick-slide {margin: 0 10px;}
/*
.slick-slide img{border-radius: 10px;}
*/
.slick-dots li button:before{
	font-size:20px!important;
}

.slick-dots li{
    width:10px;/*初期値は20px*/
}

.button.common a{background:#ff4896; color: #fff; display:inline-flex; justify-content: center; align-items: center;
 height: 38px; border-radius:10px; padding: 0 20px;}


body{
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

body{text-align:center; font-size:100%; line-height:190%; letter-spacing: 0.02em; width: 100%; color:#333; background-color:#fff!important;
 min-width: 1060px;}
.wrap-inner{max-width: 1060px; width: 96%; margin: 0 auto; text-align: left;}

#header{ padding-top: 40px; position:absolute; top:0; width: 100%; z-index: 1;}
#header .wrap-inner{max-width: inherit; display: flex; justify-content: space-between; align-items: flex-start;}

#header .wrap-inner hgroup{display: flex; flex-direction: column; align-items: center; padding-right: 20px;}
#header .wrap-inner hgroup h1 img{max-width: 400px;}
#header .wrap-inner hgroup h1 img.min{display: none;}
#header .wrap-inner hgroup h2{letter-spacing: 0.1em; color: #fff; margin-top:15px;}
#header .wrap-inner hgroup h2{display: flex; flex-direction: column; justify-content: center; align-items: center;}
#header .wrap-inner hgroup h2 .main{font-size: 2rem;}
#header .wrap-inner hgroup h2 .sub{font-size: 0.9rem; margin-top: 5px;}

#header .wrap-inner .wrap-nav{flex: 1; display: flex; flex-direction: column; align-items: flex-end; justify-content: center;}
#header .wrap-inner .wrap-nav .container{background: #fff; display: flex; justify-content: flex-start; align-items: center;
 border-radius: 99px;}
#header .wrap-inner .wrap-nav #glnav{padding: 0 30px; font-size: 0.9rem; line-height: 110%; }
#header .wrap-inner .wrap-nav #glnav ul{display: flex; justify-content: flex-start; align-items: center;}
#header .wrap-inner .wrap-nav #glnav ul li{margin-right: 15px;}
#header .wrap-inner .wrap-nav #glnav ul li:last-child{margin-right:0;}

@media screen and (max-width: 1200px) {
#header .wrap-inner hgroup{padding-right:10px;}
#header .wrap-inner hgroup h1 img{max-width: 250px;}
#header .wrap-inner .wrap-nav #glnav ul li{font-size: 0.84rem;}
}

#header .wrap-burger a{background:#ff4896; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 60px; border-radius: 0 30px 30px 0; color: #fff; font-size: 0.72rem; line-height: 100%; padding: 0 25px 0 15px;}

#header .wrap-burger .name{}

#header .wrap-inner .wrap-nav #social{padding: 0 10px 0 0;}
#header .wrap-inner .wrap-nav #social ul{display: flex; justify-content: flex-start; align-items: center;}
#header .wrap-inner .wrap-nav #social ul li a{background: #000; height: 30px; width: 30px; border-radius: 99px; display:flex;
 justify-content: center; align-items: center;}
#header .wrap-inner .wrap-nav #social ul li a img{max-width: 16px; max-height: 16px;}

#header .wrap-inner .wrap-nav #social ul li{margin-right: 10px;}
#header .wrap-inner .wrap-nav #social ul li:last-child{margin-right:0;}


/*ロールオーバーライン*/
#glnav li a{
  position: relative;
  text-decoration: none;
padding: 4px 0;
}

#glnav li a::before,
#glnav li a::after {
  border-bottom: solid 2px #ff4896;
  bottom: 0;
  content: "";
  display: block;
  position: absolute;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  width: 0;
}
#glnav li a::before {
  left: 50%;
}
#glnav li a::after {
  right: 50%;
}
#glnav li a:hover::before,
#glnav li a:hover::after {
  width: 50%;
}
/*ロールオーバーライン*/

#header.smaller{width: 100%;  position: sticky; top:0; z-index: 100000000; padding: 0; background: #fff; box-shadow: 0 0 3px #9D9D9D;}
#header.smaller .wrap-inner{width: 100%; padding: 0;}
#header.smaller .wrap-inner hgroup h1 img.full{display: none;}
#header.smaller .wrap-inner hgroup h2{display: none;}
#header.smaller .wrap-inner .button{display: none;}
#header.smaller .wrap-inner hgroup h1 img.min{display:inherit; max-width: 100%; height: 42px; margin-left: 2%; margin-top: 10px;}
#header.smaller .wrap-inner .wrap-nav{}
#header.smaller .wrap-inner .wrap-nav .container{border-radius: 0;}
#header.smaller .wrap-burger a{border-radius:0; padding-right: 15px;}

#maincover{width: 100%; height: 100vh;}

#maincover .container{width: 100%; height: 100vh; position: absolute; top: 0; left: 0; overflow: hidden;
display: flex; flex-direction: column; justify-content: flex-end; align-items: center; background: rgba(0,0,0,0.2);}

#maincover .container hgroup h2{display: flex; flex-direction: column; justify-content: center; align-items: center;}
#maincover .container hgroup h2 .main{font-size: 2rem;}
#maincover .container hgroup h2 .sub{font-size: 0.9rem; margin-top: 5px;}

#maincover .container .button a{display: flex; align-items: center; justify-content: center;
 background:#000; height: 42px; border-radius: 15px 15px 0 0; color: #fff; padding: 0 20px;}
#maincover .container .button a{}

#maincover .container .button_movie{position: absolute; right: 15px; bottom: 15px;}
#maincover .container .button_movie a{background: linear-gradient(to right, #FF8C0C, #ff4896); color: #fff; font-size: 0.9rem; line-height: 100%;
 padding:0 20px; border-radius: 5px; display: flex; justify-content: center; align-items: center; height: 38px;}


.video{
  width: 100%;
  height: 100vh;
  background:#000;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
}

.video::after{
  content: '';
  width: 100%;
  height: 100%;
  background-color: #10394b;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .3;
}

.video video{
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#pickup{padding: 60px 0; padding-bottom: 0; width: 100%; overflow: hidden; padding-bottom: 60px;}
body.is-scrolled #pickup{padding-top: 0;}
#pickup .wrap-inner{display: flex; justify-content: space-between;}

#pickup .wrap-inner .wrap-carousel{min-height: 0; min-width: 0;}
#pickup .wrap-inner .carousel_pickup{ margin-left: auto;}
#pickup .wrap-inner .carousel_pickup .slick-slide{margin-right:0; padding: 0 15px;}
#pickup .wrap-inner .carousel_pickup .slick-list{  overflow: visible;}

#pickup .wrap-inner .carousel_pickup .slick-track {
display: flex;
 align-items: stretch;
}

#pickup .wrap-inner .carousel_pickup .slick-slide > div {
  height: 100%; box-shadow:0 2px 8px rgba(0, 0, 0, 0.05), 0 10px 20px rgba(0, 0, 0, 0.08);  border-radius:10px;
}
#pickup .wrap-inner .carousel_pickup .slick-slide dl{
  height: 100%; 
}

#pickup .wrap-inner .carousel_pickup dl{background:#efeae4; border-radius: 10px; position: relative; border-radius:10px;}
#pickup .wrap-inner .carousel_pickup dl dt img{border-radius: 10px 10px 0 0;}
#pickup .wrap-inner .carousel_pickup dd{padding: 10px;}
#pickup .wrap-inner .carousel_pickup dd h4{font-size: 0.9rem; line-height: 160%; margin-bottom: 5px;}
#pickup .wrap-inner .carousel_pickup dd time{font-size: 0.84rem;}

#pickup .wrap-inner .carousel_pickup dl.relirium,
#pickup .wrap-inner .carousel_pickup dl.special,
#pickup .wrap-inner .carousel_pickup dl.live
{opacity: 1;}

#pickup .wrap-inner .carousel_pickup dl.relirium .icon{ background:#57c3e7;}
#pickup .wrap-inner .carousel_pickup dl.special .icon{ background:#2117cd;}
#pickup .wrap-inner .carousel_pickup dl.live .icon{ background:#BF0054;}

#pickup .wrap-inner .carousel_pickup dl .icon{background: #000; font-size: 0.64rem; line-height: 100%; padding:5px;
 position: absolute; top:10px; right: 10px; color: #fff;}


#pickup hgroup{position: relative; z-index: 1; background: #fff;
  margin-left: -100vw;
  padding-left: 100vw;}
#pickup hgroup h3{padding-right: 40px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
#pickup hgroup .sub{font-size: 3rem; line-height:110%;}
#pickup hgroup .sub::first-letter{color: #d52271;}

#pickup hgroup .main{font-size:1rem; margin-top: 15px; line-height: 100%;}

#pickup .wrap-carousel{flex: 1; }

#message{background:#efeae4; position: relative; overflow: hidden; height:720px;}
#message .wrap-Message{position: relative; z-index: 2; height: 720px; display: flex; flex-direction: column; justify-content: center;
 align-items: flex-start; pointer-events: none;}
#message .wrap-Message a{pointer-events: all;}
#message .logo{max-width: 400px; margin-bottom: 40px;}
#message h3{font-size: 2rem; margin-bottom: 30px;
	text-shadow:
		0 0 3px #fff,
		0 0 8px #fff,
		0 0 18px rgba(255,255,255,0.9),
		0 0 32px rgba(255,255,255,0.7);
}
#message h3::first-letter{color: #d52271;}
#message p{margin-bottom: 30px; line-height: 240%;
	text-shadow:
		0 0 3px #fff,
		0 0 8px #fff,
		0 0 18px rgba(255,255,255,0.9),
		0 0 32px rgba(255,255,255,0.7);
}
#message .button a{background: linear-gradient(to right, #d52271, #ff4896); color: #fff;
 border-radius: 10px; height: 42px; display:inline-flex; justify-content: center; align-items: center; padding:0 20px;}

#message .wrap-carousel{position:absolute; top:0; right: -25%; z-index: 1; width: 100%;}

#message .wrap-carousel .slick-prev,#message .wrap-carousel .slick-next{z-index: 100; top:inherit; bottom: inherit; top:670px;}
#message .wrap-carousel .slick-prev{left:50%;}
#message .wrap-carousel .slick-next{left:50%; margin-left: 60px;}

#message .bnr img{max-width: 280px; width: 90%; border:#dedede solid 1px; border-radius: 10px;}

#live{background: url("../images/background_live.jpg") no-repeat top center; background-size: cover; padding:60px 0; }
#live .wrap-inner{display: flex; flex-direction: column; justify-content: center; align-items: center;}
#live .wrap-inner .wrap-text{color: #fff;}
#live .wrap-inner .wrap-text p{margin-bottom: 20px;}
#live .wrap-inner .wrap-text .data{padding-bottom: 20px;}
#live .wrap-inner .wrap-text .data dl{margin-bottom: 20px; display: flex; justify-content: flex-start; align-items: center;
 font-weight: bold;}

#live .wrap-inner .wrap-text .data dt{background: #d52271; display: flex; justify-content: center; align-items: center;
 color: #fff; border-radius: 5px; padding: 0 20px; height: 32px; margin-right: 20px;}

#live .wrap-inner .wrap-text .data dd span{}
#live .wrap-inner .wrap-text .data dd .en{font-size: 1.4em;}
#live .wrap-inner .wrap-text .data dd .font_l{font-size: 2em;}
#live .wrap-inner .wrap-text .data dd .week{background:#d52271; justify-content: center; align-items: center;
 width: 28px; height: 28px; border-radius: 99px; display: inline-flex; position: relative; top:-5px; margin-left: 4px; line-height: 100%;}

#live .wrap-inner .wrap-text .wrap-button{text-align: center;}
#live .wrap-inner .wrap-text h4{font-size: 1.2rem; line-height: 110%; margin-bottom:20px; color: #fff;}
#live .wrap-inner .wrap-text .wrap-button .button a{background:linear-gradient(to right, #FF8C0C, #ff4896); color: #fff;
 border-radius: 10px; height: 60px; display:flex; justify-content: center; align-items: center; padding:0 20px; font-weight: bold;}

#news{padding: 60px 0 40px 0;}

#news hgroup{margin-bottom: 40px;}
#news hgroup h3{padding-right: 40px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
#news hgroup .sub{font-size: 3rem; line-height:110%;}
#news hgroup .sub::first-letter{color: #d52271;}

#news hgroup .main{font-size:1rem; margin-top: 15px; line-height: 100%;}

#news .newslist dl{display: flex; justify-content: flex-start; border-bottom: #dedede solid 1px; margin-bottom: 20px; padding-bottom: 20px;}
#news .newslist dl dt.icon{background:#008200; color: #fff; line-height: 100%; font-size: 0.72rem; display: flex; justify-content: center;
 align-items: center; height: 22px; width: 50px; margin-right: 10px; margin-top: 4px;}
#news .newslist dl dt.icon.blog{background: #0028A0;}
#news .newslist dl dd{flex: 1;}
#news .newslist dl dd time{font-size: 0.72rem; color: #646464;}

#product{padding: 60px 0;}

#product hgroup{}
#product hgroup h3{padding-right: 40px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
#product hgroup .sub{font-size: 3rem; line-height:110%;}
#product hgroup .sub::first-letter{color: #d52271;}
#product hgroup .main{font-size:1rem; margin-top: 15px; line-height: 100%;}

#product #spot{padding-bottom: 40px;}
#product #spot ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* PCでは4列 */
  gap: 20px;
}

#product #spot ul li img{border-radius: 10px; box-shadow:0 2px 8px rgba(0, 0, 0, 0.05), 0 12px 24px rgba(0, 0, 0, 0.08);}

#news-r dl{display: flex; justify-content: flex-start; margin-bottom: 30px; padding-bottom: 30px; border-bottom:#d2cbc7 solid 1px;}
#news-r dl:last-child{margin-bottom:0; padding-bottom:0; border: none;}
#news-r dl dt{max-width: 180px;}
#news-r dl dt img{border-radius: 10px;}
#news-r dl dd{padding-left: 30px;}
#news-r time{color: rgba(92,92,92,1.00); font-size: 0.75rem;}
#main #news-r ul li{font-size: 0.8125rem; line-height: 160%; margin-bottom: 5px;}
#main #news-r ul li a{background: url("../images/arrow_link.png") no-repeat left top 3px; background-size: 12px; padding-left: 22px; display: inline-block;}

#footer{background: #000; color: #fff; padding: 60px 0; }
#footer .wrap-inner{text-align: center;}
#footer .logo{max-width: 280px; margin: 0 auto;}
#footer h3{font-size: 0.84rem; margin-top: 15px;}
#footer address{font-size: 0.84rem; line-height: 100%; border-top:#999999 solid 1px; padding: 30px 0; margin-top: 30px;}

#scrollpanel{position: sticky; margin: 0 auto; right:0; bottom:0; padding: 10px 10px 20px 0; z-index: 100; pointer-events: none;}
#scrollpanel a{pointer-events: all;}
#scrollpanel{display: flex; justify-content: flex-end; align-items: center;}

#scrollpanel .button_pagetop a{background:#000; background-size: 12px auto;
 height: 48px; width: 48px; border-radius: 99px; color: #fff; display: flex; justify-content: center; align-items: center;}
#scrollpanel .button_pagetop a img{max-width: 12px; height: auto;}

.wrap-cintentslist{
max-width:1060px;
	width: 96%;
	margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* お好みで */
}

.wrap-cintentslist{margin-bottom: 30px;}
.wrap-cintentslist dl{border-radius: 10px; box-shadow:0 2px 8px rgba(0, 0, 0, 0.05), 0 12px 24px rgba(0, 0, 0, 0.08);}
.wrap-cintentslist dl img{border-radius: 10px 10px 0 0;}

.wrap-cintentslist dl dd{border-radius: 0 0 10px 10px; color: #fff; padding: 10px; font-size: 0.84rem; line-height: 160%;
 text-align: left; font-weight: bold;}

.wrap-cintentslist dl:nth-child(1) dd{background: linear-gradient(to right, #0088B5, #57c3e7);}
.wrap-cintentslist dl:nth-child(2) dd{background: linear-gradient(to right, #141055, #2117cd);}
.wrap-cintentslist dl:nth-child(3) dd{background: linear-gradient(to right, #68002E, #AB0D53);}

.wrap-cintentslist dl dd p{margin-bottom: 10px;}
.wrap-cintentslist dl dd .button{border-radius: 5px; border:#fff solid 1px; display: flex; justify-content: center; align-items: center;
 line-height: 100%; padding: 10px;}

.product_title{display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px;}

@media screen and (max-width: 980px) {
.pc-only{display: none;}
.sp-only{display:inherit;}
body{min-width:inherit;}
	
#header{ padding-top: 20px;}
#header .wrap-inner .wrap-nav #glnav{display: none;}

#header{width: 100%;  position: sticky; top:0; z-index: 100000000; padding: 0; background: #fff; box-shadow: 0 0 3px #9D9D9D;}
#header .wrap-inner{width: 100%; padding: 0;}
#header .wrap-inner hgroup h1 img.full{display: none;}
#header .wrap-inner hgroup h2{display: none;}
#header .wrap-inner .button{display: none;}
#header .wrap-inner hgroup h1 img.min{display:inherit; height: 42px; width: auto; margin-left: 2%; margin-top:10px;}
#header .wrap-inner .wrap-nav{}
#header .wrap-inner .wrap-nav .container{border-radius: 0;}
#header .wrap-burger a{border-radius:0; padding-right: 15px;}	

#maincover .container .button_movie{right: 10px; top: 70px;}
#maincover .container{justify-content: space-between;}
#maincover .container .wrap-main{display: flex; flex-direction: column; justify-content: center; height: 100%; padding-top: 60px;}
#maincover .container .wrap-main hgroup{display: flex; flex-direction: column; width: 96%; margin: 0 auto;}
#maincover .container .wrap-main hgroup h2{color: #fff; font-size: 2rem; letter-spacing: 0.1em; margin-top: 20px;}

#pickup{padding-top: 0;}
#pickup .wrap-inner{display: inherit;}
#pickup hgroup{margin-bottom: 40px;}
	
}

@media screen and (max-width: 600px) {
	
#maincover h1 img{max-width: 300px;}	
#maincover .container .button_movie a{font-size: 0.8rem; padding:0 10px; height: 26px;}
#maincover .container .button a{font-size: 0.8rem; height:32px; border-radius: 10px 10px 0 0;}
	
#header .wrap-inner .wrap-nav #social ul li{margin-right: 8px;}	
	
#pickup .wrap-inner .carousel_pickup .slick-slide{margin-right:0; padding: 0 8px;}	
	
#message{height: inherit; padding: 60px 0 0 0;}
#message .wrap-carousel{position:relative; right: inherit; width: 200%; margin-left: -50%; margin-bottom: -10px;}

#message .wrap-carousel .slick-prev,#message .wrap-carousel .slick-next{z-index: 100; top:inherit; bottom: inherit; top:520px;}
#message .wrap-carousel .slick-prev{left:42%;}
#message .wrap-carousel .slick-next{left:42%; margin-left: 60px;}	
	
#message .wrap-Message{height:auto;}
#message .slick-slider{padding-bottom:0px;}	

#maincover{width: 100%; height:calc(100vh - 40px);}
#maincover .container{height:calc(100vh - 40px);}	
.video{height:calc(100vh - 40px);}

#main .wrap-cintentslist{
	display: inherit;
}

#main #panel{padding-bottom: 20px;}
#main .wrap-cintentslist dl{margin-bottom: 20px;}
	
#product #spot ul {
  grid-template-columns: repeat(2, 1fr); /* PCでは4列 */
  gap: 10px;
}
#news-r dl dt img{max-width: 80px;}
#news-r dl dd{padding-left: 15px;}

#live{font-size: 90%;}	

#live .wrap-inner .wrap-text p{text-align: center;}

#message .wrap-inner{text-align: center;}
#message .logo{max-width: 280px; margin-left: auto; margin-right: auto;}
	
.product_title{display: inherit;}
.product_title hgroup{margin-bottom: 30px;}
.product_title .button{margin: 0 auto; text-align: center;}

#message .bnr{padding-bottom: 30px; text-align: center;}
#message .bnr a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
	
}