/*
Theme Name: CHAPTER-THREE
Version: 1.0
Author: CHAPTER-THREE
Template: twentytwentyfour
*/

body {
  background-color: #FDEECE;
}

div.zoom-top {
    width: 100%;
    margin:0 auto;
    overflow:hidden;
    height: calc(100vw/1440*695);
}
/*.zoom-top img, */#svg-image {
    width: 100%;
    height: calc(100vw/1440*695);
    animation: animationZoomOut 15s ease-in-out forwards;
}

@keyframes animationZoomOut {
    100% {
        transform:scale(1.1) translateX(-3%) translateY(-2%);
    }
}

.mainVisual {
    width:100%;
    max-width:1200px;
    margin:0 auto;
    overflow:hidden;
}

.zoomz img {
    width: 100%;
    height: auto;
    animation: animationZoom 5s ease-in-out forwards;
}

@keyframes animationZoom {
    100% {
        transform:scale(1.1)
    }
}

.c-menu-btn a {
    position: var(--wp--custom--c-menu-btn--position);
    display: var(--wp--custom--c-menu-btn--display);
    padding: var(--wp--custom--c-menu-btn--padding);
    margin-right:var(--wp--custom--c-menu-btn--margin-right);
    margin-left:var(--wp--custom--c-menu-btn--margin-left);
    background-color: var(--wp--preset--color--c-3-dark-green);
    font-size: var(--wp--custom--c-menu-btn--font-size);
    color: var(--wp--custom--c-menu-btn--color);
    text-decoration: var(--wp--custom--c-menu-btn--text-decoration);
    text-align: var(--wp--custom--c-menu-btn--text-align);
    margin-top: var(--wp--custom--c-menu-btn--margin-top);
    border-radius: 0;
}

.c-menu-blue-btn a {
    position: var(--wp--custom--c-menu-btn--position);
    display: var(--wp--custom--c-menu-btn--display);
    padding: var(--wp--custom--c-menu-btn--padding);
    margin-right:var(--wp--custom--c-menu-btn--margin-right);
    margin-left:var(--wp--custom--c-menu-btn--margin-left);
    background-color: var(--wp--preset--color--c-3-deep-sky-blue);
    font-size: var(--wp--custom--c-menu-btn--font-size);
    color: var(--wp--custom--c-menu-btn--color);
    text-decoration: var(--wp--custom--c-menu-btn--text-decoration);
    text-align: var(--wp--custom--c-menu-btn--text-align);
    margin-top: var(--wp--custom--c-menu-btn--margin-top);
    border-radius: 0;
}

/* アイコンのスタイル */
.c-menu-btn-triangle-right a::after {
    content: var(--wp--custom--c-menu-btn-triangle-right--content);
    position: var(--wp--custom--c-menu-btn-triangle-right--position);
    top: var(--wp--custom--c-menu-btn-triangle-right--top);
    bottom: var(--wp--custom--c-menu-btn-triangle-right--bottom);
    right: var(--wp--custom--c-menu-btn-triangle-right--right);
    width: var(--wp--custom--c-menu-btn-triangle-right--width);
    height: var(--wp--custom--c-menu-btn-triangle-right--height);
    margin: var(--wp--custom--c-menu-btn-triangle-right--margin);
    border-top: var(--wp--custom--c-menu-btn-triangle-right--border-top);
    border-right: var(--wp--custom--c-menu-btn-triangle-right--border-right);
    border-left: var(--wp--custom--c-menu-btn-triangle-right--border-left);
    border-bottom: var(--wp--custom--c-menu-btn-triangle-right--border-bottom);
    box-sizing: var(--wp--custom--c-menu-btn-triangle-right--box-sizing);
}
.c-menu-title {
    display: var(--wp--custom--c-menu-title--display);
    margin-right:var(--wp--custom--c-menu-title--margin-right);
    margin-left:var(--wp--custom--c-menu-title--margin-left);
    margin-top: var(--wp--custom--c-menu-title--margin-top);
    font-weight: var(--wp--custom--c-menu-title--font-weight);
    font-size: var(--wp--custom--c-menu-title--font-size);
    text-align: var(--wp--custom--c-menu-title--text-align);
}
.c3-member-main-more-button {
    border-radius: 50px;
    font-size: var(--wp--custom--c-menu-btn--font-size);
}

/*メニューの表示位置*/
.wp-block-navigation.items-justified-right{
    --navigation-layout-justification-setting:var(--wp--custom--c-menu--navigation-layout-justification-setting);
    --navigation-layout-justify:var(--wp--custom--c-menu--navigation-layout-justify);
}

/*メニューのliのa*/
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
    padding:var(--wp--custom--c-menu-li-a--padding);
    background-color: var(--wp--custom--c-menu-li-a--background-color) !important;
    color:var(--wp--custom--c-menu-li-a--color) !important;
    min-width:var(--wp--custom--c-menu-li-a--min-width);
    border-radius:var(--wp--custom--c-menu-li-a--border-radius);
}

/*subメニューのuiのpadding*/
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
    padding-top:var(--wp--custom--c-submenu-ui--padding-top);
}

@media (max-width: 601px) {
    .wp-block-navigation-submenu > li {
        margin-top:0.5rem;
    }
    .wp-block-navigation {
        margin-left:2rem !important;
    }
}


.c-member-button{
    z-index: var(--wp--custom--c-member-button--z-index);
    position: var(--wp--custom--c-member-button--position);
    bottom: var(--wp--custom--c-member-button--bottom);
    right: var(--wp--custom--c-member-button--right);
    padding: var(--wp--custom--c-member-button--padding);
    border-radius:var(--wp--custom--c-member-button--border-radius);
    color: var(--wp--custom--c-member-button--color);
    background: var(--wp--custom--c-member-button--background);
    text-decoration:var(--wp--custom--c-member-button--text-decoration);
}

@media (max-width: 601px) {
    .c3-mobile-hidden {
        display: none;
    }
}

@media (min-width: 600px) {
    /*.c3-site-title {
        display: none;
    }*/
    .c3-site-sub-title-mobile {
        display:none ;
    }
    .c3-site-title {
        font-size: var(--wp--preset--font-size--large);
        font-weight: normal;
    }
    .c3-site-sub-title-pc {
        font-size: var(--wp--preset--font-size--medium);
        margin-left: 1rem;
     }

    .c3-nav {
        justify-content:center !important;
    }
    .c3-nav-left {
        flex-basis: 50% !important;
    }
    .c3-nav-right {
        flex-basis: 50% !important;
    }
}
@media (max-width: 601px) {
    body {
        padding-top: 78px;
    }
    .c3-site-title {
        font-size: var(--wp--preset--font-size--large);
        font-weight: normal;
    }
    .c3-site-sub-title-pc {
        display:none ;
    }
    .c3-site-sub-title-mobile {
        font-size: var(--wp--preset--font-size--medium);
        margin-left: 1rem;
     }
    .c3-nav {
        justify-content:right !important;
    }
    .c3-nav-group {
        gap: 0;
    }
    .c3-nav-left {
        flex-basis: 80% !important;
    }
    .c3-nav-right {
        flex-basis: 20% !important;
    }
    .c3-nav-open-button {
        background-color: var(--wp--preset--color--c-3-dark-green);
        padding: 0.8rem;
        border-radius: 0.5rem;
        color: white;
    }
}
.c3-category-theme-title{
    display: inline;
}


/*.wp-block-gallery.has-nested-images figure.wp-block-image img{*/
/*    display:block;*/
/*    height:auto;*/
/*    max-width:100% !important;*/
/*    width:auto;*/
/*}*/

/*.middle-content img {*/
/*    width: 100%;*/
/*}*/
/*img {*/
/*    width: 100%;*/
/*    transition: all 0.3s ease;*/
/*}*/
/*.wp-block-image .is-style-rounded img,.wp-block-image.is-style-circle-mask img,.wp-block-image.is-style-rounded img{*/
/*    border-radius:9999px;*/
/*}*/

.c3-top-news {
    text-align: center;
}

.wp-block-image.size-large img{
    width: 100%
}
figure.wp-block-image img {
    /*width: 640px;*/ // QRコード不良のためコメント
    aspect-ratio: auto 640 / 853;
    height: auto;
}

:root :where(.wp-block-image.is-style-rounded img,.wp-block-image .is-style-rounded img) {
	border-radius: 9999px;
}

ul.wp-block-latest-posts__list.has-dates time {
    top: -3em;
    position: relative;
    color: dimgray;
}

/* TOPお知らせ */
.wp-block-latest-posts.wp-block-latest-posts__list li {
    text-align: center;
}


.c3_bread_crumbs {
    text-decoration: none;
}
.c3_bread_crumbs_color {
    color: var( --wp--preset--color--c-3-dark-green);
}
.c3_bread_crumbs::before {
    content:"【";
}
.c3_bread_crumbs::after {
    content:"】";
}
.c3_archive_title {
    margin-block-start:initial !important;
    margin-top : var(--wp--preset--spacing--50) !important;
    padding :var(--wp--preset--spacing--10);
    color: var( --wp--preset--color--c-3-orange);
    border:1px solid var( --wp--preset--color--c-3-orange);
}

@media (max-width: 600px) {
	.c3-nav-public {
		display:none !important;
	}
	.c3-nav-member {
		display:none !important;
	}
}
@media (min-width: 601px) {
	.c3-nav {
		display:none !important;
	}
}


@media (max-width: 600px) {
    .sample-slider{
        width:95%;
        height: 260px;
    }
}
@media (min-width: 601px) {
    .sample-slider{
        width:80%;
        height: 380px;
    }
}
.sample-slider img{
    width: 100%;
}
.sample-slider .swiper-wrapper{
    transition-timing-function: linear;
}
.swiper-slide .post__thumb--img {
    margin: 0 0 15px;
}
.swiper-slide .post__thumb--img a {
    padding-top: 62.5%;
    width: 100%;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.swiper-button-prev, .swiper-button-next {
    color: white;
}

@media (min-width: 600px) {
    .multiple-items-js .item .caption {width: 380px;padding: 15px 20px;}
}
@media (max-width: 601px) {
    .multiple-items-js .item .caption {width: 100%;height:100%}
}


/*banner*/
.banner-holder {
    margin-top: 50px;
}

.banner {
    line-height: 0;
}

.banner.slick-dotted.slick-slider {
    margin: 0;
}

.banner img {
    width: 100%;
}

.banner .item {
    position: relative;
}

.banner .item .caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    /*width: 636px;*/
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    color: #fff;
    line-height: 1.5;
    text-align: center;
    /*padding: 60px 74px;*/
    align-content: center;
}
@media (max-width: 601px) {
    .banner .item .caption {
        border-radius: 0;
    }
    .banner .item .caption .tag {
        display:none;
    }
    .banner .item .caption .btn {
        display:none;
    }
}

.banner .item .caption .tag {
    margin: 0 0 25px;
}

/* this for banner category theme-color customizer */
.banner .item .caption .tag span {
    background: #f1b4a3;
    display: inline-block;
    vertical-align: top;
    padding: 2px 17px;
    border-radius: 1000px;
    color: #fff;
}
.banner .item .caption .entry-title a {
    text-decoration: none;
    color: #fff !important;
}

.banner .item .caption .tag span a {
    text-decoration: none;
    color: #fff !important;
}

.banner .item .caption .tag span a:hover {
    color: #fff !important;
}

.banner .item .caption h2 {
    font-weight: 500;
    color: #fff;
    margin: 0 0 25px;
}

.banner .item .caption p {
    font-size: 16px;
    margin: 0 0 25px;
    font-weight: 300;
}

.banner .item .caption .btn {
    border: 1px solid #fff;
    padding: 6px 16px;
    color: #fff;
}

.banner .item .caption .btn:hover {
    background: #000;
    border-color: #000;
}
/*end banner*/

/* read more fontsize customizer */
.btn,
button {
    font-size: 14px;
    transition: all 0.3s ease;
    border: 0;
    border-radius: 1000px;
    text-decoration: none;
}

:where(.wp-site-blocks) > * {
    margin-block-start: 0;
}
.c3-main {
    padding-block-start: 0.5rem;
    padding-block-end: 0.5rem;
}

.c3-main-contents-border {
    background: white;
    margin: 0.5rem;
    border: solid 1px;
    border-radius: 0.5rem;
    border-color: #FBE0A7;
}
@media (max-width: 600px) {
  .c3-main-contents-border {
    padding: 0.5rem;
  }
}
@media (min-width: 601px) {
  .c3-main-contents-border {
    padding: 0.5rem 2rem;
  }
}

.c3-main-more-button {
    border-radius: 2rem;
}

@media (max-width: 600px) {
    .c3-fixed-header {
        position: fixed; /* ヘッダーを固定する */
        top: 0; /* 上部から配置の基準位置を決める */
        left: 0; /* 左から配置の基準位置を決める */
        z-index: 10000;
        width: 100%; /*ヘッダーの横幅を指定する */
        box-shadow:0 7px 10px 2px #333333; /* 影を指定（[右][下][ぼかし][広がり][影の色]） */
        /* height: 35px; ヘッダーの高さを指定する */
        /* padding: 10px; ヘッダーの余白を指定する(上下左右) */
        /* background-color: #31a9ee; ヘッダーの背景色を指定する */
        /* color: #000000; フォントの色を指定する */
    }

    .c3-fixed-contents {
        width: 100%; /* コンテンツの横幅を指定する */
        overflow: auto; /* コンテンツの表示を自動に設定（スクロール） */
    }
    .c3-fixed-footer {
        margin-top: 2rem;
    }
}
@media (min-width: 601px) {
    .c3-fixed-footer {
        margin-top: 3rem;
        padding-top:3rem;
    }
}
    .c3-fixed-header {
        border-bottom: 3px solid #F3AA0D; /* ヘッダーの境界線（下部）を指定する */
    }
    .c3-fixed-footer {
        border-top: 3px solid #F3AA0D;
    }
    .c3-fixed-hr {
        height: 3px;
        background-color: #F3AA0D;
        border: none;
        color: #F3AA0D;
    }