@charset "utf-8";


/* ============================================================================================
	fonts
============================================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');


/* ============================================================================================
	variables
============================================================================================= */
:root {
	--text-color:#4a5568;
	--background:#fff;
	--color-orange:#ef6a5a;
	--font-family:'Noto Sans JP' ,sans-serif;
	--font-number:'Jost' ,'Noto Sans JP' ,sans-serif;
	--font-alphabet:'Montserrat' ,'Noto Sans JP' ,sans-serif;
	--background-gradation:transparent linear-gradient(238deg ,#57c4e6 0% ,#acd134 100%) 0% 0% no-repeat;
}



/* ============================================================================================
	initialize
============================================================================================= */
main *,main *:before,main *:after {
	box-sizing:border-box;
	text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	margin:0;
	padding:0;
	border:0 none;
	vertical-align:inherit;
	color:inherit;
	line-height:inherit;
	font-size:inherit;
	font-style:inherit;
	font-weight:inherit;
	text-decoration:inherit;
}

main ol,main ul,main li {
	list-style:none;
}




/* ============================================================================================
	common
============================================================================================= */
body {
	color:var(--text-color);
	background:var(--bg-color);
}

main {
	margin-top:-90px;
	padding-bottom:3rem;
}
main > section:not(#fv) {
	padding-top:6rem;
}

.alt {
	display:none;
}
.font-alphabet {
	font-family:var(--font-alphabet);
}
.color-orange {
	color:var(--color-orange);
}


@media screen and (min-width: 768px) {
	.sp {
		display:none !important;
	}
	#body-frame ,
	#footer_cta {
		min-width:1200px;
	}
	.w1200 {
		width:1200px;
		margin:0 auto;
	}
	.w1000 {
		width:1000px;
		margin:0 auto;
	}
	.w670 {
		width:670px;
		margin:0 auto;
	}

	.l-header__inner {
		padding:18px 80px 18px 15px;
	}
}
@media screen and (max-width: 767px) {
	.pc {
		display:none !important;
	}
	.l-header {
		display:none;
	}
	#body-frame {
		width:480px;
	}
}





/* ============================================================================================
	cta
============================================================================================= */
.cta-panel {
	padding:2.5rem;
	color:#fff;
	background:var(--background-gradation);
	border-radius:1rem;
}

.cta-label {
	letter-spacing:0.15rem;
	text-align:center;
}
.cta-label span {
	font-size:1.6rem;
}
.cta-label em {
	font-weight:bold;
}

.cta-buttons {
	padding:2rem 0;
	display:flex;
	justify-content:space-evenly;
}
.cta-buttons a {
	position:relative;
}
.cta-buttons a:after {
	content:"";
	position:absolute;
	top:50%;
	right:1.5rem;
	width:1rem;
	height:1rem;
	transform:translate( 0 ,-50% );
	background:url("../../images/awf-images/link_arrow.webp") 50% 50% no-repeat;
	background-size:contain;
	transition:transform 0.3s ease;
}
.cta-buttons a img {
	border-radius:0.8rem;
	filter:drop-shadow(5px 5px 5px rgba(3,125,137,0.55));
}

.cta-tel {
	display:flex;
	justify-content:center;
	align-items:center;
	gap:1.8rem;
}

.cta-tel .cta-tel-label {
	font-size:1.5rem;
	letter-spacing:0.15rem;
}

.cta-tel .l-header__tel {
	text-align:center;
}
.cta-tel a.l-header__telLink {
	font-size:2.5rem;
	font-family:var(--font-number);
	filter:invert(1) grayscale(1);
}
.cta-tel .l-header__telLinkIcon {
	width:1.3rem;
}
.cta-tel .l-header__telTime {
	font-size:0.9rem;
	font-weight:normal;
	letter-spacing:0.05rem;
}


@media (any-hover: hover) {
	.cta-buttons a {
		transition: opacity 0.3s ease;
	}
	.cta-buttons a:hover:after {
		transform:translate( 0.5rem ,-50% );
	}
	.cta-buttons a:hover {
		opacity: 0.8;
	}
}

@media screen and (max-width: 767px) {
	main > section:not(#fv).cta {
		padding:6rem 1rem 0;
	}
	#problem + section:not(#fv).cta {
		padding-top:3rem;
	}
	.cta-panel {
		padding:2.5rem 0 1.5rem;
	}
	.cta-label {
		letter-spacing:0;
		line-height:1.6;
	}
	.cta-label span {
		font-size:1.4rem;
	}
	.cta-buttons {
		padding:2rem 1.5rem;
		flex-direction:column;
		gap:1.5rem;
	}
	.cta-time {
		padding-top:0.5rem;
		text-align:center;
	}
}


/* ============================================================================================
	fv
============================================================================================= */
#fv .bg {
	height:920px;
	padding-top:320px;
	background:url(../../images/awf-images/fv.webp) 50% 0 no-repeat;
	background-size:cover;
}
.fv-points {
	display:flex;
	justify-content:center;
	gap:0.8rem;
}

@media screen and (max-width: 767px) {
	#fv .bg {
		height:auto;
		aspect-ratio:720/1200;
		background-image:url(../../images/awf-images/_sp_fv.webp);
	}
	.fv-points {
		flex-direction:column;
	}
}




/* ============================================================================================
	problem
============================================================================================= */
.problem-1 {
	position:relative;
	height:460px;
	background:url(../../images/awf-images/problem.webp) 50% 100% no-repeat;
}

.problem-1 h2 {
	text-align:center;
}
.problem-1 h2 > span {
	font-size:2rem;
}

.problem-1 p > span {
	line-height:1.2;
	font-size:1.3rem;
}

.problem-1 .problem-1a {
	position:absolute;
	top:7.8rem;
	left:3.8rem;
}
.problem-1 .problem-1b {
	position:absolute;
	top:10.3rem;
	left:26.3rem;
}
.problem-1 .problem-1c {
	position:absolute;
	top:7.6rem;
	left:52.5rem;
}


.problem-2 {
	padding-top:8rem;
	background:url(../../images/awf-images/icon_down.webp) 50% 3rem no-repeat;
	background-size:4rem;
}
.problem-2 h3 > span {
	font-size:2.3rem;
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
}
.problem-2 h3 em {
	font-weight:bold;
}
.problem-2 h3 em.color-orange {
	font-weight:900;
}
.solutions {
	padding-top:1rem;
	display:flex;
	justify-content:space-between;
}
.solutions > li {
	position:relative;
	width:32%;
	padding-top:2rem;
}
.solution-frame {
	border:2px solid var(--text-color);
	border-radius:1rem;
	overflow:hidden;
}
.solution-frame:after {
	content:"";
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	width:3.5rem;
	aspect-ratio:1/1;
	background:url(../../images/awf-images/icon_solution_a.webp) 50% 50% no-repeat;
	background-size:contain;
}
.solution-frame.icon-b:after {
	background-image:url(../../images/awf-images/icon_solution_b.webp);
}
.solution-frame.icon-c:after {
	background-image:url(../../images/awf-images/icon_solution_c.webp);
}

.solution-frame h4{
	height:7rem;
	padding-top:0.3rem;
	line-height:1.3;
	color:#fff;
	font-weight:bold;
	background:var(--text-color);
	text-align:center;
	display:flex;
	justify-content:center;
	align-items:center;
}
.solution-frame h4 > span {
	font-size:1.2rem;
}
.solution-frame h4 > span em {
	font-size:1.6rem;
}
.solution-frame p {
	height:9rem;
	padding:1rem 1.3rem;
	line-height:1.6;
	color:var(--text-color);
	text-align:justify;
}
.solution-frame p {
	font-size:1.1rem;
}


.problem-3 {
	padding-top:4rem;
	text-align:center;
}
.problem-3 p.strong > span {
	padding-left:2rem;
	font-size:3.3rem;
	font-weight:bold;
}
.problem-3 p > span {
	font-size:1.5rem;
}
.problem-3 p > span em {
	font-weight:900;
}

@media screen and (max-width: 767px) {
	.problem-1 {
		height:calc(480px / 720 * 900 + 3.4rem);
		background-image:url(../../images/awf-images/_sp_problem.webp);
		background-size:480px;
	}
	.problem-1 h2 {
		line-height:1.3;
	}
	.problem-1 h2 > span {
		font-size:2.5rem;
	}
	.problem-1 p > span {
		font-size:1.2rem;
	}
	.problem-1 .problem-1a {
		top:8.5rem;
		left:3.6rem;
	}
	.problem-1 .problem-1b {
		top:21.3rem;
		left:2rem;
	}
	.problem-1 .problem-1c {
		top:15rem;
		left:12rem;
	}

	.problem-2 h3 img {
		height:3.5rem;
	}
	.problem-2 h3 > span:nth-child(2) {
		line-height:1.4;
		display:block;
	}

	.solutions {
		align-items:center;
		flex-direction:column;
		gap:1rem;
	}
	.solutions > li {
		width:95%;
	}
	.solution-frame h4 {
		height:5.5rem;
	}

	.problem-3 p {
		padding-top:1rem;
		line-height:1.6;
	}
	.problem-3 p > span {
		font-size:1.4rem;
	}
}



/* ============================================================================================
	about
============================================================================================= */
#about .bg {
	color:#fff;
	background:url(../../images/awf-images/about.webp) 50% 50% no-repeat;
	background-size:cover;
}
#about .bg > div {
	padding:6rem 0;
	text-align:center;
}
#about .bg em {
	font-weight:bold;
}

#about .bg h2 > span {
	font-size:2.5rem;
}

#about .bg p {
	padding-top:1.6rem;
	line-height:1.6;
}
#about .bg p > span {
	font-size:1.4rem;
}

@media screen and (max-width: 767px) {
	#about .bg {
		background-image:url(../../images/awf-images/_sp_about.webp);
	}
	#about .bg h2 {
		line-height:1.3;
	}
	#about .bg h2 > span {
		font-size:2.4rem;
	}
}



/* ============================================================================================
	features
============================================================================================= */
#features h2 {
	text-align:center;
}
#features h2 > span {
	font-size:2.5rem;
}
.features-list {
	padding-top:2rem;
	display:flex;
	flex-direction:column;
	gap:1.5rem;
}
.feature-cell {
	height:8rem;
	border:2px solid var(--text-color);
	border-radius:1rem;
	display:flex;
	overflow:hidden;
}
.feature-cell h3 {
	position:relative;
	width:22rem;
	height:100%;
	padding-left:5.5rem;
	color:#fff;
	background:url(../../images/awf-images/icon_feature_a.webp) 1rem 52% no-repeat var(--text-color);
	background-size:4rem;
	display:flex;
	align-items:center;
}
.feature-cell h3:after {
	content:"";
	position:absolute;
	top:50%;
	left:100%;
	transform:translate(-1px,-50%);
	display:block;
	width:1rem;
	aspect-ratio:2/3;
	background:var(--text-color);
	clip-path:polygon(0 0,100% 50%,0 100%);
}
.feature-cell.feature-b h3 {
	background-image:url(../../images/awf-images/icon_feature_b.webp);
}
.feature-cell.feature-c h3 {
	background-image:url(../../images/awf-images/icon_feature_c.webp);
}
.feature-cell.feature-d h3 {
	background-image:url(../../images/awf-images/icon_feature_d.webp);
}
.feature-cell h3 > span {
	line-height:1.4;
	font-size:1.5rem;
	font-weight:500;
}
.feature-cell p {
	width:calc(100% - 22rem);
	height:100%;
	padding-left:3rem;
	padding-right:2rem;
	display:flex;
	align-items:center;
}
.feature-cell p > span {
	line-height:1.6;
	font-size:1.2rem;
}

@media screen and (max-width: 767px) {
	.features-list {
		padding:2rem 1rem 0;
	}
	.feature-cell {
		height:auto;
		flex-direction:column;
	}
	.feature-cell h3 {
		width:100%;
		height:6.5rem;
		padding-left:9.5rem;
		background-position:4rem 52%;
		background-size:4.5rem;
	}
	.feature-cell h3:after {
		top:100%;
		left:50%;
		transform:translate(-50%,-1px);
		width:1.5rem;
		aspect-ratio:3/2;
		background:var(--text-color);
		clip-path:polygon(0 0,100% 0,50% 100%);
	}

	.feature-cell h3 > span {
		line-height:1.3;
		font-size:1.7rem;
	}
	.feature-cell p {
		width:100%;
		height:auto;
		padding:1.5rem 1.2rem;
	}
}



/* ============================================================================================
	flow
============================================================================================= */
#flow h2 {
	text-align:center;
}
#flow h2 > span {
	font-size:2.5rem;
}
.flow-subtext {
	padding-top:1rem;
	display:flex;
	justify-content:center;
	align-items:center;
}
.flow-subtext > span {
	font-size:1.5rem;
	display:flex;
	justify-content:center;
	align-items:center;
}
.flow-subtext em {
	padding:0 0.3rem;
	font-size:1.6rem;
	font-weight:900;
}

.flow-list {
	padding-top:2rem;
}

.flow-cell-image {
	position:relative;
	border:1px solid var(--text-color);
	border-radius:1rem;
	overflow:hidden;
	cursor:pointer;
}
.flow-cell-image:after {
	content:"";
	position:absolute;
	right:0.6rem;
	bottom:0.6rem;
	display:block;
	width:2.5rem;
	aspect-ratio:1/1;
	background:url(../../images/awf-images/icon-open.svg) 50% 50% no-repeat;
	background-size:contain;
}
.flow-cell-image img {
	width:100%;
}

.flow-cell-head {
	padding:1.5rem 0;
	display:flex;
	align-items:center;
}
.flow-cell-head-label {
	padding-left:0.5rem;
}
.flow-cell-head-label h3 {
	line-height:1.2;
	font-size:1.7rem;
	font-weight:bold;
	letter-spacing:0.1rem;
}
.flow-cell-head-label p {
	padding-top:0.3rem;
	line-height:1.6;
	font-size:1.1rem;
}

.flow-cell-arrow {
	padding-bottom:2rem;
	display:flex;
	justify-content:center;
}
.flow-cell-arrow img {
	width:4rem;
}

@media (any-hover: hover) {
	.flow-cell-image {
		transition: opacity 0.3s ease;
	}
	.flow-cell-image:hover {
		opacity: 0.8;
	}
}

@media screen and (max-width:767px) {
	.flow-subtext {
		flex-direction:column;
	}
	.flow-list {
		padding:2rem 1rem 0;
	}
	.flow-cell-head {
		flex-direction:column;
	}
	.flow-cell-head-label h3 {
		text-align:center;
	}
	.flow-cell-head-label p {
		font-size:1.05rem;
	}
}



/* ==============================================
	modal
=============================================== */
body.flow-modal-on {
	width:100%;
	height:100%;
	overflow:hidden;
}
body.flow-modal-on #body-frame {
	overflow-y:scroll;
}
#flow-modal {
	position:fixed;
	z-index:100;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100% !important;
	height:100% !important;
	background:rgba(0,0,0,0.5);
	backdrop-filter:blur(0.1em);
	display:none;
	cursor:pointer;
}

#flow-modal-frame {
	width:100%;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
}
#flow-modal-panel {
	width:80%;
	height:80%;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	gap:1rem;
}
#flow-modal-close {
	align-self:flex-end;
	width:2.5rem;
	aspect-ratio:1/1;
	object-fit:contain;
}
#flow-modal-image {
	max-width:100%;
	max-height:calc(100% - 3.5rem);
}

@media screen and (min-width:768px) { 
	#flow-modal-frame {
		min-width:1200px;
		min-height:600px;
	}
}
@media screen and (max-width:767px) { 
	#flow-modal-panel {
		width:96%;
		padding:0.5em 1em 1.5em;
	}
}




/* ============================================================================================
	movie
============================================================================================= */
#movie {
	padding-bottom:6rem;
}
.movie-baloon {
	display:flex;
	justify-content:center;
}
.movie-frame {
	padding-top:0.5rem;
}
.movie-notice {
	padding-top:1.5rem;
	text-align:center;
}
.movie-notice > span {
	font-size:1.3rem;
}

@media (any-hover: hover) {
	.movie-frame {
		transition: opacity 0.3s ease;
	}
	.movie-frame:hover {
		opacity: 0.9;
	}
}

@media screen and (max-width:767px) {
	.movie-baloon {
		padding:0 2.5rem;
	}
	.movie-frame {
		padding:0.5rem 1rem 0
	}
	.movie-notice {
		line-height:1.4;
		padding:1rem 1.5rem 0;
		text-align:left;
	}
	.movie-notice > span {
		font-size:1.2rem;
	}
}



/* ============================================================================================
	utilize
============================================================================================= */
#utilize {
	padding-bottom:6rem;
	background:#f6f6f6;
}
.utilize-head {
	padding-top:3rem;
	text-align:center;
	background:url(../../images/awf-images/utilize_icons.webp) 50% 0 no-repeat;
	background-size:auto 3rem;
}
.utilize-head h2 > span {
	font-size:2rem;
}
.utilize-head p {
	padding-top:1.5rem;
}
.utilize-head p > span {
	font-size:1.3rem;
}
.utilize-head p > span em {
	font-weight:900;
}

.utilize-list {
	padding-top:2rem;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:2rem;
}
.utilize-cell {
	width:478px;
}
.utilize-cell-frame {
	width:100%;
	background:#fff;
	border-radius:0.8rem;
	box-shadow:0 0 0.5rem #ccc;
}
.utilize-cell-information {
	padding:1rem 1.5rem 2rem;
}
.utilize-cell-information .main-text {
	height:4.5rem;
	line-height:1.4;
	display:flex;
	align-items:center;
}
.utilize-cell-information .main-text > span {
	font-size:1.3rem;
}
.utilize-cell-information .main-text > span em{
	font-size:1.5rem;
}
.utilize-cell-information .sub-text {
	padding-top:0.5rem;
	line-height:1.6;
}
.utilize-cell-information .sub-text > span {
	font-size:1.1rem;
}

.utilize-notice {
	padding-top:3rem;
	text-align:center;
}
.utilize-notice p > span {
	font-size:1.3rem;
}
.utilize-notice p > span em {
	font-weight:900;
}

@media screen and (max-width:767px) {
	.utilize-head {
		padding-top:4rem;
		background-size:auto 3.5rem;
	}
	.utilize-head h2 {
		line-height:1.4;
	}
	.utilize-head h2 > span {
		font-size:2.5rem;
	}
	.utilize-head p {
		padding-left:1.2rem;
		text-align:left;
	}
	.utilize-head p > span {
		font-size:1.25rem;
	}
	.utilize-cell {
		width:100%;
		padding:0 1rem;
	}
	.utilize-cell-information .sub-text > span em {
		font-weight:bold;
	}
}