/*
**********************************************************************************************
ブログ共通設定
**********************************************************************************************
*/

:root{
--blog-main:#47aeb9;
--blog-main-dark:#2d8b94;
--blog-title:#294b43;
--blog-text:#222;
--blog-muted:#777;
--blog-new:#d96666;

--blog-white:rgba(255,255,255,.88);
--blog-border:rgba(41,75,67,.12);
--blog-border-main:rgba(71,174,185,.30);

--blog-shadow-s:0 8px 20px rgba(0,0,0,.06);
--blog-shadow-m:0 14px 35px rgba(0,0,0,.09);
--blog-shadow-l:0 25px 70px rgba(0,0,0,.20);

--blog-radius-s:14px;
--blog-radius-m:24px;
--blog-radius-l:32px;

--blog-transition:.35s ease;
}


/*
**********************************************************************************************
メタ情報
**********************************************************************************************
*/
.blog-meta,.blog-article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px;color:var(--blog-muted);font-size:.9rem;}
.blog-meta time,.blog-article-meta time{display:inline-flex;align-items:center;line-height:1.5;}

/*
**********************************************************************************************
カテゴリー
**********************************************************************************************
*/
.blog-category{display:inline-flex;justify-content:center;align-items:center;padding:5px 14px;background:#709866;border-radius:999px;color:#fff;font-size:.82rem;line-height:1.4;white-space:nowrap;}
.blog-category-news{background:#70b46b;}
.blog-category-recruit{background:#47aeb9;}
.blog-category-event{background:#e88aa5;}
.blog-category-lunch{background:#f0a94c;}
.blog-category-default{background:#709866;}
/* 園ごとのクラスカテゴリー例 */
.blog-category-hiyoko{background:#efb8c8;}
.blog-category-risu{background:#d4a66f;}
.blog-category-usagi{background:#9dcbe5;}
.blog-category-koala{background:#b69ac9;}
.blog-category-kirin{background:#e4b955;}
.blog-category-zou{background:#91b97d;}

/*
**********************************************************************************************
NEW
**********************************************************************************************
*/
.blog-new{display:inline-flex;justify-content:center;align-items:center;padding:5px 12px;background:var(--blog-new);border-radius:999px;color:#fff;font-size:.75rem;font-weight:700;line-height:1.4;letter-spacing:.04em;}

/*
**********************************************************************************************
カテゴリー絞り込み
**********************************************************************************************
*/

.blog-category-filter{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;}
.blog-category-filter a{display:inline-flex;justify-content:center;align-items:center;min-width:110px;padding:10px 20px;background:rgba(255,255,255,.72);border:1px solid var(--blog-border-main);border-radius:999px;color:var(--blog-title);text-decoration:none;font-size:.95rem;font-weight:600;white-space:nowrap;box-shadow:0 5px 15px rgba(0,0,0,.04);transition:color var(--blog-transition),background-color var(--blog-transition),border-color var(--blog-transition),transform var(--blog-transition),box-shadow var(--blog-transition);}
.blog-category-filter a:hover{background:rgba(71,174,185,.12);border-color:var(--blog-main);color:var(--blog-main);transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.08);}
.blog-category-filter a.is-active{background:var(--blog-main);border-color:var(--blog-main);color:#fff;box-shadow:0 8px 20px rgba(71,174,185,.22);}

/*
**********************************************************************************************
横型ブログ一覧
**********************************************************************************************
*/
.blog-list{width:100%;}
.blog-list-item{display:grid;grid-template-columns:360px minmax(0,1fr);align-items:stretch;gap:36px;margin-bottom:35px;padding:18px;background:rgba(255,255,255,.90);border:1px solid rgba(41,75,67,.07);border-radius:28px;box-shadow:0 12px 35px rgba(0,0,0,.08);transition:transform var(--blog-transition),box-shadow var(--blog-transition);}
.blog-list-item:last-child{margin-bottom:0;}
.blog-list-item:hover{transform:translateY(-5px);box-shadow:0 20px 45px rgba(0,0,0,.12);}
.blog-list-image{display:block;overflow:hidden;min-height:220px;border-radius:20px;}
.blog-list-image img{display:block;width:100%;height:100%;aspect-ratio:16 / 9;object-fit:cover;transition:transform .5s ease;}
.blog-list-item:hover .blog-list-image img{transform:scale(1.05);}
.blog-list-content{display:flex;flex-direction:column;min-width:0;padding:12px 10px 12px 0;}
.blog-list-title{margin:8px 0 16px;color:var(--blog-title);font-size:clamp(1.5rem,2.5vw,2rem);font-weight:700;line-height:1.5;overflow-wrap:anywhere;}
.blog-list-title a{color:inherit;text-decoration:none;transition:color var(--blog-transition);}
.blog-list-title a:hover{color:var(--blog-main);}
.blog-list-excerpt{margin-bottom:24px;color:#555;line-height:1.9;}
.blog-list-more{display:inline-flex;align-items:center;align-self:flex-start;gap:8px;margin-top:auto;color:var(--blog-main);text-decoration:none;font-weight:700;transition:color var(--blog-transition),transform var(--blog-transition);}
.blog-list-more:hover{color:var(--blog-main-dark);transform:translateX(5px);}

/*
**********************************************************************************************
トップページのお知らせ
**********************************************************************************************
*/
.index-blog-section{position:relative;}
.index-blog-heading{margin:0;color:var(--blog-title);font-size:clamp(1.7rem,3vw,2.4rem);font-weight:700;}
.index-blog-all-link{display:inline-flex;align-items:center;color:var(--blog-main);text-decoration:none;font-size:.95rem;font-weight:700;transition:color var(--blog-transition),transform var(--blog-transition);}
.index-blog-all-link:hover{color:var(--blog-main-dark);transform:translateX(4px);}
.blog-list-index .blog-list-item{grid-template-columns:280px minmax(0,1fr);gap:26px;min-height:190px;margin-bottom:24px;padding:14px;border-radius:24px;}
.blog-list-index .blog-list-image{min-height:170px;}
.blog-list-index .blog-list-content{padding:8px 8px 8px 0;}
.blog-list-index .blog-list-title{margin:8px 0 12px;font-size:1.45rem;}
.blog-list-index .blog-list-excerpt{margin-bottom:16px;line-height:1.8;}

/*
**********************************************************************************************
記事なし
**********************************************************************************************
*/
.blog-empty{padding:45px 25px;background:rgba(255,255,255,.55);border:1px solid var(--blog-border);border-radius:var(--blog-radius-m);color:var(--blog-muted);}

/*
**********************************************************************************************
ページネーション
**********************************************************************************************
*/
.blog-pagination{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin-top:70px;}
.blog-page-item{display:flex;}
.blog-page-item a,.blog-page-item .current{display:flex;justify-content:center;align-items:center;width:48px;height:48px;background:var(--blog-white);border:1px solid var(--blog-border-main);border-radius:50%;color:var(--blog-main);text-decoration:none;font-weight:600;line-height:1;transition:color var(--blog-transition),background-color var(--blog-transition),border-color var(--blog-transition),transform var(--blog-transition),box-shadow var(--blog-transition);}

.blog-page-item a:hover{background:var(--blog-main);border-color:var(--blog-main);color:#fff;transform:translateY(-3px);box-shadow:0 8px 18px rgba(71,174,185,.20);}
.blog-page-item .current,.blog-page-item.is-current .current{background:var(--blog-main);border-color:var(--blog-main);color:#fff;}
.blog-page-item .dots{display:flex;justify-content:center;align-items:center;width:36px;height:48px;color:var(--blog-muted);}

/*
**********************************************************************************************
通常の記事詳細
**********************************************************************************************
*/
.blog-detail-section{padding:70px 0 100px;}
.blog-breadcrumb{margin:0;padding:0;background:transparent;font-size:.9rem;}
.blog-breadcrumb a{color:#56766e;text-decoration:none;}
.blog-breadcrumb a:hover{text-decoration:underline;}
.blog-breadcrumb .active{overflow:hidden;color:var(--blog-muted);text-overflow:ellipsis;white-space:nowrap;}
.blog-article{position:relative;overflow:hidden;padding:55px 65px;background:linear-gradient(rgba(255,255,255,.80),rgba(255,255,255,.80)),url("../WebP/bg-washi.webp")center center / cover no-repeat;border:1px solid var(--blog-border);border-radius:var(--blog-radius-l);box-shadow:var(--blog-shadow-m);}
.blog-article-title{margin:0 0 32px;color:var(--blog-title);font-size:clamp(1.8rem,3vw,2.8rem);font-weight:700;line-height:1.55;overflow-wrap:anywhere;}
.blog-article-eyecatch{overflow:hidden;margin-bottom:40px;border-radius:var(--blog-radius-m);}
.blog-article-eyecatch img{display:block;width:100%;height:auto;max-height:650px;object-fit:cover;}

/*
**********************************************************************************************
記事本文
**********************************************************************************************
*/
.blog-article-content,.blog-modal-content{color:var(--blog-text);font-size:1.05rem;line-height:2;overflow-wrap:anywhere;}
.blog-article-content > *:first-child,.blog-modal-content > *:first-child{margin-top:0;}
.blog-article-content > *:last-child,.blog-modal-content > *:last-child{margin-bottom:0;}
.blog-article-content p,.blog-modal-content p{margin-bottom:1.6rem;}
.blog-article-content h2,.blog-modal-content h2{margin:3rem 0 1.4rem;padding:14px 20px;background:rgba(130,189,117,.16);border-left:5px solid rgba(112,152,102,.75);border-radius:0 14px 14px 0;color:var(--blog-title);font-size:1.65rem;font-weight:700;line-height:1.55;}
.blog-article-content h3,.blog-modal-content h3{margin:2.5rem 0 1.2rem;padding-bottom:.65rem;border-bottom:1px solid rgba(41,75,67,.22);color:var(--blog-title);font-size:1.35rem;font-weight:700;line-height:1.55;}
.blog-article-content h4,.blog-modal-content h4{margin:2rem 0 1rem;color:var(--blog-title);font-size:1.15rem;font-weight:700;line-height:1.6;}
.blog-article-content a,.blog-modal-content a{color:var(--blog-main);text-decoration:underline;text-underline-offset:.2em;}
.blog-article-content a:hover,.blog-modal-content a:hover{color:var(--blog-main-dark);}
.blog-article-content img,.blog-modal-content img{max-width:100%;height:auto;border-radius:18px;}
.blog-article-content figure,.blog-modal-content figure{max-width:100%;margin:2rem auto;}
.blog-article-content figcaption,.blog-modal-content figcaption{margin-top:.6rem;color:var(--blog-muted);text-align:center;font-size:.88rem;line-height:1.7;}
.blog-article-content ul,.blog-article-content ol,.blog-modal-content ul,.blog-modal-content ol{margin-bottom:1.8rem;padding-left:1.7rem;}
.blog-article-content li,.blog-modal-content li{margin-bottom:.55rem;}
.blog-article-content blockquote,.blog-modal-content blockquote{margin:2rem 0;padding:20px 24px;background:rgba(255,255,255,.55);border-left:4px solid rgba(112,152,102,.55);border-radius:0 16px 16px 0;}
.blog-article-content blockquote p:last-child,.blog-modal-content blockquote p:last-child{margin-bottom:0;}
.blog-article-content hr,.blog-modal-content hr{margin:3rem 0;border:0;border-top:1px solid rgba(41,75,67,.18);opacity:1;}

/*
**********************************************************************************************
表・画像配置・埋め込み
**********************************************************************************************
*/
.blog-article-content table,.blog-modal-content table{width:100%;margin:2rem 0;border-collapse:collapse;background:rgba(255,255,255,.45);}
.blog-article-content th,.blog-article-content td,.blog-modal-content th,.blog-modal-content td{padding:14px 16px;border:1px solid rgba(41,75,67,.15);vertical-align:top;}
.blog-article-content th,.blog-modal-content th{background:rgba(112,152,102,.12);color:var(--blog-title);font-weight:700;}
.blog-article-content .aligncenter,.blog-modal-content .aligncenter{display:block;margin-right:auto;margin-left:auto;}
.blog-article-content .alignleft,.blog-modal-content .alignleft{float:left;margin:0 1.5rem 1rem 0;}
.blog-article-content .alignright,.blog-modal-content .alignright{float:right;margin:0 0 1rem 1.5rem;}
.blog-article-content::after,.blog-modal-content::after{content:"";display:block;clear:both;}
.blog-article-content iframe,.blog-article-content video,.blog-article-content embed,.blog-modal-content iframe,.blog-modal-content video,.blog-modal-content embed{max-width:100%;}
.blog-article-content video,.blog-modal-content video{height:auto;}
.blog-article-content .wp-block-embed.is-type-video .wp-block-embed__wrapper,.blog-modal-content .wp-block-embed.is-type-video .wp-block-embed__wrapper{aspect-ratio:16 / 9;}
.blog-article-content .wp-block-embed.is-type-video iframe,.blog-modal-content .wp-block-embed.is-type-video iframe{width:100%;height:100%;}
/*
**********************************************************************************************
モーダル
**********************************************************************************************
*/
.blog-modal{z-index:1055;}
.blog-modal .modal-dialog{max-width:1140px;}
.blog-modal .modal-content{position:relative;overflow:hidden;border:0;border-radius:30px;background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,.85)),url("../WebP/bg-washi.webp")center center / cover no-repeat;box-shadow:var(--blog-shadow-l);}
.blog-modal-close-area{position:absolute;top:18px;right:18px;z-index:20;width:auto;padding:0;border:0;background:transparent;}
.blog-modal-close-area .btn-close{width:44px;height:44px;padding:0;background-color:rgba(255,255,255,.92);border-radius:50%;box-shadow:0 6px 20px rgba(0,0,0,.15);opacity:1;transition:transform var(--blog-transition),background-color var(--blog-transition);}
.blog-modal-close-area .btn-close:hover{background-color:#fff;transform:rotate(90deg);}
.blog-modal .modal-body{padding:0;}
.blog-modal-article{padding:60px 70px;}
.blog-modal-header{position:static;margin:0;padding:0;border:0;background:transparent;}
.blog-modal-title{margin:0 0 30px;color:var(--blog-title);font-size:clamp(1.8rem,3vw,2.7rem);font-weight:700;line-height:1.5;overflow-wrap:anywhere;}
.blog-modal-eyecatch{overflow:hidden;margin-bottom:35px;border-radius:var(--blog-radius-m);}
.blog-modal-eyecatch img{display:block;width:100%;height:auto;max-height:650px;object-fit:cover;}
.blog-modal-loading{display:flex;justify-content:center;align-items:center;min-height:260px;}
.blog-modal-loading .spinner-border{width:3rem;height:3rem;color:var(--blog-main);}

/*
**********************************************************************************************
タブレット
**********************************************************************************************
*/
@media (max-width:991px){
.blog-list-item{grid-template-columns:280px minmax(0,1fr);gap:24px;}
.blog-list-index .blog-list-item{grid-template-columns:220px minmax(0,1fr);}
.blog-list-title{font-size:1.55rem;}
}

/*
**********************************************************************************************
スマートフォン
**********************************************************************************************
*/
@media (max-width:767px){
.blog-meta,.blog-article-meta{gap:7px;margin-bottom:13px;font-size:.88rem;}
.blog-category{
padding:4px 10px;font-size:.78rem;}
.blog-new{padding:4px 9px;font-size:.72rem;}
.blog-category-filter{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin-right:-12px;margin-left:-12px;padding-right:20px;padding-bottom:10px;padding-left:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.blog-category-filter::-webkit-scrollbar{display:none;}
.blog-category-filter a{flex:0 0 auto;min-width:auto;padding:9px 16px;font-size:.9rem;}
.blog-list-item,.blog-list-index .blog-list-item{grid-template-columns:1fr;gap:20px;min-height:auto;margin-bottom:24px;padding:14px;border-radius:22px;}
.blog-list-image,.blog-list-index .blog-list-image{min-height:0;}
.blog-list-image img,.blog-list-index .blog-list-image img{height:auto;aspect-ratio:16 / 9;}
.blog-list-content,.blog-list-index .blog-list-content{padding:2px 5px 8px;}
.blog-list-title,.blog-list-index .blog-list-title{margin:6px 0 12px;font-size:1.3rem;}
.blog-list-excerpt,.blog-list-index .blog-list-excerpt{margin-bottom:16px;line-height:1.8;}
.index-blog-heading{font-size:1.6rem;}
.index-blog-all-link{font-size:.88rem;}
.blog-pagination{gap:6px;margin-top:40px;}
.blog-page-item a,.blog-page-item .current{width:42px;height:42px;font-size:.9rem;}
.blog-page-item .dots{width:25px;height:42px;}
.blog-detail-section{padding:45px 0 70px;}
.blog-article{padding:30px 22px;border-radius:24px;}
.blog-article-title{margin-bottom:24px;}
.blog-article-eyecatch{margin-bottom:28px;border-radius:18px;}
.blog-article-content,.blog-modal-content{font-size:1rem;line-height:1.9;}
.blog-article-content h2,.blog-modal-content h2{margin-top:2.4rem;padding:12px 15px;font-size:1.4rem;}
.blog-article-content h3,.blog-modal-content h3{margin-top:2rem;font-size:1.25rem;}
.blog-article-content h4,.blog-modal-content h4{font-size:1.1rem;}
.blog-article-content .alignleft,.blog-article-content .alignright,.blog-modal-content .alignleft,.blog-modal-content .alignright{float:none;display:block;margin:1.5rem auto;}
.blog-article-content .wp-block-table,.blog-modal-content .wp-block-table{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.blog-article-content table,.blog-modal-content table{min-width:560px;}
.blog-modal .modal-dialog{max-width:none;margin:12px;}
.blog-modal .modal-content{max-height:calc(100vh - 24px);border-radius:22px;}
.blog-modal-close-area{top:12px;right:12px;}
.blog-modal-close-area .btn-close{width:40px;height:40px;}
.blog-modal-article{padding:58px 22px 35px;}
.blog-modal-title{margin-bottom:22px;}
.blog-modal-eyecatch{margin-bottom:26px;border-radius:18px;}
}

/*
**********************************************************************************************
アニメーション軽減
**********************************************************************************************
*/
@media (prefers-reduced-motion:reduce){
.blog-list-item,.blog-list-image img,.blog-list-title a,.blog-list-more,.blog-category-filter a,.blog-page-item a,.blog-modal-close-area .btn-close{transition:none;}
.blog-list-item:hover,.blog-list-more:hover,.blog-category-filter a:hover,.blog-page-item a:hover{transform:none;}
.blog-list-item:hover .blog-list-image img{transform:none;}
}