/*
Theme Name:  MyShop
Theme URI:   https://example.com/myshop
Author:      Your Name
Author URI:  https://example.com
Description: siiibo.com参考のシンプル＆リッチなECショップテーマ。Tailwind CSS CDN使用。
Version:     1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: myshop
Tags:        e-commerce, one-column, custom-menu, featured-images, full-width-template
*/

/* =============================================================
   BASE RESET
   Tailwind の preflight が大半をリセットするが、
   WP コアが吐く余分な margin を打ち消す
============================================================= */
body        { margin: 0; }
img         { max-width: 100%; height: auto; display: block; }
a           { text-decoration: none; }
*, *::before, *::after { box-sizing: border-box; }

/* =============================================================
   TYPOGRAPHY  ― Noto Sans JP
============================================================= */
body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #1e293b;
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
}

/* =============================================================
   HEADER
============================================================= */
/* スクロール後に付く影（JS で .scrolled を toggle） */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #ffffff;
    transition: box-shadow .2s ease;
}
.site-header.scrolled {
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

/* ナビ下線アニメーション */
.nav-link {
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 2px;
    background: #1a4a7a;
    transition: width .25s ease;
}
.nav-link:hover::after { width: 100%; }

/* WP が生成する ul > li メニューのリセット */
.site-nav ul          { list-style: none; margin: 0; padding: 0; display: flex; gap: 2rem; }
.site-nav ul li a     { font-size: .875rem; font-weight: 500; color: #374151; }
.site-nav ul li a:hover { color: #0c2340; }

/* =============================================================
   HERO
============================================================= */
.hero-section {
    position: relative;
    width: 100%;
    height: min(90vh, 680px);
    overflow: hidden;
}
.hero-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
        135deg,
        rgba(12,35,64,.82) 0%,
        rgba(12,35,64,.45) 60%,
        rgba(12,35,64,.20) 100%
    );
}
.hero-text-shadow { text-shadow: 0 2px 16px rgba(0,0,0,.45); }
.hero-scroll-line {
    position: absolute;
    bottom: 2rem; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    color: rgba(255,255,255,.5); font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
}
.hero-scroll-line span { width: 1px; height: 2.5rem;
    background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
    animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* =============================================================
   SECTION LABEL（小見出し）
============================================================= */
.section-label {
    display: inline-block;
    font-size: .7rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: #1a4a7a;
    border-bottom: 2px solid #1a4a7a;
    padding-bottom: 2px;
    margin-bottom: .75rem;
}

/* =============================================================
   NEWS TAG
============================================================= */
.news-tag {
    display: inline-block;
    font-size: .65rem; font-weight: 700;
    padding: 2px 8px;
    border-radius: 2px;
    letter-spacing: .04em;
    white-space: nowrap;
}
.tag-important { background: #fef2f2; color: #dc2626; }
.tag-product   { background: #eff6ff; color: #2563eb; }
.tag-info      { background: #f0fdf4; color: #16a34a; }
.tag-media     { background: #f9fafb; color: #6b7280; }
.tag-default   { background: #f9fafb; color: #6b7280; }

/* =============================================================
   CARDS
============================================================= */
.card-hover {
    transition: transform .2s ease, box-shadow .2s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,.10);
}

/* 商品カード：画像 zoom */
.product-card .thumb img {
    transition: transform .5s ease;
}
.product-card:hover .thumb img {
    transform: scale(1.06);
}

/* =============================================================
   FOOTER
============================================================= */
.site-footer { background: #111827; color: #9ca3af; }
.footer-nav h4 { color: #ffffff; font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em; margin-bottom: 1rem; }
.footer-nav ul  { list-style: none; margin: 0; padding: 0; }
.footer-nav li  { margin-bottom: .625rem; }
.footer-nav a   { font-size: .75rem; color: #9ca3af; transition: color .15s; }
.footer-nav a:hover { color: #ffffff; }

/* =============================================================
   WP CORE OVERRIDES（ブロックエディタ等）
============================================================= */
.wp-block-image img { border-radius: 4px; }
.alignwide  { max-width: 1200px; margin-left: auto; margin-right: auto; }
.alignfull  { width: 100%; }

/* =============================================================
   UTILITIES
============================================================= */
.container-site { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
.line-clamp-2   { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }