@charset "utf-8";

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

img.img_l {
  float: left;
  margin: 20px;
}

img.img_r {
  float: right;
  margin: 20px;
}


/* コンテンツタイトル */
.sub-kv {
    position: relative;
    height: 240px;
    /* ←コンパクト */
    background: url('../img/cover.png') center/cover no-repeat;
}

.sub-kv1 {
    position: relative;
    height: 240px;
    /* ←コンパクト */
    background: url('../img/cover1.png') center/cover no-repeat;
}

hr.line{
    border-top: 1px dotted #8c8b8b;
}
.uline{
    width: 40%;
    padding: 10px 10px;
    border-bottom: 1px dotted #cccccc;  
}




/* 薄いオーバーレイ */
.sub-kv::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(48, 146, 181, 0.25);
    /* 薄めがポイント */
}

/* 内側 */
.sub-kv-inner {
    position: relative;
    max-width: 1100px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

/* テキスト */
.sub-kv-text {
    color: #333;
    font-weight: bold;
}

/* タイトル */
.sub-kv-text h1 {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

/* サブ */
.sub-kv-text p {
    font-size: 14px;
    opacity: 0.9;
}


/* ページ別に変える */
.general-kv {
    background-image: url('img/general.jpg');
}

.dryeye-kv {
    background-image: url('img/dryeye.jpg');
}


/* ===============================
 パンくず（1100px基準）
=============================== */

.breadcrumb-wrap {
    border-bottom: 1px solid #eee;
    background: #fff;
}

.breadcrumb {
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 20px;
    font-size: 15px;
    color: #777;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* リンク */
.breadcrumb a {
    color: #4a6fa5;
    text-decoration: none;
    transition: 0.3s;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

/* 区切り */
.breadcrumb span {
    color: #aaa;
}

/* 現在ページ */
.breadcrumb .current {
    color: #333;
}


/* ======================================
診療ボタン
====================================== */

.treatment-buttons {
    max-width: 1100px;
    margin: 60px auto;
    padding: 0 20px;

    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* ボタン本体 */
.treatment-btn {
    display: inline-block;
    padding: 14px 24px;
    color: #4a6fa5;
    text-decoration: none;
    border: 1px solid #d0dbe6;
    background: #fff;
    transition: 0.3s;
    letter-spacing: 0.05em;
    font-weight: 500;
}

/* ホバー */
.treatment-btn:hover {
    background: #4a6fa5;
    color: #fff;
    border-color: #4a6fa5;
}

.treatment-btn.curent {
    background: #4a6fa5;
    color: #fff;
    border-color: #4a6fa5;
}


@media (max-width: 768px) {

    .treatment-buttons {
        gap: 10px;
    }

    .treatment-btn {
        width: 100%;
        text-align: center;
    }

}

/*------------------------------------------------------------------------*/
/*よくある質問・FAQ（アコーディオン開閉式）
---------------------------------------------------------------------------*/
.ui-tools-openclose3-parts * {
    margin: 0;
    padding: 0;
}

/*ボックス全体*/
.ui-tools-openclose3-parts {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    /*質問ボックス同士の余白。0.8文字分。*/
    font-size: 0.9rem;
    /*文字サイズ90%*/
}

/*質問ボックス１個あたり*/
.ui-tools-openclose3-parts .faq-item-parts {
    background: #fff;
    /*背景色を白に*/
    border-radius: 12px;
    /*角を丸くする*/
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    /*ボックスの影。右へ、下へ、ぼかす量。0,0,0は黒のことで0.05は色が5%出た状態。*/
}

/*質問部分（クリックで開閉するボタン）*/
.ui-tools-openclose3-parts .question-parts {
    display: flex;
    align-items: center;
    gap: 1rem;
    /*Q印とテキストの余白。1文字分。*/
    padding: 1rem 1.5rem;
    /*上下に1文字分、左右に1.5文字分の余白。*/
    cursor: pointer;
    /*マウスカーソルを指マークに*/
    transition: background 0.2s;
    /*背景色の変化を0.2秒かけて*/
    user-select: none;
    /*テキスト選択を無効にする*/
}

/*質問部分のマウスオン時*/
.ui-tools-openclose3-parts .question-parts:hover {
    background: #cfe6f4;
    /*背景色。theme.cssのlight-colorを読み込みます。*/
}

/*Qマーク（質問の左側アイコン）*/
.ui-tools-openclose3-parts .question-parts .q-mark-parts {
    flex-shrink: 0;
    /*Qマークが縮まないようにする*/
    width: 36px;
    /*幅*/
    height: 36px;
    /*高さ*/
    border-radius: 50%;
    /*円形にする*/
    background: var(--primary-color);
    /*背景色。theme.cssのprimary-colorを読み込みます。*/
    color: var(--primary-inverse-color);
    /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--accent-font), var(--base-font);
    /*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
    font-size: 1rem;
    /*文字サイズ*/
    font-weight: bold;
    /*太字*/
}

/*質問テキスト*/
.ui-tools-openclose3-parts .question-parts .q-text-parts {
    flex: 1;
    font-size: 0.95rem;
    /*文字サイズ95%*/
    font-weight: bold;
    /*太字*/
    line-height: 1.6;
    /*行間*/
}

/*開閉アイコン（右端の矢印）*/
.ui-tools-openclose3-parts .question-parts .toggle-icon-parts {
    flex-shrink: 0;
    /*アイコンが縮まないようにする*/
    width: 24px;
    /*幅*/
    height: 24px;
    /*高さ*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    /*アイコンサイズ80%*/
    color: var(--primary-color);
    /*アイコン色。theme.cssのprimary-colorを読み込みます。*/
    transition: transform 0.3s;
    /*回転を0.3秒かけて*/
}

/*開いている時の矢印回転*/
.ui-tools-openclose3-parts .faq-item-parts.open .toggle-icon-parts {
    transform: rotate(180deg);
    /*180度回転*/
}

/*回答部分（初期状態は非表示）*/
.ui-tools-openclose3-parts .answer-parts {
    display: none;
    /*初期状態は非表示。JSで開閉する。*/
    padding: 0 1.5rem 1.2rem;
    /*上は0、左右に1.5文字分、下に1.2文字分の余白。*/
}

/*回答の中身*/
.ui-tools-openclose3-parts .answer-parts .a-inner-parts {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    /*Aマークとテキストの余白。1文字分。*/
    padding-top: 1rem;
    /*上に1文字分の余白。*/
    border-top: 1px dashed var(--bg-border-color);
    /*上に点線の区切り。色はtheme.cssのbg-border-colorを読み込みます。*/
}

/*Aマーク（回答の左側アイコン）*/
.ui-tools-openclose3-parts .answer-parts .a-mark-parts {
    flex-shrink: 0;
    /*Aマークが縮まないようにする*/
    width: 36px;
    /*幅*/
    height: 36px;
    /*高さ*/
    border-radius: 50%;
    /*円形にする*/
    background: var(--accent-color);
    /*背景色。theme.cssのaccent-colorを読み込みます。*/
    color: var(--accent-inverse-color);
    /*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--accent-font), var(--base-font);
    /*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
    font-size: 1rem;
    /*文字サイズ*/
    font-weight: bold;
    /*太字*/
}

/*回答テキスト*/
.ui-tools-openclose3-parts .answer-parts .a-text-parts {
    flex: 1;
    /*font-size: 0.85rem;*/
    /*文字サイズ85%*/
    line-height: 1.8;
    /*行間*/
    padding-top: 0.3rem;
    /*Aマークの中心に合わせる微調整。0.3文字分。*/
}


/*bg1-light-parts上のボックス調整*/
.bg1-light-parts .ui-tools-openclose3-parts .faq-item-parts {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    /*ボックスの影を控えめに*/
}

/*bg-parts上の調整（暗い背景向け）*/
.bg1-parts .ui-tools-openclose3-parts .faq-item-parts,
.bg1-primary-parts .ui-tools-openclose3-parts .faq-item-parts,
.bg1-accent-parts .ui-tools-openclose3-parts .faq-item-parts {
    background: rgba(255, 255, 255, 0.1);
    /*白の半透明*/
    box-shadow: none;
    /*影を消す*/
}

.bg1-parts .ui-tools-openclose3-parts .question-parts:hover,
.bg1-primary-parts .ui-tools-openclose3-parts .question-parts:hover,
.bg1-accent-parts .ui-tools-openclose3-parts .question-parts:hover {
    background: rgba(255, 255, 255, 0.05);
    /*白のごく薄い半透明*/
}

.bg1-parts .ui-tools-openclose3-parts .question-parts .q-mark-parts,
.bg1-primary-parts .ui-tools-openclose3-parts .question-parts .q-mark-parts,
.bg1-accent-parts .ui-tools-openclose3-parts .question-parts .q-mark-parts {
    background: rgba(255, 255, 255, 0.2);
    /*白の半透明*/
    color: #fff;
}

.bg1-parts .ui-tools-openclose3-parts .answer-parts .a-mark-parts,
.bg1-primary-parts .ui-tools-openclose3-parts .answer-parts .a-mark-parts,
.bg1-accent-parts .ui-tools-openclose3-parts .answer-parts .a-mark-parts {
    background: rgba(255, 255, 255, 0.15);
    /*白の半透明*/
    color: #fff;
}

.bg1-parts .ui-tools-openclose3-parts .answer-parts .a-inner-parts,
.bg1-primary-parts .ui-tools-openclose3-parts .answer-parts .a-inner-parts,
.bg1-accent-parts .ui-tools-openclose3-parts .answer-parts .a-inner-parts {
    border-top-color: rgba(255, 255, 255, 0.15);
    /*白の半透明*/
}

.bg1-parts .ui-tools-openclose3-parts .question-parts .toggle-icon-parts,
.bg1-primary-parts .ui-tools-openclose3-parts .question-parts .toggle-icon-parts,
.bg1-accent-parts .ui-tools-openclose3-parts .question-parts .toggle-icon-parts {
    color: inherit;
}

/*画面幅600px以下の追加指定*/
@media (max-width:600px) {

    /*質問部分の余白を狭く*/
    .ui-tools-openclose3-parts .question-parts {
        padding: 0.8rem 1rem;
        /*上下に0.8文字分、左右に1文字分の余白。*/
        gap: 0.8rem;
        /*Q印とテキストの余白。0.8文字分。*/
    }

    /*Qマーク・Aマークを小さく*/
    .ui-tools-openclose3-parts .question-parts .q-mark-parts,
    .ui-tools-openclose3-parts .answer-parts .a-mark-parts {
        width: 30px;
        /*幅を小さく*/
        height: 30px;
        /*高さを小さく*/
        font-size: 0.85rem;
        /*文字サイズ85%*/
    }

    /*回答部分の余白を狭く*/
    .ui-tools-openclose3-parts .answer-parts {
        padding: 0 1rem 1rem;
        /*上は0、左右に1文字分、下に1文字分の余白。*/
    }

}

/*h2,h3,p
---------------------------------------------------------------------------*/
/*h2*/
h3.title4-parts {
	color: #4591ba;	/*文字色。theme.cssのprimary-colorを読み込みます。*/
    font-size:1.2rem;
}

/*上のライン*/
h3.title4-parts::before {
	content: "";
	display: block;
	width: 2rem;	/*幅。２文字分。お好みで。*/
	height: 2px;	/*高さ。お好みで。*/
	background: currentColor;	/*色は上のh2の色を引き継ぎます。直接カラーコードなどの指定でもOK。*/
	margin-bottom: 0.6rem;	/*ラインと見出しの間に0.6文字分のスペース。*/
    margin-top: 2.0rem;
}


/*テーブル（網膜症）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta3-parts caption {
	font-weight: bold;		/*太字に*/
	padding: 0.2rem 1rem;	/*ボックス内の余白。上下に0.2文字分、左右に1文字分。*/
	background: #4591ba;		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: #ffffff;	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*テーブルブロック設定*/
.ta3-parts {
	border-collapse: separate;
	border-spacing: 0 1rem;	/*要素間の隙間。*/
	table-layout: fixed;
	width: 100%;
	margin-bottom: 2rem;	/*テーブルの下に空けるスペース。２文字分。*/
}

/*th（左側）、td（右側）の共通設定*/
.ta3-parts th, .ta3-parts td {
	padding: 1rem;		/*ボックス内の余白。１文字分。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta3-parts th {
	width: 13rem;		/*幅。13文字分。*/
	background: rgb(69, 145, 186, 0.2);		/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: #333;	/*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
	border-radius: 5px;		/*角を丸くする指定*/
}


/*テーブル（求人情報）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta2-parts caption {
	font-weight: bold;		/*太字に*/
	padding: 1.0rem 1rem;	/*ボックス内の余白。上下に0.2文字分、左右に1文字分。*/
	margin-bottom: 1rem;	/*下に空けるスペース。１文字分。*/
	background: #c1d4de;		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color:#fff;	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*テーブルブロック設定*/
.ta2-parts {
	table-layout: fixed;
	width: 100%;
	margin-bottom: 2rem;	/*テーブルの下に空けるスペース。２文字分。*/
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta2-parts th, .ta2-parts td {
	padding: 1rem;		/*ボックス内の余白。１文字分。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
	border: 1px solid #cccccc;	/*線の幅、線種、varは色の設定でtheme.cssのbg-border-colorを読み込みます。。*/
}

/*th（左側）のみの設定*/
.ta2-parts th {
	width: 8rem;		/*幅。13文字分。*/
	text-align: left;	/*左よせにする*/
	background: #c1d4de;		/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: #333333;	/*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
}



/*施術の流れ・ステップ（番号付き工程案内）
---------------------------------------------------------------------------*/
.ui-tools-step3-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.ui-tools-step3-parts {
	display: flex;
	flex-direction: column;
	gap: 0;
	font-size: 0.9rem;	/*文字サイズ90%*/
	counter-reset: step-counter;	/*CSSカウンターをリセット。番号の自動採番に使用。*/
}

/*ステップ１個あたり*/
.ui-tools-step3-parts .step-parts {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;	/*番号とテキストの余白。1.5文字分。*/
	padding: 1.5rem 0;	/*上下に1.5文字分の余白、左右はゼロ。*/
	border-bottom: 1px solid #cccccc;	/*区切り線。色はtheme.cssのbg-border-colorを読み込みます。*/
	counter-increment: step-counter;	/*CSSカウンターを1ずつ増やす*/
}
.ui-tools-step3-parts .step-parts:last-child {
	border-bottom: none;	/*最後のステップは区切り線なし*/
}

/*bg1-light-parts上の区切り線色*/
.bg1-light-parts .ui-tools-step3-parts .step-parts {
	border-bottom-color: #cccccc;
}

/*bg-parts上の区切り線色（暗い背景向け）*/
.bg1-parts .ui-tools-step3-parts .step-parts,
.bg1-primary-parts .ui-tools-step3-parts .step-parts,
.bg1-accent-parts .ui-tools-step3-parts .step-parts {
	border-bottom-color: rgba(255,255,255,0.2);	/*白の半透明*/
}

/*番号（丸い円の中にCSSカウンターで自動採番）*/
.ui-tools-step3-parts .step-parts .num-parts {
	flex-shrink: 0;		/*番号が縮まないようにする*/
	width: 50px;	/*円の幅*/
	height: 50px;	/*円の高さ*/
	border-radius: 50%;	/*円形にする*/
	background: #4591ba;	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: #ffffff;	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	font-size: 1.3rem;	/*文字サイズ1.3倍*/
	font-weight: bold;	/*太字*/
}

/*番号の中身をCSSカウンターで自動表示*/
.ui-tools-step3-parts .step-parts .num-parts::before {
	content: counter(step-counter);
}

/*bg-parts上の番号色調整（暗い背景向け）*/
.bg1-parts .ui-tools-step3-parts .step-parts .num-parts,
.bg1-primary-parts .ui-tools-step3-parts .step-parts .num-parts,
.bg1-accent-parts .ui-tools-step3-parts .step-parts .num-parts {
	background: rgba(255,255,255,0.2);	/*白の半透明*/
	color: #fff;
}

/*テキストエリア（番号の横）*/
.ui-tools-step3-parts .step-parts .text-parts {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;	/*テキスト要素同士の余白。0.3文字分。*/
	padding-top: 0.2rem;	/*番号の中心に合わせる微調整。0.2文字分。*/
}

/*ステップ名（h4）*/
.ui-tools-step3-parts .step-parts h4 {
	font-size: 1.05rem;	/*文字サイズ1.05倍*/
	line-height: 1.5;	/*行間*/
}

/*説明テキスト*/
.ui-tools-step3-parts .step-parts p {
	font-size: 0.85rem;	/*文字サイズ85%*/
	line-height: 1.8;	/*行間*/
	opacity: 0.8;	/*透明度。色が80%出た状態。*/
}

/*ステップ画像（任意。画像なしでもOK）*/
.ui-tools-step3-parts .step-parts .img-parts {
	width: 250px;	/*画像の幅*/
	flex-shrink: 0;	/*画像が縮まないようにする*/
	border-radius: 8px;	/*角を丸くする*/
	overflow: hidden;
}
.ui-tools-step3-parts .step-parts .img-parts img {
	width: 100%;
	aspect-ratio: 1 / 1;	/*正方形*/
	object-fit: cover;	/*コンテナいっぱいにカバー、余分な部分はカット*/
	display: block;
}

	/*画面幅600px以下の追加指定*/
	@media (max-width:600px) {

	/*ステップ画像を非表示*/
	.ui-tools-step3-parts .step-parts .img-parts {
		display: none;
	}

	/*番号を小さくする*/
	.ui-tools-step3-parts .step-parts .num-parts {
		width: 40px;	/*円の幅を小さく*/
		height: 40px;	/*円の高さを小さく*/
		font-size: 1.1rem;	/*文字サイズ1.1倍*/
	}

	}/*追加指定ここまで*/

/*openclose1
---------------------------------------------------------------------------*/
/*質問*/
.ui-tools-openclose1-parts {
	display: flex;
	align-items: flex-start;
	border-radius: 3px;		/*角を少しだけ丸く*/
	margin-bottom: 1rem;	/*下に空けるスペース。質問ブロック同士の余白です。*/
	background: #ffffff;	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: #333333;	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	border: 1px solid #cccccc;	/*枠線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
	padding: 1rem;		/*ブロック内の余白。１文字分。*/
	cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}

/*アイコン（閉じている場合）*/
.ui-tools-openclose1-parts::before {
	font-family: "Font Awesome 6 Free";
	content: "\f13a";	/*アイコン画像の指定*/
	font-weight: bold;
	margin-right: 1rem;	/*右側に空けるスペース*/
	flex-shrink: 0;
	color: #4591ba;	/*アイコンの色。theme.cssのprimary-colorを読み込みます。*/
	transform: scale(1.5);	/*アイコンのサイズ1.4倍*/
}

/*回答*/
.ui-tools-openclose1-parts + * {
	padding: 0 1rem 1rem 3rem;	/*ボックス内の余白。上、右、下、左への順番。*/
}

/*アラートボックス（通知・お知らせ）
---------------------------------------------------------------------------*/
/*アラートボックス（共通）*/
.ui-tools-alert1-parts {
	display: flex;
	align-items: flex-start;	/*アイコンとテキストを上揃え*/
	padding: 1rem 1.2rem;	/*ボックス内の余白。上下に1文字分、左右に1.2文字分。*/
	border-radius: 3px;		/*角を少しだけ丸く*/
	border-left: 4px solid;	/*左の線の太さ、線のタイプ。色は別途各タイプで指定。*/
	margin-bottom: 1rem;	/*ボックス同士の余白。1文字分。*/
	line-height: 1.8;	/*行間*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*アイコン共通（Font Awesome疑似要素）*/
.ui-tools-alert1-parts::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	margin-right: 0.8rem;	/*アイコンとテキストの間*/
	flex-shrink: 0;		/*アイコンが縮まないようにする*/
	font-size: 1.1rem;	/*アイコンサイズ1.1倍*/
	line-height: 1.8;	/*行間。テキストと揃える。*/
}

/*内部テキストのマージンリセット*/
.ui-tools-alert1-parts p {
	margin: 0;
}

/*info（情報）※意味色のため配色はテーマに依存しません*/
.ui-tools-alert1-parts.info-parts {
	background: #e8f4fd;	/*背景色*/
	border-left-color: #2196F3;	/*左線の色*/
	color: #1565C0;	/*文字色*/
}
.ui-tools-alert1-parts.info-parts::before {
	content: "\f05a";	/*circle-info*/
	color: #2196F3;	/*アイコン色*/
}

/*success（成功・完了）*/
.ui-tools-alert1-parts.success-parts {
	background: #e8f5e9;	/*背景色*/
	border-left-color: #4CAF50;	/*左線の色*/
	color: #2E7D32;	/*文字色*/
}
.ui-tools-alert1-parts.success-parts::before {
	content: "\f058";	/*circle-check*/
	color: #4CAF50;	/*アイコン色*/
}

/*warning（注意）*/
.ui-tools-alert1-parts.warning-parts {
	background: #fff8e1;	/*背景色*/
	border-left-color: #FF9800;	/*左線の色*/
	color: #E65100;	/*文字色*/
}
.ui-tools-alert1-parts.warning-parts::before {
	content: "\f071";	/*triangle-exclamation*/
	color: #FF9800;	/*アイコン色*/
}

/*danger（重要・警告）*/
.ui-tools-alert1-parts.danger-parts {
	background: #fde8e8;	/*背景色*/
	border-left-color: #f44336;	/*左線の色*/
	color: #c62828;	/*文字色*/
}
.ui-tools-alert1-parts.danger-parts::before {
	content: "\f06a";	/*circle-exclamation*/
	color: #f44336;	/*アイコン色*/
}



/*アクセス*/
.access {
	padding: 30px 20px;
	background: #f7faf9;
	text-align: center;
}

.access-inner {
	margin-top: 50px;
	display: flex;
	gap: 40px;
	align-items: stretch;
}

/* 左：地図 */
.access-map {
	flex: 1;
	width: 100%;
}

/* 右：テキスト */
.access-info {
	flex: 1;
	text-align: left;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.access-text {
	font-size: 1rem;
	line-height: 1.8;
	margin-bottom: 20px;
}

/* タグ */
.access-tags span {
	display: inline-block;
	background: #43C6AC;
	color: #fff;
	padding: 6px 15px;
	border-radius: 20px;
	margin-right: 10px;
	margin-top: 10px;
	font-size: 0.9rem;
}

@media (max-width: 1290px) {
	.access-map {
		position: relative;
		width: 100%;
		height: 0;
		padding-top: 75%;
		/* 比率を4:3に固定 */
	}

	/* Google Mapのiframe */
	.access-map iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}


@media(min-width: 768px){
  a[href^="tel:"]{
    pointer-events: none;
  }
}