@charset "utf-8";
/* CSS Document */
body, .body {
            /* 1. フォントセットを強制適用 */
            font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
            
            /* 2. 行間を詰める */
            line-height: 1.6 !important;
            
            /* 3. 文字色 */
            color: #333 !important;
        }

        /* 4. 見出しの太字効かせる */
        h1, h2, h3, .mv-title, .category-title, strong, b {
            font-weight: bold !important;
            font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
        }
        
        /* 5. 本文の行間調整 */
        .body p, p {
            line-height: 1.8 !important;
            margin-bottom: 1.5em; /* 段落下の余白 */
        }
		
		
		
        /* ==================================== */
        /* LP独自スタイル */
        /* ==================================== */
        
        /* 既存のスタイルを尊重しつつ、本文のサイズを再定義 */
        .body p {
            line-height: 1.8;
            font-size: 16px;
        }

        /* 1-1. メインビジュアル（画像専用のコンテナ） */
        .mv-banner {
            /* PCデフォルト: 横長画像 */
            background: url('setup_style_2400_2.jpg') no-repeat center top / cover;
            height: 500px; /* バナーの高さ */
            width: 100%;
            margin-bottom: 30px; /* キャッチコピーとの間隔 */
        }
        
        /* SP用 縦長画像に切り替え */
        @media screen and (max-width: 600px) {
            .mv-banner {
                background: url('setup_style_750_2.jpg') no-repeat center top / cover;
                height: 400px; /* SPでのバナーの高さ */
            }
        }
        
        /* 1-2. キャッチコピー (バナー直下に配置) */
        .mv-title-container {
            text-align: center;
            padding: 0 20px 40px; /* 下にカテゴリナビとの間隔 */
            margin: 0 auto;
            max-width: 960px;
        }
        
        .mv-title {
            font-size: 28px; /* サイズを調整 */
            font-weight: bold;
            color: #1a1a1a; /* バナー下に配置されるため黒文字に戻す */
            line-height: 1.4;
        }
        
        @media screen and (max-width: 600px) {
            .mv-title {
                font-size: 20px;
            }
        }

        /* 2. カテゴリナビゲーション */
        .category-nav {
			background-color: #fff;
			display: flex;
			justify-content: center;
			padding: 15px 10px;
			gap: 10px;
			position: relative; /* PCは追従なし */
		}
		
        .category-nav a {
            color: #1a1a1a;
			text-decoration: none;
			padding: 12px 10px;
			flex: 1;
			max-width: 250px;
			text-align: center !important;
			border: 1px solid #1a1a1a;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			transition: all 0.2s ease;
        }
		
		@media screen and (min-width: 769px) {
			.category-nav a:hover {background-color: #1a1a1a; color: #fff; border-color: #1a1a1a;}
		}		
		.nav-sub { font-size: 10px; font-weight: normal; margin-bottom: 2px; display: block; }
		.nav-main { font-size: 14px; font-weight: bold; display: block; letter-spacing: 0.05em; }
		

        
        /* 3. 各カテゴリセクション */
		
		.section-area {
			padding: 60px 0;
			border-bottom: 2px solid #eee;
		}
		
        .category-section {
            padding: 100px 0; 
        }
		
		#tech-move,#circle-motion {
			background-color: #f9f9f9; 
			border-top: 1px solid #efefef;
			border-bottom: 1px solid #efefef;
		}
		

        .category-title {
            font-size: 28px!important;
            font-weight: bold;
            text-align: center;
            margin-bottom: 10px;
            color: #1a1a1a;
        }

        .category-copy {
            text-align: center;
            font-size: 18px!important;
            margin-bottom: 30px;
            padding: 0 15px;
        }
		
		
		

        /* 4. スタイリング画像 (横スクロール対応) */
        /* --- 共通設定 --- */
		.styling-wrapper {
			width: 100%;
			margin-bottom: 40px;
			box-sizing: border-box;
		}

.styling-images {
    display: flex;
    gap: 15px; /* アイテム間の隙間 */
}

/* カード全体のスタイル（リンク全体） */
.item-card {
    display: flex;
    flex-direction: column; 
    text-decoration: none;
    color: #333;
}

/* 画像の設定 */
.item-card img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s;
    margin-bottom: 10px;
}

.item-card:hover img {
    opacity: 0.8; /* ホバー時に少し薄くする */
}
		
		
/* シリーズ名 */
.item-series {
    font-size: 13px !important;
    font-weight: bold !important;
    margin-bottom: 2px !important;
    color: #1a1a1a;
    display: block;
}

/* カラー名 */
.item-color {
    font-size: 11px !important;
    color: #666;
    margin-bottom: 12px !important;
    display: block;
}
		
/* セール価格対応の共通設定 */
.price-box {
    display: inline-block;
	text-align: left;
	vertical-align: top;
	line-height: 1.3;
}

/* 定価（通常時） */
.price-regular {
    font-size: 11px;
    font-weight: bold;
}

/* セール時の定価（打ち消し線） */
.price-old {
	display: block;
    font-size: 11px;
    color: #444;
    text-decoration: line-through;
}

/* セール価格（赤文字） */
.price-sale {
	display: block;
    font-size: 13px;
    color: #d00!important; /* セール用の赤 */
    font-weight: bold;
	line-height: 1.2;
}

/* リンク行の設定 */
.link-item {
    display: block !important;
	padding: 10px 0 !important;
	border-bottom: 1px solid #020E4C;
	text-decoration: none;
	color: #333;
    text-align: left;
	position: relative;
}
		
.item-label {
	display: inline-block;
	vertical-align: top;
    font-size: 11px!important;
    font-weight: bold;
	width: 60px;
	margin-right: 20px;
    color: #1a1a1a;
	letter-spacing: 0.1em;
}


/* --- PC表示 (769px以上) : グリッド表示 --- */
@media screen and (min-width: 769px) {
    .styling-wrapper {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 20px;
        overflow: visible;
    }

    .styling-images {
        justify-content: center; /* 中央寄せ */
        flex-wrap: wrap;         /* 折り返し有効 */
    }

    .item-card {
        /* 3枚並び (隙間を考慮して約32%) */
        width: calc(33.333% - 10px);
        max-width: 320px;
    }
}

/* --- SP表示 (768px以下) : 横スクロール --- */
@media screen and (max-width: 768px) {
    .styling-wrapper {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding: 0 15px 15px 15px;
    }
    
    .styling-images {
        display: inline-flex;
        justify-content: flex-start;
        gap: 10px;
    }

    .item-card {
        flex-shrink: 0;
        width: 75vw; /* 画像＋テキストが見やすいよう少し幅を狭める */
        max-width: 280px;
        white-space: normal; /* テキストの折り返しを有効にする */
		margin-right: 5px;
    }
    
    .item-name, .item-price {
        font-size: 12px; /* スマホでは少し文字を小さく */
    }
}

        /* 5. ALL ITEMリンクボタン */
        .category-links {
            text-align: center;
            margin-bottom: 80px;
        }
        
        .btn-link {
            display: inline-block;
            width: 80%;
            max-width: 400px;
            padding: 15px 10px;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            text-decoration: none;
            background-color: #1a1a1a;
            color: #fff!important;
            border: 2px solid #1a1a1a;
            transition: opacity 0.3s;
			margin-top: 50px;
        }
        
        /* 6. 最終CTA */
        .final-cta {
            text-align: center;
            padding: 50px 20px;
            background-color: #fff;
        }
        
        /* --- 最新のSP用統合設定（ナビ・セクション用） --- */
@media screen and (max-width: 768px) {
    /* ナビの追従 & 2列2行固定 */
    .category-nav {
        position: sticky !important;
        top: 0 !important;
        flex-wrap: wrap !important;
        padding: 8px !important;
        gap: 6px !important;
        z-index: 9999 !important;
        background-color: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .category-nav a {
        flex: 0 0 calc(50% - 3px) !important;
        max-width: calc(50% - 3px) !important;
        min-width: 0 !important;
        padding: 8px 5px !important;
        box-sizing: border-box !important;
    }

    /* カレント表示の色 */
    .category-nav a.active {
        background-color: #1a1a1a !important;
        color: #fff !important;
        border-color: #1a1a1a !important;
    }

    /* アンカー位置調整（追従ナビに隠れないように） */
    .category-section {
        scroll-margin-top: 110px !important;
        padding: 60px 0 !important;
    }

    .nav-sub { font-size: 11px !important; }
    .nav-main { font-size: 12px !important; }
    .category-copy { font-size: 16px !important; }
}
		
		
		
	  /* PCのみ表示する要素（SPでは非表示） */
.pc_only {
  display: none; /* デフォルト（スマホ）では非表示 */
}

/* SPのみ表示する要素（PCでは非表示） */
.sp_only {
  display: block; /* デフォルト（スマホ）では表示 */
}

/* first-down-banner-wrap 内の h1 にのみ適用する */
.first-down-banner-wrap h1 { 
  margin-bottom: 0; /* 崩れないように調整 */
  font-size: 16px; /* 必要な調整 */
}

/* 画像の表示/非表示のための基本ルール */
.first-down-banner-wrap .pc_only { display: none; }
.first-down-banner-wrap .sp_only { display: block; }

@media screen and (min-width: 768px) {
  .first-down-banner-wrap .pc_only { display: block; }
  .first-down-banner-wrap .sp_only { display: none; }
}