/* page_factoryroof-lp */
body.page_factoryroof-lp,
body.page_factoryroof-lp-thanks {
	font-family: 'Noto Sans JP', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
	letter-spacing: 0.05em;
	line-height: 1;
	background-color: #FDF0E8;
	font-size: 18px;
	color: #111;
}
body.page_factoryroof-lp .fr-txt-keycolor,
body.page_factoryroof-lp-thanks .fr-txt-keycolor { color: #ED7D31; }
body.page_factoryroof-lp a,
body.page_factoryroof-lp-thanks a {
	text-decoration: none;
	color: inherit;
}
body.page_factoryroof-lp figure:not([class]),
body.page_factoryroof-lp-thanks figure:not([class]) { margin: 0; }
.fr-mv {
	margin: 0 auto;
	padding: 24px 0 0;
	background: url(../images/factoryroof-lp/bg-mv.jpg) no-repeat center center;
	background-size: cover;
}
.fr-mv header {
	position: relative;
	display: flex;
	justify-content: flex-end;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0;
	z-index: 98;
}
.fr-header-cta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px 0;
}
.fr-header-cta .fr-header-tel {
	padding: 4px 16px 6px;
	border-radius: 50px;
	background: #ED7D31;
	text-align: center;
	line-height: 1;
	color: #fff;
}
.fr-header-cta a {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 4px;
	font-size: 28px;
	text-decoration: none;
	color: #333;
}
.fr-header-cta a img { width: 30px; }

.fr-mv-inner {
	position: relative;
	margin: -56px auto 0;
	padding: 0 16px;
	max-width: 1080px;
	z-index: 99;
}
.fr-title {
	margin: 0;
	padding: 0;
}
.fr-title img {
	width: 100%;
	height: auto;
	max-width: unset;
	max-height: unset;
}

.fr-section {
	margin: 0;
	padding: 0;
}
.fr-section.is-white { background: #fff; }
.fr-section-inner {
	margin: 0 auto;
	padding: 120px 16px;
	max-width: 1080px;
}
.fr-section-inner.is-top { padding-top:40px; }
.fr-section h2 {
	margin-bottom: 40px;
	font-size: 60px;
	text-align: center;
}

.fr-question {
	margin-bottom: 40px;
	padding: 80px 0;
	background: url(../images/factoryroof-lp/bg-section01top.svg) no-repeat left top,
							url(../images/factoryroof-lp/bg-section01btm.svg) no-repeat right bottom;
	background-size: auto;
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto;
	grid-template-areas: "title title"
												"img txt";
	justify-content: center; 
	align-content: center;
	align-items: center;
}
.fr-question h2 {
	grid-area: title;
	margin-bottom: 60px;
	text-align: center;
	font-size: 60px;
}
.fr-question ul {
	margin: 0;
	grid-area: txt;
	list-style-type: none;
}
.fr-question ul li {
	padding-left: 28px;
	font-size: 24px;
}
.fr-question ul li:not(:last-child) { margin-bottom: 16px; }
.fr-question ul li::before {
	display: inline-block;
	width: 32px;
	height: 24px;
	margin-left: -28px;
	background: url(../images/factoryroof-lp/icon-pin.png) no-repeat left top;
	background-size: 24px auto;
	content: '';
}
.fr-question  figure {
	grid-area: img;
	margin: 0;
}

.fr-point-title {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 0 24px;
	margin: 48px 0;
}
.fr-point-title h2 {
	margin: 0 0 24px;
	padding: 0;
	text-align: left;
	font-size: 52px;
}
.fr-point-title h2 span {
	position: relative;
	display: inline-block;
}
.fr-point-title h2 > span > span {
	position: relative;
	z-index: 81;
}
.fr-point-title h2 > span::after {
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	width: 100%;
	height: 16px;
	background: rgba(237, 124, 48, .5);
	transform: rotate(-0.5deg);
	content: '';
	z-index: 80;
}

.fr-point-title figure {
	display: block;
	width: 40%;
	max-width: 250px;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: #C5ECFD;
	overflow: hidden;
	text-align: center;
}
.fr-point-txt {
	margin-bottom: 1em;
	font-size: 18px;
	line-height: 1.5;
}

.fr-point {
	display: flex;
	justify-content: space-between;
	gap: 0 16px;
	margin: 40px 0;
}
.fr-point .fr-point-block {
	position: relative;
	padding: 16px;
	width: calc((100% - 32px) / 3);
}
.fr-point .fr-point-block::before {
	position: absolute;
	top: 4px;
	left: 4px;
	display: block;
	width: 100%;
	height: 100%;
	background: #F7E8EE;
	content: '';
	z-index: 10;
}
.fr-point .fr-point-block::after {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid #333;
	content: '';
	z-index: 20;
}
.fr-point .fr-point-block h3 {
	position:inherit;
	margin-bottom: 8px;
	font-size: 20px;
	z-index: 80;
}
.fr-point .fr-point-block p {
	position:inherit;
	margin: 0;
	line-height: 1.5;
	font-size: 16px;
	z-index: 80;
}
.fr-point-img {
	margin: 40px 0 !important;
	text-align: center;
}
.fr-point-img img { width: 100%; }

.fr-cta {
	padding: 24px 16px;
	background: #ED7D31;
	color: #fff;
}
.fr-cta h2 {
	margin-bottom: 16px;
	text-align: center;
	font-size: 28px;
}
.fr-cta .fr-cta-inner {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 24px;
}
.fr-cta .fr-cta-inner .fr-cta-tel {
	display: flex;
	flex-direction: column;
	flex-basis: 50%;
	gap: 8px 0;
	text-align: center;
}
.fr-cta .fr-cta-inner .fr-cta-tel a {
	display: flex;
	align-items: center;
	gap: 0 8px;
	font-size: 40px;
	color: #fff;
	white-space: nowrap;
}
.fr-cta .fr-cta-inner .fr-cta-tel a figure {
	margin: 0;
	width: 56px;
	text-align: center;
	flex-basis: 56px;
}
.fr-cta .fr-cta-inner .fr-cta-tel a figure img {
	width: 15%;
	min-width: 50px;
	flex-basis: 15%;
}
.fr-cta .fr-cta-inner .fr-cta-tel .fr-tel-small { font-size: 18px; }
.fr-cta .fr-cta-inner .fr-cta-mail { flex-basis: 50%; }
.fr-cta .fr-cta-inner .fr-cta-mail a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 24px 16px 24px 24px;
	background: #fff;
	color: #ED7D31;
}
.fr-cta .fr-cta-inner .fr-cta-mail a img { max-width: 60px; }
.fr-cta .fr-cta-inner .fr-cta-mail a:hover { background: #FDF0E8; }
.fr-cta .fr-cta-inner .fr-cta-mail a span {
	font-size: 28px;
	white-space: nowrap;
}
.fr-cta-lead {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0 16px;
	margin-bottom: 24px;
}
	.fr-cta-lead figure {
		display: block;
		flex-basis: 20vw;
		max-width: 160px;
		min-width: 100px;
		height: auto;
		aspect-ratio: 1 / 1;
		margin: 0;
		border-radius: 50%;
		background: #fff;
		overflow: hidden;
	}
	.fr-cta-lead p {
		flex-grow: 1;
		margin: 0;
		padding: 24px 24px 24px 80px;
		background: url(../images/factoryroof-lp/bg-cta.png) no-repeat left center;
		line-height: 1.4;
		font-size: 20px;
	}
	.fr-cta-lead p span {
		display: inline-block;
		background: linear-gradient(transparent 75%, #F1995E 75%);
	}

.fr-type h3 {
	margin: 24px 0 0;
	padding: 8px 16px;
	background: #ED7D31;
	font-size: 20px;
	font-weight: 400;
	color: #fff;
}
.fr-type-block {
	margin: 0 0 48px;
	padding: 0 24px 24px;
	border: 1px solid #ED7D31;
	background: #FDF0E8;
}
.fr-type-block dt {
	margin-top: 32px;
	font-weight: 600;
	font-size: 20px;
}
.fr-type-block dt::before {
	margin-right: 4px;
	color: #ED7D31;
	content: '■';
}
.fr-type-block dd { margin-top: 16px; }
.fr-type-block .fr-type-list {
	font-size: 18px;
}
.fr-type-block .fr-type-list li {
	margin-bottom: 8px;
}

.fr-way h3 {
	margin: 24px 0 0;
	padding: 8px 16px;
	background: #ED7D31;
	font-size: 20px;
	font-weight: 400;
	color: #fff;
}
.fr-way-block {
	margin: 0 0 48px;
	padding: 0 24px 24px;
	border: 1px solid #ED7D31;
	background: #fff;
	display: flex;
	justify-content: space-between;
	gap: 0 16px;
}
.fr-way-block .fr-way-txt {
	flex-basis: 60%;
}
.fr-way-block figure {
	padding-top: 48px;
	flex-basis: 40%;
	max-width: 350px;
}
.fr-way-block dt {
	margin-top: 32px;
	font-weight: 600;
	font-size: 20px;
}
.fr-way-block dt::before {
	margin-right: 4px;
	color: #ED7D31;
	content: '■';
}
.fr-way-block dd { margin-top: 16px; }
.fr-way-block .fr-way-list {
	font-size: 18px;
}
.fr-way-block .fr-way-list li {
	margin-bottom: 8px;
	line-height: 1.4;
}

.fr-example {
	margin-bottom: 60px;
}
.fr-example h3 {
	margin-bottom: 24px;
	font-size: 32px;
}
.fr-example p {
	margin-bottom: 24px;
}
.fr-example-block {
	padding: 32px;
	background: #F7E8EE;
}
.fr-example-img {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	padding: 0;
}
.fr-example-img img { margin-bottom: 8px; }
.fr-example-img span {
	display: block;
	text-align: center;
}
.fr-example-img + .fr-example-img { margin-top: 32px; }

.fr-flow {
	margin-bottom: 60px;
	padding-bottom: 60px;
	border-bottom: 1px solid #ED7D31;
}
.fr-flow ol {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 24px 1fr 24px 1fr 24px;
	grid-template-rows: repeat(3, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 24px;
}
.fr-flow ol .fr-flow-img {
	text-align: center;
}
.fr-flow ol .fr-flow-arrow {
  justify-self: center; 
  align-self: center;
}
.fr-flow ol .fr-flow-arrow img { width: 100%; }
.fr-flow ol .fr-flow-img img { margin-bottom: 8px; }


.fr-period {
	margin-bottom: 60px;
	padding-bottom: 60px;
	border-bottom: 1px solid #ED7D31;
}
.fr-txt-small {
	line-height: 1.6; 
	font-size: 14px;
}
.fr-price { margin-bottom: 120px; }
.fr-price p { line-height: 1.6; }
.fr-price h3 {
	margin-top: 32px;
	font-size: 24px;
	color: #ED7D31;
}
.fr-price h4 {
	margin-bottom: 16px;
	padding-left: 16px;
	border-left: 4px solid #ED7D31;
	font-size: 20px;
}
.fr-price .fr-price-reason-list {
	margin-bottom: 32px;
}
.fr-price .fr-price-reason-list li {
	margin-bottom: 16px;
	line-height: 1.4;
}

.fr-area {
	position: relative;
	margin-bottom: 120px;
	padding: 32px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0 16px;
}
.fr-area::before {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid #333;
	content: '';
	z-index: 80;
}
.fr-area::after {
	position: absolute;
	top: 10px;
	left: 10px;
	display: block;
	width: 100%;
	height: 100%;
	background: url(../images/factoryroof-lp/bg-area.svg) no-repeat bottom right;
	background-size: contain;
	content: '';
	z-index: 70;
}
.fr-area .fr-area-txt h2 {
	margin-bottom: 16px;
	text-align: left;
	font-size: 48px;
	z-index: 80;
}
.fr-area .fr-area-txt p {
	margin-bottom: 32px;
	line-height: 1.4;
	font-size: 18px;
	z-index: 80;
}
.fr-area .fr-area-txt ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 18px;
	z-index: 80;
}
.fr-area .fr-area-txt ul li {
	margin-bottom: 8px;
}
.fr-area figure {
	position: relative;
	margin: 0;
	flex-basis: 50%;
	width: 50%;
	max-width: 400px;
	min-width: 200px;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	z-index: 80;
}
.fr-area figure::after {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	background: url(../images/factoryroof-lp/circle-line.svg) no-repeat center center;
	background-size: cover;
	content: '';
}
.fr-area figure img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
}



footer {
	padding: 48px 0 24px;
	text-align: center;
	background: #fff;
}
footer .fr-footer-logo {
	display: block;
	margin: 0 auto 24px;
	width: 300px;
}
footer .fr-footer-link {
	margin: 0 auto 32px;
	padding: 0;
	list-style-type: none;
	display: flex;
	justify-content: center;
	align-items: center;
}
footer .fr-footer-link li:not(:last-child)::after {
	display: inline-block;
	padding: 0 16px;
	content: '｜';
}
footer .fr-footer-link li a:hover { text-decoration: underline; }


/* tablet */
@media screen and (max-width: 834px) {
	.fr-section h2 { font-size: 48px; }
	.fr-title { padding-top: 80px; }
	.fr-question h2 { font-size: 48px; }
	.fr-question figure { width: 30vw; }
	.fr-point-title h2 { font-size: 40px;	}
	.fr-point-title h2 span { font-size: 18px;}
	.fr-point-title figure {
		width: 20%;
		min-width: 150px;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.fr-cta .fr-cta-inner {
		justify-content: space-between;
		gap: 0 24px;
	}
	.fr-cta h2 { font-size: 20px; }
	.fr-cta .fr-cta-inner .fr-cta-tel a { font-size: 32px; }
	.fr-cta .fr-cta-inner .fr-cta-tel .fr-tel-small { font-size: 16px; }
	.fr-cta .fr-cta-inner .fr-cta-mail a img { max-width: 40px; }
	.fr-cta .fr-cta-inner .fr-cta-mail a span { font-size: 24px; }
	.fr-example h3 {
		width: 240px;
		padding: 24px 0 22px;
		font-size: 20px;
	}
	.fr-example-price { font-size: 24px; }
	.fr-example-block h4 { font-size: 18px; }
	.fr-example-point p {
		padding: 24px 8px 24px 64px;
		font-size: 18px;
	}
	.fr-area .fr-area-txt h2 { font-size: 32px; }
	.fr-area .fr-area-txt p {
		margin-bottom: 24px;
		font-size: 16px;
	}
	.fr-area .fr-area-txt ul { font-size: 16px; }
	.fr-cta-lead p {
		padding: 24px 8px 24px 64px;
		font-size: 20px;
	}
}

@media screen and (max-width: 667px) {
	.fr-section h2 {
		margin-bottom: 32px;
		font-size: 32px;
	}
	.fr-mv header {
		padding: 8px 0;
		justify-content: center;
	}
	.fr-header-cta {
		flex-direction: row;
		align-items: center;
		gap: 0 4px;
	}
	.fr-header-cta .fr-header-tel {
		margin: 4px;
		padding: 2px 8px 4px;
		font-size: 11px;
	}
	.fr-header-cta a { font-size: 16px; }
	.fr-header-cta a img { width: 14px; }
	.fr-title { padding-top: 80px; }
	.fr-section-inner { padding: 60px 8px; }
	.fr-question {
		padding: 56px 0;
		background-size: 100px auto;
		grid-template-areas:
		"title"
		"txt"
		"img";
		gap: 20px 0;
	}
	.fr-question h2 {
		position: relative;
		display: inline-block;
		margin: 0 auto 16px;
		font-size: 24px;
	}
	.fr-question h2::after {
		position: absolute;
		left: 0;
		bottom: -3px;
		display: block;
		width: 100%;
		height: 10px;
		background: rgba(237, 125, 49, .4);
		transform: rotate(-1.5deg);
		content: '';
	}
	.fr-question ul { padding: 0; }
	.fr-question ul li {
		padding-left: 20px;
		font-size: 18px;
		line-height: 1.2;
	}
	.fr-question ul li::before {
		margin-left: -20px;
		width: auto;
		height: 18px;
		aspect-ratio: 32 / 24;
		background-size: 18px auto;
	}
	.fr-question figure {
		width: 100%;
		text-align: center;
	}
	.fr-question figure img { width: 80%; }

	.fr-point-title {
		flex-direction: column;
		align-items: center;
		margin-bottom: 20px;
	}
	.fr-point-title h2 {
		margin-bottom: 16px;
		font-size: 28px;
	}
	.fr-point-title h2 span { font-size: 32px; }
	.fr-point-title figure {
		width: 70%;
		max-width: unset;
	}
	.fr-point {
		flex-direction: column;
		margin: 20px 0;
		gap: 16px 0;
	}
	.fr-point .fr-point-block { width: 100%; }
	.fr-way-block {
		flex-direction: column;
	}
	.fr-flow ol {
		grid-template-columns: 1fr 24px 1fr 24px;
		grid-template-rows: repeat(4, 1fr);
	}
	.fr-flow ol .fr-flow-arrow { padding-bottom: 3em; }

	.fr-cta { padding: 16px 8px; }
	.fr-cta h2 { font-size: 18px; }
	.fr-cta .fr-cta-inner {
		flex-direction: column;
		gap: 32px 0;
	}
	.fr-cta .fr-cta-inner .fr-cta-tel {
		flex-direction: column;
		align-items: center;
		gap: 16px 0;
	}
	.fr-cta .fr-cta-inner .fr-cta-tel a { font-size: 32px; }
	.fr-cta .fr-cta-inner .fr-cta-tel .fr-tel-small { font-size: 14px; }
	.fr-cta .fr-cta-inner .fr-cta-tel a figure {
		flex-basis: 32px;
		width: 32px;
	}
	.fr-cta .fr-cta-inner .fr-cta-tel a figure img {
		min-width: unset;
		width: 32px;
	}
	.fr-cta .fr-cta-inner .fr-cta-mail { flex-basis: 100%; }
	.fr-cta .fr-cta-inner .fr-cta-mail a { padding: 16px 8px; }

	.fr-area {
		flex-direction: column;
		padding: 24px;
	}
	.fr-area .fr-area-txt ul {
		display: flex;
		flex-wrap: wrap;
		gap: 0 24px;
		margin-bottom: 24px;
	}
	.fr-area figure { width: 100%; }
	.fr-cta-lead {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 8px 0;
	}
	.fr-cta-lead figure {
		flex-basis: 100px;
		width: 100px;
		min-width: unset;
		height: 100px;
	}
	.fr-cta-lead p {
		width: 100%;
		background: url(../images/factoryroof-lp/bg-cta-smp.svg) no-repeat top left;
		background-size: cover;
		padding: 48px 16px 16px 24px;
		font-size: 16px;
	}
	footer .fr-footer-link {
		flex-direction: column;
		gap: 0;
		margin-bottom: 16px;
		border-bottom: 1px dotted #ddd;
	}
	footer .fr-footer-link li {
		width: 100%;
		text-align: center;
		padding: 8px 0;
		border-top: 1px dotted #ddd;
	}
	footer .fr-footer-link li:not(:last-child)::after {
		display: none;
	}
	footer .fr-footer-link li a {
		display: block;
		width: 100%;
		text-align: center;
	}
}

.fr-registeredcontractor {
	position: relative;
	margin: 16px auto 24px;
	padding: 16px 32px;
	border-top: 2px double #ED7D31;
	border-bottom: 2px double #ED7D31;
	font-size: 20px;
}
.fr-registeredcontractor::before,
.fr-registeredcontractor::after {
	position: absolute;
	top: -10px;
	width: 1px;
	height: -webkit-calc(100% + 20px);
	height: calc(100% + 20px);
	background-color: #ED7D31;
	content: '';
}
.fr-registeredcontractor::before { left: 10px; }
.fr-registeredcontractor::after { right: 10px; }