@charset "utf-8";
/* CSS Document */

/*----------------------------------------
 column
----------------------------------------*/

.col_1_sp{
width: 8.33%;
}

.col_2_sp{
width: 16.66%;
}

.col_3_sp{
width: 25%;
}

.col_4_sp{
width: 33.33%;
}

.col_5_sp{
width: 41.66%;
}

.col_6_sp{
width: 50%;
}

.col_7_sp{
width: 58.33%;
}

.col_8_sp{
width: 66.66%;
}

.col_9_sp{
width: 75%;
}

.col_10_sp{
width: 83.33%;
}

.col_11_sp{
width: 91.66%;
}

.col_12_sp{
width: 100%;
}

.dp_col_2{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(5, auto);
column-gap: 2%;
row-gap: 40px;
width: 100%;
}

.dp_col_3{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, auto);
column-gap: 2%;
row-gap: 40px;
width: 100%;
}

.dp_col_4,.dp_col_4_sp{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, auto);
column-gap: 2%;
row-gap: 40px;
width: 100%;
}

.dp_col_5,.dp_col_5_sp{
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, auto);
column-gap: 2%;
row-gap: 40px;
width: 100%;
}

.dp_col_row{
display: grid;
grid-template-rows: subgrid;
gap: 0;
width: 100%;
}

/* sp */

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

/*----------------------------------------
 column
----------------------------------------*/

.col_1{
width: 8.33%;
}

.col_2{
width: 16.66%;
}

.col_3{
width: 25%;
}

.col_4{
width: 33.33%;
}

.col_5{
width: 41.66%;
}

.col_6{
width: 50%;
}

.col_7{
width: 58.33%;
}

.col_8{
width: 66.66%;
}

.col_9{
width: 75%;
}

.col_10{
width: 83.33%;
}

.col_11{
width: 91.66%;
}

.col_12{
width: 100%;
}

.dp_col_2,
.dp_col_3,
.dp_col_4,
.dp_col_5{
display: grid !important;
grid-template-columns: 1fr !important;
gap: 20px 0;
}

.dp_col_4_sp,
.dp_col_5_sp{
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px 20px !important;
}

}