@charset "UTF-8";

@import url('//fonts.googleapis.com/earlyaccess/mplus1p.css');
@import url('//fonts.googleapis.com/css?family=Noto+Serif+JP:400,500,600,700');
@import url('//fonts.googleapis.com/css?family=Roboto:400,500');
@import url('//fonts.googleapis.com/earlyaccess/sawarabimincho.css');
@import url('//fonts.googleapis.com/css?family=Oswald:400,700');
@import url('//fonts.googleapis.com/css?family=Anton');
@import url('//fonts.googleapis.com/css?family=Raleway:400,700,800,900');

@import url('//fonts.googleapis.com/css2?family=Yuji+Mai&display=swap');

@import url('//fonts.googleapis.com/css2? family= Walter+Turncoat & family= Yuji+Mai & family= Zen+Kurenaido & display=swap');







/* Body */
body {
	font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, " メイリオ", Meiryo, Osaka, " ＭＳ Ｐゴシック", MS PGothic, " sans-serif";
	color: #222;
	font-feature-settings: "palt";
	letter-spacing: 0.05rem;
	/* background-color: #fff; */
}
a {
	text-decoration: none;
}

/* google font */
.wf-mplus1p {
	font-family: "Mplus 1p";
}
.gf-Sawarabi {
	font-family: "Sawarabi Mincho";
}
.gf-Roboto {
	font-family: 'Roboto', sans-serif;
}
.gf-Oswald {
	font-family: 'Oswald', sans-serif;
}
.gf-Anton {
	font-family: 'Anton', sans-serif;
}
.gf-Raleway {
	font-family: 'Raleway', sans-serif;
}
.gf-Yujimai  {

	font-family: 'Walter Turncoat', cursive;
	font-family: 'Yuji Mai', serif;
	font-family: 'Zen Kurenaido', sans-serif;

	font-weight: 200;
	font-size: 1.6rem;
}






.gf-Zenku  {
font-family: 'Zen Kurenaido', sans-serif
}


/* Container */
#container {
	width: 100%;
	padding-bottom: 160px;
	font-size: 1.4rem;
	/* background: #fff; */
	background: url(../img/bg_01.png) left top;
}
#container > section {
	padding: 70px 0;
	/* padding-bottom: 70px; */
	text-align: center;
}
#container > section:nth-child(n+2) {
	/* padding: 0; */
}
#container > section:last-child {
	padding-bottom: 90px;
}

/* Navigation */
.nav_inner {
	width: 100%;
	margin: 0 auto;
}
.nav_inner:after {
	content: "";
	clear: both;
	display: block;
}

/* header */
#top-head {
	width: 100%;
	/* padding: 15px 0; */
	line-height: 1;
	z-index: 999;
}
.head_abso {
	top: -70px;
	position: absolute;
}
#top-head a,
#top-head {
	color: #222;
	text-decoration: none;
	font-weight: bold;
}
#top-head .nav_inner {
	position: relative;
	display: flex;
	align-items: center;
}
#top-head .logo {
	/* float: left; */
	max-width: 20em;
	line-height: 1.3;
}
#top-head .logo img {
	max-width: 180px;
	height: auto;
	vertical-align: middle;
	margin-left: 20px;
}
#top-head .logo span {
	/* display: none; */
}

/* Fixed */
#top-head.fixed {
	margin-top: 0;
	top: 0;
	position: fixed;
	background: #fff;
	/* background: rgba(0,0,0,.7); */
	transition: top 0.65s ease-in;
	-webkit-transition: top 0.65s ease-in;
	-moz-transition: top 0.65s ease-in;
	display: flex;
	align-items: center;
	box-shadow: 0 0.1rem 0.7rem hsla(0, 0%, 80%, 0.6);
}
#top-head.fixed .nav_inner {
	display: block;
}
#top-head.fixed .logo a {
	color: #fff; /* #333 */
}
#top-head.fixed .logotext {
	font-size: 1.6rem;
}
#top-head.fixed .logo img {
	display: inline-block !important;
	width: auto;
	height: 28px;
	vertical-align: bottom;
}
#top-head.fixed #global-nav {
	display: block;
}
#top-head.fixed #global-nav ul li a {
	/* color: #333; */
	color: #fff;
	padding: 0 5px;
}
/* Toggle Button */
#nav-toggle {
	display: none;
	position: absolute;
	right: 12px;
	top: 23px;
	width: 34px;
	height: 36px;
	cursor: pointer;
	z-index: 101;
}
#nav-toggle div {
	position: relative;
}
#nav-toggle span {
	display: block;
	position: absolute;
	height: 2px;
	width: 100%;
	background: #bebebe;
	left: 0;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
	top: 0;
}
#nav-toggle span:nth-child(2) {
	top: 10px;
}
#nav-toggle span:nth-child(3) {
	top: 20px;
}
#top-head.fixed #nav-toggle {
	top: 16px;
}




/* navi */
#mobile-head {
	background: #fff;
	padding: 15px 0;
	z-index: 10;
	position: relative;
}
/* navi（固定時） */
#top-head.fixed #mobile-head {
	width: 100%;
}

/* ページ最上部（通常時） */
#global-nav {
	width: 100%;
	display: flex;
	justify-content: flex-end;
}
#global-nav ul {
	list-style: none;
    display: flex;
    align-items: center;
}
#global-nav ul li {
	font-family: 'Raleway', sans-serif;
	font-size: 1.5rem;
	font-weight: 400;
	display: inline-block;
	vertical-align: middle;
}
#global-nav ul li:nth-child(n+2) {
	margin-left: 20px;
}


/* ヘッダー お問い合わせ
------------------------------------ */
.head_contact {
	display: flex;
	align-items: center;
	margin: 0 20px 0 35px;
	/* margin: 0 20px; */
}
.hd_tel {}
.hd_tel p {
    font-weight: bold;
    font-size: 2rem;
	margin-bottom: 2px;
	color: #3fa55b;
}
.hd_tel p a {
	color: #3fa55b;
}
.hd_tel p::before {
	font-family: 'Font Awesome 5 Free';
    content: '\f098';
	font-weight: 900;
	margin-right: 2px; 
}
.hd_tel p span {
	font-size: 1.1rem;
	line-height: 1.2;
    display: inline-block;
    font-weight: normal;
	margin-left: 5px;
	color: #555;
}
.hd_mail {
	margin-left: 10px;
}
.hd_mail a {
	display: inline-block;
	position: relative;
	width: 100px;
	padding: 0.5em 0;
	font-size: 1.3rem;
	text-align: center;
	text-decoration: none;
	color: #fff !important;
	background: #3fa55b;
	border-radius: 50px;
	transition: transform ease .3s;
}
.hd_mail a:hover {
	cursor: pointer;
	text-decoration: none;
}
.hd_mail a span {
	display: inline-block;
	margin-left: 5px;
	text-decoration: none;
	transition: transform ease .3s;
}
.hd_mail a:hover span {
	cursor: pointer;
	text-decoration: none;
	transform: translateY(3px);
}
.hd_mail a span i {
	font-size: 1.3rem;
}

/* --------- */


/* ページ上部 固定時 */
#top-head.fixed #global-nav {
	position: absolute;
	/* 開いてないときは画面外に配置 */
	top: -500px;
	background: #fff;
	width: 100%;
	text-align: center;
	padding: 0;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	z-index: 0;
}
#top-head.fixed #global-nav ul {
	display: inline;
	width: 100%;
	list-style: none;
	position: static;
	right: 0;
	bottom: 0;
	padding-left: 0;
	margin: 0;
}
#top-head.fixed #global-nav ul li {
	display: block;
	float: none;
	position: static;
	font-size: 1.5rem;
}
#top-head.fixed #global-nav ul li:nth-child(n+2) {
    margin-left: 0;
    border-top: 1px rgb(63, 165, 87) dashed;
}
#top-head.fixed #global-nav ul li a {
	width: 100%;
	display: block;
	color: #555;
	padding: 20px 0;
	background-color: #eef7e0;
}
#top-head.fixed #global-nav ul li a.active {
	background-color: #00B2D2;
}
#top-head.fixed #nav-toggle {
	display: block;
}

/* ヘッダー お問い合わせ（上部固定時）
------------------------------------ */
#top-head.fixed .head_contact {
	display: block;
    margin: 0;
    padding: 20px 0;
    background-color: #3fa558;
}
#top-head.fixed .hd_tel {
    margin-bottom: 12px;
}
#top-head.fixed .hd_tel p {
	font-size: 2.2rem;
    color: #fff;
}
#top-head.fixed .hd_tel p a {
	color: #fff;
}
#top-head.fixed .hd_tel p span {
    font-size: 1.4rem;
    display: block;
    margin-left: 0;
	margin-top: 5px;
	color: #fff;
}

#top-head.fixed .hd_mail {
	margin-left: 10px;
}
#top-head.fixed .hd_mail a {
	display: inline-block;
    position: relative;
    width: 200px;
    padding: 0.5em 0;
    font-weight: bold;
    font-size: 1.4rem;
    text-align: center;
    text-decoration: none;
    color: #3fa559 !important;
    background: #ffffff;
    border-radius: 50px;
    transition: transform ease .3s;
}
#top-head.fixed .hd_mail a:hover {
	cursor: pointer;
	text-decoration: none;
}
#top-head.fixed .hd_mail a span {
	display: inline-block;
	margin-left: 10px;
	text-decoration: none;
	transition: transform ease .3s;
}
#top-head.fixed .hd_mail a:hover span {
	cursor: pointer;
	text-decoration: none;
	transform: translateY(3px);
}
#top-head.fixed .hd_mail a span i {
	font-size: 1.3rem;
}

/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) {
	top: 11px;
	-webkit-transform: rotate(315deg);
	-moz-transform: rotate(315deg);
	transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
	width: 0;
	left: 50%;
}
.open #nav-toggle span:nth-child(3) {
	top: 11px;
	-webkit-transform: rotate(-315deg);
	-moz-transform: rotate(-315deg);
	transform: rotate(-315deg);
}
/* #global-nav スライドアニメーション */
.open #global-nav {
	-moz-transform: translateY(568px);
	-webkit-transform: translateY(568px);
	transform: translateY(568px);
}
#top-head.fixed.open #global-nav {
	-moz-transform: translateY(556px);
	-webkit-transform: translateY(556px);
	transform: translateY(556px);
}
/* navi */


/* Hero Section */

.hero {
	/*
	background: rgba(0, 0, 0, 0) url("../img/hero.jpg") no-repeat scroll top center / cover;
	height: 48vw;
	text-align: center;
	*/
	background: rgba(0, 0, 0, 0) url(../img/hero.jpg) no-repeat scroll center / cover;
	height: 68vw;
	max-height: 750px;
	text-align: center;
}
.hero {
	/* min-height: 320px; */
	display: -webkit-flex; /* Safari用 */
	display: flex;
	align-items: center;
	justify-content: center;
}
.hero div {
    width: 90%;
    max-width: 900px;
    height: auto;
    text-align: left;
}
.hero p {
	display: inline-block;
	writing-mode: tb-rl;
	text-align: left;
	line-height: 1.3;
	font-family: serif;
	color: #fff;
	font-weight: 500;
	font-size: 2.6vw;
	letter-spacing: 3px;
	text-shadow: 0 0 10px #222;
}
.hero p span {
	color: #e74528;
    font-size: 6rem;
    margin-left: 0.2em;
    letter-spacing: 8px;
    display: inline-block;
}
.fixed_hero {
	margin-top: 60px;
}

@media (min-width: 1100px) {
	.hero p {
		font-size: 29px;
	}
}


.section_title {
	position: relative;
	display: inline-block;
	text-align: left;
	padding: 1rem 1.5rem;
	font-family: "Sawarabi Mincho";
	font-size: 2.7rem;
	font-weight: 500;
	color: #222;
	margin-bottom: 60px;
	z-index: 1;
}
.section_title:before {
	content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    background: url(../img/title_mark.png) center center no-repeat;
    background-size: contain;
    width: 53px;
    height: 71px;
    z-index: -1;
}


/* begin kodawari */
#kodawari {
	width: 100%;
	background: url(../img/bg_kodawari.png) center top no-repeat;
	background-size: cover;
}
#kodawari section {
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 10px;
	padding: 25px;
}
#kodawari section:nth-child(n+2) {
	margin-top: 20px;
}
#kodawari section > h3 {
	font-family: "Sawarabi Mincho";
	font-weight: 700;
	font-size: 2.9rem;
	color: #e74528;
	text-align: left;
	box-shadow: 0px -6px 5px -5px #e0ca95 inset,
				0px 8px 4px -8px #e0ca95;
	margin-bottom: 15px;
	padding-bottom: 5px;
}
#kodawari section > h3 span {
	color: #222;
	font-size: 75%;
	margin-left: 20px;
}
#kodawari section > p {
	text-align: left;
}
#kodawari section > p strong {
	font-weight: 700;
}

/* 小ロット お問い合わせ
------------------------------------ */
.s_lot {
    background-color: #fff;
    border: 2px solid #ef780f;
    border-radius: 10px;
    margin-top: 20px;
    padding: 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.s_lot h4 {
    display: inline-block;
    font-size: 2.2rem;
    color: #ef780f;
    margin-bottom: 10px;
}
.s_lot h4 span {
	display: block;
	font-size: 1.6rem;
	font-weight: normal;
	color: #222;
}

.s_lot h4 b{

	color:#8b4513;

}

.s_lot_contact {
	display: flex;
	align-items: center;
	margin: 0 20px;
}
.slt_tel {}
.slt_tel p {
    font-weight: bold;
    font-size: 2.7rem;
    margin-bottom: 2px;
}
.slt_tel p a {
	color: #555;
}
.slt_tel p::before {
	font-family: 'Font Awesome 5 Free';
    content: '\f098';
	font-weight: 900;
	margin-right: 2px; 
}
.slt_tel p span {
	font-size: 1.2rem;
	line-height: 1.2;
    display: inline-block;
    font-weight: normal;
    margin-left: 5px;
}
.slt_mail {
	margin-left: 10px;
}
.slt_mail a {
	display: inline-block;
	position: relative;
	width: 160px;
	padding: 0.5em 0;
	font-size: 1.3rem;
	text-align: center;
	text-decoration: none;
	color: #fff !important;
	background: #ef780f;
	border-radius: 50px;
	transition: transform ease .3s;
}
.slt_mail a:hover {
	cursor: pointer;
	text-decoration: none;
}
.slt_mail a span {
	display: inline-block;
	margin-left: 10px;
	text-decoration: none;
	transition: transform ease .3s;
}
.slt_mail a:hover span {
	cursor: pointer;
	text-decoration: none;
	transform: translateY(3px);
}
.slt_mail a span i {
	font-size: 1.3rem;
}


/* end kodawari */

/* ----------------------------------------- */

/* product
-------------------------------------------- */
#product {
	width: 100%;
}
.info_intro {
	font-size: 1.5rem;
	margin: -20px 0 20px;
}
.info_intro span {
    display: inline-block;
    padding-bottom: 4px;
    border-bottom: 3px solid #de4e4e;
}
/*
.info_intro span:before {
	display: inline-block;
	vertical-align: middle;
	content: "";
	width: 17px;
	height: 18px;
	background: url(../img/icon_zoom.png) center top no-repeat;
	background-size: contain;
	margin-right: 10px;
}
*/

.info_intro span:before {
	font-family: 'Font Awesome 5 Free';
	content: '\f00e';
	font-weight: 600;
	margin-right: 5px;
	color: #fff;
	padding: 6px;
    border-radius: 50px;
    background-color: #de4e4e;
}

#product_item {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#product_item li {
    position: relative;
    width: 33%;
    padding: 20px;
}
.thumb {
	position: relative;
	display: inline-block;
	text-align: center;
	width: 100%;
}
.thumb:before {
    position: absolute;
    right: 0;
    bottom: 40px;
    display: inline-block;
    font-family: 'Font Awesome 5 Free';
    content: '\f00e';
    font-weight: 600;
    font-size: 1.8rem;
    margin-right: 5px;
    color: #fff;
    padding: 8px;
    border-radius: 50px;
	background-color: #de4e4e;
	border: 2px solid #fff;
}
.thumb figure {
    display: block;
    background-size: cover;
    width: 100%;
    height: 190px;
    border-radius: 180px;
}
.thumb figure img {
	border-radius: 180px;
}
.thumb p {
	display: inline-block;
    color: #fff;
    background-color: #71410d;
    text-align: center;
    width: 246px;
    padding: 5px 20px;
    border-radius: 50px;
    font-size: 1.5rem;
    margin-top: -20px;
    box-sizing: border-box;
}

/* 先頭ピックアップ */
#product_item li:first-child {
	width: 100%;
}
#product_item li:first-child .thumb {
	width: 40%;
}
#product_item li:first-child .thumb figure {
	height: 240px;
}
/* ------- */

.product_modal {}
.item_detail {
	display: flex;
	/* align-items: center; */
	justify-content: center;
	width: 100%;
	max-width: 830px;
	margin: 0 auto;
	padding: 20px;
	border: 4px solid #b17320;
	border-radius: 10px;
	background-color: #ffffff;
	text-align: left;
}
.item_detail figure {
	display: block;
	background-size: 120%; /* cover */
	width: 40%;
	min-width: 360px;
	height: 300px;
	border-radius: 20px;
	border: 1px solid #e4e3e3;
}
.item_detail dl {
	width: 60%;
	margin-left: 20px;
	padding: 5px 0;
}
.item_detail dl dt {
	display: inline-block;
	font-size: 2.3rem;
	font-weight: bold;
	margin-bottom: 15px;
	color: #fff;
	background-color: #71410d; /* #463514 */
	padding: 3px 12px;
	border-radius: 50px;
	letter-spacing: 1px;
}
.item_detail dl dd {
	font-size: 1.6rem;
	line-height: 1.6;
	padding-left: 0.7em;
}
.item_detail dl dd small {
	font-size: 1.4rem;
}

.modaal-container {
	max-width: none !important;
	background: transparent !important;
	box-shadow: none !important;
}
.modaal-content-container {
	padding: 0 !important;
}

#product_modal > div {
	display: none;
}

/* 商品一覧・詳細共通画像 */
.item01 {
	background: url(../img/item01.jpg) center center no-repeat;
}
.item02 {
	background: url(../img/item02.jpg) center center no-repeat;
}
.item03 {
	background: url(../img/item03.jpg) center center no-repeat;
}
.item04 {
	background: url(../img/item04.jpg) center center no-repeat;
}
.item05 {
	background: url(../img/item05.jpg) center center no-repeat;
}
.item06 {
	background: url(../img/item06.jpg) center center no-repeat;
}
.item07 {
	background: url(../img/item07.jpg) center center no-repeat;
}
.item08 {
	background: url(../img/item08.jpg) center center no-repeat;
}
.item09 {
	background: url(../img/item09.jpg) center center no-repeat;
}
.item10 {
	background: url(../img/item10.jpg) center center no-repeat;
}

.online_shop {
	display: inline-block;
    background-color: #3ba958;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 50px;
    margin-top: 60px;
    font-size: 2rem;
    font-weight: bold;
    border: 3px solid #fff;
    box-shadow: 0 0 4px #b3b3b3;
}
.online_shop:before {
	font-family: 'Font Awesome 5 Free';
    content: '\f07a';
    font-weight: 600;
    margin-right: 5px;
    color: #ffef00;
    padding: 6px;
    border-radius: 50px;
}
.online_shop span {
	font-size: 1.4rem;
}

/* end #product */


/* begen img_cut */
.img_cut {
	min-height: 380px;
	/*
	background-size: cover !important;
	background-position-x: center !important;
	*/
}
@supports (-ms-ime-align: auto) {
  /* Edge のみ適用 */
	.img_cut div {
		display: none;
	}
	.cutbg01 {
		background: url("../img/img_cut01.jpg") center no-repeat !important;
		background-size: 140%;
	}
	.cutbg02 {
		background: url("../img/img_cut02.jpg") center no-repeat !important;
		background-size: 140%;
	}
}
/* end img_cut */


/* begen #greeting */
#greeting {}
#greeting .content_wrap {
	text-align: left;
}
#greeting h3 {
	font-size: 2.5rem;
	font-weight: 400;
	border-bottom: 2px solid #d3b169;
	padding-bottom: 5px;
	margin-bottom: 20px;
}
#greeting h3:nth-child(n+2) {
	margin-top: 35px;
}
#greeting h4 {
	font-size: 2.2rem;
	font-weight: 400;
	padding: 0 5px;
	margin-bottom: 10px;
}
#greeting h4 span {
	font-size: 3.8rem;
    letter-spacing: 0.6rem;
    font-family: serif;
}
#greeting p {
	padding: 0 5px;
}
.signature {
	display: block;
	text-align: right;
	margin-top: 15px;
}
/* end #greeting */


/* ----------------------------------------- */

/* #company
-------------------------------------------- */
#company {
}
#company .content_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#company section {
	text-align: left;
	width: 48%;
}
#company section h3 {
	display: inline-block;
	font-size: 2rem;
	border-bottom: 3px solid #222;
	padding-bottom: 5px;
	margin-bottom: 30px;
}
#company table {}
#company table th,
#company table td {
	padding: 12px 0;
	border-bottom: 1px dashed #afafaf;
}
#company table th {
	width: 25%;
}
#company table td {
	padding-left: 5%;
}
#company table th a,
#company table td a {
	color: #222;
}

.outline {}
.history {}
.access {
	width: 100% !important;
	text-align: center !important;
	margin-top: 40px;
}

/* end #company */


.content_wrap {
	width: 90%;
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
}

/* ----------------------------------------- */

/* #gmap
-------------------------------------------- */
#gmap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#gmap div {
	/* width: 100%;
	text-align: center;   */
}

#gmap div {
	width: 100%;
	text-align: center;
}


#gmap div h3 {
	display: inline-block;
	font-size: 1.7rem;
	border-bottom: none;
	margin-bottom: 10px;
}
#gmap div iframe {
	width: 100%;
	height: 360px;
}
/* end #gmap */



/*
.contact {
	line-height: 4.2rem;
}
.note_text {
	font-size: 1.4rem;
	text-align: left;
	color: #d62929;
}
*/

/* ページTOPボタン */
#page_top{
	width: 50px;
	height: 50px;
	position: fixed;
	right: 10px;
	bottom: 50px;
	background: #888787;
	opacity: 0.6;
	border-radius: 50%;
}
#page_top a{
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	text-decoration: none;
}
#page_top a::before {
	font-family: 'Font Awesome 5 Free';
	content: '\f106';
	font-weight: 900;
	font-size: 25px;
	color: #fff;
	position: absolute;
	width: 25px;
	height: 25px;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}


/* ----------------------------------------- */

/* Imgtext_box
-------------------------------------------- */
.imgtext_box {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  /* align-items: center; */
}
.item-image {
	box-sizing: border-box;
	width: 50%;
	border: 1px solid #dedddd;
}
.item-image a {
	box-sizing: border-box;
	display: block;
}
.item-image.item-video {
	border: none;
}
.item-image img {
	vertical-align: middle;
}
.item-text {
  flex: 1;
  justify-content: center;
  align-content: center;
  align-items: center;

  font-size: 1.6rem;
  line-height: 1.8;
  text-align: left;
  margin-left: 30px;
}
.txLeft {
	text-align: left;
}
.txCenter {
	text-align: center;
}
.txRight {
	text-align: right;
}
.imgfr {
	flex-direction: row-reverse;
}
.imgfr .item-text {
	margin-left: 0;
	margin-right: 30px;
}


/* -- footer -- */
/* footer固定 */
html,body {
	height: 100%;
}
#wrap {
	width: 100%;
	position: relative;
	min-height: 100%;
}
#footer {
	display: flex;
	align-items: center;
	position: absolute;
	bottom: 0;
	/* box-sizing: border-box; */
	width: 100%;
	height: 160px;
	background: #236f38;
	padding: 20px 0 !important;
	text-align: center;
}
.flogo {}
.flogo img {
	max-width: 180px;
	height: auto;
}
.copyright {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0 20px;
}
.copyright address {
	font-weight: 300;
	font-size: 1.3rem;
	color: #FFFFFF;
	font-style: normal;
}
/*
.hidden {
	display: none;
}
*/

/* ----------------------------------------- */

/* contact
-------------------------------------------- */
#contact {
}
#contact .intro {
	font-size: 1.6rem;
	margin-bottom: 40px;
}
#contact .intro span {
	display: block;
	font-weight: bold;
	font-size: 1.7rem;
}
#contact .intro span small {
	font-size: 80%;
}
#contact .intro .okigaru {
	margin: 10px;
}
#contact .intro .tel {
	font-size: 2.4rem;
	margin: 15px 0 5px;
}
#contact .intro .fax {
	font-size: 1.9rem;
	color: #222;
}
#contact .intro .tel a,
#contact .intro .fax a {
	color: #222;
}

/* -- BEGIN FORM BASE -- */
input:focus,
button:focus,
select:focus,
textarea:focus,
a:focus,
div:focus,
aside:focus {
	outline: none;
}
/*
radio,checkbox
*/
label.radio,
label.checkbox {
	box-sizing: border-box;
	-webkit-transition: background-color 0.2s linear;
	transition: background-color 0.2s linear;
	position: relative;
	display: inline-block;
	margin: 0 12px 0 0;
	padding: 10px;
	padding-left: 35px;
	vertical-align: middle;
	cursor: pointer;
	line-height: 1.8em !important;
	color: #333;
}
.radio:hover,
.checkbox:hover {
/*  background: #D2F7FF;*/
}
.radio:hover:after,
.checkbox:hover:after {
	border-color: #555;
}
.radio:after,
.checkbox:after {
	-webkit-transition: border-color 0.2s linear;
	transition: border-color 0.2s linear;
	position: absolute;
	top: 50%;
	left: 15px;
	display: block;
	margin-top: -9px;
	width: 16px;
	height: 16px;
	border: 1px solid #555;
	content: '';
	/* background-color: #fff; */
}
.checkbox:after {
	border-radius: 5px;
}
.radio:after {
	border-radius: 50%;
}
.radio:before {
	position: absolute;
	top: 50%;
	left: 19px;
	display: block;
	margin-top: -5px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #ef770f; /* #ea5858 */
	content: '';
	opacity: 0;
}
input[type=radio]:checked + .radio:before {
	opacity: 1;
}
.checkbox:before {
	-webkit-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
	position: absolute;
	top: 50%;
	left: 21px;
	display: block;
	margin-top: -12px;
	width: 8px;
	height: 15px;
	border-right: 3px solid #ea5858;
	border-bottom: 3px solid #ea5858;
	content: '';
	opacity: 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	z-index: 10;
}
input[type=checkbox]:checked + .checkbox:before {
	opacity: 1;
}
.check_td {
	background-color: #fff; /* #efefef */
	border-radius: 0 5px 5px 0 !important;
}
/*
input
*/
.input {
	box-sizing: border-box;
	font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, " メイリオ", Meiryo, Osaka, " ＭＳ Ｐゴシック", MS PGothic, " sans-serif";
	border: none;
	font-weight: normal;
	width: 100%;
	height: auto;
	background-color: #fff; /* #EFEFEF */
	border-radius: 0 5px 5px 0;
	-webkit-transition: background-color 0.35s ease-in-out;
	transition: background-color 0.35s ease-in-out;
	color: #2d2d2d;
}
input[type=text],
input[type=email],
input[type=tel] {
	padding: 10px 16px;
	font-size: 1.3rem;
	margin: 0 !important;
}

.input::-webkit-input-placeholder {
  color: #b2b2b2;
}
.input::-moz-placeholder {
  color: #b2b2b2;
}
.input:-ms-input-placeholder {
  color: #b2b2b2;
}
.input::placeholder {
  color: #b2b2b2;
}
.input:focus {
  background-color: #fff;
}

/*
textarea
*/

.textarea {
	display: block;
	box-sizing: border-box;
	font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, " メイリオ", Meiryo, Osaka, " ＭＳ Ｐゴシック", MS PGothic, " sans-serif";
	border: 0px none black;
	width: 100%;
	height: 150px;
	line-height: 1.75em;
	border-radius: 0 5px 5px 0;
	background-color: #fff; /* #EFEFEF */
	-webkit-transition: background-color 0.35s ease-in-out;
	transition: background-color 0.35s ease-in-out;
	font-size: 1.3rem;
	padding: 12px;
	margin: 0;
	padding-bottom: -8px;
}

.textarea::-webkit-input-placeholder {
  color: #b2b2b2;
}
.textarea::-moz-placeholder {
  color: #b2b2b2;
}
.textarea:-ms-input-placeholder {
  color: #b2b2b2;
}
.textarea::placeholder {
  color: #b2b2b2;
}
.textarea:focus {
	background-color: #FFFFFF;
}
/* -- END FORM BASE -- */

.form {
	width: 100%;
	max-width: 800px; /* 960px */
	margin: 0 auto;
}
.form .form-table-inner {
	margin-bottom: 17px;
	box-shadow: 0 0 5px #e4e4e4;
}
.form .form-table-inner:last-of-type {
	margin-bottom: 40px;
}
.form .form-table-row {
	display: table;
	table-layout: fixed;
	width: 100%;
}
.form .form-table-th,
.form .form-table-td {
	display: table-cell;
	text-align: left;
	font-weight: 400;
	vertical-align: middle;
	line-height: 1.8em;
	font-size: 1.3rem;
}
.form .form-table-th {
	width: 26.5%;
	background: #cdcdcd;
	vertical-align: top;
	border-radius: 5px 0 0 5px;
	font-weight: bold;
	height: auto;
	padding: 10px 16px;
}
.form .form-table-td {
	border-radius: 4px 0 0 4px;
	-webkit-transition: background-color 0.35s ease-in-out;
	transition: background-color 0.35s ease-in-out;
}
.form .tdCheck {
	background-color: #fff;
	padding: 16px;
}
.form .form-table-text {
	position: relative;
	display: inline-block;
	width: 100%;
	color: #343434;
}
.form .form-table-text .mark {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
}
.form .form-button {
	width: 100%;
	text-align: center;
}
/* mark */
.mark {
	display: block;
	border-radius: 2px;
	padding: 0 5px;
	font-size: 1.1rem;
	background: #fff;
	color: #444;
}
.mark.mark-req {
	background: #ea5858;
	color: #fff;
}
/* button */
.submit_bt {
	font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, " メイリオ", Meiryo, Osaka, " ＭＳ Ｐゴシック", MS PGothic, " sans-serif";
	color: #FFFFFF;
	display: inline-block;
	cursor: pointer;
	text-decoration: none;
	padding: 10px 60px;
	text-align: center;
	font-size: 1.7rem;
	-webkit-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
	transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	border: none;
	border-radius: 50px;
	background-color: #3fa55b;
}
.submit_bt .button-inner {
	position: relative;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.submit_bt:hover {
	background-color: #f66666;
}
.btn_back {
	background-color: #59a0eb;
}
.btn_back:hover {
	background-color: #64b9ee;
}
.checkPage input {
	margin: 0 8px;
}

/* for form template */
.formText_Check {
	font-size: 1.5rem;
	margin: 20px 0 50px;
	line-height: 1.8;
	color: #555;
}
.formText_Thanks {
	margin: 20px 0 50px;
	line-height: 1.8;
	color: #555;
}
.formText_Thanks h4 {
	font-size: 1.8rem;
	margin-bottom: 20px;
}
.formText_Thanks p {
	font-size: 1.3rem;
}

.formText_Thanks p span {
	font-weight: bold;
	display: block;
	width: 40%;
	margin: 0 auto 20px;
	padding: 15px;
	border: 1px solid #919191;
}
.formText_Thanks p span strong {
	color: #cc0033;
}


/* error state */
.is-error {
	background-color: #fee95d !important;
}
input[type=radio], input[type=checkbox] {
	display: none;
}

/* privacy_check */
.privacy_check {
	width: 100%;
	max-width: 800px; /* 960px */
	height: 200px;
	margin: 0 auto;
	padding: 25px;
	border: 5px solid #fff;
	border-radius: 5px;
	background-color: #fff;
	overflow-y: scroll;
	overflow-x: none;
	text-align: left;
	font-size: 1.3rem;
	color: #444;
	box-shadow: 0 0 5px #e4e4e4;
}
.privacy_check h3 {
	font-size: 1.6rem;
}
.privacy_check p {
	margin: 25px 0;
}
.privacy_check dl {
}
.privacy_check dl dt {
	font-weight: bold;
	margin-top: 20px;
}
.privacy_check dl dd {
	padding-left: 1.5em;
}
.agree_check {
	font-size: 1.3rem;
	margin-bottom: 20px;
	font-weight: bold;
}
/* end contact */


/* ------------------------------------------------------

	Small Tablets
------------------------------------------------------ */
@media (max-width: 960px) { /* 767px */

.hero {
	margin-top: 56px;
	position: relative;
	padding:0;
	height: 80vw;

	max-height: none;
}

.hero div {
    width: 85%;
}
.hero p {
	font-size: 14px;
}
.hero p span {
    font-size: 3rem;
    letter-spacing: 5px;
}

.fixed_hero {
	margin-top: 56px;
}

#container header nav {
	margin: 0;
	width: 100%;
	float: none;
	overflow: auto;
	display: inline-block;
	background: #52bad5;
}
#top-head {
	top: 0;
	position: fixed;
	margin-top: 0;
}
#top-head,
.nav_inner {
	width: 100%;
	padding: 0;
}
#top-head .nav_inner {
	display: block;
}

/* Fixed reset */
#top-head.fixed {
	padding-top: 0;
	background: transparent;
}
#mobile-head {
	width: 100%;
	height: 56px;
	z-index: 999;
	position: relative;
	border-bottom: 1px #f6f6f6 solid;
	display: flex;
	align-items: center;
}
#top-head .logo,
#top-head.fixed .logo {
	display: block;
	color: #fff; /* #333 */
	font-size: 1.6rem;
	width: auto;
	max-width: 80%;
	margin-left: 10px;
}
#top-head .logo img,
#top-head.fixed .logo img {
	height: 28px;
	max-height: 30px;
	vertical-align: bottom;
	margin: 0;
}
#global-nav {
	display: block;
	position: absolute;
	/* 開いてないときは画面外に配置 */
	top: -500px;
	background: #fff;
	width: 100%;
	text-align: center;
	padding: 0;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
#global-nav ul {
	display: inline;
	list-style: none;
	position: static;
	right: 0;
	bottom: 0;
	font-size: 1.4rem;
	padding-left: 0;
	margin: 0;
}
#global-nav ul li {
	display: block;
	float: none;
	position: static;
}
#global-nav ul li:nth-child(n+2) {
	margin-left: 0;
	border-top: 1px rgb(63, 165, 87) dashed;
}

#top-head #global-nav ul li a,
#top-head.fixed #global-nav ul li a {
	width: 100%;
	display: block;
	color: #555;
	padding: 18px 0;
	background-color: #eef7e0;
}
#top-head #global-nav ul li a.active,
#top-head.fixed #global-nav ul li a.active {
	background-color: #00B2D2;
}

/* ヘッダー お問い合わせ（上部固定時）
------------------------------------ */
#top-head .head_contact {
	display: block;
    margin: 0;
    padding: 20px 0;
    background-color: #3fa558;
}
#top-head .hd_tel {
    margin-bottom: 12px;
}
#top-head .hd_tel p {
	font-size: 2.2rem;
    color: #fff;
}
#top-head .hd_tel p a {
	color: #fff;
}
#top-head .hd_tel p span {
    font-size: 1.4rem;
    display: block;
    margin-left: 0;
	margin-top: 5px;
	color: #fff;
}
#top-head .hd_mail a {
    width: 200px;
    padding: 0.5em 0;
    font-size: 1.4rem;
    color: #3fa559 !important;
    background: #ffffff;
}

/* ---- */

#nav-toggle {
	display: block;
	top: 18px;
}
#top-head.fixed #nav-toggle {
	top: 18px;
}
/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) {
	top: 11px;
	-webkit-transform: rotate(315deg);
	-moz-transform: rotate(315deg);
	transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
	width: 0;
	left: 50%;
}
.open #nav-toggle span:nth-child(3) {
	top: 11px;
	-webkit-transform: rotate(-315deg);
	-moz-transform: rotate(-315deg);
	transform: rotate(-315deg);
}
/* #global-nav スライドアニメーション */
.open #global-nav {
	/* #global-nav top + #mobile-head height */
	-moz-transform: translateY(556px);
	-webkit-transform: translateY(556px);
	transform: translateY(556px);
}

}

@media (max-width: 767px) {

#container > section {
	padding: 15px 0;
}
.section_title {
	font-size: 2.3rem;
	font-weight: 500;
	margin: 40px 0;
}
.section_title:before {
	width: 50px;
	height: 50px;
}

/* ----------------------------------------- */

/* #kodawari
-------------------------------------------- */
#kodawari section > h3 {
	font-size: 2.6rem;
	margin-bottom: 15px;
	padding-bottom: 10px;
}
#kodawari section > h3 span {
	display: block;
	font-size: 2rem;
	margin-left: 0;
}
/* 小ロット お問い合わせ
------------------------------------ */
.s_lot {
    padding: 15px;
}
.s_lot h4 {
    font-size: 1.9rem;
    margin-bottom: 10px;
}
.s_lot h4 span {
    display: block;
    font-size: 1.5rem;
}

.s_lot_contact {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin: 0;
}
.slt_tel {
	margin-bottom: 10px;
}
.slt_tel p {
    font-size: 2.2rem;
}
.slt_tel p span {
	font-size: 1.2rem;
    display: block;
    margin-left: 0;
}
.slt_mail {
	margin-left: 0;
}
.slt_mail a {
	width: 200px;
}

/* ----------------------------------------- */

/* product
-------------------------------------------- */
#product_modal {}
.item_detail {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: none;
	margin: 0 auto;
	padding: 20px;
	border: 4px solid #b17320;
	border-radius: 10px;
	background-color: #ffffff;
	text-align: left;
}
.item_detail figure {
	display: block;
	background-size: 120%; /* cover */
	width: 100%;
	min-width: auto;
	height: 200px;
	border-radius: 20px;
	border: 1px solid #e4e3e3;
	margin-bottom: 10px;
}
.item_detail dl {
	width: 100%;
	margin-left: 0;
	padding: 5px 0;
	text-align: center;
}
.item_detail dl dt {
	display: inline-block;
	font-size: 2.0rem;
	font-weight: bold;
	margin-bottom: 15px;
	color: #fff;
	background-color: #463514;
	padding: 3px 20px;
	border-radius: 50px;
	letter-spacing: 1px;
}
.item_detail dl dd {
	font-size: 1.4rem;
	line-height: 1.5;
	text-align: left;
}
.item_detail dl dd small {
	font-size: 1.4rem;
}

.modaal-container {
	max-width: auto !important;
}
.modaal-content-container {
	padding: 0 !important;
}

/* ----------------------------------------- */

/* .img_cut
-------------------------------------------- */
.img_cut {
	min-height: 160px;
}
.img_cut div {
	display: none;
}
.cutbg01 {
	background: url("../img/img_cut01.jpg") center no-repeat / 140% !important;
}
.cutbg02 {
	background: url("../img/img_cut02.jpg") center no-repeat / 140% !important;
}
/* end img_cut */

/* ----------------------------------------- */

/* product
-------------------------------------------- */
#product_item {
	display: block;
}
#product_item li {
	position: relative;
	width: 100%;
	max-width: none;
}
.thumb figure {
	display: block;
	background-size: cover;
	width: 100%;
	height: 50vw;
	max-height: none;
}
.thumb p {
	font-size: 1.5rem;
}

/* 先頭ピックアップ */
#product_item li:first-child .thumb {
	width: 100%;
}
#product_item li:first-child .thumb figure {
	height: 50vw;
}
/* ------- */

.online_shop {
    margin: 40px 0;
    font-size: 1.7rem;
}

/* ----------------------------------------- */

/* #company
-------------------------------------------- */
#company {
}
#company .content_wrap {
	display: block;
}
#company section {
	width: 100%;
}
#company section h3 {
	display: block;
	font-size: 1.8rem;
	margin-bottom: 15px;
}
#company table {}
#company table th,
#company table td {
	font-size: 1.3rem;
}
#company table th {
	width: 30%;
}
.outline {
	margin-bottom: 40px;
}
.access {
	width: 100% !important;
	text-align: center !important;
	margin-top: 40px;
}

/* ----------------------------------------- */

/* #gmap
-------------------------------------------- */
#gmap {
	display: block;
}
#gmap div {
	width: 100%;
}
#gmap div:nth-child(n+2) {
	margin-top: 20px;
}
#gmap div h3 {
	font-size: 1.6rem;
	margin-bottom: 5px;
}
#gmap div iframe {
	width: 100%;
	height: 240px;
}

/* ----------------------------------------- */

/* contact
-------------------------------------------- */
/* -- BEGIN FORM BASE -- */
/* input */
.input {
	border-radius: 0 0 4px 4px;
	display: block;
	padding: 10px;
}
/* textarea */
.textarea {
	border-radius: 0 0 4px 4px;
	display: block;
	padding: 10px;
}
/* form */
.form {
	width: 90%;
}
.form .form-table-row {
	display: block;
}
.form .form-table-th,
.form .form-table-td {
	display: block;
	margin-left: 0;
	width: 100%;
}
.form .form-table-th {
	width: 100%;
	border-radius: 4px 4px 0 0;
	padding: 0;
}
.form .form-table-text {
	display: block;
	width: 100%;
	padding: 10px;
}
.form .form-table-td.check_td {
	background-color: #fff;
	padding: 10px 0;
}
.form .form-table-inner {
	width: 100%;
}
/* radio */
.checkbox,
.radio {
	display: block !important;
	padding: 5px 0 5px 40px !important;
}
/* button */
.submit_bt {
	width: 70%;
    display: inline-block;
}
.checkPage input {
	margin: 0 0 12px;
}
/* mark */
.mark {
	right: 30px !important;
	margin: 10px auto;
}
.check_td {
	background-color: #fff;
	border-radius: 0 0 4px 4px !important;
}
/* privacy_check */
.privacy_check {
	width: 100%;
	margin-bottom: 10px;
}
.agree_check {
	font-size: 1.3rem;
	width: 26em;
	margin: 0 auto 30px;
	font-weight: bold;
}
/* -- END FORM BASE -- */

}