@charset "utf-8";
/*/////////////////////////////////////////////////////////////////////////
ポケモン音楽図鑑 (min-width: 720px)
/////////////////////////////////////////////////////////////////////////*/
img{
max-width:100%;
height:auto;
width /***/:auto;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
html,body { height:100%;}
body { text-align:center; font:13px/1.231 sans-serif; font-family:"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; *font-size:small; *font:x-small;}
h1, h2, h3, h4, h5, h6, table, caption, thead, tr, th, td, form { font-size:100%;}
article, aside, footer, header, nav, section { display:block;}
a,embed,object { outline:none;}
img { border:none; box-sizing:content-box; -webkit-box-sizing:content-box; -moz-box-sizing:content-box;}
hr { display:none;}
li { list-style:none;}
a { color:#e10000; -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; transition:all 0.2s ease;}
a:hover { text-decoration:none;}
.alt { position:absolute; top:-5000px; left:-9999px; text-align:left;}
.clearfix:after { content:""; clear:both; display:block;}

/*common
//////////////////////////////////////////////////////*/
body { background:#000; min-width:1024px; -webkit-text-size-adjust:100%;}
.inner { display:block; width:1000px; text-align:left; margin:0 auto;}
.bg { background:url(../img/bg2.png) center -15px;}

/*header*/
#header { width:100%;}
	#header .logo a {
		display:block; width:235px; height:52px;
		background:url(../img/parts.png) no-repeat -700px -30px;
		text-indent:100%; white-space:nowrap; overflow:hidden;
	}
	#header .logo a:hover { filter:alpha(opacity=80); -moz-opacity:0.8; opacity:0.8;}
	#header h1 { background:url(../img/bg1.png);}
	#header h1 span {
		display:block; height:496px; background:url(../img/h1.jpg) no-repeat;
		text-indent:100%; white-space:nowrap; overflow:hidden;
	}
	#header p { background:url(../img/bg3.png); z-index:1;}
	#header p .inner span {
		display:block; width:690px; height:84px;
		background:url(../img/parts.png) no-repeat 0 0;
		text-indent:100%; white-space:nowrap; overflow:hidden;
	}

/*footer*/
#btmimg {
	width:1000px; height:730px; background:url(../img/btmimage.jpg) no-repeat;
	text-indent:100%; white-space:nowrap; overflow:hidden; margin:0 auto;
}
#footer { width:1000px; text-align:left; padding:20px 0 30px; margin:0 auto; position:relative;}
#footer p { font-size:10px; font-weight:bold; color:#fff; line-height:1.5; margin-bottom:10px;}
#footer ul { margin-bottom:5px;}
	#footer ul li { display:inline-block;}
	#footer ul li a {
		display:inline-block; height:30px; margin-right:20px;
		background:url(../img/parts.png) no-repeat;
		text-indent:100%; white-space:nowrap; overflow:hidden;
	}
	#footer ul li.official a { width:250px; background-position:-390px -730px;}
	#footer ul li.dsc a { width:170px; background-position:-650px -730px;}

/*sns*/
.snsBtn { position:relative; width:1000px; text-align:left; margin:0 auto;}
	.snsBtn ul { position:absolute; right:0;}
	.snsBtn li { display:inline-block; height:20px; vertical-align:top;}
	.snsBtn li.lineBtn { width:82px;}
	.snsBtn.top ul { top:-616px;}
	.snsBtn.btm ul { top:760px;}

/*info*/
#appInfo .inner { padding:20px 30px 0; position:relative;}
	#appInfo .txt { width:620px; background:url(../img/bg_info.png) no-repeat bottom center; padding-bottom:95px;}
	#appInfo .txt:after { content:""; clear:both; display:block;}
	#appInfo .txt h2 {
		width:620px; height:50px; background:url(../img/info.png) no-repeat 0 0;
		text-indent:100%; white-space:nowrap; overflow:hidden; margin-bottom:25px;
	}
	#appInfo .txt p { font-size:16px; line-height:1.7; text-align:justify; text-justify:inter-ideograph; padding-bottom:20px;}
	#appInfo .txt dl { width:350px; font-size:14px; line-height:1.35; float:left;}
	#appInfo .txt dt { width:4.2em; float:left; font-weight:bold; padding:10px 0 3px 0;}
	#appInfo .txt dd { text-indent:-1em; border-top:2px solid #000; padding:8px 0 3px 5.2em;}
	#appInfo .txt dd:last-child { border-bottom:2px solid #000;}
	#appInfo .txt dd:before { content:"：";}
	#appInfo .txt dd:after { content:""; clear:both; display:block;}
	#appInfo .pic { width:265px; height:432px; position:absolute; bottom:0; right:30px; z-index:999; overflow:hidden;}
	#appInfo .pic span {
		display:block; width:265px; height:432px;
		background:url(../img/smp.png) no-repeat;
		text-indent:100%; white-space:nowrap; overflow:hidden;
	}
	#appInfo .dlLink { width:230px; float:right; padding-top:16px;}
	#appInfo .dlLink a,
	#appInfo .dlLink span {
		display:inline-block; height:73px; background:url(../img/info.png) no-repeat;
		text-indent:100%; white-space:nowrap; overflow:hidden;
	}
	#appInfo .dlLink .android { width:227px; background-position:0 -60px; margin-right:7px;}
	#appInfo .dlLink .ios { width:259px; background-position:-240px -60px; margin-left:7px;}
	#appInfo .dlLink a:hover { filter:alpha(opacity=80); -moz-opacity:0.8; opacity:0.8;}

/*box*/
.box1 {
	width:1000px; position:relative; top:20px; margin-bottom:75px;
	background:url(../img/bg_box.png) repeat-y -3030px 0; padding-top:20px;
	}
	.box1:before {
		content:""; display:block; width:1000px; height:20px;
		background:url(../img/bg_box.png) no-repeat 0 0;
		position:absolute; top:-20px; left:0;
	}
	.box1:after {
		content:""; display:block; width:1000px; height:32px;
		background:url(../img/bg_box.png) no-repeat -2020px bottom;
		position:absolute; bottom:-32px; left:0;
	}
	.box1 .boxIn {
		width:1000px; height:96px; position:absolute; bottom:0; left:0;
		background:url(../img/bg_box.png) repeat-y -1010px bottom;
	}
	.box1.plain:after { background-position:-4040px bottom;}
.box2 {
	width:486px; min-height:620px; position:relative; top:20px; margin-bottom:75px;
	background:url(../img/bg_box.png) repeat-y -6520px 0; padding:20px 0 15px;
	}
	.box2:before {
		content:""; display:block; width:486px; height:20px;
		background:url(../img/bg_box.png) no-repeat -5050px 0;
		position:absolute; top:-20px; left:0;
	}
	.box2:after {
		content:""; display:block; width:486px; height:32px;
		background:url(../img/bg_box.png) no-repeat -6030px bottom;
		position:absolute; bottom:-32px; left:0;
	}
	.box2 .boxIn {
		width:486px; height:96px; position:absolute; bottom:0; left:0;
		background:url(../img/bg_box.png) repeat-y -5540px bottom;
	}
.box3 {
	width:900px; position:relative; top:20px; margin-bottom:46px;
	background:url(../img/bg_box2.png) repeat-y -2380px 0; padding:0 32px;
	}
	.box3:before {
		content:""; display:block; width:900px; height:20px;
		background:url(../img/bg_box2.png) no-repeat -1470px 0;
		position:absolute; top:-20px; left:0;
	}
	.box3:after {
		content:""; display:block; width:900px; height:20px;
		background:url(../img/bg_box2.png) no-repeat -3290px bottom;
		position:absolute; bottom:-20px; left:0;
	}

/*detail*/
.detail { padding:18px 0 20px;}
	.detail h2 { background:url(../img/h2.png) repeat-x; margin-bottom:22px;}
	.detail h2 span {
		display:block; height:83px; background:url(../img/parts.png) no-repeat;
		text-indent:100%; white-space:nowrap; overflow:hidden; padding:0 2px;
	}
	#detail01 h2 span { background-position:0 -90px;}
	#detail02 h2 span { background-position:0 -180px;}
	#detail03 h2 span { background-position:0 -270px;}
	.detail p { font-size:16px; line-height:1.6; text-align:justify; text-justify:inter-ideograph; padding:0 5px;}
	.detail .note { font-size:12px;}
	.detail .txt { position:relative; padding:0 30px;}

#detail01 { background:url(../img/bg4.png); border-top:3px solid #fce200;}
#detail02 { background:url(../img/bg5.png); border-top:3px solid #3ab324;}
#detail03 { background:url(../img/bg6.png); border-top:3px solid #3181c0; border-bottom:3px solid #3181c0;}
/*01*/
#detail01 .box1 { padding-bottom:5px;}
#detail01 .box1 .boxIn { height:160px;}
#detail01 #titleList { width:550px; padding:10px 0 30px 50px; position:relative;}
	#detail01 #titleList h3 {
		width:480px; height:38px; margin-bottom:10px;
		background:url(../img/parts.png) no-repeat -390px -685px;
		text-indent:100%; white-space:nowrap; overflow:hidden;
	}
	#detail01 #titleList p { font-size:18px; line-height:1.7; margin-bottom:15px;}
	#detail01 #titleList ul {
		width:480px; position:relative; top:20px; padding:0 22px 0 20px;
		background:url(../img/bg_box2.png) repeat-y -490px 0;
	}
	#detail01 #titleList ul:before {
		content:""; display:block; width:480px; height:20px;
		background:url(../img/bg_box2.png) no-repeat 0 0;
		position:absolute; top:-20px; left:0;
	}
	#detail01 #titleList ul:after {
		content:""; display:block; width:480px; height:32px;
		background:url(../img/bg_box2.png) no-repeat -980px bottom;
		position:absolute; bottom:-32px; left:0;
	}
	#detail01 #titleList li {
		font-size:14px; line-height:1.35; border-bottom:2px solid #cacbc7;
		padding:11px 0 7px 30px; position:relative;
	}
	#detail01 #titleList li:before {
		content:""; display:block; width:22px; height:22px;
		background:url(../img/parts.png) no-repeat -700px 0; position:absolute; top:8px; left:8px;
	}
#detail01 #twWidget {
	width:385px; height:640px; position:absolute; top:20px; right:50px;
	background:url(../img/bg_box.png) no-repeat -7010px bottom; padding-bottom:16px;
	}
	#detail01 #twWidget .bg1 { background:#2f2f2d; padding:0 12px;}
	#detail01 #twWidget .bg2 {
		height:534px; background:url(../img/bg_box2.png) -500px 0 repeat-y; padding:0 5px 0 10px;
		border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;
	}
	#detail01 #twWidget h3 {
		width:385px; height:93px; background:url(../img/parts.png) no-repeat 0 -685px;
		text-indent:100%; white-space:nowrap; overflow:hidden;
	}
#detail01 .note {
	background:rgb(233, 233, 233); background:rgba(255, 255, 255, 0.8);
	padding:10px 15px 8px; margin:50px 50px 0; position:relative;
	}
	#detail01 .note p { font-size:12px; text-indent:-1em; padding-left:1em;}

/*02*/
#detail02 .celL, #detail02 .celR { display:table-cell;}
#detail02 .celL { padding-right:28px;}
#detail02 h3 {
	width:428px; height:58px; margin-bottom:15px;
	background:url(../img/parts.png) no-repeat;
	text-indent:100%; white-space:nowrap; overflow:hidden;
	}
	#detail02 #txt1 h3 { background-position:0 -360px;}
	#detail02 #txt2 h3 { background-position:-440px -360px;}
	#detail02 #txt3 h3 { background-position:0 -425px; width:938px;}
	#detail02 #txt4 h3 { background-position:0 -490px;}
	#detail02 #txt5 h3 { background-position:-440px -490px;}
	#detail02 #txt6 h3 { background-position:0 -555px; width:938px;}
	#detail02 #txt7 h3 { background-position:0 -930px; width:938px;}
#detail02 .pic { width:240px; padding-top:40px; margin:0 auto;}
#detail02 .pic img { border:5px solid #2f2f2d; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;}
#detail02 #txt2 .pic { padding-top:15px;}
#detail02 #txt3 { min-height:480px;}
	#detail02 #txt3 .pic { position:absolute; top:76px; right:50px; padding-top:0;}
	#detail02 #txt3 p { width:640px; padding-top:10px; padding-bottom:20px;}
#detail02 #txt6 p { padding:0 120px 20px;}
#detail02 #txt7 { min-height:720px;}
	#detail02 #txt7 .pic { position:absolute; top:90px; right:70px; padding-top:0;}
	#detail02 #txt7 p:first-child { width:640px; padding:10px 15px 20px;}
	#detail02 #txt7 h4 {
		width:560px; height:38px; background:#2f2f2d;
		font-size:16px; text-align:center; color:#fff; line-height:38px;
		position:relative; margin:0 30px 15px;
	}
	#detail02 #txt7 h4:before {
		content:""; display:block; width:20px; height:38px; overflow:hidden;
		background:url(../img/parts.png) no-repeat 0 -1000px;
		position:absolute; top:0; left:-20px;
	}
	#detail02 #txt7 h4:after {
		content:""; display:block; width:20px; height:38px; overflow:hidden;
		background:url(../img/parts.png) no-repeat -880px -1000px;
		position:absolute; top:0; right:-20px;
	}
	#detail02 #txt7 h5 { width:600px; font-size:18px; text-align:center; padding:0 30px; margin-bottom:10px;}
	#detail02 #txt7 h6 { font-size:14px; border-bottom:2px solid #cacbc7; padding-bottom:10px;}
	#detail02 #txt7 .kakomi { width:600px; background:rgba(255, 255, 255, .3); padding:20px; margin-left:10px;}
	#detail02 #txt7 li {
		font-size:13px; line-height:1.35; border-bottom:2px solid #cacbc7;
		padding:9px 0 6px 35px; position:relative;
	}
	#detail02 #txt7 li:before {
		content:""; display:block; width:22px; height:22px;
		background:url(../img/parts.png) no-repeat -700px 0; position:absolute; top:6px; left:3px;
	}
	#detail02 #txt7 .note { display:block; width:260px; position:absolute; top:560px; right:60px;}
	
/*03*/
#detail03 .readTxt { font-size:18px; line-height:1.5; padding:0 50px 20px;}
#detail03 #faq { background:url(../img/bg_box.png) repeat-y -1010px 0; padding:5px 50px 20px;}
#detail03 #faq .faqIn { padding-top:10px;}
	#detail03 #faq h3 {
		width:900px; height:38px; background:url(../img/parts.png) no-repeat;
		text-indent:100%; white-space:nowrap; overflow:hidden; margin:70px 0 20px;
	}
	#detail03 #faq h3:first-child { margin-top:20px;}
	#detail03 #faq .c1 { background-position:0 -1000px;}
	#detail03 #faq .c2 { background-position:0 -1050px;}
	#detail03 #faq .c3 { background-position:0 -1100px;}
	#detail03 #faq .c4 { background-position:0 -1150px;}
	#detail03 #faq .c5 { background-position:0 -1200px;}
	#detail03 #faq h4 {
		font-size:16px; line-height:1.5; cursor:pointer; padding:7px 60px 8px 28px;
		-webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; transition:all 0.2s ease; position:relative;
	}
	#detail03 #faq h4:hover { color:#e10000;}
	#detail03 #faq h4:before {
		content:""; display:block; width:22px; height:22px;
		background:url(../img/parts.png) no-repeat -730px 0; position:absolute; top:8px; left:0;
	}
	#detail03 #faq h4:after {
		content:""; display:block; width:30px; height:22px;
		background:url(../img/parts.png) no-repeat -760px 0; position:absolute; top:8px; right:0;
	}
	#detail03 #faq h4.active:hover { color:#000;}
	#detail03 #faq h4.active:after { background-position:-800px 0;}
	#detail03 #faq .ans { font-size:14px; line-height:1.6; border-top:6px double #2f2f2d; padding-bottom:20px; display:none;}
	#detail03 #faq .ans p { font-size:14px; padding:20px 10px 0;}
	#detail03 #faq .ans dl { padding:20px 10px 0;}
	#detail03 #faq .ans dt,
	#detail03 #faq .ans dd { text-indent:-1em; padding:0 0 5px 1em;}
	#detail03 #faq .ans .num dd { text-indent:-2.5em; padding-left:2.5em;}
	#detail03 #faq .ans .num2 dd { text-indent:-1em; padding-left:2.5em;}
	#detail03 #faq .ans ul { padding:10px 5px 0 23px;}
	#detail03 #faq .ans ul li { list-style:disc; padding-bottom:5px;}
	#detail03 #faq .ans dd.none { text-indent:0; padding:0 0 5px 0;}
	#detail03 #faq .ans dd ul { padding-top:0;}
	#detail03 #faq .ans .kakomi { background:#cccdc8; background:rgba(0, 0, 0, 0.07); padding:5px 20px 20px; margin:20px 10px 5px;}
	#detail03 #faq .ans .note { display:inline-block; font-size:12px; text-indent:-1em !important; padding-left:1em !important;}
	#detail03 #faq .ans p .note { padding-top:8px;}
	#detail03 #faq .ans a { display:inline-block; text-decoration:none; color:#e10000; border-bottom:1px solid #e10000;}
	#detail03 #faq .ans a:hover { color:#000; border-bottom:1px solid #000;}
#detail03 #contact { padding:0 30px 10px;}
	#detail03 #contact h3 {
		width:938px; height:58px; margin-bottom:30px;
		background:url(../img/parts.png) no-repeat 0 -620px;
		text-indent:100%; white-space:nowrap; overflow:hidden;
	}
	#detail03 #contact .btn { width:768px; height:66px; background:url(../img/parts.png) no-repeat 0 -790px; margin:0 auto;}
	#detail03 #contact a {
		display:block; width:768px; height:66px;
		background:url(../img/parts.png) no-repeat 0 -860px;
		text-indent:100%; white-space:nowrap; overflow:hidden;
		filter:alpha(opacity=0); -moz-opacity:0; opacity:0;
	}
	#detail03 #contact a:hover { filter:alpha(opacity=100); -moz-opacity:1; opacity:1;}


#twtList { height: 531px; overflow-y: scroll; padding: 0; }
#twtList ul { padding: 12px 6px 0 0; }
#twtList ul li { position: relative; padding: 0 0 16px 0; }
#twtList ul li .icon { width:48px; height: 48px; background: #AAA; position: absolute; }
#twtList ul li .time { font:normal normal normal 12px/16px "Helvetica Neue",Roboto,"Segoe UI",Calibri,sans-serif; color:#707070; position: absolute; right: 0px; top: 0px; text-align: right; }
	#twtList ul li .time:hover { color: #0084b4; text-decoration: underline; }
#twtList ul li .cont { padding: 0 0 0 57px; }
#twtList ul li .username_jp { display: block; font:normal normal normal 14px "Helvetica Neue",Roboto,"Segoe UI",Calibri,sans-serif; line-height: 18px; font-weight: bold; color: #000; text-decoration: none; }
	#twtList ul li .username_jp:hover { text-decoration: underline; }
#twtList ul li .username_en { display: block; font:normal normal normal 12px/16px "Helvetica Neue",Roboto,"Segoe UI",Calibri,sans-serif; line-height: 16px; text-decoration: none; color: #66757f; }
#twtList ul li .text { display: block; }
#twtList ul li .text a { color: #0084b4; text-decoration: none; color: 000; display: block; }
#add { padding: 6px 12px 6px 6px; }
#add a { display: block; text-align: center; padding: 12px; color: #0084b4; background: rgba(100,100,100,0.1); cursor: pointer; font-size: 12px; text-decoration: none; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
#twtList .action { position: relative; height: 15px; }
#twtList .action  a { display: block; position: absolute; width: 21px; height: 15px; background-image: url(../img/twtaction.png); -webkit-transition:none; -moz-transition:none; transition:none; }
#twtList .action .ac1 { background-position: 0px 0px; right: 42px; }
#twtList .action .ac1:hover { background-position: -21px 0px; }
#twtList .action .ac2 { background-position: 0px -15px; right: 21px; }
#twtList .action .ac2:hover { background-position: -21px -15px; }
#twtList .action .ac3 { background-position: 0px -30px; right: 0px; }
#twtList .action .ac3:hover { background-position: -21px -30px; }
#twtList ul li .action a { display: none; }
#twtList ul li:hover .action a { display: block; }