@charset "utf-8";

:root {
		--fs-title: 68px;
	}


/*=============================
　　　　title
===============================*/
.headline_box{
	margin-bottom: 45px;
}
.headline_box .headline_en{
	font-size: 42px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 10px;
}
.headline_box .headline_jp{
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	color: #8eb9de;
}

/*=============================
　　　　mainvisual
===============================*/
#mainvisual {
	background: url("../images/mv/bg_mv.webp");
	background-size: cover;
	width: 100%;
	height: 800px;
	overflow: hidden;
}
#mainvisual .mv_inner {
	width: 1200px;
	height: 100%;
	position: relative;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#mainvisual .mv_inner::before,
#mainvisual .mv_inner::after {
	content: "";
	width: calc(1481px * 0.49);
	aspect-ratio: 1481 / 1246;
	position: absolute;
	top: 52.5%;
	right: -160px;
	transform: translate(0 , -50%);
}

#mainvisual .mv_inner::before {
	background: url("../images/mv/img_mv-shadow.webp");
	background-size: cover;
	mix-blend-mode: darken;
}

#mainvisual .mv_inner::after {
	background: url("../images/mv/img_mv-dice.webp");
	background-size: cover;
}


#mainvisual .title_box {
	z-index: 1;
}
#mainvisual .title_box img {
	width: 510px;
	height: auto;
	margin-bottom: 20px;
}
#mainvisual .title_box h1 {
	font-size: 18px;
}



/*=============================
　　　　about us
===============================*/
#about {
	padding: 205px 0 160px;
	/*background: #561eff;*/
	overflow: hidden;
	position: relative;
}
#about::before {
	content: "";
	position: absolute;
	background: url("../images/about/img_tree_mayumi.webp") no-repeat;
	background-size: cover;
	top: 55px;
	left: -5px;
	width: 510px;
	aspect-ratio: 845 / 592;
}
#about::after {
	content: "";
	position: absolute;
	background: url("../images/about/img_box.webp") no-repeat;
	background-size: cover;
	bottom: 20px;
	left: -55px;
	width: 1000px;
	aspect-ratio: 2001 / 601;
}
#about .wrap {
	width: 1280px;
	display: flex;
	justify-content: flex-end;
	/*background: #e2a874;*/
}
#about .wrap .text_box h2 {
	color: #777;
	font-size: 32px;
	margin-bottom: 36px;
	font-weight: 500;
	letter-spacing: 6px;
	position: relative;
}
#about .wrap .text_box h2::before {
	content: "Turn over a new leaf.";
	position: absolute;
	color: #ccc;
	font-size: 107px;
	font-family: var(--fo-josefin);
	font-weight: 200;
	font-style: italic;
	letter-spacing: -2.5px;
	white-space: nowrap;
	top: -200px;
	left: -210px;
}
#about .wrap .text_box p {
	color: #565656;
	font-size: 20px;
	font-weight: 500;
	line-height: 2.2;
	letter-spacing: 2px;
	width: 615px;
}


/*=============================
　　　 service
===============================*/
#service {
	padding-block: 120px;
	background-color:hsla(0,0%,100%,1);
	background-image:
	radial-gradient(at 0% 0%, hsla(335,11%,91%,1) 0px, transparent 50%),
	radial-gradient(at 31% 0%, hsla(330,6%,94%,1) 0px, transparent 50%),
	radial-gradient(at 66% 0%, hsla(0,1%,90%,1) 0px, transparent 50%),
	radial-gradient(at 100% 0%, hsla(9,3%,67%,1) 0px, transparent 50%),
	radial-gradient(at 0% 38%, hsla(0,1%,87%,1) 0px, transparent 50%),
	radial-gradient(at 31% 38%, hsla(0,1%,90%,1) 0px, transparent 50%),
	radial-gradient(at 66% 39%, hsla(300,1%,88%,1) 0px, transparent 50%),
	radial-gradient(at 99% 41%, hsla(10,3%,68%,1) 0px, transparent 50%),
	radial-gradient(at 0% 70%, hsla(40,4%,86%,1) 0px, transparent 50%),
	radial-gradient(at 31% 70%, hsla(30,10%,84%,1) 0px, transparent 50%),
	radial-gradient(at 67% 71%, hsla(8,22%,93%,1) 0px, transparent 50%),
	radial-gradient(at 99% 72%, hsla(0,15%,93%,1) 0px, transparent 50%),
	radial-gradient(at 0% 99%, hsla(0,4%,86%,1) 0px, transparent 50%),
	radial-gradient(at 31% 99%, hsla(30,3%,87%,1) 0px, transparent 50%),
	radial-gradient(at 67% 99%, hsla(30,15%,89%,1) 0px, transparent 50%),
	radial-gradient(at 99% 99%, hsla(0,10%,90%,1) 0px, transparent 50%);
}
#service .wrap {
	width: 1280px;
	margin: 0 auto;
	padding-inline: 60px;
}
#service .wrap .headline_box {
	text-align: center;
}
#service .wrap .headline_box h2 {
	font-family: var(--fo-josefin);
	font-weight: 600;
	font-size: var(--fs-title);
}
#service .wrap > p {
	font-size: 18px;
	line-height: 2.4;
	text-align: center;
	margin-bottom: 55px;
}
#service .wrap .gbox {
	padding: 60px;
	display: grid;
	background: #fff;
	width: 100%;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 40px;
	text-align: center;
}
#service .wrap .gbox .gitem {
	aspect-ratio: 1 / 1;
}
#service .wrap .gbox .gitem p {
	font-size: 20px;
}
#service .wrap .gbox .dgray {
	position: relative;
	background: #4d4d4d;
}
#service .wrap .gbox .dgray img {
	width: 45.3%;
	aspect-ratio: 1 / 1;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);
}

#service .wrap .gbox .lgray {
	position: relative;
	background: #c1c1c1;
}
#service .wrap .gbox .lgray img {
	width: 45.3%;
	aspect-ratio: 1 / 1;
	position: absolute;
	top: 50%;
	right: 50%;
	transform: translate(50% , -50%);
}

#service .wrap .gbox .dgray div{
	color: #fff;
	position: absolute;
	bottom: 9.5%;
	right: 50%;
	transform: translate(50% , 0)
}
#service .wrap .gbox .lgray div{
	color: #333;
	position: absolute;
	bottom: 9.5%;
	left: 50%;
	transform: translate(-50% , 0);
}


/*=============================
　　　 contact_form
===============================*/
#contact_form {
	padding-block: 120px;;
}
#contact_form .wrap {
	width: 1280px;
	margin: 0 auto;
	padding-inline: 60px;
}
#contact_form .wrap .headline_box {
	text-align: center;
}
#contact_form .wrap .headline_box h2 {
	font-family: var(--fo-josefin);
	font-weight: 600;
	font-size: var(--fs-title);
}
#contact_form .wrap .fbox {
	display: flex;
	justify-content: space-between;
	width: 700px;
	margin: 0 auto 65px;
	padding: 55px;
	background: url("../images/contact/bg_contact_info.webp") no-repeat;
	background-size: cover;
	background-position: center;
}
#contact_form .wrap .fbox > p {
	color: #fff;	
	font-size: 18px;
	font-weight: 500;
	line-height: 1.8;
	border-right: 1px solid #fff;
	padding-right: 80px;
}
#contact_form .wrap .fbox > div img {
	width: calc(72px / 2);
	aspect-ratio: 72 / 73;
	margin-right: 15px;
	vertical-align: -18%;
}
#contact_form .wrap .fbox > div a {
	color: #fff;
	font-family: var(--fo-josefin);
	font-size: 48px;
}
#contact_form .wrap .fbox > div p {
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	text-align: right;
}
#contact_form .wrap > p {
	font-size: 16px;
	text-align: center;
	margin-bottom: 55px;
}

#contact_form .privacy_list {
	margin: 20px 0 80px;
	line-height: 2.0;
}
#contact_form .privacy_list .hbox {
	width: 720px;
	height: 340px;
	font-size: 14px;
	margin: 0 auto;
	padding: 40px 40px 0;
	border: 1px solid #c7c8c8;
	overflow-y: scroll;
}
#contact_form .privacy_list .inner {
}
#contact_form .privacy_list .hbox .inner .privacy_box {
	margin: 0 0 40px;
}
#contact_form .privacy_list .hbox .inner .privacy_box .text {
	margin: 0 0 20px;
}
#contact_form .privacy_list .hbox .inner .privacy_box .text.nomab {
	margin: 0 0 0;
}
#contact_form .privacy_list .hbox .inner .privacy_box .pra_numlist {
	
}
#contact_form .privacy_list .hbox .inner .privacy_box .pra_numlist li {
	position: relative;
	counter-increment: cnt;
	padding: 0 0 0 30px;
	margin: 0 0 5px;
}
#contact_form .privacy_list .hbox .inner .privacy_box .pra_numlist li::before {
	position: absolute;
	content: "（" counter(cnt) "）";
	top: 0;
	left: -5px;
}
#contact_form .privacy_list .hbox .inner .privacy_box dl dt {
	font-size: 22px;
	font-weight: 500;
	border-bottom: 1px solid #677f6a;
	padding: 0 0 10px;
	margin: 0 0 10px;
}
#contact_form .privacy_list .hbox .inner .privacy_box dl dt span {
	display: inline-block;
	margin: 0 10px 0 0;
}
#contact_form .privacy_list .hbox .inner .privacy_box .pra_dotlist li {
	position: relative;
	padding: 0 0 0 20px;
}
#contact_form .privacy_list .hbox .inner .privacy_box .pra_dotlist li::before {
	position: absolute;
	content: "・";
	top: 0;
	left: 0;
}
#contact_form .privacy_list .hbox .inner .privacy_box .pra_dotlist li a {
	color: #333;
}
#contact_form .privacy_list .hbox .inner .privacy_box .pra_dotlist li a:hover {
	color: #677f6a;
}
#contact_form .privacy_list .hbox .inner .privacy_box .pra_numlist_end li {
	position: relative;
	counter-increment: cnt;
	padding: 0 0 0 30px;
}
#contact_form .privacy_list .hbox .inner .privacy_box .pra_numlist_end li::before {
	position: absolute;
	content: "（" counter(cnt) "）";
	top: 0;
	left: -5px;
}



/*=============================
　　　 company
===============================*/
#company {
	padding-block: 120px;
	background: url("../images/company/bg_company.webp") no-repeat, #fafafa;
	background-position: center 135%;
	background-size: 120%;
}
#company .wrap {
	width: 1280px;
	margin: 0 auto;
	padding-inline: 60px;
}
#company .wrap .headline_box {
	text-align: center;
}
#company .wrap .headline_box h2 {
	font-family: var(--fo-josefin);
	font-weight: 600;
	font-size: var(--fs-title);
}
#company .wrap .text_box {
	width: 675px;
	margin: 0 auto 85px;
}
#company .wrap .text_box .fbox {
	display: flex;
	border-bottom: 1px solid #e8e8e8;
	padding-block: 28px;
}
#company .wrap .text_box .fbox dt {
	width: 175px;
	font-size: 15px;
	font-weight: 500;
	padding-left: 18px;
}
#company .wrap img {
	display: block;
	margin: 0 auto 75px;
	width: 335px;
	height: auto;
}
#company .wrap .gmap {
	display: block;
	margin: 0 auto;
	width: 1040px;
	height: 420px;
	filter: grayscale(100%);
}