/* ========================================================================
   Common Styles
======================================================================== */

/* ベース
---------------------------------------------------------*/
html {width: 100%; height: 100%; font-size: calc(100vw / 37.5);}
body {font-family: var(--font-main); font-weight: var(--fw-regular); font-size: 1.4rem; color: var(--color-text); background: var(--color-white); width: 100%; line-height: 1.5;}
a {color: var(--color-text); transition: var(--transition);}
a:hover {opacity: 0.7;}
a img, button {transition: var(--transition);}
a img:hover, button:hover {opacity: 0.7;}

/*  レスポンシブ用
-------------------------------------------------------------*/
/*  pcのみ  */
.sp-only {display: none !important;}
.pc-only {display: block !important;}

/*  spのみ  */
@media screen and (max-width: 999px) {
  .pc-only {display: none !important;}
  .sp-only {display: block !important;}
}

/* ユーティリティ
---------------------------------------------------------*/
.inner {width: 100%; padding: 0 var(--side-padding);}

/* セクション見出し共通
---------------------------------------------------------*/
.sec-ttl {font-size: 2.8rem; font-weight: 500; color: var(--color-primary); line-height: 1; text-align: center;}

/* ボタン共通
---------------------------------------------------------*/
.btn-more {display: flex; align-items: center; justify-content: center; gap: 0.8rem; width: 22.8rem; height: 5rem; background: var(--color-primary); color: var(--color-white); font-size: 1.4rem; font-weight: var(--fw-bold); border-radius: var(--radius-pill); margin: 0 auto; position: relative;}
.btn-more img {width: 2rem; height: 2rem; position: absolute; top: 0; bottom: 0; margin: auto; right: 1.5rem;}
.btn-outline {display: flex; align-items: center; justify-content: center; gap: 0.8rem; height: 5rem; background: var(--color-white); color: var(--color-text); font-size: 1.4rem; font-weight: var(--fw-bold); border: 0.1rem solid var(--color-primary); border-radius: var(--radius-pill); position: relative;}
.btn-outline img {width: 2rem; height: 2rem; position: absolute; top: 0; bottom: 0; margin: auto; right: 1.5rem;}

/* スライダーページネーション共通
---------------------------------------------------------*/
.swiper-pagination {position: static !important; margin-top: 1.2rem;}

/* 商品カード共通
---------------------------------------------------------*/
.product-card {display: flex; flex-direction: column;}
.product-card .product-img {width: 100%; border-radius: var(--radius-sm); overflow: hidden;}
.product-card .product-img img {width: 100%; height: 100%; object-fit: cover;}
.product-card .product-name {font-size: 1.4rem; font-weight: var(--fw-bold); line-height: 1.4; margin-top: 1.5rem;}
.product-card .product-price {font-size: 1.2rem; font-weight: var(--fw-regular); margin-top: 0.5rem;}

.swiper-button-prev, .swiper-button-next {width: 3rem; height: 3rem; top: 46%; transform: translateY(-50%); margin-top: 0; bottom: auto; padding: 0; border: 0; background: none;}
.swiper-button-prev {left: 2rem;}
.swiper-button-next {right: 2rem;}
.swiper-button-prev::after, .swiper-button-next::after {display: none;}
.swiper-button-prev img, .swiper-button-next img {width: 3rem; height: 3rem;}

.swiper-pagination {bottom: 0; margin-top: 2rem; display: flex; justify-content: center; align-items: center; gap: 1.5rem;}
.swiper-pagination-bullet {width: 1.2rem; height: 1.2rem; background: var(--color-gray); opacity: 1;}
.swiper-pagination-bullet-active {background: var(--color-primary);}


/* ========================================================================
   SP メニュー
======================================================================== */
.sp-menu {position: fixed; top: 12.5rem; left: 0; width: 100%; height: calc(100% - 12.5rem); z-index: 101; background: var(--color-white); overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(100%); transition: transform 0.3s ease, visibility 0.3s ease; visibility: hidden;}
.sp-menu.is-open {transform: translateX(0); visibility: visible;}
.sp-menu-nav {padding: 3rem 2rem;}
.sp-menu-item {}
.sp-menu-item-btn, .sp-menu-item-link {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 5.5rem; background: none; border: 0; border-bottom: 0.1rem solid var(--color-primary); padding: 0; cursor: pointer; text-align: left; color: var(--color-text); font-family: var(--font-main);}
.sp-menu-item-text {font-size: 2rem; font-weight: var(--fw-bold); color: var(--color-primary); line-height: 1;}
.sp-menu-item-arrow {display: block; flex-shrink: 0; width: 1rem; height: 1rem; border-right: 0.2rem solid var(--color-primary); border-bottom: 0.2rem solid var(--color-primary); transform: rotate(45deg); transition: transform 0.3s ease; margin-bottom: 0.4rem;}
.sp-menu-item-arrow.link {transform: rotate(310deg);}
.sp-menu-item.is-open .sp-menu-item-arrow {transform: rotate(-135deg); margin-bottom: -0.4rem;}
.sp-menu-sub {max-height: 0; overflow: hidden; transition: max-height 0.3s ease; list-style: none; padding: 0;}
.sp-menu-item.is-open .sp-menu-sub {max-height: 40rem; padding-top: 1.1rem; padding-bottom: 1.5rem;}
.sp-menu-sub li {height: 3.9rem; display: flex; align-items: center;}
.sp-menu-sub li a {font-size: 1.4rem; font-weight: var(--fw-regular); color: var(--color-text); padding-left: 0rem;}
.sp-menu-footer {display: flex; flex-direction: column; gap: 3rem; padding: 4rem 2rem;}
.sp-menu-footer a {font-size: 1.4rem; font-weight: var(--fw-regular); color: var(--color-text);}

/* ========================================================================
   ヘッダー
======================================================================== */
.site-header {position: fixed; top: 0; z-index: 100; width: 100%;}
.header-spacer {height: 17.5rem;}
.header-notice {background: var(--color-primary); height: 3rem; display: flex; align-items: center; justify-content: center; padding: 0 1.9rem; overflow: hidden;}
.header-notice p {font-size: 1.2rem; font-weight: var(--fw-medium); color: var(--color-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.header-main {background: var(--color-white); height: 9.5rem; display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; position: relative;}
.header-main .header-menu-btn {display: flex; flex-direction: column; gap: 1rem; width: 3rem; cursor: pointer; background: none; border: none; padding: 0;}
.header-main .header-menu-btn span {display: block; width: 3rem; height: 0.3rem; background: var(--color-primary); border-radius: 0.2rem; transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center;}
.header-menu-btn.is-active span:nth-child(1) {transform: translateY(1.3rem) rotate(45deg);}
.header-menu-btn.is-active span:nth-child(2) {opacity: 0;}
.header-menu-btn.is-active span:nth-child(3) {transform: translateY(-1.3rem) rotate(-45deg);}
.header-main .header-logo {display: block; position: absolute; left: 0; right: 0; margin: auto; width: 18.9rem; height: 5.3rem; }
.header-main .header-logo img {width: 18.9rem; height: 5.3rem; object-fit: contain;}
.header-main .header-icons {display: flex; align-items: center; gap: 1.4rem;}
.header-main .header-icons a, .header-main .header-icons button {display: flex; align-items: center; background: none; border: none; padding: 0; cursor: pointer;}
.header-main .header-icons .icon-search img {width: 2.3rem; height: 2.3rem;}
.header-main .header-icons .icon-cart img {width: 2rem; height: 2.2rem;}
.header-nav-pc {display: none;}
.header-nav {background: var(--color-primary-light); height: 5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;}
.header-nav::-webkit-scrollbar {display: none;}
.header-nav ul {display: flex; align-items: center; gap: 1rem; padding: 0 1.2rem; height: 100%; min-width: max-content;}
.header-nav li a {display: flex; align-items: center; justify-content: center; height: 2.5rem; padding: 0 1.3rem; background: var(--color-white); border-radius: 1.25rem; font-size: 1.2rem; font-weight: var(--fw-medium); color: var(--color-primary); white-space: nowrap;}

/* 検索フォーム（ドロップダウン） */
.header-search {position: absolute; top: 100%; left: 0; width: 100%; background: var(--color-white); border-top: 0.1rem solid var(--color-gray); box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.1); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; z-index: 99;}
.header-search.is-open {opacity: 1; visibility: visible;}
.header-search-form {display: flex; align-items: center; gap: 1rem; padding: 1.5rem 2rem;}
.header-search-input {flex: 1; height: 4rem; border: 0.1rem solid var(--color-gray); border-radius: var(--radius-pill); padding: 0 1.5rem; font-size: 1.4rem; font-family: var(--font-main); outline: none; color: var(--color-text);}
.header-search-submit {width: 4rem; height: 4rem; background: var(--color-primary); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;}
.header-search-submit img {width: 1.8rem; height: 1.8rem; filter: brightness(0) invert(1);}
.pc-nav-btn {display: flex; align-items: center; gap: 1.6rem; background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-main);}
.pc-nav-arrow {display: block; width: 0.8rem; height: 0.8rem; border-right: 0.2rem solid var(--color-primary); border-bottom: 0.2rem solid var(--color-primary); transform: rotate(45deg); transition: transform 0.3s ease; flex-shrink: 0; margin-bottom: 0.2rem;}
.pc-nav-btn.is-active .pc-nav-arrow {transform: rotate(-135deg); margin-bottom: -0.2rem;}
.pc-dropdown {display: none;}

@media (min-width: 768px) {
  .header-main .header-logo {width: 189px; height: 53px; margin: auto 0;}
  .header-main .header-logo img {width: 189px; height: 53px;}
  .header-notice {height: 30px; justify-content: center;}
  .header-notice p {font-size: 12px; text-align: center;}
  .header-main {height: 95px; padding: 0 30px 0 12px;}
  .header-main .header-icons {gap: 14px;}
  .header-main .header-icons .icon-search img {width: 28px; height: 28px;}
  .header-main .header-icons .icon-cart img {width: 26px; height: 30px;}
  .pc-nav-btn {gap: 16px;}
  .pc-nav-arrow {width: 8px; height: 8px; border-right: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary); margin-bottom: 2px;}
  .pc-nav-btn.is-active .pc-nav-arrow {margin-bottom: -2px;}
  .header-search {border-top: 1px solid var(--color-gray); box-shadow: 0 4px 12px rgba(0,0,0,0.1);}
  .header-search-form {gap: 10px; padding: 15px 20px;}
  .header-search-input {height: 40px; border: 1px solid var(--color-gray); border-radius: 25px; padding: 0 15px; font-size: 14px;}
  .header-search-submit {width: 40px; height: 40px;}
  .header-search-submit img {width: 18px; height: 18px;}
}

/* ========================================================================
   フッター
======================================================================== */
.site-footer {background-image: url(../img/footer_bg.png); background-size: cover; padding: 8rem 2rem 4rem; height: 85.3rem; margin-top: 6rem; background-position: top center;}
.site-footer .footer-logo {display: block; text-align: center; margin-bottom: 6.1rem;}
.site-footer .footer-logo img {height: 16.2rem; width: auto; object-fit: contain;}
.site-footer .footer-nav {display: flex; flex-direction: column; align-items: center; gap: 3.3rem; margin-bottom: 6rem;}
.site-footer .footer-nav span {display: flex; flex-direction: column; align-items: center; gap: 3.3rem;}
.site-footer .footer-nav a {font-size: 1.6rem; font-weight: var(--fw-bold); color: var(--color-white); line-height: 1;}
.site-footer .footer-sns {display: flex; justify-content: center; gap: 3rem; margin-bottom: 4rem;}
.site-footer .footer-sns a img {width: auto; height: 4rem;}
.site-footer .footer-copy {text-align: center; font-size: 1.4rem; font-weight: var(--fw-regular); color: var(--color-white); line-height: 1.5;}

@media (min-width: 768px) {
  .site-footer {background-image: url(../img/footer_bg_pc.png); padding: 80px 20px 40px; height: 630px; margin-top: 60px;}
  .site-footer .footer-logo {margin-bottom: 61px;}
  .site-footer .footer-logo img {height: 162px}
  .site-footer .footer-nav {flex-direction: column; flex-wrap: wrap; justify-content: center; gap: 30px; margin-bottom: 60px;}
  .site-footer .footer-nav span {flex-direction: row; gap: 30px;}
  .site-footer .footer-nav a {font-size: 16px;}
  .site-footer .footer-sns {gap: 30px; margin-bottom: 40px;}
  .site-footer .footer-sns a img {height: 40px;}
  .site-footer .footer-copy {font-size: 14px;}
}

/* ========================================================================
   TOPへ戻るボタン
======================================================================== */
.to-top {position: fixed; right: 2rem; bottom: 2rem; z-index: 50; width: 5.5rem; height: 5.5rem; display: none;}
.to-top.is-show {display: block;}
.to-top a {display: flex; align-items: center; justify-content: center; width: 5.5rem; height: 5.5rem;}
.to-top img {width: 5.5rem; height: 5.5rem;}

/* PC（768px以上）
---------------------------------------------------------*/
@media (min-width: 768px) {
  .header-spacer {height: 125px;}
  .sp-menu {display: none;}
  .header-main .header-menu-btn {display: none;}
  .header-nav {display: none;}
  .header-main {justify-content: space-between;}
  .header-main .header-logo {position: static;}
  .header-nav-pc {display: flex; align-self: stretch; align-items: stretch; gap: 60px; margin-left: 0; flex-shrink: 0;}
  .pc-nav-item {position: relative; display: flex; align-items: center;}
  .pc-nav-link {display: flex; align-items: center;}
  .header-nav-pc a, .pc-nav-btn {font-size: 18px; gap: 16px; font-weight: normal; color: var(--color-primary); white-space: nowrap; line-height: 1;}
  .pc-dropdown {display: block; position: absolute; top: 100%; left: 0; min-width: max-content; background: #DCF9FD; box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.12); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; z-index: 99;}
  .pc-dropdown.is-open {opacity: 1; visibility: visible;}
  .pc-dropdown-list {display: flex; flex-direction: column; list-style: none; padding: 1px 0;}
  .pc-dropdown-list a {display: block; padding: 8px 16px; font-size: 14px; font-weight: var(--fw-regular); color: var(--color-text); white-space: nowrap;}
  .header-main .header-icons {margin-left: 0; align-self: center;}

  .to-top,.to-top a,.to-top img  {width: 55px; height: 55px;}
}

/* ========================================================================
   お気に入り・最近チェック（fav / check）
======================================================================== */
.fav {padding: 10rem 0 4rem;}
.fav .product-scroll, .check .product-scroll {display: flex; gap: 1.5rem; padding: 0 var(--side-padding); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-top: 2.8rem;}
.fav .product-scroll::-webkit-scrollbar, .check .product-scroll::-webkit-scrollbar {display: none;}
.fav .product-card, .check .product-card {flex-shrink: 0; width: 14rem;}
.fav .product-card .product-img, .check .product-card .product-img {height: 14rem;}

.check {padding: 5.5rem 0 4rem;}

/* PC（768px以上）- main コンテンツ共通 rem → px 固定
---------------------------------------------------------*/
@media (min-width: 768px) {
  .sec-ttl {font-size: 28px;}
  .inner {padding: 0 20px;}
  .btn-more {gap: 8px; width: 228px; height: 50px; font-size: 14px; border-radius: 25px;}
  .btn-more img {width: 20px; height: 20px; right: 15px;}
  .btn-outline {gap: 8px; height: 50px; font-size: 14px; border: 1px solid var(--color-primary); border-radius: 25px;}
  .btn-outline img {width: 20px; height: 20px; right: 15px;}
  .swiper-pagination {margin-top: 20px; gap: 15px;}
  .swiper-pagination-bullet {width: 12px; height: 12px;}
  .product-card .product-name {font-size: 14px; margin-top: 15px;}
  .product-card .product-price {font-size: 12px; margin-top: 5px;}
  .swiper-button-prev, .swiper-button-next {width: 30px; height: 30px;}
  .swiper-button-prev {left: 20px;}
  .swiper-button-next {right: 20px;}
  .swiper-button-prev img, .swiper-button-next img {width: 30px; height: 30px;}
  .fav {padding: 100px 0 40px; width: 100%; max-width: 1040px; margin: auto;}
  .fav .product-scroll, .check .product-scroll {display: grid; grid-template-columns: repeat(3, 300px); overflow-x: visible; gap: 20px; padding: 0 20px; margin-top: 28px;}
  .fav .product-card, .check .product-card {width: 300px; flex-shrink: unset;}
  .fav .product-card .product-img, .check .product-card .product-img {width: 300px; height: 300px; aspect-ratio: 1 / 1;}
  .fav .product-card .product-img img, .check .product-card .product-img img {width: 100%; height: 100%; object-fit: cover;}
  .check {padding: 55px 0 40px; width: 100%; max-width: 1040px; margin: auto;}
}