@charset "UTF-8";


@font-face {
	font-family: "ZenMaruGothic";
	font-weight: bold;
	src: url(../font/ZenMaruGothic/ZenMaruGothic-Bold.ttf) format("truetype");
}

@font-face {
	font-family: "Roboto";
	font-weight: bold;
	src: url(../font/Roboto/Roboto-Medium.ttf) format("truetype");
}

:root {
	--color-grey: #888;
	--color-grey-light: #ccc;
	--color-blue: #0d46ff;
	--color-brown-light: #F39926;
	--color-dark-blue: #314B64;
	--color-orange: #F39926;
	--color-red: #DB5A3D;
	--color-yellow: #FFFF00;

	--color-text: var(--color-dark-blue);

	--scrollbar-color: var(--color-text) !important;
}

.u-bg-color-white-half {
	background-color: rgba(255,255,255,.5);
}

.u-bg-color-white-quarter {
	background-color: rgba(255,255,255,.25);
}

.u-bg-color-orange {
	background-color: var(--color-orange);
}

.u-bg-color-red {
	background-color: var(--color-red);
}

.u-text-color-red {
	color: var(--color-red);
}

.u-underline-wavy {
	text-decoration: underline;
	/*text-decoration-color: var(--color-text);*/
	text-decoration-style: wavy;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}

.u-underline-thick {
	background-image: linear-gradient(var(--color-yellow), var(--color-yellow));
	background-position: center bottom;
	background-repeat: repeat-x;
	background-size: 100% .5em;
}

html, body {
	color: var(--color-text);
	font-family: Roboto, ZenMaruGothic, sans-serif;
	font-weight: bold;
	letter-spacing: .05em;
}

body {
	background-image: url(../img/bg.webp);
	background-position: top center;
	background-repeat: repeat-y;
	background-size: 100%;
}

a {
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p {
	color: inherit;
	line-height: 1;
	margin-top: 0;
	margin-bottom: 0;
}

.u-container {
	margin-left: auto;
	margin-right: auto;
	max-width: 1170px;
	width: 100%;
}

@media (min-width: 750px) {
	:root {
		--header-height: 100px;
	}

	body {
		font-size: 16px;
	}

	.u-under-750-only {
		display: none !important;
	}

	.u-container {
		padding-left: 30px;
		padding-right: 30px;
	}
}

@media (max-width: 749px) {
	:root {
		--header-height: 50px;
	}

	body {
		font-size: 14px;
	}

	.u-above-750-only {
		display: none !important;
	}

	.u-container {
		padding-left: 15px;
		padding-right: 15px;
	}
}







/*
 * Header
 */

.header {
	position: relative;
	z-index: 1;
}

.header-logo {
	aspect-ratio: 293.76 / 85.84;
}

.header-kv-image {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}

@media (min-width: 750px) {
	.header-container {
		padding: calc(100vw * 10 / 1366) calc(100vw * 50 / 1366) calc(100vw * 67 / 1366);
	}

	.header-logo {
		width: calc(100vw * 293 / 1366);
	}

	.header-text {
		padding-top: calc(100vw * 26 / 1366);
		padding-left: calc(100vw * 30 / 1366);
	}

	.header-text-image {
		width: calc(100vw * 503 / 1366);
	}

	.header-kv-image {
		height: calc(100vw * 913 / 1366);
		width: calc(100vw * 936 / 1366);
	}
}

@media (max-width: 749px) {
	.header-container {
		gap: calc(100vw * 666 / 750);
		padding: 5px 15px calc(100vw * 60 / 750);
	}

	.header-logo {
		width: calc(100vw * 350 / 750);
	}

	.header-text,
	.header-text-image,
	.header-kv-image {
		width: 100%;
	}

	.header-kv-image {
		top: 40px;
	}
}



/*
 * 登録はこちらから！
 */

.register-section {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
}

@media (min-width: 750px) {
	.register-section {
		padding-top: 25px;
		padding-bottom: 25px;
	}

	.register-text {
		font-size: 22px;
	}
}

@media (max-width: 749px) {
	.register-section {
		padding-top: 30px;
		padding-bottom: 30px;
	}

	.register-text {
		font-size: calc(100vw * 32 / 750);
	}
}


/*
 * LANDBRAIN MARCHÉって？
 */

.about-wrapper {
	background-repeat: no-repeat;
	z-index: 2;
}

@media (min-width: 750px) {
	.about-section {
		padding-top: 100px;
	}

	.about-wrapper {
		background-image: url(../img/bg_about_pc.svg);
		background-position: center 16px;
		background-size: 1366px;
	}

	.about-container {
		padding-top: 135px;
		padding-bottom: 240px;
	}

	.about-title {
		font-size: 42px;
		margin-bottom: 55px;
	}

	.about-text {
		font-size: 20px;
		margin-bottom: 54px;
	}

	.about-actions {
		gap: 27px;
	}

	.about-action {
		width: 176px;
	}
}

@media (max-width: 749px) {
	.about-wrapper {
		background-image: url(../img/bg_about_sp.svg);
		background-position: center calc(100vw * -50 / 750);
		background-size: calc(100% - 30px);
	}

	.about-container {
		padding-top: calc(100vw * 62 / 750);
		padding-bottom: calc(100vw * 120 / 750);
	}

	.about-title {
		font-size: calc(100vw * 50 / 750);
		margin-bottom: calc(100vw * 70 / 750);
	}

	.about-text {
		font-size: calc(100vw * 28 / 750);
		margin-bottom: calc(100vw * 73 / 750);
	}

	.about-actions {
		flex-direction: column;
		gap: calc(100vw * 30 / 750);
	}

	.about-action {
		width: calc(100vw * 270 / 750);
	}
}





/*
 *
 */
.bg-ellipse {
	background-repeat: no-repeat;
	background-size: 100%;
	z-index: 1;
}

.bg-ellipse.__top {
	background-image: url(../img/bg_ellipse_top_orange.svg);
	background-position: center bottom;
}

.bg-ellipse.__bottom {
	background-image: url(../img/bg_ellipse_bottom_orange.svg);
	background-position: center top;
}

.mix-section {
	position: relative;
	z-index: 1;
}

.mix-wrapper {
	background-color: var(--color-orange);
	margin-top: -1px;
	margin-bottom: -1px;
}

.problem-item-icon,
.problem-item-suffix {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.problem-title {
	padding-bottom: 5px;
}

.problem-title-big {
	position: relative;
}

.problem-title-big:before {
	position: absolute;
	left: 50%;
	bottom: 100%;
	aspect-ratio: 1;
	background-color: white;
	border-radius: 100%;
	content: "";
	width: .2em;
	transform: translate(-50%,-.1em);
	z-index: 1;
}

.problem-items {
	max-width: 866px;
}

.problem-item-list-item:before {
	position: absolute;
	top: 0;
	left: 0;
	background-image: url(../img/icon_checkbox_checked_orange.svg);
	background-position: center;
	background-repeat: no-repeat;
	content: "";
}

.solution-dots {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
}

.solution-dot {
	border-radius: 100%;
}

@media (min-width: 750px) {
	.problem-item-list-item,
	.problem-item-suffix {
		font-size: 20px;
	}

	.bg-ellipse {
		height: 200px;
	}

	.mix-section {
		margin-top: -200px;
		margin-bottom: -200px;
	}

	.mix-wrapper {
		background-image: url(../img/bg_question_marks_pc.svg);
		background-position: center 60px;
		background-size: 1150px 740px;
		padding-top: 120px;
		padding-bottom: 115px;
	}

	.problem-title {
		font-size: 50px;
		margin-bottom: 60px;
	}

	.problem-title-big {
		font-size: 64px;
	}

	.problem-items {
		gap: 50px;
		padding-bottom: 230px;
	}

	.problem-item {
		border-radius: 30px;
		padding: 45px 50px;
		width: 50%;
	}

	.problem-item-list {
		gap: 45px;
	}

	.problem-item-list-item {
		padding-left: 40px;
	}

	.problem-item-list-item:before {
		background-size: 32px 28px;
		height: 28px;
		width: 32px;
	}

	.problem-item.__left .problem-item-icon {
		top: calc(100% - 24px);
		height: 136px;
		width: 156px;
	}

	.problem-item.__right .problem-item-icon {
		top: calc(100% - 61px);
		height: 174px;
		width: 247px;
	}

	.problem-item-suffix {
		top: calc(100% + 120px);
	}

	.solution-subtitle {
		width: 557px;
	}

	.solution-dots {
		top: calc(100% + 35px);
		gap: 20px;
	}

	.solution-dot {
		height: 10px;
		width: 10px;
	}
}

@media (max-width: 749px) {
	.problem-title,
	.problem-items {
		align-items: center;
		flex-direction: column;
	}

	.problem-items,
	.solution-subtitle {
		max-width: calc(100% - 30px);
	}

	.bg-ellipse {
		height: calc(100vw * 200 / 750);
	}

	.mix-section {
		margin-top: calc(100vw * -200 / 750);
		margin-bottom: calc(100vw * -200 / 750);
	}

	.mix-wrapper {
		background-image: url(../img/bg_question_marks_sp.svg);
		background-position: center calc(100vw * 160 / 750);
		background-size: calc(100vw * 868 / 750) calc(100vw * 1677 / 750);
		padding-top: calc(100vw * 110 / 750);
		padding-bottom: calc(100vw * 110 / 750);
	}

	.problem-title {
		gap: .5em;
		font-size: calc(100vw * 50 / 750);
		margin-bottom: calc(100vw * 80 / 750);
	}

	.problem-title-big {
		font-size: calc(100vw * 78 / 750);
	}

	.problem-items {
		gap: calc(100vw * 240 / 750);
		padding-bottom: calc(100vw * 320 / 750);
	}

	.problem-item {
		border-radius: calc(100vw * 30 / 750);
		padding: calc(100vw * 55 / 750) calc(100vw * 110 / 750);
		width: 100%;
	}

	.problem-item-list {
		gap: calc(100vw * 35 / 750);
	}

	.problem-item-list-item {
		font-size: calc(100vw * 28 / 750);
		padding-left: calc(100vw * 55 / 750);
	}

	.problem-item-list-item:before {
		background-size: calc(100vw * 40 / 750) calc(100vw * 36 / 750);
		height: calc(100vw * 36 / 750);
		width: calc(100vw * 40 / 750);
	}

	.problem-item.__left .problem-item-icon {
		top: calc(100% - 100vw * 37 / 750);
		height: calc(100vw * 181 / 750);
		width: calc(100vw * 207 / 750);
	}

	.problem-item.__right .problem-item-icon {
		top: calc(100% - 100vw * 40 / 750);
		height: calc(100vw * 199 / 750);
		width: calc(100vw * 282 / 750);
	}

	.problem-item-suffix {
		font-size: calc(100vw * 26 / 750);
	}

	.problem-item.__left .problem-item-suffix {
		top: calc(100% + 100vw * 160 / 750);
	}

	.problem-item.__right .problem-item-suffix {
		top: calc(100% + 100vw * 180 / 750);
	}

	.solution-dots {
		top: calc(100% + 100vw * 25 / 750);
		gap: calc(100vw * 20 / 750);
	}

	.solution-dot {
		height: calc(100vw * 13 / 750);
		width: calc(100vw * 13 / 750);
	}
}





/*
 * Steps
 */

.steps-items {
	max-width: 866px;
}

.steps-item-cover:after {
	position: absolute;
	top: 50%;
	aspect-ratio: 1;
	border: 1px solid var(--color-orange);
	border-radius: 100%;
	width: 420px;
	z-index: -1;
}

.steps-item-series {
	gap: .5em;
	letter-spacing: .05em;
}

.steps-item-series-pipe {
	width: 2px;
}

.steps-item-title-big-number {
	margin-left: .1em;
}

.steps-item-title .u-underline-thick {
	background-image: linear-gradient(rgba(243, 153, 38, 0.7), rgba(243, 153, 38, 0.7));
}

.steps-item-title .u-underline-thick.__special {
	background-position: center 70%;
}

@media (min-width: 750px) {
	.steps-item-cover,
	.steps-item-content {
		width: 50%;
	}

	.steps-wrapper {
		background-size: 1515px 1812px;
		padding-top: 130px;
		padding-bottom: 150px;
	}

	.steps-subtitle {
		height: 155px;
		margin-bottom: 100px;
		width: 487px;
	}

	.steps-items {
		gap: 60px;
	}

	.steps-item {
		gap: 40px;
	}

	.steps-item.__even {
		flex-direction: row-reverse;
	}

	.steps-item-series {
		margin-bottom: 15px;
	}

	.steps-item-cover:after {
		content: "";
	}

	.steps-item.__odd .steps-item-cover:after {
		left: 0;
		transform: translate(-330px,-50%);
	}

	.steps-item.__even .steps-item-cover:after {
		right: 0;
		transform: translate(330px,-50%);
	}

	.steps-item-series-label {
		font-size: 12px;
	}

	.steps-item-series-number {
		font-size: 22px;
	}

	.steps-item-series-pipe {
		height: 17px;
	}

	.steps-item-title-wrapper {
		gap: 15px;
		margin-bottom: 25px;
	}

	.steps-item-title {
		font-size: 26px;
	}

	.steps-item-title-big {
		font-size: 34px;
	}

	.steps-item-title-big-number {
		font-size: 66px;
	}

	.steps-item-text {
		font-size: 16px;
	}

	.steps-item-text-small {
		font-size: 12px;
		margin-top: 10px;
	}
}

@media (max-width: 749px) {
	.steps-subtitle,
	.steps-item-cover,
	.steps-item-content {
		width: calc(100% - 30px);
	}

	.steps-wrapper {
		padding-top: calc(100vw * 130 / 750);
		padding-bottom: calc(100vw * 140 / 750);
	}

	.steps-subtitle {
		margin-bottom: calc(100vw * 75 / 750);
	}

	.steps-items {
		gap: calc(100vw * 55 / 750);
	}

	.steps-item {
		align-items: center;
		flex-direction: column-reverse;
		gap: calc(100vw * 40 / 750);
	}

	.steps-item-content {
		gap: calc(100vw * 10 / 750);
	}

	.steps-item-series {
		gap: .2em;
		margin-bottom: calc(100vw * 15 / 750);
	}

	.steps-item-series-label {
		font-size: calc(100vw * 20 / 750);
	}

	.steps-item-series-number {
		font-size: calc(100vw * 32 / 750);
	}

	.steps-item-series-pipe {
		height: calc(100vw * 30 / 750);
		transform: translateY(10%);
	}

	.steps-item-title-wrapper {
		gap: calc(100vw * 15 / 750);
		margin-bottom: calc(100vw * 25 / 750);
	}

	.steps-item-title {
		font-size: calc(100vw * 38 / 750);
		gap: calc(100vw * 10 / 750);
	}

	.steps-item-title-big {
		font-size: calc(100vw * 56 / 750);
	}

	.steps-item-title-big-number {
		font-size: calc(100vw * 100 / 750);
	}

	.steps-item-text {
		font-size: calc(100vw * 26 / 750);
	}

	.steps-item-text-small {
		font-size: calc(100vw * 22 / 750);
		margin-top: calc(100vw * 10 / 750);
	}
}




/*
 * 地域をキッチンカーで元気に。
 * キッチンカーマッチングプラットフォーム
 * 「ランドブレインマルシェ」
 */

@media (min-width: 750px) {
	.brand-wrapper {
		padding-top: 120px;
		padding-bottom: 100px;
	}

	.brand-logo {
		width: 385px;
	}

	.brand-text {
		font-size: 20px;
	}
}

@media (max-width: 749px) {
	.brand-wrapper {
		padding-top: calc(100vw * 110 / 750);
		padding-bottom: calc(100vw * 120 / 750);
	}

	.brand-logo {
		width: calc(100vw * 385 / 750);
	}

	.brand-text {
		font-size: calc(100vw * 30 / 750);
	}
}



/*
 * 詳しいサービス内容はこちらから！
 */
.details-section {
	position: relative;
	z-index: 20;
}

@media (min-width: 750px) {
	.details-wrapper {
		padding-top: 25px;
		padding-bottom: 25px;
	}

	.details-text {
		font-size: 22px;
	}
}

@media (max-width: 749px) {
	.details-wrapper {
		padding-top: 30px;
		padding-bottom: 30px;
	}

	.details-text {
		font-size: calc(100vw * 32 / 750);
	}
}



/*
 * Footer
 */

.footer {
	position: relative;
	background-color: var(--color-dark-blue);
	color: white;
	letter-spacing: .05em;
	z-index: 20;
}

.footer-copyright {
	font-family: ZenMaruGothic, sans-serif;
	gap: .5em;
}

@media (min-width: 750px) {
	.footer-container,
	.footer-main {
		align-items: center;
	}

	.footer-wrapper {
		padding-top: 45px;
		padding-bottom: 45px;
	}

	.footer-container {
		justify-content: space-between;
	}

	.footer-main {
		gap: 10px;
	}

	.footer-logo {
		width: 260px;
	}

	.footer-copyright {
		font-size: 12px;
	}

	.footer-nav {
		font-size: 16px;
	}

	.footer-nav-separator {
		margin-left: 10px;
		margin-right: 10px;
	}
}

@media (max-width: 749px) {
	.footer-wrapper {
		padding-top: calc(100vw * 45 / 750);
		padding-bottom: calc(100vw * 145 / 750);
	}

	.footer-container {
		flex-direction: column;
		gap: calc(100vw * 55 / 750);
	}

	.footer-main {
		align-items: center;
		gap: calc(100vw * 10 / 750);
	}

	.footer-logo {
		width: calc(100vw * 350 / 750);
	}

	.footer-copyright {
		font-size: calc(100vw * 18 / 750);
	}

	.footer-nav {
		font-size: calc(100vw * 24 / 750);
		padding-left: calc(100vw * 25 / 750);
	}
}