@charset "utf-8";

/*-------------------------------------------------------------------------- 　TOP　トップページ -------------------------------------------------------------------------*/

/*----------------------　MV メインビジュアル　----------------------*/

#top_mv {
width:100%;
height:auto;
margin: 0 auto;
background-color: var(--bg_gray);
background: url(https://art-labo-coa.main.jp/wp-content/themes/alc/images/top_kumo.svg) no-repeat center;
background-size: contain;
background-position: bottom;
position:relative;
}
#top_mv img{
width:100%;
}
#top_mv h1{
width: 20%;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-weight: 300;
line-height: 2;
font-size: clamp(6px, 1vw, 12px);
position: absolute;
bottom: -30%;
left: 18%;
height: 100%;
color: #fff;
}
.js-lottie01{
  background: url(https://art-labo-coa.main.jp/wp-content/themes/alc/images/mv_photo.png) no-repeat center / 71.4%;
}





/*----------------------　TOP & アーカイブ投稿一覧　----------------------*/

main#contents_top{
margin-top:-1px;/*隙間隠し*/
background-color:white;
}

#top_blog{
  background-color: #fff;
}
main#contents_archive #top_blog{
  background-color: var(--bg_gray);
}

main#contents_top section#top_blog ul,
main#contents_archive ul{
width:100%;
max-width:1200px;
padding:0 20px;
margin:0 auto 30px;
display: flex;
flex-wrap: wrap;
justify-content:center;
gap:40px;
}
section#top_blog ul li,
main#contents_archive ul li{
width:20%;
min-width:260px;
text-align: left;
margin-bottom:30px;
}
section#top_blog ul li img,
main#contents_archive ul li img{
	border-radius: 10px;
  width: 100%;
height: 180px;
object-fit: cover;
}
dt.post_title{
margin:10px 0 0;
}
dd.post_category,dd.post_time{
display: inline;
font-size: clamp(12px,1.2vw,14px);
}
dd.post_time{
float: right;
}
main#contents_single ul.cate_date{
display: flex;
justify-content: space-between;
margin:30px 0;
}
ul.content-Tags{
display: inline-flex;
  margin: 0 auto 30px;
  gap: 30px;
  justify-content: center;
  font-size: 12px;
  flex-wrap: wrap;
}
ul.content-Tags li{
line-height:0;
}

/*------------------------------------------------------
　TOP　タブレット　768以下　ここから
------------------------------------------------------*/

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


}

/*------------------------------------------------------
　TOP　スマホ　640以下　ここから
------------------------------------------------------*/
@media screen and (max-width: 639px) {/*スマホの横向きの最小機種幅640以下はスマホレイアウト*/

/*----------- TOP MV SP ----------*/

#top_mv h1 {
width: 65%;
position: absolute;
top: 28%;
text-align: center;
font-size: clamp(8px, 3vw, 20px);
line-height: 2.5;
}
#top_mv {
background-size: 200%;
}
.js-lottie02{
  background: url(https://art-labo-coa.main.jp/wp-content/themes/alc/images/mv_photo_sp.png) no-repeat center / 90%;
  background-position-y: 38.5%;
}

/*----------------------　TOP投稿一覧　----------------------*/

main#contents_top {
margin-top:-1px;/*隙間隠し*/
}
main#contents_top section#top_blog ul,
main#contents_archive ul{
width:100%;
padding: 15px 15px 30px;
}
section#top_blog ul li{
width:80%;
margin:0 auto 30px;
	}
	
.foot_bnr{display: none;}


}