@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500;600;700&family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap');

/* =============================================================
   HEISHI BEADS COLLECTION 特設ページ（親ページ）
   ※ 新規セクションのスタイルは .heishi 配下にスコープ
   ※ STORE / SHARE / PAGE TOP は提供CSSをそのまま使用
   ============================================================= */

html {
  scroll-behavior: smooth;
}

.heishi {
  --c-text: #333;
  --c-head: #555;
  --c-sub:  #777;
  --c-line: #ccc;
  --c-btn:  #8c8c8c;
  --w-content: 500px;
  --w-item: 600px;
  color: var(--c-text);
  letter-spacing: 0.1em;
}

.heishi img {
  display: block;
  width: 100%;
  height: auto;
}

.heishi p {
  line-height: 1.9;
  font-size: 13px;
}

/* アンカースクロール位置の調整 */
.heishi .anclnk {
  display: block;
  padding-top: 30px;
  margin-top: -30px;
}

/* -------------------------------------------------------------
   共通：セクション見出し（英字＋和文サブ）
   ------------------------------------------------------------- */
.sec-head {
  text-align: center;
  margin-bottom: 55px;
}
.sec-head__en {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--c-head);
}
.sec-head__ja {
  margin-top: 18px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--c-sub);
}

/* -------------------------------------------------------------
   共通：もっと見る／すべてのアイテムを見る ボタン
   ------------------------------------------------------------- */
.heishi .more-btn {
  position: relative;
  display: block;
  width: 100%;
  max-width: var(--w-content);
  margin: 10px auto 0;
  padding: 18px 30px;
  background-color: var(--c-btn);
  border-radius: 40px;
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.heishi .more-btn:link,
.heishi .more-btn:visited,
.heishi .more-btn:hover,
.heishi .more-btn:active {
  color: #fff;
}
.heishi .more-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 30px;
  width: 7px;
  height: 7px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}
.heishi .more-btn:hover {
  opacity: 0.8;
}

/* -------------------------------------------------------------
   ヒーロー
   ------------------------------------------------------------- */
.hero {
  width: 100%;
  margin: 0 auto;
}
.hero__ttl {
  margin: 55px auto 0;
  text-align: center;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700;
  font-size: 32px;
  letter-spacing: 0.12em;
  color: var(--c-head);
  line-height: 1;
}
.hero__ttl span {
  display: block;
  margin-top: 22px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.22em;
}

/* -------------------------------------------------------------
   イントロ
   ------------------------------------------------------------- */
.intro {
  max-width: var(--w-content);
  margin: 100px auto 0;
  padding: 0 20px;
}
.intro__img {
  margin: 0 auto 60px;
}
.intro__catch {
  font-family: 'Josefin Sans', sans-serif;  
  margin-bottom: 35px;
  text-align: center;
  font-size: 12px!important;
  font-weight: 700;
  line-height: 1.9;
  color: var(--c-head);
  letter-spacing: 0.12em;
}
.intro__catch span{
  display: block;
  font-size: 24px;
}
.intro__text {
  text-align: center;  
  margin-bottom: 18px;
}
.intro .more-btn {
  margin-top: 50px;
}

/* -------------------------------------------------------------
   SERIES（シリーズ一覧）
   ------------------------------------------------------------- */
.series {
  max-width: var(--w-content);
  margin: 120px auto 0;
}
.series__list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
.series__item {
  width: 50%;
  padding: 0 2.5%;
  margin-bottom: 9%;
}
.series__link {
  display: block;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.series__link:hover {
  opacity: 0.8;
}
.series__name {
  margin-top: 18px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--c-head);
}

/* -------------------------------------------------------------
   ITEM LINEUP（アイテム一覧）
   ------------------------------------------------------------- */
.lineup {
  margin: 120px auto 0;
}
.lineup__list {
  max-width: var(--w-item);
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
}
.lineup__item {
  width: 50%;
  padding: 0 4%;
  margin-bottom: 8%;
}
.lineup__link {
  display: block;
  text-decoration: none;
  color: var(--c-text);
  transition: opacity 0.3s ease;
}
.lineup__link:hover {
  opacity: 0.8;
}
.lineup__name {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
}
.lineup__price {
  margin-top: 6px;
  font-size: 13px;
  letter-spacing: 0.05em;
}

/* -------------------------------------------------------------
   全幅イメージ
   ------------------------------------------------------------- */
.full-img {
  width: 100%;
  margin: 40px auto;
}

/* -------------------------------------------------------------
   ABOUT HEISHI（ヒーシーについて）
   ------------------------------------------------------------- */
.about {
  max-width: var(--w-content);
  margin: 120px auto 0;
  padding: 0 20px;
}
.about__text {
  text-align: center;
  margin-bottom: 18px;
}
.about__img {
  margin: 50px auto 0;
}

/* -------------------------------------------------------------
   STYLING（スタイリング / LEEEP連携）
   ------------------------------------------------------------- */
.styling {
  max-width: 1100px;
  margin: 120px auto 60px;
  padding: 0 10px;
}
/* LEEEP ウィジェット設置枠 */
.styling__leeep {
  margin: 0 auto;
}
.styling .more-btn {
  margin-top: 40px;
}

/* =============================================================
   ▼▼▼ STORE / SHARE / PAGE TOP（提供CSSをそのまま使用） ▼▼▼
   ============================================================= */
.shoplistbx{
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  padding: 100px 10px;
  text-align: center;
  border-top: 1px solid #ccc;
}
.shoplistbx h4 {
  font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
  line-height: 1;
  padding: 20px 20px 0 20px;
}
.tab-content {
  width: 100%;
  margin-top: 3%;
  display: none;
}
.tab-switch:checked+.tab-label+.tab-content {
  display: block;
}
.tab-switch {
  display: none;
}

/*アコーディオン全体*/
.accordion-area {
  list-style: none;
  width: 96%;
  max-width: 500px;
  margin: 0 auto;
}
.accordion-area li {
  margin: 10px 0;
}
.accordion-area section {
  border: 1px solid #ccc;
}
.title {
  position: relative;
  cursor: pointer;
  font-size: 14px;
  font-weight:600;
  padding: 3% 3% 3% 5%;
  transition: all .5s ease;
  text-align: left;
  border-bottom: 1px solid;
}
.title::before, .title::after {
  position: absolute;
  content: '';
  width: 15px;
  height: 1px;
  background-color: #333;
}
.title::before {
  top: 48%;
  right: 5%;
  transform: rotate(0deg);
}
.title::after {
  top: 48%;
  right: 5%;
  transform: rotate(90deg);
}
.title.close::after {
  display: none;
}
.box {
  display: none;
  padding: 3% 3% 3% 5%;
}
.box dt,
.box dd{
  min-height: 40px;
  padding: 4% 0;
  border-bottom: 1px solid #f0f0f0;
}
.box dd a{
  font-size: 12px;	
  text-decoration: none;
  color: #000;
  display: block;
  position: relative;
}
.box dd a:after{
  content: "";
  position: absolute;
  display: inline-block;
  width: 4px;
  height: 4px;
  top: 44%;
  right: 3%;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.snsbx {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  border-top: 1px solid #ccc;
  padding: 100px 0;
}
.snsbx h4 {
  font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
  line-height: 1;
  padding: 20px 20px 0 20px;
}
.snsbx ul {
  width: 30%;
  margin: 20px auto 0;
  display: flex;
  flex-wrap: wrap;
}
.snsbx ul li {
  width: 32%;
  padding: 6%;
  margin-bottom: 20px;
}
.snsbx ul li a {
  display: block;
  padding: 1.5% 2.5% 1.5% 1.5%;
}
.snsbx ul li:hover {
  opacity: 0.8;
}

.tpscroll {
  display: block;
  width: 120px;
  margin: 0 auto;
  text-align: center;
}
.tpscroll::before {
  display: block;
  content: '';
  border-bottom: solid 1px #000;
  border-left: solid 1px #000;
  width: 14px;
  height: 14px;
  transform: rotate(135deg);
  margin: 0 auto 10px;
}
.tpscroll:hover::before {
  border-bottom: solid 1px #00A5CB;
  border-left: solid 1px #00A5CB;
}
#page_top {
  width: 40px;
  height: 40px;
  position: fixed;
  right: 10px;
  bottom: 10px;
  background: #AAA;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: all 0.3s ease;
  z-index: 99;
}
#page_top::before {
  content: '';
  border-bottom: solid 2px #FFF;
  border-left: solid 2px #FFF;
  width: 12px;
  height: 12px;
  transform: rotate(135deg);
  position: absolute;
  right: 14px;
  bottom: 12px;
}

#page_top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.page_top_btn:hover {
  background: rgb(255, 0, 0, 0.8);
  color: rgb(255, 255, 255, 0.8);
}

/* =============================================================
   ▲▲▲ STORE / SHARE / PAGE TOP（提供CSS） ▲▲▲
   ============================================================= */

/* -------------------------------------------------------------
   スクロールアニメーション（提供CSS）
   ------------------------------------------------------------- */
.animation {
  opacity: 0;
  visibility: hidden;
  transition: 1s;
  transform: translateY(30px);
}
.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* PC/SP 改行切り替え */
.br-pc { display: none; }
.br-sp { display: block; }

/* ABOUT キャプション等：スマホビューのみ改行（PC・全幅では非表示） */
.heishi .br-sp-only { display: none; }

/* =============================================================
   PC（835px〜）：画像幅を 500px に固定して中央寄せ
   ============================================================= */
@media screen and (min-width: 835px) {
  /* グリッド内・SNSアイコン等を崩さないよう上限値で制御 */
  .hero{
    margin: 110px auto 0!important;
  }
  .heishi img {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
  /* ヒーローのみ横幅1100pxで表示（汎用の500px上限を上書き） */
  .hero__img {
    width: 1100px;
    max-width: 100%;
    margin: 0 auto;
  }
  .heishi .hero__img img {
    max-width: 1100px;
    width: 100%;
  }
}

/* =============================================================
   レスポンシブ（〜834px）
   ============================================================= */
@media screen and (max-width: 834px) {
  .heishi p {
    font-size: 12px;
  }
  .hero__ttl {
    font-size: 26px;
    margin-top: 40px;
  }
  .hero__ttl span {
    font-size: 13px;
  }
  .sec-head__en {
    font-size: 20px;
  }
  .sec-head__ja {
    font-size: 12px;
  }
  .intro,
  .about {
    margin-top: 80px;
  }
  .intro__catch span{
    font-size: 20px;
  }  
  .series,
  .lineup,
  .styling {
    margin-top: 90px;
  }
  .intro__catch {
    font-size: 14px;
  }
  .lineup__name {
    font-size: 11px;
  }
  .lineup__price {
    font-size: 12px;
  }
  .series__name {
    font-size: 13px;
  }
  .heishi .more-btn {
    width: 90%;
    font-size: 12px;
  }
  /* STORE / PAGE TOP（提供CSS） */
  .shoplistbx {
    padding: 100px 10%;
  }
  .tpscroll {
    margin: 0 auto 100px;
  }
  .br-pc { display: block; }
  .br-sp { display: none; }
  /* スマホビューのみ改行を有効化 */
  .heishi .br-sp-only { display: block; }
}