@charset "UTF-8";

/* 202509新規作成　共通モジュール */

/*
文字サイズ（font-size）
PC
・タイトル（例：退会完了）：28px
・説明文：14px
・説明文（注意書き）：12px
・ボタン内文字：16px

文字の寄せ
・タイトル（退会完了など）：左寄せ
・説明文：中央寄せ
・説明文（注意書き）：中央寄せ
・ボタン内文字：中央寄せ

文字色
・タイトル（退会完了など）：#606060
・説明文：#222
・説明文（注意書き）：#222
・ボタンはものによって調整
*/

.page-module {
  --color-primary: #E63082;
  --color-primary-hover: #ea5498;
  --color-secondary: #00AAEB;
  --color-required: #EE7621;
  --color-white: #FFF;
  --color-btn-bg: #D4D4D4;
  --color-btn-bg-hover: silver;
  --color-border: #d7dddf;
  --color-heading: #606060;
  --color-text: #313131;
  --color-note: #222;
  --line-height-s: 1.2;
  --transition-duration: 0.17s;

  --fz-title: 28px;
  --fz-heading: 16px;
  --fz-notice: 14px;
  --fz-note: 12px;
  --fz-btn: 16px;

  --radius: 5px;

  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

.page-module .flex-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.page-module .flex-row:has(.form-toggle-btn) {
  gap: 8px;
}
.page-module .flex-row:has(.badge) {
  flex-wrap: nowrap;
  align-items: baseline;
}
.page-module .flex-row-right {
  margin-left: auto;
}

.page-module .table {
  margin: 0;
  display: grid;
  grid-template-columns: 31% 1fr;
  border-left: solid 1px var(--color-border);
  border-top: solid 1px var(--color-border);
}
.page-module .table + .table {
  border-top: none;
}
.page-module .table-th {
  margin: 0;
  padding: 20px;
  font-weight: 700;
  color: var(--color-heading);
  border-bottom: solid 1px var(--color-border);
  border-right: solid 1px var(--color-border);
  background-color: #f9f5d9;
}
.page-module .table-td {
  margin: 0;
  padding: 20px;
  border-bottom: solid 1px var(--color-border);
  border-right: solid 1px var(--color-border);
  color: var(--color-note);
}

.page-module .heading-secondary {
  font-size: var(--fz-heading);
  font-weight: bold;
  color: var(--color-heading);
}

.page-module .button {
  appearance: none;
  border: none;
  background-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 20px;
  color: var(--color-white);
  font-size: var(--fz-btn);
  font-weight: bold;
  line-height: var(--line-height-s);
  text-decoration: none;
  transition: all linear var(--transition-duration);
  box-sizing: border-box;
}
.page-module .button:hover {
  color: var(--color-white);
  text-decoration: none;
}
.page-module .button.-primary {
  background-color: var(--color-primary);
}
.page-module .button.-primary:hover {
  background-color: var(--color-primary-hover);
}
.page-module .button.-xs {
  padding: 6px 20px;
  min-width: 100px;
  font-size: var(--fz-note);
}


.page-module .text-notice {
  font-size: var(--fz-notice);
  color: var(--color-note);
}
.page-module .text-note {
  font-size: var(--fz-note);
  color: var(--color-note);
}
.page-module .text-strong {
  font-weight: 700;
}