@charset "UTF-8";
/* =========================================================
   custom_densai_kitei.scss
   /business/service/densai/kitei/ 専用CSS。
   - 「ご利用規定」PDFリンク一覧をボタン化し、縦1列（.btnRow--column）で
     並べるための追加スタイル。
   - base.css / custom.css（共有）は変更せず、このページだけに追加読み込みする。
   - 読み込みは custom.css の「後」にすること（.btn / .btnRow を上書きするため）。
   ========================================================= */

/* 縦1列に積む .btnRow のバリアント */
.btnRow--column {
  flex-direction: column;
  align-items: stretch;
}

/* 長いテキスト（規定名＋PDF容量）を折り返して収められるよう、
   ピル型ボタンの固定高さ・nowrapを解除する */
.btnRow--column .btn {
  /* 元の .btn { flex: 0 1 240px } は横並び（flex-direction: row）前提で
     「幅240px」の意味で書かれているため、そのまま縦積み（column）にすると
     240px が高さの基準に化けてボタンが縦に伸びてしまう。
     縦積みでは幅はここで width:100% を明示するので、flex-basis はコンテンツ
     依存（auto）に戻す。 */
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 60px;
  padding: 16px 20px;
  border-radius: 9999px;
  justify-content: space-between;
  gap: 12px;
}

.btnRow--column .btn__text {
  min-width: 0;
  white-space: normal;
  text-align: left;
  /* .btn { line-height: 1 } は1行想定の値で、2行に折り返すここではやや
     詰まりすぎるため、可読性のために少し広げる */
  line-height: 1.4;
}

/* ------------------------------------------------------------
   アイコン: 矢印(.btn__icon)ではなくPDF書類アイコン(.btn__iconPdf)を使用。
   .btn__iconPdf は base.css 側で色がベタ書き（デフォルト黒 #160d06 /
   hoverで白）になっており、これは白背景ベースの .btn--normal / .btn--pdf
   用の配色。.btn--subPrimary（グラデーション背景＋白文字、hoverで白背景＋
   ティール文字）とは配色が逆になるため、このページ限定で上書きする。
------------------------------------------------------------- */
.btnRow--column .btn__iconPdf {
  flex-shrink: 0;
}

/* デフォルト: グラデーション背景の上なので白文字と同じ白アイコンに */
.btnRow--column .btn--subPrimary .btn__iconPdf::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' fill='none'/%3E%3Cpath d='M12.5,20H2.5A2.5,2.5,0,0,1,0,17.5V7.5a.5.5,0,0,1,1,0v10A1.5,1.5,0,0,0,2.5,19h10a.5.5,0,1,1,0,1' fill='%23fff'/%3E%3Cpath d='M17.5,17H5.5A2.5,2.5,0,0,1,3,14.5V2.5A2.5,2.5,0,0,1,5.5,0h12A2.5,2.5,0,0,1,20,2.5v12A2.5,2.5,0,0,1,17.5,17M5.5,1A1.5,1.5,0,0,0,4,2.5v12A1.5,1.5,0,0,0,5.5,16h12A1.5,1.5,0,0,0,19,14.5V2.5A1.5,1.5,0,0,0,17.5,1Z' fill='%23fff'/%3E%3Cpath d='M8.374,6.681A1.522,1.522,0,0,1,9,7.325a2.091,2.091,0,0,1,.218.98A2.1,2.1,0,0,1,9,9.286a1.52,1.52,0,0,1-.622.643,1.91,1.91,0,0,1-.946.224H6.862v1.2H5.541v-4.9H7.428a1.92,1.92,0,0,1,.946.223M7.747,8.729a.733.733,0,0,0,0-.848.518.518,0,0,0-.4-.15H6.862V8.879h.482a.514.514,0,0,0,.4-.15' fill='%23fff'/%3E%3Cpath d='M9.7,6.457h1.932a2.229,2.229,0,0,1,1.157.3,2.011,2.011,0,0,1,.778.85,2.872,2.872,0,0,1,.278,1.3,2.876,2.876,0,0,1-.278,1.3,2.011,2.011,0,0,1-.778.85,2.229,2.229,0,0,1-1.157.3H9.7Zm1.876,3.611a.846.846,0,0,0,.681-.3,1.3,1.3,0,0,0,.255-.858,1.3,1.3,0,0,0-.255-.857.84.84,0,0,0-.681-.3h-.555v2.323Z' fill='%23fff'/%3E%3Cpath d='M15.648,7.7v.84h1.635V9.789H15.648v1.567H14.327v-4.9h3.185V7.7Z' fill='%23fff'/%3E%3C/svg%3E");
}

/* hover/active: .btn--subPrimary が白背景+ティール文字に反転するので、
   アイコンもティール(#39A7AA)に。base.css の a.btn:hover .btn__iconPdf::before
   （白固定）より詳細度を上げて上書きする */
.btnRow--column .btn--subPrimary:is(:hover, :active) .btn__iconPdf::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' fill='%23fff' opacity='0'/%3E%3Cpath d='M12.5,20H2.5A2.5,2.5,0,0,1,0,17.5V7.5a.5.5,0,0,1,1,0v10A1.5,1.5,0,0,0,2.5,19h10a.5.5,0,1,1,0,1' fill='%2339A7AA'/%3E%3Cpath d='M17.5,17H5.5A2.5,2.5,0,0,1,3,14.5V2.5A2.5,2.5,0,0,1,5.5,0h12A2.5,2.5,0,0,1,20,2.5v12A2.5,2.5,0,0,1,17.5,17M5.5,1A1.5,1.5,0,0,0,4,2.5v12A1.5,1.5,0,0,0,5.5,16h12A1.5,1.5,0,0,0,19,14.5V2.5A1.5,1.5,0,0,0,17.5,1Z' fill='%2339A7AA'/%3E%3Cpath d='M8.374,6.681A1.522,1.522,0,0,1,9,7.325a2.091,2.091,0,0,1,.218.98A2.1,2.1,0,0,1,9,9.286a1.52,1.52,0,0,1-.622.643,1.91,1.91,0,0,1-.946.224H6.862v1.2H5.541v-4.9H7.428a1.92,1.92,0,0,1,.946.223M7.747,8.729a.733.733,0,0,0,0-.848.518.518,0,0,0-.4-.15H6.862V8.879h.482a.514.514,0,0,0,.4-.15' fill='%2339A7AA'/%3E%3Cpath d='M9.7,6.457h1.932a2.229,2.229,0,0,1,1.157.3,2.011,2.011,0,0,1,.778.85,2.872,2.872,0,0,1,.278,1.3,2.876,2.876,0,0,1-.278,1.3,2.011,2.011,0,0,1-.778.85,2.229,2.229,0,0,1-1.157.3H9.7Zm1.876,3.611a.846.846,0,0,0,.681-.3,1.3,1.3,0,0,0,.255-.858,1.3,1.3,0,0,0-.255-.857.84.84,0,0,0-.681-.3h-.555v2.323Z' fill='%2339A7AA'/%3E%3Cpath d='M15.648,7.7v.84h1.635V9.789H15.648v1.567H14.327v-4.9h3.185V7.7Z' fill='%2339A7AA'/%3E%3C/svg%3E");
}
