@charset "utf-8";
/* CSS Document */

/* ===== 共通パーツ--common ===== */

/* common-popup-bg */
.common-popup-bg {
	display:none;
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0.5);
	position:fixed;
	top:0;
	left:0;
	z-index: 2999;
}
.common-popup-main a img:hover {
	opacity:1;
}

/* common-popup-main */
.common-popup-main {
	display: none;
	width: 640px;
	margin: 0;
	padding:0;
	background-color: #ffffff;
	color: #333;
	position:fixed;
	z-index: 3000;
	border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
	line-height: 1.2em;
}

/* login-inner */
.common-popup-main .login-inner {
	padding: 20px 25px;
	text-align:left;
	background-color:#efefef;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	-webkit-border-bottom-left-radius:5px;
	-webkit-border-bottom-right-radius:5px;
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	position: relative;
}

/* balloon-area */
.common-popup-main .balloon-area {
	position: absolute;
	width: 440px;
	min-height: 40px; 
	margin: 1em;
	padding: 1.2em;
	top: -60px;
	left: 80px;
	font-size: 1.1em;
	line-height: 1.4em;
	text-align: center;
	letter-spacing: normal;
}
.common-popup-main .balloon-area::before {
	content: '';
	position: absolute;
	z-index: 1;
	width: 20px; height: 20px;
}
.common-popup-main .balloon-area::after {
	content: '';
	position: absolute;
	z-index: 2;
	top: 0; left: 0;
	width: 100%; height: 100%;
}
.common-popup-main .balloon-area>* {
	position: relative;
	z-index: 3;
}
.common-popup-main .balloon-area,
.common-popup-main .balloon-area::after {
	border-radius: 5px;
}
.common-popup-main .balloon-area,
.common-popup-main .balloon-area::before {
	box-shadow: 0 0 6px 0 rgba(163,163,163,0.7);
}
.common-popup-main .balloon-area,
.common-popup-main .balloon-area::before,
.common-popup-main .balloon-area::after {
	background: #fff;
}

.common-popup-main .balloon-area.bottom-left::before {
	bottom: -10px; left: 50px;
	transform: rotate(45deg) skew(20deg,20deg);
}
.common-popup-main .balloon-area .balloon-inner {
	display: inline-block;
	margin: 0 auto;
	text-align: left;
}
.common-popup-main .balloon-area .newmember-link {
	font-size: .9em;
}
.common-popup-main .newmember-link .icon-triangle-right {
	text-decoration: none;
}
.common-popup-main .newmember-link .icon-triangle-right::before {
	color: #3333cc;

}
.common-popup-main .newmember-link:hover .icon-triangle-right::before {
	color: #ff0000;
	text-decoration: none;
}
.common-popup-main .login-link {
	color: #ff7200;
	font-size: 1.2em;
	display: inline-block;
	margin: 0 .2em 0 0;
}

/* popup-btn-area */
.common-popup-main .popup-btn-area {
	letter-spacing: -.40em;
	margin:0 auto;
	width:580px;
	text-align:center;
	padding: 2.4em 0 1em;
}
.common-popup-main .popup-btn-area li {
	letter-spacing: normal;
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: top;
	width:48%;
	margin:0 1%;
	line-height: 1.6em;
}
.common-popup-main .popup-btn-area li a {
	display: table;
	font-size:1.4em;
	text-decoration:none;
	height: 80px;
	width: 100%;
	border-radius: 5px;
	position: relative;
}
.common-popup-main .popup-btn-area .login-btn {
	background-color:#f60;
	border:2px #f60 solid;
	color:#FFF;
}
.common-popup-main .popup-btn-area .noop-btn {
	background-color:#FFF;
	border:2px #555 solid;
	color:#555;
}
.common-popup-main .popup-btn-area .login-btn:hover {
	background-color:#f90;
	border:2px #f90 solid;
}
.common-popup-main .popup-btn-area .noop-btn:hover {
	border:2px #999 solid;
	color:#999;
}
.common-popup-main .popup-btn-area .btn-txt {
	display: table-cell;
	vertical-align: middle;
	text-decoration:none;
}
.common-popup-main .popup-btn-area .login-btn::after,
.common-popup-main .popup-btn-area .noop-btn::after {
	font-family: "sanwasvg";
	content: "\e91f";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	right: 8px;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	transition: 0.3s;
}
.common-popup-main .popup-btn-area .login-btn:hover::after,
.common-popup-main .popup-btn-area .noop-btn:hover::after {
	right: 5px;
}

/* 閉じるボタン */
.common-popup-main .close-btn {
	position:absolute;
	top:-10px;
	right:-10px;
}
.common-popup-main .close-btn a {
	border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;
	background-color:#CCC;
	width:34px;
	height:34px;
	line-height:34px;
	text-align:center;
	text-decoration:none;
	color:#FFF;
	font-weight:bold;
	display:block;
	font-size:18px;
	letter-spacing: normal;
}


/* ===== まとめ買い--estimate ===== */

/* step-inner */
#estimate-popup-main.common-popup-main .step-inner {
	padding: 20px 25px;
	text-align:left;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	-webkit-border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px;
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
}
#estimate-popup-main.common-popup-main .step-ttl {
	width: 100%;
	text-align: center;
	font-weight: bold;
	margin: 0 0 1.2em 0;
	letter-spacing: normal;
	line-height: 2.8em;
	padding: .5em 0 0 0;
}
#estimate-popup-main.common-popup-main .step-ttl .step-txt-block {
	display: inline-block;
	*display: inline; *zoom: 1;
	vertical-align: middle;
	text-align: center;
	line-height: 2.4em;
	color: #15887a;
}
#estimate-popup-main.common-popup-main .step-ttl .step-txt-block .block-01 {
	font-size: 1.7em;
	display: block;
}
#estimate-popup-main.common-popup-main .step-ttl .step-txt-block .block-02 {
	font-size: 3.2em;
}
#estimate-popup-main.common-popup-main .step-ttl .step-txt-block .block-03 {
	font-size: 2.0em;
}
#estimate-popup-main.common-popup-main .step-ttl .step-txt-main {
	color: #333;
	display: inline-block;
	*display: inline; *zoom: 1;
	font-size: 2.8em;
	vertical-align: middle;
	margin: 0 0 0 .3em;
}
#estimate-popup-main.common-popup-main .step-ttl .step-txt-main .txt-emphasis {
	color: #15887a;
}

/* flow-list */
#estimate-popup-main.common-popup-main .flow-list {
	letter-spacing: -.40em;
	text-align: center;
	padding: 0 0 4em 0;
}
#estimate-popup-main.common-popup-main .flow-list li {
	display: inline-block;
	*display: inline; *zoom: 1;
	letter-spacing: normal;
	width: 33%;
	position: relative;
	vertical-align: top;
}
#estimate-popup-main.common-popup-main .flow-list li::before {
	font-family: "sanwasvg";
	content: "\e919";
	position: absolute;
	top: 30%;
	left: -16px;
	font-size: 2.2em;
	color: #15887a;
}
#estimate-popup-main.common-popup-main .flow-list li:first-child::before {
	display: none;
}
#estimate-popup-main.common-popup-main .flow-list .flow-circle {
	width: 130px;
	height: 130px;
	background-color: #e1f6ec;
	margin: 0 auto;
	border-radius: 50%;
	position: relative;
}
#estimate-popup-main.common-popup-main .flow-list .flow-circle .number {
	position: absolute;
	top: 10%;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 2.0em;
	color: #15887a;
}
#estimate-popup-main.common-popup-main .flow-list .flow-circle .todo {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1.2em;
}
#estimate-popup-main.common-popup-main .flow-list .flow-txt {
	padding: 1em 0;
	width: 150px;
	margin: 0 auto;
	text-align: left;
}
#estimate-popup-main.common-popup-main .flow-list .flow-txt .txt-emphasis {
	color: #c00;
}


/* ===== 見積書発行--quotation ===== */

/* step-inner */
#quotation-popup-main.common-popup-main .step-inner {
	padding: 20px 25px;
	text-align:left;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	-webkit-border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px;
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
}
#quotation-popup-main.common-popup-main .step-ttl {
	width: 100%;
	text-align: center;
	font-weight: bold;
	margin: 0 0 1.2em 0;
	letter-spacing: normal;
	line-height: 2.8em;
	padding: .5em 0 0 0;
}
#quotation-popup-main.common-popup-main .step-ttl .step-txt-block {
	display: inline-block;
	*display: inline; *zoom: 1;
	vertical-align: middle;
	text-align: center;
	line-height: 2.4em;
	color: #9a0000;
}
#quotation-popup-main.common-popup-main .step-ttl .step-txt-block .block-01 {
	font-size: 1.7em;
	display: block;
}
#quotation-popup-main.common-popup-main .step-ttl .step-txt-block .block-02 {
	font-size: 3.2em;
}
#quotation-popup-main.common-popup-main .step-ttl .step-txt-block .block-03 {
	font-size: 2.0em;
}
#quotation-popup-main.common-popup-main .step-ttl .step-txt-main {
	color: #333;
	display: inline-block;
	*display: inline; *zoom: 1;
	font-size: 2.8em;
	vertical-align: middle;
	margin: 0 0 0 .3em;
}
#quotation-popup-main.common-popup-main .step-ttl .step-txt-main .txt-emphasis {
	color: #9a0000;
}
#quotation-popup-main.common-popup-main .step-ttl .step-txt-sub {
	color: #333;
	font-size: 1.4em;
	padding: .2em 0 0 0;
	font-weight: normal;
}

/* flow-list */
#quotation-popup-main.common-popup-main .flow-list {
	letter-spacing: -.40em;
	text-align: center;
	padding: 0 0 4em 0;
}
#quotation-popup-main.common-popup-main .flow-list li {
	display: inline-block;
	*display: inline; *zoom: 1;
	letter-spacing: normal;
	width: 33%;
	position: relative;
	vertical-align: top;
}
#quotation-popup-main.common-popup-main .flow-list li:first-child::before {
	display: none;
}
#quotation-popup-main.common-popup-main .flow-list .flow-circle {
	width: 130px;
	height: 130px;
	background-color: #ffefef;
	margin: 0 auto;
	border-radius: 50%;
	position: relative;
}
#quotation-popup-main.common-popup-main .flow-list .flow-circle .todo {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 1.4em;
	font-weight: bold;
	color: #9a0000;
	line-height: 1.2em;
}
#quotation-popup-main.common-popup-main .flow-list .flow-circle .todo .txt-annotation {
	font-size: .8em;
}
#quotation-popup-main.common-popup-main .flow-list .flow-txt {
	padding: 1em 0;
	width: 150px;
	margin: 0 auto;
	text-align: left;
}
#quotation-popup-main.common-popup-main .flow-txt .txt-emphasis {
	color: #c00;
}
#quotation-popup-main.common-popup-main .flow-txt .detail-link {
	font-size: .9em;
	display: block;
	margin: .5em 0 0 0;
	text-align: right;
}
#quotation-popup-main.common-popup-main .flow-txt .detail-link .icon-triangle-right {
	text-decoration: none;
}
#quotation-popup-main.common-popup-main .flow-txt .detail-link .icon-triangle-right::before {
	color: #3333cc;

}
#quotation-popup-main.common-popup-main .flow-txt .detail-link:hover .icon-triangle-right::before {
	color: #ff0000;
	text-decoration: none;
}
#quotation-popup-main.common-popup-main .popup-btn-area .noop-btn .txt-annotation {
	font-size: .7em;
}



/* ===== 配送のご注意--del-message ===== */

.common-popup-main .del-message-inner {
	padding: 20px 25px;
	text-align:left;
	background-color:#fff;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
}

.common-popup-main .del-message-inner {
	padding: 20px 25px;
	text-align:left;
	background-color:#fff;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
}

.common-popup-main .del-message-ttl {
	padding:.5em .3em;
	font-size: 1.3em;
	border-bottom: 1px solid #ccc;
	margin: 0 0 .8em 0;
}

.common-popup-main .del-message-txt {
	padding: .3em;
}