/* CSS Document */

/*------ CSS リセット ここから ------*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0; padding: 0; border: 0; font-style:normal; font-weight: normal; font-size: 100%;}
 article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section { display: block; }
 html{ overflow-y: scroll; }
 blockquote, q { quotes: none; }
 blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none; }
input, textarea,{ margin: 0; font-size:32px; }
ol, ul{ list-style:none; }
table{ border-collapse: collapse; border-spacing:0; }
caption, th{ text-align: left; }
a:focus { outline:none; }
.clearfix:after { content: ".";  display: block; clear: both;height: 0; visibility: hidden; }
.clearfix { min-height: 1px; }
* html .clearfix { height: 1px; /*¥*//*/ height: auto; overflow: hidden; /**/ }
.both{ clear:both; }
.inline_block { display: inline-block; }
/*------ CSS リセット ここまで ------*/

/*------ レスポンシブ設定 ここから ------*/
/*画像比率0.563*/
/* iPHone4,iPhone5,iPhone5sのみ */
@media screen and (max-width: 374px) {
	body { width:100%; margin:0 auto;}
	div.Header { height:100px; margin:0 auto; padding:7px 10px; }
	li.TopMenu { width:300px; height:50px; padding:8px 10px; }
	h1.page_title { display:none;}
	h2.catch_copy {clear:both; text-align:center; font-size:11px;}
	div.TopPhoto {text-align:center; }
	img.TopPhoto { width:100%; height:auto; }
	img.PageTitle { width:100%; height:auto; }
	img.TopPhotoLink {height:20px; width:auto;}
	div.Contents {text-align:center; }
	div.CD { margin:20px 0; }
	p.SubTitle { font-size:100%; line-height:1.5em; }
	p.Title { font-size:77%; font-weight:bold; line-height:1.5em; }
	p.OutLine { font-size:75%; line-height:1.5em; margin-bottom:20px;}
	div.Jacket { width:100%; text-align:center;}
	img.Jacket { width:90%; height:auto; }
	div.Story { width:90%; margin:10px auto; text-align:left; font-size:90%;}
	p.remarksTitle {font-size:160%; }
	p.Sales { margin:20px 0; font-size:100%; line-height:1.5em;}
	div.banner { width:300px; margin:20px auto;}
	ul.banner { display:block; }
	li.banner { display:block; width:280px; padding:10px; text-align:center; margin-bottom:10px; background: #FFF3FF; font-size:75%;}
	div.Footer {text-align:center; padding:5px; font-size:65%; }
	.sma_none {display:none;}
}

/* iPhone6のみ */
@media screen and (min-width: 375px) and (max-width: 413px) {
	body { width:100%; margin:0 auto;}
	div.Header { height:100px; margin:0 auto; padding:7px 10px; }
	li.TopMenu { width:300px; height:50px; padding:8px 10px; }
	h1.page_title { display:none;}
	h2.catch_copy {clear:both; text-align:center; font-size:12px;}
	div.TopPhoto {text-align:center; }
	img.TopPhoto { width:100%; height:auto; }
	img.PageTitle { width:100%; height:auto; }
	img.TopPhotoLink {height:24px; width:auto;}
	div.Contents {text-align:center; }
	div.CD { margin:20px 0; }
	p.SubTitle { font-size:100%; line-height:1.5em; }
	p.Title { font-size:90%; font-weight:bold; line-height:1.5em; }
	p.OutLine { font-size:80%; line-height:1.5em; margin-bottom:20px;}
	div.Jacket { width:100%; text-align:center; }
	img.Jacket { width:90%; height:auto; }
	div.Story { width:90%; margin:10px auto; text-align:left; font-size:95%;}
	p.remarksTitle {font-size:180%; }
	p.Sales { margin:20px 0; font-size:100%; line-height:1.5em;}
	div.banner { width:350px; margin:20px auto;}
	ul.banner { display:block; }
	li.banner { display:block; width:330px; padding:10px; text-align:center; margin-bottom:10px; background: #FFF3FF; font-size:90%;}
	div.Footer {text-align:center; padding:5px; font-size:70%; }
	.sma_none {display:none;}
}
 
/* iPhone6 Plus ~ ちょっと大きいスマホまで */
@media screen and (min-width: 414px) and (max-width: 500px) {
	body { width:100%; margin:0 auto;}
	div.Header { height:100px; margin:0 auto; padding:7px 10px; }
	li.TopMenu { width:300px; height:50px; padding:8px 10px; }
	h1.page_title { display:none;}
	h2.catch_copy {clear:both; text-align:center; font-size:14px;}
	div.TopPhoto {text-align:center; }
	img.TopPhoto { width:100%; height:auto; }
	img.PageTitle { width:100%; height:auto; }
	img.TopPhotoLink {height:26px; width:auto;}
	div.Contents {text-align:center; }
	div.CD { margin:20px 0; }
	p.SubTitle { font-size:100%; line-height:1.5em; }
	p.Title { font-size:95%; font-weight:bold; line-height:1.5em; }
	p.OutLine { font-size:85%; line-height:1.5em; margin-bottom:20px;}
	div.Jacket { width:100%; text-align:center;}
	img.Jacket { width:90%; height:auto; }
	div.Story { width:90%; margin:10px auto; text-align:left; font-size:100%;}
	p.remarksTitle {font-size:180%; }
	p.Sales { margin:20px 0; font-size:100%; line-height:1.5em;}
	div.banner { width:400px; margin:20px auto;}
	ul.banner { display:block; }
	li.banner { display:block; width:380px; padding:10px; text-align:center; margin-bottom:10px; background: #FFF3FF;}
	div.Footer {text-align:center; padding:5px; font-size:70%; }
	.sma_none {display:none;}
}

/* タブレット〜PC */
@media screen and (min-width: 501px) and (max-width: 999px) {
	body { width:500px; margin:0 auto; }
	div.Header { height:100px; margin:0 auto; padding:7px 10px; }
	li.TopMenu { float:left; width:150px; height:50px; padding:8px 5px; }
	h1.page_title { position: absolute; right: 0px; top: 30px; width:70%;}
	h2.catch_copy {clear:both; text-align:center; font-size:17px;}
	div.TopPhoto { text-align:center; }
	img.TopPhoto { width:100%; height:auto; }
	img.PageTitle { display:none;}
	img.TopPhotoLink {height:28px; width:auto;}
	div.Contents { text-align:center; }
	div.CD { margin:20px 0; }
	p.SubTitle { font-size:100%; line-height:1.5em; }
	p.Title { font-size:115%; font-weight:bold; line-height:1.5em; }
	p.OutLine { font-size:100%; line-height:1.5em; margin-bottom:20px;}
	div.Jacket { width:90%; margin:0 auto; text-align:center; }
	img.Jacket { width:340px; height:auto; }
	div.Story { width:450px; margin:0 auto; text-align:left; font-size:100%; }
	p.remarksTitle {font-size:200%; }
	p.Sales { margin:20px 0; font-size:100%; line-height:1.5em;}
	div.banner { width:450px; margin:20px auto;}
	ul.banner { display:block; }
	li.banner { display:block; width:430px; padding:10px 20px; margin-bottom:10px; background:#FFF3FF; text-align:center;}
	div.Footer { text-align:center; padding:5px; font-size:80%; }
	.sma_none {display:none;}
}

/* PC */
@media screen and (min-width: 1000px) {
	body {width:1000px; margin:0 auto; }
	div.Header { height:100px; margin:0 auto; padding:7px 10px; }
	li.TopMenu { float:left; width:150px; height:50px; padding:8px 10px; }
	h1.page_title { position: absolute; right: 0px; top: 15px; width:60%;}
	h2.catch_copy {clear:both; text-align:center; font-size:28px;}
	div.TopPhoto {  width:937px; text-align:center; }
	img.TopPhoto { width:100%; height:auto; }
	img.PageTitle { display:none;}
	img.TopPhotoLink {height:30px; width:auto;}
	div.Contents { text-align:center;}
	div.CD { margin:20px 0; }
	p.SubTitle { font-size:100%; line-height:1.5em; }
	p.Title { font-size:120%; font-weight:bold; line-height:1.5em; }
	p.OutLine { font-size:100%; line-height:1.5em; margin-bottom:20px;}
	div.Jacket { float:left; width:400px; text-align:right; }
	img.Jacket { width:340px; height:auto; }
	div.Story { float:left; width:500px; padding:0 30px; text-align:left; font-size:100%;}
	p.remarksTitle {font-size:200%; }
	p.Sales { margin:20px 0; font-size:100%; line-height:1.5em;}
	div.banner { width:900px; margin:20px auto; }
	ul.banner { display:block; }
	li.banner { display:block; float:left; background:#FFF3FF; margin:0 5px; width:420px; padding:10px; text-align:center; font-size:80%;}
	p.banner_remark {min-height:170px;}
	div.Footer { text-align:center; padding:0 5px; font-size:80%; }
	.pc_none {display:none;}
}
/*------ レスポンシブ設定 ここまで ------*/

 /*----全ページ共通ここから-----*/
html {
/*	background:#382400;*/
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
}
body {background:#FFF; -webkit-text-size-adjust: 100%; }
strong {
	font-weight:bold;
}
a:link {
	color: #0000ff;
	text-decoration:none;
}
a:visited {
	color: #0000ff;
	text-decoration: none;
}
a:hover {
	color: #ff8000;
	text-decoration: none;
}
a:active {
	color: #ff8000;
	text-decoration: none;
}

div.menu_nav {
	background:#0000FF;
	color:#FFFFFF;
}
.clear {
	clear:both;
	height:0px;
	width:0px;
}
div.Header {
	position:relative;
}
h2.catch_copy {
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-weight:bold;
	margin-bottom:10px;
	color:#98479b; 
}

.CD_container {
	width: 90%;
	margin: 20px auto;
	background: #FFF3FF;
	padding: 10px;
	border-radius: 10px;
}
p.Title {
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-weight:bold;
	color:#FFF; 
}
p.remarksTitle {
	border-bottom:#ccc 1px dotted; 
	color:#666;
	font-weight:100; 
}
p.remarks {
	padding:5px 10px;
}
.pc_none {
	padding:0px 10px;
}
.sma_none {
	padding:0px 10px;
}
div.Story {
	color:#333;
}
p.banner_title {
	padding:5px;
	color:#B90078;
	font-size:140%;
	font-weight:bold;
}
p.banner_remark {
	margin-top:10px;
	text-align:left;
	font-size:90%;
}

/*　プレイヤー（再生バー）の高さ、幅、背景色の指定　*/
.audiojs { height: 30px; background: #CE028D; width: 240px; font-size:16px;}
/*　再生・停止ボタンの高さ、幅、パディングの指定　*/
.audiojs .play-pause { width: 35px; height: 30px; padding: 5px 5px 0px 0px; }
/*　再生・停止ボタンなどの p 要素　*/
.audiojs p { width: 25px; height: 30px; margin: -5px 0px 0px -1px; }
/*　進行状態・ロードの状態を表示する部分　*/
.audiojs .scrubber { background: #002; width: 50px; height: 14px; margin: 7px; }
/*　進行状態を表示するバーの部分　*/
.audiojs .progress { height: 14px; width: 0px; background: #66F; }
/*　ロード状態を表示するバーの部分　*/
.audiojs .loaded { height: 14px; background: #33F;}
/*　再生時間の部分　*/
.audiojs .time { float: left; height: 30px; line-height: 30px; }
.audiojs .error-message { height: 24px;line-height: 24px; }
 /*　再生している曲の情報　*/
.track-details { clear: both; height: 20px; width: 180px; padding: 1px 6px; background: #eee; color: #222;  font-size: 11px; line-height: 20px;}
.track-details:before { content: '♬  Now Playing: '; }

hr {
	margin-top:100px;
    border: 0;
    height: 2px;
    background: #000;
    background-image: -webkit-linear-gradient(left, #FFF, #F0F, #FFF);
    background-image:    -moz-linear-gradient(left, #FFF, #F0F, #FFF);
    background-image:     -ms-linear-gradient(left, #FFF, #F0F, #FFF);
    background-image:      -o-linear-gradient(left, #FFF, #F0F, #FFF);
}

hr.hatsukoi {
	margin-top:100px;
    border: 0;
    height: 2px;
    background: #000;
    background-image: -webkit-linear-gradient(left, #FFF, #ca8ac0, #FFF);
    background-image:    -moz-linear-gradient(left, #FFF, #ca8ac0, #FFF);
    background-image:     -ms-linear-gradient(left, #FFF, #ca8ac0, #FFF);
    background-image:      -o-linear-gradient(left, #FFF, #ca8ac0, #FFF);
}

hr.tehodoki {
	margin-top:100px;
    border: 0;
    height: 2px;
    background: #000;
    background-image: -webkit-linear-gradient(left, #FFF, #8d81c3, #FFF);
    background-image:    -moz-linear-gradient(left, #FFF, #8d81c3, #FFF);
    background-image:     -ms-linear-gradient(left, #FFF, #8d81c3, #FFF);
    background-image:      -o-linear-gradient(left, #FFF, #8d81c3, #FFF);
}

hr.kakehiki {
	margin-top:100px;
    border: 0;
    height: 2px;
    background: #000;
    background-image: -webkit-linear-gradient(left, #FFF, #f7af7f, #FFF);
    background-image:    -moz-linear-gradient(left, #FFF, #f7af7f, #FFF);
    background-image:     -ms-linear-gradient(left, #FFF, #f7af7f, #FFF);
    background-image:      -o-linear-gradient(left, #FFF, #f7af7f, #FFF);
}

hr.nadeshiko {
	margin-top:100px;
    border: 0;
    height: 2px;
    background: #000;
    background-image: -webkit-linear-gradient(left, #FFF, #9fd693, #FFF);
    background-image:    -moz-linear-gradient(left, #FFF, #9fd693, #FFF);
    background-image:     -ms-linear-gradient(left, #FFF, #9fd693, #FFF);
    background-image:      -o-linear-gradient(left, #FFF, #9fd693, #FFF);
}

hr.tsuyogari {
	margin-top:100px;
    border: 0;
    height: 2px;
    background: #000;
    background-image: -webkit-linear-gradient(left, #FFF, #a2d8fa, #FFF);
    background-image:    -moz-linear-gradient(left, #FFF, #a2d8fa, #FFF);
    background-image:     -ms-linear-gradient(left, #FFF, #a2d8fa, #FFF);
    background-image:      -o-linear-gradient(left, #FFF, #a2d8fa, #FFF);
}