@charset "UTF-8";
/* CSS Document */

/*
	header
-----------------------------------------------------------------------------------------------*/
/* ENTRYボタン
============================== */
@media print, screen and (min-width:813px){
	#headerWrapper .grdBtnGreen{
		border: 1px solid #fff;
	}
}


/*
	ページタイトル
-----------------------------------------------------------------------------------------------*/
.cmnTit{
	 text-shadow: -1px -1px 7px rgb(136 210 170 / 30%),
				  1px -1px 7px rgb(136 210 170 / 30%),
				  1px 1px 7px rgb(136 210 170 / 30%),
				  -1px 1px 7px rgb(136 210 170 / 30%);
}


/*
	数字・キーワードで見る
-----------------------------------------------------------------------------------------------*/
/* ページタイトル
============================== */
.pageData #cmnTitWrapper{
	background-image: url("../images/bg_cmn_tit_about_data_pc.png");
}

/* 共通
============================== */
#dataWrapper,
.data2clmArea,
.data2clmArea .data2clmInBox{
	gap: 50px;
}
#dataWrapper{
	display: flex;
	flex-direction: column;
}
/* 白箱 */
.dataBox{
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: var(--roundS);
	box-shadow: 0 0 10px var(--clrBase15);
	padding: 70px 40px 40px 40px;
	position: relative;
}
.dataBox:has(.memoTxtR){
	padding-bottom: 30px;
}
/* タイトル　黒箱 */
.dataBox .bgRoundTitM{
	min-width: 180px;
	text-align: center;
	position: absolute;
	top: 10px;
	left: 10px;
}
/* 数字・キーワード */
.dataMainArea{
	display: flex;
	justify-content: center;
	width: 100%;
}
.dataTit{
	width: fit-content;
	font-size: 3rem;
	line-height: 100%;
	font-weight: 900;
}
.dataTit .grdTxtGreen{
	display: inline-block;
	font-size: 8rem;
	line-height: 100%;
	margin-right: 8px;
}
.dataTit .grdTxtGreen.space{
	margin-left: 8px;
}
.dataTit .grdTxtGreen.en{
	font-family: var(--fEnSub);
	font-weight: 700;
	line-height: var(--lineHeightEn);
	translate: 0 0.02em;
}
/* 本文 */
[class *= "dataTxt"]{
	width: 100%;
	text-align: justify;
	margin-top: 30px;
}
[class *= "dataTxt"]:has(+ .memoTxtR){
	margin-bottom: 15px;
}
@media print, screen and (min-width:813px){
	.dataTxtC{
		text-align: center;
	}
}
/* 注釈 */
.dataBox .memoTxtR{
	width: 100%;
	margin-top: auto;
}
/* 2カラム　エリア */
.data2clmArea{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.data2clmArea > div{
	width: calc((100% - 50px)/2);
}
.data2clmArea .data2clmInBox{
	display: flex;
	flex-direction: column;
}
@media print, screen and (min-width:813px){
	.data2clmArea .data2clmInBox:has(.dataGovtSize) .dataBox:nth-of-type(1){
		height: 268px;
	}
	.data2clmArea .data2clmInBox:has(.dataGovtSize) .dataBox:nth-of-type(2){
		height: 288px;
	}
	.data2clmArea .data2clmInBox:has(.dataGovtSize) .dataBox:nth-of-type(3){
		height: 263px;
	}
	.data2clmArea .data2clmInBox:has(.dataWearStyle) .dataBox:nth-of-type(1){
		height: 369px;
	}
	.data2clmArea .data2clmInBox:has(.dataWearStyle) .dataBox:nth-of-type(2){
		height: 500px;
	}
}

/* ふっさ桜まつり
============================== */
.dataEvent{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
@media print, screen and (min-width:813px){
	.dataEvent{
		padding-top: 50px;
	}
}
/* 数字・キーワード */
@media print, screen and (min-width:813px){
	.dataEvent .dataMainArea{
		justify-content: flex-start;
		padding-left: 40px;
		margin-top: -20px;
	}
	.dataEvent .dataTit{
		font-size: 4rem;
	}
}
/* 祭リスト */
.dataEventList{
	display: flex;
	gap: 0 40px;
}
.dataEventList li{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 13px;
	width: 200px;
}
.dataEventList .tit{
	text-align: center;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 130%;
	margin-bottom: 8px;
}
.dataEventList .txt{
	text-align: justify;
	font-size: 1.3rem;
	line-height: 150%;
}
/* 写真 */
.dataEventList .cmnAnmPh10{
	border-top-left-radius: 50% 50%;
	border-top-right-radius: 50% 50%;
}

/* 行政面積
============================== */
/* 数字・キーワード */
.dataGovtSize .dataMainArea{
	width: fit-content;
	padding-right: 130px;
	position: relative;
}
/* 写真 */
.dataGovtSize .dataMainArea img{
	position: absolute;
	top: 50%;
	right: 0;
	translate: 0 -50%;
}

/* 職員数
============================== */
/* 数字・キーワード */
.dataStaffNum .dataMainArea{
	align-items: center;
	gap: 0 50px;
}
/* リスト */
.dataStaffNumList{
	display: flex;
	flex-direction: column;
	gap: 10px 0;
	font-size: 2rem;
	font-weight: 700;
}
.dataStaffNumList .tit{
	color: var(--clrGreenLD);
}

/* 服装
============================== */
/* 数字・キーワード */
.dataWearStyle .dataMainArea{
	justify-content: space-between;
	align-items: flex-start;
}
.dataWearStyle .dataTit .grdTxtGreen{
	font-size: 4rem;
	line-height: 120%;
	margin-right: 0;
}

/* 共働き・子育て支援
============================== */
.dataDualSupport{
	align-items: flex-start;
}
/* 数字・キーワード */
.dataDualSupport .dataMainArea{
	justify-content: flex-start;
}
.dataDualSupport .dataTit .sizeS{
	display: inline-block;
	font-size: 2.4rem;
	margin-bottom: 3px;
}
.dataDualSupport .dataTxt{
	width: 290px;
}
/* アイコン */
.dataDualSupport img{
	position: absolute;
	top: 175px;
	right: 40px;
}

/* 最寄り駅からの距離　都心からの距離
============================== */
/* 数字・キーワード */
[class *= "dataDistance"] .dataMainArea{
	justify-content: space-between;
	align-items: center;
	width: 1000px;
	position: relative;
}
[class *= "dataDistance"] .dataTit,
.dataDistanceIco{
	position: relative;
	z-index: 1;
}
[class *= "dataDistance"] .dataTit{
	margin-top: -30px;
}
/* イラスト */
.dataDistanceIco{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px 0;
}
.dataDistanceIco .tit{
	text-align: center;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 130%;
}
/* 矢印 */
.dataArrow{
	width: 570px;
	height: 80px;
	position: absolute;
	top: calc(50% + 5px);
	left: 50%;
	translate: -50% -50%;
	z-index: 0;
}
.dataArrow::before,
.dataArrow::after{
	content: " ";
	display: block;
	background-color: var(--clrGreyL);
	position: absolute;
	bottom: 0;
}
.dataArrow::before{
	width: calc(100% - 80px);
	height: 45px;
	left: 0;
}
.dataArrow::after{
	height: 100%;
	aspect-ratio: 1/1;
	clip-path: polygon(0 0, 100% 100%, 0 100%);
	right: 0;
}
.dataDistanceCity .dataArrow::before{
	left: auto;
	right: 0;
}
.dataDistanceCity .dataArrow::after{
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	right: auto;
	left: 0;
}
/* 本文 */
@media print, screen and (min-width:813px){
	[class *= "dataDistance"] .dataTxtC{
		margin-top: 0;
	}
}
/* 都心からの距離 */
.dataDistanceCity .dataDistanceIco:first-of-type img{
	width: auto;
	height: 165px;
}
.dataDistanceCity .dataDistanceIco:first-of-type .tit{
	color: #fff;
	position: absolute;
	top: 50%;
	left: calc(50% + 6px);
	translate: -50% -50%;
}
.dataDistanceCity .dataTit{
	text-align: center;
	margin-top: -60px;
}
.dataDistanceCity .dataTit .sizeS{
	display: inline-block;
	font-size: 2.2rem;
	margin-bottom: 3px;
}


/*
	職種紹介
-----------------------------------------------------------------------------------------------*/
/* ページタイトル
============================== */
.pageValue #cmnTitWrapper{
	background-image: url("../images/bg_cmn_tit_about_value_pc.png");
}

/* 魅力
============================== */
/* タイトル */
.valTit{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 36px 0;
	font-weight: 700;
	padding-top: 30px;
	margin-bottom: 40px;
}
.valTit .enOut{
	position: relative;
}
.valTit .num{
	color: transparent;
	font-size: 12rem;
	font-family: var(--fEnSub);
	-webkit-text-stroke: 2px var(--clrGreenD);
	text-stroke: 2px var(--clrGreenD);
	position: absolute;
	top: calc(50% - 5px);
	left: 50%;
	translate: -50% -50%;
	z-index: 0;
}
.valTit .en{
	font-size: 5rem;
	font-family: var(--fEnMain);
	line-height: var(--lineHeightEn);
	letter-spacing: 0.2rem;
	position: relative;
	z-index: 1;
}
/* 写真エリア */
.valPhArea{
	display: flex;
	align-items: flex-start;
	gap: 0 50px;
	position: relative;
	z-index: 1;
}
.valPhTxt{
	width: 540px;
	text-align: justify;
	line-height: var(--lineHeightL);
}

/* 吹き出しエリア
============================== */
.valVcArea{
	padding-top: 110px;
	margin-top: -50px;
	position: relative;
	z-index: 0;
}
/* 緑背景 */
.valVcArea::before{
	content: " ";
	display: block;
	width: 100vw;
	min-width: calc(100% + 60px);
	height: 350px;
	background-image: var(--bgTexture), var(--clrGrdGreen);
	background-repeat: no-repeat, no-repeat;
	background-position: center center, center center;
	background-size: cover, cover;
	background-blend-mode: overlay;
	position: absolute;
	top: 0;
	left: 50%;
	translate: -50% 0;
	z-index: 0;
}
/* 白い箱 */
.valVcBox{
	background-color: #fff;
	border-radius: var(--roundL);
	box-shadow: 0 5px 10px var(--clrBase15);
	padding: 50px 50px 60px 50px;
	position: relative;
	z-index: 1;
}
/* タイトル */
.valVcTit{
	color: #fff;
	font-size: 10rem;
	font-family: var(--fEnMain);
	font-weight: 700;
	line-height: var(--lineHeightEn);
	letter-spacing: 0.5rem;
	position: absolute;
	top: -68px;
	left: 45px;
}
/* 吹き出し */
[class *= "valVcTxt"]{
	width: fit-content;
	background-color: #fff;
	border-radius: var(--roundM);
	color: #fff;
	font-weight: 700;
	padding: 40px 50px;
	position: absolute;
}
[class *= "valVcTxt"]::before,/* クチバシ　色 */
[class *= "valVcTxt"][class *= "clrLine"]::after/* クチバシ　白 */{
	content: " ";
	display: block;
	width: 50px;
	height: 30px;
	right: 45px;
	position: absolute;
}
[class *= "valVcTxt"]::before{
	clip-path: polygon(0 0, 80% 0, 100% 100%);
	bottom: -29px;
	z-index: 0;
}
[class *= "valVcTxt"][class *= "clrLine"]::before{
	bottom: -30px;
}
[class *= "valVcTxt"][class *= "clrLine"]::after{
	clip-path: polygon(1px 0, calc(80% - 3px) 0, calc(100% - 3px) calc(100% - 2px));
	background-color: #fff;
	bottom: -28px;
	z-index: 1;
}
[class *= "valVcTxt"].sizeS{
	font-size: 1.6rem;
}
[class *= "valVcTxt"].sizeM{
	font-size: 2.2rem;
	line-height: 160%;
}
[class *= "valVcTxt"].sizeL{
	font-size: 3rem;
	line-height: 150%;
}
[class *= "valVcTxt"].clrBlue,
[class *= "valVcTxt"].clrBlue::before,
[class *= "valVcTxt"].clrLineBlue::before{
	background-color: var(--clrGreenLD);
}
[class *= "valVcTxt"].clrLineBlue{
	color: var(--clrGreenLD);
	border: 2px solid var(--clrGreenLD);
}
[class *= "valVcTxt"].clrGreen,
[class *= "valVcTxt"].clrGreen::before,
[class *= "valVcTxt"].clrLineGreen::before{
	background-color: var(--clrGreenD);
}
[class *= "valVcTxt"].clrLineGreen{
	color: var(--clrGreenD);
	border: 2px solid var(--clrGreenD);
}
/* 飾り写真 */
[class *= "valPplItem0"]{
	position: absolute;
	z-index: 10;
}
@media print, screen and (min-width:813px){
	/* 01 コンパクトで住みやすいまち */
	.valCompact .valVcBox{
		height: 545px;
	}
	.valCompact .valVcTxt01{
		top: 50px;
		left: 80px;
	}
	.valCompact .valVcTxt02{
		top: 50px;
		left: 470px;
		z-index: 2;
	}
	.valCompact .valVcTxt03{
		top: 160px;
		right: 50px;
		z-index: 1;
	}
	.valCompact .valVcTxt04{
		top: 330px;
		left: 130px;
	}
	.valCompact .valVcTxt05{
		top: 280px;
		right: 160px;
		z-index: 0;
	}
	.valCompact .valPplItem01{
		top: -50px;
		right: 30px;
	}
	.valCompact .valPplItem02{
		bottom: -55px;
		left: 30px;
	}
	/* 02 人と暮らしが多様 */
	.valDiversity .valVcBox{
		height: 460px;
	}
	.valDiversity .valVcTxt01{
		top: 70px;
		left: 140px;
	}
	.valDiversity .valVcTxt02{
		top: 50px;
		right: 50px;
		z-index: 1;
	}
	.valDiversity .valVcTxt03{
		top: 225px;
		left: 50px;
		z-index: 3;
	}
	.valDiversity .valVcTxt04{
		top: 165px;
		left: 470px;
		z-index: 2;
	}
	.valDiversity .valVcTxt05{
		top: 235px;
		right: 80px;
		z-index: 0;
	}
	.valDiversity .valPplItem01{
		top: 25px;
		left: 40px;
	}
	.valDiversity .valPplItem02{
		bottom: -70px;
		right: 30px;
	}
	/* 03 子育てしやすく、学校教育にも注力 */
	.valEducation .valVcBox{
		height: 560px;
	}
	.valEducation .valVcTxt01{
		top: 50px;
		left: 50px;
	}
	.valEducation .valVcTxt02{
		top: 50px;
		right: 95px;
		z-index: 0;
	}
	.valEducation .valVcTxt03{
		top: 205px;
		left: 480px;
		z-index: 1;
	}
	.valEducation .valVcTxt04{
		top: 280px;
		left: 150px;
		z-index: 2;
	}
	.valEducation .valVcTxt05{
		top: 320px;
		right: 50px;
	}
	.valEducation .valPplItem01{
		bottom: -60px;
		left: 35px;
	}
}


@media screen and (max-width:812px){
	/*
		数字・キーワードで見る
	-----------------------------------------------------------------------------------------------*/
	/* ページタイトル
	============================== */
	.pageData #cmnTitWrapper{
		background-image: url("../images/bg_cmn_tit_about_data_sp.png");
	}

	/* 共通
	============================== */
	#dataWrapper,
	.data2clmArea,
	.data2clmArea .data2clmInBox{
		gap: 20px 0;
	}
	/* 白箱 */
	.dataBox{
		padding: 60px 20px 20px 20px;
	}
	.dataBox:has(.memoTxtR){
		padding-bottom: 15px;
	}
	/* タイトル　黒箱 */
	.dataBox .bgRoundTitM{
		min-width: 160px;
	}
	/* 数字・キーワード */
	.dataTit{
		font-size: 2rem;
	}
	.dataTit .grdTxtGreen{
		font-size: 6rem;
		margin-right: 5px;
	}
	.dataTit .grdTxtGreen.space{
		margin-left: 5px;
	}
	/* 本文 */
	[class *= "dataTxt"]{
		margin-top: 20px;
	}
	/* 2カラム　エリア */
	.data2clmArea{
		flex-direction: column;
	}
	.data2clmArea > div{
		width: 100%;
	}

	/* ふっさ桜まつり
	============================== */
	.dataEvent{
		flex-direction: column;
	}
	/* 祭リスト */
	.dataEventList{
		flex-direction: column;
		gap: 20px 0;
		margin-top: 30px;
	}
	.dataEventList li{
		flex-direction: row;
		gap: 0 20px;
		width: 100%;
	}
	.dataEventList .cmnAnmPh10{
		flex-shrink: 0;
		width: 120px;
	}
	.dataEventList .tit{
		text-align: left;
		font-size: 1.5rem;
	}

	/* 行政面積
	============================== */
	/* 数字・キーワード */
	.dataGovtSize .dataMainArea{
		padding-right: 80px;
	}
	/* 写真 */
	.dataGovtSize .dataMainArea img{
		width: 80px;
	}

	/* 職員数
	============================== */
	/* 数字・キーワード */
	.dataStaffNum .dataMainArea{
		gap: 0 20px;
	}
	/* リスト */
	.dataStaffNumList{
		gap: 5px 0;
		font-size: 1.6rem;
	}

	/* 服装
	============================== */
	/* 数字・キーワード */
	.dataWearStyle .dataMainArea{
		flex-direction: column;
		align-items: center;
		gap: 15px 0;
	}
	.dataWearStyle .dataTit .grdTxtGreen{
		font-size: 3.6rem;
	}

	/* 共働き・子育て支援
	============================== */
	.dataDualSupport{
		align-items: center;
	}
	/* 数字・キーワード */
	.dataDualSupport .dataMainArea{
		justify-content: center;
		text-align: center;
		order: 1;
		margin-bottom: 20px;
	}
	.dataDualSupport .dataTit .sizeS{
		font-size: 1.7rem;
		line-height: 150%;
	}
	.dataDualSupport .dataTxt{
		order: 3;
		width: 100%;
	}
	/* アイコン */
	.dataDualSupport img{
		order: 2;
		width: 90px;
		position: static;
	}
	/* 注釈 */
	.dataDualSupport .memoTxtR{
		order: 4;
	}

	/* 最寄り駅からの距離　都心からの距離
	============================== */
	/* 数字・キーワード */
	[class *= "dataDistance"] .dataMainArea{
		justify-content: center;
		width: 100%;
		max-width: 300px;
	}
	[class *= "dataDistance"] .dataTit{
		margin-top: 0;
	}
	/* イラスト */
	.dataDistanceIco{
		gap: 8px 0;
		position: absolute;
		top: 0;
	}
	.dataDistanceIco .tit{
		font-size: 1.2rem;
	}
	.dataDistanceIco:nth-of-type(1){
		left: 0;
	}
	.dataDistanceIco:nth-of-type(2){
		right: 0;
	}
	.dataDistanceIco img{
		width: auto;
		height: 60px;
	}
	/* 矢印 */
	.dataArrow{
		width: 90px;
		height: 26px;
		top: 15px;
		left: 50%;
		translate: -50% 0;
	}
	.dataArrow::before,
	.dataArrow::after{
		background-color: #efeded;
	}
	.dataArrow::before{
		width: calc(100% - 25px);
		height: 12px;
	}
	/* 最寄り駅からの距離 */
	.dataDistanceStation  .dataMainArea{
		padding-top: 100px;
	}
	/* 都心からの距離 */
	.dataDistanceCity  .dataMainArea{
		padding-top: 90px;
	}
	.dataDistanceCity .dataDistanceIco:first-of-type{
		top: -10px;
	}
	.dataDistanceCity .dataDistanceIco:first-of-type img{
		height: 90px;
	}
	.dataDistanceCity .dataDistanceIco:first-of-type .tit{
		font-size: 1.2rem;
		white-space: nowrap;
		top: calc(50% - 3px);
		left: calc(50% + 3px);
	}
	.dataDistanceCity .dataTit .sizeS{
		font-size: 1.5rem;
	}


	/*
		職種紹介
	-----------------------------------------------------------------------------------------------*/
	/* ページタイトル
	============================== */
	.pageValue #cmnTitWrapper{
		background-image: url("../images/bg_cmn_tit_about_value_sp.png");
	}

	/* 魅力
	============================== */
	/* タイトル */
	.valTit{
		gap: 25px 0;
		padding-top: 20px;
		margin-bottom: 30px;
	}
	.valTit .num{
		font-size: 8rem;
	}
	.valTit .en{
		font-size: 3.4rem;
	}
	/* 写真エリア */
	.valPhArea{
		flex-direction: column-reverse;
		gap: 20px 0;
		margin-bottom: 30px;
	}
	.valPhTxt{
		width: 100%;
	}

	/* 吹き出しエリア
	============================== */
	.valVcArea{
		padding-top: 60px;
		margin-top: 0;
	}
	/* 緑背景 */
	.valVcArea::before{
		width: 100vw;
		min-width: initial;
		height: 230px;
	}
	/* 白い箱 */
	.valVcBox{
		display: flex;
		flex-direction: column;
		gap: 25px 0;
		padding: 20px 20px 30px 20px;
	}
	/* タイトル */
	.valVcTit{
		font-size: 4rem;
		letter-spacing: 0.4rem;
		top: -27px;
		left: 15px;
	}
	/* 吹き出し */
	[class *= "valVcTxt"]{
		/* width: calc(100% - 20px); */
		padding: 15px 15px;
		position: relative;
	}
	[class *= "valVcTxt"]:nth-of-type(2n){
		margin-left: auto;
	}
	[class *= "valVcTxt"]::before,/* クチバシ　色 */
	[class *= "valVcTxt"][class *= "clrLine"]::after/* クチバシ　白 */{
		width: 30px;
		height: 15px;
		right: 20px;
	}
	[class *= "valVcTxt"]::before{
		bottom: -14px;
	}
	[class *= "valVcTxt"][class *= "clrLine"]::before{
		bottom: -15px;
	}
	[class *= "valVcTxt"][class *= "clrLine"]::after{
		bottom: -13px;
	}
	[class *= "valVcTxt"]:nth-of-type(2n-1)::before,
	[class *= "valVcTxt"]:nth-of-type(2n-1)::after{
		left: 20px;
		scale: -1 1;
	}
	[class *= "valVcTxt"].sizeS{
		font-size: 1.4rem;
	}
	[class *= "valVcTxt"].sizeM{
		font-size: 1.6rem;
		line-height: 150%;
	}
	[class *= "valVcTxt"].sizeL{
		font-size: 2rem;
	}
	/* 飾り写真 */
	[class *= "valPplItem0"]{
		width: auto;
		height: 160px;
	}
	/* 01 コンパクトで住みやすいまち */
	.valCompact .valPplItem01{
		top: -60px;
		right: -5px;
	}
	.valCompact .valPplItem02{
		bottom: -140px;
		left: -13px;
	}
	/* 02 人と暮らしが多様 */
	.valDiversity .valPplItem01{
		top: -75px;
		right: 20px;
		left: auto;
	}
	.valDiversity .valPplItem02{
		bottom: -100px;
		right: 0;
	}
	/* 03 子育てしやすく、学校教育にも注力 */
	.valEducation .valPplItem01{
		bottom: -45px;
		right: 20px;
		left: auto;
	}
}