@charset "UTF-8";

/* textbook-section */
@media all {
	.textbook-content-ttl {
		font-family: var(--lineseed);
		font-weight: bold;
		color: var(--main-blue);
	}

	.textbook-content-pc_right {text-align: center;}
	.textbook-figure-dt {
		margin-top: 1em;
		font-size: 14rem;
		font-weight: bold;
		color: var(--main-blue);
	}
	.textbook-figure-dd {
		position: relative;
		margin: 10rem auto 0;
		width: 230rem;
		font-weight: 600;
	}
	.textbook-figure-dd::after {
		content: '';
		position: absolute;
		bottom: -4rem;
		left: 0;
		display: block;
		width: 100%;
		height: max(1px, 1rem);
		background: linear-gradient(to right, #f00, #b507de, #00a2e7);
	}
	.price-num,
	.price-yen {color: var(--main-red);}
	.price-taxin {font-weight: normal;}

	.price-num {font-size: 24rem;}
	.price-yen, .price-taxin {font-size: 14rem;}

	.textbook-btn {text-align: right;}

	/* sp */
	@media only screen and (max-width: 767px) {
		.textbook-section {padding: 55rem 0 0;}
		.textbook-content {
			position: relative;
			padding: 435rem 25rem 80rem;
		}
		.textbook-content-pc_right {
			position: absolute;
			top: 0;
			left: calc(50% - 140rem);
			width: 280rem;
		}
		.textbook-content-pc_right img {
			width: 220rem;
			box-shadow: 5rem 5rem 5rem rgba(0,0,0,.2);
		}
		.textbook-content-ttl {
			margin-bottom: 20rem;
			font-size: 20rem;
			line-height: 34rem;
			text-align: center;
		}
		.textbook-btn, .web-btn {
			margin-top: 30rem;
			margin-right: 10rem;
			align-items: center;
			width: 170rem;
			margin-left: auto;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.textbook-section {margin-top: 80rem;}
		.textbook-content {
			display: flex;
			justify-content: space-between;
			margin-top: 50rem;
		}
		.textbook-content-pc_left {width: 600rem;}
		.textbook-content-ttl {
			font-size: 22rem;
			line-height: 38rem;
		}
		.textbook-content-txt {margin-top: 20rem;}
		.textbook-content-txt > p {line-height: 2.5;}
		
		.textbook-content-pc_right {width: 280rem;}
		.textbook-content-pc_right img {
			box-shadow: 5rem 5rem 5rem rgba(0,0,0,.2);
		}
		.textbook-btn, .web-btn {
			margin-top: 30rem;
			align-items: flex-end;
		}
		:is(.textbook-btn, .web-btn) .balloon {width: 200rem;}

		.belt-img {margin-top: 70rem;}
	}
}


/* web-section */
@media all {
	.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;}
	/* sp */
	@media only screen and (max-width: 767px) {
		.web-section {
			padding-top: 50rem;
			padding-bottom: 140rem;
			background-size: 660rem auto;
		}

		.web-content-pc-left {
			position: absolute;
			top: 140rem;
			left: 15rem;
		}

		.web-device img {
			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;
		}

		.web-content-pc-right {
			padding-top: 350rem;
		}

	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.web-section {
			padding: 80rem 0 160rem;
		}
		.web-section-inner {
			position: relative;
			margin: 0 auto;
			width: 1000rem;
		}

		.web-content {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			margin-top: 50rem;
		}
		.web-content-pc-left {width: 420rem;}
		.web-content-pc-left img {
			margin-left: -3rem;
			width: 440rem;
			max-width: none;
		}

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

		.web-btn {margin-top: 35rem;}

		.web-content-pc-right {width: 520rem;}
		.web-content-pc-right p {line-height: 2.5;}


	}
}





/* template-section */
@media all {

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

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