/*------------------
header
--------------------*/


.burger-btn{
	display: none;
}
/*------------------
key visual
--------------------*/

.kv-wrapper{
	width: 100%;
	
	display: flex;
	justify-content:center;
	align-items: center;

	background-position: center;
	background-size: cover;
	background-repeat  : no-repeat;
	
}




.onlinestore{
	margin: auto;
	}
.store-btn {
	width: 12vw;
	max-width:150px;
  height: 12vw;
	max-height:150px;
	margin: 10px;
	border: solid rgb(255, 255, 255,0.7);
	border-radius: 32px;
	display: flex;
	align-items: center;
}

.store-btn:hover {
	width: 12vw;
	max-width:150px;
  height: 12vw;
	max-height:150px;
	margin: 10px;
	border: solid rgb(255, 255, 255,0.8);
	border-radius: 32px;
	display: flex;
	align-items: center;
	background-color: rgb(255, 255, 255,0.7);
	transition: 0.2s;
}

.store-btn img{
	width: 80%;
text-align:center;
	}


.image-bottom {
  display: flex;
  justify-content: center; /* 横中央 */
}

.image-bottom img {
  max-width: 1000px;
  height: auto;
  display: block;
}
.kv-wrapper {
    width: 100%;
    height: 600px; /* PCでの高さ（好きな値に） */
    overflow: hidden;
	
}

.kv-image {
    width: 100%;
    height: 100%;
    /* ここに画像のパスを入れる */
    background-image: url('https://luckycraft.com/luckycrafthome/images/kv-main.jpg');
    background-position: center; /* 中央を基準にする */
    background-size: cover;     /* 隙間なく埋める */
    background-repeat: no-repeat;
}

.kv-image-sw {
    width: 100%;
    height: 100%;
    /* ここに画像のパスを入れる */
    background-image: url('https://luckycraft.com/luckycrafthome/images/kv-main-sw.jpg');
    background-position: center; /* 中央を基準にする */
    background-size: cover;     /* 隙間なく埋める */
    background-repeat: no-repeat;
}


.category-main {
    width: 100%;
    height: 55vw;
    max-height: 700px;
    overflow: hidden;
    margin-top: 70px;

    /* --- 追加：中身を中央に寄せるための魔法 --- */
    display: flex;
    justify-content: center; /* 左右中央 */
    align-items: center;     /* 上下中央（もし必要なら） */
}

.category-main img {
    width: 100%;
    max-width: 1700px;
    height: auto; /* 比率を保つ */
    
    /* flexを使わない場合の保険：これでも中央に寄ります */
    /* display: block;
    margin: 0 auto; */
}
/* ================= PRODUCT IMG ================= */
.product-img {
  max-width: 2000px;
  margin: 50px auto;

  height: 45vw;        /* ← 横幅に連動 */
  min-height: 260px;   /* ← 小さくなりすぎ防止 */
  max-height: 750px;   /* ← デカくなりすぎ防止 */

  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: -20px;
}

.product-img img {
  max-width: 100%;
  height: auto;
}
/* ================= PRODUCT ================= */
.product {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
}

.product-name {

  font-size: 25px;
  font-weight: bold;
	margin-top: 5px;
	line-height: 1;
}

/* ===== descripton ===== */
.product-main {

color:#ffffff;
  display: flex;
  gap: 40px;
  padding: 20px;
}

/* LEFT */

.product-specs {
  width: 260px;
  font-size: 13px;
  line-height: 1.8;
	
}

.product-specs ul {
  list-style: none;
	margin-top: 10px;
}

/* RIGHT */
.product-desc {
  flex: 1;
}

.product-desc h3 {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 10px;
}

.product-desc h3 span {
  display: block;
}

.product-desc p {
  font-size: 13px;
  line-height: 1.7;
}



.color-list {
	background-color: #000000;
	color:#ffffff;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
  max-width: 1200px;

padding-top: 10px;
}

.color-item {
  text-align: center;
}

.color-item img {
  width: 100%;
  max-width: 180px; /* カラー画像の大きさ調整 */
  height: auto;
  display: block;
  margin: 0 auto 10px;
}

.color-item p {
  font-size: 14px;
  font-weight: 500;
 padding-bottom: 10px;
  margin: 0;
}


/*Smartphone*/
@media screen and (max-width:991px){
body {
    overflow-x: hidden;
}

/*------------------
header-sp
--------------------*/

	
	.header-nav{
display: none;
		position: fixed;
		top:0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgb(0, 0, 0,0.9);
		z-index: 998;
		
	}
	.nav-list{
		height: 100%;
		flex-direction: column;
		justify-content: center;
		align-items: center; 
	}
	.nav-item{
		margin: 0 0 7vh;
	}
	.nav-item a{
		font-size: 20px;
	}
	.nav-item:last-of-type{
		margin-bottom: 0;
		
	}
	
	.dealer{
	margin:auto;
	display: flex;
	
}
.dealer table{
	border: 2px solid #cccccc;
	width:90vw;
	margin-bottom: 50px;
	margin-top: 50px;
	
}
.dealer thead{
    background-color: #D9D9D9;
	color:#000;
	font-weight: 900;
}

.dealer tbody td{
    border-bottom: 1px dashed #cccccc;
}
	
	
	
	/* ハンバーガーボタン */
	.burger-btn{
		display: block;
		position:absolute;
		top: 30px;
		right: 5vw;	
		z-index: 999;
	}
	.burger-btn .bar{
		display:block;
		height: 3px;
		width: 30px;
		background-color: #fff;
		transition: .3s;
	} 
	.bar_top,
	.bar_mid{
		margin-bottom: 8px;
	}

	.burger-btn.cross .bar_top{
		transform: rotate(45deg) translate(8px,8px);
	}
	.burger-btn.cross .bar_mid{
		opacity: 0;
	}
	.burger-btn.cross .bar_bottom{
		transform: rotate(-45deg) translate(8px,-8px);
	}
	
		button{
		background-color: transparent;
		border:none;
		cursor: pointer;
		outline:none;
		padding:0;
		appearence:none;
			
	}
.mainstyle{
	display: flex;
	position: absolute;
	top:120px;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
	.mainstyle1{
	display: flex;
	position: absolute;
	top:0;
	width: 100%;
}
	.mainstyle2{
	display: flex;
	position: absolute;
	width: 100%;
}
/*------------------
key visual-sp
--------------------*/	

.kv-wrapper {
        height: 450px; /* スマホで見やすい高さに調整 */
	
    }
    
    .kv-image {
        /* background-sizeを100%以上にすると「アップ」になります */
        /* 例: 250%にすると、画像の中央部分がかなり拡大されます */
        background-size: 220%; 
        
        /* もし中央じゃなく「右寄り」や「左寄り」をアップにしたい場合はここを調整 */
        background-position: 20% center; 
	
    }

.category-main {
	width: 100%;
	height: 60vw;

        display: flex;
        justify-content: center;
        align-items: center;
	margin-top: 120px;
    }
    
    .category-main img {
        transform: scale(1.6); /* 真ん中から1.3倍に拡大 */
    }
	
.onlinestore{
	
	margin: auto;
	
	
	}
.store-btn {
	vertical-align: top;
	width: 14vw;
	max-width:150px;
  height: 14vw;
	max-height:150px;
	margin: 1vw;
	border: solid rgb(255, 255, 255,0.8);
	border-width: medium;
	border-radius: 25px;
	display: flex;
	align-items: center;
	}
	
.store-btn:hover {
	vertical-align: top;
	width: 14vw;
	max-width:150px;
  height: 14vw;
	max-height:150px;
	margin: 1vw;
	border: solid rgb(255, 255, 255,0.2);
	border-width: medium;
	border-radius: 25px;
	display: flex;
	align-items: center;
	background-color: rgb(255, 255, 255,0.8);
	transition: 0.2s;
	}
	
	
.store-btn img{
	width: 90%;
text-align:center;

	}

.itemlist{
	width:100%;
	align-items: left;
	margin-left: 0px;
	}
.itemlist table {
	margin:5px;
	
}

.itemlist table tr td {
	padding-bottom:3px;
	
}
	
	.illust{
		width: 50px;
		height: auto;
	}
	
.image-bottom img{
	width: 100%;
	
}	
	
/* ================= PRODUCT IMG ================= */
.product-img {
  width: 100%;
  height: 40vw;     
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
  overflow: hidden; /* ← はみ出し防止 */
	margin-bottom: 0;
  margin-bottom: -50px; /* ← ここで自然に被せる */
}

.product-img img {
  width: 100%;
  max-width: 500px;   /* ← ここで最大サイズ調整 */
  height: auto;
  transform: scale(1.5); /* ← 見た目だけ拡大 */
}

/* ================= PRODUCT ================= */
  .product-main {
    flex-direction: column;
    gap: 25px;
    padding: 25px 10px;
  }

  .product-specs,
  .product-desc {
    width: 100%;
  }

  .product-name {
    font-size: 25px;
	 
  }

  .product-specs ul {
    font-size: 13px;
  }

  .product-desc h3 {
    font-size: 15px;
  }

  .product-desc h3 span {
    font-size: 13px;
  }

  .product-desc p {
    font-size: 13px;
  }

  /* Colors → 2 columns on mobile */
  .color-list {
    grid-template-columns: 1fr; /* ← 縦1列 */
	 gap: 10px; /* ← ここを小さくする（例: 12px / 16px） */
  }

  .color-item img {
    max-width: 80%;
    margin: 0 auto;
    display: block;
  }
		
}