@charset "utf-8";

.sns {
	top: 500px !important;
	background-color: rgba(255,255,255,0) !important;
}

.brPC {
	display: inline-block;
}

.brSP {
	display: none;
}

#Main {
	font-family:'游ゴシック体','游ゴシック','YuGothM','YuGothB','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
	font-weight: bold;
}


#TOP {
	margin-top: -84px;
	padding-top: 84px;
}


/*-----------------------------------------------
	こちらの企画は終了しました
-----------------------------------------------*/

.closeEvent {
	max-width: 700px;
	width: 90%;
	box-sizing: border-box;
	padding: 3%;
	margin: 80px auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #1a0c08;
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 0.05em;
}


/*-----------------------------------------------
	タイトル
-----------------------------------------------*/

.Caretitle {
	width: 100%;
	height: 0;
	padding-top: 21.61583333%;
	background: url(../images/care/title.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
	position: relative;
}

.Caretitle div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-weight: normal;
	font-family: 'Raleway-Regular';
	color: #fff;
	letter-spacing: 0.075em;
}

.Caretitle div p {
	max-width: 1140px;
	width: 90%;
	height: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.Caretitle span {
	font-size: 30px;
}

.Caretitle span span {
	font-size: 14px;
}



/*-----------------------------------------------
	冒頭リード文
-----------------------------------------------*/

.About {
	padding: 100px 0;
	text-align: center;
}

.About p {
	font-size: 18px;
	line-height: 2em;
	letter-spacing: 0.08em;
	margin-bottom: 2.5em;
}

	.About p:first-child {
		font-size: 24px;
		letter-spacing: 0.15em;
	}

.About span {
	text-decoration: underline;
}


/*-----------------------------------------------
	CARE01～CARE03共通
-----------------------------------------------*/

.Contents1 {
	padding-bottom: 185px;
	text-align: center;
}

.Contents1 h2 {
	font-size: 24px;
	letter-spacing: 0.15em;
	margin-bottom: 75px;
}

.Contents1 h2 p span {
	color: #b7401e;
}

.Contents1 h2 ~ p {
	font-size: 18px;
	line-height: 2em;
	letter-spacing: 0.08em;
	margin-bottom: 2.5em;
}

/*-----------------------------------------------
	CARE1
-----------------------------------------------*/


.CARE01 h2 + p {
	text-decoration: underline;
}
	
.stepImg {
	width: 90%;
	max-width: 888px;
	margin: 100px auto;
}

.titleICO {
	width: 117px;
	height: 117px;
	font-size: 20px;
	letter-spacing: 0.08em;
	font-family:'Raleway-Bold';
	font-weight: normal;
	background: url(../images/care/care_ico.gif) no-repeat;
	background-size: contain;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	line-height: 1.5;
}

.titleICO span {
	font-family: 'Roboto-Bold';
	color: #1a0c08 !important;
	display: block;
	line-height: 1;
}

.Wakekata {
	border: 3px double #1a0c08;
	padding: 0 35px 50px;
	max-width: 888px;
	width: 90%;
	box-sizing: border-box;
	margin: 120px auto 0;
	position: relative;
}

.Wakekata dt {
	background: #fff;
	position: relative;
	font-size: 24px;
	display: inline-block;
	padding: 0 0.7em;
	letter-spacing: 0.15em;
	top: -0.8em;
	z-index: 2;
}

	.Wakekata dt::before {
		content: "";
		background: url(../images/care/title_ico.png) no-repeat;
		width: 18px;
		height: 34px;
		display: inline-block;
		vertical-align: text-bottom;
		margin-right: 0.5em;
	}
	
	.Wakekata dt::after {
		content: "";
		background: url(../images/care/title_ico2.png) no-repeat;
		width: 18px;
		height: 34px;
		display: inline-block;
		vertical-align: text-bottom;
		margin-left: 0.3em;
	}

.Wakekata dd {
	font-size: 18px;
	letter-spacing: 0.08em;
}

.Wakekata dd > p {
	padding-bottom: 2em;
}

.Wakekata dd div {
	font-size: 0;
}

.Wakekata dd div p {
	display: inline-block;
	font-size: 14px;
}

.Wakekata dd div p img {
	width: 90%;
}

	.Wakekata dd div p:first-child {
		margin: 0 4em 0 3em;
	}

.Wakekata dd div span {
	display: block;
	padding-top: 2em;
}


/*-----------------------------------------------
	CARE02
-----------------------------------------------*/

.Cream {
	text-align: center;
	padding-bottom: 2em;
	display: flex;
	width: 90%;
	max-width: 1004px;
	display: flex;
	margin: 80px auto 0;
}

.Cream div {
	width: 50%;
	box-sizing: border-box;
}

.Cream div p {
	text-align: left;
	text-indent: -1em;
	margin-left: 1em;
}

.Cream .Delicat p {
	padding: 0 10%;
}

.Cream .Essential p {
	padding: 0 20%;
}

.Cream .Delicat img {
	margin-top: 108px;
}

.Cream img {
	width: 15%;
}

.Cream > img {
	margin-top: 112px;
}

.Cream h5 {
	font-size: 18px;
	letter-spacing: 0.15em;
	font-weight: nomal;
	padding: 1em 0;
}

.Cream h5 ~ p {
	font-size: 16px;
	letter-spacing: 0.08em;
	line-height: 2em;
}

.CARE02 .Cream + ul {
	width: 90%;
	max-width: 1004px;
	display: flex;
	margin: 0 auto 110px;
}

.CARE02 .Cream + ul li {
	width: 50%;
	box-sizing: border-box;
}

	.CARE02 .Cream + ul li:first-child {
		margin-right: 6%;
	}

.Recom img {
	width: 100%;
}

.Recom {
	text-align: left;
	letter-spacing: 0.08em;
}

.Txt {
	padding: 1em 0 2em;
}

.CARE02 dl {
	border: 1px solid #ccc;
	padding:1.5em;
	text-align: left;
}

.CARE02 dd {
	font-weight: normal;
}

.Howto {
	border: 3px double #1a0c08;
	max-width: 1004px;
	width: 90%;
	margin: 0 auto;
	padding: 1.3% 2% 2%;
	box-sizing: border-box;
}

.Howto > p {
	font-size: 24px;
	letter-spacing: 0.15em;
	padding: 0.5em 0;
}

.Howto > span {
	letter-spacing: 0.15em;
}

.Howto ul {
	display: flex;
	margin: 2em 0;
}

.Howto li {
	width: 33.333%;
	box-sizing: border-box;
	margin-right: 4%;
	text-align: left;
}

.Howto li img {
	width: 100%;
}

	.Howto li:last-child {
		margin-right: 0;
	}
	
.Howto li span {
	display: block;
	font-size: 18px;
	margin: 0.7em 0;
}


/*-----------------------------------------------
	CARE03
-----------------------------------------------*/

.CARE03 h2 + p + p + ul {
	width: 50%;
	max-width: 502px;
	display: flex;
	margin: 0 auto 110px;
}

.CARE03 h2 + p + ul li {
	width: 100%;
	box-sizing: border-box;
}

.CARE03 dl {
	border: 1px solid #ccc;
	padding:1.5em;
	text-align: left;
	margin-top: 2.5em;
}

.CARE03 dd {
	font-weight: normal;
}


/*-----------------------------------------------
	MOVIE
-----------------------------------------------*/

.MOVIE h2 p {
	font-size: 16px;
	letter-spacing: 0.08em;
	margin: 1em 0;
}

.MovieBox {
	max-width: 804px;
	width: 90%;
	margin: 0 auto;
}

.MovieBox img {
	width: 100%;
}

video {
	width: 804px;
	height: 464px;
}


/*-----------------------------------------------
	ITEM
-----------------------------------------------*/

.Contents2 {
	padding-bottom: 185px;
	text-align: center;
}

.Contents2 h2 {
	font-size: 24px;
	letter-spacing: 0.15em;
	margin-bottom: 75px;
	font-family:'Raleway-Bold';
	font-weight: normal;
}

	.Contents2 h2 p::before {
		content: "-";
		display: inline-block;
		margin-right: 0.5em;
	}
	
	.Contents2 h2 p::after {
		content: "-";
		display: inline-block;
		margin-left: 0.5em;
	}
	

.Contents2 h2 span {
	display: block;
	font-family:'游ゴシック体','游ゴシック','YuGothM','YuGothB','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
	font-size: 14px;
	letter-spacing: 0.08em;
	margin: 1em;
	font-weight: bold;
}

.Contents2 h2 ~ p {
	font-size: 16px;
	line-height: 1.8em;
	letter-spacing: 0.08em;
	margin-bottom: 2.5em;
}

.ITEM ul {
	max-width: 926px;
	width: 90%;
	display: flex;
	margin: 0 auto;
	flex-wrap: wrap;
}

.ITEM li {
	width: 30.6666%;
	margin-right: 4%;
	padding-bottom: 5em;
	text-align: left;
	letter-spacing: 0.08em;
	box-sizing: border-box;
}

	.ITEM li:nth-child(3n) {
		margin-right: 0;
	}
	
.ITEM img {
	width: 100%;
	margin-bottom: 1em;
}

.Type {
	font-size: 14px;
	border: 1px solid #1a0c08;
	display: inline-block;
	padding: 0.3em 0.5em;
}

.Name {
	margin-top: 1em;
}

.ITEM a {
	display: inline-block;
	background: #1a0c08;
	color: #fff;
	letter-spacing: 0.06em;
	padding: 0.5em 1em;
}

.ITEM a::after {
	content: "";
	display: inline-block;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
	width: 8px;
	height: 8px;
	margin-left: 0.5em;
}



/*-----------------------------------------------
	Q&A
-----------------------------------------------*/

.QA dl {
	text-align: left;
	max-width: 1004px;
	width: 90%;
	box-sizing: border-box;
	border: 1px solid #1a0c08;
	margin: 0 auto 2.5em;
	padding: 2%;
}

.QA dl:last-child {
	margin-bottom: 0;
}

.QA dt {
	margin-bottom: 0.8em;
	text-indent: -1.5em;
	margin-left: 1.5em;
}

.QA dd {
	text-indent: -1.5em;
	margin-left: 1.5em;
}

.QA dt::before {
	content: "Q.";
	font-family: 'Raleway-Bold';
	margin-right: 0.5em;
	font-weight: normal;
}

.QA dd::before {
	content: "A.";
	font-family: 'Raleway-Bold';
	margin-right: 0.5em;
	font-weight: normal;
}




	@media screen and (min-width: 0) and (max-width: 768px) {

	#TOP {
		margin-top: -22.4vw;
		padding-top: 22.4vw;
	}
	
	.brSP {
		display: inline-block;
	}
	
	.brPC {
		display: none;
	}
	

	/*-----------------------------------------------
		こちらの企画は終了しました
	-----------------------------------------------*/

	.closeEvent {
		max-width: 700px;
		width: 90%;
		box-sizing: border-box;
		padding: 3%;
		margin: 2em auto;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #1a0c08;
		font-size: 4vw;
		font-weight: bold;
	}


	/*-----------------------------------------------
		タイトル
	-----------------------------------------------*/
	
	.Caretitle {
		width: 100%;
		height: 0;
		padding-top: 30.933333%;
		background: url(../images/care/title.jpg) no-repeat;
		background-size: cover;
		background-position: top 0 right 25%;
		position: relative;
	}
	
	.Caretitle div {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-weight: normal;
		font-family: 'Raleway-Regular';
		color: #fff;
		letter-spacing: 0.075em;
	}
	
	.Caretitle div p {
		max-width: 1140px;
		width: 100%;
		height: 100%;
		margin: 0 auto;
		padding: 0 4.4vw;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	
	.Caretitle span {
		font-size: 4.5vw;
	}
	
	.Caretitle span span {
		font-size: 3vw;
	}
	
	
	
	/*-----------------------------------------------
		冒頭リード文
	-----------------------------------------------*/
	
	.About {
		padding: 3em 0 5em;
		text-align: center;
	}
	
	.About p {
		font-size: 3.5vw;
		line-height: 1.7em;
		letter-spacing: 0.04em;
		margin-bottom: 2em;
	}
	
		.About p:first-child {
			font-size: 4.2vw;
			letter-spacing: 0.075em;
		}
	
	.About span {
		text-decoration: underline;
	}
	
	
	/*-----------------------------------------------
		CARE01～CARE03共通
	-----------------------------------------------*/
	
	.Contents1 {
		padding-bottom: 7em;
		text-align: center;
	}
	
	.Contents1 h2 {
		font-size: 4.2vw;
		letter-spacing: 0.075em;
		margin-bottom: 2em;
	}
	
	.Contents1 h2 p span {
		color: #b7401e;
	}
	
	.Contents1 h2 ~ p {
		font-size: 3.5vw;
		line-height: 1.7em;
		letter-spacing: 0.04em;
		margin-bottom: 2em;
	}
	
	/*-----------------------------------------------
		CARE1
	-----------------------------------------------*/
	
	
	.CARE01 h2 + p {
		text-decoration: underline;
	}
		
	.stepImg {
		width: 100%;
		max-width: 888px;
		margin: 3em auto;
	}
	
		.stepImg img {
			width: 100%;
		}
	
	.titleICO {
		width: 20vw;
		height: 20vw;
		font-size: 4vw;
		letter-spacing: 0.08em;
		line-height: 1.2;
		font-family: 'Raleway-SemiBold';
		background: url(../images/care/care_ico.gif) no-repeat;
		background-size: contain;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 1em;
		line-height: 1.5;
	}
	
	.titleICO span {
		font-family: 'Raleway-Medium';
		color: #1a0c08 !important;
		line-height: 1;
	}
	
	.Wakekata {
		border: 3px double #1a0c08;
		padding: 0 1em 0;
		max-width: 888px;
		width: 100%;
		box-sizing: border-box;
		margin: 4em auto 0;
		position: relative;
	}
	
	.Wakekata dt {
		background: #fff;
		position: relative;
		font-size: 4.2vw;
		display: inline-block;
		padding: 0 0.3em;
		letter-spacing: 0.075em;
		box-sizing: border-box;
		top: -0.8em;
		z-index: 2;
	}
	
		.Wakekata dt::before {
			content: "";
			background: url(../images/care/title_ico.png) no-repeat;
		    background-size: contain;
			width: 3vw;
			height: 6vw;
			display: inline-block;
			vertical-align: text-bottom;
			margin-right: 0.2em;
		}
		
		.Wakekata dt::after {
			content: "";
			background: url(../images/care/title_ico2.png) no-repeat;
		    background-size: contain;
			width: 3vw;
			height: 6vw;
			display: inline-block;
			vertical-align: text-bottom;
			margin-left: 0;
		}
	
	.Wakekata dd {
		font-size: 3.5vw;
		letter-spacing: 0.04em;
	}
	
	.Wakekata dd > p {
		padding-bottom: 2em;
	}
	
	.Wakekata dd div {
		font-size: 0;
	}
	
	.Wakekata dd div p {
		display: inline-block;
		font-size: 3.3vw;
	}
	
	.Wakekata dd div p img {
		width: 75%;
	}
	
	.Wakekata dd div p:nth-child(2) img {
		width: 95%;
		margin-left: 5%;
	}
	
		.Wakekata dd div p:first-child {
			margin: 0 auto 0 auto;
		}
	
	.Wakekata dd div span {
		display: block;
		padding-top: 1em;
		padding-bottom: 2.5em;
	}
	
	
	/*-----------------------------------------------
		CARE02
	-----------------------------------------------*/
	
	.Cream {
		text-align: center;
		padding-bottom: 2em;
		display: flex;
		width: 100%;
		max-width: 1004px;
		display: flex;
		margin: 3em auto 4em;
	}
	
	.Cream div {
		width: 50%;
		box-sizing: border-box;
	}
	
	.Cream div p {
		text-align: left;
		text-indent: -1em;
		margin-left: 1em;
	}
	
	.Cream .Delicat p {
		padding: 0 0;
	}
	
	.Cream .Essential p {
		padding: 0 0;
	}
	
	.Cream .Delicat img {
		margin-top: 26.3vw;
	}
	
	.Cream img {
		width: 40%;
	}
	
	.Cream > img {
		margin-top: 112px;
	}
	
	.Cream h5 {
		font-size: 3.5vw;
		letter-spacing: 0.075em;
		font-weight: nomal;
		padding: 1.5em 0 1em;
	}
	
	.Cream h5 ~ p {
		font-size: 3.5vw;
		letter-spacing: 0.04em;
		line-height: 1.7em;
	}
	
	.morebtn {
		width: 15vw;
		height: 15vw;
		text-indent: 0 !important;
		font-family: 'Raleway-Regular';
	}
	
	.CARE02 .Cream + ul {
		width: 100%;
		max-width: 1004px;
		display: flex;
		flex-direction: column;
		margin: 0 auto 1em;
	}
	
	.CARE02 .Cream + ul li {
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 3em;
	}
	
		.CARE02 .Cream + ul li:first-child {
			margin-right: 6%;
		}
	
	.Recom img {
		width: 100%;
	}
	
	.Recom {
		text-align: left;
		letter-spacing: 0.04em;
	}
	
	.Txt {
		padding: 1em 0 1em;
	}
	
	.CARE02 dl {
		border: 1px solid #ccc;
		padding: 1.2em;
		text-align: left;
	}
	
	.CARE02 dd {
		font-weight: normal;
	}
	
	.Howto {
		border: 3px double #1a0c08;
		max-width: 1004px;
		width: 100%;
		margin: 0 auto;
		padding: 1.3% 4% 2%;
		box-sizing: border-box;
	}
	
	.Howto > p {
		font-size: 4.2vw;
		letter-spacing: 0.075em;
		padding: 0.5em 0 0.2em;
	}
	
	.Howto > span {
		letter-spacing: 0.15em;
	}
	
	.Howto ul {
		display: flex;
		flex-wrap: wrap;
		margin: 1em 0 0;
	}
	
	.Howto li {
		width: 48%;
		box-sizing: border-box;
		margin-right: 4%;
		text-align: left;
		margin-bottom: 2em;
	}
	
	.Howto li:nth-child(2n) {
		margin-right: 0;
	}
	
	.Howto li img {
		width: 100%;
	}
	
		.Howto li:last-child {
			margin-right: 0;
		}

	.Howto li p {
		letter-spacing: 0;
	}
		
	.Howto li span {
		display: block;
		font-size: 3.8vw;
		margin: 0.7em 0;
		letter-spacing: 0.03em;
	}
	
	#Delicat, #Essential {
		padding-top: 22.4vw;
		margin-top: -22.4vw;
	}
	
	/*-----------------------------------------------
		CARE03
	-----------------------------------------------*/
	
	.CARE03 h2 + p + p + ul {
		width: 100%;
		max-width: 502px;
		display: flex;
		margin: 0 auto 4em;
	}
	
	.CARE03 h2 + p + ul li {
		width: 100%;
		box-sizing: border-box;
	}
	
	.CARE03 dl {
		border: 1px solid #ccc;
		padding: 1.2em;
		text-align: left;
		margin-top: 1em;
	}
	
	.CARE03 dd {
		font-weight: normal;
	}
	
	
	/*-----------------------------------------------
		MOVIE
	-----------------------------------------------*/
	
	.MOVIE h2 p {
		font-size: 3.5vw;
		letter-spacing: 0.04em;
		margin: 1em 0;
	}
	
	.MovieBox {
		width: 100%;
		margin: 0 auto;
	}
	
	.MovieBox img {
		width: 100%;
	}
	
	video {
		width: 100%;
		height: 57.711442786%;
	}
	
	/*-----------------------------------------------
		ITEM
	-----------------------------------------------*/
	
	.Contents2 {
		padding-bottom: 7em;
		text-align: center;
	}
	
	.Contents2 h2 {
		font-size: 4.2vw;
		letter-spacing: 0.075em;
		margin-bottom: 2em;
		font-family:'Raleway-SemiBold';
	}
	
		.Contents2 h2 p::before {
			content: "-";
			display: inline-block;
			margin-right: 0.5em;
		}
		
		.Contents2 h2 p::after {
			content: "-";
			display: inline-block;
			margin-left: 0.5em;
		}
		
	
	.Contents2 h2 span {
		display: block;
		font-family:'游ゴシック体','游ゴシック','YuGothM','YuGothB','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
		font-size: 3.5vw;
		letter-spacing: 0.04em;
		margin: 0.8em;
	}
	
	.Contents2 h2 ~ p {
		font-size: 3.5vw;
		line-height: 1.8em;
		letter-spacing: 0.04em;
		margin-bottom: 2.5em;
	}
	
	.ITEM ul {
		max-width: 926px;
		width: 100%;
		display: flex;
		margin: 0 auto;
		flex-wrap: wrap;
	}
	
	.ITEM li {
		width: 48%;
		margin-right: 4%;
		padding-bottom: 4em;
		text-align: left;
		letter-spacing: 0.04em;
		box-sizing: border-box;
	}
	
		.ITEM li:nth-child(3n) {
			margin-right: 4%;
		}
		
		.ITEM li:nth-child(2n) {
			margin-right: 0;
		}
		
	.ITEM img {
		width: 100%;
		margin-bottom: 1em;
	}
	
	.Type {
		font-size: 3.3vw;
		border: 1px solid #1a0c08;
		display: inline-block;
		padding: 0.3em 0.5em;
	}
	
	.Name {
		margin-top: 1em;
		font-size: 3.5vw;
	}
	
	.Price {
		font-family: 'Roboto-Medium','游ゴシック体','游ゴシック','YuGothM','YuGothB','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
	}
	
	.ITEM a {
		display: inline-block;
		background: #1a0c08;
		color: #fff;
		letter-spacing: 0.03em;
		padding: 0.5em 1em;
	}
	
	.ITEM a::after {
		content: "";
		display: inline-block;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		transform: rotate(45deg);
		width: 1.5vw;
		height: 1.5vw;
		margin-left: 0.5em;
	}
	
	
	
	/*-----------------------------------------------
		Q&A
	-----------------------------------------------*/
	
	.QA dl {
		text-align: left;
		max-width: 1004px;
		width: 100%;
		box-sizing: border-box;
		border: 1px solid #1a0c08;
		margin: 0 auto 2em;
		padding: 4%;
	}
	
	.QA dl:last-child {
		margin-bottom: 0;
	}
	
	.QA dt {
		margin-bottom: 0.8em;
		text-indent: -1.5em;
		margin-left: 1.5em;
	}
	
	.QA dd {
		text-indent: -1.5em;
		margin-left: 1.5em;
	}
	
	.QA dt::before {
		content: "Q.";
		font-family: 'Raleway-Bold';
		margin-right: 0.5em;
	}
	
	.QA dd::before {
		content: "A.";
		font-family: 'Raleway-Bold';
		margin-right: 0.5em;
	}

	}