@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; 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 .sec01 { background: #e4aabd; }
#contents .sec01 .inner { background: url(/jp/contents/research/graphic/003/sec01_bg.png) no-repeat center 0; padding: 40px 0 0 0; height: 860px; overflow: visible; transition: all 1.3s ease-out; }
#contents .sec01 .ttl { text-align: center; opacity: 0; transition: opacity .3s ease-out; }
#contents .sec01 .fig { opacity: 0; transition: .4s all ease-in; }
#contents .sec01 .fig.play { opacity: 1; }
#contents .sec01 .fig img { display: block; }
#contents .sec01 .fig1 { width: 378px; height: 410px; position: absolute; left: 280px; top: 270px; opacity: 0; transition: all .5s ease-out; transform: scale(0, 0); }
#contents .sec01 .fig2 { width: 224px; height: 365px; position: absolute; left: 120px; top: 330px; opacity: 0; transition: all .3s ease-out; }
#contents .sec01 .fig3 { width: 179px; height: 143px; position: absolute; left: 660px; top: 330px; opacity: 0; transition: all .3s ease-out; }
#contents .sec01 .fig4 { width: 139px; height: 217px; position: absolute; left: 680px; top: 330px; opacity: 0; transition: all .3s ease-out; }
#contents .sec01 .txt { width: 744px; height: 123px; border-radius: 10px; padding: 15px 25px 15px 120px; position: absolute; left: 70px; top: 525px; background: url(/jp/contents/research/graphic/003/sec01_icon01.png) no-repeat 15px 25px #fff; opacity: 0; transition: all .3s ease-out; }
#contents .sec01 .txt p { font-size: 20px; line-height: 1.55; text-align: left; color: #333; }
#contents .sec01 .btm { width: 1029px; height: 203px; position: absolute; left: -40px; bottom: -200px; z-index: 100; opacity: 0; transition: all .8s ease-out; }
#contents .sec01.play .inner { background: url(/jp/contents/research/graphic/003/sec01_bg.png) no-repeat center 60px; }
#contents .sec01.play .ttl { opacity: 1; transition-delay: 0.5s; }
#contents .sec01.play .fig1 { top: 170px; opacity: 1; transform: scale(1, 1); transition-delay: 1.8s; }
#contents .sec01.play .fig2 { top: 230px; opacity: 1; transition-delay: 1.0s; }
#contents .sec01.play .fig3 { top: 230px; opacity: 1; transition-delay: 1.2s; }
#contents .sec01.play .fig4 { top: 430px; opacity: 1; transition-delay: 1.4s; }
#contents .sec01.play .txt { top: 625px; opacity: 1; transition-delay: 2.0s; }
#contents .sec01.play .btm { bottom: -100px; z-index: 100; opacity: 1; transition-delay: 2.4s; }
#contents .sec02 { background: #fff; padding: 120px 0 40px 0; margin-bottom: 0; }
#contents .sec02 .ttl { margin-bottom: 40px; opacity: 0; transition: all .3s ease-out; }
#contents .sec02 .ttl2 { margin-bottom: 60px; opacity: 0; transition: all .3s ease-out; }
#contents .sec02 .fig1 { width: 142px; height: 283px; position: absolute; right: 15px; bottom: 0; opacity: 0; transition: all .5s ease-out; }
#contents .sec02 .pie { width: 450px; height: 450px; margin: 0 auto; position: relative; margin-bottom: 50px; }
#contents .sec02 .pie .r1 { width: 147px; height: 128px; position: absolute; right: 60px; top: 50px; opacity: 0; transition: all .5s ease-out; transform: scale(0, 0); }
#contents .sec02 .pie .r2 { width: 241px; height: 117px; position: absolute; left: 95px; top: 270px; opacity: 0; transition: all .5s ease-out; transform: scale(0, 0); }
#contents .sec02 .pie .r3 { width: 141px; height: 93px; position: absolute; left: 55px; top: 105px; opacity: 0; transition: all .5s ease-out; transform: scale(0, 0); }
#contents .sec02 .pie .r4 { width: 330px; height: 91px; position: absolute; left: -130px; top: -25px; opacity: 0; transition: all .5s ease-out; transform: scale(0, 0); }
#contents .sec02 .textSection { background: #f8ecf1; margin-bottom: 20px; }
#contents .sec02 .textSection p { font-size: 18px; }
#contents .sec02.play .ttl { opacity: 1; transition-delay: 0.5s; }
#contents .sec02.play .ttl2 { opacity: 1; transition-delay: 0.5s; }
#contents .sec02.play .fig1 { bottom: 70px; opacity: 1; transition-delay: 1.8s; }
#contents .sec02.play .pie .r1 { transform: scale(1, 1); opacity: 1; transition-delay: 1.3s; }
#contents .sec02.play .pie .r2 { transform: scale(1, 1); opacity: 1; transition-delay: 1.6s; }
#contents .sec02.play .pie .r3 { transform: scale(1, 1); opacity: 1; transition-delay: 1.9s; }
#contents .sec02.play .pie .r4 { transform: scale(1, 1); opacity: 1; transition-delay: 2.2s; }
#contents .sec03.inner { width: 992px; padding: 40px 0; }
#contents .sec03 .ttl3 { margin-bottom: 60px; opacity: 0; transition: all .3s ease-out; }
#contents .sec03 .graph1, #contents .sec03 .graph2, #contents .sec03 .graph3 { width: 330px; float: left; position: relative; }
#contents .sec03 .graph1 .pie, #contents .sec03 .graph2 .pie, #contents .sec03 .graph3 .pie { width: 310px; height: 310px; margin-bottom: 20px; }
#contents .sec03 .graph1 .val, #contents .sec03 .graph2 .val, #contents .sec03 .graph3 .val { position: absolute; width: 97px; height: 75px; left: 165px; top: 13px; opacity: 0; transition: all .5s ease-out; }
#contents .sec03 .graph1 .img, #contents .sec03 .graph2 .img, #contents .sec03 .graph3 .img { position: absolute; width: 208px; height: 208px; left: 51px; top: 52px; transform: scale(0, 0); opacity: 0; transition: all 0.4s cubic-bezier(0.7, 0.6, 1, 0.1); }
#contents .sec03 .img.play { transform: scale(1, 1); opacity: 1; }
#contents .sec03 .ttl3.play, #contents .sec03 .val.play { opacity: 1; }
#contents .sec03.play .img { transform: scale(1, 1); opacity: 1; }
#contents .sec03.play .ttl3, #contents .sec03.play .val { opacity: 1; }
#contents .sec03.play .ranking { transition-delay: 0.1s; }
#contents .sec03.play .ttl3 { transition-delay: 0.5s; }
#contents .sec03.play .graph1 .val { transition-delay: 1.2s; }
#contents .sec03.play .graph2 .val { transition-delay: 1.8s; }
#contents .sec03.play .graph3 .val { transition-delay: 2.4s; }
#contents .sec03.play .graph1 .img { transition-delay: 1.4s; }
#contents .sec03.play .graph2 .img { transition-delay: 2.0s; }
#contents .sec03.play .graph3 .img { transition-delay: 2.6s; }
#contents .sec04 { background: #e5aabd; padding: 40px 0; }
#contents .sec04 .ttl { margin-bottom: 40px; }
#contents .sec04 .ranking .rank { margin-bottom: 40px; padding: 0 50px 0 80px; text-align: left; }
#contents .sec04 .ranking .rank ttl { opacity: 0; transition: .5s all ease-in; margin-bottom: 15px; }
#contents .sec04 .ranking .rank ttl.play { opacity: 1; }
#contents .sec04 .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: #333; line-height: 72px; }
#contents .sec04 .ranking .rank p span { font-size: 72px; }
#contents .sec04 .ranking .rank .bottle { position: relative; padding-left: 140px; display: inline-block; margin-right: 30px; }
#contents .sec04 .ranking .rank .bottle i { background: url(/jp/contents/research/graphic/003/sec03_item01.png) no-repeat left top; width: 68px; height: 105px; display: inline-block; margin-right: 4px; width: 0; transition: width .6s ease-out; }
#contents .sec04 .ranking .rank .bottle i.play { width: 68px; }
#contents .sec04 .ranking .rank .bottle i.half { width: 34px; width: 0; }
#contents .sec04 .ranking .rank .bottle i.one3rd { width: 20px; width: 0; }
#contents .sec04 .ranking .rank .bottle i.half.play { width: 34px; }
#contents .sec04 .ranking .rank .bottle i.one3rd.play { width: 20px; }
#contents .sec04 .ranking .rank .bottle + p { display: inline-block; }
#contents .textSection.s4 { background: #f9eaef; padding: 0; }
#contents .textSection.s4 p { background: url(/jp/contents/research/graphic/003/sec03_icon01.png) no-repeat left center; font-size: 18px; padding: 60px 0 60px 100px; }
#contents .sec04.play .ranking .rank .bottle i { width: 68px; }
#contents .sec04.play .ranking .rank .bottle i.half { width: 34px; }
#contents .sec04.play .ranking .rank .bottle i.one3rd { width: 20px; }
#contents .sec04.play .ranking .rank .bottle i:nth-child(1) { transition-delay: 0.8s; }
#contents .sec04.play .ranking .rank .bottle i:nth-child(2) { transition-delay: 1.3s; }
#contents .sec04.play .ranking .rank .bottle i:nth-child(3) { transition-delay: 1.6s; }
#contents .sec04.play .ranking .rank .bottle i:nth-child(4) { transition-delay: 1.9s; }
#contents .sec04.play .ranking .rank .bottle i:nth-child(5) { transition-delay: 2.1s; }
#contents .sec04.play .ranking .rank .bottle i:nth-child(6) { transition-delay: 2.4s; }
#contents .sec04.play .ranking .rank .bottle i:nth-child(7) { transition-delay: 2.0s; }
#contents .sec04.play .ranking .rank .bottle i:nth-child(8) { transition-delay: 2.5s; }
#contents .bgw { background: #fff; }
#contents .sec05 { background: #fff; padding: 50px 0; }
#contents .sec05 .ttl1 { margin-bottom: 40px; opacity: 0; transition: all .3s ease-out; }
#contents .sec05 .ttl2 { margin-bottom: 50px; opacity: 0; transition: all .3s ease-out; }
#contents .sec05 .graphs { width: 940px; height: 389px; position: relative; }
#contents .sec05 .graphs div { width: 940px; height: 389px; position: absolute; left: 0; top: 0; }
#contents .sec05 .graphs div.base { opacity: 0; transition: all .5s ease-in; }
#contents .sec05 .graphs div.value { opacity: 0; top: 0; transition: all .8s ease-in; }
#contents .sec05 .graphs div.result { opacity: 0; top: 100px; left: 0; transition: all .8s ease-in; }
#contents .sec05 .ttl1.play { opacity: 1; }
#contents .sec05 .ttl2.play { opacity: 1; }
#contents .sec05 .graphs div.value.play { opacity: 1; }
#contents .sec05 .graphs div.result.play { opacity: 1; top: 0; left: 0; }
#contents .sec05 .textSection { margin: 0; }
#contents .sec05.play .ttl1, #contents .sec05.play .ttl2 { opacity: 1; }
#contents .sec05.play .graphs div.base { opacity: 1; }
#contents .sec05.play .graphs div.value { opacity: 1; transition-delay: 0.8s; }
#contents .sec05.play .graphs div.result { opacity: 1; transition-delay: 1.6s; top: 0; left: 0; }
#contents .sec06 { padding-bottom: 50px; }
#contents .sec06 .ttl3 { margin-bottom: 70px; }
#contents .sec06 .average { margin-bottom: 30px; }
#contents .sec06 .ranking { clear: both; height: 600px; }
#contents .sec06 .ranking .rank { float: left; width: 33.3%; position: relative; height: 600px; }
#contents .sec06 .ranking .rank p { text-align: center; position: absolute; width: 100%; left: 0; font-size: 50px; font-weight: bold; font-family: "marunum"; }
#contents .sec06 .ranking .rank p span { font-size: 72px; }
#contents .sec06 .ranking .bar { background: #c0b27a; width: 230px; position: absolute; left: 45px; bottom: 70px; text-align: center; }
#contents .sec06 .ranking .bar img { position: absolute; left: 0; bottom: -70px; opacity: 0; transition: all .5s ease-out; }
#contents .sec06 .ranking .rank.first .bar { height: 0; transition: height 1.9s ease-out; }
#contents .sec06 .ranking .rank.second .bar { height: 0; transition: height 1.7s ease-out; }
#contents .sec06 .ranking .rank.third .bar { height: 0; transition: height 1.5s ease-out; }
#contents .sec06 .ranking .rank.first p { bottom: 507px; }
#contents .sec06 .ranking .rank.second p { bottom: 282px; }
#contents .sec06 .ranking .rank.third p { bottom: 252px; }
#contents .sec06 .text p { font-size: 18px; text-align: left; padding-top: 40px; }
#contents .sec06.play .ranking .rank.first .bar, #contents .sec06.play .ranking .rank.second .bar, #contents .sec06.play .ranking .rank.third { transition-delay: 0.6s; }
#contents .sec06.play .ranking .rank.first .bar { height: 450px; }
#contents .sec06.play .ranking .rank.second .bar { height: 225px; }
#contents .sec06.play .ranking .rank.third .bar { height: 125px; }
#contents .sec06.play .ranking .rank.first .bar img { transition-delay: 2s; }
#contents .sec06.play .ranking .rank.second .bar img { transition-delay: 1.8s; }
#contents .sec06.play .ranking .rank.third .bar img { transition-delay: 1.6s; }
#contents .sec07 { padding: 40px 0 150px; background: #e4a9bc; position: relative; margin-bottom: 50px; }
#contents .sec07 .inner { width: 992px; }
#contents .sec07 .ttl1 { margin-bottom: 40px; opacity: 0; transition: all .3s ease-out; }
#contents .sec07 .ttl2 { margin-bottom: 60px; opacity: 0; transition: all .3s ease-out; }
#contents .sec07 .reasons { height: 550px; }
#contents .sec07 .graph1, #contents .sec07 .graph2, #contents .sec07 .graph3 { width: 330px; float: left; position: relative; height: 500px; text-align: center; }
#contents .sec07 .graph2 { width: 330px; }
#contents .sec07 .graph1 .ttl, #contents .sec07 .graph2 .ttl, #contents .sec07 .graph3 .ttl { height: 75px; margin: 0; opacity: 0; transition: all .3s ease-out; }
#contents .sec07 .graph1 .pie, #contents .sec07 .graph2 .pie, #contents .sec07 .graph3 .pie { width: 310px; height: 400px; margin: 0 auto; }
#contents .sec07 .graph1 .val, #contents .sec07 .graph2 .val, #contents .sec07 .graph3 .val { position: absolute; width: 97px; height: 75px; left: 175px; top: 88px; opacity: 0; transition: all .5s ease-out; }
#contents .sec07 .graph1 .dsc, #contents .sec07 .graph2 .dsc, #contents .sec07 .graph3 .dsc { opacity: 0; transition: all .3s ease-out; }
#contents .sec07 .graph1 .img, #contents .sec07 .graph2 .img, #contents .sec07 .graph3 .img { position: absolute; width: 207px; height: 208px; left: 59px; top: 130px; transform: scale(0, 0); opacity: 0; transition: all 0.4s cubic-bezier(0.7, 0.6, 1, 0.1); }
#contents .sec07 .textSection p { font-size: 18px; }
#contents .sec07 .btm { position: absolute; left: 50%; bottom: -80px; margin-left: -515px; width: 1029px; height: 203px; }
#contents .sec07 .ttl1.play, #contents .sec07 .ttl2.play, #contents .sec07 .graph1 .val.play, #contents .sec07 .graph2 .val.play, #contents .sec07 .graph3 .val.play, #contents .sec07 .graph1 .ttl.play, #contents .sec07 .graph2 .ttl.play, #contents .sec07 .graph3 .ttl.play, #contents .sec07 .graph1 .dsc.play, #contents .sec07 .graph2 .dsc.play, #contents .sec07 .graph3 .dsc.play { opacity: 1; }
#contents .sec07 .graph1 .img.play, #contents .sec07 .graph2 .img.play, #contents .sec07 .graph3 .img.play { transform: scale(1, 1); opacity: 1; }
#contents .sec07.play .ttl1, #contents .sec07.play .ttl2, #contents .sec07.play .graph1 .val, #contents .sec07.play .graph2 .val, #contents .sec07.play .graph3 .val, #contents .sec07.play .graph1 .ttl, #contents .sec07.play .graph2 .ttl, #contents .sec07.play .graph3 .ttl, #contents .sec07.play .graph1 .dsc, #contents .sec07.play .graph2 .dsc, #contents .sec07.play .graph3 .dsc { opacity: 1; }
#contents .sec07.play .graph1 .img, #contents .sec07.play .graph2 .img, #contents .sec07.play .graph3 .img { transform: scale(1, 1); opacity: 1; }
#contents .sec07.play .ttl1 { transition-delay: 0.5s; }
#contents .sec07.play .ttl2 { transition-delay: 0.6s; }
#contents .sec07.play .graph1 .val { transition-delay: 1.2s; }
#contents .sec07.play .graph1 .img { transition-delay: 1.3s; }
#contents .sec07.play .graph1 .ttl { transition-delay: 2.2s; }
#contents .sec07.play .graph1 .dsc { transition-delay: 3.4s; }
#contents .sec07.play .graph2 .val { transition-delay: 1.6s; }
#contents .sec07.play .graph2 .img { transition-delay: 1.7s; }
#contents .sec07.play .graph2 .ttl { transition-delay: 2.6s; }
#contents .sec07.play .graph2 .dsc { transition-delay: 3.8s; }
#contents .sec07.play .graph3 .val { transition-delay: 1.9s; }
#contents .sec07.play .graph3 .img { transition-delay: 2.0s; }
#contents .sec07.play .graph3 .ttl { transition-delay: 3.0s; }
#contents .sec07.play .graph3 .dsc { transition-delay: 4.2s; }
#contents .sec08 { padding: 60px 0 0; position: relative; height: 540px; overflow: hidden; }
#contents .sec08 .ttl3 { margin-bottom: 80px; opacity: 0; transition: all .3s ease-out; }
#contents .sec08 .rank { width: 400px; height: 254px; position: absolute; left: 120px; top: 200px; opacity: 0; transition: all .3s ease-out; }
#contents .sec08 .fig1 { width: 277px; height: 398px; position: absolute; right: 60px; bottom: -400px; opacity: 0; transition: all .8s ease-in; }
#contents .sec08 .fig2 { width: 116px; height: 226px; position: absolute; right: 350px; bottom: -230px; opacity: 0; transition: all .6s ease-in; }
#contents .sec08.play .ttl3 { opacity: 1; transition-delay: 0.5s; }
#contents .sec08.play .rank { opacity: 1; transition-delay: 1s; }
#contents .sec08.play .fig1 { bottom: -10px; opacity: 1; transition-delay: 1s; }
#contents .sec08.play .fig2 { bottom: -1px; opacity: 1; transition-delay: 1.5s; }

@media screen and (max-width: 767px) {
#contents .sec02 .textSection p{font-size:32px;}
body.like-iphone #contents .sec01 .txt p{font-size:9px;}
body.like-iphone #contents .sec02 .textSection p{font-size:16px !important;}
body.like-iphone #contents .sec04 .ranking .rank p{font-size:16px;}
body.like-iphone #contents .sec04 .ranking .rank p span{font-size:28px;}
body.like-iphone #contents .sec06 .ranking .rank p{font-size:16px;}
body.like-iphone #contents .sec06 .ranking .rank p span{font-size:28px;}
}