@charset "UTF-8";
/* CSS Document */
* {
	list-style: none;
	text-decoration: none;
	color: #fff;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}

html {
	width: 100%;
	height: 100%;
	background: #444e88;
}

body {
	position: relative;

}

.wrapper {
	max-width: 1366px;
	height: auto;
	margin: 0 auto;
}

#sec01,#sec02,#sec04 {
	padding: 120px 0 0;
}

#sec02,#sec03,#sec04 {
	margin: 0 75px;
}

.menuTitle {
	font-size: 32px;
	line-height: 48px;
}

.menuAbout,.menuPrice {
	font-size: 16px;
	line-height: 36px;
}

.menuPrice {
	font-size: 24px;
}


/*以下ヘッダー部分*/

header {
	background: #1b284d;
	padding: 0 100px;
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100vw;
	

}

.header {
	width: 100%;
	height: 110px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.logo {
	height: 100px;
	padding: 10px 0 0;
}

.logo img {
	height: 100%;
}

.header .nav {
	display: flex;
	align-items: flex-end;
}

.nav ul {
	display: flex;
	justify-content: space-around;

}

.nav ul li a {
	width: 120px;
	display: block;
	text-align: center;
	padding: 10px;
	border: #1b284d solid 2px;
	font-size: 16px;

}

.nav ul li a:hover {
	border: #fff solid 2px;
	border-radius: 10px 10px 0 0;
	background: #171d4a;
}

.HeroImg {
	margin: 0 auto;
	height: auto;
	max-height: 1033px;
	padding: 100px 0 0;
}

.HeroImg img{
	width: 100%;
}

/*ヘッダーここまで*/
/*ここからメイン*/
/*バナー*/
/*
.contents_name {
	background: #fff;
	margin: 50px auto 50px;
	text-align: center;
	line-height: 80px;
	border-radius: 10px;
	width: 450px;
	height: 75px;
	font-size: 32px;
	box-shadow: 5px 5px 5px 1px #171d4a;
	color: #444e88
	
}
*/

.contents_name {
	background: #fff;
	margin: 50px auto 50px;
	text-align: center;
	line-height: 72px;
	border-radius: 10px;
	width: 350px;
	height: 70px;
	font-size: 26px;
	box-shadow: 5px 5px 5px 1px #171d4a;
	color: #444e88
	
}


.bannerRow {
	display: flex;
	flex-direction: row;
	justify-content:space-around;
}

.bannerColomn {
	display: flex;
	flex-direction: column;
}

.banner01 {
	max-width: 683px;
}

.banner02,.banner03 {
	max-width: 683px;
	max-height: 250px;
}

.bannerRow img,.bannerColomn img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

.banner01 img:hover,.banner02 img:hover,.banner03 img:hover {
	box-shadow: 5px 5px 5px 1px #171d4a;
	transform: translate(-10px,-7px);
}


/*バナー終わり*/
/*sns*/
.sns {
	padding: 50px 50px 0;
	display: flex;
	justify-content: space-between;
}

.youtube {
	width: 60%;
	margin: 0 auto;
	aspect-ratio: 16/9;

}

.youtube iframe {
	width: 100%;
	height: 100%;
	vertical-align: top;

}

.twitter {
	width: 30%;
	margin: 0 auto;
}

.twitter iframe {
	height: 100%!important;
}


/*sns終わり*/
/*メニュー*/

.menu {
	display: flex;
	flex-direction: row;
}

.menu img {
	width: 410px;
	height: 273px;
}

.menu dl {
	padding: 0 0 50px;
}

.menuImg {
	padding: 0 100px 50px;
}

.mainMenu .menu dl {
	padding-left: 50px;
}

.allMenu {
	text-align: center;
	font-size: 24px;
	border: #444F88;
}

.allMenu a {
	display: block;
/*	border-bottom: #444F88 solid 1px;*/
	width: 280px;
	margin: 0 auto;
	border-bottom: #fff solid 1px;

}

.allMenu a:hover {
	border-bottom: aqua solid 1px;
	color: aqua;
	
}

/*メニュー終わり*/
/*豆の販売*/
.beanMenu {
	padding: 0 100px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.beanMenu dl {
	width: 400px;
	padding: 0 0 50px;
}

/*豆の販売終わり*/
/*アクセス*/
.access {
	display: flex;
	justify-content: space-between;
}

.access p {
	width: 500px;
	padding: 50px 0 0;
	font-size: 18px;
	line-height: 32px;

}

/*アクセス終わり*/
/*フッター*/

footer {
	background: #1b284d;
	padding: 0 75px;
	margin: 75px 0 0 ;

}

footer p {
	padding: 30px 0;
	margin: 0 auto;
	text-align: center;
}

@media(max-width:1500px){
	.HeroImg img {
		display: block;
		margin: 0 auto;
	}
	
	.sns {
		margin: 0 auto;
		flex-direction: column;
	}
	
	iframe {
		display: block;
		margin: 0 auto;
	}
	
	.youtube {
		width: 60%;
		margin: 0 auto 50px;
		padding: 0;
		aspect-ratio: 16/9;
	}
	
	.youtube iframe {
		width: 100%;
		height: 100%;
	}
	
	.twitter {
		width: 60%;
		height: 450px;
	}
	
	.twitter iframe {
		width: 100%!important;
	}
	
	.menu {
		display: flex;
		justify-content: space-between;
		padding: 50px 100px 0;
	}
	
	.menuImg {
		padding: 0;
	}
	
	.menuImg img {
		width: 307.5px;
		height: 204.75px;
		margin: 0 auto;
	}
	
	.menu dl {
		width: 600px;
		padding-left: 50px;
	}
	.menuTitle {
		font-size: 26px;
	}

	.menuPrice {
		font-size: 20px;
	}
	
	.media01 {
		padding-left: 0px;
	}
	
	.allMenu {
		margin: 30px 0;
	}
	
	.access p {
		width: 50%;
	}
	
	.map {
		width: 50%;
	}
	.Gmap {
		width: 100%;
	}
}

@media(max-width:1385px) {
	
	#sec01 {
		padding: 75px;
	}
}

@media(max-width:1085px) {
	
/*
	.header {
		justify-content: flex-start;
		flex-direction: column;
		height: 140px;
	}
	
	.logo {
		padding-left: 100px;
	}
	
	.logo img {
		width: 179.64px;
		height: 67.5px;
	}
	
	nav ul{
		width: 100vw;
		justify-content: space-between;
	}
*/
	
	.youtube {
		width: 80%;
	}
	
	.twitter {
		width: 80%;
		height: 450px;
	}
}

@media(max-width:1024px) {
	
	
	
	header {
	padding: 0 40px;
	}
	
	.header {
		height: 85px;
	}
	
	.logo {
		height: 75px;
	}
	
	#sec01,#sec02,#sec04 {
		padding: 120px 0 0;
	}
	
	.contents_name {
		background: #fff;
		margin: 50px auto 50px;
		text-align: center;
		line-height: 50px;
		border-radius: 10px;
		width: 250px;
		height: 50px;
		font-size: 24px;
		box-shadow: 3px 3px 5px 1px #171d4a;
		color: #444e88
	}
/*↓↓↓↓↓↓↓↓↓1085pxで変化に変更↓↓↓↓↓↓↓↓↓↓↓*/
/*
	.header {
		justify-content: flex-start;
		flex-direction: column;
		height: 140px;
	}
	
	.logo {
		padding-left: 100px;
	}
	
	.logo img {
		width: 179.64px;
		height: 67.5px;
	}
	
	nav ul{
		width: 100vw;
		justify-content: space-between;
	}
*/
	
	.menuImg img {
/*
		width: 205px;
		height: 136.5px;
*/
	}
	
	.HeroImg {
		padding: 85px 0 0;
	}
	
	.bannerRow {
		flex-direction: column;
	}
	
	.banner01,.banner02,.banner03 {
		margin: 0 auto 15px;
		padding: 0 50px;
	}
	
	.banner01 img,.banner02 img,.banner03 img {
		width: 100%;
		min-width: 300px;
		min-height: auto;

	}
	
	.beanMenu dl,.menu dl {
		padding-left: 0;
		width: 335px;
	}
}

@media(max-width:870px) {
	
	.header {
		height: 85px;
	}
	
	.logo {
		height: 75px;
	}
	
	.menu,.beanMenu {
		flex-direction: column;
		padding: 50px 0 0;
	}
	
	.mainMenu .menu dl {
		padding: 0;
		text-align: center;
		margin: 0 auto;
	}
	
	.beanMenu .menu dl {
		padding: 0;
/*		text-align: center;*/
		margin: 0 auto;
	}
	
	.menu {
		margin: 0 auto;
	}
	
	.menu img {
		display: block;
		margin: 0 auto;
	}
	
	.access {
		display: flex;
		flex-direction: column;
	}
	
	.map {
		width: 100%;
	}
	
	.access p {
		width: 100%;
		padding: 0 0 15px;
	}
}