/* ベーススタイル */
body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center; /* コンテナを中央に配置 */
}
.img-header {
    position: relative; /* 擬似要素の基準位置 */
    margin: -2px 0 0 0;
    background: rgba(255, 255, 255, 1); /* 背景は不透明な白 */
}
.logo-container {
    display: flex;
    justify-content: center;
    background: linear-gradient(135deg, #8e44ad, #4a148c);
    align-items: center;
}

.logo {
    max-width: 100%; /* ロゴのサイズを調整 */
    height: 55px;
    display: block;
    margin: 0;
}
/* ヘッダーのスタイル */
.header-bar {
    width: 100%;
    max-width: 475px;
    height: 40px;
    background-color: #800080;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    position: fixed;
    top: 0;
    z-index: 1000;
}
/* 共通のコンテナスタイル */
.container {
    width: 100%;
    max-width: 475px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: relative; /* フッターやヘッダーに影響されないようにする */
    min-height: 100vh;
}

/* ヘッダー分の余白を持つコンテナ */
.container.c-header {
    margin-top: 60px; /* ヘッダーの高さ分の余白を確保 */
    min-height: calc(100vh - 60px);
}

/* フッター分の余白を持つコンテナ */
.container.c-footer {
    padding-bottom: 80px; /* フッターの高さ分の余白を確保 */
    min-height: calc(100vh - 80px);
}

/* フッターとヘッダーの両方を持つコンテナ */
.container.c-header-footer {
    margin-top: 60px;
    padding-bottom: 80px;
    min-height: calc(100vh - 140px);
}
.content-wrapper {
    margin: 0 25px;
    flex-grow: 1;
}
.step-header {
    position: fixed;    
    width: 100%;
    max-width: 475px;
    top: 0;
    width: 100%;
    z-index: 1000; /* 他の要素より前面に配置 */
    margin: -2px 0 0 0;
    background: rgba(255, 255, 255, 1); /* 背景は不透明な白 */
}

.blurry-line {
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(255, 255, 255, 0.2)); /* グラデーションを濃く */
}


.title1 {
    font-size: 16px;
    margin: 8px 10px 10px 10px; 
    padding-left: 10px;
}


.notification-section {
    margin-top: 0;
}

.notification-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.h2 {
    font-size: 20px; /* 文字サイズを指定 */
    font-weight: bold;
}
.notification-link {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.icon-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background-color: #333;
    border-radius: 50%;
    margin-right: 8px;
}

.arrow-icon {
    width: 8px;
    height: 8px;
}

.black-link {
  color: black;
  text-decoration: underline;
  text-decoration-color: black; /* 下線の色を黒に設定 */
  text-underline-offset: 6px; /* 下線と文字の間の隙間を大きくする */
}

.notification-content {
    margin-top: 8px;
    position: relative;
    border-bottom: 1px solid #333; /* 下線を追加 */
    padding-bottom: 10px; /* 下線とテキストの間に少し余白を追加 */
}
.marquee-container {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    background-color: rgba(239, 239, 239, 1);
    border: 1px solid #333; 
    border-radius: 5px; 
    position: relative; /* アニメーションの基準 */
}

.marquee {
    display: inline-block;
    white-space: nowrap; /* テキストを折り返さない */
    padding-left: 100%; /* アニメーションの間隔を作る */
    animation: marquee 10s linear forwards; /* 1回だけ、終わったら停止 */
    font-size: 12px;
    font-weight: 100; /* 文字を細くする */
    color: #555555; /* grayと黒の中間の色 */
}

@keyframes marquee {
    0% {
        transform: translateX(0); /* 右端の外側から開始 */
    }
    100% {
        transform: translateX(-100%); /* 左端の外側まで移動 */
    }
}

.small-text {
    font-size: 14px; /* 文字サイズを小さく */
    line-height: 1.4;
}
.compact-bottom {
    margin-bottom: 4px; /* 下側の余白を小さくする */
}

#footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 60px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 475px;
    position: fixed; /* 固定配置に変更 */
    bottom: 0; /* 画面下部に配置 */
    left: 50%;
    transform: translateX(-50%); /* 中央揃え */
    z-index: 1000; /* フッターを前面に表示 */
}

.footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    color: #707070;
    position: relative;
    width: 120px; /* 幅を大きく設定 */
    padding: 0; /* 上下の余白を調整 */
    text-decoration: none; /* リンクの下線を削除 */
}

.footer-item.active::after {
    content: '';
    position: absolute;
    bottom: -4px; /* 下線の位置を上に移動 */
    left: 0;
    right: 0;
    margin: auto;
    width: 100%; /* 下線の幅を広げる */
    height: 4px; /* 下線の太さを4pxに設定 */
    background-color: rgba(117, 199, 20, 1); /* 指定された下線の色 */
    border-radius: 2px; /* 角を丸める */
    transition: all 0.3s ease;
}

.footer-text {
    margin-top: 2px; /* テキストと下線の間隔を狭くする */
}
/* 設定項目のスタイル */
.item1 {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 縦方向中央 */
    position: relative; /* 絶対位置指定の基準 */
    height: 70px;
    border-radius: 10px;
    padding: 0 20px;
    margin-bottom: 10px;
    font-size: 14px;
}

/* タイトル */
.title2 {
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 10px; /* 下の余白 */
}

/* 通知設定の全体ブロック */
.custum-block {
    margin-top: 10px; /* 上の余白 */
}

/* 通知設定の全体ブロック */
.settings-block {
    margin-top: 20px; /* 上の余白 */
}

.item1.light {
    background-color: rgba(239, 239, 239, 1);
    color: #333333;
    border: 2px solid #ccc;
}

.item1.dark {
    background-color: rgba(65, 65, 65, 255);
    color: #ffffff;
}
.item1.white {
    background-color: #ffffff; /* 白背景 */
    border: 2px solid #ccc; /* 枠線の設定、色はお好みで */
    color: #333333; /* 文字色の設定（必要であれば変更） */
}
.item1-icon {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: -5px;
    align-self: flex-start; /* 左上に揃える */
    margin-top: 10px; /* 少し下に余白を追加 */
}

.item1-text {
    font-family: "M+ 1p", sans-serif;
}

.item1-count {
    font-family: "Ubuntu", sans-serif;
    font-size: 16px;
    position: absolute; /* 絶対位置指定 */
    right: 60px; /* 右端に固定 */
    top: 50%; /* 縦方向中央 */
    transform: translateY(-50%); /* 中央揃え */
}

.item1-label {
    font-family: "Ubuntu", sans-serif;
    font-size: 16px;
    position: absolute; /* 絶対位置指定 */
    right: 50px; /* 右端に固定 */
    top: 50%; /* 縦方向中央 */
    transform: translateY(-50%); /* 中央揃え */
}
.item-block {
    display: flex;
    flex-direction: column; /* 子要素を縦に並べる */
    justify-content: space-between; /* 左右に分割配置 */
    margin-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    width: calc(100% - 40px);
}

.item-block-footer {
    display: flex; /* 子要素を横並びに配置 */
    justify-content: space-between; /* 子要素を左右に配置 */
    align-items: center; /* 垂直方向を中央揃え */
    width: 100%; /* 親要素の幅を100%に */
    font-size: 12px; 
    color: #666;
}

.item-block-label {
    white-space: nowrap; /* 改行を禁止 */
}

.item-block-right {
    text-align: right; /* テキストを右揃え */
    margin-left: auto;
}

/* 枠線のスタイル */
.item-block-separator {
    border-top: 1px solid #ccc; /* 枠線を追加 */
    margin-top: 5px;
    margin-bottom: 5px;
}

.item-block-content {
    white-space: nowrap; /* 改行を禁止 */
    overflow: hidden; /* テキストが要素の幅を超えた場合に非表示 */
    text-overflow: ellipsis; /* 省略記号 (...) を表示 */
    display: block; /* 必要に応じてブロック要素として表示 */
    width: 100%; /* 親要素の幅に合わせる（必要なら固定幅に） */
}

.item1-arrow {
    position: absolute; /* 絶対位置で配置 */
    right: 20px; /* 右に固定配置 */
    top: 50%; /* 縦方向中央 */
    transform: translateY(-50%);
    width: 7px;
    height: 12px;
    background: url('/img/arrow_forward_ios_24dp.png') no-repeat center;
    background-size: contain;
}
.item1-arrow-png {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 12px;
    width: 3%; /* 親要素の幅に対する割合 */
    height: auto; /* アスペクト比を保つ */
}
/* リンクスタイル */
.custom-link {
    text-decoration: none; /* リンクの下線を削除 */
    color: inherit; /* 親要素の色を継承 */
    display: block; /* 全体をクリック可能にする */
}


/* 有効件数など、他のlightスタイルのitem */
.item1.light {
    background-color: rgba(239, 239, 239, 1);
    color: #333333;
}
/* ボタンのラッパースタイル */
.button-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.button1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 80px;
    border: 1px solid #414141;
    border-radius: 10px;
    background-color: #fff;
    cursor: pointer;
}

.button1.wide {
    grid-column: span 2;
    width: 100%;
}

.button1-icon {
    margin-bottom: 4px;
}

.button1-text {
    font-size: 14px;
    color: #414141;
}


.ad-box {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #707070;
    border-radius: 10px;
    margin: 20px 0;
    background-color: #fff;
}

.ad-text {
    font-size: 14px;
    color: #707070;
}
/* 基本のボタンスタイル */
.btn {
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    border: none;
    border-radius: 8px; /* 角を丸くする */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s; /* ホバー時の変化をスムーズに */
}

/* サイズ指定用のクラス */
.btn-large {
    width: 120px; /* 横幅を指定 */
    height: 36px; /* 高さを指定 */
}

/* カラー指定用のクラス（青色） */
.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover {
    background-color: #0056b3; /* ホバー時に少し濃くする */
}

/* カラー指定用のクラス（赤色） */
.btn-danger {
    background-color: #dc3545; /* 赤色の背景 */
}

.btn-danger:hover {
    background-color: #a71d2a; /* ホバー時に少し濃くする */
}

/* カラー指定用のクラス（緑色） */
.btn-success {
    background-color: #28a745; /* 緑色の背景 */
}

.btn-success:hover {
    background-color: #1e7e34; /* ホバー時に少し濃くする */
}

/* ボタンを中央に配置するための新しい親要素 */
.buttons {
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
}

/* 次へボタンの特定のスタイル */
#next-button {
    margin-top: 10px; /* 上部に余白を追加 */
}

.cusum-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    width: 100%;
    border-radius: 10px;
    padding: 0 20px;
    margin-bottom: 10px;
    font-size: 14px;
    cursor: pointer;
}
.half-width {
    width: 50%; /* 特定の場合に50%に変更 */
}
.cusum-button.dark {
    background-color: rgba(65, 65, 65, 255);
    color: #ffffff;
    border: none;
}
.primary {
    background-color: #007bff;
    color: #ffffff;
    border: none;
}
.custom-click-aria {
    color: inherit; /* 親要素の色を継承 */
    display: flex;
    position: relative; /* 絶対位置指定の基準 */
    width: 100%; /* クリックエリアを全体に広げる */
    height: 70px;
    text-decoration: none;

}

.item2 {
    font-size: 14px;
    height: auto;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    justify-content: space-between;
    box-sizing: border-box;
    align-items: center; /* 縦方向中央 */
    border: 2px solid #ccc; /* 枠線の設定、色はお好みで */
    overflow: hidden; /* 内容がオーバーフローしないように隠す */
    max-height: 70px; /* 初期状態の高さ */
    width: 100%;
    transition: max-height 0.3s ease-in-out; /* 高さ変更のアニメーション */
}
.item2.active {
    max-height: 210px; /* 開いたときの最大高さ */
}
.item2.large {
    height: auto; 
    max-height: 210px; 
}

.details {
    display: none; /* 初期状態では非表示 */
    border-top: 1px solid #ccc;
}

.item2.active .details {
    display: block; /* `active`クラスが追加されたときに表示 */
}
.item2.light {
    background-color: rgba(239, 239, 239, 1);
    color: #333333;
}

.item2.dark {
    background-color: rgba(65, 65, 65, 255);
    color: #ffffff;
    border: 0px;
}
.item2-icon {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
    margin-left: -5px;
    align-self: flex-start; /* 左上に揃える */
    margin-top: 10px; /* 少し下に余白を追加 */
    margin-left: 20px;
    padding-right: 20px; /* 右側に20pxのパディングを追加 */
    width: calc(100% - 40px);
}

.item-buttons {
    margin: 20px 10px;
    display: flex;
    gap: 10px;
}
.item-btn {
    padding: 8px 12px;
    flex: 1; /* ボタンを等間隔で配置 */
    text-align: center;
    box-sizing: border-box;
    border-radius: 5px;
    border: 2px solid #ccc;
    background-color: #ffffff;
    font-weight: 500;
    margin: 0 10px;
    font-size: 14px;
}
.item-btn.dark {
    background-color: rgba(65, 65, 65, 255);
    color: #ffffff;
    border: none;
}
.title-png {
    display: inline-flex; 
    align-items: center;
    gap: 6px;
    width: auto;
    margin-left: -10px;
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    text-decoration: none; /* リンクの下線を削除 */
    margin-bottom: 10px;
    padding: 0; 
}
.back-arrow {
    width: 4px; /* 矢印の幅 */
    height: 8px; /* 矢印の高さ */
    background-image: url('/img/arrow_forward_back.png');
    background-size: contain; /* 画像をコンテナに収める */
    background-repeat: no-repeat; /* 画像の繰り返しを防ぐ */
}
/* 通常のフォーム全体のスタイル */
.form-group {
    margin-bottom: 10px; /* 各入力欄の間隔 */
}

/* ラベルのスタイル */
.custom-form-label {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
    color: #333333;
    padding-left: 10px;
}

/* テキスト入力欄のスタイル */
.custom-input {
    width: 100%;
    height: 70px; /* 入力欄の高さ */
    padding: 10px;
    font-size: 16px;
    border: 2px solid black; /* 枠線を黒に設定 */
    border-radius: 10px; /* 丸みを持たせる */
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.3s ease; /* フォーカス時の滑らかな色変化 */
}

/* フォーカス時の枠線の色 */
.custom-input:focus {
    border-color: rgba(117, 199, 20, 1); /* フォーカス時に緑の枠線 */
}
/* 選択ボックスのスタイル */
.custom-select {
    width: 100%;
    height: 70px; /* 高さ */
    padding: 10px;
    font-size: 16px; /* テキストサイズ */
    border: 2px solid #666; /* 枠線 */
    border-radius: 10px; /* 角の丸み */
    box-sizing: border-box; /* パディングを含む */
    outline: none; /* フォーカス時の青枠を非表示 */
    appearance: none; /* デフォルト矢印を非表示にしない */
    background: white; /* 背景色 */
    background-image: url('/img/arrow_forward_ios_right.png'); /* 矢印画像 */
    background-repeat: no-repeat; /* 繰り返しを防止 */
    background-position: calc(100% - 20px) center; /* 矢印を少し左に */
    background-size: 3%; /* 親要素の幅に対する割合で矢印の幅を設定 */

}

/* 選択ボックスのフォーカス時の枠線の色 */
.custom-select:focus {
    border-color: rgba(117, 199, 20, 1); /* フォーカス時に緑の枠線 */
}

/* 通知内容のテキストエリア */
.custom-textarea {
    width: 100%;
    font-size: 16px;
    padding: 10px;
    border-radius: 10px;
    box-sizing: border-box;
    resize: none;
    line-height: 1.5; /* 行間を設定 */
    transition: background-color 0.3s, border-color 0.3s;
    border: 1px solid black; /* 初期状態の枠線 */
}

/* 読み取り専用のスタイル */
.custom-textarea:read-only {
    background-color: rgba(239, 239, 239, 1);
    border: 2px solid rgba(118, 118, 118, 0.3);
}

/* 編集可能なスタイル */
.custom-textarea:not(:read-only) {
    background-color: #ffffff; /* 白い背景 */
    border: 2px solid black; /* 編集可能時の枠線を太く */
    cursor: text; /* 通常のテキスト編集用カーソル */
}
.custom-textarea:read-only:focus {
    border-color: rgba(118, 118, 118, 0.3); /* フォーカス時も同じ色 */
    outline: none; /* 不要なアウトラインを消す */
}
/* フォーカス時のスタイル */
.custom-textarea:focus:not(:read-only) {
    border-color: rgba(117, 199, 20, 1); /* フォーカス時に緑の枠線 */
    outline: none; /* デフォルトのアウトラインを非表示 */
}

.notification-content-textarea {
    height: 300px; /* 高さを固定 */
}

/* 通知内容の全体コンテナ */
.notification-container {
    display: flex;
    justify-content: space-between; /* 左右に配置 */
    align-items: center; /* 垂直方向で中央揃え */
    width: 100%;
    box-sizing: border-box;
    padding-left: 10px;
    margin-bottom: 5px;
}

/* 通知内容ラベル */
.notification-label {
    font-size: 14px;
    color: #333333;
}

/* トグルスイッチのコンテナ */
.toggle-switch-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 内容編集ラベル */
.toggle-label {
    font-size: 14px;
    color: #414141;
}

.toggle-switch {
    width: 40px; /* トグルスイッチ全体の幅 */
    height: 18px; /* トグルスイッチ全体の高さ */
    background-color: rgba(65, 65, 65, 255);
    border-radius: 25px; /* 丸み */
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* ON時の背景色（緑） */
.toggle-switch.active {
    background-color: rgba(117, 199, 20, 1); /* ON時の緑色 */
}

.toggle-knob {
    width: 16px; /* ノブの幅 (height より少し小さくする) */
    height: 16px; /* ノブの高さ */
    background-color: white; /* ノブの色 */
    border-radius: 50%; /* ノブを丸くする */
    position: absolute;
    top: 1px; /* 上端の余白 */
    left: 1px; /* OFF時の左位置 */
    transition: left 0.3s ease;
}

/* ON時のノブの位置 */
.toggle-switch.active .toggle-knob {
    left: 23px; /* アクティブ時のノブの位置 */
}

/* 無効（disabled）状態のスタイル */
.toggle-switch.disabled {
    background-color: #b0b0b0 !important; /* 灰色にする */
}

/* 無効状態のノブの色も変更 */
.toggle-switch.disabled .toggle-knob {
    background-color: #dcdcdc;
}

.button-colomn {
  display: flex;
  flex-direction: column; /* 縦並びに変更 */
  align-items: center; /* 横方向中央揃え */
  gap: 10px; /* 子要素間の余白 */
}
.form-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 50%;
    border-radius: 5px;
    border: 2px solid #ccc;
    font-size: 14px;
    cursor: pointer;
    background-color: #ffffff;
}
.form-button.dark {
    background-color: rgba(65, 65, 65, 255);;
    color: #ffffff;
    border: none;
}
.form-button.danger {
    background-color: #8e44ad; 
    color: #ffffff; 
    border: 1px solid #8e44ad;
}
input:disabled,
textarea:disabled,
select:disabled {
    color: #6c757d !important;
    border-color: rgba(118, 118, 118, 0.3) !important;
    background-color: rgba(239, 239, 239, 1); !important;

}
.custom-checkbox-colomn {
  display: flex;
  font-size: 14px;
  padding-left: 10px;
  flex-direction: column; /* 縦並びに変更 */
  gap: 10px; /* 子要素間の余白 */
}
/* テキストエリアのスタイル */
.custom-checkbox-textarea {
    width: calc(100% - 10px - 10px); /* 幅を調整 */
    height: 100px; /* 2行分の高さ */
    font-size: 16px;
    padding: 10px;
    margin-left: 10px;
    margin-right: 10px;
    border: 1px solid; /* 枠線を黒に設定 */
    border-radius: 10px; /* 丸みを持たせる */
    box-sizing: border-box;
    outline: none;
    line-height: 1.5; /* 行間を設定 */
    overflow-y: auto; /* 必要に応じて縦方向のスクロールを表示 */
    resize: none; /* サイズ変更を無効化 */
    display: block; /* ブロック要素として扱う */
    box-sizing: border-box;
    transition: border-color 0.3s ease; /* フォーカス時の滑らかな色変化 */
}

/* フォーカス時の枠線の色 */
.custom-checkbox-textarea:focus {
    border-color: rgba(117, 199, 20, 1); /* フォーカス時に緑の枠線 */
}
/* モーダルの背景オーバーレイ */
/* モーダルの背景オーバーレイ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex; /* 常に配置を保持 */
    justify-content: center;
    align-items: center;
    opacity: 0; /* 初期状態は透明 */
    visibility: hidden; /* 視覚的に非表示 */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}

/* モーダル本体 */
.modal {
    background: #fff;
    width: 90%; /* コンテナより小さく */
    max-width: 350px; /* コンテナの最大幅より少し小さい */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-50px); /* 初期位置を上に設定 */
    opacity: 0; /* 初期状態は透明 */
    transition: transform 0.3s ease, opacity 0.3s ease;
    padding: 16px; /* コンテンツに余白を追加 */
    box-sizing: border-box; /* パディングを含めたサイズ計算 */
}

/* モーダル表示時のアニメーション */
.modal-overlay.active {
    opacity: 1; /* 表示状態 */
    visibility: visible; /* 見える状態に */
}

.modal-overlay.active .modal {
    transform: translateY(0); /* 中央に表示 */
    opacity: 1; /* 表示 */
}

/* モーダルヘッダー */
.modal-header {
    background: #414141;
    color: white;
    padding: 15px;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header .close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
}

/* モーダル本文 */
.modal-body {
    padding: 20px;
    font-size: 16px;
    color: #333;
    text-align: center;
    border-bottom: 1px solid #ccc;
}

/* モーダルフッター */
.modal-footer {
    padding: 15px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.modal-footer2 {
    display: block; /* 横並びではなく縦並びに */
}

/* ボタンスタイル */
.modal-btn {
    flex: 1;
    text-align: center;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    background-color: #fff;
}

.modal-btn.dark {
    background-color: #414141;
    color: white;
    border: none;
}
.color-red {
    color: red; /* テキストを赤色に設定 */
}

.status-label {
    display: inline-block; /* ラベルをブロックとして表示 */
    padding: 0px 5px; /* 上下と左右の余白を調整 */
    font-weight: bold; /* 文字を太字に */
    color: #fff; /* 文字色を白に */
    border-radius: 5px; /* 角を丸くする */
    margin-left: 20px;
}

.status-label.danger {
    background-color: #d9534f; /* 赤色（Bootstrapのdanger色） */
}
.status-label.success {
    background-color: rgba(117, 199, 20, 1);
}
.status-label.light {
    background-color: rgba(239, 239, 239, 1);
    color: #333333;
}
.status-label.dark {
    background-color: rgba(65, 65, 65, 255);
}

.item-block-display-none {
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
    width: calc(100% - 40px);
    opacity: 0; /* 非表示 (透明) */
    max-height: 0; /* 高さ 0 */
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease; /* スムーズなアニメーション */
}

.item-block-display-none.open {
    opacity: 1; /* 表示 (不透明) */
    max-height: 500px; /* 必要な高さに設定 */
}

.item-label-ellipsis {
    white-space: nowrap; /* 改行を禁止 */
    overflow: hidden; /* テキストが要素の幅を超えた場合に非表示 */
    text-overflow: ellipsis; /* 省略記号 (...) を表示 */
    display: block; /* 必要に応じてブロック要素として表示 */
    transition: all 0.3s ease; /* スムーズな状態切り替え */
}

.item-label-break {
    white-space: normal; /* 改行を許可 */
    word-wrap: break-word;
    overflow-wrap: anywhere;
    transition: all 0.3s ease; /* スムーズな状態切り替え */
}

.item-block-content-padding-right {
    padding-right: 20px;
    width: calc(100% - 20px);
}
.item-block-separator2 {
    border-top: 1px solid #ccc; /* 枠線を追加 */
    margin-bottom: 10px;
}
.mb-10 {
    margin-bottom: 10px; /* 下マージンを10pxに設定 */
}
.tab-container {
    display: flex;
    justify-content: space-around;
    background-color: #ffffff; /* 背景色を白に設定 */
    border-bottom: 1px solid #ccc; /* 下線を追加 */
    margin-bottom: 20px;

}

.tab {
    flex: 1;
    padding: 5px 0;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    background-color: transparent; /* タブ自体の背景は透明 */
    border: none;
    border-bottom: 2px solid transparent;
    transition: background-color 0.3s ease, border-bottom 0.3s ease;
}

.tab.active {
    font-weight: bold;
    border-bottom: 2px solid rgba(117, 199, 20, 1); 
    color: rgba(117, 199, 20, 1); 
}
.tab-content {
    display: flex; /* アイコンとテキストを横並びに */
    align-items: center; /* 縦方向の中央揃え */
    justify-content: center; /* 横方向の中央揃え */
    gap: 5px; /* アイコンとテキストの間の隙間を定義 */
}
.icon-system {
    width: 18px;
    height: 18px;
    background-image: url('/img/system.png'); /* 画像を指定 */
    background-size: cover; /* 画像を要素のサイズに合わせて調整 */
    background-repeat: no-repeat; /* 繰り返しを防止 */
}

.icon-user {
    width: 14px;
    height: 14px;
    background-image: url('/img/user_setting_icon.png'); /* 画像を指定 */
    background-size: contain; /* アスペクト比を保持して全体を表示 */
    background-repeat: no-repeat; /* 繰り返しを防止 */
}
#pdf-viewer {
    flex-grow: 1;
    overflow: auto;
    height: calc(100vh - 300px);
    border: 1px solid #ccc;
}
.error-message {
    font-size: 0.9rem;       /* エラーメッセージのフォントサイズ */
    color: #d9534f;         /* エラーメッセージの文字色（赤色系） */
    margin-top: 5px;        /* メッセージの上部にスペースを追加 */
    margin-left: 2px;
    margin-right: 2px;
    padding: 5px 10px;      /* メッセージにパディングを追加 */
    background-color: #f8d7da; /* 背景色を薄い赤に設定 */
    border: 1px solid #f5c6cb; /* 周囲に赤の境界線を追加 */
    border-radius: 4px;     /* 角を丸くする */
    display: none;          /* 初期状態では非表示 */
}
.info-message {
    font-size: 14px;
    color: #3c763d; 
    margin-top: 5px;
    margin-left: 2px;
    margin-right: 2px;
    padding: 5px 10px;      /* メッセージにパディングを追加 */
    background-color: #dff0d8; /* 背景色を薄い赤に設定 */
    border: 1px solid #d6e9c6; /* 周囲に赤の境界線を追加 */
    border-radius: 4px;     /* 角を丸くする */
}
textarea + .error-message,
#server-error-section {
    margin-top: 0; /* 特定の条件にのみ margin-top を 0 に設定 */
}
.header-background {
    display: flex;
    justify-content: center;
    background: linear-gradient(135deg, #8e44ad, #80408c);
}
.arrow-step-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px 10px 3px 10px;
    width: 100%;
    gap: 5px;
}

/* 各ステップ */
.arrow-step {
    position: relative;
    flex: 1;
    text-align: center;
    padding: 3px 3px;
    background-color: rgba(65, 65, 65, 255); /* 完了色（濃いグレー） */
    font-weight: bold;
    color: #fff; /* 完了ステップの文字色 */
    border-color: rgba(65, 65, 65, 255); /* 完了ステップの枠線色 */
    clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
    transition: all 0.3s ease;
}

/* アクティブなステップ */
.arrow-step.active {
    background-color: rgba(117, 199, 20, 1); /* アクティブ色（緑） */
    font-weight: bold;
    color: #fff; /* アクティブステップの文字色 */
    border-color: rgba(117, 199, 20, 1); /* アクティブステップの枠線色 */
}

/* 最後のステップの矢印を隠す */
.arrow-step:last-child {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* ステップの番号 */
.arrow-step .step-number {
    display: block;
}

.complete-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    background: url('/img/complete.png') no-repeat center center;
    background-size: contain; /* 画像を親要素に収める */
    border-radius: 50%; /* 丸いアイコンにする */
    margin: 0 auto;
}

.complete-title {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 10px;
}

.complete-message {
    font-size: 14px; /* 小さい文字サイズ */
    color: #555;
    text-align: left; /* 右寄せ */
    margin-bottom: 20px;
}
.complete-block {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
    padding: 0 10px 20px;
    margin: 20px auto; /* 横方向中央揃え */
}
.complete-info-message {
    font-size: 14px;
    color: #3c763d; 
    margin-top: 10px;
    padding: 5px 10px;      /* メッセージにパディングを追加 */
    background-color: #dff0d8; /* 背景色を薄い赤に設定 */
    border: 1px solid #d6e9c6; /* 周囲に赤の境界線を追加 */
    border-radius: 4px;     /* 角を丸くする */
}
.highlight {
    color: #d9534f; /* 強調部分を赤字に */
    font-weight: bold;
}
.line-it-button-container {
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    margin: 10px 0 20px 0;
    border-bottom: 1px solid #ccc; /* アンダーラインの設定 */
    padding-bottom: 20px; /* アンダーラインとボタン間にスペース */
}
.line-it-button-modal-container {
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
}
.copy-container {
    display: flex;
    align-items: center; /* 垂直方向の中央揃え */
    gap: 10px; /* テキストボックスとアイコンの間隔 */
    background-color: #f9f9f9; /* 背景色 */
    border: 1px solid #ddd; /* ボーダー */
    border-radius: 5px; /* 角を丸く */
    padding: 5px; /* 内側の余白 */
    width: 100%; /* コンテナの幅 */
    margin: 20px 0; /* 上下に20pxの余白を追加 */
    box-sizing: border-box; /* ボックスサイズ調整 */
}

.copy-input {
    flex: 1; /* テキストボックスを残りのスペースに拡張 */
    border: none; /* ボーダーを削除 */
    font-size: 16px; /* フォントサイズ */
    padding: 5px; /* 内側の余白 */
    outline: none; /* フォーカス時のアウトラインを削除 */
}

.copy-icon {
    font-size: 24px; /* アイコンサイズ */
    color: #28a745; /* アイコンの色 */
    cursor: pointer; /* カーソルをポインターに変更 */
}

.copy-icon:hover {
    color: #218838; /* ホバー時の色 */
}
/* 横並び用のコンテナ */
.horizontal-container {
    display: flex; /* 子要素を横並びに */
    align-items: center; /* 垂直方向に中央揃え */
    gap: 10px; /* 入力欄とボタンの間隔 */
}
.form-line-button {
    display: flex; /* フレックスボックスを使用してアイコンとテキストを横並びに */
    justify-content: center; /* 中央揃え */
    align-items: center; /* 縦方向も中央揃え */
    height: 50px; /* ボタンの高さ */
    width: 50%; /* ボタンの幅 */
    border-radius: 5px; /* ボタンの角を丸く */
    border: none; /* ボーダーを削除 */
    font-size: 14px; /* フォントサイズを少し大きく */
    cursor: pointer; /* ポインターに変更 */
    background-color: #00c300; /* LINEのブランドカラーに変更 */
    color: #ffffff; /* 白文字に設定 */
    padding-left: 0px;
}
.form-line-button img {
    width: 35px; /* アイコンの幅 */
    height: 35px; /* アイコンの高さ */
    margin-right: 5px;
}