@charset "UTF-8";
/* CSS Document */
html,body,a,p,ul,li,h1,h2,h3,h4,h5,h6,figure,dl,dt,dd{margin:0;padding:0;}
*{
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: rgba(0, 0, 0, 0);
    outline: none;
}
body{
    font-size: clamp(12px, 1.25vw, 16px);
    line-height: 1.8em;
    font-family: 'Noto Sans JP',  sans-serif;
    font-weight: 400;
    color: #000;
    background: #fff;
   background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    background-attachment: fixed;
}

#wrap, section {
    width: 100%;
    padding: 0;
    margin: 0;

}

a{
    text-decoration: none;
}
a:hover {
filter: alpha(opacity=70);
opacity: 0.7;
transition:  0.5s;
transform: scale(1.2); 
}

li{
    list-style-type: none;
}

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

header h1 {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    height: 0;
}

@media screen and (max-width: 768px){
    body{
        
}

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

#wrap {
    width: 100%;
}

/*************************
*ヘッダー
*************************/
header {
    width: 100%;
    position: relative;
/*	background: #006e56;*/
	    padding-top: 45%;
}

#topWrap {
    width: 100%;
    height: 100%;
    min-height: 100%;
    top:0;
    left: 0;
    position: absolute;
}
#mv {
    background: url("../img/pc_mv.jpg");
    padding-top: 45%;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    position: relative;
}


.fadeIn1s {
    animation-name: fadeIn1s;
    animation-delay: 0.5s;
	animation-duration: 0.8s;
    animation-fill-mode: forwards;
    transform: translateY(-20px);
    opacity: 0;
}
@keyframes fadeIn1s {
    0% {
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
.js-fade {
  opacity: 0;
}

@media screen and (max-width: 768px){
header {
	    padding-top: 143.75%;
}
#mv {
    background: url("../img/sp_mv.jpg");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
    padding-top: 143.75%;
}
}
/*************************
*コンテンツ
*************************/

.boxS {
	width: 90%;
	max-width: 1024px;
	margin: auto;
}
.boxM {
	width: 90%;
	max-width: 1154px;
	margin: auto;
}
.boxL {
	width: 90%;
	max-width: 1200px;
	margin: auto;
}

.ptpb-2 {
	padding: 2em 0;
}
.h2Wrap {
	width: 100%;
	text-align: center;
}
.h2Wrap img {
	width: 20%;
	vertical-align: bottom;
}
.h2Wrap h2 {
font-family:"Arial Black", "Arial Bold", sans-serif;
font-weight: 700;
font-size: clamp(24px, 4.6875vw ,60px);
	line-height: 1.2em;
}
.h2Wrap h2.black {
color:#fff;
 -webkit-text-stroke: 5px #000;
  paint-order: stroke fill;  
}
.h2Wrap h2.white {
color:rgba(0,0,0,0);
 -webkit-text-stroke: 2px #fff;
  paint-order: stroke fill;  
}

.note01 {
	font-size: clamp(12px, 1.40625vw ,18px);
	line-height: 1.5em;
}
.note01 span {
	display: inline-block;
}
.note02 {
	width: 96%;
	font-size: clamp(11px, 1.09375vw , 14px);
	border-top:1px solid #cb408b;
	padding: 0.5em;
	color: #cb408b;
	text-align: left;
	line-height: 1.25em;
	margin: auto;
}
.note03 {
	width: 100%;
	border:1px solid #fff;
	padding: 1.5em 2.5em;
	color: #fff;
	text-align: left;
	line-height: 1.5em;
	margin: auto;
}
.note03 em{
	font-style: normal;
	color: #fdd001;
}
.note04 {
	font-size: clamp(11px, 1.09375vw , 14px);
	line-height: 1.25em;
	color: #666;
}
@media screen and (max-width: 768px){
.h2Wrap img {
	width: 60%;
	vertical-align: bottom;
}
.h2Wrap h2 {
font-family:"Arial Black", "Arial Bold", sans-serif;
font-weight: 900;
font-size: clamp(24px, 4.6875vw ,60px);
line-height: 1.2em;
}
.h2Wrap h2.black {
color:#fff;
 -webkit-text-stroke: 3px #000;
  paint-order: stroke fill;  
}
.h2Wrap h2.white {
color:rgba(0,0,0,0);
 -webkit-text-stroke: 1px #fff;
  paint-order: stroke fill;  
}
}

/*ニュース一覧*/
#newsListWrap {
	width: 100%;
	background: #fff;
}
#newsListArea {
	margin: 1em 0;
	border-top: 1px solid #000;
	max-height: 300px;
	overflow-y:auto;
}
#newsListArea .newsTitWrap {
	padding: 1em 2em;
	border-bottom: 1px solid #000;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 700;
}
#newsListArea .newsTitWrap:hover {
	background: rgba(0,0,0,0.075);
	transition:  0.5s;
}
#newsListArea .newsTitWrap .date {
	width: 8em;
}
#newsListArea .newsTitWrap h2.tit {
	width: 82%;
	font-size: clamp(12px, 1.25vw, 16px);
    line-height: 1.25em;
	font-family: 'Noto Sans JP',  sans-serif;
}
#newsListArea .newsTitWrap .arrow {
	width: 1em;
}

@media screen and (max-width: 768px){
#newsListArea .newsTitWrap {
	padding: 1em;
	border-bottom: 1px solid #000;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 700;
}
}

/*リリース情報*/
#releaseWrap {
	background-color: #cb408b;
	background-image: url("../img/release_bg.png");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: auto 100%;
}
#TitleWrap {
	text-align: center;
}
#TitleWrap h2#date {
	color: #fdd001;
	font-size: clamp(16px, 2.8125vw, 36px);
	font-weight: 300;
	line-height: 1.25em;
	margin-top: 0.25em;
}
#TitleWrap h2#date big {
	font-size: clamp(20px, 2.8125vw, 48px);
	font-weight: 900;
}
#TitleWrap h2#title {
	font-size: clamp(30px, 5.625vw, 72px);
	font-weight: 300;
	line-height: 1.0em;
} 
#TitleWrap h2#title big {
	font-size: clamp(30px, 5.625vw, 72px);
	font-weight: 900;
}
.itemWrap {
	width: 100%;
	margin: 2em auto 4em;
	text-align: center;
}
h3.spHead {
	color: #fff;
	font-size: clamp(16px, 2.8125vw, 36px);
	font-weight: 800;
	line-height: 1.5em;
}
h3.spHead span {
	display: inline-block;
}
.sp-goods-img {
	width: 70%;
	max-width: 540px;
	margin: 1em auto;

}
#sp-goods-img01 {
	background: url("../img/sp-goods-img01.jpg");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 133%;
}
.itemWrap p.spec span{
	display: inline-block;
}
.tokutenWrap {
	width: 100%;
	border-top:1px solid #000;
	margin: 1em auto 2em;
}
.tokutenWrap .kakomi {
	width: 70%;
	max-width: 240px;
	margin: 0 auto 1em;
	background: #000;
	color: #fff;
	font-weight: 700;
}
.tokutenWrap em {
	font-style: normal;
	color: #fdd001;
}
.tokutenWrap span {
	display: inline-block;
}
.cartWrap {
	width: 70%;
	max-width: 420px;
	margin: 1em auto;
	background: #fdd001;
	border:4px solid #000;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: clamp(16px, 1.875vw, 24px);
	font-weight: 800;
	line-height: 2.5em;
}
#period {
	color: #fdd001;
	font-size: clamp(16px, 2.34375vw, 30px);
	font-weight: 800;
	line-height: 2.5em;
}
#period big {
	font-size: clamp(18px, 2.8125vw, 36px);
}
/*PCアイテム*/
.item_pcWrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.item_pcArea {
	width: 32%;

} 
h3.pcItemHead {
	font-size: clamp(16px, 1.875vw, 24px);
	font-weight: 800;
	color: #fff;
}
h3.pcItemHead small {
	font-size: clamp(14px, 1.5625vw, 20px);
}
.item_pcArea .spec {
	height: 5em;
}

.pcjktWrap {
	width: 100%;
	margin: 1em auto;
}
#pcjkt01 {
	background: url("../img/pc_jkt01.jpg");
	background-position: top left;
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 100%;
}
#pcjkt02 {
	background: url("../img/pc_jkt02.jpg");
	background-position: top left;
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 100%;
}
#pcjkt03 {
	background: url("../img/pc_jkt03.jpg");
	background-position: top left;
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 98.75%;
}


@media screen and (max-width: 768px){
.item_pcArea {
	width: 98.7%;
	max-width: 420px;
	margin: 0 auto 1em;
	}
.item_pcArea .spec {
	height: auto;
}
}

/*収録内容*/
.trackListWrap {
	width: 100%;
	background: #fff;
	padding: 1.25em;
}
.trackListHead {
	width: 100%;
	background: #000;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: clamp(16px, 1.875vw, 24px);
	line-height: 1.8em;
	font-weight: 700;
}
.trackListArea {
	width: 100%;
	margin: 1em auto;
}
.trackListArea .head01 {
	font-size: clamp(16px, 1.875vw, 24px);
	line-height: 1.8em;
	font-weight: 800;
	border-bottom: 1px dashed #000;
	text-align: center;
}
.trackListArea .head01 small, .trackListWrap .bdTit small {
		font-size: clamp(14px, 1.5625vw, 20px);
}
.tracklist-S {
	width: 96%;
	max-width: 460px;
	justify-content: space-between;
	margin: 1em auto 2em;
	display: flex;
}
.tracklist-L {
	width: 96%;
	max-width:720px;
	justify-content: space-between;
	margin: 1em auto 2em;
	display: flex;
}
.trackListWrap .bdTit {
	font-size: clamp(16px, 1.875vw, 24px);
	line-height: 1.1em;
	font-weight: 800;
	text-align: center;
	margin-top: 0.5em;
}
@media screen and (max-width: 768px){
	.tracklist-S, .tracklist-L {
		max-width: 420px;
			display: inherit;
text-align: center;
	}
}

/*ショップ別予約購入先着特典*/
.shopTokutenWrap {
	margin: 4em auto 1em;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	text-align: center;
}
.shoptokutenHead {
	width: 85%;
	max-width: 640px;
	margin: 0 auto 0.5em;
		font-size: clamp(16px, 2.34375vw, 30px);
	font-weight: 800;
	background: #000;
	color: #fff;
	line-height: 2em;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 100px;
}
.shopTokutenWrap .box100 {
	width: 100%;
	background: #fff;
	padding: 1.25em;
	margin-bottom: 2%;
		padding-bottom: 5em;
	position: relative;
}
.shopTokutenWrap .box50 {
	width: 49%;
	background: #fff;
	padding: 1.25em;
	margin-bottom: 1em;
		padding-bottom: 5em;
	position: relative;
}

.shopName {
	border-bottom: 1px dashed #000;
	font-size: clamp(16px, 1.875vw, 24px);
	line-height: 1.25em;
	font-weight: 800;
	padding: 0.25em 0;
	height: 3em;
}
ul.shopTokutenInner {
	width:94%;
	margin: 1em auto 0;
	display: flex;
	justify-content: space-between;
}
ul.shopTokutenInner li {
	width: 48%;

}
.shopTokutenWrap .goodsName {
		font-size: clamp(12px, 1.40625vw ,18px);
	line-height: 1.8em;
	font-weight: 800;
}
.shopTokutenWrap .goodsName small {
	font-size: clamp(11px, 1.09375vw ,14px);
	font-weight: 400;
}
shopTokutenWrap .goodsName span {
	display: inline-block;
}
.goodsImg {
	width: 100%;
	margin: 1em auto 0;
}
#goods_pcsc_img01 {
	background: url("../img/goods_pcsc_img01.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: cover;
	padding-top: 75%;
}
#goods_pcsc_img02 {
	background: url("../img/goods_pcsc_img02.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: cover;
	padding-top: 62.5%;
}
#goods_tower_img01 {
	background: url("../img/goods_tower_img01.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: cover;
	padding-top: 75%;
}
#goods_hmv_img01 {
	background: url("../img/goods_hmv_img01.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: cover;
	padding-top: 75%;
}
#goods_amazon_img01 {
	background: url("../img/goods_amaon_img01.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: cover;
	padding-top: 75%;
}
#goods_rakuten_img01 {
	background: url("../img/goods_rakuten_img01.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: cover;
	padding-top: 75%;
}
#goods_seven_img01 {
	background: url("../img/goods_seven_img01.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: cover;
	padding-top: 75%;
}
#goods_others_img01 {
	background: url("../img/goods_others_img01.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: cover;
	padding-top: 75%;
}
.shop_btn {
	background: #cb408b;
	color: #000;
	font-size: clamp(12px, 1.40625vw ,18px);
	margin: 1em auto 0;
	font-weight: 800;
	width: 240px;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 2.5em;
	border:3px solid #000;
	position: absolute;
	bottom:1em;
	left: 50%;
	transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	
}

.cmp_outline {
	font-size: clamp(12px, 1.5625vw, 20px);
	font-weight: 800;
	line-height: 1.5em;
	text-align: center;
	color: #fdd001;
	width: 100%;
	margin-bottom: 1em;
}

.cmpName {
	width: 100%;
	background: #000;
	color: #fff;
		font-size: clamp(16px, 1.875vw, 24px);
	line-height: 1.25em;
	font-weight: 800;
	padding: 0.25em 0;
}
.cmpDate {
	width: 100%;
	font-size: clamp(14px, 1.5625vw, 20px);
	max-width: 340px;
	margin:1em auto 0;
}

@media screen and (max-width: 768px){
	
	.shopTokutenWrap .box100, .shopTokutenWrap .box50 {
		width: 100%;
		max-width: 420px;
			display: block;
text-align: center;
		margin: 1em auto;
	}
	ul.shopTokutenInner {
		display: block;
	}
	ul.shopTokutenInner li {
	width: 100%;
		margin-bottom: 2em;
	
}
	.shop_btn {
		width: 70%;
		max-width: 280px;
		margin: auto;
	}
}

/*MusicVideo*/
#musicVideoWrap {
	background: #000;
	color: #fff;
}
.movieWrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 1.5em auto;
}
.movieArea {
	width: 49%;
	margin-bottom: 1.5em;
}
.movieArea h2.musicTitle {
	text-align: center;
	font-size: clamp(12px, 1.40625vw, 18px);
	line-height: 1.8em;
	font-weight: 800;
}


.movieArea .youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.movieArea .youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 768px){
	.movieArea {
	width: 100%;
		max-width: 420px;
		margin-left: auto;
margin-right: auto;
		padding-bottom: 1em;
		border-bottom:1px dotted #666;
}
}

/*プロフィール*/
#profileWrap {
	background: #fdd001;
	padding-bottom: 3em;
}
#profArea {
	background: #fff;
	padding: 3em 0;
}
#profPhWrap {
	width: 90%;
	max-width: 1024px;
	margin: auto;

}
#profPh {
	background: url("../img/profPh.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: cover;
	padding-top: 42.9%;
}
.profTxt {
	width: 90%;
	max-width: 840px;
	margin:2em auto 0;
	
}
.profTxt p {
	margin-bottom: 1.8em;
}
@media screen and (max-width: 768px){
#profArea {
	background: #fff;
	padding: 1.5em 0;
}
}
/*************************
*フッター
*************************/
footer {
	width: 100%;
	margin: auto;
	padding: 2.5em 0;
text-align: center;
    font-size: clamp(11px, 0.9722vw, 14px);
    line-height: 1.8em;
    font-weight: 400;
	background: #fff;
	color: #000;}


/*************************
*ローディング
*************************/
#loading {
  /* 画面一杯にローディング画面を広げる */
  height: 100%;
  width: 100%;
 background: #cb408b;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 99999;
  /* flexboxを使ってローディングアイコンを画面の中央に寄せる */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.fixed {
  position: fixed;
  top: 0;
  width: 100%;
}