@charset "UTF-8";

/*----------------------------------------------------------
コインランドリー系 共通CTAエリア（.cl-cta）
　他LPにも流用できる独立コンポーネント。
　使い方：
　　<link rel="stylesheet" href="/css/cl-cta.css">
　　<div class="js-cl-cta"></div>   ← 表示したい場所に置く
　　<script src="/js/cl-cta.js"></script>
　　※/inc/cl-cta.html を JS が読み込んで各プレースホルダに挿入する
-------------------------------------------------------------*/

.cl-cta,
.cl-cta *,
.cl-cta *::before,
.cl-cta *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* reset.css のクリアフィックス疑似要素（div:after 等）が flex/grid の子になり
   崩れるため、このコンポーネント内では無効化する（ボタンの矢印 a::after は対象外） */
.cl-cta div:after,
.cl-cta ul:after,
.cl-cta li:after,
.cl-cta dl:after,
.cl-cta p:after,
.cl-cta section:after {
  content: none;
  display: none;
}

.cl-cta {
  background: #fff;
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Sans", "メイリオ", Meiryo, sans-serif;
}

.cl-cta-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 30px 0;
}

/* =見出し
-------------------------------------------------------------*/
.cl-cta-head {
  text-align: center;
  color: #0B1A57;
  line-height: 1.3;
}

.cl-cta-head span {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.cl-cta-head strong {
  display: block;
  margin-top: 4px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* =電話ボックス
　 PC：アイコン｜（番号／営業時間）  SP：（アイコン｜番号）／営業時間
　 → grid のエリア指定で両対応
-------------------------------------------------------------*/
.cl-cta-tel {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "icon num"
    "icon hours";
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* 行を中央にまとめる（既定のstretchだと余白が行間に配られ、番号と営業時間が離れてしまう） */
  align-content: center;
  justify-content: center;
  -webkit-column-gap: 16px;
     -moz-column-gap: 16px;
          column-gap: 16px;
  /* 番号と営業時間の間隔。
     デザインの gap は 4px だが、それはテキストの行ボックス（line-height の余白）込みの値。
     番号を画像にすると余白が無くなるため、見た目の間隔がデザインと同じ約16pxになるよう14pxを指定 */
  row-gap: 14px;
  min-height: 112px;
  margin-top: 16px;
  padding: 12px;
  background: #3076C7;
}

.cl-cta-tel-icon {
  grid-area: icon;
  width: 64px;
  height: 64px;
}

.cl-cta-tel-icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.cl-cta-tel-num {
  grid-area: num;
  text-align: left; /* 番号は営業時間と左端を揃える（デザイン準拠） */
  /* アイコン（背の高い2行ぶち抜き）で生じる行の余白を外側へ逃がし、
     番号と営業時間をデザイン通りの間隔にする */
  -ms-flex-item-align: end;
      align-self: end;
  /* デザインではテキスト側がアイコンの中心よりわずかに下。その差を合わせる */
  position: relative;
  top: 3px;
}

/* 電話番号は画像（SVG）。閲覧環境のフォントに左右されずデザイン通りに表示する */
.cl-cta-tel-num a {
  display: block;
  line-height: 0;
  text-decoration: none;
}

.cl-cta-tel-num img {
  display: block;
  width: 269px;
  height: auto;
}

/* SP専用の改行（営業時間を「時間／（注記）」の2行に分ける） */
.cl-cta-spbr {
  display: none;
}

.cl-cta-tel-hours {
  grid-area: hours;
  -ms-flex-item-align: start;
      align-self: start;
  position: relative;
  top: 3px; /* 番号と一緒に下げる（上の .cl-cta-tel-num と同じ理由） */
  width: 335px; /* デザインのテキスト列幅。営業時間はこの中で中央寄せ */
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: #fff;
  text-align: center;
}

/* =ボタン（3つ）
-------------------------------------------------------------*/
.cl-cta-btns-wrap {
  padding: 16px 24px;
  background: #E5E7EA;
}

.cl-cta-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl-cta-btns li {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

.cl-cta-btns a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  min-height: 65px;
  height: 100%;
  padding: 8px 16px;
  border-radius: 8px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #FF7E2E), to(#FF4E24));
  background: linear-gradient(180deg, #FF7E2E 1%, #FF4E24 100%);
  text-decoration: none;
  color: #fff;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.cl-cta-btns a:hover {
  opacity: 0.85;
}

.cl-cta-btn-icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 60px;
  height: 60px;
}

.cl-cta-btn-icon img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.cl-cta-btn-txt {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  /* 「セミナー」等が語中で折れないように禁則を効かせる */
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* 右端のシェブロン（＞） */
.cl-cta-btns a:after {
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-right: 2px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

/* =スマホ（780px以下）
-------------------------------------------------------------*/
@media screen and (max-width: 780px) {

  .cl-cta-inner {
    padding: 24px 20px;
  }

  .cl-cta-head strong {
    font-size: 24px;
  }

  /* 電話：アイコン＋番号を1行、営業時間は下に中央寄せ */
  .cl-cta-tel {
    grid-template-areas:
      "icon num"
      "hours hours";
    -webkit-column-gap: 10px;
       -moz-column-gap: 10px;
            column-gap: 10px;
    /* SPはアイコン(44px)が行の高さを決め、その余白が間隔に足されるため小さめでよい */
    row-gap: 4px;
    min-height: 0;
    padding: 20px 16px;
  }

  .cl-cta-tel-icon {
    width: 44px;
    height: 44px;
  }

  .cl-cta-tel-num {
    text-align: left; /* SPはアイコンの隣に番号を置く（PCの中央寄せを打ち消す） */
    -ms-flex-item-align: center;
        align-self: center; /* SPはアイコンと番号を上下中央で揃える */
    top: 0; /* PCの微調整を打ち消す */
  }

  /* 画像なので端末のフォント設定に影響されない。画面幅に合わせて縮小のみ */
  .cl-cta-tel-num img {
    width: 190px;
    width: min(56vw, 219px);
  }

  .cl-cta-tel-hours {
    width: auto; /* PCの固定列幅を解除 */
    top: 0; /* PCの微調整を打ち消す */
    text-align: center;
  }

  .cl-cta-spbr {
    display: inline;
  }

  /* ボタン：縦積み・全幅 */
  .cl-cta-btns-wrap {
    padding: 16px;
  }

  .cl-cta-btns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 10px;
  }

  .cl-cta-btns li {
    -ms-flex: none;
        flex: none;
    width: 100%;
  }

  .cl-cta-btns a {
    min-height: 64px;
    padding: 10px 16px;
  }

  /* アイコンを少し小さくして文言の幅を確保（SPデザイン準拠） */
  .cl-cta-btn-icon {
    width: 48px;
    height: 48px;
  }

  .cl-cta-btn-txt {
    /* 端末のフォント拡大でも1行で収まるよう画面幅基準で指定 */
    font-size: 15px;
    font-size: min(4.3vw, 16px);
  }

  /* SPはボタン幅が広く1行に収まるため、PC用の改行は無効化 */
  .cl-cta-pcbr {
    display: none;
  }
}