@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:#000; -moz-font-feature-settings:"palt"; -webkit-font-feature-settings:"palt"; font-feature-settings:"palt";}
#contents h3{margin-top: 55px;opacity: 0;transition-delay:0.2s;}
#contents h3.fadein{opacity: 1;}
#contents .parts img{opacity: 0;transition: opacity 0.6s,transform 1s;}
#contents .fadein .parts img{opacity: 1;transform: translate(0,0)!important}
#contents .section{position: relative;padding:50px 0}
#contents .section .parts{width:980px;position:relative;margin:0 auto;}
#contents .section img{ height:auto; position:relative; z-index:10;}
#contents .section img + img{position:absolute; left:0; top:0;}

/*snowJS*/
.snowfall-flakes{transition: none}
#snow img{opacity: 0;transition: opacity 2s}
#snow.fadein img{opacity: 1;}
#snow{position: absolute;left:0;top:0;width:100%;height:100%;overflow: hidden}
#snow .inner{width:100%;height:150%;position: absolute;left:0;top:-20%}

/*bg*/
#contents .sec01,#contents .sec03{background: #d9f2fd}
#contents .sec02,#contents .sec04{background: url("/jp/contents/research/graphic/013/dot_bg.png")repeat left top;background-size: 8px 6px;}
#contents .sec00:after,#contents .sec01:after,#contents .sec02:after,#contents .sec03:after{content:"";position: absolute;width:100%;height:3px;left:0;bottom:-1px;background:url("/jp/contents/research/graphic/013/borderimage.png")repeat-x left top;background-size: 6px 3px;z-index: 9999}

/*h2,h3*/
#contents .section h2 img ,#contents .section h3 img {width:auto}

/*text*/
#contents .text{width:768px; margin:0 auto; padding:25px 25px 25px 120px; text-align:left; background:url(/jp/contents/research/graphic/013/shrimp.png) no-repeat 25px 35px #fff;background-position: 23px center;border-radius:15px;background-size: 80px;}

/*kv*/
#contents .sec00{background:#b3e5fc;padding:0;height: 603px;}
#contents .sec00 img{max-width:100%}
#contents .sec00 h1{position: absolute;left:0;right: 0;margin: auto;top:90px;z-index: 999;width:437px;}
#contents .sec00 h1 img{width:auto;opacity: 0;transition: opacity 1.5s; transition-delay:2.5s}
#contents .sec00 h1.fadein img{opacity: 1;}
#kv_inner {position: relative;width:100%;margin: 0 auto}
#kv_inner img{width:auto!important;opacity: 0;transition: opacity 1s}
#kv_inner.fadein img{opacity: 1}
#kv_inner img:nth-of-type(1){transition-delay: 1s; }
#kv_inner img:nth-of-type(2){position: absolute;height: auto;top:33px!important;left:730px!important;right:0;margin:auto;z-index:99;transition-delay: 1.7s!important; transition: left 1.2s,opacity 1s;opacity: 0}
#kv_inner.fadein img:nth-of-type(2){left:630px!important;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/013/note.png) 660px center no-repeat #29b6f6;transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1),transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);opacity:0;transition-delay: 3s;margin-top: 0;z-index: 999;}
#contents .sec00 .text.memo:after{content:"";width:98%;height:90%;border:2px dotted #b2ebf2;position: absolute;left:5px;top:5px;border-radius: 15px;}
#contents .sec00 .text.memo p{color:#fff}
#contents .sec00 .text.memo.fadein{opacity: 1}

/*text*/
#contents .sec01 .text,#contents .sec02 .text,#contents .sec03 .text,#contents .sec04 .text{border:2px dotted #4fc3f7}

/*sec01*/

#contents .sec0101 .parts{width:806px;}
#contents .sec0101 .parts img{ transition-delay: 1s;}
#contents .sec0101 .parts img:nth-of-type(2){ transition-delay:1.8s;transform: translate(0,20px)}

#contents .sec0201 .parts{width:935px;}
#contents .sec0201 .parts img{ transition-delay: 1s;transform: translate(0,20px)}
#contents .sec0201 .parts img:nth-of-type(2){ transition-delay:1.5s;transform: translate(0,20px)}
#contents .sec0201 .parts img:nth-of-type(3){ transition-delay:2.2s;transform: translate(0,20px)}

#contents .sec0202 .parts{width:935px;}
#contents .sec0202 .parts img{ 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:2.2s;transform: translate(0,20px)}

#contents .sec0203 .parts{width:941px;}
#contents .sec0203 .parts img{ 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:2.2s;transform: translate(0,20px)}

#contents .sec0204 .parts{width:767px;}
#contents .sec0204 .parts img{ transition-delay: 1s;transform: translate(0,-20px)}
#contents .sec0204 .parts img:nth-of-type(2){ transition-delay:1.8s;transform: translate(0,-20px)}
#contents .sec0204 .parts img:nth-of-type(3){ transition-delay:2.2s;transform: translate(0,-20px);z-index: 99}
#contents .sec0204 .parts img:nth-of-type(4){ transition-delay:2.6s;transform: translate(0,-20px)}
#contents .sec0204 .parts img:nth-of-type(5){ transition-delay:3s;transform: translate(0,-20px)}
#contents .sec0204 .parts img:nth-of-type(6){ transition-delay:3.7s;transform: translate(0,20px)}

#contents .sec0205 .parts{width:503px;}
#contents .sec0205 .parts img{ transition-delay: 1s;}
#contents .sec0205 .parts img:nth-of-type(2){ transition-delay:2s;transform: translate(0,20px)}

#contents .sec0301 .parts{width:769px;}
#contents .sec0301 .parts img{ transition-delay: 1s;transform: translate(0,-20px)}
#contents .sec0301 .parts img:nth-of-type(2){ transition-delay:2s;transform: translate(0,20px)}
#contents .sec0302 .parts{width:966px;}
#contents .sec0302 .parts img{ transition-delay: 1s;transform: translate(0,20px)}
#contents .sec0302 .parts img:nth-of-type(2){ transition-delay:1.5s;transform: translate(0,20px)}
#contents .sec0302 .parts img:nth-of-type(3){ transition-delay:2.2s;transform: translate(0,20px)}
#contents .sec0303 + h3{margin-top: 100px}
#contents .sec0303 .parts img{ transition-delay: 1s;transform: translate(0,20px)}
#contents .sec0303 .parts img:nth-of-type(2){ transition-delay:1.5s;transform: translate(0,20px)}
#contents .sec0303 .parts img:nth-of-type(3){ transition-delay:2.2s;transform: translate(0,20px)}

#contents .sec0401 .parts{width:840px;}
#contents .sec0401 .parts img{ transition-delay: 1s;}
#contents .sec0401 .parts img:nth-of-type(2){ transition-delay:1.8s;transform: translate(0,-20px)}
#contents .sec0401 .parts img:nth-of-type(3){ transition-delay:2.3s;transform: translate(0,-20px)}
#contents .sec0401 .parts img:nth-of-type(4){ transition-delay:3s;transform: translate(0,-20px)}


@media screen and (max-width:1100px) and (min-width:768px){
  #contents .sec00 h1{width:39.7vw;min-width: 387px;}
  #contents .sec00 h1 img{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}
#contents .text{width:94%;padding:3.2vw 3.9vw 3.2vw 15vw;background:url(/jp/contents/research/graphic/013/shrimp.png) no-repeat 3.2vw 4.5vw #fff;background-size: 8.9vw auto; background-position: 4vw center;}
#contents .text p{font-size: 2.7vw;line-height: 1.7;}

/*bg*/
#contents .sec02,#contents .sec04{background: url("/jp/contents/research/graphic/013/dot_bg.png")repeat left top;background-size: 0.58vw 0.43vw;}
#contents .sec00:after,#contents .sec01:after,#contents .sec02:after,#contents .sec03:after{height:1.5px;left:0;bottom:-0.5px;background:url("/jp/contents/research/graphic/013/borderimage.png")repeat-x left top;background-size: 3px 1.5px;}

/*h2,h3*/
#contents .section h2{max-width:70vw;margin:0 auto}
#contents .section h2 img{width:100%;max-width: inherit}
#contents .section h3{max-width:85vw;margin:8vw auto 0}
#contents .section h3 img{widt:auto;max-width: 100%}

/* sec00 */
#contents .sec00{width:100%;position:relative; height:90vw;min-width:inherit; padding-top: 5vw}
#contents .sec00 img{max-width:100%}
#contents .sec00 h1{position: absolute;left:0;right: 0;margin: auto;top:13.5vw;width:32vw;}
#kv_inner img:nth-of-type(1){width:90vw!important}
#kv_inner img:nth-of-type(2){width:7.7vw!important;position: absolute;height: auto;top:2.8vw!important;left:70vw!important;right:0;margin:auto;}
#kv_inner.fadein img:nth-of-type(2){left:53vw!important;}

#contents .sec00 .text.memo {width: 94vw; position: relative;top:-12vw;right: auto;left: auto;padding: 17vw 3.5vw 3.5vw 3.5vw; background-position: center 3.5vw;background-size: 10vw auto;}
#contents .sec00 .text.memo p{font-size: 2.7vw;line-height: 1.7;position: relative;z-index: 999}
#contents .sec00 .text.memo:after{width: 97%;height:93%;top:2.5%;left:0;right:0;margin: 0 auto}

/*contents*/
#contents .sec01,#contents .sec02,#contents .sec03,#contents .sec04{padding:10vw 0}
  
#contents .sec0101 .parts{width:85vw;}

#contents .sec02 h2 + h3{width:70vw}
#contents .sec0201 .parts{width:85vw;}
#contents .sec0201 + h3{width:64.2vw}
#contents .sec0202 .parts{width:85vw;}
#contents .sec0203 .parts{width:85vw;}
#contents .sec0203 + h3{width:64.2vw!important}
#contents .sec0204 .parts{width:85vw;}
#contents .sec0205 .parts{width:65vw;}

#contents .sec0301 .parts{width:85vw;}
#contents .sec0302 .parts{width:85vw;}
#contents .sec0302 + h3{width:80vw;}
#contents .sec0303 .parts{width:85vw;}
  
#contents .sec0401 .parts{width:85vw;}
}