@charset "utf-8";

#contents .num{font-family: 'Cabin', sans-serif;}
/* body{font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",sans-serif;} */
#contents{min-width:940px; color:#fff; -webkit-text-size-adjust:100%;  background:#fffde7; font-size:14px; color:#333;}
#contents .section .inner{width:940px; margin:0 auto; position:relative; clear:both;}
#contents .section .inner:after{content:''; display:block; clear:both;}
#contents .section h1{width:680px; margin:0 auto;}
#contents .section h2,
#contents .section h3{margin-bottom:30px; opacity:1;}
#contents .section h2 img,
#contents .section h3 img{width:auto; height:auto;}
#contents .section img{max-width:940px;}

#contents .item{opacity:0; transition:all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275); top:50px;}
#contents .item.play{opacity:1; top:0;}
#contents .fig{width:940px; margin:0 auto; position:relative;}
#contents .fig img{position:absolute; left:0; top:0; z-index:1; display:block;}
#contents .fig img.placeholder{position:relative; left:auto; top:auto; z-index:0;}

#contents .section .copy{width:768px; border-radius:14px; padding:40px 40px 40px 120px; background:url(/jp/contents/research/graphic/007/kani.png) no-repeat 10px center #fff4c9; margin:30px auto; text-align:left;} 

#contents .sec00{background:#3fbdf5 url(/jp/contents/research/graphic/007/sec00bg01.png) 0 0; animation-name:bubble; animation-duration:10s; animation-timing-function:linear; animation-iteration-count:infinite;}
#contents .sec00 .inner .item.item01{top:50px;}
#contents .sec00 .inner .item.item01.play{top:0;}

#contents .sec00 .wave{height:100px; position:relative;}
#contents .sec00 .wave div{height:100px; background-position:left top; background-repeat:repeat-x; width:100%; position:absolute; left:0; top:0;}
#contents .sec00 .wave div.w1{background-image:url(/jp/contents/research/graphic/007/wave1.png); animation-name:wave1; animation-duration:10s; animation-timing-function:linear; animation-iteration-count:infinite;}
#contents .sec00 .wave div.w2{background-image:url(/jp/contents/research/graphic/007/wave2.png); animation-name:wave2; animation-duration:10s; animation-timing-function:linear; animation-iteration-count:infinite;}
#contents .sec00 .wave div.w3{background-image:url(/jp/contents/research/graphic/007/wave3.png); animation-name:wave3; animation-duration:10s; animation-timing-function:linear; animation-iteration-count:infinite;}
#contents .sec00 .text{background:#fffde7; padding:30px 0; position:relative; z-index:1;}
#contents .sec00 .text p{width:940px; background:url(/jp/contents/research/graphic/007/sec00item03.png) no-repeat center center; min-height:200px; padding-right:300px; margin:0 auto; text-align:left;}

#contents .sec01{background:url(/jp/contents/research/graphic/007/wave4.png) repeat-x left top; padding:20px 0 30px;}
#contents .sec01 .inner .item{top:50px;}
#contents .sec01 .inner .item.item01{top:0;}
#contents .sec01 .inner .item.play{top:0;}

#contents .sec02{background:url(/jp/contents/research/graphic/007/sec02bg01.png) repeat-x left top; padding:40px 0;}
#contents .sec02 .inner .item.item02{left:-50px;}
#contents .sec02 .inner .item.item03{left:50px;}
#contents .sec02 .inner .item.item02.play{left:0;}
#contents .sec02 .inner .item.item03.play{left:0;}

#contents .sec03{padding:40px 0;}
#contents .sec03 .inner .item{}
#contents .sec03 .inner .item.item02{top:-150px;}
#contents .sec03 .inner .item.item03{top:-250px;}
#contents .sec03 .inner .item.item04{top:-350px;}
#contents .sec03 .inner .item.item02.play,
#contents .sec03 .inner .item.item03.play,
#contents .sec03 .inner .item.item04.play{top:0;}

#contents .sec04{background:url(/jp/contents/research/graphic/007/wave4.png) repeat-x left top; padding:20px 0 30px;}
#contents .sec04 .inner .item.item02{top:-150px;}
#contents .sec04 .inner .item.item03{top:-250px;}
#contents .sec04 .inner .item.item04{top:-350px;}
#contents .sec04 .inner .item.item02.play,
#contents .sec04 .inner .item.item03.play,
#contents .sec04 .inner .item.item04.play{top:0;}

#contents .sec05{background:url(/jp/contents/research/graphic/007/wave4.png) repeat-x left top; padding:20px 0 30px;}
#contents .sec05 .inner .item.item01{top:400px;}
#contents .sec05 .inner .item.item01.play{top:0;}

#contents .sec06{padding:0 0 40px;}
#contents .sec06 .inner .item.item01{top:-400px;}
#contents .sec06 .inner .item.item01.play{top:0;}

#contents .sec07{background:url(/jp/contents/research/graphic/007/wave4.png) repeat-x left top; padding:20px 0 30px;}
#contents .sec07 .inner .item.item02{top:-100px;}
#contents .sec07 .inner .item.item03{top:-200px;}
#contents .sec07 .inner .item.item04{top:-100px;}
#contents .sec07 .inner .item.item05{top:-200px;}
#contents .sec07 .inner .item.item02.play,
#contents .sec07 .inner .item.item03.play,
#contents .sec07 .inner .item.item04.play,
#contents .sec07 .inner .item.item05{top:0;}

#contents .sec08{background:url(/jp/contents/research/graphic/007/wave4.png) repeat-x left top; padding:20px 0 30px;}
#contents .sec08 .fish{position:absolute; left:0; top:0; width:100%; height:100%;}
#contents .sec08 .fish div{float:left; position:relative; left:auto; top:auto; height:100%; background-position:center center; background-repeat:no-repeat; background-size:40%;}
#contents .sec08 .fish div.r2{width:30.8%; background-image:url(/jp/contents/research/graphic/007/sec08item03.png);}
#contents .sec08 .fish div.r1{width:38.4%; background-image:url(/jp/contents/research/graphic/007/sec08item04.png);}
#contents .sec08 .fish div.r3{width:30.8%; background-image:url(/jp/contents/research/graphic/007/sec08item02.png);}

#contents .sec08 .inner .item.item01{opacity:1}
#contents .sec08 .inner .item.item01.play{top:0;}
#contents .sec08 .fish div.item{opacity:1;}
#contents .sec08 .fish div.item.play{background-size:100%;}
#contents .sec08 .inner .item.item05,
#contents .sec08 .inner .item.item06,
#contents .sec08 .inner .item.item07{top:-60px;}
#contents .sec08 .inner .item.item08{top:300px;}
#contents .sec08 .inner .item.item05.play,
#contents .sec08 .inner .item.item06.play,
#contents .sec08 .inner .item.item07.play,
#contents .sec08 .inner .item.item08.play{top:0;}


#contents .sec09{background:url(/jp/contents/research/graphic/007/wave4.png) repeat-x left top; padding:20px 0 60px;}
#contents .sec09 .inner .item.item01{top:300px;}
#contents .sec09 .inner .item.item02{top:-60px;}
#contents .sec09 .inner .item.item03{top:-120px;}
#contents .sec09 .inner .item.item04{top:-180px;}

#contents .sec09 .inner .item.item01.play,
#contents .sec09 .inner .item.item02.play,
#contents .sec09 .inner .item.item03.play,
#contents .sec09 .inner .item.item04.play{top:0;}



@media screen and (max-width: 767px){	
#contents {width:100% !important; height: auto; min-width:0;}
#contents .section .inner,
#contents .fig{width:auto; padding:0; margin:0 10px;}
#contents .section h1{width:100%; margin:0 auto; padding:0 10px;}
#contents .section .copy{border-radius:10px; padding:70px 15px 15px 15px; width:auto; margin:10px 0; background:url(/jp/contents/research/graphic/007/kani.png) no-repeat center 10px #fff4c9; background-size:50px;} 
#contents .section .copy p{line-height:1.4;}
#contents .fig img{width:100%; height:auto;}
#contents .fig img.placeholder{width:100%; height:auto;}
#contents .section h2,
#contents .section h3{margin-bottom:15px; opacity:1;}
#contents .section h2 img,
#contents .section h3 img{width:100%; height:auto;}
#contents .sec00 .wave{height:50px;}
#contents .sec00 .wave div{height:50px;}
#contents .sec00 .wave div.w1,
#contents .sec00 .wave div.w2,
#contents .sec00 .wave div.w3{background-size:auto 50px;}
#contents .sec00 .text{padding:10px 0;}
#contents .sec00 .text p{width:100%; background:url(/jp/contents/research/graphic/007/sec00item03.png) no-repeat center center; min-height:0; padding:0 15px 15px; line-height:1.5;}
#contents .sec05{padding-bottom:10px;}
#contents .sec09{padding-bottom:30px;}
#contents .sec02{padding-bottom:0;}
#contents .sec00{background-size:200vw;}
#contents .section .copy p{font-size:32px;}
#contents .sec00 .text p{padding-right:240px; font-size:32px;}
#contents .sec02{background-size:30vw auto;}
body.like-iphone #contents .sec02{background-size:11.5vw auto;}
body.like-iphone #contents .section .copy p{font-size:16px;}
body.like-iphone #contents .sec00 .text p{padding-right:240px; font-size:16px;}

}



@keyframes wave1{
	from{background-position:0 0;}
	to  {background-position:100px 0;}
}
@keyframes wave2{
	from{background-position:0 0;}
	to  {background-position:200px 0;}
}
@keyframes wave3{
	from{background-position:0 0;}
	to  {background-position:300px 0;}
}
@keyframes bubble{
	from{background-position:0 0;}
	to  {background-position:0 -100%;}
}