@charset "utf-8";

/* --------------------------------- */
/* スズキ調剤薬局様サイト用メインCSS */
/* --------------------------------- */
/* Modified : 2024/11/23 12:07 */
/*
	▼読み込んでいるWebフォント：
	font-family: "M PLUS Rounded 1c", sans-serif;	: font-weight: 400;
	font-family: 'Zen Maru Gothic', sans-serif;		: font-weight: 400,500;
	font-family: "Spline Sans Mono", monospace;		: font-weight: 400;
*/

/* ―――――――― */
/* ■カスタム変数群 */
/* ―――――――― */
:root {
	--content-max-width: 1200px;		/* 最大横幅 */
	--inner-content-max-width: 900px;	/* 広げすぎない場合のコンテンツ枠最大幅 */

	--messageform-max-width: 800px;		/* お問い合わせフォームの最大幅 */

	/* ------ */
	/* ▼配色 */
	/* ------ */
	--base-theme-color: #2fa4a8;		/* ベースカラー */
	--second-theme-color: #1D499D;		/* 第2ベースカラー */
	--third-theme-color: #ed7d71;		/* 第3ベースカラー */

	--content-textcolor: #545454;		/* 本文の文字色 */
	--content-backcolor: #fff;			/* 本文の背景色 */
	--midashi-textcolor: #2FA4A8;		/* 見出し文字色 */

	--wideStdBtn-backcolor: white;		/* WIDE STDボタンの背景色 */
	--wideStdBtn-textcolor: #1D499D;	/* WIDE STDボタンの文字色 */
	--wideStdBtn-bordercolor: #2fa4a8;	/* WIDE STDボタンの枠線色 */

	--wideRevBtn-backcolor: #2fa4a8;	/* WIDE REVボタンの背景色 */
	--wideRevBtn-textcolor: white;		/* WIDE REVボタンの文字色 */
	--wideRevBtn-bordercolor: white;	/* WIDE REVボタンの枠線色 */

	--smallStdBtn-backcolor: #2fa4a8;	/* SMALL STDボタンの背景色 */
	--smallStdBtn-textcolor: white;		/* SMALL STDボタンの文字色 */
	--smallStdBtn-bordercolor: #2fa4a8;	/* SMALL STDボタンの枠線色 */

	--connectedButton-bordercolor: white;	/* 連結ボタンの枠線色 */
	--connectedButton-linkcolor: white;		/* 連結ボタンの枠線色 */

	--orangebtn-backcolor: #fff;	/* 橙色ボタンの背景色 */

	--drawer-backcolor: #2fa4a8;		/* ドロワーメニューの背景色 */
	--drawer-linkcolor: #fff;			/* ドロワーメニュー項目の文字色 */
	--hamburger-back-color: #2fa4a8;	/* ハンバーガーボタンの背景色 */
	--hamburger-bar-color: white;		/* ハンバーガーボタンのバー色 */

	--inputform-textcolor: #111;		/* 入力欄の文字色 */
	--inputform-backcolor: #fff;		/* 入力欄の背景色 */
	--inputform-bordercolor: #888;		/* 入力欄の枠線色 */
	--placeholder-textcolor: #7A7A7A;	/* プレースホルダの文字色 */
	--formbutton-textcolor: #fff;		/* 送信ボタンの文字色 */
	--formbutton-backcolor: #666666;	/* 送信ボタンの背景色 */
	--checktable-bordercolor: black;	/* 送信確認表の枠線色 */
	--checktable-backcolor: white;		/* 送信確認表の背景色 */
	--checktable-textcolor: black;		/* 送信確認表の文字色 */

	--footer-backcolor: #2fa4a8;	/* フッタの背景色 */
	--footer-textcolor: #fff;		/* フッタの文字色 */

	/* -------- */
	/* ▼その他 */
	/* -------- */
	--loopslider-base-height: 125px;	/* ループスライダーの基本高さ */
}

/* ――――――――――― */
/* ■全環境用のベースCSS  */
/* ――――――――――― */

	/* ================== */
	/* ▼ページ全体・汎用 */
	/* ================== */
	html {
		scroll-behavior: smooth;
	}
	body {
		font-family: "M PLUS Rounded 1c","メイリオ",Meiryo,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","游ゴシック","Yu Gothic","游ゴシック体","YuGothic",sans-serif;
		margin: 0;
		padding: 0;
		color: var(--content-textcolor);
		background-color: var(--content-backcolor);
		line-height: 1.4;
		-webkit-text-size-adjust: 100%;
	}

		/* ▽消極的な改行制御区間 */
		i {
			font-style: normal;
			display: inline-block;
		}

		/* ▽モバイルだけの改行調整 */
		br.sp-only {
			display: block;
			margin: 0.5em 0;
		}

		/* ▽画面幅に応じて自動縮小する画像 */
		.autoResize {
			max-width: 100%;
			height: auto;
		}

		/* ▽リンク配色 */
		body a {
			color: var(--content-textcolor);
			text-decoration: none;
		}
		body a:hover {
			opacity: 0.5;
		}

	/* ---------------- */
	/* 汎用セクション群 */
	/* ---------------- */
	section {
		margin: 0;
		padding: 0;
	}

	/* ---------------- */
	/* 汎用レイアウト群 */
	/* ---------------- */
	/* ▼Base:標準レイアウト枠 */
	.stdLayout {
		max-width: var(--inner-content-max-width);
		margin: auto;
		padding: 0;
		position: relative;
	}

	/* ▼Base:幅広レイアウト枠 */
	.wideLayout {
		max-width: var(--content-max-width);
		margin: auto;
		padding: 0;
		position: relative;
	}

	/* ▼Base:最大幅レイアウト枠 */
	.fullWidthLayout {
		max-width: 100%;
		margin: 0;
	}

	/* ▼Space:標準前後余白 */
	.stdGapDiv {
		margin-top: 7rem;
		margin-botto: 7rem;
	}

	/* ▼Space:短め前後余白 */
	.halfGapDiv {
		margin-top: 3.5rem;
		margin-botto: 3.5rem;
	}

	/* ▼2段組レイアウト枠 */
	.doubleColumnArea {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
		.doubleColumnArea > div {
			flex: 1;
		}

	/* ▼文章空間 */
	.stdSentencesPlace {
		max-width: var(--inner-content-max-width);
		padding: 0 1rem;
		margin: 2.5rem auto;
	}
		.stdSentencesPlace p {
			text-align: justify;
		}

	/* ------------ */
	/* 汎用見出し群 */
	/* ------------ */
	/* ▼下雲付き見出し */
	.decoTitle {
		color: var(--second-theme-color);
		width: fit-content;
		min-width: 200px;
		min-height: calc( 1.8rem + 0.25rem + 0.67rem + 40px );
		margin: 0 auto;
		background-image: url("/imgs/img_title.png");
		background-size: 200px 40px;
		background-position: bottom center;
		background-repeat: no-repeat;
	}
		.bigT,
		.subT {
			display: block;
			margin: 0 auto;
			width: fit-content;
			line-height: 1;
		}
		.bigT {
			font-size: 1.8rem;
		}
		.subT {
			margin-top: 0.25rem;
			font-size: 0.67rem;
		}

	/* ▼両脇縦棒付き見出し */
	.sideBarsTitle {
		color: var(--base-theme-color);
		width: fit-content;
		margin: 4rem auto 3rem;
		font-size: 1.1rem;
	}
	.sideBarsTitle::before,
	.sideBarsTitle::after {
		content: '｜';
		display: inline-block;
		margin: 0 0.5em;
	}

	/* ▼小見出し */
	.semiTitle {
		display: block;
		margin: 0 auto;
		width: fit-content;
		line-height: 1;
		color: var(--second-theme-color);
		font-size: 1.5rem;
	}

	/* ---------- */
	/* 汎用表組群 */
	/* ---------- */
	/* ▼標準テーブル（ただしスマホでは縦展開） */
	.stdTable {
		border-collapse: collapse;
		margin: 0 auto;
		max-width: 100%;
		width: fit-content;
	}
			.stdTable th,
			.stdTable td {
				padding: 0.5rem;
				text-align: left;
			}
			.stdTable th {
				font-weight: 500;
			}

	/* ▼標準広テーブル（ただしスマホでは縦展開） */
	.stdWideTable {
		border-collapse: collapse;
		width: 100%;
	}
		.stdWideTable tr {
			border-bottom: 1px solid #ccc;
		}
			.stdWideTable th,
			.stdWideTable td {
				padding: 1rem;
				text-align: left;
			}

			.stdWideTable th {
				font-weight: 500;
			}

	/* ---------------------------- */
	/* 汎用ボタン群：配置レイアウト */
	/* ---------------------------- */
	/* ▼ボタン群BOX／※2つ以上のボタンを横並びにするレイアウト用(ul+li前提) */
	.buttonSetBox {
		margin: 0;
		padding: 0;
		list-style-type: none;
		text-align: center;
		display: flex;
		align-items:center;
		justify-content:center;
		flex-wrap: wrap;		/* Wrapあり */
		gap: 3rem;				/* 間隔 */
	}
		.oneButtonBox {
		}

	/* ▼ボタンBOX／※1つのボタンをセンタリングするレイアウト用(主にdiv) */
	.buttonBox {
		margin: 0;
		padding: 0;
		text-align: center;
	}

	/* ------------------------ */
	/* 汎用ボタン群：ボタン単独 */
	/* ------------------------ */
	.btn {
		text-decoration: none;
		text-align: center;
		line-height: 1;
	}

	/* ▼WIDE STD：横長角丸白背景ボタン */
	.wideStdBtn {
		display: block;
		width: fit-content;
		min-width: 14em;
		margin: 0 auto;
		padding: 0.9em 1.5em;
		border: 1px solid var(--wideStdBtn-bordercolor);
		border-radius: 0.65em;
		background-color: var(--wideStdBtn-backcolor);
		color: var(--wideStdBtn-textcolor);
	}
	.wideStdBtn:hover {
		border-color: var(--wideStdBtn-bordercolor);
		background-color: var(--wideStdBtn-bordercolor);
		color: var(--wideStdBtn-backcolor);
		opacity: 1;
	}

	/* ▼WIDE REVERSE：横長角丸反転背景ボタン */
	.wideRevBtn {
		display: block;
		width: fit-content;
		min-width: 14em;
		margin: 0 auto;
		padding: 0.9em 1.5em;
		border: 1px solid var(--wideRevBtn-bordercolor);
		border-radius: 0.65em;
		background-color: var(--wideRevBtn-backcolor);
		color: var(--wideRevBtn-textcolor);
	}
	.wideRevBtn:hover {
		border-color: var(--wideRevBtn-bordercolor);
		background-color: var(--wideRevBtn-bordercolor);
		color: var(--wideRevBtn-backcolor);
		opacity: 1;
	}

	/* ▼SMALL STD：横長角丸塗りつぶし小ボタン */
	.smallStdBtn {
		display: inline-block;
		min-width: 10em;
		padding: 0.45em 0.75em 0.35em;
		border: 1px solid var(--smallStdBtn-bordercolor);
		border-radius: 0.5em;
		background-color: var(--smallStdBtn-backcolor);
		color: var(--smallStdBtn-textcolor);
	}

	/* ▼ボタンデコレーション */
		/* 右矢印アイコン付き */
		.withArrowBtn {
			background-image: url("/imgs/icon/ico_arrow.svg");
			background-size: 1rem;
			background-position: center right 8px;
			background-repeat: no-repeat;
		}
		.withArrowBtn:hover {
			background-image: url("/imgs/icon/ico_arrow_w.svg");
		}

		/* 左矢印アイコン付き（※右矢印アイコンに加えて指定） */
		.turnArrowLeft {
			transform: scaleX(-1);
		}
			.turnArrowLeft i {
				transform: scaleX(-1);	/* 矢印以外の文字もすべて左右逆転してしまうので、それを元に戻す */
			}

		/* 右矢印反転アイコン付き */
		.withRevArrowBtn {
			background-image: url("/imgs/icon/ico_arrow_w.svg");
			background-size: 1rem;
			background-position: center right 8px;
			background-repeat: no-repeat;
		}
		.withRevArrowBtn:hover {
			background-image: url("/imgs/icon/ico_arrow.svg");
		}

	/* ------------------------ */
	/* 汎用ボタン群：複合ボタン */
	/* ------------------------ */

	/* ▼連結ボタン */
	.connectedButtons {
		display: flex;
		align-items:center;
		justify-content:center;
		margin: 0 auto;
		padding: 0;
		list-style-type: none;
	}
		.connectedButtons li {
			flex: 1;
			border-width: 1px 0 1px 1px;
			border-style: solid;
			border-color: var(--connectedButton-bordercolor);
			text-align: center;
			max-width: 8em;
		}
		.connectedButtons li:last-child {
			border-width: 1px;
		}
		.connectedButtons li a {
			display: block;
			color: var(--connectedButton-linkcolor);
			line-height: 1;
			padding: 1rem 0;
		}

	/* -------------------- */
	/* サブ汎用レイアウト群 */
	/* -------------------- */

	/* ▼署名レイアウトBOX */
	.signatureCover {
		margin: 1.5rem 0 0 0;
		padding: 0 0.75rem;
		text-align: right;
	}
		.signatureBox {
			display: inline-block;
			text-align: center;
		}
			img.signature {
				width: 170px;
				height: auto;
			}

	/* -------------- */
	/* 汎用特別装飾群 */
	/* -------------- */
	.houganshi {
		/* 方眼紙模様に必須のスタイル */
		background-image: linear-gradient(0deg, transparent calc(100% - 1px), #DAF7F2 calc(100% - 1px)),
		                linear-gradient(90deg, transparent calc(100% - 1px), #DAF7F2 calc(100% - 1px));
		background-size: 27px 27px;
		background-repeat: repeat;
		background-position: center center;

		/* 以下任意のスタイル */
		padding: 20px;
	}

	/* ============ */
	/* ▼ヘッダ区画 */
	/* ============ */
	.pageTop {
		border-top: 10px solid var(--base-theme-color);
		position: relative;
	}

		/* ……………… */
		/* ▼サイトロゴ */
		/* ……………… */
		.headFloatLogoBox {
			position: absolute;
			top: 0;
			left: 0;
			margin: 0;
			padding: 0;
		}
			.headFloatLogoBox a {
				display: block;
				padding: 13px 0 0 20px;
			}
				.headLogo {
					display: block;
					width: 200px;
					height: auto;
				}

		/* ………………………… */
		/* ▼メニューバー(PC用) */
		/* ………………………… */
		.globalmenuBox {
		}
			.globalmenuList {
				display: flex;
				align-items:center;
				justify-content:center;
				list-style-type: none;
				margin: 0;
				padding: 40px 0;
			}
				.globalmenuList li {
					margin: 0;
					padding: 3px 20px; /*Gナビ単体の余白*/
					text-align: center;
					line-height: 1;
					border-left: 2px dotted var(--base-theme-color);
				}
				.globalmenuList li:last-child {
					border-right: 2px dotted var(--base-theme-color);
				}
					.globalmenuList li a {
						color: var(--base-theme-color);
					}

		/* ※画面幅が1279px以下になった場合の微調整 */
		@media (max-width:1279px) {
			.globalmenuList {
				justify-content: end;
				padding-right: 90px;
				padding-left: 240px;
			}
		}

		@media (max-width:1150px) {
				.globalmenuList li { padding: 3px 15px; }
		}
		@media (max-width:1050px) {
				.globalmenuList li { padding: 3px 13px; }
		}
		@media (max-width:1023px) {
				.globalmenuList li { padding: 3px 12px; }
		}

		/* ※画面幅が1010px以下になった場合の微調整 */
		@media (max-width:1010px) {
				.globalmenuList li {
					padding: 3px 11px;
					font-size: 0.9rem;
				}
		}
		@media (max-width:950px) {
				.globalmenuList li { font-size: 0.8rem; }
		}

		/* --------------------------------- */
		/* ▼ドロワー関連群(PC/モバイル兼用) */
		/* --------------------------------- */
		.hamburgerSet { }

			/* ‥‥‥‥‥‥‥‥‥‥ */
			/* ▼ハンバーガーボタン */
			/* ‥‥‥‥‥‥‥‥‥‥ */
			.openbtn{
				position:fixed;
				top: 20px;
				right: 10px;
				cursor: pointer;
				width: 60px;
				height:60px;
				background-color: var(--hamburger-back-color);
				border-radius: 50%;
				z-index: 100;
			}
				.openbtn span{
					display: inline-block;
					position: absolute;
					left: 15px;
					height: 3px;
					border-radius: 0;
					background-color: var(--hamburger-bar-color);
					width: 50%;
				}
				.openbtn span:nth-of-type(1) { top:15px; }	/* 15 */
				.openbtn span:nth-of-type(2) { top:23px; }	/* 23 */
				.openbtn span:nth-of-type(3) { top:31px; }	/* 31 */

				.openbtnLabel {
					color: var(--hamburger-bar-color);
					font-size: 0.6em;
					letter-spacing: 0.5px;
					line-height: 1;
					position: absolute;
					bottom: 10px;
					left:0; right:0;
					display: block;
					text-align: center;
				}

			/* ‥‥‥‥‥‥‥‥‥ */
			/* ▼ドロワーメニュー */
			/* ‥‥‥‥‥‥‥‥‥ */
			#Drawer{
				position:fixed;
				z-index: 100;
				/* ナビのスタート位置と形状 */
				top:-170vh;
				left:0;
				width:100%;
				height: 100vh;/*ナビの高さ*/
				background-color: var(--drawer-backcolor);
				transition: all 0.6s;
			}

			/* アクティブクラスがついたら位置を0に */
			#Drawer.panelactive{
				top: 0;
			}

			/* ナビゲーションの縦スクロール */
			#Drawer.panelactive .drawerInside {
				/*ナビの数が増えた場合縦スクロール*/
				position: fixed;
				z-index: 101; 
				width: 100%;
				height: 100vh;/*表示する高さ*/
				overflow: auto;
				-webkit-overflow-scrolling: touch;
			}

				/* ドロワーヘッダ */
				.drawerHead {
					position: relative;
					border-width: 10px 0;
					border-style: solid;
					border-top-color: var(--base-theme-color);
					border-bottom-color: var(--third-theme-color);
					background-color: white;
				}
					/* ドロワー内タイトル */
					.drawerTitle {
						margin: 0 auto;
						padding: 0;
						max-width: 600px;
					}
						.drawerTitleLink {
							display: block;
							padding: 15px;
						}
							.drawerTitleLogo {
								display: block;
								width: auto;
								height: 60px;
							}

				/* ドロワー内メニュー */
				.drawerMenu {
					margin: 1rem auto 0;
					padding: 0;
					list-style-type: none;
					width: fit-content;
				}

					.drawerMenu li a {
						color: var(--drawer-linkcolor);
						text-decoration: none;
						padding: 0.34em;
						display: block;
					}

				/* ドロワー内メインメニュー */
				.drawerMainMenu {
				}
					.drawerMainMenu li a {
						font-size: 1.25em;
						font-weight: 500;
					}

						/* メインメニューの中の2階層以降 */
						.drawerMainMenu ul {
							list-style-type: '-';
							color: white;
						}

				/* ドロワー内サブメニュー */
				.drawerSubMenu {
					list-style-type: none;
				}
					.drawerSubMenu li a {
						text-align: center;
					}

				/* ドロワー閉じる */
				.drawerClose {
					text-align: center;
					margin: 0;
					cursor: pointer;
					line-height: 1;
					font-weight: bold;
					background-color: var(--hamburger-back-color);
					border-radius: 50%;
					width: 60px;
					height: 60px;
				}
					/* 閉じるボタン */
					.drawerCloseBtn {
						display: block;
						font-size: 2.75em;
						color: var(--hamburger-bar-color);
					}
					/* 閉じるテキスト */
					.drawerCloseText {
						display: block;
						color: var(--hamburger-bar-color);
						font-size: 0.6em;
						letter-spacing: 0.5px;
					}

			/* 状況に応じた表示の切り替え（ドロワーメニュー専用）※適用優先度の関係で、共通装飾として以外に、ここにも同じ内容を記述しておく必要がある。 */
			.drawerMenu a.top-only { display: none;  }
			.drawerMenu a.not-top  { display: block; }
			.homePage .drawerMenu a.top-only { display: block; }
			.homePage .drawerMenu a.not-top  { display: none;  }

	/* ==================== */
	/* ▼パンくずリスト区画 */
	/* ==================== */
	.pankuzuZone {
		margin: 0 auto;
		padding: 1.67em 1em;
		font-size: 0.75em;
		line-height: 1;
		max-width: var(--content-max-width);
	}
		/* パンくずリスト */
		.pankuzuList {
			margin: 0 auto;
			padding: 0;
			list-style-type: none;
			max-width: var(--contentbase-max-width);
		}
			/* 一項目 */
			.pankuzuItem {
				display: inline-block;
			}
			.pankuzuItem::after {
				content: '>';
				display: inline-block;
				margin: 0 1em;
			}
			/* 現在項目 */
			.pankuzuItem.presentPage { }
			.pankuzuItem.presentPage::after {
				content: '';
			}

				/* 店名の調整 */
				.pankuzuItem em {
					font-style: normal;
					letter-spacing: -1px;
				}

	/* ==================== */
	/* ▼スライドショー区画 */
	/* ==================== */
	.slideshowSet {
		/* ---------------------------------------------------------------------------------------------------- */
		/* ※スライド本体(.slideshowCover)の後に、スライドに重ねるオブジェクト(.addonSlideshow)がある場合に使用 */
		/* ---------------------------------------------------------------------------------------------------- */
		margin: auto;
		padding: 0;
		position: relative;
		max-width: var(--content-max-width);
	}
		.slideshowCover {
			/* ------------------------------------------------------------------------------------------ */
			/* ※スライド本体(.slideshowCover)と、その内側にスライドカバー(.slideFront)を重ねる場合に使用 */
			/* ------------------------------------------------------------------------------------------ */
			position: relative;
			margin: 0 auto;
			padding: 0;
			max-width: var(--content-max-width);
		}

		#HeadSlideshow {
			margin: 0px;
			padding: 0px;
		}

			/* ---------------------------- */
			/* ▽スライドショー用表示候補群 */
			/* ---------------------------- */
			#SlideshowBox {
				width: 100%;
				position: relative;
			}

			#SlideshowBox p,
			#NoSlideshow {
				overflow: hidden;
			}

			#SlideshowBox p {
				position: absolute;
				top:  0;
				left: 0;
				right: 0;	/* 左右0にすることで原寸を超えて拡大もできる */
				z-index: 8;
				opacity: 0.0;
				background-color: white;
				margin: 0;
			}

			#SlideshowBox p.active {
				z-index: 10;
				opacity: 1.0;
			}

			#SlideshowBox p.last-active {
				z-index: 9;
			}

			#SlideshowBox p img {
				width: 100%;
				height: auto;
				display: block;
				border-radius: 2em 2em 0 0;		/* 画像角丸(※デフォルト空間にも同様の指定が必要 */
			}

			/* ▼スクリプト無効の場合の固定表示（＋デフォルト空間確保） */
			#NoSlideshow img {
				width: 100%;
				height: auto;
				display: block;
				border-radius: 2em 2em 0 0;		/* 画像角丸(※#SlideshowBox p imgと同様の指定にする */
			}

			/* ---------------- */
			/* ▽スライドカバー */
			/* ---------------- */
			.slideFront {
				margin: 0;
				padding: 0;
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				z-index:10;
				overflow: hidden;
			}
				.slideFront img {
					display: block;
					width: 100%;
				}

			/* ………………………………… */
			/* ▼画像に重ねるオブジェクト */
			/* ………………………………… */
			.addonSlideshow {
				overflow: hidden;
			}
				.headCopyLine {
					z-index: 20;
					position: absolute;
					top: 75px;
					right: 15%;
					writing-mode: vertical-rl;
					background-color: var(--verticalline-backcolor);
					color: var(--verticalline-textcolor);
					font-family: 'Kaisei Opti', serif;
					padding: 0.5em 1em 1em;
					margin-bottom: 1em;
					line-height:1;
					font-size: 1.5em;
				}

				/* 白波カバー */
				.namiCoverBox {
					z-index: 20;
					position: absolute;
					bottom: 0;
					left: 0;		/* ブラウザによっては端に1px程度の空白ができるので範囲を広げておく */
					right: 0;	/* (同上) */
				}
					.namiCoverBox img {
						display: block;
						width: 100%;
					}

			/* ………………………………… */
			/* ▼スライド枠のすぐ下側区画 */
			/* ………………………………… */
			.afterSlideArea {
				margin-top: 50px;
				z-index: 30;
				text-align: center;
			}
				.afterSlideTitle { }
					.afterSlideTitle img {
						width: 200px;
						height: auto;
					}
				.afterSlideGuide {
					color: var(--second-theme-color);
					margin: 3rem 1rem;
					
				}

				.firstNoteBlock {
					margin: 95px 0 5px;
				}
					.firstNoteHead {
						color: #f28f75;
						line-height: 1.1;
					}
						.firstNoteTitle {
							margin: 0;
							font-size: 1.5rem;
						}
						.firstNoteSub {
							margin: 0.8rem 0 0 0;
							font-size: 1rem;
						}

					.firstNoteBody {
						margin: 50px auto 0;
						max-width: 680px;
						text-align: justify;
					}
						.blueEm {
							font-style: normal;
							color: #1d499a;
						}
						.firstNoteImageBox {
							text-align: center;
							margin: 50px 0;
						}
							.firstNoteImageBox img {
								max-width: 375px;
								height: auto;
							}

	/* ＝＝＝＝＝＝＝＝＝＝ */
	/* ▼メイン：ページ共通 */
	/* ＝＝＝＝＝＝＝＝＝＝ */
	main {
	}

		/* ============== */
		/* ▼お知らせ区画 */
		/* ============== */
		.infoBoxArea {
			margin: 5rem auto;
		}

			.infoBoxTitle {
				text-align: center;
				font-size: 1rem;
				font-weight: normal;
			}

			/* ▼お知らせ本体領域 */
			.tegalogEmbedArea {
				margin: 1rem auto;
				max-width: 100%;
				width: var(--inner-content-max-width);
			}

			/* ▼1件ずつの表示(※HOME合成用) */
			.oneNewsBox {
				border-bottom: 1px dashed var(--base-theme-color);
			}
				.postDate {
					text-align: right;
					font-weight: bold;
				}
				.postTitle {
					font-size: 1rem;
				}
				.postMain {
					padding-left: 1rem;
				}

		/* ================ */
		/* ▼わたしたち区画 */
		/* ================ */
		.policyBoxList {
			display: flex;
			gap: 40px 60px;
			flex-wrap: wrap;
			align-items: flex-start;
			justify-content: center;
			list-style-type: none;
			margin: 3rem 0;
			padding: 0;
		}
			.onePolicyBox {
				max-width: 300px;
			}
				.policyHead { }
					.policyTop,
					.policyNum,
					.policyTitle {
						display: block;
						text-align: center;
						line-height: 1;
					}
					.policyTop {
						letter-spacing: 0.5rem;
						padding-left: 0.5rem;
						margin-bottom: 0.4rem;
						color: var(--base-theme-color);
					}
					.policyNum {
						font-family: "Spline Sans Mono", monospace;
						margin-bottom: 1rem;
						color: var(--third-theme-color);
					}
					.policyTitle {
						color: var(--second-theme-color);
						font-size: 1.2rem;
					}
				
				.policyImageCover {
					margin: 1rem 50px;
				}
					.policyImage { }
				
				.policyMsg {
					/* text-align: justify; */
				}

		/* ============== */
		/* ▼求人募集区画 */
		/* ============== */
			.recruitHeadBox { }
				.recruitHeadMsg {
					color:  var(--base-theme-color);
				}

		/* ============== */
		/* ▼応募要項区画 */
		/* ============== */
		.recruitBodyBox {
			margin-top: 4rem;
		}

			.greenBlueTitle {
				background-color: var(--base-theme-color);
				color: white;
				width: fit-content;
				font-weight: 500;
				font-size: 1.05rem;
				margin: 4rem auto 1rem;
				padding: 0.25em 1em;
				line-height: 1.25;
			}
			.greenBlueTitle.recruitFirstTitle {
				margin-top: 0;
			}

			.recruitBox {
				margin-bottom: 3rem;
			}
				.recruitTable { }
					.recruitTable th,
					.recruitTable td {
						vertical-align: top;
					}
					.recruitTable th {
						color: var(--base-theme-color);
						white-space: nowrap;
					}
					.recruitTable th::before {
						content:'｜';
						display: inline-block;
						color: #f7cbbe;
					}
					.recruitTable td {
						padding-left: 1em;
					}

		/* ============== */
		/* ▼アクセス区画 */
		/* ============== */
			.accessGuideBox {
				margin: 2rem 0;
				text-align: center;
			}

				/* 鉄道案内表組 */
				.trainInfo {
					border-collapse: collapse;
					margin: 0 auto;
					max-width: 100%;
					width: fit-content;
				}
					.trainInfo th,
					.trainInfo td {
						vertical-align: top;
						padding: 0 1em;
						font-weight: normal;
					}

				/* 駐車場イラスト */
				.parkingMapIllust {
				}
					.parkingMapIllust img {
						width: 380px;
						max-width: 100%;
						height: auto;
					}
				/* 比較的高域な地図イラスト */
				.WideareaMapIllust {
				}
					.WideareaMapIllust img {
						width: 450px;
						max-width: 100%;
						height: auto;
					}

			/* 2段組の中 */
			.parkingPhotoBoxes {
				gap: 1rem;
				flex-wrap: wrap;
			}
				.oneParkingBox {
					min-width: 300px;
					text-align: center;
				}
					.parkNum { margin-bottom: 0; }
					.parkDet { margin-top: 0.5rem; }

					.parkingPhoto img {
						display: block;
						width: 373px;
						max-width: 100%;
						height: auto;
						margin: auto;
					}

			/* …………… */
			/* ▼薬局地図 */
			/* …………… */
			.pharmacyMapSpace { }
				.pharmacyMapSpace .googleMap {
					display: block;
					width: 700px;
					max-width: 100%;
					height: 470px;
					margin: 2rem auto;
				}

	/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
	/* ▼メイン：contact(PHP)：Ver.2019 改2024S用 */
	/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
	.pageContact {
	}

		/* ……………………… */
		/* ▼お問い合わせ領域 */
		/* ……………………… */
		.contactArea {
		}

			/* お問い合わせフォーム中身 */
			.contactBody {
				max-width: 100%;
				margin: 0 auto;
				padding: 0 2rem;
				color: var(--base-theme-color);
			}

				/* ------------------------------ */
				/* ▼お問い合わせフォーム内の装飾 */
				/* ------------------------------ */
				#messageform {	/* form要素 */
					text-align: left;
					padding: 0;
					max-width: var(--messageform-max-width);
					margin: auto;
					font-family: "Zen Maru Gothic","メイリオ",Meiryo,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","游ゴシック","Yu Gothic","游ゴシック体","YuGothic",sans-serif;
				}

					/* ▼TABLE */
					.contacttable {
					}

					/* ………………………………… */
					/* ▼フォーム：汎用サイン関連 */
					/* ………………………………… */
					/* ▽必須項目サインの案内 */
					.requireGuide {
						margin: 3rem 0;
						font-size: 1em;
						font-weight: 500;
					}
						.requireGuide .required-sign img {
							margin: 0 0.5em 0 0;
						}

					/* ▽必須or任意サイン */
					.required-sign img,
					.voluntary-sign img {
						width: 1.1em;	/* 原寸 47px */
						height: 1.1em;	/* 原寸 47px */
						vertical-align: -3px;
						margin: 0 0.5em;
					}

					/* ………………………………… */
					/* ▼フォーム：汎用レイアウト */
					/* ………………………………… */
					/* ▽段組(横並び配置) */
					.inputSetBox {
						display: flex;
						gap: 1rem;
					}

					/* ……………………………… */
					/* ▼フォーム：汎用パーツ群 */
					/* ……………………………… */
					/* ▽(th)項目ラベル */
					.itemLabel {
						padding: 0;
						vertical-align: top;
						text-align: left;
						white-space: nowrap;
						font-weight: 500;
					}

					/* ▽(td)入力項目枠 */
					.inputColumn {
						margin: 0;
						padding: 0 0 2.5em 0;
					}
						/* プレースホルダ */
						::placeholder {
							color: var(--placeholder-textcolor);
						}

						/* 入力ガイド */
						.inputColumn u {
							text-decoration: none;
						}

						/* 短いテキスト欄 */
						/* 自由テキスト欄 */
						/* セレクトボックス */
						/* テキストエリア */
						.itemSelectArea,
						.shorttext,
						.freetext,
						.itemselect,
						.freeinputbox {
							font-family: "M PLUS Rounded 1c","メイリオ",Meiryo,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","游ゴシック","Yu Gothic","游ゴシック体","YuGothic",sans-serif;
							font-size: 16px;
							width: 100%;
							box-sizing: border-box;
							border-radius: 3px;
							border: 1px solid var(--inputform-bordercolor);
							background-color: var(--inputform-backcolor);
							color: var(--inputform-textcolor);
							padding: 3px 6px;
						}

						/* 横幅上書き： */
						.shorttext { max-width: 7.5em; }	/* 短いテキスト欄(上書き) */
						.inputYear { max-width: 5em; }		/* 日付テキスト欄(上書き) */
						.inputMonth { max-width: 4em; }
						.inputDate { max-width: 4em; }
						.inputName { max-width: 8.5em; }	/* 名前テキスト欄(上書き) */
						.zipnumber { max-width: 9em; }		/* 郵便番号欄(上書き) */
						.telnumber { max-width: auto; }		/* 電話番号欄(上書き) */
						.mailinput { max-width: auto; }		/* メール欄(上書き) */

					/* アイテム選択枠 */
					.itemSelectArea {
						padding: 0.75em;
					}
						/* 選択肢群 */
						.itemSelectArea .selectOptions {
							display: inline-block;
							margin: 0.25em 0.4em 0.25em 0;
						}

				/* ------------------------ */
				/* ▼フォーム内ボタンの装飾 */
				/* ------------------------ */
				.formbuttons {
					text-align: center;
					margin: 0;
					padding: 0.25em 0 2em;
				}
					.formbuttons input,
					.formbuttons button {
						appearance: none;
						border: none 0px;
						cursor: pointer;
						color: white;
						background-color: gray;
						border: 1px solid gray;
						font-size: 1em;
						padding: 0.75em 3em;
						line-height: 1;
						font-weight: 500;
					}
					.formbuttons input:hover,
					.formbuttons button:hover {
						color: gray;
						background-color: white;
					}

						/* 送信ボタン */
						.formbuttons .confirmbutton {
							background-color: var(--formbutton-backcolor);
							color: var(--formbutton-textcolor);
							border: 1px solid var(--formbutton-backcolor);
						}
						.formbuttons .confirmbutton:hover {
							background-color: var(--formbutton-textcolor);
							color: var(--formbutton-backcolor);
						}

			/* 送信後の表示 */
			.sentcomplete { margin: 1em auto 5em; padding: 1em 0 5em; max-width: var(--messageform-max-width); }
			.sentcompleteNotice { }
			.sentcompleteNotice a { color: var(--dark-area-textcolor); }

			.policyBox {
				padding: 0 0.5em 1.5em;
				margin: 0 auto;
				max-width: var(--messageform-max-width);
				text-align: justify;
			}

		/* ----------------------------------- */
		/* ▼PHPが生成する確認テーブル用の装飾 */
		/* ----------------------------------- */
		form { text-align: center; }
		.checktable {
			border-collapse: collapse;
			max-width: 100%;
			box-sizing: border-box;
			border: 1px solid var(--checktable-bordercolor);
			margin: 2.5em auto;
		}
		.checktable th,
		.checktable td {
			background-color: var(--checktable-backcolor);
			color: var(--checktable-textcolor);
			border: 1px solid var(--checktable-bordercolor);
			vertical-align: middle;
			padding: 0.25em;
			text-align: left;
		}
		.checktable thead th {
			background-color: var(--formbutton-backcolor);
			color: var(--formbutton-textcolor);
			padding: 0.25em;
			text-align: center;
		}
		.checktable td {
			word-break: break-all;
		}
		.itemlabel { font-weight: 500; }
		.checkitem { display: inline-block; margin-right: 1em; }
		.checkitem:empty { display: none; }

		@media all and (min-width: 768px) {
			.itemlabel { white-space: nowrap; }		/* 画面が広い場合だけ、確認画面の項目名を折り返さない */
		}
		@media all and (max-width: 639px) {
			.checktable td { font-size: 0.9em; }
		}
		@media all and (max-width: 359px) {
			.checktable td { font-size: 0.8em; }
		}

	/* ============ */
	/* ▼フッタ区画 */
	/* ============ */
	.pageBottom {
		margin: 9rem 0 0 0;
		border-bottom: 10px solid var(--third-theme-color);
	}

		/* …………… */
		/* ▼営業時間 */
		/* …………… */
		.openHoursBox {
			text-align: center;
		}
			.openHours {
				margin: 0 0 1.5rem;
			}
				.openHoursImage {
					margin: 3rem 0 0;
					max-width: min(100%, 550px);
					height: auto;
				}
			.openHourNote {
				display: flex;
				flex-wrap: wrap;
				align-items:center;
				justify-content:center;
				gap: 1rem 3rem;
				color: var(--second-theme-color);
			}
				.closeDays {
					font-size: 1.1rem;
				}
				.limitedOpenDetails {
					font-size: 0.95rem;
				}
					.likeCharIcon {
						width: 1rem;
						height: auto;
						vertical-align: -2px;
					}

		/* …………… */
		/* ▼店舗詳細 */
		/* …………… */
		.pharmacyDetailArea { }

			/* ‥‥‥‥‥‥‥‥ */
			/* ▽段：薬局連絡先 */
			/* ‥‥‥‥‥‥‥‥ */
			.pharmacyContactBox {
				text-align: center;
			}
				.companyLogo { }
				.companyAddressBox {
					font-weight: bold;
				}
					.companyAddress {
						margin: 1.5rem 0 2rem;
						font-size: 1.15rem;
					}
					.companyTel {
						font-size: 1.25rem;
					}
						.telIcon {
							width: 2rem;
							height: auto;
							vertical-align: -8px;
							margin-right: 7px;
						}

			/* ‥‥‥‥‥‥‥ */
			/* ▽段：薬局地図 */
			/* ‥‥‥‥‥‥‥ */
			.pharmacyMapBox {
				text-align: center;
			}

				/* Google Map */
				.pharmacyMapBox iframe { display inline-block; margin-bottom: 3rem; }
				.pharmacyMapBox .buttonBox { }

		/* …………… */
		/* ▼社名領域 */
		/* …………… */
		.companySignArea {
			margin: 5rem 0;
		}
			.companySign {
				margin: 3rem auto 0;
				padding: 0 1em 0.45em;
				width: fit-content;
				font-size: 1.2rem;
				text-align: center;
				border-bottom: 7px solid var(--third-theme-color);
			}

		/* ………………………………… */
		/* ▼フッタ下端デザイン調整帯 */
		/* ………………………………… */
		.footDesignBelt {
			margin: 1rem 0 0 0;
			padding: 0;
			width: 100%;
			overflow: hidden;
		}
			.footDesignBelt img {
				display: block;
				width: 101%;		/* 左右に1pxの空白が現れるのを防ぐため */
				max-width: 101%;	/* 左右に1pxの空白が現れるのを防ぐため */
				margin: 0 -1px;
			}

		/* …………………… */
		/* ▼フッタ下端領域 */
		/* …………………… */
		.footerBottomArea {
			background-color: var(--footer-backcolor);
			color: var(--footer-textcolor);
			margin-top: -1px;	/* 隙間ができるのを防ぐ */
		}

		/* …………………… */
		/* ▼サイトマップ枠 */
		/* …………………… */
		.sitemapBox {
			margin: 0 auto;
			padding: 0;
			text-align: left;
			line-height: 2.5;
		}

			.sitemapTitle {
				text-align: center;
				font-size: 1rem;
				font-weight: normal;
			}

			/* ▽サイトマップリスト */
			.sitemapList {
				margin: 1.5rem 0 3rem 0;
				padding: 0;
				list-style-type: none;
			}
				/* リスト内1項目 */
				.sitemapList li {
					display: block;
					margin: 0 0 1.33rem 0;
					padding: 0;
					line-height: 1.1;
				}
				.sitemapList li::before,
				.sitemapList li::after {
					content: '｜';
					display: inline-block;
					margin: 0;
					padding: 0;
					color: var(--footer-textcolor);
				}
				.sitemapList li::before	{ padding-right: 0.5em; }
				.sitemapList li::after	{ padding-left: 0.5em; }

				/* リスト内リンク */
				.sitemapList a {
					color: var(--footer-textcolor);
				}

			/* ▽最下部のコンタクトリンク */
			.bottomContact {
				margin: 2.5em 0 0 0;
				padding: 0 0 1.2em 0;
				text-align: center;
			}
				.bottomContact a {
					color: var(--footer-textcolor);
				}


/* ======================================================== */
/* ■総合モバイル端末（横幅899px以下）共通の追加・上書きCSS */
/* ======================================================== */
@media all and (max-width:899px) {

	.pc-only { display: none !important; }

	/* ================== */
	/* ▼ページ全体・汎用 */
	/* ================== */

	/* ---------- */
	/* 汎用表組群 */
	/* ---------- */
	/* ▼標準広テーブル（ただしスマホでは縦展開） */
	.stdWideTable {
		width: calc( 100% - 2rem );
		margin: 0 1rem;
	}

	/* ============ */
	/* ▼ヘッダ区画 */
	/* ============ */

		/* ……………… */
		/* ▼サイトロゴ */
		/* ……………… */

		/* ※トップページでは表示しない */
		.homePage .headFloatLogoBox {
			display: none;
		}
		/* ※トップページ以外では表示 */
		.deepPage .headFloatLogoBox {
			position: relative;
		}
			.headFloatLogoBox a {
				padding: 12px 0 12px 12px;
			}
				.headLogo {
					width: 150px;
				}

		/* --------------------------------- */
		/* ▼ドロワー関連群(PC/モバイル兼用) */
		/* --------------------------------- */
			/* ‥‥‥‥‥‥‥‥‥ */
			/* ▼ドロワーメニュー */
			/* ‥‥‥‥‥‥‥‥‥ */
			.drawerClose {
				position: absolute;
				top: 5px;
				right: 20px;
			}

	/* ============ */
	/* ▼フッタ区画 */
	/* ============ */
		/* …………… */
		/* ▼店舗詳細 */
		/* …………… */
		.pharmacyDetailArea .doubleColumnArea {
			flex-direction: column;
			gap: 2rem;
		}

		/* …………………… */
		/* ▼フッタ下端領域 */
		/* …………………… */
		.footerBottomBox {
			margin: 0 auto;
			padding: 1em 0 5em;
			max-width: 570px;
		}

			/* ▼会社ロゴ */
			.companyLogoBox.tab-only {
				float: right;
			}

}

/* ========================================================= */
/* ■タブレット端末専用（横幅600～899）共通の追加・上書きCSS */
/* ========================================================= */
@media all and (min-width:600px) and (max-width:899px) {

	.sp-only { display: none !important; }

	/* ==================== */
	/* ▼スライドショー区画 */
	/* ==================== */
	.slideshowSet {
		margin: 1.5rem 2rem;
	}

			/* ………………………………… */
			/* ▼スライド枠のすぐ下側区画 */
			/* ………………………………… */
			.afterSlideArea {
				margin-top: 50px;
			}
					.afterSlideTitle img {
						width: 170px;
					}

}

/* ====================================================== */
/* ■スマートフォン（横幅599px以下）専用の追加・上書きCSS */
/* ====================================================== */
@media all and (max-width:599px) {

	.tab-only,
	.wide-only { display: none !important; }

	/* ================== */
	/* ▼ページ全体・汎用 */
	/* ================== */
	body {
		font-size: 0.95rem;
	}

	/* ---------- */
	/* 汎用表組群 */
	/* ---------- */
	/* ▼標準テーブル（ただしスマホでは縦展開） */
	.stdTable {
		display: block;
	}
		.stdTable tr {
			display: block;
			margin: 1rem 0;
		}
		.stdTable th,
		.stdTable td {
			display: block;
			padding: 0 0 0.5rem 0;
		}

	/* ▼標準広テーブル（ただしスマホでは縦展開） */
	.stdWideTable {
		display: block;
	}
		.stdWideTable tr {
			display: block;
			border-bottom-color: #eee;
			width: calc( 100vw - 2rem );
			margin: 1.5rem 0;
		}
		.stdWideTable th,
		.stdWideTable td {
			display: block;
			padding: 0 0 1rem 0;
		}

	/* ==================== */
	/* ▼スライドショー区画 */
	/* ==================== */
			/* ---------------------------- */
			/* ▽スライドショー用表示候補群 */
			/* ---------------------------- */
			#SlideshowBox p img {
				border-radius: 0;		/* 画像角丸(※デフォルト空間にも同様の指定が必要 */
			}

			/* ▼スクリプト無効の場合の固定表示（＋デフォルト空間確保） */
			#NoSlideshow img {
				border-radius: 0;		/* 画像角丸(※#SlideshowBox p imgと同様の指定にする */
			}

			/* ………………………………… */
			/* ▼スライド枠のすぐ下側区画 */
			/* ………………………………… */
			.afterSlideArea {
				margin-top: 5vw;
			}
					.afterSlideTitle img {
						width: min( 40vw , 200px );
					}

				.afterSlideGuide {
					text-align: justify;
					margin: 3rem 1.75rem;
				}

				.firstNoteBlock { }
					.firstNoteHead { }
						.firstNoteTitle {
							margin: 0 auto;
							max-width: 10em;
						}
						.firstNoteSub {
							margin: 0.8rem 0 0 0;
						}

					.firstNoteBody {
						margin-left: 1rem;
						margin-right: 1rem;
					}
							.firstNoteImageBox img {
								max-width: 100%;
							}

	/* ＝＝＝＝＝＝＝＝＝＝ */
	/* ▼メイン：ページ共通 */
	/* ＝＝＝＝＝＝＝＝＝＝ */
		/* ============== */
		/* ▼応募要項区画 */
		/* ============== */
					.recruitTable td {
						padding-left: 1em;
					}

		/* ============== */
		/* ▼アクセス区画 */
		/* ============== */
				/* 鉄道案内表組 */
				.trainInfo,
				.trainInfo tr,
				.trainInfo th,
				.trainInfo td {
					display: block;
				}

	/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
	/* ▼メイン：contact(PHP)：Ver.2019 改2024S用 */
	/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
				/* ------------------------------ */
				/* ▼お問い合わせフォーム内の装飾 */
				/* ------------------------------ */
					/* ▼TABLE */
					.contacttable,
					.contacttable tr,
					.contacttable th,
					.contacttable td {
						display: block;
					}

	/* ============ */
	/* ▼フッタ区画 */
	/* ============ */
		/* …………………… */
		/* ▼フッタ下端領域 */
		/* …………………… */
		.footerBottomBox {
			margin: 0 2em;
		}

}

/* ========================================================== */
/* ■小型スマートフォン（横幅360px以下）専用の追加・上書きCSS */
/* ========================================================== */
@media all and (max-width:360px) {

	/* ================== */
	/* ▼ページ全体・汎用 */
	/* ================== */
	body {
		font-size: 0.9rem;
	}

	/* ============ */
	/* ▼メイン区画 */
	/* ============ */
	main {
		width: 100%;
	}

	/* ============ */
	/* ▼フッタ区画 */
	/* ============ */
		/* …………………… */
		/* ▼フッタ下端領域 */
		/* …………………… */
		.footerBottomBox {
			margin: 0 1em;
		}

}

/* ======================================================================== */
/* ■PC(大型タブレット含む)サイズ画面（横幅900px以上）専用の追加・上書きCSS */
/* ======================================================================== */
@media screen and (min-width:900px) {

	.mobile-only,
	.tb-only,
	.sp-only { display: none !important; }

	/* ================== */
	/* ▼ページ全体・汎用 */
	/* ================== */
	body {
		font-size: 1rem;
	}

	/* ※Windows環境で日本語Webフォントのシャギーを防ぐ(No-Shaggy Adjust)：インラインには効かないので注意 */
	.nsa,h2,h3,h4,h5,p,li,a,label,u,span
	{
		transform: rotate(0.03deg);
	}
		label,u {
			display: inline-block;
		}
	.noShaggyAdjust p,
	img { transform: rotate(0deg) !important; }	/* 画像も一緒に傾いてしまうのを防ぐ */

	/* ============ */
	/* ▼ヘッダ区画 */
	/* ============ */
		/* --------------------------------- */
		/* ▼ドロワー関連群(PC/モバイル兼用) */
		/* --------------------------------- */
			/* ‥‥‥‥‥‥‥‥‥ */
			/* ▼ドロワーメニュー */
			/* ‥‥‥‥‥‥‥‥‥ */
			#Drawer{
				/* ナビのスタート位置と形状 */
				top: -350px;
				height: 278px;		/* この値を調整する場合は .drawerInside も同値にする */
				border-bottom: 10px solid var(--third-theme-color);
			}

			/* ナビゲーションの縦スクロール */
			#Drawer.panelactive .drawerInside {
				height: 278px;		/* この値は #Drawer の高さに合わせる */
			}

				/* ドロワー内メインメニュー */
				.drawerMainMenu {
					margin: 3rem auto 2rem;
					padding: 0;
					max-width: 1130px;
					display: flex;
					flex-wrap: wrap;
					gap: 1.5rem 3rem;
					align-items:center;
					justify-content: center; /* flex-start;*/
				}
					.drawerMainMenu li a {
						font-size: 1.5em;
						padding: 0.8rem 0;
					}

				@media (max-width:1150px) {
				.drawerMainMenu {
					margin: 3rem auto 2rem;
					padding: 0 5%;
					justify-content: center;
				}
					.drawerMainMenu li a {
						font-size: 1.25em;
						padding: 0.75rem 0;
						min-width: 12em;
					}
				}

				/* ドロワー閉じる */
				.drawerClose {
					margin: auto;
					background-color: white;
				}
					/* 閉じるボタン */
					.drawerCloseBtn {
						color: var(--base-theme-color);
					}
					/* 閉じるテキスト */
					.drawerCloseText {
						color: var(--base-theme-color);
					}

	/* ============ */
	/* ▼フッタ区画 */
	/* ============ */
		/* …………………… */
		/* ▼フッタ下端領域 */
		/* …………………… */
		.footerBottomBox {
			margin: 0 auto;
			padding: 1em 10% 5em;
			max-width: var(--inner-content-max-width);
		}

			/* ▽汎用2段組レイアウト枠 */
			.footerBottomBox .doubleColumnArea {
				align-items: end;
				justify-content: space-between;
			}

			/* ……………… */
			/* ▼会社ロゴ段 */
			/* ……………… */
			.companyLogoBox {
				text-align: right;
				padding-bottom: 1rem;
			}

}

/* =================== */
/* ■てがろぐ装飾用CSS */
/* =================== */
.tegalogEmbedArea { }

	/* ------------------------- */
	/* ▼URLが書かれた場合の装飾 */
	/* ------------------------- */
	.tegalogEmbedArea .url {
		word-break:break-all;	/* 自動リンクのはみ出しを防ぐ */
	}

	/* ---------------------------------------------------- */
	/* ▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)：文字 */
	/* ---------------------------------------------------- */
	/* B:太字(Bold) */
	.decorationB {
		font-weight: bold;		/* 太字 */
	}
	/* D:削除(Delete) */
	.decorationD {
		color: #888;	/* 文字色 */
		text-decoration-line: line-through;	/* 取り消し線 */
		text-decoration-color: red;			/* 線の色 */
	}
	/* E:強調(Emphasis) */
	.decorationE {
		color: #050;	/* 文字色 */
		font-style: normal;
		font-weight: bold;
	}
	/* I:斜体(Italic) */
	.decorationI {
		font-style: italic;		/* 斜体 */
	}
	/* Q:引用(Quote) */
	.decorationQ {
		margin: 1em 0.3em 1em 1em;		/* 外側の余白(上→右→下→左) */
		padding: 0.75em 0.5em;			/* 内側の余白(上下→左右) */
		border-left: 5px double #5c5;	/* 左端の枠線 */
		background-color: #efe;			/* 背景色 */
		font-size: 0.95em;				/* 文字サイズ */
		display: block;					/* ※Ver 2.2.0以降必須の記述 */
	}
	.decorationQ::before,
	.decorationQ::after {
		content: '';			/* 標準で付加されてしまう引用符を無効にする */
	}
	.decorationQ + br {
		display: none;	/* 引用直後の改行を無効化する */
	}
	/* S:小文字(Small) */
	.decorationS {
		font-size: 0.8em;	/* 文字サイズ */
	}
	/* T:極小文字(Tiny) */
	.decorationT {
		font-size: 0.6em;	/* 文字サイズ */
	}
	/* U:下線(Underline) */
	.decorationU {
		text-decoration-line: underline;	/* 線位置 */
		text-decoration-style: double;		/* 線種類 */
		text-decoration-color: lime;		/* 線配色 */
	}

	/* -------------- */
	/* ▼埋め込み画像 */
	/* -------------- */
	/* ▽画像ボックス(FIGオプション指定時) */
	.embeddedpictbox {
		margin: 0;					/* 外側の余白を消す */
		padding: 0;					/* 内側の余白を消す */
		display: inline-table;		/* 横方向に並べる */
		border-collapse: collapse;	/* displayをinline-tableにする場合に必要 */
		border: 1px solid #e0eee0;	/* 枠線 */
		vertical-align: top;		/* 行内では上に寄せる */
	}
		/* キャプション */
		.embeddedpictbox figcaption {
			display: table-caption;		/* キャプションが画像幅から外に出ないようにする */
			caption-side: bottom;		/* キャプションの位置(上にしたければtop) */
			font-size: 0.8em;			/* 文字サイズ */
			text-align: center;			/* センタリング */
			background-color: #e0eee0;	/* 背景色 */
		}

		/* 画像ボックスに含まれる画像 */
		.embeddedpictbox img {
			vertical-align: middle;
		}

	/* ▽画像そのもの */
	.embeddedimage {
		max-width: 100%;	/* 横方向にはみ出ないようにする */
		max-height: 240px;	/* 大きくなりすぎないようにする */
		width: auto;	/* 画像サイズを固定したい場合はここに具体的なpx値を指定するのがお勧め */
		height: auto;	/* 高さを固定したい場合を除いて、ここは auto のままにするのがお勧め */
	}

	/* ▽フラグ付き画像 */
	.tegalogEmbedArea figure.nsfw {
		overflow: hidden;	/* ぼかし領域がfigureのボックスからはみ出ないようにする */
	}
	.tegalogEmbedArea img.nsfw {
		filter: blur(9px);	/* ぼかす */
	}

	/* -------------- */
	/* ▼埋め込み動画 */
	/* -------------- */
	@media all and (max-width: 600px) {
		.embeddedmovie {
			display: inline-block;
			max-width: 100%;	/* はみ出ないようにする */
			width: auto;
			height: auto;
		}
	}

	/* --------------- */
	/* ▼埋め込みTweet */	/* これはツイートが埋め込まれる処理「前」用の装飾です。実際に埋め込まれるツイートはTwitter側のiframeで装飾されますので、てがろぐ側では指定できません。 */
	/* --------------- */
	.tegalogEmbedArea blockquote.twitter-tweet,
	.tegalogEmbedArea blockquote.instagram-media {
		background-color: #f8f8f8;
		border: 1px dashed #ddd;
		border-radius: 9px;
		margin: 0.3em 0;
		padding: 1em;
		font-size: 0.95em;
		color: #999;
		text-shadow: 1px 1px 1px #fff;
	}

	/* -------------------- */
	/* ▼検索語のハイライト */
	/* -------------------- */
	.searchword {
		font-weight: bold;
		background: linear-gradient(transparent 60%, #aaf0aa 60%);
	}


/* ======================= */
/* ■埋め込みツール等用CSS */
/* ======================= */