@charset "UTF-8";
@font-face { font-family: "marunum"; src: url("/jp/contents/research/fonts/MonoRoundNumericBold.eot?") format("eot"), url("/jp/contents/research/fonts/MonoRoundNumericBold.woff2") format("woff2"), url("/jp/contents/research/fonts/MonoRoundNumericBold.woff") format("woff"); }
#contents { min-width: 940px; color: #000; -webkit-text-size-adjust: 100%; }
#contents .section .inner { width: 940px; margin: 0 auto; }
#contents .section img { width: auto; }
#contents .textSection { background: #fbdcdc; padding: 40px 0; }
#contents .textSection.char { background: #fce7cb; }
#contents .textSection p { font-size: 16px; line-height: 1.5; width: 940px; margin: 0 auto; text-align: left; }

#contents .sec01 { background: #cc3d3d url(/jp/contents/research/graphic/002/sec01_bg01.png) no-repeat center 40px; padding: 100px 0 40px; }
#contents .sec01 .fig { height: 300px; }
#contents .sec01 .fig.play { opacity: 1; }
#contents .sec01 .fig img { display: block; float: left; }
#contents .sec01 p { color: #fff; font-size: 18px; line-height: 1.7; text-align: left; }
/* anime sec01 */
#contents .sec01 .fig img { opacity: 0; }
#contents .sec01.play .fig img { opacity: 1; transition: .2s all ease-in; }
#contents .sec01.play .fig img:nth-of-type(1) { transition-delay: 0.4s; }
#contents .sec01.play .fig img:nth-of-type(2) { transition-delay: 0.8s; }

#contents .sec02{ background: #d66262; padding: 40px 0; }
#contents .sec02 h3 { margin-bottom: 40px; }
#contents .sec02 h4 { margin-bottom: 10px; opacity: 0; transition: .2s all ease-in; }
#contents .sec02 .fig { height: 400px; position: relative; }
#contents .sec02 .fig .bg { width: 940px; height: 294px; position: absolute; left: 0; top: 100px; opacity: 0; transition: .2s all ease-in; }
#contents .sec02 .fig .first { position: absolute; width: 298px; text-align: center; height: 300px; top: 0; left: 338px; opacity: 0; transition: .3s all ease-in; top: 40px; }
#contents .sec02 .fig .second { position: absolute; width: 254px; text-align: center; height: 300px; top: 75px; left: 85px; opacity: 0; transition: .3s all ease-in; top: 115px; }
#contents .sec02 .fig .third { position: absolute; width: 230px; text-align: center; height: 250px; top: 120px; left: 625px; opacity: 0; transition: .5s all ease-in; top: 160px; }
#contents .sec02 .fig p { font-family: 'marunum',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif; letter-spacing: -0.075em; font-size: 36px; font-weight: bold; color: #c41a1a; line-height: 68px; transition: .2s all ease-in; opacity: 0; top: 40px; position: relative; }
#contents .sec02 .fig p span { font-size: 68px; }

/* anime sec02 */
#contents .sec02.play h3 { opacity: 1; }
#contents .sec02.play h4 { opacity: 1; transition-delay: .5s; }
#contents .sec02.play .fig .bg { opacity: 1; }
#contents .sec02.play .fig .first { opacity: 1; top: 0; transition-delay: 1.5s; }
#contents .sec02.play .fig .second { opacity: 1; top: 75px; transition-delay: 1.0s; }
#contents .sec02.play .fig .third { opacity: 1; top: 120px; transition-delay: 0.5s; }
#contents .sec02.play .fig p { opacity: 1; top: 0; transition-delay: 2s; }

#contents .sec03 { background: #d66262; padding: 40px 0; }
#contents .sec03 h3 { margin-bottom: 40px; }
#contents .sec03 .ranking { width: 100%; height: 400px; background: url(/jp/contents/research/graphic/002/sec03_item01.png) no-repeat left bottom; padding-bottom: 1px; position: relative; opacity: 0; transition: .5s all ease-in; }
#contents .sec03 .ranking .rank { width: 240px; height: 330px; position: absolute; bottom: 62px; }
#contents .sec03 .ranking .rank.first { left: 100px; }
#contents .sec03 .ranking .rank.second { left: 340px; }
#contents .sec03 .ranking .rank.third { left: 580px; }
#contents .sec03 .ranking .rank h4 { opacity: 0; transition: .5s all ease-in; }
#contents .sec03 .ranking .rank.second h4, #contents .sec03 .ranking .rank.third h4 { margin-top: 30px; }
#contents .sec03 .ranking .rank p { font-family: 'marunum',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif; letter-spacing: -0.05em; font-size: 40px; font-weight: bold; color: #ffff99; line-height: 72px; }
#contents .sec03 .ranking .rank p span { font-size: 72px; }
#contents .sec03 .ranking .rank ul { position: absolute; left: 50px; bottom: 0; }
#contents .sec03 .ranking .rank ul li { background: url(/jp/contents/research/graphic/002/sec03_item02.png) no-repeat; width: 136px; height: 64px; position: absolute; left: 0; opacity: 0; transition: .5s all ease-in; }
#contents .sec03 .ranking .rank ul li:nth-child(1) { bottom: 0; z-index: 6; }
#contents .sec03 .ranking .rank ul li:nth-child(2) { bottom: 30px; z-index: 5; }
#contents .sec03 .ranking .rank ul li:nth-child(3) { bottom: 60px; z-index: 4; }
#contents .sec03 .ranking .rank ul li:nth-child(4) { bottom: 90px; z-index: 3; }
#contents .sec03 .ranking .rank ul li:nth-child(5) { bottom: 120px; z-index: 2; }
#contents .sec03 .ranking .rank ul li:nth-child(6) { bottom: 150px; z-index: 1; }

/* anime sec03 */
#contents .sec03.play h3{opacity:1; transition-delay: 0.8s;}
#contents .sec03.play .ranking { transition-delay: 1s; opacity: 1; }
#contents .sec03.play .ranking .rank ul li { opacity: 1; }
#contents .sec03.play .ranking .rank ul li:nth-child(1) { transition-delay: 1s; }
#contents .sec03.play .ranking .rank ul li:nth-child(2) { transition-delay: 1.2s; }
#contents .sec03.play .ranking .rank ul li:nth-child(3) { transition-delay: 1.4s; }
#contents .sec03.play .ranking .rank ul li:nth-child(4) { transition-delay: 1.6s; }
#contents .sec03.play .ranking .rank ul li:nth-child(5) { transition-delay: 1.8s; }
#contents .sec03.play .ranking .rank ul li:nth-child(6) { transition-delay: 2s; }
#contents .sec03.play .ranking .rank h4 { transition-delay: 2s; opacity: 1; }

#contents .sec04 { background: #d66262 url(/jp/contents/research/graphic/002/sec04_bg01.png) no-repeat center center; height: 670px; padding: 40px 0; }
#contents .sec04 h3 { margin-bottom: 40px; }
#contents .sec04 ul { width: 960px; margin: 0 auto; }
#contents .sec04 ul li { width: 220px; height: 200px; margin: 0 10px 20px; float: left; opacity: 0; top: 20px; transition: .5s all ease-in; }
/* anime sec04 */
#contents .sec04.play h3{opacity:1;  transition-delay: 0.8s;}
#contents .sec04.play ul li { opacity: 1; top: 0; transition: .2s all ease-in; }
#contents .sec04.play ul li:nth-of-type(1) { transition-delay: 0.8s; }
#contents .sec04.play ul li:nth-of-type(2) { transition-delay: 1.0s; }
#contents .sec04.play ul li:nth-of-type(3) { transition-delay: 1.2s; }
#contents .sec04.play ul li:nth-of-type(4) { transition-delay: 1.4s; }
#contents .sec04.play ul li:nth-of-type(5) { transition-delay: 1.6s; }
#contents .sec04.play ul li:nth-of-type(6) { transition-delay: 1.8s; }
#contents .sec04.play ul li:nth-of-type(7) { transition-delay: 2.0s; }
#contents .sec04.play ul li:nth-of-type(8) { transition-delay: 2.5s; }

#contents .sec05 { background: #f5bf79; padding: 40px 0; }
#contents .sec05 h3 { margin-bottom: 40px; }
#contents .sec05 h4 { margin-bottom: 10px; opacity: 0; transition: .5s all ease-in; }
#contents .sec05 .fig { height: 400px; position: relative; }
#contents .sec05 .fig .bg { width: 940px; height: 294px; position: absolute; left: 0; top: 100px; opacity: 0; transition: .5s all ease-in; }
#contents .sec05 .fig .bg.play { opacity: 1; }
#contents .sec05 .fig .first { position: absolute; width: 298px; text-align: center; height: 300px; top: 0; left: 338px; top: 40px; opacity: 0; top: 20px; transition: .5s all ease-in; }
#contents .sec05 .fig .second { position: absolute; width: 254px; text-align: center; height: 300px; top: 75px; left: 85px; top: 115px; opacity: 0; top: 20px; transition: .5s all ease-in; }
#contents .sec05 .fig .third { position: absolute; width: 230px; text-align: center; height: 250px; top: 120px; left: 625px; top: 160px; opacity: 0; top: 20px; transition: .5s all ease-in; }
#contents .sec05 .fig p { font-family: 'marunum',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif; letter-spacing: -0.075em; font-size: 36px; font-weight: bold; color: #c41a1a; line-height: 68px; }
#contents .sec05 .fig p span { font-size: 68px; }
/* anime sec05 */
#contents .sec05.play h3 { opacity: 1; transition-delay: 0.4s;}
#contents .sec05.play h4 { opacity: 1; transition-delay: 0.6s;}
#contents .sec05.play .fig .bg { opacity: 1; transition-delay: 0.5s; }
#contents .sec05.play .fig .first { opacity: 1; top: 0; transition-delay: 1.5s; }
#contents .sec05.play .fig .second { opacity: 1; top: 75px; transition-delay: 1.0s; }
#contents .sec05.play .fig .third { opacity: 1; top: 120px; transition-delay: 0.5s; }
#contents .sec05.play .fig p { opacity: 1; top: 0; transition-delay: 2s; }

#contents .sec06 { background: #f5bf79; padding: 40px 0; }
#contents .sec06 h3 { margin-bottom: 40px; }
#contents .sec06 h4 { opacity: 0; }
#contents .sec06 .ranking { background: url(/jp/contents/research/graphic/002/sec06_bg01.png) no-repeat center center; width: 960px; height: 300px; position: relative; margin: 0 auto; opacity: 0; top: 20px; transition: .5s all ease-in; }
#contents .sec06 .ranking .rank { width: 33.3%; float: left; opacity:0; transition:opacity .5s ease;}
#contents .sec06 .ranking .rank img { display: block; margin: 0 auto 10px; }
#contents .sec06 .ranking .rank p { background: #cc6633; color: #fff; text-align: center; font-family: 'marunum',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif; letter-spacing: -0.05em; font-size: 20px; font-weight: bold; display: inline-block; width: 120px; height: 70px; line-height: 73px; border-radius: 50%; }
#contents .sec06 .ranking .rank p span { font-size: 40px; }
#contents .sec06.fadein .ranking { top: 0; opacity: 1; }
/* anime sec6 */
#contents .sec06.play h3{opacity:1; transition-delay: 0.8s;}
#contents .sec06.play .ranking{opacity:1;}
#contents .sec06.play .ranking .rank.first{opacity:1; transition-delay:1s;}
#contents .sec06.play .ranking .rank.second{opacity:1; transition-delay:1.25s;}
#contents .sec06.play .ranking .rank.third{opacity:1; transition-delay:1.5s;}

#contents .sec07 { padding: 40px 0; }
#contents .sec07 h3 { margin-bottom: 40px; transition: .5s all ease-in;}
#contents .sec07 h4 { margin-bottom: 40px; opacity: 0; transition: .5s all ease-in;}
#contents .sec07 .graph { width: 940px; height: 460px; position: relative; margin: 0 auto 40px; }
#contents .sec07 .graph .boy { position: absolute; left: 0; top: 50px; width: 120px; height: 347px; opacity: 0; top: 0; transition: .5s all ease-in; }
#contents .sec07 .graph .girl { position: absolute; right: 0; top: 50px; width: 96px; height: 347px; opacity: 0; top: 0; transition: .5s all ease-in; }
#contents .sec07 .graph .txt { position: absolute; left: 440px; top: 0; width: 80px; height: 457px; opacity: 0; top: -50px; transition: .5s all ease-in; }
#contents .sec07 .graph .pie { width: 310px; height: 310px; position: absolute; }
#contents .sec07 .graph .pie canvas { position: absolute; left: 0; top: 0; }
#contents .sec07 .graph .pie img { position: absolute; opacity: 0; opacity: 0; top: 20px; transition: .5s all ease-in; }
#contents .sec07 .graph .pie#boysGraph { left: 115px; top: 30px; }
#contents .sec07 .graph .pie#girlsGraph { right: 95px; top: 30px; }
#contents .sec07 .graph .pie#boysGraph img, #contents .sec07 .graph .pie#girlsGraph img { left: 40px; top: 60px; }
#contents .sec07 p { text-align: left; font-size: 16px; margin-bottom: 40px; }
/* anime sec7 */
#contents .sec07.play h3{opacity:1;}
#contents .sec07.play h4 { transition-delay: 1s; opacity: 1; }
#contents .sec07.play .pie img { opacity: 1; top: 30px; transition-delay: 2s; }
#contents .sec07.play .graph .boy { opacity: 1; top: 50px; transition-delay: 2s; }
#contents .sec07.play .graph .girl { opacity: 1; top: 50px; transition-delay: 2s; }
#contents .sec07.play .graph .txt { opacity: 1; top: 0; transition-delay: 2.5s; }

#contents .sec08 h4 { margin-bottom: 40px; opacity: 0; transition: .5s all ease-in; }
#contents .sec08 .illust, #contents .sec08 .text { margin-bottom: 40px; opacity: 0; top: 40px; transition: .5s all ease-in; }

/*anime sec08*/
#contents .sec08.play h4 { transition-delay: 0.4s; opacity: 1; top: 0; }
#contents .sec08.play .illust { transition-delay: 1s; opacity: 1; top: 0; }
#contents .sec08.play .text { transition-delay: 2s; opacity: 1; top: 0; }

@media screen and (max-width: 767px) {
#contents .sec01 p{font-size:32px;}
#contents .textSection p,
#contents .sec07 p{font-size:32px;}
body.like-iphone #contents .sec01 p{font-size:16px;}
body.like-iphone #contents .textSection p{font-size:14px;}
body.like-iphone #contents .sec02 .fig p,
body.like-iphone #contents .sec05 .fig p{font-size:16px;}
body.like-iphone #contents .sec02 .fig p span,
body.like-iphone #contents .sec05 .fig p span{font-size:24px}
body.like-iphone #contents .sec03 .ranking .rank p{font-size:16px;}
body.like-iphone #contents .sec03 .ranking .rank p span{font-size:30px;}
body.like-iphone #contents .sec06 .ranking .rank p{font-size:14px;}
body.like-iphone #contents .sec06 .ranking .rank p span{font-size:20px;}
body.like-iphone #contents .textSection p,
body.like-iphone #contents .sec07 p{font-size:16px;}
}