/*
Theme Name: mixhostヘルプ＆サポート専用テーマ
Template: lightning
*/

:root{
    --blue: var(--vk-color-primary);
    --red: var(--wp--preset--color--vk-color-custom-4);
}

body{
    font-family: 'Lato', sans-serif;
}
@media (max-width: 991.98px){
    body,html {
        font-size: var(--vk-size-text);
    }
}
select{
    /* 背景にSVGで矢印を追加 */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center; /* 右から12px、上下中央に配置 */
    background-size: 1em; /* 矢印のサイズ */
}


/* zendeskオリジナルカラー */
.wysiwyg-color-black {
    color: #000; }
.wysiwyg-color-black70 {
    color: #4d4d4d; }
.wysiwyg-color-black60 {
    color: #666666; }
.wysiwyg-color-black50 {
    color: gray; }
.wysiwyg-color-black40 {
    color: #999999; }
.wysiwyg-color-black30 {
    color: #b3b3b3; }
.wysiwyg-color-black20 {
    color: #cccccc; }
.wysiwyg-color-black10 {
    color: #e6e6e6; }
.wysiwyg-color-red {
    color: #F00; }
.wysiwyg-color-orange {
    color: #F90; }
.wysiwyg-color-yellow {
    color: #FF0; }
.wysiwyg-color-green {
    color: #0F0; }
.wysiwyg-color-cyan {
    color: #0FF; }
.wysiwyg-color-blue {
    color: #00F; }
.wysiwyg-color-purple {
    color: #90F; }
.wysiwyg-color-pink {
    color: #F0F; }
.wysiwyg-color-red90 {
    color: #ff3333; }
.wysiwyg-color-red80 {
    color: #ff6666; }
.wysiwyg-color-red70 {
    color: #ff9999; }
.wysiwyg-color-red110 {
    color: #cc0000; }
.wysiwyg-color-red120 {
    color: #990000; }
.wysiwyg-color-red130 {
    color: #660000; }
.wysiwyg-color-orange90 {
    color: #ffad33; }
.wysiwyg-color-orange80 {
    color: #ffc266; }
.wysiwyg-color-orange70 {
    color: #ffd699; }
.wysiwyg-color-orange110 {
    color: #cc7a00; }
.wysiwyg-color-orange120 {
    color: #995c00; }
.wysiwyg-color-orange130 {
    color: #663d00; }
.wysiwyg-color-yellow90 {
    color: #ffff33; }
.wysiwyg-color-yellow80 {
    color: #ffff66; }
.wysiwyg-color-yellow70 {
    color: #ffff99; }
.wysiwyg-color-yellow110 {
    color: #cccc00; }
.wysiwyg-color-yellow120 {
    color: #999900; }
.wysiwyg-color-yellow130 {
    color: #666600; }
.wysiwyg-color-green90 {
    color: #33ff33; }
.wysiwyg-color-green80 {
    color: #66ff66; }
.wysiwyg-color-green70 {
    color: #99ff99; }
.wysiwyg-color-green110 {
    color: #00cc00; }
.wysiwyg-color-green120 {
    color: #009900; }
.wysiwyg-color-green130 {
    color: #006600; }
.wysiwyg-color-cyan90 {
    color: #33ffff; }
.wysiwyg-color-cyan80 {
    color: #66ffff; }
.wysiwyg-color-cyan70 {
    color: #99ffff; }
.wysiwyg-color-cyan110 {
    color: #00cccc; }
.wysiwyg-color-cyan120 {
    color: #009999; }
.wysiwyg-color-cyan130 {
    color: #006666; }
.wysiwyg-color-blue90 {
    color: #3333ff; }
.wysiwyg-color-blue80 {
    color: #6666ff; }
.wysiwyg-color-blue70 {
    color: #9999ff; }
.wysiwyg-color-blue110 {
    color: #0000cc; }
.wysiwyg-color-blue120 {
    color: #000099; }
.wysiwyg-color-blue130 {
    color: #000066; }
.wysiwyg-color-purple90 {
    color: #ad33ff; }
.wysiwyg-color-purple80 {
    color: #c266ff; }
.wysiwyg-color-purple70 {
    color: #d699ff; }
.wysiwyg-color-purple110 {
    color: #7a00cc; }
.wysiwyg-color-purple120 {
    color: #5c0099; }
.wysiwyg-color-purple130 {
    color: #3d0066; }
.wysiwyg-color-pink90 {
    color: #ff33ff; }
.wysiwyg-color-pink80 {
    color: #ff66ff; }
.wysiwyg-color-pink70 {
    color: #ff99ff; }
.wysiwyg-color-pink110 {
    color: #cc00cc; }
.wysiwyg-color-pink120 {
    color: #990099; }
.wysiwyg-color-pink130 {
    color: #660066; }

/* END zendeskオリジナルカラー */

.site-header,
.header_scrolled .site-header,
.site-footer{
    background: var(--blue);
    color: #fff;
}

.site-header,
.header_scrolled .site-header{
    background: var(--blue) url("img/site-header-bg.svg");
}

.site-header-append{
    background: #efefef;
    padding-top: 8px;
    padding-bottom: 8px;
}

.site-header-append select{
    margin-top: 0;
    margin-bottom: 0;
}

.gnav-li-hide_on_top{
    display: none;
}
.header_scrolled .gnav-li-hide_on_top{
    display: inline-block;
}
.global-nav li a{
    color: #fff;
}

.sub-section--col--two{
    background: #efefef;
    padding: 15px;
    border-radius: 4px;
}

.sub-section .widget:has(.wp-block-heading){
    margin-bottom: 1.4rem;
}

.sub-section h2{
    color: var(--blue);
    font-size: 1.25em;
    border-bottom: solid 2px var(--blue);
}


.sub-section .jetpack-top-posts a{
    font-size: .85rem;
}

.sidebar-top-posts.wp-block-jetpack-top-posts.is-grid-layout .jetpack-top-posts-wrapper{
    grid-template-columns:1fr;
}
.sidebar-related-posts .jp-related-posts-i2__list{
    display: grid;
    gap: 0;
    padding-left: 0;
}
.sidebar-related-posts .jp-related-posts-i2__post{
    margin-top: 0;
}

.site-main{
    line-height: 1.8;
}

.page-header{
    min-height: inherit;
    background: var(--blue);
    color: #fff;
}

.page-header-inner{
    margin-top: 0;
    margin-bottom: 0;
}

.page-header-title, h1.page-header-title{
    padding: 1rem 0;
    font-size: 1.4rem;
}

.page-header-title-small{
    font-size: .75em;
    font-weight: normal;
    line-height: 1.1;
    display: block;
    text-align: center;
    opacity: .7;
}
.page-header-title-arrow{
    display: block;
    color: transparent;
    width: 1em;
    height: .4em;
    overflow: hidden;
}

.postListText_title{
    font-size: 1rem;
}

.footer-nav-list{
    text-align: center;
    padding-top: 1rem;
}
.footer-nav-list li{
    display: inline-block;
    padding: 0 .5em;
}
.footer-nav-list li a{
    line-height: 1.4;
    padding: .5em .25em .5em 1em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5 2 6 6-6 6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: 0 1em;
    background-size: .6em; /* 矢印のサイズ */
}
.site-footer li a{
    color: #fff;
    }
.site-footer-copyright{
    margin-top: 3rem;
}
.site-footer-copyright a{
    color: inherit;
    text-decoration: underline;
}

.site-footer-floating{
    position: fixed;
    bottom: 0;
    left: 0;
    display: none;
    max-width: 90vw;
}
.site-footer-floating-a{
    display: block;
}
.site-footer-floating-img{
    display: block;
}
.site-footer-floating-close{
    position: absolute;
    display: inline-flex;
    color: var(--blue);
    border: solid 2px #fff;
    right: -1rem;
    top: -1rem;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}
.site-footer-floating-close:hover{
    opacity: 0.8;
}
.site-footer-floating-close-i{
    font-size: 2rem;
    margin-right: 0;
}
.site-footer-floating-closed{
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}




/* 投稿関連 */

.entry-header,.archive-header-title{
    background:  url("img/site-header-bg.svg");
    padding: 1rem;
    border-style: solid;
    border-color: var(--blue);
    border-width: 8px 0;
    position: relative;
}
.archive-description{
    margin-bottom: 4rem;
}
.entry-body>.vk_posts>.media.vk_post-col-lg-12, .main-section>.vk_posts>.media.vk_post-col-lg-12{
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 1em;
    border: none !important;
}
@media (min-width: 992px) {
    .entry-body>.vk_posts>.vk_post-col-lg-12 .vk_post_title, .main-section>.vk_posts>.vk_post-col-lg-12 .vk_post_title{
        font-size: 1rem;
        font-weight: normal;
    }
}
.main-section .vk_post .vk_post_title a{
    background-position: 0 .3em;
    text-decoration-thickness: 1px;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-underline-offset: .3em;
}

.entry-header:before{
    content: '';
    display: block;
    position:absolute;
    left:0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.5);
}
.entry-title,.entry-meta{
    position: relative;
}

.entry-footer{
    margin-top: 4rem;
}

/*
.vk_post .vk_post_title a{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23107cd5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5 2 6 6-6 6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: .8em;
    background-position: 0 .2em;
    display: block;
    padding-left: 1em;
}*/
.vk_post .vk_post_title a:hover{
    color: var(--blue);
}

.vk_post_taxonomy_title{
    display: none;
}
.vk_post_taxonomy_terms{
    font-size: 0;
}
.vk_post_taxonomy_terms a{
    font-size: .75rem;
    display: inline-block;
    line-height: 1.4;
    background: #f5f5f5;
    padding: .2em .4em;
    border-radius: .4rem;
    color: #666;
    border: solid 1px #ddd;
    margin-right: .5em;
}


.category .archive-main-h2{
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 0.6em;
    background: #107CD5;
    margin-top: 3rem;
    letter-spacing: .01em;
}
.category-link-buttons-wrapper{
    background: #f5f5f5;
    border: solid 2px #eee;
    padding: 1rem;
    border-radius: .5rem;
}
.category-link-buttons-title{
    font-size: 1rem;
    color: var(--blue);
}
.category-link-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.category-link-buttons .cat-item{
    list-style: none;
    margin-top: 0;
    margin-bottom: 0;
}
.category-link-buttons .cat-item a{
    display: block;
    padding: .25em .5em;
    text-decoration: none;
    border-radius: .5em;
    border: solid 1px #ddd;
    background: #fff;
    line-height: 1.4;
}

.entry-body h2{
    color: #fff;
    font-size: calc(16px * 1.75);
    font-weight: 900;
    line-height: 1.2;
    padding: 0.8em;
    background: #107CD5;
    box-shadow: 0px 0px 0px 5px #107CD5;
    border-top: dotted 1px;
    border-bottom: dotted 1px;
    margin-top: 1.5em;
}
.entry-body h2 a{
    color: #fff;
}
.entry-body h3{
    line-height: 1.2;
    padding: 0.8em;
    border-left: solid 5px #107CD5;
    margin-top: 1.5em;
    background: #eceeef;
}
.entry-body h4{
    border-bottom: solid 3px #eceeef;
    position: relative;
    padding: 0.5em;
    padding-left: 0;
}
.entry-body h4:after{
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 3px #107CD5;
    bottom: -3px;
    width: 6ch;
}

.entry-body a{
    text-decoration: underline;
    text-underline-offset: .4em;
    text-decoration-style: dotted;
    color: #0056A3;
}

.vk_post .vk_post_title{
    font-size: 1rem;
}
.vk_post .vk_post_title a,
.jetpack-top-posts-title,
.wp-block-latest-posts__post-title,
.jetpack-top-posts-by-category-a{
    display: block;
    color: inherit;
    padding-left: 1.4em;
    text-indent: -1.4em;
}
.vk_post .vk_post_title a:before,
.jetpack-top-posts-title:before,
.wp-block-latest-posts__post-title:before,
.jetpack-top-posts-by-category-a:before{
    content: '\f15c';
    display: inline-block;
    width: 1em;
    color: var(--blue);
    font-family: "Font Awesome 6 Free";
    display: inline-block;
    margin-right: .4em;
    text-indent: 0;
}

.jetpack-top-posts-title{
}
.jetpack-top-posts .jetpack-top-posts-context{
    padding-left: 1.5em;
}
.jetpack-top-posts-context{
    margin-top:.2em;
}
.jetpack-top-posts-context a{
    color: #999;
    text-decoration: none;
}
.jetpack-top-posts-context a:before{
    content: '\f07b';
    display: inline-block;
    margin-right: .4em;
    font-family: 'Font Awesome 6 Free';
    font-weight: bold;
}
.wp-block-jetpack-top-posts.is-grid-layout .jetpack-top-posts-wrapper{
    grid-template-columns:1fr 1fr !important;
    gap: 1rem 2rem !important;
}
.wp-block-jetpack-top-posts.is-grid-layout .jetpack-top-posts-item{
    grid-column: span 1 !important;
}

.postform .level-0{
    color: var(--blue);
    font-weight: bold;
}
.postform .level-1{
    font-size: .85em;
}

#jp-relatedposts{
    margin-top: 6rem;
}
#jp-relatedposts:before{
    content: '関連ヘルプ';
    border-top: solid 1px var(--blue);
    display: block;
    float: none;
    font-size: 1em;
    padding: .5em 0 .5em;
    color: var(--blue);
}
#jp-relatedposts h3.jp-relatedposts-headline em::before{
    content: none;
}
.jp-relatedposts-grid{
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
}
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post{
    float: none;
    flex: 0 0 calc(33.33% - 1rem);
    width: calc(33.33% - 1rem);
}
@media (max-width: 991.98px){
    #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post{
        width: 100%;
        flex: 1 1 100%;
    }
}
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a{
    display: block;
    padding-left: 1em;
    line-height: 1.4;
    /* 背景にSVGで矢印を追加 */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23107cd5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5 2 6 6-6 6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: 0 .4em;
    background-size: .6em; /* 矢印のサイズ */
    text-decoration: dotted;
    text-decoration-line: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.feedbackFormWrapper{
    background: #f0f0f0;
    padding: 1rem;
    border-radius: .5em;
}
.feedbackForm-lead{
    font-size: .85rem;
    margin-top: .5em;
}
.feedbackForm-lead-ul{
    margin-top: .5em;
    display: flex;
    flex-wrap: wrap;
    gap: .5em 1.5em;
    list-style-position: inside;
    padding-left: 0;
}
.feedbackForm-lead-li{
    list-style: none;
    margin-top: 0;
    margin-bottom: 0;
}
.feedbackForm-lead-li .fa-solid{
    color: var(--blue);
}
.feedbackForm-row-last{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.feedbackFormWrapper .wpcf7-acceptance{
    margin-right: 2rem;
}
.feedbackFormWrapper .wpcf7-acceptance label{
    display: flex;
    flex-direction: row-reverse;
    gap: .5em;
}
.feedbackFormWrapper .icon-need{
    color: var(--red);
    border: solid 1px var(--red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .25em;
    font-size: .85rem;
    margin-right: .5em;
}
.wpcf7-textarea{
    line-height: 1.6;
    height: 8rem;
}
.wpcf7-form.sent .hide-cf7-after-sent{
    display: none !important;
}


.toc_list{
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.toc_list>li>a:before{
    content: '\f0d7';
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    display: inline-block;
    margin-right: .4em;
}
.toc_list ul a:before{
    content: '';
    display: inline-block;
    width: .4em;
    height: .4em;
    border-style: solid;
    border-width: 0 0 1px 1px;
    border-color: #999;
    margin-bottom: .3em;
    margin-right: .2em;
}


/* ショートコード関連 */
.category_intro_buttons{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.category_intro_button{
    display: block;
    border: solid 2px var(--blue);
    font-size: .8em;
    padding: 0.8em;
    text-decoration: none !important;
}
.category_intro_button-title{
    display: inline-block;
    margin-bottom: .2em;
    margin-top: .2em;
    font-weight: bold;
    color: var(--blue);
    font-size: min(1.6em,4vw);
}
.category_intro_button-title:after{
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: var(--blue);
}
.category_intro_button:hover .category_intro_button-title:after{
    width: 100%;
    transition: width .3s;
}

/* END ショートコード関連 */


/* トップページ */
.entry-body .banner-startguide-title{
    font-size: min(1.75rem,5vw);
    font-weight: bold;
}