@charset "utf-8";

/*============================
#common
============================*/
#header {
  background: none;}
body.scroll #header {
  background: rgb(0 0 0 / 80%);
}
section.node {padding: 100px 0;}
section.node .node-wrapper {padding: 0 40px;}
section.node .node-wrapper > *:last-child {margin-bottom: 0;}
section.node h3.title {margin-bottom: 40px;font-family: 'Frank Ruhl Libre', serif;font-size:4.0rem;font-weight:400;line-height: 1.2;}
section.node div.title {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 40px;
}
section.node div.title .en {
	color: #666;
	font-size: 1.2rem;
}
section.node div.title h3 {
	position: relative;
	margin-top: 10px;
	font-size: 2.0rem;
	writing-mode: vertical-rl;
	font-feature-settings: normal;
	letter-spacing: .2em;
	font-weight: 400;
	white-space: nowrap;
	line-height: 1.2;
}
a.btn-more {display: inline-flex;vertical-align: top;align-items: center;font-size: 1.6rem;text-decoration: none;line-height: 1.2;}
a.btn-more:before {content: '';display: block;width: 43px;height: 33px;margin: 0 10px 0 -10px;background: url(../img/icon/more.svg) no-repeat;background-size: contain;transition: 0.2s;}
@media all and (min-width: 821px) {
section.node {padding: 150px 0;}
section.node .node-wrapper {padding: 0 80px;}
section.node h3.title {margin-bottom: 30px;font-size: min(6.5vw, 7.0rem);}
section.node div.title {
	margin-bottom: 30px;
}
section.node div.title .en {
	font-size: 1.4rem;
}
section.node div.title h3 {
	font-size: 2.6rem;
}
a.btn-more {transition: 0.2s;}
a.btn-more:hover {opacity: 0.6;}
a.btn-more:hover:before {margin-right: 20px;}
}
@media all and (max-width: 820px) {
body.open #header {
  background: rgb(0 0 0 / 80%);
}
}

/*============================
#eyecatch
============================*/

section.eyecatch {
	position: relative;
	overflow: hidden;
}
section.eyecatch:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 15%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
	z-index: 2;
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 {position: relative;background: #262626;}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 h2 {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	justify-content: center;
	width: 120%;
	color: #FFF;
	font-family: 'Frank Ruhl Libre', serif;
	font-size: min(6.5vw, 7.0rem);
	font-weight: 400;
	text-align: center;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
	white-space: nowrap;
	letter-spacing: 0.05em;
	transform: translateX(-50%);
	z-index: 10;
	opacity: 0;
	transition: 0.2s, opacity 0.7s 0.7s, transform 1s ease-in-out 5s;
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 h2.start {
  opacity: 1;
  transform: translateX(-50%) scale(1.2);
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 h2 .bio {
  width: 0;
  opacity: 0;
  transition: width 1.5s ease-in-out 4s, opacity 1.5s 4s;
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 h2.start .bio {
  width: 1.6em;
  opacity: 1;
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 h2 .txt {
  width: 1.1em;
  transition: width 1.5s ease-in-out 4s;
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 h2.start .txt {
  width: 0;
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 h2 .n {
  color: #8db88d;
  transition: color 1.5s 4s;
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 h2.start .n {
  color: #FFF;
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 h2 .n + .txt {
  width: 4.8em;
  transition: opacity 0.8s 3.5s, width 1.5s ease-in-out 4s;
	text-align: left;
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 h2.start .n + .txt {
  opacity: 0;
  width: 0;
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 h2 .e {
  color: #8db88d;
  transition: color 1.5s 4s;
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 h2.start .e {
  color: #FFF;
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 h2 .e + .txt {
  width: 2.3em;
  transition: opacity 0.8s 3.7s, width 1.5s ease-in-out 4s;
	text-align: left;
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 h2.start .e + .txt {
  opacity: 0;
  width: 0;
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 h2 .o {
  color: #8db88d;
  transition: color 1.5s 4s;
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 h2.start .o {
  color: #FFF;
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 h2 .o + .txt {
  width: 3.8em;
  transition: opacity 0.8s 3.9s, width 1.5s ease-in-out 4s;
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 h2.start .o + .txt {
  opacity: 0;
  width: 0;
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 p {
  position: absolute;
  top: calc(50% + 2em);
  left: 50%;
  display: flex;
  justify-content: center;
  width: 100%;
	margin: 0;
  color: #FFF;
  font-family: 'Frank Ruhl Libre', serif;
  font-size: min(4vw, 2.2rem);
  font-weight: 400;
  text-align: center;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  letter-spacing: 0.05em;
  transform: translateX(-50%);
  z-index:1;
  opacity: 0;
  transition: 0.2s, opacity 0.8s 6s;
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 p.start {
	opacity: 1;
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 img {
  display: block;
  width: 100%;
  opacity: 0;
  transition: opacity 2s 0.3s, transform 1.5s ease-in-out 5s, filter 2s ease-in-out;
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 img.ready2.start {
  opacity: 1;
  transform: scale(1.15);
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 img.ready2.out {
	filter: brightness(5);
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 img.ready3,
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 img.ready4,
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 img.ready5 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 2.5s 0.3s;
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 img.ready3.start,
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 img.ready4.start,
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 img.ready5.start {
  opacity: 1;
}
@media all and (min-width: 821px) {
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 h2 {
  transform: translate(-50%,-50%) !important;
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 h2.start {
  transform: translate(-50%,-50%) scale(1.2) !important;
}
section.eyecatch div.eyecatch-wrapper div.eyecatch-slide.design01 img {
  height: 100vh;object-fit: cover;
}
}

/*============================
#about
============================*/
section#about.node {}
section#about.node div.node-wrapper {
	padding-bottom: 60px;
}
section#about.node div.img {
	width: 92%;
	margin: 0 0 0 auto;
}
section#about.node div.img img {
	width: 100%;
	height: auto;
}
@media all and (min-width: 821px) {
section#about.node div.node-wrapper {
	padding-bottom: 60px;
	text-align: center;
	line-height: 2.2;
}
}

/*============================
#brand
============================*/
section.node.brand {
padding-top: 40px;padding-bottom: 0;border-top: 1px solid #FFF;}
section.node.brand div.node-wrapper {padding: 0;}
section.node.brand h3.title {margin-bottom: 40px;padding: 0 30px;}
section.node.brand h3.title img {display: block;}
section.node.brand div.poster {position: relative;}
section.node.brand div.poster p {
position: absolute;left: 30px;bottom: 25px;margin-bottom: 0;color: #FFF;font-size: 2.2rem;line-height: 1.2;text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);}
section.node.brand div.poster div.img {}
section.node.brand div.poster div.img img {display: block;width: 100%;}
section.node.brand div.goods-list {display: flex;flex-wrap: wrap;}
section.node.brand div.goods-list div.goods-list-item {width: 33.3%;}
section.node.brand div.goods-list div.goods-list-item:last-child {}
section.node.brand div.goods-list div.goods-list-item a {position: relative;display: block;width: 100%;height: 33.3vw;background: #FFF;opacity: 0.6;overflow: hidden;}
section.node.brand div.goods-list div.goods-list-item img {
position: absolute;top: 0;left: 0;display: block;width: 100%;height: 100%;object-fit: cover;mix-blend-mode: luminosity;}
section.node.brand div.goods-list div.goods-list-item a.btn-more {display: flex;justify-content: center;align-items: center;width: 100%;height: 33.3vw;padding: 0;color: #FFF;font-weight: normal;opacity: 1;background: no-repeat;text-decoration: underline;}
section.node.brand div.goods-list div.goods-list-item a.btn-more:before {display: none;}
section#bioganic.node.brand {  background: #264026;}
section#bioganic.node.brand h3.title img {width:219px;}
section#kesadore.node.brand {  background: #4d2a08;}
section#kesadore.node.brand h3.title img {width:193px;}
section#ikeru.node.brand {  background: #0d3340;}
section#ikeru.node.brand h3.title img {width:152px;}

@media all and (min-width: 821px) {
div.brand-wrapper {display: flex;}
section.node.brand {flex: 1;padding: 0;border: none;border-left: 1px solid #FFF;}
section.node.brand div.node-wrapper {padding: 0;}
section.node.brand h3.title {display: flex;align-items: center;height: 3em;margin-bottom: 0;padding: 0 60px;}
section.node.brand h3.title img {width: 100% !important;max-width: 240px;height: auto;}
section.node.brand div.poster {}
section.node.brand div.poster p {font-size: 2.0vw;}
section.node.brand div.poster div.img {}
section.node.brand div.poster div.img img {}
section.node.brand div.goods-list {}
section.node.brand div.goods-list div.goods-list-item {
}
section.node.brand div.goods-list div.goods-list-item:last-child {}
section.node.brand div.goods-list div.goods-list-item a,
section.node.brand div.goods-list div.goods-list-item img{height: 11vw;transition: 0.2s;}
section.node.brand div.goods-list div.goods-list-item a:hover {opacity: 1;}
section.node.brand div.goods-list div.goods-list-item a:hover img {mix-blend-mode: normal;transform: scale(1.15);}
section.node.brand div.goods-list div.goods-list-item a.btn-more {height: 11vw;transition: 0.2s;}
section.node.brand div.goods-list div.goods-list-item a.btn-more:hover {/* opacity: 0.6; */background: rgb(255 255 255 / 20%);text-decoration: none;}
section#bioganic.node.brand {border: none;}
section#ikeru.node.brand h3.title img {max-width: 190px;}
}

/*============================
#makers
============================*/
section.node.img-half {
	padding-bottom: 0;
}
section.node.img-half .node-wrapper {
	padding-bottom: 100px;
}
section.node.img-half div.img {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	line-height: 0;
	overflow: hidden;
}
section.node.img-half div.img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
section#makers.node.img-half .node-wrapper {
	position: relative;
	overflow: hidden;
}
section#makers.node .node-wrapper:before {
	content: '';
	position: absolute;
	top: 10%;
	left: -30%;
	width: 160%;
	height: 100%;
	background: url(../img/home/japan.jpg) no-repeat bottom center;
	background-size: auto 90%;
	background-size: contain;
	opacity: 0.5;
	z-index: -1;
}
@media all and (min-width: 821px) {
section.node.img-half {
display: flex;
padding-top: 0;
}
section.node.img-half div.node-wrapper {
	flex: 1;
	padding-top: 150px;
	padding-bottom: 150px;
}
section#makers.node div.node-wrapper:before {
	left: auto;
	right: -35%;
}
section.node.img-half div.img {
	width: 50%;
	aspect-ratio: auto;
}
section#makers.node.img-half {
	flex-direction: row-reverse;
}
section#makers.node .node-wrapper,
section#information.node .node-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 80px;
}
section#makers.node .node-wrapper > div:not(.title),
section#information.node .node-wrapper > div:not(.title) {
	flex: 1;
	margin-top: 40px;
}
}
/*============================
#information
============================*/
section#information.node div.node-wrapper ul.information-list {list-style: none;padding-bottom: 1.5em;}
section#information.node div.node-wrapper ul.information-list li.information-list-item {margin-bottom: 30px;padding-left: 15px;}
section#information.node div.node-wrapper ul.information-list li.information-list-item span.date {position: relative;display: block;color: #999;font-size: 1.3rem;}
section#information.node div.node-wrapper ul.information-list li.information-list-item span.date:before {content: '';position: absolute;top: 50%;left: -15px;width: 7px;margin-top: -2px;border-bottom: 1px solid #666;}
@media all and (min-width: 821px) {
}
.ready {
    transition: 0.8s;
}
.ready:not(.start) {
    transform: translateY(60%);
    opacity: 0;
}