/* --- [01. 基礎設定] --- */
*, *::before, *::after {
    box-sizing: border-box;
}


/* --- [03. パンくずリスト] --- */
.btc-mypage-index__breadcrumbs {
    list-style: none;
    display: flex;
    align-items: center;
    max-width: 1060px;
    margin: 0 auto;
    padding: 30px 25px 20px;
    font-size: 12px;
    letter-spacing: 0.05em;
}
.btc-mypage-index__breadcrumbs li:not(:last-child)::after {
    content: "/";
    margin: 0 10px;
    color: #ccc;
}
.btc-mypage-index__breadcrumb-link {
    text-decoration: none;
    color: #2d2d2d;
    opacity: 0.5;
}
.btc-mypage-index__breadcrumb-link--active {
    opacity: 0.5;
}

/* --- [04. ページ全体・コンテンツエリア] --- */
main { position: relative; z-index: 1; }
.btc-mypage-index__page {
    position: relative;
}
.btc-mypage-index__content {
    padding: 0 25px 80px;
}
.btc-mypage-index__content-main {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* --- [05. セクション見出し] --- */
.btc-mypage-index__section-header {
    margin-bottom: 22.5px;
    padding-bottom: 12px;
    border-bottom: 2px solid #008075;
}
.btc-mypage-index__section-title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #008075;
    margin: 0;
    letter-spacing: 0.05em;
}

/* --- [06. 履歴カードリスト] --- */
.btc-mypage-index__history-content > p {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    color: #888888;
    padding: 24px 4px;
}
.btc-mypage-index__history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.btc-mypage-index__history-item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    background-color: #f1f1f0;
    border: 1px solid #e3e2dd;
    border-radius: 16px;
    padding: 24px;
}

/* 商品画像 */
.btc-mypage-index__history-img {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid #008075;
}
.btc-mypage-index__history-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* テキスト情報 */
.btc-mypage-index__history-summary {
    flex: 1;
    min-width: 0;
}
.btc-mypage-index__summary-header {
    margin-bottom: 10px;
}
.btc-mypage-index__status-label {
    display: inline-block;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px 4px;
    border-radius: 4px;
    letter-spacing: 0.05em;
}
.btc-mypage-index__status-label--gray {
    background-color: #ffffff;
    color: #888888;
    border: 1px solid #cccccc;
}

.btc-mypage-index__summary-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.btc-mypage-index__summary-item {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14.5px;
    line-height: 1.7;
    color: #2d2d2d;
}
.btc-mypage-index__summary-label {
    font-weight: 500;
}

/* バンドル商品 */
.btc-mypage-index__bundle-products {
    margin: 4px 0 0 12px;
    padding-left: 8px;
    border-left: 2px solid #ddd9d0;
}
.btc-mypage-index__bundle-product {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 13px;
    color: #555555;
    line-height: 1.7;
}

/* 下段：アクションボタン */
.btc-mypage-index__summary-footer {
    padding-top: 16px;
    border-top: 1px solid #ddd9d0;
}
.btc-mypage-index__summary-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* --- [07. ボタン共通] --- */
.btc-mypage-index__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 20px;
    background-color: #ffffff;
    color: #008075;
    border: 1.5px solid #008075;
    border-radius: 21px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.03em;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.btc-mypage-index__btn:hover {
    background-color: #f1f1f0;
}

/* 「次回を最短でお届け」= 強調表示させる主要アクション */
.btc-mypage-index__btn--reverse {
    background-color: #008075;
    color: #ffffff;
}
.btc-mypage-index__btn--reverse:hover {
    background-color: #005f57;
}

/* btn--secondary / btn--link は .btc-mypage-index__btn の基本アウトラインスタイルをそのまま使用 */

/* --- [08. 次回お届け日変更ダイアログ] --- */
.btc-mypage-index__dialog-content {
    padding: 25px;
}
.btc-mypage-index__paragraph {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: #2d2d2d;
    margin: 0;
}
.btc-mypage-index__paragraph--sm {
    font-size: 14px;
}
.btc-mypage-index__font-lg {
    font-size: 18px;
    font-weight: 700;
    color: #008075;
}
.btc-mypage-index__hr {
    border: none;
    border-top: 1px solid #ddd9d0;
    margin: 16px 0 0;
}

/* ==========================================================================
    pc-mypage-index.css
    マイページ本文エリアに直接配置する場合の LINE連携ボタン
    （pc-mypage-line_connect.html を .mypage-line-connect でラップして使用）
    - pc-mypage-line_connect.html には、サイドナビ用の .btc-navi__* クラスに加えて
      本文エリア用の .btc-mypage-index__* クラスも付与されているため、
      ここでは btc-mypage-index__ プレフィックスのクラスのみを対象にスタイリングする
    - 枠線・背景色・太字は使わず、サイドナビの他メニュー項目と統一感のある
      プレーンな行デザインにする
   ========================================================================== */

.mypage-line-connect {
  margin: 0 0 24px;
}

.mypage-line-connect .btc-mypage-index__line-link {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 420px;
  padding: 13px 6px 13px 10px;
  box-sizing: border-box;
  color: #2d2d2d;
  text-decoration: none;
  font-family: 'Noto Sans JP', 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
}

.mypage-line-connect .btc-mypage-index__line-link:hover {
  color: #008075;
}

.mypage-line-connect .btc-mypage-index__line-icon {
  flex: none;
  width: 19px;
  height: 19px;
}

.mypage-line-connect .btc-mypage-index__line-label {
  flex: 1;
  min-width: 0;
}

/* 右端の「>」相当の矢印（mypage_navi.css と同じくborder+rotateの図形で描画し、アイコンと高さを揃える） */
.mypage-line-connect .btc-mypage-index__line-link::after {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-top: 2px solid #cccccc;
  border-right: 2px solid #cccccc;
  transform: rotate(45deg);
  transition: border-color 0.2s ease;
}

.mypage-line-connect .btc-mypage-index__line-link:hover::after {
  border-color: #008075;
}



/* ============================================================
   PC・タブレット レイアウト（768px以上）
   左列メニュー（tpl_frameのmypage-contents__aside）と
   右側コンテンツを横並びにする
   ============================================================ */
@media (min-width: 768px) {
    .btc-mypage-index__breadcrumbs {
        padding-top: 95px;
    }
    .btc-mypage-index__content {
        display: flex;
        flex-wrap: wrap;
    }
    .btc-mypage-index__content .c-contents-header {
        width: 100%;
    }
    .btc-mypage-index__content .mypage-contents__aside {
        width: 240px;
        margin-right: 50px;
        position: sticky;
        top: 95px;
        align-self: flex-start;
    }
    .btc-mypage-index__content .btc-mypage-index__content-main {
        width: calc(100% - 290px);
    }
}

/* ============================================================
   ワイドデスクトップ（1024px以上）
   ============================================================ */
@media (min-width: 1024px) {
    .btc-mypage-index__history-item {
        padding: 28px 32px;
    }
    .btc-mypage-index__history-img {
        width: 140px;
        height: 140px;
    }
}