@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
#gHeader {
	opacity: 0;
	transform: translateY(-100%);
	transition: all ease 0.5s 1.5s;
}
#gHeader.show {
	opacity: 1;
	transform: none;
}
#main .mainVisual .scroll,
#main .mainVisual .photo,
#main .about {
	opacity: 0;
	transform: translateY(200px);
	transition: all ease 0.5s 1.5s;
}
#main .mainVisual.show .scroll,
#main .mainVisual.show .photo,
#main .about.show {
	opacity: 1;
	transform: none;
}
#main .mainVisual {
	padding: 4.2rem 4rem 0;
}
#main .mainVisual .inner {
	margin: 0 auto -5.3rem;
	width: 100rem;
	position: relative;
	align-items: flex-end;
}
#main .mainVisual h2 {
	margin-left: 5.3rem;
	width: 34.5rem;
	position: relative;
	z-index: 10;
}
#main .mainVisual h2 span {
	display: block;
	opacity: 0;
	transform: translateX(-100px);
	transition: all ease 0.5s;
}
#main .mainVisual h2.show span {
	transform: none;
	opacity: 1;
}
#main .mainVisual h2 .img01 {
	width: 31.8rem;
}
#main .mainVisual h2 .img02 {
	margin: -0.4rem 0 0.2rem;
	transition-delay: 0.5s;
}
#main .mainVisual h2 .img03 {
	margin-left: 0.4rem;
	width: 31.7rem;
	transition-delay: 1s;
}
#main .mainVisual .scroll {
	margin-bottom: -1.3rem;
	width: 13.1rem;
	position: relative;
	z-index: 10;
}
#main .mainVisual .scroll a {
	display: block;
	position: relative;
	border-radius: 50%;
	border: 1.1rem solid #fff;
}
#main .mainVisual .scroll a::after,
#main .mainVisual .scroll a::before {
    content: '';
    position: absolute;
    left: -25%;
    top: -25%;
    border: 1px solid #5C8BA9;
    width: 150%;
    height: 150%;
    border-radius: 50%;
    opacity: 1;
    animation: 1s circleanime linear infinite;
}
#main .mainVisual .scroll a::before {
    animation-delay:.5s; 
}
@keyframes circleanime{
	0%{
	  transform: scale(0.8);
	}
	100%{
		transform: scale(1.32);
		opacity: 0;
	}
}
#main .mainVisual .photo img {
	width: 100%;
	border-radius: 2.4rem;
}
#main .about {
	margin-bottom: -6.3rem;
	padding-top: 9.6rem;
	position: relative;
	border-radius: 8rem;
	background: #fff;
}
#main .about .inner {
	margin: 0 auto;
	width: 76.8rem;
}
#main .about .headLine01 .img {
	height: 4.8rem;
}
#main .about .headLine01 .img img {
	height: 4.6rem;
}
#main .about .imgBox {
	margin-top: -6.2rem;
	flex-direction: row-reverse;
	align-items: flex-start;
}
#main .about .imgBox .textBox {
	width: calc(50% + 4.2rem);
}
#main .about .imgBox .textBox p {
	font-weight: 500;
	line-height: 2.75;
}
#main .about .imgBox .photoBox {
	margin: 8.4rem 0 -10.5rem;
	width: calc(50% - 13.1rem);
	display: flex;
	justify-content: flex-end;
}
#main .about .imgBox .photoBox img {
	width: 58.3rem;
	max-width: inherit;
}
#main .bgBox {
	margin-bottom: -6.1rem;
	padding: 20.7rem 0 4.6rem;
	text-align: center;
	background: url(../img/index/bg01.jpg) no-repeat center top / cover;
}
#main .bgBox .title span {
	margin: 0 auto 6.3rem;
	width: 11.3rem;
	display: block;
	opacity: 0;
	transform: translateX(-100px);
	transition: all ease 0.5s;
}
#main .bgBox .title.on span {
	opacity: 1;
	transform: none;
}
#main .bgBox .title .img02 {
	margin-bottom: 5.7rem;
	width: 22.8rem;
	transition-delay: 0.5s;
}
#main .bgBox .title .img03 {
	margin-bottom: 2.1rem;
	width: 31.7rem;
	transition-delay: 1s;
}
#main  .serviceBox {
	margin-bottom: min(-10.7rem, -11.505vh);
	height: 150dvh;
}
#main .service {
	height: 100dvh;
	display: flex;
	align-items: center;
	position: sticky;
	top: 8rem;
	border-radius: min(8rem,8.602vh);
	background: #fff;
	overflow: hidden;
}
#main .service .inner {
	width: 100%;
	display: flex;
}
#main .service .lBox {
	margin-right: min(62px,6.667vh);
	width: min(calc(50% - 20.5rem),calc(50% - 22.043vh));
	text-align: right;
	flex: none;
}
#main .service .headLine01 {
	margin-left: auto;
	font-size: min(1.6rem,1.72vh);
}
#main .service .headLine01 .img {
	height: min(6.2rem,5.269vh);
}
#main .service .headLine01 .img img {
	height: min(4.4rem,4.731vh);
}
#main .service .rBox {
	padding-top: min(5.7rem,6.129vh);
	position: relative;
	z-index: 1;
}
#main .service .rBox .serviceList {
	display: flex;
	gap: min(4rem,4.301vh);
}
#main .service .rBox .serviceList > li {
	width: min(48rem,51.613vh);
	flex: none;
}
#main .service .rBox .serviceList > li a,
#main .service .rBox .serviceList > li .inn {
	padding: min(0.1rem,0.108vh) min(2rem,2.151vh) min(2.8rem,3.011vh);
	height: 100%;
	display: block;
	position: relative;
	border-radius: min(3.2rem,2.151vh);
	background: #f9fbfc;
	box-shadow: min(0.8rem,0.86vh) min(0.8rem,0.86vh) min(3.2rem,3.441vh) #d5e1f9;
}
#main .service .rBox .serviceList > li a::before {
	width: min(5.5rem,5.914vh);
	height: min(5.5rem,5.914vh);
	position: absolute;
	right: min(1.6rem,1.72vh);
	bottom: min(1.5rem,1.613vh);
	border-radius: 50%;
	background: url(../img/common/arrow01.png) no-repeat center center / 100%;
	content: "";
	z-index: 1;
}
#main .service .rBox .serviceList > li .pho {
	margin: -13.8% 0 -3.2%;
}
#main .service .rBox .serviceList > li .pho img {
	border-radius: min(2rem,2.151vh);
}
#main .service .rBox .serviceList > li .txtBox {
	margin: 0 min(3rem,3.226vh);
	position: relative;
}
#main .service .rBox .serviceList > li .txtBox p {
	margin-bottom: min(2rem,2.151vh);
	color: #3b3b3b;
	font-size: min(1.6rem,1.72vh);
	line-height: 2;
}
#main .service .rBox .serviceList > li .txtBox p.ttl {
	margin-bottom: min(2rem,2.151vh);
	padding: 0 min(1.7rem,1.828vh) min(0.4rem,0.43vh) min(1.5rem,1.613vh);
	width: fit-content;
	color: #fff;
	font-size: min(1.8rem,1.935vh);
	font-weight: 700;
	border-radius: min(0.8rem,0.86vh);
	background: #555273;
}
#main .service .rBox .serviceList > li .txtBox .txtList {
	padding: min(1.6rem,1.72vh);
	border-radius: min(1rem,1.075vh);
	background: #fff;
}
#main .service .rBox .serviceList > li .txtBox .txtList li {
	padding-left: min(2rem,2.151vh);
	position: relative;
	font-size: min(1.4rem,1.505vh);
	line-height: 2;
	color: #3b3b3b;
}
#main .service .rBox .serviceList > li .txtBox .txtList li::before {
	width: min(0.8rem,0.86vh);
	height: min(0.8rem,0.86vh);
	position: absolute;
	left: 0;
	top: min(1.1rem,1.183vh);
	border-radius: 50%;
	background: #555273;
	content: "";
}
#main .message {
	padding: 21.8rem 0 27.4rem;
	background: url(../img/index/message_bg01.png) no-repeat center top -0.4rem / 90.5rem,url(../img/index/message_bg02.jpg) no-repeat center top / cover;
}
#main .message .inner {
	margin: 0 auto;
	width: 108.2rem;
	position: relative;
}
#main .message .inner .representative {
	margin-top: 2.4rem;
	line-height: 1.5;
}
#main .message .img01 {
	width: 31.3rem;
	position: absolute;
	right: 1.9rem;
	top: -18.6rem;
}
#main .message .img02 {
	width: 33.2rem;
	position: absolute;
	left: 1.6rem;
	bottom: -21.7rem;
	z-index: 1;
}
#main .message .headLine01 {
	margin-bottom: 4.6rem;
}
#main .message .headLine01 .img {
	height: 5.1rem;
}
#main .message .headLine01 .img img {
	height: 5.9rem;
}
#main .message p {
	font-weight: 500;
	line-height: 2.75;
	text-align: center;
}
#main .company {
	margin: -15.8rem 0 -10.6rem;
	padding: 14.4rem 0 23.1rem;
	position: relative;
	border-radius: 8rem;
	background: #fff;
}
#main .company .inner {
	margin: 0 auto;
	width: 100.8rem;
}
#main .company .headLine01 {
	margin: 0;
}
#main .company .headLine01 .img {
	height: 4.9rem;
}
#main .company .headLine01 .img img {
	height: 5.75rem;
}
#main .company .rBox {
	width: calc(100% - 34.8rem);
}
#main .company .rBox table {
	margin-top: -1.4rem;
	width: 100%;
	max-width: 57rem;
	border-collapse: collapse;
}
#main .company .rBox th,
#main .company .rBox td {
	padding: 2.8rem 0 2.1rem;
	color: #4e4e4e;
	font-size: 1.4rem; 
	font-weight: 400;
	line-height: 1.7142857;
	word-break: break-all;
	text-align: left;
	vertical-align: top;
	border-bottom: 0.1rem solid #e6e6e6;
	box-sizing: border-box;
}
#main .company .rBox th {
	width: 17.2%;
	color: #3327a2;
	font-weight: 500;
}
#main .history {
	margin-bottom: 14.7rem;
	padding-top: 1.8rem;
	background: url(../img/index/history_bg01.png) no-repeat center bottom / 100% 24.6rem,url(../img/index/history_bg02.jpg) no-repeat center top / cover;
}
#main .history .imgBox {
	position: relative;
	flex-direction: row-reverse;
	z-index: 1;
}
#main .history .imgBox .photoBox {
	width: calc(50% - 7rem);
	max-height: 74.3rem;
}
#main .history .imgBox .photoBox img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0 8rem 8rem 0;
}
#main .history .imgBox .textBox {
	margin-top: 23.7rem;
	width: calc(50% - 1.6rem);
}
#main .history .imgBox .textBox .headLine01 {
	margin-bottom: 4.5rem;
}
#main .history .imgBox .textBox ul {
	margin-left: 1.1rem;
	padding-left: 2.5rem;
	position: relative;
}
#main .history .imgBox .textBox ul::before,
#main .history .imgBox .textBox ul::after {
	position: absolute;
	left: 0;
	top: 1.2rem;
	bottom: -3.8rem;
	border-left: 0.1rem solid #555273;
	opacity: 0.26;
	content: "";
}
#main .history .imgBox .textBox ul::after {
	height: 2rem;
	top: auto;
	bottom: -3.8rem;
	transform: rotate(20deg);
	transform-origin: left bottom;
}
#main .history .imgBox .textBox li {
	font-size: 1.4rem;
	line-height: 1.7142857;
}
#main .history .imgBox .textBox li dt {
	margin-bottom: -0.2rem;
	position: relative;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1;
	font-style: italic;
	font-family: "Josefin Sans", sans-serif;
}
#main .history .imgBox .textBox li dt::before,
#main .history .imgBox .textBox li dt::after {
	width: 2.4rem;
	height: 2.4rem;
	position: absolute;
	left: -3.65rem;
	top: 0;
	border-radius: 50%;
	background: #555273;
	opacity: 0.14;
	content: "";
}
#main .history .imgBox .textBox li dt::after {
	width: 1.2rem;
	height: 1.2rem;
	left: -3rem;
	top: 0.6rem;
	opacity: 1;
}
#main .history .imgBox .textBox li:not(:last-child) {
	margin-bottom: 3.7rem;
}
@media all and (max-width: 896px) {
	#main {
		overflow: hidden;
	}
	#main .mainVisual {
		padding: 0 1.5rem;
	}
	#main .mainVisual .inner {
		margin: 0;
		width: auto;
		display: block;
	}
	#main .mainVisual h2 {
		margin-left: 0;
		width: 24rem;
	}
	#main .mainVisual h2 .img01 {
		width: 22rem;
	}
	#main .mainVisual h2 .img02 {
		margin: -0.2rem 0 0;
	}
	#main .mainVisual h2 .img03 {
		margin-left: 0.4rem;
		width: 22rem;
	}
	#main .mainVisual .scroll {
		margin: 0 0 -1rem auto;
		width: 7rem;
	}
	#main .mainVisual .scroll a {
		border-width: 0.6rem;
	}
	#main .mainVisual .photo img {
		border-radius: 1.2rem;
	}
	#main .about {
		margin-bottom: -4rem;
		padding: 5rem 1.5rem 4rem;
		border-radius: 2rem;
	}
	#main .about .inner {
		margin: 0;
		width: auto;
	}
	#main .about .imgBox {
		margin-top: 0;
		display: block;
	}
	#main .about .imgBox .textBox {
		width: auto;
	}
	#main .about .imgBox .textBox p {
		line-height: 2.2;
	}
	#main .about .imgBox .photoBox {
		margin: 3rem 0 0;
		width: auto;
		display: block;
	}
	#main .about .imgBox .photoBox img {
		width: 100%;
		max-width: inherit;
	}
	#main .bgBox {
		margin-bottom: -6.2rem;
		padding: 10rem 0 6rem;
	}
	#main .bgBox .title span {
		margin: 0 auto 2rem;
		width: 8rem;
	}
	#main .bgBox .title .img02 {
		margin-bottom: 1.5rem;
		width: 15rem;
	}
	#main .bgBox .title .img03 {
		width: 22rem;
	}
	#main  .serviceBox {
		margin-bottom: -2rem;
		height: auto !important;
	}
	#main .service {
		padding: 5rem 0;
		height: auto !important;
		border-radius: 2rem;
	}
	#main .service .inner {
		width: auto;
		display: block;
		transform: none !important;
	}
	#main .service .lBox {
		margin-right: 0;
		width: auto;
		text-align: center;
	}
	#main .service .headLine01 {
		margin-left: auto;
		font-size: 1.4rem;
	}
	#main .service .rBox {
		padding-top: 0;
		position: relative;
		z-index: 1;
	}
	#main .service .rBox .serviceList {
		margin: 0 1.5rem;
		display: block;
	}
	#main .service .rBox .serviceList > li {
		width: auto;
	}
	#main .service .rBox .serviceList > li:not(:last-child) {
		margin-bottom: 1.5rem;
	}
	#main .service .rBox .serviceList > li a,
	#main .service .rBox .serviceList > li .inn {
		padding: 2rem 1rem;
		border-radius: 2rem;
		box-shadow: 0.8rem 0.8rem 3.2rem #d5e1f9;
	}
	#main .service .rBox .serviceList > li a::before {
		width: 4rem;
		height: 4rem;
		right: 0.8rem;
		bottom: 0.8rem;
	}
	#main .service .rBox .serviceList > li .pho {
		margin: 0 0 -1.4rem;
	}
	#main .service .rBox .serviceList > li .pho img {
		border-radius: 1rem;
	}
	#main .service .rBox .serviceList > li .txtBox {
		margin: 0 1rem;
	}
	#main .service .rBox .serviceList > li .txtBox p {
		margin-bottom: 1rem;
		font-size: 1.3rem;
	}
	#main .service .rBox .serviceList > li .txtBox p.ttl {
		margin-bottom: 1rem;
		padding: 0 1rem 0.2rem;
		font-size: 1.6rem;
		border-radius: 0.4rem;
	}
	#main .service .rBox .serviceList > li .txtBox .txtList {
		padding: 1rem;
		border-radius: 0.5rem;
	}
	#main .service .rBox .serviceList > li .txtBox .txtList li {
		padding-left: 1rem;
		font-size: 1.3rem;
	}
	#main .service .rBox .serviceList > li .txtBox .txtList li::before {
		width: 0.5rem;
		height: 0.5rem;
		top: 1.1rem;
	}
	#main .message {
		padding: 14rem 1.5rem 5rem;
		background-position: center center;
		background-size: 100% auto,cover;
	}
	#main .message .inner {
		width: auto;
	}
	#main .message .img01 {
		width: 12rem;
		right: -0.7rem;
        top: -13rem;
	}
	#main .message .img02 {
		margin: 2rem auto 0;
		width: 28rem;
		position: static;
		left: auto;
		bottom: auto;
	}
	#main .message .headLine01 {
		margin-bottom: 4.6rem;
	}
	#main .message p {
		line-height: 2.2;
	}
	#main .company {
		margin: -2rem 0;
		padding: 6rem 1.5rem;
		border-radius: 2rem;
	}
	#main .company .inner {
		margin: 0 auto;
		width: auto;
		display: block;
	}
	#main .company .rBox {
		width: auto;
	}
	#main .company .rBox table {
		margin-top: 0;
		max-width: inherit;
	}
	#main .company .rBox th,
	#main .company .rBox td {
		padding: 2rem 0 1.5rem;
		font-size: 1.3rem; 
		line-height: 1.5;
	}
	#main .company .rBox th {
		width: 30%;
	}
	#main .history {
		margin-bottom: 5rem;
		padding: 5rem 1.5rem 0;
	}
	#main .history .imgBox {
		display: block;
	}
	#main .history .imgBox .photoBox {
		width: auto;
		max-height: inherit;
	}
	#main .history .imgBox .photoBox img {
		height: auto;
		object-fit: inherit;
		border-radius: 2rem;
	}
	#main .history .imgBox .textBox {
		margin: 0 0 5rem;
		width: auto;
	}
	#main .history .imgBox .textBox li {
		font-size: 1.2rem;
		line-height: 1.5;
	}
	#main .history .imgBox .textBox li:not(:last-child) {
		margin-bottom: 2.5rem;
	}
	#main .history .imgBox .textBox li dt {
		font-size: 2rem;
	}
}