/*
 * page-inquiry.php: PC/SP統合作業でSP側に追加したモバイル用スタイル。
 * 表示切り替えはresponsive-nav.cssの@media (max-width: 768px)ブロックに従う
 * （.site-nav--pc/.site-nav--sp）。
 *
 * FAQ（#cf7-faq-block・inquiry-faqフィールドのdl/dt/dd）とCF7フォーム
 * （the_content()の#trust-form）はPC/SPで同一マークアップを1回だけ出力し、
 * ここではCSSの出し分けのみを行う（併存ではなく上書き）。titicaca-sp/
 * css/inquiry.cssの実際の値を、本テーマの実際のマークアップ（h2+dl/dt/dd、
 * #trust-form）に合わせて移植したもの。
 */

.visual--inquiry {
  display: none;
}

@media (max-width: 768px) {
  /*
   * style.cssの.edit-area{width:900px;margin:0 auto}がPC固定幅のまま無条件に
   * 効いており、SPでもページ全体が900px幅になって横スクロールが発生していた
   * （page-shops.php等と同じ「裸のクラスセレクタがモバイルに漏れる」パターン）。
   */
  .page-inquiry .edit-area {
    width: 100%;
  }

  /*
   * style.cssの#content{margin-bottom:100px}は全ページ共通のPC専用ルールで
   * 範囲指定されておらず、single-shops.php同様モバイルにも無条件に効いて
   * フッター前の余白が広くなりすぎていた。
   */
  .page-inquiry #content {
    margin-bottom: 0;
  }

  /*
   * === ビジュアルヘッダー（titicaca-sp/page-inquiry.phpから移植） ===
   * .visual--inquiryは#signage(site-nav--pc限定)の外側にある別要素のため、
   * page-all.php等で使っている#signageのpadding-top:53px(固定ヘッダー分の
   * 余白)を継承できておらず、見出し(.visual--inquiry__title、top:20px)が
   * 53px固定のsp-headerの裏に隠れて見えなくなっていた
   * （レビュー指摘により発覚）。
   */
  .visual--inquiry {
    display: block;
    overflow: hidden;
    position: relative;
    text-align: center;
    padding-top: 53px;
  }
  .admin-bar .visual--inquiry {
    padding-top: 99px;
  }
  .admin-bar .visual--inquiry__title {
    top: 119px;
  }

  .visual--inquiry__img {
    width: 100%;
    height: auto;
  }

  .visual--inquiry__title {
    width: 85.95%;
    max-width: 322.5px;
    position: absolute;
    /* absolute配置の基準点は親のpadding-topの影響を受けない(パディングエッジ基準)
       ため、上のpadding-top:53pxとは別に、ここでも53px分を足す必要がある */
    top: 73px;
    left: 50%;
    /*
     * margin-leftのパーセント指定は要素自身の幅ではなく親(コンテナ)の幅を
     * 基準に計算されるため、max-widthで実際の表示幅が制限される場合は
     * ズレが生じる(実測: 390px幅コンテナで-42.975%=-167.6pxだが、
     * 実際の表示幅322.5pxの半分は161.25pxで中央からずれていた)。
     * transformは要素自身の実際の幅を基準にするため、max-widthとの
     * 組み合わせでも常に正しく中央揃えになる。
     */
    margin: 0;
    transform: translateX(-50%);
  }

  .visual--inquiry__title img {
    display: block;
    width: 100%;
    height: auto;
  }

  /*
   * 導入文（titicaca-sp/page-inquiry.phpから移植）。電話でのお問い合わせ導線は
   * PC版でも.link-button{display:none}で現在無効化されているため追加しない
   * （ユーザー指示）。
   */
  .inquiry-description {
    text-align: center;
    padding: 20px;
  }

  .inquiry-description__txt {
    display: inline-block;
    text-align: left;
    font-size: 12px;
    line-height: 2;
    margin: 0;
  }

  /*
   * === FAQ（h2+dl/dt/dd。本番PC版と同じマークアップを流用し、
   * titicaca-sp/css/inquiry.cssの色・アイコン（ico_q.png/ico_a.png）を
   * dt/ddに直接当てる形にアレンジ。PC版はh2:before/afterで900px固定幅の
   * 装飾画像を出しているが、モバイル幅では意味を成さないため打ち消す）===
   */
  body.page-inquiry .edit-area {
    padding-top: 0;
    line-height: normal;
  }

  body.page-inquiry .edit-area .inquiry-info {
    display: none;
  }

  /*
   * .faq-areaが.edit-area幅（100%）いっぱいに広がり、白背景のQ&Aボックスが
   * 画面端まで届いていた。#trust-formと同じ「87.5%幅・中央寄せ」に揃える。
   */
  body.page-inquiry .edit-area .faq-area {
    width: 87.5%;
    margin: 0 auto;
  }

  body.page-inquiry .edit-area .faq-area h2,
  body.page-inquiry .edit-area .faq-area dl {
    border-left: none;
    border-right: none;
  }

  body.page-inquiry .edit-area .faq-area h2 {
    margin-top: 0;
    margin-bottom: 0;
    padding: 15px 20px 15px 55px;
    height: auto;
    background-color: #fff;
    background-image: url(../images/inquiry/inquiry-sp-ico-q.png);
    background-position: 20px center;
    background-size: 26px auto;
    border-top: 1px solid #e60a84;
    border-bottom: 1px dotted #999;
    font-size: 14px;
  }

  /*
   * inquiry-faq-title.png（「よくある質問」+PC向け副題を1枚に焼き込んだ画像、
   * 幅約493px）がmax-widthの指定なしで原寸のまま表示され、横スクロールが
   * 発生していた。
   */
  body.page-inquiry .edit-area .faq-area h2 img {
    max-width: 100%;
    height: auto;
  }

  body.page-inquiry .edit-area .faq-area h2:hover,
  body.page-inquiry .edit-area .faq-area h2.open,
  body.page-inquiry .edit-area .faq-area h2.open:hover {
    height: auto;
    background-color: #fff;
    background-image: url(../images/inquiry/inquiry-sp-ico-q.png);
  }

  body.page-inquiry .edit-area .faq-area h2:before,
  body.page-inquiry .edit-area .faq-area h2:after,
  body.page-inquiry .edit-area .faq-area dl:after {
    display: none;
  }

  body.page-inquiry .edit-area .faq-area dl {
    top: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.8;
    border-top: none;
  }

  body.page-inquiry .edit-area .faq-area dl dt,
  body.page-inquiry .edit-area .faq-area dl dd {
    padding: 15px 20px 15px 55px;
  }

  body.page-inquiry .edit-area .faq-area dl dt {
    min-height: 0;
    margin-bottom: 0;
    padding-top: 15px;
    background-image: url(../images/inquiry/inquiry-sp-ico-q.png);
    background-position: 20px 15px;
    background-size: 26px auto;
    border-top: 1px dotted #999;
  }

  body.page-inquiry .edit-area .faq-area dl dt:first-child {
    border-top: 1px solid #e60a84;
  }

  body.page-inquiry .edit-area .faq-area dl dd {
    min-height: 0;
    margin-bottom: 0;
    background-color: #fff;
    background-image: url(../images/inquiry/inquiry-sp-ico-a.png);
    background-position: 20px 15px;
    background-size: 26px auto;
    border-bottom: 1px dotted #999;
  }

  body.page-inquiry .edit-area .faq-area dl dt.line1,
  body.page-inquiry .edit-area .faq-area dl dd.line1 {
    line-height: 1.8;
  }

  /*
   * === CF7フォーム（#trust-form。titicaca-sp/css/inquiry.cssの値をそのまま移植） ===
   * style-inquiry.cssのbody.page-inquiry div#trust-form{font-size:16px}の方が
   * 詳細度が高く、font-size:12pxが負けて上書きされていなかった（th/tdと同じ
   * パターン）ため、詳細度を合わせる。また他ページ（.shop-single-detail等）と
   * 同じ「87.5%幅・中央寄せ」にし、th部分のピンク帯が画面端まで届いていた
   * のを解消する（ユーザー指摘: 問い合わせフォーム全体が画面際まで使われて
   * 見える）。
   */
  body.page-inquiry div#trust-form {
    width: 87.5%;
    max-width: 100%;
    margin: 0 auto;
    font-size: 12px;
  }

  /*
   * style-inquiry.cssのbody.page-inquiry div#trust-form .privacy-info
   * {font-size:14px;line-height:2.14}がPC専用の指定で、titicaca-sp/css/
   * inquiry.cssにはこのクラス自体の指定が無い（=他のフォーム文字と同じ
   * #trust-formの12px継承が本来の見た目）。詳細度がこちらより高く上書き
   * できていなかったため、他のフォーム文字と揃える。
   */
  body.page-inquiry div#trust-form .privacy-info {
    font-size: 12px;
    line-height: 1.8;
  }

  /*
   * style-inquiry.cssのbody.page-inquiry div#trust-form table.cf7-table tr th
   * （th/tdを横並び2カラムにするPC設計、th幅248px固定）はtrを含む分こちらより
   * 詳細度が高く、display:block;width:100%が負けて上書きされていなかった
   * （thが248px固定のまま→同じ行のtd/selectの高さに引っ張られて縦に長い
   * ラベル欄になっていた）。詳細度をPC側に合わせて確実に上書きする。
   */
  body.page-inquiry div#trust-form table.cf7-table tr th,
  body.page-inquiry div#trust-form table.cf7-table tr td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
  }

  body.page-inquiry div#trust-form table.cf7-table tr th {
    padding: 10px 20px;
    font-weight: bold;
    background-color: rgba(229, 10, 132, 0.05);
    background-image: none;
    border-right: none;
  }

  body.page-inquiry div#trust-form table.cf7-table tr td {
    padding: 10px 20px 20px;
  }

  #trust-form input[type='text'],
  #trust-form input[type='email'],
  #trust-form select,
  #trust-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e60a84;
    border-radius: 0;
    background-color: #fff;
    padding: 5px;
    font-size: 14px;
  }

  #trust-form textarea {
    height: 100px;
  }

  /*
   * 姓/名を横並びにする実装（.cf7-name-groupがdisplay:inline、各グループ内で
   * ラベル+inputをinline-block max-width:45%）は、375px幅では1グループ分
   * （姓+input）しか1行に収まらず、「名」ラベルだけが姓inputの右に食い込み、
   * 名のinputだけ次の行に落ちる中途半端な折り返しになっていた（お名前・
   * フリガナ欄が2行に割れて見える不具合）。各グループを1行専有のブロックに
   * し、姓/名それぞれをきれいな1行にする。
   */
  #trust-form .cf7-name-group {
    display: block;
    margin-top: 8px;
  }

  #trust-form .cf7-name-group:first-child {
    margin-top: 0;
  }

  /*
   * style-inquiry.cssのbody.page-inquiry div#trust-form .cf7-name-group
   * .wpcf7-form-control-wrap + .name-sublabel{margin-left:1em}は姓/名を
   * 横並びにする前提の指定（直前のinput分だけ間隔を空ける）。姓/名を
   * それぞれ独立した行にした今は不要で、「名」ラベルだけ「姓」より右に
   * ずれて見えていた。詳細度をPC側に合わせて確実に打ち消す。
   */
  body.page-inquiry div#trust-form .cf7-name-group .wpcf7-form-control-wrap + .name-sublabel {
    margin-left: 0;
  }

  #trust-form .cf7-name-group .name-sublabel {
    display: inline-block;
    width: 2.5em;
  }

  #trust-form .cf7-name-group .wpcf7-form-control-wrap {
    display: inline-block;
    max-width: calc(100% - 2.5em);
    width: calc(100% - 2.5em);
    vertical-align: middle;
  }

  /*
   * style-inquiry.cssのbody.page-inquiry div#trust-form p.submit-container
   * {padding-right:170px}はPC版の2カラムレイアウト（ボタンの右に何か別要素を
   * 並べる想定）用の余白で、モバイルでは無条件に効いてしまい、確認画面の
   * 「送信する」ボタン（180px）が実質158px幅の領域に収まりきらず中央寄せが
   * 崩れていた（「戻る」ボタンは80px<158pxのため収まり気づきにくかった）。
   */
  body.page-inquiry div#trust-form p.submit-container {
    padding-right: 0;
    margin-top: 20px;
  }

  /*
   * 確認画面の「戻る」「送信する」は、CF7が出力するHTML上は戻るボタンが先
   * （上）に来る。押し間違い防止のため、DOM順は変えずCSSのorderのみで
   * 表示順を入れ替え、「送信する」を上、「戻る」を下にする（ユーザー指示）。
   */
  body.page-inquiry div#trust-form p.submit-container {
    display: flex;
    flex-direction: column;
  }

  body.page-inquiry div#trust-form input.wpcf7-submit {
    order: 1;
  }

  body.page-inquiry div#trust-form .cf7-back-btn {
    order: 2;
  }

  /*
   * style-inquiry.cssのbody.page-inquiry div#trust-form .cf7-confirm-toggle等
   * （PC版はwidth:360px;height:72px、th/tdや#trust-form本体と同じ詳細度パターン）
   * の方が勝っており、width/heightだけPC側の360x72が使われ、background-size
   * （225px、こちらが勝っていた）と箱の大きさが合わず、ホバー用の2コマ目の
   * 画像が透けて見え、かつ箱が親要素（87.5%幅=328px）よりはみ出して中央寄せも
   * 崩れていた。詳細度を合わせて確実に上書きする。
   */
  body.page-inquiry div#trust-form .cf7-confirm-toggle,
  body.page-inquiry div#trust-form input.wpcf7-submit {
    width: 225px;
    height: 45px;
    border: 0;
    cursor: pointer;
    text-indent: -9999px;
    background: url(../images/inquiry/button-confirm.png) no-repeat;
    background-size: 225px auto;
    margin: 25px auto 40px;
    display: block;
  }

  body.page-inquiry div#trust-form input.wpcf7-submit {
    width: 180px;
    height: 36px;
    background: url(../images/inquiry/button-submit.png) no-repeat;
    background-size: 180px auto;
    margin: 15px auto 15px;
  }

  body.page-inquiry div#trust-form .cf7-back-btn {
    width: 80px;
    height: 20px;
    border: 0;
    cursor: pointer;
    text-indent: -9999px;
    background: url(../images/inquiry/button-back.png) no-repeat;
    background-size: 80px auto;
    margin: 25px auto 15px;
    display: block;
  }

  #trust-form + .wpcf7-response-output {
    margin: 20px;
    padding: 1em;
    border: 1px solid #e60a84;
    font-size: 12px;
    line-height: 2;
  }

  /* 確認画面「戻る」・完了画面トップへ、いずれもPC版のbutton-totop.pngを流用 */
  .link-button.totop a {
    width: 180px;
    height: 36px;
    border: 0;
    text-indent: -9999px;
    background: url(../images/inquiry/button-totop.png) no-repeat;
    background-size: 180px auto;
    margin: 40px auto;
    display: block;
  }

  /* プライバシーポリシー本文のスクロールボックス（titicaca-spはネイティブoverflow:autoでOK） */
  .privacy-text {
    box-sizing: border-box;
    width: 100%;
    height: 150px;
    margin-bottom: 15px;
    padding: 1em;
    overflow: auto;
    border: 1px solid #e60a84;
    background-color: #fff;
    font-size: 12px;
  }
}