@charset "utf-8";

/*
	* 顧客オリジナルスタイルシート
	* サイト全体に関するスタイル
	* ver1
	* Copyright (C) ●●など
	* 更新履歴
		└ 
*/
/* ////////////////////////////////////////////////////////////////////////////////////////////////////
	初期設定（不要なものは削除）
//////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ******************************************************************************************
	root設定（適宜修正）（フォントはベースフォント外を削除してください。）
****************************************************************************************** */
:root{
	--black: #0b0b0b;
	--mainColor: #F9BEA8;
	--mainColor_dark: #fc9175;
	--mainColor_light: #ffefeb;
	--mainColor_gradient: linear-gradient(0deg,rgba(252, 151, 124, 1) 0%, rgba(249, 193, 172, 1) 100%);
	--accentColor: #29ABE2;
	--accentColor_gradient: linear-gradient(0deg,rgba(41, 171, 226, 1) 0%, rgba(133, 212, 238, 1) 100%);
	--accentColor_light: #7ED2ED;
	--subColor: #FFFBEB;
	--subColor_gradient: linear-gradient(180deg,rgba(249, 237, 165, 1) 0%, rgba(255, 251, 235, 1) 500px, rgba(255, 251, 235, 0) 100%);
	--subColor_dark: #f9eda5;
	/* --accentColor_light: #FFFBEB; */

	/* ベースフォント18pxの場合 */
	--fontSize10: 0.555rem;
	--fontSize11: 0.611rem;
	--fontSize12: 0.666rem;
	--fontSize13: 0.722rem;
	--fontSize14: 0.777rem;
	--fontSize15: 0.833rem;
	--fontSize16: 0.888rem;
	--fontSize17: 0.944rem;
	--fontSize18: 1rem;
	--fontSize19: 1.055rem;
	--fontSize20: 1.111rem;
	--fontSize21: 1.166rem;
	--fontSize22: 1.222rem;
	--fontSize23: 1.277rem;
	--fontSize24: 1.333rem;
	--fontSize25: 1.388rem;
	--fontSize26: 1.444rem;
	--fontSize27: 1.5rem;
	--fontSize28: 1.555rem;
	--fontSize29: 1.611rem;
	--fontSize30: 1.666rem;
	--fontSize31: 1.722rem;
	--fontSize32: 1.777rem;
	--fontSize33: 1.833rem;
	--fontSize34: 1.888rem;
	--fontSize35: 1.944rem;
	--fontSize36: 2rem;
	--fontSize37: 2.055rem;
	--fontSize38: 2.111rem;
	--fontSize39: 2.166rem;
	--fontSize40: 2.222rem;
	--fontSize41: 2.277rem;
	--fontSize42: 2.333rem;
	--fontSize43: 2.388rem;
	--fontSize44: 2.444rem;
	--fontSize45: 2.5rem;
	--fontSize46: 2.555rem;
	--fontSize47: 2.611rem;
	--fontSize48: 2.666rem;
	--fontSize49: 2.722rem;
	--fontSize50: 2.777rem;

	/* 基準幅設定 */
	--vw-base: 1920;
}
@media screen and (max-width:576px){
	:root{
		/* ベースフォントが14pxの場合 */
		--fontSize10: 0.714rem;
		--fontSize11: 0.786rem;
		--fontSize12: 0.857rem;
		--fontSize13: 0.929rem;
		--fontSize14: 1rem;
		--fontSize15: 1.071rem;
		--fontSize16: 1.143rem;
		--fontSize17: 1.214rem;
		--fontSize18: 1.286rem;
		--fontSize19: 1.357rem;
		--fontSize20: 1.429rem;
		--fontSize21: 1.5rem;
		--fontSize22: 1.571rem;
		--fontSize23: 1.643rem;
		--fontSize24: 1.714rem;
		--fontSize25: 1.786rem;
		--fontSize26: 1.857rem;
		--fontSize27: 1.929rem;
		--fontSize28: 2rem;
		--fontSize29: 2.071rem;
		--fontSize30: 2.143rem;
		--fontSize31: 2.214rem;
		--fontSize32: 2.286rem;
		--fontSize33: 2.357rem;
		--fontSize34: 2.429rem;
		--fontSize35: 2.5rem;
		--fontSize36: 2.571rem;
		--fontSize37: 2.643rem;
		--fontSize38: 2.714rem;
		--fontSize39: 2.786rem;
		--fontSize40: 2.857rem;
		--fontSize41: 2.929rem;
		--fontSize42: 3rem;
		--fontSize43: 3.071rem;
		--fontSize44: 3.143rem;
		--fontSize45: 3.214rem;
		--fontSize46: 3.286rem;
		--fontSize47: 3.357rem;
		--fontSize48: 3.429rem;
		--fontSize49: 3.5rem;
		--fontSize50: 3.571rem;
	}
}
/* ******************************************************************************************
	ベースフォント設定
****************************************************************************************** */
html{
	font-size: 18px;/* ベースフォント */
}
@media screen and (max-width:576px){
	html{
		font-size: 14px;/* ベースフォント */
	}
}
/* ******************************************************************************************
	body設定
****************************************************************************************** */
body{
	min-height: 100vh;/* フッター浮き上がり対策 */
	/* background-image: var(--subColor_gradient); */
	background-image: linear-gradient(180deg,rgba(249, 237, 165, 1) 0%, rgba(255, 251, 235, 1) 300px, rgba(255, 251, 235, 0) 500px);
	color: var(--black);
	line-height: 1.5;
	font-family: "Noto Sans JP", sans-serif;
	-webkit-text-size-adjust: 100%;
	   -moz-text-size-adjust: 100%;
	    -ms-text-size-adjust: 100%;
	        text-size-adjust: 100%;
	border: 5px solid var(--mainColor);
}
body.home{
	background-image: linear-gradient(180deg,rgba(249, 237, 165, 1) 0%, rgba(255, 251, 235, 1) 500px, rgba(255, 251, 235, 0) 600px);
}
/* ******************************************************************************************
	テキスト設定
****************************************************************************************** */
/* 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;
}
a:hover, a:focus{
	opacity: .6;
}
/* ******************************************************************************************
	フォーカス設定
****************************************************************************************** */
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;
	cursor: pointer;
}
/* @media screen and (max-width:576px){
	a[href^="tel:"]{
		text-decoration: underline;
		cursor: pointer;
		pointer-events: auto;
	}
} */
/* ******************************************************************************************
	サイト幅設定（適宜設定）
****************************************************************************************** */
.ly_inner{
	width: 100%;
	max-width: calc(950px + 20px);/* 基準幅 + 両padding余白分 */
	margin-right: auto;
	margin-left: auto;
	padding-right: 10px;
	padding-left: 10px;
}
/* ******************************************************************************************
	サイト区切り設定（必要に応じて設定）
****************************************************************************************** */
.ly_section{
	padding-top: 3rem;
	padding-bottom: 3rem;
}
/* ******************************************************************************************
	見出し設定
****************************************************************************************** */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	グラデーション > 青
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.el_gradientTitle_blue{
	padding: 5px 10px;
	background-image: var(--accentColor_gradient);
	font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
    font-size: var(--fontSize20);
	color: #fff;
	border-radius: 5px;
	margin-bottom: 10px;
}
/* お知らせ、固定の詳細ページ */
.single .el_gradientTitle_blue,
.page .el_gradientTitle_blue{
	margin-bottom: 20px;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	グラデーション > ピンク
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.el_gradientTitle_pink{
	padding: 5px 10px;
	background-image: var(--mainColor_gradient);
	font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
    font-size: var(--fontSize20);
	color: #fff;
	border-radius: 5px;
	margin-bottom: 10px;
}
/* ******************************************************************************************
	パーツ
****************************************************************************************** */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	ボタン
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.el_btn_base{
	padding: 5px calc(20px + 10px + 30px) 5px 30px;/* アイコン幅 + 移動距離 + 余白 */
	position: relative;
	box-shadow: 0 0 5px rgb(0 0 0 / 20%);
	border-radius: 999px;
	/* font-size: var(--fontSize20); */
	text-decoration: none;
	font-weight: 500;
	color: var(--accentColor);
	display: flex;
	/* justify-content: center; */
	/* align-items: center; */
	width: max-content;    /* 内容幅に合わせる */
    margin: 0 auto;        /* 中央寄せ */
}
.el_btn_base::after{
	content: '\f0a9';
	font-family: 'Font Awesome 5 Free';
	font-weight: bold;
	font-size: 20px;
	line-height: 1;
	color: var(--accentColor);
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
}
.el_btn_base.el_btn_base__fillPink{
	background-image: var(--mainColor_gradient);
	color: #fff;
}
.el_btn_base.el_btn_base__fillPink::after{
	color: #fff;
}
/* ////////////////////////////////////////////////////////////////////////////////////////////////////
	レイアウト
//////////////////////////////////////////////////////////////////////////////////////////////////// */
.ly_containerWrap{
	display: flex;
	gap: 30px;
	width: 100%;
    max-width: calc(950px + 20px);
    margin-right: auto;
    margin-left: auto;
	padding-top: 20px;
	padding-bottom: 30px;
    padding-right: 10px;
    padding-left: 10px;
	align-items: start;
}
main{
	width: 100%;
	box-shadow: 0 0 3px rgb(0 0 0 / 30%);
	padding: 15px 15px 30px;
	background-color: #fff;
	border-radius: 3px;
}
main:has(+.ly_sideBar){
	width: 70%;
}
.ly_sideBar{
	width: 30%;
	background-color: var(--subColor);
	padding: 10px;
}
@media screen and (max-width:992px){
	.ly_containerWrap{
		flex-direction: column;
	}
	main:has(+.ly_sideBar){
		width: 100%;
	}
	.ly_sideBar{
		width: 100%;
	}
}
/* ////////////////////////////////////////////////////////////////////////////////////////////////////
	ヘッダー
//////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ******************************************************************************************
	レイアウト
****************************************************************************************** */
.ly_header{
	background-color: #fff;
}
.bl_headerWrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px 10px;
	width: 100%;
    max-width: calc(950px + 20px);
    margin-right: auto;
    margin-left: auto;
	padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
	align-items: center;
	margin-bottom: 20px;
}
@media screen and (max-width:992px){
	.bl_headerWrap{
		flex-direction: column;
		justify-content: center;
	}
}
/* ******************************************************************************************
	グローバルメニュー
****************************************************************************************** */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	個別メニュー
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.bl_gNavArea{
	background-color: var(--mainColor_light);
	padding: 10px 0 0;
	border-bottom: 3px solid var(--mainColor_dark);
}
.bl_gNavLink{
	text-decoration: none;
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 500;
	font-size: var(--fontSize20);
	padding: 5px 30px 8px;
	color: var(--mainColor_dark);
	border-radius: 3px 3px 0 0;
}
.bl_gNavLink:hover,.bl_gNavLink:focus{
	background-color: var(--mainColor_dark);
	color: #fff;
	opacity: 1;
}
@media screen and (max-width:992px){
	.bl_gNavArea{
		padding-top: 0;
		padding: 20px 5px;
		border-bottom: none;
	}
	.bl_gNavLink{
		/* background-color: var(--mainColor_dark); */
		color: #fff;
		width: 100%;
		padding: 10px 5px;
		font-size: var(--fontSize18);
	}
	.bl_gNavItem{
		text-align: center;
		background-color: var(--mainColor_dark);
		border-radius: 3px;
		display: flex;
		align-items: center;
	}
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	グリッド
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.grid_gNav{
	display: grid;
	grid-template-columns: max-content max-content max-content max-content max-content;
	grid-template-rows: auto;
	grid-template-areas:
	"area_outline area_activity area_join area_aboutUs area_link";
	justify-content: center;
}
.area_outline{
	grid-area: area_outline;
}
.area_activity{
	grid-area: area_activity;
}
.area_join{
	grid-area: area_join;
}
.area_aboutUs{
	grid-area: area_aboutUs;
}
.area_link{
	grid-area: area_link;
}
@media screen and (max-width:992px){
	.grid_gNav{
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
		"area_outline area_outline"
		"area_activity area_join"
		"area_aboutUs area_link";
		background-color: var(--mainColor_light);
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
		gap: 10px;
	}
}
/* ******************************************************************************************
	サイト名
****************************************************************************************** */
.bl_companyTitle{
	margin-bottom: 10px;
}
.bl_companyTitle_link{
	text-decoration: none;
	color: #003d66;
}
.bl_companyTitle_sub{
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: var(--fontSize21);
	font-weight: 700;
}
.bl_companyTitle_main{
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: var(--fontSize32);
	font-weight: 600;
}
@media screen and (max-width:576px){
	.bl_companyTitle{
		display: inline-block;
		margin-bottom: 10px;
	}
	.bl_companyTitle_link{
		text-decoration: none;
		color: #003d66;
		display: flex;
		flex-direction: column;
		line-height: 1.2;
	}
	.bl_companyTitle_sub{
		font-size: var(--fontSize18);
	}
	.bl_companyTitle_main{
		font-size: var(--fontSize24);
	}
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	キャッチフレーズ
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.bl_companyCatchphrase{
	font-size: var(--fontSize15);
	color: #4d4d4d;
	font-weight: 500;
}
/* ******************************************************************************************
	お問い合わせ
****************************************************************************************** */
.bl_companyContactBox{
	display: flex;
	border: 2px solid var(--mainColor_dark);
	border-radius: 5px;
}
.bl_companyContactTitle{
	padding: 5px 35px;
	background-color: var(--mainColor_dark);
	color: #fff;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bl_companyContactNum{
	padding: 5px 35px;
	font-size: var(--fontSize22);
	font-weight: bold;
	color: #454545;
	text-decoration: none;
}
@media screen and (max-width:576px){
	.bl_companyContactBox{
		flex-direction: column;
	}
	.bl_companyContactTitle{
		font-size: var(--fontSize18);
		font-weight: 500;
	}
}
/* ////////////////////////////////////////////////////////////////////////////////////////////////////
	メインビジュアル
//////////////////////////////////////////////////////////////////////////////////////////////////// */
.bl_mvArea{
	margin-top: 20px;
}
.bl_mvImg{
	border: 5px solid #fff;
	box-shadow: 0 0 3px rgb(0 0 0 / 30%);
	border-radius: 4px;
}
.bl_mvCatchphrase{
	position: absolute;
	left: 30px;
	bottom: 25px;
}
@media screen and (max-width:768px){
	.bl_mvCatchphrase{
		width: 40vw;
	}
}
/* ////////////////////////////////////////////////////////////////////////////////////////////////////
	新着情報
//////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ******************************************************************************************
	レイアウト
****************************************************************************************** */
.bl_newsList{
	display: flex;
	flex-direction: column;
}
/* ******************************************************************************************
	個別リスト
****************************************************************************************** */
/* 日時 */
.bl_newsList_time{
	display: block;
}
/* リスト */
.bl_newsList_item{
	padding: 10px 0;
}
.bl_newsList_item{
	border-bottom: dotted 1px #ddd;
}
/* リンク */
.bl_newsList_linkArea{
	position: relative;
	padding-left: 25px;
}
.bl_newsList_link{
	display: block;
}
.bl_newsList_link+.fileInfo{
	display: none;
}
.bl_newsList_link{
	color: #003399;/* 未訪問リンク */
	text-decoration: underline;
	position: relative;/* pdf等アイコンの基準設定 */
}
.bl_newsList_link:visited {
    color: #800080; /* 訪問済みリンク */
}
.bl_newsList_link:hover {
    color: #0000CC; /* ホバー */
}
.bl_newsList_link:active {
    color: #FF0000; /* クリック中 */
}
.bl_newsList_linkArea::before{
	content: '\f0a9';
	font-family: 'Font Awesome 5 Free';
	font-weight: bold;
	font-size: 1rem;
	line-height: 1;
	position: absolute;
	top: 5px;
	left: 0;
	color: var(--accentColor);
}
.bl_newsList_linkArea__iconPdf::before{
	content: '';
	width: 16px;
	height: 16px;
	background-image: url(../img/common/icon-pdf.gif);
}
/* ////////////////////////////////////////////////////////////////////////////////////////////////////
	フッター
//////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ******************************************************************************************
	レイアウト
****************************************************************************************** */
footer{
	border-top: 3px solid var(--mainColor_dark);
}
.ly_footerInner{
	width: 100%;
    max-width: calc(950px + 20px);
    margin-right: auto;
    margin-left: auto;
	padding-top: 20px;
	padding-bottom: 20px;
    padding-right: 10px;
    padding-left: 10px;
}
/* ******************************************************************************************
	法人名（ヘッダータイトル、フッター用に上書き）
****************************************************************************************** */
.st_footer .bl_companyTitle_sub{
	font-size: var(--fontSize16);
	font-weight: 700;
}
.st_footer .bl_companyTitle_main{
	font-size: var(--fontSize24);
	font-weight: 600;
}
@media screen and (max-width:576px){
	.st_footer .bl_companyTitle_sub{
		font-size: var(--fontSize14);
	}
	.st_footer .bl_companyTitle_main{
		font-size: var(--fontSize21);
	}
}
/* ******************************************************************************************
	フッターコンテンツ
****************************************************************************************** */
/* 画像横並び */
.bl_footerInfoImgWrap{
	display: flex;
	gap: 20px 100px;
}
.ly_footerInner+svg{
	/* 波線のsvg余白対策blockを指定 */
	display: block;
	margin-bottom: -1px;
}
/* リンク */
.bl_footerLinkList_item{
	position: relative;
    padding-left: 20px;
}
.bl_footerLinkList_item::before {
    content: '\f0a9';
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    font-size: 16px;
    line-height: 1;
    position: absolute;
    top: 8px;
    left: 0;
    color: var(--mainColor);
}
.bl_footerLinkList_link{
	text-decoration: none;
	font-size: var(--fontSize16);
}
/* コピーライト */
.bl_copyright{
	background-color: var(--mainColor);
	padding: 10px 10px 5px;
	text-align: center;
	color: #fff;
	font-size: var(--fontSize14);
}
@media screen and (max-width:768px){
	.bl_footerInfoImgWrap{
		flex-direction: column;
	}
	.bl_footerImgArea{
		text-align: center;
	}
}
/* ////////////////////////////////////////////////////////////////////////////////////////////////////
	印刷用スタイル
//////////////////////////////////////////////////////////////////////////////////////////////////// */
@media print{
	body{
		/* 背景色反映のため */
		-webkit-print-color-adjust: exact;
	}
}