@charset "UTF-8";
/*
 * offerTableShowRepeatGroupItem.css
 * 変更履歴: 1.0.0<25/07/31>[U-ND0059] A-0059-ND 新規作成
 */
 
/* 繰り返しグループ項目用のFlexboxレイアウト */
.common-button-0 {
    position: relative;
    display: inline;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0px 0px 3px;
    min-width: 95px;
    min-height: 33px;
    width: 95px;
    height: 33px;
    font-size: 14px;
    color: #fff;
    border-radius: 5px;
    background-color: #00855C;
    border: 0px solid;
    box-sizing: border-box;
    text-align: center;
}

.group-delete-btn-0 {
    min-width: 40px;
    height: 40px;
    padding: 4px;
    background-color: transparent;
    color: transparent;
    border: 1px solid #000000;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.3s;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
}

.group-flex-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin-bottom: 8px;
    gap: 8px;
    width: 100%;
    min-height: 40px;
}

.group-flex-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
    align-items: flex-start;
    width: 100%;
}

.group-flex-main > * {
    flex: 0 0 auto;
    margin-bottom: 4px;
}

.group-flex-delete {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    min-width: 70px;
    align-self: flex-start;
    margin-top: 0;
}

.group-delete-btn {
    min-width: 40px;
    height: 40px;
    padding: 8px;
    background-color: transparent;
    color: transparent;
    border: 1px solid #000000;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.3s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

.group-delete-btn:hover {
    opacity: 0.8;
    border-color: #333333;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

/* 新しいグループ構造用CSS - 最適化版 */
.group-container {
    margin-bottom: 10px;
}

.group-flex-wrapper {
    display: flex;
    align-items: flex-start;
    width: 100%;
    gap: 8px;
    position: relative;
    min-height: 32px;
}

.group-flex-wrapper .group-flex-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
    align-items: flex-start;
    width: 100%;
}

.group-flex-wrapper .group-flex-delete {
    flex: 0 0 auto;
    min-width: 70px;
    display: flex;
    align-items: flex-start;
    align-self: flex-start;
    margin-top: 0;
    position: relative;
}

.group-item-wrapper {
    flex: 0 0 auto;
    min-width: 200px;
    max-width: 100%;
    min-height: 32px;
    display: flex;
    align-items: center;
    position: relative;
}

/* CSS変数 - 固定幅を削除し、自然な幅を使用 */
:root {
    --container-gap: 8px;
    --delete-width: 70px;
    --item-height: 32px;
}

/* コアコンテナレイアウト - ヘッダーと編集エリアで完全に同じflex設定を使用 */
.group-title-items,
.group-flex-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin-bottom: 8px;
    gap: var(--container-gap);
    width: 100%;
    min-height: var(--item-height);
    box-sizing: border-box;
}

/* メインコンテンツエリア - ヘッダーと編集エリアで完全に一致したflex設定 */
.group-title-items .group-flex-main,
.group-flex-wrapper .group-flex-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--container-gap);
    align-content: flex-start;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}

/* 項目コンテナ - 自然な幅を使用し、固定のmin-widthとmax-widthを設定しない */
.group-title-item,
.group-item-wrapper {
    flex: 0 0 auto;
    /* 固定幅制限を削除し、コンテンツが幅を決定するように */
    min-width: auto;
    max-width: none;
    min-height: var(--item-height);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    /* 重要：コンテンツが改行しないことを保証し、自然な幅を維持 */
    white-space: nowrap;
}

/* 編集エリア削除列：最下行に動的整列 - 最適化版 */
.group-flex-delete {
    flex: 0 0 auto;
    min-width: var(--delete-width);
    max-width: var(--delete-width);
    min-height: var(--item-height);
    display: flex;
    align-items: center;
    justify-content: center;
    /* JavaScriptで動的調整し、ブラウザ変化後も正しく整列できることを確保 */
    align-self: flex-start;
    margin-top: 0;
    margin-bottom: 4px;
    white-space: nowrap;
    box-sizing: border-box;
    /* 位置調整がより滑らかになるよう遷移アニメーションを追加 */
    transition: margin-top 0.2s ease-in-out;
    /* 各種状況で正しく表示できることを確保 */
    position: relative;
    z-index: 1;
}

/* 重複するレスポンシブ定義を削除し、統一設定を使用 */

/* フォーム要素調整 */
.group-flex-main input,
.group-flex-main select,
.group-flex-main textarea {
    max-width: 100%;
    box-sizing: border-box;
}

.group-flex-main label {
    display: inline-block;
    margin-right: 8px;
    white-space: nowrap;
}

/* Title部表示用の追加スタイル */
.group-title-section {
    margin-bottom: 0px;
    padding: 0px;
    background-color: transparent;
    border: none;
    border-radius: 0px;
}

.group-title-header {
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #007bff;
    font-size: 16px;
}

.group-title-items {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin-bottom: 8px;
    gap: 8px;
    width: 100%;
    min-height: 40px;
}

.group-title-items .group-flex-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
    align-items: flex-start;
    width: 100%;
    /* 編集エリアの.group-flex-mainと完全に一致するflex設定を維持 */
}

.group-title-item {
    flex: 0 0 auto;
    min-width: var(--item-min-width);
    max-width: var(--item-max-width);
    min-height: var(--item-height);
    padding: 0px;
    background-color: transparent;
    border: none;
    border-radius: 0px;
    box-shadow: none;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    /* 編集エリアと完全に同じflex基本設定 */
}

.group-title-item .u-mb15 {
    margin-bottom: 5px !important;
}

/* レスポンシブデザイン - 自然幅に基づき、ヘッダーと編集エリアを完全同期 */
@media (max-width: 768px) {

    /* 項目：自然幅を維持し、サイズを強制的に変更しない */
    .group-title-item,
    .group-item-wrapper {
        /* 自然幅を維持し、マージンのみ調整 */
        margin-bottom: 2px;
    }

    /* ヘッダー削除列：小画面でdt部分に整列 */
    .group-title-delete {
        min-width: var(--delete-width);
        max-width: var(--delete-width);
        align-self: flex-start;
        margin-top: 0;
    }

    /* 編集エリア削除列：481px-768px区間でも最下行との配置を維持、JavaScriptが処理 */
    .group-flex-delete {
        min-width: var(--delete-width);
        max-width: var(--delete-width);
        align-self: flex-start;
        margin-top: 0;
    }
}

/* ヘッダー項目表示の最適化、文字の自動改行を許可 */
.group-title-item {
    /* ヘッダー文字の自動改行を許可 */
    white-space: normal;
    /* コンテナがコンテンツ幅に適応するように */
    width: fit-content;
    /* コンテンツが正常に表示されることを確保 */
    overflow: visible;
    /* 複数行表示に適した行の高さを設定 */
    line-height: 1.4;
}

.group-title-item .c-input__title {
    /* タイトルテキストの自動改行を許可 */
    white-space: normal;
    /* 固定幅を削除し、テキストが幅を決定するように */
    width: auto;
    min-width: auto;
    max-width: none;
    /* 複数行表示に適した行の高さを設定 */
    line-height: 1.4;
    /* dd.c-input__itemのスタイルに合わせて内側の余白を調整 */
    padding: 4px 50px;
    /* フォントスタイル */
    font-weight: bold;
    /* 背景色スタイル
    border: 0px solid #dee2e6;
    border-radius: 4px;
    padding: 8px 12px;
    box-sizing: border-box; */
}

/* 編集エリア項目も同じ幅戦略を使用することを確保 */
.group-item-wrapper {
    /* コンテナがコンテンツ幅に適応するように */
    width: fit-content;
    /* コンテンツが強制的に改行されないことを確保 */
    white-space: nowrap;
    /* コンテンツが正常に表示されることを確保 */
    overflow: visible;
}

/* ヘッダーエリア文字の改行設定 */
.group-title-item dt,
.group-title-item dd {
    white-space: normal;
    line-height: 1.4;
    word-wrap: break-word;
}

/* より具体的なヘッダー文字改行設定 - 全ての文字が正常に改行できることを確保 */
.group-title-item,
.group-title-item *,
.group-title-item dt,
.group-title-item dd,
.group-title-item .c-input__title,
.group-title-item dt.c-input__title,
.group-title-items .group-title-item,
.group-title-items .group-title-item * {
    /* 文字の自動改行を許可 */
    white-space: normal !important;
    /* 適切な改行方式を設定 */
    word-break: break-word !important;
    word-wrap: break-word !important;
    /* 複数行表示のための行高を設定 */
    line-height: 1.4 !important;
    /* テキストオーバーフローを削除 */
    text-overflow: initial !important;
    overflow: visible !important;
    /* 複数行コンテンツの表示を確保 */
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

/* ヘッダータイトル要素の特別処理 */
.group-title-section .c-input__title,
.group-title-items .c-input__title,
.group-title-item .c-input__title {
    /* ヘッダータイトルの改行を確保 */
    white-space: normal !important;
    word-break: break-word !important;
    word-wrap: break-word !important;
    line-height: 1.4 !important;
    /* 自然な幅を維持しながら改行を許可 */
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: initial !important;
    /* dd.c-input__itemの左マージンに合わせて内側余白を調整 */
    padding: 4px 50px !important;
    box-sizing: border-box;
}

/* 編集エリアの文字も正常に改行できることを確保（対比と確認用） */
.group-flex-wrapper dd.c-input__item,
.group-item-wrapper dd.c-input__item,
.group-item-wrapper .c-input__item {
    white-space: normal !important;
    word-break: break-word !important;
    word-wrap: break-word !important;
    line-height: 1.4 !important;
    overflow: visible !important;
    text-overflow: initial !important;
}

/* 改行を阻止する可能性のあるスタイルを削除 */
.group-title-item.width-synced .c-input__title,
.group-title-item.width-synced dt.c-input__title {
    /* 幅同期後も改行能力を維持 */
    white-space: normal !important;
    word-break: break-word !important;
    overflow: visible !important;
    text-overflow: initial !important;
    height: auto !important;
}

/*
 * 文字改行戦略の総括：
 *
 * ヘッダー領域（.group-title-item）：

 * - 全てのdt、dd要素にwhite-space: normalを設定し、自動改行を許可
 * - word-break: break-word 長い単語も正しく改行することを確保
 * - line-height: 1.4 適切な行間距離を提供
 * - overflow: visible コンテンツが切り取られないことを確保
 * - text-overflow: initial 省略記号を削除
 *
 * 編集領域（.group-item-wrapper）：
 * - ヘッダーと同じ改行戦略を使用
 * - 視覚的一致性を確保
 *
 * 幅同期後：
 * - JavaScript幅設定時にtextOverflow: ellipsisを使用しない
 * - overflow: visibleとwhiteSpace: normalを保持
 * - 固定幅後も正常に改行可能
 */

/* 繰り返しグループ項目の特殊内側余白設定 - ヘッダーと編集エリアの左余白を一致させる */
.group-title-items dt.c-input__title,
.group-title-item dt.c-input__title {
    /* システムデフォルトのc-input__titleと一致する左右マージンを保持 */
    padding-left: 50px !important;
    padding-right: 0px !important; /* 強制的に0pxに設定 */
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.group-title-items dd.c-input__item,
.group-title-item dd.c-input__item,
.group-flex-wrapper dd.c-input__item,
.group-item-wrapper dd.c-input__item,
.group-item-wrapper .c-input__item {
    /* システムデフォルトのc-input__itemと一致する左右マージンを保持 */
    padding-left: 50px !important;
    padding-right: 0px !important; /* 強制的に0pxに設定 */
}

/* 全ての関連要素のpadding-rightが上書きされることを確保 */
.group-title-section dt,
.group-title-section dd,
.group-flex-container dt,
.group-flex-container dd,
.group-flex-wrapper dt,
.group-flex-wrapper dd {
    padding-right: 0px !important; /* 強制的に0pxに設定 */
}

/* 削除列 - ヘッダーと編集エリアで異なる整列戦略を使用 */

/* ヘッダー削除列：既存の頭部样式を継承し、第一行に固定整列 */
.c-input__title.group-title-delete {
    /* 基本レイアウト */
    flex: 0 0 auto;
    min-width: var(--delete-width);
    max-width: var(--delete-width);
    min-height: var(--item-height);
    /* 第一行に固定整列 */
    align-items: center;
    justify-content: center;

    margin: 0px 0px !important;

    /* 基本的なスタイル */
    padding: 4px 10px !important;
}

/*
 * マージン統一戦略の総括：
 *
 * ヘッダー領域（.group-title-item）：

 * - dt.c-input__title: padding: 4px 50px（上下4px、左右50px）
 * - dd.c-input__item: padding-left/right: 50px（左右50px）
 *
 * 編集領域（.group-item-wrapper）：
 * - dd.c-input__item: padding-left/right: 50px（左右50px）
 *
 * 一致性：
 * - 全ての文字コンテンツがコンテナの左側から50px距離を保持
 * - ヘッダーと編集領域が視覚的に完全に整列
 * - システムデフォルトのc-inputスタイル規範に適合
 */

/* 繰り返しグループの動的制御用スタイル */
/* 追加ボタン無効状態スタイル - 無効状態のみ設定、有効状態の既定スタイルは変更しない */
/*.add-group-btn[disabled="true"],*/
/*.add-group-btn:disabled {*/
/*    background-color: #cccccc !important;*/
/*    color: #666666 !important;*/
/*    cursor: not-allowed !important;*/
/*    opacity: 0.6 !important;*/
/*    pointer-events: none !important;*/
/*    border: 1px solid #999999 !important;*/
/*}*/

.group-flex-delete[style*="display: none"] {
    display: none !important;
}

/* repeatNumがrepeatRequiredNumと等しい場合、削除列を完全に非表示にしスペースも占有しない */
.group-title-delete.hidden-no-delete,
.group-flex-delete.hidden-no-delete {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex-basis: 0 !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* repeatNumがrepeatRequiredNumと等しくない場合、削除列の幅を保持しつつ内容を非表示 */
.group-title-delete.preserve-width,
.group-flex-delete.preserve-width {
    /* 削除列の完全な幅とスタイルを保持 */
    flex: 0 0 auto;
    min-width: var(--delete-width);
    max-width: var(--delete-width);
    min-height: var(--item-height);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    margin-bottom: 4px;
    white-space: nowrap;
    box-sizing: border-box;
    /* 内容を非表示にしつつレイアウトスペースを保持 */
    color: transparent !important;
    background: transparent !important;
    border: transparent !important;
    visibility: hidden !important;
}

/* preserve-widthの削除ボタンも非表示だがスペースを占有することを確保 */
.group-flex-delete.preserve-width .group-delete-btn {
    visibility: hidden !important;
    pointer-events: none !important;
    color: transparent !important;
    background: transparent !important;
}

/* preserve-widthの削除ボタンの画像も非表示になることを確保 */
.group-flex-delete.preserve-width .group-delete-btn img {
    visibility: hidden !important;
    opacity: 0 !important;
}

/* 削除列が非表示の場合、コンテナを調整してスペースを有効活用 - hidden-no-deleteのみ */
.group-title-items:has(.group-title-delete.hidden-no-delete) .group-flex-main,
.group-flex-wrapper:has(.group-flex-delete.hidden-no-delete) .group-flex-main {
    /* メインエリアが利用可能な全幅を使用 */
    flex: 1 1 100%;
    max-width: 100%;
}

/* 削除列がない場合、メインエリアがスペースを有効活用 - hidden-no-deleteのみ */
.group-title-items:not(:has(.group-title-delete:not(.hidden-no-delete))) .group-flex-main,
.group-flex-wrapper:not(:has(.group-flex-delete:not(.hidden-no-delete))) .group-flex-main {
    flex: 1 1 100%;
    max-width: 100%;
}

/* preserve-width使用時、元のレイアウト比率を保持 */
.group-title-items:has(.group-title-delete.preserve-width) .group-flex-main,
.group-flex-wrapper:has(.group-flex-delete.preserve-width) .group-flex-main {
    /* 元のflex設定を保持し、100%に拡張しない */
    flex: 1 1 auto;
    max-width: calc(100% - var(--delete-width) - var(--container-gap));
}

/* グループコンテナの境界線制御 */
/* 第一グループから下境界線のみを表示 */
.group-container[data-group-num]:not([data-group-num="0"]) {
    border: none !important;
    border-bottom: 2px solid #ddd !important;
}
.c-input-sex-group fieldset{
    display: flex;
    flex-wrap: wrap;
}
.c-input-sex-group fieldset .u-mt20{
    margin: 0;
}
.c-input-sex-group fieldset .u-mt23{
    margin-top: 0;
}
.c-input-check-group fieldset{
    display: flex;
    flex-wrap: wrap;
}
.c-input-radio-group fieldset{
    display: flex;
    flex-wrap: wrap;
}
.c-input-radio-group fieldset .u-mt20{
    margin: 0;
    margin-left: 8px;
}
.c-input-radio-group fieldset .text_box{
    margin-top: 0;
}

.group-item-wrapper .c-input{
    margin: auto 0px !important;
}
.group-item-wrapper .c-input .u-mt15{
    margin-top: 0 !important;
}
.group-item-wrapper .c-input dd>.u-mr15{
    margin-right: 8px !important;
}
.group-item-wrapper .c-input :first-child.u-ml20 {
    margin-left: 0 !important;
}
.group-item-wrapper .c-input .u-mt20{
    margin-top: 0 !important;
}
.group-item-wrapper .c-input .u-mb20{
    margin-bottom: 0 !important;
}
.group-item-wrapper .select-400 {
    width: 100%;
}
.group-item-wrapper .input-470 {
    width: 100%;
    max-width: 470px;
}
.group-item-wrapper .m-input-470 {
    width: 100%;
    max-width: 470px;
}

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

  .group-item-wrapper .select-sp-90{
    width:35%;
  }

  .group-item-wrapper .time-input-change{
    max-width: 15%;
    min-width: 30%
  }

  .group-item-wrapper .jpDate-year-sp{
    width:80px;
  }

  .group-item-wrapper .jpDate-yearOrDay-sp{
    width:60px;
  }

  .group-item-wrapper .input-470 {
    width: 100%;
  }

  .group-item-wrapper .m-input-470 {
    width: 100%;
  }

  .group-item-wrapper .m-input-660 {
    width: 100%;
  }

  .group-item-wrapper .input-200  {
    width: 100%;
  }

  .group-item-wrapper .m-input-200  {
    width: 100%;
  }

  .group-item-wrapper .m-input-120 {
    width: 100%;
  }

  /* 繰り返しグループ項目の特殊内側余白設定 - ヘッダーと編集エリアの左余白を一致させる */
  .group-title-items dt.c-input__title,
  .group-title-item dt.c-input__title {
    /* システムデフォルトのc-input__titleと一致する左右マージンを保持 */
    padding-left: 37px !important;
    padding-right: 0px !important; /* 強制的に0pxに設定 */
  }

  .group-title-items dd.c-input__item,
  .group-title-item dd.c-input__item,
  .group-flex-wrapper dd.c-input__item,
  .group-item-wrapper dd.c-input__item,
  .group-item-wrapper .c-input__item {
    /* システムデフォルトのc-input__itemと一致する左右マージンを保持 */
    padding-left: 37px !important;
    padding-right: 0px !important; /* 強制的に0pxに設定 */
  }
}