@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.6;}
    100% {opacity: 1;}
}


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

body {
width: 100%;
height: 100%;
background-image:url("../image/bg.jpg");
background-position: left bottom;
background-size:contain;
background-repeat: no-repeat;
background-attachment: fixed;
color: #221815;
}

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

section {
width: 100%;
max-width: 750px;
position: relative;
height: auto;
}

section#fv h1 {
	width: 15.5%;
    position: absolute;
    top: 4.5%;
    right: 4.5%;
}
/*
section#fv img{
width: 100%;
}

section#logo img{
width: 100%;
}
*/

section#message {
position: relative;
/*height: 110vw;*/
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%;
}

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

section#message img{
}

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

section#technology h2 {
/*	position: absolute;
	top: 30%;
	left: 10%;*/
	width: 80%;
	margin: 0 10%;
/*	z-index: +1;*/
}

section#technology h3 {
/*	position: absolute;
	top: 0;
	left: 10%;*/
    width: 72%;
	margin: 0 14% 2%;
}

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

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

section#technology span{
	display: block;
	text-align: left;
	margin: 0 5%;
	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 40px 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: 35%;
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#essence h5 span,section#lotion h5 span,section#cream h5 span,section#mask h5 span{
font-size: small;
}

section#gift h5 {
	text-align: center;
margin: 20px 5%;
	line-height: 1.4;
}
section#gift h5 span {
	display: inline-block;

}

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: 20px 5%;
text-align: left;
	line-height: 1.4;
}
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: 8% 0;
}

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

section#footer {
	width: 100%;
	background: rgba(227,153,187,0.8);
	padding: 10%;
	color: rgba(255,255,255,1.0);
	font-size: small
}

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);
}