@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: 80%;
    position: absolute;
    bottom: 10%;
    right: 0;
  animation: fade 1s 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,
section.f_cont {

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,
section.f_cont div {

position: relative;

}



section#essence h4,section#lotion h4,section#cream h4,section#mask h4,section#gift h4,
section.f_cont 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,
section.f_cont h4 img {

width: 90%;

margin-bottom: 5%;

}


section#f_loc img.item {

width: 24%;

margin: 30px auto;

}

section#f_lsfw img.item {

width: 18%;

margin: 30px auto;

}



section#essence img.item,
section#f_leb img.item {

width: 18%;

margin: 30px auto;

}



section#lotion img.item,
section#f_ll img.item {

width: 20%;

margin: 30px auto;

}



section#cream img.item,
section#f_lc img.item {

width: 40%;

margin: 40px auto;

}



section#mask img.item,
section#f_bcm img.item {

width: 42%;

margin: 30px auto;

}


section#f_loc img.icon {

width: 28%;

position: absolute;

left: 5%;

top: 30%;

animation: flow 4s infinite;

}

section#f_lsfw img.icon {

width: 28%;

position: absolute;

right: 5%;

top: 25%;

animation: flow 4s infinite;

}

section#essence img.icon,
section#f_leb img.icon {

width: 30%;

position: absolute;

left: 5%;

top: 40%;

animation: flow 4s infinite;

}



section#lotion img.icon,
section#f_ll img.icon {

width: 30%;

position: absolute;

right: 5%;

top: 35%;

animation: flow 4s infinite;

}



section#cream img.icon,
section#f_lc img.icon {

width: 25%;

position: absolute;

left: 3%;

top: 30%;

animation: flow 4s infinite;

}



section#mask img.icon,
section#f_bcm 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,
section#f_loc h5,section#f_lsfw h5,section#f_leb h5,section#f_ll h5,section#f_lc h5,section#f_bcm 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,
section#f_loc h5 span,section#f_lsfw h5 span,section#f_leb h5 span,section#f_ll h5 span,section#f_lc h5 span,section#f_bcm h5 span {

font-size: small;

}



section#essence p,section#lotion p,section#cream p,section#mask p,
section#f_loc p,section#f_lsfw p,section#f_leb p,section#f_ll p,section#f_lc p,section#f_bcm 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);

}