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

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600&display=swap');

/* ------------------------------------------------ */
.pc {}.sp {display: none;}.none {display: none;}
@media screen and (max-width: 767px) {
.pc {display: none;}.sp {display: block;}
}
.drawer .none {display: block!important;}
/* ------------------------------------------------ */
:root {
	--text: #4d4d4d;
	--white: #fff;
	--black: #000;
	--gray1: #333;
	--gray2: #666;
	--gray3: #999;
	--gray4: #ccc;
	--gray5: #e6e6e6;
	--gray6: #f2f2f2;
	--color1: #07a5b2;
	--color2: #ef6356;
	--color3: #4fd3d3;
	--color4: #f2a591;
	--color5: #edeae0;
	--color6: #eaeae0;
	--red: #c00;
	--font1: 'Noto Sans JP', sans-serif;
	--font2: 'Noto Serif JP', serif;
	--font3: 'Roboto Condensed', sans-serif;

	--foam1: #89b5e4;
	--foam2: #bf8ebd;
	--foam3: #7a4f72;
	--foam4: #4482b5;
	--foam5: #925895;
	--foam6: #5b4888;
	--foam1bg: #faeeef;
	--foam2bg: #dce9f7;
	--foam3bg: #ecdced;
}
/* ------------------------------------------------ */
.anim {
}
/* ----------------- */
.fadea {
	opacity:0;
}
.fadea.animated {
	animation-fill-mode:forwards;
	animation-duration: 1s;
	opacity:0;
	animation-name:fades;
	animation-delay:0s;
}
.fade1.animated {animation-delay:0s;}
.fade2.animated {animation-delay:0.5s;}
.fade3.animated {animation-delay:1s;}
@keyframes fades {
/*
	from {opacity: 0;transform: translateY(100px);}
	to {opacity: 1;transform: translateY(0);}
*/
	from {opacity: 0;transform: translateY(100px) scale(0.95, 0.95);}
	to {opacity: 1;transform: translateY(0) scale(1, 1);}
}

/* ----------------- */
.line {
	display: inline-block;
	position: relative;
}
.line::after {
	content: "";
	position: absolute;
	z-index: 0;
	left: 0px;
	bottom: -10px;
	height: 3px;
	background-color: var(--color1);
	animation-fill-mode:forwards;
	animation-duration: 1.2s;
	animation-delay:0.5s;
}
.line.animated.line-left::after {animation-name:line-left;}
.line.animated.line-right::after {animation-name:line-right;}
.line.animated.line-fade::after {animation-name:line-fade;}
@keyframes line-left {
	0% {width: 0%;}
	100% {width: 100%;}
}
/* ----------------- */
.scale.animated {
	animation-name: scalea;
	animation-fill-mode:forwards;
	animation-duration: .5s;
	animation-timing-function: ease-in-out;
	
}
@keyframes scalea {
0% {opacity: 0;transform: scale(0.5, 0.5);}
100% {opacity: 1;transform: scale(1, 1);}
}
/* ----------------- */
.splash.animated img {
	animation-name: splasha;
	animation-fill-mode:forwards;
	animation-duration: .5s;
	animation-timing-function: ease-in-out;
	
}
@keyframes splasha {
0% {opacity: 0;transform: scale(0.1, 0.1);}
100% {opacity: 1;transform: scale(1, 1);}
}
/* ------------------------------------------------ */
.item {
	opacity:0;
}
.shadow {
	opacity:0;
}
.item.animated {
	animation-fill-mode:forwards;
	animation-duration: 1s;
	opacity:0;
	animation-name:items;
	animation-delay:0s;
}
.shadow.animated {
	animation-fill-mode:forwards;
	animation-duration: 1s;
	opacity:0;
	animation-name:shadows;
	animation-delay:0.1s;
}
@keyframes items {
	from {opacity: 0;transform: translateY(200px) scale(0.8, 0.8);}
	to {opacity: 1;transform: translateY(0) scale(1, 1);}
}
@keyframes shadows {
	from {opacity: 0;transform: translateX(80px) translateY(300px) scale(0.5, 0.5);}
	to {opacity: 1;transform: translateY(0) scale(1, 1);}
}

/* ------------------------------------------------ */
@-ms-viewport {width: device-width;}
@viewport {width: device-width;}
*{
margin:0;
padding:0;
}
html,body {
	height: 100%;
	font-size: 62.5%;
	margin: 0px auto;
}
body {
	color: var(--text);
	font-size: 15px;
	font-size: clamp(14px, 1.5vw, 15px);
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	background-color: var(--white);
}
@media screen and (max-width: 767px) {
	body {
		font-size: 15px;
		font-size: 1.5rem;
		-webkit-text-size-adjust: 100%;
	}
}
a {
	text-decoration: none;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
a:link {color: var(--text);}
a:visited {color: var(--text);}
a:active {color: var(--foam1);}
a:hover {color: var(--foam1);}
a img {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
a:active img,
a:hover img {
	opacity: 0.8;
}
a svg rect,
a svg path,
a svg circle,
a svg polygon{
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
h1,h2,h3,h4,h5,h6 {font-size:1em;}
strong,b {font-weight: 700;}
em,i,address {font-style: normal;}
a[href^='tel'] {pointer-events: none;text-decoration: none;}
a[href^='tel'] img {display:inline-block;}
@media screen and (max-width: 767px) {
	a[href^='tel'] {pointer-events: auto;}
	a[href^='tel'] img {display:block;}
}
img {display:block;max-width:100%;border:none;-ms-interpolation-mode: bicubic;backface-visibility: hidden;image-rendering: -webkit-optimize-contrast;}
@media screen and (max-width: 767px) {
	img {max-width:100%;height:auto;}
}
.clear {clear: both;}
.clearfix::after {
	display: block;
	content: "";
	clear: both;
	height: 0px;
	visibility: hidden;
}
ul {list-style-type:none;}
.attention,.error {color: #c00;font-weight: 700;}
.red {color: #f00;}

/* ------------------------------------------------ */
.width {
	width: 1100px;
	margin: 0px auto;
}
.widths {
	width: 800px;
	margin: 0px auto;
}
@media screen and (max-width: 1100px) {
	.width {
		width: auto;
	}
}
@media screen and (max-width: 700px) {
	.widths {
		width: auto;
	}
}
.drawer .width,
.drawer .widths,
.drawer .widthb {
	width: auto;
}
/* ------------------------------------------------ */
#header {
}
.header {
	text-align: center;
}
.header-inner {
	position: relative;
	padding: 10px 10px;

}
.header-logo {
	text-align: center;
}
.header-logo img {
	display: inline-block;
	width: 200px;
}
.header-bloc {
/*
bloc.css
*/
}
/* ------------------------------------------------ */
footer {
	border: none;
}
#footer {
}
.footer {
}
.footer-inner {
}

.copyright {
	font-weight: 400;
	text-align: center;
	padding: 5px;
}
.copyright small {
	font-size: 10px;
}
/* ---------------------------------------------------------------------- */
#slide_swiper {
	position: relative;
	overflow: hidden;
}
#slide-tex {
	position: absolute;
	left: 0px;
	top: 70%;
	-webkit-transform: translateY(-70%);
	-moz-transform: translateY(-70%);
	-ms-transform: translateY(-70%);
	-o-transform: translateY(-70%);
	transform: translateY(-70%);
	z-index: 2;
	pointer-events: none;
	width: 100%;
}
swiper-container {
	position: relative;
	width: 100%;
	height: 100%;
/*
	height: auto;
*/
}
swiper-slide {
	position: relative;
/*
	display: flex;
	justify-content: center;
	align-items: center;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
*/
}
@media screen and (min-width:768px) {
	swiper-slide {
		width: 1200px;
	}
}
swiper-slide a {
	display: block;
}
swiper-slide a:hover {
	color: var(--black);
}
/* ------------------------------------------------ */
.gotop{
	position: fixed;
	bottom: -50px;
	right: 0;
	z-index: 9999;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.gotop.block {
	bottom: 0;
	visibility: visible;
	opacity: 1;
}
.gotop a,
.gotop a::before,
.gotop a::after {
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.gotop a {
	display: block;
	position: relative;
	width: 40px;
	height: 40px;
	background-color: var(--color1);
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	margin-left: auto;
	margin-right: 10px;
	margin-bottom: 10px;
}
.gotop a::before,
.gotop a::after {
	display: inline-block;
	content: "";
	position: absolute;
	left: 50%;
}
.gotop a::before {
	bottom: 10px;
	z-index: 1;
	width: 10px;
	height: 10px;
	border-top: 1px solid;
	border-left: 1px solid;
	border-color: var(--white);
	transform: rotate(45deg);
	margin-left: -5px;
}
.gotop a::after {
	bottom: -10px;
	z-index: 0;
	width: 1px;
	height: 31px;
	background-color: var(--white);
}
.gotop a:hover {
	background-color: var(--color2);
}
.gotop a:hover::before {
	bottom: 20px;
	border-color: #fff;
}
.gotop a:hover::after {
	bottom: 0px;
	background-color: #fff;
}
.gotop a span {
	display: block;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}
/* ------------------------------------------------ */
.panlink {
	width: 1100px;
	margin: 0px auto;
}
.panlink ul {
}
.panlink li {
	display: inline-block;
	font-size: 0.8em;
}
.panlink li::after {
	content: " >";
}
.panlink li:last-child::after {
	content: "";
}
.panlink li a {
}
.panlink li span {
}
@media screen and (max-width: 767px) {
	.panlink {
		width: auto;
	}
}
/* ------------------------------------------------ */

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

/* ------------------------------------------------ */
#drawertriger {
	position: fixed;
	z-index: 9999;
	right: 5px;
	top: 5px;
	transition: transform 0.3s;
}
.drawertrig {
	display: block;
	text-align: center;
	cursor: pointer;
	text-decoration: none;
}
.drawertrig span, .drawertrig span::before, .drawertrig span::after {
	display: inline-block;
	position: absolute;
	height: 2px;
	width: 34px;
}
.drawertrig span {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	transition: background 0.3s 0.3s;
}
.drawertrig span::before, .drawertrig span::after {
	content: '';
	right: 0px;
	transform: translateZ(0);
	backface-visibility: hidden;
	transform-origin: 0% 50%;
	transition: transform 0.3s 0.3s;
}
.drawertrig span::before {
	top: -10px;
}
.drawertrig span::after {
	top: 10px;
}
.drawer-open .drawertrig span {
}
.drawer-open .drawertrig span::before, .drawer-open .drawertrig span::after {
}
.drawer-open .drawertrig span::before {
	transform: translateX(4px) translateY(-3px) rotate(45deg);
}
.drawer-open .drawertrig span::after {
	transform: translateX(4px) translateY(2px) rotate(-45deg);
}
.drawer-open #drawertriger {
	transform: translateX(-300px);
}
.drawertrig {
	width: 50px;
	height: 50px;
	background-color: var(--color1);

	background: linear-gradient(45deg,  rgba(248,213,219,1) 0%,rgba(161,208,230,1) 50%,rgba(163,156,203,1) 100%);
	border-radius: 100px;
/*
	box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.1);
*/
	overflow: hidden;
}
.body_wrap.fixed #drawertriger .drawertrig {
	width: 50px;
	height: 50px;
}
.body_wrap .drawertrig span {
	top: 50%;
}
.body_wrap.fixed.drawer-open #drawertrig .drawertrig span {
}
.drawer-open .drawertrig {
	background-color: var(--color1);
	box-shadow: none;
}
.drawer-open .drawertrig span {background: rgba(0,0,0,0);}
.drawertrig span, .drawertrig span::before, .drawertrig span::after {
	background: var(--white);
}
.drawer-open .drawertrig span::before, .drawer-open .drawertrig span::after {
	background: var(--white);
}
.drawer-open .drawertrig em {
	padding-top: 30px;
}
.body_wrap.fixed.drawer-open .drawertrig em {
	padding-top: 30px;
}
.drawer {
	position: fixed;
	z-index: 9998;
	right: -120%;
	top: 0;
	height: 100%;
	width: 300px;
	overflow: auto;
	background-color: var(--black);
	background-color: var(--white);
	box-shadow: -2px 0px 5px 1px rgba(0,0,0,0.1);
	transition: all 0.3s;
}
.drawer-open .drawer {
	right: 0;
}

/* ------------------------------------------------ */
.overlay {
	position: fixed;
	z-index: 999;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	cursor: pointer;
	background-color: rgba(0,0,0, 0.5);
	background-color: rgba(255,255,255,0.5);
	visibility: hidden;
	opacity: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s;
	-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s;
	transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s;
}
.overlay.open {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.3s 0s, visibility 0s 0s, -webkit-transform 0.3s 0s;
	-moz-transition: opacity 0.3s 0s, visibility 0s 0s, -moz-transform 0.3s 0s;
	transition: opacity 0.3s 0s, visibility 0s 0s, transform 0.3s 0s;
}

/* ------------------------------------------------ */
#container {
}
@media screen and (min-width: 768px) {
	#container {
		width: 1000px;
		margin: 0px auto;
	}
	.Index #container,
	.Products_Detail #container,
	.User.About #container {
		width: auto;
	}
}
#container.row {
	display: block;
}
@media screen and (max-width: 767px) {

}
/* ------------------------------------------------ */