@charset "UTF-8";

/* ================================================================================
hero
================================================================================ */
@media print, screen
{

#hero
{
	padding: 0;
	background: url("../image/hero_background.webp") no-repeat bottom center/cover;
}
#hero > .inner
{	
	display: flex;	flex-direction: column;	justify-content: center;	align-items: center;
	padding: var(--pageP) 0;
}

#hero .text1
{
	margin: 0 0 calc(10 * var(--v));

	font-size: var(--fzv18);
	font-weight: 700;
	text-align: center;
}
#hero h1
{
	margin: 0 0 calc(20 * var(--v));

	color: white;
	font-size: var(--fzv42);
	font-weight: 700;
  line-height: 1.7;
	letter-spacing: 0.1em;
	text-align: center;
}
#hero h1 span
{
	padding: 0 0.5em 0.1em;
	background: var(--Ctheme1);
}
#hero .content
{
	max-width: calc(700 * var(--v));
	border: solid 3px var(--Ctheme1);
}

#hero .line
{
	padding: calc(15 * var(--v)) var(--pageP) calc(10 * var(--v));
	background: var(--Cline);
}
#hero .line h3
{
	margin: 0 0 calc(15 * var(--v));
	color: white;
	font-size: var(--fzv18);
	font-weight: 700;
	text-align: center;
}
#hero .line ul
{
	display: flex;	justify-content: center;	align-items: stretch;
	gap: calc(5 * var(--v));
	margin: 0 0 calc(10 * var(--v));
}
#hero .line li
{
	display: flex;	align-items: center;
	flex: 1;	gap: 0.5em;

	padding: 0.5em;

	background: rgb(255,255,255,0.6);
	border-radius: 0.4em;

	font-size: var(--fzv13);
	font-weight: 700;
}
#hero .line li::before
{
	display: flex;	justify-content: center;	align-items: center;
	width: 1.5em;	aspect-ratio: 1;

	background: var(--Cline);
	border-radius: 50%;

	color: white;
	font-family: var(--Roboto);
	font-size: var(--fzv13);
	font-weight: 700;
}
#hero .line li:nth-child(1):before{	content: "1";	}
#hero .line li:nth-child(2):before{	content: "2";	}
#hero .line li:nth-child(3):before{	content: "3";	}
#hero .line .buttonA p{	color: var(--Cline);	}

#hero .mail
{
	padding: calc(10 * var(--v)) 0;
	background: white;
}
#hero .mail .buttonA a{	background: var(--Cmail);	}
#hero .mail .buttonA p{	color: white;	}

#hero .acc1
{
	position: absolute;
	bottom: 0;	left: calc(-60 * var(--v));
	display: block;
	width: calc(250 * var(--u)); aspect-ratio: 358/413;
}
#hero .acc2
{
	position: absolute;
	bottom: 0;	right: calc(-170 * var(--v));
	display: block;
	width: calc(390 * var(--u)); aspect-ratio: 571/419;
}


}
@media screen and (max-width: 767px)
{

#hero > .inner{	padding: var(--pageP) 0 calc(150 * var(--v));	}
#hero .acc1
{
	left: 0;
	width: calc(180 * var(--v));
}
#hero .acc2
{
	right: 0;
	width: calc(280 * var(--v));
}

}


/* ================================================================================
worry
================================================================================ */
@media print, screen
{

#worry > .inner{	padding: calc(60 * var(--v)) 0 calc(70 * var(--v));	}
#worry h2
{
	font-size: var(--fzv36);
	font-weight: 900;
	line-height: 1.5;
	text-align: center;
}
#worry .content
{
	display: flex;	justify-content: center;	align-items: center;
	gap: calc(40 * var(--v));
}
#worry .content picture
{
	width: calc(230 * var(--u));	ascent-override: 324/379;
}
#worry .content ul
{
	display: flex;	flex-direction: column;
	gap: calc(20 * var(--v));
}
#worry .content li
{
	font-size: var(--fzv18);
	font-weight: 700;
}
#worry .content li::before
{
	content: "\f058";
	display: inline-block;

	margin-right: 0.3em;

	color: var(--Ctheme1);
	font: var(--fa-font-solid);
	font-size: 1.2em;

	transform: translateY(0.05em);
}
#worry .text1
{
	color: var(--Ctheme1);
	font-size: var(--fzv36);
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

}
@media screen and (max-width: 767px)
{

#worry .content{	flex-direction: column;	}

}


/* ================================================================================
about
================================================================================ */
@media print, screen
{

#about{	background: var(--Ctheme2);	}
#about > .inner{	padding: calc(80 * var(--v)) 0;	}
#about h2
{
	--Fcolor: var(--Ctheme2);

	z-index: 2;
	position: relative;

	font-size: var(--fzv36);
	font-weight: 900;
	line-height: 1.5;
	text-align: center;
}
#about .descriptionArea
{
	position: relative;
	display: flex;	justify-content: space-between;	align-items: center;
	gap: calc(30 * var(--v));

	padding: calc(40 * var(--v));
	background: white;
	border-radius: calc(8 * var(--v));
}
#about .descriptionArea .image1
{
	z-index: 1;
	position: absolute;
	top: calc(-150 * var(--v));	left: calc(75 * var(--v));
	height: calc(150 * var(--v));	aspect-ratio: 145/217;
}

#about .descriptionArea .texts .title
{
	display: flex;	align-items: center;
	gap: calc(15 * var(--v));
	margin: 0 0 calc(30 * var(--v));
}
#about .descriptionArea .texts .title p
{
	flex-shrink: 0;
	display: flex;	justify-content: center;	align-items: center;
	width: calc(80 * var(--v));	aspect-ratio: 1;
	background: var(--Ctheme1);

	padding: 0.5em;

	border-radius: 50%;

	color: white;
	font-size: var(--fzv18);
	font-weight: 700;
	text-align: center;

	transform: rotate(-20deg);
}
#about .descriptionArea .texts .title h3
{
	color: var(--Ctheme1);
	font-size: var(--fzv20);
	font-weight: 900;
	/* line-height: 1.8; */
	letter-spacing: 0.05em;
}
#about .descriptionArea .texts .title h3 > span:first-child
{
	display: inline-block;
	margin: 0 0 0.5em;
	line-height: 1.5;
}
#about .descriptionArea .texts .title h3 strong
{
	display: inline-block;
	font-size: 1.4em;
	line-height: 1.3;
}
#about .descriptionArea .texts p{	line-height: 1.5;	}
#about .descriptionArea .image2
{
	flex-shrink: 0;
	width: calc(260 * var(--u));	aspect-ratio: 530/440;
}


#about .icons
{
	display: flex;	flex-wrap: wrap;	justify-content: space-between;
	gap: calc(30 * var(--v));
}
#about .icons li{	width: calc((100% - 2 * 30 * var(--v))/3);	}
#about .icons picture
{
	width: calc(100 * var(--v));
	margin: 0 auto;
}
#about .icons h3
{
	color: var(--Ctheme1);
	font-size: var(--fzu18);
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}
#about .icons h3 span{	font-size: 0.6em;	}


#about .messageArea h3
{
	font-size: var(--fzv36);
	font-weight: 900;
	line-height: 1.5;
	text-align: center;
}
#about .messageArea .content
{
	position: relative;
	display: flex;	justify-content: space-between;
	gap: calc(30 * var(--v));

	padding: calc(40 * var(--v));
	background: white;
	border-radius: calc(8 * var(--v));
}
#about .messageArea picture
{
	flex-shrink: 0;
	width: calc(230 * var(--u));	aspect-ratio: 934/1200;
}
#about .messageArea p{	line-height: 1.5;	}

}
@media screen and (max-width: 767px)
{

#about .descriptionArea{	flex-direction: column;	}
#about .descriptionArea .image1
{
	top: calc(-220 * var(--v));	left: calc(10 * var(--v));
	height: calc(220 * var(--v));
}
#about .descriptionArea .texts .title p
{
	width: calc(90 * var(--v));
	font-size: var(--fzv14);
}
#about .descriptionArea .image2{	width: calc(400 * var(--u));	}
#about .icons li{	width: calc((100% - 1 * 30 * var(--v))/2);	}
#about .messageArea .content{	flex-direction: column;	align-items: center;	}
#about .messageArea picture{	width: calc(400 * var(--u));	}

}


/* ================================================================================
service
================================================================================ */
@media print, screen
{

#service{	background: var(--Cgray3);	}
#service > .inner{	padding: calc(80 * var(--v)) 0;	}
#service .title .en
{
	margin: 0 0 calc(5 * var(--v));

	color: var(--Ctheme1);
	font-size: var(--fzv20);
	font-weight: 700;
	text-align: center;
}
#service .title h2
{
	margin: 0 0 calc(15 * var(--v));

	font-size: var(--fzv36);
	font-weight: 900;
	line-height: 1.5;
	text-align: center;
}
#service .title .sub
{
	font-size: var(--fzv14);
	line-height: 1.5;
	text-align: center;
}

#service ul
{
	display: flex;	flex-wrap: wrap;	align-items: stretch;
	gap: calc(30 * var(--u));
}
#service li
{
	container-type: inline-size;
	position: relative;

	display: flex;	flex-direction: column;
	width: calc((100% - 30 * 2 * var(--u))/3);
	border: 2px solid var(--Ctheme1);
	border-radius: calc(10 * var(--v));
}
#service li picture
{
	flex-shrink: 0;
	width: 100%;	aspect-ratio: 592/304;
}
#service li h3
{
	flex-shrink: 0;
	padding: 0.4em;
	background: var(--Ctheme1);

	color: white;
	font-size: 6.5cqw;
	font-weight: 700;
	text-align: center;
	line-height: 1.3;
}
#service li .description
{
	flex: 1;	flex-shrink: 0;
	padding: 4cqw 6cqw;
	font-size: var(--fzv14);
	line-height: 1.7;
}
#service li .priceArea
{
	padding: 4cqw 6cqw;
	font-size: var(--fzv14);
	line-height: 1.7;
}
#service li .priceArea p
{
	color: var(--Ctheme3);
	font-weight: 700;
	text-align: right;
	line-height: 1.5;
}
#service li .priceArea p:nth-child(1){	font-size: var(--fzv28);	}
#service li .priceArea p:nth-child(2){	font-size: var(--fzv14);	}
#service li .priceArea p:nth-child(3){	font-size: var(--fzv12);	}

}
@media screen and (max-width: 767px)
{

#service li{	width: calc((100% - 30 * 1 * var(--u))/2);	}

}


/* ================================================================================
contact
================================================================================ */
@media print, screen
{

[id^="contact"]{	background: url("../image/contact_background.webp") no-repeat bottom center/cover;	}
[id^="contact"] h2
{
	color: var(--Ctheme4);
	font-size: var(--fzu36);
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}
[id^="contact"] .content
{
	display: flex;	justify-content: center;	align-items: end;
	gap: calc(30 * var(--v));
}
[id^="contact"] .content > picture{	width: calc(470 * var(--u));	aspect-ratio: 932/456;	}
[id^="contact"] .content .mail a{	background: var(--Cmail);	}
[id^="contact"] .content .mail p{	color: white;	}
[id^="contact"] .content .line a{	background: var(--Cline);	}
[id^="contact"] .content .line p{	color: white;	}
[id^="contact"] .content .tel a
{
	background: transparent;
	box-shadow: unset;
}
[id^="contact"] .content .tel p
{
	color: white;
	font-size: var(--fzv32);
	line-height: 0.5;
}
[id^="contact"] .content .tel p span{	font-size: var(--fzv12);	}

}
@media screen and (max-width: 767px)
{

[id^="contact"] h2{	font-size: var(--fzv26);	}
[id^="contact"] .content{	flex-direction: column;	align-items: center;	}
[id^="contact"] .content > picture{	width: calc(600 * var(--u));	}

}


/* ================================================================================
support
================================================================================ */
@media print, screen
{

#support{	background: var(--Cgray3);	}
#support > .inner{	padding: calc(80 * var(--v)) 0 calc(40 * var(--v));	}
#support .title .en
{
	margin: 0 0 calc(5 * var(--v));

	color: var(--Ctheme1);
	font-size: var(--fzv20);
	font-weight: 700;
	text-align: center;
}
#support .title h2
{
	margin: 0 0 calc(15 * var(--v));

	font-size: var(--fzv36);
	font-weight: 900;
	line-height: 1.5;
	text-align: center;
}

#support ul
{
	display: flex;	flex-wrap: wrap;	justify-content: center;
	gap: calc(20 * var(--v)) calc(60 * var(--u));
	max-width: calc(800 * var(--v));
	margin: 0 auto;
}
#support li{	width: calc( (100% - 3 * 60 * var(--u)) / 4 );	}
#support li picture{	max-width: calc(161 * var(--v));	aspect-ratio: 161/121;	}
#support li h3
{
	width: 6em;
	padding: 0.4em;
	background: var(--Ctheme1);
	border-radius: calc(6 * var(--v)) calc(6 * var(--v)) 0 0;

	color: white;
	font-size: calc(14 * var(--v));
	text-align: center;
}

}
@media screen and (max-width: 767px)
{

#support li{	width: calc( (100% - 1 * 60 * var(--u)) / 2 );	}
#support li picture{	max-width: unset;	}
#support li h3{	font-size: calc(22 * var(--v));	}

}


/* ================================================================================
flow
================================================================================ */
@media print, screen
{

#flow{	background: var(--Ctheme2);	}
#flow > .inner{	padding: calc(80 * var(--v)) 0;	}
#flow .title .en
{
	margin: 0 0 calc(5 * var(--v));

	color: var(--Ctheme1);
	font-size: var(--fzv20);
	font-weight: 700;
	text-align: center;
}
#flow .title h2
{
	margin: 0 0 calc(15 * var(--v));

	font-size: var(--fzv36);
	font-weight: 900;
	line-height: 1.5;
	text-align: center;
}

#flow ul
{
	display: flex;	flex-wrap: wrap;	justify-content: center;
	gap: calc(40 * var(--v)) calc(40 * var(--u));
	max-width: calc(800 * var(--v));
	margin: 0 auto;
}
#flow li{	width: calc( (100% - 2 * 60 * var(--u)) / 3 );	}
#flow li picture
{
	max-width: calc(220 * var(--v));
	aspect-ratio: 440/320;
	margin: 0 0 calc(15 * var(--v));
}
#flow li h3
{
	color: var(--Ctheme1);
	font-size: var(--fzv18);
	font-weight: 700;
	text-align: center;
	line-height: 1.5;
}

}
@media screen and (max-width: 767px)
{

#flow li h3{	font-size: var(--fzv13);	}

}


/* ================================================================================
voice
================================================================================ */
@media print, screen
{

#voice > .inner{	padding: calc(80 * var(--v)) 0;	}

#voice .title .balloon
{
	position: relative;
	width: fit-content;
	padding: 0.5em 1.5em 0.7em;
	margin: 0 auto calc(20 * var(--v));

	background: var(--Ctheme1);
	border-radius: calc(4 * var(--v));

	color: #fff;
	font-size: var(--fzv18);
	font-weight: 900;
	text-align: center;
}
#voice .title .balloon::after
{
	--size: calc(15 * var(--v));

	position: absolute;
	bottom: calc(-0.75 * var(--size));
	left: calc(50% - 0.6 * var(--size) );

	content: "";
	display: block;
	width: var(--size);	aspect-ratio: 1.2;

	background: var(--Ctheme1);
	clip-path: polygon(0 0, 50% 100%, 100% 0);
}
#voice .title .en
{
	margin: 0 0 calc(5 * var(--v));

	color: var(--Ctheme1);
	font-size: var(--fzv20);
	font-weight: 700;
	text-align: center;
}
#voice .title h2
{
	margin: 0 0 calc(15 * var(--v));

	font-size: var(--fzv36);
	font-weight: 900;
	line-height: 1.5;
	text-align: center;
}

#voice ul
{
	display: flex;	flex-wrap: wrap;
	gap: calc(80 * var(--v)) calc(40 * var(--u));
}
#voice li
{
	position: relative;
	width: calc( (100% - 2 * 40 * var(--u)) / 3 );
	padding: 0 calc(30 * var(--u));
	background: var(--Cgray3);
	border-radius: calc(10 * var(--v));
}
#voice li picture
{
	width: calc(140 * var(--v));	aspect-ratio: 1;
	margin: calc(-40 * var(--v)) auto calc(15 * var(--v));
}
#voice li picture + p
{
	margin: 0 0 calc(10 * var(--v));
	font-size: var(--fzv14);
	text-align: center;
}
#voice li h3
{
	margin: 0 0 calc(20 * var(--v));
	font-size: var(--fzv17);
	font-weight: 700;
	text-align: center;
	line-height: 1.5;
}
#voice li h3 + p
{
	padding: calc(20 * var(--v)) 0;
	border-top: 1px solid var(--Cgray2);
	font-size: var(--fzv14);
	line-height: 1.5;
}


}
@media screen and (max-width: 767px)
{

#voice li{	width: calc( (100% - 1 * 40 * var(--u)) / 2 );	}

}


/* ================================================================================
FAQ
================================================================================ */
@media print, screen
{

#FAQ{	background: var(--Cgray3);	}
#FAQ > .inner{	padding: calc(80 * var(--v)) 0;	}

#FAQ .title .en
{
	margin: 0 0 calc(5 * var(--v));

	color: var(--Ctheme1);
	font-size: var(--fzv20);
	font-weight: 700;
	text-align: center;
}
#FAQ .title h2
{
	margin: 0 0 calc(15 * var(--v));

	font-size: var(--fzv36);
	font-weight: 900;
	line-height: 1.5;
	text-align: center;
}

#FAQ ul
{
	display: flex;	flex-direction: column;
	gap: calc(20 * var(--v));

	max-width: calc(800 * var(--v));
	margin: 0 auto;
}
#FAQ li .Q
{
	display: flex;	align-items: center;
	padding: calc(15 * var(--v)) 0;
	background: white;
	border-radius: calc(8 * var(--v));

	cursor: pointer;
}
#FAQ li .Q p
{
	flex-shrink: 0;
	width: calc(70 * var(--v));

	color: var(--Ctheme1);
	font-family: var(--Roboto);
	font-size: var(--fzv42);
	font-weight: 900;
	text-align: center;
}
#FAQ li .Q h3
{
	flex: 1;
	color: var(--Ctheme1);
	font-size: var(--fzv18);
	font-weight: 700;
	line-height: 1.5;
}
#FAQ li .Q div
{
	position: relative;
	flex-shrink: 0;
	width: calc(70 * var(--v));
}
#FAQ li .Q div::before,
#FAQ li .Q div::after
{
	position: absolute;
	top: 0;	left: calc(25 * var(--v));

	content: "";
	display: block;
	width: calc(20 * var(--v));	height: 2px;
	background: var(--Ctheme1);
	transition: var(--T03);
}
#FAQ li .Q div::after{	transform: rotate(90deg);	}

#FAQ li.active .Q div::before{	transform: rotate(-180deg);	}
#FAQ li.active .Q div::after{	transform: rotate(180deg);	}


#FAQ li .A
{
	display: flex;	align-items: center;
	padding: calc(20 * var(--v)) 0;
}
#FAQ li .A p:first-child
{
	flex-shrink: 0;
	width: calc(70 * var(--v));

	color: var(--Cmail);
	font-family: var(--Roboto);
	font-size: var(--fzv42);
	font-weight: 900;
	text-align: center;
}
#FAQ li .A p:last-child
{
	flex: 1;
	line-height: 1.5;
}

}
@media screen and (max-width: 767px)
{

#FAQ li .Q div::before,
#FAQ li .Q div::after
{
	left: calc(20 * var(--v));
	width: calc(30 * var(--v));
}

}


/* ================================================================================
company
================================================================================ */
@media print, screen
{

#company > .inner{	padding: calc(60 * var(--v)) 0;	}

#company .boxes
{
	display: flex;	justify-content: center;	align-items: center;
	max-width: calc(650 * var(--v));
	margin: 0 auto;
}
#company .title{	width: calc( 100% * 250/650 );	}
#company .content{	width: calc( 100% * 400/650 );	}

#company .title .en
{
	margin: 0 0 calc(5 * var(--v));

	color: var(--Ctheme1);
	font-size: var(--fzv20);
	font-weight: 700;
	text-align: center;
}
#company .title h2
{
	margin: 0 0 calc(15 * var(--v));

	font-size: var(--fzv36);
	font-weight: 900;
	line-height: 1.5;
	text-align: center;
}

#company .content
{
	display: flex;	justify-content: center;	align-items: center;
	padding: calc(50 * var(--v)) 0;
	border-top: 1px solid var(--Cgray2);
	border-bottom: 1px solid var(--Cgray2);
}
#company .content ul
{
	display: flex;	flex-direction: column;
	gap: calc(10 * var(--v));
}
#company .content li
{
	display: flex;	align-items: center;

}
#company .content li h3,
#company .content li p
{
	font-weight: 700;
	line-height: 1.5;
}

#company .content li h3
{
	flex-shrink: 0;
	width: 7em;
}


}
@media screen and (max-width: 767px)
{

#company .boxes{	flex-direction: column;	}
#company .title,
#company .content
{	width: 100%;	}

}




/* ======================================== end ======================================== */