/* CSS Document */
#contents{opacity:0; -webkit-text-size-adjust: 100%}
#contents .lead { border: 4px solid #0076c2; border-radius: 10px; padding: 20px 20px 20px 130px; width: 80%; max-width: 800px; min-height: 120px; margin: 0 auto; background: #fff url(../graphic/001/icon01.png) no-repeat; background-size: 110px 101px; font-size: 14px; text-align: left; color: #333; line-height: 1.6em; }
#contents .lead .title { font-size: 16px; font-weight: bold; display: block; }
#contents .txtbox { border-radius: 14px; border-right: 7px solid #0052a4; border-bottom: 7px solid #0052a4; padding: 20px 20px 20px 120px; width: 80%; max-width: 800px; min-height: 100px; margin: 0 auto; background: #fff url(../graphic/001/icon02.png) no-repeat; background-size: 90px 90px; font-size: 14px; text-align: left; color: #333; line-height: 1.6em; }
#contents .txtbox2 { border-radius: 14px; border-right: 7px solid #d7e199; border-bottom: 7px solid #d7e199; padding: 20px 20px 20px 120px; width: 80%; max-width: 800px; min-height: 100px; margin: 0 auto; background: #fff url(../graphic/001/icon03.png) no-repeat; background-size: 90px 90px; font-size: 14px; text-align: left; color: #333; line-height: 1.6em; }
#contents .txtbox3 { border-radius: 10px; border: 4px solid #0076c2; padding: 20px; width: 650px; min-height: 100px; margin: 0 auto; background: #fff; font-size: 14px; text-align: left; color: #333; line-height: 1.6em; }

#contents .sec01 { background: #99cddc; padding: 40px 0 114px; }
#contents .sec01:after { content: ''; background: url(../graphic/001/sec01_itm06.png) center bottom no-repeat; width: 1000px; height: 100px; position: absolute; left: 50%; bottom: 3px; z-index: 10; margin-left: -500px; }
#contents .sec01:before { content: ''; background: url(../graphic/001/sec02_bg01.png) center top repeat-x; width: 100%; height: 20px; position: absolute; left: 0; bottom: 0; z-index: 11; animation: bginfinitescroll 60s linear infinite; }
#contents .sec01 h3 { margin-top: 36px; }
#contents .sec01 figure { padding-bottom: 175px; position: relative; }
#contents .sec01 figure img { opacity: 0; transition: .2s all ease-in; }
#contents .sec01 figure img.play { opacity: 1 !important; }
#contents .sec01 figure img:nth-child(3), #contents .sec01 figure img:nth-child(4) { top: inherit; bottom: 0; }
/*anime sec01*/
#contents .sec01 figure.play img { opacity: 1; }
#contents .sec01 figure.play .like1 { transition-delay: 0.8s; }
#contents .sec01 figure.play .like2 { transition-delay: 1.2s; }
#contents .sec01 figure.play .like3 { transition-delay: 1.6s; }
#contents .sec01 figure.play .like4 { transition-delay: 2.0s; }

#contents .sec02 {background: #0052a5; padding: 44px 0 138px; }
#contents .sec02:after { content: ''; background: url(../graphic/001/sec02_bg02.png) center top no-repeat; width: 940px; height: 678px; position: absolute; left: 50%; top: 398px; z-index: 10; margin-left: -470px; }
#contents .sec02:before { content: ''; background: url(../graphic/001/sec03_bg01.png) center top repeat-x; width: 100%; height: 69px; position: absolute; left: 0; bottom: 0; z-index: 11; }
#contents .sec02 img { width: 100%; height: auto; max-width: 740px; }
#contents .sec02 figure img + img { margin-left: -370px; }
#contents .sec02 figure { overflow: hidden; }
#contents .sec02 figure img.mask {top:150px; transition:top 1.3s ease-out;}
#contents .sec02 figure img.fish, 
#contents .sec02 figure img.wave {opacity: 0; vertical-align: bottom; top: auto; bottom: 0; transition:all 1s ease-out;}
#contents .sec02 figure img.wave {height: 0; transition: 0.6s ease-out;}
#contents .sec02 figure img.fish{top: 0px; }
#contents .sec02 figure img.wave.wave1{transition-delay:0.0s;}
#contents .sec02 figure img.fish.fish1{transition-delay:1.0s;}
#contents .sec02 figure img.wave.wave2{transition-delay:1.0s;}
#contents .sec02 figure img.fish.fish2{transition-delay:2.0s;}
#contents .sec02 figure img.wave.wave3{transition-delay:2.0s;}
#contents .sec02 figure img.fish.fish3{transition-delay:3.0s;}
#contents .sec02 figure img.wave.wave4{transition-delay:3.0s;}
#contents .sec02 figure img.fish.fish4{transition-delay:4.0s;}
/*anime sec02*/
#contents .sec02.play figure img.mask {top: -500px;}
#contents .sec02.play figure img.fish {opacity:1;}
#contents .sec02.play figure img.wave {opacity: 1; height: 700px; }

#contents .sec03 { padding-bottom: 100px; padding-top: 17px; background: #99cddc; }
#contents .sec03 h2 { margin-bottom: 15px; position: relative; z-index: 10; }
#contents .sec03:before { content: ''; background: url(../graphic/001/sec04_bg01.png) center top repeat-x; width: 100%; height: 80px; position: absolute; left: 0; bottom: 0; z-index: 11; }
#contents .sec03 .map { width: 900px; margin: 0 auto 18px; position: relative; padding: 26px 0 0; }
#contents .sec03 .map img { width: 100%; height: auto; max-width: 900px; }
#contents .sec03 .map img + img { margin-left: -450px; position: absolute; left: 50%; top: 0; }
#contents .sec03 .map .pop { opacity: 0; transition:all 0.6s ease-out; top: 20px; }
#contents .sec03.play .map .pop1{transition-delay:1.8s;}
#contents .sec03.play .map .pop2{transition-delay:2.0s;}
#contents .sec03.play .map .pop3{transition-delay:2.2s;}
#contents .sec03 .map .rank1 { width: 205px; height: 292px; position: absolute; left: 576px; top: -1px; }
#contents .sec03 .map .rank1 span { width: 205px; height: 148px; background: url(../graphic/001/rank1.png) left top no-repeat; display: block; position: absolute; left: 0; bottom: 0; }
#contents .sec03 .map .rank2 { width: 75px; height: 170px; position: absolute; left: 352px; top: 360px; z-index: 50; }
#contents .sec03 .map .rank2 span { width: 75px; height: 63px; background: url(../graphic/001/rank2.png) left top no-repeat; display: block; position: absolute; left: 0; bottom: 0; }
#contents .sec03 .map .rank3 { width: 71px; height: 105px; position: absolute; left: 410px; top: 426px; z-index: 100; }
#contents .sec03 .map .rank3 span { width: 71px; height: 54px; background: url(../graphic/001/rank3.png) left top no-repeat; display: block; position: absolute; left: 0; bottom: 0; }
#contents .sec03 .map .rank4a { width: 101px; height: 67px; position: absolute; left: 424px; top: 569px; z-index: 100; }
#contents .sec03 .map .rank4a span { width: 101px; height: 47px; background: url(../graphic/001/rank4a.png) left top no-repeat; display: block; position: absolute; left: 0; bottom: 0; }
#contents .sec03 .map .rank4b { width: 122px; height: 74px; position: absolute; left: 560px; top: 296px; z-index: 100; }
#contents .sec03 .map .rank4b span { width: 122px; height: 55px; background: url(../graphic/001/rank4b.png) left top no-repeat; display: block; position: absolute; left: 0; bottom: 0; }
#contents .sec03 .map .rank span { opacity: 0; }
#contents .sec03 .map .rank span.show { opacity: 1 !important; }
/* sec03 anim */
#contents .sec03.play .map .pop{opacity: 1; top: 0;}

#contents .sec04 { padding-bottom: 60px; padding-top: 50px; background: #438dc3; }
#contents .sec04 h2 { position: relative; z-index: 0; width: 860px; margin: 0 auto -22px; z-index: 0; }
#contents .sec04:before { content: ''; background: url(../graphic/001/sec05_bg01.png) center top repeat-x; width: 100%; height: 29px; position: absolute; left: 0; bottom: 0; z-index: 11; animation: bginfinitescroll 60s linear infinite; }
#contents .sec04:after { content: ''; background: url(../graphic/001/sec04_bg02.png) center top repeat-x; width: 980px; height: 770px; position: absolute; left: 50%; top: 0px; z-index: 11; margin-left: -490px; }
#contents .sec04 figure { z-index: 10; margin-bottom: 14px; position: relative; z-index: 20; }
#contents .sec04 figure img.pop { top: 10px; }
#contents .sec04 figure img.pop.fadein { top: 0px; }
/*anime sec04*/
#contents .sec04.play figure img { opacity: 1; }
#contents .sec04.play figureimg:nth-of-type(1) { transition-delay: 0.8s; }
#contents .sec04.play figure img:nth-of-type(2) { transition-delay: 1.2s; }
#contents .sec04.play figure img:nth-of-type(3) { transition-delay: 1.6s; }
#contents .sec04.play figure img:nth-of-type(4) { transition-delay: 2.0s; }

#contents .sec05 { padding-bottom: 100px; padding-top: 20px; background: #99cddc; }
#contents .sec05 h2 { margin-bottom: 37px; }
#contents .sec05 h3 { position: relative; z-index: 10; margin-bottom: 12px; }
#contents .sec05:before { content: ''; background: url(../graphic/001/sec06_bg01.png) center top repeat-x; width: 100%; height: 23px; position: absolute; left: 0; bottom: 0; z-index: 11; animation: bginfinitescroll 60s linear infinite; }
#contents .sec05 ol { margin-top: 16px; }
#contents .sec05 ol li + li { margin-top: 26px; }
#contents .sec05 ol li:last-child { margin-top: 23px; }
#contents .sec05 ol li img.cuisine { opacity: 0; transition: 0.5s ease-out; }
#contents .sec05 ol li img.cuisine.play { opacity: 1; }
/*anime sec05*/
#contents .sec05.play ol img.cuisine { opacity: 1; }
#contents .sec05.play ol img.cuisine.cuisine1 { transition-delay: 0.8s; }
#contents .sec05.play ol img.cuisine.cuisine2 { transition-delay: 1.2s; }
#contents .sec05.play ol img.cuisine.cuisine3 { transition-delay: 1.6s; }

#contents .sec06 { padding-bottom: 100px; padding-top: 57px; background: #438dc3; }
#contents .sec06 h2 { margin-bottom: 4px; }
#contents .sec06 figure { margin-bottom: 33px; }
#contents .sec06 figure img {opacity:0; transition:all .5s ease;}
#contents .sec06 figure img.fish {top: -100px;}
#contents .sec06:before { content: ''; background: url(../graphic/001/sec07_bg01.png) center top repeat-x; width: 100%; height: 29px; position: absolute; left: 0; bottom: 0; z-index: 11; }
#contents .sec06 figure img:nth-of-type(1) { transition-delay: .5s; }
#contents .sec06 figure img:nth-of-type(2) { transition-delay: 1s; }
#contents .sec06 figure img:nth-of-type(3) { transition-delay: 1.5s; }
#contents .sec06 figure img:nth-of-type(4) { transition-delay: 2s; }
#contents .sec06 figure img:nth-of-type(5) { transition-delay: 3s; }
/*anime sec06*/
#contents .sec06.play figure img.fish{top:0;}
#contents .sec06.play figure img {opacity:1;}


@media screen and (max-width: 767px) { #contents .txtbox2 { width: 92%; }
  #contents .txtbox3 { width: 80%; }
  #contents .lead { border: 4px solid #0076c2; border-radius: 10px; padding: 20px; width: 90%; max-width: inherit; min-height: inherit; margin: 0 auto; background: #fff url(../graphic/001/icon01.png) no-repeat; background-size: 100px 92px; font-size: 30px; text-align: left; color: #333; line-height: 1.5em; }
  #contents .lead .title { font-size: 33px; font-weight: bold; display: block; margin-bottom: 10px; padding-left: 90px; }
  #contents .txtbox { border-radius: 14px; border-right: 7px solid #0052a4; border-bottom: 7px solid #0052a4; padding: 20px 20px 20px 120px; width: 90%; max-width: inherit; min-height: inherit; margin: 0 auto; background: #fff url(../graphic/001/icon02.png) no-repeat; background-size: 90px 90px; font-size: 30px; text-align: left; color: #333; line-height: 1.4em; }
  #contents .txtbox2 { font-size: 30px; line-height: 1.4em; }
  #contents .txtbox3 { font-size: 30px; line-height: 1.4em; }
	.like-iphone #contents .lead{font-size:14px;}
	.like-iphone #contents .lead .title,
	.like-iphone #contents .txtbox,
	.like-iphone #contents .txtbox2,
	.like-iphone #contents .txtbox3{font-size:12px;}
}

@media (min-width: 475px) and (max-width: 767px) { #contents .lead .comment { padding-left: 90px; display: block; } }
@media screen and (max-width: 475px) { #contents .sec02:after { top: 600px; } }