@charset "UTF-8";

:root{
	--color-cream1: #FDAC74;
}

/* layout
++--------------------------------------------++*/
h2{font-size: 32px; font-size: 3.2rem;}
h3{font-size: 16px; font-size: 1.6rem;}

.menu-banner img{
	display: block;
	margin: 0 auto 3em;}

/* 初めて
++--------------------------------------------++*/
.first-sec{
	padding: 0 1em 2em;}

.first-sec h2{
	font-size: 37px; font-size: 3.7rem;
	font-family: var(--font-mincho);
	padding: 0 0 0.5em;
	text-align: center;}

.first-sec h2 span{
	color: #E6A95E;}

.first-sec p{
	font-size: 21px; font-size: 2.1rem;
	text-align: center;}

/* 悩み
++--------------------------------------------++*/
.nayami-sec h2{
	color: var(--color-accent2);
	text-align: center;
	padding: 0 0 0.5em 0;
	font-size: 21px; font-size: 2.1rem;}

.nayami-sec h3{
	color: var(--color-p2);
	padding: 0 0 0.5em 0;}

.nayami-sec dl dt:before{
	font-family: "FontAwesome";
	content: "\f046";
	display: block;
	float: left;
	font-size: 21px; font-size: 2.1rem;
	color: var(--color-accent2);
	margin-right: 1em;}

.nayami-sec dl dt{
	margin-left: 1em;}

.nayami-sec dl dd{
	margin: 0 3.5em 1em;
	background: var(--color-bk2);}

@media (min-width: 1025px){
	.nayami-sec{
		border: 5px double var(--color-accent2);
		padding: 2em 1em;
		margin-bottom: 4em;}

	.nayami-sec dl{
		margin: 0 auto;
		padding: 0 2em;}
}

@media (max-width: 1024px){
	.nayami-sec{
		width: 95%;
		margin: 0 auto 6em;
		border: 5px double var(--color-accent2);
		padding: 2em 0.5em;
	}

	.nayami-sec dl{
		margin: 0 auto;
		padding: 0 0.25em;}
}

/* sell 1
++--------------------------------------------++*/
.sell1-sec h2{
	font-size: 22px; font-size: 2.2rem;
	margin: 0 auto;}

.fukidashi{
	font-size: 12px; font-size: 1.2rem;
	transform: rotate(-13deg);}

@media (min-width: 1025px){
	.sell1-sec h2{
		width: 600px;}

	.fukidashi{
		top: -1.5em;
		left: 11em;}
}

@media (max-width: 1024px){
	.sell1-sec h2{
		width: 90%;
		margin: 0 auto;}

	.fukidashi{
		top: -3em;
		left: 3em;}
}

/* sell header h2
++--------------------------------------------++*/
.sell-header{
	background: url(../../../uploads/img/bg-line/03-2.png) center top no-repeat,
							url(../../../uploads/img/bg-line/03-2.png) center bottom no-repeat;
	background-size: 70%, 70%;
	padding: 3.5em 0 3em;}

.sell-header h2, .sell-header p{
	font-family: var(--font-mincho);
	font-size: 28px; font-size: 2.8rem;
	text-align: center;
	padding: 0;}

.sell-header span, .sell4-header span{
	color: var(--color-bk4);}

/*layout*/
.sell-header, .sell4-header{
	margin: 4em auto;}

.sell2-sec, .sell3-sec{
	margin: 0 auto;}

/* sell 2
++--------------------------------------------++*/
.sell2-div{
	background: #FBE7DA;}

.sell2-wrapper{
	position: relative;
	background: url(../../../uploads/img/creambath/01.png) right top no-repeat;
	background-size: contain;
	height: 400px;
	padding: 0em 0;}

.sell2-p1, .sell2-p2{
	position: absolute;
	background: rgba(255,255,255,0.8);
	padding: 1.5em 2em;
	border: 2px solid #999999;}

@media (min-width: 1025px){
	.sell2-p1, .sell2-p2{
		width: 600px;}

	.sell2-p1{
		top: 3em;
		left: 2em;}

	.sell2-p2{
		bottom: 5em;
		left: 5em;}
}

@media (max-width: 1024px){
	.sell2-p1, .sell2-p2{
		width: 80%;}

	.sell2-p1{
		top: 3em;
		left: 2em;}

	.sell2-p2{
		bottom: 5em;
		left: 5em;}
}

/* sell 3
++--------------------------------------------++*/
.sell3-div{
	background: #D9EBFA;}

.sell3-wrapper{
	background: url(../../../uploads/img/creambath/02.png) left top no-repeat;
	background-size: contain;
	padding: 0.5em 0}

.sell3-right p span{
	color: #2B9BFA;
	font-weight: bold;}

@media (min-width: 1025px){
	.sell3-wrapper{
		height: 450px;}

	.sell3-right{
		width: 600px;
		float: right;
		margin-top: 2em;
		padding: 2em 2em;
		border: 4px double #2B9BFA;
		color: #1A1A1A;
		background: rgba(255,255,255,0.8);}
}

@media (max-width: 1024px){
	.sell3-right{
		width: 95%;
		margin: 0 auto;
		padding: 2em 2em;
		border: 4px double #2B9BFA;
		color: #1A1A1A;
		background: rgba(255,255,255,0.8);}
}


/* sell 4 cream
++--------------------------------------------++*/
.sell4-sec{
	padding: 0 0 5em;}

.sell4-header{
	background: url(../../../uploads/img/bg-line/03-2.png) center top no-repeat,
							url(../../../uploads/img/bg-line/03-2.png) center bottom no-repeat;
	background-size: 90%, 90%;
	padding: 4.0em 0 3.5em;
	width: 90%;}

.sell4-header h2, .sell4-header p{
	font-family: var(--font-mincho);
	font-size: 28px; font-size: 2.8rem;
	text-align: center;
	padding: 0;}

.sell4-header p{
	font-size: 18px; font-size: 1.8rem;}


/*main*/
.sell4-div{
	background: url(../../../uploads/img/bg/layer/white4x4_03.png) repeat left top,
							url(../../../uploads/img/object/11.jpg) no-repeat center top,
							linear-gradient(rgba(0,0,0,1.0), rgba(0,0,0,1.0));
	/*background-size: cover;*/
	/*background-size: contain;*/
	padding: 3em 0}

.futidori1{
	color: #fff;
	text-align: center;}

.polaroid li img{
	border: 10px solid #fff;
	border-bottom: 55px solid #fff;
	box-shadow: 3px 3px 6px #969696;}

.polaroid li p{
	text-align: center;
	width: 100%;
	bottom: 0px;
	color: #585858;
	font-size: 18px; font-size: 1.8rem;}

@media (min-width: 1025px){
	/*cream photo*/
	.sell4-flex{
		display: flex;
		justify-content: space-between;}

	.sell4-flex li{
		display: block;
		flex: 0 0 230px;
		position: relative;}
}

@media (max-width: 1024px){
	/*cream photo*/
	.sell4-flex ul{
		display: block;
		margin: 0 auto;}

	.sell4-flex li{
		width: 70%;
		max-width: 230px;
		margin: 0 auto 2em;
		display: block;}
}

/*悩み別*/
.sell4-nayami{
	margin: 3em 0;
	padding: 2em 1.5em;}

.sell4-nayami dl dt{
	display: block;
	font-size: 14px; font-size: 1.4rem;
	width: 260px;
	padding: 1em 0.5em;
	text-align: center;
	background: #CFA77C;
	color: #fff;
	vertical-align: bottom;}

@media (min-width: 1025px){
	.sell4-nayami{
		position: relative;
		background: rgba(255,255,255,0.95);}

	.sell4-nayami h3{
		display: inline-block;
		position: absolute;
		font-size: 37px; font-size: 3.7rem;
		top: -0.8em;
		left: 260px;
		font-weight: bold;
		padding: 0 2em;}

	.sell4-nayami dl dt{
		float: left;
		width: 260px;
		margin: 10px 0 0 0em;}

	.sell4-nayami dl dd:before{
		display: block;
		font-family: "FontAwesome";
		content: "\f178";
		position: absolute;
		font-size: 32px; font-size: 3.2rem;
		color: var(--color-accent1);
		left: 300px;
		padding: 10px 0 0px 0;}

	.sell4-nayami dl dd{
		margin: 0 0 50px 330px;}
}

@media (max-width: 1024px){
	.sell4-nayami{
		background: rgba(255,255,255,0.9);}

	.sell4-nayami h3{
		display: block;
		font-size: 26px; font-size: 2.6rem;
		font-weight: bold;
		margin: 0 auto;
		padding: 0 3em;}

	.sell4-nayami dl dt{
		margin: 2em 0 1em;}
}

/*button*/
.ib-center{
	text-align: center;}

.sell4-button p a{
	display: inline-block;
	font-size: 20px; font-size: 2.0rem;
	padding: 1em 4em;
	color: #fff;
	background: #CF9353;
	text-decoration: none;}

.sell4-button p a:after{
	font-family: "FontAwesome";
	content: "\f078";
	font-size: 24px; font-size: 2.4rem;
	margin-left: 1em;}

.sell4-button p a:hover{
	opacity: 0.8;}

/* flow
++--------------------------------------------++*/
.flow-sec p{
	padding: 2em 0 0em 2em;}

.flow-ul{
	list-style: disc none outside;
	margin: 0 0 0 1.5em;}

/* syousai
++--------------------------------------------++*/
/* #link error */
.syousai-bk{
	margin-top: -135px;
	padding-top: 135px;}

.syousai-sec{
	position: relative;
	margin: 4em auto 0em;
	border-top: 2px dotted var(--color-p1);
	padding: 2em 2em 0;}

.syousai-sec dl dt:not(:first-child){
	padding-top: 2em;}

.syousai-sec dl dd{
	font-size: 14px; font-size: 1.4rem;}

@media (min-width: 1025px){
	.syousai-sec h3{
		position: absolute;
		font-size: 21px; font-size: 2.1rem;
		display: inline-block;
		top: -15px;
		left: 350px;
		background-color: #fff;
		padding: 0 2em;}
}

@media (max-width: 1024px){
	.syousai-sec h3{
		position: absolute;
		font-size: 21px; font-size: 2.1rem;
		display: block;
		top: -15px;
		left: 10%;
		background-color: #fff;
		padding: 0 2em;}

	.syousai-sec dl dt{
		padding-bottom: 1em;}
}