/*
 * page-convey.php（ハピトレ／フェアトレードの取り組み）のSP対応。
 * titicaca-sp/css/company.cssの.page-convey関連ルールを、新設した
 * .site-nav--sp .visual--convey / .site-nav--sp .contents-wrap配下に
 * 移植する（クラス名の衝突を避けるため.site-nav--sp配下に限定）。
 */
@media (max-width: 768px) {
  /*
   * 本番titicaca-sp/css/common.cssのグローバル`img{max-width:100%;height:auto;
   * vertical-align:bottom}`リセットがこのページ全体で未移植だった。個別画像
   * ごとに対症療法で打ち消していたが（.continue a img等）、`convey-trade-text.png`
   * （HTML属性width="240" height="195"が実画像480×290の比率と一致せず、
   * height:autoが無いと縦に間延びして表示される）のように、まだ対応していない
   * 画像で同じ不具合が再発したため（ユーザー指摘により発覚）、ページ全体に
   * 一括で適用し今後の再発を防ぐ。既存の個別ルールはより詳細な調整用として残す
   */
  body.page-convey .site-nav--sp img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
  }
  /*
   * .sp-header（position:fixed、高さ53px）の下に.visual先頭部分が隠れる不具合を
   * page.php側で発見・本番実機測定で検証済みの方式に合わせて修正。本番は
   * 親の.contents{padding-top:53px}がクリアランスを作っており.visual自体は
   * 無加工（.flagはtop:-45pxのまま、押し下げ後の.visualの境界基準で画面上は
   * y=8px相当になる）。本テーマには.contents相当の共通ラッパーが無いため
   * .visual自身にpadding-topを付与しており、この場合.visual自体のボックスは
   * 動かないため.flagの基準点が異なり、画面上で本番と同じ位置（y=8px）に
   * するにはtop:8px（0+8）が必要（page.php側で実機測定済み、詳細はそちら参照）。
   */
  .site-nav--sp.visual--convey {
    position: relative;
    overflow: hidden;
    padding-top: 53px;
  }
  /*
   * titicaca-sp/css/common.cssのグローバルh1-h6 margin:0リセットが未移植の
   * ため、.visual__img（h2）にブラウザ既定marginが残り画像位置がずれる
   * （page.php側で発見した同じ不具合）。
   */
  .site-nav--sp.visual--convey .visual__img {
    margin: 0;
  }
  .site-nav--sp.visual--convey img {
    display: block;
    width: 100%;
    height: auto;
  }
  .site-nav--sp.visual--convey .flag {
    width: 100%;
    position: absolute;
    top: 8px;
  }

  /*
   * page-convey.phpは実際に正しく読み込まれているが、DBの_wp_page_templateが
   * 未設定のためbody_class()が「page-template-default」も併せて出力してしまう
   * （page-history.php等で既出の罠）。同じ詳細度のresponsive-page.cssの
   * `body.page-template-default .site-nav--sp.contents-wrap{padding:40px 0}`
   * （page.php用）が読み込み順で後勝ちし、padding-topが本番の13pxではなく
   * 40pxになっていた（ユーザー報告により発覚）。#contentを足して詳細度を上げ
   * 確実にこちらを優先させる。padding-bottomも本番実測値（40px、サイト共通の
   * .contents-wrap基準値がそのまま生きている）に合わせて明示
   */
  body.page-convey #content .site-nav--sp.contents-wrap {
    padding: 13px 0 40px;
    position: relative;
    color: #3a1d1d;
  }
  /*
   * style.cssの.edit-area{width:900px;margin:0 auto}がPC固定幅のまま無条件に
   * 効いており、SPでもページ全体が900px幅になって横スクロールが発生する
   * （他ページと同じ「裸のクラスセレクタがモバイルに漏れる」パターン）。
   * border-box化した上でwidth:100%にし、左右のpaddingは幅に含める。
   */
  body.page-convey .site-nav--sp .edit-area {
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    font-size: 12px;
  }
  /*
   * style-company.cssの`.edit-area .htnews-box p{font-size:16px;line-height:1.87}`
   * （PC専用の2カラムレイアウト用）がfont-sizeまでは打ち消していなかったため、
   * ハピトレ最新ニュースの本文だけbody基準の12pxではなく16pxのまま表示されて
   * いた（ユーザー報告により発覚）
   */
  body.page-convey .site-nav--sp .edit-area p {
    line-height: 1.9;
    font-size: 12px;
  }
  body.page-convey .site-nav--sp .edit-area img {
    max-width: 100%;
    height: auto;
  }
  /*
   * 通常のhr（company.cssの共通hr{...}相当、bg-hrline.pngの細かいドット柄）と
   * hr.convey-line（.page-convey hr.convey-line{...}相当、company-convey-line.png
   * の太い点線柄・height:7px）は本番では別の画像・別の高さだったが、統合時に
   * どちらもconvey-line用の値へ誤って一本化してしまい、通常hr（フェアトレード
   * 見出し前後の区切り線等）の柄が本番と一致していなかった（ユーザー報告により発覚）
   */
  body.page-convey .site-nav--sp hr {
    height: 2px;
    background: url("../images/company/bg-hrline.png") repeat-x;
    background-size: 15px 2px;
    border: none;
    margin-top: 0;
    margin-bottom: 30px;
  }
  body.page-convey .site-nav--sp hr.convey-line {
    height: 7px;
    background: url("../images/company/company-convey-line.png") repeat-x;
    background-size: 4px 7px;
    margin: 25px 0 20px;
  }
  body.page-convey .site-nav--sp hr.trade-line {
    margin-bottom: 0;
  }
  /* .mt10〜.mt40ユーティリティクラス自体が未定義だったため、hr.trade-line/
   * convey-trade-text.png（いずれも本番はmt20併用でmargin-top:20px）が
   * margin-top:0のままになっていた（ユーザー報告により発覚） */
  body.page-convey .site-nav--sp .mt10 { margin-top: 10px; }
  body.page-convey .site-nav--sp .mt20 { margin-top: 20px; }
  body.page-convey .site-nav--sp .mt30 { margin-top: 30px; }
  body.page-convey .site-nav--sp .mt40 { margin-top: 40px; }

  /*
   * style-company.cssの`.edit-area .htnews-box .htnews-text{float:left;width:445px}`・
   * `.edit-area .htnews-box > figure{float:right;width:300px;height:300px}`・
   * `.edit-area .htnews-box{height:408px;padding:54px}`はPC版の2カラムレイアウト用の
   * ルールで、クラス名（.edit-area .htnews-box .htnews-text）がSP側と同じため
   * そのまま漏れて効いてしまっていた。SPでは1カラムで縦積みにする。
   */
  /*
   * style-company.cssの`.edit-area .htnews-box{background:url(convey-htnews-bg.png)
   * no-repeat left top}`はPC専用（900x408pxのジグザグ枠画像、PC版の固定高さ408pxに
   * ぴったり合わせた装飾）だが、height/paddingと違いbackgroundは打ち消していなかった
   * ため、SP側の高さ可変ボックスにもそのまま漏れ、本来存在しないはずの枠線が
   * 上下左右に間延びして見えていた（ユーザー報告により発覚、本番には該当の装飾
   * 自体が存在しないことをスクリーンショット比較で確認）
   */
  /*
   * .htnews-box自体には本番SP側で一切スタイルが無く（margin:0、padding:0、
   * 純粋な構造用ラッパー）、左右の余白は親の.edit-area{padding:0 20px}だけで
   * 足りている。以前ここへpadding:20pxを追加してしまい、.edit-areaの20pxと
   * 二重に効いて本文が本番より20px分よけいにインデントされていた（ユーザー
   * 報告により発覚）。style-company.cssのPC専用ルールが持つmargin-top:35px
   * も同様に打ち消せておらず漏れていたため、あわせてmargin:0で明示する
   */
  body.page-convey .site-nav--sp .edit-area .htnews-box {
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
  }
  body.page-convey .site-nav--sp .edit-area .htnews-box .htnews-text {
    float: none;
    width: 100%;
  }
  body.page-convey .site-nav--sp .edit-area .htnews-box > figure {
    float: none;
    width: auto;
    height: auto;
  }
  body.page-convey .site-nav--sp .edit-area .htnews-box > figure img {
    max-width: 100%;
    width: auto;
    height: auto;
  }
  /* ハピトレ最新ニュース */
  /*
   * style.cssの裸の.edit-area h2{padding-top:2.8em;text-align:center}が
   * .htnews-textが.edit-area配下にあるため子孫のh2にも漏れて効いていた
   * （page.php側で発見した同じ不具合）。
   */
  /*
   * .htnews-text h3と同じ理由（下方の汎用打ち消しルール`.edit-area h2
   * {margin:0 0 30px}`とここで詳細度が完全に同じで、記述順により後勝ちして
   * いた）で、意図した15px（本番実測値）ではなく30pxになっていた
   * （ユーザー指摘により発覚。前回「10px前後の残差は誤差」と判断したのは
   * 誤りで、実際にはこのmargin-bottom差が主因だった）。#contentを足して解消
   */
  body.page-convey #content .site-nav--sp .htnews-text h2 {
    margin-top: 0;
    margin-bottom: 15px;
    padding-top: 0;
    text-align: left;
  }
  /*
   * 下の方にある汎用打ち消しルール`.edit-area h3{font-size:15px}`
   * （page-template-default経由のPCリーク対策、本来.trade h3等の見出し向け）と
   * 詳細度が完全に同じため、ファイル内の記述順で後勝ちし、ここで意図している
   * 12px（本番実測値）ではなく15pxになっていた（ユーザー報告により発覚）。
   * #contentを足して詳細度を上げ、確実にこちらを優先させる
   */
  body.page-convey #content .site-nav--sp .htnews-text h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 12px;
  }
  body.page-convey .site-nav--sp figure {
    margin: 0 20px;
  }
  body.page-convey .site-nav--sp figure img {
    margin: 0 auto;
  }
  /*
   * style.cssの`.link-button.continue a{width:200px;height:40px;
   * background-image:url(link-button-continue.png);text-indent:-9999px}`は
   * PC専用のスプライトボタン（実テキストをtext-indentで画面外へ隠し、背景画像を
   * ボタンとして見せる仕組み）だが、SP側は実際の<img src="img-read-more.png">を
   * そのまま表示する作りのため、この固定width/heightが漏れて画像が200×40pxに
   * 押し縮められ、意図しない背景スプライトも重なっていた（ユーザー指摘により
   * 発覚）。SP側だけ打ち消し、画像本来のサイズ（225×45、height:auto）で
   * 表示させる
   */
  body.page-convey .site-nav--sp .continue a {
    display: block;
    width: auto;
    height: auto;
    margin-top: 25px;
    text-align: center;
    text-indent: 0;
    background-image: none;
  }
  /*
   * 本番titicaca-sp/css/common.cssのグローバルimg{...vertical-align:bottom}
   * リセット（single-shops.php等でも繰り返し踏んだ既知の未移植分）がここにも
   * 影響しており、inline画像特有のベースライン下の余白ぶん.continue aの高さが
   * 45pxではなく51.4pxに膨らんでいた（ユーザー指摘により発覚）
   */
  body.page-convey .site-nav--sp .continue a img {
    display: inline;
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
  }

  /* Happy Trade Collection: Slyのドラッグスクロールカルーセル */
  body.page-convey .site-nav--sp .convey-slide {
    position: relative;
    background: url("../images/company/convey-flower-bg-left.png") no-repeat left top,
      url("../images/company/convey-flower-bg-right.png") no-repeat right top,
      url("../images/company/collection-bg.jpg") repeat;
    background-size: 70px 70px, 70px 70px, auto auto;
  }
  body.page-convey .site-nav--sp .convey-slide h2 {
    margin: 0;
    padding-top: 40px;
    text-align: center;
  }
  body.page-convey .site-nav--sp .convey-slide .slide-container {
    position: relative;
    background: url("../images/company/convey-shiba.png") repeat-x;
    background-size: auto 300px;
    height: 300px;
  }
  body.page-convey .site-nav--sp .convey-slide .slide-container .icon.animals {
    display: block;
    top: -15px;
    left: 20px;
    position: absolute;
    background: url("../images/company/icon-animal.png");
    background-size: 48px 35px;
    width: 48px;
    height: 35px;
  }
  body.page-convey .site-nav--sp .convey-slide .slide-container .icon.bird {
    display: block;
    bottom: -15px;
    right: 20px;
    position: absolute;
    background: url("../images/company/icon_bird.png");
    background-size: 40px 30px;
    width: 40px;
    height: 30px;
  }
  body.page-convey .site-nav--sp .convey-slide .icon.snail {
    position: absolute;
    background: url("../images/company/icon-snail.png") no-repeat;
    background-size: 51px 39px;
    bottom: -25px;
    width: 51px;
    height: 39px;
    right: 20px;
  }
  /* .frame/#effects/#slide-area: Sly（js/vendor/sly.min.js）が対象にする水平スクロール領域 */
  body.page-convey .site-nav--sp .frame {
    overflow: hidden;
    padding-top: 20px;
  }
  body.page-convey .site-nav--sp .frame ul {
    list-style: none;
    padding: 0 !important;
    height: 100%;
  }
  body.page-convey .site-nav--sp .frame ul::after {
    content: " ";
    display: table;
    clear: both;
  }
  body.page-convey .site-nav--sp .frame ul li {
    float: left;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.page-convey .site-nav--sp .frame ul li img {
    max-width: none;
  }
  body.page-convey .site-nav--sp .scroll-wrap {
    padding: 0 20px;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  body.page-convey .site-nav--sp .scrollbar {
    margin: 0 0 1em;
    height: 3px;
    border: 1px dashed #e50a84;
    border-radius: 2px;
    background: #fff;
    line-height: 0;
  }
  body.page-convey .site-nav--sp .scrollbar .handle {
    width: 10px;
    height: 6px;
    position: relative;
    top: -1px;
    border-radius: 10px;
    background: #e50a84;
    cursor: pointer;
  }
  body.page-convey .site-nav--sp .scrollbar .handle .mousearea {
    position: absolute;
    top: -9px;
    left: 0;
    width: 100%;
    height: 20px;
  }

  /*
   * SHIPIBO/COBAN等の商品写真（ACF「happy_trade_collection」、タイトル・説明の
   * 吹き出しも画像に焼き込み済み）を並べる静止の縦積みリスト。ドラッグスクロール
   * （.slide-container）とは別物。titicaca-sp/css/company.cssの実際の値をそのまま移植
   */
  body.page-convey .site-nav--sp .collection {
    background: url("../images/company/collection-bg.jpg");
    padding-top: 40px;
    padding-bottom: 20px;
  }
  body.page-convey .site-nav--sp .collection img {
    width: 70%;
    height: auto;
    margin-top: 10px;
  }
  body.page-convey .site-nav--sp .collection img:first-child {
    margin-top: 0;
  }

  /* フェアトレード */
  body.page-convey .site-nav--sp .trade {
    position: relative;
  }
  body.page-convey .site-nav--sp .trade h3 {
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 15px;
    color: #3a1d1d;
  }
  body.page-convey .site-nav--sp .trade h4 {
    margin-top: 0;
    font-weight: bold;
    margin-bottom: 20px;
    color: #3a1d1d;
  }
  body.page-convey .site-nav--sp .trade .text {
    line-height: 2;
  }
  body.page-convey .site-nav--sp .trade .text::after {
    content: " ";
    display: table;
    clear: both;
  }
  body.page-convey .site-nav--sp .trade .text img.alignright {
    float: right;
    margin-left: 15px;
    width: 82px;
    height: 135px;
  }
  body.page-convey .site-nav--sp .carousel {
    margin-top: 20px;
  }
  body.page-convey .site-nav--sp .carousel img {
    margin: 0 10px;
    max-width: 100%;
    height: auto;
  }
  body.page-convey .site-nav--sp .icon.flower_yellow {
    position: absolute;
    background: url("../images/company/icon-flower_yellow.png") no-repeat;
    background-size: 51px 39px;
    top: -55px;
    width: 51px;
    height: 39px;
    left: 20px;
  }
  body.page-convey .site-nav--sp .edit-area h3 {
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 15px;
    color: #3a1d1d;
  }

  /*
   * style.cssの#content{margin-bottom:100px}は全ページ共通のPC専用ルールで
   * 範囲指定が無く、フッター前に本番SPには無い余白を作っていたため打ち消す
   * （page-cardhowto.phpと同じ理由）。
   */
  body.page-convey #content {
    margin-bottom: 0 !important;
  }
}