@charset "utf-8";
/* generic-hild-izumi Style outpatient.css
/*
ブルー ： #0066ff rgba(0,102,255,1.00)
グリーン ： #47d6b6 rgba(71, 214, 182, 1.00);
ネイビー ： #192c55 rgba(25, 44, 85, 1.00);
ブルーホワイト ： #f2f9ff rgba(242, 249, 255, 1.00);
オレンジ ： #faca7b rgba(250, 202, 123, 1.00);
ブルーグリーングラデーション背景
.gradation {
    background-image: linear-gradient(177deg, rgba(0,102,255,1.00), rgba(71, 214, 182, 1.00));
    
  THの背景色  background-color: rgba(71, 214, 182, .20)

}
*/

/*------------------------------------------------------------
    共通
-------------------------------------------------------------*/
h1[id^="section-"]:not(#section-1) {
    margin-top: 60px;
}

/* 注目ボックス */
.attn-box {
    background-color: #eee;
    margin: 0 auto 30px auto;
    padding: 20px;
    width: 100%;
}

.attn-box-green {
    background-color: rgba(71, 214, 182, .20);
    margin: 0 auto 30px auto;
    padding: 20px;
    width: 100%;
}

.attn-box-bd {
    border: 1px solid rgba(71, 214, 182, 1.00);
    margin: 0 auto 30px auto;
    padding: 20px;
    width: 100%;
}

.attn-box-bd-red {
    border: 1px solid red;
    margin: 0 auto 30px auto;
    padding: 20px;
    width: 100%;
}

.attn-box p,
.attn-box-bd p {
    margin-bottom: 8px;
}

.attn-box p:last-child,
.attn-box-bd p:last-child {
    margin-bottom: 0;
}

.no-mb {
    margin-bottom: 0 !important;
}



/* 親リスト（1段目：エメラルドグリーン） */
ul.maru-ico {
    list-style: none;
    margin: 0 0 30px 0 !important;
    padding: 0;
}

ul.maru-ico li {
    position: relative;
    margin-bottom: 0.8em;
    padding-left: 25px;
    line-height: 1.6;
}

ul.maru-ico li::before {
    content: "";
    position: absolute;
    top: 0.4em;
    /* 1行目の中央付近 */
    left: 0;
    width: 12px;
    height: 12px;
    background-color: #47d6b6;
    border-radius: 50%;
}

ul.maru-ico li::marker {
    content: "";
    /* marker擬似要素を空にする */
    display: none;
}

/* 孫リスト（2段目：小さいグレー） */
ul.maru-ico li ul {
    list-style: none;
    margin: 0.5em 0 0 0 !important;
    /* 親liとの間隔 */
    padding: 0;
}

ul.maru-ico li ul li {
    padding-left: 20px;
    /* 孫は少し左を詰める */
    margin-bottom: 0.5em;
    font-size: 0.95em;
    /* 孫は少し小さめに（任意） */
}

ul.maru-ico li ul li::before {
    content: "";
    position: absolute;
    top: 0.5em;
    /* 小さいので位置を微調整 */
    left: 4px;
    /* 親のマークとズラして配置 */
    width: 8px;
    /* ひとまわり小さく */
    height: 8px;
    background-color: #999999;
    /* グレー */
    border-radius: 50%;
}

/*------------------------------------------------------------
    ご面会について
-------------------------------------------------------------*/
img.bd {
    border: 1px solid #ddd;
}

/*------------------------------------------------------------
	病室のご案内
-------------------------------------------------------------*/
/* リスト全体のスタイル */
.box_type13 {
    background-color: rgba(71, 214, 182, .20);
    /* 画像のような薄い緑の背景色 */
    padding: 20px;
    /* 内側の余白 */
    border-radius: 4px;
    /* 角を少し丸くする場合 */
    margin-top: 20px;
}

.image_list.mb20 {
    display: flex;
    /* 横並びにする */
    flex-wrap: wrap;
    /* 幅が狭い時に折り返す（必要に応じて） */
    justify-content: flex-start;
    /* 左寄せ（中央にしたい場合は center） */
    align-items: center;
    padding: 20px;
    /* 内側の余白 */
    list-style: none;
    margin: 0;
}

/* 各アイテム（丸い白枠）のスタイル */
.image_list .litem {
    background-color: #ffffff;
    /* 白い丸背景 */
    border-radius: 50%;
    /* 正円にする */
    width: 80px;
    /* 円の幅（アイコンサイズに合わせて調整） */
    height: 80px;
    /* 円の高さ */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    /* アイコン同士の間隔 */
    overflow: hidden;
    /* はみ出し防止 */
}

.image_list .litem:last-child {
    margin-bottom: auto;
}

/* アイコン画像自体のサイズ調整 */
.image_list .litem img {
    width: 85%;
    /* 円の中に少し余白ができるサイズ */
    height: auto;
    display: block;
}

/*------------------------------------------------------------
	受診方法のご案内
-------------------------------------------------------------*/

/* フロー全体を包むコンテナ */
.flow-wrapper {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

/* 2カラム用のコンテナ調整（端を揃える） */
.flow-row-split {
    margin-left: -5px;
    margin-right: -5px;
}

.flow-row-split .w-50 {
    padding: 0 5px;
    /* ボックス間の隙間 */
    box-sizing: border-box;
    width: 50%;
}

/* 1段目：枠線のみのボックス */
.flow-box-outline {
    border: 2px solid #49d5b5;
    color: #49d5b5;
    background-color: #ffffff;
    padding: 15px 10px;
    border-radius: 5px;
    font-weight: bold;
    min-height: 70px;
    /* 高さを揃えるため少し余裕を持たせる */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
}

/* 2段目以降：塗りつぶしのボックス（1カラム） */
.flow-box-fill {
    background-color: #49d5b5;
    color: #ffffff;
    padding: 15px 10px;
    border-radius: 5px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
}

/* 矢印の調整 */
.flow-arrow {
    text-align: center;
    padding: 10px 0;
}

.flow-arrow img {
    width: 30px;
    height: auto;
}

/* ボックス内のリンク */
.flow-link {
    color: #ffffff !important;
    text-decoration: underline !important;
    font-weight: bold;
}

/* チェックボックス風アイコン */
.titem span.checkbox-icon {
    font-size: 1.5em;
    vertical-align: middle;
    display: inline-block;
    margin: 0 5px 5px 0;
    font-weight: bold;
    /* 少し太くするとよりチェックボックスらしくなります */
}

.green-box {
    background-color: #40bf64;
    /* ボックスのサイズと余白 */
    width: 100%;
    max-width: 480px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;

    /* テキストの装飾 */
    color: #FFF;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 0.05em;
    /* アニメーション用 */
    transition: all 0.3s ease;
    cursor: pointer;
}

.green-box a {
    color: #fff;
    text-decoration: none;
}

.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 横並びになった時の要素同士の間隔 */
    gap: 20px;
    height: 100px;
}

/* 画像自体の調整（画像が大きすぎる場合に防ぐ） */
.grid-2col img {
    max-width: 100%;
    height: 100px;
}

/* モバイル対応：画面が狭いときは縦並びに戻す */
@media (max-width: 767px) {
    .grid-2col {
        grid-template-columns: 1fr;
    }
}

/* ホバー時の演出（リンクとして使用する場合） */
.green-box:hover {
    background-color: #4eb068;
    opacity: 0.9;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/*------------------------------------------------------------
	入院費のお支払い
-------------------------------------------------------------*/
/* コンテナ全体の調整 */
.container {
    width: 100%;
    max-width: 1200px;
    /* 必要に応じて調整してください */
    margin: 0 auto;
    padding: 0 15px;
}

/* 行（Flexboxを有効にする） */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

/* カラムの設定 */
.col-sm-6 {
    position: relative;
    width: 50%;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}

/* 画像のレスポンシブ対応 */
.block-img {
    width: 100%;
    height: auto;
    display: block;
}


/* =====================================================
  --  メディアクエリ
===================================================== */
@media(max-width:1366px) {}

@media(max-width:1260px) {}

@media(max-width:1024px) {}

@media screen and (max-width: 782px) {}

@media(max-width:768px) {
    .flow-row-split {
        margin-left: 0;
        margin-right: 0;
    }

    .flow-wrapper .w-50 {
        width: 100% !important;
        padding: 0;
        margin-bottom: 10px;
    }

    .flow-wrapper .w-50:last-child {
        margin-bottom: 0;
    }

    .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media(max-width:576px) {}

@media(max-width:360px) {}



@media screen and (min-width: 768px) {
    .sp-only {
        display: none;
    }
}