@charset "utf-8";
/* body{font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif; color:#333333;} */
#contents{width:100%; color:#fff; -webkit-text-size-adjust:100%;}
#contents p{font-size:14px; line-height:32px; color:#333; -moz-font-feature-settings:"palt"; -webkit-font-feature-settings:"palt"; font-feature-settings:"palt";}
#contents .section h3{opacity:1;}
#contents .section .parts{position:relative; width:940px; margin:0 auto;}
#contents .section img{max-width:940px; width:100%; height:auto; position:relative; z-index:10;}
#contents .section img + img{position:absolute; left:0; top:0;}
#contents .section .graph{position:absolute; left:0; top:0; width:940px; z-index:0; text-align:center;}
#contents .text{width:768px; margin:0 auto; padding:25px 30px 25px 120px; text-align:left; background:url(/jp/contents/research/graphic/010/shellfish.png) no-repeat 26px center; border:#64b5f6 dotted 4px; border-radius:15px;}

#contents .section .pc-item{display:block;}
#contents .section .sp-item{display:none;}

/* effect */
.parts img{opacity:0; transition:1s cubic-bezier(0.215, 0.61, 0.355, 1),transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); transform-origin:center center;}
.fadein img {opacity:1;}
.parts img:nth-of-type(1){transition-delay:0.5s;}
.parts img:nth-of-type(2){transition-delay:1.0s;}
.parts img:nth-of-type(3){transition-delay:1.5s;}
.parts img:nth-of-type(4){transition-delay:2.0s;}
.parts img:nth-of-type(5){transition-delay:2.5s;}
.parts img:nth-of-type(6){transition-delay:3.0s;}


/* sec01 */
#contents .sec01{position:relative; height:738px; padding-top:0; background:#29b6f6;}
#contents .sec01:before{content:''; position:absolute; top:0; left:0; width:100%; height:549px; background:url(/jp/contents/research/graphic/010/sec01bg01.png) no-repeat center top; z-index:10; opacity:0; transition:1s cubic-bezier(0.215, 0.61, 0.355, 1),transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);}
#contents .sec01:after{content:''; position:absolute; top:0; left:0; width:100%; height:549px; background:url(/jp/contents/research/graphic/010/sec01bg02.png) no-repeat center top; z-index:10; opacity:0; transition:1s cubic-bezier(0.215, 0.61, 0.355, 1),transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);}
#contents .sec01.fadein:before{opacity:1;}
#contents .sec01.fadein:after{opacity:1;}
#contents .sec01 .parts img{z-index:11;}
#contents .sec01 .parts img:first-of-type{transition-delay:0.5s;}
#contents .sec01 .parts img:nth-of-type(2){transition-delay:2s; transform:translate(0,50px); transition-duration:.3s; transition-timing-function:ease-in-out;}
#contents .sec01.fadein .parts img:nth-of-type(2){transform:translate(0,0);}
#contents .sec01 .text.memo{position:absolute; top:404px; right:0; left:0; width:768px; margin:auto; padding:32px 150px 30px 34px; background:url(/jp/contents/research/graphic/010/fish.png) 650px center no-repeat; border:#b3e5fc dotted 2px;  z-index:13; opacity:0; transition:1s cubic-bezier(0.215, 0.61, 0.355, 1),transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); transition-delay:1s;}
#contents .sec01 .text.memo p{color:#fff;}
#contents .sec01.fadein .text.memo{opacity:1;}
/*波*/
#contents .sec01 .wave{position:absolute; top:353px; width:100%; height:350px; z-index:10;}
#contents .sec01 .wave div{position:absolute; left:0; top:0; width:100%; height:350px; background-position:left top; background-repeat:repeat-x; animation-timing-function:linear; animation-iteration-count:infinite;}
#contents .sec01 .wave div.w01{background-image:url(/jp/contents/research/graphic/010/wave01.png); animation-name:wave01; animation-duration:20s;}
#contents .sec01 .wave div.w02{background-image:url(/jp/contents/research/graphic/010/wave02.png); animation-name:wave02; animation-duration:10s;}
#contents .sec01 .wave div.w03{background-image:url(/jp/contents/research/graphic/010/wave03.png); animation-name:wave03; animation-duration:30s;}
#contents .sec01 .wave div.w04{background-image:url(/jp/contents/research/graphic/010/wave04.png); animation-name:wave04; animation-duration:5s;}
#contents .sec01 .wave div.w01,
#contents .sec01 .wave div.w02,
#contents .sec01 .wave div.w03{top:240px; height:150px; z-index:1;}
@keyframes wave01{
	from{background-position:0 0;}
	to  {background-position:1400px 0;}
}
@keyframes wave02{
	from{background-position:0 0;}
	to  {background-position:1400px 0;}
}
@keyframes wave03{
	from{background-position:0 0;}
	to  {background-position:1400px 0;}
}
@keyframes wave04{
	from{background-position:0 0;}
	to  {background-position:70px 0;}
}

/* sec02 */
#contents .sec02{margin-top:-32px; padding:56px 0 83px; background:#fffde7;}
#contents .sec02 h2{margin-bottom:44px;}
#contents .sec02 .parts img{transform:translate(0,30px);}
#contents .sec02 .fadein .parts img{transform:translate(0,0);}
#contents .sec02 .text{margin-top:60px;}

/* sec03 */
#contents .sec03{position:relative; padding:54px 0 114px; background:url(/jp/contents/research/graphic/010/bg.jpg) repeat;}
#contents .sec03:before{content:''; position:absolute; top:0; left:0; width:100%; height:17px; background:#fff url(/jp/contents/research/graphic/010/border.png) repeat-x left 1px / 30px 10px;}
#contents .sec03:after{content:''; position:absolute; bottom:0; left:0; width:100%; height:28px; background:#fff url(/jp/contents/research/graphic/010/border.png) repeat-x left 9px / 30px 10px;}
#contents .sec03 h2{margin-bottom:31px;}
#contents .sec03 h2 + p{margin-bottom:12px; color:#00bcd4; line-height:28px; font-weight:bold;}
#contents .sec03 .parts img:nth-of-type(2),
#contents .sec03 .parts img:nth-of-type(4){transform:translate(0,30px);}
#contents .sec03 .parts img:nth-of-type(3){transform:translate(0,-30px);}
#contents .sec03 .fadein .parts img{transform:translate(0,0);}
#contents .sec03 .text{margin-top:81px; background-color:#fff;}

/* sec04 */
#contents .sec04{padding:46px 0 90px; background:#e0f7fa;}
#contents .sec04 h2{margin-bottom:68px;}
#contents .sec04 h3{margin-bottom:40px;}
#contents .sec04-1{margin-bottom:77px;}
#contents .sec04-1 .parts img:first-of-type{opacity:1; z-index:11;}
#contents .sec04-1 .parts img:nth-of-type(2),
#contents .sec04-1 .parts img:nth-of-type(3),
#contents .sec04-1 .parts img:nth-of-type(4){transform:translate(0,80px);}
#contents .sec04-1.fadein .parts img:nth-of-type(2),
#contents .sec04-1.fadein .parts img:nth-of-type(3),
#contents .sec04-1.fadein .parts img:nth-of-type(4){transform:translate(0,0);}
#contents .sec04-2 .parts img{transform:translate(0,30px);}
#contents .sec04-2.fadein .parts img{transform:translate(0,0);}
#contents .sec04 .text{margin-top:70px;}

/* sec05 */
#contents .sec05{position:relative; padding:79px 0 96px; background:url(/jp/contents/research/graphic/010/bg.jpg) repeat;}
#contents .sec05:before{content:''; position:absolute; top:0; left:0; width:100%; height:26px; background:#fff url(/jp/contents/research/graphic/010/border.png) repeat-x left 6px / 30px 10px;}
#contents .sec05:after{content:''; position:absolute; bottom:0; left:0; width:100%; height:19px; background:#fff url(/jp/contents/research/graphic/010/border.png) repeat-x left 1px / 30px 10px;}
#contents .sec05 h2{margin-bottom:83px;}
#contents .sec05 h3:first-of-type{margin-bottom:47px;}
#contents .sec05 h3:nth-of-type(2){margin-bottom:35px;}
#contents .sec05-1{margin-bottom:79px;}
#contents .sec05-1 .parts img:nth-of-type(4),
#contents .sec05-1 .parts img:nth-of-type(5),
#contents .sec05-1 .parts img:nth-of-type(6){transform:translate(0,30px);}
#contents .sec05-1.fadein .parts img:nth-of-type(4),
#contents .sec05-1.fadein .parts img:nth-of-type(5),
#contents .sec05-1.fadein .parts img:nth-of-type(6){transform:translate(0,0);}
#contents .sec05-2 .parts img:nth-of-type(1),
#contents .sec05-2 .parts img:nth-of-type(2){opacity:1;}
#contents .sec05-2 .parts img:nth-of-type(3),
#contents .sec05-2 .parts img:nth-of-type(4){transform:translate(0,-30px);}
#contents .sec05-2.fadein .parts img:nth-of-type(3),
#contents .sec05-2.fadein .parts img:nth-of-type(4){transform:translate(0,0);}
#contents .sec05-2 .graph{width:359px; height:359px; left:2px; top:197px;}
#contents .sec05-2 .graph + .graph{top:207px; left:469px;}
#contents .sec05 .text{margin-top:81px; background-color:#fff;}

/* sec06 */
#contents .sec06{position:relative; padding:93px 0 65px; background:linear-gradient(to bottom, #e0f7fa 65%,#fffde7 35%);}
#contents .sec06:before{content:''; position:absolute; top:498px; left:0; width:100%; height:365px; background:url(/jp/contents/research/graphic/010/sec06bg.png) no-repeat center; z-index:10;}
#contents .sec06 h2{margin-bottom:67px;}
#contents .sec06 .top{position:relative; z-index:100;}
#contents .sec06 .text{position:relative; margin-top:77px; background-color:#fff; z-index:10;}
/*波*/
#contents .sec06 .wave{position:absolute; top:680px; width:100%; height:93px;}
#contents .sec06 .wave div{position:absolute; left:0; top:0; width:100%; height:93px; background-position:left top; background-repeat:repeat-x;}
#contents .sec06 .wave div.w01{background-image:url(/jp/contents/research/graphic/010/wave05.png);}
#contents .sec06 .wave div.w02{background-image:url(/jp/contents/research/graphic/010/wave06.png); background-position:180px top;}
#contents .sec06 .wave div.w03{background-image:url(/jp/contents/research/graphic/010/wave07.png); background-position:100px top; z-index:2;}
#contents .sec06 .wave div.w04{background-image:url(/jp/contents/research/graphic/010/wave08.png); z-index:1;}
#contents .sec06 .wave div.w05{background-image:url(/jp/contents/research/graphic/010/wave09.png);}



@media screen and (max-width:767px){
/*
	mobile 
*/
#contents{min-width:inherit; border:none; overflow:hidden;}
#contents p{font-size:2.813vw; line-height:2;}
#contents .section .parts{width:100%;}
#contents .section img{max-width:100%;}
#contents .section .graph{width:100%;}
#contents .section{padding:10.416667vw 0!important;}
#contents .section h2{margin-bottom:5.215124vw!important;}
#contents .section h3{margin-bottom:4.563233vw!important;}
#contents .text{width:94%; margin:5.208333vw auto 0!important; padding:17.731421vw 2.833333vw 9.114583vw; border-radius:1.953125vw; background:url(/jp/contents/research/graphic/010/shellfish.png) no-repeat center 3.40625vw / 6.519vw auto;}

#contents .section .pc-item{display:none;}
#contents .section .sp-item{display:block;}


/* sec01 */
#contents .sec01{height:119.948vw; padding:0!important;}
#contents .sec01:before{height:88.527vw; background:url(/jp/contents/research/graphic/010/sec01bg01-sp.png) no-repeat left center / 100% auto;}
#contents .sec01:after{height:88.527vw; background:url(/jp/contents/research/graphic/010/sec01bg02-sp.png) no-repeat left center / 100% auto;}
#contents .sec01 h1 img{max-width:120%; width:120%; left:-10%;}
#contents .sec01 .parts img:nth-of-type(2){top:25%; left:-35%; transform:translate(0,7.813vw);}
#contents .sec01 .text.memo{top:60%; width:94%; margin:0 auto!important; padding:17.731421vw 2.833333vw 4.688vw; /*background-color:#1e88e5;*/ background-size:7.823vw auto; background-position:center 4.302477vw;}
/*波*/
#contents .sec01 .wave{top:61.93vw; height:70.313vw;}
#contents .sec01 .wave div{height:100%; background-size:auto 100%;}
#contents .sec01 .wave div.w01,
#contents .sec01 .wave div.w02,
#contents .sec01 .wave div.w03{top:auto; bottom:-13.281vw; height:20.313vw;}

/* sec02 */
#contents .sec02{margin-top:17.188vw;}
#contents .sec02 .parts img{transform:translate(0,4.688vw);}
#contents .sec02 .fadein .parts img{transform:translate(0,0);}

/* sec03 */
#contents .sec03:before{height:2.656vw; background-position:left 0.156vw; background-size:4.688vw 1.563vw;}
#contents .sec03:after{height:4.375vw; background-position:left 1.406vw; background-size:4.688vw 1.563vw;}
#contents .sec03 h2 + p{width:94%; margin:0 auto 2.344vw; text-align:left; line-height:2;}
#contents .sec03 .parts img:nth-of-type(2),
#contents .sec03 .parts img:nth-of-type(4){transform:translate(0,4.688vw);}
#contents .sec03 .parts img:nth-of-type(3){transform:translate(0,-4.688vw);}
#contents .sec03 .fadein .parts img{transform:translate(0,0);}

/* sec04 */
#contents .sec04-1{margin-bottom:12.5vw;}
#contents .sec04-1 .parts img:nth-of-type(2),
#contents .sec04-1 .parts img:nth-of-type(3),
#contents .sec04-1 .parts img:nth-of-type(4){transform:translate(0,12.5vw);}
#contents .sec04-1.fadein .parts img:nth-of-type(2),
#contents .sec04-1.fadein .parts img:nth-of-type(3),
#contents .sec04-1.fadein .parts img:nth-of-type(4){transform:translate(0,0);}
#contents .sec04-2 .parts img{transform:translate(0,4.688vw);}
#contents .sec04-2.fadein .parts img{transform:translate(0,0);}

/* sec05 */
#contents .sec05:before{height:4.063vw; background-position:left 0.938vw; background-size:4.688vw 1.563vw;}
#contents .sec05:after{height:2.969vw; background-position:left 0.156vw; background-size:4.688vw 1.563vw;}
#contents .sec05-1{margin-bottom:12.5vw;}
#contents .sec05-1 .parts img:nth-of-type(4),
#contents .sec05-1 .parts img:nth-of-type(5),
#contents .sec05-1 .parts img:nth-of-type(6){transform:translate(0,4.688vw);}
#contents .sec05-1.fadein .parts img:nth-of-type(4),
#contents .sec05-1.fadein .parts img:nth-of-type(5),
#contents .sec05-1.fadein .parts img:nth-of-type(6){transform:translate(0,0);}
#contents .sec05-2 .parts img:nth-of-type(3),
#contents .sec05-2 .parts img:nth-of-type(4){transform:translate(0,-4.688vw);}
#contents .sec05-2.fadein .parts img:nth-of-type(3),
#contents .sec05-2.fadein .parts img:nth-of-type(4){transform:translate(0,0);}
#contents .sec05-2 .graph{width:40%; height:40%; left:1.5%; top:15.6%;}
#contents .sec05-2 .graph + .graph{top:16%; left:48%;}

/* sec06 */
#contents .sec06{background:linear-gradient(to bottom, #e0f7fa 70vw,#fffde7 30vw);}
#contents .sec06:before{top:0; height:109.375vw; background:url(/jp/contents/research/graphic/010/sec06bg-sp.png) no-repeat center / 100% auto;}
/*波*/
#contents .sec06 .wave{top:69.531vw; height:7.813vw;}
#contents .sec06 .wave div{height:7.813vw; background-size:auto 100%;}


/* resize */
#contents .section:not(.sec01) .parts img{width:94%}
#contents .section:not(.sec01) img + img{left:3%;}

}



@media screen and (max-width:641px){
/*
	mobile 
*/
#contents p {font-size:3.2vw;}

/*sec01*/
#contents .sec01 .wave{height:78.906vw;}

/*sec02*/
#contents .sec02{margin-top:25vw;}

/*sec06*/
#contents .sec06 .wave:before{height:93.047vw;}

}