@charset "utf-8";
* { margin: 0; padding: 0; line-height:1.7em; font-size: 15px;}
ul {list-style:none}
img {vertical-align: middle;}



html {
                                    background: #fff url("../images/bg.jpg") repeat top center fixed;
                                background-size: 450px;
	color: #666666;
	text-align: left;
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
                                font-weight: 400;
}
body {
	margin: 0 auto;
	padding: 0;
                                background-size: 100%;
}

a { word-break: break-all; }

a:link,
a:visited {
	text-decoration: underline;
	font-weight: bold;
	font-size: inherit;
	color:#ff5f77;
	}
a:hover {
	text-decoration: underline;
	font-weight: bold;
	font-size: inherit;
	color: #009fe8;
	}
a:active {
	text-decoration: none;
	font-weight: bold;
	font-size: inherit;
	text-decoration: none;
	color: #000;
	}


a.btn {
                                display: inline-block;
	background: #ba9fd5;
	color: #fff;
                                border-radius: 16px;
	text-decoration: none;
	line-height: 1.2;
                                font-size: 13px;
                                padding: 5px 15px;
                                margin: 0 auto;
                                text-align: center;
	border: 2px solid #ba9fd5;
}
a.rakuten_btn {
                                display: block;
                                font-size: 16px;
                                padding: 20px;
                                border-radius: 30px;
}
a:hover.btn {
	background: #fff;
	color: #ba9fd5;
	border: 2px solid #ba9fd5;
}

img {
	border:0;
	max-width: 100%;
}
p {
	margin: 1rem 0;
}
hr {
	clear: both;
	visibility: hidden;
}

h1,h2,h3,h4,h5 {
	margin-bottom: 5px;
                                line-height: 1.2;
                                text-align: center;
                                font-family: "Mochiy Pop One", sans-serif;
                                font-weight: 400;
}
h1 {
	margin: 0;
}
h2 {
                                color: #009fe8;
}
h3 {
                                color: #ffed2e;
                                text-align: center;
                                font-size: 5vw;
                                margin: 2rem auto 3rem;
                                position: relative;
                                padding: 0.8rem 0 1.2rem;
                                background: rgba(255,255,255,1);
                                box-shadow: 0 0 6px 1px #a58dbc, 0 0 6px 1px #a58dbc inset;
                               color:#a58dbc;/*文字色*/
                                border-radius: 50px;
}
h4 {
                                font-size: 5vw;
                                color: #87719c;
                                padding: 8px 0;
                                border-radius: 20px;
                                max-width: 400px;
                                margin: 3rem auto 2rem;
                               background: #ffff;/*背景色*/
                               box-shadow: 0 0 6px 1px #a58dbc, 0 0 6px 1px #a58dbc inset;/*ふわりとした影*/
}
h5 {
                                text-align: left;
                                padding: 0.5em;/*文字周りの余白*/
                                color: #ffff;/*文字色*/
                                background: #9eb2e4;
                                border-left: 5px solid #ffff;
}
h6 {
                                line-height: 1.2;
                                text-align: left;
                                font-weight: bold;
                                color: #87719c;
}

.large {
	font-size: 140%;
	line-height: 1;
}
.little {
	font-size: 80%;
	line-height: 1;
	font-weight: normal;
}

.b {
        font-weight: bold;
        
}
.purple {
                                color: #a58dbc;
}

.yellow {
        color: #f7c823;
        border-bottom: 3px solid #f7c823;
        padding: 0 0 2px;

}

.orchestra {
        color: #f199c6;
        border: 2px solid #f199c6; 
        border-radius: 10px;
                                background: #fff;
        width: auto;
        display: inline-block;
        line-height: 1.2;
        padding: 0.5rem 1rem;
        margin: -4px 0 12px;
}


.pink {
                                color: #e566a7;
                                font-size: 100%
}
.txt_right {
	text-align: right;
}
.txt_center {
	text-align: center;
}
.box {
                                padding: 2px;
	line-height: 1.2;
	display: block;
                                margin: 5px 0 0;
                                background-color: #ffff;
                                border-radius: 10px;
}

.pc {
	display: none;
}



main {
                                margin: 0 auto;
                                background-image: linear-gradient(180deg, rgba(129, 77, 150, 0.9), rgba(255, 255, 255, 0) 4%);
}



section {
	position: relative;
	margin: 0 auto;
	padding: 30px 15px 50px;
                                z-index: 10
}
.contents {
                                margin: 60px 0 0;
                                padding:  0 1rem 1rem;
	                            position: relative;
                                border-radius: 30px;
                                border: 3px solid #ffff;
                                box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

#dvd .contents{
                                background: rgba(255,244,191,0.9);
}
#cd .contents{  
                                background: rgba(230,238,255,0.9);}
#information .contents {
                                background: rgba(255,207,225,0.9);
}


header {
	margin: 0 auto;
	text-align: center;
	position: relative;
                                background: url("../images/header_bg_sp.jpg") no-repeat bottom center;
                                background-size: 100%;
                                border-bottom: 1px solid #ffff;
}
#header_contents {
	margin: 0 auto 0;
	padding: 0;
	position: relative;
                                z-index: 10;
                                max-width: 525px;
}
#header_photo {
                                width: 100%;
	margin: 0 auto 0;
	text-align: center;
	padding: 0;
	position: relative;
}

.header_marklogo img{
                                max-width: 70px;
                                position: absolute;
                                top: 15px; right:5%;
}


.header_contents {
	margin: 0 auto 0;
                                min-height: 250px;
                                padding-bottom: 20px;
}

.header_left{
                                margin: 0 auto;
}

.hatsubai {
                                margin: 0 auto 0.5em;
}
.hatsubai img {
                                margin: -30px auto 10px;
                                max-width: 180px;

}
header h2 {
                                margin: 0 auto;
                                padding: 0;
}
#attention_btn {
                                text-align: center;
}

#attention_btn a {
    text-align: center;
    background: #48afea;
    color: #ffff;
    padding: 7px 15px;
    border-radius: 18px;
    text-decoration: none;
    line-height: 1.2;
    font-size: 10px;
    border: 2px solid #fff;
}

#attention_btn a:hover {
	background: #f083ba;
	color: #fff;
}



/*----dvd------*/
#dvd h2, #information h2 {
                                max-width: 525px;
                                text-align: center;
                                margin: -45px auto 1rem;
}

#cd h2 {
                                width: 200px;
                                text-align: center;
                                margin: -55px auto 1rem;
}

.products {
	margin: 0 1% 1em 0;
	text-align: center;
                                width: 48%;
                                display: inline-block;
                                line-height: 1.2
}
.cd_products {
                                margin: 0 auto 1rem;
                                width: 100%;
                                max-width: 400px;
                                display:block;
}

.catch_txt {
                                margin: 1rem auto;
                                color: #3cb392;
                                text-align: justify;
                                font-feature-settings: "palt";
                                font-size: 100%;
                                max-width: 700px;
                                font-weight: normal;
}
.catch_txt span {
                                font-size: 100%;
}

#movie {
	text-align: center;
	margin: 2rem auto 3rem;
                                max-width: 600px;
}
.movie {
                                position: relative;
                                width: 100%;
                                padding-top: 56.25%;
                                margin: 1rem auto
}
.movie iframe {
                                position: absolute;
                                top: 0;
                                right: 0;
                                width: 100%;
                                height: 100%;
}




.cdlist {
	text-align: left;
                                margin: 1rem auto 0
}
.cdlist h3 {
                                font-size: 110%;
}
.cdlist ol {
	margin: 0 0 0 1.5rem;
	padding: 0;
}
.cdlist ul {
                                margin: 0;
}
.cdlist ul li {
	margin: 0 0 0.5em;
                                padding: 0;
	line-height: 1.2em;
}
.cdlist ul li.onpu {
                                padding: 0 0 0 17px;
	background: url("../images/list_onpu.png") no-repeat 0 4px;
                                background-size: 12px;
                                font-weight: bold;
}
.cdlist ul li.maru {
                                padding: 0 0 0 17px;
	background: url("../images/list_maru.png") no-repeat 0 4px;
                                background-size: 12px;
                                font-weight: bold;
}
.cdlist ul li br {
	line-height: 1.2em;
}

/*----cd------*/

.credit_contents{
                                background: #fefefe;
                                border-radius: 30px;
                                padding: 0.5rem 0;
                                margin: 1rem auto;
                                box-shadow: 0 0 6px 1px #a58dbc, 0 0 6px 1px #a58dbc inset;/*ふわりとした影*/

}
.credit {
                                font-size: 90%;
	margin: 2em;
}

        


/*///// Ordered Lists /////*/
.cdlist ol {
	margin: 0;
	padding: 0;
                                counter-reset: qumeru-counter;
                                list-style: none;
}

ol.later11 {
                                counter-reset: qumeru-counter 11;
                                list-style: none;
}
ol.later19 {
                                counter-reset: qumeru-counter 19;
                                list-style: none;
}
ol li {
                                list-style: none;
                                font-weight: bold;
	margin: 0 0 1rem;
}

ol li::before {
                                content: counter(qumeru-counter, decimal-leading-zero);
                                counter-increment: qumeru-counter 1;
                                width: 1.2em;
                                height: 1em;
                                line-height: 1;
                                font-size: 0.8em;
                                margin-right: .5rem;
                                background: #f199c6;
                                color: #fff;
                               border-radius: 30px;
                                padding: 6px;
                                font-family: "Mochiy Pop One", sans-serif;
                                font-weight: 400;
                                font-style: normal;
}

.info_contents {
                                margin: 0 auto 2rem;
}
ul.haishin {
                                margin: 2rem auto 0;
                                padding: 1rem 0 0;
                                border-top: 1px solid #fff
}
ul.haishin li {
                                margin: 0 auto 1rem;
                                padding: 0 0 1rem;
                                text-align: center;
                                border-bottom: 1px solid #fff
}
.eizo_tokuten {
                                text-align: center;
}
.eizo_tokuten img {
                                padding: 0.5rem 0;
}
#information dl {
                                margin: 0 auto 2rem;
}
#information dl, #information dt, #information dd {
                                text-align: left;
}
#information dt {
                                color: #666;
}
#information h3 {
                                margin: 2rem auto 1rem;
                                letter-spacing: 1px;
}
#information h4 {
                                border: none;
                                border-radius: 0;
                                border-bottom: 2px solid;
                                text-align: left;
                                margin: 0 0 1rem;
                                max-width: 100%;
                                background: none;
                                color: #7390da;
                                box-shadow: none;
}
#information dd {
                                margin: 0 0 2em;
                                padding: 0 0 2em;
}
#information dd:last-child {
                                border-bottom: 0;
                                padding: 0;
}

#goods {
                                margin: 0 auto 1rem;
}
#goods li {
                                margin: 0 auto 1rem;
                                display: flex; /* 横並び */
                                justify-content: space-between; /* アイテムを両端に配置 */
                                align-items: stretch;
                                flex-wrap: wrap;
}
.goods_contents {
                                display: contents;
                                margin: 0 auto;
}

#goods li h5 {
                                width:100%;
                                order: 1;
}
p.price {
                                order: 2;
                                width:100%;
                                font-size: 85%;
                                margin: 0.2rem 0 0.5rem;
}
#goods li h6 {
                                order: 3;
                                width:100%;
}
#goods li p.goods_shosai  {
                                order: 5;
                                width:100%;
}
#goods li figure {
                                order: 4;
                                margin: 0.5rem auto;
                                text-align: center;
                                width: 100%;
}
#goods li figcaption {
                                font-size: 85%;
                                font-weight: bold;
}
#goods li figure img {
                                margin: 0 auto;
                                max-height: 300px;
}

#attention {
                                color: #fff;
                                background: rgba(77,122,240,0.6);
	margin: 0 auto;
}
#attention div.inside h2 {
	font-size: 5vw;
	text-align: center;
                                color: #fff;
                                margin: 0 auto 1rem;
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
                                font-weight: bold;
                                border-bottom: 3px double;
                                padding: 0 0 0.2rem;
}
#attention div.inside {
                                max-width: 700px;
                                margin: 2rem auto;
}
#attention div.inside h2 {
	font-size: 19px;
	text-align: center;
}



div#SNS {
	text-align: center;
	line-height: 0;
	margin: 5px auto;
                                width: 205px;
}
#SNS ul li {
	width: 90px!important;
	margin: 0;
	float: left;
	text-align: left;
	line-height: 0;
	padding: 16px 0 0;
}
#SNS ul li.twitter {
	padding: 0 10px 0 0;
	margin: -5px 0 0 0;
}
iframe.twitter-share-button {
	padding: 20px 0 0;
	width: 90px!important;
}
footer {
	margin: 0 auto 0;
	padding: 25px 5px 100px;
	text-align: center;
	font-size: 90%;
	line-height: 1.3;
	clear: both;
                                position: relative;
                                background: rgba(255,255,255,0.7);
}
footer br, footer a br {
	line-height: 1.3;
}
footer a:link {
	line-height: 1.3;
	font-size: 90%;
}
footer a:hover {
	opacity: 0.7
}
footer a.banner {
        display: block;
        margin: 0 auto 0.5em;
}



/*リンクの形状*/
#page-top a{
                                font-size: 30px;
	display: flex;
	justify-content:center;
	align-items:center;
	background:#e47cb9;
	border-radius: 50%;
	line-height:1;
	width: 60px;
	height: 30px;
	padding: 30px 0 0;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	transition:all 0.3s;
	line-height: 0;
	display: block;
	opacity: 0.8;
}

#page-top a:hover{
	background: #ad9ac3;
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 20;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}

/*768px以上 ----------------------------------------*/

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

h2.title {
                                font-size: 34px;
}
h3 {
                                font-size: 24px;
                                max-width: 700px;
}
h4 {
                                font-size: 18px;
}

.chapter img {
                                max-width: 500px;
}

.goods_contents {
                                display: block;
                                order: 3;
                                width: 64%;
                                margin: 0;
}
#goods li figure {
                                margin: 0;
                                order: 5;
                                width: 35%;
}
ul.haishin li {
                                display: flex; /* 横並び */
                                justify-content: space-between; /* アイテムを両端に配置 */
                                align-items: center;
                                flex-wrap: wrap;
                                text-align: left;
}
.haishin_jacket {
                                width: 220px;
                                text-align: center;
}
.haishin_txt {
                                width: 360px;
}
.info_contents {
                                width: 600px;
                                margin: 0 auto 5rem;
}
.cd_tokuten {
                                display: flex; /* 横並び */
                                justify-content: space-between; /* アイテムを両端に配置 */
                                align-items: start;
                                flex-wrap: wrap;
                                text-align: left;
}
.cd_tokuten h4 {
                                width:100%;
                                order: 1;
}
.cd_tokuten_txt {
                                width: 63%;
                                order: 2;
}
.cd_tokuten img {
                                width: 35%;
                                order: 3;
}
}


/*990px以上 ----------------------------------------*/

@media screen and (min-width:990px){
.sp {
	display: none;
}
.pc {
	display: block;
}

h3 {
                                padding: 0.8rem 0 1.5rem;
                        }
                        
                        



main {
        margin: 0 auto;
        padding: 60px 0 0;
}






header {
                                height: 700px;
                                margin: 0 auto;
	                            padding: 0;
                                background: url("../images/header_bg.jpg") no-repeat top center;
                                background-size: 100%;
}
#header_contents {
	margin: 0 auto;
	padding: 0;
                                height: 700px;
                                text-align: left;
                                max-width: 1100px;
                                position: relative;

}

.header_contents {
                                margin: 0;
                                width: 540px;
                                text-align: center;
}

.header_left{
                                position: absolute;
                                left: -70px;
}


#header_photo {                     
                                padding: 0;           
                                width: 650px;
                                height: 700px;
                                float: right;
                                z-index: 30;
                                overflow: hidden;
}


#header_photo img {
                                margin: 0 auto;
                                right: 50px; top: 0; 
                                z-index: 20;
                                height: 760px;
}

header h1 {
	margin: 0 auto;
                                max-width: 660px;
                                width: auto;
                                position: absolute;
                                bottom: 0;
                                right: 0;
                                z-index: 40;

}
header h2 {
                                position: relative;
                                margin: 0 auto;
                                padding: 20px 0 0;
                                width: 600px;
                                z-index: 20;
}
.hatsubai img {
                                position: relative;
                                max-width: 350px;
                                z-index: 10;
                                margin: -60px auto 10px;
}





#attention_btn {
    margin: 25px 0;

}

#attention_btn a {
    text-align: center;
    background: #48afea;
    color: #ffff;
    padding: 8px 50px;
    border-radius: 18px;
    text-decoration: none;
    line-height: 2;
    font-size: 14px;
    border: 2px solid #fff;
}

.credit_contents{
                                padding: 2rem 0;

}



.contents {
                                width: 880px;
                                margin: 50px auto;
                                padding: 0 100px 50px;
                                border-radius: 80px;
                                border: 5px solid #ffff;
                                position: relative;


}

#dvd h2,#cd h2,#information h2 {

                                margin: 0 auto;
                                position: absolute;
                                right: 0;
                                left: 0;
                                margin: 0 auto;
                                top: -80px;
}

#cd h2 {
                                width: 280px;
}

.products {
	margin: 0 9% 1em;
	text-align: center;
                                width: 31%;
                                display: inline-block;
}

.cdlist ul {
                                margin: 0 0 0 1.5rem;
}

.cdlist_L,.cdlist_R {
	margin: 0 5% 1em 0;
                                display: inline-block;
                                vertical-align: top;
}
.cdlist_L {
                                width: 50%;
}
.cdlist_R {
                                width: 40%;
}
.cdlist_R {
	margin: 0 0 1em 0;
}
.cd_products {
                                display: block;
	margin: 0 auto 1rem;
}


.chapter img {
                                max-width: 100%;
}

#information h3 {
                                padding: 1rem 0;
}

.info_contents {
                                width: 700px;
                                margin: 0 auto 5rem;
}
.haishin_txt {
                                width: 460px;
}
#information dl {
                                width: 700px;
                                margin: 0 auto 5rem;
}

#scene ul li img{
	width: auto;
}

footer {
                                margin: 0 auto;
	padding: 50px 0 100px;
}
footer a.banner {
        display: inline-block;
        margin: 0 auto;
}


#page-top {
	right: 20px;
	bottom:20px;
}
}
/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
                                    background: #fff url("../images/bg.jpg") repeat top center;
                                background-size: 450px;
                                text-align:center;
                                margin: 0 auto;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
                                padding: 0;
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width: 550px;
}

/* fadeUpをするアイコンの動き */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


.list-mv {
	transition: .8s;
}

.list-mv {
	opacity: 0;
	transform: translate(0,30px); 
	-webkit-transform: translate(0,30px); 
}
.mv {
	opacity: 1;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}