/*
 * shanonRedesign_Common.css (更新版)
 * 汎用的なリニューアルデザインスタイルシート
 */

/* ----------------------------------
 * 基本設定とリセット
 * ---------------------------------- */

/* bodyの基本スタイル (既存のスタイルを!importantで上書き) */
body {
    background-color: var(--color-page-bg) !important; /* 背景色 */
    font-family: var(--font-family-base);
    color: var(--color-text) !important; /* 基本文字色 */
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 8%;
}

:root {
    /* フォント */
    --font-family-base: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --font-family-button: "Noto Sans JP", sans-serif;
    --font-family-display: "Orbitron", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;

    /* ページ・パネル・入力欄の背景色 */
    --color-page-bg: #0b0c1b;
    --color-panel-bg: #170a1a;
    --color-input-active-bg: #4b184e;
    --color-warning-field-bg: #36341a;
    --color-button-bg: #0d0f1d;
    --color-button-active-bg: #15182a;

    /* 文字・リンクの色 */
    --color-text: #ffffff;
    --color-link: #ff2a8d;
    --color-link-visited: #7e3286;
    --color-heading-subtitle: #a8a9bd; /* 見出し下の日本語サブタイトル */

    /* アクセント・警告表示の色 */
    --color-accent-pink: #ff2a8d;
    --color-accent-cyan: #00f0ff;
    --color-glow-pink: #ff2bd6;
    --color-warning: #fdf071;

    /* 枠線の色 */
    --color-panel-border: #853d5e;
    --color-autofill-border: #d8d8e8;

    /* 影・発光色（末尾の数値は各指定箇所で透明度として設定） */
    --shadow-rgb-white: 255, 255, 255;
    --shadow-rgb-pink: 255, 43, 214;
    --shadow-rgb-cyan: 0, 240, 255;
    --shadow-rgb-warning: 255, 233, 74;
    --shadow-rgb-heading-cyan: 0, 238, 255; /* 見出し文字のシアン発光 */
    --shadow-rgb-heading-magenta: 255, 0, 204; /* 見出し文字のマゼンタ発光 */

    background-color: var(--color-page-bg);
}
a,a:link{
    color:var(--color-link);
    text-decoration: underline;
}
a:visited{
    color: var(--color-link-visited);
    text-decoration: underline;
}

a:hover {
    color: var(--color-link-visited);
    text-decoration: underline;
}

label, input, button, select, textarea {
    font-size: 15px;
    font-weight: normal;
    line-height: 20px;
    vertical-align: middle;
    margin-bottom: 5px;
    display: inline-block;
}
h3{
    padding: 10px 0;
    font-size: 24px;
}
blockquote {
    border-color: var(--color-accent-cyan) !important;
}
blockquote p{
    color: var(--color-text) !important;
}
blockquote a{
    text-decoration:none !important;
    font-weight: normal !important;
}
.set_recalculate {
    background-color: transparent !important;
}

/* お問い合わせ先 */
.ss_inqtxt {
    line-height: 1.8;
    margin-left: 14px;
}
/* ログイン情報変更の項目名 */
.ss_login table th {
    width: 60%;
}
/* ----------------------------------
 * 全体レイアウト
 * ---------------------------------- */

/* .ss_contents (既存のスタイルを上書き) */
.ss_contents {
    width: 1000px;
    margin: 60px auto 80px;
/*    padding: 40px 50px;
    background-color: var(--color-text) !important;
    border-radius: 8px;
    box-sizing: border-box; */
}
body>.ss_contents {
    padding-top: 0;
}
.ss_login,
.ss_form,
.cmmnBG_w{
    margin: 40px auto;
    padding: 40px 50px;
    background-color: var(--color-panel-bg) !important;
    border: 1px solid var(--color-panel-border);;
    border-radius: 8px;
    box-sizing: border-box;
}

#header > img,
body>#header .logo img,
#header h1.logo{ 
    margin: 0; 
}

.navbar {
    margin-bottom: 0;
}
.navbar-inner {
    background: none;
    border: none;
    box-shadow: none;
    border-radius: unset;
}
.navbar .brand {
    padding: 10px 0;
    font-size: 24px;
    text-shadow: none;
}
/* エラーページ */
.alert-danger, 
.alert-error {
    background-color: var(--color-text);
    border-color: var(--color-warning);
}

/* ----------------------------------
 * パンくずリスト
 * ---------------------------------- */

/* .ss_contents > .breadcrumb (セレクタを詳細化して上書き) */
.navbar .brand {
    background: transparent !important;
    box-shadow: none;
    color: var(--color-text) ;
}

.ss_contents > .breadcrumb {
    display: block !important;
    background-color: transparent !important;
    border-radius: 0;
    padding: 0 0 20px 0;
    margin: 0 0 20px 0;
    list-style: none;
}
.ss_contents > .breadcrumb li {
    display: inline;
    font-size: 14px;
    color: var(--color-text);
    text-shadow: none;
}
.ss_contents > .breadcrumb .divider {
    padding: 0 8px;
    color: var(--color-text);
}
.ss_contents > .breadcrumb .ss_active {
    color: var(--color-accent-pink) !important;
    font-weight: bold;
}

/* ----------------------------------
 * 個人情報保護文言
 * ---------------------------------- */
#user #lightbox-panel{
    background: var(--color-panel-bg) !important;
    border: 1px solid var(--color-panel-border);
}
/* ----------------------------------
 * フォームレイアウト table
 * ---------------------------------- */

/* bootstrap.cssのtableスタイルを詳細なセレクタで上書き */
.table,
.table-bordered,
.table-striped,
.ss_form .table,
.ss_form .table-bordered,
.ss_form .table-striped {
    width: 100%;
    border-collapse: separate; /* テーブルのレイアウトを解除するために必要 */
    border-spacing: 0;
    border: none;
}


/* .ss_form .table (セレクタを詳細化してレイアウトをリセット) */
.table th,
.table td,
.ss_form .table th,
.ss_form .table td {
    display: block;
    width: 100%;
    border: none !important;
    padding: 0;
    background-color: transparent !important;
    text-align: left;
}

tr,
.ss_form tr {
    margin-bottom: 24px;
    display: block; /* trもブロック要素に */
}

/* .ss_form .table th (ラベルとして再定義) */
.table th,
.ss_form .table th {
    font-weight: 600;
    color: var(--color-text) !important;
    margin-bottom: 8px;
    font-size: 1.2em;
    line-height: 1.625;
}

/* .ss_input のスタイルを調整 */
.ss_input {
    display: block;
    align-items: center;
    row-gap: 6px;
}

input[type="text"],
input[type="password"],
input[type="email"],
select {
    width: 100%;
    height: 54px;
    padding: 0 12px;
    margin-bottom: 8px;
    border: 1px solid var(--color-text) !important;
    border-radius: 6px !important;
    background-color: var(--color-page-bg) !important;
    font-size: 1.8rem;
    color: var(--color-text);
    box-sizing: border-box;
    box-shadow: none !important;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
/* 横並びでinputがあるときの定義 姓名など*/
.table td:has(.ss_input:nth-of-type(2):last-child) .ss_input{
        width: auto;
        display: table-cell;
}
.table td:has(.ss_input:nth-of-type(2):last-child) .ss_input input[type="text"]{
        width: 80%;
}
/* フォーカス時のスタイルを再定義 */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus {
    border-color: var(--color-accent-pink) !important;
    background-color: var(--color-input-active-bg) !important;
    box-shadow: none !important;
    outline: none;
}

/* ラジオボタンとチェックボックス */
input[type="radio"],
input[type="checkbox"] {
    width: 1.25em;
    height: 1.25em;
    margin-right: 10px;
    accent-color: var(--color-accent-pink)  !important; /* 選択したときの色 */
    box-shadow: none !important;
}

/* 選択時の色をフォントカラーに合わせる */
input[type="radio"]:checked,
input[type="checkbox"]:checked {
    accent-color: var(--color-text);
}

/* 補足テキストのスタイル */
.ss_bottomComment,
.ss_rightComment,
.ss_leftComment {
    font-size: 13px;
    color: var(--color-text);
    white-space: normal;
}
.ss_bottomComment { flex-basis: 100%; }
.ss_leftComment { margin-right: 10px; }
.ss_rightComment { margin-left: 10px; }

/* ----------------------------------
 * エラーメッセージのスタイル
 * エラーテキスト、必須アイコン
 * ---------------------------------- */

.ss_contents p font {
    color: var(--color-text) !important;
}
table th .ss_notnull {
    vertical-align: text-top;
}

.label-warning {
    display: inline-block;
    background-color: var(--color-warning) !important;
    color: var(--color-page-bg) !important;
    font-size: 12px;
    padding: 4px 5px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 8px !important;
    text-shadow: none;
    box-shadow:
    0 0 8px rgba(var(--shadow-rgb-warning), 0.75),
    0 0 9px rgba(var(--shadow-rgb-warning), 0.3);
}

/* .formError {
    display: block;
    margin-bottom: 8px;
} */
.warning input, 
.warning select,
.warning textarea {
    border-color: var(--color-text) !important;
    background-color: var(--color-warning-field-bg);
}

/* ！必ず入力してください　のアイコン */
.formError .label-warning,
.ss_input .label-warning,
.warning > span.label.label-warning,
#zip .ss_input span.label-warning {
    background: var(--color-warning)  !important;
    margin-bottom: 10px;
}

/* ！必ず入力してください　の文字 */
.formError .formErrorContent,
.ss_error_msg,
.errorMsg,
#zip .ss_input span.ss_error_msg,
#zip .ss_input span.formErrorContent {
    color: var(--color-warning) !important;
    vertical-align: top;
    margin-left: 10px;
}
.table tbody tr.warning > td {
    background-color: transparent !important;
}

/* <font color="red"> タグで出力されるエラーメッセージの色を上書き */
p font[color="red"] {
    color: var(--color-warning) !important;
}

/* ----------------------------------
 * 特定の入力欄の調整
 * ---------------------------------- */

#zip .ss_input { flex-wrap: nowrap; }
#zip input:first-of-type { width: 80px; flex-grow: 0; }
#zip input:last-of-type { width: 100px; flex-grow: 0; }
#zip .ss_input span { margin: 0 5px; }
#zip .ss_input span.formError { margin: 0; }
.validate5 .ss_input { flex-wrap: wrap; }
.validate5 .ss_input input { max-width: 300px; }
.validate5 .ss_bottomComment { order: 2; }

/* =========================================
   グリッチ見出し 共通
========================================= */

.login_title {
  position: relative;
  z-index: 0;
  display: inline-block;
  margin: 0;
  font-family: var(--font-family-display);
  font-size: clamp(2.3rem, 6.5vw, 3.3rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: clamp(0.04em, 0.8vw, 0.1em);
  color: var(--color-text);
  white-space: nowrap;
  isolation: isolate;
  text-shadow:
    0 0 4px rgba(var(--shadow-rgb-white), 0.9),
    0 0 10px rgba(var(--shadow-rgb-heading-cyan), 0.45),
    0 0 18px rgba(var(--shadow-rgb-heading-magenta), 0.3);
}

.login_title::before,
.login_title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  white-space: nowrap;
  pointer-events: none;
}

.login_title::before {
  z-index: -1;
  color: var(--color-accent-cyan);
  text-shadow: 0 0 8px var(--color-accent-cyan);
  animation: glitch-cyan 4s infinite;
}

.login_title::after {
  z-index: -1;
  color: var(--color-accent-pink);
  text-shadow: 0 0 8px var(--color-accent-pink);
  animation: glitch-magenta 4s infinite;
}

.login_sub {
  position: relative;
  display: inline-block;
  margin-top: 4px;
  padding-bottom: 15px;
  color: var(--color-heading-subtitle);
  font-family: var(--font-family-button);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.12em;
}

.login_sub::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 70px;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--color-accent-pink) 0%,
    var(--color-text) 50%,
    var(--color-accent-cyan) 100%
  );
  box-shadow:
    0 0 12px rgba(var(--shadow-rgb-pink), 0.7),
    0 0 6px var(--color-accent-cyan);
}

@keyframes glitch-cyan {
  0%, 88%, 100% { transform: translate(-2px, 0); }
  89% { transform: translate(-7px, 1px); }
  90% { transform: translate(3px, -1px); }
  91% { transform: translate(-5px, 0); }
  92% { transform: translate(-2px, 0); }
}

@keyframes glitch-magenta {
  0%, 88%, 100% { transform: translate(2px, 0); }
  89% { transform: translate(7px, -1px); }
  90% { transform: translate(-3px, 1px); }
  91% { transform: translate(5px, 0); }
  92% { transform: translate(2px, 0); }
}

@media screen and (max-width: 600px) {
  @keyframes glitch-cyan {
    0%, 88%, 100% { transform: translate(-1px, 0); }
    89% { transform: translate(-3px, 1px); }
    90% { transform: translate(2px, -1px); }
    91% { transform: translate(-2px, 0); }
    92% { transform: translate(-1px, 0); }
  }

  @keyframes glitch-magenta {
    0%, 88%, 100% { transform: translate(1px, 0); }
    89% { transform: translate(3px, -1px); }
    90% { transform: translate(-2px, 1px); }
    91% { transform: translate(2px, 0); }
    92% { transform: translate(1px, 0); }
  }
}

/* =========================================
   フォームボタン 共通
========================================= */

.ss_form_btn {
  width: 80%;
}

.ss_form_btn .btn,
.ss_form_btn .btn a {
  color: inherit;
  text-decoration: none;
}


/* =========================================
   NEXT BUTTON
========================================= */

.ss_form_btn button.btn.btn-primary.btn-large {
  all: unset;

  box-sizing: border-box;

  position: relative;

  min-width: 190px !important;
  height: 60px !important;

  padding: 0 50px 0 28px !important;
  margin: 20px 0 20px 25px !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  color: var(--color-text) !important;

  background: var(--color-button-bg) !important;
  background-image: none !important;

  border: 1px solid var(--color-text) !important;
  border-radius: 8px !important;

  font-family: var(--font-family-button) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;

  cursor: pointer;

  overflow: hidden;

  text-shadow:
    0 0 3px rgba(var(--shadow-rgb-white), .9),
    0 0 7px rgba(var(--shadow-rgb-pink), .3);

  box-shadow:
    0 0 3px rgba(var(--shadow-rgb-white), .65),
    0 0 7px rgba(var(--shadow-rgb-white), .18),
    0 0 12px rgba(var(--shadow-rgb-pink), .55),
    0 0 20px rgba(var(--shadow-rgb-pink), .28) !important;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

/* 既存の疑似要素をリセット */
.ss_form_btn button.btn.btn-primary.btn-large::before,
.ss_form_btn button.btn.btn-primary.btn-large::after {
  content: none !important;
  display: none !important;
}


/* =========================================
   HOVER / FOCUS
========================================= */

.ss_form_btn button.btn.btn-primary.btn-large:hover,
.ss_form_btn button.btn.btn-primary.btn-large:focus-visible {
  color: var(--color-text) !important;

  background: var(--color-button-bg) !important;

  border-color: var(--color-text) !important;

  transform: translateY(-2px);

  box-shadow:
    0 0 4px rgba(var(--shadow-rgb-white), .8),
    0 0 10px rgba(var(--shadow-rgb-pink), .75),
    0 0 20px rgba(var(--shadow-rgb-pink), .5),
    0 0 28px rgba(var(--shadow-rgb-pink), .25) !important;
}


/* =========================================
   ACTIVE
========================================= */

.ss_form_btn button.btn.btn-primary.btn-large:active {
  transform: translateY(1px) scale(.97) !important;

  background: var(--color-button-active-bg) !important;

  box-shadow:
    0 0 4px rgba(var(--shadow-rgb-white), .8),
    0 0 10px rgba(var(--shadow-rgb-pink), .75),
    0 0 20px rgba(var(--shadow-rgb-pink), .5),
    inset 0 0 14px rgba(var(--shadow-rgb-white), .12) !important;
}


/* =========================================
   DISABLED
========================================= */

.ss_form_btn button.btn.btn-primary.btn-large:disabled {
  opacity: .45 !important;

  cursor: not-allowed !important;

  box-shadow: none !important;

  transform: none !important;
}


/* =========================================
   RIGHT ARROW
========================================= */

.ss_form_btn button.btn.btn-primary.btn-large i.icon-chevron-right {
  position: absolute !important;

  top: 50% !important;
  right: 20px !important;
  left: auto !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;

  transform: translateY(-50%);

  background: none !important;
  background-image: none !important;

  font-size: 0;

  overflow: visible;

  transition: transform .2s ease;
}


/* CSSで▶を生成 */
.ss_form_btn button.btn.btn-primary.btn-large i.icon-chevron-right::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 0;

  width: 0;
  height: 0;

  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid var(--color-text);

  transform: translateY(-50%);

  filter:
    drop-shadow(0 0 3px var(--color-glow-pink));
}


/* hover時に矢印を少し右へ */
.ss_form_btn button.btn.btn-primary.btn-large:hover i.icon-chevron-right,
.ss_form_btn button.btn.btn-primary.btn-large:focus-visible i.icon-chevron-right {
  transform: translate(3px, -50%);
}


/* click時はもう少し右へ */
.ss_form_btn button.btn.btn-primary.btn-large:active i.icon-chevron-right {
  transform: translate(6px, -50%);
}


/* =========================================
   KEYBOARD FOCUS
========================================= */

/* .ss_form_btn button.btn.btn-primary.btn-large:focus-visible {
  outline: 1px solid var(--color-accent-cyan) !important;
  outline-offset: 4px !important;
} */

/* =========================================
   BACK BUTTON
========================================= */

.ss_form_btn button.btn.btn-large:not(.btn-primary) {
  all: unset;

  box-sizing: border-box;

  position: relative;

  min-width: 195px !important;
  height: 60px !important;

  padding: 0 28px 0 50px !important;
  margin: 20px 0 !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  color: var(--color-text) !important;

  background: var(--color-button-bg) !important;
  background-image: none !important;

  border: 1px solid var(--color-text) !important;
  border-radius: 8px !important;

  font-family: var(--font-family-button) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;

  cursor: pointer;

  overflow: hidden;

  text-shadow:
    0 0 3px rgba(var(--shadow-rgb-white), .9),
    0 0 7px rgba(var(--shadow-rgb-cyan), .3);

  box-shadow:
    0 0 3px rgba(var(--shadow-rgb-white), .65),
    0 0 7px rgba(var(--shadow-rgb-white), .18),
    0 0 12px rgba(var(--shadow-rgb-cyan), .55),
    0 0 20px rgba(var(--shadow-rgb-cyan), .28) !important;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}


/* 既存疑似要素を停止 */
.ss_form_btn button.btn.btn-large:not(.btn-primary)::before,
.ss_form_btn button.btn.btn-large:not(.btn-primary)::after {
  content: none !important;
  display: none !important;
}


/* =========================================
   HOVER / FOCUS
========================================= */

.ss_form_btn button.btn.btn-large:not(.btn-primary):hover,
.ss_form_btn button.btn.btn-large:not(.btn-primary):focus-visible {
  color: var(--color-text) !important;

  background: var(--color-button-bg) !important;

  border-color: var(--color-text) !important;

  transform: translateY(-2px);

  box-shadow:
    0 0 4px rgba(var(--shadow-rgb-white), .8),
    0 0 10px rgba(var(--shadow-rgb-cyan), .75),
    0 0 20px rgba(var(--shadow-rgb-cyan), .5),
    0 0 28px rgba(var(--shadow-rgb-cyan), .25) !important;
}


/* =========================================
   ACTIVE
========================================= */

.ss_form_btn button.btn.btn-large:not(.btn-primary):active {
  transform: translateY(1px) scale(.97) !important;

  background: var(--color-button-active-bg) !important;

  box-shadow:
    0 0 3px rgba(var(--shadow-rgb-white), 1),
    -3px 0 10px rgba(var(--shadow-rgb-cyan), .7),
     3px 0 8px rgba(var(--shadow-rgb-pink), .15),
    inset 0 0 14px rgba(var(--shadow-rgb-white), .12) !important;
}


/* =========================================
   LEFT ARROW
========================================= */

.ss_form_btn button.btn.btn-large:not(.btn-primary) i.icon-chevron-left {
  position: absolute !important;

  top: 50% !important;
  left: 20px !important;
  right: auto !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;

  transform: translateY(-50%);

  background: none !important;
  background-image: none !important;

  font-size: 0;

  overflow: visible;

  transition: transform .2s ease;
}


/* CSSで◀を生成 */
.ss_form_btn button.btn.btn-large:not(.btn-primary) i.icon-chevron-left::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 0;

  width: 0;
  height: 0;

  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 9px solid var(--color-text);

  transform: translateY(-50%);

  filter: drop-shadow(0 0 3px var(--color-accent-cyan));
}


/* hover時は矢印を少し左へ */
.ss_form_btn button.btn.btn-large:not(.btn-primary):hover i.icon-chevron-left,
.ss_form_btn button.btn.btn-large:not(.btn-primary):focus-visible i.icon-chevron-left {
  transform: translate(-3px, -50%);
}


/* click時はさらに左へ */
.ss_form_btn button.btn.btn-large:not(.btn-primary):active i.icon-chevron-left {
  transform: translate(-6px, -50%);
}


/* =========================================
   KEYBOARD FOCUS
========================================= */

/* .ss_form_btn button.btn.btn-large:not(.btn-primary):focus-visible {
  outline: 1px solid var(--color-accent-cyan) !important;
  outline-offset: 4px !important;
} */

/* ----------------------------------
 * フッター
 * ---------------------------------- */
#footer {
    background: transparent !important; /* フッター背景色 */
    color: var(--color-text) !important; /* フッター文字色 */
    text-align: center;
    padding: 30px 5.333333333333333vw;    
}

#footer .copy {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
}

#footer p {
        margin: 0;
        line-height: 1.5;
}

/* ----------------------------------
 * レスポンシブ設定
 * ---------------------------------- */

/* 大画面PC (1920px以上) */
@media screen and (min-width: 1920px) {
    .ss_contents {
        width: 60%;
    }
}

/* PC (768px以上) */
@media screen and (min-width: 768px) and (max-width: 1919px) {
    /* .ss_contents {
        width: 75%;
    } */

    #footer { padding: 40px 20px; }
    #footer .copy { font-size: 10px; }
}

/* タブレット・スマートフォン (767px以下) */
@media screen and (max-width: 767px) {
    .ss_contents {
        width: 95%;
        margin: 30px auto;
    }
    .ss_login,
    .ss_form,
    .cmmnBG_w{
        margin: 20px auto;
        padding: 20px 10px;
    }
    .ss_form table td, .ss_form_matrix table td, .ss_login table td, .ss_seminar_preview table td, .ss_mypage table td, .ss_public table td {
        display: block;
        border-top: none;
    }

    .ss_input {
        display: block;
    }
    .table td:has(.ss_input:nth-of-type(2):last-child) .ss_input{
        width: auto;
        display: block;
    }
    .table td:has(.ss_input:nth-of-type(2):last-child) .ss_input input[type="text"]{
        width: 100%;
    }
    #zip input:first-of-type { width: 100%; flex-grow: 0; }
    #zip input:last-of-type { width:  100%; flex-grow: 0; }
    .validate5 .ss_input input { max-width: 100%; }
    .ss_rightComment {
    margin-left: 0px;
    }
    .ss_form_btn {
        flex-direction: column;
        gap: 15px;
    }
    .ss_form_btn button.btn:has(+ button.btn){
    margin-right: 0;
    }
    .ss_form_btn button.btn + button.btn{
        margin-left: 0;
    }
}


/* ----------------------------------
 * 非表示
 * ---------------------------------- */
.disnone{
    display: none !important;
}
/* =========================================
   SP：戻る・送信ボタンの幅と余白を統一
   ページ固有CSSがない画面にも適用する
========================================= */
@media screen and (max-width: 767px) {
  /* フォーム見出しをタイムテーブルのSP表示に近い大きさへ */
  .table th,
  .ss_form .table th {
    font-size: 16px;
    line-height: 1.45;
  }

  /* 選択肢・説明文などの地の文を少し小さくする */
  .ss_form .table td,
  .ss_form .table td label,
  .ss_form .table td p,
  .ss_form .table td li {
    font-size: 13px;
    line-height: 1.5;
  }

  .ss_form_btn:has(> button.btn.btn-large + button.btn.btn-large) {
    box-sizing: border-box;
    width: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    gap: 16px;
  }

  .ss_form_btn > button.btn.btn-large:not(.btn-primary),
  .ss_form_btn > button.btn.btn-primary.btn-large {
    box-sizing: border-box;
    width: 196px !important;
    min-width: 196px !important;
    max-width: calc(100% - 24px) !important;
    height: 60px !important;
    margin: 0 auto !important;
  }
}

/* ----------------------------------
 * 自動入力した場合のCSSリセット
 * ---------------------------------- */
/* Chrome / Edge / Safari：自動入力時もダーク背景を維持 */
.ss_form input:-webkit-autofill,
.ss_form input:-webkit-autofill:hover,
.ss_form input:-webkit-autofill:focus,
.ss_form input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--color-text) !important;

  -webkit-box-shadow:
    0 0 0 1000px var(--color-page-bg) inset !important;

  box-shadow:
    0 0 0 1000px var(--color-page-bg) inset !important;

  background-color: var(--color-page-bg) !important;

  caret-color: var(--color-text) !important;
  color-scheme: dark;
}

/* =========================================
   自動入力背景の強制上書き
========================================= */

input[type="text"]:-webkit-autofill,
input[type="text"]:-webkit-autofill:hover,
input[type="text"]:-webkit-autofill:focus,
input[type="text"]:-webkit-autofill:active,
input[type="email"]:-webkit-autofill,
input[type="email"]:-webkit-autofill:hover,
input[type="email"]:-webkit-autofill:focus,
input[type="email"]:-webkit-autofill:active,
input[type="password"]:-webkit-autofill,
input[type="password"]:-webkit-autofill:hover,
input[type="password"]:-webkit-autofill:focus,
input[type="password"]:-webkit-autofill:active {
  -webkit-text-fill-color: var(--color-text) !important;
  caret-color: var(--color-text) !important;

  background-color: transparent !important;
  background-image: none !important;

  -webkit-box-shadow:
    0 0 0 1000px var(--color-page-bg) inset !important;

  box-shadow:
    0 0 0 1000px var(--color-page-bg) inset !important;

  border-color: var(--color-autofill-border) !important;

  /* Chromeの自動入力背景変更を実質停止 */
  transition:
    background-color 9999s ease-out 0s,
    color 9999s ease-out 0s;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  color: var(--color-text) !important;
  background-color: var(--color-input-active-bg) !important;
  background-image: none !important;
  caret-color: var(--color-text);
}

/* =========================================
   古い focus / active の白枠をリセット
========================================= */

a:focus,
a:active,
button:focus,
button:active,
input:focus,
input:active,
select:focus,
select:active,
textarea:focus,
textarea:active {
  outline: none !important;
  outline-offset: 0 !important;
}


/* 古いCSSが box-shadow で枠を出している場合もリセット */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}


/* =========================================
   キーボード操作時だけフォーカスを表示
========================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 1px solid var(--color-accent-cyan) !important;
  outline-offset: 3px !important;

  box-shadow:
    0 0 5px rgba(var(--shadow-rgb-cyan), 0.55),
    0 0 10px rgba(var(--shadow-rgb-pink), 0.25);
}