@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;
}
.l-contents {
    background: #ffe0e5!important;
}
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;
	margin: 0 auto;
}

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#f_nellc img.item {
	width: 18%;
	margin: 30px auto;
}

section#f_lcg img.item {
	width: 35%;
	margin: 50px 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#f_nellc img.icon {
	width: 28%;
	position: absolute;
	left: 8%;
	top: 25%;
	animation: flow 4s infinite;
}
section#f_lcg img.icon {
	width: 25%;
	position: absolute;
	left: 4%;
	top: 10%;
	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;
	right: 3%;
	top: 20%;
	animation: flow 4s infinite;
}

section#mask img.icon,
section#f_bcm img.icon {
	width: 23%;
	position: absolute;
	right: 3%;
	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_lcg h5,section#f_leb h5,section#f_ll h5,section#f_nellc 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_lcg h5 span,section#f_leb h5 span,section#f_ll h5 span,section#f_nellc 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_lcg p,section#f_leb p,section#f_ll p,section#f_nellc 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;
	margin: 0 auto;
}

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%;
	margin: 0 auto;
}
.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);
}

#item_wrap .f_cont h4 {
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:flex;
	-webkit-box-pack:space-between;
	-moz-box-pack:space-between;
	-webkit-flex-pack:space-between;
	-moz-flex-pack:space-between;
	-ms-flex-pack:space-between;
	-webkit-justify-content:space-between;
	-moz-justify-content:space-between;
	justify-content:space-between;
}
#item_wrap .f_cont h4 img {
	width: 80%;
}
#item_wrap .f_cont h4::before {
	content: "";
	display: inline-block;
	width: 22%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-bottom: 5%;
}
#item_wrap .f_cont:nth-of-type(1) h4::before {
	background-image: url(img/step_no01.png);
}
#item_wrap .f_cont:nth-of-type(2) h4::before {
	background-image: url(img/step_no02.png);
}
#item_wrap .f_cont:nth-of-type(3) h4::before {
	background-image: url(img/step_no03.png);
}
#item_wrap .f_cont:nth-of-type(4) h4::before {
	background-image: url(img/step_no04.png);
}
#item_wrap .f_cont:nth-of-type(5) h4::before {
	background-image: url(img/step_no05.png);
}
#item_wrap .f_cont:nth-of-type(6) h4::before {
	background-image: url(img/step_no06.png);
}
#item_wrap .f_cont:nth-of-type(7) h4::before {
	background-image: url(img/step_no07.png);
}
#item_wrap .f_cont:nth-of-type(8) h4::before {
	background-image: url(img/step_no08.png);
}
#item_wrap .f_cont:nth-of-type(9) h4::before {
	background-image: url(img/step_no09.png);
}

header, footer {
	display: none!important;
}
.l-contents__frame {
    padding: 0!important;
}
a:link {
    text-decoration: none;
}