@charset "utf-8";

.editor-styles-wrapper {
    word-break: break-all;
}
.editor-styles-wrapper h2,
.editor-styles-wrapper h2.wp-block /* editor用 */{
    width: 100%;
    position: relative;
    padding: 1rem 1.5rem;
    margin: 3rem auto 1rem !important;
    outline: 2px dashed #fff;
    outline-offset: -8px;
    border-radius: 10px;
    color: #fff;
    background-color: #009e9d;   /* デフォルトカラー */
    font-weight: bold;
    font-size: 1.9rem;
    overflow-wrap: break-word;
    line-height: 1.5;
}
h2.bg-yellow {
    color: #222!important;
}
.editor-styles-wrapper h3 { font-size: 24px !important; font-weight: 700; line-height: 2.2rem; }
.editor-styles-wrapper h3:after { content: ""; display: block; width: 100%; height: 5px; background: url(/images/common/line.svg) repeat-x; background-size: contain; margin: 10px 0; position: relative !important; }
.editor-styles-wrapper h4 {font-size: 22px !important; font-weight: 700; line-height: 2.5rem; padding-left: .5rem;} /* .post-h2, .post-section-hedding と同じ */
.editor-styles-wrapper h4:before { content: ""; display: inline-block; width: 25px; height: 25px; background: url(/images/common/title_h2.svg) no-repeat; background-size: cover; margin-right: 8px; vertical-align: -6px; } /*元 34px*/
.editor-styles-wrapper h5 { font-size: 20px !important; display: block; font-weight: 700; border-bottom: 5px dotted #e4007f; padding: 0 0 5px 0; margin-bottom: 2rem; line-height: 1.4em; }
.editor-styles-wrapper h6 { font-size: 19px !important; font-weight: 700; }
.editor-styles-wrapper h3 { margin-top: 2.5rem !important; margin-bottom: 1rem !important;}
.editor-styles-wrapper h4 { margin-top: 1.5rem !important; margin-bottom: 1rem !important;}
.editor-styles-wrapper h5 { margin-top: 1.5rem !important; margin-bottom: 1rem !important;}
.editor-styles-wrapper h6 { margin-top: 1.5rem !important; margin-bottom: .5rem !important;}
.editor-styles-wrapper p { margin-top: 1rem !important; margin-bottom: 1rem !important;}
.editor-styles-wrapper strong {font-size: 1.05rem;}
.editor-styles-wrapper a, .editor-styles-wrapper a strong {color: #009ce1;}
.editor-styles-wrapper a:hover, .editor-styles-wrapper a strong:hover {color: #e4007f;}
.editor-styles-wrapper ol li, .editor-styles-wrapper ul li {color: #222;}
.editor-styles-wrapper ol {list-style: none; counter-reset: li; padding: 0; margin: .8rem 0;}
.editor-styles-wrapper ol li:not(:first-child), .editor-styles-wrapper ul li:not(:first-child) {line-height: 1.6rem; margin-top: 0.5em;}
.editor-styles-wrapper ol li {position: relative; padding-left: 2.1em;}
.editor-styles-wrapper ol li:not(:first-child) { margin-top: 0.5rem; }
/* editor用 */
.editor-styles-wrapper ol.wp-block {
    padding: 0;
}
.editor-styles-wrapper ol li::marker {
    content: ""
}

.editor-styles-wrapper ol li:before {
    counter-increment: li;
    content: counter(li);
    position: absolute;
    left: 0;
    top: 2px;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #009e9d;
    font-size: 11px;
    color: #fff;
    line-height: 20px;
    text-align: center;
    font-family: 'Verdana';
}
.editor-styles-wrapper ul {padding-left: 1.5rem; margin: .8rem 0;}
.editor-styles-wrapper ul li::marker {color: #009e9d;}

/* ----- LPブロック用 ----- */

.wp-block-image {margin: 0 0.1em 1em 0.1em;}
.wp-block-image.aligncenter {margin: 0 auto 1em auto;}
.wp-block-image.alignright {margin: 0 0 1em auto;}
.wp-block-image.alignleft {margin: 0 auto 1em 0;}

.wp-block-group {padding: 1.25em 2.375em;}

.wp-block-column .instagram-media {display: inline-block;}

/*動画*/
.editor-styles-movie {aspect-ratio: 16 / 9; max-width: 1000px; width: 100%;}
.editor-styles-movie iframe {width: 100%; height: 100%;}

/*目次*/
.wp-block-header--menu {
    width: 70%;
    margin: auto;
}
.wp-block-header--menu .wp-block-header--menu-contents {
    display: flex;
    justify-content: flex-end;
    gap: .8rem;
    margin: 1rem 0;
}
.wp-block-header--menu .wp-block-header--menu-contents a {
    white-space: nowrap;
    font-size: 1.5rem;
}
.wp-block-header--menu .wp-block-header--menu-contents i {
    font-size: 1.25rem;
    margin-right: .2rem;
}
.editor-styles-header--table-title {
    background-color: #009e9d;
    color: #fff;
    font-size: 1.5rem;
    margin: 0;
    border-radius: 20px 20px 0 0;
    padding: .5rem 2rem;
}
.editor-styles-header--table-title i {color: #fff;}
.editor-styles-header--table-list {
    border: 2px solid #009e9d;
    border-radius: 0 0 20px 20px;
    padding: 1rem 2.5rem;
    list-style: none;
    margin-top: 0;
    counter-reset: number-h2;/* カウンタを 0 にセット */
    word-break: break-all;
}
.editor-styles-header--table-list-li--h2,
.editor-styles-header--table-list-li--h3,
.editor-styles-header--table-list-li--h4,
.editor-styles-header--table-list-li--h5 {
    line-height: 1.5rem;
    position: relative;
    margin-bottom: .4rem;
}
.editor-styles-header--table-list-li--h2 {
    font-size: 1.1rem;
    padding-left: 1.8rem;
    counter-reset: number-h3 0;/* カウンタを 0 にセット */
    counter-increment: number-h2;
}
.editor-styles-header--table-list-li--h2:before {
    content: counter(number-h2);
    font-family: "Arial";
    font-weight: 900;
    top: 3px;
    color: #009e9d;
    position: absolute;
    left: 0;
    width: 2rem;
    text-align: left;
}
.editor-styles-header--table-list-li--h3 {
    display: flex;
    position: relative;
    padding-left: 1rem;
}
.editor-styles-header--table-list-li--h3 .list-counter {
    counter-increment: number-h3 1;
    font-family: "Arial";
    font-weight: 900;
    color: #009e9d;
    position: relative;
    margin-right: .5rem;
    flex-shrink: 0; /* サイズが縮まらないように */
}
.editor-styles-header--table-list-li--h3 .list-counter::before {
    content: counter(number-h2) "." counter(number-h3);
}
.editor-styles-header--table-list-li--h4 { padding-left: 3.4rem; }
.editor-styles-header--table-list-li--h4:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0da";
    font-weight: 900;
    color: #009e9d;
    position: absolute;
    left: 2.6rem;
}
.editor-styles-header--table-list-li--h5 {padding-left: 4.4rem;}
.editor-styles-header--table-list-li--h5:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0da";
    font-weight: 900;
    color: #009e9d;
    position: absolute;
    left: 3.6rem;
}

@media screen and (max-width: 768px) {
    .wp-block-image {margin: 0 0 1em 0;}
    .editor-styles-header--table {
        width: 100%;
    }
    .wp-block-header--menu {
        width: 95%;
    }
    .editor-styles-header--table-list {
        padding: 1rem;
    }

    .editor-styles-header--table-list-li--h4 {
        padding-left: 3.8rem;
    }
    .editor-styles-header--table-list-li--h4:before {
        left: 2.8rem;
    }
    .editor-styles-header--table-list-li--h5 {
        padding-left: 4rem;
    }
    .editor-styles-header--table-list-li--h5:before {
        left: 3rem;
    }
    .editor-styles-wrapper h4 {
        line-height: 2.1rem;
    }
}

/*--- クラス付きリスト ---*/
/*チェックパターン*/
.editor-styles-wrapper ul.check li,
.editor-styles-wrapper ul.tag li,
.editor-styles-wrapper ul.check.wp-block li, /* editor用 */
.editor-styles-wrapper ul.tag.wp-block li /* editor用 */ {
    font-size: 1.2rem;
    font-weight: 700;
}
.editor-styles-wrapper ul.check,
.editor-styles-wrapper ul.check.wp-block /* editor用 */ {
    padding: .5em 0;
}
.editor-styles-wrapper ul.check li,
.editor-styles-wrapper ul.check.wp-block li /* editor用 */ {
    line-height: 1.5;
    padding: .3em .5em .3em 2em;
    list-style-type: none!important;
    position: relative;
}
.editor-styles-wrapper ul.check li:before,
.editor-styles-wrapper ul.check.wp-block li:before /* editor用 */ {
    font-family: "Font Awesome 5 Free";
    content: "\f00c";
    position: absolute;
    top: 0;
    left : .5em;
    color: #fecf1d;
    font-size: 1.2rem; /* テキストと揃える */
    font-weight: 700; /* テキストと揃える */
    line-height: 1.5; /* テキストと揃える */
    padding: .5em 0; /* テキストと揃える */
}
/*タグパターン*/
.editor-styles-wrapper ul.tag {padding: 0;}
.editor-styles-wrapper ul.tag li {
    position: relative;
    list-style-type: none!important;
    padding: .5em .5em .5em .5em;
    margin-bottom: 5px;
    line-height: 1.5;
    background: rgb(0 158 157 / 30%);
    vertical-align: middle;
    color: #505050;
    border-radius: 15px 0px 0px 15px;
    display: flex;
    align-items: center;
}
.editor-styles-wrapper ul.tag li:before{
    /*白丸*/
    content:'';
    width: 1.2rem;
    min-width: 1.2rem;
    height: 1.2rem;
    line-height: 1.2rem;
    background: #fff;
    border-radius: 50%;
    margin-right: 12px;
  }

/* たのペンくん */
pre.wp-block-verse {
    position: relative;
    display: inline-block;
    margin: 1em 2em 1em 9em !important; /* 9em:他のクラス、 pre.wp-block-verse.wp-block や pre.wp-block-verse::after でも同値を使用 */
    padding: 1.5rem;
    outline: 2px dashed #fff;
    outline-offset: -8px;
    border-radius: 10px;
    color: #252525;
    font-size: 1.1rem;
    min-width: 200px;
    max-width: calc(780px - 100px);
    /* width: 800px; */
    background: rgb(0 158 157 / 40%)!important;
    z-index: 1;
    overflow: visible !important;
    line-height: 1.5;
    white-space: pre-wrap;
}
pre.wp-block-verse.bg-pink {background: rgb(228 0 127 / 40%) !important;}
pre.wp-block-verse.bg-blue {background: rgb(0 156 225 / 50%) !important;}
pre.wp-block-verse.bg-yellow {background: rgb(254 207 29 / 70%) !important;}
pre.wp-block-verse::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -30px;
    border: 15px solid transparent;
    border-right: 15px solid;
    border-right-color: rgb(0 158 157 / 40%)!important;
    z-index: 2;
    transform: translateY(-50%);
}
/* 吹き出し背景色 */
pre.wp-block-verse.bg-pink {
    background-color: rgb(228 0 127 / 40%) !important;
}
pre.wp-block-verse.bg-blue {
    background-color: rgb(0 156 225 / 50%) !important;
}
pre.wp-block-verse.bg-yellow {
    background-color: rgb(254 207 29 / 70%) !important;
}



pre.wp-block-verse.bg-pink::before {
    border-right: 15px solid ;
    border-right-color: rgb(228 0 127 / 40%) !important;
}
pre.wp-block-verse.bg-blue::before {
    border-right: 15px solid rgb(0 156 225 / 50%) !important;
}
pre.wp-block-verse.bg-yellow::before {
    border-right: 15px solid rgb(254 207 29 / 70%) !important;
}
/* editor用 */
pre.wp-block-verse.wp-block {
    margin-left: calc((100% - 840px)/2 + 9em) !important; /* 9em: pre.wp-block-verseのmargin-leftをプラス */
    margin-right: calc((100% - 840px)/2 + 2em) !important;
}
/* LPブロック たのペン画像  */
pre.wp-block-verse::after {
    background: url(/images/common/tanopen.png) no-repeat;
    background-size: contain;
    content: "";
    position: absolute;
    top: 50% !important;
    left: -7em !important;
    width: 80px;
    height: 100px;
    z-index: 2;
    transform: translateY(-50%);
}

@media screen and (max-width: 768px) {
    pre.wp-block-verse {
        margin: 1em auto 10em auto !important;
        font-size: 1rem;
        max-width: calc(100% - 4em);
        /* position: relative; */
        left: 50%;
        transform: translateX(-50%);
    }

    pre.wp-block-verse::before{
        bottom: 0;
        top: unset;
        left: -6rem;
        right: 0;
        margin: auto;
        height: 0;
        width: 0;
        border-style: solid;
        border-color: transparent;
        border-bottom-color: rgb(0 158 157 / 40%)!important;
        border-width: 10px;
        transform: rotateX(180deg) translateY(-100%);
    }

    pre.wp-block-verse.bg-pink::before {
        border-style: solid;
        border-color: transparent;
        border-bottom-color: rgb(228 0 127 / 40%) !important;;
    }

    pre.wp-block-verse.bg-blue::before {
        border-style: solid;
        border-color: transparent;
        border-bottom-color: rgb(0 156 225 / 50%) !important;
    }


    pre.wp-block-verse.bg-yellow::before{
        border-style: solid;
        border-color: transparent;
        border-bottom-color: rgb(254 207 29 / 70%) !important;
    }
   pre.wp-block-verse::after {
        content: "";
        bottom: -165px;
        top: unset !important;
        left: 0 !important;
        right: 0 !important;
        margin: auto;
    }
}


/* ーーーーーーーーーーーーーーーーーーーー
ボタンbutton箇所
ーーーーーーーーーーーーーーーーーーーー */
.wp-block-buttons {
    display: flex;
}
.wp-block-button {
    border-radius: 1.55rem;
    position: relative;
}

.wp-block-button .wp-block-button__link {
    padding: 10.5px 21px;
    line-height: 1.25rem;
    padding-right: 2rem;
    display: flex;
    align-items: center;
}
.wp-block-button.is-style-outline .wp-block-button__link {
    line-height: 1.05rem;
}

/* ボタン内アイコン */
.wp-block-button .wp-block-button__link::after {
    font-family: "Font Awesome 5 Free";
    content: "\f105";
    font-weight: 900;
    position: absolute;
    right: 1rem;
}

/* ----- 文字色 ----- */
/*デフォルト*/
.wp-block-button .wp-block-button__link {
    color: #fff;
}
/*塗りつぶし版*/
.wp-block-button.bg-yellow:not(.is-style-outline) .wp-block-button__link,
.wp-block-button.is-style-outline.bg-yellow .wp-block-button__link {
    color: #222;
}
/*アウトライン版*/
.wp-block-button.is-style-outline.bg-green .wp-block-button__link {
    color: #009e9d;
}
.wp-block-button.is-style-outline.bg-pink .wp-block-button__link {
    color: #e4007f;
}
.wp-block-button.is-style-outline.bg-blue .wp-block-button__link {
    color: #009ce1;
}
.wp-block-button.is-style-outline.bg-gray .wp-block-button__link {
    color: #888;
}
.wp-block-button.is-style-outline.bg-black .wp-block-button__link {
    color: #222;
}

/* ----- 背景色設定 ----- */
/*塗りつぶし版*/
.wp-block-button.bg-green:not(.is-style-outline) {
    background-color: #009e9d !important;
}
.wp-block-button.bg-pink:not(.is-style-outline) {
    background-color: #e4007f !important;
}
.wp-block-button.bg-blue:not(.is-style-outline) {
    background-color: #009ce1 !important;
}
.wp-block-button.bg-yellow:not(.is-style-outline) {
    background-color: #fecf1d !important;
}
.wp-block-button.bg-gray:not(.is-style-outline) {
    background-color: #888 !important;
}
.wp-block-button.bg-black:not(.is-style-outline) {
    background-color: #222 !important;
}
.wp-block-button[class*="bg-"]:not(.is-style-outline) .wp-block-button__link {
    background-color: transparent;
}
/*アウトライン版*/
.wp-block-button.is-style-outline {
    background-color: transparent !important;
}
.wp-block-button.is-style-outline[class*="bg-"] .wp-block-button__link {
    background-color: transparent;
}

/* ----- 枠線 ----- */
/*アウトライン版*/
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button__link.is-style-outline { /*デフォリセット*/
    border: none;
}
/*デフォルト*/
.wp-block-button.is-style-outline {
    border: 2px solid;
    border-color: #222;
}
.wp-block-button.is-style-outline.bg-green {
    border-color: #009e9d!important;
}
.wp-block-button.is-style-outline.bg-pink {
    border-color: #e4007f!important;
}
.wp-block-button.is-style-outline.bg-blue {
    border-color: #009ce1!important;
}
.wp-block-button.is-style-outline.bg-yellow {
    border-color: #fecf1d!important;
}
.wp-block-button.is-style-outline.bg-gray {
    border-color: #888!important;
}
.wp-block-button.is-style-outline.bg-black {
    border-color: #222!important;
}

/* ----- ホバー時 ----- */
/*塗りつぶし版 背景色 デフォルト*/
.wp-block-button:not(.is-style-outline):hover {
    background-color: #fecf1d !important;
}
/*塗りつぶし版*/
.wp-block-button:not(.is-style-outline):hover .wp-block-button__link {
    color: #333;
    background-color: transparent !important;
}
/*塗りつぶし版 文字色 黄色のみ*/
.wp-block-button.bg-yellow:not(.is-style-outline):hover .wp-block-button__link {
    color: #fff !important;
}
/*塗りつぶし版 背景色*/
.wp-block-button[class*="bg-"]:not(.is-style-outline):hover {
    background-color: #fecf1d !important;
}
/*塗りつぶし版 背景色　黄色のみ*/
.wp-block-button.bg-yellow:not(.is-style-outline):hover {
    background-color: #009ce1 !important;
}
/*アウトライン版 デフォルト*/
.wp-block-button.is-style-outline:hover {
    border-color: #fecf1d;
}
.wp-block-button.is-style-outline:hover .wp-block-button__link {
    color: #666;
}
/*アウトライン版 文字色*/
.wp-block-button.is-style-outline[class*="bg-"]:hover .wp-block-button__link {
    color: #222 !important;
}
/*アウトライン版 文字色 黄色のみ*/
.wp-block-button.is-style-outline.bg-yellow:hover .wp-block-button__link {
    color: #009ce1 !important;
}
/*アウトライン版 枠線*/
.wp-block-button.is-style-outline[class*="bg-"]:hover {
    border-color: #fecf1d !important;
}
/*アウトライン版 枠線 黄色のみ*/
.wp-block-button.is-style-outline.bg-yellow:hover {
    border-color:  #009ce1 !important;
}

/* ーーーーーーーーーーーーーーーーーーーー
margin
ーーーーーーーーーーーーーーーーーーーー */
.m-t-10 {
    margin-top: 10px !important;
}
.m-t-20 {
    margin-top: 20px !important;
}
.m-t-30 {
    margin-top: 30px !important;
}
.m-t-40 {
    margin-top: 40px !important;
}
.m-t-50 {
    margin-top: 50px !important;
}
.m-b-10 {
    margin-bottom: 10px !important;
}
.m-b-20 {
    margin-bottom: 20px !important;
}
.m-b-30 {
    margin-bottom: 30px !important;
}
.m-b-40 {
    margin-bottom: 40px !important;
}
.m-b-50 {
    margin-bottom: 50px !important;
}
.m-l-10 {
    margin-left: 10px !important;
}
.m-l-20 {
    margin-left: 20px !important;
}
.m-l-30 {
    margin-left: 30px !important;
}
.m-l-40 {
    margin-left: 40px !important;
}
.m-l-50 {
    margin-left: 50px !important;
}
.m-r-10 {
    margin-right: 10px !important;
}
.m-r-20 {
    margin-right: 20px !important;
}
.m-r-30 {
    margin-right: 30px !important;
}
.m-r-40 {
    margin-right: 40px !important;
}
.m-r-50 {
    margin-right: 50px !important;
}

/* ーーーーーーーーーーーーーーーーーーーー
padding
ーーーーーーーーーーーーーーーーーーーー */
.p-t-10 {
    padding-top: 10px !important;
}
.p-t-20 {
    padding-top: 20px !important;
}
.p-t-30 {
    padding-top: 30px !important;
}
.p-t-40 {
    padding-top: 40px !important;
}
.p-t-50 {
    padding-top: 50px !important;
}
.p-b-10 {
    padding-bottom: 10px !important;
}
.p-b-20 {
    padding-bottom: 20px !important;
}
.p-b-30 {
    padding-bottom: 30px !important;
}
.p-b-40 {
    padding-bottom: 40px !important;
}
.p-b-50 {
    padding-bottom: 50px !important;
}
.p-l-10 {
    padding-left: 10px !important;
}
.p-l-20 {
    padding-left: 20px !important;
}
.p-l-30 {
    padding-left: 30px !important;
}
.p-l-40 {
    padding-left: 40px !important;
}
.p-l-50 {
    padding-left: 50px !important;
}
.p-r-10 {
    padding-right: 10px !important;
}
.p-r-20 {
    padding-right: 20px !important;
}
.p-r-30 {
    padding-right: 30px !important;
}
.p-r-40 {
    padding-right: 40px !important;
}
.p-r-50 {
    padding-right: 50px !important;
}

/* インスタ・youtube埋め込み中央揃え */

.youtube-center iframe {
    display: inline-block;
    max-width: 100%;
}
.youtube-center {
    text-align: center;
}
.insta-center .instagram-media {
    margin: 0 auto !important;
}