@charset "utf-8";

/** ***************************************************************************
 * リセット
 * ************************************************************************* */

* { text-shadow:none; outline:none; box-sizing:border-box; }

body { max-width:100%; margin:0; padding:0; -webkit-text-size-adjust:none; }

body > * * { max-width:100%; }

h1, h2, h3, h4, h5, h6 { margin:0; padding:0; font:inherit; }

p { margin:0; padding:0; }

p + * { margin-top:1.5em; }

* + p { margin-top:1.5em; }

table { font:inherit; empty-cells:show; }

button,
input[type="button"] {
  margin: 0;
  padding: 0.3em 0.5em;
  cursor: pointer;
  font: inherit;
  vertical-align: middle;
  display: inline-block;
}

button::-webkit-search-decoration {
  display: none;
}

button::focus {
  outline-offset: -2px;
}

/** ***************************************************************************
 * エラーメッセージ
 * ************************************************************************* */

/** ***************************************************************************
 * Javascript
 */

#noscript {
	margin: 2em 0;
	padding: 2em;
	display: block;
	border-radius: 4px;
	border: solid 2px #f00;
}

#noscript p {
	margin: 0 auto;
	display: table;
	font-weight: bold;
}

/** ***************************************************************************
 * システム
 */

#error_area {
  max-width: 800px;
	margin: 2em auto;
	padding: 2em;
	border-radius: 4px;
	border: solid 2px #f00;
  background-color: #fff;
  display: none;
}

#error_area .attention {
  margin-bottom: 1em;
	color: #f00;
}

#error_mes,
#error_mes li {
  margin: 0;
  padding: 0;
  list-style: none;
}

#error_area ul li {
	line-height: 2;
}

/** ***************************************************************************
 * 全体
 * ************************************************************************* */

body {
  padding: 20px 10px 30px;
  color: #333;
  font: 14px/1.6 sans-serif;
  word-break: break-all;
}

body > * {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

#header {
  margin-bottom: 20px;
}

#header .title {
  margin-top: 0.25em;
  margin-bottom: 0.75em;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

#main .column ~ .column {
  margin-top: 30px;
}

#main div.form-contents {
	padding: 30px 14px;
	border: 1px solid #333;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:737px) {

  body {
    font-size: 16px;
  }

  #header .title {
    margin-top: 0.5em;
    font-size: 24px;
  }

  #header .title br {
    display: none;
  }

}

/** ***************************************************************************
 * 共用
 * ************************************************************************* */

/** ***************************************************************************
 * テキスト
 */

.hissu {
	color: #f00;
}

.note {
  margin-top: 0.5em;
  font-size: 0.875em;
}

/** ***************************************************************************
 * フォーム要素
 */

input[type="text"] {
  width: 20em;
  margin: 5px;
  padding: 0.4em;
  font: inherit;
  border: 1px solid #ccc;
}

input[name*="zip"] {
  width: 4em;
}

input[name*="zip2"] {
  width: 6em;
}

input[name*="year"],
input[name*="month"],
input[name*="day"] {
  width: 4em;
}

select {
  margin: 5px;
  padding: 0.525em;
  font: inherit;
  font-size: 0.875em;
  border: 1px solid #ccc;
}

textarea {
  width: 100%;
  height: 10em;
  padding: 0.4em;
  font: inherit;
  border: 1px solid #ccc;
}

/** ***************************************************************************
 * 送信ボタン
 */

div.form-button {
	text-align: center;
}

/** ***************************************************************************
 * 入力画面
 * ************************************************************************* */

/** ***************************************************************************
 * テーブル
 */

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (max-width:736px) {

  table table {
    margin-left: 2em;
  }

  table > tbody > tr {
    display: block;
  }

  table > tbody > tr ~ tr {
    margin-top: 1.5em;
  }

  table > tbody > tr > * {
    width: 100%;
    text-align: left;
    display: block;
  }

  table > tbody > tr > th {
    margin-bottom: 0.25em;
    padding: 0;
  }

  table > tbody > tr > td {
    padding: 0;
  }

}

/** ***************************************************************************
 * 確認画面
 * ************************************************************************* */

body.page-confirm
#main div.message {
  color: #f00;
}

/** ***************************************************************************
 * 完了画面
 * ************************************************************************* */

body.page-complete
#main div.message {
  max-width: 800px;
  margin: 50px auto;
  padding: 0 10px;
  display: table;
}

body.page-complete
#main div.message .complete {
  margin-bottom: 2em;
  font-size: 1.125em;
  text-align: center;
}