@charset "utf-8";
/* ==========================
リセットＣＳＳ
============================= */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
	display: block;
}
h1, h2, h3, h4, th {
	font-weight: normal;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
address {
	font-style:normal;
}
img {
	max-width: 100%;
	vertical-align: bottom;
}


/* ==========================
共用ＣＳＳ
============================= */

/* 共通設定 */
body {
	font-family: 'Hiragino Kaku Gothic ProN',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, sans-serif;
	color: #555;
	line-height: 1.4;
}
a {
	text-decoration: none;
	color: inherit;
	transition: all .3s;
}
a:hover {
	opacity: 0.8;
}
.container {
	max-width: 1200px;
	margin: 0 auto;
}

/* flex用 */
.df, .df_1024, .df_768, .df_500 {
	display: flex;
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
}
.df_r {
	flex-direction: row-reverse;
}
.df_jc_c {
	justify-content: center;
}
.df_ai_c {
	align-items: center;
}
.flex_1 {
	flex: 1;
}
.flex_2 {
	flex: 2;
}
.flex_3 {
	flex: 3;
}

/* 左寄せ */
.align_l {
	text-align: left;
}
/* 中央寄せ */
.align_c {
	text-align: center;
}
/* ポジション系 */
.position_r {
	position: relative;
}
/* 縦中央寄せ */
.center_ver {
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	-webkit-transform : translateY(-50%);
	transform : translateY(-50%);
}
/* 縦横中央寄せ */
.center_verside {
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
}

/* マージン類 */
.mg_lr_auto {
	margin-left: auto;
	margin-right: auto;
}
.mg_t_20 {
	margin-top: 20px;
}
.mg_t_50 {
	margin-top: 50px;
}
.mg_t_80 {
	margin-top: 80px;
}
.mg_tb_20 {
	margin-top: 20px;
	margin-bottom: 20px;
}
.mg_b_20 {
	margin-bottom: 20px;
}
.mg_b_50 {
	margin-bottom: 50px;
}
.mg_b_80 {
	margin-bottom: 80px;
}
.mg_b_100 {
	margin-bottom: 100px;
}
.mg_lr_5 {
	margin-left: 5px;
	margin-right: 5px;
}

.is_display_none{
    
    display: none;
}

/* ==========================
ヘッダー設定
============================= */
header .container {
	font-family: 'Hiragino Kaku Gothic ProN',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, sans-serif;
}
/* ロゴ */
.header_logo {
	flex: 3;
	margin: 10px;
}

/* ナビゲーションメニュー */
.header_nav {
	flex: 9;
	font-size: 20px;
	margin: 10px;
}
.header_nav ul {
	width: 100%;
}
.header_nav li {
	flex: 1;
	text-align: center;
}
.header_nav a {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	transition: transform .2s;
	-webkit-font-smoothing: antialiased;
}
@media(min-width: 768px){
	.header_nav a:hover {
		transition: transform .5s;
		transform: translateY(-3px) scale(1.1);
	}
}
.header_nav a::before {
	position: absolute;
	bottom: -1px;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background: #00965E;
	transform: scale(0, 1);
	transform-origin: right top;
	transition: transform .2s;
}
.header_nav a:hover::before {
	transform-origin: left top;
	transform: scale(1, 1);
	transition: transform .3s;
}
.header_nav span {
	display: block;
	font-size: 0.6em;
}
.nav_2ndlevel ul {
	display: none;
	position: absolute;
	top: 40px;
	width: 100%;
	z-index: 100;
	margin-top: 10px;
	background: rgba(255,255,255,1);
	overflow-x: hidden;
}
.nav_2ndlevel li {
	font-size: 0.7em;
	text-align: left;
	padding-left: 0.5em;
	margin-bottom: 10px;
}
.nav_2ndlevel ul span {
	font-size: 0.4em;
}

/* 言語選択・通販サイトリンク */
.header_lang_cart {
	flex: 2;
	margin: 10px;
}
.header_lang {
	font-size: 18px;
	margin-bottom: 8px;
}
.header_cart {
	color: #00965E;
	border: 1px solid #00965E;
	padding: 15px 5px;
}
.header_cart p {
	font-size: 12px;
	font-weight: bold;
	text-align: center;
}
.header_cart div {
	margin: 5px;
}


/* ==========================
トップページ
============================= */

/* スライダー調整 */
.thumbnail li {
	padding: 10px 40px;
}
.thumbnail img {
  margin: 0 auto;
}
@media(max-width: 768px) {
	.thumbnail li {
		padding: 10px 20px;
	}
}


/* ==========================
フッター設定
============================= */
footer {
	background-color: #F3F3F3;
	padding: 20px;
}
.footer_content {
	flex: 1;
}
footer .footer_logo img {
	max-width: 200px;
}
/* SNS、通販サイトリンク */
.footer_sns_cart {
	position: absolute;
	bottom: 10px;
	right: 10px;
}
.footer_sns a {
	display: block;
	width: 50px;
	height: 50px;
	font-size: 32px;
	color: #fff!important;
	background: #ccc!important;
	border-radius: 50%;
	text-align: center;
	line-height: 47px;
	vertical-align: middle;
	margin: 10px;
}
.footer_sns a i {
	color: #fff!important;
	line-height: 50px;
}
.footer_cart {
	flex-direction: column;
	justify-content: center;
	color: #00965E;
	font-weight: bold;
	align-items: center;
}
.footer_cart div, .footer_cart p {
	margin-top: 10px;
}

/* 会社情報 */
.footer_info {
	margin-top: 20px;
	line-height: 1.8;
}

/* ナビゲーションメニュー */
.footer_nav {
	flex: 2;
	font-size: 20px;
	padding-bottom: 100px;
	margin: 10px;
}
.footer_nav ul {
	width: 100%;
}
.footer_nav li {
	flex: 1;
	text-align: center;
}
.footer_nav a {
	display: block;
	width: 100%;
}
.footer_nav span {
	display: block;
	font-size: 0.6em;
}
.nav_2ndlevel_footer ul {
	padding-top: 10px;
}
.nav_2ndlevel_footer li {
	font-size: 0.9em;
	text-align: left;
	padding-left: 1em;
	margin-bottom: 10px;
}
.nav_2ndlevel_footer ul span {
	font-size: 0.5em;
}
/* コピーライト */
.copyright {
	font-size: 12px;
}


/* ==========================
メディアクエリ
============================= */
@media screen and (max-width:1024px){

	/* FLEX解除 */
	.df_1024 {
		display: block;
	}
	
	/* ヘッダー */
	.header_nav {
		font-size: 16px;
	}
	.header_lang {
		font-size: 12px;
	}
	
	/* フッター */
	.footer_nav {
		font-size: 16px;
	}
}


@media screen and (max-width:768px){

	/* FLEX解除 */
	.df_768 {
		display: block;
	}
	
	/* 768で非表示 */
	.d_none_768 {
		display: none;
	}
	
	/* ヘッダートグルボタン */
	.wrapper {
		height: 100%;
		min-height: 100vh;
		overflow-x: hidden;
		position: relative;
	}
	.overlay {
		content: "";
		display: block;
		width: 0;
		height: 0;
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1000;
		opacity: 0;
		transition: opacity .5s;
	}
	.overlay.open {
		width: 100%;
		height: 100%;
		opacity: 1;
	}
	.menu-trigger {
		display: inline-block;
		width: 24px;
		height: 20px;
		vertical-align: middle;
		cursor: pointer;
		position: fixed;
		top: 24px;
		right: 30px;
		z-index: 3000;
	}
	.menu-trigger span {
		display: inline-block;
		box-sizing: border-box;
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #777;
		transition: all .5s;
	}
	.menu-trigger.active span {
		background-color: #fff;
	}
	.menu-trigger span:nth-of-type(1) {
		top: 0;
	}
	.menu-trigger.active span:nth-of-type(1) {
		transform: translateY(10px) rotate(-45deg);
	}
	.menu-trigger span:nth-of-type(2) {
		top: 9px;
	}
	.menu-trigger.active span:nth-of-type(2) {
		opacity: 0;
	}
	.menu-trigger span:nth-of-type(3) {
		bottom: 0;
	}
	.menu-trigger.active span:nth-of-type(3) {
		transform: translateY(-8px) rotate(45deg);
	}
	.header_nav {
		width: 250px;
		height: 100%;
		padding-top: 70px;
		background-color: #00965E;
		position: fixed;
		top: 0;
		right: 0;
		margin: 0;
		z-index: 2000;
		transform: translate(250px);
		transition: all .5s;
	}
	.header_nav.open {
		transform: translateZ(0);
	}
	.header_nav li {
		color: #fff;
		text-align: center;
		padding: 5px 0 0 0;
	}
	.nav_2ndlevel ul {
		display: block!important;
		position: static;
		background-color: #00AE6D;
		padding-top: 0;
		margin-top: 5px;
	}
	.nav_2ndlevel li {
		margin-bottom: 0;
		margin-left: 3em;
		padding: 5px 0;
	}
	#sp_navonly,#sp_navonly2 {
		background: transparent;
	}
	#sp_navonly li,#sp_navonly2 li {
		margin: 0;
		font-size: 16px;
	}
	/* ヘッダー */
	.header_logo {
		flex: 0 1 150px;
	}
	.header_cart {
		width: 50px;
		border: none;
		padding: 5px 0 0 0;
		margin: 0 75px 0 auto;
	}
	
	/* フッター */
	.footer_content {
		text-align: center;
		max-width: 300px;
		margin: 0 auto;
	}
	.footer_sns_cart {
		position: static;
	}
	.footer_cart {
		flex-direction: row-reverse;
		align-items: center;
		border: 1px solid #00965E;
		margin-top: 1em;
		margin-bottom: 1em;
	}
	.footer_cart div {
		margin-bottom: 10px;
	}
	.footer_cart img {
		width: 35px;
		height: auto;
	}
	.footer_cart p {
		font-size: 20px;
		margin-right: 15px;
		margin-top: 0;
	}
	.footer_info {
		font-size: 14px;
		text-align: left;
		margin-bottom: 50px;
	}
}

@media screen and (max-width:500px){

	/* FLEX解除 */
	.df_500 {
		display: block;
	}

}
@media screen and (max-width: 768px){
	.header_nav li {
		color: #fff;
		text-align: center;
		padding: 5px 0 0 0;
	}
	.nav_2ndlevel ul span {
		font-size: 0.6em;
	}
}