@charset "utf-8";

/*
	* 顧客オリジナルスタイルシート
	* サイト全体に関するスタイル
	* ver1
	* Copyright (C) ●●など
	* 更新履歴
		└ 
*/
/* ////////////////////////////////////////////////////////////////////////////////////////////////////
	初期設定（不要なものは削除）
//////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ******************************************************************************************
	root設定（カラー、基準幅、ベースフォント適宜修正）
****************************************************************************************** */
:root{
	--black: #231815;
	--navy: #002b69;
	--mainColor: #83ccd2;
	--mainColorLight: #c8e7e9;
	--mainColorDark: #00aebb;
	--accentColor: #004ea2;
	--lightGray: #f8f8f8;
	--gray: #e8e8e8;
	--darkGray: #b1b1b1;
	--pink: #d17389;
	--purple: #a68dae;
	--green: #5eb0ad;

	/* 基準幅設定 */
	--vw-base: 1920;

	/* ベースフォント設定（数値のみ） */
	--fontSizeBase: 16;/* パソコン */
	--fontSizeBaseSp: 14;/* スマホ */

	--fontSize10: calc(10 / var(--fontSizeBase) * 1rem);
	--fontSize11: calc(11 / var(--fontSizeBase) * 1rem);
	--fontSize12: calc(12 / var(--fontSizeBase) * 1rem);
	--fontSize13: calc(13 / var(--fontSizeBase) * 1rem);
	--fontSize14: calc(14 / var(--fontSizeBase) * 1rem);
	--fontSize15: calc(15 / var(--fontSizeBase) * 1rem);
	--fontSize16: calc(16 / var(--fontSizeBase) * 1rem);
	--fontSize17: calc(17 / var(--fontSizeBase) * 1rem);
	--fontSize18: calc(18 / var(--fontSizeBase) * 1rem);
	--fontSize19: calc(19 / var(--fontSizeBase) * 1rem);
	--fontSize20: calc(20 / var(--fontSizeBase) * 1rem);
	--fontSize21: calc(21 / var(--fontSizeBase) * 1rem);
	--fontSize22: calc(22 / var(--fontSizeBase) * 1rem);
	--fontSize23: calc(23 / var(--fontSizeBase) * 1rem);
	--fontSize24: calc(24 / var(--fontSizeBase) * 1rem);
	--fontSize25: calc(25 / var(--fontSizeBase) * 1rem);
	--fontSize26: calc(26 / var(--fontSizeBase) * 1rem);
	--fontSize27: calc(27 / var(--fontSizeBase) * 1rem);
	--fontSize28: calc(28 / var(--fontSizeBase) * 1rem);
	--fontSize29: calc(29 / var(--fontSizeBase) * 1rem);
	--fontSize30: calc(30 / var(--fontSizeBase) * 1rem);
	--fontSize31: calc(31 / var(--fontSizeBase) * 1rem);
	--fontSize32: calc(32 / var(--fontSizeBase) * 1rem);
	--fontSize33: calc(33 / var(--fontSizeBase) * 1rem);
	--fontSize34: calc(34 / var(--fontSizeBase) * 1rem);
	--fontSize35: calc(35 / var(--fontSizeBase) * 1rem);
	--fontSize36: calc(36 / var(--fontSizeBase) * 1rem);
	--fontSize37: calc(37 / var(--fontSizeBase) * 1rem);
	--fontSize38: calc(38 / var(--fontSizeBase) * 1rem);
	--fontSize39: calc(39 / var(--fontSizeBase) * 1rem);
	--fontSize40: calc(40 / var(--fontSizeBase) * 1rem);
	--fontSize41: calc(41 / var(--fontSizeBase) * 1rem);
	--fontSize42: calc(42 / var(--fontSizeBase) * 1rem);
	--fontSize43: calc(43 / var(--fontSizeBase) * 1rem);
	--fontSize44: calc(44 / var(--fontSizeBase) * 1rem);
	--fontSize45: calc(45 / var(--fontSizeBase) * 1rem);
	--fontSize46: calc(46 / var(--fontSizeBase) * 1rem);
	--fontSize47: calc(47 / var(--fontSizeBase) * 1rem);
	--fontSize48: calc(48 / var(--fontSizeBase) * 1rem);
	--fontSize49: calc(49 / var(--fontSizeBase) * 1rem);
	--fontSize50: calc(50 / var(--fontSizeBase) * 1rem);
}
@media screen and (max-width:576px){
	:root{
		--fontSize10: calc(10 / var(--fontSizeBaseSp) * 1rem);
		--fontSize11: calc(11 / var(--fontSizeBaseSp) * 1rem);
		--fontSize12: calc(12 / var(--fontSizeBaseSp) * 1rem);
		--fontSize13: calc(13 / var(--fontSizeBaseSp) * 1rem);
		--fontSize14: calc(14 / var(--fontSizeBaseSp) * 1rem);
		--fontSize15: calc(15 / var(--fontSizeBaseSp) * 1rem);
		--fontSize16: calc(16 / var(--fontSizeBaseSp) * 1rem);
		--fontSize17: calc(17 / var(--fontSizeBaseSp) * 1rem);
		--fontSize18: calc(18 / var(--fontSizeBaseSp) * 1rem);
		--fontSize19: calc(19 / var(--fontSizeBaseSp) * 1rem);
		--fontSize20: calc(20 / var(--fontSizeBaseSp) * 1rem);
		--fontSize21: calc(21 / var(--fontSizeBaseSp) * 1rem);
		--fontSize22: calc(22 / var(--fontSizeBaseSp) * 1rem);
		--fontSize23: calc(23 / var(--fontSizeBaseSp) * 1rem);
		--fontSize24: calc(24 / var(--fontSizeBaseSp) * 1rem);
		--fontSize25: calc(25 / var(--fontSizeBaseSp) * 1rem);
		--fontSize26: calc(26 / var(--fontSizeBaseSp) * 1rem);
		--fontSize27: calc(27 / var(--fontSizeBaseSp) * 1rem);
		--fontSize28: calc(28 / var(--fontSizeBaseSp) * 1rem);
		--fontSize29: calc(29 / var(--fontSizeBaseSp) * 1rem);
		--fontSize30: calc(30 / var(--fontSizeBaseSp) * 1rem);
		--fontSize31: calc(31 / var(--fontSizeBaseSp) * 1rem);
		--fontSize32: calc(32 / var(--fontSizeBaseSp) * 1rem);
		--fontSize33: calc(33 / var(--fontSizeBaseSp) * 1rem);
		--fontSize34: calc(34 / var(--fontSizeBaseSp) * 1rem);
		--fontSize35: calc(35 / var(--fontSizeBaseSp) * 1rem);
		--fontSize36: calc(36 / var(--fontSizeBaseSp) * 1rem);
		--fontSize37: calc(37 / var(--fontSizeBaseSp) * 1rem);
		--fontSize38: calc(38 / var(--fontSizeBaseSp) * 1rem);
		--fontSize39: calc(39 / var(--fontSizeBaseSp) * 1rem);
		--fontSize40: calc(40 / var(--fontSizeBaseSp) * 1rem);
		--fontSize41: calc(41 / var(--fontSizeBaseSp) * 1rem);
		--fontSize42: calc(42 / var(--fontSizeBaseSp) * 1rem);
		--fontSize43: calc(43 / var(--fontSizeBaseSp) * 1rem);
		--fontSize44: calc(44 / var(--fontSizeBaseSp) * 1rem);
		--fontSize45: calc(45 / var(--fontSizeBaseSp) * 1rem);
		--fontSize46: calc(46 / var(--fontSizeBaseSp) * 1rem);
		--fontSize47: calc(47 / var(--fontSizeBaseSp) * 1rem);
		--fontSize48: calc(48 / var(--fontSizeBaseSp) * 1rem);
		--fontSize49: calc(49 / var(--fontSizeBaseSp) * 1rem);
		--fontSize50: calc(50 / var(--fontSizeBaseSp) * 1rem);
	}
}
/* ******************************************************************************************
	ベースフォント設定
****************************************************************************************** */
html{
	font-size: calc(var(--fontSizeBase) * 1px);/* px単位追加 */
}
@media screen and (max-width:576px){
	html{
		font-size: calc(var(--fontSizeBaseSp) * 1px);/* px単位追加 */
	}	
}
/* ******************************************************************************************
	body設定
****************************************************************************************** */
body{
	/* 文字色設定 */
	color: var(--black);
	/* 行間設定 */
	line-height: 1.5;
	/* 間隔設定 */
	letter-spacing: 0.02em;
	/* フォント設定 */
	font-family: "Noto Sans JP", sans-serif;
	/* font-weight: 400; */
	/* デフォルト設定 */
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
	word-break: break-word;
	overflow-wrap: break-word;
	/* フッター浮き上がり防止 */
	display: flex;/* フッター浮き上がり防止 */
	flex-direction: column;/* フッター浮き上がり防止 */
	min-height: 100vh;/* フッター浮き上がり防止 */
}
main{
	flex: 1; /* フッター浮き上がり防止（メインが余白を埋める） */
}
/* ******************************************************************************************
	テキスト設定
****************************************************************************************** */
/* pの中にrubyがあれば余白をあける */
p:has(>ruby){
	line-height: 2;
}
/* ******************************************************************************************
	画像設定
****************************************************************************************** */
img{
	vertical-align: bottom;/* 余白防止 */
	max-width: 100%;/* 画像のデフォルトサイズ */
	height: auto;
	object-fit: cover;
}
/* ******************************************************************************************
	フォーム設定（適宜設定）
****************************************************************************************** */
select{
	-webkit-appearance: auto;
	appearance: auto; /* デフォルトの矢印を表示 */
}
select:hover{
	cursor: pointer;
}
input{
	border: 1px solid rgb(0 0 0 / 20%);
}
[type="button"], [type="reset"], [type="submit"]{
	padding: 0 .5em;
	border: none;
	background-color: var(--mainColor);
	color: var(--black);
	cursor: pointer;
}
/* ******************************************************************************************
	リンク設定
****************************************************************************************** */
a{
	display: inline-block;
	color: var(--black);
	text-decoration: underline;
	text-underline-offset: .2rem;
	text-decoration-thickness: 1px;
	text-decoration-skip-ink: none;
}
a:hover, a:focus{
	text-underline-offset: .2rem;
	opacity: .6;
}
/* 色設定 */
/* a{
	color: #003399;
	text-decoration: underline;
	position: relative;
}
a:visited {
    color: #800080;
}
a:hover {
    color: #0000CC;
}
a:active {
    color: #FF0000;
} */
/* ******************************************************************************************
	フォーカス設定
****************************************************************************************** */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}
/* ******************************************************************************************
	リスト設定
****************************************************************************************** */
ol{
	list-style: decimal;/* リセットCSS打ち消し */
}
/* ******************************************************************************************
	電話番号設定（576px以下タップ有効化）
****************************************************************************************** */
/* タップ電話 */
a[href^="tel:"]{
	display: inline-block;
	text-decoration: none;
	pointer-events: none;
	color: var(--black);
}
@media screen and (max-width:576px){
	a[href^="tel:"]{
		text-decoration: underline;
		cursor: pointer;
		pointer-events: auto;
		/* フォントサイズを変更する場合適宜修正 */
		/* font-size: 1.2rem; */
	}
}
/* ******************************************************************************************
	サイト幅設定（適宜設定）
****************************************************************************************** */
.ly_inner{
	width: 100%;
	max-width: calc(1000px + 20px);/* 基準幅 + 両padding余白分 */
	margin-right: auto;
	margin-left: auto;
	padding-right: 10px;
	padding-left: 10px;
}
.ly_innerWide{
	width: 100%;
	max-width: calc(1200px + 20px);/* 基準幅 + 両padding余白分 */
	margin-right: auto;
	margin-left: auto;
	padding-right: 10px;
	padding-left: 10px;
}
/* ******************************************************************************************
	サイト区切り設定（必要に応じて設定）
****************************************************************************************** */
.ly_section{
	padding-top: 3rem;
	padding-bottom: 3rem;
}
/* ******************************************************************************************
	見出し設定
****************************************************************************************** */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	アイコン付き文章
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.el_iconText{
	padding-left: calc(50px + 15px);/* アイコン幅 + 余白 */
	font-size: var(--fontSize24);
	font-weight: bold;
	color: var(--black);
	position: relative;
}
.el_iconText::before{
	content: '';
	display: block;
	width: 50px;
	aspect-ratio: 1/1;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.el_iconText.el_iconText__bus::before{
	background-image: url("../img/common/icon-bus.png");
}
.el_iconText.el_iconText__parking::before{
	background-image: url("../img/common/icon-p.png");
}
.el_iconText.el_iconText__download::before{
	background-image: url("../img/common/icon-download.png");
}
@media screen and (max-width:576px){
	.el_iconText{
		font-size: var(--fontSize20);
		padding-left: calc(35px + 10px);/* アイコン幅 + 余白 */
	}
	.el_iconText::before{
		width: 35px;
	}
}
/* ////////////////////////////////////////////////////////////////////////////////////////////////////
	ヘッダー
//////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ******************************************************************************************
	レイアウト
****************************************************************************************** */
.ly_header{
	width: 100%;
	max-width: calc(1200px + 20px);/* 基準幅 + 両padding余白分 */
	margin-right: auto;
	margin-left: auto;
	padding-top: 20px;
	padding-bottom: 30px;
	padding-right: 10px;
	padding-left: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
@media screen and (max-width:992px){
	.ly_header{
		padding-top: 15px;
	}
}
/* ******************************************************************************************
	ロゴタイトル
****************************************************************************************** */
.bl_companyTitleArea a{
	font-size: var(--fontSize26);
	color: var(--mainColorDark);
	font-weight: bold;
	text-decoration: none;
}
@media screen and (max-width:576px){
	.bl_companyTitleArea a{
		font-size: var(--fontSize24);
	}
}
/* ******************************************************************************************
	グローバルメニュー
****************************************************************************************** */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	全体
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.bl_gNavUnit{
	display: flex;
	justify-content: flex-end;
}
@media screen and (max-width:992px){
	.bl_gNav_area{
		position: fixed;
		top: 0;
		right: -100%;
		overflow: auto;
		transition: .4s;
		width: 100%;
		background-color: aliceblue;
		height: 100vh;
		visibility: hidden;
		padding: calc(60px + 20px) 20px 20px;/* calc(ハンバーガーメニュー高さ分 + 余白) */
		z-index: 3;
	}
	.is_active .bl_gNav_area{
		right: 0;
		visibility: visible;
	}
	.bl_gNav.is_open{
		left: 0;
		transition: all .6s;
	}
	.bl_gNav{
		overflow-x: hidden;
		overflow-y: auto;
		transition: all .6s;
		width: 100%;
	}
	.bl_gNavUnit{
		display: block;
		margin-bottom: 2rem;
	}
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	個別
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ======================================================================
	グローバルメニューのリスト
====================================================================== */
.bl_gNav_item{
	position: relative;
}
.bl_gNav_item + .bl_gNav_item::before{
	content: '';
	display: block;
	width: 1px;
	height: 15px;
	background-color: var(--black);
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.bl_gNav_link{
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all .3s;
	padding: 0.3rem 0.7rem;
	font-size: 1.1rem;
	color: var(--black);
	font-weight: bold;
	letter-spacing: 2px;
	text-decoration: none;
}
.bl_gNav_link:is(:hover,:focus){
	opacity: 1;
}

.bl_gNav_link::before{
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom: -5px;
	height: 2px;
	width: 0%;
	background-color: var(--mainColor);
	transition: width 0.4s ease;
}
.bl_gNav_link:hover::before,.bl_gNav_link:focus::before{
	width: 100%;
}
.is_active .bl_gNav_link::before{
	content: none;
}

.bl_gNav_link:hover, .bl_gNav_link:focus{
	opacity: 1;
}
/* ------------------------------------------------------------
	子リスト
------------------------------------------------------------ */
@media screen and (min-width:992px){
	.bl_gNav_item_child {
		display: grid;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
		position: absolute;
		left: 0;
		max-width: 1000px;
		width: 100%;
		background-color: #5eb0ad;
		border-radius: 30px;
		padding: 30px;
	}
	.bl_gNav_item_child.is-open {
		opacity: 1;
		visibility: visible;
	}
	.bl_gNav_item_child > li{
		padding: 30px;
		aspect-ratio: 1/1;
		background-color: #fff;
		box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	}
}
@media screen and (max-width:992px){
	.bl_gNav_item{
		width: 100%;
	}
	.bl_gNav_item + .bl_gNav_item::before{
		content: none;
	}

	.bl_gNav_link{
		position: relative;
		display: block;
		padding: 1rem;
		border-bottom: 1px solid #ccc;
	}
	.bl_gNav_link::after{
		content: "";
		position: absolute;
		top: 50%;
		right: 10px;
		transform: translateY(-50%);
		border: 5px solid transparent;
		border-left: 8px solid var(--mainColorDark);
		transition: .2s;
	}
	.bl_gNav_link:hover::after,.bl_gNav_link:focus::after{
		right: 7px;
		transition: .2s;
	}
}
/* ============================================================
	ハンバーガーメニュー
============================================================ */
/* フォーカストラップ非表示 */
#js_focusTrapFirst,#js_focusTrapEnd{
	display: none;
}
.el_trigger{
	display: none;
}
@media screen and (max-width:992px){
	/* ハンバーガーメニューオープン時のみフォーカストラップ有効化 */
	.is_active #js_focusTrapFirst,.is_active #js_focusTrapEnd{
		display: block;
	}
	.el_trigger{
		display: block;
		position: fixed;
		top: 10px;
		right: 10px;
		transition: .2s;
		width: 50px;
		height: 50px;
		margin: 0;
		background-color: var(--mainColorDark);
		cursor: pointer;
		border-radius: 5px;
		z-index: 1000;
	}
	.is_active .el_trigger .el_trigger_line{
		background-color: transparent;
	}
	.is_active .el_trigger .el_trigger_line::before{
		top: 0;
		transform: rotate(45deg);
	}
	.is_active .el_trigger .el_trigger_line::after{
		top: 0;
		transform: rotate(-45deg);
	}
	/* .is_active .el_trigger .el_trigger_text::before{
		content: "閉じる";
	} */
	.el_trigger_line{
		display: block;
		position: absolute;
		top: 23px;
		left: 50%;
		transform: translateX(-50%);
		transition: .4s;
		width: 35px;
		height: 4px;
		border-radius: 5px;
		background-color: #fff;
	}
	.el_trigger_line::before, .el_trigger_line:after{
		content: "";
		display: block;
		position: absolute;
		transition: inherit;
		width: 100%;
		height: 100%;
		background-color: #fff;
		border-radius: 999px;
	}
	.el_trigger_line::before{
		top: -10px;
	}
	.el_trigger_line:after{
		top: 10px;
	}
	.el_trigger_text{
		position: absolute;
		bottom: 5px;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		text-align: center;
	}
	/* .el_trigger_text::before{
		content: "メニュー";
		color: #fff;
		font-weight: bold;
		font-size: 13px;
	} */
}
/* ////////////////////////////////////////////////////////////////////////////////////////////////////
	トップページ
//////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ******************************************************************************************
	メインビジュアル
****************************************************************************************** */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	レイアウト
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.ly_mvContainer{
	margin-bottom: 80px;
	display: flex;
	flex-direction: column;
	gap: 80px;
}
@media screen and (max-width:576px){
	.ly_mvContainer{
		gap: 40px;
		margin-bottom: 40px;
	}
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	キャッチフレーズエリア
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.bl_catchphraseText{
	text-align: center;
	color: var(--navy);
	font-weight: bold;
	font-size: var(--fontSize20);
	line-height: 2;
}
@media screen and (max-width:576px){
	.bl_catchphraseText{
		font-size: var(--fontSize16);
		max-width: 320px;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	メインコンテンツ画像
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.ly_mainContentIntro{
	margin-bottom: 100px;
}
@media screen and (max-width:576px){
	.ly_mainContentIntro{
		margin-bottom: 50px;
	}
}
/* ******************************************************************************************
	ボタンエリア
****************************************************************************************** */
.ly_btnArea{
	display: flex;
	gap: 45px 60px;
	width: 100%;
    max-width: calc(1000px + 20px);
    margin-right: auto;
    margin-left: auto;
    padding-right: 10px;
	padding-left: 10px;
	margin-bottom: 100px;
	justify-content: center;
}
.bl_iconBtn{
	position: relative;
	background-color: var(--mainColorDark);
	color: #fff;
	font-weight: bold;
	font-size: var(--fontSize24);
	border-radius: 999px;
	padding: 15px 20px 15px calc(80px + 20px);/* calc(アイコン幅 + 余白） */
    max-width: 360px;
    width: 100%;
	text-decoration: none;
}
.bl_iconBtn::before{
	content: '';
	display: block;
	width: 80px;
	aspect-ratio: 1/1;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.bl_iconBtn.bl_iconBtn__building::before{
	background-image: url(../img/common/icon-building.png);
}
.bl_iconBtn.bl_iconBtn__parking::before{
	background-image: url(../img/common/icon-parking.png);
}
@media screen and (max-width:768px){
	.ly_btnArea{
		flex-direction: column;
		align-items: center;
	}
	.bl_iconBtn{
		padding: 10px 20px 10px calc(70px + 20px);/* calc(アイコン幅 + 余白） */
		font-size: var(--fontSize20);
		max-width: 300px;
	}
	.bl_iconBtn::before{
		width: 70px;
	}
}
@media screen and (max-width:576px){
	.ly_btnArea{
		margin-bottom: 50px;
	}
}
/* ******************************************************************************************
	CMS入力部分
****************************************************************************************** */
.ly_mainContentDetails{
	margin-bottom: 50px;/* st_editorネガティブマージン相殺 + 余白 */
}
/* ******************************************************************************************
	アクセス
****************************************************************************************** */
/* トップページのgooglemap高さをコンテンツに合わせる */
.home .cms_media{
	height: 100%;
}
@media screen and (max-width:781px){
	.home .st_editor .wp-block-columns.is-layout-flex{
		gap: 30px;
	}
}
/* ////////////////////////////////////////////////////////////////////////////////////////////////////
	お知らせ一覧
//////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ******************************************************************************************
	中身
****************************************************************************************** */
/* ======================================================================
	日付、カテゴリ、タイトルリンク
====================================================================== */
/* ------------------------------------------------------------
	グリッド・エリア定義
------------------------------------------------------------ */
.grid_informationUnit_item{
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: auto 115px 1fr;
	grid-template-areas: " area_informationUnit_item_date area_informationUnit_item_cat area_informationUnit_item_cont";
	gap: 20px;
	align-items: center;
}
@media screen and (max-width:768px){
	.grid_informationUnit_item{
		grid-template-rows: 1fr auto;
		grid-template-columns: auto 1fr;
		grid-template-areas: 
		"area_informationUnit_item_date area_informationUnit_item_cat"
		"area_informationUnit_item_cont area_informationUnit_item_cont";
		gap: 5px 0;
	}
}
.area_informationUnit_item_date{
	grid-area: area_informationUnit_item_date;
}
.area_informationUnit_item_cat{
	grid-area: area_informationUnit_item_cat;
}
.area_informationUnit_item_cont{
	grid-area: area_informationUnit_item_cont;
}
/* ------------------------------------------------------------
	全体
------------------------------------------------------------ */
.bl_informationUnit_item{
	padding: 20px 16px;
}
.bl_informationUnit_item + .bl_informationUnit_item{
	border-top: 1px dotted #6D6D6D;
}
@media screen and (max-width:768px){
	.bl_informationUnit_item{
		padding: 20px 0 20px 0;
	}
}
/* ------------------------------------------------------------
	日付
------------------------------------------------------------ */
.bl_informationUnit_item_date{
	display: flex;
	align-items: center;
	width: 130px;
	/* padding: 1rem 0; */
	white-space: nowrap;
}
@media screen and (max-width:576px){
	.bl_informationUnit_item_date{
		width: 100%;
		max-width: 140px;
		margin-right: 10px;
	}
}
/* ------------------------------------------------------------
	カテゴリ
------------------------------------------------------------ */
.bl_informationUnit_item_cat{
	display: inline-block;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.el_cat{
    max-width: 110px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 5px;
	background-color: var(--mainColor);
    font-weight: 500;
    font-size: var(--fontSize13);
    text-decoration: none;
	border-radius: 999px;
}
@media screen and (max-width:576px){
	.el_cat{
		max-width: 100px;
		font-size: var(--fontSize12);
		line-height: 1.5;
	}
}
/* ------------------------------------------------------------
	タイトルリンク
------------------------------------------------------------ */
.bl_informationUnit_item_cont > a{
	display: inline-block;
}
@media screen and (max-width:768px){
	.bl_informationUnit_item_cont > a{
		padding: 0;
	}
}
/* ******************************************************************************************
	詳細ページ
****************************************************************************************** */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	タイトル
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.bl_newsTitleArea{
	margin-bottom: 50px;
}
.bl_newsTitleArea h1{
	font-size: var(--fontSize32);
	font-weight: bold;
	text-align: center;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	カテゴリと日付
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.bl_newsDateCatWrap{
	display: flex;
	justify-content: right;
	gap: 20px;
	margin-bottom: 30px;
}
/* ////////////////////////////////////////////////////////////////////////////////////////////////////
	フッター
//////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ******************************************************************************************
	フッター関係
****************************************************************************************** */
.ly_footer{
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: rgb(131 204 210 / 24%);
	margin-top: 3rem;
}
.bl_footerContent{
	text-align: center;
}
@media screen and (max-width:576px){
	.ly_footer{
		padding-right: calc(50px + 10px);
	}
	.un_footerTextSpBold{
		font-weight: bold;
	}
	footer address{
		margin-bottom: 10px;
	}
}
/* ******************************************************************************************
	トップへ戻るボタン
****************************************************************************************** */
.bl_pageTop{
	position: fixed;
	right: 10px;
	bottom: 10px;
	opacity: 0;               
	/* 初期は非表示 */
	pointer-events: none;     
	/* 非表示時はクリック不可 */
	transition: opacity 0.3s ease;
	background-color: var(--mainColorDark);
	width: 50px;
	height: 50px;
	border-radius: 50%;
}
.bl_pageTop::before{
	content: "";
	position: absolute;
	top: 24px;
	left: calc(50% - 1px);
	width: 15px;
	height: 4px;
	background-color: #ffffff;
	border-radius: 3px;
	transform: translate(-75%, -50%) rotate(-45deg);
}
.bl_pageTop::after{
	content: "";
	position: absolute;
	top: 24px;
	left: calc(50% + 1px);
	width: 15px;
	height: 4px;
	background-color: #ffffff;
	border-radius: 3px;
	transform: translate(-25%, -50%) rotate(45deg);
}
.bl_pageTop.js_showStyle {
	opacity: 1;               /* 表示時はふわっと見える */
	pointer-events: auto;     /* 表示時はクリック可能 */
}
/* ////////////////////////////////////////////////////////////////////////////////////////////////////
	セカンドトップタイトル
//////////////////////////////////////////////////////////////////////////////////////////////////// */
.ly_pageHeader{
	display: flex;
    justify-content: center;
}
.el_title_circleDots{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0px;
	border-radius: 999px;
	border: 1px solid var(--black);
	max-width: 270px;
	width: 100%;
	aspect-ratio: 1/1;
	font-size: var(--fontSize32);
	font-weight: bold;
	text-align: center;
	line-height: 1.3;
}
.el_title_circleDots span{
	position: relative;
	display: inline-block;
}
.el_title_circleDots span::before{
	content: '';
	display: block;
	width: 65px;
	aspect-ratio: 200/56;
	background-image: url(../img/common/icon-dots.png);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
}
@media screen and (max-width:576px){
	.el_title_circleDots{
		max-width: 200px;
	}
	.el_title_circleDots{
		font-size: var(--fontSize24);
	}
	.el_title_circleDots span::before{
		width: 50px;
		top: -20px;
	}
}
/* ////////////////////////////////////////////////////////////////////////////////////////////////////
	印刷用スタイル
//////////////////////////////////////////////////////////////////////////////////////////////////// */
@media print{
	body{
		/* 背景色反映のため */
		-webkit-print-color-adjust: exact;
	}
}