@charset "UTF-8";

/* update-section */
@media all {
	.bg-lightgreen {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--coco-lightgreen);
		color: #fff;
	}
	span.bg-lightgreen {
		display: inline-flex;
		height: 2em;
		margin: 0 .4em;
		padding: 0 .6em;
	}
	.update-content-notice {color: var(--main-blue);}

	.coco-bnr {
		position: relative;
		border: max(1px, 1rem) solid var(--coco-lightgreen);
	}
	.coco-patent {
		font-family: var(--linessed);
		font-weight: bold;
	}
	img.icon-outgo {
		display: inline-block;
		margin-left: .25em;
		width: 1em;
		height: 1em;
		vertical-align: initial;
	}
	.coco-bnr-text a > span {
		color: var(--main-blue);
		text-decoration: underline;
	}
	.coco-bnr-notice {
		display: inline-block;
		margin-left: .75em;
		font-size: 12rem;
		color: var(--txt-gray);
	}
	.button.coco-button {
		background: linear-gradient(45deg, rgba(40, 177, 187, 1) 0%, rgba(53, 197, 187, 1) 25%, rgba(156, 225, 187, 1) 50%, rgba(156, 225, 187, 1) 55%, rgba(53, 197, 187, 1) 75%, rgba(40, 177, 187, 1) 100%);
		background-size: 205%;
	}
	.button.coco-button > span {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.invert-white {
		filter: brightness(0) invert(1);
	}
	.coco-button .coco-logo {
		display: inline-block;
		overflow: hidden;
	}
	.coco-button .coco-logo img {
		height: 100%;
		width: auto;
		max-width: none;
	}
	.coco-button .icon-outogo {display: inline-block;}


	/* sp */
	@media only screen and (max-width: 767px) {
		.update-section {
			margin-top: 30rem;
			padding-bottom: 130rem;
		}
		.update-content-notice {
			margin-top: 2rem;
			font-size: 12rem;
		}

		.deco1 {display: none;}

		.coco-bnr {
			margin-top: 80rem;
			padding: 30rem 19rem 60rem;
			border-radius: 7rem;
		}
		.coco-bnr-logo {width: 250rem;}
		.coco-patent {
			margin-top: 16rem;
			height: 23rem;
			font-size: 13rem;
		}
		.coco-bnr-text {margin-top: 380rem;}

		.button.coco-button {
			position: absolute;
			bottom: -30rem;
			left: calc(50% - 125rem);
			width: 250rem;
			height: 60rem;
		}
		.coco-button > span {
			padding-left: 38rem;
			padding-right: 20rem;
			font-size: 16rem;
		}
		.coco-button .coco-logo {
			width: 27rem;
			height: 30rem;
		}
		.coco-button .icon-outogo {
			padding-bottom: 2rem;
			width: 16rem;
			height: 100%;
		}

		.deco2 {
			top: 150rem;
			left: calc(50% - 90rem);
			width: 180rem;
			height: 350rem;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.update-section {padding: 100rem 0 140rem;}

		.update-content {
			margin-top: 50rem;
			line-height: 2.5;
		}
		.update-content-notice {
			margin-top: 6rem;
			font-size: 14rem;
		}

		.deco1 {
			top: 0;
			right: 114rem;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			height: 240rem;
			width: 200rem;
		}
		.deco1 .logo-img {
			overflow: hidden;
			width: 167rem;
			height: 167rem;
			border-radius: 28rem;
			box-shadow: 0 3rem 5rem rgba(0,0,0,.2);
		}

		.coco-bnr {
			margin: 190rem auto 0;
			padding: 64rem 360rem 0 58rem;
			width: 800rem;
			height: 500rem;
			border-radius: 10rem;
		}
		.coco-patent {
			margin-top: 24rem;
			height: 32rem;
			font-size: 20rem;
		}
		.coco-bnr-text {
			margin-top: 50rem;
			line-height: 2.5;
		}
		.coco-bnr-text a {transition: opacity .3s;}
		.coco-bnr-text a:hover {opacity: .7;}

		.button.coco-button {
			position: absolute;
			bottom: -40rem;
			left: calc(50% - 160rem);
			width: 320rem;
			height: 80rem;
		}
		.coco-button > span {
			padding-left: 39rem;
			padding-right: 30rem;
			font-size: 20rem;
		}
		.coco-button .coco-logo {
			height: 38rem;
			width: 32rem;
		}
		.coco-button .icon-outogo {
			padding-bottom: 4rem;
			width: 16rem;
			height: 100%;
		}

		.deco2 {
			top: -80rem;
			right: 40rem;
			width: 255rem;
			height: 502rem;
		}
	}
}

/* credit-section */
@media all {
	.credit-section {background-color: #effafa;}
	.video-content {
		position: relative;
		background-color: #fff;
		text-align: center;
	}
	.video-content-ttl {
		font-family: var(--linessed);
		font-weight: bold;
		text-align: center;
		color: var(--coco-lightgreen);
	}
	.video-content-btn {position: absolute;}


	/* sp */
	@media only screen and (max-width: 767px) {
		.credit-section {padding: 0;}
		.credit-section-inner {padding: 410rem 25rem 110rem;}

		.deco3 {
			top: 30rem;
			left: calc(50% - 160rem);
			width: 320rem;
			height: 324rem;
		}

		.credit-content span.bg-lightgreen {margin: 0;}

		.video-content {
			margin-top: 140rem;
			padding-bottom: 40rem;
			border-radius: 7rem;
		}
		.video-content-img img {
			margin-top: -70rem;
			width: 246rem;
		}
		.video-content-ttl {
			margin: 20rem 0 10rem;
			font-size: 18rem;
		}
		.video-content-btn {
			bottom: -23rem;
			right: 20rem;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.credit-section {padding: 100rem 0 110rem;}
		.credit-section-inner {padding-left: 560rem;}

		.credit-content {margin-top: 35rem;}
		.credit-content p {line-height: 2.5;}

		.video-content {
			margin-top: 140rem;
			padding-bottom: 50rem;
			border-radius: 10rem;
		}
		.video-content-img img {
			margin-top: -70rem;
			width: 276rem;
		}
		.video-content-ttl {
			margin: 20rem 0;
			font-size: 22rem;
		}
		.video-content-btn {
			bottom: -30rem;
			right: 40rem;
		}

		.deco3 {
			top: 30rem;
			left: 0;
			width: 503rem;
			height: 508rem;
		}
	}
}

/* melit-aside */
@media all {
	.melit-aside {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--coco-lightgreen);
		color: #fff;
		font-weight: bold;
	}
	.aside-logo {overflow: hidden;}
	.aside-logo img {
		width: auto;
		max-width: none;
		height: 100%;
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.page-main::after {
			content: '';
			display: block;
			height: 150rem;
		}
		.melit-aside {
			margin: 60rem auto 0;
			padding: 0;
			width: 350rem;
			height: 90rem;
			font-size: 16rem;
			line-height: 26.5rem;
		}
		.aside-logo {
			margin-right: 13rem;
			width: 46rem;
			height: 52rem;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.melit-aside {
			margin: 60rem auto 160rem;
			width: 560rem;
			height: 100rem;
			font-size: 20rem;
			line-height: 1.8;
		}
		.aside-logo {
			margin-right: 20rem;
			height: 52rem;
			width: 45rem;
		}
	}
}








/* template-section */
@media all {

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

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