@charset "UTF-8";
body { /*font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",sans-serif;*/ background: url(/jp/contents/research/graphic/005/p_bg.jpg); color: #323232; }
#contents { min-width: 940px; color: #000; -webkit-text-size-adjust: 100%; }
#contents .section .inner { width: 940px; margin: 0 auto; position: relative; clear: both; }
#contents .section .inner:after { content: ''; display: block; clear: both; }
#contents .section img { width: auto; }
#contents .text { background: url(/jp/contents/research/graphic/005/yunomi.png) no-repeat 30px center rgba(191, 201, 50, 0.3); margin: 0 auto 50px; width: 870px; padding: 40px 40px 40px 100px; border-radius: 20px; }

body.mob #contents .text { background: url(/jp/contents/research/graphic/005/yunomi.png) no-repeat center 20px rgba(191, 201, 50, 0.3); margin: 0 auto 50px; padding: 160px 40px 40px 40px; background-size: 60px auto; }
#contents .text p { font-size: 14px; text-align: left; }
#contents .sec01 .text { background: rgba(191, 201, 50, 0.3); padding: 40px; margin-top: -5px; opacity: 0; transition: .6s opacity ease-out; width: 100%; border-radius: 0; }
#contents .sec01 h1 { background: url(/jp/contents/research/graphic/005/eat.gif) no-repeat center center; height: 293px; opacity: 0; transition: .4s opacity ease-in; }
#contents .sec01 .rail { background: url(/jp/contents/research/graphic/005/sec01_item02.png) repeat-x; height: 110px; background-position: 0 bottom; animation: bgloop 60s linear infinite; opacity: 0; transition: .4s opacity ease-in; }

@keyframes bgloop { from { background-position: 0 bottom; }
  to { background-position: 2589px bottom; } }
#contents .sec01 .text p { font-size: 14px; width: 700px; margin: 0 auto; background: url(/jp/contents/research/graphic/005/data.png) no-repeat right top; padding: 0 140px 0 0; text-align: left; }

body.mob #contents .sec01 .text { background-image: none; padding-top: 40px; }

body.mob #contents .sec01 .text p { width: auto; background: url(/jp/contents/research/graphic/005/data.png) no-repeat center bottom; padding: 0 0 150px 0; text-align: left; }
#contents .sec01 h1.play, #contents .sec01 .rail.play, #contents .sec01 .text.play { opacity: 1; }
#contents .sec01.fadein h1 { opacity: 1; }
#contents .sec01.fadein .rail { transition-delay: 0.5s; opacity: 1; }
#contents .sec01.fadein .text { transition-delay: 1s; opacity: 1; }

#contents .sec02 h2 { margin-bottom: 40px; }
#contents .sec02 .inner { padding: 40px 0; }
#contents .sec02 .rank { position: relative; height: 570px; margin-bottom: 50px; overflow: hidden; }
#contents .sec02 .stand { position: relative; height: 543px; margin-bottom: 30px; }
#contents .sec02 .rank img { width: 100%; height: 100%; position: absolute; left: 0; top: 100px; opacity: 0; transition: all .4s ease-in; }
#contents .sec02 .stand img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; transition: all .4s ease-in; }
#contents .sec02 .stand img.s02s09 { top: 100px; }
#contents .sec02 .top.fadein .rank img, #contents .sec02 .top.fadein .stand img { opacity: 1; }
#contents .sec02 .top.fadein .rank img, #contents .sec02 .top.fadein .stand img.s02s09 { top: 0; }
#contents .sec02 .top.fadein .rank img.s02r01 { transition-delay: 0; }
#contents .sec02 .top.fadein .rank img.s02r02 { transition-delay: 0.5s; }
#contents .sec02 .top.fadein .rank img.s02r03 { transition-delay: 0.8s; }
#contents .sec02 .top.fadein .rank img.s02r04 { transition-delay: 1.1s; }
#contents .sec02 .bottom.fadein .stand img { opacity: 1; }
#contents .sec02 .bottom.fadein .stand img.s02s09 { top: 0; }
#contents .sec02 .bottom.fadein .stand .s02s02 { transition-delay: 0.5s; }
#contents .sec02 .bottom.fadein .stand .s02s03 { transition-delay: 0.8s; }
#contents .sec02 .bottom.fadein .stand .s02s04 { transition-delay: 1.1s; }
#contents .sec02 .bottom.fadein .stand .s02s05 { transition-delay: 1.4s; }
#contents .sec02 .bottom.fadein .stand .s02s06 { transition-delay: 1.6s; }
#contents .sec02 .bottom.fadein .stand .s02s07 { transition-delay: 1.8s; }
#contents .sec02 .bottom.fadein .stand .s02s08 { transition-delay: 2.0s; }
#contents .sec02 .bottom.fadein .stand .s02s09 { transition-delay: 2.5s; }
#contents .sec03 h2 { margin-bottom: 40px; }

#contents .sec03 .inner { padding: 40px 0; }
#contents .sec03 .dish { position: relative; height: 610px; margin-bottom: 30px; }
#contents .sec03 .dish img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; transition: all .4s ease-in; }
#contents .sec03.fadein .dish img { opacity: 1; }
#contents .sec03.fadein .dish .s03d02 { transition-delay: 0.8s; }
#contents .sec03.fadein .dish .s03d03 { transition-delay: 1.1s; }
#contents .sec03.fadein .dish .s03d04 { transition-delay: 1.4s; }
#contents .sec03.fadein .dish .s03d05 { transition-delay: 1.7s; }
#contents .sec03.fadein .dish .s03d06 { transition-delay: 1.9s; }
#contents .sec03.fadein .dish .s03d07 { transition-delay: 2.1s; }
#contents .sec03.fadein .dish .s03d08 { transition-delay: 2.2s; }
#contents .sec03.fadein .dish .s03d09 { transition-delay: 2.3s; }
#contents .sec03.fadein .dish .s03d10 { transition-delay: 2.4s; }
#contents .sec03.fadein .dish .s03d11 { transition-delay: 2.5s; }
#contents .sec03.fadein .dish .s03d12 { transition-delay: 3.0s; }
#contents .sec03.fadein .dish .s03d13 { transition-delay: 3.5s; }
#contents .sec03.fadein .dish .s03d14 { transition-delay: 4s; }

#contents .sec04 h2 { margin-bottom: 40px; }
#contents .sec04 .inner { padding: 40px 0; }
#contents .sec04 .cuisine { position: relative; height: 640px; margin-bottom: 60px; }
#contents .sec04 .cuisine img.s04c01 { position: absolute; left: 0; top: 0; opacity: 1; transition: all .4s ease-in; }
#contents .sec04 .cuisine div { position: absolute; background-repeat: no-repeat; background-position: center; background-size: 0 0; opacity: .5; transition: all .3s ease-in; }
#contents .sec04 .cuisine .s04c02 { background-image: url(/jp/contents/research/graphic/005/sec04_item03.png); width: 250px; height: 280px; left: 120px; bottom: 0; }
#contents .sec04 .cuisine .s04c03 { background-image: url(/jp/contents/research/graphic/005/sec04_item04.png); width: 280px; height: 310px; right: 70px; bottom: 0; }
#contents .sec04 .cuisine .s04c04 { background-image: url(/jp/contents/research/graphic/005/sec04_item05.png); width: 370px; height: 400px; left: 50%; top: 0; margin-left: -185px; }
#contents .sec04 .save { opacity: 0; transition: .5s opacity ease-out; }
#contents .sec04 .cuisine img.play, #contents .sec04 .save.play { opacity: 1; }
#contents .sec04 .cuisine div.play { opacity: 1; }
#contents .sec04.fadein .cuisine div { opacity: 1; }
#contents .sec04.fadein .cuisine img, #contents .sec04.fadein .cuisine .save { opacity: 1; }
#contents .sec04.fadein .cuisine .s04c02 { transition-delay: 0.5s; background-size: 250px 280px; }
#contents .sec04.fadein .cuisine .s04c03 { background-size: 280px 310px; transition-delay: 1s; }
#contents .sec04.fadein .cuisine .s04c04 { background-size: 370px 400px; transition-delay: 1.5s; }
#contents .sec04.fadein .save { transition-delay: 2s; opacity: 1; }

#contents .sec05 h2 { margin-bottom: 40px; }
#contents .sec05 .sideMenu1 { position: relative; height: 422px; margin-bottom: 30px; background: url(/jp/contents/research/graphic/005/sec05_item02.png) repeat-x center bottom; }
#contents .sec05 .sideMenu1 .inner { position: relative; height: 422px; }
#contents .sec05 .sideMenu1 img.item1, #contents .sec05 .sideMenu1 img.item2, #contents .sec05 .sideMenu1 img.item3 { position: absolute; left: -3000px; opacity: 0; transition: all .6s ease-out; }
#contents .sec05 .sideMenu1 img.rank1, #contents .sec05 .sideMenu1 img.rank2, #contents .sec05 .sideMenu1 img.rank3 { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .5s ease; }
#contents .sec05 .sideMenu2 { position: relative; height: 400px; margin-bottom: 30px; }
#contents .sec05 .sideMenu2 img { position: absolute; left: 0; top: 100px; opacity: 0; transition: all .4s ease-in; }
#contents .sec05 .sideMenu1 img.item1.play, #contents .sec05 .sideMenu1 img.item2.play, #contents .sec05 .sideMenu1 img.item3.play { left: 0; opacity: 1; }
#contents .sec05 .sideMenu2 img.side1.play, #contents .sec05 .sideMenu2 img.side2.play { top: 0; opacity: 1; }
#contents .sec05 .sideMenu1 img.rank1.play, #contents .sec05 .sideMenu1 img.rank2.play, #contents .sec05 .sideMenu1 img.rank3.play { opacity: 1; }
#contents .sec05 .top.fadein .sideMenu1 img.item1, #contents .sec05 .top.fadein .sideMenu1 img.item2, #contents .sec05 .top.fadein .sideMenu1 img.item3 { left: 0; opacity: 1; }
#contents .sec05 .top.fadein .sideMenu1 img.rank1, #contents .sec05 .top.fadein .sideMenu1 img.rank2, #contents .sec05 .top.fadein .sideMenu1 img.rank3 { opacity: 1; }
#contents .sec05 .top.fadein .sideMenu1 .item3 { transition-delay: 0.5s; }
#contents .sec05 .top.fadein .sideMenu1 .item2 { transition-delay: 1.0s; }
#contents .sec05 .top.fadein .sideMenu1 .item1 { transition-delay: 1.5s; }
#contents .sec05 .top.fadein .sideMenu1 .rank3 { transition-delay: 2.0s; }
#contents .sec05 .top.fadein .sideMenu1 .rank2 { transition-delay: 2.3s; }
#contents .sec05 .top.fadein .sideMenu1 .rank1 { transition-delay: 2.6s; }
#contents .sec05 .bottom.fadein .sideMenu2 img.side1, #contents .sec05 .bottom.fadein .sideMenu2 img.side2 { top: 0; opacity: 1; }
#contents .sec05 .bottom.fadein .sideMenu2 .side1 { transition-delay: 0.5s; }
#contents .sec05 .bottom.fadein .sideMenu2 .side2 { transition-delay: 1.0s; }

#contents .sec06 h2 { margin-bottom: 40px; }
#contents .sec06 .inner { padding: 40px 0; }
#contents .sec06 .data { position: relative; height: 417px; margin: 0 auto 30px; width: 800px; }
#contents .sec06 .data img { position: absolute; left: 0; top: 0; z-index: 2; opacity: 0; }
#contents .sec06 .data .graph1, #contents .sec06 .data .graph2 { width: 300px; height: 300px; position: absolute; z-index: 0; transition: opacity .4s ease-in; }
#contents .sec06 .data .graph1 { left: 16px; top: -1px; }
#contents .sec06 .data .graph2 { right: 16px; top: -1px; }
#contents .sec06 .pie { width: 300px; height: 300px; margin: 0 auto; position: relative; }
#contents .sec06 .data .data11, #contents .sec06 .data .data12 { position: absolute; top: 345px; text-align: center; width: 300px; height: 72px; font-size: 72px; line-height: 72px; font-family: 'Quicksand', sans-serif; color: #ff7043; }
#contents .sec06 .data .data11 { left: 30px; }
#contents .sec06 .data .data12 { right: 20px; }
#contents .sec06 .data small { font-size: 30px; }
#contents .sec06 .ngBehavior { position: relative; height: 400px; margin: 0 auto 30px; width: 800px; transition: opacity .4s ease-in; opacity: 0; }
#contents .sec06 .ngBehavior img { position: absolute; left: 0; top: 0; }
#contents .sec06 .data img.play, #contents .sec06 .ngBehavior.play { opacity: 1; }
#contents .sec06.fadein .data img, #contents .sec06.fadein .ngBehavior { opacity: 1; }
#contents .sec06.fadein .data img { transition-delay: 0.5s; }
#contents .sec06.fadein .ngBehavior { transition-delay: 2.5s; }
#contents .sec06.fadein .text { transition-delay: 3.0s; }
#contents .sec07 h2 { margin-bottom: 40px; }
#contents .sec07 .inner { padding: 40px 0; }
#contents .sec07 .talent { position: relative; height: 570px; margin-bottom: 30px; }
#contents .sec07 .talent img { position: absolute; left: 0; top: 50px; opacity: 0; transition: all .3s ease-out; }
#contents .sec07 .talent img.base { top: 0; }
#contents .sec07.fadein .talent img { opacity: 1; top: 0; }
#contents .sec07.fadein .ishi { transition-delay: 0.5s; }
#contents .sec07.fadein .hiko { transition-delay: 1s; }
#contents .sec07.fadein .wata { transition-delay: 1.5s; }

@media screen and (max-width: 767px) { #contents .text { background-position: center 4%; width: 100%; padding: 135px 4% 4% 4%; border-radius: 0; margin: 0 0 60px; }
  #contents .text p { font-size: 14px; text-align: left; }
  #contents .sec01 .text { padding: 4%; width: 100%; }
  #contents .sec01 .text p { width: auto; background-position: center bottom; padding: 0 0 140px 0; }
  #contents .section .inner { padding: 0; width: 100%; }
  #contents h2 { padding: 0 4%; }
  #contents .sec02 h2 img, #contents .sec03 h2 img, #contents .sec04 h2 img, #contents .sec05 h2 img, #contents .sec06 h2 img, #contents .sec07 h2 img { width: 100%; }
  #contents .sec01 { margin-bottom: 50px; }
  #contents .sec01 h1 { background: url(/jp/contents/research/graphic/005/eat_sp.gif) no-repeat center center; background-size: cover; }
  #contents .sec02 .rank { margin: 0 4% 60px; }
  #contents .sec02 .stand { margin: 0 4% 50px; }
  #contents .sec03 .dish, #contents .sec04 .cuisine, #contents .sec04 .save { margin: 0 4% 60px; }
  #contents .sec05 .sideMenu1 .inner { margin: 0 4% 60px; }
  #contents .sec05 .sideMenu2 img { left: 4%; }
  #contents .sec07 .talent { margin: 0 4% 60px; } 
	.ios #contents .sec06 .data .data11, 
	.ios #contents .sec06 .data .data12{font-size:20px;}
	.ios #contents .sec06 .data small{font-size:14px;}
	}