@charset "UTF-8";

/* -----------------------------------------------
FileName: mirable.css
----------------------------------------------- */
/* WEBフォント */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');
/*
font-family: "Zen Kaku Gothic New", sans-serif;
font-family: "Josefin Sans", sans-serif;
*/

#mirable {
	font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 23px;
    color: #323232;
    font-weight: 400;
}

#mirable img {
	max-width: 100%;
	height: auto;
}

#mirable .mhg_container {
    padding: 110px 0 110px 0;
    position: relative;
}

#mirable .mhg_container.bg1 {
    background-color: rgba(245,246,246,1);
}

#mirable .mhg_container.bg2 {
    background-color: rgba(241,241,241,1);
}

#mirable .mhg_container.bg3 {
	border-top: 1px solid #6c9abb;
}

#mirable .contents {
	width: 1300px;
	margin: 0 auto;
    box-sizing: border-box;
}

#mirable .contents.w1000 {
	width: 1000px
}

#mirable h2.title {
	font-family: "Josefin Sans", sans-serif;
    background: none;
    text-align: center;
    line-height: 1em;
    font-size: 3.21739em;
    font-weight: 400;
    margin: 0 0 .8em 0;
    color: #6c9abb;
	padding: 0 0 0 0;
}

#mirable h2.title.jp {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 1.65217em;
	font-weight: 500;
	margin: 0 0 1.6em 0;
}


#mirable #aboutArea {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#mirable #aboutArea article {
	width: 550px;
}

#mirable #aboutArea article dl {
	color: #6c9abb;
	margin: 0 0 1em 0;
}

#mirable #aboutArea article dl dt {
	font-family: "Josefin Sans", sans-serif;
	line-height: 1em;
	font-size: 0.86957em;
	margin: 0 0 1em 0;
}

#mirable #aboutArea article dl dd {
	font-weight: 500;
	font-size: 1.65217em;
	line-height: 1.6em;
}

#mirable #aboutArea article p {
	color: #6c9abb;
	font-size: 1.3913em;
	margin: 0 0 1em 0;
	line-height: 1.7em;
}

#mirable #aboutArea article ul {
	display: flex;
	flex-direction: column;
	gap:.85em 0;
}

#mirable #aboutArea article ul li {
	line-height: 1em;
	display: flex;
	align-items: center;
	gap:0 .5em;
}

#mirable #aboutArea article ul li::before {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	background: url("../../../img/usr/lp/mirable/icon_circle.webp") center center no-repeat;
	background-size: contain;
	margin: .15em 0 0 0;
}

#mirable #aboutArea article ul li span {
	font-size: 1.08696em;
	width: calc(100% - (12px + .5em));
}

#mirable #aboutArea figure {
	width: 700px;
}

#mirable #abouArea2 h2 {
	background: none;
	line-height: 1.6em;
	text-align: center;
	margin: 0 0 1.6em 0;
	padding: 0;
	color: #6c9abb;
	font-size: 2em;
	font-weight: 500;
	letter-spacing: .05em;
}

#mirable #abouArea2 figure {
	margin: 0 0 2.6em 0;
}

#mirable #abouArea2 article {
	text-align: center;
	color: #6c9abb;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap:2em 0;
}

#mirable #abouArea2 article p {
	line-height: 2.4em;
	font-size: 1.21739em;
	letter-spacing: .05em;
}

#mirable .voiceArea header {
	margin: 0 0 2.4em 0;
}

#mirable .voiceArea header dl {
	color: #6c9abb;
	margin: 0 0 .85em 0;
}

#mirable .voiceArea header dl dt {
	font-family: "Josefin Sans", sans-serif;
	line-height: 1em;
	font-size: 1.34783em;
	margin: 0 0 .6em 0;
	display: flex;
	align-items: center;
}

#mirable .voiceArea header dl dt::before {
	content: "";
	display: block;
	width: 25px;
	height: 1px;
	background: #6c9abb;
	margin: 0 .5em 0 0;
}

#mirable .voiceArea header dl dd {
	font-size: 2em;
	line-height: 1.6em;
}

#mirable .voiceArea header p {
	font-size: 1.04348em;
}

#mirable .voiceArea .movieWrap {
	margin: 0 0 2em 0;
}

#mirable .voiceArea .movieWrap .movie {
	position: relative;
	padding-top: 56.25%;
	
}

#mirable .voiceArea .movieWrap .movie iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#mirable .voiceArea article {
	display: flex;
	flex-direction: column;
	gap:1.8em 0;
}

#mirable .voiceArea article p {
	line-height: 2em;
	letter-spacing: .1em;
}

#mirable .voiceArea article p small {
	font-size: 0.86957em;
}

#mirable .pointArea {
	color: #6c9abb;
}

#mirable .pointArea header {
	text-align: center;
	margin: 0 0 2em 0;
}

#mirable .pointArea header dl {
	font-family: "Josefin Sans", sans-serif;
	margin: 0 0 1em 0;
}

#mirable .pointArea header dl dt {
	line-height: 1em;
	font-size: 1.65217em;
	margin: 0 0 .3em 0;
}

#mirable .pointArea header dl dd {
	font-size: 4.34783em;
	line-height: 1em;
	letter-spacing: .06em;
}

#mirable .pointArea header h2 {
	background: none;
	font-weight: 400;
	padding: 0 0 0 0;
	font-size: 2.17391em;
	line-height: 1.6em;
}

#mirable .pointArea .videoArea {
	margin: 0 0 2em 0;
}

#mirable .pointArea .videoArea .videoWrap {
	position: relative;
	padding-top: 56.25%;
	margin: 0 0 1.6em 0;
}

#mirable .pointArea .videoArea .videoWrap video {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

#mirable .pointArea .videoArea aside {
	display: flex;
	flex-direction: column;
	gap:.85em 0;
}

#mirable .pointArea .videoArea aside p {
	font-size: 1.04348em;
}

#mirable .pointArea .videoArea aside p small {
	font-size: 0.83333em;
}

#mirable .pointArea article {
	max-width: 1000px;
	margin: auto;
	display: flex;
	flex-direction: column;
	gap:2.8em 0;
}

#mirable .pointArea article aside h3 {
	font-weight: 500;
	background: none;
	padding: 0 0 0 0;
	line-height: 1.5em;
	margin: 0 0 1em;
	display: flex;
	font-size: 1.65217em;
	gap:0 .5em;
}

#mirable .pointArea article aside h3 span {
	width: calc(100% - (6px + .5em));
}

#mirable .pointArea article aside h3::before {
	content: "";
	display: block;
	width: 6px;
	height: 32px;
	background: #95b6ce;
	margin: .4em 0 0 0;
}

#mirable .pointArea article aside p {
	font-size: 1.04348em;
	margin: 1.3em 0 0 0;
}

#mirable .pointArea article aside p small {
	font-size: .83333em;
	line-height: 1.6em;
}

#mirable .itemArea {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#mirable .itemArea .photo {
	width: 670px;
}

#mirable .itemArea .photo .mainSlider {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

#mirable .itemArea .photo figure p {
    position: relative;
    padding-top: 100%;
}

#mirable .itemArea .photo figure p img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center center;
}

#mirable .itemArea .photo .mainSlider .main-button-prev {
    display: block;
    width: 60px;
    height: 60px;
    background: url("../../../img/usr/lp/mirable/prev.png") center center no-repeat;
    background-size: contain;
    position: absolute;
    left: 1em;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 30;
    cursor: pointer;
}

#mirable .itemArea .photo .mainSlider .main-button-next {
    display: block;
    width: 60px;
    height: 60px;
    background: url("../../../img/usr/lp/mirable/next.png") center center no-repeat;
    background-size: contain;
    position: absolute;
    right: 1em;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 30;
    cursor: pointer;
}

#mirable .itemArea .data {
	width: 530px;
}

#mirable .itemArea .data dl {
	color: #6c9abb;
	margin: 0 0 1.2em 0;
}

#mirable .itemArea .data dl dt {
	font-size: 2em;
	font-weight: 500;
	line-height: 1.4em;
	margin: 0 0 .6em 0;
	white-space: nowrap;
}

#mirable .itemArea .data dl dd {
	line-height: 1em;
	font-size: 1.04348em;
	font-family: "Josefin Sans", sans-serif;
}

#mirable .itemArea .data .item-price {
	font-size: 1.21739em;
	line-height: 1em;
	margin: 0 0 1.6em 0;
}

#mirable .itemArea .data .item-price small {
	font-size: .7em;
}

#mirable .itemArea .data h3 {
	color: #6c9abb;
	font-weight: 500;
	font-size: 1.08696em;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 .5em 0;
}

#mirable .itemArea .data h3::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: #6c9abb;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	z-index: 10;
}

#mirable .itemArea .data h3 span {
	background: #fff;
	display: block;
	padding: 0 .5em 0 0;
	position: relative;
	z-index: 30;
	width: fit-content;
}

#mirable .itemArea .data ul {
	margin: 0 0 3em 0;
	display: flex;
	flex-direction: column;
	gap:.7em 0;
}

#mirable .itemArea .data ul li {
	display: flex;
	font-size: 1.04348em;
	letter-spacing: 0;
	white-space: nowrap;
	line-height: 1em;
}

#mirable .itemArea .data ul li::before {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	background: url("../../../img/usr/lp/mirable/icon_circle.webp") center center no-repeat;
	background-size: contain;
	margin: .3em .5em 0 0;
}

#mirable .itemArea .data ul li span {
	width: calc(100% - (12px + .5em));
}

#mirable .itemArea .buyBtn {
	width: 320px;
}

#mirable .itemArea .buyBtn a {
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1em;
	width: 100%;
	color: #fff;
	text-decoration: none;
	background: #6c9abb;
	border-radius: 9999px;
	font-size: 1.08696em;
	padding: .7em 0;
}

#mirable .itemArea .buyBtn a.soon {
	cursor: default;
	background: #ccc;
}

#mirable .itemArea .buyBtn a::before {
	content: "";
	display: block;
	background: url("../../../img/usr/lp/mirable/icon_cart.png") center center no-repeat;
	background-size: contain;
	width: 24px;
	height: 22px;
	margin: .1em .8em 0 0;
}

#mirable .itemArea .buyBtn a.soon::before {
	display: none;
}

#mirable .itemArea .buyBtn a:hover {
	opacity: .8;
}

#mirable .itemArea .buyBtn a.soon:hover {
	opacity: 1;
}


#mirable #faqArea {
	display: flex;
	flex-direction: column;
	gap:2em 0;
}

#mirable #faqArea article {
	background: #fff;
	box-sizing: border-box;
	padding: 1.4em 1.8em;
}

#mirable #faqArea article h3 {
	display: flex;
	padding: 0 0 0 0;
	font-weight: 400;
	font-size: 1.21739em;
	line-height: 1.4em;
	color: #6c9abb;
	margin: 0 0 .6em 0;
}

#mirable #faqArea article h3 span {
	display: flex;
	width: calc(100% - 40px);
}

#mirable #faqArea article h3 span::before {
	content: "";
	display: block;
	width: 1px;
	height: 24px;
	background: #6c9abb;
	margin: .3em .6em 0 0;
}

#mirable #faqArea article h3::before {
	content: "Q";
	font-family: "Josefin Sans", sans-serif;
	margin: .1em 0 0 0;
	width: 40px;
}

#mirable #faqArea article .ans {
	display: flex;
}

#mirable #faqArea article .ans::before {
	content: "A";
	font-size: 1.21739em;
	font-family: "Josefin Sans", sans-serif;
	margin: .05em 0 0 0;
	color: #6c9abb;
	width: 40px;
}

#mirable #faqArea article .ans aside {
	display: flex;
	width: calc(100% - 40px);

}

#mirable #faqArea article .ans aside::before {
	content: "";
	display: block;
	width: 1px;
	height: 24px;
	background: #6c9abb;
	margin: .5em .6em 0 0;
}

#mirable #faqArea article .ans aside p {
	font-size: 1.04348em;
}

#mirable #faqArea article .ans aside p small {
	font-size: .83333em;
	margin: .6em 0 0 0;
	display: block;
}


@media screen and (max-width: 640px) {

    #mirable {
        font-size: 16px;
    }
    
    #mirable .mhg_container {
        padding: 50px 0 50px 0;
    }



    #mirable .contents {
        width: 92%;
        margin: 0 auto;
    }

	#mirable .contents.w1000 {
		width: 92%;
	}

	#mirable h2.title {
		font-size: 2.2em;
		margin: 0 0 .8em 0;
	}

	#mirable h2.title.jp {
		font-size: 1.5em;
		margin: 0 0 1.6em 0;
	}

	#mirable #aboutArea {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap:2em 0;
	}

	#mirable #aboutArea article {
		width: 100%;
	}

	#mirable #aboutArea article dl {
		margin: 0 0 .8em 0;
	}

	#mirable #aboutArea article dl dt {
		font-size: 1em;
	}

	#mirable #aboutArea article dl dd {
		font-weight: 500;
		font-size: 6.4vw;
		line-height: 1.6em;
	}

	#mirable #aboutArea article p {
		font-size: 5vw;
		line-height: 1.8em;
	}

	#mirable #aboutArea article ul li {
		line-height: 1em;
		display: flex;
		align-items: center;
		gap:0 .5em;
	}

	#mirable #aboutArea article ul li::before {
		width: 8px;
		height: 8px;
	}

	#mirable #aboutArea article ul li span {
		font-size: 3.85vw;
		width: calc(100% - (8px + .5em));
	}

	#mirable #aboutArea figure {
		width: 100%;
	}

	#mirable #abouArea2 h2 {
		line-height: 1.8em;
		font-size: 5.3vw;
		font-weight: 500;
		margin: 0 0 1.4em 0;
	}

	#mirable #abouArea2 figure {
		margin: 0 0 1.6em 0;
	}

	#mirable #abouArea2 article {
		text-align: center;
		color: #6c9abb;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap:.85em 0;
	}

	#mirable #abouArea2 article p {
		line-height: 2.2em;
		font-size: 3.8vw;
		letter-spacing: .05em;
	}

	#mirable .voiceArea header {
		margin: 0 0 2em 0;
		font-size: 2.6vw;
	}

	#mirable .voiceArea header p {
		font-size: 1.3em;
	}

	#mirable .voiceArea .movieWrap {
		margin: 0 0 1.2em 0;
	}

	#mirable .voiceArea article {
		gap:1.2em 0;
		font-size: .9em;
	}

	#mirable .voiceArea article p {
		letter-spacing: .05em;
	}

	#mirable .pointArea header {
		margin: 0 0 2em 0;
		font-size: 2.6vw;
	}

	#mirable .pointArea header h2 {
		font-size: 1.8em;
	}

	#mirable .pointArea .videoArea aside {
		gap:.5em 0;
	}

	#mirable .pointArea .videoArea aside p {
		font-size: 1em;
	}

	#mirable .pointArea article {
		max-width: 100%;
		gap:2.4em 0;
		font-size: 2.6vw;
	}

	#mirable .pointArea article aside h3 span {
		width: calc(100% - (4px + .5em));
	}

	#mirable .pointArea article aside h3::before {
		width: 4px;
		height: 1em;
		margin: .3em 0 0 0;
	}

	#mirable .pointArea article aside p {
		font-size: 1.25em;
		margin: 1em 0 0 0;
	}


	#mirable .itemArea {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap:1.6em 0;
	}

	#mirable .itemArea .photo {
		width: 100%;
	}

	#mirable .itemArea .photo .mainSlider .main-button-prev {
		width: 34px;
		height: 34px;
	}

	#mirable .itemArea .photo .mainSlider .main-button-next {
		width: 34px;
		height: 34px;
	}

	#mirable .itemArea .data {
		width: 100%;
	}

	#mirable .itemArea .data dl {
		margin: 0 0 1.2em 0;
		font-size: 3.5vw;
	}

	#mirable .itemArea .data .item-price {
		font-size: 6vw;
		line-height: 1em;
		margin: 0 0 1.3em 0;
	}


	#mirable .itemArea .data ul {
		margin: 0 0 3em 0;
		font-size: 3.6vw;
	}


	#mirable .itemArea .data ul li::before {
		width: 8px;
		height: 8px;
		margin: .2em .5em 0 0;
	}

	#mirable .itemArea .data ul li span {
		width: calc(100% - (8px + .5em));
	}

	#mirable .itemArea .buyBtn {
		width: 100%;
	}

	#mirable .itemArea .buyBtn a {
		padding: .85em 0;
	}


	#mirable #faqArea {
		display: flex;
		flex-direction: column;
		gap:1.5em 0;
	}

	#mirable #faqArea article {
		padding: 1.8em 1.6em;
		font-size: 3.5vw;
	}



	#mirable #faqArea article h3 span {
		display: flex;
		width: calc(100% - 30px);
	}

	#mirable #faqArea article h3 span::before {
		height: 1em;
		margin: .3em .6em 0 0;
	}

	#mirable #faqArea article h3::before {
		margin: .1em 0 0 0;
		width: 30px;
	}

	#mirable #faqArea article .ans::before {
		width: 30px;
	}

	#mirable #faqArea article .ans aside {
		width: calc(100% - 30px);

	}

	#mirable #faqArea article .ans aside::before {;
		width: 1px;
		height: 1em;
	}







}


@media screen and (max-width: 320px) {

    #tournesol_serum {
        font-size: 14px;
    }



	
}