/* style.css */
[v-cloak] {
  display: none;
}
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #E4EAFF;
}
/* アプリ全体のスクロールバーを非表示にする */
html, body {
    /* Internet Explorer, Edge 用 */
    -ms-overflow-style: none;  
    /* Firefox 用 */
    scrollbar-width: none;  
}

/* Google Chrome, Safari（iPhone）用 */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

/* 全体に適用 */
body, button, input, select, textarea {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    -webkit-font-smoothing: antialiased; /* 文字を滑らかにする（iOS/Mac用） */
}
body {
    /* 画面全体のバウンド（引っ張り更新のような動き）を抑える */
    overscroll-behavior-y: none;
    /* スクロールを滑らかに（iOS用） */
    -webkit-overflow-scrolling: touch;
}

h1 {
    font-size: 18px;
    text-align: center;
}
h2{
    font-size: 16px;
    margin: 0;
}
/* ヘッダー全体を上部に固定 */
.global-header {
    position: sticky; /* または fixed */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* コンテンツより前面に来るように */
    background-color: #ffffff; /* 下の文字が透けないように背景色を指定 */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 境目をわかりやすく */
}

/* 画像のサイズ調整（必要に応じて） */
.header-logo {
    display: block;
    width: 100%;
    /*max-width: 500px;*/ /* 画像が大きすぎないように制限 */
    height: auto;
}
/* ロゴやボタンなど、アプリ的に動かしたい要素に適用 */
.app-button, .logo, .nav-item {
    -webkit-touch-callout: none; /* 長押しメニュー禁止 */
    -webkit-user-select: none;   /* 文字選択禁止 */
    user-select: none;
}

/* 2. Vueのルート要素を画面いっぱいの高さにする */
.userApp {
    display: flex;
    flex-direction: column;
    min-height: 100dvh; 
    padding-bottom: calc(50px + env(safe-area-inset-bottom));
}

/* 3. コンテンツ部分を「可変」にする */
/* .card または中身のコンテンツ要素が伸びるように設定 */
.card {
    flex: 1;           /* これが重要！残りのスペースをすべて埋めます */
    display: flex;
    flex-direction: column;
    margin: 0;         /* 外側の余白を消して画面端まで広げる */
    border-radius: 0;  /* PWAなら全画面で見せるため角丸をなくすのが一般的 */
}

.member-content {
    flex: 1;           /* カードの中でもコンテンツ部分を伸ばす */
}
.member-content img{
    width: 100%;
}

.member-content {
    padding: 0px 10px 0px 10px;
    margin-bottom: 0px; 
    padding-bottom: 30px;
}


/* 4. フッターメニューを最下部に固定 */
footer-menu {
    width: 100%;
    margin-top: auto;  /* コンテンツが短くても強制的に一番下へ */
    position: sticky;
    bottom: 0;
    z-index: 100;
}
.footer-nav {
    background: #fff;
    display: flex;
    width: 100%;
    position: fixed;   /* 画面に対して固定 */
    bottom: 0;         /* 下端に配置 */
    left: 0;           /* 左端から */
    z-index: 1000;     /* 他の要素より上に表示 */

    /* スマホ向けの微調整 */
    padding-bottom: env(safe-area-inset-bottom); /* iPhoneのバー（ノッチ）対策 */
    height: 80px;      /* 高さを決めておくと安定します */
    align-items: center; /* 中のアイコンを上下中央に */
    justify-content: space-around; /* アイコンを均等に配置 */
}
.topicImg img{
    width: 100%;
}
.nav-item {
    flex: 1;                 /* 4つの要素を均等な幅にする（重要） */
    display: flex;           /* アイテム内もFlexboxにする */
    flex-direction: column;  /* アイコンとラベルを縦に並べる */
    align-items: center;     /* 左右中央に寄せる */
    justify-content: center; /* 上下中央に寄せる */
    padding: 10px 0;         /* 上下の余白 */
    text-decoration: none;   /* リンクの下線を消す */
    color: #333;             /* 文字色 */

    opacity: 0.6; /* 通常時は少し薄く */
    transition: all 0.2s;
}
.nav-item.active {
    opacity: 1; /* 選択中はハッキリ */
    transform: translateY(-2px); /* 少しだけ浮かせる */
}
.nav-item.active img {
    filter: brightness(0) invert(1); /* 白いアイコンなら、背景色に合わせて色を強調するなど */
}

/* アイコンを包む枠（ここで丸を作る） */
.icon-wrapper {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* 正円にする */
    transition: all 0.3s ease; /* アニメーション */
}

/* 画像のサイズ調整 */
.icon-wrapper img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

/* ★ Active時の設定：背景を青に、少し浮かせる */
.nav-item.active .icon-wrapper {
    background-color: #0D38CE; /* 青色（お好みの青へ） */
/*    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);*/
    transform: translateY(-5px); /* 少し上に浮かせると今風です */
    position: relative;
    top: 6px;
}

.icon img {
    width: 28px;             /* アイコンのサイズを適切に調整 */
    height: auto;
    display: block;
}

.label {
    font-size: 12px;         /* ラベルに文字を入れた時のサイズ */
    margin-top: 4px;
}

/* ログイン画面のスタイル */
.login-container {
    padding: 40px;
    text-align: center;
}

.login-container h1 {
    color: #2563eb;
    margin-bottom: 30px;
}

/*************************/
/*ニュース表示*/
.news-section {
   /* max-height: 400px; /* お好みの高さ（3〜4件分くらい）に調整してください */
   /* overflow-y: auto;*/
    border-radius: 8px;
/*    background: #fff;*/
    padding-bottom: 30px;
}
.section-title {
    font-size: 1rem;
    padding-left: 10px;
    margin-bottom: 12px;
}
.news-item {
    background: #f8fafc;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 5px;
    border: 1px solid #e2e8f0;
}
.news-item.is-personal {
    background: #fff7ed; /* 個別メッセージは少し色を変える */
    border-color: #fdba74;
}
.news-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: #64748b;
    color: white;
    margin-right: 8px;
}
.is-personal .news-badge {
    background: #f97316; /* 個別メッセージのバッジ色 */
}
.news-date {
    font-size: 0.75rem;
    color: #94a3b8;
}
.news-title {
    font-weight: bold;
    font-size: 0.95rem;
    margin-top: 4px;
    display: flex;
    justify-content: space-between; /* タイトルと矢印を両端に広げる */
    align-items: center;            /* 上下中央揃え */
    width: 100%;
}
.news-text {
    font-size: 0.85rem;
    color: #475569;
    margin-top: 4px;
    white-space: pre-wrap; /* 改行を反映 */
}

/* タブの基本スタイル */
.info-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}
.info-tabs button {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    font-size: 0.9rem;
    color: #666;
    cursor: pointer;
    position: relative;
}
.info-tabs button.active {
    color: #007bff;
    font-weight: bold;
}
.info-tabs button.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #007bff;
}
/* 重要通知用のバッジ色（例：少し温かみのあるオレンジや赤系） */
.personal-badge {
    background-color: #FFF0EE;
    color: #FF5252;
}

/* 重要通知のアイテムに少しアクセントをつける場合 */
.personal-item {
    /*border-left: 4px solid #FF5252; */
}

.tab-count {
    font-size: 0.7rem;
    background: #eee;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 3px;
}
/* 重要バッジの色分け */
.news-badge.personal {
    background: #ff4d4f; /* 赤系 */
}

/* アコーディオンの矢印の回転 */
.arrow {
    display: inline-block;
    transition: transform 0.3s;
    font-size: 0.8em;
    margin-left: 5px;
    color:#BDBDBD;
}
.arrow.rotated {
    transform: rotate(180deg);
}

/* 本文の表示アニメーション */
.slide-enter-active, .slide-leave-active {
    transition: all 0.3s ease;
    max-height: 500px;
    overflow: hidden;
}
.slide-enter-from, .slide-leave-to {
    max-height: 0;
    opacity: 0;
}

.news-body-full {
    padding: 10px;
    border-top: 1px dashed #eee;
    font-size: 0.95rem;
    line-height: 1.5;
}



/*商品プロフィール画面*/
/* 商品一覧のグリッドレイアウト */
.member-header {
    /*background: linear-gradient(135deg, #1e40af, #1e3a8a);*/
    color: #000;
    padding: 5px;
    text-align: center;
}
.member-header p{
    font-size: 16px;
    text-align: left;
    margin-left: 10px;
    margin: 0;
    padding: 0;
}
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); /* 基本は1列 */
    gap: 8px; /* カード同士の間隔 */
    padding: 0px 0;
}

.product-card {
    background: #ffffff;
    border: 1px solid #eef2f3;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.2s ease;
}

.qty-control input[type="number"] {
    font-size: 21px !important; /* iPhoneの自動ズーム防止 */
    padding: 8px;
    width: 60px;
    border-radius: 4px;
    /* モバイルで入力しやすいように高さを少し確保 */
    height: 16px; 
}

/* 念のため、ラベルや周りの文字もゴシック体で調整 */
.qty-control label {
    font-size: 16px;
    display: block;
    margin-bottom: 4px;
}


/* 履歴表示用のスタイル */
.history-section {
    margin-top: 0px;
    text-align: left;
}

h1,h3{
    margin: 0;
}
.history-section h3 {
    font-size: 16px;
    color: #374151;
    padding-bottom: 0px;
    margin-bottom: 15px;
}

.history-list {
    list-style: none;
    padding: 0;
    margin: 0;
/*    max-height: 300px;*/
    overflow-y: auto;
    margin-bottom: 30px;
}

.history-item {
    background: #f9fafb;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 7px;
    display: flex;
    flex-direction: column; /* 縦並びを維持 */
    /*
    justify-content: space-between;
    align-items: center;
    */
}

.history-info {
    width: 100%; /* 横幅いっぱいに使う */
    margin-right: 12px;  /* 右側の金額との間に最低限の隙間をあける */
}

.history-info p {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    color: #1f2937;
}

.history-date {
    font-size: 10px;
    color: #9ca3af;
}

.history-price {
    display: flex;
    flex-direction: row;         /* 金額と（税別）を縦に並べる */
    align-items: flex-end;          /* 縦並びにした中身を右揃えにする */
   align-self: flex-end;
}
.history-price .amount {
    font-weight: 900;
    color: #1f2937;
    display: block;
}

.history-price .amount {
    font-weight: bold;
    font-size: 1.1rem;
    color: #333;
}

/* （税別）の文字スタイル（微調整用） */
.history-price .zei_disp_small {
    font-size: 0.75rem;
    color: #888;
    margin-top: 2px;                /* 金額との間のわずかな隙間 */
}


.history-price .qty {
    font-size: 11px;
    color: #6b7280;
    font-size: 14px;
    font-weight: bold;
}

/* ステータスバッジの共通設定 */
.status-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px; /* 丸みをつけてアプリ感を出す */
    font-size: 11px;
    font-weight: 800;
    margin-top: 6px;
    text-align: center;
    margin-right: 10px;
}

/* 新規受付：注意を引く赤 */
.status-new {
    background-color: #ffe5e5;
    color: #e63946;
}

/* 準備中：進行を表す青 */
.status-process {
    background-color: #e0f2fe;
    color: #0284c7;
}

/* 配送手配完了：安心感を与える緑 */
.status-ready {
    background-color: #D4EEDA;
    color: #00681A;
}

/* その他：控えめなグレー */
.status-default {
    background-color: #f3f4f6;
    color: #6b7280;
}


/*profile*/
.user-main {
    padding: 10px 10px;
    padding-bottom: 90px;
}

.product-code {
    font-size: 0.75rem;
    color: #888;
    font-family: monospace;
    margin: 3px;

}

/* 商品名：太字で強調 */
.product-name {
    font-size: 1.0rem;
    font-weight: 700;
    color: #001A73;
    line-height: 1.4;
    border-bottom: 1px dashed #eee;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.product_hr{
    border-top: 1px dashed #eee;
}

/* 価格エリア：右側に配置して目立たせる */
.product-price {
    margin-top: 4px;
    padding-top: 8px;
/*    border-top: 1px dashed #eee;*/
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.product-price .label {
    font-size: 0.8rem;
    color: #666;
}

.product-price .price-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: #d90429; /* 購買意欲をそそる赤 */
}

.product-price .price-value::after {
    content: " (税別)"; /* 必要なら単位や税表記をCSSで追加可能 */
    font-size: 0.7rem;
    margin-left: 2px;
}

.logout-area{
    margin-top: 30px;
   text-align: center;
}
.btn-logout{
    height: 35px;
    width: 120px;
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    font-size: 16px;
}
.card-inner {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    margin-top: 10px;
}

.input-group {
    margin-bottom: 15px;
    text-align: left;
}

.input-group label {
    display: block;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 5px;
}

.input-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box; /* はみ出し防止 */
}

/* メールアドレス全体を包むボックス */
.email-list {
    display: flex;
    flex-direction: column; /* 縦並び（改行）にする */
    gap: 4px;               /* メールアドレスが複数ある場合の行間スペース */
}

/* メールアドレス1件ごとのスタイル */
.email-item {
    display: block;         /* 確実に1行を独占させる */
    word-break: break-all;  /* スマホの画面幅が非常に狭い場合でも、アドレスの途中で綺麗に折り返す */
    color: #333;            /* 文字色 */
}
.btn-primary, .btn-secondary {
    width: 50%;
    border: none;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    font-size: 14px;
    height: 40px;
}

.btn-secondary-pass {
    width: 70%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}

.btn-mail_edit {
    background: #f0f0f0;
    width: 70%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    color: #000;
}




.btn-primary { background: #5999ED; color: white; }
.btn-secondary { background: #f0f0f0; color: #333; margin-top: 5px; }
.btn-secondary-pass { background: #f0f0f0; color: #333; margin-top: 5px; }

/*Order*/
.price-box-small{
    font-weight: bold;
    font-size: 16px;
}
.price{
    margin-left: 10px;
}
.btn-success{
    height: auto;
    background: #3F51B5;
    color: #fff;
    border: none;
    border-radius: 25px;
    margin-top: 3px;
    height: 40px;
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    font-size: 16px;
}
.btn-success-small{
    background: #001A73;
    color: #fff;
    width: 100%;
    border-radius: 20px;
    border: none;
    padding: 5px 0;
    height: 35px;
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    font-size: 16px;
}
.btn-secondary {
    background: #f0f0f0;
    color: #333;
    margin-top: 3px;
}


.back-link{
    background: #f0f0f0;
    width: 70%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    margin-top: 22px;
    position: relative;
    top: 14px;
    left: 5px;
}

/* 外側のコンテナ */
.qty-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #E4EAFF; /* 薄いブルーの背景 */
    border-radius: 25px;       /* 全体の角を丸める */
    padding: 4px;              /* ボタンと外枠の間の余白 */
    width: 150px;              /* 全体の横幅（調整可能） */
    height: 44px;
}

/* ＋とーの共通ボタン設定 */
/*
.btn-step {
    width: 36px;             
    height: 36px;
    border-radius: 50%;       
    background-color: #0D38CE;
    color: #fff;              
    border: none;
    font-size: 1.4rem;         
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 0;
    transition: transform 0.1s, background-color 0.2s;
    flex-shrink: 0;         
}
*/

.btn-step {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #0D38CE;
    border: none;
    cursor: pointer;
    
    /* ★必須：中の線を中央配置するための基準にする */
    position: relative; 
    
    transition: transform 0.1s, background-color 0.2s;
    flex-shrink: 0;
}

/* プラスの【横線】 */
.btn-step::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;       /* 線の長さ（お好みで調整） */
    height: 3px;       /* 線の太さ（お好みで調整） */
    background-color: #fff;
    /* 縦横のサイズに関わらず、自身の中心をボタンの中心にジャストフィットさせる */
    transform: translate(-50%, -50%); 
}

/* プラスの【縦線】 */
.btn-step::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;        /* 線の太さ（横線と合わせる） */
    height: 16px;      /* 線の長さ（横線と合わせる） */
    background-color: #fff;
    transform: translate(-50%, -50%); 
}

/* ★追加：マイナスボタン用のスタイル（縦線を消す） */
.btn-step.minus::after {
    display: none; /* 縦線を非表示にしてマイナスにする */
}

/* ボタンを押した時のエフェクト */
.btn-step:active {
    transform: scale(0.9);      /* 少し小さくなって押した感を出す */
    background-color: #0a2da6;
}

/* 無効（0の時のマイナスボタンなど）の状態 */
.btn-step:disabled {
    background-color: #a5b4fc; /* 少し薄くして無効を表現 */
    cursor: not-allowed;
}

/* 数値入力エリア */
.input-qty {
    width: 40px;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    color: #0D38CE;            /* 文字色も濃いブルーに合わせると統一感が出ます */
    outline: none;
    -webkit-appearance: none;
    margin: 0;
}

/* スピンボタン（上下矢印）を消す */
.input-qty::-webkit-inner-spin-button,
.input-qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.input-qty[type=number] {
    -moz-appearance: textfield;
}


.modal-overlay {
   position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* iOS対策：100vhより100%の方が安全な場合があります */
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;    /* 上下中央 */
    justify-content: center; /* 左右中央 */
    z-index: 9999;
    padding: 20px;          /* iPhoneの端にピタッとくっつかないよう余白 */
    box-sizing: border-box;
}

.modal-content {
    background: white;
    width: 100%;            /* モバイルでは横幅いっぱい */
    max-width: 400px;       /* PCなどでは広がりすぎないように */
    max-height: 90vh;       /* ★重要：画面の高さの90%までに制限 */
    overflow-y: auto;       /* ★重要：中身が長い場合はモーダル内をスクロール */
    border-radius: 12px;
    padding: 24px;
    position: relative;     /* 位置を安定させる */
    
    /* iPhoneのノッチ（画面上部の切り欠き）や下部バーを考慮 */
    margin: auto;
}
/* 合計金額などを少し見やすく調整 */
.total-amount {
    margin: 15px 0;
    font-weight: bold;
    color: #333;
}
.qty-control {
    display: flex;
    align-items: center; /* 縦方向の中央揃え */
    justify-content: space-between; /* 両端に寄せる場合 */
    width: 100%;
    gap: 10px;
    margin-bottom: 20px;
}
.zei_disp{
    font-size: 14px;
}
.zei_disp_small {
    font-size: 12px;
    line-height: 18px;
}
/* 小計エリア（左側50%） */
.subtotal {
    flex: 1; /* 均等に広げる */
    font-weight: bold;
    font-size: 1.1rem;
    color: #333;
    text-align: left; /* 左寄せ */
}

.subtotal{
    color: #0D38CE;
    font-size: 24px;
    font-weight: bold;
}

/* PWAバナー本体：お知らせのすぐ下に表示 */
.pwa-install-banner {
    background-color: #eaffea; /* ごく薄いグリーン */
    border: 2px solid #28a745; /* 枠線はハッキリしたグリーン */
    padding: 15px;
    border-radius: 15px;      /* バナー自体も角丸に */
    margin: 10px 0 20px 0;
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.15);
}

.banner-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.banner-content span {
    color: #155724;
    font-weight: bold;
    font-size: 0.95rem;
}

/* 追加ボタン：鮮やかなグリーンの角丸 */
.btn-install-small {
    background: linear-gradient(135deg, #28a745, #218838); /* グラデーションで立体感 */
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 25px; /* 完全なカプセル型（角丸） */
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.1s;
    white-space: nowrap;
}


.btn-install-small:active {
    transform: scale(0.95); /* 押した時に少し凹む演出 */
}

/* 閉じるボタン：シンプルだけど押しやすい形 */
.btn-close {
    background: #d4edda;
    color: #155724;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%; /* 正円 */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
}

/* 複数メールアドレス編集用の専用スタイル */
.email-edit-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.email-edit-row .input-field {
    flex: 1;
    margin-bottom: 0; /* 既存のinput-fieldの下マージンをリセット */
}

/* 機種依存でズレないプラス・マイナスボタン */
.btn-step {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #0D38CE;
    border: none;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.1s, background-color 0.2s;
}
.btn-step:active {
    transform: scale(0.95);
}
/* マイナスボタン（削除用）は赤系にする */
.btn-step.minus {
    background-color: #dc3545;
}
/* 共通の横線 */
.btn-step::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 3px;
    background-color: #fff;
    transform: translate(-50%, -50%);
}
/* プラスボタン用の縦線 */
.btn-step::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 14px;
    background-color: #fff;
    transform: translate(-50%, -50%);
}
/* minusクラスがついている時は縦線を消してマイナスにする */
.btn-step.minus::after {
    display: none;
}

.btn-step-email {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #0D38CE;
    border: none;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.1s, background-color 0.2s;
}
.btn-step-email:active {
    transform: scale(0.95);
}
/* マイナスボタン（削除用）は赤系にする */
.btn-step-email.minus {
    background-color: #dc3545;
}


/* 上限メッセージ */
.limit-note {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 15px;
    margin-top: 10px;
    width: 90%;
}

.mailadress_page{
    padding-top: 15px;
    padding-bottom: 15px;
}
@media (min-width: 769px) {
    body{
        background-color: #E4EAFF;
        height: auto;
    }
    .userApp{
        width: 480px;
        margin: auto;
        background: #E4EAFF;
    }
    .user-main {
    }
    .footer-nav {
        width: 480px;
        position: fixed;   /* 画面に固定 */
        bottom: 0;         /* 一番下に配置 */
        left: 50%;         /* 左端を画面の中央に持ってくる */
        transform: translateX(-50%); /* 要素の幅の半分だけ左に戻して、完全に中央合わせ */
        margin: 0;         /* margin autoは不要になります */
        z-index: 1000;     /* 他の要素の下に隠れないように念のため設定 */
    }
}