@charset "UTF-8";
 /* ==================== リセット ==================== */
 html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, main, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
 	background: transparent;
 	border: 0;
 	box-sizing: border-box;
 	font-style: normal;
 	line-height: 2.0em;
 	margin: 0;
 	outline: 0;
 	padding: 0;
 	vertical-align: baseline;
 }
 /* ==================== .clearfix ==================== */
 .clearfix::after {
 	clear: both;
 	content: "";
 	display: block;
 }
 /* ==================== 文字 ==================== */
 h1, h2, h3, h4 {
 	font-weight: 200;
 }
 h1 {
 	font-size: 2.4rem;
 }
 h2 {
 	font-size: 2.0rem;
 }
 h3 {
 	font-size: 1.75rem;
 }
 h4 {
 	font-size: 1.5rem;
 }
 @media screen and (max-width: 767px) {
 	h1, h2, h3, h4 {
 		line-height: 1.5em;
 	}
 	h1 {
 		font-size: 1.8rem;
 	}
 	h2 {
 		font-size: 1.5rem;
 	}
 	h3 {
 		font-size: 1.25rem;
 	}
 	h4 {
 		font-size: 1.1rem;
 	}
 }
 strong {
 	font-weight: bold;
 }
 small {
 	font-size: 0.8rem;
 }
 .text-center {
 	text-align: center;
 }
 .text-left {
 	text-align: left;
 }
 .text-right {
 	text-align: right;
 }
 .text-mincho {
 	font-family: 'Sawarabi Mincho', sans-serif;
 }
 .text-eng {
 	font-family: 'Libre Caslon Text', serif;
 }
 /* ==================== 画像 ==================== */
 img {
 	height: auto;
 	max-width: 100%;
 	vertical-align: bottom;
 }
 img.alignleft {
 	float: left;
 }
 img.alignright {
 	float: right;
 }
 img.aligncenter {
 	display: block;
 	margin-left: auto;
 	margin-right: auto;
 }
 /* ==================== リンク ==================== */
 a {
 	color: #000;
 	text-decoration: underline;
 }
 a:hover {
 	opacity: .5;
 	transition: .8s;
 }
 a.button {
 	background-color: #FFB400;
 	border-radius: 50px;
 	color: #333;
 	display: inline-block;
 	line-height: 1.4em;
 	margin-left: auto;
 	margin-right: auto;
 	padding: 10px 20px;
 	text-align: center;
 	text-decoration: none;
 }
 /* ==================== リスト ==================== */
 ol, ul {
 	list-style-position: inside;
 }
 .two, .three {
 	-ms-flex-align: stretch;
 	-webkit-box-align: stretch;
 	align-items: stretch;
 	display: -ms-flexbox;
 	display: -webkit-box;
 	display: flex;
 	-ms-flex-direction: row;
 	-webkit-box-direction: normal;
 	-webkit-box-orient: horizontal;
 	flex-direction: row;
 	-ms-flex-wrap: wrap;
 	flex-wrap: wrap;
 	-ms-flex-pack: justify;
 	-webkit-box-pack: justify;
 	justify-content: space-between;
 	margin-bottom: 0; /* reset */
 }
 .space > * {
 	margin-right: 4%;
 }
 /* ==================== .two ==================== */
 .two > * {
 	width: 50%;
 }
 .two.space > * {
 	width: 48%;
 }
 .two.space > *:nth-child(even) {
 	margin-right: 0; /* reset */
 }
 @media screen and (max-width: 767px) {
 	.two > *, .two.space > * {
 		margin-right: 0;
 		width: 100%;
 	}
 }
 /* ==================== .three ==================== */
 .three > * {
 	width: calc(100%/3);
 }
 .three.space > * {
 	width: calc(92%/3);
 }
 .three.space > *:nth-child(3n) {
 	margin-right: 0; /* reset */
 }
 @media screen and (max-width: 767px) {
 	.three > * {
 		width: 50%;
 	}
 	.three.space > * {
 		width: 48%;
 	}
 	.three.space > *:nth-child(3n) {
 		margin-right: 4%; /* reset */
 	}
 	.three.space > *:nth-child(even) {
 		margin-right: 0; /* reset */
 	}
 }
 /* ==================== body ==================== */
 body {
 	background-color: transparent;
 	color: #555;
 	font-family: 'Noto Sans JP', sans-serif;
 	-webkit-font-feature-settings: 'palt'1;
 	font-feature-settings: 'palt'1;
 	font-size: 18px;
 	font-weight: normal;
 	position: relative;
 }
 /* ==================== ヘッダー ==================== */
 header {
 	background-color: #000;
 	border-bottom: 1px solid #EEE;
 	padding: 60px 0 30px;
 	position: relative;
 	width: 100%;
 }
 header > div {
 	display: -ms-flexbox;
 	display: -webkit-box;
 	display: flex;
 	-webkit-box-align: center;
 	-ms-flex-align: center;
 	align-items: center;
 	-webkit-box-orient: horizontal;
 	-webkit-box-direction: normal;
 	-ms-flex-direction: row;
 	flex-direction: row;
 	-webkit-box-pack: justify;
 	-ms-flex-pack: justify;
 	justify-content: space-between;
 	margin: 0 auto;
 	max-width: 1080px;
 	width: 88%;
 }
 header > div h1 {
 	letter-spacing: 0.2em;
 	color: #FFF;
 	font-size: 1.2rem;
 }
 header > div nav ul {
 	letter-spacing: 0.1em;
 	display: -ms-flexbox;
 	display: -webkit-box;
 	display: flex;
 	-ms-flex-direction: row;
 	-webkit-box-direction: normal;
 	-webkit-box-orient: horizontal;
 	flex-direction: row;
 	list-style: none;
 }
 header > div nav ul li {
 	margin-left: 50px;
 	text-align: center;
 }
 header > div nav ul li a {
 	color: #FFF;
 	display: inline-block;
 	padding: 0 10px;
 	text-decoration: none;
 }
 @media screen and (max-width: 767px) {
 	header {
 		padding: 30px 0;
 	}
 	header > div h1 {
 		margin: 0 auto; /* reset */
 		text-align: left;
 		width: 88%;
 	}
 	header > div nav ul li a:hover {
 		opacity: 1; /* reset */
 	}
 	header > div {
 		width: 100%; /* reset */
 	}
 	header > div nav {
 		height: auto; /* reset */
 		position: fixed;
 		top: -500px;
 		-moz-transition: .5s ease-in-out;
 		-webkit-transition: .5s ease-in-out;
 		transition: .5s ease-in-out;
 		width: 100%;
 		z-index: 2;
 	}
 	header > div nav ul {
 		display: block;
 	}
 	header > div nav ul li {
 		border-bottom: 1px solid #EEE;
 		margin-left: 0; /* reset */
 	}
 	header > div nav ul li a {
 		background-color: rgba(0, 0, 0, 0.85);
 		padding: 10px 0;
 	}
 }
 /* ==================== main ==================== */
 main {
 	background-color: #FFF;
 }
 main > section {
 	border-bottom: 1px solid #EEE;
 	margin: 0 auto;
 	max-width: 100%; /* reset */
 	padding: 120px 0 90px;
 	width: 100%; /* reset */
 }
 @media screen and (max-width: 767px) {
 	main > section {
 		padding: 60px 0 30px;
 	}
 }
 main > section.padding-none {
 	padding: 0; /* reset */
 }
 main > section > * {
 	margin: 0 auto 30px;
 	max-width: 88%;
 	width: 1080px;
 }
 main > section.width-full > * {
 	max-width: 100%; /* reset */
 	width: 100%; /* reset */
 }
 main > section.padding-none > *:last-child {
 	margin-bottom: 0; /* reset */
 }
 main > section > h1, main > section > h2, main > section > h3, main > section > h4, main > section > h5, main > section > h6 {
 	margin-bottom: 15px; /* reset */
 }
 main p {
 	margin-bottom: 30px;
 }
/* ==================== フッター ==================== */
footer {
	background-color: #FFF;
	padding: 60px 0;
	text-align: center;
	}
footer h2 {
	margin-bottom: 30px;
}
footer h2 img {
	width: 180px;
}
footer h3 {
	font-size: 1.25rem;
}
footer p {
	line-height: 1.5em;
	margin-bottom: 1.0em;
}
footer p a img {
	margin-right: 25px;
}
footer p a:last-of-type img {
	margin-right: 0;
}
/* ==================== スクロール ==================== */
 #totop {
 	bottom: 10px;
 	margin: 0;
 	position: fixed;
 	right: 30px;
 }
 /* ==================== .swiper ==================== */
 .swiper-container {
 	height: 550px;
 }
 @media screen and (max-width: 767px) {
 	.swiper-container {
 		height: 375px;
 	}
 }
 .swiper-slide {
 	background-size: cover;
 	background-position: center center;
 }
 /* ==================== #mainvisual ==================== */
 #mainvisual.swiper-container {
 	width: 100%;
 	height: 80vh;
 }
 #mainvisual .swiper-fixed {
 	bottom: 0;
 	left: 0;
 	height: 70%;
 	margin: auto;
 	max-width: 88%;
 	position: absolute;
 	right: 0;
 	top: 0;
 	z-index: 10000;
 	width: 1080px;
 }
 #mainvisual .swiper-fixed h2 img {
 	width: 180px;
 }
 #mainvisual .swiper-fixed div {
 	bottom: 0;
 	color: #FFF;
 	position: absolute;
 	right: 0;
 }
 #mainvisual .swiper-fixed div h3 {
 	font-size: 2.2rem;
 	letter-spacing: 0.2em;
 	font-weight: 750;
 	line-height: 2em;
 	margin-bottom: 0.5em;
 }
 #mainvisual .swiper-fixed div p {
 	font-size: 0.8rem;
 	letter-spacing: 0.1em;
 	margin-bottom: 0; /* reset */
 }
 @media screen and (max-width: 767px) {
 	#mainvisual .swiper-fixed h2 {
 		text-align: center;
 	}
 	#mainvisual .swiper-fixed div {
 		bottom: 0;
 		color: #FFF;
 		position: absolute;
 		right: 0;
 		left: 0;
 	}
 	#mainvisual .swiper-fixed div h3 {
 		font-size: 1.2rem;
 		text-align: center;
 	}
 	#mainvisual .swiper-fixed div p {
 		font-size: 0.7rem;
 		text-align: center;
 	}
 }
 /* ==================== #brand ==================== */
 #brand .two > div {
 	-webkit-box-align: center;
 	-ms-flex-align: center;
 	align-items: center;
 	background-image: none;
 	background-repeat: no-repeat;
 	background-position: center center;
 	background-size: cover;
 	display: -webkit-box;
 	display: -ms-flexbox;
 	display: flex;
 	-webkit-box-pack: center;
 	-ms-flex-pack: center;
 	justify-content: center;
 	padding: 90px 0 90px;
 	position: relative;
 	transition: 2.0s;
 }
 #brand .two > div * {
 	transition: 2.0s;
 }
 #brand .two > div:last-of-type {
 	background-color: #FFB400;
 }
 #brand h2 {
 	margin-bottom: 0;
 	position: relative;
 	text-align: center;
 }
 #brand h2 img {
 	width: 280px;
 }
 #brand .two > div div {
 	-webkit-box-align: center;
 	-ms-flex-align: center;
 	align-items: center;
 	background-image: url("../img/back_hachigatsu-toka_rice_01.jpg");
 	display: -webkit-box;
 	display: -ms-flexbox;
 	display: flex;
 	-webkit-box-pack: center;
 	-ms-flex-pack: center;
 	justify-content: center;
 	opacity: 0;
 	height: 100%;
 	position: absolute;
 	width: 100%;
 }
 #brand .two > div:last-of-type div {
 	background-image: url("../img/back_hachigatsu-toka_kiribako_01.jpg");
 }
 #brand .two > div div p {
 	color: #FFF;
 	font-family: 'Sawarabi Mincho', sans-serif;
 	line-height: 3.0em;
 	margin-bottom: 0;
 	text-align: center;
 }
 /* ==================== #brand hover ==================== */
 #brand .two > div:hover * {
 	transition: 2.0s;
 }
 #brand .two > div:hover h2 {
 	opacity: 0;
 }
 #brand .two > div:hover div {
 	opacity: 1.0;
 }
 /* ==================== #brand sp ==================== */
 @media screen and (max-width: 767px) {
 	#brand .two > div {
 		display: block;
 		padding: 0;
 	}
 	#brand .two > div h2 {
 		display: none;
 	}
 	#brand .two > div div, #brand .two > div:last-of-type div {
 		opacity: 1.0;
 		padding: 60px 0;
 		position: relative;
 	}
 	#brand .two > div div p {
 		font-size: 0.85rem;
 	}
 }
 /* ==================== .product ==================== */
 .product > * {
 	max-width: 88%;
 	width: 800px;
 }
 .product h2 {
 	font-size: 1.3rem;
 }
 .product p {
 	font-size: 0.9rem;
 }
 .product p .button {
 	font-size: 1.0rem; /* reset */
 }
 .product .price {
 	font-size: 1.75rem;
 }
 /* ==================== #contact ==================== */
 #contact {
 	background-color: #F0F0F0;
 	padding: 60px 0 30px;
 }
 #contact .button {
 	font-size: 1.2rem; /* reset */
 	padding: 20px;
 }
 /* ==================== 動画 ==================== */
div.vid_contents {
    line-height: 0;
}
video.vid_main {
width: 100%;
}