@charset "utf-8";

/* =========================================================================================
【新】ボタン
=========================================================================================*/
/* ========== aタグを囲うラッパー要素 ========== */
.btn {
    --def-arrow-gap:2em; /* 通常表示される＞アイコンとの余白（デフォルト値） */
    --def-arrow-width:0.4em; /* 通常表示される＞アイコンの横幅（デフォルト値） */

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:20px;
    margin-block:1em;
    padding: 0;
}
.btn.left { justify-content:start;} /* 左寄せ */
.btn.right { justify-content:end;}  /* 右寄せ */

.btn a {
    font-size:0.9375rem;
    font-weight:var(--weight-medium);
    display:grid;
    /* grid-template-columns:1fr calc(var(--def-arrow-width) + var(--def-arrow-gap)); */
    grid-template:
        "text icon arrow" auto / auto 1fr calc(var(--def-arrow-width) + var(--def-arrow-gap));
    align-items:center;
    padding-block:0.6em;
    padding-inline:3em 1em;
    color:var(--color-base-font);
    border:solid 1px color-mix(in sRGB, var(--color-silver) 73%, transparent 27%);
    border-radius:var(--border-radius);
    text-decoration:none;
    background-color:#fff;
}
/* 矢印アイコン */
.btn a::before {
    grid-area:arrow;
    content:"";
    justify-self:end;
    display:block;
    width:var(--def-arrow-width);
    height:1lh;
    background-color:currentColor;
    mask:url(../images/common/arrow.svg) no-repeat center / contain;

    /* 初期設定の打ち消し */
    margin-inline:0;
    aspect-ratio:unset;
}
/* ファイルリンクアイコン */
.btn a::after {
    grid-area:icon;
    display:block;
    width:1em;
    aspect-ratio:1;
    margin-left:0.25em;
    background-color:currentColor;
}


/* ========== ページリンク ========== */
.btn .pagelink {
    font-size:clamp(0.875rem, calc(0.559rem + 1.348vw), 1.25rem);/* vp:375-820px 14-20px */
    line-height:1.2;
    display:grid;
    /* grid-template-columns:0.9em 1fr; */
    grid-template:
        "arrow text icon" auto / 0.9em auto 1fr;
    align-items:center;
    gap:clamp(0.313rem, calc(-0.214rem + 2.247vw), 0.938rem);/* vp:375-820px 5-15px */
    width:100%;
    min-height:3lh;
    padding:0.5em clamp(0.625rem, calc(0.098rem + 2.247vw), 1.25rem);/* vp:375-820px 10-20px */
    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);
    color:inherit;
    text-decoration:none;
}
.btn .pagelink::before {
    grid-area:arrow;
    content:"";
    display:block;
    width:100%;
    height:1lh;
    background:url(../images/common/arrow_circle_blue.svg) no-repeat center / contain;
    mask:unset;
}

/* YouTubeアイコン付与 */
.btn .pagelink.icon-youtube {
    grid-template-columns:2em auto;
    text-align:start;
}
.btn .pagelink.icon-youtube::before {
    background-image:url(../images/common/icon_youtube.svg);
}

/* 少し内側に短いサブリンク */
.btn .pagelink.sublink {
    --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 {
    background:currentColor;
    mask:url(../images/common/arrow.svg) no-repeat center / 50% auto;
}


/* ========== 戻るボタン ========== */
.btn .return {
    color:var(--color-main);
    /* grid-template-columns:0.75em 1fr 0.75em; */
    grid-template:
        "arrow text" auto / var(--def-arrow-width) 1fr;
    padding-inline:2em;
    text-align:center;
    border-color:currentColor;
}
.btn .return::before {
    rotate:-0.5turn;
}

@media only screen and (max-width:468px){
    .btn .pagelink {
        grid-template-columns:1.1em 1fr;
    }
    .btn .return {
        width:100%;
    }
}


/* =========================================================================================
【新】見出し
=========================================================================================*/
.mid-xl,
.mid-l,
.mid-m,
.mid-s,
.mid-sub-l,
.mid-sub-m,
.mid-name {
    /* word-break:auto-phrase; /* 日本語の改行制御 */
    font-family:var(--font-zen-old);
    font-weight:var(--weight-semibold);
    line-height:1.5;
    margin-bottom:0.75em;
}
/* 見出し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);
    line-height:1.4;
}
/* 見出し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);
    line-height:1.4;
    margin-bottom:1em;
    padding-bottom:0.5em;
    border-bottom:solid 1px var(--color-silver);
}
* + .mid-l {
    margin-top:1em;
}
@media only screen and (max-width:820px) {
    .mid-xl {
        margin-bottom:0px;
    }
    .mid-l {
        text-align:center;
    }
}
@media only screen and (max-width:468px) {

}
/* 見出しM */
.mid-m {
    font-size:clamp(1.188rem, calc(0.977rem + 0.899vw), 1.438rem); /* vp:375-820px 19-23px */
    margin-bottom:0.5em;
}

/* 見出し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);
}
.mid-s.center {
    width:fit-content;
    margin-inline:auto;
}
.mid-s .jp {
    display:block;
    width:fit-content;
}
.mid-s .jp {
    padding-bottom:0.5em;
    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;
}
/* 見出し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);
    padding-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 */
}

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

}
.inner-sub :is(.mid-sub-l, .mid-sub-m) {
    margin-left:-1rem;
}


/* 動画アイコンの付与 */
.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);
}
@media only screen and (max-width:820px) {
    section.section {
        --section-indent:10px;
    }
}
@media only screen and (max-width:468px) { }


/* =========================================================================================
【新】段落
=========================================================================================*/
/*デフォルトのスペース*/
.entry-content .inner > p,
.entry-content .inner-sub > p {
    margin-bottom:1em;
}
/*本文（特大）*/
.font-xl {
    font-size:clamp(1.25rem, calc(0.197rem + 4.494vw), 2.5rem) !important; /* vp:375-820px 20-40px */
    font-weight:var(--weight-bold);
    line-height:1.5;
}
/*本文（大）*/
.font-l {
    font-size:clamp(1rem, calc(0.789rem + 0.899vw), 1.25rem) !important; /* vp:375-820px 16-20px */
    font-weight:var(--weight-medium);
}
/*本文（中）*/
.font-m {
    font-size:clamp(0.875rem, calc(0.664rem + 0.899vw), 1.125rem) !important; /* vp:375-820px 14-18px */
    font-weight:var(--weight-regular);
}
/*本文（小）*/
.font-s {
    font-size:clamp(0.75rem, calc(0.592rem + 0.674vw), 0.938rem) !important; /* vp:375-820px 12-15px */
    font-weight:var(--weight-regular);
}
.font-ss {
    font-size:clamp(0.75rem, calc(0.645rem + 0.449vw), 0.875rem)!important;/* vp:375-820px 12-14px */
    font-weight:var(--weight-regular);
}
/*本文（極小） */
.font-xs {
    font-size:clamp(0.75rem, calc(0.697rem + 0.225vw), 0.813rem)!important;/* vp:375-820px 12-13px */
    font-weight:var(--weight-regular);
}


/* =========================================================================================
【新】画像 / 動画関係
=========================================================================================*/
/* 枠線をつける */
.border {
    border:1px solid var(--color-gray);
}

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

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


/* =========================================================================================
【新】PDFへのリンク（サムネイル付）
=========================================================================================*/
figure.poster img {
    border:1px solid var(--color-gray);
    margin-bottom:0.5em;
}
figure.poster figcaption {
    text-align:right;
}
/*PDFリンクがあるとき ---------------*/
/* 折り返し時のインデント調整 */
figure.poster:has(a[href*=".pdf"]) figcaption {
    text-indent:-1.5em;
    padding-left:1.5em;
}
figure.poster:has(a[href*=".pdf"]) figcaption::before {
    content:"";
    background:var(--color-main);
    display:inline-block;
    width:1.25em;
    aspect-ratio:1 / 1;
    -webkit-mask-image:url(../images/common/icon_pdf.svg);
    mask-image:url(../images/common/icon_pdf.svg);
    -webkit-mask-size:contain;
    mask-size:contain;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    margin-inline:0 0.25em;
    translate:0 0.25em;
    transition:0.3s;
}
@media only screen and (max-width:820px) {
    figure.poster {
        width:100%;
        max-width:250px;
    }
}
@media only screen and (max-width:468px) {
    figure.poster {
        max-width:150px;
    }
}

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

    width:100%;
    line-height:1.6;
    border-spacing: 0;
    border-block:solid 1px var(--border-color);
}
/* キャプション */
.entry-content caption,
.entry-content .caption {
    color: var(--color-base-font);
    padding: 0.5em 0;
}
/* th, td */
.entry-content th,
.entry-content td {
    --border-color:#dedede;

    padding-block:1.25em;
    padding-inline:clamp(0.625rem, calc(0.098rem + 2.247vw), 1.25rem);/* vp:375-820px 10-20px */
    text-align: left;
    border:none;
    position: relative;
    border-bottom:solid 1px var(--border-color);
}
.entry-content tr:last-child th,
.entry-content tr:last-child td {
    border-bottom:none;
}
.entry-content th {
    width:25%;
    background:#F6F6F6;
    font-weight:var(--weight-medium);
}
.entry-content th small,
.entry-content td small {
    font-size:clamp(0.75rem, calc(0.592rem + 0.674vw), 0.938rem); /* min:12px, max:15px */
}
.entry-content th small,
.entry-content td small {
    display: inline-block;
    line-height: 1.2;
}
/* theadがある場合、横幅25%を無効化 */
.entry-content table:has(thead) th {
    width:auto;
}

/* ========== スクロールテーブル ========== */
/* テーブルのscroll（カスタムHTMLにて手動設定のとき） */
.scroll-box {
    width: 100%;
    overflow: auto;
}
/* ※scroll直下のテーブルのmin-widthはstyle="min-width:〇〇px"で直接指定 */
.scroll-box table {
    min-width:33em;
}

@media only screen and (max-width:820px) {
    .entry-content .sp-scroll {
        width:100%;
        overflow-x:auto;
    }
    .entry-content .sp-scroll table {
        width:890px;
    }

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

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



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


/* =========================================================================================
【新】灰色のコンテンツボックス
=========================================================================================*/
.box-gray {
    margin-block:1em;
    padding:2.5em 3em;
    font-family:var(--font-zen-old);
    background-color:#F6F6F6;
}
@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%;
}

@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;
    }
}

/* =============== 不規則に分割（ただの横並び） =============== */
.layout-flex {
    display:flex;
    gap:50px 4.5%;
}
.layout-flex > img,
.layout-flex > figure {
    /* 画像の横幅上限は30% */
    flex:1 0 auto;
    max-width:30%;
}
.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;
        align-self:center;
    }
    .layout-flex figure img {
        width:100%;
    }
    .layout-flex.mb-img-first > img,
    .layout-flex.mb-img-first > figure {
        /* .mb-img-first が設定されている場合、画像をはじめに移動 */
        order:-1;
    }
    .layout-flex.mb-img-last > img,
    .layout-flex.mb-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 .accordion-body {
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows var(--trans);
}
.accordion .accordion-inner {
    height:100%;
    overflow:hidden;
}
/* 開閉処理 */
.accordion .accordion-btn.active ~ .accordion-body {
    grid-template-rows:1fr;
}


/* ========== 通常ブロック ========== */
.accordion.accordion-box button {
    font-size:0.875em;
    color:#6F6F6F;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:0.3em;
    width:fit-content;
    margin-inline:0 auto;
    padding-bottom:0.75em;
    text-decoration:underline;
    text-underline-offset:2px;
}
.accordion.accordion-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);
}
.accordion.accordion-box .accordion-inner {
    padding-inline:clamp(0.625rem, calc(-0.639rem + 5.393vw), 2.125rem);/* vp:375-820px 10-34px */
    background-color:#F6F6F6;
    font-family:var(--font-ibm);
    transition:padding var(--trans);
}

/* 開閉時の追加処理 */
.accordion.accordion-box button.active::after {
    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-report {
    --wrapper-padding:1.5em;/* スマホ時のネガティブ調整に使用 */
    display:grid;
    grid-template:
        "btn add-btn" auto
        "body body" 1fr / 1fr auto;
    background-color:#F6F6F6;
}
.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-add-btn {
    grid-area:add-btn;
    position:relative;
    padding-block:var(--wrapper-padding);
    padding-inline:1em var(--wrapper-padding);
}
.accordion-report .accordion-add-btn::after {
    content:"";
    display:block;
    width:1.5em;
    aspect-ratio:1;
    background:url(../images/common/icon_megamenu_gray.svg) no-repeat center / contain;
    transition:rotate var(--trans);
}
.accordion-report .accordion-btn.active::after {
    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-add-btn::after {
    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-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 center / auto 100%,
        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-top:100px;
    padding-bottom:55px;
}
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);
}
@media only screen and (max-width:820px){
    header.page-header .inner {
        padding-top:calc(var(--header-height) + 3em);
        padding-bottom:3em;
    }
}


/* ========== キャッチコピー（.catch）を含む場合 ========== */
header.page-header .inner:has(.catch) {
    display:grid;
    grid-template:
        "title pan" auto
        "catch catch" 1fr / 1fr auto;
    align-items:center;
    gap:0 1em;
}
/* 位置決め */
header.page-header .inner:has(.catch) .page-title  { grid-area:title;}
header.page-header .inner:has(.catch) .breadcrumbs { grid-area:pan;}
header.page-header .inner:has(.catch) .catch       { grid-area:catch;}

header.page-header .inner:has(.catch) .breadcrumbs {
    margin-top:0px;
}

/* ========== コンテンツボックス（.content-box）をめり込ませる ========== */
:root:has(header.page-header.inside-content-box) {
    --inside-range:clamp(10rem, calc(4.206rem + 24.719vw), 16.875rem);/* vp:375-820px 160-270px */
}
header.page-header.inside-content-box {
    padding-bottom:var(--inside-range);
}
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;
}
.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 {
    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);
    }
    #main .content-box aside {
        display:none;
    }
}
@media only screen and (max-width: 468px) {
}


/* ========== 基礎処理 ========== */
.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;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:1em 0;
    width:100%;
    padding-inline:0.875rem;
}
.side-nav button::after {
    content:"";
    display:block;
    aspect-ratio:1;
    background-color:var(--color-main);
    mask:no-repeat center / contain;
    flex-shrink:0;
}

/* ========== 個別処理 ========== */
.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;
    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:1em;
}
.side-nav .sn-wrapper2-btn::after {
    width:0.75em;
    mask-image:url(../images/common/arrow.svg);
    rotate:90deg;
    transition:rotate var(--trans);
}

/* .subLink */
.side-nav li.subLink .sn-wrapper2-btn {
    grid-template-columns:auto 1fr auto;
}
.side-nav li.subLink .sn-wrapper2-btn::before {
    content:"";
    display:block;
    width:1em;
    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::after {
    content:none;
}


/* =========================================================================================
【新】アンカーリンク一覧（.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;
}

/* 四角い矢印アイコン付与（渡航外来） */
.anchor-links li.arrow-square a {
    display:grid;
    grid-template-columns:auto 1em;
    gap:0.5em;
    align-items:center;
}
.anchor-links li.arrow-square a::after {
    content:"";
    display:block;
    width:100%;
    aspect-ratio:1;
    background:url(../images/common/arrow_square.svg) no-repeat center / contain;
}

@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;
    }
}


/* =========================================================================================
【新】「大内科制について」ボックス（.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:#F6F6F6;
    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 */
}


/* =========================================================================================
【新】年報ページ遷移ボックス（.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 {
    grid-template-columns:1fr auto 1fr;
    grid-template:
        "icon text arrow" auto / 1fr auto 1fr;
    gap:0.25em;
    width:9.5em;
    padding-inline:1em;
}
.box-nenpo .btn a::after {
    content:"";
    width:1.25em;
    background-color:var(--color-main);
    mask:url(../images/common/icon_nenpo.svg) no-repeat center / contain;
    justify-self:end;/* 右寄せ */
}


/* =========================================================================================
【新】医師紹介　※診療科ページのみの使用を想定
=========================================================================================*/
.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);
    font-weight:var(--weight-semibold);
}
.profile-box .doctor-pos-sub {
    margin-top:1em;
}
.profile-box .doctor-name-en {
    font-size:14px;
    font-family:var(--font-optima);
    font-weight:var(--weight-regular);
    letter-spacing:0.06em;
    display:block;
}
.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;
}

@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-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.5em;/* 左右の追加余白 */

    padding-inline:var(--unit-padding-inline);
    border-radius:var(--border-radius);
    overflow:hidden;
    background-color:#FAFBFC;
    filter:drop-shadow(0 0 10px rgb(0 0 0 / 0.1));
}
/* センターのみの.intro調整 */
.unit .intro {
    padding-top:0px;
}
.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);
    mask-image:linear-gradient(
        to bottom,
        #fff 0%,
        #fff calc(100% - 15em),
        transparent calc(100% - 3em),
        transparent 100%
    );
    z-index:-1;
}
/* プロフィール部分の大枠 */
.unit-box .unit-profiles {
    margin-inline:calc(var(--unit-padding-inline) * -1);
    padding-top:12em;
}
/* 氏名 */
.unit-box .unit-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);
    text-align:center;
    margin-block:0.3em 0.1em;
}
/* 役職 */
.unit-box .unit-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;
    text-align:center;
}
/* キャッチコピー */
.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;
    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);
}
.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 {
    grid-row:span 4;
    display:grid;
    grid-template-rows:subgrid;
    justify-content:center;
}

@media only screen and (max-width:820px){
    .unit {
        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%;
    }
}




/* =========================================================================================
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:#f4f4f5;
    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:1.25em;
    aspect-ratio:1 / 1;
    position:absolute;
    right:0.5em;
    top:50%;
    translate:0 -50%;
    transition:0.3s;

    -webkit-mask-image:url(../images/common/arrow_mask.svg);
    mask-image:url(../images/common/arrow_mask.svg);
    -webkit-mask-size:contain;
    mask-size:contain;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    transform:none;
    transition:0.3s;
    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;
    }
}












/* =========================================================================================
その他（汎用的なもの）
=========================================================================================*/
/* テキストの位置 */
.align-left   { text-align:left!important;}   /* 左寄せ */
.align-right  { text-align:right!important;}  /* 右寄せ */
.align-center { text-align:center!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:var(--color-main)!important;}      /* メインカラー（青） */
.color-base { color:var(--color-base-font)!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、スマホ共用） */
.w90 { width:90%!important;}
.w80 { width:80%!important;}
.w70 { width:70%!important;}
.w60 { width:60%!important;}
.w50 { width:50%!important;}
.w40 { width:40%!important;}
.w30 { width:30%!important;}
.w20 { width:20%!important;}
.w10 { width:10%!important;}

/* 横幅指定（PCのみ） */
@media only screen and (min-width:821px){
    .w90-pc { width:90%!important;}
    .w80-pc { width:80%!important;}
    .w70-pc { width:70%!important;}
    .w60-pc { width:60%!important;}
    .w50-pc { width:50%!important;}
    .w40-pc { width:40%!important;}
    .w30-pc { width:30%!important;}
    .w20-pc { width:20%!important;}
    .w10-pc { width:10%!important;}
}
/* 横幅指定（スマホのみ） */
@media only screen and (max-width:820px){
    .w90-mb { width:90%!important;}
    .w80-mb { width:80%!important;}
    .w70-mb { width:70%!important;}
    .w60-mb { width:60%!important;}
    .w50-mb { width:50%!important;}
    .w40-mb { width:40%!important;}
    .w30-mb { width:30%!important;}
    .w20-mb { width:20%!important;}
    .w10-mb { width:10%!important;}
}