@charset "utf-8";


/*-----------------------------------------
	contents
-----------------------------------------*/

#Layer { position: fixed; top: 0; left: 0; margin: 0 !important; z-index: 20; height: 100%; width: 100%; background: #37434D; opacity: 0.1; }

article > section { margin-top: 40px; background: #FFF; border: 1px solid #BFC7CE; }
article > section.center * { text-align: center; }

.paging { margin: 30px; text-align: left; }
.paging select { margin: 0 10px 0 0; }

.pager { margin: 30px 0; }
.pager li { display: inline-block; margin: 0 8px; font-size: 16px; vertical-align: top; }
.pager li a { display: block; padding: 0 3px; text-decoration: none; border-bottom: 1px solid #FFF; }
.pager li a:hover { border-bottom: 1px solid #1DA7FA; }
.pager li img { vertical-align: baseline; }

article table { border: none; }
article table th,
article table td { padding: 13px 15px 12px; text-align: center; vertical-align: middle; }
article table th:first-child,
article table td:first-child { padding-left: 30px; }
article table th:last-child,
article table td:last-child { padding-right: 30px; }

article table thead th { padding-top: 0; color: #888; font-size: 12px; font-weight: bold; background: none !important; white-space: nowrap; }

article table .imgBtn { position: relative; display: inline-block; margin-left: 15px; color: #526D84; text-decoration: none; cursor: pointer; opacity: 0.6; }
article table .imgBtn:first-child { margin: 0; }
article table .imgBtn:hover { opacity: 1; }
article table .imgBtn.disabled { opacity: .2; pointer-events: none; }

article table .imgBtn:before,
article table .imgBtn:after {
	content: "";
	position: absolute;
	display: block;
	top: -30px;
	left: 50%;
	margin-left: -33px;
	padding: 5px 6px 4px;
	color: #FFF;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 1px;
	text-align: center;
	background: #1DA7FA;
	border-radius: 3px;
	white-space: nowrap;
	opacity: 0;
	z-index: 1;
	}
article table .imgBtn:after { top: -12px; margin-left: -6px; padding: 0; background: none; border: 6px solid transparent; border-top: 7px solid #1DA7FA; border-radius: 0; }
article table .imgBtn.setting:before { content: "条件を確認"; }
article table .imgBtn.edit:before { content: "編集する"; }
article table .imgBtn.recipt:before { content: "領収書ダウンロード"; margin-left: -59px; }

article table .imgBtn.download:before { content: "ダウンロード"; margin-left: -39px; background: #F29D00; }
article table .imgBtn.download:after { border-top-color: #F29D00; }
article table .imgBtn.upload:before { content: "アップロード"; margin-left: -39px; background: #526D84; }
article table .imgBtn.upload:after { border-top-color: #526D84; }
article table .imgBtn.delete:before { content: "削除"; margin-left: -16px; background: #333; }
article table .imgBtn.delete:after { border-top-color: #333; }
article table .imgBtn.bill:before { content: "請求書ダウンロード"; margin-left: -59px; background: #F29D00; }
article table .imgBtn.bill:after { border-top-color: #F29D00; }

article table .imgBtn.bill img,
article table .imgBtn.recipt img { margin: -2px 5px auto 0; vertical-align: middle; }

article table .imgBtn:hover:before,
article table .imgBtn:hover:after { opacity: 1; }

article section .systemMsg { position: relative; margin: 30px; padding: 0 0 0 28px; text-align: left; }
article section .systemMsg:before {
	content: "i";
	position: absolute;
	display: block;
	top: 50%;
	left: 0;
	margin-top: -11px;
	width: 20px;
	height: 20px;
	color: #FFF;
	font-size: 15px;
	font-weight: bold;
	line-height: 23px;
	text-align: center;
	background: #BFC7CE;
	border-radius: 20px;
}
article section .systemMsg.success { color: #00a549; }
article section .systemMsg.success:before { content: ""; background: #9ff5c5; }
article section .systemMsg.success:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
    margin: -6px 0 0 4px;
    width: 12px;
    height: 7px;
    background: none;
    border-left: 3px solid #FFF;
    border-bottom: 3px solid #FFF;
	border-radius: 0;
    -webkit-transform: rotate(-40deg);
    -ms-transform: rotate(-40deg);
    transform: rotate(-40deg);
	}
article section .systemMsg.error { color: #F33; }
article section .systemMsg.error:before { content: "!"; background: #FCC; }


/*-------------------------------------
	.contact
-------------------------------------*/

.contact main { margin-bottom: 110px; }

.contact #Step { display: table; margin: 0 0 40px; padding: 0; width: 100%; list-style-type: none; }
.contact #Step li { display: table-cell; padding: 0 10px 0 25px; width: 33%; height: 54px; line-height: 1; text-align: center; background: #f2f2f2; vertical-align: middle; }
.contact #Step li:nth-child(2) { padding-left: 30px; }
.contact #Step li:not(:last-child):before,
.contact #Step li:not(:last-child):after { content: ""; display: block; position: absolute; top: 0; right: -45px; border: 27px solid transparent; border-left: 18px solid #f2f2f2; z-index: 10; }
.contact #Step li:not(:last-child):before { top: -10px; right: -62px; border: 37px solid transparent; border-left: 25px solid #FFF; }
.contact #Step li.current { color: #FF4600; font-weight: bold; background: #FFDBD2; }
.contact #Step li.current:after { border-left-color: #FFDBD2; }

.contact #Step + p { margin: 0 0 60px; }

.contact article h2 { margin-bottom: 20px; }

.contact article .contacts { display: inline-block; margin: 0 auto 60px; }
.contact article .contacts h2 { display: inline-block; margin-bottom: 15px; padding: 0 12px; color: #000; font-size: 18px; font-weight: bold; letter-spacing: 2px; background: #FFF; }
.contact article .contacts h2:before { content: ""; position: absolute; top: 50%; left: -50%; width: 200%; height: 1px; background: #CCC; z-index: -1; }
.contact article .contacts p.tell { display: block; margin: 0; padding-left: 20px; font-size: 18px; }
.contact article .contacts p span { margin: 0 10px 0 0; font-size: 14px; font-weight: normal; vertical-align: bottom; }
.contact article .contacts p .tellBtn { margin: 0 0 10px; padding-left: 30px; font-size: 48px; }
.contact article .contacts p .tellBtn:before { top: 50%; margin-top: -13px; }

.contact article table { margin-bottom: 60px; }
.contact article table th { width: 220px; background: none; }
.contact article table th p { padding-left: 15px; color: #FF4600; font-size: 14px; line-height: 1.3; }
.contact article table th p i { margin-left: -15px; }
.contact article table td { padding: 15px; border-left: none; }
.contact article table td label { display: inline-block; margin: 3px 20px 3px 0; min-width: 30%; }
.contact article table td.name input[type=text],
.contact article table td.mail p:last-child input { max-width: 38%; }
.contact article table td.name.kanji input[type=text] { margin-left: 15px; }
.contact article table td.mail p,
.contact article table td.address p:not(:last-child) { margin-bottom: 15px; }
.contact article table td.mail p:last-of-type { margin: 0; padding-top:15px; border-top: 1px dotted #CCC; }
.contact article table td.mail b,
.contact article table td.address b { display: inline-block; width: 38%; max-width: 220px; }
.contact article table td.mail input,
.contact article table td.address input[type=text] { max-width: 60%; }
.contact article table td.address p:first-child input[type=text] { max-width: 80px; }
.contact article table td.address p:first-child input[type=text]:last-child  { max-width: 110px; }

.contact article h3 { margin-bottom: 15px; padding: 0; color: #FF4600; font-size: 30px; font-weight: normal; text-align: center; background: none; }
.contact article h3:before { display: none; }

.contact article #PrivacyUsage { margin: 0 0 60px; max-height: 300px; background: #f5f5f5; border: 1px solid #e5e5e5; overflow: hidden; }
.contact article #PrivacyUsage > ol { padding: 40px; max-height: 300px; overflow-y: auto; list-style-type: none; counter-reset: pu; }
.contact article #PrivacyUsage ol h4 { margin: 0 0 15px; color: #000; font-size: 16px; }
.contact article #PrivacyUsage ol h4:before { counter-increment: pu; content: counter(pu)"."; position: relative; display: inline-block; margin: 0 5px 0 0; font-weight: bold; }
.contact article #PrivacyUsage ol li { margin: 0 0 40px; font-size: 15px; }
.contact article #PrivacyUsage ol li p { margin: 0 0 15px; font-size: 15px; }
.contact article #PrivacyUsage ol li ol { margin: 0 0 20px 20px; list-style-type: decimal; }
.contact article #PrivacyUsage ol li ol ol { list-style-position: outside; list-style-type: lower-roman; }
.contact article #PrivacyUsage ol li ul { padding-left: 40px; list-style-position: outside; list-style-type: lower-alpha; }
.contact article #PrivacyUsage ol li li { margin: 0 0 8px; }

.contact article .center:last-child { margin-top: 30px; }
.contact article button[type=submit]  { padding: 15px 20px; min-width: 240px; font-size: 20px; border-radius: 27px; }

/* .contact.conf */
.contact.conf article table th,
.contact.conf article table td { padding: 15px 15px 13px; }
.contact.conf article table td.mail p,
.contact.conf article table td.address p:not(:last-child) { margin-bottom: 5px; }
.contact.conf article table td.mail p:last-child { padding-top: 0; border: none; }
.contact.conf article table td b { padding-right: 10px; color: #888; }

.contact.conf article .right { margin-top: -40px; }

/* .contact.comp */
.contact.comp  .center:last-child { padding-top: 60px; border-top: 1px dotted #CCC; }


/*-------------------------------------
	loading
-------------------------------------*/

#Loading { margin: 40px 0; text-align: center; }
#Loading .spinner {
	position: relative;
	margin: 0 auto;
	width: 70px;
	height: 70px;
	border: 5px solid rgba(29,167,250, 0.2);
	border-left: 5px solid #1DA7FA;
	border-radius: 50%;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: spinner 1.1s infinite linear;
	animation: spinner 1.1s infinite linear;
}

@-webkit-keyframes spinner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
         @keyframes spinner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

#Loading .msg { margin: 20px auto; }

#Loading .dott,
#Loading .dott:before,
#Loading .dott:after {
  width: 2px;
  height: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: dott 2.4s infinite ease-in-out;
  animation: dott 2.4s infinite ease-in-out;
}
#Loading .dott {
  display: inline-block;
  position: relative;
  margin: 0 0 0 8px;
  color: #545454;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
#Loading .dott:before,
#Loading .dott:after { content: ''; position: absolute; top: 0; }
#Loading .dott:before { left: -4px; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }
#Loading .dott:after { left: 4px; }

@-webkit-keyframes dott { 0%, 80%, 100% { box-shadow: 0 2px 0 -1.3em; } 40% { box-shadow: 0 2px 0 0; } }
         @keyframes dott { 0%, 80%, 100% { box-shadow: 0 2px 0 -1.3em; } 40% { box-shadow: 0 2px 0 0; } }


/*-------------------------------------
	modal
-------------------------------------*/

.modal {
    position: absolute;
    top: 120px;
    left: 50%;
    padding: 40px;
	min-width: 360px;
	max-width: 600px;
    background: #FFF;
    border: 1px solid #BFC7CE;
    box-shadow: 0 15px 40px rgba(139,158,173,0.5);
    z-index: 1000;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.modal:hover { box-shadow: 0 15px 40px rgba(139,158,173,0.7); }

.modal p { margin: 0 0 10px; }
.modal p.center { margin-top: 20px; }
.modal p:last-of-type { margin-bottom: 0; }

.modal table { margin: 20px -40px 30px; width: calc(100% + 80px); border: none; }
.modal table th,
.modal table td { padding: 13px 15px 12px; text-align: center; }
.modal table th:first-child,
.modal table td:first-child { padding-left: 40px; }
.modal table td:last-child { padding-right: 40px; }
.modal table thead th { padding-top: 0; color: #888; font-size: 12px; font-weight: bold; background: none !important; white-space: nowrap; }

.modal .btn { padding: 12px 20px 10px; min-width: 80px; font-size: 15px; }
.modal .btn ~ .btn { margin-left: 20px; }

.modal .closeBtn { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; cursor: pointer; z-index: 1100; }
.modal .closeBtn:before,
.modal .closeBtn:after { content: ""; position: absolute; top: 13.5px; left: 5px; width: 20px; height: 3px; background: #9CB1C2; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.modal .closeBtn:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.modal .closeBtn:hover:before,
.modal .closeBtn:hover:after { background: #889BAA; }


/*-------------------------------------
			CSS end
-------------------------------------*/