@charset "utf-8";

/* ===========================================================================
   ブックサービス専用注文フォーム
   （旧サイト /books/assets/css/purchase.css を移植し、依存していた
     サイト共通 CSS（basic.css・books共通 common.css）の必要な分だけを
     「基本」の節に取り込んだもの。このフォームはこのファイルだけで完結する）
   =========================================================================== */

/* --- 基本（旧 basic.css / 旧 books 共通 CSS 相当の最小限） --- */
html {
  font-size: 62.5%; /* 1rem = 10px（旧サイトの基準に合わせる） */
}
body {
  margin: 0;
  color: #444;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
  font-size: 1.6rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3, p, ul, ol, li, table {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
img {
  border: 0;
  vertical-align: middle;
}
table {
  border-collapse: collapse;
  table-layout: fixed;
}
input, textarea {
  font-family: inherit;
}
a {
  color: #0066cc;
}
.left { float: left; }
.right { float: right; }
.clear { overflow: hidden; }
.mb10 { margin-bottom: 10px; }
.mt20 { margin-top: 20px; }
.bold { font-weight: 700; }
.red { color: red; }
.nobr { white-space: nowrap; }
@media screen and (min-width: 769px) {
  .sp_only { display: none !important; }
}
@media screen and (max-width: 768px) {
  .pc_only { display: none !important; }
  img { max-width: 100%; }
}

/* --- 全体・ヘッダ --- */
div#content {
  font-size: 1.6rem;
  width: 95%;
  margin: 0 auto 20px;
}
header {
  margin: 10px;
  height: 60px;
  overflow: hidden;
}
h1 {
  float: left;
}
h1 img {
  height: 34px;
  width: auto;
  margin-top: 8px;
}
h2 {
  float: left;
  font-size: 2.5rem;
  padding: 0.1em 0 0 1em;
}
h3 {
  font-size: 1.9rem;
  margin: 0 0 1em;
}
.inner {
  width: 96%;
  margin: 0 auto;
}
.navi {
  margin: 20px 0;
}

/* --- フェーズの表示切り替え（active の付いたものだけ表示） --- */
#phase1, #phase2, #phase3 {
  display: none;
}
#phase1.active, #phase2.active, #phase3.active {
  display: block;
}
#finishArea {
  display: none;
}
#finishArea.active {
  display: block;
}

/* --- フェーズ1: 注文の本の一覧 --- */
.order {
  width: 100%;
  border: 1px solid #ccc;
}
.order td, .order th {
  padding: 5px 1%;
  vertical-align: top;
  word-break: break-all;
}
.order thead tr .col1 { text-align: left; }
.order tr {
  overflow: hidden;
  box-sizing: border-box;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
.order thead tr { border-bottom: 1px solid #ccc; }
.order tfoot tr { border-top: 3px double #ccc; }
.order .input { display: none; }
.order .input td.col1 { padding: 0 0 0 40px; }
.order .col1 { width: 79%; padding: 5px 10px; }
.order .col2 { width: 8%; text-align: center; border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
.order .col3 { width: 11%; text-align: right; padding: 0.5em; }
.order .col2 input { width: 2.5em; text-align: center; }
.order .orderHeader { font-weight: 700; font-size: 1.5rem; }
.order .orderHeader .col3 { text-align: center; padding: 0.5em 0.7em; }
.order .isbn { letter-spacing: 0.1em; }
.order .btn, .order .delete {
  color: #000;
  cursor: pointer;
  display: inline-block;
  margin: 0 5px 0 0;
}
.order .btn img, .order .delete img {
  position: relative;
  top: -2px;
  display: inline-block;
  margin: 0 5px 0 0;
}
.order .delete img {
  position: relative;
  display: block;
  margin: 0 5px 0 0;
  top: 3px;
}
.order .btn { margin: 0 0 0 2em; display: inline-block; }
.order .btn:hover { text-decoration: none; }
.order a.btn { color: #000; text-decoration: none; }
.order .add-isbn { width: 7em; font-size: 14px; }
.order .checkdigit { width: 1.5em; font-size: 14px; }
.order .space > td { padding-top: 4em; }
#toPhase2.disable { opacity: 0.5; }

/* --- フェーズ2: お届け先情報の入力 --- */
#phase2 table { width: 100%; }
#phase2 table th, .confirmAddress th {
  text-align: right;
  vertical-align: top;
  width: 12em;
  box-sizing: border-box;
  font-size: 1.3rem;
  padding: 5px 0 0;
}
#phase2 table td {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 0 0;
}
#phase2 table td input, #phase2 table td textarea {
  font-size: 14px;
  width: 100%;
  border: 1px solid #ccc;
  padding: 2px 5px;
  box-sizing: border-box;
  display: block;
}
#phase2 table td textarea { height: 5em; }
#phase2 table td span.error {
  display: block;
  color: red;
  font-size: 12px;
}
#privacy_policy {
  font-size: 14px;
  margin: 1em auto;
}
#privacy_policy .privacy {
  height: 15em;
  margin: 30px auto;
  display: block;
  overflow: scroll !important;
  border: 2px solid #e6e6e2;
  padding: 10px !important;
  font-size: 0.8em;
  color: #444;
}

/* --- フェーズ3: ご注文内容の確認 --- */
.confirmAddress td { padding: 3px 0 3px 20px; }
.confirmOrder { width: 100%; }
.confirmOrder tr td, .confirmOrder tr th {
  vertical-align: top;
  padding: 0.3em 0;
}
.confirmOrder tr td:first-child { width: 65%; }
.confirmOrder tr td:nth-child(2) { width: 15%; text-align: right; }
.confirmOrder tr td:nth-child(3) { width: 20%; text-align: right; }
.confirmOrder tr td:first-child .isbn {
  display: block;
  letter-spacing: 0.15em;
}
.confirmOrder tfoot td {
  font-weight: 700;
  border-top: 1px solid #000;
  font-size: 1.5rem;
}

/* --- ボタン行 --- */
.btnArea {
  margin: 10px 0 0;
  padding: 0 0 5px;
}
.btnArea img { cursor: pointer; }
.btnArea .disable img { cursor: default; }
.btnArea #toInput, .btnArea #toPhase1 { margin: 0 10px 0 0; }

/* --- 完了画面 --- */
.complete { text-align: center; }
.complete .gray {
  background-color: #e5e5e5;
  padding: 6px 0;
  margin: 10px 0 0;
}
.complete .red-txt {
  color: red;
  font-size: 2rem;
  font-weight: 700;
  margin: 40px 0;
}
.complete .close_btn { margin-top: 7em; }

/* --- スマートフォン向け --- */
@media screen and (max-width: 768px) {
  div#content { width: 96%; margin: 0 2%; }
  h1 { width: 30%; }
  h1 img { height: auto; width: 100%; max-width: 140px; }
  h2 { font-size: 3.8vw; margin-top: 0.5vw; }
  h3 { font-size: 5.1vw; }
  .inner, form { font-size: 4vw; }
  input { font-size: 16px; }
  .order .col1 { width: 64%; }
  .order .col2 { width: 14%; }
  .order .col3 { width: 22%; box-sizing: border-box; padding: 0.5em 0.3em; }
  .order .orderHeader { font-size: 4vw; }
  .order .orderHeader .col3 { padding: 0.5em 0.2em; }
  .order .col2 input { width: 5vw; min-width: 2em; }
  .order .btn img, .order .delete { width: 20px; display: inline-block; }
  .order .title { display: block; word-wrap: break-word; word-break: break-all; }
  .order .btn { margin: 0 0 0 1em; }
  .order .isbn { letter-spacing: 0; }
  .order .input td.col1 { padding: 0 0 0 30px; }
  .order .add-isbn { width: 6em; font-size: 16px; }
  .order .checkdigit { font-size: 16px; }
  #privacy_policy .privacy { height: 10em; margin: 3% auto; padding: 1rem !important; font-size: 1.6rem; }
  #phase2 table td input, #phase2 table td textarea { font-size: 16px; }
  .btnArea img { max-height: 100%; width: auto; display: block; }
  .btnArea > p { height: 20px; }
  .complete .red-txt { text-align: left; width: 82%; margin: 4rem 0; display: inline-block; }
  .complete.inner { font-size: 1.6rem; }
  .complete .end-txt { text-align: left; }
  .complete .close_btn { margin-top: 0.5em; display: inline-block; text-align: center; }
}