@charset "utf-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
	outline: 0;
}

body {
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	font-family: source-han-serif-japanese, serif;
	font-weight: 400;
	font-style: normal;
	-webkit-overflow-scrolling: touch;
	-moz-overflow-scrolling: touch;
	-ms-overflow-scrolling: touch;
	overflow-scrolling: touch;
	color: #000;
    -webkit-text-size-adjust: 100%;
}

div { box-sizing: border-box; }

img { margin: 0; pointer-events: none; }

figure { margin: 0; }

h1,h2,h3,h4 { margin: 0; }

p { margin: 0; line-height: 2em; }

ol, ul { list-style: none; }

.fade { animation: fadein 3s forwards; }

@keyframes fadein {
	0% { opacity: 0; }
	100% { opacity: 1; }
}



/*------------------------- loading -------------------------*/

#loading-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background: #fff;
    z-index: 9999;
}
.loading-img {
    width: 400px;
	height: 467px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	-webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -o-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    animation: 1.0s logoOpacity cubic-bezier(.59,.18,.66,.93);
    -webkit-animation: 1.0s logoOpacity cubic-bezier(.59,.18,.66,.93);
	animation-direction: normal;
	z-index: 9999;
}

.fade {
	animation-name: fade;
	animation-duration: 1.5s;
	animation-iteration-count: 1;
}

@keyframes fade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}



/*------------------------- slide -------------------------*/

#vegas {
    width: 100%;
    height: 100vh;
	margin: auto;
	position: relative;
}
#vegas .bg {
	background-color: rgba(0,0,0,0.2);
	width: 100%;
	height: 100%;
	position: relative;
}
#vegas .bg__logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	margin: auto;
}
#vegas .bg__caption {
	position: absolute;
	top: 30%;
	right: 20%;
	font-size: 2.5em;
	font-family: ten-mincho, serif;
	font-weight: normal;
	color: #fff;
	line-height: 1.7em;
	letter-spacing: .1em;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

#vegas .kv__sns {
    position: absolute;
	top: 130px;
    right: 60px;
    opacity: 1;
    z-index: 1;
}
#vegas .kv__sns ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
}
#vegas .kv__sns ul li {
	line-height: 0;
}
#vegas .kv__sns ul li:nth-child(1) {
	margin-right: 30px;
}
#vegas .kv__sns ul li:before {
    display: block;
    content: "";
    position: absolute;
	top: 0;
	left: 40px;
    width: 1px;
	height: 25px;
	background: #fff;
    opacity: 0.6;
}
#vegas .kv__sns ul li a { display: block; transition: .3s; }
#vegas .kv__sns ul li a:hover { opacity: .6; }

/* scroll */

.scroll {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	top: -150px;
	padding-bottom: 136px;
	z-index: 1;
	-webkit-transition: 0.6s ease all 1.5s;
	transition: 0.6s ease all 1.5s;
}
.scroll p {
	font-size: .9rem;
	color: #fff;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	line-height: 80%;
	letter-spacing: .2em;
}
.scroll span {
	overflow: hidden;
	display: block;
	position: absolute;
	width: 1px;
	height: 126px;
	left: 50%;
	bottom: 0;
}
.scroll span:before, .scroll span:after {
	display: block;
	content: "";
	position: absolute;
	bottom: 0;
	height: 100%;
}
.scroll span:before {
	z-index: 1;
	border-left: 1px solid rgba(255,255,255,0.4);
	mix-blend-mode: exclusion;
}
.scroll span:after {
	z-index: 2;
	border-left: 1px solid #fff;
	-webkit-animation: scrollBar 1.5s infinite linear;
	animation: scrollBar 1.5s infinite linear;
	mix-blend-mode: exclusion;
}



/*------------------------- header -------------------------*/

#header {
	position: absolute;
	width: 100%;
	height: 80px;
	padding: 15px 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	box-sizing: border-box;
	z-index: 5;
}

#header .logo { line-height: 0; }
#header .logo a { display: block; }

#header .header__nav { margin-right: 80px; }
#header .header__nav ul {
	list-style: none;
	padding: 0;
	display: flex;
	justify-content: space-between;
}
#header .header__nav ul li {
	margin: 0 20px;
	letter-spacing: .05em;
}
#header .header__nav ul li a {
	position: relative;
	color: #222;
	text-decoration: none;
	transition: .3s;
}
#header .header__nav ul li a:hover {
	color: #89b839;
}
#header .header__nav ul li a::after {
	position: absolute;
	bottom: -10px;
	left: 0;
	content: '';
	width: 100%;
	height: 3px;
	background: #89b839;
	transform: scale(0,1);
	transform-origin: left top;
	transition: transform .4s;
}
#header .header__nav ul li a:hover::after {
	transform: scale(1,1);
}

.l-header__onlineshop {
	position: fixed;
    z-index: 1000;
    left: 60px;
    bottom: 60px;
	transform: translate3d(0, 0, 0);
	z-index: 5;
}
.l-header__onlineshop a {
    display: flex;
	align-items: center;
    color: #222;
    padding: 15px 18px;
    text-decoration: none;
	letter-spacing: .2em;
	background: #fff;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-feature-settings: "vrt2" on;
    font-feature-settings: "vpal";
    position: relative;
	transition: .4s;
}
.l-header__onlineshop a:hover {
	color: #fff;
	opacity: 1;
	-ms-filter: "alpha(opacity=100)";
	filter: alpha(opacity=100);
	background: #89b839;
	z-index: 10;
}
.l-header__onlineshop a span {
	font-size: .8em;
	color: #89b839;
	line-height: 2.2em;
	margin-bottom: 25px;
	margin-top: 5px;
	transition: .4s;
}
.l-header__onlineshop a:hover span {
	color: #fff;
}

.l-header__onlineshop a.change-color {
	color: #fff;
	background: #89b839;
}
.l-header__onlineshop a.change-color span {
	color: #fff;
}
.l-header__onlineshop a.change-color:hover {
	color: #222;
	background: #fff;
}
.l-header__onlineshop a.change-color:hover span {
	color: #222;
}



/*------------------------- burger menu -------------------------*/

.button__container {
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	height: 80px;
	width: 80px;
	background: #89b839;
	cursor: pointer;
	-webkit-transition: opacity .25s ease;
	transition: opacity .25s ease;
	z-index: 9999;
}
.button__container:hover {
	opacity: .7;
}
.button__container.active .top {
	-webkit-transform: translateY(10px) translateX(0) rotate(45deg);
	transform: translateY(10px) translateX(0) rotate(45deg);
	background: #fff;
}
.button__container.active .middle {
	opacity: 0;
	background: #fff;
}
.button__container.active .bottom {
	width: 50%;
	-webkit-transform: translateY(-10px) translateX(0) rotate(-45deg);
	transform: translateY(-10px) translateX(0) rotate(-45deg);
	background: #fff;
}

.button__container .menu-txt {
	position: absolute;
	bottom: -40px;
	font-size: .9em;
	color: #fff;
	letter-spacing: .1em;
}
.button__container .menu-txt.change-color { color: #111; }

.button__container span {
	background: #fff;
	border: none;
	height: 1px;
	width: 50%;
	position: absolute;
	top: 30px;
	left: 0;
	right: 0;
	margin-left: 25%;
	-webkit-transition: all .35s ease;
	transition: all .35s ease;
	cursor: pointer;
}
.button__container span:nth-of-type(2) { top: 40px; }
.button__container span:nth-of-type(3) { top: 50px; width: 25%; }

.button__container:hover span:nth-of-type(1) { top: 33px; }
.button__container:hover span:nth-of-type(3) { top: 47px; }

.button__container:hover.active .top { top: 30px; }
.button__container:hover.active .bottom { top: 50px; }

.button__container span.change-color { background-color: #111; }

.overlay {
	display: block;
	position: fixed;
	background: rgba(255,255,255,0.9);
	top: 0;
	left: 0;
	width: 100%;
	height: 0%;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity .35s, visibility .35s, height .35s;
	transition: opacity .35s, visibility .35s, height .35s;
	overflow: hidden;
}
.overlay.open {
	opacity: 1;
	visibility: visible;
	height: 100%;
	z-index: 1500;
}
.overlay.open li {
	-webkit-animation: fadeInRight .5s ease forwards;
	-webkit-animation: fadeInRight .5s ease forwards;
	animation: fadeInRight .5s ease forwards;
	-webkit-animation-delay: .35s;
	animation-delay: .35s;
}
.overlay nav {
	position: relative;
	top: 47%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 70%;
	margin: 0 auto;
}
.overlay ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: inline-block;
	position: relative;
	height: 100%;
}
.overlay ul li {
	display: block;
	height: 15%;
	height: calc(100% / 6);
	min-height: 30px;
	position: relative;
	opacity: 0;
}
.overlay ul li::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -20px;
	width: 30px;
	height: 1px;
	background: #222;
}
.overlay ul li a {
	display: block;
	position: relative;
	padding: .7em 0 .7em .8em;
	font-size: 1.5em;
	color: #222;
	text-decoration: none;
	line-height: 2em;
	letter-spacing: .05em;
	overflow: hidden;
}
.overlay ul li a span {
	font-size: .6em;
	color: #222;
	margin-left: 20px;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
	width: 100%;
}

@-webkit-keyframes fadeInRight {
	0% { opacity: 0; left: 20%; }
	100% { opacity: 1; left: 0; }
}
@keyframes fadeInRight {
	0% { opacity: 0; left: 20%; }
	100% { opacity: 1; left: 0;	}
}

.overlay ul li:nth-child(1) { animation-delay: .1s; }
.overlay ul li:nth-child(2) { animation-delay: .2s; }
.overlay ul li:nth-child(3) { animation-delay: .3s; }
.overlay ul li:nth-child(4) { animation-delay: .4s; }
.overlay ul li:nth-child(5) { animation-delay: .5s; }
.overlay ul li:nth-child(6) { animation-delay: .6s; }

.overlay ul li:nth-child(1)::after { content: "01"; position: absolute; top: 30px; left: -50px; color: #222; }
.overlay ul li:nth-child(2)::after { content: "02"; position: absolute; top: 30px; left: -50px; color: #222; }
.overlay ul li:nth-child(3)::after { content: "03"; position: absolute; top: 30px; left: -50px; color: #222; }
.overlay ul li:nth-child(4)::after { content: "04"; position: absolute; top: 30px; left: -50px; color: #222; }
.overlay ul li:nth-child(5)::after { content: "05"; position: absolute; top: 30px; left: -50px; color: #222; }
.overlay ul li:nth-child(6)::after { content: "06"; position: absolute; top: 30px; left: -50px; color: #222; }

.overlay .onlineshop { width: 370px; margin-top: 30px; margin-left: -50px; }
.overlay .onlineshop a {
	display: block;
    color: #fff;
    padding: 18px;
	text-align: center;
    text-decoration: none;
    letter-spacing: .1em;
	background: #89b839;
	transition: .3s;
}
.overlay .onlineshop a:hover { color: #222; background: #fff; }
.overlay .onlineshop span { margin-right: 20px; }

.overlay .address {
	position: absolute;
    top: 50%;
    right: 15%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	font-family: ten-mincho, serif;
	color: #222;
	text-align: right;
	letter-spacing: .1em;
}
.overlay .address h2 { letter-spacing: .2em; margin-bottom: 10px; }
.overlay .address .sns {
	display: flex;
	justify-content: flex-end;
	margin-top: 20px;
}
.overlay .address .sns div:nth-child(1) { position: relative; margin-right: 30px; }
.overlay .address .sns div:nth-child(1)::after {
	display: block;
    content: "";
    position: absolute;
	top: 0;
	left: 40px;
    width: 1px;
	height: 25px;
	background: #222;
    opacity: 0.6;
}



/*------------------------- footer -------------------------*/

#footer { background: #24313c; }
#footer .inner {
	width: 90%;
	max-width: 1300px;
	margin: 0 auto;
	padding: 80px 0;
	text-align: center;
}
#footer .inner .footer-logo { margin-bottom: 20px; }
#footer .inner .add { font-size: .9em; color: #fff; letter-spacing: .05em; }
#footer .inner .footer-menu {
	list-style: none;
	padding: 0;
	margin: 40px auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	font-size: .9em;
}
#footer .inner .footer-menu .item { line-height: 1em; border-right: 1px #fff solid; }
#footer .inner .footer-menu .item:last-child { border-right: none; }
#footer .inner .footer-menu .item a {
	padding: 0 20px;
	color: #fff;
	text-decoration: none;
	box-sizing: border-box;
}
#footer .copyright { font-size: .8em; color: #fff; letter-spacing: .05em; }



/*------------------------ top page ------------------------*/

.top-contents { position: relative; }
.top-contents .inner {
	width: 90%;
	max-width: 1300px;
	margin: 0 auto;
	padding: 150px 0;
}

.top-contents .contents__box { position: relative; margin-bottom: 100px; }
.top-contents .contents__box:nth-child(2) { margin-bottom: 150px; }
.top-contents .contents__box:nth-child(3) { margin-bottom: 150px; }
.top-contents .contents__box:nth-child(4) { margin-bottom: 0; }

.top-contents .contents__box figure {
	position: absolute;
	top: 0;
	right: -5%;
	z-index: -1;
}

.top-contents .contents__box .title-box { padding-top: 50px; }
.top-contents .contents__box .title-box h3 { margin: 40px 0; font-size: 2.5rem; font-family: ten-mincho, serif; font-weight: normal; letter-spacing: .05em; }
.top-contents .contents__box .title-box h4 { font-size: 1.4em; font-weight: normal; letter-spacing: .05em; }
.top-contents .contents__box .title-box span { position: relative; padding-left: 65px; color: #89b839; letter-spacing: .2em; }
.top-contents .contents__box .title-box span::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 0;
	width: 50px;
	height: 1px;
	background: #89b839;
}
.top-contents .contents__box .title-box p { text-align: justify; }

.top-contents .contents__box .text-box {
	width: 60%;
	position: relative;
    padding: 4em 4em 4em 0;
    background: #fff;
	z-index: 1;
}
.top-contents .contents__box .text-box p { text-align: justify; }

.top-contents .contents__box .more-button { position: absolute; bottom: 65px; right: 100px; }
.top-contents .contents__box .more-button::after {
	content: "";
	position: absolute;
	bottom: -10px;
	left: 0;
	width: 170px;
	height: 2px;
	background: #222;
}
.top-contents .contents__box .more-button a { position: relative; color: #222; text-decoration: none; letter-spacing: .05em; }
.top-contents .contents__box .more-button a:before {
	content: "";
	position: absolute;
	right: -60px;
	top: 52%;
	width: 25px;
    height: 1px;
    background: #333;
    z-index: 1;
    transition: .5s;
}
.top-contents .contents__box .more-button a::after {
    content: "";
    position: absolute;
    right: -60px;
    top: 52%;
    width: 8px;
    height: 1px;
    background: #333;
    z-index: 1;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    transition: .5s;
}
.top-contents .contents__box .more-button a:hover::before { right: -50px; }
.top-contents .contents__box .more-button a:hover::after { right: -50px; }

.top-contents .contents__box .image { width: 45%; }

/* ↓ new item ↓ */

.top-contents .contents__new-item { position: relative; margin-bottom: 170px; }
.top-contents .contents__new-item .image { width: 40%; }
.top-contents .contents__new-item .text-box { width: 55%; }
.top-contents .contents__new-item .text-box .en { position: relative; padding-left: 65px; color: #d9534f; letter-spacing: .2em; }
.top-contents .contents__new-item .text-box .en::before {
	content: "";
    position: absolute;
    top: 12px;
    left: 0;
    width: 50px;
    height: 1px;
    background: #d9534f;
}
.top-contents .contents__new-item .text-box h3 {
	font-size: 2rem;
	font-family: ten-mincho, serif;
	font-weight: normal;
	letter-spacing: .05em;
	margin: 30px 0;
}
.top-contents .contents__new-item .text-box h3 font { color: #d9534f; }
.top-contents .contents__new-item .text-box h4 { margin-bottom: 10px; display: flex; align-items: center; font-size: 2rem; letter-spacing: .05em; }
.top-contents .contents__new-item .text-box h4 span {
	display: inline-block;
	margin-top: 5px;
	margin-right: 20px;
	padding: 2px 10px;
	font-size: .5em;
	font-weight: normal;
	color: #fff;
	letter-spacing: .05em;
	background: #d9534f;
}
.top-contents .contents__new-item .text-box h4 strong { position: relative; padding-right: 20px; }
.top-contents .contents__new-item .text-box h4 strong small { position: absolute; bottom: 0; font-size: 1.1em; line-height: 0.5em; }

.top-contents .contents__new-item .shop-button { position: absolute; bottom: -95px; right: 100px; }
.top-contents .contents__new-item .shop-button::after {
	content: "";
	position: absolute;
	bottom: -10px;
	left: 0;
	width: 225px;
	height: 2px;
	background: #d9534f;
}
.top-contents .contents__new-item .shop-button a { position: relative; color: #d9534f; text-decoration: none; letter-spacing: .05em; }
.top-contents .contents__new-item .shop-button a:before {
	content: "";
	position: absolute;
	right: -54px;
	top: 52%;
	width: 25px;
    height: 1px;
    background: #d9534f;
    z-index: 1;
    transition: .5s;
}
.top-contents .contents__new-item .shop-button a::after {
    content: "";
    position: absolute;
    right: -54px;
    top: 52%;
    width: 8px;
    height: 1px;
    background: #d9534f;
    z-index: 1;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    transition: .5s;
}
.top-contents .contents__new-item .shop-button a:hover::before { right: -46px; }
.top-contents .contents__new-item .shop-button a:hover::after { right: -46px; }

/*20221013 追加css*/
.top-contents .contents__new-item .youtube-button{ right: 420px; }

.top-contents .contents__new-item .youtube-button a:before{ right: -96px; }
.top-contents .contents__new-item .youtube-button a::after{ right: -96px; }

.top-contents .contents__new-item .youtube-button a:hover::before { right: -88px; }
.top-contents .contents__new-item .youtube-button a:hover::after { right: -88px; }

.top-contents .contents__new-item .text-box .txt{margin-top: 10px;}
.top-contents .contents__new-item .mark{padding-top: 5px;}

.top-contents .contents__new-item .pdf-button{ right: 154px; bottom:-25px;}

.top-contents .contents__new-item .pdf-button a:before{ right: -106px; }
.top-contents .contents__new-item .pdf-button a::after{ right: -106px; }

.top-contents .contents__new-item .pdf-button a:hover::before { right: -98px; }
.top-contents .contents__new-item .pdf-button a:hover::after { right: -98px; }

/* ↑ new item ↑ */

.contents__onlineshop {
	position: relative;
	margin-bottom: 50px;
	background: url("../img/common/top_img04.jpg") no-repeat;
	background-size: cover;
}
.contents__onlineshop .inner {
	width: 90%;
	max-width: 1300px;
	margin: 0 auto;
	padding: 50px 0;
	text-align: center;
}
.contents__onlineshop span { display: block; margin-top: 10px; color: #fff; letter-spacing: .2em; }
.contents__onlineshop h3 {
	margin: 10px 0;
	font-size: 2rem;
	font-family: ten-mincho, serif;
	font-weight: normal;
	color: #fff;
	letter-spacing: .05em;
}
.contents__onlineshop .more-button { position: relative; width: 120px; margin: 20px auto 10px; text-align: left; }
.contents__onlineshop .more-button::after {
	content: "";
	position: absolute;
	bottom: -10px;
	left: 0;
	width: 120px;
	height: 2px;
	background: #fff;
}
.contents__onlineshop .more-button a { display: block; position: relative; color: #fff; text-decoration: none; letter-spacing: .1em; }
.contents__onlineshop .more-button a:before {
	content: "";
	position: absolute;
	right: 0;
	top: 52%;
	width: 25px;
    height: 1px;
    background: #fff;
    z-index: 1;
    transition: .5s;
}
.contents__onlineshop .more-button a::after {
    content: "";
    position: absolute;
    right: 0;
    top: 52%;
    width: 8px;
    height: 1px;
    background: #fff;
    z-index: 1;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    transition: .5s;
}
.contents__onlineshop .more-button a:hover::before { right: 10px; }
.contents__onlineshop .more-button a:hover::after { right: 10px; }

.flex { display: flex; justify-content: space-between; flex-wrap: wrap; }
.flex-width { width: 45%; }



/*------------------------- common -------------------------*/

.addition-bg a { color: #fff; background: #89b839; }
.addition-bg a span { color: #fff; }
.addition-bg a:hover { color: #222!important; background: #fff!important; }
.addition-bg a:hover span { color: #222; }

.page__head { position: relative; width: 100%; height: 650px; margin-bottom: 150px; }
.page__head::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40px;
	background: url("../img/common/pagehead_under_line.png") no-repeat;
	background-size: cover;
}
.page__head .inner { width: 90%; max-width: 1300px; margin: 0 auto; padding-top: 180px; }
.page__head .inner .page-title { display: flex; justify-content: center; }
.page__head .inner .page-title h3 {
	position: relative;
	padding: 0 30px;
	font-size: 3.5rem;
	font-family: ten-mincho, serif;
	font-weight: normal;
	color: #fff;
	letter-spacing: .05em;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.page__head .inner .page-title h3 span {
	display: block;
	font-size: .4em;
	color: #fff;
	letter-spacing: .2em;
	margin-top: 10px;
	margin-right: 20px;
}
.page__head .inner .page-title .spacing { letter-spacing: .2em; }

.page__head-mv01 { background: url("../img/commitment/pagehead_mv.png") no-repeat; background-size: cover; background-position: center; }
.page__head-mv02 { background: url("../img/product/pagehead_mv.png") no-repeat; background-size: cover; background-position: center; }
.page__head-mv03 { background: url("../img/company/pagehead_mv.png") no-repeat; background-size: cover; background-position: center; }
.page__head-mv04 { background: url("../img/contact/pagehead_mv.png") no-repeat; background-size: cover; background-position: center; }
.page__head-mv05 { background: url("../img/link/pagehead_mv.png") no-repeat; background-size: cover; background-position: center; }

.contents__contact { position: relative; }
.contents__contact .inner {
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 100px 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.contents__contact .title-box {}
.contents__contact .title-box .en { display: block; position: relative; color: #89b839; letter-spacing: .2em; margin-bottom: 15px; }
.contents__contact .title-box h3 { font-weight: normal; letter-spacing: .05em; }
.contents__contact .title-box h3 span { margin-left: 10px; font-size: 1.8em; font-weight: bold; }
.contents__contact .title-box h3 span small { font-size: .6em; }
.contents__contact .title-box p:nth-child(4) { margin-left: -6px; }

.contents__contact .title-box .button { display: inline-block; margin-top: 30px; }
.contents__contact .title-box .button a {
	display: block;
	position: relative;
	padding: 1em 2em 1em 4em;
	color: #89b839;
	text-decoration: none;
	border: 2px #89b839 solid;
	transition: .4s;
}
.contents__contact .title-box .button a::before {
	content: "";
	position: absolute;
	top: 18px;
	left: 25px;
	width: 25px;
	height: 18px;
	background: url("../img/common/mail_icon01.png") no-repeat;
	transition: .4s;
}
.contents__contact .title-box .button a:hover {
	color: #fff;
	background: #89b839;
}
.contents__contact .title-box .button a:hover::before {
	background: url("../img/common/mail_icon02.png") no-repeat;
}

.contents__contact .text-box { width: 45%; text-align: justify; }

.contents__sns { position: relative; }
.contents__sns .inner {
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 0 50px;
	display: flex;
	justify-content: space-between;
}
.contents__sns .sns-box {
	display: flex;
	justify-content: space-between;
	border-left: 1px #ccc solid;
	border-right: 1px #ccc solid;
	padding: 0 15px;
	margin: 0 auto;
}
.contents__sns .sns-box .sns-icon { line-height: 0; margin: 0 15px; }
.contents__sns .sns-box .sns-icon a { display: block; }



/*------------------------ commitment -----------------------*/

#commitment { margin-bottom: 200px; }
#commitment .inner { width: 100%; max-width: 100%; margin: 0 auto; }

#commitment .point01 { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 150px; }
#commitment .point01 figure { width: 60%; }
#commitment .point01 .point__text-box { position: relative; width: 25%; margin-left: 8%; display: flex; flex-wrap: wrap; justify-content: center; }
#commitment .point01 .point__text-box .en {
	position: absolute;
	top: .5%;
	left: 25%;
	font-size: .8em;
	letter-spacing: .2em;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
#commitment .point01 .point__text-box h3 {
	position: relative;
	padding-bottom: 150px;
	font-size: 1.7em;
	font-family: ten-mincho, serif;
	font-weight: normal;
	letter-spacing: .05em;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
#commitment .point01 .point__text-box h3::before {
	content: "";
	position: absolute;
	bottom: 30px;
	left: 40px;
	width: 1px;
	height: 80px;
	background: #ccc;
}
#commitment .point01 .point__text-box h3 span {
	writing-mode: horizontal-tb;
	-webkit-writing-mode: horizontal-tb;
	-ms-writing-mode: horizontal-tb;
	line-height: 1em;
	padding-left: 5px;
	padding-bottom: 5px;
}

#commitment .point02 { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 100px; }
#commitment .point02 figure { width: 60%; }
#commitment .point02 .point__text-box { position: relative; width: 25%; margin-right: 8%; display: flex; flex-wrap: wrap; justify-content: center; }
#commitment .point02 .point__text-box .en {
	position: absolute;
	top: .5%;
	left: 25%;
	font-size: .8em;
	letter-spacing: .2em;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
#commitment .point02 .point__text-box h3 {
	position: relative;
	padding-bottom: 150px;
	font-size: 1.7em;
	font-family: ten-mincho, serif;
	font-weight: normal;
	letter-spacing: .05em;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
#commitment .point02 .point__text-box h3::before {
	content: "";
	position: absolute;
	bottom: 30px;
	left: 50px;
	width: 1px;
	height: 80px;
	background: #ccc;
}
#commitment .point02 .point__text-box h3 span {
	writing-mode: horizontal-tb;
	-webkit-writing-mode: horizontal-tb;
	-ms-writing-mode: horizontal-tb;
	line-height: 1em;
	padding-left: 3px;
	padding-bottom: 3px;
}



/*------------------------ product -----------------------*/

#product { margin-bottom: 200px; }
#product .inner { width: 90%; max-width: 1000px; margin: 0 auto; }

#product .item { display: flex; justify-content: space-between; flex-wrap: wrap; }
#product .item .item__image01 { position: relative; width: 55%; }
#product .item .item__image01::before {
	content: "";
	position: absolute;
	top: 150px;
	left: -50px;
	width: 360px;
	height: 360px;
	background: url("../img/product/item_back.jpg") no-repeat;
	z-index: -1;
}
#product .item .item__text01 {
	width: 40%;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-orientation: upright;
	display: flex;
	align-items: flex-start;
}
#product .item .item__text01 .text-inner { margin-top: 0; }
#product .item .item__text01 .text-inner span { display: block; margin-left: 30px; color: #89b839; }
#product .item .item__text01 .text-inner h3 { font-size: 2.5em; font-family: ten-mincho, serif; font-weight: normal; margin-left: 50px; letter-spacing: .1em; }
#product .item .item__text01 .text-inner p { font-size: 1.2em; letter-spacing: .1em; margin-top: 50px; margin-left: 50px; }

#product .item { display: flex; justify-content: space-between; margin-bottom: 100px; }
#product .item .item__image02 { position: relative; width: 35%; margin-right: 10%; }
#product .item .item__image02::before {
	content: "";
	position: absolute;
	top: -50px;
	right: -150px;
	width: 360px;
	height: 360px;
	background: url("../img/product/item_back.jpg") no-repeat;
	z-index: -1;
}
#product .item .item__text02 {
	width: 40%;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-orientation: upright;
	display: flex;
	align-items: flex-end;
}
#product .item .item__text02 .text-inner { margin-top: 100px; }
#product .item .item__text02 .text-inner span { display: block; margin-left: 30px; color: #89b839; }
#product .item .item__text02 .text-inner h3 { font-size: 2.5em; font-family: ten-mincho, serif; font-weight: normal; margin-left: 50px; letter-spacing: .1em; }
#product .item .item__text02 .text-inner p { font-size: 1.2em; letter-spacing: .1em; margin-top: 50px; margin-left: 50px; }

#product .item { display: flex; justify-content: space-between; margin-bottom: 100px; }
#product .item .item__image03 { position: relative; width: 35%; margin-left: 10%; }
#product .item .item__image03::before {
	content: "";
	position: absolute;
	top: -50px;
	left: -150px;
	width: 360px;
	height: 360px;
	background: url("../img/product/item_back.jpg") no-repeat;
	z-index: -1;
}
#product .item .item__text03 {
	width: 40%;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-orientation: upright;
	display: flex;
	align-items: flex-start;
}
#product .item .item__text03 .text-inner { margin-top: 100px; }
#product .item .item__text03 .text-inner span { display: block; margin-left: 30px; color: #89b839; }
#product .item .item__text03 .text-inner h3 { font-size: 2.5em; font-family: ten-mincho, serif; font-weight: normal; margin-left: 50px; letter-spacing: .1em; }
#product .item .item__text03 .text-inner p { font-size: 1.2em; letter-spacing: .1em; margin-top: 50px; margin-left: 50px; }

#product .button { position: relative; margin-top: 50px; }
#product .button a { position: relative; padding-bottom: 30px; color: #222; letter-spacing: .1em; text-decoration: none; }
#product .button a::before {
	content: "";
	position: absolute;
	bottom: 5px;
	left: 5px;
    width: 8px;
    height: 8px;
    border-top: 1px solid #222;
    border-right: 1px solid #222;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#product .button a::after {
	position: absolute;
	top: 2px;
	right: -10px;
	content: '';
	width: 2px;
	height: 97%;
	background: #666;
	transform: scale(1,1);
	transform-origin: left top;
	transition: transform .4s;
}
#product .button a:hover::after {
	transform: scale(1,0);
}

.addition-styele { align-items: center; margin-bottom: 150px!important; }



/*------------------------- company -------------------------*/

#company { margin-bottom: 150px; }
#company .inner { width: 90%; max-width: 1200px; margin: 0 auto; }

#company .inner .greeting-box {
	display: flex;
	justify-content: space-between;
	margin-bottom: 150px;
}
#company .inner .greeting-box figure { width: 40%; }

#company .inner .greeting {
	width: 50%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
#company .inner .greeting h3 {
	position: relative;
	font-size: 2.5em;
	font-family: ten-mincho, serif;
	font-weight: normal;
	letter-spacing: .05em;
	margin-bottom: 120px;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
#company .inner .greeting h3::before {
	content: "";
	position: absolute;
	top: 17%;
	left: -130px;
	width: 300px;
	height: 300px;
	background: url("../img/company/greeting_back.jpg") no-repeat;
	z-index: -1;
	animation: fadein 5s forwards;
}

@keyframes fadein {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

#company .inner .greeting .en {
	display: block;
	position: relative;
	margin-bottom: 30px;
	padding-left: 60px;
	color: #89b839;
	letter-spacing: .2em;
}

#company .inner .greeting .en::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 0;
	width: 50px;
	height: 1px;
	background: #89b839;
}

#company .inner .company-box { position: relative; width: 90%; max-width: 1000px; margin: 0 auto; }
#company .inner .company-box::before {
	content: "";
	position: absolute;
	top: 27%;
	left: 0;
	width: 1px;
	height: 470px;
	background: rgba(137,184,57,.5);
}
#company .inner .company-box figure { margin-bottom: 80px; }
#company .inner .company-box h3 { padding-left: 100px; font-size: 2em; font-weight: normal; letter-spacing: .1em; margin-bottom: 50px; }
#company .inner .company-box dl { padding-left: 100px; display: flex; flex-wrap: wrap; margin-bottom: 100px; }
#company .inner .company-box dl dt { width: 20%; padding: 20px 0; border-bottom: 1px #eee solid; }
#company .inner .company-box dl dd { width: 80%; padding: 20px 0; border-bottom: 1px #eee solid; }



/*------------------------- contact -------------------------*/

#contact { margin-bottom: 150px; }
#contact .inner { width: 90%; max-width: 1000px; margin: 0 auto; }

#contact .inner h3 { font-size: 2em; font-weight: normal; letter-spacing: .05em; text-align: center; margin-bottom: 50px; }
#contact .inner .text-box { margin-bottom: 50px; }
#contact .inner .text-box p { margin-bottom: 30px; }
#contact .inner .text-box p span { color: #d9534f; }

#contact .form_text01 { margin-bottom: 10px; font-size: 1.2em; font-weight: bold; text-align: center; }
#contact .form_text02 { margin-top: 20px; font-weight: bold; }



/*--------------------------- link --------------------------*/

#link { margin-bottom: 150px; }
#link .inner { width: 90%; max-width: 1000px; margin: 0 auto; }

#link .inner h3 {
    font-size: 2em;
    font-weight: normal;
    letter-spacing: .05em;
    text-align: center;
    margin-bottom: 50px;
}

#link .inner ul { line-height: 2em; }
#link .inner ul li { padding: 30px 0; letter-spacing: .05em; border-bottom: 1px rgba(0,0,0,.1) solid; }
#link .inner ul li strong { display: block; position: relative; padding-left: 12px; }
#link .inner ul li strong::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 0;
	width: 2px;
	height: 15px;
	background: #89b839;
}
#link .inner ul li span { display: inline-block; margin-right: 20px; }
#link .inner ul li span:last-child { display: block; margin: 0; }



/*----------------------- scroll event ----------------------*/

.fadein {
	-webkit-transition: all 2.5s ease;
  	-o-transition: all 2.5s ease;
  	transition: all 2.5s ease;
  	opacity: 0;
}
.fadein.active {
  	opacity: 1;
}

.fadein-left {
  	-webkit-transition: all 1.2s ease;
  	-o-transition: all 1.2s ease;
  	transition: all 1.2s ease;
  	-webkit-transform: translateX(-60px);
  	-moz-transform: translateX(-60px);
  	-ms-transform: translateX(-60px);
  	transform: translateX(-60px);
  	opacity: 0;
}
.fadein-left.active {
  	-webkit-transform: translateX(0);
  	-moz-transform: translateX(0);
  	-ms-transform: translateX(0);
  	transform: translateX(0);
  	opacity: 1;
}

.fadein-right {
  	-webkit-transition: all 1.2s ease;
  	-o-transition: all 1.2s ease;
  	transition: all 1.2s ease;
  	-webkit-transform: translateX(60px);
  	-moz-transform: translateX(60px);
  	-ms-transform: translateX(60px);
  	transform: translateX(60px);
  	opacity: 0;
}
.fadein-right.active {
  	-webkit-transform: translateX(0);
  	-moz-transform: translateX(0);
  	-ms-transform: translateX(0);
  	transform: translateX(0);
  	opacity: 1;
}

.fadein-up {
  	-webkit-transition: all 2s ease;
  	-o-transition: all 2s ease;
  	transition: all 2s ease;
  	-webkit-transform: translateY(30%);
  	-moz-transform: translateY(30%);
  	-ms-transform: translateY(30%);
  	transform: translateY(30%);
	opacity: 0;
}
.fadein-up.active {
  	-webkit-transform: translateY(0%);
  	-moz-transform: translateY(0%);
  	-ms-transform: translateY(0%);
  	transform: translateY(0%);
	opacity: 1;
}

.fadein-down {
  	-webkit-transition: all 1.2s ease;
  	-o-transition: all 1.2s ease;
  	transition: all 1.2s ease;
  	-webkit-transform: translateY(-100%);
  	-moz-transform: translateY(-100%);
  	-ms-transform: translateY(-100%);
  	transform: translateY(-100%);
	opacity: 0;
}
.fadein-down.active {
  	-webkit-transform: translateY(0%);
  	-moz-transform: translateY(0%);
  	-ms-transform: translateY(0%);
  	transform: translateY(0%);
	opacity: 1;
}


.top-news {}
.top-news h2 {
	padding-bottom: 0.5em;
	margin-bottom: 1em;
	font-size: 2.5rem;
	font-family: ten-mincho, serif;
	font-weight: normal;
	line-height: 1em;
	letter-spacing: .05em;
	border-bottom: 1px #222 solid;
}
.top-news ul li {
	margin-bottom: 1.5em;
	padding-bottom: 1.5em;
	border-bottom: 1px #ddd solid;
}
.top-news ul li a { text-decoration: none; }
.top-news ul li span {
	margin: 0 20px;
	padding: 0.2em 1em;
	font-size: 0.9em;
	color: #fff;
	background: #89b839;
}

.news {}
.news .title {
	margin-bottom: 30px;
	font-size: 1.7em;
	font-family: ten-mincho, serif;
	font-weight: normal;
}

/*------------------------ page top ------------------------*/

#page-top {
	position: fixed;
	bottom: 0;
	right: 0;
	font-size: 12px;
	line-height: 15px;
	letter-spacing: .2em;
	text-align: center;
	z-index: 80;
}
#page-top a {
	display: block;
	width: 120px;
	padding: 12px 0px;
	color: #fff;
	text-decoration: none;
	background-color: #89b839;
	transition: .3s;
}
#page-top a:hover { color: #222; background-color: #fff; }


/*br sp*/
.br-sp{ display: none; }

/* 20231207 */
.contents__new-item .bnn { display: block; margin-top: 10px; line-height: 0; border: 1px #ddd solid; }
.new-item__btn-box { position: relative; margin-top: 50px; }