@charset "UTF-8";
* {
    box-sizing: border-box;
}
a:hover {
filter: alpha(opacity=50);
opacity: 0.5;
    transition:  0.5s;
}
a {
    text-decoration: none;
}

#wrap {
width: 100%;
}
section {
width: 100%;
margin: 1em auto 2em;
}

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


@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

/************************************
デザインA（PC）
**********************/
body {
font-size: clamp(14px, 1.40625vw, 18px);
line-height: 1.8em;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 700;
    color: #000;
background: #fff;
    }
.sp {
    display: none !important;
}
.pc {
    display: block !important;
}
main, section {
    width: 100%;
}
#wrap {
	background: url("../img/wrap_bg.jpg");
	background-size: 100% auto;
	background-position: center center;
}

/* デザインC（スマホ） *************/
@media screen and (max-width : 768px) {
/* スマホ用レイアウト に収めるデザインはこの中に記述 */
    body {

    }

.sp {
    display: block !important;
}

.pc {
    display: none !important;
}

}
/* ------------------------------------
	PC Header
------------------------------------ */
header {
    width: 100%;
}
header #mv {
    background: url("../img/pc_mv.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
padding-top: 50%;
}
header #releaseWrap {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
background: url("../img/pc_release_bg.jpg");
	background-size: contain;
	background-position: center top;
	padding: 1em 0;
}
header #releaseWrap #release {
	width: 90%;
	max-width: 1200px;
	margin: 0.35em auto;
}

/* ------------------------------------
	SP Header
------------------------------------ */
/* デザインC（スマホ） *************/
@media screen and (max-width : 768px) {
    header #mv {
        background: url("../img/sp_mv.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
padding-top: 100%;
    }
	
	header #releaseWrap {
		display: none;
	}
}

/* -------------------------------------------------------------------------- */
/* SNS */
/* -------------------------------------------------------------------------- */
.snsWrap {
    width: 80%;
    max-width: 720px;
    margin:1.5em auto;
    display: flex;
    justify-content: center;
    align-items: center;
	background: rgba(255,255,255,0.25);
	border-radius: 100px;
	padding: 0.5em;
border: 4px solid rgba(51,153,204,0.6);
}
.snsInner {
    width: 86%;
		max-width: 540px;
    margin:auto;
    display: flex;
	justify-content: space-between;
}
.snsArea-A {
    width: 65%;
        height: 50px;
    display: flex;
 justify-content: space-between; /* 均等配置 */
  align-items: center;
/*	border: 1px solid #c00;*/
}
.snsArea-A figure {
    width: 50px;
    height: 50px;
    display: flex;
 justify-content: space-around;

}
.snsArea-A figure img {
    width: 100%;
    vertical-align: middle;

}
.snsArea-A img:hover {
    transform: rotateZ( 25deg ) ;
    filter: alpha(opacity=50);
opacity: 0.5;
    transition:  0.5s;
}

.snsArea-B {
    width: 30%;
    height: 50px;
    display: flex;
      justify-content: center;
  align-items: center;
    position: relative;
}
.snsArea-B div {
        height: 20px;
    margin: 0.5em;
}
/* デザインC（スマホ） *************/
@media screen and (max-width : 768px) {
.snsWrap {
    width: 100%;
    margin:auto;
		padding: 0.15em;
	border-radius: 0;
    display: inherit;
	border-top: 3px solid rgba(51,153,204,0.6);
	border-bottom: 3px solid rgba(51,153,204,0.6);
	border-left: none;
	border-right: none;
}
.snsInner {
    width: 80%;
max-width: 360px;
    margin:auto;
    display: block;
}
.snsArea-A {
    width: 100%;
        height: 50px;
    display: flex;
    margin-top: 0.25em;
    padding: 0.75em;
}
    .snsArea-B {
    width: 100%;
    height: 40px;
        margin-top: 0.5em;
    display: flex;
      justify-content: center;
  align-items: center;
    position: relative;
}
}
/* ------------------------------------
	コンテンツ
------------------------------------ */
.boxS {
    width: 90%;
    margin: auto;
    max-width: 960px;
}
.boxM {
    width: 100%;
    margin: auto;
    max-width: 1090px;
}
.boxL {
    width: 90%;
    margin: auto;
    max-width: 1152px;
}
.boxLL {
    width: 90%;
    margin: auto;
    max-width: 1200px;
}

/**イントロダクション**********************/
#introWrap {
  margin: 2em 0 0;
  position: relative;
  overflow: hidden;
}

/* 上装飾 */
#kazariA-top {
  background: url("../img/kazariA-top.png") no-repeat top left;
  background-size: 100% auto;
  height: 0;
  padding-top: 33.3%;
}

/* 下装飾 */
#kazariA-btm {
  background: url("../img/kazariA-btm.png") no-repeat bottom right;
  background-size: 100% auto;
  height: 0;
  padding-bottom: 33.3%;
}

/* コンテンツ */
#introArea {
  position: relative; /* ← absoluteやめる */
  width: 90%;
max-width: 900px;
  margin: -28% auto; /* ← 上下の装飾に少し重ねる */
  padding: 1.5em;
  background: rgba(255,255,255,0.7);
	border-radius:30px;
  z-index: 2;
	 box-shadow: 0px 0px 15px 0px rgba(255, 153, 153, 0.75);
}
#introHeadImg {
	width: 90%;
	max-width: 560px;
	margin: -4em auto 0;
}
h2#intro_h2 {
	width: 90%;
	max-width: 780px;
	margin: auto;
}
h3#intro_h3 {
	width: 100%;
	max-width: 720px;
	margin: 1em auto;
}
p.intro {
	text-align: center;
	font-size: clamp(14px, 1.875vw, 24px);
line-height: 1.5em;
	font-weight: 800;
	color: #669966;
}
p.intro .emphasis {
	color: #cc6600;
	background: linear-gradient(transparent 70%, #ffefa2 60%); /* 黄色の蛍光マーカー */
	font-weight: 800;
}
#intro_PH {
	background: url("../img/pc_introPH.png");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	padding-top: 13.1%;
	height: 0;
	width: 100%;
}


@media screen and (max-width : 768px) {
#introWrap {
/*	padding: 1em 0.75em;
	border: 3px solid #3399cc;
	border-radius: 15px;*/
}
#introHeadImg {
	margin: -3.5em auto 0;
}
p.intro {
	text-align: left;
	}
#intro_PH {
	background: url("../img/sp_introPH.png");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	padding-top: 42.1%;
	height: 0;
	width: 100%;
}
}

/*YouTube**********************/
.movieWrap {
    width: 100%;
    max-width: 720px;
    margin: 1.5em auto 1em;

}
/*.movieWrap img {
    vertical-align: bottom;
      margin-top:  -56.25%;
}*/
.movieWrap .youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.movieWrap .youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


/*出演**********************/
.appearanceWrap {
	width: 100%;
	margin-top:3em;
    text-align: center;
	  padding: 0.5em 0.5em 1em;
  background: rgba(255,255,255,0.7);
	border-radius:30px;
  z-index: 2;
	 box-shadow: 0px 0px 15px 0px rgba(153, 102, 204, 0.75);
    font-size: clamp(16px, 1.875vw, 24px);
	line-height: 1.25em;
    font-weight: 800;
	color: #9966cc;
}
.appearanceWrap h2#appearance {
	width: clamp(60px,9.375vw ,120px) ;
	height:clamp(60px,9.375vw ,120px) ;
	border-radius: 50%;
/*	margin: -80px auto auto;*/
	margin: -2.5em auto auto;
	background: #cc99cc;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: clamp(18px, 1.40625vw, 30px);
    font-weight: 800;
}
.appearanceWrap p {
	margin-top: 0.5em;
}
.appearanceWrap p span {
	display: inline-block;
}
.appearanceWrap p small {
	font-weight: 400;
	font-size: clamp(12px, 1.40625vw, 18px);
}

@media screen and (max-width : 768px) {
	.appearanceWrap h2#appearance {
	border-radius: 50%;
	margin: -2.5em auto auto;

}

}
/*商品情報**********************/
.productWrap {
	width: 100%;
	background: #fff;
	padding-bottom: 2em;
}
.productWrap h2#productHead {
	width: 70%;
	max-width: 640px;
	margin: auto;
	padding: 0.75em 0;
}
ul.productArea {
	width: 90%;
	margin: auto;
	font-size: 0;
	display: flex;
	justify-content: space-between
}
ul.productArea li {
display: inline-block;
vertical-align: top;
font-size: clamp(14px, 1.40625vw, 18px);
}
ul.productArea li.jktWrap {
	width: 46%;
	text-align: center;
	font-weight: 500;
}
ul.productArea li.listWrap {
	width: 52%;
}
.cartWrap {
	width: 100%;
	max-width: 480px;
	margin-top: 1em;
	padding: 0.5em 0;
}
.cartWrap h3 {
	font-weight: 900;
	font-size: clamp(18px, 2.8125vw, 36px);
}
#bdArea {
	border-top: 1px solid #3399cc;
}
#bdArea h3 {
	color: #3399cc;
}

#dvdArea {
	border-top: 1px solid #cc6600;
}
#dvdArea h3 {
	color: #cc6600;
}

.cartWrap big {
	font-weight: 900;
	font-size: clamp(18px, 1.875vw, 24px);
}
.cart {
	width: 87.5%;
	max-width: 420px;
	margin: 0.5em auto;
	border-radius: 100px;
	font-weight: 900;
	font-size: clamp(18px, 2.34375vw, 30px);
	line-height: 1.8em;
	display: flex;
	align-items: center;
	justify-content: center;
}
#bdCart {
	background: #3399cc;
	color: #fff;
}
#dvdCart {
	background: #cc6600;
	color: #fff;
}
#credit {
	width: 70%;
	max-width: 320px;
	margin: 1em auto;
}

#jktImg {
	background: url("../img/jktImg-01.jpg");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 141.25%; 
}
#originalPartWrap {
	width: 100%;
	margin: 1em auto;
}
#originalPartWrap h4 {
		font-size: clamp(18px, 2.34375vw, 30px);
	line-height: 1.25em;
	font-weight: 900;
	color: #66cc66;
	padding: 0.25em 0;
}
.originalPartPhWrap {
	width: 85%;
	max-width: 400px;
	margin: 0 auto 0.5em;
}
#originalPartPh01 {
		background: url("../img/originalPartPh01.jpg");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 56.25%;
}
#originalPartPh02 {
		background: url("../img/originalPartPh02.jpg");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 56.25%;
}



@media screen and (max-width : 768px) {
	ul.productArea  {
		display: block;
		max-width: 480px;
		
	}
ul.productArea li.jktWrap {
	width: 100%;
}
ul.productArea li.listWrap {
	width: 100%;

}
	.jktWrap figure {
		max-width: 320px;
		margin: auto;
	}
.cart {
	width: 100%;
	max-width: 320px;
	margin: 1em auto 0;
	padding: 0.5em 0;
}
}

/*収録曲**********************/
.musicList-1 {
	width: 96%;
	margin: 0 auto 0.8em;
	display: flex;
	font-size: clamp(16px, 1.875vw, 24px);
	align-items:center;
	
}
.musicList-1 img {
	vertical-align: bottom;
}
.no {
	width: clamp(26px, 3.125vw, 40px);
	height: clamp(26px, 3.125vw, 40px);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #FFF;
	font-weight: 900;
	font-size: clamp(16px, 1.875vw, 24px);
	margin-right: 0.25em;
/*	letter-spacing: -0.1em;*/
}
.color-1 {
	background: #66cc66;
}
.color-2 {
	background: #ff9933;
}
.color-3 {
	background: #3399cc;
}
.color-4 {
	background: #ff6666;
}
.kirinukiWrap {
	padding-top: clamp(40px, 6.25vw, 80px);
}
#kirinuki {
	width: 50%;
	max-width:260px; 
}
.title {
	display: block;
}
.title small {
	font-size: clamp(12px, 1.40625vw, 18px);
}
.kinoWrap {
	width: 13em;
	text-align: center;
	font-size: clamp(16px, 1.875vw, 24px);
	line-height: 1.7em;
	border: 3px solid #ff9933;
}
.kinoWrap span {
	color: #ff9933;
}
#box1 {
	position: relative;
}
#listPHWrap {
	width: 60%;
	height: 87%;
	position: absolute;
	top:0;
	left: 60%;
}


@media screen and (max-width : 768px) {
.musicList-1 {
	width: 100%;
	margin: 0 auto 0.8em;
	display: flex;
	font-size: clamp(16px, 1.875vw, 24px);
	align-items:center;
	
}
.no {
	width: 28px;
	height: 28px;
	font-size: 14px;
	margin-right: 0.25em;
}
	.title {
		line-height: 1.25em;
	}
.title span {
display: inline-block;
	
}
.kinoWrap {
margin:0 auto 1em;
}
	#sp_listPHWrap{
		width: 120%;
		margin:0 -10% 1%;
	}
}


/*特典映像**********************/
.tokuteneizoWrap {
	width: 90%;
	background: rgba(255,102,102,0.1);
	margin: 0 auto 1em;
	padding-top: 1.5em;
	padding-bottom: 1.5em;
	text-align: center;
}
.tokuteneizoWrap h3 {
	width: 70%;
	max-width: 400px;
	margin: auto;
}

ul.tokuteneizoArea {
	width: 96%;
	margin: auto;
	text-align: center;
	font-size: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
ul.tokuteneizoArea li {
	display: inline-block;
	width: 32%;
	margin: 1.3% 0.65%;
	border-bottom: 5px solid;
	font-size: clamp(16px, 1.875vw, 24px);
	font-weight: 700;
	line-height: 1.25em;
	padding-bottom: 0.5em;

}
#border-color01 {
	border-bottom-color: #ff66ff;
}
#border-color02 {
	border-bottom-color: #ffcc66;
}
#border-color03 {
	border-bottom-color: #66cc66;
}
#border-color04 {
	border-bottom-color: #ff6666;
}
#border-color05 {
	border-bottom-color: #cc99ff;
}
ul.tokuteneizoArea li .phWrap {
width: 100%;
	margin-bottom: 0.25em;
}


#tokuteneizoPh01 {
background: url("../img/tokuteneizoPh01.png");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	padding-top: 56.25%;
}
#tokuteneizoPh02 {
background: url("../img/tokuteneizoPh02.png");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	padding-top: 56.25%;
}
#tokuteneizoPh03 {
background: url("../img/tokuteneizoPh03.png");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	padding-top: 56.25%;
}
#tokuteneizoPh04 {
background: url("../img/tokuteneizoPh04.png");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	padding-top: 56.25%;
}
#tokuteneizoPh05 {
background: url("../img/tokuteneizoPh05.png");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	padding-top: 56.25%;
}


@media screen and (max-width : 768px) {
	ul.tokuteneizoArea  {
		width: 90%;
		max-width: 400px;
		margin: auto;
	}
	ul.tokuteneizoArea li{
		width: 100%;
		margin-bottom: 1em;
	}

}
/*生産数限定封入特典**********************/
.funyutokutenWrap {
	width: 100%;
	padding: 1.5em;
	text-align: center;
}
.border-color02-2{
	border:0.3em solid #ffcc66;
}
.border-color03-2 {
	border:0.3em solid #66cc66;
}
.funyutokutenWrap h3 {
	width: 80%;
	max-width: 480px;
	margin: auto;
}
.funyutokutenWrap h4 {
font-size: clamp(24px, 3.75vw, 48px);
	font-weight: 900;
	line-height: 1.0em;	
	margin-top: 0.25em;
}
.funyutokutenWrap h4 span{
	display: inline-block;
}
.funyutokutenWrap h4 small {
font-size: clamp(16px, 2.34375vw, 30px);
	font-weight: 400;	
}
.senchakutokuten-img {
	width: 100%;
	max-width: 720px;
	margin: 1em auto;
}
#senchakutokutenPh {
	background: url("../img/senchakutokuten-img.jpg");
	background-repeat: no-repeat;
	background-position: top left;
	background-size: cover;
	padding-top: 62.5%;
}
.note {
	font-size: clamp(11px, 1.09375vw, 14px);
line-height: 1.5em;
    font-weight: 400;
}
.note span {
	display: inline-block;	
}



#copyright {
	text-align: center;
    padding: 2em 0;
    font-size: clamp(11px, 1.09375vw, 14px);
line-height: 1.5em;
    font-weight: 500;
}
#copyright span {
	display: inline-block;
}
/*********************************************************************************************/
/* footer */
footer {
  padding: 2em 0;
/*    margin-top: 4em;*/
  background-color: rgba(255,255,255,1); 
    background-position: center bottom;
    background-size: 100% auto;
}
  footer p {
    width: min(80%, 420px);
    margin: auto;
    text-align: center;
    line-height: 1.6em;
  background-color: rgba(255,255,255,1); 
    border: #e60012 2px solid;
    border-radius: 10px; }
    footer p a {
      display: block;
      padding: .5em 0 .6em;
      text-decoration: none;
      font-weight: bold;
      color: #e60012; }
      footer p a:hover, footer p a:focus, footer p a:visited {
        color: #e60012; }