/* =========================================
   MARVYBOXS / FIVE-ONE
   マイアカウント・会員ログインページ
   CSS完全版
========================================= */


/* -----------------------------------------
   ページ全体
----------------------------------------- */

body {
  margin: 0;

  background: #f7f5f2;

  color: #5c4738;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    Meiryo,
    sans-serif;

  line-height: 1.8;
}


/* -----------------------------------------
   基本設定
----------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}


main,
.c-container,
.p-customer,
.p-login,
[class*="customer"],
[class*="login"] {
  box-sizing: border-box;
}


/* -----------------------------------------
   PC時のコンテンツ幅
----------------------------------------- */

@media screen and (min-width: 768px) {

  main,
  .c-container,
  .p-customer,
  [class*="customer"] {
    width: 100%;

    max-width: 920px;

    margin-left: auto;
    margin-right: auto;
  }

}


/* -----------------------------------------
   ページタイトル・見出し
----------------------------------------- */

h1,
h2,
h3 {
  color: #4f4037;

  font-weight: 600;

  letter-spacing: .03em;
}


h1,
h2 {
  line-height: 1.5;
}


/* セクション見出し */

h2 {
  position: relative;

  margin-top: 38px;
  margin-bottom: 22px;

  padding-bottom: 12px;

  font-size: 21px;

  text-align: center;
}


/* 見出し下アクセント */

h2::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 0;

  width: 42px;
  height: 2px;

  background: #b88746;

  transform: translateX(-50%);
}


/* -----------------------------------------
   セクション間の区切り
----------------------------------------- */

hr {
  height: 1px;

  margin: 34px 0;

  background: #eadfce;

  border: none;
}


/* -----------------------------------------
   注文履歴
   ページ上部なので特に強調
----------------------------------------- */

/*
   最初に出てくるh2を注文履歴として強調
*/

h2:first-of-type {
  margin-top: 16px;

  font-size: 23px;

  color: #4d3c30;
}


/* 注文履歴直下の案内ボックス */

h2:first-of-type + div,
h2:first-of-type + p {
  position: relative;

  margin: 0 0 26px;

  padding: 18px 20px 18px 50px;

  background: #fffaf3;

  border: 1px solid #eadfce;
  border-radius: 10px;

  color: #665347;

  font-size: 14px;

  box-shadow:
    0 3px 12px rgba(92,71,56,.05);
}


/* 案内アイコン */

h2:first-of-type + div::before,
h2:first-of-type + p::before {
  content: "✓";

  position: absolute;

  left: 19px;
  top: 50%;

  width: 22px;
  height: 22px;

  display: flex;

  align-items: center;
  justify-content: center;

  background: #b88746;

  border-radius: 50%;

  color: #ffffff;

  font-size: 12px;
  font-weight: 700;

  transform: translateY(-50%);
}


/* -----------------------------------------
   テーブル共通
----------------------------------------- */

table {
  width: 100%;

  border-collapse: separate;
  border-spacing: 0;

  background: #ffffff;

  border: 1px solid #ded4ca;
  border-radius: 10px;

  overflow: hidden;

  box-shadow:
    0 3px 12px rgba(92,71,56,.06);
}


/* テーブルヘッダー */

th {
  padding: 13px 12px;

  background: #f5f1ec;

  border-right: 1px solid #e3dad1;
  border-bottom: 1px solid #d9cec4;

  color: #5c4738;

  font-size: 13px;
  font-weight: 600;

  text-align: left;

  white-space: nowrap;
}


/* テーブル内容 */

td {
  padding: 13px 12px;

  background: #ffffff;

  border-right: 1px solid #eee7e0;
  border-bottom: 1px solid #eee7e0;

  color: #5c4738;

  font-size: 14px;

  transition: background .2s ease;
}


/* 最終列 */

th:last-child,
td:last-child {
  border-right: none;
}


/* 最終行 */

tr:last-child td {
  border-bottom: none;
}


/* 行ホバー */

tbody tr:hover td {
  background: #fffaf5;
}


/* -----------------------------------------
   注文履歴の受注番号リンク
----------------------------------------- */

table td a {
  display: inline-block;

  color: #9c693d;

  font-weight: 600;

  text-decoration: underline;
  text-decoration-color: rgba(156,105,61,.35);
  text-underline-offset: 3px;

  transition:
    color .2s ease,
    background .2s ease,
    transform .15s ease;
}


table td a:hover {
  color: #e87524;

  text-decoration-color: #e87524;
}


/* -----------------------------------------
   注文履歴最初のテーブルだけ少し強調
----------------------------------------- */

h2:first-of-type ~ table:first-of-type {
  border: 2px solid #d9c6b3;

  box-shadow:
    0 6px 18px rgba(92,71,56,.08);
}


/* -----------------------------------------
   入力欄
----------------------------------------- */

.c-input--text,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
select,
textarea {
  width: 100%;

  min-height: 46px;

  padding: 11px 14px;

  background: #ffffff;

  border: 1px solid #ddd3c8;
  border-radius: 8px;

  color: #4f4037;

  font-size: 15px;

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


/* 入力中 */

.c-input--text:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  outline: none;

  background: #fffdf9;

  border-color: #b88746;

  box-shadow:
    0 0 0 3px rgba(184,135,70,.12);
}


/* placeholder */

input::placeholder,
textarea::placeholder {
  color: #aaa29b;
}


/* -----------------------------------------
   ラベル
----------------------------------------- */

label {
  color: #5c4738;

  font-size: 14px;
  font-weight: 600;
}


/* -----------------------------------------
   フォーム
----------------------------------------- */

form {
  box-sizing: border-box;
}


/* PCではフォーム幅を広げすぎない */

@media screen and (min-width: 768px) {

  form {
    max-width: 760px;

    margin-left: auto;
    margin-right: auto;
  }

}


/* -----------------------------------------
   通常ボタン
----------------------------------------- */

.c-button,
button,
input[type="submit"],
input[type="button"] {
  min-height: 46px;

  padding: 11px 24px;

  background: #8b7768;

  border: none;
  border-radius: 8px;

  color: #ffffff;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;

  transition:
    background .2s ease,
    transform .15s ease,
    box-shadow .2s ease;
}


.c-button,
.c-button:link,
.c-button:visited,
.c-button:active {
  color: #ffffff;
}


.c-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background: #756357;

  color: #ffffff;

  transform: translateY(-1px);

  box-shadow:
    0 4px 10px rgba(92,71,56,.15);
}


/* -----------------------------------------
   メインボタン
----------------------------------------- */

.c-button--primary {
  min-height: 48px;

  padding: 12px 28px;

  background: #e87524;

  border: none;
  border-radius: 8px;

  color: #ffffff;

  font-size: 15px;
  font-weight: 600;

  box-shadow:
    0 3px 8px rgba(232,117,36,.18);
}


.c-button--primary:hover {
  background: #cf6119;

  color: #ffffff;

  transform: translateY(-1px);

  box-shadow:
    0 5px 12px rgba(232,117,36,.24);
}


/* -----------------------------------------
   削除・危険操作
----------------------------------------- */

.c-button--danger {
  background: #a85d58;

  border: none;

  color: #ffffff;
}


.c-button--danger:hover {
  background: #914d49;

  color: #ffffff;
}


/* -----------------------------------------
   無効ボタン
----------------------------------------- */

button:disabled,
input:disabled,
.c-button:disabled,
.c-button.is-disabled {
  opacity: .5;

  cursor: default;

  transform: none;

  box-shadow: none;
}


/* -----------------------------------------
   リンク
----------------------------------------- */

a {
  color: #8a684c;

  text-decoration: none;

  transition: color .2s ease;
}


a:hover {
  color: #b88746;

  text-decoration: none;
}


/* -----------------------------------------
   新規会員登録リンクなど
----------------------------------------- */

a[href*="register"],
a[href*="signup"] {
  font-weight: 600;
}


/* -----------------------------------------
   LINEログインボタン
----------------------------------------- */

button[class*="line"],
a[class*="line"] {
  border-radius: 8px !important;
}


/* -----------------------------------------
   エラー・注意表示
----------------------------------------- */

.c-error,
[class*="error"] {
  color: #b6534d;
}


/* -----------------------------------------
   マイアカウント内カード感
----------------------------------------- */

fieldset,
[class*="account"],
[class*="member"] {
  border-radius: 10px;
}


/* -----------------------------------------
   ショップへ戻るボタン
----------------------------------------- */

a[href*="shop"],
a[href*="top"] {
  border-radius: 8px;
}


/* -----------------------------------------
   レビュー履歴など
----------------------------------------- */

h2:not(:first-of-type) + div,
h2:not(:first-of-type) + p {
  margin-bottom: 24px;

  padding: 15px 18px;

  background: #f6f3ef;

  border-radius: 8px;

  color: #6c5b50;

  font-size: 13px;
}


/* -----------------------------------------
   スクロールバー
   テーブル内部
----------------------------------------- */

table::-webkit-scrollbar,
div::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}


table::-webkit-scrollbar-thumb,
div::-webkit-scrollbar-thumb {
  background: #b9aea5;

  border-radius: 10px;
}


/* -----------------------------------------
   スマートフォン
----------------------------------------- */

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

  body {
    font-size: 14px;
  }


  main,
  .c-container,
  .p-customer,
  .p-login,
  [class*="customer"],
  [class*="login"] {
    width: 100%;

    max-width: 100%;

    padding-left: 12px;
    padding-right: 12px;
  }


  h2 {
    margin-top: 30px;
    margin-bottom: 18px;

    padding-bottom: 10px;

    font-size: 19px;
  }


  h2:first-of-type {
    margin-top: 12px;

    font-size: 20px;
  }


  h2:first-of-type + div,
  h2:first-of-type + p {
    padding:
      14px
      14px
      14px
      44px;

    font-size: 13px;
  }


  h2:first-of-type + div::before,
  h2:first-of-type + p::before {
    left: 14px;
  }


  .c-input--text,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  select,
  textarea {
    min-height: 46px;

    font-size: 16px;
  }


  .c-button,
  .c-button--primary,
  .c-button--danger,
  button,
  input[type="submit"],
  input[type="button"] {
    width: 100%;

    box-sizing: border-box;
  }


  /* テーブルの横幅確保 */

  table {
    min-width: 650px;
  }


  th,
  td {
    padding: 11px 9px;

    font-size: 12px;
  }

}

/* =========================================
   マイアカウント
   PC版 横幅拡張 強化版
========================================= */

@media screen and (min-width: 768px) {

  /* 最上位コンテナ */
  body.view_pc .p-page__container {
    width: 92% !important;
    max-width: 980px !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }


  /* 本文エリア */
  body.view_pc .p-page__body {
    width: 100% !important;
    max-width: 980px !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }


  /* 実際の中身 */
  body.view_pc .p-page__body-inner {
    width: 100% !important;
    max-width: 900px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 34px 40px !important;
  }


  /* テーブル類は横幅いっぱい */
  body.view_pc .p-page__body-inner table {
    width: 100% !important;
  }


  /* フォームも狭くしすぎない */
  body.view_pc .p-page__body-inner form {
    width: 100% !important;
    max-width: 820px !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }

}

/* =========================================
   マイアカウント
   スマホ最終調整
========================================= */

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

  /* ページ本体を少し広く使う */
  .p-page__body-inner {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }


  /* 各セクションの余白 */
  .p-page__body-inner > * {
    max-width: 100% !important;
  }


  /* 見出し */
  h1,
  h2,
  h3 {
    line-height: 1.6;
  }

  h2 {
    margin-top: 24px;
    margin-bottom: 14px;

    font-size: 17px;
  }


  /* テーブル */
  table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    border-radius: 6px;
  }

  th,
  td {
    padding: 8px 7px !important;

    font-size: 11px !important;

    line-height: 1.55;
  }


  /* フォーム入力 */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  select,
  textarea {
    min-height: 40px !important;

    padding: 8px 10px !important;

    font-size: 14px !important;

    border-radius: 6px !important;
  }


  /* ボタン */
  .c-button,
  .c-button--primary,
  .c-button--danger,
  button,
  input[type="submit"],
  input[type="button"] {
    min-height: 40px !important;

    padding: 8px 14px !important;

    font-size: 13px !important;

    border-radius: 6px !important;
  }


  /* セクションカード */
  fieldset,
  [class*="account"],
  [class*="customer"],
  [class*="member"] {
    border-radius: 6px !important;
  }


  /* 案内ボックス */
  h2 + div,
  h2 + p {
    padding: 12px !important;

    font-size: 12px !important;

    line-height: 1.7;

    border-radius: 6px !important;
  }


  /* 区切り線 */
  hr {
    margin: 22px 0 !important;
  }

}

/* =========================================
   注文履歴 案内強調
========================================= */

#sales_list .c-alert {
  margin: 0 0 24px !important;
  padding: 16px 20px !important;

  background: #fffaf3 !important;

  border: 1px solid #eadfce !important;
  border-left: 4px solid #b88746 !important;
  border-radius: 8px !important;

  color: #5c4738 !important;

  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.8 !important;
}

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

  #sales_list .c-alert {
    margin-bottom: 18px !important;
    padding: 12px 13px !important;

    font-size: 12px !important;
  }

}

/* =========================================
   マイアカウント最上部
   ショップ名サイズ調整
========================================= */

.title_area,
.title_area *,
.p-shop__header--title,
.p-shop__header--title * {
  font-size: 20px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
}


/* スマホ */
@media screen and (max-width: 767px) {

  .title_area,
  .title_area *,
  .p-shop__header--title,
  .p-shop__header--title * {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

}

/* =========================================
   お客様情報フォーム
   入力欄まわりの余白調整
========================================= */

td:has(input[type="text"]),
td:has(input[type="email"]),
td:has(input[type="tel"]),
td:has(input[type="password"]),
td:has(select),
td:has(textarea) {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

td input[type="text"],
td input[type="email"],
td input[type="tel"],
td input[type="password"],
td select,
td textarea {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 顧客IDの値側セル */
.p-page__body-inner table td {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* =========================================
   退会エリア
   ボタンと注意文の間隔調整
========================================= */

/* PC */
@media screen and (min-width: 768px) {

  /* 退会ボタンの右側に適度な余白 */
  .c-button--danger {
    margin-right: 18px !important;
  }

  /* 注意文 */
  .c-button--danger + * {
    margin-left: 0 !important;
  }

}


/* スマートフォン */
@media screen and (max-width: 767px) {

  /* 退会ボタン */
  .c-button--danger {
    width: auto !important;
    min-width: 104px;
    margin-right: 16px !important;
    flex-shrink: 0;
  }

  /* ボタン直後の注意文 */
  .c-button--danger + * {
    margin-left: 0 !important;
    line-height: 1.7 !important;
  }

}