/*--------------------------
	釧路フィッシャーマンズワーフMOO
	moo946.com
	2021-07-01	for Toppage 
----------------------------*/
@charset "UTF-8";

/*----------------------
	Adjust
----------------------*/
body	{ background: #0e1e4a url(bg01.jpg) no-repeat center top / 150%; transition: .4s; }
.sunset	{ background-image: url(bg02.jpg); background-color: #5b2f00; }
.night	{ background-image: url(bg03.jpg); }

header	{ height: 50vh; }
header	{ height: 80vw; }

.chgBg	{ position: absolute; top: 30vh; left: 0; z-index: 99; }
.chgBg ul	{ margin: 0; padding: 1rem; list-style-type: none; }
.chgBg ul	{ display: grid; }
.chgBg a	{ color: inherit; text-decoration: none; text-shadow: 0 0 3px #fff; opacity: .5; transition: .3s; }
.chgBg a:before	{ content: '●'; font-size: .6rem; }
.chgBg a:hover	{ opacity: 1; text-shadow: 0 0 10px #fff, 0 0 10px #fff; }
.chgBg li:nth-child(1)	{ color: #36c; }
.chgBg li:nth-child(2)	{ color: #c60; }
.chgBg li:nth-child(3)	{ color: #135; }


/* ギャラリー */
#top_gallery		{ background-color: transparent; }
#top_gallery .inner { padding: 0; }

/* インフォメーション */
#top_info	{ background: url(parts/bginfo@2x.png) repeat-x 100% 100% / contain; }
#top_info .inner { max-width: 1120px; }
#top_info .title {
	display: block;
	margin: 0 auto;
	width: 40vw;
	height: 12vh;
	max-height: 110px;
	text-indent: -9999px;
	background: url(parts/information@2x.png) no-repeat 50% 50% / contain;
	border: none;
}

#top_sns	{ background-color: #5c998f; }
#top_sns .inner	{ display: grid; grid-gap: 1em; align-items: stretch; }
#top_sns .inner	{ grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
#top_sns iframe	{ margin: auto; max-width: 100%; }
/*
#top_sns .tweet-box { max-height: 180px; overflow: scroll; background-color: #fff; box-shadow: 0px 0px 9px rgb(0 0 0 / 20%); }
*/

#top_bnr	{ background-color: #dcdcdc; }
#top_bnr .inner { max-width: 1120px; }
#top_bnr ul	{ display: grid; grid-gap: 1em; align-items: stretch; }
#top_bnr ul	{ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
#top_bnr ul	{ margin: 0; padding: 0; text-align: center; list-style-type: none; }
#top_bnr a	{ transition: .2s; }
#top_bnr a:hover	{ opacity: .8; }

#top_bnr .onlineshop	{ margin-bottom: 1em; }

/* for SmartPhone Landscape (横) */
@media screen and (min-width:480px) { 
}

/* for Tablet */
@media screen and (min-width:768px) { /* and ( max-width:1024px) { */
/*
	#top_gallery	{ display: none; }
*/
	#top_bnr ul	{ grid-gap: 2em; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
	#top_bnr .onlineshop	{ margin-bottom: 2em; }
}

/* for PC */
@media screen and (min-width:1000px) {
	body	{ background-size: initial; }
/*	header	{ height: 70vh; }	/* default */
	header	{ height: 85vh; }	/* #top_galley on */

	#top_info ul.tabBtn li	{ min-width: 150px; }
	#top_info .second a		{ font-size: 0.9rem; padding: 1rem; }
	#top_info .second .fa	{ font-size: 2.7rem; }

	#top_bnr ul	{
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: repeat(2, auto);
	}
	#top_bnr li:nth-child(1)	{ grid-column:  1/ 5; grid-row: 1/2; }
	#top_bnr li:nth-child(2)	{ grid-column:  5/ 9; grid-row: 1/2; }
	#top_bnr li:nth-child(3)	{ grid-column:  9/13; grid-row: 1/2; }
	#top_bnr li:nth-child(4)	{ grid-column:  1/ 4; grid-row: 2/3; }
	#top_bnr li:nth-child(5)	{ grid-column:  4/ 7; grid-row: 2/3; }
	#top_bnr li:nth-child(6)	{ grid-column:  7/10; grid-row: 2/3; }
	#top_bnr li:nth-child(7)	{ grid-column: 10/13; grid-row: 2/3; }
}