@charset "utf-8";
/* body{font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif; color:#333333;} */
#pageBody{background:url(/jp/contents/research/graphic/011/bg.png);}

#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 .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/011/shrimp.png) no-repeat 25px 35px #ffd0b4; border-radius:15px;}

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

#contents .fadein .parts img{transform:translate(0,0);}

/* effect */
#contents .section .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;}
#contents .section .parts img.none{opacity:1; transition:none;}

#contents .section .parts img.dl03{transition-delay:0.3s;}
#contents .section .parts img.dl05{transition-delay:0.5s;}
#contents .section .parts img.dl05{transition-delay:0.8s;}
#contents .section .parts img.dl10{transition-delay:1.0s;}
#contents .section .parts img.dl15{transition-delay:1.5s;}
#contents .section .parts img.dl20{transition-delay:2.0s;}
#contents .section .parts img.dl25{transition-delay:2.5s;}
#contents .section .parts img.dl30{transition-delay:3.0s;}
#contents .section .parts img.dl35{transition-delay:3.5s;}
#contents .section .parts img.dl40{transition-delay:4.0s;}
#contents .section .parts img.dl45{transition-delay:4.5s;}
#contents .section .parts img.dl50{transition-delay:5.0s;}

#contents .section .parts img.of030{top:30px;}
#contents .section .parts img.of050{top:50px;}
#contents .section .parts img.of100{top:100px;}
#contents .section .parts img.of150{top:150px;}
#contents .section .parts img.of200{top:200px;}
#contents .section .parts img.of-030{top:-30px;}
#contents .section .parts img.of-050{top:-50px;}
#contents .section .parts img.of-100{top:-100px;}
#contents .section .parts img.of-150{top:-150px;}
#contents .section .parts img.of-200{top:-200px;}

#contents .section .parts img.dr03{transition-duration:0.3s;}
#contents .section .parts img.dr05{transition-duration:0.5s;}
#contents .section .parts img.dr10{transition-duration:1.0s;}
#contents .section .parts img.dr15{transition-duration:1.5s;}

.parts img.reverse{transition:display .5s ease; transition-delay:1s;}
.fadein img.reverse{display:none;}

#contents .section.fadein .parts img,
#contents .section .fadein .parts img{opacity:1; top:0 !important;}

#contents .animation .parts img{position:absolute; left:0; top:0;}


/* sec00 */
#contents .sec00{position:relative; height:630px; padding-top:0; background:url(/jp/contents/research/graphic/011/sec0_bg.png) repeat-x bottom #fff8e1; margin-bottom:80px;}
#contents .sec00 h1{position:absolute; width:540px; height:172px; top:60px; left:50%; margin-left:-270px;}
#contents .sec00 .parts{width:920px; height:340px; margin:0 auto; top:53px;}
#contents .sec00 .parts img{position:absolute; left:0; top:0;}
#contents .sec00 .parts img:nth-child(1){z-index:4;}
#contents .sec00 .parts img:nth-child(2){z-index:3;}
#contents .sec00 .parts img:nth-child(3){z-index:2;}
#contents .sec00 .parts img:nth-child(4){z-index:1;}
#contents .sec00 .text.memo{position:absolute; top:404px; right:0; left:0; padding:25px 150px 25px 30px; background:url(/jp/contents/research/graphic/011/note.png) 650px center no-repeat #ff7d54; 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 .sec00 .text.memo p{color:#fff;}
#contents .sec00.fadein .text.memo{opacity:1;}

/* sec01 */
#contents h2.s01{margin:0 auto 10px; width:720px;}
#contents .sec0101 .parts{height:940px;}
#contents .sec0101 .parts img.bottom{top:550px !important;}
#contents .sec0101.fadein .parts img.bottom{top:520px !important;}
#contents .sec0102 .parts.graph1{padding:60px 0 20px; width:940px; height:780px;}
#contents .sec0102 .graph{height:480px; width:480px; left:50%; margin-left:-240px; top:145px;}
#contents .sec0103 .parts{height:560px;}
#contents .sec0103 .first_or_last.parts{width:710px; height:490px;}
#contents .sec01{padding:60px 0;}

/* sec02 */
#contents h2.s02{margin:0 auto 10px; width:720px;}
#contents .sec0201{padding:60px 0; height:550px;}
#contents .sec0201 .parts.graph2{height:410px;}
#contents .sec0201 .graph{height:360px; width:360px; left:50%; margin-left:-180px; top:55px;}
#contents .sec0202 .fish{height:500px; padding:40px 0;}
#contents .sec0203 .amount{height:690px; padding:40px 0;}
#contents .sec02{padding:60px 0;}
#contents h3.s02{width:542px; margin:70px auto 10px;}

/* sec03 */
#contents .sec03{padding:60px 0;}
#contents .sec03 .parts{height:630px;}
#contents .sec03 h2{margin:0 auto 30px; width:720px;}
#contents .sec03 .parts img{position:absolute; left:0; top:0;}
#contents .sec03 .parts{background:url(/jp/contents/research/graphic/011/sec3_bg.png) no-repeat center bottom; margin-bottom:80px;}

/* sec04 */
#contents .sec04{padding:60px 0;}
#contents .sec04 h2{margin:0 auto 30px; width:720px;}
#contents .sec04 .parts{height:584px;}
#contents .sec04 .animation{padding:0 0 60px;}
#contents .sec04 .parts img.fade{transition:opacity .4s ease; transition-delay:.8s;}
#contents .sec04.fadein .parts img.fade{opacity:0;}


@media screen and (max-width:767px){
/*
	mobile 
*/
#contents{min-width:inherit; border:none; overflow:hidden;}
#contents p{font-size:14px; line-height:1.65;}
#contents .section .parts{width:100%;}
#contents .section img{max-width:100%;}
#contents .section .graph{width:100%;}
#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:60px 15px 15px; border-radius:15px; background:url(/jp/contents/research/graphic/011/shrimp.png) no-repeat center 10px #ffd0b4; background-size:30px auto;}
#contents .pc-item{display:none;}
#contents .sp-item{display:block;}

/* sec00 */
#contents .sec00{height:auto; background:url(/jp/contents/research/graphic/011/sec0_bg.png) repeat-x left 54.35vw #fff8e1; background-size:auto 65.55vw; padding-bottom:15px; margin-bottom:30px;}
#contents .sec00 h1{position:relative; width:auto; height:auto; top:auto; left:auto; margin-left:0; padding:30px 15px 0; margin-bottom:-6vw;}
#contents .sec00 .parts{width:auto; height:auto; top:auto; margin-bottom:0;}
#contents .sec00 .parts::before{content:''; display:block; width:100%; height:44vw;}
#contents .sec00 .parts img{position:absolute; left:15px; top:0; width:calc(100% - 30px); height:auto;}
#contents .sec00 .text.memo{position:relative; top:auto; right:auto; left:auto; padding:70px 15px 15px 15px; background-position:center 15px; background-size:50px auto;}

/* sec01 */
#contents h2.s01{margin:0 10px 10px; width:auto;}
#contents .sec0101sp1 .parts,
#contents .sec0101sp2 .parts{height:auto;}
#contents .sec0101sp1 .parts::before,
#contents .sec0101sp2 .parts::before{content:''; display:block; width:100%; height:180vw;}
#contents .sec0101sp1 .parts img,
#contents .sec0101sp2 .parts img{width:calc(100% - 30px); left:15px; top:0;}

#contents .sec0102sp .parts{height:auto;}
#contents .sec0102sp .parts::before{content:''; display:block; width:100%; height:93vw;}
#contents .sec0102sp .parts.graph1{padding:0; width:calc(100% - 30px); height:calc(100% - 30px);}
#contents .sec0102sp .graph{height:calc(100% - 130px); width:calc(100% - 130px); left:65px; margin-left:0; top:15.75vw;}
#contents .sec0103 .parts{height:auto;}
#contents .sec0103 .parts::before{content:''; display:block; width:100%; height:60vw;}
#contents .sec0103 .first_or_last.parts{width:calc(100% - 30px); height:auto;}
#contents .sec01{padding:30px 0;}

/* sec02 */
#contents h2.s02{margin:0 10px 10px; width:auto;}
#contents .sec0201sp{padding:0; height:auto;}
#contents .sec0201sp .parts.graph2{height:auto;}
#contents .sec0201sp .parts.graph2::before{content:''; display:block; width:100%; height:125vw;}
#contents .sec0201sp .parts.graph2 img{width: calc(100% - 30px); left:15px;}
#contents .sec0201sp .graph{height:calc(100% - 240px); width:calc(100% - 240px); left:120px; margin-left:0; top:5vw;}
#contents h3.s02{width:auto; margin:30px 15px 10px;}
#contents .sec0202 .parts.fish{height:auto; padding:0;}
#contents .sec0202 .parts.fish::before{content:''; display:block; width:100%; height:52vw;}
#contents .sec0202 .parts.fish img{width: calc(100% - 30px); left:15px;}
#contents .sec0203 .parts.amount{height:auto; padding:0;}
#contents .sec0203 .parts.amount::before{content:''; display:block; width:100%; height:52vw;}
#contents .sec0203 .parts.amount img{width: calc(100% - 30px); left:15px;}
#contents .sec02{padding:30px 0;}

/* sec03 */
#contents .sec03{padding:0; }
#contents .sec03 h2{margin:0 10px 10px; width:auto;}
#contents .sec03 .parts{height:auto; background:none; margin-bottom:0; overflow:hidden;}
#contents .sec03 .parts::before{content:''; display:block; width:100%; height:110vw;}
#contents .sec03 .parts img{position:absolute; left:15px; top:0; width:calc(100% - 30px); height:auto;}

/* sec04 */
#contents .sec04{padding:30px 0;}
#contents .sec04 h2{margin:0 10px 30px; width:auto;}
#contents .sec04 .parts{height:auto;}
#contents .sec04 .parts::before{content:''; display:block; width:100%; height:50vw;}
#contents .sec04 .parts img{width: calc(100% - 30px); left:15px;}
#contents .sec04 .animation{padding:0;}
}