@charset "UTF-8";

/*
==================================================

   特集記事 カテゴリートップ

==================================================
*/



/*
==================================================
  メインエリア
==================================================
*/

/* ----- メイン ----- */
#main {
padding: 40px 40px 70px;
padding: 40px 40px 110px; /* 記事が埋まるまでの一時的に設定 */
background: #ffffff;
border-radius: 10px;
}

/* ----- メインヘッダ ----- */
#main header {
margin: 0 0 60px;
}

/* タイトル */
#main header h1 {
font-size: 2rem;
line-height: 1.4;
}

/* ----- コンテンツ ----- */
#contents {

}

/* ----- 記事の一覧 ----- */
#contents ul.articles {
display: flex;
flex-wrap: wrap;
gap: 40px 21px;
list-style-type: none;
}
#contents ul.articles li {
width: calc(33.33% - 14px);
}
#contents ul.articles li a {
display: block;
color: #2a2a2a;
text-decoration: none;
transition: 0.3s;
}
#contents ul.articles li a:hover {
color: #6b6b6b;
opacity: 0.9;
}
#contents ul.articles li figure {
margin: 0 0 10px;
border-radius: 10px;
overflow: hidden;
}
#contents ul.articles li figure img {
transform: scale(1.05); /* 不具合があるため少し大きくしている */
transition: 0.3s;
}
#contents ul.articles li a:hover figure img {
transform: scale(1.1);
}
#contents ul.articles li p {
line-height: 1.6;
}



/* ----- ★950 ----- */
@media screen and (max-width: 950px) {

/* ----- メイン ----- */
#main {
padding: 40px 30px 60px;
padding: 40px 30px 110px; /* 記事が埋まるまでの一時的に設定 */
border-radius: 8px;
}

/* ----- メインヘッダ ----- */
#main header {
margin: 0 0 40px;
}

/* タイトル */
#main header h1 {
font-size: 1.7rem;
line-height: 1.4;
}

/* ----- 記事の一覧 ----- */
#contents ul.articles {
gap: 35px 20px;
}
#contents ul.articles li {
width: calc(50% - 10px);
}
#contents ul.articles li a {
transition: 0s;
}
#contents ul.articles li a:hover {
color: #2a2a2a;
opacity: 1;
}
#contents ul.articles li figure {
margin: 0 0 10px;
border-radius: 0;
overflow: visible;
}
#contents ul.articles li figure img {
border-radius: 8px;
transform: scale(1);
transition: 0s;
}
#contents ul.articles li a:hover figure img {
transform: scale(1);
}

}
/* ----- /950 ----- */



/* ----- ★600 ----- */
@media screen and (max-width: 600px) {

/* ----- メイン ----- */
#main {
padding: 30px 10px 60px;
}

/* ----- メインヘッダ ----- */
#main header {
margin: 0 0 40px;
}

/* タイトル */
#main header h1 {
font-size: 1.4rem;
line-height: 1.6;
}

/* ----- 記事の一覧 ----- */
#contents ul.articles {
display: block;
}
#contents ul.articles li {
width: auto;
margin: 0 0 40px;
}
#contents ul.articles li:last-child {
width: auto;
margin: 0;
}

}
/* ----- /600 ----- */