@charset "utf-8";


/*  common
-------------------------------------------------------------------- */
.nav-document {
	--button-color: white;
	--button-bg: var(--cobalt);
	--button-hover-bg: var(--gold);
}
.nav-contact {
	--button-color: var(--cobalt);
	--button-bg: white;
	--button-hover-color: white;
	--button-hover-bg: var(--sky);
}

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

/*  header
-------------------------------------------------------------------- */
header {
	padding-inline: var(--m);
	background: white;

	display: flex;
	justify-content: space-between;
	align-items: center;
}

header .nav-contact {
	--button-border-weight: 2px;
	--button-border-color: var(--cobalt);
}

@media screen and (min-width: 1124px) {
	header .burger {
		display: none;
	}
	header nav {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 1.5lh 2ic;
	}	
}
@media screen and (max-width: 1123px) {
	header .burger {
		display: block;
	}
	header nav {
		width: 100svw;
		padding-block: var(--m2);
		padding-inline: var(--m);
		background: white;

		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		gap: var(--m2);

		position: fixed;
		left: 0;
		top: var(--header-height);
		bottom: 0;
	}
	header nav a {
		font-size: var(--medium-size);
	}
	header nav .button {
		width: calc(600 * var(--px));
		max-width: 100%;
		font-size: var(--medium-size);
	}
	header nav .nav-document {
		margin-top: var(--m);
	}
	body:not(.is_show_navigation) header nav {
		pointer-events: none;
		opacity: 0;
		z-index: -1;
	}
	body:is(.is_show_navigation) header nav {
		pointer-events: all;
		opacity: 1;
	}
}
@media screen and (max-width: 767px) {
	header nav .button {
		width: 100%;
	}
}


/*  main
-------------------------------------------------------------------- */
main.content {}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	main.content {
		overflow-x: clip;
	}
}



/*  pages
-------------------------------------------------------------------- */

/*  KV
-------------------------------------------------------------------- */
section#billboard .swiper-slide {
	position: relative;
}
section#billboard .nav-document {
	--button-bg: var(--gold);
	--button-color: black;
	--button-hover-bg: var(--blue);
	--button-hover-color: white;
	font-size: calc(18 * var(--px));

	position: absolute;

}
.design_a .nav-document {
	left: 50%;
	bottom: 5%;
	translate: -50% -50%;
}
.design_b .nav-document {
	left: 67.5%;
	top: 80%;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	section#billboard .nav-document {
		width: calc(100% - var(--m2));
		margin-inline: auto;
		left: 50%;
		top: auto;
		bottom: 5%;
		translate: -50% -50%;
	}
}



/*  ウェビナーバナー
-------------------------------------------------------------------- */
section#webinar {
	padding-top: var(--m3);
}
@media (any-hover: hover) {
	section#webinar a {
		transition: 0.3s 0s ease;
	}
	section#webinar a:hover {
		opacity: 0.6;
	}

}
@media screen and (min-width: 768px) {
	section#webinar .wrap {
		max-width: 900px;
	}
}


/*  課題
-------------------------------------------------------------------- */
section#problems {
	border-radius: 0 0 var(--m10) var(--m10);
	background: var(--ice);
	position: relative;
	z-index: auto;
}
section#problems::after {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--sky);
	position: absolute;
	inset: 0;
	z-index: -1;
}
section#problems .title {
	color: var(--blue);
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}



/*  cta
-------------------------------------------------------------------- */
section.cta :is(nav, .notes) {
	margin-top: var(--m2);
	width: fit-content;
}
section.cta nav {
	gap: var(--m);
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	section.cta nav .button {
		width: 100%;
	}
}


/*  課題下cta
-------------------------------------------------------------------- */
section#problems + section.cta {
	padding-block: var(--m4);
	background: var(--sky);
	color: white;
}
section#problems + section.cta .image {
	margin-inline: auto;
}
section#problems + section.cta nav {
	margin-inline: auto;
}
section#problems + section.cta .button {
	--button-hover-bg: var(--blue);
	--button-hover-color: white;
	box-shadow: 0 4px 8px 0 rgb(0 0 0 / 0.2);
}
section#problems + section.cta .nav-document {
	--button-bg: var(--gold);
	--button-color: black;
}
section#problems + section.cta .notes {
	margin-inline: auto;
}

@media screen and (min-width: 768px) {
	section#problems + section.cta .image {
		width: calc(760 * var(--px));
	}	
	section#problems + section.cta .button {
		width: calc(420 * var(--px));
	}
}
@media screen and (max-width: 767px) {
	section#problems + section.cta .image {
		width: 80%;
	}
	section#problems + section.cta .title {
		font-size: calc(25 * var(--px));
	}
}




/*  ソリューション
-------------------------------------------------------------------- */
section#solutions {
	background: var(--sky);
	color: white;
}
section#solutions .background-type {
	left: 0;
	translate: -1% 0;
	opacity: 0.15;
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
}




/*  ソリューション下cta
-------------------------------------------------------------------- */
section#solutions + section.cta {
	background: var(--sky);
	position: relative;
	z-index: 0;
}
section#solutions + section.cta::after {
	display: block;
	width: calc(100% - var(--m2));
	height: 100%;
	background: var(--ice);
	border-radius: var(--m10) 0 0 var(--m10);
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}
section#solutions + section.cta .wrap {
	max-width: calc(1240 * var(--px));
	padding-block: var(--m8);
}
section#solutions + section.cta .headline {
	font-size: var(--large-size);
}
@media screen and (min-width: 768px) {
	section#solutions + section.cta .image {
		width:  31.25%;
	}
	section#solutions + section.cta .button {
		width: calc(320 * var(--px));
	}
}
@media screen and (max-width: 767px) {
	section#solutions + section.cta::after {
		width: calc(100% - var(--m));
		border-radius: var(--m4) 0 0 var(--m4);
	}
	section#solutions + section.cta .wrap {
		padding-block: var(--m3);
		padding-inline: var(--m3) var(--m2);
	}
	section#solutions + section.cta .text {
		order: 2;
	}
	section#solutions + section.cta .headline {
		margin-top: var(--m2);
		text-align: center;
	}
	section#solutions + section.cta .notes {
		order: 3;
	}
}




/*  事例
-------------------------------------------------------------------- */
section#cases {
	background: var(--sky);
	border-radius: 0 0 var(--m10) var(--m10);
	color: white;
}
section#cases .container {
	gap: var(--m4) var(--m2);
}
section#cases .card {
	padding-bottom: var(--m2);
	align-self: stretch;
}
section#cases .image {
	border-radius: 10px;
	margin-bottom: var(--m);
}
section#cases .background-type {
	left: 0;
	top: auto;
	bottom: 0;
	translate: -1% 0;
	opacity: 0.15;
}

@media screen and (min-width: 768px) {
	section#cases .card {
		flex: 1 1 40%;
	}
}
@media screen and (max-width: 767px) {
	section#cases .background-type {
		top: var(--m3);
		bottom: auto;
	}
}




/*  機能
-------------------------------------------------------------------- */
section#functions {
	background: var(--ice);
}
section#functions .container {
	margin-top: var(--m4);
	padding-inline: var(--m4);
	align-items: stretch;
	gap: var(--m2);
}
section#functions .container .image {
	margin-block: var(--m);
	margin-inline: auto;
}
section#functions .container .sign {
	margin-inline: auto;
}
section#functions .container .headline {
	text-align: center;
}
section#functions .container .headline + p {
	text-align: justify;
}
@media screen and (min-width: 768px) {
	section#functions .container .card {
		flex: 1 1 25%;
	}
	section#functions .container .headline {
		font-size: calc(18 * var(--px));
	}
	section#functions .container .image {
		width: calc(200 * var(--px));
	}
}
@media screen and (max-width: 767px) {
	section#functions .sign {
		margin-inline: auto;
	}
	section#functions .headline {
		text-align: center;
	}
	section#functions .container {
		margin-top: var(--m2);
		padding-inline: 0;
	}
	section#functions .container .image {
		width: 50%;
	}
}




/*  お問い合わせ
-------------------------------------------------------------------- */
section#contact {
	background: var(--sky);
}
section#contact .headline {
	margin-bottom: var(--m4);
	color: white;
	text-align: center;
}
section#contact .container {
	padding-block: var(--m4);
	padding-inline: var(--m2);
	border-radius: var(--m);
	background: white;
}
section#contact .title {
	color: var(--blue);
	text-align: center;
}
section#contact .scroll-vertical {
	border: 1px solid #ccc;
	background: #f8f8f8;
}
section#contact .agreement {
	margin-top: var(--m);
	margin-inline: auto;
}
section#contact .button {
	color: white;
	--button-bg: var(--cobalt);
	--button-hover-bg: var(--sky);
}
section#contact .background-type {
	left: 0;
	top: var(--m6);
	translate: -1% 0;
	opacity: 0.15;
}

@media screen and (min-width: 768px) {
	section#contact .container {
		width: calc(1000 * var(--px));
		margin-inline: auto;
	}
	section#contact .button {
		width: calc(420 * var(--px));
	}
}
@media screen and (max-width: 767px) {
	section#contact .container {
		padding-inline: var(--m);
	}
	section#contact .scroll-vertical {
		padding-block: var(--m);
		padding-inline: var(--m);
		font-size: 95%;
	}
	section#contact .agreement {
		padding-block: 0.5lh;
		font-size: 95%;
		letter-spacing: 0;
	}
}

/*  送信完了
-------------------------------------------------------------------- */
section#thanks {
	background: var(--sky);
}
section#thanks .heading {
	color: white;
}
section#thanks .nav-home {
	--button-color: white;
	--button-hover-color: black;
	--button-hover-bg: var(--gold);
	margin-inline: auto;
}
section#thanks .background-type {
	left: 0;
	top: var(--m6);
	translate: -1% 0;
	opacity: 0.15;
}





/*  footer
-------------------------------------------------------------------- */
footer {
	padding-block: var(--m8);
	background: var(--ink);
}
footer a.link-bottom-company {
	padding: 16px 16px;
	border-radius: 16px;
	background-color: white;
	margin-inline: auto;

	display: flex;
	flex-flow: row wrap;
	align-items: center;
}
footer a.link-bottom-company .logo {
	width: 40%;
}
footer a.link-bottom-company .text {
	width: 50%;
	margin-inline: auto;
}
footer a.link-bottom-company .text p {
	margin: 0;
	line-height: 1.4;
}
footer .copyright {
	margin-top: var(--m2);
	color: white;
	text-align: center;
}
@media screen and (min-width: 768px) {
	footer a.link-bottom-company {
		width: calc(600 * var(--px));
	}
}
@media screen and (max-width: 767px) {
	footer a.link-bottom-company {
		display: block;
		margin-inline: var(--m);
	}
	footer a.link-bottom-company .logo {
		width: 90%;
		margin-inline: auto;
	}
	footer a.link-bottom-company .text {
		margin-top: var(--m);
		width: 100%;
	}
	footer a.link-bottom-company .text p {
		font-size: 90%;
	}
	footer .copyright {
		font-size: var(--small-size);
	}
}