.u-font__jp {
  font-family: "Noto Sans JP", sans-serif;
}

.u-font__en {
  font-family: "Alata", sans-serif;
}

.u-font__both {
  font-family: "Alata", "Noto Sans JP", sans-serif;
}

.u-color__text--base {
  color: #FFFFFF;
}

.u-color__bg--base {
  background: #FFFFFF;
}

.u-color__border--base {
  border-color: #FFFFFF;
}

.u-color__text--main {
  color: #000000;
}

.u-color__bg--main {
  background: #000000;
}

.u-color__border--main {
  border-color: #000000;
}

.u-color__text--accent {
  color: #386F81;
}

.u-color__bg--accent {
  background: #386F81;
}

.u-color__border--accent {
  border-color: #386F81;
}

.u-color__text--accent-light {
  color: rgba(56, 111, 129, 0.16);
}

.u-color__bg--accent-light {
  background: rgba(56, 111, 129, 0.16);
}

.u-color__border--accent-light {
  border-color: rgba(56, 111, 129, 0.16);
}

.u-color__text--sub {
  color: #868686;
}

.u-color__bg--sub {
  background: #868686;
}

.u-color__border--sub {
  border-color: #868686;
}

.u-color__text--border {
  color: #D8DDDF;
}

.u-color__bg--border {
  background: #D8DDDF;
}

.u-color__border--border {
  border-color: #D8DDDF;
}

.u-color__text--input {
  color: #BDC1C2;
}

.u-color__bg--input {
  background: #BDC1C2;
}

.u-color__border--input {
  border-color: #BDC1C2;
}

.u-color__text--bg {
  color: #F4F8FA;
}

.u-color__bg--bg {
  background: #F4F8FA;
}

.u-color__border--bg {
  border-color: #F4F8FA;
}

.u-color__text--link {
  color: #386F81;
}

.u-color__bg--link {
  background: #386F81;
}

.u-color__border--link {
  border-color: #386F81;
}

.u-color__text--alert {
  color: #E21E1E;
}

.u-color__bg--alert {
  background: #E21E1E;
}

.u-color__border--alert {
  border-color: #E21E1E;
}

.u-color__text--alert-light {
  color: rgba(226, 30, 30, 0.1);
}

.u-color__bg--alert-light {
  background: rgba(226, 30, 30, 0.1);
}

.u-color__border--alert-light {
  border-color: rgba(226, 30, 30, 0.1);
}

.u-color__text--line {
  color: #00b900;
}

.u-color__bg--line {
  background: #00b900;
}

.u-color__border--line {
  border-color: #00b900;
}

/* ================================================================
   つくばけんクリニック テーマ共通CSS
   ================================================================ */


/* ================================================================
   共通：リストタグ（check・bullet）
   ================================================================ */
ul.check,
ul.bullet {
  list-style-type: none;
  padding: 0;
}

ul.check li,
ul.bullet li {
  position: relative;
  margin-bottom: 15px;
  padding-left: 25px;
  font-size: 1.2em;
}

ul.check li::before,
ul.bullet li::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
}

/* チェックマーク */
ul.check li::before {
  width: 1rem;
  height: 0.4rem;
  border-left: 2px solid #414141;
  border-bottom: 2px solid #414141;
  transform: rotate(-45deg);
  margin-top: 0.7rem;
}

/* ビュレット（丸） */
ul.bullet li::before {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #414141;
  margin-top: 0.5rem;
}


/* ================================================================
   商品詳細ページ：購入エリア（共通）
   ================================================================ */

/* --- ブロック間の余白 --- */
.newCartBtnArea {
  margin-top: 20px;
  margin-bottom: 30px;
}

/* --- 見出し（通常価格 / 定期価格 / 2種セット など） --- */
.newCartBtnArea .itemTitle.u-text--head {
  color: #494949;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.8px;
  border-left: 4px solid #F39800;
  padding-left: 10px;
  margin-top: 24px;
  margin-bottom: 0;
}

/* --- 通常価格エリアのレイアウト修正（ecforce標準フォーム） --- */
.c-product_info__form .flex {
  display: block !important;
}

/* --- 価格ブロック --- */
.itemPriceArea {
  display: block !important;
  margin-top: 12px;
  padding: 16px 15px;
  background: #F2F2F2;
}

/* --- 単品購入 / 定期購入 ラベル --- */
.itemPriceArea .name {
  margin: 0 0 6px 0;
  color: #494949;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.8px;
}

/* --- 価格行 --- */
.itemPriceArea .price {
  margin-bottom: 10px;
  color: #494949;
  font-size: 15px;
}

/* --- 価格テキスト --- */
.priceBefore {
  color: #999;
  text-decoration: line-through;
  font-size: 1em;
}

.priceAfter {
  font-size: 1.2em;
  font-weight: bold;
  color: #B60A0A;
  margin-right: 10px;
}

/* --- %OFF 表記 --- */
.mod-color {
  color: #FD292C;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.8px;
}

.mod-size {
  font-size: 12px;
  font-weight: 400;
}


/* ================================================================
   商品詳細ページ：購入ボタン（カスタムカートリンク）
   ================================================================ */

/* --- ボタンリンク --- */
.itemPriceArea a {
  width: 100% !important;
  display: inline-block;
  transition: opacity 0.3s ease;
  color: #FFFFFF !important;
}

/* --- ボタン内部（テキスト＋アイコン） --- */
.newCartBtnArea .itemPriceArea .cartBtn.u-text--btn.u-color__btn--bg {
  width: 100% !important;
  min-height: 42px;
  padding: 14px 0 13px 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 7px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #FFFFFF !important;
  text-decoration: none;
  border-radius: 5px;
  box-shadow: 0 2px 5px 0 rgba(213, 217, 217, 0.50);
}

.cartBtn:hover {
  opacity: 0.6;
}

/* --- カートアイコン --- */
.cartBtn img {
  width: 18px;
  margin-right: 6px;
}

.cartBtn a img {
  width: 15px;
  height: 15px;
}

/* --- 単品・通常・お試しボタン（黄色） --- */
.cartBtn.u-text--btn.u-color__btn--bg {
  background: #EDC604 !important;
}

/* --- 定期購入ボタン（オレンジ） --- */
.cartBtn.u-text--btn.u-color__btn--bg.teiki {
  background: #F39800 !important;
}


/* ================================================================
   通常価格 購入ボタン（ecforce標準フォーム用）
   ================================================================ */
.mt-14 {
  margin-top: 14px;
}

.c-block {
  display: block;
}

.c-regular-price-button {
  margin-top: 14px;
  width: 100%;
  min-height: 42px;
  display: flex;
  padding: 14px 0 13px 0;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  background: #EDC604;
  box-shadow: 0 2px 5px 0 rgba(213, 217, 217, 0.50);
  color: #FFF;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 19.5px;
  letter-spacing: 0.8px;
}


/* ================================================================
   再入荷ボタン
   ================================================================ */
#btn-stock-waiting-list.c-product_info__form__submit {
  margin-top: 14px;
  width: 100%;
  height: auto;
  min-height: 42px;
  display: flex;
  padding: 14px 0 13px 0;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  background: #F39800;
  box-shadow: 0 2px 5px 0 rgba(213, 217, 217, 0.50);
  color: #FFF;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 19.5px;
  letter-spacing: 0.8px;
}


/* ================================================================
   会員情報・お届け先編集 - 注意書きボックス
   ================================================================ */
td.c-notice-cell {
  padding: 0;
  border: none;
  background: transparent;
}

div.c-notice {
  padding: 15px 20px;
  margin: 15px 0;
  background-color: #fff;
  border: 2px solid #E21E1E;
}

div.c-notice p.c-notice__text {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #E21E1E;
}

div.c-notice p.c-notice__text a.c-notice__link {
  color: #E21E1E;
  text-decoration: underline;
}

div.c-notice p.c-notice__text a.c-notice__link:hover {
  opacity: 0.7;
}

/* 購入ページ用の上マージン */
div.c-notice.c-page--shopping {
  margin-top: 134px;
}

@media screen and (max-width: 768px) {
  div.c-notice {
    padding: 10px 15px;
  }

  div.c-notice p.c-notice__text {
    font-size: 13px;
  }

  div.c-notice.c-page--shopping {
    margin-top: 67px;
  }
}


/* ================================================================
   お届け先ページ - 会員情報貼り付けボタン
   ================================================================ */
.p-account__inner__content #copy-customer-billing-address {
  display: inline-block;
  margin-top: 20px;
  padding: 6px 20px;
  color: #2F1D05 !important;
  line-height: 161%;
  background: #F5A42A;
  transition: all 0.3s ease;
  cursor: pointer;
}

#copy-customer-billing-address:hover {
  opacity: 0.4;
}


/* ================================================================
   FAQ装飾
   ================================================================ */
strong.blod_red {
  font-weight: 700;
  color: #E21E1E;
}

strong.blod {
  font-weight: 700;
}

strong.fz_big {
  font-size: 18px;
}


/* ================================================================
   ヘッダー border削除
   ================================================================ */
.l-header {
  border: none;
}


/* ================================================================
   TOP：マイページ メニューブロック
   ================================================================ */
.mypage-menu {
  width: 100%;
  max-width: 86vw;
  margin-inline: auto;
  margin-top: 36px;
}

.mypage-menu__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 280px));
  gap: 11px 22px;
  justify-content: center;
}

@media screen and (max-width: 749px) {
  .mypage-menu {
    padding-inline: 15px;
    margin-top: 0;
  }

  .mypage-menu__grid {
    gap: 11px;
  }
}

/* --- メニューアイテム --- */
.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80px;
  text-decoration: none;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  transition: opacity 0.2s ease;
  gap: 0;
}

@media screen and (max-width: 749px) {
  .menu-item {
    align-items: flex-start;
    padding-left: 9px;
  }
}

@media screen and (max-width: 390px) {
  .menu-item {
    align-items: center;
    padding: unset;
  }
}

.menu-item:hover {
  opacity: 0.85;
}

/* --- カラーバリエーション --- */
.menu-item--faq {
  background-color: #60C0CC;
  color: #fff;
}

.menu-item--search {
  background-color: #6C6E6F;
  color: #fff;
}

.menu-item--subscription {
  background-color: #fff;
  color: #393939;
  border: 1px solid #D8D8D8;
}

.menu-item--address {
  background-color: #fff;
  color: #393939;
  border: 1px solid #D8D8D8;
}

/* --- アイコン --- */
.menu-item__icon {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width: 749px) {
  .menu-item__icon {
    right: 12px;
    bottom: 12px;
  }
}

/* --- テキスト --- */
.menu-item__label {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 175%;
  color: inherit;
  position: relative;
  z-index: 2;
}

/* --- SVGアイコン --- */
.menu-item svg {
  position: absolute;
  bottom: 12px;
  left: 63%;
  z-index: 1;
  pointer-events: none;
}

.menu-item--search svg {
  bottom: 4px;
}

@media screen and (max-width: 749px) {
  .menu-item svg {
    left: auto;
    right: 8px;
  }
}


/* ================================================================
   お問い合わせ LINE誘導セクション
   ================================================================ */
.line-contact {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  border: 6px solid #06c755;
  overflow: hidden;
}

/* --- ヘッダー（緑帯） --- */
.line-contact__header {
  background-color: #06c755;
  padding: 6px 53px;
  display: flex;
  align-items: center;
  gap: 10px;
}

@media screen and (max-width: 749px) {
  .line-contact__header {
    padding: 6px 24px;
  }
}

.line-contact__header__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.line-contact__header__text {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* --- 本文エリア --- */
.line-contact__body {
  padding: 26px 59px 31px 59px;
  border: 1px solid #06c755;
}

@media screen and (max-width: 749px) {
  .line-contact__body {
    padding: 6px 24px;
  }
}

.line-contact__body__title {
  font-size: 16px;
  font-weight: 700;
  color: #414141;
  margin-bottom: 12px;
}

.line-contact__body__desc {
  font-size: 13px;
  color: #414141;
  margin-bottom: 23px;
}

/* --- ハイライトテキスト --- */
.line-contact__body__note {
  background: #f1faf3;
  border-left: 4px solid #32b565;
  padding: 7px 8px;
  font-size: 13px;
  color: #8c8c8c;
  margin-bottom: 22px;
}

/* --- ボタンエリア --- */
.line-contact__body__buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.line-contact__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 15px 24px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  transition: opacity 0.2s ease;
  cursor: pointer;
}

.line-contact__btn:hover {
  opacity: 0.85;
}

/* LINEで問い合わせるボタン */
.line-contact__btn--line {
  background-color: #06c755;
  color: #fff;
  border: none;
  flex: 1;
  min-width: 180px;
}

/* よくある質問を見るボタン */
.line-contact__btn--faq {
  background-color: #fff;
  color: #414141;
  border: 2px solid #8c8c8c;
  flex: 1;
  min-width: 180px;
}

.line-contact__btn__arrow {
  font-size: 15px;
  font-weight: 700;
}


/* ================================================================
   定期購入 注意書き
   ================================================================ */
.subsc-warning {
  padding-block: 27px;
  padding-left: 55px;
  border: 2px solid #E21E1E;
}

.subsc-warning ul {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  margin-top: 15px;
}

.subsc-warning p,
.subsc-warning li {
  color: #E21E1E;
  font-family: "Noto Sans JP";
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.8px;
}

@media screen and (max-width: 1280px) {
  .subsc-warning {
    padding: 10px 15px;
  }

  .subsc-warning ul {
    row-gap: 15px;
    margin-top: 10px;
  }
}


/* ================================================================
   ヘッダーロゴ モバイル対応
   ================================================================ */
.l-header__inner {
  padding-block: 10px;
}

@media screen and (max-width: 719px) {
  .l-header__inner .l-header__inner__block.logo__block a.l-header__inner__block__logo {
    display: grid;
    justify-items: flex-end;
  }

  .l-header__inner .l-header__inner__block.logo__block a.l-header__inner__block__logo img {
    width: 67%;
  }
}