@charset "utf-8";

/* =========================================================================================
固定ページ基礎部分
=========================================================================================*/
/* ------------------------------
.visualがない場合は80px（標準）の余白
.visualがある場合は2.5emの余白
------------------------------ */
.intro {
    --visual-padding-bottom:2.5em;
}

/* .visualの隣接要素（兄弟）がいる場合、2.5emを適用 */
.intro .visual:has(+ *) {
    padding-bottom:var(--visual-padding-bottom);
}
.intro .visual + .anchor-links {
    margin-top:0;
}
/* .intro内に.visualしかない場合、.introのpadding-bottomを2.5em */
.intro:has(.visual):not(:has(.visual + *)) {
    padding-bottom:0;
}
.intro:has(.visual):not(:has(.visual + *)) .visual {
    padding-bottom:var(--visual-padding-bottom);
}





/* =========================================================================================
【新】ボタン
=========================================================================================*/
/* ========== aタグを囲うラッパー要素 ========== */
.btn {
    --padding-block:0.8em;
    --padding-inline:clamp(1.563rem, calc(0.509rem + 4.494vw), 2.813rem);/* vp:375-820px 25-45px */
    --icon-width:0.4em; /* ＞アイコンの横幅 */
    --gap:1.25em;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--gap);
    margin-block:1em;
    padding:0;
}
.btn.left { align-items:start;} /* 左寄せ */
.btn.right { align-items:end;}  /* 右寄せ */
@media only screen and (min-width:821px){
    .btn.left-pc { align-items:start;}
    .btn.right-pc { align-items:end;}
}
@media only screen and (max-width:820px){
    .btn.left-sp { align-items:start;}
    .btn.right-sp { align-items:end;}
}

/* ========== 通常リンク ========== */
.btn :is(a, button) {
    font-size:clamp(0.813rem, calc(0.707rem + 0.449vw), 0.938rem);/* vp:375-820px 13-15px */
    font-weight:var(--weight-medium);
    color:var(--color-base-font);
    line-height:1.4;
    position:relative;
    display:block;
    width:fit-content;
    padding-block:calc(var(--padding-block) * 1.15) var(--padding-block);
    padding-inline:var(--padding-inline) calc(var(--padding-inline) + var(--icon-width));
    border:1px solid var(--color-silver);
    border-radius:var(--border-radius);
    text-decoration:none;
    background-color:#fff;
}
/* 矢印アイコン */
.btn :is(a, button)::before {
    content:"";
    position:absolute;
    top:50%;
    right:calc(var(--padding-inline) / 2);
    translate:100% -50%;
    display:block;
    width:var(--icon-width);
    height:1lh;
    background-color:currentColor;
    mask:url(../images/common/arrow.svg) no-repeat center / contain;
}
/* ファイルリンクアイコン */
.btn :is(a, button)::after {
    display:inline-block;
    width:1em;
    aspect-ratio:1;
    margin-bottom:0.1em;/* 位置調整 */
    margin-left:0.25em;
    background-color:currentColor;
}
@media only screen and (max-width:468px){
    .btn :is(a, button)::before {
        translate:50% -50%;
    }
    .btn :is(a, button)::after {
        width:1.1em;
    }
}


/* ========== 通常リンク（アンカーリンク） ========== */
/* ※.anchor-linksの後に実装したため、被らないようにjumpとしております */
.btn .jump::before {
    rotate:0.25turn;
}


/* ========== 通常リンク（救急科用の特別ボタン） ========== */
.btn-kyukyu {
    --padding-inline:1em;
    --icon-width:3.3em;
    margin-top:auto;
}
.btn-kyukyu a {
    font-size:0.875em;
    line-height:1.2;
    padding-inline:calc(var(--padding-inline) * 1.5 + var(--icon-width)) var(--padding-inline);
    border-radius:calc(var(--border-radius) * 2);
    background-image:linear-gradient(
        to bottom,
        color-mix(in sRGB, var(--color-silver) 25%, #fff 75%) 25%,
        transparent
    );
    box-shadow:
        inset 0.5em 0px 0.5em 0px #fff,
        inset -0.5em 0px 0.5em 0px #fff;
}
.btn-kyukyu a::before {
    left:calc((var(--padding-inline) * 1.5 + var(--icon-width)) / 2);
    right:auto;
    translate:-50% -50%;
    height:auto;
    aspect-ratio:46/31.5;
    background:url(../images/common/icon_ambulance.svg) no-repeat center / contain;
    mask:none;
}
.btn-kyukyu a::after {
    content:none;
}


/* ========== 戻るボタン ========== */
.btn .return {
    color:var(--color-main);
    padding-inline:calc(var(--padding-inline) + var(--icon-width)) var(--padding-inline);
    width:min(350px, 100%);
    text-align:center;
    border-color:currentColor;
}
.btn .return::before {
    right:auto;
    left:calc(var(--padding-inline) / 2);
    rotate:-0.5turn;
}




/* ========== ページリンク ========== */
.btn .pagelink {
    --padding-block:0.5em;
    --padding-inline:clamp(0.625rem, calc(0.098rem + 2.247vw), 1.25rem);/* vp:375-820px 10-20px */
    --icon-width:0.9em;

    font-size:clamp(0.875rem, calc(0.559rem + 1.348vw), 1.25rem);/* vp:375-820px 14-20px */
    line-height:1.2;
    width:100%;
    min-height:3lh;
    align-content:center;/* テキストを上下中央に配置 */
    padding-inline:calc(var(--padding-inline) * 2 + var(--icon-width)) var(--padding-inline);
    background-image:
        linear-gradient(to bottom, #fff, #f1f1f1),
        linear-gradient(to right bottom, #C5C4C1 0%, #EDE8E2 50%, #C5C4C1 100%);
    background-origin:border-box;
    background-clip:padding-box, border-box;
    border:solid 1px transparent;
    border-radius:var(--border-radius);
}
.btn .pagelink::before {
    right:auto;
    left:calc((var(--padding-inline) * 2 + var(--icon-width)) / 2);
    translate:-50% -50%;
    background:url(../images/common/arrow_circle_blue.svg) no-repeat center / contain;
    mask:unset;
}
@media only screen and (max-width:468px){
    .btn .pagelink {
        --icon-width:1.15em;
    }
}

/* ========== ページリンク（YouTubeアイコンあり） ========== */
.btn .pagelink.icon-youtube {
    --icon-width:1.7em;
    font-family:var(--font-biz);
}
.btn .pagelink.icon-youtube::before {
    background-image:url(../images/common/icon_youtube.svg);
}


/* ========== ページリンク（少し内側に短いサブリンク） ========== */
.btn .pagelink.sublink {
    --icon-width:0.4em;
    --indent-size:clamp(1.25rem, calc(0.197rem + 4.494vw), 2.5rem);/* vp:375-820px 20-40px */

    margin-left:var(--indent-size);
    width:calc(100% - var(--indent-size));
}
.btn .pagelink.sublink::before {
    translate:0 -50%;
    background:currentColor;
    mask:url(../images/common/arrow.svg) no-repeat center / 100% auto;
}



/* =========================================================================================
【新】特殊リンク
=========================================================================================*/
.entry-content a[href^="tel:"] {
    display:inline-flex;
    /* align-items:center; */
    align-items:baseline;
    gap:0.2em;
    vertical-align:middle;
}
.entry-content a[href^="tel:"]::before {
    content:"";
    display:inline-block;
    width:0.8em;
    aspect-ratio:1;
    background-color:currentColor;
    mask:url(../images/common/icon_tel.svg) no-repeat center / contain;
}
.entry-content a[href^="tel:"].no-icon::before {
    content:none;
}


/* =========================================================================================
【新】SNSアイコンリンク
<a href="_____" class="sns-list instagram" target="_blank">_____</a>
=========================================================================================*/
a.sns-list {
    font-size:14px;
    font-weight:var(--weight-bold);
    color:inherit;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:0.5em 0.75em;
    margin-block:1rem;
    width:fit-content;
}
a.sns-list:where(.facebook, .instagram, .line)::after {
    content:"";
    display:block;
    margin:auto;
    width:2.5em;
    aspect-ratio:1;
    background:no-repeat center / contain;
    mask:none;
    order:-1;/* 先頭に配置（別タブアイコンの無効化も兼用） */
}
a.sns-list.facebook::after { /* facebook */
    background-image:url(../images/common/icon_facebook.svg);
}
a.sns-list.instagram::after { /* instagram */
    background-image:url(../images/common/icon_instagram.svg);
}
a.sns-list.line::after { /* line */
    background-image:url(../images/common/icon_line.svg);
}



/* =========================================================================================
【新】見出し
=========================================================================================*/
/* 見出しXL */
.mid-xl {
    color:#fff;
    font-size:clamp(1.75rem, calc(0.591rem + 4.944vw), 3.125rem);/* vp:375-820px 28-50px */
    font-weight:var(--weight-regular);
    font-family:var(--font-zen-old);
    line-height:1.4;
    margin-bottom:0.5em;
}
/* 見出しL */
.mid-l {
    color:var(--color-main);
    font-size:clamp(1.563rem, calc(1.088rem + 2.022vw), 2.125rem);/* vp:375-820px 25-34px */
    font-weight:var(--weight-regular);
    font-family:var(--font-zen-old);
    line-height:1.4;
    margin-bottom:1em;
    padding-bottom:0.5em;
    /* border-bottom:solid 1px var(--color-silver); */
    border-bottom:1px solid var(--color-silver);
}
* + .mid-l {
    margin-top:1em;
}

/* 見出しM */
.mid-m {
    font-size:clamp(1.188rem, calc(0.977rem + 0.899vw), 1.438rem); /* vp:375-820px 19-23px */
    font-weight:var(--weight-semibold);
    font-family:var(--font-zen-old);
    line-height:1.5;
    margin-bottom:0.5em;
}
/* 診療科ページ系のみ、margin-bottom変更 */
:is(.parent-department, .ancestor-department) .mid-m {
    margin-bottom:0.3em;
}

/* 見出しS */
.mid-s {
    font-size:clamp(1.125rem, calc(1.02rem + 0.449vw), 1.25rem); /* vp:375-820px 18-20px */
    font-weight:var(--weight-medium);
    color:var(--color-base-font);
    /* margin-bottom:0.5em; */
}
.mid-s.center {
    width:fit-content;
    margin-inline:auto;
}
.mid-s .jp {
    display:block;
    width:fit-content;
    padding-bottom:0.2em;
    border-bottom:solid 1px var(--color-silver);
}
.mid-s .en {
    font-size:12px;
    font-weight:var(--weight-regular);
    letter-spacing:0.1em;;
    line-height:3;
    color:#616161;
    padding-left:0.1em;
}
/* 見出しSS */
.mid-ss {
    color:var(--color-main);
    font-size:clamp(1.063rem, calc(0.904rem + 0.674vw), 1.25rem); /* vp:375-820px 17-20px */
    font-family:var(--font-ibm);
    /* margin-bottom:0.5em; */
}
/* 見出しXS */
.mid-xs {
    color:var(--color-main);
    font-size:clamp(0.938rem, calc(0.779rem + 0.674vw), 1.125rem); /* vp:375-820px 15-18px */
    /* margin-bottom:0.5em; */
}

/* 見出しL（.inner-sub用。イレギュラー） */
.mid-sub-l {
    font-size:clamp(1.563rem, calc(1.299rem + 1.124vw), 1.875rem);/* vp:375-820px 25-30px */
    font-family:var(--font-zen-old);
    line-height:1.5;
    font-weight:var(--weight-semibold);
    margin-bottom:0.5em;
}
/* 見出しM（.inner-sub用。イレギュラー） */
.mid-sub-m {
    font-size:clamp(1.375rem, calc(1.164rem + 0.899vw), 1.625rem);/* vp:375-820px 22-26px */
    font-weight:var(--weight-semibold);
    font-family:var(--font-zen-old);
    line-height:1.5;
    margin-bottom:0.5em;
    padding-left:0.35em;
    border-left:solid round(0.1em, 1px) var(--color-main);
}

.inner-sub {
    margin-left:2rem;
}
.inner-sub :is(.mid-sub-l, .mid-sub-m) {
    margin-left:-1rem;
}
@media only screen and (max-width:820px){
    .inner-sub {
        margin-left:0;
    }
    .inner-sub :is(.mid-sub-l, .mid-sub-m) {
        margin-left:0;
    }
}


/* 動画アイコンの付与 */
.movie-title {
    display:grid;
    grid-template-columns:1.3em 1fr;
    gap:0.25em;
}
.movie-title::before {
    content:"";
    display:block;
    width:100%;
    height:1lh;
    background-color:currentColor;
    mask:url(../images/common/icon_movie.svg) no-repeat center / contain;
}


/* =========================================================================================
【新】インデント用のsection
=========================================================================================*/
/*sectionというクラスのついたsectionはｈ2以下をインデントさせる*/
section.section {
    --section-indent:13px;/* インデント用の距離 */
    padding-left:var(--section-indent);
}
section.section .mid-l {
    margin-left:calc(var(--section-indent) * -1);
}

/* .intro、.section内の最後の要素がp、.btnの場合、margin-bottomを削除 */
section:is(.intro, section) :is(p, .btn):last-of-type {
    margin-bottom:0;
}
@media only screen and (max-width:820px) {
    section.section {
        /* --section-indent:10px; */
        --section-indent:0px;
    }
}
@media only screen and (max-width:468px) { }


/* =========================================================================================
【新】段落
=========================================================================================*/
/*デフォルトのスペース*/
.entry-content .inner > p,
.entry-content .inner-sub > p {
    margin-bottom:1em;
}


/* =========================================================================================
【新】リスト
=========================================================================================*/
:is(ul, ol).gap-0 {
    gap:0!important;
}

/* 中点付きリスト */
ul.list {
    display:flex;
    flex-direction:column;
    list-style:none;
    line-height:1.5;
    gap:0.5em 1em;
    padding:0;
    margin:0.5em 0;
}
ul.list > li {
    padding-left:1em;
    line-height:1.6;
    position:relative;
}
ul.list > li::before {
    position:absolute;
    content:"";
    background:var(--color-main);
    width:1em;
    aspect-ratio:1;
    clip-path:circle(0.2em at 50% 50%);
    top:0.25em;
    left:0;
}

/* 注釈リスト */
ul.list-note {
    display:flex;
    flex-direction:column;
    list-style:none;
    gap:0 1em;
    margin:0.5em 0;
    padding:0;
    text-indent:1em hanging;
}
ul.list-note > li::before {
    content:"※";
}



/* 数字付きリスト */
ol.list {
    display:flex;
    flex-direction:column;
    gap:0.5em 1em;
    padding:0;
    margin:0.5em 0 0.5em 1.5em;
}
ol.list:has(> li:nth-of-type(10)){
    margin-left:2.3em;
}
ol.list > li {
    line-height:1.6;
    position:relative;
}
ol.list > li::marker {
    color:var(--color-main);
}

/* ○枠のある数字付きリスト */
ol.list-circle {
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:0.75em 1em;
    padding:0;
    margin:0.5em 0 0.5em 2em;
    counter-reset:list-circle 0;
}
ol.list-circle > li {
    counter-increment:list-circle 1;
    position:relative;
    line-height:1.6;
}
ol.list-circle > li::marker {
    content:none;/* 細かな調整が効かないため無効化 */
}
ol.list-circle > li::before {
    content:counter(list-circle) "";
    position:absolute;
    bottom:calc(100% - (0.5lh - 0.5em) - 1em);
    right:calc(100% + 0.25em);
    color:inherit;
    display:grid;
    place-items:center;
    width:1.5em;
    height:1.5em;
    border:1px solid;
    border-radius:100%;
}

/* 数字付きフローリスト */
ol.list-flow {
    --order-size:clamp(1.813rem, calc(1.128rem + 2.921vw), 2.625rem); /* ::beforeの横幅 vp:375-820px 29-42px */
    --order-gap:clamp(0.375rem, calc(-0.046rem + 1.798vw), 0.875rem); /* ::beforeとコンテンツの余白 vp:375-820px 6-14px */
    --arrow-size:0.875em;    /* 矢印の傘の長さ（1辺） */
    --arrow-width:2px;       /* 矢印の線の太さ */
    --arrow-color:#A09F9F; /* 矢印の色 */

    list-style:none;
    counter-reset:list-flow 0;
}
ol.list-flow > li {
    counter-increment:list-flow 1;
    position:relative;
    margin-left:calc(var(--order-size) / 2 + var(--arrow-width));
    padding-left:calc(var(--order-size) / 2 + var(--order-gap) - var(--arrow-width));
}
ol.list-flow > li:has(+ li){
    margin-bottom:1em;
    padding-bottom:3em;
}
ol.list-flow > li::marker {
    content:none;/* 細かな調整が効かないため無効化 */
}
ol.list-flow > li::before {
    content:counter(list-flow)"";
    position:absolute;
    top:0;
    left:calc(var(--arrow-width) / 2);
    font-size:clamp(1.125rem, calc(0.914rem + 0.899vw), 1.375rem);/* vp:375-820px 18-22px */
    font-weight:var(--weight-bold);
    font-family:var(--font-zen-old);
    line-height:1;
    color:#fff;
    display:grid;
    place-items:center;
    padding-bottom:0.2em;
    width:var(--order-size);
    height:var(--order-size);
    background-color:var(--color-main);
    border-radius:50%;
    translate:-50% -25%;
}
ol.list-flow > li:has(+ li)::after {
    content:"";
    position:absolute;
    bottom:0;
    left:calc(var(--arrow-width) / -2 +  var(--arrow-width));
    width:var(--arrow-size);
    height:100%;
    background:
        url(../images/common/icon_list-flow_arrow.png) no-repeat center bottom / 100% auto,
        url(../images/common/icon_list-flow_line.png) repeat-y center bottom 2px / var(--arrow-width) auto;
    translate:-50% 0;
    z-index:-1;
}
@media only screen and (max-width:820px){
    ol.list-flow > li::before {
        padding-bottom:0.1em;
    }
}



/* カタカナリスト */
ol.list-katakana {
    list-style:none;
    counter-reset:ktkn 0;
    display:flex;
    flex-direction:column;
    gap:0.5em 1em;
    padding:0;
    margin:0.5em 0 0.5em 1.375em;
}
ol.list-katakana > li {
    counter-increment:ktkn 1;
    padding-left:1em;
}
ol.list-katakana > li::marker {
    content:counter(ktkn, katakana) "";
}


/* 横並びに変更 */
ul.list.row,
ol.list.row,
ol.list-katakana.row {
    flex-direction:row;
    flex-wrap:wrap;
}

/* =========================================================================================
【新】画像 / 動画関係
=========================================================================================*/
/* 枠線をつける */
.border {
    border:1px solid var(--border-color, currentColor);
}
:not(figure, img).border {
    display:inline-block;
    padding-inline:0.25em;
}

/* 小さい画像を引き延ばす */
.stretch {
    width:100%;
    max-width:100%;
}

/* =========================================================================================
【新】figure
=========================================================================================*/
/* figcaptionの文字サイズ */
.entry-content :is(figure, img) {
    --border-color:#bfbfbf;
}
.entry-content figure figcaption {
    font-size:clamp(0.75rem, calc(0.645rem + 0.449vw), 0.875rem); /* vp:375-820px 12-14px */
    margin-top:0.5em;
}

/* figcaptionのabsolute化 */
.entry-content figure:has(figcaption.inside) {
    position:relative;
}
.entry-content figcaption.inside {
    font-size:var(--font-def);
    color:#fff;
    position:absolute;
    top:0;
    left:0;
    margin-top:0;
    padding-top:0.1em;
    padding-inline:0.5em;
    background-color:var(--color-main);
}
.entry-content figcaption.fit {
    padding-inline:0.6em;
    width:fit-content;
}
.entry-content figcaption.right {
    left:auto;
    right:0;
}
.entry-content figcaption.bottom {
    top:auto;
    bottom:0;
}


/* =========================================================================================
【新】テーブル
=========================================================================================*/
/*
    --border-color
        枠線の色。
        枠線を後付けする際に使用する「.border-bottom」などはこの変数を参照しています。
        tableとth,tdもこの変数を参照していますが、th,td側は別の値で上書きしております。
*/
/* ========== 共通 ========== */
.entry-content table {
    /* def */
    /* --border-color:var(--color-silver);
    border-block:solid 1px var(--border-color); */

    --border-color:#bbb;
    line-height:1.6;
    width:100%;
    margin-bottom:0.5em;
    border-spacing:0;
    border-block:solid 2px var(--border-color);
}
/* 見出しに隣接したtableには、mt0.5を付与 */
.entry-content [class^="mid-"] + table {
    margin-top:0.5em;
}

/* キャプション */
.entry-content caption,
.entry-content .caption {
    color: var(--color-base-font);
    padding-top:0.5em;
}
/* th, td */
.entry-content :is(th, td) {
    /* def */
    /* --border-color:#dedede;
    padding-block:1.25em; */
    --border-color:#b5b5b5;

    padding:1.3em clamp(0.625rem, calc(0.098rem + 2.247vw), 1.25rem) 1.25em;/* vp:375-820px 10-20px */
    text-align: left;
    border:none;
    position: relative;
    border-bottom:solid 1px var(--border-color);
}
.entry-content th {
    /* def */
    /* background:var(--color-gray); */
    width:25%;
    background:#e9e9e9;
    font-weight:var(--weight-medium);
}
.entry-content td {
    background-color:#fff;
}
.entry-content :is(th, td) small {
    font-size:clamp(0.75rem, calc(0.592rem + 0.674vw), 0.938rem); /* min:12px, max:15px */
    line-height: 1.2;
    display: inline-block;
}
/* 最終行のth,tdの下線を削除（tableの線があるため） */
.entry-content table:not(:has(tfoot)) tbody tr:last-child :is(th, td),
.entry-content tfoot tr:last-child :is(th, td) {
    border-bottom:none;
}
.entry-content tfoot :is(th, td) {
    background-color:var(--color-gray);
}

/*  theadを持つ場合、th、tdの右側に枠線を表示（最後の要素は表示しない）
    ※rowspan、colspanには対応できないので、個別に設定が必要 */
.entry-content table:has(thead) th:not(:last-child),
.entry-content table:has(thead) td:not(:last-child){
    border-right:1px solid var(--border-color);
}


/* ========== スクロールテーブル ========== */
/* テーブルのscroll（カスタムHTMLにて手動設定のとき） */
@media only screen and (max-width:820px) {
    .entry-content .sp-scroll {
        width:100%;
        overflow-x:auto;
    }
    .entry-content .sp-scroll table {
        width:55em;
    }

    /* スマホ時段落ちテーブル */
    table.sp-block th,
    table.sp-block td {
        display: block;
    }

    /* スクロール時の文言 */
    .sp-scroll::before {
        content: "▼横にスクロールしてご覧ください";
        color: var(--color-main);
        line-height: 1.4;
        display: block;
        width: 100%;
        margin-bottom: 0.5em;
    }

    /* スクロール時に、特定要素をsticky化（rowspan、colspanに対応できないため、個別設定） */
    .sp-scroll .sticky {
        position:sticky;
        left:0;
        z-index:1;
    }
}


/* ========== その他（汎用的なもの） ========== */
/* theadがある場合、横幅25%を無効化 */
.entry-content table:has(thead) th {
    width:auto;
}
/* thの横幅を文字列依存に変更（自動改行しないため注意） */
.entry-content table.th-fit th {
    width:1%;
    white-space:nowrap;
}
/* tdの横幅を文字列依存に変更（自動改行しないため注意） */
.entry-content table.td-fit th {
    width:auto;
}
.entry-content table.td-fit td {
    white-space:nowrap;
}
/* thの文字列を上端に変更 */
.entry-content table.th-top th {
    vertical-align:top;
}
/* ht, tdのpadding-block短縮 */
.entry-content table.row-compact :is(th, td){
    padding-top:0.5em;
    padding-bottom:0.4em;
}
/* thの縦書き化 */
/* .entry-content table[class^="th-vertical"]{
    --ls:0.15em;
}
.entry-content table.th-vertical th {
    writing-mode:vertical-lr;
    letter-spacing:var(--ls);
    vertical-align:revert!important;
} */
/* @media only screen and (min-width:821px){
    .entry-content table.th-vertical-pc th {
        writing-mode:vertical-lr;
        letter-spacing:var(--ls);
        vertical-align:revert!important;
    }
}
@media only screen and (max-width:820px){
    .entry-content table.th-vertical-sp th {
        writing-mode:vertical-lr;
        letter-spacing:var(--ls);
        vertical-align:revert!important;
    }
} */

/* table,th,tdを最小幅に変更 */
.entry-content table.mini,
.entry-content table.mini th {
    /* width:auto; */
}
/* .entry-content table.mini th {
    width:auto;
    white-space:nowrap;
} */


/* =========================================================================================
【新】仕切り線
=========================================================================================*/
hr.dots { /* 破線 */
    background-color:transparent;
    border-bottom:dashed 1px #B8B8B8;
}


/* =========================================================================================
【新】灰色のコンテンツボックス
=========================================================================================*/
.box-gray {
    margin-block:1em;
    padding:2.5em 3em;
    background-color:var(--color-gray);
}
@media only screen and (max-width:820px) {
    .box-gray {
        margin-block:2.25em;
        padding:2.25em 2.75em;
    }
}
@media only screen and (max-width:468px) {
    .box-gray {
        margin-block:1.5em;
        padding:2em 1.5em;
    }
}


/* =========================================================================================
【新】モーダル
=========================================================================================*/
/* 閉鎖ボタン */
/* .modal {
    width:min(800px, 95vw);
    max-height:85vh;
    overflow-y:auto;
}
.modal button[command][commandfor] {
    position:absolute;
    inset:auto 0 calc(100% + 0.5em) auto;
    display:block;
    width:1.25em;
    aspect-ratio:1;
}
.modal button[command][commandfor] span:nth-of-type(1) {
    rotate:45deg;
}
.modal button[command][commandfor] span:nth-of-type(2) {
    rotate:-45deg;
} */

/* =========================================================================================
【新】横並びのブロック
=========================================================================================*/
/* =============== 等間隔に分割 =============== */
/* 2カラム */
.layout-grid-2 {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:50px 6.5%;
}
/* 3カラム */
.layout-grid-3 {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:50px 6.5%;
}
/* 4カラム */
.layout-grid-4 {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:50px 6.5%;
}

/* .btnの場合はgapを調整 */
.btn:is(.layout-grid-2, .layout-grid-3, .layout-grid-4){
    gap:1em 1.25em;
}
/* 画像を並べる想定の場合もgapを調整 */
:is(.layout-grid-2, .layout-grid-3, .layout-grid-4).gap-slim {
    gap:1.25em;
}

@media only screen and (max-width:820px) {
    /* タブレット以下は2カラムに */
    .layout-grid-2,
    .layout-grid-3,
    .layout-grid-4 {
        grid-template-columns:repeat(2, 1fr);
        gap:30px;
    }
}
@media only screen and (max-width:468px) {
    /* 最終的には1カラムに */
    .layout-grid-2,
    .layout-grid-3,
    .layout-grid-4 {
        grid-template-columns:repeat(1, 1fr);
        gap:20px;
    }
    .btn.layout-grid-2,
    .btn.layout-grid-3,
    .btn.layout-grid-4 {
        gap:0.5em;
    }
}

/* =============== 不規則に分割（ただの横並び） =============== */
.layout-flex {
    display:flex;
    gap:50px 4.5%;
}
.layout-flex img.left,
.layout-flex img.right,
.layout-flex img.center {
    display:block;
    width:fit-content;
}
.layout-flex img.left   { margin-inline:0 auto;}
.layout-flex img.right  { margin-inline:auto 0;}
.layout-flex img.center { margin-inline:auto;}

@media only screen and (max-width:820px){
    .layout-flex {
        /* タブレット以下は縦並びに変更 */
        flex-direction:column;
        gap:30px;
    }
    .layout-flex > img,
    .layout-flex figure {
        width:100%;
        max-width:unset!important;
        /* align-self:center; */
    }
    .layout-flex figure img {
        /* width:100%; */
    }
    .layout-flex.sp-img-first > img,
    .layout-flex.sp-img-first > figure {
        /* .sp-img-first が設定されている場合、画像をはじめに移動 */
        order:-1;
    }
    .layout-flex.sp-img-last > img,
    .layout-flex.sp-img-last > figure {
        /* .mb-img-last が設定されている場合、画像を最後に移動 */
        order:9999;
    }
}
@media only screen and (max-width:468px){
    .layout-flex {
        gap:20px;
    }
}


/* =============== float（テキストの回り込み） =============== */
/* float */
.layout-float {
    display:flow-root;/* clearfix処理 */
}
/* .layout-float figure.float-left,
.layout-float figure.float-right,
.layout-float img.float-left,
.layout-float img.float-right {
    max-width:40%;
} */
.float-left {
    float:left;
    margin-right:2em;
    margin-bottom:1em;
}
.float-right {
    float:right;
    margin-left:2em;
    margin-bottom:1em;
}


/* =========================================================================================
アコーディオン
=========================================================================================*/
/* =============== 基礎（開閉機能のみの骨組み） =============== */
.accordion button {
    text-align:start;
}
.accordion .accordion-body {
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows var(--trans), padding var(--trans);
}
.accordion .accordion-inner {
    height:100%;
    overflow:hidden;
}
/* 開閉処理 */
.accordion .accordion-btn.active ~ .accordion-body {
    grid-template-rows:1fr;
}


/* ========== 通常ブロック（.accordion.accordion-box） ========== */
.accordion.accordion-box {
    margin-bottom:0.75em;
}
.accordion.accordion-box button {
    color:#6F6F6F;
    text-decoration:underline;
    text-underline-offset:2px;
}
.accordion.accordion-box button svg {
    --circle-color:color-mix(in sRGB, var(--color-base-font) 47.5%, #fff 52.5%);
    --arrow-color:var(--color-base-font);

    width:1.3em;
    aspect-ratio:1;
    margin-left:0.3em;
    margin-bottom:0.1em;
    vertical-align:middle;
    transition:rotate var(--trans);
}
.accordion.accordion-box .accordion-inner {
    padding-inline:clamp(0.625rem, calc(-0.639rem + 5.393vw), 2.125rem);/* vp:375-820px 10-34px */
    background-color:var(--color-gray);
    font-family:var(--font-ibm);
    transition:padding var(--trans);
}

/* 開閉時の追加処理 */
.accordion.accordion-box button.active svg {
    rotate:0.5turn;
}
.accordion.accordion-box button.active + .accordion-body .accordion-inner {
    padding-block:clamp(1.125rem, calc(0.704rem + 1.798vw), 1.625rem);/* vp:375-820px 18-26px */
}


/* ========== ボタン風アコーディオン（.accordion.accordion-block） ========== */
.accordion.accordion-block {
    --padding-block:0.75em;
    --padding-inline:1em;

    display:grid;
    grid-template:
        "btn icon" auto
        "body body" 1fr / 1fr auto;
    margin-block:1em;
    background-color:var(--color-gray);


    /* 配置 */
    & .accordion-btn { grid-area:btn;}
    & .accordion-btn-icon { grid-area:icon;}
    & .accordion-body { grid-area:body;}

    /* ボタン */
    & .accordion-btn {
        font-size:1.125em;
        padding-block:var(--padding-block);
        padding-left:var(--padding-inline);
    }

    /* ボタン（SVGアイコン） */
    & .accordion-btn-icon {
        padding:var(--padding-block) var(--padding-inline);
    }
    & .accordion-btn-icon svg {
        width:round(1.375em, 1px);
        height:round(1.375em, 1px);
        vertical-align:middle;
        transition:rotate var(--trans);
    }

    /* コンテンツ */
    & .accordion-body {
        padding-inline:calc(var(--padding-inline) * 2);
    }
}
/* ===== .active ===== */
.accordion.accordion-block .accordion-btn.active {

    /* ボタン（SVGアイコン） */
    & ~ .accordion-btn-icon svg {
        rotate:0.5turn;
    }

    /* コンテンツ */
    &  ~ .accordion-body {
        padding-bottom:var(--padding-block);
    }
}

@media only screen and (max-width:820px){
.accordion.accordion-block {
    /* grid-template:
        "btn" auto
        "body" auto
        "icon" 1fr / 1fr; */

    /* ボタン */
    & .accordion-btn {
        /* padding-inline: var(--padding-inline); */
    }
    /* ボタン（SVGアイコン） */
    & .accordion-btn-icon {
        /* justify-self:center;
        text-align:center;
        width:100%;
        background-color:color-mix(in sRGB, var(--color-gray), rgb(0 0 0 / 0.05)); */
    }
    /* コンテンツ */
    & .accordion-body {
        padding-inline:calc(var(--padding-inline) * 1.5);
    }
}
}
/* ========== ボタン風アコーディオン（.accordion.accordion-block.large） ========== */
/* 基本的には↑の通常版を継承 */
.accordion.accordion-block.large {

    /* ボタン */
    & .accordion-btn {
        font-size:clamp(1.188rem, calc(0.977rem + 0.899vw), 1.438rem);/* vp:375-820px 19-23px */
        padding-block:clamp(1.25rem, calc(0.829rem + 1.798vw), 1.75rem);/* vp:375-820px 20-28px */
    }
}
@media only screen and (max-width:820px){

}



/* ========== 大内科制について（.accordion.dainaika-box）※診療科ページのみの使用を想定 ========== */
.dainaika-box button {
    font-size:0.875em;
    color:#6F6F6F;
    text-align:end;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:0.3em;
    width:fit-content;
    margin-inline:auto 0;
    padding-bottom:0.75em;
    text-decoration:underline;
    text-underline-offset:2px;
}
.dainaika-box button::after{
    content:"";
    display:block;
    width:1.3em;
    aspect-ratio:1;
    background:url(../images/common/icon_megamenu_gray.svg) no-repeat center / contain;
    transition:rotate var(--trans);
}
.dainaika-box .accordion-inner {
    padding-inline:clamp(0.625rem, calc(-0.639rem + 5.393vw), 2.125rem);/* vp:375-820px 10-34px */
    background-color:var(--color-gray);
    font-family:var(--font-ibm);
    transition:padding var(--trans);
}
.dainaika-box figure {
    width:min(240px, 40%);
    margin-left:2em;
    margin-bottom:0;
}
/* 開閉時の追加処理 */
.dainaika-box button.active::after {
    rotate:0.5turn;
}
.dainaika-box button.active + .dainaika-wrapper .accordion-inner {
    padding-block:clamp(1.125rem, calc(0.704rem + 1.798vw), 1.625rem);/* vp:375-820px 18-26px */
}



/* ========== 循環器内科 > 医療関係者の方へ（.accordion.accordion-report） ========== */
.accordion-report {
    --wrapper-padding:1.5em;/* スマホ時のネガティブ調整に使用 */
    display:grid;
    grid-template:
        "btn add-btn" auto
        "body body" 1fr / 1fr auto;
    background-color:var(--color-gray);
}
.accordion-report .accordion-btn {
    grid-area:btn;
    display:grid;
    grid-template-columns:9em 1fr;
    align-items:center;
    gap:1.75em;
    width:100%;
    padding-block:var(--wrapper-padding);
    padding-left:var(--wrapper-padding);
}
.accordion-report .accordion-btn-icon {
    grid-area:add-btn;
    position:relative;
    padding-block:var(--wrapper-padding);
    padding-inline:1em var(--wrapper-padding);
}
.accordion-report .accordion-btn-icon svg {
    --circle-color:color-mix(in sRGB, var(--color-base-font) 47.5%, #fff 52.5%);
    --arrow-color:var(--color-base-font);
    width:1.5em;
    aspect-ratio:1;
    transition:rotate var(--trans);
}
/* .accordion-report .accordion-add-btn {
    grid-area:add-btn;
    position:relative;
    padding-block:var(--wrapper-padding);
    padding-inline:1em var(--wrapper-padding);
}
.accordion-report .accordion-add-btn svg {
    --circle-color:color-mix(in sRGB, var(--color-base-font) 47.5%, #fff 52.5%);
    --arrow-color:var(--color-base-font);
    width:1.5em;
    aspect-ratio:1;
    transition:rotate var(--trans);
} */
.accordion-report .accordion-btn.active svg {
    rotate:0.5turn;
}
.accordion-report .accordion-body {
    grid-area:body;
}

/* ボタン内部のカスタム */
.accordion-report .ar-summary-wrap {
    font-size:0.9375em;
    display:grid;
    grid-template-columns:5em auto;
    align-content:center;
    gap:1em;
}
.accordion-report .ar-summary {
    grid-column:span 2;
    display:grid;
    grid-template-columns:subgrid;
}
.accordion-report .ar-summary dt {
    color:#fff;
    text-align:center;
    height:fit-content;
    background-color:var(--color-main);
}
.accordion-report .ar-summary dd { 
    text-align:start;
}
.accordion-report .ar-summary h4 {
    margin:calc(0.5em - 0.5lh) 0 auto; /* 上部のline-height分をネガティブマージン */
    line-height:1.2;
}

/* 開閉時のアニメーション処理 */
.accordion-report .accordion-inner {
    padding-inline:1.5em;
    transition:padding var(--trans);
}
.accordion-report .accordion-btn.active ~ .accordion-body .accordion-inner {
    padding-bottom:1.5em;
}
.accordion-report .accordion-btn.active ~ .accordion-btn-icon svg {
    rotate:0.5turn;
}
/* .accordion-report .accordion-btn.active ~ .accordion-add-btn svg {
    rotate:0.5turn;
} */

@media only screen and (max-width:820px){
    .accordion-report {
        --wrapper-padding:0.75em;
        grid-template:
            "btn" auto
            "body" 1fr
            "add-btn" auto / 1fr;
    }
    .accordion-report .accordion-btn {
        grid-template:
            "img ar-affili" auto
            "img ar-period" auto
            "ar-title ar-title" 1fr / min(120px, 100%) 1fr;
        align-items:start;
        gap:0.75em;
        padding-inline:var(--wrapper-padding);
    }
    .accordion-report .ar-summary-wrap {
        display:contents;   /* タグの無効化（非表示ではなく、存在しない） */
    }
    .accordion-report .ar-summary {
        display:block;
    }
    .accordion-report .ar-summary dt {
        padding-inline:0.5em;
        min-width:5em;
        width:fit-content;
    }
    .accordion-report .ar-summary dd {
        line-height:1.3;
    }
    .accordion-report .ar-summary:not(.ar-summary-title) dd {
        margin-top:0.5em;
    }
    .accordion-report .accordion-btn figure {
        grid-area:img;
    }
    .accordion-report .ar-summary-affiliation {
        grid-area:ar-affili;
    }
    .accordion-report .ar-summary-period {
        grid-area:ar-period;
    }
    .accordion-report .ar-summary-title {
        grid-area:ar-title;
        display:flex;
        gap:0.4em;
    }

    .accordion-report .accordion-btn-icon {
        background-color:#F1F1F1;
        padding:calc(var(--wrapper-padding) * 0.75) 0;
    }
    .accordion-report .accordion-btn-icon::after {
        width:1.25em;
        margin-inline:auto;
    }
    /* .accordion-report .accordion-add-btn {
        background-color:#F1F1F1;
        padding:calc(var(--wrapper-padding) * 0.75) 0;
    }
    .accordion-report .accordion-add-btn::after {
        width:1.25em;
        margin-inline:auto;
    } */
}


/* =========================================================================================
.page-header
=========================================================================================*/
header.page-header {
    color:#fff;
    background:
        var(--bg-noise) repeat top left / 750px auto,
        linear-gradient(94deg, #1478DC 38.78%, #6DB0F3 64.86%, #62B1FF 92.52%) no-repeat center / cover;
    background-blend-mode:multiply;
}
header.page-header .inner {
    padding-block:100px;
    display:grid;
    /* grid-template-columns:1fr 28em; */
    grid-template-columns:auto 1fr;
    align-items:baseline;
    gap:2.3em 2em;
}
header.page-header .page-title, 
header.page-header .page-title sub {
    margin-bottom:0;
}
header.page-header .catch {
    font-size:clamp(0.938rem, calc(0.569rem + 1.573vw), 1.375rem);/* vp:375-820px 15-22px */
    font-weight:var(--weight-light);
}

/*===== グラデーションなし =====*/
header.page-header.no-gradient {
    color:var(--color-base-font);
    background:transparent;
    background-blend-mode:none;
}
header.page-header.no-gradient .page-title {
    color:inherit;
}
/* .no-gradientが設定されている場合、パンくずのaタグは--color-mainに変更 */
body:has(header.page-header.no-gradient) .breadcrumbs a {
    color:var(--color-main);
}

@media only screen and (max-width:960px){
    header.page-header .inner {
        grid-template-columns:1fr;
    }
}
@media only screen and (max-width:820px){
    header.page-header .inner {
        row-gap:1.5em;
        padding-block:clamp(1.75rem, calc(-0.146rem + 8.09vw), 4rem)!important;/* vp:375-820px 28-64px */
    }
    header.page-header .catch {
        line-height:1.5;
    }
}



/* ========== コンテンツボックス（.content-box）をめり込ませる ========== */
:root:has(header.page-header.inside-content-box) {
    --inside-range:clamp(7.5rem, calc(-0.4rem + 33.708vw), 16.875rem);/* vp:375-820px 120-270px */
}
header.page-header.inside-content-box {
    padding-bottom:var(--inside-range);
}
header.page-header.inside-content-box .inner {
    padding-bottom:55px;
}
header.page-header.inside-content-box + .content-box {
    position:relative;
    margin-top:calc(var(--inside-range) * -1);
    padding-top:0px;
    z-index:1;
}

/* .entry-contentが.unitを持つ場合（診療科：センター用） */
header.page-header:has(+ .content-box .unit) .inner {
    --padding-top:clamp(2.188rem, calc(-0.183rem + 10.112vw), 5rem);/* vp:375-820px 35-80px */

    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    padding-top:var(--padding-top);
    padding-bottom:clamp(1.688rem, calc(-0.051rem + 7.416vw), 3.75rem);/* vp:375-820px 27-60px */
}
header.page-header:has(+ .content-box .unit) .inner .page-title {
    margin-bottom:0px;
}
@media only screen and (max-width:820px){
    header.page-header:has(+ .content-box .unit) .inner {
        padding-top:calc(var(--header-height) + var(--padding-top));
    }
}


/* =========================================================================================
.breadcrumbs（パンくず）
=========================================================================================*/
/* ========== 共通処理 ========== */
.breadcrumbs {
    font-size:0.75rem;
    display:flex;
    flex-wrap:wrap;
    justify-content:end;
    gap:0.5em 0;
}
.breadcrumbs li + li {
    position:relative;
    margin-left:1em;
    padding-left:2em;
}
.breadcrumbs li + li::before {
    content:"";
    position:absolute;
    top:0px;
    left:0px;
    width:1em;
    height:1lh;
    background-color:currentColor;
    mask:url(../images/common/arrow.svg) no-repeat center / 50% auto;
}

/* 別タブアイコンの打ち消し */
.breadcrumbs a[target="_blank"] {
    padding-right:0px;
}
.breadcrumbs a[target="_blank"]::after {
    content:none;
}

/* ========== ページ上部（pc用） ========== */
header.page-header .breadcrumbs a {
    color:inherit;
    margin-top:4rem;
    text-decoration:underline;
}

/* ========== ページ下部（スマホ用） ========== */
.breadcrumbs.bottom {
    display:none;
    justify-content:end;
    margin-top:2.5rem;
}

@media only screen and (max-width:960px){
    header.page-header .breadcrumbs {
        display:none;
    }
    .breadcrumbs.bottom {
        display:flex;
    }
}


/* =========================================================================================
.side-nav（サイドナビ）
=========================================================================================*/
#main .content-box:has(aside) {
    width: calc(100% - 40px - 40px);
    max-width: var(--contents-width-main);
    display: grid;
    grid-template-columns:1fr 220px;
    align-items: start;
    gap: 6.5%;
    margin-inline: auto;
}
#main .content-box:has(aside) > article {
    container:hasSidenav-body / inline-size;
    min-width: 0; /* sliderなどの幅対策 */
}
#main .content-box:has(aside) article .inner {
    width: 100%;
}
@media only screen and (max-width:960px) {
    #main .content-box:has(aside) {
        display: block;
        width: calc(100% - 20px - 20px);
    }
    /* 診療科ページの場合、サイドナビを非表示化 */
    body:is(.parent-department, .ancestor-department) #main .content-box aside {
        display:none!important;
    }
    #main .content-box aside {
        margin-top:4.5em;
    }
}


/* ========== 基礎処理 ========== */
.side-nav {
    --btn-paddingInline-def:0.87rem;  /* アコーディオンボタン・リンク部分の基礎余白（主に左側） */
    --btn-paddingInline-large:2.5rem; /* アコーディオンボタン・リンク部分の大き目余白（主に右側） */
    text-align:start;
}
.side-nav a {
    color:inherit;
    text-decoration:none;
}
.side-nav button,
.side-nav a.sn-wrapper2-btn {
    font-weight:var(--weight-medium);
    text-align:start;
    line-height:1.5;
    display:flex;
    align-items:center;
    position:relative;
    width:100%;
}
.side-nav button {
    padding-inline:var(--btn-paddingInline-def) var(--btn-paddingInline-large);
}
.side-nav a.sn-wrapper2-btn {
    padding-inline:var(--btn-paddingInline-def);
}
.side-nav button::after {
    content:"";
    position:absolute;
    inset:50% 0 auto auto;
    translate:-50% -50%;
    display:block;
    aspect-ratio:1;
    background-color:var(--color-main);
    mask:no-repeat center / contain;
}
.side-nav sub {
    bottom:-0.1em;
}

/* ========== 個別処理 ========== */
.side-nav > ul {
    display:flex;
    flex-direction:column;
    gap:10px 0px;
}
.side-nav > ul > li {
    background-color:#fff;
    border-radius:var(--border-radius);
    box-shadow:0px 0px 10px 0px rgb(0 0 0 / 0.1);
}

/* 破線 */
.side-nav .sn-wrapper1-flex > ul > li + li {
    border-top:dashed 1px #DEDEDE;
}
/* 直線 */
.side-nav .sn-wrapper1-flex > ul {
    /*padding-block:0.5em;/* 上下に若干の余白を追加 */
    border-top:solid 1px color-mix(in sRGB, #BABABA 72.94%, transparent 27.06%);
}
/*
    .is-currentを子供に持つul
    .is-currentが設定されたli
    .is-currentを子供に持っていない.sn-wrapper1-flexの子供のうち、最初のul
        上記3要素の上線は無効化
*/
.side-nav .sn-wrapper1-flex > ul:has(li.is-current),
.side-nav .sn-wrapper1-flex li.is-current,
.side-nav .sn-wrapper1-flex:not(:has(li.is-current)) > ul:first-of-type {
    border-top:none;
}
/*
    .is-currentを子供に持つul
    .is-currentを子供に持っていない.sn-wrapper1-flexの子供のうち、最初のul
        上記2要素の上余白は無効化
*/
.side-nav .sn-wrapper1-flex > ul:has(li.is-current),
.side-nav .sn-wrapper1-flex:not(:has(li.is-current)) > ul:first-of-type {
    padding-top:0px;
}

/* 大枠のアコーディオンを制御するbutton */
.side-nav .sn-wrapper1-btn {
    font-size:18px;
    color:var(--color-main);
    padding-block:0.75em;
}
/* .sn-wrapper1-btnのアイコンはジャギーが気になったため、useタグを使用 */
.side-nav .sn-wrapper1-btn svg:has(use){
    --circle-color:currentColor;
    --arrow-color:currentColor;
    position:absolute;
    inset:50% 0 auto auto;
    translate:-50% -50%;
    width:round(down, 1.45em, 1px);
    aspect-ratio:1;
    transition:rotate var(--trans);
}
.side-nav .sn-wrapper1-btn::after {
    content:none;
}

/* 内側のアコーディオンを制御するbutton */
.side-nav .sn-wrapper2-btn {
    padding-block:1.1em;
}
.side-nav .sn-wrapper2-btn::after {
    display:none;
    /* width:0.75em;
    mask-image:url(../images/common/arrow.svg);
    rotate:90deg;
    transition:rotate var(--trans); */
    width:1.6em;
    mask:url(../images/common/arrow.svg) no-repeat center / 0.5em auto;
    rotate:90deg;
    transition:rotate var(--trans);
}

/* .subLink */
.side-nav li.subLink .sn-wrapper2-btn::before {
    content:"";
    display:inline-block;
    width:1em;
    margin-bottom:0.2em;
    vertical-align:middle;
    aspect-ratio:1;
    background-color:color-mix(in sRGB, currentColor 75%, #fff 25%);
    clip-path:circle(0.1875em at 50% 50%);
}

/* 大枠のアコーディオンの配置処理 */
.side-nav .sn-wrapper1-flex,
.side-nav .sn-wrapper1-flex > ul {
    display:flex;
    flex-direction:column;
}

/* アンカーリンクの配置処理 */
.side-nav .sn-anchorLinks {
    font-size:0.9375rem;
    padding-inline:2em 1em;
}
.side-nav .sn-anchorLinks li + li {
    padding-top:1em;
}
.side-nav .sn-anchorLinks li:last-of-type {
    padding-bottom:1em;
}

/* ========== 開閉時の処理 ========== */
.side-nav .sn-wrapper1,
.side-nav .sn-wrapper2 {
    /* display:grid; */
    display:none;
    grid-template-rows:0fr;
    transition:grid-template-rows var(--trans), display var(--trans) allow-discrete;
}
.side-nav .sn-wrapper1-flex,
.side-nav .sn-wrapper2 > ul {
    height:100%;
    overflow:hidden;
}

/* ボタンに.activeが付与される（クリックされる）と、アコーディオンを展開 */
.side-nav .sn-wrapper1-btn.active ~ .sn-wrapper1,
.side-nav .sn-wrapper2-btn.active ~ .sn-wrapper2 {
    display:grid;
    grid-template-rows:1fr;
}
/* display:none → grid 時のアニメーション補助 */
@starting-style {
    .side-nav .sn-wrapper1-btn.active ~ .sn-wrapper1,
    .side-nav .sn-wrapper2-btn.active ~ .sn-wrapper2 {
        grid-template-rows:0fr;
    }
}
.side-nav .sn-wrapper1-btn.active svg:has(use){
    rotate:0.5turn;
}
.side-nav .sn-wrapper2-btn.active::after {
    rotate:270deg;
}

/* ========== その他・特別な処理 ========== */
/* 現ページのアンカーを含む大枠のアコーディオンは、上位に表示 */
.side-nav > ul > li:has(.is-current) {
    order:-1;
}
.side-nav .sn-wrapper1-flex > ul:has(li.is-current) {
    order:-1;
}
/* 現ページのアコーディオンを含む内側のアコーディオンも、上位に配置 */
.side-nav .sn-wrapper1-flex > ul > li.is-current {
    order:-1;
    background-color:#F2F2F2;
}
.side-nav .sn-wrapper1-flex > ul > li.is-current button {
    padding-inline:var(--btn-paddingInline-def);
}
.side-nav .sn-wrapper1-flex > ul > li.is-current button::after {
    content:none;
}
/* スマホ時のアコーディオンボタン（.sn-wrapper2-btn）差し替え処理
　　※スマホ時にはアコーディオンの挙動をすべて無効化し、button → aへ変更 */
@media only screen and (min-width:961px){
    .side-nav .sn-wrapper2-btn.bottom-only {
        display:none;
    }
}
@media only screen and (max-width:960px){
    /*========== サイドナビは下部へ移動 ==========*/
    /* 常に開きっぱなしとする */
    .side-nav .sn-wrapper1 {
        display:grid!important;
        grid-template-rows:1fr!important;
    }

    /* 内部アコーディオンは非表示化し、ボタンのみとする */
    .side-nav .sn-wrapper2-btn.right-only,
    .side-nav .sn-wrapper2 {
        display:none!important;
    }
}

@media only screen and (max-width:960px){
    .side-nav .sn-wrapper1-btn svg {
        display:none;
    }
    .side-nav .sn-wrapper1-flex > ul {
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        column-gap:1em;
    }
    .side-nav .sn-wrapper1-flex > ul > li + li {
        border-top:none;
    }
    .side-nav .sn-wrapper1-flex > ul > li {
        border-bottom:dashed 1px #dedede;
    }
    /* 総数が偶数個の場合の末尾2個、奇数個の場合の末尾1個の下線を非表示 */
    .side-nav .sn-wrapper1-flex > ul > li:last-child:nth-child(odd),
    .side-nav .sn-wrapper1-flex > ul > li:last-child:nth-child(even),
    .side-nav .sn-wrapper1-flex > ul > li:nth-last-child(2):nth-child(odd){
        border-bottom:none;
    }
    .side-nav a.sn-wrapper2-btn {
        height:100%;
        padding-inline:var(--btn-paddingInline-def) var(--btn-paddingInline-large)
    }
    .side-nav a.sn-wrapper2-btn::after {
        content:"";
        position:absolute;
        inset:50% calc(var(--btn-paddingInline-large) / 2) auto auto;
        translate:50% -50%;
        display:block;
        width:1em;
        aspect-ratio:1;
        background-color:var(--color-main);
        mask:url(../images/common/arrow.svg) no-repeat center / contain;
        rotate:0deg!important;
    }
}
@media only screen and (max-width:468px){
    .side-nav {
        --btn-paddingInline-def:0.5rem;
        --btn-paddingInline-large:1.5rem;
    }
    .side-nav a.sn-wrapper2-btn::after {
        width:0.75em;
    }
}


/* ========== 診療の最前線：新着記事 ========== */
.side-nav.forefront-news .news-thumb-list {
    font-size:0.875em;
    line-height:1.5;
    display:grid;
    grid-template-columns:5em 1fr;
    align-items:center;
    gap:0.5em;
}
@media only screen and (max-width:960px){
    .side-nav.forefront-news .sn-wrapper1-flex > ul {
        grid-template-columns:1fr;
    }
    .side-nav.forefront-news .sn-wrapper1-flex > ul > li:not(:last-child) {
        border-bottom:1px dashed #dedede;
    }
}


/* =========================================================================================
【新】アンカーリンク一覧（.anchor-links）　※診療科ページのみの使用を想定
=========================================================================================*/
.anchor-links {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    row-gap:10px;
    width:fit-content;
    margin:2.5em auto 0;
}
.anchor-links li {
    border-right:solid 1px var(--color-silver);
}
.anchor-links a {
    /*font-size:clamp(0.813rem, calc(0.707rem + 0.449vw), 0.938rem);/* vp:375-820px 13-15px */
    font-weight:var(--weight-medium);
    padding-inline:2.4em;
    text-decoration:none;
    color:inherit;
}
.anchor-links li > a:not([class]) { /* 絞り込むことでイレギュラー要素のblock化を無効化 */
    display:block;
}
.anchor-links li:first-of-type a { /* 最初の要素の、左側paddingを無効化 */
    padding-left:0px;
}
.anchor-links li:last-of-type,
.anchor-links li.no-right-border { /* 最後の要素および.no-right-borderの要素の右線を無効化 */
    border-right:none;
}
.anchor-links li:last-of-type > a:not([class]) { /* 最後の要素の、右側paddingを無効化 */ 
    padding-right:0px;
}

.anchor-links .btn {
    --def-arrow-gap:1em;
    margin-block:auto;
}
.anchor-links .btn a {
    padding-inline:2em 1em;
}

@media only screen and (max-width:820px){
    .anchor-links a {
        padding-inline:1.75em;
    }
    /* .btnを持つ場合、段落ちさせる */
    .anchor-links li:has(.btn) {
        width:100%;
    }
}
@media only screen and (max-width:468px){
    .anchor-links a {
        padding-inline:1em;
    }
}






/* =========================================================================================
【新】年報ページ遷移ボックス（.box-nenpo） ※診療科ページのみの使用を想定
=========================================================================================*/
.box-nenpo {
    margin-block:1em;
}
.box-nenpo p {
    font-size:clamp(0.875rem, calc(0.717rem + 0.674vw), 1.063rem);/* vp:375-820px 14-17px */
    font-weight:var(--weight-medium);
    margin-bottom:0.75em;
}
.box-nenpo span {
    font-size:12px;
    font-weight:var(--weight-regular);
    display:inline-block;
    margin-inline:0.5em;
}
.box-nenpo .btn a {
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:0.25em;
    width:9.5em;
    padding-inline:1em;
}
.box-nenpo .btn a::after {
    order:-1;
    justify-self:end;
    content:"";
    width:1.25em;
    background-color:var(--color-main);
    mask:url(../images/common/icon_nenpo.svg) no-repeat center / contain;
}


/* =========================================================================================
【新】医師紹介　※診療科ページのみの使用を想定
=========================================================================================*/
.profile-box {
    display:grid;
    grid-template:
        "photo info" auto
        "quali quali" 1fr / 1fr 1fr;
        align-items:center;
    gap:50px 7%;
}
.profile-box:not(:has(.doctor-photo)) {
    grid-template:
        "info" auto
        "quali" 1fr / 1fr;
}
/* 配置 */
.profile-box .doctor-photo   { grid-area:photo;}
.profile-box .doctor-info    { grid-area:info;}
.profile-box .qualifications { grid-area:quali;}

/* 名前・得意分野 */
.profile-box .doctor-name {
    font-size:33px;
    font-family:var(--font-zen-old);
    font-weight:var(--weight-medium);
    line-height:1.5;
}
.profile-box .doctor-pos,
.profile-box .doctor-pos-sub {
    font-size:1rem;
    font-family:var(--font-ibm);
}
.profile-box .doctor-pos {
    font-weight:var(--weight-semibold);
    line-height:1.4;
    margin-bottom:0.3em;
}
.profile-box .doctor-pos-sub {
    margin-top:0.3em;
}
.profile-box .doctor-name-en {
    font-size:14px;
    font-family:var(--font-optima);
    font-weight:var(--weight-regular);
    letter-spacing:0.06em;
    display:block;
    margin-left:0.3em;
}
.profile-box .doctor-field {
    margin-top:60px;
}

/* 資格等 */
.profile-box .qualifications {
    display:grid;
    grid-template-columns:auto 1fr;
    gap:0 4.5%;
}
.profile-box .qualifications dt {
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:0 0.5em;
    font-size:clamp(1rem, calc(0.895rem + 0.449vw), 1.125rem);/* vp:375-820px 16-18px */
    font-family:var(--font-zen-old);
    font-weight:var(--weight-semibold);
    color:var(--color-main);
}
.profile-box .qualifications * + dt {
    margin-top:1.2em;
}
.profile-box .qualifications dd {
    /* font-size:15px; */
    padding-top:0.5em;
    padding-left:1em;
    display:flex;
    flex-wrap:wrap;
    gap:0.5em 2em;
}
.profile-box .qualifications dd p {
    padding-left:1em;
    position:relative;
}
.profile-box .qualifications dd p::before {
    content:"";
    position:absolute;
    top:calc((1lh - 0.6em) / 2);
    left:0;
    display:block;
    width:0.6em;
    aspect-ratio:1;
    background-color:#A09F9F;
}

/* 患者さんへのメッセージ */
.profile-box + .box-gray {
    margin-block:3em;
    font-family:var(--font-zen-old);
}
.profile-box:not(:has(.qualifications)) + .box-gray {
    /* 「資格等」がない場合、margin-top無効化 */
    margin-top:0;
}
.profile-box + .box-gray p {
    font-size:1.0625em;
    font-weight:var(--weight-medium);
}

@media only screen and (max-width:820px){
    .profile-box {
        grid-template:
            "photo" auto
            "info" auto
            "quali" 1fr / 1fr;
        row-gap:35px;
    }
    .profile-box .doctor-photo {
        width:min(300px, 72.5%);
        margin-inline:auto;
    }
    .profile-box .doctor-pos,
    .profile-box .doctor-name,
    .profile-box .doctor-name-en,
    .profile-box .doctor-pos-sub {
        text-align:center;
    }
    .profile-box .doctor-name-en {
        margin-left:0;
    }
    .profile-box .doctor-field {
        margin-top:40px;
    }
    .profile-box .qualifications {
        display:block;
    }
}

@media only screen and (max-width:468px){
    .profile-box {
        row-gap:20px;
    }
    .profile-box .doctor-field {
        margin-top:20px;
    }
    .profile-box .qualifications dd {
        flex-direction:column;
    }
}


/* =========================================================================================
センター共通パーツ
=========================================================================================*/
/* ========== はじめの画像+代表人物 ========== */
.unit {
    --unit-padding-inline:1.5rem;/* 左右の追加余白 */

    padding-inline:var(--unit-padding-inline);
    border-radius:var(--border-radius);
    /* overflow:clip; */
    overflow:visible clip;
    background-color:#FAFBFC;
    filter:drop-shadow(0 0 10px rgb(0 0 0 / 0.1));
}
/* センターのみの.intro調整 */
.unit .intro {
    padding-block:0px 30px;
}
.unit .intro p {
    /*font-size:clamp(1rem, calc(0.895rem + 0.449vw), 1.125rem);/* vp:375-820px 16-18px */
    line-height:2;
}
/* フルサイズ表示（主に画像に使用） */
.unit .unit-fullsize {
    margin-inline:calc(var(--unit-padding-inline) * -1);
}
.unit-box {
    position:relative;
}
/* table */
.unit table th,
.unit table td {
    padding-block:0.5em;
}

/* メインビジュアル */
.unit-box .unit-visual {
    position:absolute;
    inset:0 auto auto 0;
    margin-inline:calc(var(--unit-padding-inline) * -1);
    margin-bottom:2.5em;
    mask-image:linear-gradient(
        to bottom,
        #fff 0%,
        #fff calc(100% - 15em),
        transparent calc(100% - 3em),
        transparent 100%
    );
    z-index:-1;
}
.unit-box .unit-visual img {
    width:100%;
}
/* プロフィール部分の大枠 */
.unit-box .unit-profiles {
    margin-inline:calc(var(--unit-padding-inline) * -1);
    padding-top:12em;
}
/* 氏名・役職・担当科を囲うwrap要素（通常時は非活性タグ化） */
.unit-box .up-infoWrap {
    /* contents ... そのタグのみ『存在しない』として扱う（子要素はそのまま） */
    display:contents;
    text-align:center;
}
/* 氏名 */
.unit-box .up-name {
    font-size:clamp(1.438rem, calc(0.963rem + 2.022vw), 2rem);/* vp:375-820px 23-32px */
    font-family:var(--font-zen-old);
    font-weight:var(--weight-medium);
    margin-block:0.3em 0.1em;
}
/* 氏名（英語） */
.unit-box .up-name-en {
    font-size:clamp(0.75rem, calc(0.645rem + 0.449vw), 0.875rem);/* vp:375-820px 12-14px */
    font-family:var(--font-optima);
}
/* 役職 */
.unit-box .up-pos {
    color:#666;
    font-size:clamp(0.75rem, calc(0.645rem + 0.449vw), 0.875rem);/* vp:375-820px 12-14px */
    font-weight:var(--weight-medium);
    line-height:1.5;
}
/* キャッチコピー */
.unit-box .unit-catch {
    font-size:clamp(1.563rem, calc(1.036rem + 2.247vw), 2.188rem);/* vp:375-820px 25-35px */
    font-weight:var(--weight-bold);
    font-family:var(--font-zen-old);
    letter-spacing:0.1em;
    line-height:1.7;
    position:absolute;
    inset:12rem 0 auto;
    margin-left:auto;
    margin-right:auto;
    width:fit-content;
    text-shadow:
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff,
        0px 0px 0.3em #fff; /* 重ねが決して強さを増幅 */
    writing-mode:vertical-rl;
    color:var(--color-main);
    z-index:1;
}
.unit-box .unit-profile .btn a {
    font-size:clamp(0.813rem, calc(0.707rem + 0.449vw), 0.938rem);/* vp:375-820px 13-15px */
}

/* プロフィール部分の大枠（ドクター2人用） */
.unit-box .unit-profiles-dr2 {
    display:grid;
    grid-template-columns:repeat(2, auto);
}
.unit-box .unit-profiles-dr2 .unit-profile {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
.unit-box .unit-profiles-dr2 .up-photo {
    max-width:80%;
}
/* プロフィール部分の大枠（ドクター1人用） */
.unit-box .unit-profiles-dr1 {
    display:grid;
    grid-template:"catch photo info" auto / 1fr auto 1fr;
    align-items:end;
    padding-bottom:3em;
}
.unit-box .unit-profiles-dr1 .unit-profile {
    display:contents;/* 存在しないように扱う */
}
.unit-box .unit-profiles-dr1 .unit-catch {
    grid-area:catch;
    justify-self:end;
    position:static;
    margin-right:1rem;
}
.unit-box .unit-profiles-dr1 .up-photo {
    grid-area:photo;
}
.unit-box .unit-profiles-dr1 .up-infoWrap {
    grid-area:info;
    justify-self:start;
    display:block;
    margin-left:2.375rem;
}
.unit-box .unit-profiles-dr1 .unit-catch,
.unit-box .unit-profiles-dr1 .up-infoWrap {
    margin-bottom:2.375rem;
}




/* ==========　左側に見出しを配置した、センター用のsection ========== */
/* セクションボックス */
.section-unit {
    display:grid;
    grid-template-columns:clamp(3.75rem, calc(-0.2rem + 16.854vw), 8.438rem) 1fr; /* vp:375-820px 60-135px */
    /* grid-template-columns:clamp(4.688rem, calc(1.527rem + 13.483vw), 8.438rem) 1fr; vp:375-820px 75-135px */
    align-items:start;
    padding-block:var(--section-padding-block);
}
/* 背景色：青 */
.section-unit.bg-blue {
    margin-inline:calc(var(--unit-padding-inline) * -1);
    padding-inline:var(--unit-padding-inline);
    background-color:#F5FAFF;
}

/* .section-unitの見出し部分 */
.section-unit-title {
    font-size:clamp(1.75rem, calc(1.223rem + 2.247vw), 2.375rem);/* vp:375-820px 28-38px */
    font-family:var(--font-zen-old);
    font-weight:var(--weight-regular);
    letter-spacing:0.05em;
    color:var(--color-main);
    position:sticky;
    top:calc(var(--header-height) + 2em);
    writing-mode:vertical-rl;
    justify-self:center;
    margin-block-start:var(--unit-padding-inline);
}
/* .section-unitのコンテンツ部分 */
.section-unit-body {
    /* margin-left:1rem; */
}

/* ========== .unit独自の調整 ========== */
.unit .anchor-links {
    margin-top:5em;
}
.section-unit .inner-sub {
    /* .section-unit-body内にある、見出しより下に配置された要素のmargin-left */
    --unit-inner-sub-margin:1rem;
    margin-left:var(--unit-inner-sub-margin);
}
.section-unit .inner-sub > .mid-l,
.section-unit .inner-sub > .mid-sub-m {
    margin-left:calc(var(--unit-inner-sub-margin) * -1);
}
.section-unit .mid-sub-m {
    padding-left:0.4em;
    border-left-width:round(up, 0.1em, 1px);
}

@media only screen and (max-width:820px){
    .unit {
        --unit-padding-inline:1.25rem;
        margin-bottom:4.375em;
    }
    .unit-box .unit-visual {
        mask-image:linear-gradient(
            to bottom,
            #fff 0%,
            #fff calc(100% - 6em),
            transparent calc(100% - 1em),
            transparent 100%
        )
    }
    .unit-box .unit-catch {
        top:23vw;
    }
    .unit-profile .btn {
        --def-arrow-gap:0.75em;
    }
    .unit-profile .btn a {
        /* padding-inline:1.15em 0.75em; */
    }

    /* プロフィール部分の大枠（ドクター2人用） */
    .unit-box .unit-profiles-dr2 {
        justify-items:center;
    }
    .unit-box .unit-profiles-dr2 .unit-profile {
        /* width:80%; */
    }

    /* ========== .unit独自の調整 ========== */
    .section-unit .inner-sub {
        --unit-inner-sub-margin:0.75rem;
    }
    .section-unit-title {
        top:calc(var(--header-height) + 1em);
    }
}
@media only screen and (max-width:468px){
    .unit {
        --unit-padding-inline:1rem;
    }
    .unit-box .unit-catch {
        line-height:1.5;
        letter-spacing:0;
    }
    .unit-box .unit-profiles-dr2 .up-photo {
        max-width:90%;
    }
    .section-unit-title {
        top:0.5em;
    }
}

/* =========================================================================================
診療の最前線 診療に関するお知らせ
=========================================================================================*/
.forefront-news-list li {
    --padding-block:1.5em;

    display:grid;
    grid-template:
        "thumbnail date" auto
        "thumbnail title" auto
        "thumbnail cat" 1fr / 10em 1fr;
    gap:0 1em;
    align-items:center;
    padding-bottom:var(--padding-block);
    border-bottom:1px solid var(--color-silver);
}
.forefront-news-list .forefront-news-thumbnail { grid-area:thumbnail;}
.forefront-news-list .forefront-news-date      { grid-area:date;}
.forefront-news-list .forefront-news-title     { grid-area:title;}
.forefront-news-list .forefront-news-cat       { grid-area:cat;}

.forefront-news-list li + li {
    padding-top:var(--padding-block);
}
.forefront-news-list a {
    color:inherit;
    text-decoration:none;
}
.forefront-news-list .forefront-news-thumbnail img {
    width:100%;
}
.forefront-news-list .forefront-news-date {
    font-size:var(--font-ss);
    font-family:var(--font-zen-old);
}
.forefront-news-list .forefront-news-cat {
    display:flex;
    flex-wrap:wrap;
    gap:0.25em;
}
.forefront-news-list .forefront-news-cat a {
    font-size:var(--font-xs);
    color:#fff;
    padding-inline:0.5em;
    background-color:var(--color-main);
}
@media only screen and (max-width:820px){
    .forefront-news-list li {
        --padding-block:1em;

        grid-template-columns:5em 1fr;
    }
}



/* =========================================================================================
診療の最前線 子ページ
=========================================================================================*/
/* タイトル */
body.parent-forefront .page-title {
    font-size:clamp(2.25rem, calc(0.723rem + 6.517vw), 4.063rem);/* vp:375-820px 36-65px */
    margin-bottom:1.5rem;
}
body.parent-forefront .page-title .eng {
    font-size:clamp(2.5rem, calc(0.92rem + 6.742vw), 4.375rem);/* vp:375-820px 40-70px */
}
/* キャッチコピー */
body.parent-forefront .catch {
    font-size:clamp(1.25rem, calc(0.776rem + 2.022vw), 1.813rem);/* vp:375-820px 20-29px */
    font-family:var(--font-zen-old);
} 

/* section.intro */
body.parent-forefront section.intro {
    background-color:#fff;
    background-image:
        linear-gradient(to top, #fff, transparent 5em),
        linear-gradient(to top, transparent 47.52%, color-mix(in sRGB, var(--color-main) 16%, transparent 68%) 144.31%);
}

/* .intro-box */
body.parent-forefront .intro-box {
    padding:3em 3.5em 0;
}
body.parent-forefront .intro-box-title {
    font-size:clamp(1.125rem, calc(0.914rem + 0.899vw), 1.375rem);/* vp:375-820px 18-22px */
    font-weight:var(--weight-medium);
    margin-bottom:0.75em;
}

@media only screen and (max-width:820px){
    body.parent-forefront .intro-box {
        padding:0 1em;
    }
    body.parent-forefront .page-title {
        margin-bottom:0;
    }
    body.parent-forefront header.page-header .inner {
        padding-top:2em;
    }
}


/* =========================================================================================
LAYOUT
=========================================================================================*/
.entry-content {
    position:relative;
    z-index:1;
}
.entry-content > section:nth-of-type(1) { /*ページの一番最初のsection*/
    padding-top:0;
}
.entry-content > section:last-of-type { /*ページの一番最後のsection*/
    padding-bottom:0px;
}
.content-box {
    padding-block:80px;
}
@media only screen and (max-width:820px) {
    .content-box {
        padding-block:50px;
    }
}
@media only screen and (max-width:468px) {
    .content-box {
        padding-block:25px;
    }
}


/* =========================================================================================
シンボルマークについて
=========================================================================================*/
body.symbol-mark .entry-content > section:nth-last-of-type(1) {
    padding-top:0;
}
@media only screen and (max-width:820px) {
}
@media only screen and (max-width:468px) {
}

/* =========================================================================================
CONTACT
=========================================================================================*/
body.contact #main .inner {
    max-width:var(--contents-width-small);
}
@media only screen and (max-width:820px) {
}
@media only screen and (max-width:468px) {
}

/* =========================================================================================
Search
=========================================================================================*/
/* -----------
search-area
------------*/
body.search .entry-content .search-area {
    padding-block:2em;
}
body.search .entry-content .search-area p {
    margin-bottom:2em;
}
body.search .entry-content .search-area form {
    width:100%;
    max-width:500px;
    display:grid;
    grid-template-columns:1fr 60px;
    align-items:stretch;
    margin:0;
}
body.search .entry-content .search-area form .search-input {
    font-size:clamp(0.75rem, calc(0.645rem + 0.449vw), 0.875rem); /* min:12px, max:14px */
    width:100%;
    max-width:600px;
    background:#fff url(../images/common/icon_search_color.svg) no-repeat center left 0.75em / 1.375em !important;
    border:1px solid rgb(84, 135, 145, 0.5);
    padding:0.5em 0.75em 0.5em 2.5em;
    transition:0.5s;
}
body.search .entry-content .search-area form .search-input::placeholder {
    color:#525252;
    font-weight:var(--weight-medium);
}
body.search .entry-content .search-area form .btn-submit {
    color:#fff;
    font-size:clamp(0.875rem, calc(0.77rem + 0.449vw), 1rem); /* min:14px, max:16px */
    font-weight:var(--weight-medium);
    line-height:1;
    white-space:nowrap;
    background:var(--color-main);
    border:1px var(--color-main);
    padding:0.1em 0.6em 0 0.5em;
    margin:0;
}
body.search .entry-content .search-area form .btn-submit:hover {
    opacity:0.8;
    transition:0.3s;
}
.gsc-control-cse {
    background:transparent !important;
}
@media only screen and (max-width:820px) {
}
@media only screen and (max-width:468px) {
}

/* =========================================================================================
404
=========================================================================================*/
body.error404 .entry-header {
    text-align:center;
    padding:40px 20px;
    margin:0;
}
body.error404 .entry-content > section:nth-last-of-type(1) {
    padding-bottom:0;
}
body.error404 .error-message {
    max-width:var(--contents-width-small);
    margin-bottom:30px;
    margin-inline:auto;
}
body.error404 .error-message h2 {
    text-align:center;
}
body.error404 .error-message h2 img {
    width:100%;
    max-width:300px;
    margin:0 auto 50px;
}
body.error404 .error-message ul {
    width:100%;
}
@media only screen and (max-width:820px) {
}
@media only screen and (max-width:468px) {
}

/* =========================================================================================
Sitemap
=========================================================================================*/
body.sitemap ul.wsp-pages-list {
    display:flex;
    flex-direction:column;
    gap:5vh;
}
body.sitemap ul.wsp-pages-list > li.page_item_has_children > a {
    font-size:1.5em;
    font-weight:var(--weight-bold);
}
body.sitemap ul.wsp-pages-list ul.children {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(500px, 1fr));
    gap:0 1em;
    margin-top:1em;
    margin-left:2em;
}
body.sitemap ul.wsp-pages-list ul.children li ul.children {
    margin-top:0;
}
@media only screen and (max-width:820px) {
}
@media only screen and (max-width:468px) {
}


/* =========================================================================================
Archive (POST)
=========================================================================================*/

/* -----------
pagination
------------*/
.pagination .page-numbers {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:0.75em;
    margin-block:25px;
}
.pagination .page-numbers li {
    margin:0;
}
.pagination .page-numbers li a,
.pagination .page-numbers li span,
.pagination .page-numbers li .current {
    color:var(--color-main);
    font-size:clamp(0.813rem, calc(0.286rem + 2.247vw), 1.438rem); /* min:13px, max:23px */
    white-space:nowrap;
    line-height:1;
    text-decoration:none !important;
    width:50px;
    aspect-ratio:1 / 1;
    background:#DEDEDE;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:0.25em 1em;
}
.pagination .page-numbers li .current {
    color:#fff;
    background:var(--color-main);
}
.pagination .page-numbers li .page-numbers.dots {
    background:transparent;
}
.pagination .page-numbers li .prev,
.pagination .page-numbers li .next {
    color:rgba(0, 0, 0, 0);
    text-indent:-9999px;
    background:transparent;
    padding:0;
    position:relative;
    z-index:1;
}
.pagination .page-numbers li .prev::before,
.pagination .page-numbers li .next::before {
    content:"";
    background:var(--color-main);
    width:1em;
    aspect-ratio:1 / 1;
    position:absolute;
    right:0.5em;
    top:50%;
    translate:0 -50%;
    transform:none;
    transition:0.3s;
    mask:url(../images/common/arrow_mask.svg) no-repeat center / contain;
    z-index:2;
}
.pagination .page-numbers li .prev::before {
    scale:-1;
}
.pagination .page-numbers li a:hover {
    text-decoration:none;
}

@media only screen and (max-width:820px) {
    .pagination .page-numbers {
        gap:8px;
    }
    .pagination .page-numbers li a,
    .pagination .page-numbers li span,
    .pagination .page-numbers li .current {
        width:40px;
    }
    .pagination .page-numbers li .prev::before,
    .pagination .page-numbers li .prev::after,
    .pagination .page-numbers li .next::before,
    .pagination .page-numbers li .next::after {
        width:0.75em;
    }
}
@media only screen and (max-width:468px) {
    .pagination .page-numbers li a,
    .pagination .page-numbers li span,
    .pagination .page-numbers li .current {
        width:30px;
    }
}



/* =========================================================================================
Single (POST)
=========================================================================================*/
/* -------------------------
    .single-header
------------------------- */
.single .single-header {
    padding-top:4.5em;
}
.single .single-header .date {
    font-size:20px;
    font-family:var(--font-zen-old);
}
.single .single-header .cat {
    display:inline-block;
}
.single .single-header .cat a {
    color:#fff;
    margin-left:1em;
    padding-inline:0.5em;
    background-color:var(--color-main);
}

/* 「一覧へ戻る」ボタン */
.single .btn .return {
    width:min(250px, 100%);
}

/*===== サイドナビの配置変更および、それに付随する調整 =====*/
@media only screen and (max-width:820px){
    .single .single-header {
        padding-top:2.5em;
    }
}





/* =========================================================================================
その他（汎用的なもの）
=========================================================================================*/

/* -------------------------
    display
------------------------- */
.block { display:block;}
.inline { display:inline;}
.inline-block { display:inline-block;}


/* -------------------------
    テキストの位置
------------------------- */
.align-left   { text-align:left!important;}       /* 左寄せ */
.align-right  { text-align:right!important;}      /* 右寄せ */
.align-center { text-align:center!important;}     /* 中央 */
.align-top    { vertical-align:top!important;}    /* 上寄せ */
.align-bottom { vertical-align:bottom!important;} /* 下寄せ */


/* -------------------------
    テキストの重さ
------------------------- */
.weight-light    { font-weight:var(--weight-light);}    /* 300 */
.weight-regular  { font-weight:var(--weight-regular);}  /* 400 */
.weight-medium   { font-weight:var(--weight-medium);}   /* 500 */
.weight-semibold { font-weight:var(--weight-semibold);} /* 600 */
.weight-bold     { font-weight:var(--weight-bold);}     /* 700 */
.weight-black    { font-weight:var(--weight-black);}    /* 900 */


/* -------------------------
    テキストカラー
------------------------- */
.color-main,
.color-blue      { color:var(--color-main)!important;}      /* メインカラー（青） */
.color-base,
.color-black     { color:var(--color-base-font)!important;} /* 通常カラー（黒） */
.color-silver    { color:var(--color-silver)!important;}    /* シルバー（グレーより濃い色） */
.color-gray      { color:var(--color-gray)!important;}      /* グレー */
.color-attention,
.color-red       { color:var(--color-attention)!important;} /* 注意・注釈カラー（赤） */


/* -------------------------
    テキストのフォント
------------------------- */
.font-ibm { font-family:var(--font-ibm);}        /* ゴシック系（標準） */
.font-zen-old {font-family:var(--font-zen-old);} /* 明朝系 */
.font-optima { font-family:var(--font-optima);}  /* 英数字用（日本語には未対応） */


/* -------------------------
    改行不可制御
------------------------- */
.nowrap {
    white-space:nowrap;
}
@media only screen and (min-width:821px){
    .nowrap-pc {
        white-space:nowrap;
    }
}
@media only screen and (max-width:820px){
    .nowrap-sp {
        white-space:nowrap;
    }
}


/* -------------------------
    フォントサイズ
------------------------- */
/*本文（特大）*/
.font-xxl {
    font-size:var(--font-xxl)!important;
    /* font-weight:var(--weight-bold); */
    line-height:1.5;
}
.font-xl {
    font-size:var(--font-xl);
    /* font-weight:var(--weight-bold); */
    line-height:1.5;
}
/*本文（大）*/
.font-l {
    font-size:var(--font-l)!important;
    /* font-weight:var(--weight-medium); */
}
/*本文（中）*/
.font-m {
    font-size:var(--font-m)!important;
    /* font-weight:var(--weight-regular); */
}
/*本文（小）*/
.font-s {
    font-size:var(--font-s)!important;
    line-height:1.6;
    /* font-weight:var(--weight-regular); */
}
.font-ss {
    font-size:var(--font-ss)!important;
    line-height:1.6;
    /* font-weight:var(--weight-regular); */
}
/*本文（極小） */
.font-xs {
    font-size:var(--font-xs)!important;
    line-height:1.6;
    font-weight:var(--weight-regular);
}
/* 本文（デフォルト：bodyと同じ） */
.font-def {
    font-size:var(--font-def)!important;
}

/* -------------------------
    下線の追加
------------------------- */
.underline { text-decoration:underline!important;}


/* -------------------------
    マーカー線の追加
------------------------- */
mark,
.marker {
    --marker-color:color-mix(in sRGB, var(--color-main) 20%, #fff 80%);
    background-color:transparent;
    background-image:linear-gradient(
        to bottom,
        transparent 70%,
        var(--marker-color) 70%,
        var(--marker-color) 100%
    );
}

/* -------------------------
    注釈用（左側に余白を空けたい場合は、ml-○、pl-○を使用）
------------------------- */
.indent     { text-indent:1em hanging!important;}
.indent-2em { text-indent:2em hanging!important;}
.indent-3em { text-indent:3em hanging!important;}
.indent-4em { text-indent:4em hanging!important;}
.indent-5em { text-indent:5em hanging!important;}


/* -------------------------
    枠線の追加
------------------------- */
/* ※table, th, td は--border-color の設定あり。それ以外の要素はcolor値を参照 */
.border-top    { border-top:solid 1px var(--border-color, currentColor)!important;}
.border-bottom { border-bottom:solid 1px var(--border-color, currentColor)!important;}
.border-left   { border-left:solid 1px var(--border-color, currentColor)!important;}
.border-right  { border-right:solid 1px var(--border-color, currentColor)!important;}

/* 枠線の削除 */
.border-top-none    { border-top:none!important;}
.border-bottom-none { border-bottom:none!important;}
.border-left-none   { border-left:none!important;}
.border-right-none  { border-right:none!important;}


/* -------------------------
    横幅指定
------------------------- */
/* PC、スマホ共用 */
.w100 { width:100%!important;}
.w99  { width:99%!important;}
.w98  { width:98%!important;}
.w97  { width:97%!important;}
.w96  { width:96%!important;}
.w95  { width:95%!important;}
.w94  { width:94%!important;}
.w93  { width:93%!important;}
.w92  { width:92%!important;}
.w91  { width:91%!important;}
.w90  { width:90%!important;}
.w89  { width:89%!important;}
.w88  { width:88%!important;}
.w87  { width:87%!important;}
.w86  { width:86%!important;}
.w85  { width:85%!important;}
.w84  { width:84%!important;}
.w83  { width:83%!important;}
.w82  { width:82%!important;}
.w81  { width:81%!important;}
.w80  { width:80%!important;}
.w79  { width:79%!important;}
.w78  { width:78%!important;}
.w77  { width:77%!important;}
.w76  { width:76%!important;}
.w75  { width:75%!important;}
.w74  { width:74%!important;}
.w73  { width:73%!important;}
.w72  { width:72%!important;}
.w71  { width:71%!important;}
.w70  { width:70%!important;}
.w69  { width:69%!important;}
.w68  { width:68%!important;}
.w67  { width:67%!important;}
.w66  { width:66%!important;}
.w65  { width:65%!important;}
.w64  { width:64%!important;}
.w63  { width:63%!important;}
.w62  { width:62%!important;}
.w61  { width:61%!important;}
.w60  { width:60%!important;}
.w59  { width:59%!important;}
.w58  { width:58%!important;}
.w57  { width:57%!important;}
.w56  { width:56%!important;}
.w55  { width:55%!important;}
.w54  { width:54%!important;}
.w53  { width:53%!important;}
.w52  { width:52%!important;}
.w51  { width:51%!important;}
.w50  { width:50%!important;}
.w49  { width:49%!important;}
.w48  { width:48%!important;}
.w47  { width:47%!important;}
.w46  { width:46%!important;}
.w45  { width:45%!important;}
.w44  { width:44%!important;}
.w43  { width:43%!important;}
.w42  { width:42%!important;}
.w41  { width:41%!important;}
.w40  { width:40%!important;}
.w39  { width:39%!important;}
.w38  { width:38%!important;}
.w37  { width:37%!important;}
.w36  { width:36%!important;}
.w35  { width:35%!important;}
.w34  { width:34%!important;}
.w33  { width:33%!important;}
.w32  { width:32%!important;}
.w31  { width:31%!important;}
.w30  { width:30%!important;}
.w29  { width:29%!important;}
.w28  { width:28%!important;}
.w27  { width:27%!important;}
.w26  { width:26%!important;}
.w25  { width:25%!important;}
.w24  { width:24%!important;}
.w23  { width:23%!important;}
.w22  { width:22%!important;}
.w21  { width:21%!important;}
.w20  { width:20%!important;}
.w19  { width:19%!important;}
.w18  { width:18%!important;}
.w17  { width:17%!important;}
.w16  { width:16%!important;}
.w15  { width:15%!important;}
.w14  { width:14%!important;}
.w13  { width:13%!important;}
.w12  { width:12%!important;}
.w11  { width:11%!important;}
.w10  { width:10%!important;}
.w9   { width:9%!important;}
.w8   { width:8%!important;}
.w7   { width:7%!important;}
.w6   { width:6%!important;}
.w5   { width:5%!important;}
.w4   { width:4%!important;}
.w3   { width:3%!important;}
.w2   { width:2%!important;}
.w1   { width:1%!important;}

/*　PCのみ */
@media only screen and (min-width:821px){
    .w100-pc { width:100%!important;}
    .w99-pc  { width:99%!important;}
    .w98-pc  { width:98%!important;}
    .w97-pc  { width:97%!important;}
    .w96-pc  { width:96%!important;}
    .w95-pc  { width:95%!important;}
    .w94-pc  { width:94%!important;}
    .w93-pc  { width:93%!important;}
    .w92-pc  { width:92%!important;}
    .w91-pc  { width:91%!important;}
    .w90-pc  { width:90%!important;}
    .w89-pc  { width:89%!important;}
    .w88-pc  { width:88%!important;}
    .w87-pc  { width:87%!important;}
    .w86-pc  { width:86%!important;}
    .w85-pc  { width:85%!important;}
    .w84-pc  { width:84%!important;}
    .w83-pc  { width:83%!important;}
    .w82-pc  { width:82%!important;}
    .w81-pc  { width:81%!important;}
    .w80-pc  { width:80%!important;}
    .w79-pc  { width:79%!important;}
    .w78-pc  { width:78%!important;}
    .w77-pc  { width:77%!important;}
    .w76-pc  { width:76%!important;}
    .w75-pc  { width:75%!important;}
    .w74-pc  { width:74%!important;}
    .w73-pc  { width:73%!important;}
    .w72-pc  { width:72%!important;}
    .w71-pc  { width:71%!important;}
    .w70-pc  { width:70%!important;}
    .w69-pc  { width:69%!important;}
    .w68-pc  { width:68%!important;}
    .w67-pc  { width:67%!important;}
    .w66-pc  { width:66%!important;}
    .w65-pc  { width:65%!important;}
    .w64-pc  { width:64%!important;}
    .w63-pc  { width:63%!important;}
    .w62-pc  { width:62%!important;}
    .w61-pc  { width:61%!important;}
    .w60-pc  { width:60%!important;}
    .w59-pc  { width:59%!important;}
    .w58-pc  { width:58%!important;}
    .w57-pc  { width:57%!important;}
    .w56-pc  { width:56%!important;}
    .w55-pc  { width:55%!important;}
    .w54-pc  { width:54%!important;}
    .w53-pc  { width:53%!important;}
    .w52-pc  { width:52%!important;}
    .w51-pc  { width:51%!important;}
    .w50-pc  { width:50%!important;}
    .w49-pc  { width:49%!important;}
    .w48-pc  { width:48%!important;}
    .w47-pc  { width:47%!important;}
    .w46-pc  { width:46%!important;}
    .w45-pc  { width:45%!important;}
    .w44-pc  { width:44%!important;}
    .w43-pc  { width:43%!important;}
    .w42-pc  { width:42%!important;}
    .w41-pc  { width:41%!important;}
    .w40-pc  { width:40%!important;}
    .w39-pc  { width:39%!important;}
    .w38-pc  { width:38%!important;}
    .w37-pc  { width:37%!important;}
    .w36-pc  { width:36%!important;}
    .w35-pc  { width:35%!important;}
    .w34-pc  { width:34%!important;}
    .w33-pc  { width:33%!important;}
    .w32-pc  { width:32%!important;}
    .w31-pc  { width:31%!important;}
    .w30-pc  { width:30%!important;}
    .w29-pc  { width:29%!important;}
    .w28-pc  { width:28%!important;}
    .w27-pc  { width:27%!important;}
    .w26-pc  { width:26%!important;}
    .w25-pc  { width:25%!important;}
    .w24-pc  { width:24%!important;}
    .w23-pc  { width:23%!important;}
    .w22-pc  { width:22%!important;}
    .w21-pc  { width:21%!important;}
    .w20-pc  { width:20%!important;}
    .w19-pc  { width:19%!important;}
    .w18-pc  { width:18%!important;}
    .w17-pc  { width:17%!important;}
    .w16-pc  { width:16%!important;}
    .w15-pc  { width:15%!important;}
    .w14-pc  { width:14%!important;}
    .w13-pc  { width:13%!important;}
    .w12-pc  { width:12%!important;}
    .w11-pc  { width:11%!important;}
    .w10-pc  { width:10%!important;}
    .w9-pc   { width:9%!important;}
    .w8-pc   { width:8%!important;}
    .w7-pc   { width:7%!important;}
    .w6-pc   { width:6%!important;}
    .w5-pc   { width:5%!important;}
    .w4-pc   { width:4%!important;}
    .w3-pc   { width:3%!important;}
    .w2-pc   { width:2%!important;}
    .w1-pc   { width:1%!important;}
}
/*　スマホのみ */
@media only screen and (max-width:820px){
    .w100-sp { width:100%!important;}
    .w99-sp  { width:99%!important;}
    .w98-sp  { width:98%!important;}
    .w97-sp  { width:97%!important;}
    .w96-sp  { width:96%!important;}
    .w95-sp  { width:95%!important;}
    .w94-sp  { width:94%!important;}
    .w93-sp  { width:93%!important;}
    .w92-sp  { width:92%!important;}
    .w91-sp  { width:91%!important;}
    .w90-sp  { width:90%!important;}
    .w89-sp  { width:89%!important;}
    .w88-sp  { width:88%!important;}
    .w87-sp  { width:87%!important;}
    .w86-sp  { width:86%!important;}
    .w85-sp  { width:85%!important;}
    .w84-sp  { width:84%!important;}
    .w83-sp  { width:83%!important;}
    .w82-sp  { width:82%!important;}
    .w81-sp  { width:81%!important;}
    .w80-sp  { width:80%!important;}
    .w79-sp  { width:79%!important;}
    .w78-sp  { width:78%!important;}
    .w77-sp  { width:77%!important;}
    .w76-sp  { width:76%!important;}
    .w75-sp  { width:75%!important;}
    .w74-sp  { width:74%!important;}
    .w73-sp  { width:73%!important;}
    .w72-sp  { width:72%!important;}
    .w71-sp  { width:71%!important;}
    .w70-sp  { width:70%!important;}
    .w69-sp  { width:69%!important;}
    .w68-sp  { width:68%!important;}
    .w67-sp  { width:67%!important;}
    .w66-sp  { width:66%!important;}
    .w65-sp  { width:65%!important;}
    .w64-sp  { width:64%!important;}
    .w63-sp  { width:63%!important;}
    .w62-sp  { width:62%!important;}
    .w61-sp  { width:61%!important;}
    .w60-sp  { width:60%!important;}
    .w59-sp  { width:59%!important;}
    .w58-sp  { width:58%!important;}
    .w57-sp  { width:57%!important;}
    .w56-sp  { width:56%!important;}
    .w55-sp  { width:55%!important;}
    .w54-sp  { width:54%!important;}
    .w53-sp  { width:53%!important;}
    .w52-sp  { width:52%!important;}
    .w51-sp  { width:51%!important;}
    .w50-sp  { width:50%!important;}
    .w49-sp  { width:49%!important;}
    .w48-sp  { width:48%!important;}
    .w47-sp  { width:47%!important;}
    .w46-sp  { width:46%!important;}
    .w45-sp  { width:45%!important;}
    .w44-sp  { width:44%!important;}
    .w43-sp  { width:43%!important;}
    .w42-sp  { width:42%!important;}
    .w41-sp  { width:41%!important;}
    .w40-sp  { width:40%!important;}
    .w39-sp  { width:39%!important;}
    .w38-sp  { width:38%!important;}
    .w37-sp  { width:37%!important;}
    .w36-sp  { width:36%!important;}
    .w35-sp  { width:35%!important;}
    .w34-sp  { width:34%!important;}
    .w33-sp  { width:33%!important;}
    .w32-sp  { width:32%!important;}
    .w31-sp  { width:31%!important;}
    .w30-sp  { width:30%!important;}
    .w29-sp  { width:29%!important;}
    .w28-sp  { width:28%!important;}
    .w27-sp  { width:27%!important;}
    .w26-sp  { width:26%!important;}
    .w25-sp  { width:25%!important;}
    .w24-sp  { width:24%!important;}
    .w23-sp  { width:23%!important;}
    .w22-sp  { width:22%!important;}
    .w21-sp  { width:21%!important;}
    .w20-sp  { width:20%!important;}
    .w19-sp  { width:19%!important;}
    .w18-sp  { width:18%!important;}
    .w17-sp  { width:17%!important;}
    .w16-sp  { width:16%!important;}
    .w15-sp  { width:15%!important;}
    .w14-sp  { width:14%!important;}
    .w13-sp  { width:13%!important;}
    .w12-sp  { width:12%!important;}
    .w11-sp  { width:11%!important;}
    .w10-sp  { width:10%!important;}
    .w9-sp   { width:9%!important;}
    .w8-sp   { width:8%!important;}
    .w7-sp   { width:7%!important;}
    .w6-sp   { width:6%!important;}
    .w5-sp   { width:5%!important;}
    .w4-sp   { width:4%!important;}
    .w3-sp   { width:3%!important;}
    .w2-sp   { width:2%!important;}
    .w1-sp   { width:1%!important;}
}


/* -------------------------
    余白指定（margin）
------------------------- */
/* 要素下の余白（margin-bottom） */
.mb-0     { margin-bottom:0!important;}
.mb-0-5em { margin-bottom:0.5em!important;}
.mb-1em   { margin-bottom:1em!important;}
.mb-1-5em { margin-bottom:1.5em!important;}
.mb-2em   { margin-bottom:2em!important;}
.mb-2-5em { margin-bottom:2.5em!important;}
.mb-3em   { margin-bottom:3em!important;}
.mb-3-5em { margin-bottom:3.5em!important;}
.mb-4em   { margin-bottom:4em!important;}
.mb-4-5em { margin-bottom:4.5em!important;}
.mb-5em   { margin-bottom:5em!important;}

/* 要素上の余白（margin-top） */
.mt-0     { margin-top:0!important;}
.mt-0-5em { margin-top:0.5em!important;}
.mt-1em   { margin-top:1em!important;}
.mt-1-5em { margin-top:1.5em!important;}
.mt-2em   { margin-top:2em!important;}
.mt-2-5em { margin-top:2.5em!important;}
.mt-3em   { margin-top:3em!important;}
.mt-3-5em { margin-top:3.5em!important;}
.mt-4em   { margin-top:4em!important;}
.mt-4-5em { margin-top:4.5em!important;}
.mt-5em   { margin-top:5em!important;}

/* 要素左の余白（margin-left） */
.ml-0     { margin-left:0!important;}
.ml-0-5em { margin-left:0.5em!important;}
.ml-1em   { margin-left:1em!important;}
.ml-1-5em { margin-left:1.5em!important;}
.ml-2em   { margin-left:2em!important;}
.ml-2-5em { margin-left:2.5em!important;}
.ml-3em   { margin-left:3em!important;}
.ml-3-5em { margin-left:3.5em!important;}
.ml-4em   { margin-left:4em!important;}
.ml-4-5em { margin-left:4.5em!important;}
.ml-5em   { margin-left:5em!important;}

/* 要素右の余白（margin-right） */
.mr-0     { margin-right:0!important;}
.mr-0-5em { margin-right:0.5em!important;}
.mr-1em   { margin-right:1em!important;}
.mr-1-5em { margin-right:1.5em!important;}
.mr-2em   { margin-right:2em!important;}
.mr-2-5em { margin-right:2.5em!important;}
.mr-3em   { margin-right:3em!important;}
.mr-3-5em { margin-right:3.5em!important;}
.mr-4em   { margin-right:4em!important;}
.mr-4-5em { margin-right:4.5em!important;}
.mr-5em   { margin-right:5em!important;}


/* -------------------------
    余白指定（padding）
------------------------- */
/* 要素下の余白（padding-bottom） */
.pb-0     { padding-bottom:0!important;}
.pb-0-5em { padding-bottom:0.5em!important;}
.pb-1em   { padding-bottom:1em!important;}
.pb-1-5em { padding-bottom:1.5em!important;}
.pb-2em   { padding-bottom:2em!important;}
.pb-2-5em { padding-bottom:2.5em!important;}
.pb-3em   { padding-bottom:3em!important;}
.pb-3-5em { padding-bottom:3.5em!important;}
.pb-4em   { padding-bottom:4em!important;}
.pb-4-5em { padding-bottom:4.5em!important;}
.pb-5em   { padding-bottom:5em!important;}

/* 要素上の余白（padding-top） */
.pt-0     { padding-top:0!important;}
.pt-0-5em { padding-top:0.5em!important;}
.pt-1em   { padding-top:1em!important;}
.pt-1-5em { padding-top:1.5em!important;}
.pt-2em   { padding-top:2em!important;}
.pt-2-5em { padding-top:2.5em!important;}
.pt-3em   { padding-top:3em!important;}
.pt-3-5em { padding-top:3.5em!important;}
.pt-4em   { padding-top:4em!important;}
.pt-4-5em { padding-top:4.5em!important;}
.pt-5em   { padding-top:5em!important;}

/* 要素左の余白（padding-left） */
.pl-0     { padding-left:0!important;}
.pl-0-5em { padding-left:0.5em!important;}
.pl-1em   { padding-left:1em!important;}
.pl-1-5em { padding-left:1.5em!important;}
.pl-2em   { padding-left:2em!important;}
.pl-2-5em { padding-left:2.5em!important;}
.pl-3em   { padding-left:3em!important;}
.pl-3-5em { padding-left:3.5em!important;}
.pl-4em   { padding-left:4em!important;}
.pl-4-5em { padding-left:4.5em!important;}
.pl-5em   { padding-left:5em!important;}

/* 要素右の余白（padding-right） */
.pr-0     { padding-right:0!important;}
.pr-0-5em { padding-right:0.5em!important;}
.pr-1em   { padding-right:1em!important;}
.pr-1-5em { padding-right:1.5em!important;}
.pr-2em   { padding-right:2em!important;}
.pr-2-5em { padding-right:2.5em!important;}
.pr-3em   { padding-right:3em!important;}
.pr-3-5em { padding-right:3.5em!important;}
.pr-4em   { padding-right:4em!important;}
.pr-4-5em { padding-right:4.5em!important;}
.pr-5em   { padding-right:5em!important;}