@charset "utf-8";

/* --------------------------------------------------- */
/* 家族をまもるLP*/
/* --------------------------------------------------- */
footer nav,
footer #tabs { display: none; }

/* --------------------------------------------------- */
/* 共通 */
/* --------------------------------------------------- */
/* フォーマット */
/* --------------------------------------------------- */
.pg-lp .wrap { padding: 0; }
.pg-lp .container { margin-top: 0; }
.pg-lp header {
	position: absolute;
	width: 25%;
	height: auto;
	background-color: transparent;
	box-shadow: none;
	overflow-y: initial;
}
.pg-lp header .fplogo {
	margin: 6.0em auto 0;
	width: 50%;
}

@media screen and (max-width: 1080px) {
	.pg-lp header { width: 22.5%; }
	.pg-lp header .fplogo {
		margin: 5.0em auto 0;
		width: 50%;
	}
}
@media screen and (max-width: 767px) {
	.pg-lp header { width: 18%; }
	.pg-lp header .fplogo {
		margin: 1.5em auto 0;
		width: 75%;
	}
}
@media screen and (max-width: 420px) {
	.pg-lp header { width: 18%; }
	.pg-lp header .fplogo {
		margin: 1.0em auto 0;
		width: 80%;
	}
}



.contents {
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	max-width: 1040px;
}
main { margin-top: 0 !important; }
#livability, #strength {
	font-size: 1.6rem;
	font-weight: 400;
}
main section { width: 100%; padding: 0; box-sizing: border-box; }


/* 資料請求ボタン */
/* --------------------------------------------------- */
.btn-catalog {
	margin: 5.0em auto;
	width: 80%;
	max-width: 640px;
	text-align: center;
}
.btn-catalog a {
	display: block;
	padding: 0 1.0em 0.5em;
	background-color: #02aa31;
	border-radius: 24px;
	box-shadow: 1px 1px 0.5em rgba(0,0,0,0.3) ;
}
.btn-catalog a:hover {
	opacity: 0.5;
	box-shadow: 1px 1px 0.1em rgba(0,0,0,0.1) ;
}
.btn-catalog a span {
	display: block;
	margin: 0 auto;
	width: 80%;
	max-width: 240px;
	border: 2px solid #02aa31;
	background-color: #fffabe;
	border-radius: 120px;
	color: #02aa31;
	transform: translateY(-48%);
}
.btn-catalog a span b {
	position: relative;
	z-index: 2;
	display: block;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.8;
}
.btn-catalog a span::after {
	content: '';
	position: absolute;
	top: 98%;
	left: 50%;
	display:block;
	width: 14px;
	height: 14px;
	background-color: #fffabe;
	transform: rotate(22deg) skew(0,45deg) translate(-50%);
}
.btn-catalog a em {
	display: block;
	margin: -0.5em auto 0;
	padding-left: 72px;
	background-image: url('../image/livability/ic-book.png');
	background-repeat: no-repeat;
	background-size: 64px auto;
	background-position: 0 50%;
	width: 320px;
	color: #fff;
	font-size: 2.4rem;
	font-weight: 600;
	line-height: 2.0;
}
#strength .btn-catalog a { background-color: #fcbe22; }
#strength .btn-catalog a span {
	border: 2px solid #fcbe22;
	color: #fcbe22;
}



@media screen and (max-width: 640px) {
	.btn-catalog { margin: 4.0em auto; }
	.btn-catalog a {
		padding: 0 1.0em 0.5em;
		border-radius: 16px;
	}
	.btn-catalog a span { width: 60%; }
	.btn-catalog a span b { font-size: 1.4rem; }
	.btn-catalog a span::after {
		width: 10px;
		height: 10px;
	}
	.btn-catalog a em {
		padding-left: 54px;
		background-size: 48px auto;
		width: initial;
		font-size: 4.5vw;
	}
}
@media screen and (max-width: 420px) {
	.btn-catalog { margin: 3.0em auto; width: 90%; }
	.btn-catalog a span b { font-size: 1.3rem; }
	.btn-catalog a em {
		padding-left: 36px;
		background-size: 36px auto;
		width: initial;
		font-size: 5.10vw;
	}
}



/* Youtube */
/* --------------------------------------------------- */
.mvarea {
	position: relative;
	z-index: 5;
	margin-top: 10.0em;
}
.mvarea::before {
	content: '';
	position: absolute;
	top: -6.0em;
	left: 0;
	right: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-color: #f6f6f6;
}
.mvarea .ytbox {
	position: relative;
	margin: 0 auto;
	width: 90%;
	max-width: 720px;
}
.mvarea .ytbox::before {
	content: '';
	display: block;
	padding-top: 56.3%;
	width: 100%;
}
.mvarea .ytbox iframe {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
.mvarea .ytbox::after {
	content: 'MOVIE';
	position: absolute;
	top: 0;
	display: block;
	padding: 0.75em 0 3.0em;
	width: 2.2em;
	background-color: #f4940c;
	writing-mode: vertical-rl;
	color: #fff;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 2.2;
}
#strength .mvarea .ytbox::after { background-color: #55c1de; }
.mvarea .ytbox.tabright::after {
	left: 100%;
	border-radius: 0 0 18px 0;
}
.mvarea .ytbox.tableft::after {
	right: 100%;
	border-radius: 0 0 0 18px;
}

@media screen and (max-width: 1280px) {
.mvarea { z-index: 1; }
}
@media screen and (max-width: 767px) {
	.mvarea { margin-top: 8.0em; }
	.mvarea::before { top: -5.0em; }
	.mvarea .ytbox::after {
		top: initial;
		bottom: 100%;
		padding: 0 1.0em;
		width: 6.0em;
		writing-mode: horizontal-tb;
		font-size: 1.4rem;
	}
	.mvarea .ytbox.tabright::after,
	.mvarea .ytbox.tableft::after {
		left: 0;
		right: initial;
		border-radius: 0 12px 0 0;
	}
}
@media screen and (max-width: 420px) {
	.mvarea { margin-top: 6.0em; }
	.mvarea::before { top: -3.5em; }
	.mvarea .ytbox::after { font-size: 1.2rem; }
}


/* --------------------------------------------------- */
/* メインビジュアル */
/* --------------------------------------------------- */
#lptitle { position: relative; }
#lptitle figure {
	position: relative;
	display: block;
	margin: 0 0 0 auto;
	width: 75%;
	background-size: auto 100%;
	background-position: 100% 100%;
	transform: translateY(-5%);
}
#lptitle figure::before {
	content: '';
	display: block;
	padding-top: 92.6%;
	width: 100%;
}
#lptitle h1 {
	position: absolute;
	top: 3.0em;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	writing-mode: vertical-rl;
	display: block;
	margin: 0;
	width: 1.0em;
	color: #fff;
	font-family: "source-han-serif-jp-variable", sans-serif;
	font-size: 3.6rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-shadow: 1px 1px 0.2em rgba(0,0,0,0.9) ;
}

@media screen and (max-width: 1080px) {
	#lptitle figure {
		width: 77.5%;
		transform: translateY(-3%);
	}
	#lptitle h1 {
		top: 2.5em;
		width: 1.5em;
		font-size: 3.2rem;
		letter-spacing: 0.15em;
		text-shadow: 1px 1px 0.2em rgba(0,0,0,0.9) ;
	}
}
@media screen and (max-width: 767px) {
	#lptitle figure {
		width: 80%;
		transform: translateY(-3%);
	}
	#lptitle h1 {
		top: 1.5em;
		width: 1.5em;
		font-size: 2.8rem;
		letter-spacing: 0.15em;
		text-shadow: 1px 1px 0.15em rgba(0,0,0,0.9) ;
	}
}
@media screen and (max-width: 640px) {
	#lptitle figure {
		width: 82.5%;
		background-position: 0 100%;
		transform: translateY(-3%);
	}
	#lptitle figure::before {
		content: '';
		display: block;
		padding-top: 100%;
		width: 100%;
	}
	#lptitle h1 {
		top: 1.0em;
		left: 87.5%;
		width: 1.5em;
		font-size: 5.5vw;
		letter-spacing: 0.15em;
		text-shadow: 1px 1px 0.15em rgba(0,0,0,0.9) ;
	}
}
@media screen and (max-width: 420px) {
	#lptitle figure {
		margin: 0 0 0 18%;
		background-position: 0 100%;
		transform: translateY(-1%);
	}
	#lptitle figure::before {
		content: '';
		display: block;
		padding-top: 105%;
		width: 100%;
	}
	#lptitle h1 {
		top: 1.0em;
		left: 90.0%;
		width: 1.5em;
		font-size: 5.5vw;
		letter-spacing: 0.15em;
		text-shadow: 1px 1px 0.15em rgba(0,0,0,0.9) ;
	}
}


/* --------------------------------------------------- */
/* リード */
/* --------------------------------------------------- */
#leader { position: relative; }
#leader figure {
	position: absolute;
	z-index: 4;
	top: 0;
	left: 0;
	width: 40%;
	transform: translateY(-33.33%);
}
#leader figure + div {
	position: relative;
	margin-left: 45%;
	margin-top: 3.0em;
	margin-right: 10%;
	width:45%;
	max-width: 560px;
}
#leader p {
	margin-top: 1.5em;
	font-size: 1.8rem;
}
#leader p span { display: block; }
#leader h3 {
	position: absolute;
	top: 0;
	right: 0;
	width: 128px;
	writing-mode: vertical-rl;
	white-space: nowrap;
	font-family: "source-han-serif-jp-variable", sans-serif;
	font-size: 3.2rem;
	font-weight: 600;
	letter-spacing: 0.15em;
}

@media screen and (max-width: 1120px) {
	#leader figure {
		width: 40%;
		transform: translateY(-25%);
	}
	#leader figure + div {
		margin-left: 45%;
		margin-top: 3.0em;
		margin-right: 5%;
		width: 50%;
		max-width: auto;
	}
	#leader h3 {
		position: static;
		width: auto;
		writing-mode: horizontal-tb;
		white-space: wrap;
		font-size: 2.8rem;
		letter-spacing: inherit;
	}

}
@media screen and (max-width: 920px) {
	#leader figure {
		width: 36%;
		transform: translateY(-20%);
	}
	#leader figure + div {
		margin-left: 40%;
		margin-top: 2.5em;
		margin-right: 5%;
		width: 55%;
		max-width: initial;
	}
	#leader h3 { font-size: 2.4rem; }
	#leader p span { display: inline; }

}
@media screen and (max-width: 767px) {
	#leader figure {
		top: 5.0em;
		left: 0;
		width: 45%;
		transform: translateY(5%);
	}
	#leader figure + div {
		margin-top: 0;
		margin-left: 5%;
		margin-right: 5%;
		width: 90%;
		max-width: auto;
	}
	#leader h3 {
		font-size: 2.4rem;
		text-align: center;
	}
	#leader p {
		margin-top: 1.5em;
		margin-left: 48%;
		font-size: 1.6rem;
	}
}
@media screen and (max-width: 560px) {
	#leader figure {
		top: 100%;
		left: 0;
		width: 45%;
		transform: translateY(-80%);
	}
	#leader p:nth-child(2) {
		margin-left: 0;
	}
	#livability #leader p:nth-child(3) {
		margin-left: 0;
	}

}
@media screen and (max-width: 480px) {
	#leader h3 {
		font-size: 5.5vw;
		text-align: center;
	}
	#livability #leader p:nth-child(4) {
		margin-left: 0;
	}
	#strength #leader p:nth-child(3) {
		margin-left: 0;
	}

}
@media screen and (max-width: 420px) {
	#leader { margin-top: 2.0em; margin-bottom: 90% ; }
	#leader p { margin-left: 0 !important; }
	#leader figure {
		top: 104%;
		left: 0;
		width: 66.66%;
		transform: translateY(0);
	}

}


/* --------------------------------------------------- */
/* インデックス */
/* --------------------------------------------------- */
#pgnavi { position: relative; }
#pgnavi::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: block;
	height: 90%;
	transform: translateY(-10%) skew(0deg,6deg);
}
#livability #pgnavi::before { background-color: #f4940c; }
#strength #pgnavi::before { background-color: #55c1de; }
#pgnavi > div {
	position: relative;
	z-index: 2;
	margin: 10.0em auto 0;
	width: 90%;
	max-width: 1120px;
}
#pgnavi h2 {
	position: relative;
	color: #fff;
	font-size: 3.2rem;
	font-weight: 500;
	text-align: center;
}
#pgnavi h2::after {
	content: '';
	display: block;
	margin: 0.5em auto;
	width: 3.0em;
	border-top: 3px solid;
}
#pgnavi ul {
	display: flex;
	justify-content: center;
	gap: 0 3.5%;
	margin-top: 2.0em;
	font-size: 1.6rem;
}
 #pgnavi ul li {
	box-sizing: border-box;
	padding: 1.75em;
	width: 31%;
	background-color: #f6f6f6;
	border-radius: 1.0em;
	box-shadow: 1px 1px 8px rgba(0,0,0,0.2);
 }

#livability #pgnavi ul li:first-child { margin-bottom: 2.0em; }
#livability #pgnavi ul li:last-child { margin-top: 2.0em; }
#strength #pgnavi ul li:first-child { margin-bottom: 4.0em; }
#strength #pgnavi ul li:nth-child(2) { margin: 2.0em 0; }
#strength #pgnavi ul li:last-child { margin-top: 4.0em; }
#pgnavi h3 {
	font-size: 2.4rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}
 #pgnavi figure { margin: 1.0em 0; }

@media screen and (max-width: 960px) {
	#pgnavi ul {
		gap: 0 2.6%;
		margin-top: 2.0em;
	}
	#pgnavi ul li { padding: 1.5em 2.5%; width: 31.6%; }
	#pgnavi h3 {
		font-size: 2.2vw;
		font-weight: 500;
		line-height: 1.5;
		text-align: center;
	}

}
@media screen and (max-width: 767px) {
	#pgnavi::before {
		height: calc(100% - 48px);
		transform: translateY(-80px) skew(0deg,6deg);
	}
	#pgnavi h2 { font-size: 2.8rem; }
	#pgnavi ul {
		flex-direction: column;
		gap: 2.0em 0;
		margin: 2.0em auto 0;
		max-width: 420px;
	}
	#pgnavi ul li { padding: 1.5em 4%; width: 100%; }
	#pgnavi h3 {
		font-size: 2.1rem;
		font-weight: 500;
		line-height: 1.5;
		text-align: center;
	}
	#livability #pgnavi ul li:first-child,
	#livability #pgnavi ul li:last-child,
	#strength #pgnavi ul li:first-child,
	#strength #pgnavi ul li:nth-child(2),
	#strength #pgnavi ul li:last-child { margin: 0; }

}
@media screen and (max-width: 420px) {
	#pgnavi::before {
		height: calc(100% - 48px);
		transform: translateY(-48px) skew(0deg,6deg);
	}
	#pgnavi > div {
		margin: 20.0em auto 0;
	}
	#pgnavi h2 { font-size: 2.4rem; }
	#pgnavi ul {
		gap: 1.0em 0;
		margin: 2.0em auto 0;
	}
	#pgnavi ul li { padding: 1.5em 5%; width: 100%; }
}


/* --------------------------------------------------- */
/* Capter */
/* --------------------------------------------------- */
.capter { position: relative; }
.capter .sectitle {
	position: relative;
	z-index: 10;
	box-sizing: border-box;
	display: block;
	padding: 2.0em 2.0em;
	width: 70%;
	color: #fff;
	text-align: center;
}
#livability .capter .sectitle { background-color: #f4940c; }
#strength .capter .sectitle { background-color: #55c1de; }
.capter .sectitle.rigthside {
	margin-left: auto;
	margin-right: 0;
	border-radius: 1280px 0 0 1280px;
}
.capter .sectitle.leftside {
	margin-left: 0;
	margin-right: auto;
	border-radius: 0  1280px  1280px 0;
}
.capter .sectitle h2 {
	margin-bottom: 0.25em;
	font-size: 4.8rem;
	font-weight: 500;
	line-height: 1.5;
}
.capter .sectitle h2::before {
	content: attr(data-label)'';
	display: block;
	margin: 0 auto 0.25em;
	width: 256px;
	border: 1px solid;
	font-size: 1.8rem;
	line-height: 1.8;
}
.capter .sectitle p span {
	display: block;
	font-size: 2.1rem;
}

@media screen and (max-width: 900px) {
	.capter .sectitle { width: 76%; padding: 2.0em 4%; }
	.capter .sectitle h2 { font-size: 4.2rem; }
}
@media screen and (max-width: 640px) {
	.capter .sectitle {
		padding: 1.5em 4%;
		width: 85%;
	}
	.capter .sectitle h2 {
		margin-bottom: 0.25em;
		font-size: 3.2rem;
	}
	.capter .sectitle h2 span { display: inline-block; }
	.capter .sectitle h2::before {
		margin: 0 auto 0.25em;
		width: 224px;
		border: 1px solid;
		font-size: 1.6rem;
		line-height: 1.8;
	}
	.capter .sectitle p span {
		display: block;
		font-size: 1.8rem;
	}
}
@media screen and (max-width: 420px) {
	.capter .sectitle {
		padding: 1.5em 4%;
		width: 95%;
	}
	.capter .sectitle h2 {
		font-size: 2.4rem;
	}
	.capter .sectitle h2::before {
		margin: 0 auto 0.5em;
		width: 184px;
		font-size: 1.3rem;
	}
	.capter .sectitle p span {
		display: block;
		font-size: 1.4rem;
	}
}

.capter  .blockwrap {
	position: relative;
	margin: 0 auto;
	width: 90%;
	max-width: 1040px;
}
.capter .inblock h4 {
	margin: 2.0em 0 1.0em;
	font-size: 2.4rem;
	font-weight: 500;
}
.capter .inblock p {
	margin-top: 1.0em;
	font-size: 1.8rem;
}

@media screen and (max-width: 767px) {
	.capter .inblock h4 {
		margin: 2.0em 0 1.0em;
		font-size: 2.1rem;
	}
	.capter .inblock p { font-size: 1.6rem; }

}
@media screen and (max-width: 420px) {
	.capter .inblock h4 {
		margin: 2.0em 0 1.0em;
		font-size: 1.8rem;
	}

}

/* Temperature */
/* --------------------------------------------------- */
#temperature > figure {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	width: 45%;
	transform: translateY(10%);
}
#temperature .inblock {
	margin: 0 0 0 auto;
	width: 52%;
}

@media screen and (max-width: 900px) {
	#temperature > figure {
		width: 40%;
		transform: translate(-10%, 35%);
	}
	#temperature .inblock { width: 62%; }
}
@media screen and (max-width: 640px) {
	#temperature > figure {
		top: 10.0em;
		width: 70%;
		transform: none;
	}
	#temperature .inblock {  width: 100%; }
	#temperature .inblock::before {
		content: '';
		display: block;
		padding-top: 90%;
		width: 100%;
	}
}
@media screen and (max-width: 420px) {
	#temperature > figure {
		top: 8.0em;
		width: 75%;
	}
}

/* Cleanair */
/* --------------------------------------------------- */
#cleanair > figure {
	position: absolute;
	z-index: 3;
	top: 0;
	right: 0;
	width: 40%;
	transform: translateY(5%);
}
#cleanair .inblock {
	margin: 0 auto 0 0;
	width: 58%;
}

@media screen and (max-width: 900px) {
	#cleanair > figure {
		width: 37%;
		transform: translate(0, 35%);
	}
	#cleanair .inblock { width: 62%; }
}
@media screen and (max-width: 640px) {
	#cleanair > figure {
		top: initial;
		bottom: 0;
		width: 70%;
		transform:  translateY(10%);
	}
	#cleanair .inblock {  width: 100%; }
	#cleanair .inblock::after {
		content: '';
		display: block;
		padding-top: 110%;
		width: 100%;
	}
}
@media screen and (max-width: 420px) {
	#cleanair > figure {
		bottom: 0;
		width: 45%;
		transform:  translateY(25%);
	}
	#cleanair .inblock::after {
		content: '';
		display: block;
		padding-top: 60%;
		width: 100%;
	}
}



/* Earthquake */
/* --------------------------------------------------- */
#earthquake > figure {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	width: 45%;
	transform: translateY(10%);
}
#earthquake .inblock {
	margin: 0 0 0 auto;
	width: 52%;
}
#earthquake .inblock figure { margin-top: 1.5em; }


@media screen and (max-width: 900px) {
	#earthquake > figure {
		width: 40%;
		transform: translate(-10%, 35%);
	}
	#earthquake .inblock { width: 62%; }
}
@media screen and (max-width: 640px) {
	#earthquake > figure {
		top: 10.0em;
		width: 70%;
		transform: none;
	}
	#earthquake .inblock {  width: 100%; }
	#earthquake .inblock::before {
		content: '';
		display: block;
		padding-top: 90%;
		width: 100%;
	}
}
@media screen and (max-width: 420px) {
	#earthquake > figure {
		top: 8.0em;
		width: 75%;
	}
}

/* Flood */
/* --------------------------------------------------- */
#flood > figure {
	position: absolute;
	z-index: 3;
	top: 0;
	right: 0;
	width: 45%;
	transform: translate(15%, 10%);
}
#flood .inblock {
	margin: 0 auto 0 0;
	width: 60%;
}

@media screen and (max-width: 900px) {
	#flood > figure {
		width: 45%;
		transform: translate(15%, 45%);
	}
}
@media screen and (max-width: 640px) {
	#flood > figure {
		top: initial;
		bottom: 0;
		width: 67%;
		transform:  translateX(10%);
	}
	#flood .inblock {  width: 100%; }
	#flood .inblock::after {
		content: '';
		display: block;
		padding-top: 80%;
		width: 100%;
	}
}

/* Flood */
/* --------------------------------------------------- */
#reassurance > figure {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	width: 45%;
	transform: translate(-15%, 10%);
}
#reassurance .inblock {
	margin: 0 0 0 auto;
	width: 60%;
}

@media screen and (max-width: 900px) {
	#reassurance > figure {
		width: 45%;
		transform: translate(-15%, 45%);
	}
}
@media screen and (max-width: 640px) {
	#reassurance > figure {
		top: initial;
		bottom: 0;
		width: 67%;
		transform:  translate(-10%, 20%);
	}
	#reassurance .inblock {  width: 100%; }
	#reassurance .inblock::after {
		content: '';
		display: block;
		padding-top: 65%;
		width: 100%;
	}
}



/* --------------------------------------------------- */
/* Risk */
/* --------------------------------------------------- */
#risk {
	position: relative;
	z-index: 5;
	margin-top: 5.0em;
	padding: 5.0em 0;
	background-color: #f6f6f6;
}
#risk .riskwrap {
	display: flex;
	flex-direction: row-reverse;
	gap: 0 3.0em;
	margin: 0 auto;
	width: 90%;
	max-width: 960px;
}
#risk .riskwrap h3 {
	padding: 1.0em 0.5em 0;
	border-top: 4px solid #f4940c;
	writing-mode: vertical-rl;
	font-size: 2.4rem;
	font-weight: 500;
}
#risk .riskwrap .danger { flex: 1 0 0; }
#risk .riskwrap .danger dl + dl { margin-top: 3.0em; }
#risk .riskwrap .danger dl {
	display: flex;
	justify-content: space-between;
}
#risk .riskwrap .danger dl:nth-child(odd) {
	flex-direction: row-reverse;
}
#risk .riskwrap .danger dl dt,
#risk .riskwrap .danger dl dd { width: 48%; }
#risk .riskwrap .danger h4 {
	margin: 0 auto;
	width: 100%;
	max-width: 256px;
	background-color: #f4940c;
	border-radius: 128px;
	color: #fff;
	font-weight: 500;
	line-height: 2.0;
	text-align: center;
}
#risk .riskwrap .danger h5 {
	margin: 1.0em 0;
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}
#risk .riskwrap .danger h5 em { color: #f4940c; }

@media screen and (max-width: 1280px) {
	#risk { z-index: 1; }
}
@media screen and (max-width: 767px) {
	#risk {
		margin-top: 4.0em;
		padding: 4.0em 0;
	}
	#risk .riskwrap .danger dl,
	#risk .riskwrap .danger dl:nth-child(odd) {
		flex-direction: column;
		gap: 1.5em 0;
	}
	#risk .riskwrap .danger dl dt,
	#risk .riskwrap .danger dl dd { width: 100%; }
}
@media screen and (max-width: 640px) {
	#risk .riskwrap { gap: 0 5%; }
	#risk .riskwrap h3 {
		padding: 1.0em 0.25em 0;
		border-top: 4px solid #f4940c;
		writing-mode: vertical-rl;
		font-size: 2.1rem;
	}
}
@media screen and (max-width: 420px) {
	#risk {
		margin-top: 3.0em;
		padding: 3.0em 0;
	}
	#risk .riskwrap {
		flex-direction: column;
		gap: 1.0em 0;
	}
	#risk .riskwrap h3 {
		padding: 0.25em 0 0.25em 0.75em ;
		border-top: 0;
		border-left: 4px solid #f4940c;
		writing-mode: horizontal-tb;
		font-size: 1.8rem;
	}

}



/* --------------------------------------------------- */
/* FPの家 */
/* --------------------------------------------------- */
#aboutfp { padding: 3.0em 0 0; }
#aboutfp .inblock {
	margin: 0 auto;
	width: 90%;
	max-width: 1080px;
}
#aboutfp .logo {
	margin: 0 auto;
	width: 50%;
	max-width: 180px;
}
#aboutfp h3 {
	margin-top: 1.5em;
	font-size: 2.4rem;
	font-weight: 500;
	text-align: center;
}
#aboutfp .slider { margin-top: 4.0em; }
#aboutfp .raise {
	padding: 4.0em 0 5.0em;
	background-color: #f3f3f3;
}
#aboutfp  h4 {
	margin: 0 0 2.0em;
	font-size: 2.1rem;
	font-weight: 500;
	text-align: center;
}
#aboutfp .points {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1.25em 0;
	font-size: 1.6rem;
}
#aboutfp .points li {
	box-sizing: border-box;
	padding: 1.5em;
	width: 31.33%;
	background-color: #fff;
	border-radius: 12px;
}
#aboutfp .points + p {
	margin: 1.0em 0 4.0em;
	font-size: 1.2rem;
}
#aboutfp .awards {
	display: flex;
	background-color: #fff;
	padding: 3.0em 0;
	border-radius: 12px;
}
#aboutfp .awards > div {
	box-sizing: border-box;
	padding: 0 1.0em;
	width: 33.33%;
}
#aboutfp .awards > div:nth-child(n+2) {
	border-left: 1px solid #eee;
}
#aboutfp .awards figure {
	margin: 0 auto;
	width: 90%;
	max-width: 200px;
}
#aboutfp .awards h3 {
	margin: 1.0em 0 0.5em;
	font-size: 2.4rem;
	font-weight: 500;
	line-height: 1.4;
}
#aboutfp .awards h3::before {
	content: attr(data-eng)'';
	display: block;
	font-size: 50%;
	font-weight: 600;
}
#aboutfp .awards p { text-align: center; }
#aboutfp .awards .kda h3::before,
#aboutfp .awards .kda p { color: #2d803c; }
#aboutfp .awards .gda h3::before,
#aboutfp .awards .gda p { color: #c00014; }
#aboutfp .awards .jra h3::before,
#aboutfp .awards .jra p { color: #c09b30; }

@media screen and (max-width: 767px) {
	#aboutfp { padding: 2.0em 0 0; }
	#aboutfp .logo { max-width: 160px; }
	#aboutfp h3 { font-size: 2.1rem; }
	#aboutfp .slider { margin-top: 3.0em; }
	#aboutfp .raise { padding: 3.0em 0 4.0em; }
	#aboutfp  h4 { margin: 0 0 1.5em; font-size: 1.8rem; }
	#aboutfp .points {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 1.25em 0;
		font-size: 1.6rem;
	}
	#aboutfp .points li {
		padding: 1.25em 1.5em;
		width: 48.5%;
	}
	#aboutfp .awards p { text-align: left; }
	#aboutfp .awards p span { display: inline; }

}
@media screen and (max-width: 560px) {
	#aboutfp .logo { max-width: 144px; }
	#aboutfp h3 { font-size: 1.8rem; }
	#aboutfp .awards {
		padding: 0;
		flex-direction: column;
		align-items: center;
	}
	#aboutfp .awards > div {
		box-sizing: border-box;
		padding: 2.0em 0;
		width: 80%;
		max-width: 320px;
	}
	#aboutfp .awards > div:nth-child(n+2) {
		border-left: 0;
		border-top: 1px solid #eee;
	}
	#aboutfp .awards figure {
		margin: 0 auto;
		width: 90%;
		max-width: 128px;
	}
	#aboutfp .awards h3 {
		margin: 1.0em 0 0.5em;
		font-size: 2.1rem;
	}
	#aboutfp .awards p { font-size: 1.4rem; }

}
@media screen and (max-width: 420px) {
	#aboutfp .logo { max-width: 128px; }
	#aboutfp .slider { margin-top: 2.0em; }
	#aboutfp .raise { padding: 2.0em 0 3.0em; }
	#aboutfp .points {
		gap: 0.5em 0;
	}
	#aboutfp .points li {
		padding: 1.0em 2.5%;
		width: 49%;
	}
}



/* --------------------------------------------------- */
/* 会社概要 */
/* --------------------------------------------------- */
#profile { padding-left: 5%; padding-right: 5%;  background-color: #f3f3f3; }
#profile .contents {
	box-sizing: border-box;
	position: relative;
	padding: 40px 30px;
	background-color: #fff;
	width: 100%;
	max-width: 960px;
}
#profile h2 {
	position: absolute;
	top: 0;
	left: 30px;
	display: table;
	padding: 0 40px;
	background-color: #f4940c;
	color: #fff;
	font-size: 1.8rem;
	line-height: 36px;
	transform: translateY(-50%);
}
#profile .inner {
	margin: 0 auto;
	width: 100%;
	max-width: 600px;
}
#profile dl {
	display: table;
	width: 100%;
}
#profile dl dt {
	display: inline-block;
	padding-top: 12px;
	width: 120px;
	text-align: center;
	float: left;
}
#profile dl dd {
	padding: 12px 0 12px 120px;
	border-bottom: 1px dotted #ddd;
}
#profile h4, #profile p { font-size: 1.4rem; }
#profile p span { display: inline-block; margin-right: 12px; }
#profile p.privacy { margin-top: 10px; font-size: 1.2rem; text-align: right; }
#profile p.privacy a { color: #5eb121; }

#profile h3 {
	margin: 50px auto 0;
	padding: 20px;
	width: 100%;
	max-width: 960px;
	border: 1px solid #f4940c;
	box-sizing: border-box;
	color: #f4940c;
	font-size: 2.1rem;
	font-weight: 700;
	text-align: center;
}
#profile h3 span { display: inline-block; }
#strength #profile h2 {
	background-color: #55c1de;
}
#strength #profile h3 {
	border: 1px solid #55c1de;
	color: #55c1de;
}



@media screen and (max-width: 640px) {
	#profile { padding-left: 4%; padding-right: 4%;  }
	#profile .contents { padding: 25px 20px; }
	#profile h2 {
		position: absolute;
		top: 0;
		left: 50%;
		margin: 0 auto;
		font-size: 1.5rem;
		line-height: 32px;
		transform: translate(-50%, -50%);
	}
	#profile dl dt {
		padding-top: 10px;
		width: 50px;
	}
	#profile dl dd { padding: 10px 0 10px 50px; }
	#profile h3 {
		margin: 30px auto 0;
		padding: 16px 4%;
		font-size: 1.6rem;
	}
}
@media screen and (max-width: 420px) {
	#profile h4, #profile p { font-size: 1.2rem; }
	#profile p.privacy { margin-top: 5px; font-size: 1.0rem; }
	#profile h3 {
		margin: 20px auto 0;
		padding: 16px 4%;
		font-size: 1.4rem;
	}
}


/* --------------------------------------------------- */
/* フォーム */
/* --------------------------------------------------- */
#form {
	padding-left: 4%;
	padding-right: 4%;
	background-color: #f4940c;
}
#strength #form { background-color: #55c1de; }
#form .contents { width: 100%; max-width: 960px; }


/* 見出し部 */
/* --------------------------------------------------- */
#form .contacthead {
	position: relative;
	display: table;
	width: 100%;
	color: #fff;
	text-align: center;
}
#form .contacthead em {
	position: relative;
	display: inline-block;
	margin-bottom: 1.0em;
	padding: 0 2.5em;
	background-color: #fff;
	border-radius: 240px;
	color: #f4940c;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 2.2;
}
#strength #form .contacthead em { color: #55c1de; }
#form .contacthead em span { position: relative; z-index: 2; }
#form .contacthead em::after {
	content: '';
	position: absolute;
	top: 98%;
	left: 50%;
	display:block;
	width: 14px;
	height: 14px;
	background-color: #fff;
	transform: rotate(22deg) skew(0,45deg) translate(-50%);
}

#form .contacthead h2 {
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 1.4;
}
#form .contacthead h2 span {
	display: inline-block;
	padding-left: 80px;
	background-image: url('../image/livability/ic-book.png');
	background-repeat: no-repeat;
	background-size: 72px auto;
	background-position: 0 50%;
}
#form .contacthead p { margin-top: 20px; font-size: 1.6rem; }
#form .contacthead p span { display: inline-block; }
#form .contacthead p.note { font-size: 1.2rem; text-align: left;}

@media screen and (max-width: 767px) {
	#form .contacthead {
		position: relative;
		display: table;
		width: 100%;
		color: #fff;
	}
	#form .contacthead em {
		margin-bottom: 1.0em;
		padding: 0 2.0em;
		font-size: 1.4rem;
	}
	#form .contacthead h2 { font-size: 3.2rem; }
	#form .contacthead h2 span {
		padding-left: 64px;
		background-size: 56px auto;
	}
	#form .contacthead p { margin-top: 15px; }


}
@media screen and (max-width: 420px) {
	#form .contacthead {
		position: relative;
		display: table;
		width: 100%;
		color: #fff;
	}
	#form .contacthead::before {
		top: -30px;
		width: 135px;
		height: 180px;
	}
	#form .contacthead em {
		margin-bottom: 1.0em;
		padding: 0 2.0em;
		font-size: 1.3rem;
	}
	#form .contacthead h2 { font-size: 2.4rem; }
	#form .contacthead h2 span {
		padding-left: 54px;
		background-size: 48px auto;
	}
	#form .contacthead p { margin-top: 10px; text-align: left; }
	#form .contacthead p span { display: inline; }
}

/* 電話 */
/* --------------------------------------------------- */
#form address {
	margin-top: 30px;
	color: #fff;
	font-style: normal;
}
#form address dl {
	display: table;
	margin: 0 auto;
	width: 100%;
	max-width: 840px;
}
#form address dl dt {
	display: inline-block;
	width: 480px;
	float: left;
}
#form address dl dd { margin-left: 500px; }
#form address h3 { font-size: 2.0rem; }
#form address p { font-size: 1.4rem; }
#form address h3 span,
#form address p span { display: inline-block; }
#form address p span { padding: 0 8px; }
#form address a {
	display: inline-block;
	padding-left: 40px;
	background-image: url('../image/cause/freedial.png');
	background-repeat: no-repeat;
	background-size: 32px auto;
	background-position: 0 50%;
	font-size: 4.2rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: right;
}



@media screen and (max-width: 960px) {
	#form address dl dt {
		display: block;
		width: 100%;
		float: none;
		text-align: center;
	}
	#form address dl dd {
		margin-left: 0;
		text-align: center;
	}
}
@media screen and (max-width: 767px) {
	#form address h3 { font-size: 1.8rem; }
	#form address a {
		padding-left: 40px;
		background-size: 32px auto;
		font-size: 3.6rem;
		text-align: center;
	}
}
@media screen and (max-width: 420px) {
	#form address { margin-top: 15px; }
	#form address h3 { font-size: 1.6rem; }
	#form address p { font-size: 1.2rem; }
	#form address a {
		padding-left: 32px;
		background-size: 28px auto;
		font-size: 3.2rem;
		text-align: center;
	}
}


/* フォーム */
/* --------------------------------------------------- */
#form :focus { outline: none; }
#form form {
	margin-top: 2.0em;
	padding: 36px 5%;
	background-color: #fff;
	border-radius: 12px;
	box-shadow: 6px 6px 12px rgba(0,0,0,0.08);
}
form h2 {
	color: #8CC120;
	font-size: 3.2rem;
	font-weight: 700;
	text-align: center;
}
form h2 + p {
	margin-top: 20px;
	text-align: center;
}
form dl {
	display: table;
	margin-top: 20px;
	width: 100%;
	border-top: 1px solid #ddd;
}
form dl dt {
	display: inline-block;
	padding: 20px 0 0 0;
	width: 240px;
	float: left;
}
form dl dd { padding: 20px 0 0 240px; }
form dl dd.line {
	padding: 20px 0 20px 240px;
	border-bottom: 1px solid #ddd;
}
form dl dd div { min-height: 40px; }
form h4 { font-size: 1.6rem; }
form h4.required::after {
	content: '必須';
	display: inline-block;
	margin-left: 6px;
	padding: 0 6px;
	background-color: #d00;
	border-radius: 3px;
	color: #fff;
	font-size: 1.0rem;
	line-height: 16px;
}
form .unit { margin-left: 5px; font-size: 1.4rem; }
form dl dd div p { margin-top: 5px; font-size: 1.2rem; }
form dl dd div p em { color: #d00; }

form input[type=text],
form input[type=email],
form input[type=password],
form input[type=tel] { border: 2px solid #ddd; }
form textarea { border: 2px solid #ddd; }
form input[type=submit] { font-size: 1.8rem; background-color: #02aa31; }
#strength form input[type=submit] { font-size: 1.8rem; background-color: #fcbe22; }


@media screen and (max-width: 767px) {
	#form form { padding: 30px 4%; }
	form h2 { font-size: 2.4rem; }
	form h2 + p { margin-top: 12px; }
	form dl dt {
		padding: 15px 0 0 0;
		width: 180px;
	}
	form dl dd { padding: 15px 0 0 180px; }
	form dl dd.line { padding: 15px 0 15px 180px; }
	form h4 { font-size: 1.4rem; }

}
@media screen and (max-width: 640px) {
	form dl dt {
		padding: 15px 0 0 0;
		width: 100%;
		float: none;
	}
	form dl dd { padding: 15px 0 0 0; }
	form dl dd.line {
		padding: 15px 0 15px 0;
		border-bottom: 1px solid #ddd;
	}
	form dl dd.line.check { padding: 5px 0 15px 0; }
	form dl dd div { min-height: 0; }
	form .empty { display: none; }
	form h4 br { display: none; }
	form input[type=submit] { font-size: 1.6rem; }
}
@media screen and (max-width: 420px) {
	#form form { padding: 20px 4%; }
	form h2 { font-size: 1.8rem; }
	form h2 + p { margin-top: 5px; font-size: 1.2rem; }
	form input[type=submit] { font-size: 1.4rem; }
}


/* 確認画面 */
/* --------------------------------------------------- */
#confirm.contents { margin: 4.0em auto 0; }
#confirm form dt.empty,
#confirm form dt.empty + dd div { display: none; }



/* 完了画面 */
/* --------------------------------------------------- */
.thanks {
	padding: 40px 4%;
	background-color: #fff;
	box-shadow: 6px 6px 12px rgba(0,0,0,0.08);
}
.thanks h2 {
	color: #5eb121;
	font-size: 3.2rem;
	font-weight: 700;
	text-align: center;
}
.thanks h2 span { display: inline-block; }
.thanks h2 + p {
	margin-top: 20px;
	font-size: 1.6rem;
}

@media screen and (max-width: 767px) {
	.thanks { padding: 30px 4%; }
	.thanks h2 { font-size: 2.4rem; }
	.thanks h2 + p { margin-top: 12px; }
}
@media screen and (max-width: 420px) {
	.thanks { padding: 20px 4%; }
	.thanks h2 { font-size: 1.8rem; }
	.thanks h2 + p { margin-top: 5px; font-size: 1.2rem; }
}