@charset "utf-8";


/*common
----------------------------------------------------------- */


/* header
----------------------------------------------------------- */
div#header{
	background:url(../img/bk_stripe.png) repeat center center;
}
div#header::after {
	background-color: #fff;
}
div#header h1#logo{
	background: #fff;
}
div#header h1#logo a{
	position:relative;
	z-index:99999;
}
ul#gnav {
	position: absolute;
	bottom:calc(-570px - 1em - 38px - 10px);
	left:0;
	margin: 0;
}
@media screen and (max-width:1280px){
	div#gnav h1#logo:before{
		padding-top:calc(44vw + 85px);
		background-size:auto calc(100% - 70px);
	}
}
@media screen and (max-width:1180px){
	ul#gnav {
		bottom:calc(-570px - 1em - 38px - 10px - 25px);
	}
}
@media screen and (max-width:1065px){
	div#header h1#logo:before{
		width:100vw;
		left:0;
	}
}
@media screen and (max-width:1060px){
	ul#gnav {
		bottom: calc(-570*100vw/1060 - 1em - 38px - 10px - 25px);
	}
}

/* museum_name
----------------------------------------------------------- */
div#museum_name{
	width:100vw;
	height:570px;
	position:relative;
	margin:0 0 calc(1em + 38px + 10px) -120px;
	padding:0;
	background:url(../img/bk_stripe.png) repeat center center;
	overflow:hidden;
}
div#museum_name div.inner{
	width:1060px;
	height:calc(570px - 90px);
	margin:0 auto;
	padding: 90px 0 0 0;
	text-align:center;
	animation:0.7s insert ease backwards;
	animation-delay:1.2s;
	background: url(../img/top/main_bk.webp) no-repeat center top;
	background-size:100% auto;
}
div#museum_name p.tagline{
	margin-bottom:20px;
	font-size:14px;
	font-weight:bold;
	text-align:center;
}
div#museum_name h1.ttl{
	margin:0 auto 15px;
	text-align:center;
}
div#museum_name p.outline{
	font-size:20px;
	font-weight:bold;
	text-align:center;
}
div#museum_name a.sunmash_room{
	width:150px;
	margin:0 auto;
	position:absolute;
	bottom:10px;
	left:calc(50% - 75px);
	display:block;
	animation:0.7s sunmash ease backwards;
	animation-delay:1s;
}
@keyframes sunmash{
	0%  {bottom:-160px;}
	50% {bottom:80px;}
	100%{bottom:10px;}
}

div#museum_name:before,
div#museum_name:after,
div#museum_name div.inner:before,
div#museum_name div.inner:after{
	content:"";
	position:absolute;
	display:block;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100% auto;
}
div#museum_name:before{
	width:146px;
	padding-top:145px;
	top:-20px;
	left:calc(50vw - 530px + 240px);
	animation:5s item1 ease-out infinite;
	background-image:url(../img/top/item1.webp);
}
div#museum_name:after{
	width:114px;
	padding-top:114px;
	top:100px;
	right:calc(50vw - 530px + 240px);
	animation:60s item2 ease infinite;
	background-image:url(../img/top/item2.webp);
}
div#museum_name div.inner:before{
	width:188px;
	padding-top:203px;
	bottom:95px;
	right:calc(50vw - 530px + 70px);
	animation:2s item3 ease-in backwards;
	animation-delay:15s;
	background-image:url(../img/top/item3.webp);
}
div#museum_name div.inner:after{
	width:149px;
	padding-top:165px;
	bottom:35px;
	left:calc(50vw - 530px + 210px);
	animation:10s item4 ease infinite;
	animation-delay:3s;
	background-image:url(../img/top/item4.webp);
}
@keyframes item1{
	0%  {transform:rotate(0);}
	79%  {transform:rotate(0);}
	80% {transform:rotate(15deg);}
	90% {transform:rotate(-10deg);}
	100%{transform:rotate(0);}
}
@keyframes item2{
	0%  {transform:rotate(0);}
	100%{transform:rotate(360deg);}
}
@keyframes item3{
	0%  { bottom:95px ;right:calc(50vw - 530px + 70px);}
	80% { bottom:395px;right:calc(50vw - 530px + 2070px);}
	81% { bottom:-50px ;right:calc(50vw - 530px - 600px);}
	100%{ bottom:95px ;right:calc(50vw - 530px + 70px);}
}
@keyframes item4{
	0%  {bottom:35px;left:calc(50vw - 530px + 210px);}
	79% {bottom:35px;left:calc(50vw - 530px + 210px);}
	80% {bottom:45px;left:calc(50vw - 530px + 250px);}
	85% {bottom:45px;left:calc(50vw - 530px + 250px);}
	95% {bottom:27px;left:calc(50vw - 530px + 180px);}
	100%{bottom:35px;left:calc(50vw - 530px + 210px);}
}

@media screen and (max-width:1300px){
	div#museum_name{
		width:100vw;
		margin-left:calc(-50vw + 530px - 530px + 50%);
	}
}
@media screen and (max-width:1180px){
	div#museum_name{
		margin-left:-120px;
		height:auto;
		margin-bottom:calc(1em + 38px + 10px + 25px);
	}
}
@media screen and (max-width:1060px){
	div#museum_name{
		margin-left:-120px;
	}
	div#museum_name div.inner{
		width:100vw;
		height:calc(570*100vw/1060 - 90*100vw/1060);
		margin:0 auto;
		padding: calc(90*100%/1060) 0 0 0;
	}
	div#museum_name p.tagline{
		margin-bottom:15px;
	}
	div#museum_name h1.ttl{
		width:calc(483*100vw/1060);
	}
	div#museum_name a.sunmash_room {
		width:calc(150*100vw/1060);
		left: calc(50vw - 150*100vw/1060/2);
	}
	@keyframes sunmash{
		0%  {bottom:calc(-160*100vw/1060);}
		50% {bottom:calc(80*100vw/1060);}
		100%{bottom:calc(10*100vw/1060);}
	}
	div#museum_name:before{
		width:calc(146*100vw/1060);
		padding-top:calc(145*100vw/1060);
		top:calc(-20*100vw/1060);
		left:calc(240*100vw/1060);
	}
	div#museum_name:after{
		width:calc(114*100vw/1060);
		padding-top:calc(114*100vw/1060);
		top:calc(100*100vw/1060);
		right:calc(240*100vw/1060);
	}
	div#museum_name div.inner:before{
		width:calc(188*100vw/1060);
		padding-top:calc(203*100vw/1060);
		bottom:calc(95*100vw/1060);
		right:calc(70*100vw/1060);
	}
	div#museum_name div.inner:after{
		width:calc(149*100vw/1060);
		padding-top:calc(165*100vw/1060);
		bottom:calc(35*100vw/1060);
		left:calc(210*100vw/1060);
	}
	@keyframes item3{
		0%  { bottom:calc(95*100vw/1060) ;right:calc(70*100vw/1060);}
		80% { bottom:calc(395*100vw/1060);right:calc(2070*100vw/1060);}
		81% { bottom:calc(-50*100vw/1060);right:calc(-600*100vw/1060);}
		100%{ bottom:calc(95*100vw/1060) ;right:calc(70*100vw/1060);}
	}
	@keyframes item4{
		0%  {bottom:calc(35*100vw/1060);left:calc(210*100vw/1060);}
		79% {bottom:calc(35*100vw/1060);left:calc(210*100vw/1060);}
		80% {bottom:calc(45*100vw/1060);left:calc(250*100vw/1060);}
		85% {bottom:calc(45*100vw/1060);left:calc(250*100vw/1060);}
		95% {bottom:calc(27*100vw/1060);left:calc(180*100vw/1060);}
		100%{bottom:calc(35*100vw/1060);left:calc(210*100vw/1060);}
	}
}

@media screen and (max-width:990px){
	div#museum_name{
		margin-bottom:0;
	}
}
@media screen and (max-width:860px){
	div#museum_name{
		margin-left:-90px;
	}
	div#museum_name div.inner{
		height:calc(570*100vw/1060 - 60*100vw/1060);
		padding: calc(60*100%/1060) 0 0 0;
	}
	div#museum_name a.sunmash_room {
		margin-bottom:-10px;
	}
}
@media screen and (max-width:780px){
	div#museum_name{
		margin-left:-5vw;
	}
	div#museum_name p.tagline{
		margin-bottom:20px;
		font-size:12px;
	}
	div#museum_name p.outline{
		font-size:18px;
	}
	div#museum_name::before {
		left: calc(240*100vw/1060 - 30px);
	}
}
@media screen and (max-width:640px){
	div#museum_name {
		background:none;
	}
	div#museum_name div.inner {
		height: calc(745*100vw/640 - 180*100vw/640);
		padding: calc(180*100vw/640) 0 0 0;
		background: url(../img/top/main_bk_sp.webp) no-repeat center top / 100% auto;
	}
	div#museum_name p.tagline{
		font-size:14px;
	}
	div#museum_name h1.ttl{
		width:calc(483*100vw/640);
	}
	div#museum_name p.outline{
		font-size:20px;
	}
	div#museum_name a.sunmash_room {
		width:calc(150*100vw/640);
		left: calc(50vw - 150*100vw/640/2);
	}
	div#museum_name:before{
		width:calc(146*100vw/640);
		padding-top:calc(145*100vw/640);
		top:calc(30*100vw/640);
		left:calc(50*100vw/640);
	}
	div#museum_name:after{
		width:calc(114*100vw/640);
		padding-top:calc(114*100vw/640);
		top:calc(85*100vw/640);
		right:calc(50*100vw/640);
	}
	div#museum_name div.inner:before{
		width:calc(188*100vw/640);
		padding-top:calc(203*100vw/640);
		bottom:calc(95*100vw/640);
		right:calc(0*100vw/640);
	}
	div#museum_name div.inner:after{
		width:calc(149*100vw/640);
		padding-top:calc(165*100vw/640);
		bottom:calc(50*100vw/640);
		left:calc(30*100vw/640);
		animation:10s item4_640 ease infinite;
	}
	@keyframes item4_640{
		0%  {bottom:calc(50*100vw/640);left:calc(30*100vw/640);}
		79% {bottom:calc(50*100vw/640);left:calc(30*100vw/640);}
		80% {bottom:calc(60*100vw/640);left:calc(70*100vw/640);}
		85% {bottom:calc(60*100vw/640);left:calc(70*100vw/640);}
		95% {bottom:calc(42*100vw/640);left:calc(0*100vw/640);}
		100%{bottom:calc(50*100vw/640);left:calc(30*100vw/640);}
	}
}



/* concept
----------------------------------------------------------- */
div#concept{
	width:760px;
	margin:0 -120px;
	padding:120px calc(50vw - 380px);
	background:url(../img/top/concept.webp) no-repeat center top 100% / 1058px auto,
	url(../img/top/wave_w.webp) repeat-x center bottom / 70% auto;
	background-color:#ffdfc5;
}
div#concept h2.sttl{
	margin-bottom:15px;
	font-size:20px;
	font-weight:bold;
	text-align:left;
}



/* topics
----------------------------------------------------------- */
div#topics{
	width:1024px;
	position:relative;
	margin:0 -120px;
	padding:120px calc(50vw - 512px);
	background:url(../img/top/wave_b.webp) repeat-x center bottom / 70% auto;
}
div#topics:before,
div#topics:after{
	content:"";
	position:absolute;
	display:block;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100%;
	z-index:-1;
}
div#topics:before{
	width:230px;
	padding-top:222px;
	top:calc(1.6em + 20px);
	right:15vw;
	background-image:url(../img/ill/mush.webp);
}
div#topics:after{
	width:143px;
	padding-top:104px;
	top:calc(1.6em + 120px);
	left:20vw;
	background-image:url(../img/ill/earth.webp);
}

/* cooking
----------------------------------------------------------- */
div#cooking{
	width:100vw;
	position:relative;
	margin:0 -120px;
	padding:120px 0;
	background:url(../img/top/wave_w.webp) repeat-x center bottom / 70% auto,
	url(../img/top/cooking.webp) no-repeat center center / auto;
	background-color:#ffdfc5;
}
div#cooking .slick-slider{
	position:relative;
}
div#cooking .slick-prev,
div#cooking .slick-next{
	width:50px;
	height:50px;
	z-index:100;
}
div#cooking .slick-prev{
	left:20px;
}
div#cooking .slick-next{
	right:20px;
}
div#cooking .slick-prev:before,
div#cooking .slick-next:before{
	font-size:50px;
	opacity:0.5;
}
div#cooking .slick-prev:hover:before,
div#cooking .slick-next:hover:before{
	opacity:1;
}
div#cooking .slick-dots{
	bottom:-45px;
}
div#cooking .slick-dots li button:before{
	font-size:12px;
	color:#fff;
	opacity:0.5;
}
div#cooking .slick-dots li.slick-active button:before{
	color:#fff;
	opacity:1;
}
div#cooking:before,
div#cooking:after{
	content:"";
	position:absolute;
	display:block;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100%;
	z-index:0;
}
div#cooking:before{
	width:146px;
	padding-top:118px;
	top:-75px;
	left:15vw;
	background-image:url(../img/ill/pen.webp);
}
div#cooking:after{
	width:96px;
	padding-top:104px;
	top:15px;
	right:20vw;
	background-image:url(../img/ill/donguri.webp);
}
div#cooking ul.topics_list{
	width:100vw;
}
div#cooking ul.topics_list li{
	margin-right:30px!important;
}
div#cooking ul.topics_list li p.time{
	width:3em;
	float:right;
	position:relative;
	margin:calc(-1.4em - 15px - 15px) 15px 0 0;
	padding:0 5px 0 30px;
	text-align:center;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	background:#fff url(../img/icon/time.png) no-repeat left 5px center;
}
div#cooking ul.topics_list li p.name{
	clear:both;
	margin-bottom:15px;
}
div#cooking ul.topics_list li p.outline{
	margin-bottom:15px;
}
div#cooking ul.topics_list li p.cook{
	padding:5px 0 5px 40px;
	background:url(../img/icon/cook.png) no-repeat left center;
}
div#cooking ul.topics_list li span.pic{
	max-width:100%;
	height:auto;
}


/* food_edu
----------------------------------------------------------- */
div#food_edu{
	width:960px;
	position:relative;
	margin:0 -120px;
	padding:120px calc(50vw - 480px);
	background:url(../img/top/food_edu.webp) no-repeat left 20% top calc(1em + 45px + 120px + 30px) / 30% auto;
	overflow:hidden;
}
div#food_edu:before{
	width:151px;
	content:"";
	position:absolute;
	top:60px;
	right:5vw;
	display:block;
	padding-top:181px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100%;
	background-image:url(../img/ill/grass.webp);
	z-index:-1;
}
div#food_edu h2.sttl{
	font-size:20px;
	font-weight:bold;
	text-align:left;
}
div#food_edu h2.sttl,
div#food_edu p.outline{
	width:50%;
	float:right;
	margin:0 0 0 50%;
}
div#food_edu p.outline{
	margin-bottom:60px;
}


/* Responsive Design
----------------------------------------------------------- */

/* 1280px以下 */
@media screen and (max-width:1280px){
	div#concept{
		width:calc(100% - 40px);
		margin:0 -90px;
		padding:120px calc(50vw - 50% + 110px);
	}
	div#topics{
		width:calc(100% - 40px);
		margin:0 -90px;
		padding:120px calc(50vw - 50% + 110px);
	}
	div#cooking{
		margin:0 -90px;
	}
	div#food_edu{
		width:calc(100% - 40px);
		margin:0 -90px;
		padding:120px calc(50vw - 50% + 110px);
	}
}

/* 1060px以下 */
@media screen and (max-width:1060px){
	div#concept{
		width:100%;
		margin:0 -90px;
		padding:90px 90px;
		background-size:80% auto,70% auto;
	}
	div#topics{
		width:100%;
		margin:0 -90px;
		padding:90px 90px;
	}
	div#cooking{
		padding:90px 0;
	}
	div#food_edu{
		width:100%;
		margin:0 -90px;
		padding:90px 90px;
		background-size:25% auto;
	}
}

/* 860px以下 */
@media screen and (max-width:860px){
	div#concept{
		width:calc(100% - 20px);
		margin:0 -90px;
		padding:60px 90px;
		background-size:70% auto,100% auto;
		background-position:center bottom,center bottom;
	}
	div#topics{
		width:calc(100% - 20px);
		margin:0 -90px;
		padding:60px 90px;
	}
	div#topics:before{
		width:180px;
		padding-top:174px;
		right:10vw;
	}
	div#topics:after{
		width:110px;
		padding-top:80px;
		left:10vw;
	}
	div#cooking{
		padding:60px 0;
	}
	div#cooking:before{
		width:110px;
		padding-top:89px;
		left:10vw;
	}
	div#cooking:after{
		width:72px;
		padding-top:78px;
		right:15vw;
	}
	div#food_edu{
		width:calc(100% - 20px);
		margin:0 -90px;
		padding:60px 90px;
		background-size:30% auto;
		background-position:left 10% top calc(1em + 45px + 90px + 30px);
	}
	div#food_edu:before{
		width:120px;
		padding-top:144px;
		right:5vw;
	}
}

/* 780px以下 */
@media screen and (max-width:780px){
	div#concept{
		width:100%;
		margin:0 -5vw;
		padding:60px 5vw;
		background-size:80% auto,100% auto;
	}
	div#topics{
		width:100%;
		margin:0 -5vw;
		padding:60px 5vw;
	}
	div#cooking{
		margin:0 -5vw;
		padding:60px 5vw;
		background-size:100% auto,auto;
	}
	div#cooking .slick-prev,
	div#cooking .slick-next{
		width:40px;
		height:40px;
	}
	div#cooking .slick-prev{
		left:10px;
	}
	div#cooking .slick-next{
		right:10px;
	}
	div#cooking .slick-prev:before,
	div#cooking .slick-next:before{
		font-size:40px;
	}
	div#food_edu{
		width:100%;
		margin:0 -5vw;
		padding:60px 5vw;
		background-size:40% auto;
		background-position:left top calc(1em + 45px + 60px + 30px);
	}
	div#food_edu h2.sttl,
	div#food_edu p.outline{
		width:100%;
		float:none;
		margin:0 0 15px 0;
	}
}

/* 640px以下 */
@media screen and (max-width:640px){
	div#concept{
		padding:45px 5vw;
		background-position:center bottom 60px,center bottom;
	}
	div#topics{
		padding:45px 5vw;
	}
	div#topics:before{
		width:140px;
		padding-top:135px;
		top:calc(1.6em + 10px);
	}
	div#topics:after{
		width:90px;
		padding-top:65px;
		top:calc(1.6em + 80px);
	}
	div#cooking{
		padding:45px 0;
	}
	div#cooking:before{
		width:90px;
		padding-top:73px;
		top:-50px;
	}
	div#cooking:after{
		width:60px;
		padding-top:65px;
		top:10px;
	}
	div#food_edu{
		padding:45px 5vw;
		background-size:50% auto;
	}
	div#food_edu:before{
		width:90px;
		padding-top:108px;
		top:30px;
	}
}

/* 540px以下 */
@media screen and (max-width:540px){
	div#concept{
		padding:30px 5vw;
		background-size:100% auto,100% auto;
		background-position:center bottom 30px,center bottom;
	}
	div#topics{
		padding:30px 5vw;
	}
	div#topics:before{
		width:110px;
		padding-top:106px;
		right:5vw;
	}
	div#topics:after{
		width:70px;
		padding-top:51px;
		left:5vw;
	}
	div#cooking{
		padding:30px 0 60px;
		background-size:100% auto,auto;
	}
	div#cooking:before{
		display:none;
	}
	div#cooking:after{
		display:none;
	}
	div#cooking .slick-prev,
	div#cooking .slick-next{
		display:none!important;
	}
	div#cooking .slick-dots{
		bottom:-35px;
	}
	div#cooking .slick-dots li button:before{
		font-size:10px;
	}
	div#food_edu{
		padding:30px 5vw;
		background-image:none;
	}
	div#food_edu:before{
		display:none;
	}
}