@charset "utf-8";

/* ==========================================================================
   1. Reset & Base
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    color: #333;
    font-family: "serif", "Hiragino Mincho ProN", "游明朝", serif;
    font-size: 15px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
a:hover { color: #162d50; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
li { list-style: none; }

.sp { display: none; }
.pc { display: inline; }
.sp_only { display: none !important; }

/* ==========================================================================
   2. Layout & Header
   ========================================================================== */
.container { max-width: 1100px; margin: 0 auto; padding: 0 40px; }
.home-section { padding: 100px 0; }

#header {
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.header-inner { max-width: 1240px; margin: 0 auto; padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; }

/* ==========================================================================
   3. Main Visual (bxSlider)
   ========================================================================== */
#main_visual_full { width: 100%; height: 100vh; overflow: hidden; position: relative; background-color: #000; }
.bx-wrapper { border: none !important; box-shadow: none !important; background: transparent !important; margin-bottom: 0 !important; }
.bx-viewport { height: 100vh !important; }
.bxslider, .bxslider li { height: 100vh !important; position: relative; overflow: hidden; }

.slide-img-wrap { width: 100%; height: 100%; }
.slide-img-wrap img { width: 100%; height: 100% !important; object-fit: cover; transform: scale(1.0); transition: transform 8s ease-out; }
.bxslider li.active .slide-img-wrap img { transform: scale(1.15); }

/* Slide Text */
.slide-text-content { position: absolute; top: 55%; left: 12%; transform: translateY(-50%); color: #fff; z-index: 10; text-shadow: 5px 5px 7px rgba(0, 0, 0, 1); }
.slide-sub { font-size: 18px; letter-spacing: 0.4em; margin-bottom: 25px; opacity: 0; transform: translateX(-30px); transition: opacity 1.2s ease, transform 1.2s ease; transition-delay: 0.4s; }
.slide-main { font-size: 52px; font-weight: 500; letter-spacing: 0.1em; opacity: 0; transform: translateX(-40px); transition: opacity 1.5s ease, transform 1.5s ease; transition-delay: 0.7s; }
.bxslider li.active .slide-sub, .bxslider li.active .slide-main { opacity: 1; transform: translateX(0); }

/* ==========================================================================
   4. Products Grid
   ========================================================================== */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default (Mobile): 3列 */
    gap: 10px;
}

.product-item {
    border: 1px solid #eee;
    background: #fff;
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
}

.product-item:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.product-img img { width: 100%; height: 250px; object-fit: contain; padding: 10px; background: #f9f9f9; }
.product-info { padding: 15px; }
.product-info h3 { font-size: 1.1rem; margin-bottom: 10px; }
.price { font-size: 1.1rem; font-weight: bold; color: #b00; margin: 5px 0; }

/* ==========================================================================
   5. Responsive
   ========================================================================== */
/* Tablet & PC */
@media screen and (min-width: 769px) {
    .product-grid { grid-template-columns: repeat(5, 1fr); gap: 20px; } /* PC: 5列 */
}

/* Mobile */
@media screen and (max-width: 768px) {
    .sp { display: inline; }
    .pc { display: none; }
    .pc_only { display: none !important; }
    .sp_only { display: block !important; }

    .container { padding: 0 20px; }
    .home-section { padding: 70px 0; }
    
    .slide-main { font-size: 30px; }
    .product-item img { height: auto; }
}

/* Menu Trigger (共通のハンバーガー設定などはここに維持) */
.menu-trigger { display: none; }
@media screen and (max-width: 1100px) {
    .menu-trigger { display: block; width: 30px; height: 24px; position: relative; z-index: 10001; }
    /* ... 既存のメニューアニメーション記述をここに配置 ... */
}