@charset "UTF-8";
/* base
===================================*/
* {
	box-sizing: border-box;
}

body {
	position: relative;
	background: #54C3F1;
	color: #0F62A9;
	line-height: 1.5;
	font-family: 'Kosugi Maru', sans-serif;
}

body::before {
	position: relative;
	bottom: 0.75rem;
	height: 0.75rem;
	z-index: 1000;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

a:link,
a:visited {
	color: #fff;
	text-decoration: none;
}

a:hover {
	color: #33b3e5;
}

h2, p {
	margin: 1rem 0;
	line-height: 1.6;
}

#pageTop {
	position: fixed;
	right: 3%;
	bottom: 10px;
	width: 45px;
	height: 45px;
	margin: 0;
	z-index: 300;
}

#pageTop a{
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

/* laout
=============================== */
#wrap {
	position: relative;
	width: 100%;
	max-width: 768px;
	min-height: calc(100vh);
	margin: 0 auto;
	background: #54C3F1;
}

header {
	position: relative;
	background: #54C3F1;
	text-align: center;
	z-index: 100;
}

header h1 {
	background: #54C3F1;
}

header h1 img {
	width: 200px;
}

#logo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: #54C3F1;
	z-index: 300;
	animation: 1.5s fadeLogo01;
}

#logo img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

#logo.logo-fade {
	height: 50vh;
	animation: 1s heigthV;
}

header h1.logo-fade {
	height: 50vh;
	animation: 2s fadeIn01;
}

header.all-fixed.m-header h1.logo-fade {
	animation: none;
}

header.is-fixed,
header.all-fixed {
	position: fixed;
	top: 0;
	left: 0%;
	height: 60px;
	margin: 0;
	background: #fff;
	transition : all 1000ms;
	z-index: 10000;
}

header.all-fixed.m-header {
	transition : all 0ms;
}

header.is-fixed h1#logo.logo-fade,
header.all-fixed h1#logo.logo-fade {
	position: fixed;
	top: 0;
	left: 0;
	height: 60px;
	transform: translate(0px,0%);
	animation: none;
	animation: 1s fadeIn01;
	background: #fff;
}

header.all-fixed h1#logo {
	animation: none;
}

header.is-fixed h1#logo.logo-fade img,
header.all-fixed.m-header h1#logo.logo-fade img {
	width: 50px;
}

.scrollbtn {
	position: absolute;
	top: calc(48.5vh - 20px);
	left: calc(50% - 20px);
	z-index: 500;
	padding-top: 0.3rem;
	animation: 5.5s fadeIn02;
	font-size: 0.8rem;
	font-weight: bold;
}

.scrollbtn span {
	position: absolute;
	top: -50px;
	left: 50%;
	width: 20px;
	height: 20px;
	margin-left: -12px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: sdb 1.5s infinite;
	animation: sdb 1.5s infinite;
	box-sizing: border-box;
	z-index: 3000;
}

.scrollbtn.s01 {
	display: none;
	animation: none;
}

@-webkit-keyframes sdb {
	0% {
		transform: rotate(-45deg) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: rotate(-45deg) translate(-20px, 20px);
	opacity: 0;
	}
}

@keyframes sdb {
	0% {
		transform: rotate(-45deg) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: rotate(-45deg) translate(-20px, 20px);
		opacity: 0;
	}
}

main {
	position: relative;
	top: 20vh;
	width: calc(100% - 1.5rem);
	margin: 0 auto;
	animation: 5s fadeIn02;
	background: #fff;
}
.shizuku{
	opacity: 0;
	position: absolute;
	top:10vh;
	left:50%;
	width: 15px;
	height: 15px;
	margin-left: -12px;
	animation:4s fadeFall01;
	z-index: 200;
	background: #FFF;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	display: block;
}

@keyframes logoImg01 {
	0% {transform: scale(.5);}
	100% {transform: scale(1);}
}

@keyframes fadeFall01 {
	0% {opacity: 1; top:20vh;}
	100% {opacity: 0; top:50vh;
    transform: scale(.3);}
}

@keyframes fadeLogo01 {
	0% {opacity: 0;transform: scale(.1); bottom:20%;}
	50% {opacity: 0;}
	100% {opacity: 1;transform: scale(1);}
}

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

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

@keyframes heigthV {
	0% {height: 100vh;}
	100% {height: 50vh;}
}

@-webkit-keyframes heigthV {
	0% {height: 100vh; }
	100% {height: 50vh;}
}

@keyframes heigthV02 {
	0% {height: 50vh;}
	100% {height: 60px;}
}

@-webkit-keyframes heigthV02 {
	0% {height: 100vh;}
	100% {height: 60px;}
}

@keyframes fadeIn02 {
	0% {opacity: 0;}
	20% {opacity: 0;}
	100% {opacity: 1;}
}

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

header #bl {
	position: fixed;
	top: calc(-0.5rem - 1px);
	left: -0.5rem;
	width: 147px;
	height: 72px;
	margin: 0;
	padding-left: 1rem;
	background: url("../images/bilingualBg01.png") no-repeat;
	line-height: 52px;
	text-align: left;
	z-index: 1000;
	opacity: 0.8;
}

header #bl a {
	display: block;

}

header #bl a:link,
header #bl a:visited {
	color: #1B284F;
}

header #bl a:hover {
	color: #1B284F;
}

main #sliderArea {
	background: #54C3F1;
}

main #sliderArea img {
	width: 100%;
	max-width: 1000px;
	height: 50vh;
	margin: 0;
	padding: 0;
	object-fit: contain;
}

#newsArea dt,
#newsArea dd span {
	margin-top: 1rem;
	color: rgba(0,103,182,1);
	font-weight: bold;
}

#newsArea dd span {
	display: block;
}

.aboutArea {
	padding: 0 1rem;
}

.productArea {
	margin: 1.5rem 0;
}

.productArea:nth-child(odd) {
	border-right: 4px solid #58B8E2;
	border-bottom: 4px solid #58B8E2;
	color: #58B8E2;
}

.productArea:nth-child(even) {
	border-right: 4px solid #0F62A9;
	border-bottom: 4px solid #0F62A9;
	color: #0F62A9;
}

.productArea img {
	padding: 1rem;
}

.productdetail {
	position: relative;
}

.productdetail .pT01 {
	position: absolute;
	bottom: 0.5rem;
	padding-left: 0.5rem;
	font-size: 1.2rem;
	font-weight: bold;
}

.productdetail .pT01 span {
	display: block;
	font-size: 1rem;
	font-weight: normal;
}

.shopArea {
	margin-bottom: 1rem;
}

.shopArea dt {
	margin-top: 1rem;
	font-family: 'Noto Sans JP', sans-serif;
}

.shopArea dd {
	padding-left: 1rem;
}

footer {
	position: relative;
	top: 50vh;
}

#copyright {
	margin: 0;
	background: #0067B6;
	text-align: center;
	line-height: 40px;
	color: #fff;
	font-size: 0.9rem;
}

@media screen and (min-width:768px) {
	.scrollbtn {
		position: absolute;
		top: calc(45vh - 20px);
}
}

.topHeadMenu{
	position: fixed;
	top:60px;
	left:0;
	background: rgba(0,103,182,1);
	background-size:contain;
	width:100%;
	overflow:hidden;
	color:#000;
	box-sizing: border-box;
	border-top:solid  rgba(0,103,182,1);
	border-bottom:solid 3px  rgb(10, 91, 161);
	animation: 5s fadeIn02;
	z-index: 300;
}
.topHeadMenu ul li{
	width: 25%;
	float:left;
	text-align:center;
	border-right:solid 1px rgb(10, 91, 161);
    border-left: #FFF 1px solid;
	margin-right:0px;
	font-size:90%;
box-sizing: border-box;}

.topHeadMenu ul li a{
	display:block;
	padding:20% 10%;}

	@media screen and (min-width:768px) {
		.topHeadMenu ul li a{
			display:block;
			padding:20px 10%;}
	}
.topHeadMenu ul li:last-child {
	border-right:none;
}
.topHeadMenu ul li:first-child {
	border-left:none;
}
.productMenu {
	overflow: hidden;
	margin-bottom: 10px;
}
.productMenu li{
	width:50%;
	float: left;
	box-sizing: border-box;
}
.productImg{
	padding-top:5%;
	padding-right:5%;
	box-sizing:border-box;
}
.effectiveness{
	overflow: hidden;
}
.effectivenessTitle{
	color: rgba(0,103,182,1);
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.5;
	border-bottom: 4px solid #0F62A9;
	margin-bottom: 10px;
}
.effectiveness li{
	width: 100%;
	float: left;
	list-style-type: disc;
	font-size: 12px;
	list-style-position: inside;
}
.price{
	color: rgba(0,103,182,1);
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1.5;
	margin-top: 10px;
}
.movie{
	width:100%;
	min-height:100px;
	background-color: #000;
	margin-bottom: 10px;;
}


.topOpen{
	position: relative;
	padding: 0 0 3rem;
	background: #54C3F1 !important;
	margin: 0 auto;
	z-index: 10;
}

@media screen and (max-width:768px) {
	.topOpen{
		padding: 0 0 0 !important;
		background: #54C3F1 !important;
		margin: 0 auto;
	}
	.topOpen img{
		padding: 0.5rem 1rem 1rem 1rem;
	}
}
#minatomirai {
	margin-top:-150px;
 padding-top:150px;
}
.topOpen a{
	display: block;
	z-index: 220;
}


/* お問い合わせ
----------------------------------------------------------------------------- */
.formTbl{
	width: 100%;
	margin: 0 0 10% 0;
}
.formTbl dt{
	font-size: 80%;
	margin: 0 0 3%;
}
.formTbl dd{
	margin: 0 0 5% 0;
	background:#efefef;
	padding:5%;
}
.formTbl p{
	font-size: 80%;
	line-height: 1.5;
}
.contactFrm .formTbl dd{
	margin: 3% 0 8% 0;
}
.contactFrm .formTbl{
}
.formTbl textarea , .formTbl select{
	width: 95%;
	padding: 2%;
	border-radius: 4px;
	border: 1px solid #b3b3b3;
	background:#FFF;
	font-size: 100%;
}

input.inputWidth{
	width: 95%;
	padding: 2%;
	border-radius: 4px;
	border: 1px solid #b3b3b3;
	font-size: 100%;
}

.formTbl select{
	width: 100%;
}
.formMailChk{
	text-align: center;
	font-size: 80%;
	margin: 5% 0;
}
.formMailChk p{
	margin-bottom: 5%;
}
.cnfBtn , .cmpBtn , .backBtn{
	background: #0F62A9;
	border-radius: 4px;
	-webkit-box-shadow: 0 6px 6px -5px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 6px 6px -5px rgba(0, 0, 0, 0.4);
	box-shadow: 0 6px 6px -5px rgba(0, 0, 0, 0.4);
	color: #FFF;
	margin: 0 auto;
	text-align: center;
	font-size:14px;
}
.cnfBtn{
	width: 39%;
}
.cmpBtn , .backBtn{
	width: 39%;
}
.cmpBtn{
	background: #54C3F1;
}
.cnfBtn a , .cmpBtn a , .backBtn a{
	color: #FFF;
	width: 100%;
	height: 100%;
	padding: 4% 0;
	display: block;
}
.formAttention{
	font-size: 80%;
	color: #ED2360;
}
.confirmBoxInner{
	margin: 0 auto;
}
.required{
	background: #dc2829;
	color: #FFF;
	margin: 0 0 1% 2%;
	border-radius: 4px;
	padding: 1%;
}
.contactPrivacy{
	line-height: 1.5;
	margin-bottom: 5%;
}
.contactPrivacy a{
	color: #096f3f;
}

#subPageTit {
    background: #1b1b1b;
    color: #FFF;
    font-family: 'Lato', sans-serif;
    font-size: 120%;
    letter-spacing: 0.3em;
    text-align: center;
    padding: 4% 0 3%;
}

/* clear
----------------------------------------------------------------------------- */
.clear {clear:both;}

/* clearfix
----------------------------------------------------------------------------- */
.clearfix:after,
div.section:after{
	content:".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix,
div.section{
	display: inline-block;
}
* html .clearfix,
* html div.section{
	height: 1%;
}
.clearfix,
div.section{
	display: block;
}
#resContact{
padding-bottom: 30px;
}