/* 
* 主にPHP形式のテンプレートで使用されるスタイル定義 
* 一部ブロックスタイル定義も含む
*/
@charset "UTF-8";

/* SVG icon */
.svgicon {
    display: inline-block;
    fill: currentColor;
    background: transparent;
    position: relative;
    vertical-align: baseline;
    top: 2px;
    height: 1em;
    width: 1em;
    margin-right: 4px;
}

/*--------------------------------------------------------------
# Header-Title/Footer
--------------------------------------------------------------*/
.site-header {
	margin: 0;
	padding: 0;
    width: 100%;
    height: auto;
    line-height: 1.4;
	position: relative;
    z-index: 20;
    background-color: hsl(var(--jb--color-hsl-theme-main));
    background-position-x: 50%;
    background-position-y: 50%;
    background-size: cover;
    .home-link {
        background-repeat: no-repeat;
        background-position: 0% 0%;
        background-size: cover;
        background-attachment: scroll;
        border: none;
        margin: 0 auto;
        padding: 0 10px;
        text-decoration: none;
        width: 100%;
        height: 120px;

        .site-info {
            margin: 0 auto;
            padding: 0;
            width: 100%;
            max-width: 1136px;
            display: flex;
            justify-content: center;
            text-align: center;
        }
    }
    .site-logo {
        margin: 0 12px 0 0;
        object-fit: contain;
        vertical-align: text-top;
    }
    .home-info {
        .site-title {
            font-size: clamp(1.6rem, 1.4rem + 0.8vw, 2rem);
            line-height: 1.4;
            color: hsl(var(--jb--color-hsl-text-header));
            padding: 18px 0 8px;
            font-weight: normal;
            border: none;
            margin: 0;
            .blogname {
                display: inline-block;
                margin: 0;
                padding: 0;
                vertical-align: top;
            }
        }
        .site-description {
            display: block;
            font-size: clamp(0.7rem, 0.6rem + 0.4vw, 0.9rem);
            font-weight: lighter;
            font-style: italic;
            color: hsl(var(--jb--color-hsl-text-header));
            padding: 0;
            margin: 0; 
        }
        &.simple {
            position: absolute;
            left: 56px;
            bottom: 4px;
            .site-title {
                font-size: 113%;
                font-weight: 400;
                font-style: italic;
                padding: 0;
            }
            .site-description {
                display: inline-block;
                margin-left: 12px;
            }
        }
        &:hover {
            text-decoration: none;
        }
    }
    
    .search-form {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        .svgicon {
            height: 30px;
            width: 30px;
            fill: hsl(var(--jb--color-hsl-text-header));
            background-color: transparent;
            padding: 4px;
            position: absolute;
            right: 16px;
        }
        .search-submit {
            display: none;
        }
    }
    
    .search-field {
        background-color: transparent;
        border: none;
        cursor: pointer;
        height: 30px;
        margin: 2px 8px;
        padding: 1px 8px;
        position: relative;
        transition: width 400ms ease, background 400ms ease;
        width: 0;
        &:focus {
            background-color: #fff;
            border: 1px solid;
            outline: 0;
            cursor: text;
            width: 230px;
        }
    }
}
@media screen and (max-width: 600px) {
    .site-header {
        .home-link {
            height: 80px;
        }
        .site-logo:not(.small) {
            height: 56px;
        }
        .home-info {        
            .site-title {
                padding: 12px 0 3px;                
            }
        }
    }
} 
@media screen and (max-width: 480px) {
    .site-header {
        .home-info.simple {
            .site-description {
                display: none;
            }
        }
    }
} 
     
.post-template-full-note .site-header {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
    max-width: 100vw;
}

header .wp-block-site-title a {
    font-size: clamp(1.6rem, 1.4rem + 0.8vw, 2rem);
    color: inherit;
    font-weight: normal;
}

.post-cover.background-thumb {
    width: 100%;
    margin: 0 0 1em 0;
    text-align: center;
    background: hsl(var(--jb--color-hsl-background-body)) 50% 50% / cover no-repeat;
    & h1 {
        font-weight: 500;
        padding: 0 1em;
        margin-bottom: 1.5em;
    }
    .entry-meta-wrapper {
        padding: 0 1em;
        margin: 4px 0 48px;
        min-height: 1px;
    }
    .with-thumb {
        display: flow-root;
        & h1 {
            color: #fff;
            margin: 144px 0 128px;
        }
        .entry-meta-wrapper {
            & a, 
            .published, 
            .updated, 
            .author {
                color: #e6e6e6;
            }
            .entry-meta {
                .svgicon {
                    fill: #e6e6e6;
                }
            }
        }
        background-color: rgb(34 34 34 / .33);
        &:hover {
            transition: background-color 0.4s;
            background-color: rgb(34 34 34 / .66);
        }
    }
}

.full-width.small-margin {
    .post-cover.background-thumb {
        .with-thumb {
            height: 96vh;
            & h1 {
                margin: 30vh 0 10vh;
            }
        }
    }
}

/* archive, search */
.page-header {
    .page-title {
        color: hsl(var(--jb--color-hsl-headline));
        margin: 16px;
    }
}

.archive-content,
.search-content {
    padding: 20px;
    .list-item {
        clear: both;
        margin: 8px 8px 0px;
        padding: 8px 0px;
        overflow: hidden;
    }

    .fixed-container {
        float: left;
        position: relative;
        margin: 0 16px 8px 0;
        width: 132px;
        height: auto;
    }

    .item-content {
        overflow: hidden;
        .item-title h3 {
            margin : 0 0 4px 0;
            & a {
                font-weight: 700;
            }
        }
        .entry-meta {
            font-size: 13px;
        }
        .item-summary{
            overflow: hidden;
            & p {
                margin: 8px 0;
                font-size: 14px;
                line-height: 1.4;
            }
            .read-more {
                display: none;
            }
        } 
    }
}
@media screen and (max-width: 480px) {
    .archive-content,
    .search-content {
        .fixed-container {        
            width: 108px;
        }
    }
}

#footer {
	clear: both;
	margin: 0 auto;
	padding: 20px 6%;
	background: hsl(var(--jb--color-hsl-theme-main));
    text-align: right;

    .footer-nav-wrapper {
    	max-width: var(--jb--size-main-max-width); 
        margin: 0 auto;
    }
    .footer-left {
        float: left;
    }
    .footer-right {
        float: right;
    }
    
    & a {
        color: white;
        &:hover {
            color: white;
            text-decoration: underline;
        }
    }

    .social-icons {
        display: inline-block;
        margin: 12px 16px 20px;
        padding: 0;
        & li {
          display: inline;
          list-style-type: none;
        }
    }
    .copyright {
        font-size: 87%;
        margin: 8px;
    }
    .wptheme {
        font-size: 87%;
        margin: 8px 16px;
    }
}
@media screen and (max-width: 480px) {
    #footer {
        padding: 20px 8px;
        .footer-left {
            float: none;
            text-align: center;
        }
        .footer-right {
            float: none;
            text-align: center;
        }
    }
}

.post-template-full-note #footer{
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
    max-width: 100vw;
}

footer .wp-block-site-title a {
    font-size: 1em;
    color: inherit;
    font-weight: normal;
}

/* icomoon で生成した symbol-defs.svg には inline style が含まれているので取り除き cpicon-define class に置き換えフッター下の余白対策をする*/
.cpicon-define { 
    position: absolute; 
    width: 0; 
    height: 0; 
    overflow: hidden;
}

/* Menus/Navi */
.navbar {
    margin: 0;
    max-width: 100%;
    border-radius: 0;
}

.main-navigation {
	clear: both;
	position: relative;
	margin: 0 auto;
    padding: 0;
	min-height: 38px;
    max-width: var(--jb--size-main-max-width);
}

.nav-menu {
	margin: 0;
	padding: 0 40px 0 0;

    & ul {
        & a {
            color: hsl(var(--jb--color-hsl-text-header));
            margin: 0;
            width: 240px;

            &:hover {
                background: hsl(var(--jb--color-hsl-theme-sub) / .8);
            }
        }
    }
    > ul {
    	margin: 0;
        padding: 0 40px 0 0;
    }    
    & li {
        display: inline-block;
        position: relative;
        vertical-align: middle;
        & a {
            color: hsl(var(--jb--color-hsl-text-header));
            display: block;
            font-size: 95%;
            font-weight: normal;
            line-height: 1.3;
            padding: 12px 20px 10px;
            text-decoration: none;
            transition: all .3s ease;
            transform: translateY(0);
            
            &:hover {
                background: hsl(var(--jb--color-hsl-theme-sub) / .8);
                transform: translateY(2px);
            }
        }
        .menu-description-small {
            display: block;
            overflow: hidden;
            font-size: smaller;
            font-weight: lighter;
            text-align: center;
        }
        &:hover > a {
            transform: translateY(2px);
        }
    }
    & li:hover > ul{
        display: block;
    }
    
    & :is(.sub-menu, .children) {
        background: hsl(var(--jb--color-hsl-theme-main) / .8);
        border-top: 0;
        display: none;
        padding: 0;
        position: absolute;
        left: -2px;
        z-index: 99999;
        
        & ul {
            border-left: 0;
            left: 100%;
            top: 0;
        }
    }
}

#small-menu {
    display: none;
}
#menu-icon {
    .svgicon {
        height: 30px;
        width: 30px;
        fill: hsl(var(--jb--color-hsl-text-header));
        background: transparent;
        padding: 3px;
        margin: 2px 12px 0;
    }
    display: none;
    cursor: pointer;
}
@media screen and (max-width: 600px) {
    #menu-icon {
		display: inline-block;
	}
    & ul.nav-menu {
        height: 0;
        transform: translateY(-1000px);
        transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
}

#site-navigation.simple {
    #menu-icon {
		display: inline-block;
        margin-bottom: 0;
    }
	& ul.nav-menu {
        height: 0;
        transform: translateY(-1000px);
        transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        > ul {
    		display: none;
        }
	}
}

@keyframes simple-menu-open {
    0% { transform: translate(5%, 2%) rotate(5deg); }
    33% { transform: translate(-3%, -1%) rotate(-3deg); }
    66% { transform: translate(1%, 0%) rotate(1deg); }
    100% { transform: translate(0%, 0%) rotate(0deg); }
}
#small-menu:checked ~ #masthead{
    #menu-out {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(0 0 0 / .5);
    }
    .menu-main-menu {
        position: absolute;
        padding: 0 10px;
        max-width: 80vw;
    
        & li,
        .children {
            display: block;
        }
        .nav-menu {
            transform:translateY(0);
            height: auto;
            display: block;
            margin-left: 0;
            padding: 0;
            width: 100%;
            background: hsl(var(--jb--color-hsl-theme-main) / .8);
            
            & li {
                &:nth-child(2n){
                    animation: simple-menu-open 0.5s ease-out 0s 1;
                }
                &:nth-child(2n+1){
                    animation: simple-menu-open 0.5s ease-out 0.2s 1;
                }
                &:hover {
                    > ul {
                        transform: translateY(2px);
                    }
                }
                & a {
                    &:hover {
                        background: hsl(var(--jb--color-hsl-theme-sub) / .8);
                    }
                }
                .menu-description-small {
                    /* display: none; */
                    text-align: left;
                }
                > ul {
                    display: block;
                    float: none;
                    margin-left: 20px;
                    position: relative;
                    left: auto;
                    top: auto;
                    & a {
                        width: auto;
                    }
                }
            }
            .sub-menu, 
            .children {
                background: transparent;
                border: none;
            }
        }
    }
}

/* Footer Menu */
.footer-navigation {
	margin: 0 auto 20px;;
    padding: 0;
}
.footer-menu {
    margin: 12px 0px 8px;
    padding: 0;
  
    & li {
        display: inline;
        list-style-type: none;
        & a {
            color: hsl(var(--jb--color-hsl-text-header));
            font-size: 87%;
            border-left: 1px solid #cccccc;
            padding: 0 4px 0 6px;

            &:hover {
                color: hsl(var(--jb--color-hsl-text-header));
                background: transparent;
                text-decoration: underline;
            }
        } 
    }

    > li:first-child > a {
        border-left: none;
        padding: 0 4px 0 4px;
    }
}

/*
 記事内のページ分割時のナビゲーション
 アーカイブのページ分割時のナビゲーション
 [1][2]... 形式のページナビゲーション
 ※page-navi はプラグインアンテナページ用
*/
.page-navi,
.navigation.pagination {
	clear: both;
    font-size: 109%;
	font-weight: 500;
	line-height: 2.2;
	margin: 15px;
    overflow: hidden;
    
    .page-title {
        background: transparent;
        color: hsl(var(--jb--color-hsl-theme-main));
        border: none;
        margin-right: 14px;
        padding: 0;
    }
    .current{
        background: hsl(var(--jb--color-hsl-theme-sub));
        color: hsl(var(--jb--color-hsl-text-header));
        padding: 3px 7px;
        margin: 0 3px;
        text-decoration: none;
        border-radius: 4px;
    }
    & a:not(:is(.prev, .next)) {
        background: hsl(var(--jb--color-hsl-theme-main));
        color: hsl(var(--jb--color-hsl-text-header));
        padding: 3px 7px;
        margin: 0 3px;
        text-decoration: none;
        border-radius: 4px;
        &:hover {
            background: hsl(var(--jb--color-hsl-theme-sub));
            opacity: 0.9;
        }
    }
    .dots {
        color: hsl(var(--jb--color-hsl-text-main));
    }
}

/* 前後記事 */
.navigation.post-navigation {
    clear: both;
    padding: 24px 0;

    .post-prev {
        padding: 0 8px 0 0;
    }
    .post-next {
        padding: 0 0 0 8px;
        float: right;
    }
    .post-nav-wrap {
        float: left;
        width: 50%;
        & a {
            position: relative;
            display: block;
            text-decoration: none;
        }
        .post-nav-text {
            display: flex;
            align-items: center;
            width: 100%;
            height: 120px;
            padding: 10px;
            border: solid 1px hsl(var(--jb--color-hsl-theme-main));
 
            .nav-left,
            .nav-right {
                width: 50px;
                height: 100%;
            }
            .svgicon {
                top: 30%;
                height: 32px;
                width: 32px;
                background: transparent;
                padding: 4px;
                margin: 4px;
                cursor: pointer;
            }
            .nav-title {
                font-size: 1em;
                line-height: 1.3;
                overflow: hidden;
            }
        } 
        .post-nav-prev .post-nav-text {
            text-align: left;
        }
        .post-nav-next .post-nav-text {
            text-align: right;
            justify-content: flex-end;
        }
    }

    &:after {
        content: "";
        display: table;
        clear: both; 
    }
}
@media screen and (max-width: 480px) {
    .navigation.post-navigation {
        .post-prev,
        .post-next {
            padding: 0 0 5px 0;
        }
        .post-nav-wrap {
            float: none;
            width: 100%;
        }
    }
}

/* Breadcrumb */
.entry-breadcrumb {
    display: inline-block;
    font-size: 84%;
    padding: 0;
    border: none;
    & a:hover {
        text-decoration: none;
    }
}

.read-more {
    font-size: 13px;
    border-width: 1px;
    border-style: dotted;
    border-color: inherit;
    border-radius: 3px;
    background-color: transparent;
	padding: 4px 12px 2px;
    margin: .5em 1em 1em 0;
    width: 92px;
    & a {
        color: inherit;
        &:active, 
        &:focus, 
        &:hover, 
        &:visited {
            color: inherit;
        }
    }
}

/* grid/responsive */
.grid-row {
    display: flex;
    flex-flow: row wrap;
}
.grid-col-4 {
    width: 33.3333333333%;
}
.grid-col-8 {
    width: 66.6666666667%;
}
#sidebar-right {
    padding-left: 32px;
}

@media screen and (max-width: 800px) {
    .grid-col-4 {
        width: 100%;
    }
    .grid-col-8 {
        width: 100%;
    }
    #sidebar-right {
        padding-left: 0;
    }
}

.sidebar-stickey {
    position: sticky;
    top: 0;
}

/* サイドバーウィジェットでの幅広等は不可 */
#sidebar-right {
    .alignwide,
    .alignfull {
        margin-left: 0; 
        margin-right: 0; 
        width: 100%;
        max-width: 100%;
    }    
    *[class*="wp-block-group"] {
        &.has-background.alignfull,
        &.has-background.alignwide {
    		padding: 1em;
        }
    }
    *[class*="wp-block-cover"] {
        &.alignfull,
        &.alignwide {
    		padding: 1em;
        }
    }
}

/* home post list (card) */
#home-list .post-card,
#home-list ins.adsbygoogle {
    height: 240px;
    max-width: 720px;
    margin: 0px auto 24px;
}

.post-card {
    height:100%;
    width:100%;
    overflow: hidden;
    border: 1px solid hsl(var(--jb--color-hsl-border));
    box-shadow: 0 1px 1px rgb(0 0 0 / .1);
    border-radius: 4px;
    word-wrap: break-word;

    & a {
        border: none !important;
        text-decoration: none;
        &:focus {
            outline: thin dotted;
        }
        &:hover {
            text-decoration: underline;
        }
    }
    .post-content-wrapper {
        padding: 0;
        height:100%;
        width:100%;
        position: relative;
        .post-title {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: hsl(var(--jb--color-hsl-background-content) / .9);

            /* 先頭に固定表示指定のタイトル前にピン止め印 */
            .icon-thumb-tack {
                vertical-align: text-top;
                height: 1.2em;
                width: 1.2em;
                fill: orange;
                margin: 0px 5px 0 0; 
            }
            & h3 {
                color: inherit;
                font-size: 137%;
                font-weight: 500;
                line-height: 1.2;
                padding: 12px 0 4px;
                margin: 0 16px;
                max-height: 2.9em;
                overflow: hidden;
            }
        }
        .post-content {
            display: flex;
            height: 90%;
            width: 100%;
            padding-top: 0;
            overflow: hidden;
            background: hsl(var(--jb--color-hsl-background-content) / .9);
            .post-excerpt {
                font-size: 90%;
                line-height: 1.5;
                margin: 4px 20px 0;
                word-break: break-word;
                > a {
                    position:absolute;
                    width:100%;
                    height:60%;
                    max-height: 125px;
                    overflow: hidden;
                    padding: 4px 16px;
                    margin-left: -16px;
                    color: hsl(var(--jb--color-hsl-text-main));
                    text-decoration: none;
                }
            }
            .with-thumb {
                width: 52%;
                height: 60%;
                > a {
                    width: 56%;
                }
            }
            .post-thumb-wrapper {
                width: 40%;
                height: 80%;
                max-height: 150px;
                padding-top: 0px;
                margin: 2px 16px 0 0 !important;
                .post-thumb {
                    height: 100%;
                    width:100%;
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: contain;
                }
            }
        }
        .post-footer {
            clear: both;
            position: absolute;
            bottom: 0px;
            padding: 5px 20px 3px;
            background: linear-gradient(to bottom, hsl(var(--jb--color-hsl-background-content) / .01) 0%, hsl(var(--jb--color-hsl-background-content) / .5) 100%);
            width: 100%;
        }
    }
    .post-content-wrapper.background-image-card {
        height: 100%;
        width:100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        .post-title {
            background: linear-gradient(to top, rgb(0 0 0 / .01) 0%, rgb(0 0 0 / .4) 100%);
            & a {
                color: white;
            }
        }
        .post-content {
            position: relative;
            background-color: rgb(0 0 0 / .02);
            .post-excerpt {
                & a {
                    color: white;
                    text-decoration: none;
                    word-break: break-word;
                    overflow: hidden;
                    opacity: 0;
                }
            }
        }
        .post-footer {
            background: linear-gradient(to bottom, rgb(0 0 0 / .01) 0%, rgb(0 0 0 / .4) 100%);
            
            & a, 
            .published, 
            .updated, 
            .author {
                color: rgb(255 255 255 / .8);
            }
            .entry-meta {
                .svgicon {
                    fill: rgb(255 255 255 / .8);
                }
            }
        }
        &:hover,
        &:active {
            .post-title,
            .post-content {
                background-color: rgb(0 0 0 / .5);
                transition: 0.5s ease-in-out;
                .post-excerpt,
                .post-excerpt a {
                    opacity: 0.9;
                }
            }
        }
    }
    .read-more {
        display: none;
    }
    &:before {
        content: "";
        display: table;
    }
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}
@media screen and (max-width: 480px) {
    .post-card .post-content-wrapper .post-content .post-thumb-wrapper {
        height: 60%;
        .post-thumb {
            background-size: cover;
        }
    }
}

/* ホームカードと個別記事のメタ情報 */
.post-card .entry-meta-wrapper {
 	font-size: 82%;
}

/* メタ共通部 */
.entry-meta {
    > span {
        margin-right: .7em;
        vertical-align: text-top;
        
        &:last-child {
            margin-right: 0;
        }
    }
    & a, 
    .published, 
    .updated, 
    .author {
        color: hsl(var(--jb--color-hsl-text-meta));
    }
    .author {
        & img {
            width: auto;
            height: 1.3em;
            margin: 0px 5px 0 0;
            border: 1px solid #f0f0f1;
            position: relative;
            vertical-align: baseline;
            top: 2px;
        }
        .fn {
            position: relative;
            top: -1px;
        }
    }
    .svgicon {
        height: 1.2em;
        width: 1.2em;
        margin: 0px 5px 0 0;
        fill: hsl(var(--jb--color-hsl-text-meta));
    }
}

.footer-meta {
    clear: both;
    display: inline-block;
    border-top: solid 1px lavender;
    padding: 16px 0 24px;
    margin-top: 2em;
    width: 100%;
    font-size: .93em;
}

.social-icons {
    .svgicon {
        height: 20px;
        width: 20px;
        fill: white;
        background: transparent;
        padding: 0;
        margin: 1px 1px 1px 14px;
        &:hover {
            transform: translateY(-2px);
        }
    }
}

#go-to-top {
    cursor: pointer;
    position: fixed;
    right: 4px;
    bottom: 15%;
    z-index: 2;   
    .svgicon {
        height: 40px;
        width: 40px;
        fill: white;
        background: hsl(var(--jb--color-hsl-theme-sub) / .7);
        transition: 1s ease-in-out;
        padding: 4px;
        border: none;
        border-radius: 1.5em;
    }
}

#go-to-content {
    padding: 5vh 0;
    .svgicon {
        cursor: pointer;
        height: 80px;
        width: 80px;
        fill: white;
        background: hsl(var(--jb--color-hsl-theme-main) / .7);
        padding: 4px;
        border: none;
        border-radius: 4em;
    }
}

img.wp-smiley, 
img.emoji {
    display: inline;
    border: none;
    box-shadow: none;
    height: 1em;
    width: 1em;
    margin: 0 .07em;
    background: none;
    padding: 0;
}

/* Galleries (classic) */
.gallery {
	margin-bottom: 1.5rem;
}

.gallery-item {
    display: inline-block;
    vertical-align: top;
	margin: 0 2px 4px;
	overflow: hidden;
	position: relative;

    .gallery-caption {
        position: absolute;
        bottom: 0;
        width: 100%;
        max-height: 100%;
        overflow: auto;
        margin: 0;
        padding: 40px 10px 10px;
        color: #fff;
        font-size: 13px;
        line-height: 1.3;
        text-align: center;
        background: linear-gradient(0deg,rgb(0 0 0 / .7),rgb(0 0 0 / .3) 60%,transparent);
        transition: 0.5s ease-in-out;
        opacity: 0;
    }
    
    &:hover .gallery-caption {
        transition: 0.5s ease-in-out;
        opacity: 1;
    }
}

.gallery-columns-1 .gallery-item:nth-of-type(1n),
.gallery-columns-2 .gallery-item:nth-of-type(2n),
.gallery-columns-3 .gallery-item:nth-of-type(3n),
.gallery-columns-4 .gallery-item:nth-of-type(4n),
.gallery-columns-5 .gallery-item:nth-of-type(5n),
.gallery-columns-6 .gallery-item:nth-of-type(6n),
.gallery-columns-7 .gallery-item:nth-of-type(7n),
.gallery-columns-8 .gallery-item:nth-of-type(8n) {
	margin-right: 0;
}

.gallery-columns-1 .gallery-item {
    width: 100%;
}
.gallery-columns-2 .gallery-item {
    width: calc(100% / 2 - 4px);
}
.gallery-columns-3 .gallery-item {
    width: calc(100% / 3 - 4px);
}
.gallery-columns-4 .gallery-item {
    width: calc(100% / 4 - 4px);
}
.gallery-columns-5 .gallery-item {
    width: calc(100% / 5 - 4px);
}
.gallery-columns-6 .gallery-item {
    width: calc(100% / 6 - 4px);
}
.gallery-columns-7 .gallery-item {
    width: calc(100% / 7 - 4px);
}
.gallery-columns-8 .gallery-item {
    width: calc(100% / 8 - 4px);
}

/* widget　ウィジェット */
#home-featured {
	margin: 0;
}
#main-top {
	margin: 0;
}
#main-sidebar {
	margin: 0;
}
#sub-sidebar {
	margin: 0;
}
#main-bottom {
	margin: 0;
}

.widget {
    border: none;
    border-radius: 3px;
    padding: 1em 0;
	margin: 0 0 1.25em;
    background: hsl(var(--jb--color-hsl-background-content) / .8);
    
    &.widget_block {
        padding: 0 0 1em;
    	margin: 0;
        .wp-block-embed {
            margin: 0 .25em;
        }
    }
    
	& select {
		max-width: 80%;
	}
    & form {
        margin: 0;
    }
    & input[type="text"], 
    & input[type="search"]{
        width: 65%;
    }
    & input[type="submit"]{
        width: 25%;
        padding: .5em;
    }
    & nav > ul {
        margin-top: 0;
        list-style: disc;
    }
    & nav > ol {
        margin-top: 0;
    	list-style: decimal;
    }
    & ul .children {
        padding: 0 0 0 1.13em;
    }
    & ul li a {
        display: inline;
        text-decoration: none;
    }

    .tagcloud {
        display: block;
        line-height: 1.4;
        margin: .5em;
        word-wrap: break-word;
    }

    .rss-date {
        font-size: 87%;
        margin: .25em .5em;
    }
    .rssSummary {
        font-size: 87%;
        margin: .25em .5em .5em;
        line-height: 1.4;
    }
    & cite {
        padding: 6px 10px;
    }
    .author {
        padding: 4px;
    }
    
    &.bg_transparent {
        background: transparent;
    }
}

.widget-title {
	clear: both;
    display: flex;
    font-size: 1.13em;
    font-weight: 500;
    align-items: center;
    padding: 0 0 1em;
    margin: 0;
    &:before,
    &:after {
        content: "";
        border-top: 2px solid hsl(var(--jb--color-hsl-theme-sub));
        flex-grow: 1;
    }
    &:before {
        margin: 0 .7em 0 .3em;
    }
    &:after {
        margin: 0 .3em 0 .7em;
    }
    + ul,
    + ol {
        margin-top: 0;
    }

    & a {
      border-bottom: none;
      padding: 0;
    }
}

.widget_text {
    .textwidget {
        display: block;
        line-height: 1.4;
        margin: 10px;
        word-wrap: break-word;
        & a {
          display: inline;
        }
    }
    &.fit .textwidget {
        margin: 0;
    }
}

.widget_archive select,
.widget_categories select {
  display: block;
  margin: 8px;
}

.widget_search {
    & form {
        margin: .25em auto .25em .75em;
    }
} 

#calendar_wrap {
    margin: 0 1em;
}

.wp-block-calendar, 
.widget_calendar {
    & table {
        width: 100%;
        border-top: 1px solid #ddd;
        border-bottom: none;
        margin: 0 auto;
        & caption {
            margin: 0;
            color: inherit;
        }
        & tbody {
            color: inherit;
        }
    }
    & th {
        text-align: center;
        border-bottom: 1px solid #ddd;
        padding: 0;
        background: inherit;
    }
    & td {
        text-align: center;
        border: 0;
        border-collapse: separate;
        border-spacing: 1px;
        padding: 0;
    }
    & a {
        display: block;
        &:hover {
            background: rgb(0 0 0 / .15);
        }
    }
    .wp-calendar-nav {
        display: table;
        width: 100%;
        font-size: 1.13em;
        & span {
            display: table-cell;
            width: 33%;
            padding: 2.5% 2.5% 1.75% 2.5%;
            text-align: center;
        }
        .wp-calendar-nav-prev {
            text-align: left;
        }
        .wp-calendar-nav-next {
            text-align: right;
        }
    }
}

.widget {
    &.widget_media_image {
        padding: 0;
        .widget-title {
            padding-top: 1em;
        }
        & img {
            object-fit: contain;
            width: 100%;
            height: 100%;
        }
    }
    &.widget_media_gallery {
        padding: 0;
        .widget-title {
            padding-top: 1em;
        }
        .gallery {
            margin: 0;
        }
    }
    &.widget_media_video {
        padding: 0;
        .widget-title {
            padding-top: 1em;
        }
    }    
}

/* comments (classic) */
#comments,
.wp-block-comments {
    text-align: left;
    
    .comments-title {
        font-size: 120%;
        font-weight: 500;
        color: hsl(var(--jb--color-hsl-text-header));
        border-radius: 6px;
        background: hsl(var(--jb--color-hsl-theme-main));
        padding: 10px;
        margin: 0 0 10px;
    }
    li.comment {
        clear: both;
        font-size: 96%;        
        padding: 12px;        
        border-block: 1px dotted hsl(var(--jb--color-hsl-border));
    }
    .comment-body {
        padding: 10px 8px;
        & p {
            color: hsl(var(--jb--color-hsl-text-main));
            line-height: 1.5;
        }
    }

}

.comment-list,
.wp-block-comment-template {
    border-bottom: 1px solid hsl(var(--jb--color-hsl-border));
    list-style: none;
    margin: 0;
    padding: 0;
    
    & li {
        margin: 0;
    }
    .children {
        list-style: none;
        margin-left: 20px;
        padding: 0px 0px 12px 10px;
    }
    > li:last-child:after {
        display: none;
    }
    .avatar {
        border-radius: 2px;
        float: left;
        margin-top: 4px;
        margin-right: 10px;
        padding: 0;
        vertical-align: middle;
    }
    .bypostauthor,
    .comment-author {
        .fn, .url {
            word-wrap: break-word;
            color: hsl(var(--jb--color-hsl-theme-link));
            .icon-star {
                height: 1.2em;
                width: 1.2em;
                margin: 0px 4px 0 0;
            }
        }
        .says {
            /*「より」を表示しない */
            display: none;
        }
    }
    .comment-meta,
    .comment-meta a,
    .comment-reply-link,
    .comment-reply-login {
        margin: 0;
        padding: 0;
        text-align: left;
    }
    .comment-metadata {
        margin-bottom: 4px;
        font-size: 13px;
    }
    .comment-edit-link,
    .comment-reply-link,
    .comment-reply-login {
        font-size: 14px;
    }
    .edit-link {
        margin-left: 20px;
        .icon-edit {
            height: 1.2em;
            width: 1.2em;
            margin: 0px 4px 0 0;
        }
    }
    .comment-content, .reply {
        clear: both;
        margin: 1px 0 1px 50px;
        .icon-share-square {
            height: 1.2em;
            width: 1.2em;
            margin: 0px 4px -1px 0;
        }
    }
    .pingback, .trackback {
        word-wrap: break-word;
        padding-top: 12px;
    }
}

/* 承認待ち */
.comment-awaiting-moderation {
    clear: both;
    display: block;
    text-align: left;
    padding: 15px;
    margin: 20px 4px;
    color: hsl(var(--jb--color-hsl-text-main));    
    background: var(--wp--preset--color--notice);
    border: 1px solid hsl(var(--jb--color-hsl-border));
    border-radius: 4px;
}

/* コメントは受け付けていません */
.no-comments {
    color: hsl(var(--jb--color-hsl-text-main));    
    font-size: 14px;
    text-align: center;
}

/* Comment form */
.comment-respond {
    clear: both;
    padding: 10px 20px 20px;
    margin: 20px 0;
    border: 1px solid hsl(var(--jb--color-hsl-border));
    border-radius: 4px;
    
    & label {
        color: hsl(var(--jb--color-hsl-text-main));
    }  
    .comment-reply-title small a {
        display: inline-block;
        float: right;
        overflow: hidden;
        .icon-close {
            height: 1.4em;
            width: 1.4em;
        }        
    }  
    .comment-form {
        .comment-notes {
            margin-bottom: 15px;
        }
        .logged-in-as a {
            color: hsl(var(--jb--color-hsl-text-main));
        }
        & input[type="text"],
        & input[type="email"],
        & input[type="url"] {
            width: 96%;
        }
        & input[type=submit] {
            width: auto;
            margin-block-start: 0;
        }        
        & textarea {
            background-color: inherit;
            color: inherit;            
            width: 96%;
        }
    }
    /* コメント欄下の使用可能なHTMLタグの案内を表示しない */
    .form-allowed-tags {
        display: none;
    }
}

/* Comment Navigation */
.comment-navigation {
	.nav-previous {
		float: left;
		width: 50%;
	}
	.nav-next {
		float: right;
		text-align: right;
		width: 50%;
	}
}

/* Infomation message box (classic)) */
.info-box {
    clear: both;
    border-radius: 4px;
    display: block;
    margin: 20px 4px;
    padding: 1em;
    text-align: left;

    :is(h1, h2, h3, h4, h5, h6),
    :is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a) {
        margin: .75em 0;
        padding: 0;
        border: none;
    }
    & h2::before {
        content:none;
    }
    & p {
        margin: .75em 0;
    }
}

.information, .alert-info {
    background: var(--wp--preset--color--info);
}
.success, alert-success {
    background: var(--wp--preset--color--success);
}
.notice, .alert-warning {
    background: var(--wp--preset--color--notice);
}
.alert, .alert-danger {
    background: var(--wp--preset--color--alert);
}

/*================================
 他のプラグインのCSSをテーマ用に調整
=================================*/
/* celtislab site wp-plugins-fts.css overwrite */
.fa-jpborder {
    background: white;
}
.search-option-wrapper {
    color: unset;
}

/* celtispack */  
.post-info {
    .excerpt,
    .date {
        color: hsl(var(--jb--color-hsl-text-sub));
    }
}

/* contact form 7 お問い合わせ */
div.wpcf7 {
    padding: 16px;
    background: hsl(var(--jb--color-hsl-background-body));
    border: 2px solid hsl(var(--jb--color-hsl-border));
    border-radius: 4px;
}

/* Accept Stripe Payments */
.asp_product_item {
    .asp_product_item_top {
        display: flex;
        align-items: center;
        justify-content: center;
        .asp_product_name {
            line-height: normal;
            margin-top: 0;
            margin-bottom: 0;
        }        
    }
    .asp_product_description {
      text-align: center;
    }    
    .asp_price_container {
        font-weight: 500;
        margin: .7em 0 1em;
        font-size: 24px;
        text-align: center;
    }
    .asp_price_amount {
        font-size: 36px;
        font-weight: 500;
    }
    .asp_price_full_total {
        text-decoration: underline solid #dc68b2;
        text-underline-offset: 3px;
        text-underline-position: under;
    }
    .asp_product_buy_button {
        display: flex;
        justify-content: center;
        .asp_product_buy_btn_container .wp-block-button__link {
            font-size: 1.3em;
            font-weight: 500;
            border-radius: 32px; 
            padding: 0.7em 3.2em !important;
        }    
    }    
}