/* 個別記事ページ共通部分専用CSSファイル */


/*
記事部分ブロックの指定専用CSSファイル 
主な共通事項として、mainタグに掛けたarticleクラスで記事だけを指定
*/


/* 記事部分とヘッダーとフッターとの余白指定 */
main.wp-block-post-featured-image{
    margin-left : -16px !important;
    margin-right : -16px !important;
}

/* 各見出しの指定 */
/* h1 */
.article h1{
    margin-top: 0.48em;
    line-height: 1.6;
    font-size: clamp(1.4rem, 5vw, 2.4rem) !important;
    font-weight: 500;
    letter-spacing: 0.112em;
}
.article h2{
    color: #149698;
	margin-top: 4.4em;
    line-height: 1.6;
}
.article h3{
	margin-top: 3em;
    line-height: 1.6;
}

/* 全背景装飾灰色文字 */
.article h1::before {
    content: attr(data-category-label);
    font-size: clamp(5.12rem, 15vw, 14rem);
    line-height: 1;
}
/* 個別指定 */
/* Web Design */
.article h1[data-category-label="Web Design"]::before {
    content: "Web\A Design";
    white-space: pre;
    font-size: clamp(5rem, 13.6vw, 10.8rem);
}

/* Video Editing */
.article h1[data-category-label="Video Editing"]::before {
    content: "Video\A Editing";
    white-space: pre;
    font-size: clamp(5rem, 13.6vw, 8.8rem);
}

/* 
管理画面「ブロックの間隔」でかけた余白を、アイキャッチ直下のブロックにだけ適用させない指定。
※投稿：見出し開始テンプレートのすべてのh2見出しに指定した上余白と、「ブロックの間隔」でかけた余白の重複を消すために指定。
※投稿：本文開始テンプレートはそちらのみアイキャッチ自体に余白を設けているため問題なし。

また、フッターにも同じ指定。
*/
main.article.wp-block-group > .wp-block-group:nth-of-type(2),
footer{
  margin-block-start: 0 !important;
}

/* アイキャッチ画像の指定 */
main.article .wp-block-post-featured-image{
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, 
    rgba(50, 50, 93, 0.16) 0px 50px 100px -20px, 
    rgba(0, 0, 0, 0.24) 0px 30px 60px -30px;
}
main.article .is-default-thumbnail{
	margin-bottom: 80px;
}
main.article .is-default-thumbnail img{
    height: auto !important;
}


/* 動画挿入ポスター画像指定の際に起こる不具合の修正 */
main.article .wp-block-video [poster] {
    /* object-fit: cover; */
    object-fit: contain;
}


@media screen and (min-width: 768px){
    /* Web Design */
    .article h1[data-category-label="Web Design"]::before {
        content: "Web Design";
        line-height: 1;
    }
    /* Video Editing */
    .article h1[data-category-label="Video Editing"]::before {
        content: "Video Editing";
        line-height: 1;
    }
}


/* PC以降 */
@media screen and (min-width: 1025px) {
    main .wp-block-post-featured-image{
        margin-left : auto !important;
        margin-right : auto !important;
    }
}

/* PC以降 */
@media screen and (min-width: 1313px){
     .article h1{
        grid-template-columns: calc((100vw - 1024px) / 2) auto;
    }
    .article h1 span{
        grid-column: 1/3;
    }
    .article h1::before{
        grid-column: 1/3;
    }
    .article h1::after { 
        margin-left: calc((1024px - 100vw) / 2 - 16px);
    }
}