@charset "UTF-8";

/* web-section */
@media all {
	.lead-text {text-align: center;}
	.web-device-list {
		display: flex;
		justify-content: space-between;
	}
	.web-device-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		font-family: var(--lineseed);
		font-weight: bold;
		color: #fff;
	}
	.web-device-item:nth-child(2) {transition-delay: .3s;}
	.web-device-item:nth-child(3) {transition-delay: .6s;}

	.melit-item {font-weight: bold;}
	.melit-no {color: #fff;}

	.inview.underline.ease-in::before {transition-duration: .8s;}
	.inview.underline.ease-out::before {
		transition-delay: .8s;
		transition-duration: .2s;
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.lead-text {
			margin-top: 20rem;
			line-height: var(--txt-lineheight);
		}
		.web-content {margin-top: 60rem;}

		.web-device img {
			display: block;
			margin: 0 auto;
			width: 320rem;
		}
		.web-device-list {
			margin: 0 auto;
			width: 300rem;
		}
		.web-device-item {
			padding-top: 1rem;
			width: 90rem;
			height: 90rem;
			font-size: 14rem;
			line-height: 19rem;
		}

		.melit-list {
			margin-top: 50rem;
			width: 355rem;
		}
		.melit-item {display: flex;}
		.melit-item + .melit-item {margin-top: 20rem;}
		.melit-no {
			padding: 5rem 0 5rem 4rem;
			width: 54rem;
			height: 32rem;
			font-size: 22rem;
			clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
		}
		.melit-text {
			padding-left: 5rem;
			width: calc(100% - 54rem);
			font-size: 20rem;
			line-height: 34rem;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.lead-section {padding-top: 100rem;}
		.lead-text {line-height: 2.5;}

		.web-content {margin-top: 120rem;}
		.web-content-pc-left {
			width: 450rem;
		}
		.web-content-pc-left img {
			width: 510rem;
		}

		.web-device-list {
			margin-top: 5rem;
			width: 400rem;
		}
		.web-device-item {
			width: 120rem;
			height: 120rem;
			font-size: 16rem;
			line-height: 24rem;
		}

		.web-content-pc-right {width: 510rem;}
		.melit-item {display: flex;}
		.melit-item + .melit-item {margin-top: 60rem;}
		.melit-no {
			padding: 9rem 8rem;
			width: 80rem;
			height: 50rem;
			font-size: 32rem;
			clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
		}
		.melit-text {
			margin-top: -8rem;
			margin-left: 14rem;
			width: calc(100% - 80rem);
			font-size: 22rem;
			line-height: 38rem;
		}

	}
}

/* sample-section */
@media all {
	.youtube-btn {text-align: center;}

	/* sp */
	@media only screen and (max-width: 767px) {
		.sample-section {
			padding-top: 60rem;
			padding-bottom: 90rem;
		}
		.sample-content {margin-top: 40rem;}
		.youtube-btn {margin-top: 25rem;}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.sample-section {padding-top: 150rem;}
		.sample-content {margin-top: 50rem;}
		.youtube-btn {margin-top: 40rem;}
	}
}

/* text-section */
@media all {
	.text-section {background-color: var(--bg-lightblue);}
	.text-section-inner {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	.text-content-ttl {
		font-weight: bold;
		color: var(--main-blue);
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.text-section {padding: 60rem 25rem;}
		.text-section-inner {
			flex-direction: column;
			align-items: center;
		}
		.text-img {
			order: 2;
			margin-top: 40rem;
			width: 220rem;
		}
		.text-content {
			order: 3;
			margin-top: 50rem;
		}
		.text-content-ttl {
			margin-bottom: 20rem;
			font-size: 18rem;
			text-align: center;
			line-height: 34rem;
		}
		.text-content p:not(.text-content-ttl) {line-height: var(--txt-lineheight);}


	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.text-section {
			margin-top: 80rem;
		}
		.text-section-inner {
			flex-wrap: wrap;
			align-content: space-between;
			padding: 80rem 0;
			height: 553rem;
		}
		.text-img {
			width: 270rem;
			height: 380rem;
			box-shadow: 5rem 5rem 5rem rgba(0,0,0,.2);
		}
		.text-header, .text-content {width: 600rem;}
		.text-content {margin-top: 50rem;}
		.text-content-ttl {
			font-size: 22rem;
			margin-bottom: 20rem;
		}
		.text-content p:not(.text-content-ttl) {line-height: 2.5;}
	}
}


/* app-section */
@media all {
	.app-dl {
		display: flex;
		flex-wrap: wrap;
		line-height: 1.5;
	}
	.app-dt {
		padding: 3rem;
		font-weight: 600;
		text-align: center;
	}
	.app-dt p {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background : linear-gradient(-60deg, rgba(0, 97, 162, 1) 31.71%, rgba(0, 139, 194, 1) 100%);
		border-radius: 5rem;
		color: #fff;
		line-height: 1.5;
	}
	.app-dd {border-top: 2rem dotted var(--table-lightblue);}
	.app-dl .app-dd:last-child {border-bottom: 2rem dotted var(--table-lightblue);}

	.app-dd .button {
		padding-left: 0;
		justify-content: center;
	}

	.app-dt p small {
		margin-top: 1em;
		font-weight: normal;
	}
	.web-price-notice {color: #ec8083;}

	.form-content-ttl {
		font-family: var(--lineseed);
		font-weight: bold;
		color: var(--main-blue);
	}

	.form-content-btn .button {justify-content: center;}

	/* sp */
	@media only screen and (max-width: 767px) {
		.app-section {
			padding: 80rem 25rem 110rem;
		}
		.app-dl {margin-top: 30rem;}
		.app-dt {
			width: 70rem;
			font-size: 13rem;
		}
		.app-dt p {font-weight: 400;}
		.app-dt p small {
			font-size: 11rem;
		}
		.app-dd {
			padding: 10rem 0 10rem 15rem;
			width: calc(100% - 70rem);
			font-size: 14rem;
			line-height: 32rem;
		}
		.app-dd.web-types {line-height: 26rem;}


		.app-dd .button {
			margin-top: 10rem;
			width: 145rem;
			height: 36rem;
		}

		.web-price-notice {
			margin-top: -4rem;
			font-size: 12rem;
		}


		.app-notice-list {
			margin-top: 0;
			font-size: 12rem;
			line-height: 22rem;
		}
		.app-notice-item + .app-notice-item {margin-top: 0;}

		.form-content {
			display: flex;
			flex-direction: column-reverse;
			margin-top: 80rem;
			margin-left: -25rem;
			width: 100vw;
			background-color: var(--bg-lightblue);
		}
		.form-content-pc-left {
			position: relative;
			padding: 50rem 25rem 70rem;
		}
		.form-content-ttl {
			font-size: 18rem;
			text-align: center;
			line-height: 34rem;
		}
		.form-content-pc-left > p {line-height: var(--txt-lineheight);}

		.form-content-btn {
			position: absolute;
			bottom: -30rem;
			left: calc(50% - 125rem);
			width: 250rem;
			height: 60rem;
		}
		.form-content-btn .button {
			width: 100%;
			height: 100%;
			font-size: 16rem;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.app-section {margin-top: 80rem;}
		.app-section-inner {width: 800rem;}

		.app-dl {margin-top: 50rem;}
		.app-dt {
			width: 180rem;
		}
		.app-dd {
			padding: 17rem 20rem;
			width: calc(100% - 180rem);
		}

		.app-required-list {margin-top: 20rem;}
		.app-required-item {
			width: 192rem;
			line-height: 2;
		}

		.app-btn {margin-top: 16rem;}
		.app-dd .button {
			width: 200rem;
			height: 40rem;
		}


		.app-notice-list {font-size: 14rem;}
		
		.web-watch {
			padding: 12rem 20rem;
			line-height: 28rem;
		}
		.app-dt p small {font-size: 12rem;}
		.web-types {
			padding: 15rem 20rem;
			line-height: 2;
		}
		.web-price-notice {
			margin-top: 8rem;
			font-size: 14rem;
		}


		.form-content {
			display: flex;
			justify-content: space-between;
			margin: 100rem auto 0;
			width: 1000rem;
			background-color: var(--bg-lightblue);
		}
		.form-content-pc-left {
			position: relative;
			padding-left: 40rem;
			width: 550rem;
			line-height: 2;
		}
		.form-content-ttl {
			margin: 30rem 0 12rem;
			font-size: 22rem;
		}
		.form-content-pc-right {
			width: 450rem;
			clip-path: polygon(30rem 0, 100% 0, 100% 100%, 0 100%);
		}
		.form-content-btn {
			position: absolute;
			bottom: -40rem;
			left: calc(50% - 160rem);
			width: 320rem;
			height: 80rem;
		}
		.form-content-btn .button {
			width: 100%;
			height: 100%;
			font-size: 20rem;
		}
	}
}

/* flow-section */
@media all {
	.flow-section {background-color: var(--bg-lightblue);}

	.flow-item {
		background-color: #fff;
		text-align: center;
	}
	.flow-item-no,
	.flow-item-ttl {
		font-family: var(--lineseed);
		font-weight: bold;
	}
	.flow-item-no {
		position: relative;
		display: inline-block;
		--rainbow-text-end: 85%;
	}
	.flow-item-no::after {
		content: '●';
		position: absolute;
		z-index: 3;
		left: 50%;
		color: #00a2e7;
	}
	.flow-item:nth-child(2) .flow-item-no::after {color: #5b54e2;}
	.flow-item:nth-child(3) .flow-item-no::after {color: #b507de;}
	.flow-item:nth-child(4) .flow-item-no::after {color: #f00;}


	.flow-item .flow-line {
		position: absolute;
		z-index: 1;
		display: block;
		height: max(1px, 1rem);
		width: 0;
		transition: width .45s;
	}
	.flow-item:nth-child(1) .flow-line {
		background: linear-gradient(to right, #00a2e7, #5b54e2);
	}
	.flow-item:nth-child(2) .flow-line {
		background: linear-gradient(to right, #5b54e2, #b507de);
	}
	.flow-item:nth-child(3) .flow-line {
		background: linear-gradient(to right, #b507de, #f00);
	}

	.flow-item-txt {text-align: left;}
	.flow-item-notice {
		margin-top: .3em;
		color: var(--txt-gray);
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.flow-section {padding: 60rem 25rem;}

		.flow-list {margin-top: 40rem;}

		.flow-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex-wrap: wrap;
			padding-left: 10rem;
			border-radius: 7rem;
			height: 160rem;
		}
		.flow-item:nth-child(n+3) {height: 131rem;}
		.flow-item + .flow-item {margin-top: 15rem;}
		.flow-item-no {
			position: relative;
			margin: 50rem 50rem 50rem 0;
			padding: 32.5rem 0;
			width: 50rem;
			font-size: 35rem;
		}
		.flow-item-no::after {
			top: 45rem;
			left: 62rem;
			font-size: 15rem;
		}
		.flow-item-ttl,
		.flow-item-txt {width: calc(100% - 100rem);}

		.flow-item-txt {
			padding-left: 18rem;
			padding-right: 14rem;
		}
		.flow-item-ttl {
			display: block;
			margin: 0;
			font-size: 18rem;
			text-align: left;
		}

		.flow-item-period {margin-top: 3rem;}
		.flow-item-period p {margin-top: 10rem;}
		.flow-item-period p:not(:first-child) {display: inline-block;}

		.flow-item-txt {
			position: relative;
			margin-top: 6rem;
			line-height: 24rem;
		}
		.flow-item-notice {
			position: absolute;
			bottom: -16rem;
			right: 14rem;
			font-size: 11rem;
		}


		.flow-item .flow-line {
			top: 50rem;
			left: 69rem;
			transition-timing-function: ease;
			transition: width .75s;
			transform: rotate(90deg);
			transform-origin: left center;
		}
		.flow-line.animated {width: 170rem;}
		.flow-item:nth-child(n+3) .flow-line.animated {width: 150rem;}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.flow-section {
			margin-top: 130rem;
			padding: 60rem 0 80rem;
		}

		.flow-list {
			display: flex;
			justify-content: space-between;
			margin-top: 50rem;
		}

		.flow-item {
			padding: 25rem 18rem;
			border-radius: 10rem;
			width: 230rem;
			height: 375rem;
		}
		.flow-item-no {font-size: 40rem;}
		.flow-item-no::after {
			bottom: -43rem;
			font-size: 15rem;
		}
		.flow-line {
			bottom: -36rem;
			left: calc(50% + 8rem);
			transition-timing-function: linear;
		}
		.flow-item:nth-child(1) .flow-line {
			transition-timing-function: ease-in;
			transition-duration: .5s;
		}
		.flow-item:nth-child(2) .flow-line {transition-delay: .5s;}
		.flow-item:nth-child(3) .flow-line {
			transition-delay: .9s;
			transition-duration: .5s;
			transition-timing-function: ease-out;
		}
		.flow-line.animated {width: 250rem;}
		.flow-item-ttl {
			display: flex;
			flex-direction: column;
			justify-content: center;
			row-gap: .4em;
			margin-top: 70rem;
			margin-bottom: 20rem;
			min-height: 2.4em;
			font-size: 22rem;
		}
		.flow-item-txt {line-height: 28rem;}
		.flow-item-notice {font-size: 12rem;}
	}
}

/* login-section */
@media all {
	.login-content-part {
		background-color: var(--bg-lightblue);
		text-align: center;
	}
	.login-web-app-btn {justify-content: center;}

	.balloon {
		width: 21em;
		font-weight: normal;
		color: var(--txt);
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.login-section {padding-top: 60rem; padding-bottom: 130rem;}
		.login-content {margin-top: 40rem;}
		.login-content-part {
			margin-top: 20rem;
			padding: 30rem 0;
		}

		.login-content-part-header {margin-bottom: 30rem;}
		.button.login-web-app-btn {
			margin-top: 40rem;
			width: 250rem;
			height: 60rem;
			font-size: 16rem;
		}
		.app-links {
			margin: 0 auto;
			width: 170rem;
		}
		.app-links a {
			display: inline-block;
			margin-top: 10rem;
		}
		.login-content-part .balloon {font-size: 14rem;}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.login-section {margin-top: 80rem;}
		.login-content {
			display: flex;
			justify-content: space-between;
			margin-top: 45rem;
		}
		.login-content-part {
			padding-top: 40rem;
			width: 480rem;
			height: 290rem;
		}
		.login-content-part:nth-child(2) {transition-delay: .25s;}
		.login-content-part-header {margin-bottom: 50rem;}
		.button.login-web-app-btn {
			margin-top: 30rem;
			width: 320rem;
			font-size: 22rem;
		}

		.app-links {
			display: flex;
			justify-content: space-between;
			margin: 20rem auto 0;
			width: 360rem;
		}
		.app-links a {
			width: 170rem;
			transition: opacity .3s;
		}
		.app-links a:hover {opacity: .6;}

		.login-content-part .balloon {font-size: 16rem;}

		.site-footer {margin-top: 160rem;}
	}
}




/* template-section */
@media all {

	/* sp */
	@media only screen and (max-width: 767px) {}

	/* pc & tab */
	@media print,
	(min-width: 768px) {}
}