/*
Theme Name: myTheme
Theme URI: 
Author: atsu
Author URI: 
Description: ブロックエディター練習用のためのテーマ。
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mytheme
Tags: 
*/

/* 見出し：丸付飾り罫線 */
:is(h1,h2,h3,h4,h5,h6).is-style-decorationLine{
    padding-bottom: 0.5em;
    border:solid 12px transparent;
    border-image: url(assets/images/line.svg) 12;
}

/* カテゴリー一覧：リストアイコンなしの指定 */
.wp-block-categories.is-style-noListMark{
    list-style: none;
    padding-left: 0;
}

/* 
aboutページ
カバー画像とフッター部分余分な余白の削除 
*/
.wp-block-template-part.is-style-marginTop0{
    margin-top: 0;
}

/* 記事投稿日アイコンの指定 */
.wp-block-post-date.is-style-clockIcon::before{
    content: url(assets/images/clock-regular.svg);
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    vertical-align: -0.125em;
    margin-right: 0.4em;
    opacity: 0.3;
}

/* サイトタイトルのリンク下線なしの指定 */
.wp-block-site-title a{
    text-decoration: none;
}

/* 404ページ隙間用余白追加 */
.error404 main,
.search-no-results main{
    padding: 8vh 0;
}
@media screen and (min-width:768px) and ( max-width:1367px){
    .error404 main,
    .search-no-results main{
        padding: 24vh 0;
    }
}

/* 段落ブロック：スクロールアニメーション(トップページ) */
p.is-style-scrollDown{
    position: relative;
    left: -12px;
    height: 144px;
    border-right: 1px solid var(--wp--preset--color--dark-gray);
    writing-mode: vertical-rl;
    padding: 0 8px 0 0;
}
p.is-style-scrollDown::before{
    content: "";
    position: absolute;
    top: 0;
    right: -7px;
    width: 12px;
    height: 12px;
    border: 1px solid var(--wp--preset--color--dark-gray);
    border-radius: 50%;
    background-color: var(--wp--preset--color--primary);
    animation: scroll 4s infinite;
}
@keyframes scroll {
    0% {
      top: 0%;
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      top: 100%;
      opacity: 0;
    }
}

/* カラムブロック：モバイル逆順 */
@media ( max-width:781px){
    .wp-block-columns.is-style-reverse{
        flex-direction: column-reverse;
    }
}

/* メインビジュアル画像スマホ時のみ全幅指定 */
@media ( max-width:767px){
    .nagativeMargin{
        margin: 0 -20px !important;
    }
}