@import "/magazine/css/common_sp.css";

#base_head { width: 100%; height: auto; margin: 0 auto; }
#base_head img { width: 100%; height: auto; vertical-align: top; }
#magazineContents { padding: 0 5% 5%; box-sizing: border-box; background-color: #fff; }

.pc_only { display: none; }
.sp_only { display: block; }

/*iphon5*/	
@media screen and (max-width: 320px) {
	#excellula h2 p {
		margin: 10% 0% 10% 34%;
		letter-spacing: -0.05em;
	}
	#excellula #feature p {
		font-size: 75%;
		padding: 6% 6%;
	}
}
@media screen and (min-width: 425px) {
	#excellula h2 p {
		margin: 14% 0% 10% 35%;
	}
}

#magazineContents ul li:hover {
  opacity: 1 !important;
}

/* read */
#magazineContents #read {
  padding-top: 15px;
	background-position-y: 8em;
	background-size: 100%;
}
#magazineContents #read h2 { width: 280px; position: absolute; top: -50px; right: 0; left: 0; margin: 0 auto; }
#magazineContents #read p { color: #603813; }
#magazineContents #read .block { position: relative; margin: 0 0 20px; }
#magazineContents #read .ill { width: 50%; height: auto; margin: 20px auto 0; }
#magazineContents #read .block:nth-of-type(3) .ill { width: 45%; height: auto; margin: -10px auto 0; }
#magazineContents #read .ill img { width: 100%; height: auto; }

.btnArea .btn {
	height: auto;
	margin: 5% auto 0;
}
p.btn a {
	width: 100%;
  border-radius: 2px;
	text-decoration: none;
	font-size: 14px;
  font-weight: bold;
  display: block;
  position: relative;
  margin: 0 auto;
}
p.btn a:after {
  content: '';
  width: 8px;
	height: 100%;
	background: url(/magazine/2018/180516/images/btn_icon_f.svg) no-repeat;
  background-size: 100%;
  background-position: center;
	position: absolute;
  top: 0;
  right: 20px;
}

div:after {
  display: none;
}

/* 蜈ｱ騾� */
p {
  margin: 0;
}
.e_box img {
  width: 100%;
  display: block;
}
p.btn a {
  text-align: center;
}

/* acess */
#acess {
  margin: 20px auto;
}
#acess {margin-top: 3rem;}
#acess-title {padding-bottom: 3%; background: url(/magazine/2018/180516/images/bg1_sp.png) repeat left top; background-size: 100%;}
#acess-title p {width: 95%; margin: 0 auto; padding: 5%; background-color: #fff; box-sizing: border-box; border-radius: .5rem; font-size: 13px;}
#acess .block {padding-bottom: 1rem; background-color: #FFEFF4;}
#acess .block h3 {margin: 0;}
#acess .block p.txt {font-size: 13px;}
#acess #block1,
#acess #block2,
#acess #block3,
#acess #block4 {padding: 0 15px; box-sizing: border-box;}

._left {float: left;}
._right {float: right;}

	/* #acess #block1 & #block2 */
	#acess #block2 .txt {margin-top: 1rem;}
	
	/* #acess #block3 & #block4 */
	#acess #block3 .pic {width: 48%; height: auto;}
	#acess #block3 .txt {width: 50%;}
	#acess #block4 .pic {float: none; width: 80%; height: auto; margin: 1rem auto;}
	#acess #block4 .txt {float: none;}
	
#acess .btnArea {padding: 3.5rem 0 2.5rem; box-sizing: border-box; background: url(/magazine/2018/180516/images/acess_footer_sp.png) no-repeat left top; background-size: 100%;}
#acess .btnArea .btn {width: 80%; height: auto; margin: 0 auto;}

/* cmp */
#cmp {
  margin: 20px auto;
}
#cmp {position: relative; margin-top: 1rem; background: url(/magazine/2018/180516/images/bg2_sp.png) repeat-y left top; background-size: 100%;}
#cmp .txt { width: 95%; margin: 1rem auto; padding: 5%; background-color: #fff; border-radius: .5rem; box-sizing: border-box; font-size: 12px;}
#cmp .txt strong {font-size: 18px;}
#cmp .pic {position: absolute; right: -1rem; bottom: 2rem; width: 7rem; height: auto;}
#cmp .btnArea {padding: 1rem 0; box-sizing: border-box;}
#cmp .btnArea .btn {width: 80%; height: auto; margin: 0 0 0 2.5%;}

/* tact */
#tact {
  margin: 20px auto;
}
#tact {margin-top: 1rem;}
#tact .btnArea {margin-top: -1rem;}
#tact .btnArea .btn {width: 80%; height: auto; margin: 0 auto;}

/* salomethyl */
#salomethyl {
  margin: 20px auto;
}
#salomethyl {position: relative; margin-top: 1rem;}
#salomethyl .btn {width: 80%; height: auto; position: absolute; right: 0; left: 0; bottom: 2rem; margin: auto;}

/* excellula */
#excellula {
  margin: 20px auto;
}
#excellula {margin: 1rem 0 0;}
#excellula-series {padding-top: 1rem; background: url(/magazine/2018/180516/images/excellula_bg_sp.jpg) no-repeat center top; background-size: 100%; box-sizing: border-box;}
#excellula-series .txt {text-align: center;}
#excellula-series h3 {width: 100%; margin: 0 auto;}
#excellula-series dl {width: 90%; margin: 0 auto 1rem;}
#excellula-series dt, #excellula-series dd {margin: 0; padding: 0;}
#excellula-series dt {position: relative; color: #DA80AE; margin: 1rem 0 .5rem; padding-left: 1rem; font-weight: bold; font-size: 12px;}
#excellula-series dt span {position: absolute; left: 0;}
#excellula-series dt sup {font-size: 10px;}
#excellula-series dd {padding-left: 1rem; font-size: 12px;}
#excellula-series #set {width: 90%; margin: 0 auto;}
#excellula .btn {width: 80%; height: auto; padding: 1rem 0 2rem; margin: auto;}
#excellula p.ex {width: 90%; margin: 0 auto 1rem; font-size: 80%; color: #888;}