@charset "utf-8";
/* body{font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif; color:#333333;} */
#contents .bg-wrap{width:100%;background: url(/jp/contents/research/graphic/014/bg.png)repeat top left;background-size: 18px ;padding-top: 90px;}
#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 h3{margin-top: 100px;opacity: 0;transition-delay:0.1s;}
#contents h3.fadein{opacity: 1;}
#contents .section h3 img{max-width: inherit;width: auto}
#contents .section .parts{position:relative; width:940px; margin:0 auto;}
#contents .section .parts img{max-width:940px; width:100%; height:auto; position:relative; z-index:10;}
#contents .animation .parts img{position:absolute; left:0; top:0;}
/*図*/
#contents .section .graph{position:absolute; left:0; top:0; width:370px; 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/014/shrimp.png) no-repeat 25px 35px #fff;background-position: 36px center;border-radius:15px;border:2px dotted #4ab985}

#contents .pc-item{display:block;}
#contents .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;}

/*common*/
#contents .section .text{margin-top: 100px;}
#contents .section .parts img:first-of-type{position: relative!important}

/* sec00 */
#contents .sec00{position:relative; height:612px;background:#EBE6D2;}
#contents .kvBg{position: absolute;width:100%;height: 100%; padding-top:0; background:url(/jp/contents/research/graphic/014/sec0_bg.png) repeat-x bottom #ebe6d2;}
#contents .sec00 .parts{width:1366px; height:612px; margin:0 auto; top:0;}
#contents .sec00 .parts img{position:absolute; left:0;right:0; top:0;margin: auto;width: 100%;max-width: inherit}
#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  h1{position:absolute; width:1366px;top:230px; left:0;right: 0;margin: auto;z-index: 9999;}
#contents .sec00  h1 img{width:484px!important;height: 131px!important; z-index:1;transition:opacity 0.8s; transition-delay:3s;opacity: 0;}
#contents .sec00  h1.fadein img{opacity: 1;}
#contents .sec00 .text.memo{position:absolute; top:415px; right:0; left:0; padding:20px 120px 25px 30px; background:url(/jp/contents/research/graphic/014/note.png) 660px center no-repeat #4ab985; transition:opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1),transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); transition-delay:opacity 1s;margin-top: 0;z-index: 999;opacity: 0;transition:opacity 1s; transition-delay:3.3s;opacity: 0;}
#contents .sec00 .text.memo.fadein{opacity: 1}
#contents .sec00 .text.memo p{color:#fff;}
#contents .sec00.fadein .text.memo{opacity:1;}
#contents .sec00 .parts img:nth-of-type(1){transition-delay:0s;transition: 0s!important}
#contents .sec00 .parts img:nth-of-type(2){transition-delay:1s;}
#contents .sec00 .parts img:nth-of-type(3){transition-delay:1.2s;}
#contents .sec00 .parts img:nth-of-type(4){transition-delay:1.5s;}
#contents .sec00 .parts img:nth-of-type(5){transition-delay:1.9s;}
#contents .sec00 .parts img:nth-of-type(6){transition-delay:2.1s;}
#contents .sec00 .parts img:nth-of-type(7){transition-delay:2.4s;}
#contents .sec00 .parts img:nth-of-type(8){transition-delay:2.8s;}
#contents .sec00 .parts img.nomal01{z-index: 100;}/*人　一番最初*/

#contents .section h2 img {width: auto;max-width: inherit}
#contents .fadein .parts img{transform: translate(0,0)!important;}
/* sec01 */
#contents h2.s01{margin:0 auto 10px; width:720px;}
#contents .sec01{padding-bottom: 100px;}

#contents .sec0101 .parts{margin-top: 35px}
#contents .sec0101 .parts img:nth-of-type(1){transition-delay:0.5s}
#contents .sec0101 .parts img:nth-of-type(2){transition-delay:0.9s;transform: translate(0,20px)}
#contents .sec0101 .parts img:nth-of-type(3){transition-delay:1.5s}
#contents .sec0101 .parts img:nth-of-type(4){transition-delay:3s;transform: translate(0,20px)}
#contents .sec0101 .parts .graph{left:442px;top:137px;}

#contents .sec0102 {padding-top: 15px;padding-bottom: 20px}
#contents .sec0102 .parts.graph1{padding:60px 0 20px; width:940px; height:780px;}
#contents .sec0102 .parts{width:703px;}
#contents .sec0102 .parts img{width:703px;}
#contents .sec0102 .parts img:nth-of-type(1){transition-delay:0.5s;transform: translate(0,20px)}
#contents .sec0102 .parts img:nth-of-type(2){transition:none}
#contents .sec0102 .parts img:nth-of-type(3){transition-delay:2.3s;transform: translate(0,20px)}
#contents .sec0102 .parts .graph{left:0;right:0;margin:auto;width:370px;top:56px}

#contents .sec0103 {padding-top: 15px;}
#contents .sec0103 .parts{width:703px;}
#contents .sec0103 .parts img:nth-of-type(1){transition-delay:0.5s;transform: translate(0,20px)}
#contents .sec0103 .parts img:nth-of-type(2){transition:none}
#contents .sec0103 .parts img:nth-of-type(3){transition-delay:2.3s;transform: translate(0,20px)}
#contents .sec0103 .parts .graph{left:0;right:0;margin:auto;width:370px;top:56px}


#contents .sec0104 {padding-top: 15px;}
#contents .sec0104 .parts{width:940px;}

#contents .sec0104 .parts{margin-top: 60px;}
#contents .sec0104 .parts img{transform:translate(0,-30px);}
#contents .sec0104 .parts img:nth-of-type(3){transition-delay:1s;transform: translate(0,20px);}
#contents .sec0104 .parts img:nth-of-type(2){transition-delay:1.5s;transform: translate(0,20px);}
#contents .sec0104 .parts img:nth-of-type(1){transition-delay:2.2s;transform: translate(0,20px);}


/* sec02 */

#contents h2.s02{margin:63px auto 10px; width:720px;}
#contents h3.s02{width:542px; margin:70px auto 10px;}

#contents .sec02{padding-bottom: 100px;}
#contents .sec02 h3{margin-top: 130px;}
#contents .sec0201{margin-top:55px;}
#contents .sec0201 + h3{margin-top: 60px}
#contents .sec0201 .parts.graph2{height:410px;}
#contents .sec0201 .graph{height:360px; width:360px; left:50%; margin-left:-180px; top:55px;}
#contents .sec0201 .parts img:nth-of-type(1){transition-delay:0.3s;}
#contents .sec0201 .parts img:nth-of-type(2){transition-delay:1.6s;transform: translate(0,80px)}
#contents .sec0201 .parts img:nth-of-type(3){transition-delay:2.2s;transform: translate(0,80px)}
#contents .sec0201 .parts img:nth-of-type(4){transition-delay:2.8s;transform: translate(0,80px)}

#contents .sec0202{margin-top:55px;}
#contents .sec0202 .fish{ margin:40px 0;}
#contents .sec0202 .parts img:nth-of-type(1){transition-delay:1s;transform: translate(0,20px);}
#contents .sec0202 .parts img:nth-of-type(2){transition-delay:1.5s;transform: translate(0,20px);}
#contents .sec0202 .parts img:nth-of-type(3){transition-delay:2s;transform: translate(0,20px);}

#contents .sec0203{margin-top:55px;}
#contents .sec0203 .amount{height:690px;margin:40px 0;}
#contents .sec0203 .parts img:nth-of-type(1){transition-delay:1s;transform: translate(0,20px);}
#contents .sec0203 .parts img:nth-of-type(2){transition-delay:1.5s;transform: translate(0,20px);}
#contents .sec0203 .parts img:nth-of-type(3){transition-delay:2s;transform: translate(0,20px);}


#contents .sec0204{margin-top:55px;}
#contents .sec0204 .parts img:nth-of-type(1){transition-delay:1s;transform: translate(0,20px);}
#contents .sec0204 .parts img:nth-of-type(2){transition-delay:1.5s;transform: translate(0,20px);}
#contents .sec0204 .parts img:nth-of-type(3){transition-delay:2s;transform: translate(0,20px);}


/* sec03 */
#contents .sec03{padding:60px 0;}
#contents .sec03 .parts{}
#contents .sec03 h2{margin:0 auto 30px; width:720px;}
#contents .sec03 .parts {width:937px;margin:0 auto}
#contents .sec03 .parts img{position:absolute; left:0; top:0;}
#contents .sec03 .parts img:first-of-type{position:relative!important}

#contents .sec03 .parts img:nth-of-type(1){transition-delay:0.3s;}
#contents .sec03 .parts img.none {opacity: 1;transition: none;}
#contents .sec03 .parts img.fade{transition:opacity .4s ease; transition-delay:.6s;}
#contents .sec03 .fadein.parts img.fade{opacity:0;}
#contents .sec03 .parts img:nth-of-type(2){transition-delay: 0.7s;}
#contents .sec03 .parts img:nth-of-type(3){transition-delay:1.2s;}
#contents .sec03 .parts img:nth-of-type(4){transition-delay:1.8s;}
#contents .sec03 .parts img:nth-of-type(5){transition-delay:2.5s;}

@media screen and (max-width:1366px) and (min-width:767px){
  #contents .sec00 {width:100%}
  #contents .sec00 .parts{width:100%}
  #contents .sec00 h1 {width:100%}
}

@media screen and (max-width:767px){
/*
	mobile 
*/
#contents .pc-item{display: none!important}
#contents .sp-item{display: block!important}
#contents {min-width: inherit;width:100%;overflow: hidden}
#contents .section .graph{position:absolute; left:0; top:0; width:100%; z-index:0; text-align:center;}
#contents .text{width:94%; margin:0 auto; padding:3.2vw 3.9vw 3.2vw 15vw; text-align:left; background:url(/jp/contents/research/graphic/014/shrimp.png) no-repeat 3.2vw 4.5vw #fff;background-size: 8.9vw auto; background-position: 4vw center;border-radius:15px;border:2px dotted #4ab985;}
#contents .text p{font-size: 2.7vw;line-height: 1.7;}
#contents .section .parts img{max-width: 100%}
#contents .section{padding-bottom: 10vw}
#contents .section .text{margin-top: 0}
#contents .animation .parts img {position: absolute;left: 0;right:0;top: 0;margin:auto}
/* sec00 */
#contents .sec00{width:100%;position:relative; height:82vw;min-width:inherit; }
#contents .kvBg{position: absolute;width:100%;height: 100%; padding-top:0; background:url(/jp/contents/research/graphic/014/sec0_bg.png) repeat-x top left;background-size: 1.31vw}
#contents .sec00 .parts{width:100%; height:auto; margin:0 auto; top:0;}
#contents .sec00 .parts img{position:absolute; left:0;right:0; top:0;margin: auto;width: 100%;max-width: inherit}
#contents .sec00  h1{position:absolute; width:100%;top:16.837vw; left:0;right: 0;margin: auto;z-index: 9999;}
#contents .sec00  h1 img{width:36vw!important;height:auto!important; z-index:1;transition:opacity 0.4s; transition-delay:3s;opacity: 0;}
#contents .sec00  h1.fadein img{opacity: 1;}
#contents .sec00 .text.memo {width: 94%; position: relative;top: 15vw;right: auto;left: auto;padding: 17vw 1.9vw 1.9vw 1.9vw; background-position: center 3.5vw;background-size: 10vw auto;}
#contents .sec00 .text.memo p{color:#fff;font-size: 2.7vw;line-height: 1.7;}
#contents .sec00.fadein .text.memo{opacity:1;}
#contents .sec00 .parts img{vertical-align: bottom}
#contents .sec00 .parts img:nth-of-type(1){transition-delay:0s;transition: 0s!important}
#contents .sec00 .parts img.sp-move{top:-5vw;left:4vw}
  
/* sec01 */
#contents h2.s01{margin:0 auto 1.3vw; width:56vw;}
#contents h2.s01 img{width:100%}
#contents .sec01{padding:10vw 0}
#contents .section h3{margin: 10vw auto 0}
#contents .section h3 img{width:100%}

#contents .sec0101 + h3{width:62.5vw}
#contents .sec0101 .parts{width:91vw;height:68.057vw;margin-top: 4.5vw}
#contents .sec0101 .parts .graph{left:30vw;right:0;top:13vw;margin:auto;width:37vw}  
#contents .sec01sp-01{position: relative;height:89vw;}
#contents .sec01sp-01 img{width:65vw!important;display: block;right:0;margin:auto}
#contents .sec01sp-02{position: relative;height:76.92307vw;}
#contents .sec01sp-02 img{width:91vw!important;display: block;right:0;margin:auto}
#contents .secsp img{opacity: 0}
#contents .secsp.fadein img{opacity: 1}
#contents .secsp img:nth-of-type(1){transition-delay:1s}
#contents .secsp img:nth-of-type(2){transition-delay:2s}
  
#contents .sec0102 + h3{width:84.7vw}
#contents .sec0102 .parts{width:91vw;height:62.8vw}
#contents .sec0102 .parts img{right:0;margin:auto;width:89vw;height:auto}
#contents .sec0102 .parts .graph {left: 0;right: 0;margin: auto;width:47vw;top: 7.3vw;}

#contents .sec0103 {padding-top: 1.9vw}
#contents .sec0103 + h3{width:65vw;margin-top: 15vw}
#contents .sec0103 .parts{width:91vw;height:66vw}
#contents .sec0103 .parts img{right:0;margin:auto;width:89vw;height:auto}
#contents .sec0103 .parts .graph {left: 0;right: 0;margin: auto;width:47vw;top: 7.3vw;}
  
#contents .sec0104 .parts{width:91vw;height:47.3vw;margin-top: 5vw}
#contents .sec0104 .parts img{right:0;margin:auto;width:89vw;height:auto}
#contents .sec0104 .parts .graph {left: 0;right: 0;margin: auto;width:47vw;top: 7.3vw;}
#contents .sec01 .text{margin-top: 5vw}
  
#contents h2.s02{width:37vw;margin:10vw auto}
#contents h2.s02 img{width:100%}
#contents .section.sec02 h3{margin-top: 10vw}
#contents .sec0201 {padding: 0;height: 44vw;}
#contents .sec0201 .parts{width:100%;height:auto;}
#contents .sec0201 + h3{width:76vw;margin:0 auto}
#contents .sec0201 .parts .graph {left: 0;right: 0;margin: auto;width:36vw;top: 4.7vw;height: auto}
  
#contents .sec0202{margin-top: 10vw}
#contents .sec0202 .parts{width:100%;height:auto;margin-top:4.5vw}
#contents .sec0202 + h3{width:55vw;margin:0 auto}
  
#contents .sec0203{}
#contents .sec0203 .parts{width:100%;height:auto;margin-top:4.5vw}
#contents .sec0203 + h3{width:85vw;margin:0 auto}
  
#contents .sec0204{}
#contents .sec0204 .parts{width:100%;height:auto;margin-top:4.5vw}

#contents .section.sec02 .text{margin-top: 5vw}
/*img size*/
#contents .sec0201 .parts img{width:89vw;height:auto;}
#contents .sec0202 .parts img{width:89vw;height:auto;}
#contents .sec0203 .parts img{width:89vw;height:auto;}
#contents .sec0204 .parts img{width:89vw;height:auto;}
  
/* sec03 */
#contents .sec03{padding:10vw 0}
#contents .sec03 .parts{height:50.1vw;}
#contents .sec03 h2{margin:0 auto 5vw; width:84vw;}
#contents .sec03 .parts {width:100%;margin:0 auto}
#contents .sec03 .parts img{width:89vw;position:absolute; left:0; top:0;right:0;margin:auto}
}