@charset 'UTF-8';

/*****************************************************************
 * 製本サービス (print.cssj.jp) レレスポンシブスタイル (第1弾)
 * 対象: B2C 主要画面 (本文作成、見本確認、表紙作成、お見積・ご注文)
 *****************************************************************/

@media (max-width: 768px) {

  /* 0. 共通ヘッダーの折り畳みナビゲーション */
  div.titlebar,
  div.body {
    min-width: 0 !important;
  }
  div.topbar {
    display: block !important; /* 旧 style-sp.css の非表示指定を解除 */
    min-width: 0 !important;
  }
  div.topbar .nav-toggle {
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    font-size: 9.5pt !important;
  }

  /* 1. 基本レイアウトの調整 */
  div.header {
    position: sticky !important;
    top: 0 !important;
    height: auto !important;
    width: 100% !important;
    border-bottom: 1px solid #F7DDE6;
  }
  
  div.body {
    margin: 10px !important;
    margin-top: 10px !important;
    padding: 0 !important;
  }
  
  div.content {
    margin: 0 !important;
    padding: 0 5px !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  
  div.sidebar {
    float: none !important;
    width: 100% !important;
    margin: 20px 0 !important;
  }

  /* 2. ヘッダー内の要素調整 */
  div.titlebar {
    padding: 10px !important;
    text-align: center !important;
    min-width: 0 !important;
  }
  
  div.titlebar div.title {
    float: none !important;
    margin: 0 auto 10px auto !important;
    text-align: center !important;
  }
  
  div.titlebar div.title img {
    margin: 0 auto !important;
    display: block;
    max-width: 100%;
    height: auto;
  }
  
  div.titlebar div.links {
    display: none !important;
  }
  
  div.titlebar div.links a.item,
  div.titlebar div.links span.item {
    float: none !important;
    display: inline-block !important;
    margin: 5px 10px !important;
  }

  div.titlebar div.links .social,
  div.titlebar div.links .social .fb-like,
  div.titlebar div.links .social .mixi-like {
    float: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 5px auto !important;
    text-align: center !important;
  }
  
  div.titlebar div.flow,
  .flow {
    display: block !important;
    margin: 15px auto !important;
    text-align: center !important;
    float: none !important;
    white-space: normal !important;
    width: 100% !important;
  }
  
  div.titlebar div.flow img,
  .flow img {
    max-width: 100%;
    height: auto;
    display: inline-block !important;
  }
  
  /* PC向け表示の抑制 */
  .forpc {
    display: none !important;
  }

  /* 3. 画像のレスポンシブ化 */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 4. フォーム・テーブル要素のレスポンシブ化 */
  form table,
  table.responsive-table {
    width: 100% !important;
    display: block;
  }
  
  form table tbody,
  table.responsive-table tbody {
    display: block;
    width: 100%;
  }
  
  form table tr,
  table.responsive-table tr {
    display: block;
    width: 100%;
    margin-bottom: 15px;
  }
  
  form table th,
  form table td,
  table.responsive-table th,
  table.responsive-table td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    padding: 6px 0 !important;
    text-align: left !important;
    border: none !important;
  }
  
  /* 見積りテーブルなどは例外的にテーブル構造を維持 */
  table#prooftable,
  table#Account_table,
  table#prooftable tbody,
  table#Account_table tbody,
  table#prooftable tr,
  table#Account_table tr {
    display: table !important;
    width: 100% !important;
  }
  
  table#prooftable th,
  table#prooftable td,
  table#Account_table th,
  table#Account_table td {
    display: table-cell !important;
    width: auto !important;
    padding: 8px !important;
    border: 1px solid #ccc !important;
  }
  
  table#prooftable th,
  table#Account_table th {
    background-color: #F7DDE6 !important;
  }

  /* 5. フォーム入力要素 */
  input[type="text"],
  input[type="password"],
  input[type="email"],
  textarea,
  select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px !important;
    font-size: 16px !important; /* スマホズーム防止 */
    margin-bottom: 8px;
    height: auto !important;
  }
  
  input[type="radio"],
  input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    margin: 5px 10px 5px 0 !important;
    vertical-align: middle !important;
    display: inline-block !important;
  }
  
  textarea#title,
  textarea#description {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 6. ボタン調整 */
  button,
  input[type="button"],
  input[type="submit"] {
    padding: 12px 24px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border-radius: 6px !important;
    margin: 10px auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;
    box-sizing: border-box !important;
    height: auto !important;
  }
  
  input[type="image"] {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 15px auto !important;
  }
  
  center button {
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 10px auto !important;
  }

  /* 7. 本文作成 (text-blog.tpl) */
  div.content div.box-approach,
  div.supplementaryImg {
    float: none !important;
    width: 100% !important;
    margin-right: 0 !important;
    padding-top: 10px;
  }
  
  div.supplementaryImg img {
    display: block;
    margin: 10px auto !important;
    max-width: 100%;
  }
  
  #textStyle {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    margin-bottom: 15px !important;
  }
  
  #textStyleOptions {
    margin-left: 0 !important;
  }

  /* 8. 見本確認 (proof.tpl) */
  .slider {
    margin-bottom: 15px;
  }
  
  .slider img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 9. 表紙作成 (cover.tpl) */
  .proof form,
  .proof fieldset,
  .proof .cover-types-m {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* coverStyle.js.php が生成するタイプ選択は、説明図を選択肢の右へ
     inline-block で並べる。スマホでは2要素を縦積みにし、図が次の列として
     document幅を押し広げないようにする。 */
  .proof .cover-types-m > .fieldset,
  .proof .cover-types-m > .supplementaryImg3 {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .proof .cover-types-m > .supplementaryImg3 img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 10px auto !important;
  }

  .proof div.box p {
    float: none !important;
    margin-right: 0 !important;
    text-align: center !important;
    margin-bottom: 20px !important;
  }
  
  .proof div.box p img {
    margin: 0 auto;
    display: inline-block;
  }
  
  .btn-3d-preview {
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 10px auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  
  /* インラインスタイルで width: 541px などが指定されているプレビュー画像をレスポンシブ化 */
  fieldset.cover div[style*="background-image"] {
    float: none !important;
    width: 100% !important;
    height: 300px !important;
    background-size: contain !important;
    background-position: center top !important;
    margin: 10px 0 !important;
  }
  
  /* 背表紙画像の回り込み解除 */
  .supplementaryImg-02 img {
    float: none !important;
    display: block;
    margin: 10px auto !important;
    max-width: 100% !important;
  }

  /* 10. お見積もり・ご注文 (estimate.tpl) */
  table#Delivery_table span.example::before {
    content: "\A";
    white-space: pre;
  }
  
  table#Delivery_table input[type="text"] {
    width: 100% !important;
  }
  
  textarea[name="customer_note"] {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 11. B2B管理画面向けのレスポンシブスタイル */
  body.b2b div.sidebar {
    float: none !important;
    width: 100% !important;
    margin: 10px 0 !important;
  }

  body.b2b div.content {
    margin: 0 !important;
    padding: 0 5px !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* B2Bの主要な一覧・詳細テーブルを横スクロール可能にする */
  body.b2b div.box,
  body.b2b div.workshop {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
    width: 100% !important;
  }

  /* 既存の「form table { display: block }」設定によるテーブル崩れを防ぐ */
  body.b2b table.visible,
  body.b2b table.visible tbody,
  body.b2b table.visible tr,
  body.b2b form table,
  body.b2b form table tbody,
  body.b2b form table tr,
  body.b2b table.results,
  body.b2b table.results tbody,
  body.b2b table.results tr {
    display: table !important;
    width: auto !important;
    min-width: 800px; /* 横スクロールで崩れない最低限の幅 */
  }

  body.b2b table.visible th,
  body.b2b table.visible td,
  body.b2b form table th,
  body.b2b form table td,
  body.b2b table.results th,
  body.b2b table.results td {
    display: table-cell !important;
    width: auto !important;
    padding: 6px 8px !important;
    white-space: normal !important; /* テキストの折り返しを許可 */
  }

  /* 注文詳細（order.tpl）の個別調整 */
  body.b2b .order table.visible {
    position: static !important; /* absolute 解除 */
    margin: 0 auto !important;
  }

  /* order.tpl の PC用高さ合わせ用空divをスマホで非表示にする */
  body.b2b div.order ~ div[style*="height: 2000px"],
  body.b2b div[style*="height: 2000px"] {
    display: none !important;
  }

  /* フォーム要素のサイズ調整 */
  body.b2b input[type="text"],
  body.b2b input[type="password"],
  body.b2b input[type="email"],
  body.b2b textarea,
  body.b2b select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 150px;
    box-sizing: border-box !important;
    font-size: 16px !important; /* スマホでのズーム防止 */
  }

  body.b2b input[type="checkbox"],
  body.b2b input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    margin: 5px 5px 5px 0 !important;
    vertical-align: middle !important;
    display: inline-block !important;
  }

  /* ボタン調整 */
  body.b2b button,
  body.b2b input[type="button"],
  body.b2b input[type="submit"] {
    padding: 10px 15px !important;
    font-size: 14px !important;
    width: auto !important;
    display: inline-block !important;
    margin: 5px !important;
  }

  /* ワークショップ一覧（workshop.tpl）の一括操作フィールドセット */
  body.b2b div.workshop fieldset {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box;
    margin-top: 15px;
    padding: 10px;
  }

  body.b2b div.workshop fieldset button {
    display: block !important;
    width: 100% !important;
    max-width: 320px;
    margin: 8px auto !important;
  }

  /* 12. 追加のレスポンシブ調整 */
  ol.step-flow {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    padding-bottom: 8px !important;
    justify-content: flex-start !important;
  }
  ol.step-flow li {
    flex-shrink: 0 !important;
  }
  pre {
    white-space: pre-wrap !important;
    word-break: break-all !important;
  }
}