@charset "utf-8";

/* 脱毛について用CSS
========================================*/

/* SPonly */
@media screen and (max-width:767px){
	#mainArea {
		padding:50px 4%;
	}
	#mainArea h2 {
		color:#8d0404;
		font-size:178%;
		font-weight:bold;
		line-height:180%;
		text-align:center;
	}
	#mainArea h2:after {
		background:#8d0404;
		content:"";
		display:block;
		margin:30px auto 35px;
		height:2px;
		width:30px;
	}
	#mainArea h3 {
		color:#8d0404;
		font-size:130%;
		font-weight:bold;
		line-height:180%;
		margin-bottom:30px;
		text-align:center;
	}
	#mainArea section {
		margin-bottom:35px;
	}
	#mainArea section h4 {
		font-size:150%;
		font-weight:bold;
		line-height:140%;
		margin-bottom:30px;
		text-align:center;
	}
	#mainArea section h4 .tokuni {
		font-size:78%;
	}
	#mainArea section .articleWrap {
		background:#f9f9f8;
		border-radius:20px;
		padding:25px 6%;
	}
	#mainArea section .articleWrap h5 {
		color:#8d0404;
		font-size:130%;
		font-weight:bold;
		line-height:150%;
		position:relative;
	}
	#mainArea section .articleWrap h5.toggle:after {
		background:url(../img/depilation/arrow_toggle.png) no-repeat right center;
		background-size:auto 12px;
		content:"";
		display:block;
		margin-top:-6px;
		position:absolute;
		top:50%;
		right:0;
		height:12px;
		width:21px;
		transition:transform 0.3s ease;
	}
	#mainArea section .articleWrap h5.toggle.show:after {
		transform:rotateX(180deg);
	}
	#mainArea section .articleWrap .detailBox {
		margin-top:25px;
	}
	#mainArea section .articleWrap .detailBox .text {
		font-size:108%;
		line-height:165%;
	}
	#mainArea section .articleWrap .detailBox figure {
		margin:30px 0 15px;
		text-align:center;
	}
	#mainArea section .articleWrap .detailBox figure img {
		width:144px;
	}
	#mainArea .super {
		font-size:92%;
		margin-top:50px;
	}
}

/* PConly */
@media screen and (min-width:768px){
	#mainArea {
		margin:0 auto;
		padding:50px 0 100px;
		width:800px;
	}
	#mainArea h2 {
		color:#8d0404;
		font-size:157%;
		font-weight:bold;
		line-height:180%;
		text-align:center;
	}
	#mainArea h2:after {
		background:#8d0404;
		content:"";
		display:block;
		margin:35px auto 50px;
		height:2px;
		width:30px;
	}
	#mainArea h3 {
		color:#8d0404;
		font-size:129%;
		font-weight:bold;
		line-height:180%;
		margin-bottom:45px;
		text-align:center;
	}
	#mainArea section {
		margin-bottom:40px;
	}
	#mainArea section h4 {
		font-size:143%;
		font-weight:bold;
		line-height:140%;
		margin-bottom:35px;
		text-align:center;
	}
	#mainArea section h4 .tokuni {
		font-size:80%;
	}
	#mainArea section .articleWrap {
		background:#f9f9f8;
		border-radius:20px;
		padding:25px 40px;
	}
	#mainArea section .articleWrap.detailBox {
		padding:35px 40px;
	}
	#mainArea section .articleWrap h5 {
		color:#8d0404;
		font-size:129%;
		font-weight:bold;
		line-height:150%;
		margin:-10px 0;
		padding:10px 0;
	}
	#mainArea section .articleWrap h5.toggle {
		cursor:pointer;
		position:relative;
	}
	#mainArea section .articleWrap h5.toggle:after {
		background:url(../img/depilation/arrow_toggle.png) no-repeat right center;
		background-size:auto 12px;
		content:"";
		display:block;
		margin-top:-6px;
		position:absolute;
		top:50%;
		right:0;
		height:12px;
		width:21px;
		transition:transform 0.3s ease;
	}
	#mainArea section .articleWrap h5.toggle.show:after {
		transform:rotateX(180deg);
	}
	#mainArea section .articleWrap .detailBox {
		margin-top:30px;
	}
	#mainArea section .articleWrap .text {
		float:left;
		font-size:108%;
		line-height:180%;
		width:510px;
	}
	#mainArea section .articleWrap .text p {
		margin-bottom:20px;
	}
	#mainArea section .articleWrap .text p:last-of-type {
		margin-bottom:0;
	}
	#mainArea section .articleWrap figure {
		float:right;
		width:160px;
	}
	#mainArea section .articleWrap figure img {
		width:100%;
	}
	#mainArea .super {
		font-size:93%;
		margin-top:80px;
		text-align:center;
	}
}