/*---------------------------------------------
  HEADER
---------------------------------------------*/

header.top_header {
	box-shadow: 0 3px 6px rgba(0,0,0,0);
}





/*---------------------------------------------
  MAIN
---------------------------------------------*/
a.btn-main {
	max-width: 180px;
	font-size: 12px;
	padding: 0;
}

#wrap {
	margin-top: 70px;
}

#main .movie {
	display: none;
	width: 100%;
	height: 100vh;
}

#main.action {
	/*position: sticky;*/
	height: auto;
	top: 0;
	z-index: 1;
}

.cover {
	display:none;
}

#main a.tubular-mute {
	width: 100%;
	height: 100vh;
}

#main #s_btn {
	position: absolute;
	width:50px;
	height:50px;
	bottom: 20px;
	right: 30px;
	z-index: 10;
}

#main .off_btn { 
	background:url(../images/off.png) no-repeat center center;
}

#main .on_btn { 
	background:url(../images/on.png) no-repeat center center;
}

#tubular-container iframe {
	pointer-events: none;
}

#tubular-control {
	display: none !important;
}

#main .yt-viewmore {
	display: block;
	width: 116px;
	height: 27px;
	position: absolute;
	bottom: 0;
	left: 30px;
	z-index: 20;
	color: #fff;
	font-size: 26px;
}

#main .yt-viewmore a {
	position: relative;
	color: #fff;
}

#main .yt-viewmore a:after {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-left: 8px;
	background: url(../images/top/icon/join-icon.svg);
	position: absolute;
	bottom: 5px;
}

.main-logo {
    position: absolute;
    display: block;
    top: 45%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 90%;
    max-width: 676px;
}

.main-logo img {
    width: 100%;
}

#main .movie-sp {
	position: relative;
	display: none;
}

#main .movie-sp .sns-area {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 30px;
}

.movie-sp .top-logo {
	width: 65px;
	margin: 0 auto 12px;
}

.movie-sp .top-logo img {
	width: 100%;
}

#main .movie-sp .sns-area .top-sns-icons {
	display: flex;
	justify-content: center;
}

.top-sns-icon {
	width: 20px;
	margin: 0 6px;
}

.top-sns-icon a {
	display: block;
	width: 100%;
	height: 100%;
}

.top-sns-icon a img {
	width: 100%;
}

@media screen and (max-width: 768px) {
	#wrap {
		margin-top: 70px;
	}

	#wrap .top-key-visual img {
		margin: 0;
		object-fit: contain;
        height: auto;
	}

	#tubular-container,
	#tubular-player {
		display: none;
		height: 700px!important;
	}

	#tubular-shield {
		top: -20px!important;
	}

	.bg-base .top-key-visual .top-bg {
		height: 100vh;
	}

	#main {
		/*padding-top: 50px;*/
		background-color: #000;
		position: sticky;
		height: auto;
		top: 0;
		z-index: 1;
	}
	
	#main .movie {
		display: block;
		height: auto;
	}
	
	#main .movie-pc {
		display: none;
	}
	
	#main .movie-sp {
		display: block;
	}
	
	#main #s_btn {
		display: none;
	}
	
	#main .yt-viewmore {
		width: 88px;
		height: 20px;
		bottom: 37px;
		font-size: 18px;
		left: 16px;
	}
	
	#main .yt-viewmore a:after {
		width: 15px;
		height: 15px;
		bottom: 4px;
	}
	
	.main-logo {
		max-width: 315px;
	}

	.movie-pc {
		display: none;
	}
}


/*---------------------------------------------
  TOP
---------------------------------------------*/
.container h2 {
	margin-top: 90px;
	margin-bottom: 48px;
}

a.btn-main {
	line-height: 34px;
}

@media screen and (max-width: 991px) {
	.container h2 {
		margin-top: 64px;
		font-size: 24px;
	}
}


/*---------------------------------------------
  TOP CONTENTS
---------------------------------------------*/

.top-main-contents .container {
	padding:10px 0 64px;
	max-width: 1300px;
}

.top-main-contents .more {
	text-align:center;
	margin-top:32px;
}

@media screen and (max-width: 1100px) {
	.top-main-contents .container {
		padding-right: 15px;
		padding-left: 15px;
	}
}

/*-----------------------------
  bnr (topics)
-----------------------------*/

.topics-area {
	max-width: 1300px;
	border-bottom: 2px solid #000;
	margin: 0 auto;
}

#topics {
	width:100%;
	max-width: 1100px;
	overflow:hidden;
	clear:both;
	margin: 120px auto 85px;
	position:relative;
	bottom:0;
}

.slick-dotted.slick-slider {
	margin-bottom:0!important;
}

#topics .bnr {
	width:100%;
	position:relative;
}

#topics .bnr a {
	display:block;
}

#topics .bnr .post-eyecatch {
	overflow: hidden;
	position: relative;
	width:320px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16);
	z-index:-1;
	padding-top: 66.67%;
        aspect-ratio: 4 / 3;
}

#topics .bnr .post-eyecatch img {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	object-fit: cover;
	object-position: top;
	max-width: none;
	max-height: none;
	min-width: 100%;
	min-height: 100%;
}

#topics .bnr .post-eyecatch::after {
	content:"";
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
	background-color: rgba(255, 255,255, 0);
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

#topics .bnr:hover .post-eyecatch::after {
	background-color: rgba(255, 255,255, .4);
}

#topics .bnr .post-title {
	width: 100%;
	padding:0px 10px;
	margin:0 !important;
	position:absolute;
	color:#fff;
	text-align:center;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index:999;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	display:none;

}

#topics .bnr:hover .post-title {
	display:block;
}

.slick-slide {
	margin: 0px 16px;
}


.slick-bar {
	display:flex;
	justify-content:center;
	margin-top:20px;
}

.slick-bar li {
	width: 15px;
	height: 15px;
	border-radius: 9999px;
	background-color: #D9D9D9;
	margin: 0 16px;
	cursor: pointer;
}

#topics .slick-slide {
    margin: 0 28px;
}

.slick-bar li.slick-active{
	background-color: #000;
}

.slick-bar li:last-child {
	margin-bottom: 0;
}

.slick-bar li button {
	display: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
	padding: 0;
	border: none;
	background-color: transparent;
}

@media screen and (max-width: 1100px) {
	#topics {
		max-width: 660px;
	}
}

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

	.topics-area {
		border: none;
	}

	#topics {
		margin-top: 32px;
		margin-bottom: 0;
	}

	#topics .bnr .post-eyecatch {
		width: 200px;
	}

	#topics .slick-slide {
		margin: 0 11px;
	}

	.slick-bar {
		padding: 0 15px 48px;
		border-bottom: 1px solid #000;
		margin: 32px 15px 0;
	}
}


/*-----------------------------
  bnr
-----------------------------*/

#bnr {
	overflow:hidden;
	clear:both;
	margin:0 auto 50px;
}

#bnr .bnr {
	width:100%;
	position:relative;
}

#bnr .bnr a {
display:block;
}


#bnr .bnr .post-eyecatch {
	overflow: hidden;
	position: relative;
	width:480px;
	padding-top: 75%;
	border-radius: 32px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16);
	z-index:-1;
}

#bnr .bnr .post-eyecatch img {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    object-fit: cover;
    object-position: top;
    max-width: none;
    max-height: none;
    min-width: 100%;
    min-height: 100%;
}

#bnr .bnr .post-eyecatch::after {
    content:"";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    background-color: rgba(255, 255,255, 0);
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

#bnr .bnr:hover .post-eyecatch::after {
    background-color: rgba(255, 255,255, .4);
}

#bnr .bnr .post-title {
    width: 100%;
	padding:0px 10px;
	margin:0 !important;
	position:absolute;
	color:#fff;
	text-align:center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	z-index:999;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	display:none;
	
}

#bnr .bnr:hover .post-title {
    display:block;
}



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

#bnr .bnr .post-eyecatch {
	width:240px;
	border-radius: 4px;
}

}


/*-----------------------------
  NEWS
-----------------------------*/
#news {
	padding-bottom: 54px;
	border-bottom: 2px solid #000;;
}

#news .btn-main {
	margin-top: 48px;
}

#news  h4.post-title {
	margin-bottom: 6px!important;
}

@media screen and (max-width: 991px) {
	#news {
		padding-bottom: 48px;
		border-bottom: 1px solid #000;;
	}

	#news .btn-main {
		margin-top: 32px;
	}

	#news .post-item.post-item-type_a1 .post-body .post-title {
		margin-bottom: 0px !important;
	}
}

/*-----------------------------
  DISCOGRAPHY
-----------------------------*/
#discography {
	margin-top: 12px;
	border-bottom: 2px solid #000;
}

.song-area {
	display: flex;
	gap: 24px;
	max-width: 800px;
	padding: 24px 16px 0;
	margin: 0 auto 64px;
}

.song-img {
	max-width: 400px;
}

#discography .col-6.col-md-3 {
	max-width: 1100px!important;
	margin: 0 auto 64px;
}

#discography .col-6.col-md-3 .disco-article a .p-3.d-md-flex {
	display: flex;
	align-items: center;
	gap: 24px;
}

#discography .col-6.col-md-3 .disco-article a .post-body {
	display: block;
	position: static;
	color: #000;
	transform: none;
}

#discography .col-6.col-md-3 .disco-article a {
	cursor: default;
}

#discography .col-6.col-md-3 .disco-article a.btn {
	cursor: pointer;
}

#discography .col-6.col-md-3 .disco-article.post-item-type_c3 a  .post-eyecatch {
	max-width: 400px;
}

#discography .col-6.col-md-3 .disco-article a .post-body h4.post-title {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 16px;
	text-align: center;
}

#discography .col-6.col-md-3 .disco-article.post-item-type_c3 .post-eyecatch::before {
	content: none;
}

.song-img img {
	width: 100%;
}

.song-detail {
	width: 400px;
}

.song-detail p {
	font-family: "Noto Sans JP", sans-serif;
	line-height: 1.1;
}

.song-introduce {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 8px;
	text-align: center;
}

.song-name {
	font-size: 36px;
	font-weight: bold;
	margin-bottom: 16px;
	text-align: center;
}

.song-date {
	font-size: 26px;
	margin-bottom: 32px;
	text-align: center;
}

#discography .iframe > div {
	max-width: 100%!important;
}

#discography .iframe .post-title {
	display: none;
}

#discography .iframe {
	max-width: 1067px;
	margin: 0 auto 96px;
}

#discography .iframe iframe {
	aspect-ratio: 1067/600;
	width: 100%;
	height: auto;
}

@media screen and (max-width: 991px) {
	#discography {
		border-bottom: 1px solid #000;
	}
}

@media screen and (max-width: 767px) {
	.song-area {
		display: block;
		padding: 0;
		margin: 0 auto 48px;
		max-width: 500px;
	}

	.song-img {
		padding-bottom: 16px;
	}

	.song-img,
	.song-detail {
		max-width: 400px;
		width: 100%;
		margin: 0 auto;
	}

	.song-name {
		font-size: 30px;
	}

	.song-date {
		font-size: 20px;
	}

	.song-introduce {
		font-size: 16px;
	}

	#discography .iframe {
		width: 100%;
		margin: 0 auto 40px;
	}

	#discography .col-6.col-md-3 .disco-article a .p-3.d-md-flex {
		display: block!important;
	}

	#discography .col-6.col-md-3 .disco-article a .post-body {
		display: block!important;
	}

	#discography .col-6.col-md-3 .disco-article.post-item-type_c3 a .post-eyecatch {
		max-width: 345px;
		margin: 0 auto 16px;
	}

	#discography .col-6.col-md-3 .disco-article a .post-body h4.post-title {
		font-size: 14px;
	}
}

/*-----------------------------
  PROFILE
-----------------------------*/
#profile {
	margin-bottom: 56px;
}

.profile-img {
	max-width: 1000px;
	margin: 0 auto 40px;
}

.profile-img img {
	width: 100%;
}

.profile-text {
	max-width: 750px;
	margin: 0 auto 48px;
	font-size: 16px;
	line-height: 25px;
}

@media screen and (max-width: 767px) {
	#profile {
		margin-bottom: 16px;
	}

	.profile-img {
		max-width: 100%;
		width: 100%;
		margin-bottom: 32px;
	}

	.profile-text {
		font-size: 12px;
		margin-bottom: 32px;
		line-height: 18px;
	}
}

/*-----------------------------
  FANCLUB
-----------------------------*/

#service {
	background-color: #000;
	padding: 65px 0;
	margin-bottom: 120px;
}

.service-inner {
	max-width: 1300px;
	padding: 0 15px;
	margin: 0 auto;
}

.service-logo {
	max-width: 160px;
	margin: 0 auto 48px;
}

#service h2.font-accent {
	font-size: 32px;
	margin-bottom: 48px;
	color: #fff;
	text-align: center;
}

#service h2.font-accent span,
#service h2.font-accent span span.aclonica {
	font-size: 54px;
}

#service h2.font-accent span.aclonica {
	font-size: 32px;
}

.service-middle {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 48px;
	max-width: 1200px;
	margin: 0 auto 48px;
}

.middle-img {
	max-width: 680px;
	border-radius: 8px;
}

.middle-img img {
	display: block;
	border-radius: 8px;
}

.service-middle p {
	color: #fff;
	font-weight: bold;
	font-size: 50px;
}

.service-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 48px;
	margin-bottom: 80px;
}

.service-btn .btn-simple {
	width: 100%;
	max-width: 250px;
}

.service-btn .btn-simple a {
    display: block;
    background-color: #fff;
    color: #000;
    height: 36px;
    font-size: 16px;
    font-weight: normal;
    line-height: 36px;
    border-radius: 9999px;
    transition: all .7s;
    text-align: center;
}

.service-btn .btn-simple a:hover {
	opacity: 0.7;
}

#service h3 {
	color: #fff;
	font-size: 40px;
	margin-bottom: 48px;
	font-family: 'Special Gothic Expanded One', sans-serif;
}

#service .swiper-slide a {
	transition: all .3s;
	border: 1px solid #fff;
}

#service a:hover {
	opacity: 0.7;
}

#service .content {
	max-width: 340px;
	width: 100%;
}

#service .content img {
	width: 100%;
	aspect-ratio: 3 / 2;
    object-fit: cover;
	border: 1px solid #fff;
}

#service .slick-bar li.slick-active {
	background-color: #333;
}

@media screen and (min-width: 768px) {
	.slider2 {
		display: flex;
		justify-content: center;
		gap: 16px;
		align-items: center;
	}
}

@media screen and (max-width: 1100px) {
	#service {
		margin-bottom: 80px;
	}

	.service-inner {
		padding: 0;
	}

	.service-logo,
	#service h2,
	.service-middle,
	.service-btn {
		padding-right: 15px;
		padding-left: 15px;
	}


	.service-logo {
		max-width: 100px;
		margin-bottom: 32px;
	}

	#service h2.font-accent {
		font-size: 17px;
		margin-bottom: 32px;
	}

	#service h2.font-accent span {
		font-size: 32px;
	}

	#service h2.font-accent span,
	#service h2.font-accent span span.aclonica {
		font-size: 32px;
	}

	#service h2.font-accent span.aclonica {
		font-size: 17px;
	}

	.service-middle {
		position: relative;
		display: block;
		margin-bottom: 32px;
	}

	.middle-img {
        width: 100%;
        max-width: 700px;
        margin: 0 auto;
	}

	.service-middle p {
		position: absolute;
		bottom: 10px;
		left: 50%;
		transform: translateX(-50%);
		font-size: 20px;
	}

	.service-btn {
		margin-bottom: 48px;
		gap: 32px;
	}

	.service-btn .btn-simple {
		max-width: 140px;
	}

	.service-btn .btn-simple a {
		height: 30px;
		line-height: 30px;
		font-size: 14px;
	}

	#service h3 {
		font-size: 25px;
		margin-bottom: 32px;
	}

	
	.service-contents .content {
		max-width: 260px;
		width: 260px;
	}
}

@media screen and (max-width: 840px) {
	.service-contents {
		padding: 0 15px;
		overflow-x: scroll;
		justify-content: flex-start;
	}
}

/***** plan *****/
#service.service_single .plan {
	width:100%;
	margin:0 auto 32px;
	border-radius: .25rem;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16);
	overflow: hidden;
}


#service.service_single .plan h3 {
	width:80%;
	max-width: 450px;
	margin:32px auto;
	padding: 0 16px;
}

#service.service_single .plan .description {
	padding:16px 16px 32px;
}

#service.service_single .plan .price {
	padding:16px;
	text-align:center;
}

#service.service_single .plan .registration a {
	padding:16px;
	border-top:solid 1px #DADCE0;
	text-align:center;
	display:block;
}

/*-----------------------------
  FANCLUB（複数プラン）
-----------------------------*/
#service.service_multiple .lead {
	font-size: 14px;
	margin-bottom: 64px;
}

/***** plan *****/

#service.service_multiple .plan {
margin-bottom: 0;
}

#service.service_multiple .plan ul {
	clear:both;
	text-align:center;
	padding: 10px 0;
}

#service.service_multiple .plan li {
	padding: 32px 0 0;
	box-sizing: border-box;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16);
	border-radius: 3px;
}

#service.service_multiple .plan li dl  {
	margin:0 16px 32px;
}

#service.service_multiple .plan li dt  {
	margin-bottom:16px;
	font-weight: normal;
}

#service.service_multiple .plan li dt .plan_name {
	font-size:20px;
}

#service.service_multiple .plan li dd {
	text-align:left;
}

#service.service_multiple .plan li .registrations a {
	padding:16px 0;
	border-top: solid 1px #E0E0E0;
	display:block;
}


@media screen and (min-width: 768px) {

#service.service_multiple .plan ul {
	clear:both;
}

#service.service_multiple .plan li {
	display:inline-block;
	margin: 0px 1.5%;
}

#service.service_multiple .plan.plan-2 li {
	width:40%;
}

#service.service_multiple .plan.plan-3 li {
	width:30%;
	float: left;
	display: block;
}
	
}


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

#service.service_multiple .plan li {
	margin-bottom:32px;
}

}

/*-----------------------------
  PROFILE
-----------------------------*/

.top-main-contents #profile dt {
margin: 0 auto 32px;
}

/*-----------------------------
  banner
-----------------------------*/

.top-main-contents #link_list ul {
/*text-align: center;*/
overflow: hidden;
clear: both;
}

.top-main-contents #link_list li {
width: 100%;
max-width: 300px;
margin: 0 1.5% 16px;
display: inline-block;
}

.top-main-contents #link_list li a:hover {
opacity: 0.7;
}


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

.top-main-contents #link_list li {
max-width: 100%;
margin: 0 auto 16px;
display: inline-block;
}

}


/*-----------------------------
  fadein
-----------------------------*/
.fadein {
	opacity: 0;
	visibility: hidden;
	transform: translateY(40px);
	transition: all 1s;
}
.fadein.is-show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0px);
}