@charset "utf-8";

@-webkit-keyframes fadeIn { 0%{opacity:0;} 100%{opacity:1;} }
@keyframes fadeIn { 0%{opacity:0;} 100%{opacity:1;} }

/*----------------------------------------*/
/*COMMON SETTINGS*/
/*----------------------------------------*/
html {
	scroll-behavior: smooth;
}
body {
	background: #f5f5f5;
	position: relative;
}
body.noscroll {
	overflow: hidden;
}
a, a:active, a::after, a::before, a:focus, a:hover, a:link, a:visited,
[class*="button"], .hamburger, .nav-content *,
.slider-dots [id^="slick-slide-control"] {
	cursor: pointer;
	outline: 0;
	text-decoration: none;
}
a, a:active, a::after, a::before, a:focus, a:hover, a:link, a:visited,
[class*="button"], [class*="button"]::after, [class*="button"]::before, [class*="button"] *,
.hamburger, .hamburger::after, .hamburger::before,
.header-nav-sub .list-menu>*, .header-nav-sub .menu-image,
.imagearea, .imagearea *,
[class*="list"]>*,
.nav-content, .nav-content *,
.slider-dots [id^="slick-slide-control"] {
	transition: .3s;
}

div, section {
	animation: fadeIn .5s linear;
}

img {
	margin: auto;
	max-width: 100%;
	object-fit: cover;
	width: 100%;
	height: 100%;
	vertical-align: middle;
}
img[src*="_size"] {
	max-width: 500px;
}
img[src*="_size"][src$="jpg"] {
	mix-blend-mode: darken;
}

@media screen and (max-width:768px) {
	.pc-only {
		display: none;
	}
}

@media screen and (min-width:769px) {
	.sp-only {
		display: none;
	}
}

/*----------------------------------------*/
/*COMMON FONTS*/
/*----------------------------------------*/
html {
	font-size: 62.5%;
}
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, button, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
	color: #333;
	font-family: "Yu Gothic Medium", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: .05em;
	line-height: 1.8;
	word-break: break-all;
}
b, strong {
	font-weight: 600;
}
h1, h2, h3, h4, h5, h6 {
	line-height: 1.4;
}
h1, .h1 {
	font-size: 2.4rem;
}
h2, .h2 {
	font-size: 2rem;
}
h3, .h3 {
	font-size: 1.8rem;
}
h4, .h4, h5, .h5, h6, .h6 {
	font-size: 1.6rem;
	font-weight: 600;
}
img, span {
	font-size: inherit;
	font-weight: inherit;
}
small, .small {
	font-size: 1.2rem;
}
sup {
	font-size: 1rem;
}

figure, h1, h2, h3, h4, h5, h6, p {
	margin-bottom: 1.6rem;
}

.align-center, figcaption {
	text-align: center;
}
.align-left {
	text-align: left;
}
.align-right {
	text-align: right;
}

.text-label {
	background: #ddd;
	display: inline-block;
	font-size: 80%;
	font-weight: normal;
	line-height: 1;
	padding: .5em .8em;
}
.text-label.grey {
	background: #666;
	color: #fff;
}
.text-label.black {
	background: #111;
	color: #fff;
}
.text-label + .text-label {
	margin-left: .8em;
}

.text-link {
	text-decoration: underline;
}
.text-link.icon::after {
	background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 10 10"><path fill="%23000000" d="M9.1,0.9v5.3H3.9V0.9H9.1 M10,0H3v7h7V0z" /><polygon fill="%23000000" points="7,10 0,10 0,3 1,3 1,9 7,9 "/></svg>') no-repeat right .1em;
	background-size: .8em;
	content: "";
	display: inline-block;
    width: 1em;
    height: 1em;
}

.text-marker {
	background-color: transparent;
	background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(40%, transparent), color-stop(41%, #b6dbe2), to(#b6dbe2));
	background-image: -o-linear-gradient(top, transparent 0%, transparent 40%, #b6dbe2 41%, #b6dbe2 100%);
	background-image: linear-gradient(180deg, transparent 0%, transparent 40%, #b6dbe2 41%, #b6dbe2 100%);
}
.text-sub {
	display: block;
	font-size: 50%;
	font-weight: normal;
	text-align: inherit;
}

@media screen and (max-width:768px) {
	.sp-align-center {
		text-align: center;
	}
	.sp-align-left {
		text-align: left;
	}
	.sp-align-right {
		text-align: right;
	}
	.text-label, .text-sub {
		font-size: 1.2rem;
	}
}

@media screen and (min-width:769px) {
	h1, .h1 {
		font-size: 4rem;
	}
	h2, .h2 {
		font-size: 2.8rem;
	}
	h3, .h3 {
		font-size: 2rem;
	}
	.text-link:hover {
		opacity: .5;
	}
}

/*----------------------------------------*/
/*COMMON PARTS--BUTTON*/
/*----------------------------------------*/
[class*="button"], [class*="button"]::after, [class*="button"]::before, [class*="button"] *:where(:not(.text-sub)) {
	display: block;
	font-size: 1.2rem;
	letter-spacing: .2em;
	text-align: center;
}
[class*="button"] {
	margin: 16px auto;
}
[class*="button"].left {
	margin-left: 0;
}
[class*="button"].right {
	margin-right: 0;
}

.button {
	background: #111;
	border: 1px solid #111;
	border-radius: 2px;
	overflow: hidden;
	position: relative;
	width: 100%;
	z-index: 1;
}
.button, .button * {
	color: #fff;
}
.button>:is(a, span) {
	padding: .6em .6em .6em .8em;
}

.button:is(.white, .wired) {
	background: none;
}
.button.white {
	border-color: #fff;
}
.button.wired {
	border-color: #333;
}
.button.wired * {
	color: #333;
}

.button-border {
	width: fit-content;
}
.button-border::after {
	border: solid #111;
	border-width: 0 0 2px 0;
	content: "";
	transform: scaleX(1.4);
	width: 100%;
}
.button-border :is(a, span) {
	padding-left: .2em;
}
.button-border.white::after {
	border-color: #fff;
}
.button-border.white, .button-border.white * {
	color: #fff;
}

.button-large {
	background: #ddd;
	border-radius: 2px;
	position: relative;
}
.button-large::after {
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17.677" height="17.677" viewBox="0 0 17.677 17.677"><path d="M6177.419,1882.028h12v12" transform="translate(-3028.815 -5698.537) rotate(45)" fill="none" stroke="%23111" stroke-width="1"/></svg>') no-repeat;
	background-size: contain;
	content: "";
	display: block;
	height: 1em;
	position: absolute;
		top: 50%;
		right: 1.2em;
	transform: translateY(-50%);
	width: 1em;
}
.button-large :is(a, span) {
	font-size: 1.3rem;
	letter-spacing: .05em;
	padding: 1em 2.6em;
}

@media screen and (min-width:769px) {
	.button {
		background: none;
		min-width: 200px;
		width: fit-content;
	}
	.button:where(:not(.white, .wired))::before {
		background-color: #111;
		background-image: -webkit-gradient(linear, left top, right top, color-stop(30%, #111), color-stop(50%, #444), color-stop(70%, #111));
		background-image: -o-linear-gradient(left, #111 30%, #444 50%, #111 70%);
		background-image: linear-gradient(90deg, #111 30%, #444 50%, #111 70%);
		content: "";
		position: absolute;
			top: 0;
			right: 0;
		width: 300%;
		height: 100%;
		z-index: -1;
	}
	.button:hover::before {
		right: -200%;
	}
	.button:is(.white, .wired):hover {
		opacity: .5;
	}
	.button-border:hover::after {
		transform: scaleX(1);
	}
	.button-large {
		max-width: 640px;
	}
	.button-large:hover {
		opacity: .5;
	}
	.button-large:hover::after {
		right: 1em;
	}
}

/*----------------------------------------*/
/*COMMON PARTS--HEADING*/
/*----------------------------------------*/
[class^="heading"] {
	font-size: 2.4rem;
	font-weight: 500;
	line-height: 1.4;
	margin: 16px auto;
	text-align: center;
}
[class^="heading"].align-left {
	margin-left: 0;
	text-align: left;
}
[class^="heading"].align-right {
	margin-right: 0;
	text-align: right;
}
[class^="heading"] img[src*="logo"][src$="svg"] {
	font-size: inherit;
	max-height: 1em;
	object-fit: scale-down;
}

.heading-border {
	border-bottom: 1px solid #ccc;
	padding-bottom: 8px;
}

.heading-sup {
	display: block;
	font-size: 1.2rem;
	font-weight: 700;
	margin-top: 0;
	margin-bottom: 0;
	text-align: inherit!important;
}

@media screen and (max-width:768px) {
	[class^="heading"].sp-align-center {
		margin: 16px auto;
		text-align: center;
	}
	[class^="heading"].sp-align-left {
		margin-left: 0;
		text-align: left;
	}
	[class^="heading"].sp-align-right {
		margin-right: 0;
		text-align: right;
	}
}

@media screen and (min-width:769px) {
	[class^="heading"]:where(:not(.heading-sup)) {
		font-size: 2.8rem;
	}
	.heading-large {
		font-size: 4rem;
	}
}

/*----------------------------------------*/
/*COMMON PARTS--IMAGE AREA*/
/*----------------------------------------*/
.imagearea {
	position: relative;
}
.imagearea .image-secondary {
	display: block;
	opacity: 0;
	position: absolute;
		top: 0;
		left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (min-width:769px) {
	.imagearea:hover .image-secondary {
		opacity: 1;
	}
}

/*----------------------------------------*/
/*COMMON PARTS--LIST*/
/*----------------------------------------*/
[class^="list"], [class^="list"]>* {
	list-style: none;
	margin: 0;
	padding: 0;
}
[class^="list"]>* {
	position: relative;
}
[class^="list"] .link {
	display: block;
	position: absolute;
		top: 0;
		left: 0;
	width: 100%;
	height: 100%;
}

.list-eol dt span {
	font-size: 110%;
	font-weight: bold;
	margin-right: .5em;
	opacity: .5;
}

.list-icon, .list-sns {
	display: flex;
		flex-wrap: wrap;
		gap: 8px;
}
.list-icon>* {
	width: calc(calc(100% - 32px) / 5);
}
.list-sns>* {
	width: 20px;
	height: 20px;
}

.list-info {
	margin: 16px 0;
}
.list-info>* {
	margin-left: 1.5em;
	text-indent: -1.5em;
}
.list-info>*::before {
	content: "※";
	margin-right: .5em;
}

.list-label {
	display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;
		justify-content: center;
	margin: 8px auto;
}
.list-label>* {
	background: #ddd;
	border-radius: 2em;
	font-size: 1rem;
	line-height: 1;
	padding: 8px 16px;
}
.list-label.grey>* {
	background: #666;
	color: #fff;
}
.list-label.black>* {
	background: #111;
	color: #fff;
}

.list-news {
	margin: 16px auto 32px;
	padding: 0;
}
.list-news>* {
	border-bottom: 1px solid #ccc;
	padding: 16px 0;
}
.list-news .date, .list-news .date * {
	color: #666;
	font-size: 1.2rem;
	margin-bottom: 1em;
}
.list-news .title {
	display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;
	font-weight: bold;
	margin-bottom: 0;
}
.list-news .title > * {
	margin: 0;
	text-decoration: none;
}
.list-news .title > *:not([class*="label"]) {
	font-weight: inherit;
}

@media screen and (min-width:769px) {
	:is(.list-eol, .list-news)>* {
		display: flex;
			align-items: center;
	}
	.list-eol>*>* {
		margin-left: 16px;
	}
	.list-eol dt {
		width: 80%;
	}
	.list-icon>* {
		width: calc(calc(100% - 72px) / 10);
	}
	.list-news>*:hover {
		opacity: .5;
	}
	.list-news .date {
		margin-bottom: 0;
		padding-right: 16px;
		width: 120px;
	}
	.list-news .title {
		width: calc(100% - 120px);
	}
}

/*----------------------------------------*/
/*COMMON PARTS--TEXT BOX*/
/*----------------------------------------*/
.textarea, .textbox {
	margin: auto;
	position: relative;
	width: 100%;
}
:is(.textarea, .textbox).left {
	margin-left: 0;
}
:is(.textarea, .textbox).right {
	margin-right: 0;
}
:is(.textarea, .textbox)>*:first-child {
	margin-top: 0;
}
:is(.textarea, .textbox)>*:last-child {
	margin-bottom: 0;
}

.textarea.center *:where(:not([class*="align-"])) {
	text-align: center;
}
.textarea.left *:where(:not([class*="align-"])) {
	text-align: left;
}
.textarea.right *:where(:not([class*="align-"])) {
	text-align: right;
}
.textarea .button, .textarea .button * {
	text-align: center;
}
.textarea.left .button {
	margin-left: 0;
}
.textarea.right .button {
	margin-right: 0;
}

.textbox {
	background: #fff;
	padding: 32px;
	z-index: 2;
}

@media screen and (max-width:768px) {
	:is(.textarea, .textbox).sp-center {
		margin: auto;
	}
	:is(.textarea, .textbox).sp-left {
		margin-left: 0;
	}
	:is(.textarea, .textbox).sp-right {
		margin-right: 0;
	}

	.textarea.sp-center *:where(:not([class*="align-"])) {
		text-align: center;
	}
	.textarea.sp-left *:where(:not([class*="align-"])) {
		text-align: left;
	}
	.textarea.sp-right *:where(:not([class*="align-"])) {
		text-align: right;
	}
	.textarea .button, .textarea .button * {
		text-align: center;
	}
	.textarea.sp-center .button {
		margin-right: auto;
		margin-left: auto;
	}
	.textarea.sp-left .button {
		margin-right: auto;
		margin-left: 0;
	}
	.textarea.sp-right .button {
		margin-right: 0;
		margin-left: auto;
	}
}

@media screen and (min-width:769px) {
	.textarea, .textbox {
		max-width: 580px;
	}
	:is(.textarea, .textbox):is(.left, .right) {
		max-width: 520px;
	}
	:is(.textarea, .textbox).wide {
		max-width: 768px;
	}
	:is(.textarea, .textbox).full {
		max-width: unset;
	}
}

/*----------------------------------------*/
/*COMPONENTS--CARDS*/
/*----------------------------------------*/
.card {
	position: relative;
}
.card>*:not(:first-child, [class^="textbox"]:first-child) {
	margin-top: 16px;
}
.card :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, [class^="heading"]) {
	text-align: center;
}
.card::after {
	-webkit-clip-path: polygon(0% 0%, calc(100% - 8px) 0%, 100% 50%, calc(100% - 8px) 100%, 0% 100%);
			clip-path: polygon(0% 0%, calc(100% - 8px) 0%, 100% 50%, calc(100% - 8px) 100%, 0% 100%);
	color: #fff;
	display: block;
	font-size: 1rem;
	padding: 4px 16px 4px 8px;
	position: absolute;
		top: 8px;
		left: 0;
}
.card.eol::after {
	background: #bbb;
	content: "生産終了";
}
.card.new::after {
	background: #333;
	content: "NEW";
}

/*----------------------------------------*/
/*COMPONENTS--LOWER NAV*/
/*----------------------------------------*/
.nav-content {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	width: 100%;
}
.nav-content>* {
	position: relative;
	text-align: center;
}
.nav-content>*:not(:first-child) {
	border: solid #eee;
	border-width: 1px 0 0;
}
.nav-content>*::after {
	background: #333;
	content: "";
	clip-path: polygon(0 20%, 50% 70%, 100% 20%, 100% 30%, 50% 80%, 0 30%);
	display: inline-block;
	position: absolute;
		top: calc(50% - 8px);
		right: 16px;
	width: 16px;
	height: 16px;
}
.nav-content :is(a, span) {
	display: block;
	padding: 8px 32px;
}
.wrap-nav {
	background: #fff;
}
.wrap-nav.sticky {
	position: sticky;
	top: 64px;
	z-index: 4;
}

@media screen and (min-width:769px) {
	.nav-content {
		display: flex;
			align-items: center;
			justify-content: center;
		height: 64px;
	}
	.nav-content>*:not(:first-child) {
		border-width: 0 0 0 1px;
	}
	.nav-content>*::after {
		display: none;
	}
	.nav-content :is(a, span):hover {
		opacity: .5;
	}
}

/*----------------------------------------*/
/*COMPONENTS--TAB*/
/*----------------------------------------*/
.tab-content {
	animation: fadeIn .5s linear;
	display: none;
	opacity: 0;
}
.tab-content.is-show {
	display: block;
	opacity: 1;
}
.tab-content>*:first-child {
	margin-top: 0;
	padding-top: 96px;
}

/*----------------------------------------*/
/*COMPONENTS--TABLE*/
/*----------------------------------------*/
table {
	width: 100%;
}
th, td {
	border-bottom: 1px solid #ccc;
	padding: 8px;
	text-align: left;
}
th {
	font-weight: bold;
}
.info-corporate :is(th, td) {
	padding: 16px 8px;
	text-align: center;
}
.info-product th {
	width: 30%;
}
.info-product td {
	width: 70%;
}

@media screen and (min-width:769px) {
	.info-product:not(.single) tr{
		display: flex;
		float: left;
		width: 50%;
	}
	.info-product:not(.single) tr::after, .info-product:not(.single) tr::before {
		clear: both;
		content: "";
		display: block;
	}
	.info-product:not(.single) th {
		width: calc(30% - 16px);
	}
	.info-product.single {
		margin: auto;
		max-width: 768px;
	}
	.info-product.single th {
		width: 25%;
	}
}

/*----------------------------------------*/
/*COMPONENTS--GALLERY & SLIDER*/
/*----------------------------------------*/
[class^="gallery-"] {
	list-style: none;
	margin: 0;
	padding: 0;
}
.gallery-masonry img {
	aspect-ratio: 8/5;
}

[class*="slider"] {
	margin: 0!important;
	overflow: hidden;
	padding: 0!important;
	position: relative;
}
[class^="slider"]:not(.slider-dots) {
	height: 50vh!important;
}
[class*="slider"] div {
	transition: none;
}
[class^="slider"] .slick-slide {
	border: none!important;
	height: calc(50vh + 4px)!important;
}

.slider-dots {
	position: absolute;
		right: 16px;
		bottom: 0;
}
.slider-dots [id^="slick-slide-control"] {
	background: rgba(255, 255, 255, 0.5);
	border-color: transparent;
	border-radius: 50%;
	color: transparent;
	padding: 0;
	width: 8px;
	height: 8px;
}
.slider-dots .slick-active [id^="slick-slide-control"]{
	background: rgba(255, 255, 255, 1);
}
:is(.slider-fade, .slider-vertical) .slider-dots {
	bottom: 0;
	transform: translateY(calc(calc(25vh - 50%) * -1));
}

@media screen and (min-width:769px) {
	.gallery-masonry {
		display: flex;
			flex-wrap: wrap;
			gap: 16px;
		padding: 0 16px 16px;
	}
	.gallery-masonry>* {
		max-height: 70vh;
		width: 100%;
	}
	.gallery-masonry img {
		aspect-ratio: unset;
	}
	.gallery-masonry .item-half, .gallery-masonry>*:is(:nth-child(2), :nth-child(3), :nth-child(5), :nth-child(6), :nth-child(8), :nth-child(9)) {
		width: calc(50% - 8px);
	}
	.gallery-masonry .item-full {
		width: 100%;
	}

	[class*="slider"]:not(.slider-dots) {
		height: unset!important;
	}
	[class^="slider"] .slick-slide {
		height: calc(100vh - 96px)!important;
	}

	.slider-dots [id^="slick-slide-control"] {
		width: 10px;
		height: 10px;
	}
	:is(.slider-fade, .slider-vertical) .slider-dots {
		bottom: 40px;
		transform: none;
	}
	.slider-vertical .slick-slide {
		height: calc(100vh - 64px)!important;
	}
}

/*----------------------------------------*/
/*UNIT--BlOCK & FLEX*/
/*----------------------------------------*/
[class*="unit-"] {
	list-style: none;
	margin: 0;
	padding: 0;
}
[class*="unit-"]>:is(.imagearea+.imagearea, .imagearea+.textarea, .textarea+.imagearea, .textbox+.textbox) {
	margin-top: 16px;
}
[class*="unit-"]>:is(.imagearea+.textbox, .textbox+.imagearea) {
	margin-top: -16px;
}
[class*="unit-"]>.textarea+.textarea {
	border: solid #ccc;
	border-width: 1px 0 0 0;
	margin-top: 32px;
	padding-top: 32px;
}
[class*="unit-"]>.textbox {
	margin-right: 16px;
	margin-left: 16px;
	width: calc(100% - 32px);
}

.unit-flex:is(.half, .third, .quarter)>*:where(:not(:first-child)) {
	margin-top: 32px;
}

@media screen and (min-width:769px) {
	[class*="unit-"]>.textbox {
		margin-right: auto;
		margin-left: auto;
	}

	.unit-flex {
		display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: center;
	}
	.unit-flex.reverse {
		flex-direction: row-reverse;
	}
	.unit-flex>* {
		flex: 1;
	}
	.unit-flex>:is(.imagearea+.imagearea, .imagearea+.textarea, .textarea+.imagearea, .textbox+.textbox) {
		margin: 0 0 0 32px;
	}
	.unit-flex.reverse>:is(.imagearea+.imagearea, .imagearea+.textarea, .textarea+.imagearea, .textbox+.textbox) {
		margin: 0 32px 0 0;
	}
	.unit-flex>:is(.imagearea+.textbox, .textbox+.imagearea) {
		margin: 0 0 0 -32px;
	}
	.unit-flex.reverse>:is(.imagearea+.textbox, .textbox+.imagearea) {
		margin: 0 -32px 0 0;
	}
	.unit-flex>.textarea+.textarea {
		border-width: 0 0 0 1px;
		margin: 0 auto;
		padding: 0;
	}

	.unit-flex:is(.half, .third, .quarter) {
		column-gap: 32px;
		row-gap: 64px;
	}
	.unit-flex:is(.half, .third, .quarter)>* {
		align-self: flex-start;
		flex: unset;
		margin-top: 0;
	}
	.unit-flex.half>* {
		width: calc(calc(100% - 32px) / 2);
	}
	.unit-flex.third>* {
		width: calc(calc(100% - 64px) / 3);
	}
	.unit-flex.quarter>* {
		width: calc(calc(100% - 96px) / 4);
	}
}

/*----------------------------------------*/
/*CONTAINER--COMMON*/
/*----------------------------------------*/
.container, .inner {
	max-width: 1192px;
	position: relative;
	width: 100%;
	height: 100%;
}
.container.narrow, .inner.narrow {
	max-width: 768px;
}
.container {
	margin: 80px auto;
}
.inner {
	margin: auto;
	padding: 0 16px;
}
.inner+.inner {
	margin-top: 64px;
}

:is(.container, .inner)>*:first-child {
	margin-top: 0;
}
:is(.container, .inner)>*:last-child {
	margin-bottom: 0;
}

.wrap-content {
	margin: 32px 0;
	width: 100%;
}

@media screen and (min-width:769px) {
	.container {
		margin: 120px auto;
	}
	.inner+.inner {
		margin-top: 96px;
	}
	.wrap-content {
		margin: 64px 0;
	}
}

/*----------------------------------------*/
/*CONTAINER--HERO & CTA*/
/*----------------------------------------*/
.area-cta {
	background: #eee;
	padding: 64px 0;
}

.area-infobar {
	background: #b6dbe2;
	padding: 8px 0;
}

[class^="hero"] {
	background-color: #333;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
		align-items: center;
		justify-content: center;
	min-height: 50vh;
	padding: 32px 0;
	position: relative;
	width: 100%;
	height: auto;
}
[class^="hero"] .background {
	position: absolute;
		top: 0;
	width: 100%;
	height: 100%;
}
[class^="hero"] :is(.heading, .heading-large) {
	margin-bottom: 8px;
}
[class^="hero"] .inner {
	display: flex;
		flex-direction: column;
		justify-content: center;
	margin-top: unset;
	margin-bottom: unset;
}
[class^="hero"] .inner.top {
	align-self: flex-start;
	justify-content: flex-start;
}
[class^="hero"] .inner.bottom {
	align-self: flex-end;
	justify-content: flex-end;
}
[class^="hero"] .textarea * {
	color: #fff;
}
[class^="hero"] .textarea [class*="button"], [class^="hero"] .textarea [class*="button"]::after, [class^="hero"] .textarea  [class*="button"]::before {
	background: none;
	border-color: #fff;
}
[class^="hero"] .textarea .button {
	min-width: 160px;
	width: fit-content;
}

.overlay, .overlay::after {
	position: absolute;
		top: 0;
		left: 0;
	width: 100%;
	height: 100%;
}
.overlay::after {
	background: rgba(17, 17, 17, 0.3);
	content: "";
	display: block;
}

@media screen and (max-width:768px) {
	[class^="hero"] .inner.sp-bottom {
		align-self: flex-end;
		justify-content: flex-end;
	}
	[class^="hero"] .inner.sp-middle {
		align-self: center;
		justify-content: center;
	}
	[class^="hero"] .inner.sp-top {
		align-self: flex-start;
		justify-content: flex-start;
	}
}

@media screen and (min-width:769px) {
	[class^="hero"] {
		padding: 64px 0;
	}
	[class^="hero"].fullheight {
		height: calc(100vh - 64px);
	}
	[class^="hero"] .textarea .button:hover {
		opacity: .5;
	}
	.hero-mv {
		height: calc(100vh - 96px);
	}
}

/*----------------------------------------*/
/*CONTAINER--LOWER MV*/
/*----------------------------------------*/
.lower-mv>.inner {
	padding: 0;
}
.lower-mv .list-icon>* {
	width: calc(calc(100% - 32px) / 5);
}
.lower-mv>.textarea, .lower-mv>.inner .textarea {
	margin-top: 32px;
	margin-bottom: 32px;
	padding: 0 16px;
}

@media screen and (max-width:768px) {
	.lower-mv:is(.product-cat, .product-item) .textarea *:not(p) {
		text-align: center;
	}
}

@media screen and (min-width:769px) {
	.lower-mv, .lower-mv>.inner {
		overflow: auto;
		position: relative;
		width: 100%;
		height: calc(100vh - 160px);
	}
	:is(.lower-mv, .lower-mv>.inner)::-webkit-scrollbar {
		display: none;
	}
	:is(.lower-mv, .lower-mv>.inner)>.imagearea {
		height: 100%;
	}
	.lower-mv .container {
		height: auto;
	}

	.lower-mv.product-cat, .lower-mv.product-item>.inner {
		display: flex;
			align-items: center;
	}
	:is(.lower-mv.product-cat, .lower-mv.product-item>.inner)>* {
		width: 50%;
	}
	:is(.lower-mv.product-cat, .lower-mv.product-item>.inner) [class^="heading"] {
		text-align: left;
	}

	.lower-mv.product-cat {
		flex-direction: row-reverse;
	}
	.lower-mv.product-cat>.textarea {
		margin: 32px 16px 32px auto;
	}

	.lower-mv.product-item [class*="button"] {
		width: 100%;
	}
	.lower-mv.product-item>.inner .imagearea {
		flex: 3;
	}
	.lower-mv.product-item>.inner .textarea {
		flex: 1;
		position: sticky;
		top: 16px;
	}
}

/*----------------------------------------*/
/*HEADER*/
/*----------------------------------------*/
body {
	padding-top: 64px;
}
.breadcrumb {
	display: none;
}
.hamburger {
	padding: 8px 0;
}
.hamburger::after, .hamburger::before {
	content: "";
	background: #333;
	display: block;
	width: 32px;
	height: 1px;
}
.hamburger::after {
	margin-top: 8px;
}
.hamburger.opened {
	padding: 0;
}
.hamburger.opened::after {
	transform: rotate(-45deg) translate(3px,-3px);
}
.hamburger.opened::before {
	transform: rotate(45deg) translate(3px,3px);
}
.header {
	background: #fff;
	border-bottom: 1px solid #eee;
	position: fixed;
	top: 0;
	width: 100%;
	height: 64px;
	z-index: 9;
}
.header .inner{
	display: flex;
		align-items: center;
		justify-content: space-between;
}
.header-logo {
	width: 128px;
}
.header-nav {
	background: #f5f5f5;
	display: none;
	padding: 16px;
	position: absolute;
		top: 64px;
		left: 0;
	width: 100%;
	height: calc(100vh - 64px);
	z-index: 9;
}
.header-nav .list-menu>* {
	border-bottom: 1px solid #ddd;
	padding: 12px 0;
}
.header-nav .list-menu>*:last-child {
	border: none;
}
.header-nav .list-menu *:where(:not(.text-sub)) {
	font-size: 1.6rem;
}
.header-nav .list-menu .text-sub {
	margin-top: -0.4rem;
}
.header-nav-sub .list-menu {
	margin-left: 16px;
}
.header-nav-sub .list-menu * {
	border: none;
	font-size: 1.3rem;
	padding: 6px 0;
}
.header-nav-sub .list-title {
	margin: 16px 0 8px;
}
.header-nav-sub :is(.list-title, .list-title *) {
	font-size: 1.6rem;
	font-weight: bold;
	letter-spacing: .1em;
}
.header-nav-sub .menu-image {
	display: none;
}
.menu-child {
	display: none;
}

@media screen and (max-width:1191px) {
	.header .list-sns {
		justify-content: center;
		margin-top: 32px;
	}
}

@media screen and (min-width:1192px) {
	.breadcrumb {
		display: flex;
			align-items: center;
		list-style: none;
		margin: 0 auto;
		padding: 0 16px;
		max-width: 1192px;
		height: 32px;
	}
	.breadcrumb * {
		color: #888;
		font-size: 1rem;
	}
	.breadcrumb :is(a, a *) {
		color: #333;
	}
	.breadcrumb a::after {
		content: "▶︎";
		display: inline-block;
		margin: 0 8px;
		transform: scale(.5);
	}
	.hamburger {
		display: none;
	}
	.header-nav {
		background: none;
		display: flex;
			align-items: center;
			justify-content: space-between;
		padding: 0;
		position: relative;
		top: 0;
		width: calc(100% - 128px);
		height: unset;
	}
	.header-nav .list-menu {
		display: flex;
			align-items: center;
		margin-left: 32px;
		width: 72%;
	}
	.header-nav .list-menu>* {
		border: none;
		flex: 1;
		padding: 12px 16px;
		position: unset;
	}
	.header-nav .list-menu *:where(:not(.text-sub)) {
		font-size: 1.4rem;
	}
	.header-nav-sub {
		background: #eee;
		cursor: default;
		display: flex;
		padding: 16px 0 24px;
		position: absolute;
			top: 64px;
			left: 0;
		width: 100%;
	}
	.header-nav-sub>* {
		width: 25%;
	}
	.header-nav-sub .list-menu {
		display: block;
		padding-right: 32px;
		width: 100%;
	}
	.header-nav-sub .list-menu>* {
		padding: 2px 0;
	}
	.header-nav-sub .list-menu>*::after {
		border-bottom: 1px solid #555;
		content: "";
		display: block;
		transition: .3s;
		width: 0%;
	}
	.header-nav-sub .list-menu>*:hover::after{
		width: 100%;
	}
	.header-nav-sub .list-menu>* a {
		display: block;
	}
	.header-nav-sub .list-menu * {
		font-size: 1.2rem;
	}
	.header-nav-sub .list-title {
		margin: 16px 0 8px 32px;
	}
	.header-nav-sub :is(.list-title, .list-title *) {
		font-size: 1.6rem;
	}
	.header-nav-sub .menu-image {
		display: block;
		margin: 0;
		padding: 0;
		opacity: 0;
		position: absolute;
			top: 0;
			right: 0;
		width: 40%;
		height: 100%;
		z-index: 1;
	}
	.header-nav-sub .menu-image.default {
		opacity: 1;
		z-index: 2;
	}
	.header-nav-sub :is(.list-title:hover, .list-menu li:hover) .menu-image {
		opacity: 1;
		z-index: 3;
	}
}

/*----------------------------------------*/
/*FOOTER*/
/*----------------------------------------*/
.footer {
	background: #333;
	padding-top: 32px;
}
.footer * {
	color: #f5f5f5;
	font-size: 1.2rem;
}
.footer img[src*="icon_"] {
	filter: invert(1);
}
.footer-bottom {
	background: #111;
	margin-top: 32px;
	padding: 16px 0;
}
.footer-bottom a {
	text-decoration: underline;
}
.footer-bottom :is(ul, li) {
	list-style: none;
	margin: 0;
	padding: 0 16px 0 0;
}
.footer-bottom ul li {
	margin-bottom: 1em;
}
.footer-bottom .copyright {
	text-align: right;
}
.footer-logo {
	padding: 8px 0 16px;
	width: 160px;
}
.footer-nav {
	margin-top: 16px;
}
.footer-nav>*:not(:first-child) {
	margin-top: 32px;
}
.footer-nav .list-menu>*{
	padding: 4px 0;
}
.footer-nav .list-menu-sub {
	display: none;
}
.footer-nav .list-title {
	border-bottom: 1px solid #f5f5f5;
	font-size: 1.6rem;
	margin-bottom: 16px;
	padding-bottom: 8px;
}

@media screen and (min-width:769px) {
	.footer {
		padding-top: 64px;
	}
	.footer a:hover {
		opacity: .5;
	}
	.footer-bottom {
		margin-top: 80px;
	}
	.footer-bottom * {
		display: flex;
			align-items: center;
		font-size: 1rem;
	}
	.footer-bottom .inner {
		justify-content: space-between;
	}
	.footer-nav {
		display: flex;
	}
	.footer-nav>*:not(:first-child) {
		flex: 4;
		margin-top: 0;
	}
	.footer-nav>*:first-child, .footer-nav .list-menu .unit-flex>*:first-child {
		flex: 1;
	}
	.footer-nav .list-menu .unit-flex>*:not(:first-child) {
		flex: 6;
	}
	.footer-nav .list-menu>*{
		padding: 8px 0;
	}
	.footer-nav .list-menu-sub {
		display: flex;
	}
	.footer-nav .list-menu-sub * {
		color: #aaa;
	}
	.footer-nav .list-menu-sub>*:not(:first-child) {
		padding-left: 16px;
	}
}