/* Wix の progroup.info を写した見た目 (2026-11-09 計測: 幅1280 で中身1120・左右80、文字 rodin-light 相当) */
:root {
  --ink: #000;
  --band: #f1f1f1;
  --tile: #e1eff2;
  --line: rgba(191, 191, 191, .75);
  --gray-btn: #808080;
  --wrap: 1120px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--ink);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "MS Gothic", sans-serif;
  font-weight: 300; font-size: 15px; line-height: 1.875;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; font-weight: 300; }
.wrap { max-width: calc(var(--wrap) + 32px); margin: 0 auto; padding: 0 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ヘッダー: 白地のロゴ + 灰色の帯のメニュー */
.site-header .logo-row { height: 95px; display: flex; align-items: center; }
.site-header .logo { font-size: 22px; line-height: 1.41; }
.nav-band { background: var(--band); height: 40px; margin-bottom: 6px; }
.nav-band .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.nav-band ul { list-style: none; margin: 0; padding: 0; display: flex; }
.nav-band li a { display: block; font-size: 14px; line-height: 40px; padding: 0 10px; }
.nav-band li:first-child a { padding-left: 0; }
.nav-band li a:hover, .nav-band li a[aria-current] { color: #6f6f6f; }
.nav-band .insta { width: 20px; height: 20px; }
.menu-toggle { display: none; background: none; border: 0; padding: 4px; cursor: pointer; }
.menu-toggle span { display: block; width: 26px; height: 2px; background: #000; margin: 6px 0; }

/* トップ: 写真の上に題名、下側に半透明の帯と紹介文 */
.hero { position: relative; height: 800px; background: #000; overflow: hidden; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.hero-text { position: relative; text-align: center; color: #fff; padding-top: 196px; }
.hero-text h1 { font-size: 72px; line-height: 1.3; }
.hero-text p { font-size: 20px; line-height: 1.67; margin-top: 18px; }
.hero-band { position: absolute; left: 0; right: 0; bottom: 0; height: 295px; background: rgba(241, 241, 241, .4);
             text-align: center; padding-top: 62px; }
.hero-band p { max-width: 855px; margin: 0 auto; }
.hero-band .more { margin-top: 46px; }
.hero-mobile-text { display: none; }

/* 商品の横送り (トップ) とショップの一覧 */
.slider { position: relative; padding: 97px 0 62px; }
.slider-track { display: grid; grid-auto-flow: column; grid-auto-columns: 346px; gap: 60px; max-width: 1158px; margin: 0 auto;
                overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slider-track::-webkit-scrollbar { display: none; }
.slider-track .product-item { scroll-snap-align: start; }
.slider-arrow { position: absolute; top: calc(97px + 153px); width: 30px; height: 40px; border: 0; background: none;
                font-size: 26px; line-height: 1; cursor: pointer; color: #000; }
.slider-arrow.prev { left: max(4px, calc(50% - 620px)); }
.slider-arrow.next { right: max(4px, calc(50% - 620px)); }
.product-item img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: #fff; }
.product-item .noimg { display: block; aspect-ratio: 1 / 1; background: #f4f4f4; }
.product-item .name { font-size: 15px; line-height: 1.875; margin-top: 16px; }
.product-item .stock { font-size: 18px; line-height: 1.5; }
.shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 958px; margin: 0 auto;
             padding: 130px 0 60px; }
.shop-grid .product-item { text-align: center; }
.shop-grid .name { font-size: 15px; margin-top: 12px; }
.shop-grid .stock { font-size: 15px; }
.shop-grid .product-item.is-hidden { display: none; }
.more-btn { display: block; margin: 0 auto 80px; width: 134px; height: 50px; border: 1px solid #000; background: #fff;
            font: inherit; font-size: 15px; cursor: pointer; }

/* 商品一覧 (3枚の写真) */
.lineup { text-align: center; padding: 70px 0 40px; }
.lineup h2 { font-size: 40px; line-height: 1.35; }
.lineup .sub { font-size: 18px; line-height: 1.75; margin-top: 29px; }
.tiles { display: grid; grid-template-columns: repeat(3, 347px); justify-content: space-between; max-width: var(--wrap);
         margin: 76px auto 0; }
.tile img { width: 347px; height: 300px; object-fit: cover; }
.tile .cap { background: var(--tile); height: 220px; padding-top: 50px; }
.tile .cap h3 { font-size: 22px; line-height: 1.41; }
.tile .cap p { font-size: 18px; margin-top: 30px; }

/* お問い合わせ */
.contact { display: grid; grid-template-columns: 560px 560px; max-width: var(--wrap); min-height: 560px; margin: 40px auto 0; background: var(--band); }
.contact h2 { font-size: 40px; line-height: 1.35; padding: 70px 0 0 160px; }
.contact form { padding: 60px 100px 60px 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; align-content: start; }
.contact label { display: block; font-size: 12px; }
.contact input, .contact textarea { width: 100%; border: 0; border-bottom: 1px solid #000; background: transparent;
                                    font: inherit; font-size: 14px; padding: 4px 6px; border-radius: 0; }
.contact .full { grid-column: 1 / -1; }
.contact textarea { height: 75px; resize: vertical; }
.contact button { grid-column: 1 / -1; height: 30px; margin-top: 10px; background: #000; color: #fff; border: 0;
                  font: inherit; font-size: 14px; cursor: pointer; }
.contact .note { grid-column: 1 / -1; font-size: 13px; min-height: 1em; }

.site-footer { text-align: center; font-size: 14px; line-height: 1.79; padding: 88px 0 27px; }

/* 商品ページ */
.product-nav { max-width: 900px; margin: 0 auto; padding: 180px 0 60px; display: flex; justify-content: space-between; }
.product-nav .pager a + a { margin-left: 16px; }
.gallery { max-width: 980px; margin: 0 auto; position: relative; }
.gallery .main { display: block; width: 100%; height: 551px; object-fit: cover; background: #fff; }
.gallery .arrow { position: absolute; top: 255px; border: 0; background: rgba(255,255,255,.7); font-size: 28px;
                  width: 40px; height: 40px; cursor: pointer; }
.gallery .arrow.prev { left: 0; }
.gallery .arrow.next { right: 0; }
.thumbs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }
.thumbs button { padding: 0; border: 1px solid transparent; background: #fff; cursor: pointer; }
.thumbs button[aria-current="true"] { border-color: #000; }
.thumbs img { width: 60px; height: 60px; object-fit: contain; }
.product-body { max-width: 900px; margin: 60px auto 100px; display: grid; grid-template-columns: 547px 273px;
                justify-content: space-between; }
.product-body h1 { font-size: 22px; line-height: 1.2; }
.product-body .sku { margin-top: 6px; }
.product-body .short { font-size: 16px; line-height: 1.6; margin-top: 16px; }
.product-body .desc-title { font-size: 18px; margin-top: 60px; padding-bottom: 8px; }
.product-body .desc p { font-size: 16px; line-height: 1.6; min-height: 1.6em; }
.price { font-size: 20px; line-height: 1.67; }
.sold-out { display: block; width: 100%; height: 39px; margin-top: 30px; background: var(--gray-btn); color: #fff;
            border: 0; font: inherit; font-size: 15px; }
.buy-link { display: block; width: 100%; height: 39px; line-height: 39px; margin-top: 12px; background: #000; color: #fff;
            text-align: center; font-size: 15px; }

/* ブログ */
.blog-nav { max-width: 940px; margin: 0 auto; padding: 163px 0 32px; display: flex; gap: 28px; flex-wrap: wrap; font-size: 14px; }
.blog-nav a[aria-current] { color: #6f6f6f; }
.post-list { max-width: 940px; margin: 0 auto; display: grid; gap: 34px; padding-bottom: 80px; }
.post-item { display: grid; grid-template-columns: 454px 1fr; border: 1px solid var(--line); min-height: 339px; }
.post-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-item .text { padding: 22px 36px 24px; display: flex; flex-direction: column; }
.post-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 1.5; }
.post-meta .avatar { width: 32px; height: 32px; border-radius: 50%; background: #c4c4c4; flex: none; }
.post-meta .when span + span::before { content: "・"; }
.post-item h2 { font-size: 28px; line-height: 1.43; margin-top: 30px; overflow-wrap: anywhere; }
.post-item .excerpt { font-size: 16px; line-height: 1.5; margin-top: 14px; overflow-wrap: anywhere;
                      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-box { max-width: 940px; margin: 0 auto; border: 1px solid var(--line); padding: 50px 100px 40px; }
.post-box .post-meta { font-size: 14px; }
.post-box h1 { font-size: 40px; line-height: 1.4; margin-top: 24px; overflow-wrap: anywhere; }
.post-body { margin-top: 20px; }
.post-body p { font-size: 18px; line-height: 1.5; margin: 0 0 18px; overflow-wrap: anywhere; }
.post-body a { text-decoration: underline; color: #6f6f6f; }
.post-body img { width: 100%; margin: 24px 0; }
.post-foot { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 18px; font-size: 14px; }
.post-foot a { text-decoration: underline; }
.recent { max-width: 940px; margin: 50px auto 100px; }
.recent-head { display: flex; justify-content: space-between; font-size: 18px; }
.recent-head a { font-size: 14px; }
.recent-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 16px; }
.recent-list a { border: 1px solid var(--line); display: block; }
.recent-list img { width: 100%; aspect-ratio: 290 / 163; object-fit: cover; }
.recent-list h3 { font-size: 16px; line-height: 1.5; padding: 16px 20px 24px; overflow-wrap: anywhere; }

/* 概要 */
.about { position: relative; max-width: var(--wrap); height: 920px; margin: 80px auto 120px; background: #000; overflow: hidden;
         color: #fff; text-align: center; }
.about > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.about-text { position: relative; padding: 220px 40px 0; }
.about-text h1 { font-size: 72px; line-height: 1.3; }
.about-text .lead { font-size: 20px; margin-top: 24px; }
.about-text .body { max-width: 817px; margin: 30px auto 0; }
.about-text .company { margin-top: 28px; }
.about-text .more { margin-top: 48px; }

.notfound { text-align: center; padding: 160px 16px; }
.notfound h1 { font-size: 40px; }

/* スマホ (Wix のスマホ表示: 帯にアイコンとメニュー、ロゴは中央) */
@media (max-width: 767px) {
  .site-header { display: flex; flex-direction: column-reverse; }
  .site-header .logo-row { height: 100px; justify-content: center; }
  .site-header .logo { font-size: 20px; }
  .nav-band { height: 47px; position: relative; }
  .nav-band .wrap { flex-direction: row-reverse; }
  .menu-toggle { display: block; }
  .nav-band ul { display: none; position: absolute; top: 47px; left: 0; right: 0; z-index: 10; background: #fff;
                 flex-direction: column; padding: 8px 16px; border-bottom: 1px solid var(--line); }
  .nav-band ul.open { display: flex; }
  .nav-band li a { padding: 0; font-size: 16px; }
  .hero { height: 280px; }
  .hero-text, .hero-band { display: none; }
  .hero-mobile-text { display: block; text-align: center; background: #f7f7f7; padding: 40px 16px 30px; }
  .hero-mobile-text .title { font-size: 40px; line-height: 1.3; }
  .hero-mobile-text .tag { font-size: 18px; margin-top: 12px; }
  .hero-mobile-text .body { font-size: 15px; line-height: 2; margin-top: 12px; }
  .hero-mobile-text .more { font-size: 14px; margin-top: 30px; }
  .slider { padding: 40px 0 20px; }
  .slider-track { grid-auto-columns: 100%; gap: 20px; margin: 0 41px; }
  .slider-arrow { top: calc(40px + 130px); }
  .shop-grid { grid-template-columns: 1fr; gap: 24px; padding: 40px 16px; }
  .lineup h2 { font-size: 24px; }
  .lineup .sub { font-size: 14px; margin-top: 12px; }
  .tiles { grid-template-columns: 1fr; gap: 0; margin-top: 30px; }
  .tile img { width: 100%; height: 300px; }
  .tile .cap { height: 150px; padding-top: 30px; }
  .tile .cap h3 { font-size: 20px; }
  .tile .cap p { font-size: 14px; margin-top: 12px; }
  .contact { grid-template-columns: 1fr; margin-top: 30px; }
  .contact h2 { font-size: 24px; padding: 40px 0 0; text-align: center; }
  .contact form { padding: 24px 16px 40px; grid-template-columns: 1fr; }
  .site-footer { font-size: 12px; }
  .product-nav { padding: 30px 16px 16px; font-size: 13px; }
  .gallery .main { height: 340px; }
  .gallery .arrow { top: 150px; }
  .product-body { grid-template-columns: 1fr; margin: 30px 16px 60px; gap: 24px; }
  .product-body .buy { order: -1; }
  .blog-nav { padding: 30px 16px 20px; gap: 16px; }
  .post-list { padding: 0 16px 60px; }
  .post-item { grid-template-columns: 1fr; }
  .post-item .thumb img { aspect-ratio: 454 / 339; height: auto; }
  .post-item .text { padding: 18px 20px 24px; }
  .post-item h2 { font-size: 22px; margin-top: 16px; }
  .post-box { padding: 24px 16px; border-left: 0; border-right: 0; }
  .post-box h1 { font-size: 28px; }
  .post-body p { font-size: 16px; }
  .recent { padding: 0 16px; }
  .recent-list { grid-template-columns: 1fr; }
  .about { height: auto; min-height: 560px; margin: 0 0 60px; }
  .about-text { padding: 120px 16px 60px; }
  .about-text h1 { font-size: 40px; }
  .about-text .lead { font-size: 18px; }
}

/* 記事ページの投稿者・日付は1行 (Wix: shop835・2023年10月29日・読了時間: 1分) */
.post-box .post-meta > div { display: flex; flex-wrap: wrap; gap: 0 6px; }
.post-box .post-meta > div > div + div::before { content: "・"; }
.shop-grid .product-item img { object-fit: contain; }