@charset "UTF-8";

/* ----------------------------------
 Layout
---------------------------------- */
/* PC */
html[data-browse-mode="P"] body.page-top .pane-contents { padding: 0;}
html[data-browse-mode="P"] body.page-top .pane-contents .container { width: auto; max-width: unset !important; padding: 0;}

/* SP */
html[data-browse-mode="S"] body.page-top {}

/* 共通 */
body.page-top .pane-main { margin: 0 !important; max-width: unset !important; padding: 0 !important;}
body.page-top .block-switch-banner { display: none !important;}

/* ----------------------------------
 PARTS
---------------------------------- */
h2.sec-title.eng { font-family: var(--font-family-stix); font-size: 22px; font-weight: 500; font-style: italic; letter-spacing: 0.05em;}

/* ----------------------------------
 MAIN VISUAL
---------------------------------- */
#top_main_visual { padding: 0; margin: 0; background: var(--color-bg); position: relative; z-index: 2;}
#top_main_visual br.for-sp { display: none;}
#top_main_visual .visual-item { position: relative;}
#top_main_visual .visual-item .visual-item-image-frame { display: flex; justify-content: center; flex-wrap: nowrap;}
#top_main_visual .visual-item .visual-item-image-frame > div { width: 50%; flex-basis: 50%;}
#top_main_visual .visual-item .visual-item-image-frame img { width: 100%;}
#top_main_visual .visual-item-contents {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
	flex-direction: column;
  align-items: center;
  position: absolute;
  top: calc(50% + 40px);
  left: 0;
  bottom: 40px;
  margin: 0;
  z-index: 3;
}
#top_main_visual .visual-item-contents .eng {
	margin: 0 0 10px;
  font-family: var(--font-family-stix);
  font-size: 24px;
  font-weight: 500;
  font-style: italic;
  text-align: center;
  letter-spacing: 0.05em;
}
#top_main_visual .visual-item-contents .jp {
  font-family: var(--font-family-ship);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.05em;
	line-height: var(--line-height-high);
}
#top_main_visual .swiper-pagination  { bottom: 40px;}
#top_main_visual .swiper-button-prev { left: 48px; right: auto; bottom: 26px; z-index: 11;}
#top_main_visual .swiper-button-next { left: auto; right: 48px; bottom: 26px; z-index: 11;}

@media screen and (max-width: 1000px) {
	#top_main_visual br.for-sp { display: block;}
	#top_main_visual .visual-item .visual-item-image-frame { flex-direction: column;}
	#top_main_visual .visual-item .visual-item-image-frame > div { flex-basis: 100vw; width: 100vw; height: 105vw; display: flex; align-items: center; justify-content: center; overflow: hidden;}
	#top_main_visual .visual-item .visual-item-image-frame > div img { max-width: none; min-width: 100%; min-height: 100%; object-fit: cover; object-position: center;}
	#top_main_visual .visual-item-contents .eng { font-size: 18px;}
	#top_main_visual .swiper-button-prev { left: 10px;}
	#top_main_visual .swiper-button-next { right: 10px;}
	#top_main_visual .swiper-pagination  { bottom: 34px;}
}

/* ----------------------------------
 MESSAGE
---------------------------------- */
#top_sec_message { width: 100%; padding: 430px 0; position: relative; z-index: 1;}
#top_sec_message::before {
	content: '';
  width: 100%;
	height: 100%;
  background-image: url("/img/usr/common/sitelogo_accent.png");
  background-attachment: fixed;
  -webkit-background-size: calc(100% - 100px) auto;
  background-size: calc(100% - 100px) auto;
  background-position: center 40vw;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}
#top_sec_message.imagefix-for-ios::before { 
	background-attachment: unset;
	-webkit-background-size: 96% auto;
	background-size: 96% auto;
	background-position: center center;
	position: fixed;
	z-index: 1;
}
#top_sec_message::after {
	content: '';
	width: 100%;
	height: 220px;
	background: linear-gradient(180deg, transparent 0%, var(--color-bg) 80%, var(--color-bg) 100%);
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
}
#top_sec_message .section-inner {
  max-width: calc(var(--layout2-max-width) + (var(--layout2-base-padding) * 2));
  padding: 0 var(--layout-base-padding);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}
#top_sec_message .image-frame { width: 50%; text-align: center;}
#top_sec_message .image-frame .eng { font-family: var(--font-family-stix); font-size: 12px; font-weight: 500; font-style: italic; text-align: center; letter-spacing: 0.05em;}
#top_sec_message .image-frame figure { width: 214px; margin: 20px auto;}
#top_sec_message .image-frame .youtube { margin: 20px auto;}
#top_sec_message .image-frame .link { display: flex; justify-content: center; align-items: center;}
#top_sec_message .image-frame .link a {
  font-family: var(--font-family-stix);
  font-size: 14px;
  font-weight: 500;
  font-style: italic;
  text-decoration: underline;
  display: flex;
  align-items: center;
  transition: var(--transition);
}
#top_sec_message .image-frame .link a::before {
	content: '';
	width: 13px;
	height: 13px;
	margin: 0 8px 0 0;
	background-image: url("/img/usr/common/ico_movie_on.png");
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: 13px auto;
	background-size: 13px auto;
	display: inline-block;
}
#top_sec_message .image-frame .link a:hover { opacity: var(--opacity);}
#top_sec_message .text-frame { width: 50%; padding: 0 0 0 12%; font-family: var(--font-family-ship); line-height: var(--line-height-high);}
#top_sec_message .text-frame h2.main { margin: 0 0 38px; font-family: var(--font-family-ship); font-size: 18px; font-weight: 400; line-height: var(--line-height-high);}
#top_sec_message .text-frame .sub { font-family: var(--font-family-ship); font-size: 14px; font-weight: 500;}
#top_sec_message .text-frame .sub + .sub { margin-top: 25px;}
#top_sec_message .text-frame br.for-sp { display: none;}
#top_sec_message .view-more { margin-top: 90px;}
#top_sec_message .view-more a::after { 
	width: var(--view-more-size-l);
	background-image: url("/img/usr/common/ico_to_next_l.png");
	-webkit-background-size: var(--view-more-size-l) auto;
	background-size: var(--view-more-size-l) auto;
	right: auto;
	left: 0;
}
#top_sec_message .view-more a:hover::after { right: auto; left: 10px;}

@media screen and (max-width: 1000px) {
	#top_sec_message { width: 100%; padding: 240px 0; position: relative;}
	#top_sec_message::before { -webkit-background-size: auto 136px; background-size: auto 136px; background-position: 20px 40vw;}
	#top_sec_message .section-inner { max-width: calc(var(--layout2-max-width) + (var(--layout-base-padding) * 2)); padding: 0 var(--layout-base-padding); display: block;}
	#top_sec_message .image-frame { width: 100%; margin: 0 0 120px;}
	#top_sec_message .image-frame figure { width: 50%; margin: 40px auto 20px;}
	#top_sec_message .text-frame  { width: 100%; padding: 0 7%;}
	#top_sec_message .text-frame h2.main { margin: 0 0 70px; font-size: 16px;}
	#top_sec_message .text-frame .sub { font-size: 12px;}
	#top_sec_message .text-frame br.for-sp { display: block;}
	#top_sec_message .view-more { margin-top: 45px; justify-content: center;}
	#top_sec_message .view-more a::after { 
		width: var(--view-more-size-s);
		background-image: url("/img/usr/common/ico_to_next_s.png");
		-webkit-background-size: var(--view-more-size-s) auto;
		background-size: var(--view-more-size-s) auto;
		left: calc(50% - (var(--view-more-size-s) / 2));
	}
	#top_sec_message .view-more a:hover::after { left: 20px;}
}

/* ----------------------------------
 TOP EVENT
---------------------------------- */
#block_of_event { margin: 0 0 300px; background: var(--color-bg); position: relative; z-index: 2;}
#block_of_event .view-more.view-event {
	max-width: calc(var(--layout2-max-width) + (var(--layout2-base-padding) * 2));
	padding: 0 var(--layout2-base-padding);
	margin: 0 auto 200px;
	justify-content: flex-end;
}
#block_of_event .view-more.view-event a::after { right: 10px;}
#block_of_event .view-more.view-event a:hover::after { right: 0;}

/* P形式 */
#block_of_event .block-pickup-list-p--items { column-gap: 80px;}
#block_of_event .block-pickup-list-p--items li { width: calc((100% - (80px * 2))/ 3);}

/* R形式 */
#block_of_event .block-ranking-r:not(.swiper) .block-ranking-r--items { column-gap: 80px;}
#block_of_event .block-ranking-r:not(.swiper) .block-ranking-r--items li { width: calc((100% - (80px * 2))/ 3);}
#block_of_event .block-ranking-r:not(.swiper) .swiper-scrollbar.swiper-scrollbar-horizontal { width: calc(100% - 80px); height: 5px; position: absolute; left: 0%; bottom: 3px; z-index: 50;}
#block_of_event .block-ranking-r.swiper .block-ranking-r--items { padding: 5px 0 100px;}
#block_of_event .block-ranking-r.swiper .swiper-button-prev { left: 48px; right: auto; bottom: 40px;}
#block_of_event .block-ranking-r.swiper .swiper-button-next { left: auto; right: 48px; bottom: 40px;}

@media screen and (max-width: 1000px) {
	#block_of_event { margin: 0 0 160px;}
	#block_of_event .view-more.view-event { padding: 0 var(--layout-base-padding); margin: 0 auto 160px; justify-content: center;}
	#block_of_event .view-more.view-event a::after {
		width: var(--view-more-size-s);
		background-image: url("/img/usr/common/ico_to_next_s.png");
		-webkit-background-size: var(--view-more-size-s) auto;
		background-size: var(--view-more-size-s) auto;
		right: calc(50% - (var(--view-more-size-s) / 2));
	}
	
	#block_of_event .block-pickup-list-p--items { column-gap: 20px;}
	#block_of_event .block-pickup-list-p--items li { width:  calc(50% - 10px);}
	
	#block_of_event .block-ranking-r:not(.swiper) .block-ranking-r--items { column-gap: 20px;}
	#block_of_event .block-ranking-r:not(.swiper) .block-ranking-r--items li { width: calc(50% - 10px);}
	#block_of_event .block-ranking-r.swiper .block-ranking-r--items { padding: 5px 0 30px;}
	#block_of_event .block-ranking-r.swiper .swiper-button-prev { left: 20px; bottom: 20px;}
	#block_of_event .block-ranking-r.swiper .swiper-button-next { right: 20px; bottom: 20px;}
}

/* ----------------------------------
 FRAME
---------------------------------- */
#block_of_top_free1,
#block_of_top_free2,
#block_of_topic { background: var(--color-bg); position: relative; z-index: 2;}

/* ----------------------------------
 TOPICS
---------------------------------- */
#top_sec_topics { max-width: calc(var(--layout2-max-width) + (var(--layout2-base-padding) * 2)); padding: 0 var(--layout2-base-padding); margin: 60px auto 188px; background: none;}
#top_sec_topics:has(ul.topics-list) { display: block;}
#top_sec_topics h2.sec-title.eng { margin: 0 0 35px; text-align: center;}
#top_sec_topics .topics-list li + li { margin-top: 40px;}
#top_sec_topics .topics-item a { display: flex; justify-content: space-between; align-items: center; text-decoration: none; background-color: var(--color-accent1); transition: var(--transition);}
#top_sec_topics .topics-item .image { width: 50%; padding: 50% 0 0 0; position: relative; transition: var(--transition);}
#top_sec_topics .topics-item .image figure { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center;}
#top_sec_topics .topics-item .desc { width: 50%; padding: 0 7%; color: #FFF;}
#top_sec_topics .topics-item .desc h3.topics-number { margin: 0 0 40px; font-family: var(--font-family-stix); font-size: 22px; font-weight: 500; font-style: italic; color: #FFF;}
#top_sec_topics .topics-item .desc h3.topics-number .num { margin: 0 0 0 30px; font-family: var(--font-family-stix); font-size: 60px; font-weight: 400; font-style: italic; color: #FFF;}
#top_sec_topics .topics-item .desc .title { margin: 0 0 20px; font-family: var(--font-family-ship); font-size: 22px; font-weight: 500; color: #FFF;}
#top_sec_topics .topics-item .desc .text { font-family: var(--font-family-ship); font-size: 14px; font-weight: 500; color: #FFF;}
#top_sec_topics .topics-item .desc .view-more {
	padding: 0 0 16px;
	margin: 30px 0 0;
	font-family: var(--font-family-stix);
	font-size: 16px;
	font-weight: 500;
	font-style: italic;
	text-align: right;
	text-decoration: none;
	color: #FFF;
	display: block;
	position: relative;
	transition: var(--transition);
}
#top_sec_topics .topics-item .desc .view-more::after {
	content: '';
	width: var(--view-more-size-ss);
	height: 9px;
	background-image: url("/img/usr/common/ico_to_next_white_ss.png");
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: var(--view-more-size-ss) auto;
	background-size: var(--view-more-size-ss) auto;
	display: block;
	position: absolute;
	bottom: 0;
	right: 5px;
	transition: var(--transition);
}
#top_sec_topics .topics-item a:hover .image { opacity: var(--opacity);}
#top_sec_topics .topics-item a:hover .desc .view-more::after { right: -5px;}
#top_sec_topics .view-all { margin: 30px 0 0; justify-content: flex-end;}
#top_sec_topics .view-all a::after { right: 0;}
#top_sec_topics .view-all a:hover::after { right: -10px;}

@media screen and (max-width: 1000px) {
	#top_sec_topics { padding: 0 var(--layout-base-padding); margin: 40px auto 130px;}
	#top_sec_topics .topics-list li + li { margin-top: 30px;}
	#top_sec_topics .topics-item a { display: block;}
	#top_sec_topics .topics-item .image { width: 100%; padding: 100% 0 0 0;}
	#top_sec_topics .topics-item .desc  { width: 100%; padding: 40px 7%;}
	#top_sec_topics .topics-item .desc h3.topics-number { margin: 0 0 26px; font-size: 20px; text-align: center;}
	#top_sec_topics .topics-item .desc h3.topics-number .num { margin: 0 0 0 12px; font-family: var(--font-family-stix); font-size: 36px;}
	#top_sec_topics .topics-item .desc .title { font-size: 18px;}
	#top_sec_topics .topics-item .desc .text  { font-size: 12px;}
	#top_sec_topics .topics-item .desc .view-more { margin: 20px 0 0;}
	#top_sec_topics .view-all.view-more { justify-content: center;}
	#top_sec_topics .view-all.view-more::after { 
		width: var(--view-more-size-s);
		background-image: url("/img/usr/common/ico_to_next_s.png");
		-webkit-background-size: var(--view-more-size-s) auto;
		background-size: var(--view-more-size-s) auto;
		left: calc(50% - (var(--view-more-size-s) / 2));
	}
	#top_sec_topics .view-all.view-more:hover::after { left: 28px;}
}

/* ----------------------------------
 GALLERY
---------------------------------- */
#top_sec_gallery { margin: 0 0 177px;}
#top_sec_gallery #gallery_slider_warp { overflow: hidden; white-space: nowrap;}
#top_sec_gallery #gallery_slider { display: inline-flex; animation: marquee linear infinite;}
#top_sec_gallery #gallery_slider .gallery-item { width: 300px; height: 400px; margin: 0 20px 0 0; flex: 0 0 auto;}

@keyframes marquee {
  0%   { transform: translateX(0);}
  100% { transform: translateX(-50%);}
}

@media screen and (max-width: 1000px) {
	#top_sec_gallery { margin: 0 0 126px;}
	#top_sec_gallery #gallery_slider .gallery-item { width: 180px; height: 240px;}
}

/* ----------------------------------
 HOW TO
---------------------------------- */
#top_sec_howto { max-width: calc(var(--layout1-max-width) + (var(--layout1-base-padding) * 2)); padding: 0 var(--layout1-base-padding); margin: 0 auto 155px;}
#top_sec_howto .section-inner { position: relative;}
#top_sec_howto .section-inner img { width: 100%; vertical-align: top;}
#top_sec_howto .section-inner a { display: block; transition: var(--transition);}
#top_sec_howto .section-inner .desc { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
#top_sec_howto .section-inner .desc h2.sec-title.eng { padding: 0; margin: auto 0 20px; text-align: center; color: #FFF;}
#top_sec_howto .section-inner .view-more { 
	width: var(--view-more-size-m);
	padding: 0 0 16px;
	margin: 0 auto auto;
	font-family: var(--font-family-stix);
	font-size: 16px;
	font-weight: 500;
	font-style: italic;
	text-align: center;
	text-decoration: none;
	color: #FFF;
	display: block;
	position: relative;
}
#top_sec_howto .section-inner .view-more::after {
	content: '';
	width: var(--view-more-size-m);
	height: 9px;
	background-image: url("/img/usr/common/ico_to_next_white_m.png");
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: var(--view-more-size-m) auto;
	background-size: var(--view-more-size-m) auto;
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	transition: var(--transition);
}
#top_sec_howto .section-inner a:hover .view-more::after { right: -10px;}

@media screen and (max-width: 1000px) {
	#top_sec_howto { height: calc(124vw - 40px); padding: 0 var(--layout-base-padding); margin: 0 auto 170px;}
	#top_sec_howto .section-inner { height: calc(124vw - 40px);}
}

/* ----------------------------------
 NEWS
---------------------------------- */
#block_of_topic { margin: 0 auto 60px;}

/* ----------------------------------
 REVIEW 
 block.css, sb_block.cssに記述
---------------------------------- */

/* ----------------------------------
 INSTAGRAM
---------------------------------- */
#top_sec_visumo { padding: 110px 0 130px; text-align: center; background: var(--color-bg-dark); display: none; overflow: hidden;}
#top_sec_visumo:has(.ecbn-selection-widget) { display: block;} 
#top_sec_visumo h2.sec-title { padding: 0; margin: 0 0 15px; text-align: center;}
#top_sec_visumo .sec-title-catch { margin: 0 0 15px; font-family: var(--font-family-ship); font-size: 14px; font-weight: 400; text-align: center;}

#top_sec_visumo .ecbn-selection-widget { max-width: unset; margin: 0;}
#top_sec_visumo .ecbn-selection-wrapper .ecbn-selection-slide-wrapper { width: 100% !important;}
#top_sec_visumo .vsm-goods .ecbn-selection-widget-new div.ecbn-selection-wrapper,
#top_sec_visumo .vsm-slider .ecbn-selection-widget-new div.ecbn-selection-wrapper { margin: 0;}
#top_sec_visumo .ecbn-selection-slider-view .ecbn-selection-snap { margin: 0;}
#top_sec_visumo .ecbn-selection-slider-view .ecbn-selection-snap .ecbn-selection-item {
	width: calc((100vw - 20px * 6)/7);
  min-width: calc((100vw - 20px * 6)/7);
  height: calc((100vw - 20px * 6)/7);
  min-height: calc((100vw - 20px * 6)/7);
	padding: 0;
	margin: 0 20px 0 0;
	border: none;
}
#top_sec_visumo .ecbn-selection-slider-view .ecbn-selection-snap .ecbn-selection-item > div,
#top_sec_visumo .ecbn-selection-slider-view .ecbn-selection-snap .ecbn-selection-item > div > a {
  width: 100%;
  height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
  position: absolute;
  top: 0;
  left: 0;
}
#top_sec_visumo .ecbn-selection-slider-view .ecbn-selection-snap .ecbn-selection-item img {
	max-width: unset;
	max-height: unset;
	vertical-align: top;
}
#top_sec_visumo .ecbn-selection-slider-controls { display: none !important;}
#top_sec_visumo .view-more { margin: 50px 0 0; text-align: center; display: flex; justify-content: center;}
#top_sec_visumo .view-more a { min-width: var(--view-more-size-m); padding: 0 0 16px; font-size: 16px; display: block;}
#top_sec_visumo .view-more a::after { right: 0;}
#top_sec_visumo .view-more a:hover::after { right: -10px;}
#top_sec_visumo .ecbn-selection-footer2 { text-align: center;}

@media screen and (max-width: 1280px) {
	#top_sec_visumo .ecbn-selection-slider-view .ecbn-selection-snap .ecbn-selection-item {
		width: calc((100vw - 20px * 4)/5);
		min-width: calc((100vw - 20px * 4)/5);
		height: calc((100vw - 20px * 4)/5);
		min-height: calc((100vw - 20px * 4)/5);
	}
}
@media screen and (max-width: 1000px) {
	#top_sec_visumo { padding: 100px 0 120px;}
	#top_sec_visumo h2.sec-title { font-size: 18px;}
	#top_sec_visumo .sec-title-catch { font-size: 12px;}
	#top_sec_visumo .ecbn-selection-slider-view .ecbn-selection-snap .ecbn-selection-item {
		width: calc((100vw - 20px * 2)/3);
		min-width: calc((100vw - 20px * 2)/3);
		height: calc((100vw - 20px * 2)/3);
		min-height: calc((100vw - 20px * 2)/3);
	}
	#top_sec_visumo .view-more { margin: 30px 0 0;}
}
@media screen and (max-width: 750px) {
	#top_sec_visumo .ecbn-selection-wrapper .ecbn-selection-slide-wrapper .ecbn-selection-snap { margin: 0 0 0 20px;}
	#top_sec_visumo .ecbn-selection-slider-view .ecbn-selection-snap .ecbn-selection-item {
		width: calc((100vw - 20px)/2.5);
		min-width: calc((100vw - 20px)/2.5);
		height: calc((100vw - 20px)/2.5);
		min-height: calc((100vw - 20px)/2.5);
	}
}