@charset "utf-8";
/*////////////////////////////////////////////////////

  ZeroMail SKIN [pureblue]
  @copyright:(c)Tenderfeel(http://webtecnote.com/)
  @license: MIT-style license.
  
////////////////////////////////////////////////////*/

/* YUI CSS */
@import url("http://yui.yahooapis.com/3.1.1/build/cssreset/reset-min.css");
@import url("http://yui.yahooapis.com/3.1.1/build/cssfonts/fonts-min.css");

body {
    color:#424242;
    background-color:#FFFFFF;
	text-align:center;/* xml宣言対策(IE6) */
	font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}
body #wrap {
	overflow: hidden;
}
button:disabled {
	color:#a5a5a5;
	background-color:#dcdcdc !important;
}
button {outline:none;}
input{font-size:15px;}
.logo_area {
	max-width: 1000px;
    margin: 0 auto;
    text-align: left;
    padding: 0;
    overflow: hidden;
}
#container {
    max-width:1000px;
	margin:0 auto;
	text-align:left;
	padding: 0 2%;
	overflow: hidden;
}
.center {
	text-align: center;
}
.txt_left {
	text-align: left;
}

h1,
h2{
    margin:0.5em auto;
    text-align:center;
}

h1 {
    color:#000;
    font-weight:bold;
    font-size: 30px;
    margin-bottom: 30px;
    background: #62b3c5;
    padding: 15px;
    color: #fff;
}
h1 span {
	width: 1000px;
    margin: 0 auto;
    text-align: left;
    display: grid;
    padding-left: 10px;
}

h2 {
	margin-bottom:20px;
	font-weight:bold;
	text-shadow:0 1px 0 #efefef;
}
ol, ul {list-style: none;}
p { margin:0 0 10px 0; }
.clearfix {display: block;}
:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    line-height: 0;
    font-size: 0.1em;
}
/* 必須 */
span.hissu {
	color: #fff;
	background:#ed3c06;
	padding: 5px;
	border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    margin-right:15px;
}
/* 任意 */
span.ninni {
	color: #fff;
	background:#00c2e2;
	padding: 5px;
	border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    margin-right:15px;
}

ul {
	    padding-inline-start: 0 !important;
}

/*フロー*/
.step-wrapper {
	margin: 0 0 30px 0;
}
.step-wrapper .step-area {
    margin: 0 auto;
}
.step-area ul.step01-now li.step01 {
    background: url(../img/step-ar001.gif) #62b3c5 no-repeat right 0;
    color: #FFFFFF;
}
.step-area ul.step01-now li.step01.check {
    background: url(../img/step-ar002.gif) #f1f1f1 no-repeat right 0;
}
.step-area ul li.step01 {
    width: 33.33%;
}
.step-area ul.step01-now li.step02 {
    background: url(../img/step-ar003.gif) #f1f1f1 no-repeat right 0;
}
.step-area ul.step01-now li.step02.check {
    background: url(../img/step-ar001.gif) #62b3c5 no-repeat right 0;
    color: #FFFFFF;
}
.step-area ul li.step02 {
    width: 33.33%;
}
.step-area ul li {
    float: left;
    height: 70px;
}
.step-area ul li p {
    padding-left: 20px;
}
.step-area ul li span.small {
    font-size: 12px;
    display: block;
    padding-top: 14px;
    line-height: 1.4em;
}
.step-area ul li span.txt {
    font-weight: bold;
}
.step-area ul li span.txt {
    font-size: 18px;
    display: block;
    line-height: 1.4em;
}
.step-area ul.step01-now li.step01.completion {
    background: url(../img/step-ar003.gif) #f1f1f1 no-repeat right 0;
    color: #000;
}
.step-area ul.step01-now li.step02.completion {
    background: url(../img/step-ar002.gif) #f1f1f1 no-repeat right 0;
}
.step-area ul.step01-now li.step03 {
    background: #f1f1f1;
}
.step-area ul.step01-now li.step03.completion {
    background: url(../img/step-ar003.gif) #62b3c5 no-repeat right 0;
    color: #FFFFFF;
}
.step-area ul.step01-now li.step03.completion {
    background: #62b3c5;
    color:#fff;
}
.step-area ul li.step03 {
    width: 33.33%;
}
/* １段階小さい文字 */
.small {font-size:85%;}


/* ボタンの親 */
.button {
	text-align:center;
}

/* Table
--------------------------------------------------*/
#container img.flow {
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
    display: block;
}
img.logo {
	max-width: 220px;
	padding-top:10px;
}
form.zeromail {
    margin: 0 auto;
    font-size: 14px;
    padding: 0 2%;
}
.zeromail table,
.zeromail th,
.zeromail td {
	background-color:#fff;
	border-bottom:solid 1px #d5d5d5;
	border-collapse:collapse;
}
.zeromail table {
	width:100%;
	/*max-width: 718px;*/
    margin-bottom:10px;
    margin-top: 10px;
    border-top: solid 1px #d5d5d5;
}

.zeromail caption {
    margin:10px 0;
    padding:0.5em;
    background-color:#c9d9f0;
    color:#3762a8;
    font-weight:bold;
}

.zeromail thead th,
.zeromail tfoot th {
	background-color:#dbe5f3;
    text-align:center;
}
.zeromail thead td,
.zeromail tfoot td {
	background-color:#dbe5f3;
    text-align:center;
}

.zeromail tbody th {
    width:25%;
    line-height: 1.8em;
    padding:0.5em 0.5em 0.5em 1em;
	font-weight:normal;
    text-align:left;
    background: #def2fb;
    font-weight: bold !important;
    border-right: solid 1px #d5d5d5;
    border-left: solid 1px #d5d5d5;
}

.zeromail td {
    padding:1em;
	text-align:left;
	border-right: 1px solid #d5d5d5;
    border-bottom: 1px solid #d5d5d5;
}

/* Form
--------------------------------------------------*/
.zeromail legend {
	display:none;
}

.zeromail label{
    margin:0;
    line-height: 1.8em;
    font-weight: bold;
}

.zeromail label input.radio {
	margin-left: 10px;
}
.zeromail input[type=radio],
.zeromail input[type=checkbox] {
    margin-right:0.3em;
}
.zeromail input[type=checkbox] {
	width: 1.2em;
    height: 1.2em;
}
.zeromail input[type="radio"], .zeromail input[type="checkbox"]{
  position: relative;
  top: 4px;
}

.zeromail button,
.zeromail input[type=checkbox],
.zeromail input[type=radio],
.zeromail input[type=reset],
.zeromail input[type=submit] {
    padding:1px;
}

.zeromail [type=check],
.zeromail [type=radio],
.zeromail [type=submit] {
    cursor: pointer;
}

.zeromail [type=check] + label,
.zeromail [type=radio] + label {
    display: inline-block;
    cursor: pointer;
}

.zeromail [type=text],
.zeromail [type=password],
.zeromail textarea {
    padding: 1px;
    width:100%;
    line-height: 1.5em;
    border: 1px solid #aaa;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    word-break: break-all;
    border: 1px solid #c8c8c8;
    background: #FFFFFF;
    padding: 6px;
    margin: 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -moz-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.07);
    -webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.07);
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.07);
}

.zeromail input[type=text]:hover,
.zeromail [type=password]:hover,
.zeromail textarea:hover,
.zeromail input[type=text]:focus,
.zeromail [type=password]:focus,
.zeromail textarea:focus {
	background-color: #ECFBFF;
}
.zeromail td select.place_select {
	height: 30px;
}
input.radio.bt {
	width: 1.3em;
	height: 1.3em;
}

#check_area {margin-top:45px;}
p.caution {
	text-align: center;
	margin-top: 20px;
}
.ttl {
	font-size: 18px;
	font-weight: bold;
	padding: 0.5em;/*文字周りの余白*/
	color: #494949;/*文字色*/
	background: #fffaf4;/*背景色*/
	border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/
}
.ttl.blue {
	font-size: 18px;
	margin-top: 40px;
	font-weight: bold;
	padding: 0.5em;/*文字周りの余白*/
	color: #494949;/*文字色*/
	background: #eff9fd;/*背景色*/
	border-left: solid 5px #62b3c5;/*左線（実線 太さ 色）*/
}
#check_area #scroll_area {
	border: solid 1px #ccc;
	height: 200px;
	padding: 10px;
    width: 100%;
    background-color: #fff;
    overflow-y: scroll;
    width: 95%;
    margin: 30px auto;
    line-height: 1.5em;
}
#check_area #scroll_area dt {
	font-size: 15px;
	font-weight: bold;
	margin-top:10px;
}
#check_area .checkbox01 {
	margin: 30px auto 0;
    display: block;
    padding: 20px 60px;
    text-align: center;
    padding: 12px 20px;
    margin-top: 15px;
    background: #f0f7fc;
    position: relative;
}
#check_area .checkbox01 span.hissu {
	position: absolute;
    left: 15px;
}

/* Button
--------------------------------------------------*/
.zeromail .button {
    text-align: center;
    width: 100%;
    max-width: 650px;
    margin: 30px auto 15px;
}

.zeromail .button button {
    min-width:100px;
	_width:100px;
}

.zeromail button[type],
.zeromail button[id]{
    margin:0 auto;
	padding: 10px 15px;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
    line-height:1.4;
    cursor:pointer;
}

/*.zeromail button[type]:hover,
.zeromail button[id]:hover{
    background-color:#efefef;
}*/
.zeromail button[id=submit] {
    background-color: #fbda1d;
    border: none;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    background: url(../img/btn-ar001.png) #ff9600 no-repeat 320px;
    padding: 18px 85px 18px 89px;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    -moz-box-shadow: 0px 2px 0px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 2px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 2px 0px rgba(0,0,0,0.2);
}
body#check_page .zeromail button[id=submit] {
    background-color: #fbda1d;
    border: none;
    font-size: 20px;
    float: right;
    color: #fff;
    font-weight: bold;
    background: url(../img/btn-ar001.png) #ff9600 no-repeat right 20px center;
    padding: 18px 85px 18px 89px;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    -moz-box-shadow: 0px 2px 0px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 2px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 2px 0px rgba(0,0,0,0.2);
}

.zeromail button[disabled=disabled] {
	background-color: #e8e4c8;
}

.zeromail button[id=myreset],
.zeromail button[id=close]{
	background-color: #fbda1d;
    border: none;
    font-size: 20px;
    float: left;
    color: #fff;
    font-weight: bold;
    background: url(../img/btn-ar002.png) #007bff no-repeat 30px center;
    padding: 18px 85px 18px 89px;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    -moz-box-shadow: 0px 2px 0px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 2px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 2px 0px rgba(0,0,0,0.2);
}

.footer-copyright {
	background: #d2ecf7;
	padding: 2%;
	margin-top:20px;
}
.container-fluid p {
	text-align: center;
	margin:0;
}


/* 確認・エラー画面(check,error)
--------------------------------------------------*/
.zeromail #confirm td  {
    padding:1em;
}

/*入力エラー*/
.zeromail strong.error {
	display:inline;
	padding:0;
	margin:0;
	border:0;
	background:none;
    color:#A82B2B;
}

/* Message()のメッセージ */
.message {
	text-align:center;
}

/*エラー*/
.zeromail span.error{ 
	display:block;
	margin:1.5em 50px;
	padding:1.5em 0;
	background-color:#f7a499;
	border:solid 1px #e16c48;
	text-align:center;
	color:#181710;
}

/*エラーなし*/
.zeromail span.confirm{
	display: block;
    color: #000000;
    font-weight: normal;
    padding: 10px;
}


/* 送信完了(completion.html)
--------------------------------------------------*/
#completion .success {
	padding:1.5em;
	text-align:center;
	color:#4e4c35;
	line-height: 1.5em;
	font-size: 15px;
}
.success_ttl {
	text-align: center;
	padding-top:25px;
	font-size: 15px;
}

/*-----------------------------------------------------
  copyright
-----------------------------------------------------*/
.wtn_copyright {
	clear:both;
    margin-top:30px;
    font-size:10px;
	text-align:center;
}
.wtn_copyright a{
    display: none;
}

/*-----------------------------------------------------
  for Ajax
------------------------------------------------------*/
/*住所検索メッセージ*/
.zeromail .zipcode-message {
	font-size:85%;
	margin-left:0.5em;
}
/* Address Search */
.zeromail .zipcode-btn {
}
.zeromail .zipcode-message {
	color:#999;
}

/* Over Text Label */
.zeromail .overTxtLabel {
    color: #888888;
}

/* Validator Advice */
.zeromail input[type=text].validation-failed,
.zeromail textarea.validation-failed {
    border-color: #ff0000;
    background-color: #ffdddd;
}
.zeromail .validation-failed:hover,
.zeromail .validation-failed:focus {
	border-color: #FF6A6A;
	background-color: #FEE;
}
.zeromail .validation-advice {
    padding-bottom: 5px;
    font-weight: bold;
    color: #ff0000;
}

/* ローディング */
.spinner {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    background-color: #ffffff;
}

/* [Ajax] Result
--------------------------------------------------*/
/* 結果 */
#result {
	margin:10px 0;
	background-color: #DFE6FD;
	text-align:center;
}

#result div {
	border: 1px solid;
	border-color:#5082EB;
	padding:10px;
}

#result:empty {
	margin:0;
    padding:0;
    border-width: 0;
}​

/* 完了メッセージ */
#result .success{
}


/*-----------------------------------------------------
  ZeroMail ADMIN CSS
------------------------------------------------------*/
#admin #container {
	width:800px;
	margin:0 auto;
	position:relative;
	overflow:hidden;
	/zoom:1;
}

#admin h1 {
	margin-bottom:30px;
}

#admin h2 {
	margin-top:0;
	padding:0.3em 0;
	background:#efefef;
	border-top:solid 1px #ccc;
	border-bottom:solid 1px #ccc;
	zoom:1
}

#content {
	margin-bottom:50px;
}

/* Contents Area */
.logon #content {
	position:relative;
	width:630px;
	float:right;
}

#admin .button button#submit {width:auto;}

/* [ADMIN] Login Form
--------------------------------------------------*/
#admin form.login {
	text-align:center;
	margin:50px 0;
}

form.login button#submit {
	width:auto;
}

form.login dl {
	width:18em;
	margin:0 auto;
	text-align:left;
}
form.login dt {
	float:left;
	clear:left;
	width:6em;
	text-align:right;
}
form.login dd {
	margin-bottom:5px;
}

form.login #formid {
	ime-mode: disabled;
}

#admin #content .login .button {
	position:static;
	margin:1em;
	
}

.zeromail table tr.radio_row label {
		display: block;
		font-weight: normal;
}
.zeromail table tr td p.txt {
	margin-bottom: 0;
	padding-bottom:3px;
}
/* [ADMIN] Logout Button
--------------------------------------------------*/
.logout {
	position:absolute;
	top:1.2em;
	right:0.2em;
}

button#logout{
    border:solid 2px;
    border-color:#aaa #777 #555 #999;
    background-color:#888;
    line-height:1.4;
    margin:0;
	color:#fff;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	cursor:pointer;
}
button#logout:hover {
	background-color:#a00;
	border-color:#d00 #900 #700 #c00;
}

/* [ADMIN] $table content
--------------------------------------------------*/
#admin #content td {
	white-space:nowrap;
}

#admin #content .button {
	position:absolute;
	margin:0;
	padding:0;
	top:3em;
	right:0;
}

#admin form.loglist,
#admin form.directory {
	overflow:auto;
	min-width:520px;
	padding:50px 0;
}

td.nodata {
	text-align:center;
	padding:1em 0;
}

.download table dt {
	float:left;
	clear:left;
	margin:0 0 0.5em 0;
	padding:0.2em 0;
	width:30%;
	background-color:#efefef;
	text-align:center;
}

.download table dd {
	margin:0.5em 0 0.5em 35%;
	padding:0.2em 0;
	text-align:left;
}

.download td.action{
	text-align:center;
}

.download .option {
	margin:5px 0;
}

/* [ADMIN] Navigation
--------------------------------------------------*/
.logon #navi {
	width:170px;
	float:left;
}

form.idSelect {
	margin-bottom:1em;
}

#admin .navi li {
	list-style:inside disc;
	margin:0 0 0.5em 0;
}
#admin .navi a {
	text-decoration:none;
}


/* [ADMIN] Copyright
--------------------------------------------------*/
#admin .wtn_copyright {
	clear:both;
	margin:0 auto;
	padding-top:10px;
	border-top:solid 1px;
	font-size:85%;
}

/*479px以下*/
@media (max-width: 1059px) {
	.logo_area {padding-left:20px;}
}
@media (min-width: 769px) {
	.arrow.sp {display: none;}
}
/*768px以下*/
@media (max-width: 768px) {
	.arrow.sp {
		display: block;
		text-align: center;
		font-size: 20px;
    	padding: 2px;
	}
	h1 {
		font-size: 26px;
		margin-top: 5px;
	}
	.zeromail table {
	    /*width: 95%;*/
	}
	.zeromail table, .zeromail th, .zeromail td {
		border-bottom: none;
	}
	#container img {
		max-width: 718px;
		width: 100%;
	}
	.zeromail tbody th {
	    display: block;
	    margin: 0 auto;
	    padding-top: 9px;
	    border: none;
	    display: block;
    	width: auto;
	}
	.zeromail td {
	    padding: 1em 0 2.5em 0 !important;
	    display: block;
	    margin: 0 auto;
	    padding-top: 0;
	    border: none;
	}
	.zeromail td select.place_select {
		width: 100%;
    	height: 40px;
	}
	.zeromail table {border:none;}
	.zeromail table tr.radio_row label {
		display: block;
		font-weight: normal;
	}
	.step-wrapper {
	    padding: 0 10px;
	    margin: 0 0 20px 0;
	}
	.step-area {
	    margin-bottom: 25px;
	    margin: 0 auto;
	}
	.step-area ul.step01-now li.step01 {
	    background: #62b3c5;
	}
	.step-area ul.step01-now li.step01.check {
	    background: #f1f1f1;
	}
	.step-area ul.step01-now li.step01.completion {
	    background: #f1f1f1;
	}
	.step-area ul li.step01 {
	    width: auto;
	}
	.step-area ul li {
	    float: none;
	    height: auto;
	}
	.step-area ul li p {
	    padding: 5px 10px;
	    margin-bottom: 0;
	}
	.step-area ul li span.small {padding-top:0;}
	.step-area ul.step01-now li.step02 {
	    background: #f1f1f1;
	}
	.step-area ul li.step02 {
	    width: auto;
	}
	.step-area ul.step01-now li.step02.check {
	    background: #62b3c5;
	}
	.step-area ul.step01-now li.step02.completion {
	    background: #f1f1f1;
	}
	.step-area ul li {
	    float: none;
	    height: auto;
	}
	.step-area ul.step01-now li.step03 {
	    background: #f1f1f1;
	}
	.step-area ul.step01-now li.step03.check {
	    background: #f1f1f1;
	}
	.step-area ul.step01-now li.step03.completion {
	    background: #62b3c5;
	}
	.step-area ul li.step03 {
	    width: auto;
	}
	#check_area {margin:0;}
	#check_area #scroll_area {margin-top:10px;}
	.zeromail button[id=submit] {
		display: block;
	    width: 100%;
	    padding: 17px 40px 17px 50px;
	    -moz-box-sizing: border-box;
	    -webkit-box-sizing: border-box;
	    -o-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	    box-sizing: border-box;
	    font-size: 16px !important;
	    float: none;
	    margin-bottom: 15px;
	    background: url(../img/btn-ar001.png) #ff9600 no-repeat right 20px center;
	}
	.zeromail button[id=myreset], .zeromail button[id=close] {
		display: block;
	    width: 100%;
	    float: none;
	    padding: 17px 40px 17px 50px;
	    -moz-box-sizing: border-box;
	    -webkit-box-sizing: border-box;
	    -o-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	    box-sizing: border-box;
	    font-size: 16px !important;
	}
}
/*586px以下*/
@media (max-width: 586px) {
	#container img.logo {
		width:40%;
		margin: 0 auto;
		display: block;
	}
	#check_area .checkbox01 {
		padding:15px 20px 12px;
	}
	#check_area .checkbox01 span.hissu {
		display: block;
	    width: 15%;
	    position: initial;
	    margin: 0 auto 7px;
	}
	p.caution {font-size: 13px;}
	.zeromail #check_area .checkbox01 label {
		line-height: 1.3em;
	}
}

/*480px以上*/
@media (min-width: 480px) {
	#container img.pc {
		display: inline-block;
	}
	#container img.sp {
		display: none;
	}
}

/*479px以下*/
@media (max-width: 479px) {
	h1 { 
		font-size: 22px;
    	padding: 10px;
    }
	#container img.sp {
		display: inline-block;
	}
	#container img.pc {
		display: none;
	}
	img.logo {
	    max-width: 160px;
	}
	#check_area .checkbox01 {padding: 20px !important;}
	#check_area #scroll_area {width:90%;}
	.ttl.blue, .ttl {
		font-size: 15px !important;
	}
	#check_area #scroll_area dt {font-size:13.5px;}
	#check_area #scroll_area dd {font-size:13px;}
	#completion .success {
		padding:1.5em;
		text-align:center;
		color:#4e4c35;
		line-height: 1.5em;
		font-size: 13.5px;
	}
	.success_ttl {
		text-align: center;
		padding-top:25px;
		font-size: 13.5px;
	}
	.step-area ul li p {
	    padding: 5px 10px;
	    margin-bottom: 0;
	    display: inline-block;
	}
	.step-area ul li p span.small {
		padding-right: 20px;
		display: inline-block;
	}
	.step-area ul li span.txt {
		display: inline-block;
	}
}

/*375px以下*/
@media (max-width: 375px) {
	#container img.logo {
		width:55%;
		margin: 0 auto;
		display: block;
	}
	h1 {font-size: 22px;}
	.zeromail td {
    	padding: 1em 0 2em 0 !important;
    }
	#check_area .checkbox01 {
	    padding: 15px !important;
	}
}
