@charset "UTF-8";

/*----------------------------------------------------------
ペット専用ランドリー機器LP（/pet-laundry/）：スマホ用
　デザイン：Figma TOSEI共有用 SP 4013-13075（375px基準）
　pet-laundry.css（PC）のあとに読み込む
-------------------------------------------------------------*/

@media screen and (max-width: 780px) {

  .pl-title {
    font-size: 24px;
    line-height: 1.4;
  }

  .pl-note {
    font-size: 11px;
    text-align: left;
  }

  /* 画面幅で切り替える改行（PC側と逆にする） */
  .pl-brsp {
    display: inline;
  }

  .pl-brpc {
    display: none;
  }

  /* =MV
  　 SPは写真がテキストの下に独立して入る（PCは背景画像）
  -------------------------------------------------------------*/
  /* ロゴの margin-top が親からはみ出す（マージン相殺）ので padding で確保する */
  .pl-mv {
    height: auto;
    padding: 22px 0 26px;
    background: #F5EDE4;
  }

  .pl-mv-inner {
    position: static;
    width: auto;
    height: auto;
    padding: 0 20px;
  }

  .pl-mv-logo {
    position: static;
    width: 116px;
    margin: 0 auto;
  }

  .pl-mv-catch {
    position: static;
    margin: 16px 0 0;
    font-size: 24px;
    line-height: 1.42; /* デザイン実測：行送り34px */
    text-align: center;
  }

  .pl-mv-photo {
    display: block;
    margin: 16px -20px 0;
  }

  .pl-mv-photo img {
    display: block;
    width: 100%;
  }

  .pl-mv-points {
    position: static;
    width: auto;
    margin-top: 20px;
  }

  .pl-mv-points li {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 44px;
    margin-bottom: 4px;
    font-size: 16px; /* デザイン実測 */
  }

  /* =ペット専用ランドリー機器
  -------------------------------------------------------------*/
  .pl-lineup {
    padding-top: 44px;
  }

  .pl-lineup-list {
    gap: 30px;
    margin-top: 26px;
  }

  .pl-lineup-list li {
    width: 120px;
  }

  .pl-lineup-list figure {
    height: 200px;
  }

  .pl-lineup-model {
    margin-top: 14px;
    font-size: 16px;
  }

  /* =選べる6タイプ：SPは3列×2段
  -------------------------------------------------------------*/
  .pl-types {
    padding-top: 48px;
  }

  .pl-types-lead {
    margin-top: 22px;
    font-size: 14px;
    line-height: 1.8;
    text-align: left;
  }

  .pl-types-lead br {
    display: none;
  }

  .pl-types-list {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 10px;
    max-width: 335px;
    margin-top: 26px;
  }

  .pl-types-list li {
    width: calc((100% - 20px) / 3);
  }

  .pl-types .pl-note {
    margin-top: 20px;
  }

  /* =TOSEIメーカー紹介：縦積み
  -------------------------------------------------------------*/
  .pl-maker {
    margin-top: 50px;
    padding: 40px 20px;
  }

  .pl-maker-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 24px;
  }

  .pl-maker-logo {
    width: 150px;
    margin: 0 auto;
  }

  .pl-maker-body p {
    font-size: 14px;
    line-height: 1.9;
  }

  .pl-maker-link {
    margin-top: 20px !important;
  }

  .pl-maker-link a {
    font-size: 14px;
  }

  /* =こんなペット施設に適しています：SPは3列
  -------------------------------------------------------------*/
  .pl-target {
    padding: 46px 20px;
  }

  .pl-target-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 26px 10px;
    max-width: 335px;
    margin-top: 30px;
  }

  .pl-target-icon {
    width: 100%;
    height: auto;
  }

  .pl-target-list p {
    margin-top: 4px;
    font-size: 12px;
  }

  /* =機器の特徴（概要）：縦積み
  -------------------------------------------------------------*/
  .pl-about {
    padding: 46px 20px;
  }

  .pl-about-body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 24px;
    margin-top: 30px;
  }

  .pl-about-fig {
    width: 100%;
  }

  .pl-about-fig img {
    width: 130px;
  }

  .pl-about-txt > p,
  .pl-about-list li {
    font-size: 14px;
    line-height: 1.85;
  }

  /* =製品紹介
  -------------------------------------------------------------*/
  .pl-products {
    padding: 46px 20px;
  }

  .pl-products-title {
    font-size: 24px;
  }

  .pl-products-note {
    margin-top: 22px;
    text-align: center;
  }

  /* SPは2機種を横並びではなく縦に積む（デザイン実測：写真195px／233px） */
  .pl-products-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 38px;
    margin-top: 67px;
  }

  .pl-products-list li {
    width: auto;
  }

  .pl-products-list figure {
    height: 195px;
  }

  .pl-products-list li:nth-child(2) figure {
    height: 233px;
  }

  .pl-products-model {
    margin-top: 19px;
    font-size: 16px;
  }

  .pl-products-desc {
    margin-top: 11px;
    font-size: 11px;
  }

  /* =導入効果
  -------------------------------------------------------------*/
  .pl-effect {
    padding: 46px 20px;
  }

  .pl-effect-card {
    margin-top: 30px;
    padding: 20px 16px 24px;
    border-radius: 10px;
  }

  .pl-effect-tags {
    gap: 8px;
  }

  .pl-effect-tags li {
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
  }

  .pl-effect-lead {
    margin-top: 18px;
    padding-left: 12px;
    font-size: 19px;
  }

  .pl-effect-items {
    margin-top: 18px;
  }

  .pl-effect-items li {
    margin-bottom: 16px;
    padding: 16px 16px 18px;
  }

  .pl-effect-items h4 {
    font-size: 16px;
  }

  .pl-effect-items p {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.8;
  }

  /* =特徴01〜04：番号を上に置いて縦積み
  -------------------------------------------------------------*/
  .pl-feature {
    padding: 46px 20px;
  }

  .pl-feature-sub {
    margin-top: 14px;
    font-size: 14px;
  }

  .pl-feature-lead {
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.85;
  }

  .pl-feature-item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0;
    margin-top: 16px;
    padding: 26px 16px 28px;
  }

  .pl-feature-no {
    width: auto;
    font-size: 38px;
  }

  /* PCは左の縦罫線、SPは番号の下の横罫線 */
  .pl-feature-body {
    width: 100%;
    margin-top: 14px;
    padding: 14px 0 0;
    border-left: none;
    border-top: 1px solid #C7D4DA;
  }

  .pl-feature-body h3 {
    font-size: 18px;
    text-align: center;
  }

  .pl-feature-body > p {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.85;
  }

  /* ドラム比較：縦積み */
  .pl-drum {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 22px;
    margin-top: 20px;
  }

  /* PCで付けた2カラム用の上限は、縦積みのSPでは邪魔になるので解除する */
  .pl-drum-col {
    width: 100%;
    max-width: none;
  }

  .pl-drum-name {
    text-align: center;
  }

  .pl-drum-desc {
    font-size: 12px;
  }

  /* 洗剤カード：縦積み */
  .pl-detergent {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
    margin-top: 20px;
  }

  .pl-detergent-card {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .pl-detergent-name {
    font-size: 14px;
  }

  .pl-detergent-desc {
    margin: 12px 16px 18px;
    font-size: 12px;
  }

  /* =ペット専用洗濯機で洗えるもの：表は横スクロール
  -------------------------------------------------------------*/
  .pl-washable {
    padding: 46px 20px;
  }

  .pl-washable-scroll {
    margin-top: 26px;
  }

  /* デザインSPでは行と列が入れ替わる（容量が列見出し、洗える物が行見出し）。
     マークアップは1つのままにしたいので、グリッド化して各セルを置き直す。
     display:contents で表の意味づけが消える環境があるため、HTML側に role を付けている */
  .pl-washable-table {
    display: grid;
    grid-template-columns: 97px repeat(3, 1fr);
    width: 100%;
    table-layout: auto;
  }

  .pl-washable-table thead,
  .pl-washable-table tbody,
  .pl-washable-table tr {
    display: contents;
  }

  .pl-washable-table th,
  .pl-washable-table td {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: auto;
    min-height: 44px;
    padding: 6px 4px;
    font-size: 12px;
  }

  /* 1列目（もとのthead）：目安ラベル＋洗える物4つ */
  .pl-washable-table thead th:nth-child(1) { grid-area: 1 / 1; }
  .pl-washable-table thead th:nth-child(2) { grid-area: 2 / 1; }
  .pl-washable-table thead th:nth-child(3) { grid-area: 3 / 1; }
  .pl-washable-table thead th:nth-child(4) { grid-area: 4 / 1; }
  .pl-washable-table thead th:nth-child(5) { grid-area: 5 / 1; }

  /* 2〜4列目（もとのtbodyの各行）：容量見出しと数量 */
  .pl-washable-table tbody tr:nth-child(1) th             { grid-area: 1 / 2; }
  .pl-washable-table tbody tr:nth-child(1) td:nth-child(2) { grid-area: 2 / 2; }
  .pl-washable-table tbody tr:nth-child(1) td:nth-child(3) { grid-area: 3 / 2; }
  .pl-washable-table tbody tr:nth-child(1) td:nth-child(4) { grid-area: 4 / 2; }
  .pl-washable-table tbody tr:nth-child(1) td:nth-child(5) { grid-area: 5 / 2; }

  .pl-washable-table tbody tr:nth-child(2) th             { grid-area: 1 / 3; }
  .pl-washable-table tbody tr:nth-child(2) td:nth-child(2) { grid-area: 2 / 3; }
  .pl-washable-table tbody tr:nth-child(2) td:nth-child(3) { grid-area: 3 / 3; }
  .pl-washable-table tbody tr:nth-child(2) td:nth-child(4) { grid-area: 4 / 3; }
  .pl-washable-table tbody tr:nth-child(2) td:nth-child(5) { grid-area: 5 / 3; }

  .pl-washable-table tbody tr:nth-child(3) th             { grid-area: 1 / 4; }
  .pl-washable-table tbody tr:nth-child(3) td:nth-child(2) { grid-area: 2 / 4; }
  .pl-washable-table tbody tr:nth-child(3) td:nth-child(3) { grid-area: 3 / 4; }
  .pl-washable-table tbody tr:nth-child(3) td:nth-child(4) { grid-area: 4 / 4; }
  .pl-washable-table tbody tr:nth-child(3) td:nth-child(5) { grid-area: 5 / 4; }

  /* 入れ替え後は 1行目＋1列目が見出し扱いになる。
     PC側の height:164px / width:266px は詳細度が高く残ってしまうので打ち消す */
  .pl-washable-table thead th {
    height: auto;
    min-height: 78px;
    background: #fff;
    color: #1A1A1A;
  }

  .pl-washable-head,
  .pl-washable-table tbody th {
    width: auto;
    height: auto;
    min-height: 48px;
    background: #DCEAF8;
    color: #052372;
  }

  .pl-washable-icon {
    width: 60px;
    margin-bottom: 6px;
  }

  /* =設置イメージ
  -------------------------------------------------------------*/
  .pl-install {
    padding: 46px 20px;
  }

  .pl-install-lead {
    margin-top: 24px;
    font-size: 14px;
    line-height: 1.85;
    text-align: left;
  }

  .pl-install-lead br {
    display: none;
  }

  .pl-install-fig {
    margin-top: 24px;
  }

  /* =お客様の声：縦積み
  -------------------------------------------------------------*/
  .pl-voice {
    padding: 46px 20px;
  }

  .pl-voice-shop {
    margin-top: 18px;
    font-size: 16px;
  }

  .pl-voice-shop span {
    display: block;
    font-size: 12px;
  }

  .pl-voice-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
    margin-top: 26px;
  }

  /* デザインSPは全ての行が「写真 → 本文」の順（PCは左右交互） */
  .pl-voice-row .pl-voice-fig {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
  }

  .pl-voice-fig {
    width: 100%;
  }

  .pl-voice-txt p {
    font-size: 13px;
    line-height: 1.9;
  }

  .pl-voice-cta-lead {
    margin-top: 40px;
    font-size: 18px;
  }

  .pl-voice-cta {
    margin-top: 20px;
    padding: 10px 0;
  }

  /* =世界が選ぶ理由：SPは2列
  -------------------------------------------------------------*/
  .pl-strength {
    padding: 46px 20px;
  }

  .pl-strength-ja {
    font-size: 14px;
  }

  .pl-strength-en {
    margin-top: 10px;
    font-size: 28px;
  }

  .pl-strength-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 335px;
    margin-top: 26px;
  }

  .pl-strength-list li {
    height: 170px;
    padding: 16px 12px;
  }

  .pl-strength-no {
    font-size: 28px;
  }

  .pl-strength-txt {
    margin-top: 12px;
    font-size: 13px;
  }

  /* =販売元：見出しと内容を縦に
  -------------------------------------------------------------*/
  .pl-company {
    padding: 46px 20px 40px;
  }

  .pl-company-title {
    font-size: 19px;
  }

  .pl-company-table {
    margin-top: 26px;
  }

  /* デザインSPも項目名と内容は横並び（項目名の列は実測106px、表は335px幅） */
  .pl-company-table th,
  .pl-company-table td {
    padding: 15px 0;
    font-size: 13px;
    line-height: 1.6;
  }

  .pl-company-table th {
    width: 106px;
    padding-right: 8px;
    font-weight: 700;
    color: #052372;
  }

  .pl-company-updated {
    margin-top: 14px;
    font-size: 11px;
  }

  /* =フッター追従バー：SPはボタン2つだけを全幅で並べる
  -------------------------------------------------------------*/
  .pl-fixbar {
    padding: 0;
  }

  .pl-fixbar-inner {
    width: 100%;
  }

  .pl-fixbar-logo,
  .pl-fixbar-tel {
    display: none;
  }

  .pl-fixbar-btns {
    width: 100%;
  }

  .pl-fixbar-btns li {
    width: 50%;
  }

  .pl-fixbar-btns li a {
    padding: 12px 4px;
    font-size: 12px;
  }

  /* SPはロゴと電話が消えるぶんバーが低い（実測82px） */
  .pl main {
    padding-bottom: 90px;
  }
}