/* 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 リセット ここまで ------*/

html {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	width:100%;
	height:100%;
	background:url(../img/back-tl2.png) , url(../img/back-br2.png);
	background-repeat:no-repeat , no-repeat ;
	background-position:top left , bottom right;
	background-attachment:fixed , fixed ;
	background-size:40%, 40% ;
	background-color:#860000;
}
body {
	width:1000px;
	min-height:100%;
	margin:0 auto;
	/*background:url(../img/bg_white_90.png) repeat;*/
	background-color:#FFF;
}

div.main-image {
	position:relative
}
a.kakure {
	display: block;
	position: absolute;
	width: 806px;
	height: 72px;
	left: 97px;
	top: 532px;
	cursor: default;
}
a:link.kakure{
	background:none;
}
a:visited.kakure{
	background:none;
}
a:hover.kakure {
	background:none;
}
a:active.kakure {
	background:none;
}
/*------ レスポンシブ設定 ここから ------*/
p.profile {text-align:center;}
/*画像比率0.563*/
/* iPHone4,iPhone5,iPhone5sのみ */
@media screen and (max-width: 374px) {
	body { width:100%; margin:0 auto;}
	div.Header { margin:0 auto; padding-top:10px;}
	li.TopMenu { display:block; height:50px; padding:8px 10px; text-align:center;}
	h1.page_title { display:none;}
	h2.catch_copy {clear:both; text-align:center; font-size:11px;}
	div.TopPhoto {text-align:center; }
	img.tunaboniLogo {width:auto; height:60px; }
	img.TopTitle { 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:90%; line-height:1.5em; }
	p.Title { font-size:170%; font-weight:bold; line-height:1.5em; }
	span.cast { font-size:110%; 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;}
	div.banner2 { width:300px; margin:20px auto;}
	ul.banner { display:block; }
	li.banner { display:block; width:280px; padding:10px; text-align:center; margin-bottom:10px; background: #DFD0A9; font-size:75%; color:#FFF; }
	li.banner2 { display:block; width:280px; padding:10px; text-align:center; margin-bottom:10px; background: #DFD0A9; font-size:75%; color:#FFF; }
	div.Footer {text-align:center; padding:5px; font-size:65%; }
	.sma_none {display:none;}
	a.kakure {display: block;position: absolute;width: 264px;height: 28px;left: 28px;top: 167px;}
}

/* iPhone6のみ */
@media screen and (min-width: 375px) and (max-width: 413px) {
	body { width:100%; margin:0 auto;}
	div.Header { margin:0 auto; padding-top:10px;}
	li.TopMenu { display:block; height:50px; padding:8px 10px; text-align:center; }
	h1.page_title { display:none;}
	h2.catch_copy {clear:both; text-align:center; font-size:12px;}
	div.TopPhoto {text-align:center; }
	img.tunaboniLogo {width:114px; height:85px; }
	img.TopTitle { 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:170%; font-weight:bold; line-height:1.5em; }
	span.cast { font-size:125%; 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;}
	div.banner2 { width:350px; margin:20px auto;}
	ul.banner { display:block; }
	li.banner { display:block; width:330px; padding:10px; text-align:center; margin-bottom:10px; background: #DFD0A9; font-size:90%; color:#FFF; }
	li.banner2 { display:block; width:330px; padding:10px; text-align:center; margin-bottom:10px; background: #DFD0A9; font-size:90%; color:#FFF; }
	div.Footer {text-align:center; padding:5px; font-size:70%; }
	.sma_none {display:none;}
	a.kakure {display: block;position: absolute;width: 302px;height: 25px;left: 36px;top: 202px;}
}
 
/* iPhone6 Plus ~ ちょっと大きいスマホまで */
@media screen and (min-width: 414px) and (max-width: 500px) {
	body { width:100%; margin:0 auto;}
	div.Header { margin:0 auto; padding-top:10px;}
	li.TopMenu { display:block; height:50px; padding:8px 10px; text-align:center; }
	h1.page_title { position: absolute; right: 0px; top: 0px; width:70%;}
	h2.catch_copy {clear:both; text-align:center; font-size:14px;}
	div.TopPhoto {text-align:center; }
	img.tunaboniLogo {width:114px; height:85px; }
	img.TopTitle { 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:170%; font-weight:bold; line-height:1.5em; }
	span.cast { font-size:130%; 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;}
	div.banner2 { width:400px; margin:20px auto;}
	ul.banner { display:block; }
	li.banner { display:block; width:380px; padding:10px; text-align:center; margin-bottom:10px; background: #DFD0A9; color:#FFF; }
	li.banner2 { display:block; width:380px; padding:10px; text-align:center; margin-bottom:10px; background: #DFD0A9; color:#FFF; }
	div.Footer {text-align:center; padding:5px; font-size:70%; }
	.sma_none {display:none;}
	a.kakure {display: block;position: absolute;width: 336px;height: 33px;left: 40px;top: 218px;}
}

/* タブレット〜PC */
@media screen and (min-width: 501px) and (max-width: 999px) {
	html {}
	body { width:500px; margin:0 auto; }
	div.Header { margin:0 auto; padding-top:10px;}
	li.TopMenu { float:left; width:150px; height:50px; padding:8px 0px 8px 12px; }
	h1.page_title { position: absolute; right: 0px; top: 0px; width:70%;}
	h2.catch_copy {clear:both; text-align:center; font-size:17px;}
	div.TopPhoto { text-align:center; }
	img.tunaboniLogo {width:114px; height:85px; }
	img.TopTitle { 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:90%; line-height:1.5em; }
	p.Title { font-size:180%; font-weight:bold; line-height:1.5em; }
	span.cast { font-size:130%; 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;}
	div.banner2 { width:450px; margin:20px auto;}
	ul.banner { display:block; }
	li.banner { display:block; width:410px; padding:10px 20px; margin-bottom:10px; background:#DFD0A9; text-align:center; color:#FFF; }
	li.banner2 { display:block; width:410px; padding:10px 20px; margin-bottom:10px; background:#DFD0A9; text-align:center; color:#FFF; }
	div.Footer { text-align:center; padding:5px; font-size:80%; }
	.sma_none {display:none;}
	a.kakure {display: block; position: absolute; width: 406px; height: 33px; left: 47px; top: 266px;}

}

/* PC */
@media screen and (min-width: 1000px) {
	html {}
	body {width:1000px; margin:0 auto; }
	div.Header { margin:0 auto; padding-top:10px;}
	li.TopMenu { float:left; width:150px; height:50px; padding:8px 90px; }
	nav.TopMenu { width:666px; margin-left:150px;}
	div.page_link a { display:block; float:left; width:333px;}
	h1.page_title { position: absolute; right: 10px; top: 15px; width:60%;}
	h2.catch_copy {clear:both; text-align:center; font-size:28px;}
	div.TopPhoto {  width:937px; text-align:center; }
	img.tunaboniLogo {width:114px; height:85px; }
	img.TopTitle { 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:200%; font-weight:bold; line-height:1.5em; }
	span.cast { font-size:130%; 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:900px; padding:0 50px; text-align:left; font-size:100%;}
	p.profile { float:left; width:450px; text-align:center; font-size:100%;}
	strong.profile { font-size:140%;}
	p.remarksTitle {font-size:200%; }
	p.Sales { margin:20px 0; font-size:100%; line-height:1.5em;}
	div.banner { width:900px; margin:20px auto; }
	div.banner2 { width:600px; margin:20px auto; }
	ul.banner { display:block; }
	li.banner { display:block; float:left; background:#DFD0A9; margin:0 5px; width:270px; min-height:0px; padding:10px; text-align:center; font-size:80%; color:#FFF; }
	li.banner2 { display:block; float:left; background:#DFD0A9; margin:0 5px; width:420px; min-height:0px; padding:10px; text-align:center; font-size:80%; color:#FFF; }
	p.banner_remark {min-height:260px;}
	div.Footer { text-align:center; padding:0 5px; font-size:80%; }
	.pc_none {display:none;}
}
/*------ レスポンシブ設定 ここまで ------*/
 /*----全ページ共通ここから-----*/
body { 
	-webkit-text-size-adjust: 100%;
	position:relative;
 }
strong {
	font-weight:bold;
}
a:link {
	color: #FF0000;
	text-decoration:none;
}
a:visited {
	color: #FF0000;
	text-decoration: none;
}
a:hover {
	color: #ff8000;
	text-decoration: none;
	background:#DFD0A9;
}
a:active {
	color: #ff8000;
	text-decoration: none;
}
div.menu_nav {
	background:#0000FF;
	color:#FFFFFF;
}
img.TopMenu{
	width:150px;
	height:auto;
}
li.TopMenu a:link {
	color: #FF0000;
	text-decoration:none;
}
li.TopMenu a:visited {
	color: #FF0000;
	text-decoration: none;
}
li.TopMenu a:hover {
	color: #ff8000;
	text-decoration: none;
	background:none;
	opacity:0.8;
}
div.page_link a:active {
	color: #ff8000;
	text-decoration: none;
	background:none;
	opacity:0.8;
}
div.page_link a:link {
	color: #FF0000;
	text-decoration:none;
}
div.page_link a:visited {
	color: #FF0000;
	text-decoration: none;
}
div.page_link a:hover {
	color: #ff8000;
	text-decoration: none;
	background:none;
	opacity:0.8;
}
div.page_link a:active {
	color: #ff8000;
	text-decoration: none;
	background:none;
	opacity:0.8;
}
div.page_link img {
	width:100%;
	height:auto;
}
.clear {
	clear:both;
	height:0px;
	width:0px;
}
div.Header {
	position:relative;
	line-height:0;
}
div.Header img {
	width:100%;
}
img.catch {
	width:100%;
	height:auto;
}
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:url(../img/CD_container_back.jpg) no-repeat;
	background-size:cover;
	padding: 10px;
	border-radius: 10px;
	color:#FFF;
}

.CD_container2 {
	width: 90%;
	margin: 20px auto;
	background:url(../img/CD_container_back2.jpg) no-repeat;
	background-size:cover;
	padding: 10px;
	border-radius: 10px;
	color:#FFF;
}

.CD_container3 {
	width: 90%;
	margin: 20px auto;
	background:url(../img/CD_container_back3.jpg) no-repeat;
	background-size:cover;
	padding: 10px;
	border-radius: 10px;
	color:#FFF;
}

p.SubTitle {
	margin-top:10px;
}
p.Title {
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	color:#492e13; 
	font-weight:bold;
}
p.remarksTitle {
	border-bottom:#ccc 1px solid; 
	color:#333;
	font-weight:100; 
}
p.remarks {
	padding:5px 10px;
}
.pc_none {
	padding:0px 10px;
}
.sma_none {
	padding:0px 10px;
}
div.Story {
	color:#000;
}
p.banner_title {
	padding:5px;
	color:#FFF;
	font-size:140%;
	font-weight:bold;
}
p.banner_remark {
	margin-top:10px;
	text-align:left;
	font-size:90%;
}
.banner a:link {
	color: #FFF;
	text-decoration:underline;
}
.banner a:visited {
	color: #FFF;
	text-decoration:underline;
}
.banner a:hover {
	color: #F00;
	text-decoration: none;
	background:none;
}
.banner a:active {
	color: #F00;
	text-decoration: none;
}

/*　プレイヤー（再生バー）の高さ、幅、背景色の指定　*/
.audiojs { height: 30px; width: 240px; background: #666; 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:10px;
    border: 0;
    height: 1px;
    background: #333;
}

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);
}

div.shopLink {
	margin-top:30px;
	text-align:center;
}
table.shopLink {
	width:240px;
	margin:0 auto;
}
td.shopLink {
	width:50%;
	text-align:center;
	padding:10px 0;
}
.shopLink a {
	color:#000;
	text-decoration:none;
}
.shopLink a:hover {
	opacity:0.7;
	background:none;
}
img.shopLink {
	display:inline-block;
	width:80px;
	height:auto;
	border-radius:10px;
}
img.shopLink2 {
	display:inline-block;
	width:240px;
	height:auto;
	border-radius:0px;
}
div.Footer {
	text-align:center;
}
a:link.amazon {
	color: #000;
	text-decoration:none;
}
a:visited.amazon {
	color: #000;
	text-decoration: none;
}
a:hover.amazon {
	color: #000;
	text-decoration: none;
	opacity:0.7;
}
a:active.amazon {
	color: #000;
	text-decoration: none;
	opacity:0.7;
}