.num { font-family: 'Cabin', sans-serif; }
#contents { min-width: 940px; color: #000; -webkit-text-size-adjust: 100%; }
#contents .section .inner { width: 940px; margin: 0 auto; position: relative; clear: both; }
#contents .section .inner:after { content: ''; display: block; clear: both; }
#contents .section img { width: auto; }
#contents .textSection { background: #fff; padding: 40px 0; }
#contents .textSection p { font-size: 16px; line-height: 1.5; width: 940px; margin: 0 auto; text-align: left; }
#contents h2 { color: #008899; font-size: 42px; text-align: center; }
#contents h3.ribbon { background: url(/jp/contents/research/graphic/004/ribbon.png) no-repeat; width: 898px; height: 80px; text-align: center; font-size: 30px; color: #fff; line-height: 64px; margin: 0 auto 40px; opacity: 1; }
#contents h3.ribbon.yellow { background: url(/jp/contents/research/graphic/004/ribbon2.png) no-repeat; }
#contents .sec01 { background: #aaeff3; }
#contents .sec01 h1 { color: #008899; font-size: 42px; text-align: center; line-height: 1; margin-bottom: 40px; }
#contents .sec01 .inner { padding: 40px 0; transition: all 1.3s ease-out; }
#contents .sec01 .fig { width: 720px; height: 252px; position: relative; margin: 0 auto 40px; }
#contents .sec01 .fig img { display: block; position: absolute; left: 0; top: 0; opacity: 0; transition: .4s all ease-in; }
#contents .sec01 .text p { font-size: 18px; text-align: left; }
#contents .sec01.play .ttl { transition-delay: 0.5s; }
#contents .sec01.play .fig img { opacity: 1; }
#contents .sec01.play .fig .can01 { transition-delay: 0.2s; }
#contents .sec01.play .fig .can02 { transition-delay: 0.4s; }
#contents .sec01.play .fig .can03 { transition-delay: 0.6s; }

#contents .sec02 { background: #e5fffb; padding: 40px 0 0; margin-bottom: 0; }
#contents .sec02 h2 { margin-bottom: 40px; opacity: 1; transition: all .3s ease-out; }
#contents .sec02 h3 { margin-bottom: 30px; opacity: 1; transition: all .3s ease-out; }
#contents .sec02 .pie { width: 350px; height: 350px; margin: 0 auto; position: relative; }
#contents .sec02 .graph { position: relative; width: 827px; height: 394px; margin: 0 auto; padding-top: 30px; margin-bottom: 80px; }
#contents .sec02 .data { position: absolute; left: 0; top: 0; width: 827px; height: 394x; }
#contents .sec02 .data p { font-size: 44px; color: #ce4a4a; position: absolute; width: 200px; height: 80px; opacity: 0; transition: .4s all ease-in; }
#contents .sec02 .data img { opacity: 0; transition: .4s all ease-in; }
#contents .sec02 .data p span { font-size: 68px; }
#contents .sec02 .data p.data1 { left: 630px; top: 5px; }
#contents .sec02 .data p.data2 { left: 630px; top: 290px; }
#contents .sec02 .data p.data3 { left: 0px; top: 290px; }
#contents .sec02 .data p.data4 { left: 0px; top: 10px; }
#contents .sec02 .textSection { background: #ded9c5; }
#contents .sec02 .textSection p { font-size: 18px; }
#contents .sec02.play .data img { transition-delay: 0.8s; opacity: 1; }
#contents .sec02.play .data p { transition-delay: 1s; opacity: 1; }

#contents .sec03 { background: #e5fffb; padding: 40px 0 0; margin-bottom: 0; }
#contents .sec03 h4 { color: #008899; font-size: 42px; text-align: center; line-height: 1; margin-bottom: 40px; }
#contents .sec03 .inner { padding: 80px 0 50px; }
#contents .sec03 .fig { width: 920px; height: 284px; position: relative; margin: 0 auto 40px; }
#contents .sec03 .fig img { display: block; position: absolute; left: 0; top: 0; opacity: 0; transition: .4s all ease-in; }
#contents .sec03 .fig p { background: #fff; width: 100px; height: 36px; font-size: 20px; position: absolute; border-radius: 18px; line-height: 36px; color: #ce4a4a; opacity: 0; transition: .4s all ease-in; }
#contents .sec03 .fig p.play { opacity: 1; }
#contents .sec03 .fig p span { font-size: 28px; }
#contents .sec03 .fig p.data11 { left: 45px; top: 185px; }
#contents .sec03 .fig p.data12 { left: 280px; top: 220px; font-weight: bold; }
#contents .sec03 .fig p.data13 { left: 540px; top: 220px; font-weight: bold; }
#contents .sec03 .fig p.data14 { left: 775px; top: 185px; }
#contents .sec03 .fig img.play { opacity: 1; }
#contents .sec03 .textSection { background: #ded9c5; }
#contents .sec03 .textSection p { font-size: 18px; }

#contents .sec03.play img { opacity: 1; }
#contents .sec03.play .price01 { transition-delay: 0.2s; }
#contents .sec03.play .price02 { transition-delay: 0.6s; }
#contents .sec03.play .price03 { transition-delay: 1s; }
#contents .sec03.play .price04 { transition-delay: 1.4s; }
#contents .sec03.play .fig p { transition-delay: 1.6s; opacity: 1; }

#contents .sec04 { background: #e5fffb; padding: 40px 0 0; margin-bottom: 0; }
#contents .sec04 .graph { clear: both; padding: 20px 0 50px; }
#contents .sec04 .graph:after { content: ''; display: block; clear: both; }
#contents .sec04 .graph .item { width: 285px; float: left; position: relative; padding-top: 50px; margin: 0 13px; opacity: 0; transition: .4s all ease-in; }
#contents .sec04 .graph .item img { position: absolute; left: 0; top: 0; opacity: 0; transition: .4s all ease-in; }
#contents .sec04 .graph .item p { font-size: 16px; text-align: center; padding: 20px; opacity: 0; transition: .4s all ease-in; }
#contents .sec04 .pie { width: 280px; height: 280px; margin: 0 auto; position: relative; }
#contents .sec04 .textSection { background: #ded9c5; }
#contents .sec04 .textSection p { font-size: 18px; }
#contents .sec04 .graph .item.play, #contents .sec04 .graph .item img.play, #contents .sec04 .graph .item p.play { opacity: 1; }
#contents .sec04.play .graph .item { opacity: 1; }
#contents .sec04.play .graph .item img, #contents .sec04.play .graph .item p { opacity: 1; }
#contents .sec04.play .graph .item:nth-child(1) { transition-delay: 0.1s; }
#contents .sec04.play .graph .item:nth-child(1) img { transition-delay: 1s; }
#contents .sec04.play .graph .item:nth-child(1) p { transition-delay: 1.5s; }
#contents .sec04.play .graph .item:nth-child(2) { transition-delay: 0.1s; }
#contents .sec04.play .graph .item:nth-child(2) img { transition-delay: 1.5s; }
#contents .sec04.play .graph .item:nth-child(2) p { transition-delay: 2s; }
#contents .sec04.play .graph .item:nth-child(3) { transition-delay: 0.1s; }
#contents .sec04.play .graph .item:nth-child(3) img { transition-delay: 2s; }
#contents .sec04.play .graph .item:nth-child(3) p { transition-delay: 2.5s; }

#contents .sec05 { background: #fffed4; padding: 40px 0 80px; margin-bottom: 0; }
#contents .sec05 h2 { color: #fb7000; font-size: 42px; text-align: center; margin-bottom: 40px; }
#contents .sec05 h3 { opacity: 1; }
#contents .sec05 .fig { width: 942px; height: 447px; margin: 0 auto 40px; position: relative; }
#contents .sec05 .fig img { position: absolute; left: 0; top: 0; opacity: 0; transition: .4s all ease-in; }
#contents .sec05 .fig p.data1, #contents .sec05 .fig p.data2, #contents .sec05 .fig p.data3 { background: #d8c50b; width: 200px; height: 40px; font-size: 20px; position: absolute; border-radius: 20px; line-height: 40px; color: #fff; opacity: 0; transition: .4s all ease-in; }
#contents .sec05 .fig p span { font-size: 24px; font-weight: bold; }
#contents .sec05 .fig p.data1 { left: 25px; top: 125px; }
#contents .sec05 .fig p.data2 { left: 370px; top: 125px; }
#contents .sec05 .fig p.data3 { left: 720px; top: 125px; }
#contents .sec05 p.text { font-size: 18px; text-align: left; }
#contents .sec05.play img, #contents .sec05.play .fig p { opacity: 1; }
#contents .sec05.play .rank0101 { transition-delay: 0.4s; }
#contents .sec05.play .rank0102 { transition-delay: 0.8s; }
#contents .sec05.play .rank0103 { transition-delay: 1.2s; }
#contents .sec05.play .fig .data1 { transition-delay: 1.3s; }
#contents .sec05.play .fig .data2 { transition-delay: 1.3s; }
#contents .sec05.play .fig .data3 { transition-delay: 1.3s; }

#contents .sec06 { background: #fffed4; padding: 40px 0 80px; margin-bottom: 0; }
#contents .sec06 h3 { opacity: 1; }
#contents .sec06 .fig { width: 942px; height: 447px; margin: 0 auto 40px; position: relative; }
#contents .sec06 .fig img { position: absolute; left: 0; top: 0; opacity: 0; transition: .4s all ease-in; }
#contents .sec06 .fig p.data1, #contents .sec06 .fig p.data2, #contents .sec06 .fig p.data3 { background: #d8c50b; width: 200px; height: 40px; font-size: 20px; position: absolute; border-radius: 20px; line-height: 40px; color: #fff; opacity: 0; transition: .4s all ease-in; }
#contents .sec06 .fig p span { font-size: 24px; font-weight: bold; }
#contents .sec06 .fig p.data1 { left: 25px; top: 125px; }
#contents .sec06 .fig p.data2 { left: 370px; top: 125px; }
#contents .sec06 .fig p.data3 { left: 720px; top: 125px; }
#contents .sec06 p.text { font-size: 18px; text-align: left; }
#contents .sec06.play img, #contents .sec06.play .fig p { opacity: 1; }
#contents .sec06.play .rank0201 { transition-delay: 0.4s; }
#contents .sec06.play .rank0202 { transition-delay: 0.8s; }
#contents .sec06.play .rank0203 { transition-delay: 1.2s; }
#contents .sec06.play .fig .data1 { transition-delay: 1.3s; }
#contents .sec06.play .fig .data2 { transition-delay: 1.3s; }
#contents .sec06.play .fig .data3 { transition-delay: 1.3s; }

#contents .sec07 { background: #fffed4; padding: 40px 0 80px; margin-bottom: 0; }
#contents .sec07 div.highend h2 { opacity: 1; color: #fff; font-size: 26px; text-align: center; padding: 10px 20px 20px; }
#contents .sec07 div.highend { background: #bcac13; padding: 5px; clear: both; }
#contents .sec07 div.highend:after { content: ''; display: block; clear: both; }
#contents .sec07 div.highend div { float: left; padding: 5px; opacity: 0; transition: .4s all ease-in; }
#contents .sec07 div.highend div.play { opacity: 1; }
#contents .sec07.play div.highend div { opacity: 1; }
#contents .sec07.play .rank0303 { transition-delay: 0.5s; }
#contents .sec07.play .rank0304 { transition-delay: 0.9s; }
#contents .sec07.play .rank0305 { transition-delay: 1.2s; }

@media screen and (max-width: 767px) {
	#contents .sec01 h1,
	#contents .sec02 h2{font-size:60px;}
	#contents .sec01 .text p,
	#contents .sec02 .textSection p,
	#contents .sec03 .textSection p,
	#contents .sec04 .textSection p,
	#contents .sec05 p.text,
	#contents .sec06 p.text{font-size:30px;}
	#contents .sec03 .fig p { background: #fff; width: 150px; height: 80px; font-size: 30px; position: absolute; border-radius: 40px; line-height: 80px; color: #ce4a4a; /* opacity:0;*/ transition: .4s all ease-in; }
	#contents .sec03 .fig p.play { opacity: 1; }
	#contents .sec03 .fig p span { font-size: 60px; }
	#contents .sec03 .fig p.data11 { left: 20px; top: 165px; }
	#contents .sec03 .fig p.data12 { left: 255px; top: 200px; }
	#contents .sec03 .fig p.data13 { left: 515px; top: 200px; }
	#contents .sec03 .fig p.data14 { left: 750px; top: 165px; }
	#contents .sec05 .fig p.data1, 
	#contents .sec05 .fig p.data2, 
	#contents .sec05 .fig p.data3, 
	#contents .sec06 .fig p.data1, 
	#contents .sec06 .fig p.data2, 
	#contents .sec06 .fig p.data3 { margin-top: 10px; background: #d8c50b; width: 200px; height: 80px; font-size: 30px; position: absolute; border-radius: 40px; line-height: 80px; color: #fff; /* opacity:0;*/ transition: .4s all ease-in; }
	#contents .sec05 .fig p span, #contents .sec06 .fig p span { font-size: 60px; font-weight: bold; }
	body.like-iphone #contents .sec01 h1,
	body.like-iphone #contents .sec02 h2{font-size:24px;}
	body.like-iphone #contents .sec01 .text p,
	body.like-iphone #contents .sec02 .textSection p,
	body.like-iphone #contents .sec03 .textSection p,
	body.like-iphone #contents .sec04 .textSection p,
	body.like-iphone #contents .sec05 p.text,
	body.like-iphone #contents .sec06 p.text{font-size:14px;}
	body.like-iphone #contents h3.ribbon{font-size:12px;}
	body.like-iphone #contents .sec02 .data p{font-size:18px;}
	body.like-iphone #contents .sec02 .data p span{font-size:24px;}
	body.like-iphone #contents .sec03 h4{font-size:20px;}
	body.like-iphone #contents .sec03 .fig p{font-size:14px;}
	body.like-iphone #contents .sec03 .fig p span{font-size:20px;}
	body.like-iphone #contents .sec04 .graph .item p{font-size:9px;}
	body.like-iphone #contents .sec05 .fig p,
	body.like-iphone #contents .sec06 .fig p{font-size:16px;}
	body.like-iphone #contents .sec05 .fig p span, 
	body.like-iphone #contents .sec06 .fig p span{font-size:20px;}
	body.like-iphone #contents .sec07 div.highend h2{font-size:20px;}
}