/* =============================================================================
   Generio Store — generio.jp から引き継いだ見た目の追加分 (2026-09-29)
   -----------------------------------------------------------------------------
   トップ（メイン画像・RECOMMEND・CATEGORY・SIGN UP）とフッター。
   色・文字・ボタン・商品ページなど全ページ共通の土台は customize.css（RM180323）。
   customize.css はブラウザに7日キャッシュされるので、足す分はこのファイルにしている。
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');

/* ---- 見出し（英字＋日本語の2段） ---- */
.gn-sec { max-width: 1200px; margin: 0 auto; padding: 72px 24px 0; text-align: center; }
.gn-sec__title { margin: 0; font-family: 'Alata', sans-serif; font-size: 36px; font-weight: 400; letter-spacing: .12em; line-height: 1.2; }
.gn-sec__sub { margin: 10px 0 36px; font-size: 15px; }

/* ---- オレンジのボタン ---- */
.gn-btn { display: inline-block; min-width: 228px; margin-top: 32px; padding: 12px 24px; background: var(--gs-accent, #df7f0d); color: #fff !important; font-weight: 700; font-size: 15px; text-decoration: none !important; border-radius: 2px; transition: background-color .2s; }
.gn-btn:hover { background: var(--gs-accent-dark, #c46f0a); }

/* ---- メイン画像のスライド ---- */
.ec-layoutRole .ec-layoutRole__contents:has(.gn-kv) { padding-top: 0; }
.gn-kv { position: relative; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; background: #f5f5f5; }
.gn-kv__track { position: relative; aspect-ratio: 1920 / 800; }
.gn-kv__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s; pointer-events: none; }
.gn-kv__slide.is-active { opacity: 1; pointer-events: auto; }
.gn-kv__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gn-kv__btn { position: absolute; left: 7%; bottom: 12%; padding: 10px 36px; background: var(--gs-accent, #df7f0d); color: #fff !important; font-weight: 700; text-decoration: none !important; border-radius: 2px; }
.gn-kv__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: rgba(255,255,255,.7); border-radius: 50%; cursor: pointer; color: #222; }
.gn-kv__arrow--prev { left: 16px; }
.gn-kv__arrow--next { right: 16px; }
.gn-kv__dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; }
.gn-kv__dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.6); cursor: pointer; }
.gn-kv__dots button.is-active { background: #fff; }

/* ---- RECOMMEND（横に送る棚） ---- */
.gn-recommend { position: relative; }
.gn-recommend__list { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 24px) / 5); gap: 24px; margin: 0; padding: 0 0 8px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; text-align: left; }
.gn-recommend__list::-webkit-scrollbar { display: none; }
.gn-recommend__item { scroll-snap-align: start; }
.gn-recommend__item a { color: var(--gs-text, #000) !important; text-decoration: none !important; }
.gn-recommend__item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 12px; }
.gn-recommend__name { margin: 0 0 6px; font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gn-recommend__price { margin: 0; font-size: 14px; font-weight: 700; }
.gn-recommend__arrow { position: absolute; top: 30%; z-index: 1; width: 36px; height: 36px; border: 1px solid var(--gs-border, #d8dddf); border-radius: 50%; background: #fff; cursor: pointer; }
.gn-recommend__arrow--prev { left: -18px; }
.gn-recommend__arrow--next { right: -18px; }

/* ---- CATEGORY（画像のタイル） ---- */
.gn-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 32px; max-width: 880px; margin: 0 auto; padding: 0; list-style: none; }
.gn-cats a { display: block; color: var(--gs-text, #000) !important; text-decoration: none !important; }
.gn-cats img { display: block; width: 100%; max-width: 170px; height: auto; aspect-ratio: 1; object-fit: cover; margin: 0 auto 14px; transition: opacity .2s; }
.gn-cats a:hover img { opacity: .8; }
.gn-cats span { font-size: 15px; line-height: 1.5; }

/* ---- SIGN UP ---- */
.gn-signup { width: 100vw; margin: 80px 0 0 calc(50% - 50vw); padding: 64px 24px; text-align: center; color: #fff; background-size: cover; background-position: center; position: relative; }
.gn-signup::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.gn-signup > * { position: relative; }
.gn-signup .gn-sec__title, .gn-signup .gn-sec__sub { color: #fff; }
.gn-signup .gn-sec__sub { margin-bottom: 20px; }
.gn-signup__text { margin: 0; font-size: 14px; }
.gn-signup .gn-btn { margin-top: 20px; }

/* ---- フッター ---- */
.ec-footerRole { margin-top: 0 !important; padding: 0 !important; border-top: 0 !important; background: #f5f5f5 !important; }
.ec-layoutRole__footer { background: #f5f5f5; }
.gn-footer { background: #f5f5f5; color: #000; margin-top: 80px; }
.gn-footer__inner { display: flex; gap: 48px; max-width: 1200px; margin: 0 auto; padding: 56px 40px 64px; }
.gn-footer__store { flex: 0 0 220px; }
.gn-footer__logo img { display: block; width: 170px; height: auto; }
.gn-footer__sns { display: flex; gap: 14px; margin: 20px 0 16px; font-size: 20px; }
.gn-footer__sns a, .gn-footer a { color: #000 !important; text-decoration: none !important; }
.gn-footer a:hover { color: var(--gs-accent, #df7f0d) !important; }
.gn-footer__copy { margin: 0; font-size: 13px; line-height: 1.6; }
.gn-footer__menus { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.gn-footer__title { margin: 0 0 16px; font-family: 'Alata', sans-serif; font-size: 16px; letter-spacing: .08em; }
.gn-footer__menu ul { margin: 0; padding: 0; list-style: none; }
.gn-footer__menu li { margin-bottom: 10px; font-size: 13px; font-weight: 700; line-height: 1.5; }

/* ---- 画面が狭いとき ---- */
@media (max-width: 991px) {
    .gn-recommend__list { grid-auto-columns: calc((100% - 2 * 16px) / 3); gap: 16px; }
    .gn-footer__inner { flex-direction: column; gap: 32px; padding: 40px 24px 48px; }
    .gn-footer__store { flex: none; }
    .gn-footer__menus { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .gn-sec { padding-top: 48px; }
    .gn-sec__title { font-size: 26px; }
    .gn-sec__sub { margin-bottom: 24px; font-size: 13px; }
    .gn-kv__track { aspect-ratio: 1920 / 800; }
    .gn-kv__btn { padding: 6px 18px; font-size: 12px; left: 5%; bottom: 10%; }
    .gn-kv__arrow { display: none; }
    .gn-recommend__list { grid-auto-columns: calc((100% - 16px) / 2.3); }
    .gn-recommend__arrow { display: none; }
    .gn-cats { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
    .gn-cats span { font-size: 13px; }
    .gn-signup { margin-top: 56px; padding: 48px 16px; }
    .gn-btn { min-width: 200px; }
}