/*
Theme Name:SERUM for shuuyuukai.com
Theme URI:https://tcd-theme.com/tcd096/
Description:WordPress theme "SERUM" is a template with the image of a dermatology clinic, featuring side icon buttons and a post type that allows you to organize the subjects of treatment. CTAs can also be easily set up.
Author:TCD
Author URI:https://tcd-theme.com/
Version:2.9.5
Text Domain:tcd-serum
Template:serum_tcd096
*/

/* かけはしデバイス判定 スタイル */
.device-block{display:block!important}.device-block-sm{display:none!important}@media (max-width:991px){.device-block{display:none!important}.device-block-sm{display:block!important}}.device-flex{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.device-flex-sm{display:none!important}@media (max-width:991px){.device-flex{display:none!important}.device-flex-sm{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}}.rs-height-1{height:12px!important}@media (max-width:575px){.rs-height-1{height:6px!important}}@media (min-width:576px) and (max-width:991px){.rs-height-1{height:10px!important}}.rs-height-2{height:24px!important}@media (max-width:575px){.rs-height-2{height:12px!important}}@media (min-width:576px) and (max-width:991px){.rs-height-2{height:20px!important}}.rs-height-3{height:36px!important}@media (max-width:575px){.rs-height-3{height:18px!important}}@media (min-width:576px) and (max-width:991px){.rs-height-3{height:30px!important}}.rs-height-4{height:48px!important}@media (max-width:575px){.rs-height-4{height:24px!important}}@media (min-width:576px) and (max-width:991px){.rs-height-4{height:40px!important}}.rs-height-5{height:60px!important}@media (max-width:575px){.rs-height-5{height:30px!important}}@media (min-width:576px) and (max-width:991px){.rs-height-5{height:50px!important}}.fit-fs-title{font-size:64px!important}@media (max-width:575px){.fit-fs-title{font-size:30px!important}}@media (min-width:576px) and (max-width:991px){.fit-fs-title{font-size:52px!important}}.fit-fs-subtitle{font-size:44px!important}@media (max-width:575px){.fit-fs-subtitle{font-size:20px!important}}@media (min-width:576px) and (max-width:991px){.fit-fs-subtitle{font-size:34px!important}}.fit-fs-section{font-size:33px!important}@media (max-width:575px){.fit-fs-section{font-size:18px!important}}@media (min-width:576px) and (max-width:991px){.fit-fs-section{font-size:26px!important}}.fit-fs-big{font-size:22px!important}@media (max-width:575px){.fit-fs-big{font-size:16px!important}}@media (min-width:576px) and (max-width:991px){.fit-fs-big{font-size:18px!important}}.fit-fs-normal{font-size:16px!important}@media (max-width:575px){.fit-fs-normal{font-size:13px!important}}@media (min-width:576px) and (max-width:991px){.fit-fs-normal{font-size:14px!important}}.fit-fs-small{font-size:12px!important}@media (max-width:575px){.fit-fs-small{font-size:9px!important}}@media (min-width:576px) and (max-width:991px){.fit-fs-small{font-size:10px!important}}

/* ===== [kkhs_post_cards] START ここから ===== */
/* 投稿カードリスト。テーマ非依存。他テーマへはこの START〜END をコピーする。
   全ルールを .kkhs-cards で前置しているのは、テーマ側の .post_content p などに
   詳細度で勝つため（!important を使わずに済ませている）。 */
.kkhs-cards{
  --kkhs-card-gap-x:30px; --kkhs-card-gap-y:40px;
  --kkhs-card-pad-x:24px; --kkhs-card-pad-y:22px;
  --kkhs-card-desc-mt:12px; --kkhs-card-cats-mt:14px;
  --kkhs-cards-gutter:.75rem;
  /* 白背景でのコントラスト比 17.4:1 / 12.6:1 / 8.9:1。本文は WCAG AAA(7:1) 以上を保つ */
  --kkhs-card-title-color:#1a1a1a;
  --kkhs-card-desc-color:#333;
  --kkhs-card-date-color:#4a4a4a;
  /* アクセントラインは装飾だが区切りも兼ねるので非テキストの 3:1 を満たす */
  --kkhs-card-accent-color:#8f959b;
  --kkhs-card-accent-width:2px;
  --kkhs-card-new-bg:#8a5a00;  --kkhs-card-new-color:#fff;
  --kkhs-card-cat-bg:#222;     --kkhs-card-cat-color:#fff;
  --kkhs-card-focus-color:#1a1a1a;
  /* em ではなく rem。テーマが body の font-size を上書きしていても実寸が変わらない */
  --kkhs-card-title-size:1.05rem; --kkhs-card-title-weight:700;
  --kkhs-card-desc-size:.95rem;   --kkhs-card-meta-size:.8rem;
  display:grid; width:100%;
  gap:var(--kkhs-card-gap-y) var(--kkhs-card-gap-x);
  grid-template-columns:minmax(0,1fr);
}

/* 幅。親のセンタリングを打ち消して画面幅まで広げる。 */
.kkhs-cards.kkhs-cards-fixed,
.kkhs-cards.kkhs-cards-fluid{
  width:100vw; max-width:100vw; box-sizing:border-box;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
.kkhs-cards.kkhs-cards-fluid{
  padding-left:var(--kkhs-cards-gutter); padding-right:var(--kkhs-cards-gutter);
}
/* fixed は「左右パディング = 余った幅の半分」で中央寄せする。ラッパー要素を増やさずに
   済ませるため。ガター未満にはならないよう max() で下限を設ける。
   --kkhs-cards-max の初期値が 100vw なのは、最小段でパディングをガターだけにするため。 */
.kkhs-cards.kkhs-cards-fixed{
  --kkhs-cards-max:100vw;
  padding-left:max(var(--kkhs-cards-gutter), calc((100vw - var(--kkhs-cards-max)) / 2));
  padding-right:max(var(--kkhs-cards-gutter), calc((100vw - var(--kkhs-cards-max)) / 2));
}
@media (min-width:576px){ .kkhs-cards.kkhs-cards-fixed{--kkhs-cards-max:540px} }
@media (min-width:768px){ .kkhs-cards.kkhs-cards-fixed{--kkhs-cards-max:720px} }
@media (min-width:992px){ .kkhs-cards.kkhs-cards-fixed{--kkhs-cards-max:960px} }
@media (min-width:1200px){ .kkhs-cards.kkhs-cards-fixed{--kkhs-cards-max:1140px} }
@media (min-width:1400px){ .kkhs-cards.kkhs-cards-fixed{--kkhs-cards-max:1320px} }

/* min-width:0 が無いとグリッド項目が中身の最小幅で膨らみ、列幅が揃わなくなる */
.kkhs-cards .kkhs-card{min-width:0;display:flex;flex-direction:column}
.kkhs-cards .kkhs-card-link{display:flex;flex-direction:column;flex:1 1 auto;text-decoration:none;color:inherit}
.kkhs-cards .kkhs-card-link:hover,.kkhs-cards .kkhs-card-link:focus{text-decoration:none;color:inherit}
.kkhs-cards .kkhs-card-link:focus-visible{outline:3px solid var(--kkhs-card-focus-color);outline-offset:3px}
.kkhs-cards .kkhs-card-cat:focus-visible{outline:3px solid var(--kkhs-card-focus-color);outline-offset:2px}

/* line-height:0 は img が inline 扱いのときに下へ出る隙間を消すため */
.kkhs-cards .kkhs-card-image{position:relative;width:100%;overflow:hidden;margin:0;line-height:0}
.kkhs-cards .kkhs-card-image>img{display:block;width:100%;max-width:100%;height:auto;margin:0;transition:transform .35s ease}
.kkhs-cards .kkhs-card-image-ratio>img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.kkhs-cards .kkhs-card-link:hover .kkhs-card-image>img{transform:scale(1.05)}
.kkhs-cards.kkhs-cards-round .kkhs-card-image{border-radius:100%}

/* 左のアクセントラインを画像の下からカード下端まで途切れさせないため、画像に下マージンを
   持たせず（間隔は body の上パディング）、リンクの外にあるバッジにも同じ枠線を引く。 */
.kkhs-cards .kkhs-card-body{
  flex:1 1 auto;
  padding:var(--kkhs-card-pad-y) 0 0 var(--kkhs-card-pad-x);
  border-left:var(--kkhs-card-accent-width) solid var(--kkhs-card-accent-color);
}
/* バッジはリンクの外にあるので、バッジが無い＝リンクが最後の子のときだけ body が下端を持つ */
.kkhs-cards .kkhs-card-link:last-child .kkhs-card-body{padding-bottom:var(--kkhs-card-pad-y)}
.kkhs-cards .kkhs-card-cats{margin:0;padding:var(--kkhs-card-cats-mt) 0 var(--kkhs-card-pad-y) var(--kkhs-card-pad-x);border-left:var(--kkhs-card-accent-width) solid var(--kkhs-card-accent-color);display:flex;flex-wrap:wrap;gap:6px}
.kkhs-cards .kkhs-card-meta{margin:0 0 6px;padding:0;display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:var(--kkhs-card-meta-size);line-height:1.4}
.kkhs-cards .kkhs-card-date{color:var(--kkhs-card-date-color)}
.kkhs-cards .kkhs-card-new{display:inline-block;padding:.35em .7em;border-radius:2px;background:var(--kkhs-card-new-bg);color:var(--kkhs-card-new-color);line-height:1}
.kkhs-cards .kkhs-card-title{margin:0;padding:0;font-size:var(--kkhs-card-title-size);font-weight:var(--kkhs-card-title-weight);line-height:1.6;color:var(--kkhs-card-title-color)}
.kkhs-cards .kkhs-card-desc{margin:var(--kkhs-card-desc-mt) 0 0;padding:0;font-size:var(--kkhs-card-desc-size);line-height:1.8;color:var(--kkhs-card-desc-color)}
.kkhs-cards .kkhs-card-cat{display:inline-block;padding:.55em 1.1em;border-radius:10em;background:var(--kkhs-card-cat-bg);color:var(--kkhs-card-cat-color);font-size:var(--kkhs-card-meta-size);line-height:1.3;text-decoration:none}
.kkhs-cards .kkhs-card-cat:hover,.kkhs-cards .kkhs-card-cat:focus{color:var(--kkhs-card-cat-color);text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .kkhs-cards .kkhs-card-image>img{transition:none}
  .kkhs-cards .kkhs-card-link:hover .kkhs-card-image>img{transform:none}
}
/* ハイコントラストモードでは配色が置き換わるので、境界とフォーカスを明示的に残す */
@media (forced-colors:active){
  .kkhs-cards .kkhs-card-body,.kkhs-cards .kkhs-card-cats{border-left-color:CanvasText}
  .kkhs-cards .kkhs-card-link:focus-visible{outline-color:Highlight}
}

/* 列数 */
.kkhs-cards.kkhs-cards-c1{grid-template-columns:repeat(1,minmax(0,1fr))}.kkhs-cards.kkhs-cards-c2{grid-template-columns:repeat(2,minmax(0,1fr))}.kkhs-cards.kkhs-cards-c3{grid-template-columns:repeat(3,minmax(0,1fr))}.kkhs-cards.kkhs-cards-c4{grid-template-columns:repeat(4,minmax(0,1fr))}.kkhs-cards.kkhs-cards-c5{grid-template-columns:repeat(5,minmax(0,1fr))}.kkhs-cards.kkhs-cards-c6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (min-width:576px){.kkhs-cards.kkhs-cards-sm-c1{grid-template-columns:repeat(1,minmax(0,1fr))}.kkhs-cards.kkhs-cards-sm-c2{grid-template-columns:repeat(2,minmax(0,1fr))}.kkhs-cards.kkhs-cards-sm-c3{grid-template-columns:repeat(3,minmax(0,1fr))}.kkhs-cards.kkhs-cards-sm-c4{grid-template-columns:repeat(4,minmax(0,1fr))}.kkhs-cards.kkhs-cards-sm-c5{grid-template-columns:repeat(5,minmax(0,1fr))}.kkhs-cards.kkhs-cards-sm-c6{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:768px){.kkhs-cards.kkhs-cards-md-c1{grid-template-columns:repeat(1,minmax(0,1fr))}.kkhs-cards.kkhs-cards-md-c2{grid-template-columns:repeat(2,minmax(0,1fr))}.kkhs-cards.kkhs-cards-md-c3{grid-template-columns:repeat(3,minmax(0,1fr))}.kkhs-cards.kkhs-cards-md-c4{grid-template-columns:repeat(4,minmax(0,1fr))}.kkhs-cards.kkhs-cards-md-c5{grid-template-columns:repeat(5,minmax(0,1fr))}.kkhs-cards.kkhs-cards-md-c6{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:992px){.kkhs-cards.kkhs-cards-lg-c1{grid-template-columns:repeat(1,minmax(0,1fr))}.kkhs-cards.kkhs-cards-lg-c2{grid-template-columns:repeat(2,minmax(0,1fr))}.kkhs-cards.kkhs-cards-lg-c3{grid-template-columns:repeat(3,minmax(0,1fr))}.kkhs-cards.kkhs-cards-lg-c4{grid-template-columns:repeat(4,minmax(0,1fr))}.kkhs-cards.kkhs-cards-lg-c5{grid-template-columns:repeat(5,minmax(0,1fr))}.kkhs-cards.kkhs-cards-lg-c6{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:1200px){.kkhs-cards.kkhs-cards-xl-c1{grid-template-columns:repeat(1,minmax(0,1fr))}.kkhs-cards.kkhs-cards-xl-c2{grid-template-columns:repeat(2,minmax(0,1fr))}.kkhs-cards.kkhs-cards-xl-c3{grid-template-columns:repeat(3,minmax(0,1fr))}.kkhs-cards.kkhs-cards-xl-c4{grid-template-columns:repeat(4,minmax(0,1fr))}.kkhs-cards.kkhs-cards-xl-c5{grid-template-columns:repeat(5,minmax(0,1fr))}.kkhs-cards.kkhs-cards-xl-c6{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:1400px){.kkhs-cards.kkhs-cards-xxl-c1{grid-template-columns:repeat(1,minmax(0,1fr))}.kkhs-cards.kkhs-cards-xxl-c2{grid-template-columns:repeat(2,minmax(0,1fr))}.kkhs-cards.kkhs-cards-xxl-c3{grid-template-columns:repeat(3,minmax(0,1fr))}.kkhs-cards.kkhs-cards-xxl-c4{grid-template-columns:repeat(4,minmax(0,1fr))}.kkhs-cards.kkhs-cards-xxl-c5{grid-template-columns:repeat(5,minmax(0,1fr))}.kkhs-cards.kkhs-cards-xxl-c6{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* パディング。0=0 / 1=.25rem / 2=.5rem / 3=1rem / 4=1.5rem / 5=3rem。
   ps/pe は論理プロパティなので RTL・縦書きでも始端/終端の意味が保たれる。 */
.kkhs-cards.kkhs-cards-p-0{padding:0}.kkhs-cards.kkhs-cards-p-1{padding:.25rem}.kkhs-cards.kkhs-cards-p-2{padding:.5rem}.kkhs-cards.kkhs-cards-p-3{padding:1rem}.kkhs-cards.kkhs-cards-p-4{padding:1.5rem}.kkhs-cards.kkhs-cards-p-5{padding:3rem}
.kkhs-cards.kkhs-cards-px-0{padding-left:0;padding-right:0}.kkhs-cards.kkhs-cards-px-1{padding-left:.25rem;padding-right:.25rem}.kkhs-cards.kkhs-cards-px-2{padding-left:.5rem;padding-right:.5rem}.kkhs-cards.kkhs-cards-px-3{padding-left:1rem;padding-right:1rem}.kkhs-cards.kkhs-cards-px-4{padding-left:1.5rem;padding-right:1.5rem}.kkhs-cards.kkhs-cards-px-5{padding-left:3rem;padding-right:3rem}
.kkhs-cards.kkhs-cards-py-0{padding-top:0;padding-bottom:0}.kkhs-cards.kkhs-cards-py-1{padding-top:.25rem;padding-bottom:.25rem}.kkhs-cards.kkhs-cards-py-2{padding-top:.5rem;padding-bottom:.5rem}.kkhs-cards.kkhs-cards-py-3{padding-top:1rem;padding-bottom:1rem}.kkhs-cards.kkhs-cards-py-4{padding-top:1.5rem;padding-bottom:1.5rem}.kkhs-cards.kkhs-cards-py-5{padding-top:3rem;padding-bottom:3rem}
.kkhs-cards.kkhs-cards-ps-0{padding-inline-start:0}.kkhs-cards.kkhs-cards-ps-1{padding-inline-start:.25rem}.kkhs-cards.kkhs-cards-ps-2{padding-inline-start:.5rem}.kkhs-cards.kkhs-cards-ps-3{padding-inline-start:1rem}.kkhs-cards.kkhs-cards-ps-4{padding-inline-start:1.5rem}.kkhs-cards.kkhs-cards-ps-5{padding-inline-start:3rem}
.kkhs-cards.kkhs-cards-pe-0{padding-inline-end:0}.kkhs-cards.kkhs-cards-pe-1{padding-inline-end:.25rem}.kkhs-cards.kkhs-cards-pe-2{padding-inline-end:.5rem}.kkhs-cards.kkhs-cards-pe-3{padding-inline-end:1rem}.kkhs-cards.kkhs-cards-pe-4{padding-inline-end:1.5rem}.kkhs-cards.kkhs-cards-pe-5{padding-inline-end:3rem}
.kkhs-cards.kkhs-cards-pt-0{padding-top:0}.kkhs-cards.kkhs-cards-pt-1{padding-top:.25rem}.kkhs-cards.kkhs-cards-pt-2{padding-top:.5rem}.kkhs-cards.kkhs-cards-pt-3{padding-top:1rem}.kkhs-cards.kkhs-cards-pt-4{padding-top:1.5rem}.kkhs-cards.kkhs-cards-pt-5{padding-top:3rem}
.kkhs-cards.kkhs-cards-pb-0{padding-bottom:0}.kkhs-cards.kkhs-cards-pb-1{padding-bottom:.25rem}.kkhs-cards.kkhs-cards-pb-2{padding-bottom:.5rem}.kkhs-cards.kkhs-cards-pb-3{padding-bottom:1rem}.kkhs-cards.kkhs-cards-pb-4{padding-bottom:1.5rem}.kkhs-cards.kkhs-cards-pb-5{padding-bottom:3rem}

/* 狭い画面では余白を詰める */
@media (max-width:991px){
  .kkhs-cards{--kkhs-card-gap-x:24px;--kkhs-card-gap-y:32px;--kkhs-card-pad-x:20px;--kkhs-card-pad-y:18px;--kkhs-card-desc-mt:10px;--kkhs-card-cats-mt:12px}
}
@media (max-width:575px){
  .kkhs-cards{--kkhs-card-gap-x:16px;--kkhs-card-gap-y:24px;--kkhs-card-pad-x:16px;--kkhs-card-pad-y:14px;--kkhs-card-desc-mt:8px;--kkhs-card-cats-mt:10px}
}
/* ===== [kkhs_post_cards] END ここまで ===== */

/* 親テーマ(serum_tcd096)向けの調整。移植用ブロックの外に置いてある。
   親テーマは 1222px 以上で body に padding:80px の額縁を作り、そこへ
   固定の装飾（左の縦書きサイト名・右のボタン列）を重ねている。
   container="fluid" を 100vw まで広げると装飾の下へ潜り込むため、
   額縁と同じ幅のガターを与えて回避する。1221px 以下は額縁が無いので不要。 */
@media (min-width:1222px){
  .kkhs-cards.kkhs-cards-fluid{--kkhs-cards-gutter:80px}
}