@charset "UTF-8";
/* CSS Document */

/*-----------------------------------------

				common

-------------------------------------------*/

section{
	width: inherit;
	padding: inherit;
	margin: 0 auto;
}
main {
	margin-top: 0!important;
	min-width: 750px!important;
}
.mod-outer-block {
	min-width: 750px!important;
}

.mod-inner-block {
    margin: 0 auto;
    width: 750px;
    text-align: center;
}
.title{
	margin-top: 60px;
}

/*フェードイン*/

.element {
  /* 最初は非表示 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: opacity 1s, visibility 1s, transform 1s;
}
/* フェードイン時に入るクラス */
.is-fadein {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.fadein {
	animation : fadein 0.5s;
	animation-timing-function: ease-out;
}
@keyframes fadein {
  0% {
     opacity: 0;
     transform: translateY(20px);
  }
  100% {
     opacity: 1;
     transform: translateY(0);
  }
}


/*-----------------------------------------

				float

-------------------------------------------*/
.float {
    opacity: 0;
    z-index: -2;
/*	float: left;*/
	position: absolute;
}
.float.fixed {
    position: fixed;
	bottom: 50px;
    left: -280px;
    opacity: 1;
    z-index: +3;
}
.float.fixed.none {
    opacity: 0;
    z-index: -2;
}
.float a img{
	width: 20%;
	filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.3));
}
.float a:hover img{
	opacity: 1!important;
	filter: drop-shadow(0px 3px 3px rgba(0,0,0,0));
}

/*-----------------------------------------

				FV

-------------------------------------------*/

.mod-fv .title {
	width: 90%;
    position: absolute;
    left: 5%;
    top: -20px;
}



/*-----------------------------------------

				CV

-------------------------------------------*/

.cv-background{
	background-image: url("../img/cv/bg-1_2512.jpg");
    height: 1525px;
    background-repeat: no-repeat;
    background-size: 100%;
}
.cv1{
	max-width: 440px;
    padding: 210px 0 20px;
}
.cv_graph{
	text-align: left;
}
/*
.cv1-2{
	width: 99.4%;
    margin: 180px auto 0 10px;
}
*/
.cv2{
	width: 90%;
	margin: auto;
	position: relative;
}
.cv3 img{
	margin-top: -193px;
}
.cv-product{
	position: absolute;
    width: 80%;
    top: 28%;
    left: 10%;
}
.cv-btn{
	position: absolute;
    bottom: 4%;
    left: 8%;
    width: 85%;
}
a>.cv-btn{
	filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.25));
}
a:hover>.cv-btn{
	opacity: 0.8!important;
	filter: drop-shadow(5px 5px 5px rgba(0,0,0,0));
}
a:hover>.cv-product{
	opacity: 0.6!important;
}




/*-----------------------------------------

				cont01

-------------------------------------------*/

.cont01-background{
	background-image: url("../img/cont1/bg.jpg");
    height: 2326px;
    background-repeat: no-repeat;
    background-size: 100%;
}

.cont01-background img:first-of-type{
	width: 75%;
    padding-top: 80px;
    margin: auto;
}
.cont01-background img:nth-of-type(2){
	width: 60%;
    margin: 200px 0 70px 300px;
}
.cont01-background img:nth-of-type(3){
	width: 90%;
	margin: auto;
}
.cont01-background img:nth-of-type(4){
	width: 40%;
    margin: 35px auto 30px;
}
.cont01-background img:nth-of-type(5){
	margin-right: -44px;
}
.cont01-background img:nth-of-type(6){
	width: 60%;
    margin: 80px -231px 0 0;
}


/*-----------------------------------------

				cont02

-------------------------------------------*/

.mod-cont02 .title{
	width: 60%;
	margin-bottom: 20px;
}
.cont02-background{
	background-color: #FCF3E1;
    background-repeat: no-repeat;
    background-size: 100%;
    padding-bottom: 100px;
}
.reviw{
	overflow: hidden;
}
.reviw img:not(:last-of-type){
	margin-bottom: 10px;
}
.reviw img:nth-child(odd){
	margin-left: -32px;
}
.reviw img:nth-child(even){
	margin-right: -45px;
}



/*		FV　		*/
.cont02-1-background{
	background-image: url(../img/cont2/fv/bg.jpg);
    height: 850px;
    background-repeat: no-repeat;
    background-size: 100%;
}

/*		point 1		*/
.cont02-2-1-background{
	background-image: url(../img/cont2/point1/bg.jpg);
    height: 1096px;
    background-repeat: no-repeat;
    background-size: 100%;
}
.cont02-2-2-background{
	background-color:#F9F6F8;
    background-repeat: no-repeat;
    background-size: 100%;
}

.cont02-2-2-background img:first-of-type{
	padding: 60px 0;
}
.cont02-2-2-background img:nth-of-type(2){
	padding-bottom: 60px;
}


/*		point 2		*/
.cont02-3-background{
	background-color:#FFFBF4;
    background-repeat: no-repeat;
    background-size: 100%;
}

.cont02-3-background img:nth-of-type(2){
	padding-top: 40px;
}
.cont02-3-background img:nth-of-type(3){
	padding-top: 60px;
	margin-top: -190px;
    margin-left: -120px;
    overflow: hidden;
	padding-bottom: 30px;
}


/*		point 3		*/
.cont02-4-background{
	background-image: url(../img/cont2/point3/bg.jpg);
    height: 1212px;
    background-repeat: no-repeat;
    background-size: 100%;
}

.role{
	display: grid;
    grid-template-columns: 33% 33% 33%;
    justify-content: center;
	margin: 25px 35px;
}
.role li{
	width: 95%;
	margin: 0 auto 20px;
}
.role img{
	filter: drop-shadow(5px 5px 5px rgba(63,98,116,0.25));
	will-change: filter;
}
.role a>img{
	filter: drop-shadow(5px 5px 5px rgba(63,98,116,0.25));
	will-change: filter;
}
.role a:hover>img{
	opacity: 1!important;
	filter: drop-shadow(5px 5px 5px rgba(63,98,116,0));
}

/*		Modaal		*/
/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
	display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}





/*-----------------------------------------

				cont03

-------------------------------------------*/

/*		FV　		*/
.cont03-1-background{
	background-image: url("../img/cont3/title/bg1.jpg");
    height: 324px;
    background-repeat: no-repeat;
    background-size: 100%;
	position: relative;
	overflow: hidden;
}
.cont03-1-background img{
	position: absolute;
	width: 40%;
    left: 11%;
    top: 22%;
}

.cont03-2-background{
	background: linear-gradient(#FCF3E1, #fff);
    height: 324px;
    background-repeat: no-repeat;
    background-size: 100%;
	position: relative;
	overflow: hidden;
}
.point{
	display: grid;
    grid-template-columns: 33% 33% 33%;
    justify-content: center;
	padding-top: 20px;
}
.point>a{
	filter: drop-shadow(0 5px 5px rgba(131,62,109,0.2));
}
.point>a:hover{
	opacity: 1!important;
	filter: drop-shadow(0 5px 5px rgba(131,62,109,0));
}


/* point1 */
.cont03-3-background{
	background-image: url("../img/cont3/point1/bg.jpg");
    height: 1581px;
    background-repeat: no-repeat;
    background-size: 100%;
	position: relative;
	overflow: hidden;
}
.cont03-3-background img:first-of-type{
	width: 85%;
	margin: 40px 0 30px;;
}
.cont03-3-background img:nth-of-type(2){
	width: 95%;
    margin-right: -43px;
    overflow-x: hidden;
}
.cont03-3-background img:nth-of-type(3){
	width: 85%;
	margin-top: 50px;
}



/* point2 */
.cont03-4-background{
	background-color: #FFFBF4 ;
    height: 1140px;
    background-repeat: no-repeat;
    background-size: 100%;
	position: relative;
	overflow: hidden;
}
.cont03-4-background img:first-of-type{
	width: 80%;
	padding: 60px 0 40px;
}
.cont03-4-background img:nth-of-type(2){
	width: 90%;
}
.cont03-4-background img:nth-of-type(3){
	margin-top: -140px;
    margin-left: -70px;
}


/* point2 */
.cont03-5-background{
	background-image: url("../img/cont3/point3/bg-2_2512.jpg");
    height: 1200px;
    background-repeat: no-repeat;
    background-size: 100%;
	position: relative;
	overflow: hidden;
}




/*-----------------------------------------

				cont04

-------------------------------------------*/

/*		肌状態別		*/
.cont04-background{
	background-image: url("../img/cont4/bg.jpg");
    height: 1662px;
    background-repeat: no-repeat;
    background-size: cover;
	position: relative;
	overflow: hidden;
}
.case img:first-of-type{
	position: absolute;
    right: 15px;
	top: 210px;
	z-index: 2;
}
.case img:nth-of-type(2){
	margin: 20px 0 0 -170px;
}
.case img:nth-of-type(3){
	margin: -180px -170px 0 0;
}


/*-----------------------------------------

				cont05

-------------------------------------------*/

.cont05-background{
	background-color:#EFDFE5;
    background-repeat: no-repeat;
    background-size: 100%;
	padding-bottom: 60px;
}
.cont05-background .title{
	margin-top: -50px;
}
.bg5{
	width: 90%;
}


/*		about		*/
.about{
	padding: 30px 0 0 0;
	position: relative;
}
.about img:nth-of-type(2){
	position: absolute;
	left: 58px;
    bottom: 70px;
}


/*		difference		*/
.difference{
	padding: 30px 0 0 0;
	position: relative;
}
.difference-text{
	position: absolute;
	left: 0;
    top: 250px;
}
.difference-text img:not(:last-of-type){
	margin-bottom: 40px;
}


/*-----------------------------------------

				cont06

-------------------------------------------*/

/*		Q&A		*/
.cont06-background{
	background-color:#FEFAFB;
    background-size: 100%;
    padding-bottom: 60px;
}
.cont06-background img:first-of-type{
	width: 40%;
}
.cont06-background img:not(:first-of-type){
	width:  90%;
}
.cont06-background img:not(:last-of-type){
	margin-bottom: 50px;
}






/*-----------------------------------------

				footer

-------------------------------------------*/
.mod-sp-copy {
	width: 750px;
    margin: 0 auto 0;
    text-align: center;
    background-color: #f9f1ed;
    padding: 14px 20px;
    letter-spacing: -0.03em;
    font-size: 16px;
    color: #666666;
} 

.mod-cont12{
	margin-bottom:50px;
}