/* 
* 基本スタイル定義とコンテンツ内で使用するブロック定義 
* 
*/
@charset "UTF-8";

/*--------------------------------------------------------------
# Variable (Size and Color)
--------------------------------------------------------------*/
:root {
    --jb--size-main-max-width: 1200px;
    /* 1カラムページ Regular  120 + 960 + 120 = 1200 */
    --jb--size-large-margin: 120px;
    /* 1カラムページ Wide      88 + 1024 + 88 = 1200 */
    --jb--size-small-margin: 88px;
    /* 2カラムページ コンテントマージン */
    --jb--size-default-margin: 32px;

    /* ライト系基本色 RGB */
    --jb--color-background-mark: yellow;
    --jb--color-selection: lightcyan;
    --jb--color-background-pre: rgba(128, 128, 128, .1);
    --jb--color-button: rgb(60, 132, 244);
    --jb--color-button-lighten: rgb(80, 144, 246);
    
    /* カスタマイザーで変更可能な色定義 */
    /* 基本色の lighten, darken を扱いやすいよう HSL 色相（0から360度）彩度（0から100%）明るさ（0から100%）も定義 */
    --jb--color-rgb-background-body: 247 247 247;
    --jb--color-hsl-background-body: 0 0% 97%;
    --jb--color-rgb-text-header: 255 255 255;
    --jb--color-hsl-text-header: 0 0% 100%;
    --jb--color-rgb-text-main: 34 34 34;
    --jb--color-hsl-text-main: 0 0% 13%;
    --jb--color-rgb-theme-main: 31 102 173;
    --jb--color-hsl-theme-main: 210 70% 40%;
    --jb--color-rgb-theme-link: 0 102 255;
    --jb--color-hsl-theme-link: 216 100% 50%;
    --jb--color-rgb-theme-sub: 0 195 0;
    --jb--color-hsl-theme-sub: 120 100% 38%;
    
    --jb--color-hsl-background-content: 0 0% 100%;
    --jb--color-hsl-headline: 0 0% 23%;
    --jb--color-hsl-text-sub: 0 0% 38%;
    --jb--color-hsl-text-meta: 0 0% 28%;
    --jb--color-hsl-border: 0 0% 75%;
}

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    margin: 0;
}

article,
aside,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section {
    display: block;
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden],
template {
    display: none;
}

a{
    background-color: transparent;
    color: hsl(var(--jb--color-hsl-theme-link));
}

a:active,
a:hover {
    outline: 0;
}

b,
strong {
    font-weight: bold;
}

dfn {
    font-style: italic;
}

mark {
	background-color: var(--jb--color-background-mark);
    color: inherit;
    color: contrast-color(var(--jb--color-background-mark));     
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

img {
    border: 0;
}

svg:not(:root) {
    overflow: hidden;
}

hr {
    box-sizing: content-box;
    height: 0;
}

pre {
    overflow: auto;
}

code,
kbd,
pre,
samp {
    font-family: monospace;
    font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
    font: inherit;
    margin: 0;
}

button {
    text-transform: none;
    overflow: visible;
}

select {
    text-transform: none;
}

button,
input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled],
input[disabled] {
    cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input {
    line-height: normal;
}

input[type=checkbox],
input[type=radio] {
    box-sizing: border-box;
    padding: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    height: auto;
}

input[type=search] {
    -webkit-appearance: textfield;
    box-sizing: content-box;
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
}

optgroup {
    font-weight: bold;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,
th {
    padding: 0;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    margin-block-start: 1.5em;
    margin-block-end: 1em;
    margin-inline: 0;
    word-wrap: break-word;
}

p {
    margin-block-start: 1.25em;
    margin-block-end: .75em;
    margin-inline: 0;
    word-wrap: break-word;
}

dfn, cite {
    text-decoration: underline dashed;
}

del, s {
    text-decoration: line-through;
}

address {
    margin-block: 20px;
    margin-inline: 8px;
}

pre {
	background: var(--jb--color-background-pre);
	font-family: var(--wp--preset--font-family--code-font);
    font-style: normal;
    font-size: 90%;
	line-height: 1.4;
    padding: 1em;
	max-width: 100%;
    max-height: 90vh;
	overflow: auto;
    white-space: pre;
}

code, kbd, tt, var, samp {
	background: var(--jb--color-background-pre);
	font-family: var(--wp--preset--font-family--code-font);
    font-style: normal;
    padding: 3px;
}

kbd {
	border: 1px solid hsl(var(--jb--color-hsl-text-main));
    border-radius: 3px;
}

abbr, acronym {
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: help;
}

a abbr, a acronym {
    border: none;
}

dfn[title], abbr[title], acronym[title] {
    text-decoration: underline dotted;
    cursor: help;
}

ins {
  background: hsl(54 100% 78% / .5);
  text-decoration: none;
}

big {
    font-size: 125%;
}

sup {
    vertical-align: super;
}

sub {
    vertical-align: sub;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
    box-sizing: border-box;
    height: 100%;
    scroll-behavior: smooth;  /* ignored body overflow-x: hidden */
}

*,
*:before,
*:after {  
    /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
    box-sizing: inherit;
}

body {
    overflow-x: hidden;  /* fullwide 100vw scrollbar area overflow */
    background: hsl(var(--jb--color-hsl-background-body));
    color: hsl(var(--jb--color-hsl-text-main));    
}

ul, ol {
    margin: 0;
    margin-block: 1.5em;
    padding: 0;
    padding-inline: 2em;
}

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}

li > ul,
li > ol {
    margin: 0;
    padding-inline: 1.5em 0;
}

dt {
    font-weight: bold;
}

dd {
    margin: 0 0 20px;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: auto;
    margin: 18px auto;
}

th, td {
    border: 1px solid #ccc;
    font-size: 95%;
    line-height: 1.5;
    padding: 4px 8px;
}

th {
    font-weight: bold;
}

td {
    text-align: left;
}

hr {
    background: #aaa;
    border: none;
    clear: both;
    height: 1px;
    width: 100%;
    margin-block: 1.25em;
    margin-inline: 0;
    &.space {
        background: white;
        color: white;
    }
}

/*** image ***/
figure {
    margin: 0 auto;
}

img {
    border: 0;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

/**** Visibility ****/
.hidden {
    visibility: hidden;
}

.visible {
    visibility: visible;
}

.none {
    display: none;
}

/* author, update 非表示制御 */
.byline {
	display: none;
}

/* Posts and pages */
.sticky {
	display: block;
}

/*** accessibility ***/
/* Text meant only for screen readers. */
.screen-reader-text,
.wp-block-search__label {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* alignment */
.alignnone {
    clear: both;
}

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

.aligncenter {
    clear: both;
    margin-right: auto;
    margin-left: auto;
}

img {
    &.alignnone {
      margin-top: .5rem;
      margin-bottom: 1.5rem;
    }
    &.alignleft {
        display: inline;
        margin: .5rem 2rem 1.5rem 0;
    }
    &.alignright {
        display: inline;
        margin: .5rem 0 1.5rem 2rem
    }
    &.aligncenter {
        display: block;
        margin: .5rem auto 1.5rem;
    }
}

figure {
    &.alignleft {
        margin-right: 2rem;
        margin-left: 0;
        margin-bottom: 1.5rem;
    }
    &.alignright {
        margin-right: 0;
        margin-left: 2rem;
        margin-bottom: 1.5rem;
    }
    &.aligncenter {
        text-align: center;
    }
}

/* clearings */
.clearfix:before,
.navigation:before,
.site-header:before,
.site-content:before,
.site-footer:before {
    content: "";
    display: table;
}

.clearfix:after,
.navigation:after,
.site-header:after,
.site-content:after,
.site-footer:after {
    content: "";
    display: table;
    clear: both;
}

/*--------------------------------------------------------------
# Page/Content
--------------------------------------------------------------*/
#page {
	margin: 0 auto;
	padding: 0;

    .content-wrap {
        margin: 24px auto;
        padding: 0 8px;
    	max-width: var(--jb--size-main-max-width);
        &:has(.singular-content){
            margin-top: 0;
        }
    }
}
@media screen and (max-width: 480px) {
    #page {
        .content-wrap {
            padding: 0 2px;
        }
    }
}

#content {
    margin-block-end: 40px;
    padding: 0;

    .site-main {
        clear: both;
        /* margin: 0px auto; 2カラム時にカクつく*/
        margin: 0;
        position: relative;
        border: none;
        border-radius: 3px;
        background: hsl(var(--jb--color-hsl-background-content) / .95);
    }
}

.entry-breadcrumb,    
.entry-content,
.entry-footer {
	clear: both;
  	margin: 0;
    margin-inline: var(--jb--size-default-margin);
}
@media screen and (max-width: 480px) {
    .entry-breadcrumb,    
    .entry-content,
    .entry-footer {
        margin-inline: 10px;
    }
}

.full-width {
    .entry-breadcrumb,    
    .entry-content,
    .entry-footer {
        margin-inline: var(--jb--size-large-margin);
    }
    &.small-margin {
        .entry-breadcrumb,    
        .entry-content,
        .entry-footer {
            margin-inline: var(--jb--size-small-margin);
        }
    }
}
@media screen and (max-width: 800px) {
    .full-width,
    .full-width.small-margin{
        .entry-breadcrumb,    
        .entry-content,
        .entry-footer {
            margin-inline: var(--jb--size-default-margin); 
        }
    }
}
@media screen and (max-width: 480px) {
    .full-width,
    .full-width.small-margin{
        .entry-breadcrumb,    
        .entry-content,
        .entry-footer {
            margin-inline: 10px;
        }
    }
}

#page-bottom {
	clear: both;
	margin-block-end: 0;
	padding-top: 0;
	width: 100%;
}

/* wide or full blocks */
.site-content {
    .alignwide,
    .alignfull {
        margin-left: calc(0px - var(--jb--size-default-margin)); 
        margin-right: calc(0px - var(--jb--size-default-margin)); 
        width: calc(100% + var(--jb--size-default-margin) + var(--jb--size-default-margin));
        max-width: calc(100% + var(--jb--size-default-margin) + var(--jb--size-default-margin));
    }
    & figure.alignwide {
        & img, 
        & video {
            width: 100%;
        }
    }
    
    &.full-width {
        .alignfull {
            margin-left: calc(-50vw + 50%);
            margin-right: calc(-50vw + 50%);
            width: 100vw;
            max-width: 100vw;

            > img, 
            > video {
                width: inherit;
                max-width: inherit;
            }
            .blocks-gallery-item { 
                & img {
                    width: 100%;
                    max-width: 100%;
                }
            }
        }
    }
}
@media screen and (max-width: 480px) {
    .site-content {
        .alignwide, 
        .alignfull {
            margin-left: -12px; 
            margin-right: -12px; 
            width: calc(100% + 24px);
            max-width: calc(100% + 24px);
        }
    }
}
@media screen and (min-width: 801px) {
    .site-content.full-width {
        .alignwide {
            margin-left: calc(0px - var(--jb--size-large-margin)); 
            margin-right: calc(0px - var(--jb--size-large-margin)); 
            width: calc(100% + var(--jb--size-large-margin) + var(--jb--size-large-margin));
            max-width: calc(100% + var(--jb--size-large-margin) + var(--jb--size-large-margin));
        }
        &.small-margin { 
            .alignwide {
                margin-left: calc(0px - var(--jb--size-small-margin)); 
                margin-right: calc(0px - var(--jb--size-small-margin)); 
                width: calc(100% + var(--jb--size-small-margin) + var(--jb--size-small-margin));
                max-width: calc(100% + var(--jb--size-small-margin) + var(--jb--size-small-margin));
            }
        }
    }
}

.entry-content {
    > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        margin-left: auto;
        margin-right: auto;
    }
    
    /* group, cover */    
    .wp-block-group,
    [class*="__inner-container"],
    [class*="wp-block-"].alignwide,
    [class*="wp-block-"].alignfull {     
        .alignfull, 
        .alignwide {
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            max-width: 100%;
        }
    }
}

/* Captions */
caption {
	padding-bottom: 12px;
}
.wp-caption {
	margin-bottom: 1.5rem;
	max-width: 100%;
    padding: 0 0 8px 0;
    text-align: center;
    
	& img[class*="wp-image-"] {
        text-align: center;
        display: block;
        margin: 4px auto 8px;
	}    
}

.wp-caption-text {
    color: inherit;
    font-size: .84em;
    line-height: 1.3;
    margin: 8px 0;
    padding: 4px 10px;
	text-align: center;
}

/* Videos */
video {
    object-fit: cover;
    max-width: 100%;
    height: auto;
}

/* Audio */
audio {
    width: 100%;
}

/*--------------------------------------------------------------
# Forms　フォーム
--------------------------------------------------------------*/
button,
input,
select {
    overflow: visible;
    vertical-align: baseline;
    width: auto;
}

textarea {
    overflow: auto;
    vertical-align: text-top;
    width: 100%;
}

select {
    padding: 2px;
}

legend {
    padding-left: 1em;
    padding-right: 1em;
}

legend + * {
    margin-top: 1em;
}

fieldset {
    border: 1px solid #ccc;
    margin: 1em 0;
    padding: 0 1em 1em;
}

::selection {
    background: var(--jb--color-selection);
    color: contrast-color(var(--jb--color-selection));
}

/* Links */
a {
	text-decoration: none;

    &:hover,
	&:focus {
        outline: 0;
        text-decoration: underline;
    }
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
textarea {
    border: 1px solid hsl(var(--jb--color-hsl-border));
    margin: 0;
    max-width: 100%;
    &:focus {
        border: 2px solid hsl(var(--jb--color-hsl-border));
        outline: 0;
    }
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search] {
    font-size: inherit;
    line-height: inherit;
    padding: .5em 2px .5em 6px;    
    cursor: text;   
}

input[type=search] {
    -webkit-appearance: textfield;
    padding-right: 2px;
    /* Don't cut off the webkit search cancel button */
    margin-right: 4px;
} 

button,
input[type=button],
input[type=reset],
input[type=submit] {
    font-size: inherit;
    line-height: inherit;    
    cursor: pointer;
}   
    
:is(.celtis-styles, .is-root-container) {    
    & button:not(:is([class*='social-link'], [class*='wp-block-navigation'], .pswp__button, .customize-partial-edit-shortcut-button)),
    & input[type=button],
    & input[type=reset],
    & input[type=submit] {
        padding: .5em 1.5em;
        border: 1px solid var(--jb--color-button-lighten);
        background: var(--jb--color-button);
        color: white;
        &:hover,
        &:focus {
            background: var(--jb--color-button-lighten);
            color: white;
        }
    }
}

/* content */
:is(.celtis-styles, .is-root-container) {
    :is(h1,h2,h3,h4,h5,h6) {
		&:not(.has-text-color) {
            color: hsl(var(--jb--color-hsl-headline));
		}
    }
    > h2:not(:is([class*='background'], [class*='border'], .is-style-cpicon, .alignwide, .alignfull, .widget-title)) {
        position:relative;
        border-bottom: 1px solid hsl(var(--jb--color-hsl-theme-main));
        padding: .5em .7em;
        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 15%;
            margin-left: -10px;
            width: 6px;
            height: 70%;
            border-radius: 4px;
            background: hsl(var(--jb--color-hsl-theme-sub));
        }
    }
    /* タイトルを inline-block にしての装飾はブロックエディタとの相性が悪いので将来的には廃止予定 */    
    > h3:not(:is([class*='background'], [class*='border'], .is-style-cpicon, .alignwide, .alignfull, .widget-title)) {
        position: relative;
        display: inline-block;
        padding: .5em .2em;

        /* inline block content width fit under line */
        &::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            height: 1px;
            width: 100%;
            background: hsl(var(--jb--color-hsl-theme-main));
        } 
        
        &[class*="has-text-align-center"] {
            top: 0;
            left: 50%; /* 親要素の50%の位置 */
            transform: translateX(-50%); /* 要素の中心を親要素の中心に合わせる */
        }
        &[class*="has-text-align-left"] {
            top: 0;
            left: 0%;
        }
        &[class*="has-text-align-right"] {
            top: 0;
            left: 100%;
            transform: translateX(-100%);
        } 
        /* 通常はない配置だが h3 要素が連続する場合は横並びとなるので inline-block を解除 */
        + h3 { 
            display: block;
            &::after {
                width: auto;
            }             
        }
    }
    :is(h2,h3,h4,h5,h6) {
        & small {
            display: block;
            font-size: 15px;
            font-weight: 400;
        }
        &.has-background {
            padding: 1em;
        }
    }
    & p {
        line-height: 1.5;
        &.has-text-color a {
            color: inherit;
        }
        &.has-background {
            padding: 1em;
            border-radius: 4px;
        }        
    }
    & p[class*="post-author"] {
        margin: 0 0 4px;
    }
    .has-small-font-size,
    .has-normal-font-size,
    .has-medium-font-size {
        line-height: 1.5;
    }
    .has-m-large-font-size,
    .has-large-font-size {
        line-height: 1.4;
    }
    .has-x-large-font-size {
        line-height: 1.3;
    }

    /*
     Don't show the drop cap when editing the paragraph's content. It causes a
     number of bugs in combination with `contenteditable` fields. The caret
     cannot be set around it, caret position calculation fails in Chrome, and
     typing at the end of the paragraph doesn't work.
     段落の内容を編集するときにドロップキャップを表示しないでください。`contenteditable`フィールドと組み合わせたバグの数 キャレット Chromeのキャレット位置の計算に失敗し、段落の最後に入力しても機能しません。
    */
    .has-drop-cap:not(:focus):first-letter {
        float: left;
        font-size: 2.8em;
        font-weight: normal;
        line-height: 0.88;
        text-transform: uppercase;
        margin-block-start: 0.05em;
        margin-block-end: 0em;
        margin-inline-start: 0em;
        margin-inline-end: 0.15em;        
    }
    .has-drop-cap.has-m-large-font-size:not(:focus):first-letter,
    .has-drop-cap.has-large-font-size:not(:focus):first-letter {
        font-size: 2.6em;
    }
    .has-drop-cap.has-x-large-font-size:not(:focus):first-letter {
        font-size: 2.5em;
    }    
}

/* 定義対象用語、作品名、強調箇所 */
dfn, cite, em {
    margin: 0 6px;
}

/* underline color */
u {
    text-decoration: underline red solid;
    text-underline-offset: 1px;
    text-underline-position: under;
}

/* blockquote */
blockquote {
   	font-style: italic;
    background: hsl(0 0% 50% / 10%);
	overflow: auto;
    position: relative;
	padding: 1.5em;
	margin: 1em 8px;
    border-left: 6px solid hsl(var(--jb--color-hsl-border));

    > *:first-child {
        margin-top: 0;
    }
    & a {
        color: inherit;
    }
    &:not([class*='has-text-align']) cite {
        float: right;
        margin-right: 1.5em;
    }
}

ul.is-grid {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    & li {
        margin: 8px;
        padding: 10px;
        list-style-type: none;
        border: 1px solid hsl(var(--jb--color-hsl-border));
    }    
}
@media screen and (max-width: 480px) {
    & ul.is-grid[class*="columns-"] li {
        width: 100%;
    }
}

/* リスト等の偶数、奇数 */
.even {
    background: hsl(0 0% 80% / 5%);
}
.odd {
    background: hsl(0 0% 20% / 5%);
}

/*--------------------------------------------------------------
# WP Core Blocks
--------------------------------------------------------------*/
/* all blocks*/
/* block template の wp-block-post-content で is-layout-constrained 等でマージン等のスペースを Global style で調整しているが、一部 important を使用しているので、PHPテンプレートに is-layout-constrained クラスを入れると full wide が崩れるので今のところそのあたりのCSS共通化は難しい */

*:not(:where(p, a, span, li, li > ul, li > ol, button, footer, time, [aria-hidden], .rich-text, [class*="_inner-container"]))[class*="wp-block-"] {
    margin-block-start: var(--wp--style--block-gap, 1.5rem);

    &[class*="__image"],
    &[class*="post-author"],
    &[class*="post-date"],
    &.avatar { 
        margin-block-start:0;
    }
}

.is-layout-flow > :where([class*="-author"], [class*="-date"]) {
    margin-block-start: 0;
}

.has-text-align-right {
	text-align: right;
}
.has-text-align-left {
	text-align: left;
}
.has-text-align-center {
	text-align: center;
}

*[class*="wp-block-"] {
    &.alignleft {
        margin-right: 2rem;
        margin-bottom: 1.5rem;
    }
    &.alignright {
        margin-left: 2rem;
        margin-bottom: 1.5rem;
    }
    &.aligncenter {
        clear: both;    
        margin-left: auto;
        margin-right: auto;
    }
    
    & p {
		&:not(.has-text-color) {
			color: inherit;
		}
    }
    & time {
        display: block;
        color: inherit;
    }
    [class*="-author"] {
        color: inherit;
    }
    [class*="comment-author"] {
        color: inherit;
    }
    [class*="-excerpt"], [class*="-excerpt"] p {
        font-size: 13px;
        line-height: 1.3;
        margin-top: 4px;
        color: inherit;
        word-wrap: break-word;
        overflow: hidden;
    }
    [class*="__item"],
    [class*="_inner-container"] {
        > *:first-child {
            margin-block-start: 0;
        }
    }
    & figcaption {
        color: inherit;
        font-size: .84em;
        line-height: 1.3;
        margin: .7em 0 1em;
        padding: 4px 10px;
        text-align: center;
    }    
}

.wp-block-group {
    clear: both;
    & .has-global-padding {
        padding-right: 0;
        padding-left: 0;
    }    
}

.wp-block-image {
    width: auto;
    max-width: none;
}

.is-style-rounded {
    & img {
        margin: inherit;
        border-radius: 9999px;
    }
}

body {
  --icon-circle-mask : url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
}  
.is-style-circle-mask img {
    margin: inherit;
    border-radius: 50%;
    border: 0px;

    -webkit-mask-image: var(--icon-circle-mask);
    mask-image: var(--icon-circle-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Celtis製旧テーマ互換のためブロックCSS調整 */
/* wp-block-columns メディアクエリー切り替えサイズの置き換え */
/* wp-block-media-text モバイルの縦並びの時の上下にパッディング追加 */
:where(.wp-block-media-text__content) > :first-child:first-child {
    margin-block-start: 0;
}
@media (max-width: 781px){
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: 0 !important;
    }
}
@media (max-width: 600px){
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: 100% !important;
    }
    .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
        padding: 8%;
    }    
}

/* wp-block-cover 互換のためベースは白文字とする */
.wp-block-cover {
    min-height: 44vh;
    &.is-light {
		.wp-block-cover__inner-container {
			/* color: #000; */
            color: #fff;
		}
	}
    :is(h1,h2,h3,h4,h5,h6) {
        margin: .7em 0;
        padding: 0;
        border: none;
    }
    *:not(.has-text-color).wp-block-cover-text {
        color: #fff;
        & a {
            color: #fff;
            &:active, 
            &:focus, 
            &:hover, 
            &:visited {
                color: #fff;
            }
        }
    }       
}

/* wp-block-gallery */
.wp-block-gallery {
    --wp--style--gallery-gap-default: 4px;  
    gap: var(--wp--style--gallery-gap-default, 4px);
}
figure.wp-block-gallery {   
    .blocks-gallery-item,
    figure.wp-block-image:has(figcaption) {
        &:not(:hover) {            
            &:before {
                backdrop-filter: none;
            }
            figcaption {
                transition: .5s ease-in-out;
                opacity: 0;
            }            
        }
        &:hover {
            figcaption {
                transition: .5s ease-in-out;
                opacity: 1;
            }            
        }
    }
}

/* List block with background-color */
ul.has-background, 
ol.has-background {
	padding: 1.25em 3em;
}

:is(.celtis-styles, .is-root-container) {  
    .wp-block-button{
        &.aligncenter {
            text-align: center;
        }
        /* WP6.8 .wp-block-buttons>.wp-block-button の幅指定しか効かなくなったので単体ボタン用に追加 */
        &.wp-block-button__width-25{
          width:calc(25% - var(--wp--style--block-gap, .5em)*.75);
        }
        &.wp-block-button__width-50{
          width:calc(50% - var(--wp--style--block-gap, .5em)*.5);
        }
        &.wp-block-button__width-75{
          width:calc(75% - var(--wp--style--block-gap, .5em)*.25);
        }
        &.wp-block-button__width-100{
          width:100%;
        }
        &.has-custom-width {
            .wp-block-button__link {
                width: 100%;
            }
        }
    }
    /* wp-block-button ページ内でボタンブロック未使用でもコメントフォーム等で使用しているので wp-block-button__link は消さないこと */
    /* WP6.8 width: 100% 変更されたが互換性を保つため auto へ戻す */
    .wp-block-button__link {
        overflow-wrap: break-word;
        white-space: normal;    
        /* padding は global style から設定されるので設定しない */
        /* border-radius は wp-block-button を継承 */
        border-radius: inherit;
        cursor: pointer;
        display: inline-block;
        font-size: 1.125em;
        line-height: 1.4;
        text-align: center;
        width: auto;
        text-decoration: none;
        &:hover {
            opacity:0.8;
            text-decoration:none;
        }
    }
 
    .is-style-outline .wp-block-button__link {
        border-style: solid;
        border-width: 3px;
        &:not(:hover) {
            background: transparent !important;
        }
        &:hover {
            border-color: inherit;
            opacity:1;
            transition: all 150ms ease-in-out;
        }
        &:not(.has-background):hover {
            color: inherit;
        }
        &.has-background:not(:where(.has-info-background-color, .has-success-background-color, .has-notice-background-color, .has-alert-background-color, .has-aside-background-color, .has-light-background-color)):hover {
            border-color: transparent;
            color: #FFF !important;
        }
    }
}

.wp-block-file .wp-block-file__button.wp-element-button {
	background-color: var(--jb--color-button);
    color: #FFF;
    color: contrast-color(var(--jb--color-button)); 
    border-radius: inherit;
}
.wp-block-separator.is-style-dots:before {
    color: inherit;
}
hr:not(.block-editor-block-list__block).wp-block-separator:not(.is-style-dots) {
    border-bottom-color: transparent;
    border-bottom-width: 1px;
}

/* wp-block-pullquote */
.wp-block-pullquote { 
    & blockquote {
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
        & em {
            font-style: italic; 
            border: none;
        }
        & cite, 
        .wp-block-pullquote__citation {
            float: none;
            margin: 0 auto;
            border: none;
        }
    }    
}

.wp-block-query {
    & ul,
    & ol {
        margin: 0;
    }
}