/* =====================================
   共通レイアウト
===================================== */

.kucol_2,
.kucol_3,
.kucol_x3,
.kucol_6{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

/* =====================================
   kucol_2（リンク＋画像）
===================================== */

.kucol_2{
	text-align: center;
}

.kucol_2 > *{
	width: calc(50% - 6px);
	margin-right: 12px;
	margin-bottom: 12px;
}

.kucol_2 > *:nth-child(2n){
	margin-right: auto;
}

/* 枠線 */
.kucol_2 ul{
	border: 1px solid #666;
	contain: layout paint;
}

.kucol_2.noline ul{
	border: none;
}

/* リスト */
.kucol_2 li,
.kucol_3 li,
.kucol_x3 li,
.kucol_6 li{
	margin-top: 5px;
	margin-bottom: 5px;
	border-radius: 15px;
}

.kucol_2 li:hover{
	opacity: 0.7;
	will-change: opacity;
}

/* 画像（CLS対策） */
.kucol_2 img{
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	display: block;
}

/* =====================================
   kucol_3（カテゴリ全体3カラム）
===================================== */

.kucol_3 > *{
	width: calc(100% / 3 - 8px);
	margin-right: 12px;
	margin-bottom: 12px;
}

.kucol_3 > *:nth-child(3n){
	margin-right: auto;
}

/* =====================================
   タブレット以下
===================================== */

@media screen and (max-width: 960px){

	.kucol_2 > *{
		width: 100%;
		margin-right: auto;
	}

	.kucol_3 > *{
		width: calc(50% - 6px);
	}

	.kucol_3 > *:nth-child(3n){
		margin-right: 12px;
	}

	.kucol_3 > *:nth-child(2n){
		margin-right: auto;
	}
}

/* =====================================
   スマホ最適化（6:4 + CWV）
===================================== */

@media screen and (max-width: 580px){

	/* カテゴリ全体 */
	.kucol_3 > *{
		width: 100%;
		margin-right: auto;
		content-visibility: auto;
		contain-intrinsic-size: 400px;
	}

	/* リンク＋画像を横並び */
	.kucol_2{
		align-items: center;
	}

	/* リンク側：6割 */
	.kucol_2 > div:first-child{
		width: 65%;
		text-align: left;
	}

	/* 画像側：4割 */
	.kucol_2 > div:last-child{
		width: 35%;
		text-align: right;
	}
}

/* =====================================
   軽量化・タップ最適化
===================================== */

body{
	text-rendering: optimizeSpeed;
}

a{
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.kucol_6 li img{
 max-height:250px;
}
.kucol_6 > *{
    width: calc(calc( 100% / 6 ) - 8px ) ;
    margin-right: 12px;
    margin-bottom: 12px;
}
.kucol_6 > *:nth-child(3n){
    margin-right: auto;
}
@media screen and (max-width: 960px) {
    .kucol_6 > *{
        width: calc( 50% - 6px ) ;
    }
    .kucol_6 > *:nth-child(3n){
        margin-right: 12px;
    }
    .kucol_6 > *:nth-child(2n){
        margin-right: auto;
    }
}
@media screen and (max-width: 580px) {
    .kucol_6 > *{
        width: 100%;
        margin-right: auto;
    }
    .kucol_6 > *:nth-child(3n){
        margin-right: auto;
    }
}
    .product6-list {
      display: flex;
      flex-wrap: wrap;
      gap: 5px; /* 隣り合うdiv同士の余白 */
      padding: 10px;
      box-sizing: border-box;
    }

    .product6 {
      background: #f9f9f9;
      border: 1px solid #ddd;
      border-radius: 6px;
      padding: 5px;
      box-sizing: border-box;
      flex: 0 0 calc(50% - 2.5px); /* 初期: スマホは2個ずつ */
    }

    .product6 img {
      max-width: 100%;
      height: auto;
      display: block;
      margin-bottom: 6px;
    }

    .product6 ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .product6 ul li {
      margin-bottom: 4px;
      font-size: 14px;
    }

    @media (min-width: 500px) {
      .product6 {
        flex: 0 0 calc(16.66% - 4.17px); /* PC時: 6個ずつ */
      }
    }
.col_4{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.col_4 > *{
    width: calc(calc( 100% / 4 ) - 8px ) ;
    margin-right: 10px;
    margin-bottom: 10px;
}
.col_4 > *:nth-child(4n){
    margin-right: auto;
}
.col_4 > * > *{
    position: relative;
    overflow: hidden
}
@media screen and (max-width: 580px) {
    .col_4 > *{
        width: 100%;
        margin-right: auto;
    }
    .col_4 > *:nth-child(4n){
        margin-right: auto;
    }
}