@charset "Shift_JIS";

/* animation*/
@keyframes bound{
    0% {top:-10px;}
	20% {top:10px;}
	30% {top:-5px;}
	40% {top:5px;}
	50% {top:-2px;}
	60% {top:2px;}
	70% {top:-2px;}
	80% {top:2px;}
    90% {top:0px;}
    100% {top:3px;}
}

@keyframes flow{
    0% {opacity: 1;}
	50% {opacity: 0.7;}
    100% {opacity: 1;}
}

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


html{
width: 100%;
height: 100%;}

body {
width: 100%;
height: 100%;
background-color: #ffe0e5;
color: #221815;
text-align: center;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
section {
width: 100%;
max-width: 750px;
margin: 0 auto;
position: relative;
height: auto;
}

section#fv h1 {
  width: 13%;
  position: absolute;
  top: 5%;
  right: 7.5%;
  animation: fade 3s ease-in 1;
}

section#fv img{
max-width: 100%;
}

section#logo img{
width: 100%;
}

section#message {
position: relative;
/*height: 680px;*/
background-color: rgba(255,255,255,1.00);
background-image:url("../image/all_item.png");
    background-size: contain;
    background-position: left 130% top 0%;
background-repeat: no-repeat;
}

section#message h2 {
width: 67%;
margin-left: 5%;
/*
position: absolute;
top: 1%;
left: 5%;
*/
}
/*
section#message h2 img {
	max-width: 100%;
}
*/


section#message .message_txt {
    width: 54%;
    margin-left: 2%;
    /* position: absolute; 
    left: 2%;
    top: 16.5%;*/
}


section#technology {
position: relative;
padding: 3% 0;
background-color: rgba(255,255,255,1.00);
background-image:url("../image/technology_bg.jpg");
background-size:80%;
background-position: bottom center;
background-repeat: no-repeat;
overflow:hidden;
}

section#technology h2 {
/*	position: absolute;
	top: 25%;
	left: 10%;*/
	width: 80%;
	margin: 0 10%;
}


section#technology h3 {
/*	position: absolute;
	top: 2%;
	left: 20%;*/
    width: 60%;
	margin: 0 20% 2%;
}

section#technology p {
	position: relative;
	margin: 5% auto 20% auto;
}

section#technology p img {
width: 80%;
animation: flow 3s infinite;
}

section#technology span {
	display: block;
	text-align: left;
	margin: 0 50px;
	font-size: xx-small;
}

section#concept img{
width: 100%;
}

section#concept h3{
width: 90%;
position: absolute;
bottom: 5%;
left: 5%;
}

section#essence,section#lotion,section#cream,section#mask,section#gift{
background: rgba(255,255,255,1.00);
text-align: center;
position: relative;
padding: 0 0 80px 0;
}

section#essence div,section#lotion div,section#cream div,section#mask div{
position: relative;
}

section#essence h4,section#lotion h4,section#cream h4,section#mask h4,section#gift h4{
width: 90%;
margin: 0 auto;
border-bottom: 1px solid #371c2a;
text-align: center;
}

section#essence h4 img,section#lotion h4 img,section#cream h4 img,section#mask h4 img,section#gift h4 img{
width: 90%;
margin-bottom: 5%;
}

section#essence img.item{
width: 18%;
margin: 30px auto;
}

section#lotion img.item{
width: 20%;
margin: 30px auto;
}

section#cream img.item{
width: 40%;
margin: 40px auto;
}

section#mask img.item{
width: 42%;
margin: 30px auto;
}

section#essence img.icon{
width: 30%;
position: absolute;
left: 5%;
top: 40%;
animation: flow 4s infinite;
}

section#lotion img.icon{
width: 30%;
position: absolute;
right: 5%;
top: 35%;
animation: flow 4s infinite;
}

section#cream img.icon{
width: 25%;
position: absolute;
left: 3%;
top: 30%;
animation: flow 4s infinite;
}

section#mask img.icon{
width: 23%;
position: absolute;
right: 2%;
top: 35%;
animation: flow 4s infinite;
}

section#essence h5,section#lotion h5,section#cream h5,section#mask h5{
text-align: center;
width: 100%;
line-height: 1.5em;
}

section#gift h5{
	text-align: center;
	margin: 30px auto;
}

section#essence h5 span,section#lotion h5 span,section#cream h5 span,section#mask h5 span{
font-size: small;
}

section#essence p,section#lotion p,section#cream p,section#mask p{
text-align: left;
width: 70%;
margin: 20px auto;
font-size: x-small;
}

section#gift p {
font-size: small;
margin: 30px 2%;
}
section#gift p span {
	display: block;
	text-indent: -1em;
	margin-left: 1em;
}

section a.buy  {
display: block;
margin: 5px auto;
width: 50%;
}

section a.buy img{
width: 100%;
}

section.scroll {
text-align: center;
background: rgba(255,255,255,1.00);
padding: 50px 0;
}

section.scroll img{
width: 15%;
position: relative;
animation:bound 4s infinite;
}

section#footer {
	width: 100%;
	background: rgba(227,153,187,0.8);
	padding: 60px 5%;
	color: rgba(255,255,255,1.0);
	font-size: small;
	text-align: left;
}

section#footer ul{
	list-style: none;
	display: block;
	margin-bottom: 20px;
}

section#footer ul li{
	list-style: none;
	display: block;
	margin-bottom: 10px;
}

section#footer ul li a{
	color: rgba(255,255,255,1.0);
	font-weight: bold;
	font-size:medium;
}


/*seibun_acc*/
.accordion {
  margin: 0;
  width: 100%;
}
.toggle {
  display: none;
}
.option {
  position: relative;
  margin-bottom: 1em;
}
.title,
.content {
 /* -webkit-backface-visibility: hidden;
	backface-visibility: hidden;*/
    transform: translateZ(0);
    transition: all 0.3s;
}
.title {
	padding:0;
	display: block;
}

.title img.seibun {
	width: 50%;
}
.content {
  max-height: 0;
  overflow: hidden;
}
section div.content p {
  margin: 0;
  padding: 0;
  font-size: small;
  line-height: 1.5;
}
.toggle:checked + .title + .content {
	max-height: 1000px;
	transition: all .8s;
}
.toggle:checked + .title:before {
	transform: rotate(90deg) !important;
}


.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 300ms;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}