@charset "utf-8";

/* contact_sp.css：SP
 * ======================================
 * Main
 * ======================================
 */

/* Main
------------------------------------------------------------------ */
#subPage #content h1 > span {
	color: #726256;
	font-size: 2.5em;
	font-weight: normal;
	letter-spacing: 0.05em;
}
h1 + p {
	font-size: 1.2em;
	text-align: left;
	padding: 0 6%;
}
.button {
	background: #ffffff;
	margin: 30px auto;
	text-align: center;
	width: 56%;
}
.button a {
	border: 1px solid #dadada;
	padding: 10px 0;
}
.button a:after {
	border: 3px solid #da809e;
	border-top: 3px solid transparent;
	border-left: 3px solid transparent;
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
}
#content section.info_area{
margin:40px 0 30px;
position: relative;
z-index: 1;
}
.info_area ul{
padding: 0 6%;
}
.info_area ul li{
width: 100%;
list-style-type: none;
text-align: center;
}
.info_area ul li img{
	width: 85%;
	height: auto;
}
.info_area ul li + li{
margin-top: 40px;
}
#content section.info_area ul li a{
	display: inline-block;
}
#content section.info_area ul li a:after{
content: none;
}


/* #doctors_cat01
------------------------------------------------------------------ */

#doctors_cat01 ul li span.att{
color: #666;
font-size: 90%;
}
#doctors_cat01 ul li span.att a{
color: #d57f99;
display: inline-block;
width: auto;
}
#doctors_cat01 ul li span.att a:after{
content: none;
}
#doctors_cat01 ul li a.link{
color: #d57f99;
display: inline;
width: auto;
}
#doctors_cat01 ul li a.link:after{
content: none;
}
#content .sendComplete {
	border-top: 1px solid #dadada;
}
#subPage #content .sendComplete h2 {
	padding: 20px 0 10px 0;
	font-size: 1.6em;
	font-weight: normal;
}
.sendComplete {
	text-align: left;
}
.sendComplete li {
	padding: 0 1em;
	list-style-type: none;
	position: relative;
	word-break: break-all;
}
.sendComplete li:before {
	content: "";
	width: 1em;
	height: 0.5em;
	position: absolute;
	top: 0.56em;
	left: 0;
	background: url(../../images/common/li_round.png) no-repeat center left;
	background-size: contain;
}
.sendComplete li span {
	color: #d57f99;
}
.sendComplete li .top_banner{
margin: 10px 0;
}
#content .sendComplete li .top_banner a:after{
content: none;
}
.sendComplete li .top_banner img{
width: 100%;
}
.sendComplete .main_banner{
margin:0 0 20px;
}
/* modal
------------------------------------------------------------------ */
.remodal h3 {
	font-size: 1.2em;
	padding: 10px 0 30px 0;
	letter-spacing: 0.1em;
}
.remodal ol {
	padding: 0 0 0 2em;
}
.remodal li {
	text-align: left;
	color: #fff;
}
.remodal {
	position: relative;
	padding: 30px 6%!important;
}
#subPage .remodal-confirm {
	margin: 30px 0 0 0;
	padding: 0.2em 2em 0.5em;
	border: 1px solid #ddd;
}
.remodal-confirm span {
	font-size: 1.4em;
	margin: 0 0.5em 0 0;
}

/* Massonry（ドクターコスメ並べ替え）
------------------------------------------------------------------ */
/* tab */
.tab_container {
	padding: 20px ;
	background: #f0f0f0;
}
#tab {
	margin: 0 auto;
	width: 56%;
	border: 1px solid #dadada;
	position: relative;
	background: #fff;
}
#tab li {
	display: none;
	text-align: center;
	padding: 1em;
}
#tab.active li + li {
	border-top: 1px dotted #dadada;
}
#tab li.select {
	display: block;
}
#tab.active li {
	display: block;
}
#tab li.select:after {
	border: 3px solid #da809e;
	border-top: 3px solid transparent;
	border-left: 3px solid transparent;
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
}
#tab.active li.select:after {
	border: none;
}


/* masonry */
.masonry .grid {
	display: none;
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	width: 100%;
	list-style-type: none;
	border-bottom: 1px solid #dadada;
	padding: 30px 0;
	background: #fff;
}
.masonry.category-all .all,
.masonry.category-doctors .doctors,
.masonry.category-set .set,
.masonry.category-medicine .medicine,
.masonry.category-skinPeel .skinPeel,
.masonry.category-other .other,
.masonry.category-supplement .supplement{
  display: list-item !important;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -webkit-animation: show 150ms linear forwards;
          animation: show 150ms linear forwards;
}
.masonry .grid dl {
	width: 100%;
}
.masonry .grid dt {
	width: 30%;
	float: left;
	margin: 0 0 10px 0;
}
.masonry .grid dt img {
	width: 100%;
}
.masonry .grid dt + dd {
	width: 65%;
	float: right;
}
.masonry .grid dd + dd {
	clear: both;
}
.masonry .grid h3 span {
	font-size: 1.2em;
	color: #d57f99;
	display: block;
}
.masonry .grid dd table {
	margin: 10px 0;
	border-top: 1px solid #dadada;
	width: 100%;
}
.masonry .grid dd table th {
	border-bottom: 1px solid #dadada;
	padding: 1em 0.5em 1em 0;
}
.masonry .grid dd table td {
	border-bottom: 1px solid #dadada;
	padding: 1em 0;
}

.masonry .grid dd table .price {
	color: #d57f99;
}
.masonry .grid dd table .quantity {
	width: 40%;
	text-align: right;
	padding-right: 0;
}
.masonry .grid dd table select {
	width: 70%!important;
	height: 2em;
	margin: 0 0.5em 0 0;
}


/* #doctors_cat02
------------------------------------------------------------------ */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
textarea {
	-webkit-appearance: none;
}
#doctors_cat02 {
	margin: 30px 0;
}
#subPage #doctors_form {
	padding: 30px 0 0;
}
#doctors_cat02 form dl + dl {
	margin: 40px 0 0;
}
#doctors_cat02 form dt {
	font-weight: bold;
	font-size: 1.2em;
}
#doctors_cat02 form dt span {
	color: #e5001f;
	border: 1px solid #e5001f;
	font-size: 0.75em;
	vertical-align: middle;
	margin: 0 0 0 1em;
	padding: 0.2em 0.4em;
	font-weight: normal;
}
#doctors_cat02 form dd {
	margin: 0.5em 0 0 0;
}
#doctors_cat02 form dd .note{
	color: #d57f99;
}
#doctors_cat02 form dd input {
	width: 100%;
	border-radius: 5px;
	border: 1px solid #dadada;
	background:none;
	outline: none;
	padding: 0.5em 1em;
}
#doctors_cat02 form dd select{
	width: 100%;
	height: 3em;
	outline: none;
	border: 1px solid #dadada;
}
#doctors_cat02 form strong {
	font-weight: normal;
	font-size: 0.9em;
	margin: 0 0 0 1em;
}
#doctors_cat02 form em {
	font-size: 0.85em;
	color: #d57f99;
	font-style: normal;
	margin-top: 0.5em;
	line-height: 1.5;
	display: block;
	padding-left: 1em;
	text-indent: -1em;
}
#doctors_cat02 form em + em {
	margin-top: 0.25em;
}

/* 生年月日 */
#doctors_cat02 form .birth input {
	width: 80%;
}
#doctors_cat02 form .birth dd {
	display: inline-block;
	width: 36%;
}
#doctors_cat02 form .birth dd + dd {
	width: 28%;
}
#doctors_cat02 form .birth dd input {
	margin: 0 0.5em 0 0;
	width: 78%;
}
#doctors_cat02 form .birth dd select {
	width: 70%;
	margin: 0 0.5em 0 0;
}
#doctors_cat02 form .birth dd + dd {
	margin: 0 0 0 0.5em;
}

/* Email */
#doctors_cat02 form .email02 {
	margin: 10px 0 0 0;
}

/* 住所 */
#doctors_cat02 form .zip01 {
	width: 30%;
	margin: 0 0 0 0.5em!important;
}
#doctors_cat02 form .zip02 {
	width: 40%;
	margin: 0!important;
}
#doctors_cat02 form .zip select {
	width: 30%;
	margin: 10px 0;
}
#doctors_cat02 form .zip input:last-child {
	margin: 0!important;
}

/* TEL */
#doctors_cat02 form .tel input {
	width: 30%;
}

/* 支払・配送方法 */
#doctors_cat02 form .payment dt {
	padding: 0 0 0.5em 0;
	border-bottom: 1px solid #dadada;
}
#doctors_cat02 form .payment dd {
	padding: 1em 0 1em 4em;
	position: relative;
	border-bottom: 1px solid #dadada;
	margin: 0;
	line-height: 1.4;
}
#doctors_cat02 form .payment dd span {
	display: block;
	font-size: 1.4em;
	line-height: 1.8;
}
#doctors_cat02 form .payment dd input {
	width: 20px;
	height: 20px;
	border: none;
	position: absolute;
	top: 50%; left: 0.75em;
	margin-top: -10px;
}

/* 受取希望項目 */
#doctors_cat02 form .date-select dd{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
#doctors_cat02 form .date-select dd div{
	width: 48%;
	position: relative;
	padding: 1em 0 1em 4em;
	font-size: 0.9em;
}
#doctors_cat02 form .date-select dd div input{
	width: 20px;
    height: 20px;
    border: none;
    position: absolute;
    top: 50%;
    left: 0.75em;
    margin-top: -10px;
}
#doctors_cat02 form .date-select dd div label{
	font-size: 1.4em;
}
/* 受取希望日時 */
#doctors_cat02 form .date dt small{
	font-size: 0.8em;
	margin-left: 1em;
}

#doctors_cat02 form .date select {
	width: 80%;
	margin: 0 0.5em 0 0;
}
#doctors_cat02 form .date dd {
	width: 28%;
	display: inline-block;
}
#doctors_cat02 form .date .md {
	width: 40%;
	margin-right: 10px;
}
#doctors_cat02 form .date .time {
	width: 40%;
}
#doctors_cat02 form .date .time select,#doctors_cat02 form .date .md select {
	width: 100%;
}

/* テキストエリア */
#doctors_cat02 form textarea {
	width: 100%;
	height: 16em;
	outline: none;
	padding: 0 0.5em;
	border-radius: 5px;
	border: 1px solid #dadada;
}

/* フォームボタン */
#doctors_cat02 .formButton {
	text-align: center;
}
#doctors_cat02 .formButton {
	text-align: center;
	margin: 50px 0;
}
#doctors_cat02 .formButton input {
	width: 40%;
	background: #e2dfdd;
	color: #736357;
	border: none;
	padding: 0.5em 0;
	outline: none
}
#doctors_cat02 .formButton input:hover {
	cursor: pointer;
}

/* 確認画面 */
#formWrap .formTable {
	width: 100%;
	margin: 10px 0 0 0;
}
#formWrap .formTable dt {
	font-weight: bold;
	border-bottom: 1px solid #dadada;
}
.error_messe {
	color: red;
}
.confirmBox {
	margin: 30px 0;
	padding: 15px 0;
	text-align: center;
	border-top: 1px solid #dadada;
	border-bottom: 1px solid #dadada;
}
#subPage #content .confirmBox h2 {
	font-weight: normal;
	padding: 0 0 10px 0;
	font-size: 2em;
}
#doctors_cat02 .formButton a {
	width: 70%;
	background: #e2dfdd;
	color: #736357;
	border: none;
	outline: none;
	margin: 0 auto;
	padding: 0.5em 1em;
}
#doctors_cat02 .formButton a:after {
	border: none;
}
#formWrap h4 {
	margin: 0 0 20px 0;
}
#formWrap .formTable + .sendComplete {
	margin: 60px 0 0 0;
}


/* お客様情報入力ボタン */
#formlink {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 10;
	padding: 10px;
	background: rgba(0,0,0,0.5);
}
#formlink div {
	background: #fff;
	margin: 0 auto;
}