@charset "utf-8";
/* CSS Document */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

body {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	font-size: 16px;
	color: #333333;
	line-height: 1.8;
	font-feature-settings: "palt"1;
	margin: 0;
	background-color: #ffffff;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

p{
	letter-spacing: 1px;
}

.flex-txt {
	font-size: clamp(1rem, 0.879rem + 0.52vw, 1.5rem);
}

.fs-sm {
	font-size: 14px;
}

.fs-xs {
	font-size: 12px;
}

.fw-black {
	font-weight: 900;
}

.sup {
	vertical-align: super;
}

.marker-pen {
	background: linear-gradient(transparent 50%, #ffc618 50%);
}

.txt-darkBlue {
	color: #254a64;
}

a:not([href]):not([class]), a:not([href]):not([class]):hover {
	color: #fff;
}

.txt-justify {
	text-align: justify;
}

.wave-top-bottom-box {
	--mask:
	radial-gradient(67.08px at 50% 90px,#000 99%,#0000 101%) calc(50% - 60px) 0/120px 51% repeat-x,
	radial-gradient(67.08px at 50% -60px,#0000 99%,#000 101%) 50% 30px/120px calc(51% - 30px) repeat-x,
	radial-gradient(67.08px at 50% calc(100% - 90px),#000 99%,#0000 101%) calc(50% - 60px) 100%/120px 51% repeat-x,
	radial-gradient(67.08px at 50% calc(100% + 60px),#0000 99%,#000 101%) 50% calc(100% - 30px)/120px calc(51% - 30px) repeat-x;
	-webkit-mask: var(--mask);
	mask: var(--mask);
}

#hdr_container {
	max-width: 100%;
	display: block;
	padding: 8px 0 0;
}

#logo_ctr {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
}

h1.site-logo {
	width: 150px;
	margin-right: 1rem;
}

.logo_ctr_copy h3 {
	display: none;
}

.main-img-sp_btn ul {
	width: min(85% , 300px);
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
	margin: 0 auto;
}

.main-img-sp_btn ul a {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.main-img-pc_ctr {
	display: none;
}

.main-img_tab_img {
	display: none;
}

#problem {
	position: relative;
}

.problem_inner {
	padding-top: 4rem;
	padding-bottom: 1rem;
}

#problem h2 {
	width: min(90%,640px);
	margin: 0 auto;
}

ul.problem_list {
	width: min(100%,375px);
	margin: 2rem auto 1rem;
	position: relative;
}

li.problem_list_wrap {
	background-color: #eaeff3;
	margin-top: 1.25rem;
	border-radius: 0.5rem;
}

.problem_list_inner {
	padding: 1.75rem;
}

.problem_cont {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

.problem_icon {
	width: 30%;
	text-align: center;
}

.problem_txt {
	width: 65%;
	margin-bottom: 0;
}

ul.problem_list::before {
	display: none;
}

ul.problem_list::after {
	content: url("../images/problem-img06.png");
	position: absolute;
	right: -10rem	;
	bottom: -15rem;
	transform: scale(0.3);
}

p.problem_cach {
	background-color: #264a63;
	color: #fff;
	display: inline-block;
	padding: 1rem;
	position: absolute;
	bottom: -5rem;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	margin-bottom: 0;
	z-index: 5;
}

#overview {
	background-color: #ebf7f7;
	position: relative;
}

.overview_inner {
	padding: 6rem 0;
}

h2.overview_ttl {
	width: min(90%,768px);
	margin: 0 auto;
	text-align: center;
}

.overview_cont {
	padding-top: calc(1rem + 2vw);
}

.overview_item {
	text-align: center;
	padding-top: 1.5rem;
}

.overview_item h3 img {
	width: 70%;
}

.overview_cta {
	display: none;
}

.overview_cta .btn-dl,
.overview_cta .btn-contact {
	display: block;
	padding: 1rem 0;
}

.overview_cta article {
	padding-top: 2rem;
}

.features_inner {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

#features h2.features_ttl {
	width: min(90%,786px);
	margin: 0 auto;
}

.feature_item {
	padding-top: 3rem;
}

.feature_item h3 {
	text-align: center;
	color: #254a64;
	font-weight: 900;
}

.feature_dtl ul {
	margin-bottom: 0;
	padding-top: 1rem;
}

.feature_dtl li {
	font-size: clamp(1rem, 0.879rem + 0.52vw, 1.5rem);
	line-height: 1.5;
	margin-bottom: 1.25rem;
	padding-left: 70px;
	position: relative;
}

.feature_dtl li.feature01_dtl01::before,
.feature_dtl li.feature01_dtl02::before,
.feature_dtl li.feature01_dtl03::before,
.feature_dtl li.feature02_dtl01::before,
.feature_dtl li.feature02_dtl02::before,
.feature_dtl li.feature03_dtl01::before,
.feature_dtl li.feature03_dtl02::before {
	position: absolute;
	top: 50%;
	left: -2.5rem;
	transform: translateY(-50%) scale(0.45);
}

.feature_dtl li.feature01_dtl01::before {
	content: url("../images/features-icon01.png");
}

.feature_dtl li.feature01_dtl02::before {
	content: url("../images/features-icon02.png");
}

.feature_dtl li.feature01_dtl03::before {
	content: url("../images/features-icon03.png");
}

.feature_dtl li.feature02_dtl01::before {
	content: url("../images/features-icon04.png");
}

.feature_dtl li.feature02_dtl02::before {
	content: url("../images/features-icon05.png");
}

.feature_dtl li.feature03_dtl01::before {
	content: url("../images/features-icon06.png");
}

.feature_dtl li.feature03_dtl02::before {
	content: url("../images/features-icon07.png");
}

.feature_img {
	text-align: center;
}

.feature_img img {
	width: 80%;
}

#one-stop {
	background-color: #ffeddf;
	position: relative;
}

.one-stop_inner {
	padding-top: 3rem;
}

article.one-stop-prologue {
	width: min(90%,768px);
	margin: 0 auto;
}

article.one-stop-prologue picture {
	display: block;
	margin-bottom: 2rem;
}

article.one-stop-chapter {
	padding-top: 2rem;
}

h2.one-stop-chapter_ttl {
	width: min(100%,920px);
	margin: 0 auto;
}

article.one-stop_cont01 {
	padding-top: 3rem;
}

h3.one-stop_cont01_hdr,
h3.one-stop_cont02_hdr {
	background-color: #00a199;
	color: #fff;
	padding: 1.5rem 1rem;
	border-radius: 8px;
	text-align: center;
	font-weight: 900;
	position: relative;
}

h3.one-stop_cont01_hdr,
h3.one-stop_cont02_hdr {
	width: calc(100% - 90px);
	margin-left: 90px;
	z-index: 2;
}

.one-stop_cont02_hdr_wrap {
	width: min(100%,680px);
	margin: 0 auto;
}

h3.one-stop_cont01_hdr::before,
h3.one-stop_cont02_hdr::before {
	content: "";
	background-color: #00a199;
	clip-path: polygon(0 52%, 100% 96%, 100% 0);
	position: absolute;
	top: 50%;
	left: -1rem;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	z-index: -1;
}

h3.one-stop_cont01_hdr::after {
	content: url("../images/one-stop-icon01.png");
	position: absolute;
	left: -10rem;
	top: 50%;
	transform: translateY(-50%) scale(0.35);
	z-index: -2;
}

h3.one-stop_cont02_hdr::after {
	content: url("../images/one-stop-icon02.png");
	position: absolute;
	left: -10rem;
	top: 50%;
	transform: translateY(-50%) scale(0.35);
	z-index: -2;
}

.one-stop_cont02 {
	padding-top: 2rem;
}

.one-stop-sprint_wrap {
	background-color: #fff;
	border-radius: 8px;
	filter:drop-shadow(0 0 6px #ff7d14);
	margin: 1rem auto;
	width: min(100%,920px);
}

.one-stop-sprint_inner {
	padding: 5vw;
}

.one-stop-role_item01,
.one-stop-role_item02,
.one-stop-role_item03,
.one-stop-role_item04 {
	padding-left: calc(2rem + 1vw);
	padding-right: calc(2rem + 1vw);
	padding-top: 2rem;
}

.one-stop_epilogue {
	padding-top: calc(3rem + 2vw)
}

.achievements_wrap {
	background: url("../images/achievements-bg-sp.png") no-repeat top right;
	background-size: 80%;
}

.achievements_inner {
	width: clamp(240px, 80%,576px);
	margin: 0 auto;
	padding-top: 5rem;
	padding-bottom: 5rem;
}

.achievements_cont {
	padding-top: calc(2rem + 1vw);
}

.achievements_cont ul {
	padding-left: 20px;
}

.achievements_cont li {
	margin-bottom: 1rem;
	line-height: 1.5;
	text-align: justify;
}

.achievements_cont li:last-of-type {
	margin-bottom: 0;
}

#flow {
	background-color: #ebf7f7;
}

.flow-inner {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

.flow_cont {
	padding-top: calc(2rem + 1vw);
}

.flow_dtl {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.flow_dtl_arrow {
	position: relative;
	padding-bottom: 50px;
}

.flow_dtl_arrow::after {
	content: "";
	width: 30px;
	height: 15px;
	position: absolute;
	top: 77%;
	left: 50%;
	transform: translateX(-50%);
	background-color: #00a199;
	clip-path: polygon(100% 0, 0 0, 50% 100%);
	z-index: 1;
}

.flow_dtl_icon {
	width: 80px;
}

.flow_dtl_txt {
	width: calc(100% - 90px);
	text-align: justify;
}

.flow_dtl_txt h3 {
	text-align: left;
	font-weight: 700;
	color: #00a199;
	letter-spacing: 5px;
	margin-bottom: 0.25rem;
}

.flow_dtl_txt p {
	margin-bottom: 0;
	line-height: 1.5;
}

.op-company_inner {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

.op-company_txt {
	padding-top: 5vw;
}

footer {
	background-color: #254a64;
}

.footer_inner {
	padding: 0 0 1.5rem;
}

.footer_nav ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
}

.footer_nav ul li {
	width: 48%;
	margin-bottom: 1rem;
}

.footer_nav ul li a {
	text-decoration: none;
	font-size: 14px;
	cursor: pointer;
}

.footer_nav ul li a:hover {
	text-decoration: underline!important;
}

#fixed_menu {
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

#fixed_menu.show {
	opacity: 1;
	pointer-events: auto;
}

.fixed-menu_container {
	width: 100%;
	text-align: center;
	font-weight: 700;
	transition: all 1s;
	background-color: #254a64;
}

.fixed-menu_inner {
	width: min(100%,560px);
	margin: 0 auto;
	padding: .5rem 0;
}

.fixed-menu_container a {
	text-decoration: none;
	cursor: pointer!important;
	font-weight: bold;
	width: calc(50% - 2rem);
	display: inline-block;
	margin: 0 0.5rem;
}

.fixed-menu_inner .btn-dl,
.fixed-menu_inner .btn-contact {
	font-size: 14px;
}

.footer_nav a {
	color: #fff;
}

.btn-dl,
.btn-contact,
.btn-dl:hover,
.btn-contact:hover {
	color: #fff;
	font-weight: 600;
}

.btn-dl {
	background-color: #ff7d14;
}

.btn-dl:hover,
.btn-dl:active {
	background-color: #9D4F0F;
}

.btn-contact {
	background-color: #00a199;
}

.btn-contact:hover,
.btn-contact:active {
	background-color: #027E78;
}

.btn-copy {
	font-size: 1.25rem;
	font-weight: bold;
	position: relative;
	margin-bottom: .2em;
	text-align: center;
}

.btn-copy:before {
	margin-right: 1rem;
	content: '＼';
}

.btn-copy:after {
	margin-left: 1rem;
	content: '／';
}

/*-----------------
breakpoints
-----------------*/
@media (min-width:768px) and (max-width:1199.98px) {
	.main-img_tab_img {
		display: block;
	}
	
	.feature_img figure {
		display: none;
	}
	
	.feature_item01 {
		background: url("../images/features-img01.png") no-repeat right bottom;
	}
	
	.feature_item02 {
		background: url("../images/features-img02.png") no-repeat right bottom 3rem;
	}
	
	.feature_item03 {
		background: url("../images/features-img03.png") no-repeat right bottom;
	}
	
	.feature_item01,
	.feature_item02,
	.feature_item03 {
		background-size: 40%;
	}
}

@media (min-width:1199px) {
	.main-img-pc_wrap div.container {
		padding: 4rem 0;
		background-image: url("../images/main-img-pc.png") ;
		background-repeat: no-repeat;
		background-position: top right;
		background-size: contain;
	}
	
	.main-img_tab_img {
		display: none;
	}
}

@media (min-width:992px) {
	.main-img-pc_btn a {
		font-size: clamp(1rem, 0.879rem + 0.52vw, 1.5rem);
	}
	
	.overview_inner {
		width: 90%;
		margin: 0 auto;
		padding: 7rem 0;
	}
}

@media (min-width:768px) and (max-width:991.98px) {
	.main-img-pc_inner {
		padding-top: 1vw;
	}
	
	.main-img-pc_btn a {
		font-size: 14px!important;
	}
}

@media (min-width:768px) {
	.first-view{
		background-image: url("../images/main-img-bg-pc.png");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: bottom left;
	}
	
	h1.site-logo {
		width: 200px;
	}

	.logo_ctr_copy h3 {
		display: block;
	}
	
	.main-img-pc_ctr {
		display: block;
	}
	
	.main-img-sp_ctr {
		display: none;
	}
	
	.main-img-pc_btn {
		padding-top: calc(1rem + 1vw);
	}
	
	.main-img-pc_btn ul {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		column-gap: 1rem;
	}
	
	.main-img-pc_btn a {
		padding: 1vw 2vw;
		width: 100%;
	}
	
	.problem_inner {
		padding: 5rem 0 3rem;
	}
	
	p.problem_cach {
		padding: 1rem 2rem;
	}
	
	#overview {
		background-image: url("../images/overview-bg.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center center;
	}
	
	.overview_item {
		text-align: center;
	}
	
	.overview_item {
		padding-top: 0;
	}
	
	.overview_item h3 img {
		width: 85%;
	}
	
	article.overview_cta {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		column-gap: 2rem;
		justify-content: center;
	}
	
	article.overview_cta article {
		padding-top: 3rem;
	}
	
	.features_inner {
		padding-bottom: 10rem;
	}
	
	.feature_item h3 {
		text-align: left;
	}
	
	.feature_img img {
		width: 100%;
	}
	
	.one-stop_inner {
		padding: 14rem 0 0;
	}

	article.one-stop-prologue {
		width: min(90%,768px);
		position: absolute;
		top: -5rem;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.one-stop-sprint_inner {
		padding: 3vw;
	}
	
	.one-stop-role_item02,
	.one-stop-role_item04 {
		padding-top: 5rem;
	}
	
	.achievements_warap {
		background: url("../images/achievements-bg-pc.png") no-repeat top right;
		background-size: 80%;
	}
	
	.achievements_inner {
		padding-top: 8vw;
		padding-bottom: 8vw;
	}
	
	.flow_item {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	
	.flow_dtl {
		flex-direction: column;
	}
	
	.flow_dtl_icon,
	.flow_dtl_txt {
		width: 100%;
	}
	
	.flow_dtl_txt h3,
	.flow_dtl_icon figure {
		text-align: center;
	}
	
	.flow_dtl_txt h3 {
		margin-bottom: 0.8rem;
	}
	
	.flow_dtl_arrow {
		padding-bottom: 0;
	}
	
	.flow_dtl_arrow::after {
		width: 40px;
		height: 30px;
		top: 25%;
		left: 100%;
		transform:rotate(-90deg);
	}
}

@media (min-width:576px) {
	ul.problem_list::before {
		content: url("../images/problem-img04.png");
		position: absolute;
		left: -9rem	;
		bottom: -6rem;
		transform: scale(0.5);
		display: inline-block;
	}
	
	ul.problem_list::after {
		content: url("../images/problem-img05.png");
		position: absolute;
		right: -7.5rem	;
		bottom: -6rem;
		transform: scale(0.5);
	}
	
	.problem_icon img {
		width: 85%;
	}
	
	h3.one-stop_cont02_hdr {
		width: calc(100% - 140px);
		margin-left: 140px;
	}
	
	h3.one-stop_cont02_hdr::after {
		content: url("../images/one-stop-img03.png");
		left: -17rem;
		top: 50%;
		transform: translateY(-50%) scale(0.35);
		z-index: -2;
	}
	
	.footer_nav ul {
		flex-wrap: nowrap;
		width: min(100%,576px);
		margin: 0 auto;
	}
}

@media (min-width:540px) {
	.fixed-menu_inner .btn-dl,
	.fixed-menu_inner .btn-contact {
		font-size: 18px;
	}
	
	.fixed-menu_inner {
		padding: 1rem 0;
	}
	
	.op-company_txt {
		text-align: center;
	}
}