/*
小谷村ドットネット
　トップページCSS
*/
/* header */
#hero {
	padding: calc(9.517vw + 24.545px)  calc(11.364vw - 23.364px) 39px;
}
#hero_inner {
	display: flex;
	flex-wrap: wrap;
	height: calc(21vw * 1.725);
	justify-content: space-between;
	width: 100%;
}
#hero_inner input[type="radio"] {
	display: none;
}
#titles {
	height: 100%;
	position: relative;
	width: calc(21vw * 0.575);
}
#captions {
	display: flex;
	justify-content: center;
	position: relative;
	width: calc(100% - 21vw * 2.425);
}
#photos {
	height: 100%;
	position: relative;
	width: calc(21vw * 1.725);
}
#hero_inner img.title {
	display: block;
	height: calc(21vw * 1.131);
	left: calc(21vw * 0.206);
	opacity: 0;
	position: absolute;
	top: 0;
	transition: all 1s;
	width: calc(21vw * 0.163);
}
#village {
	bottom: 0;
	display: block;
	height: calc(21vw * 0.5);
	left: 0;
	position: absolute;
	width: 100%;
}
#hero_inner p.caption {
	font-size: calc(1.989vw + 3.636px);
	line-height: calc(3.267vw + 11.545px);
	opacity: 0;
	position: absolute;
	top: calc(16.193vw - 12.818px);
	transition: all 1s;
}
#hero_inner img.photo {
	display: block;
	height: 100%;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: all 1s;
	width: 100%;
}
input#sel_nobuta:checked ~ div .nobuta,
input#sel_chanoko:checked ~ div .chanoko,
input#sel_cabbage:checked ~ div .cabbage,
/*
input#sel_carrot:checked ~ div .carrot,
*/
input#sel_tanada:checked ~ div .tanada {
	opacity: 1;
}
#indicator {
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin: 24px auto 0;
	width: 243px;
}
input#sel_nobuta:checked ~ #indicator label[for="sel_nobuta"],
input#sel_chanoko:checked ~ #indicator label[for="sel_chanoko"],
/*
input#sel_carrot:checked ~ #indicator label[for="sel_carrot"],
*/
input#sel_cabbage:checked ~ #indicator label[for="sel_cabbage"],
input#sel_tanada:checked ~ #indicator label[for="sel_tanada"] {
	background-color: #867873;
}
#indicator li label {
	background-color: #DBD6A8;
	border-radius: 1000px;
	cursor: pointer;
	display: block;
	height: 15px;
	width: 15px;
}

/* main */
main p.hide {
	display: none;
}
#menu_large {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 61px auto 40px;
	padding-right: 2px;
	width: calc(30vw * 2.488 + 10px);
}
#menu_large .panel {
	height: 37.5vw;
	margin-bottom: 20px;
	position: relative;
	width: 37.5vw;
}
/*#menu_large .panel:not([href]) {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 7px 0 6px;
}*/
#menu_large .panel[href] {
	background-color: white;
	box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.25);
}
#menu_large .panel h2 {
	font-size: calc(1.292vw + 7.866px);
	left: 0;
	position: absolute;
	text-align: center;
	top: 31.658%;
	margin: 0;
	width: 100%;
}
#menu_large .panel:not([href]) img {
	display: block;
	height: 14.322%;
	left: 40.452%;
	position: absolute;
	top: 54.02%;
	width: 19.095%;
}
#menu_large a[href] .title {
	display: block;
	height: 90.955%;
	left: 8.794%;
	position: absolute;
	width: 13.065%;
}
#menu_large a[href] .photo {
	display: block;
	height: 55.276%;
	right: 11.055%;
	position: absolute;
	top: 28.141%;
	width: 55.276%;
}
#menu_large a[href]:hover::before {
	background-color: rgba(177, 125, 48, 0.31);
	content: "";
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
}
#menu_small {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto;
	width: calc(75vw + 10px);
}
#menu_small .panel {
	color: inherit;
	margin-bottom: 20px;
	position: relative;
	text-decoration: none;
}
#menu_small .panel:hover::before {
	background-color: rgba(177, 125, 48, 0.31);
	content: "";
	display: block;
	height: 61px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
}
#menu_small img {
	box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.25);
	display: block;
	height: auto;
	width: 37.5vw;
}
#menu_small p {
	line-height: 1;
	margin: 11px 0 0;
	text-align: center;
}

/* Instagram */
.instagram {
	margin: 0 auto 30px;
	width: 154px;
}
.instagram h2 {
	line-height: 63px;
	vertical-align: top;
	white-space: nowrap;
}
.instagram h2::before {
	background: url(../img/common/icon_instagram.png) no-repeat center center;
	background-size: contain;
	content: "";
	display: inline-block;
	height: 63px;
	margin-right: 14px;
	width: 63px;
}
.ul_wrapper {
	overflow-x: auto;
	width: 100%;
}
.instagram ul {
	display: inline-block;
	font-size: 0;
	list-style: none;
	width: 818px;
}
.instagram ul li {
	display: inline-block;
}
.instagram ul li + li {
	margin-left: 12px;
}
.instagram ul li a {
	background-size: contain;
	display: block;
	width: 154px;
}
.instagram ul li a::before {
	content: "";
	display: block;
	padding-top: 100%;
	width: 154px;
}

/* media queries */
@media (min-width: 320px) {
	#menu_small {
		width: calc(7.236vw + 226.848px);
	}
	#menu_small img {
		width: calc(3.618vw + 108.424px);
	}
	main {
		width: calc(85.013vw - 22.041px);
	}
}
@media (min-width: 400px) {
	.instagram {
		width: 320px;
	}
}
@media (min-width: 480px) {
	#menu_large {
		max-width: 1234px;
		width: calc(77.001vw + 1.98px);
	}
	#menu_large .panel {
		height: 24.875vw;
		margin-bottom: calc(1.188vw + 0.99px);
		max-width: 398px;
		max-height: 398px;
		width: 24.875vw;
	}
}
@media (min-width: 620px) {
	.instagram {
		width: 486px;
	}
}
@media (min-width: 820px) {
	.instagram {
		width: 652px;
	}
}
@media (min-width: 1095px) {
	#hero {
		padding: 122px 93px 50px;
	}
	#hero_inner {
		height: calc(22.574vw + 138.812px);
		position: relative;
	}
	#titles {
		width: calc(7.498vw + 46.692px);
	}
	#captions {
		width: calc(100% - 29.993vw - 186.772px);
	}
	#photos {
		width: calc(22.574vw + 138.812px);
	}
	#hero img.title {
		height: calc(14.752vw + 91.863px);
		left: calc(2.69vw + 16.748px);
		width: calc(2.119vw + 13.197px);
	}
	#village {
		height: calc(6.52vs + 40.602px);
	}
	#hero p.caption {
		font-size: calc(1.229vw + 11.402px);
		line-height: calc(2.235vw + 22.095px);
		top: calc(7.263vw + 78.559px);
	}
	#indicator {
		bottom: 0;
		left: calc(50% - 7.498vw - 154.695px);
		position: absolute;
		width: 216px;
	}
	#indicator li label {
		height: 24px;
		width: 24px;
	}
	main {
		width: calc(64.554vw + 201.129px);
	}
	h2 {
		font-size: 2rem;
		margin: 50px 0 38px;
	}
	main p {
		font-size: 2rem;
		line-height: 2.25;
	}
	main p.hide {
		display: block;
	}
	#menu_large .panel h2 {
		font-size: calc(1.98vw + 0.317px);
	}
	#menu_small {
		width: calc(77.001vw + 1.98px);
	}
	#menu_small img {
		max-width: 212px;
		width: calc(12.673vw + 9.228px);
	}
	.instagram {
		width: 863px;
	}
	.instagram h2 {
		line-height: 108px;
	}
	.instagram h2::before {
		height: 108px;
		width: 108px;
	}
	.instagram ul {
		width: 1098px;
	}
	.instagram ul li + li {
		margin-left: 82px;
	}
}
@media (min-width: 1400px) {
	.instagram {
		width: 1098px;
	}
}
@media (min-width: 1600px) {
	/* for pc */
	#hero {
		margin-top: 0;
	}
	#hero_inner {
		height: calc(16.25vw + 240px);
	}
	#titles {
		width: calc(5.416vw + 80.02px);
	}
	#hero img.title {
		height: calc(10.656vw + 157.4px);
		left: calc(1.944vw + 28.68px);
		width: calc(1.531vw + 22.6px);
	}
	#village {
		height: calc(4.709vw + 69.58px);
	}
	#captions {
		width: calc(100% - 21.666vw - 320.02px);
	}
	#photos {
		width: calc(16.25vw + 240px);
	}
	#menu_large .panel {
		margin-bottom: 20px;
	}
	#menu_large .panel[href] {
		box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.3);
	}
	#menu_large a[href] .title {
		height: 362px;
		left: 35px;
		width: 52px;
	}
	#menu_large a[href] .photo {
		height: 220px;
		right: 44px;
		top: 112px;
		width: 220px;
	}
	#menu_large .panel h2 {
		font-size: 3.2rem;
	}
	#menu_small {
		justify-content: space-between;
		width: 1232px;
	}
	#menu_small .panel {
		width: 212px;
	}
	#menu_small img {
		height: 108px;
		width: 212px;
	}
	#menu_small p {
		font-weight: bold;
		margin: 13px 0 0;
	}
	#menu_small .panel:hover::before {
		height: 108px;
	}
	main {
		width: 1234px;
	}
}