@charset "UTF-8";

/* ============================================================
   0) Base / Utilities
   ============================================================ */
:root {
  /* Colors */
  --color-text: #2c2727;
  --color-muted: #aaaaaa;
  --color-border: #aaaaaa;
  --color-footer-bg: #323232;
  --color-bg: #ffffff;
  --color-white: #ffffff;
  --color-black: #000000;

  /* Accents / Gradients */
  --color-accent-solid: #5a2bcf;
  --grad-purple-from: #552879;
  --grad-purple-to: #772276;

  /* Others */
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Kozuka Mincho Pro",
    "Noto Serif JP", "IPAexMincho", serif;
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
  --safe-right: env(safe-area-inset-right);
  --header-h: 68px;

  /* Typography scale (named) */
  --size-xxs: 1.2rem;
  --size-sm: clamp(1.4rem, 0.6vw + 1.28rem, 1.6rem);
  --size-md: clamp(1.6rem, 0.6vw + 1.48rem, 1.8rem);
  --size-lg: clamp(2rem, 0.9vw + 1.82rem, 2.4rem);
  --size-xl: clamp(2.4rem, 1.2vw + 2.16rem, 3.2rem);
  --size-xxl: clamp(3.2rem, 1.6vw + 2.88rem, 4rem);
}

html {
  height: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic",
    "Meiryo", sans-serif;
  font-size: 10px !important;
  line-height: 2;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
}

.site-header {
  flex: 0 0 auto;
}
.site_main {
  flex: 1 0 auto;
}
.footer,
.page_footer {
  flex: 0 0 auto;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  background: transparent;
}

picture {
  display: block;
  line-height: 0;
  background: transparent;
}

a {
  color: var(--color-text);
  font-weight: normal;
  text-decoration: none;
  transition: opacity 0.15s ease-out;
}
a:hover {
  opacity: 0.9;
}

.youtube iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
}

/* Container */
.inner {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 2rem;
}
.inner.width {
  max-width: 100%;
}

/* Visibility helpers */
@media (min-width: 992px) {
  .sp {
    display: none !important;
  }
}
@media (max-width: 991.9px) {
  .pc {
    display: none !important;
  }
}

p,
ul,
ol{
  font-size: var(--size-sm);
}
.site-header,
.page_header,
.page_footer {
  font-size: var(--size-sm);
}
@media (min-width: 992px) {
  p,
  ul,
  ol{
    font-size: var(--size-md);
  }
  .site-header,
  .page_header,
  .page_footer {
    font-size: var(--size-md);
  }
}

/* Typographic utilities */
.text {
  color: var(--color-text);
  font-size: var(--size-sm);
  font-weight: normal;
}
.lead {
  color: var(--color-text);
  font-size: var(--size-sm);
  font-weight: bold;
}
.copy {
  color: var(--color-text);
  font-size: var(--size-xl);
  font-weight: bold;
}
.sec_title {
  color: var(--color-text);
  font-size: var(--size-md);
  font-weight: bold;
}
.page_title {
  color: var(--color-text);
  font-size: var(--size-xl);
  font-weight: bold;
}

@media (min-width: 992px) {
  .text {
    font-size: var(--size-sm);
  }
  .lead {
    font-size: var(--size-md);
  }
  .copy {
    font-size: var(--size-xxl);
  }
  .sec_title {
    font-size: var(--size-lg);
  }
  .page_title {
    font-size: var(--size-xxl);
  }
}

/* ============================================================
   Lists
   ============================================================ */
.c-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ベース：直下のアイテムだけ */
.c-list > .c-list__item {
  font-size: var(--size-sm);
}

/* ・ の箇条書き（直下のみ） */
.c-list--dot > .c-list__item {
  position: relative;
  padding-left: 1.6rem;
}

.c-list--dot > .c-list__item::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

/* ①②③... 丸数字 */
@counter-style c-list-circled {
  system: fixed;
  symbols:
    "①" "②" "③" "④" "⑤"
    "⑥" "⑦" "⑧" "⑨" "⑩"
    "⑪" "⑫" "⑬" "⑭" "⑮"
    "⑯" "⑰" "⑱" "⑲" "⑳";
  suffix: " ";
}

/* 丸数字は list-style を使うので、
   そのリストの直下の li だけが対象になる */
.c-list--circled {
  padding-left: 2.2rem;
  list-style: c-list-circled;
}

/* 1) 2) 3) ... 番号（直下のみカウント） */
.c-list--numbered {
  counter-reset: list-numbered;
}

.c-list--numbered > .c-list__item {
  position: relative;
  padding-left: 2.2rem;
}

.c-list--numbered > .c-list__item::before {
  counter-increment: list-numbered;
  content: counter(list-numbered) ") ";
  position: absolute;
  left: 0;
  top: 0;
}

/* Anchor offset for sticky header */
[id] {
  scroll-margin-top: calc(var(--header-h) + 20px);
}

/* PageTop */
.js-backToTop {
  position: fixed;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 1000;
  background: var(--color-bg);
  color: var(--color-text);
  font-weight: bold;
  padding: 0.6em 0.9em;
  border: 0.1rem solid var(--color-border);
  border-radius: 999rem;
  box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.js-backToTop.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   1) Header
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-bg);
  color: var(--color-text);
  border-bottom: 0.1rem solid rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease;
}
html.is-scrolled .site-header {
  box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.08);
}

.header-inner {
  position: relative;
  height: var(--header-h);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5.4rem;
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  column-gap: 1rem;
  min-width: 0;
}
.site-logo {
  display: block;
  height: 4rem;
  width: auto;
}

.site-title {
  position: relative;
  background: linear-gradient(
    0,
    var(--grad-purple-from) 65.96%, 
    var(--grad-purple-to) 99.96%
  );
  color: transparent;
  font-size: var(--size-lg);
  font-weight: bold;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50vw;
}

/* PC Navigation */
.global-nav--pc {
  display: none;
}
.global-nav--pc .menu {
  display: flex;
  gap: 4rem;
  list-style: none;
}
.global-nav--pc .menu a {
  font-weight: bold;
  padding: 1.2rem 0.2rem;
}
.global-nav--pc .menu a:hover,
.global-nav--pc .menu a:focus {
  opacity: 0.75;
}

@media (min-width: 992px) {
  .global-nav--pc {
    display: block;
  }
}

/* Header actions (PC only) */
.header-actions {
  display: none;
}
.header-actions .button-login {
  background: linear-gradient(
    90deg,
    var(--grad-purple-from),
    var(--grad-purple-to)
  );
  color: var(--color-white);
  font-weight: bold;
  padding: 0.6rem 1.2rem;
  border-radius: 0.4rem;
}
.header-actions .icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  color: var(--color-muted);
  border-radius: 50%;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.header-actions .icon-link:hover {
  background: #f4f4f4;
  color: var(--color-accent-solid);
}
@media (min-width: 992px) {
  .header-actions {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-left: auto;
  }
}

/* Mask icons */
.icon {
  background: currentColor;
  width: 100%;
  height: 100%;
  display: block;
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
}
.icon--favorite {
  -webkit-mask-image: url("/assets/img/common/icon-favorite.svg");
  mask-image: url("/assets/img/common/icon-favorite.svg");
}
.icon--user {
  -webkit-mask-image: url("/assets/img/common/icon-user.svg");
  mask-image: url("/assets/img/common/icon-user.svg");
}
.icon--search{
  -webkit-mask-image: url("/assets/img/common/icon-search.svg");
  mask-image: url("/assets/img/common/icon-search.svg");
}



/* Hamburger (SP) */
.nav-toggle {
  position: relative;
  z-index: 1002;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 1;
}
.nav-toggle .bars {
  position: relative;
  background: currentColor;
  width: 24px;
  height: 2px;
  transition: transform 0.2s ease, background 0.2s ease;
}
.nav-toggle .bars::before,
.nav-toggle .bars::after {
  position: absolute;
  left: 0;
  background: currentColor;
  content: "";
  width: 24px;
  height: 2px;
  transition: transform 0.2s ease;
}
.nav-toggle .bars::before {
  transform: translateY(-7px);
}
.nav-toggle .bars::after {
  transform: translateY(7px);
}

.site-header.menu-open .nav-toggle .bars {
  background: transparent;
}
.site-header.menu-open .nav-toggle .bars::before {
  transform: translateY(0) rotate(45deg);
}
.site-header.menu-open .nav-toggle .bars::after {
  transform: translateY(0) rotate(-45deg);
}

/* Drawer (SP) */
.global-nav--drawer {
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  z-index: 1001;
  background: var(--color-bg);
  color: var(--color-text);
  font-weight: bold;
  padding: 2rem 2rem 2.4rem;
  width: min(86vw, 36rem);
  transform: translateX(100%);
  border-left: 0.1rem solid rgba(0, 0, 0, 0.06);
  overflow: auto;
  transition: transform 0.25s ease;
}
.site-header.menu-open .global-nav--drawer {
  transform: translateX(0);
}

.global-nav--drawer .menu {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  list-style: none;
}
.global-nav--drawer .menu a {
  font-weight: bold;
  padding: 1.2rem 0;
}

/* Overlay */
.nav-overlay {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.28);
  display: none;
}
.site-header.menu-open ~ .nav-overlay {
  display: block;
}

@media (min-width: 992px) {
  .nav-toggle {
    display: none;
  }
  .global-nav--drawer {
    display: none;
  }
}

/* Scroll lock */
html.is-locked,
body.is-locked {
  overflow: hidden;
}

/* ============================================================
   2) Footer
   ============================================================ */
.page_footer {
  position: relative;
  background: var(--color-footer-bg);
  color: var(--color-white);
  margin-top:auto;
  padding: 3.2rem 0 1rem;
}
.page_footer a {
  color: var(--color-white);
  text-decoration: none;
}
.page_footer a:hover {
  text-decoration: none;
}
.page_footer .footer-menu a,
.page_footer .footer-bottom a {
  position: relative;
  display: inline-block;
  padding-bottom: 0.1rem;
  transition: color 0.2s ease;
}

.page_footer .footer-menu a::after,
.page_footer .footer-bottom a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.1rem;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease-out;
}

.page_footer .footer-menu a:hover,
.page_footer .footer-menu a:focus-visible,
.page_footer .footer-bottom a:hover,
.page_footer .footer-bottom a:focus-visible {
  color: var(--color-white);
}

.page_footer .footer-menu a:hover::after,
.page_footer .footer-menu a:focus-visible::after,
.page_footer .footer-bottom a:hover::after,
.page_footer .footer-bottom a:focus-visible::after {
  transform: scaleX(1);
}

.page_footer .footer-cta {
  min-width: 275px;
  display: grid;
  align-items: center;
}

.page_footer .footer-cta .button {
  background: var(--color-white);
  color: var(--color-text);
  font-weight: bold;
  text-align: center;
  padding: 0.8rem 1.8rem;
  border: 0.1rem solid transparent;
  display: inline-grid;
  place-items: center;
  cursor: pointer;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.12s ease;
}

.page_footer .footer-cta .button:hover,
.page_footer .footer-cta .button:focus-visible {
  background: linear-gradient(
    90deg,
    var(--grad-purple-from),
    var(--grad-purple-to)
  );
  color: var(--color-white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
  transform: translateY(-1px);
}

.page_footer .footer-cta .button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Top area */
.page_footer .footer_menu {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 2.4rem 3.2rem;
}

/* Left: 2-col nav */
.page_footer .footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(16rem, 1fr));
  gap: 1.6rem 2.4rem;
}

.page_footer .footer-menu {
  font-size:var(--size-sm);
  list-style: none;
}
.page_footer .footer-menu li {
  line-height: 1.9;
}

.page_footer .footer-menu .menu-title {
  color: var(--color-white);
  font-weight: bold;
  margin: 0 0 0.6rem;
}

/* Center CTA */
.page_footer .footer-cta{
  min-width:275px;
  display: grid;
  align-items: center;
}
.page_footer .footer-cta .button {
  background: var(--color-white);
  color: var(--color-text);
  font-weight:bold;
  text-align:center;
  padding: 0.8rem 1.8rem;
}

/* Right: ad */
.page_footer .footer-ad .ad-box {
  background: var(--color-muted);
  color: #2d2d2d;
  font-weight: bold;
  width: 100%;
  min-height: 12rem;
  display: grid;
  place-items: center;
}

/* Bottom */
.page_footer .footer-bottom {
  margin: 0.8rem 0 0;
}

.page_footer .copyright{
  color: #cfcfcf;
  font-size: var(--size-xxs);
  text-align: center;
}

/* Footer layout on PC */
@media (min-width: 992px) {
  .page_footer .footer_menu {
    grid-template-columns: 1fr auto 36rem;
  }
}


/* ============================================================
   Global stock search bar
   ============================================================ */
.stock_search {
  position: relative;
  background: var(--color-bg);
  color: var(--color-text);
  padding:1.2rem 2rem;
  border-bottom: 1px solid var(--color-border);
}

.stock_search_form {
  position: relative;
}

.stock_search_row {
  display: grid;
  grid-template-columns: 80px 1fr;
}

/* Inputs */
.stock_search_select select{
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--size-sm);
  padding: 1.2rem;
  border: 1px solid var(--color-border);
  width: 100%;
  height:60px;
  outline: none; 

}
.stock_search_input {
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--size-sm);
  padding: 1.2rem;
  border: 1px solid var(--color-border);
  width: 100%;
  height:60px;
  outline: none; 
}

/* Keep focus visible without overflow */
.stock_search_select select:focus-visible,
.stock_search_input:focus-visible {
  border-color: var(--grad-purple-from);
  box-shadow: 0 0 0 2px rgba(90, 43, 207, 0.2);
}

/* Layout: input + button */
.stock_search_box {
  display: grid;
  grid-template-columns: 1fr 60px;
  overflow: hidden; /* clip any inner focus ring spill */
}

/* Button */
.stock_search_btn {
  background: linear-gradient(90deg, var(--grad-purple-from), var(--grad-purple-to));
  color: var(--color-white);
  padding: 0.8rem;
  border: 1px solid var(--grad-purple-from);
  cursor: pointer;
}

.visually_hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}


/* ≥768 */
@media (min-width: 768px) {
  .stock_search_row {
    grid-template-columns: 180px 1fr;
    align-items: center;
  }
}


/* ============================
   Simple Membership — Login (override)
   ============================ */

/* モーダル風の余白と幅（枠に近い感じを解消） */
.login > .inner{
  min-height: 70svh;
  padding: clamp(2rem, 4vw, 4rem);
  display: grid;
  place-items: center;
}

.swpm-login-form-inner,
.swpm-login-widget-logged{
  background: var(--color-bg);
  color: var(--color-text);
  width: min(720px, 92vw);
  padding: clamp(2.4rem, 3.2vw, 3.6rem) clamp(2.4rem, 3.2vw, 4rem);
  border: 0.1rem solid var(--color-border);
  border-radius: 2.0rem;
  box-shadow: 0 1.6rem 3.2rem rgba(0,0,0,.10);
}

/* タイトル（「メンバーログイン」）をセンター・やや大きく */
.swpm-login-form-inner h2,
.swpm-login-form-inner .swpm-login-form-title{
  margin: 0 0 1.2rem;
  text-align: center;
  font-size: var(--size-lg);
  font-weight: bold;
}

/* ラベルと入力の間隔を拡大（枠線との近さを解消） */
.swpm-username-label .swpm-label,
.swpm-password-label .swpm-label{
  display: block;
  color: var(--color-muted);
  font-size: var(--size-xxs);
  margin: 0.8rem 0 0.6rem;
}

/* 入力ボックス：上下のパディングと行間を増やして枠線から離す */
.swpm-text-field{
  color: var(--color-text);
  font-size: var(--size-sm);
  padding: 1.2rem 0.6rem;             /* ← 余白UP */
  margin: 0 0 1.2rem;                 /* ← 下に間隔 */
  width: 100%;
  border: 0.1rem solid transparent;   /* 外枠は透明 */
  border-bottom: 0.1rem solid var(--color-border);
  background: var(--color-bg);
  outline: none;
  line-height: 1.6;
}
.swpm-text-field:focus-visible{
  border-color: var(--grad-purple-from);
  box-shadow: 0 0 0 2px rgba(90,43,207,.15);
}

/* 「ログイン情報を保存」 */
.swpm-remember-me{
  margin-top: .6rem;
  gap: .6rem;
  color: var(--color-text);
  font-size: var(--size-xxs);
}

/* ログインボタン（1枚目風のグラデ＋丸み） */
.swpm-login-submit .swpm-login-form-submit{
  background: linear-gradient(90deg, var(--grad-purple-from), var(--grad-purple-to));
  color: var(--color-white);
  font-size:var(--size-sm);
  font-weight: bold;
  width: 100%;
  padding: 1.2rem 1.8rem;
  border: none;
  border-radius: 999rem;
  cursor: pointer;
  box-shadow: 0 .6rem 1.2rem rgba(90,43,207,.18);
  transition: transform .06s ease, opacity .2s ease;
}
.swpm-login-submit .swpm-login-form-submit:hover{ transform: translateY(-1px); }
.swpm-login-submit .swpm-login-form-submit:active{ transform: translateY(0); opacity:.92; }

/* ---------- “メニュー内の項目”を２枚目と同じ配置に ---------- */
/* パスワード再発行リンク */
.swpm-forgot-pass-link{
  margin: 1.0rem 0 0;
}
.swpm-login-form-pw-reset-link{
  color: var(--grad-purple-from);
  text-decoration: underline;
  font-size: var(--size-xxs);
}

/* 仕切り線＋「ご登録がお済みでない方」行をつくる（2枚目の見た目） */
.swpm-join-us-link{
  position: relative;
  margin: 1.6rem 0 0;
  padding-top: 1.2rem;
}
.swpm-join-us-link::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--color-border);
  opacity: .6;
}
.swpm-join-us-link .swpm-login-form-register-text{
  display: block;
  text-align: center;
  color: var(--color-text);
  font-size: var(--size-xxs);
  margin-bottom: .8rem;
}

/* 「アカウントを作成」＝白地のアウトライン大ボタン（2枚目） */
.swpm-login-form-register-link{
  display: inline-block;
  width: 100%;
  text-align: center;
  background: var(--color-white);
  color: var(--color-text);
  font-weight: bold;
  padding: 1.0rem 1.6rem;
  border: 0.2rem solid var(--color-border);
  border-radius: 999rem;
  text-decoration: none;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.swpm-login-form-register-link:hover{
  background: #f9fafb;
  box-shadow: 0 .2rem .6rem rgba(0,0,0,.05);
}

/* 「会員について」等の補助リンク（2枚目左下のトーンに） */
.swpm-login-action-msg .swpm-login-widget-action-msg{
  font-size: var(--size-sm);
  color:#FF0000;

/* PCでの横幅・グリッド最適化 */
@media (min-width: 561px){
  .swpm-login-form-inner{ border-radius: 2.4rem; }
}

/* ============================================================
   Page common
   ============================================================ */
.page_header {
  position: relative;
  color: var(--color-text);
  font-weight: bold;
  padding: 3.2rem 0;
}