@charset "utf-8";
@import url("root.css");

/***************************************
------------- アイテム -------------
***************************************/
#item{}

#item .row{
justify-content:flex-start;
margin: 30px auto 0;
width:100%;
}

#item .col_05{
border:3px solid var(--base-color03);
background: linear-gradient(to bottom, #fffcf6 0%, #fff8f8 100%);
position: relative;
text-align: center;
padding:15px  0;

width: calc((100% - 60px) / 4);
margin-right: 20px;
margin-bottom: 20px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

#item .col_05:nth-child(5n) {margin-right:20px;}
#item .col_05:nth-child(4n) {margin-right: 0;}

#item .col_05 a{
padding:15px 0;
}

#item .col_05::before {
content: "";
position: absolute;
top: -3px;
left: -3px;
width: 0;
height: 0;
border-top: 43px solid var(--base-color04);
border-right: 43px solid transparent;
}

#item h4{
font-size: 24px;
font-weight: 900;
color: var(--base-color04);
border-bottom: 0px;
margin: 0 auto 0;
}
#item img{
width: 80%;
padding: 15px 0;
}

#item p{font-weight: 600;}
#item .link_a{margin: 20px auto 0;}


#item .item_img{
border: 1px solid var(--base-color_bg_a);
text-align: center;
}

#item .item_img_row{
margin: 0 auto 0;
}


#item .h3_bottom{
margin: 50px auto 30px;
}

@media screen and (min-width: 600px) and (max-width: 1024px) {
#item .row{width:100%;}
#item h4{font-size: 18px;}
#item p{font-size: 16px;}




#item .col_05{
width: calc((100% - 40px) / 3);
margin-right: 20px;
margin-bottom: 20px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

#item .col_05:nth-child(5n) {margin-right:20px;}
#item .col_05:nth-child(4n) {margin-right: 20px;}
#item .col_05:nth-child(3n) {margin-right: 0;}


}


@media screen and (max-width: 599px) {
#item{}

#item .row{
margin: 20px auto 0;
width: 100%;
}

#item .col_05{
padding:10px  0;

width: calc((100% - 20px) / 2);
margin-right: 20px;
margin-bottom: 20px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

#item .col_05:nth-child(5n) {margin-right:20px;}
#item .col_05:nth-child(4n) {margin-right: 20px;}
#item .col_05:nth-child(3n) {margin-right: 20px;}
#item .col_05:nth-child(2n) {margin-right: 0;}
}

#item .col_05 a{
padding:15px 0;
}


#item .col_05::before {
border-top: 20px solid var(--base-color04);
border-right: 20px solid transparent;
}

#item h4{font-size: 20px;}

#item img{
width: 80%;
padding: 15px 0;
}

#item p{line-height: 1.6;}
#item .link_a{margin: 20px auto 0;}

}