@charset "utf-8";
/* PC ================================================== */
@media all and (min-width:1025px){
#hero {
	width: 100%;
	height: 100vh;
	position: relative;
}
	.hero__logo {
		width: 300px;
		height: auto;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
		.hero__logo svg {
			width: 100%;
			height: auto;
			fill: var(--color--white);
			filter: var(--shadow);
			transition: 1.5s;
		}
			.hero__logo.act svg {
				fill: var(--color--red);
			}
	.hero__scroll {
		width: 30px;
		height: 30px;
		position: absolute;
		bottom: 30px;
		left: 50%;
		transform: translate(-50%,0%);
	}
		.hero__scroll::before,
		.hero__scroll::after {
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			filter: var(--shadow);
		}
		.hero__scroll::before {
			width: 25px;
			height: 15px;
			border-top: solid 1px var(--color--red);
			border-bottom: solid 1px var(--color--red);
		}
		.hero__scroll::after {
			width: 15px;
			height: 30px;
			border-left: solid 1px var(--color--red);
			border-right: solid 1px var(--color--red);
		}
		.hero__scroll__core {
			width: 11px;
			height: 11px;
			background-color: var(--color--red);
			filter: var(--shadow);
			position: absolute;
			left: 50%;
			transform: translate(-50%,0%);
			animation: scmove 1.5s ease infinite;
		}
			@keyframes scmove {
				0%{
					top: -4.5px;
					opacity: 0;
				}
				30% {
					opacity: 1;
				}
				70% {
					opacity: 1;
				}
				100%{
					top: 23.5px;
					opacity: 0;
				}
			}

#about {
	width: 100%;
	height: auto;
	padding: 150px 0 50px;
}
	.about__inner {
		width: 90%;
		max-width: 1000px;
		height: auto;
		margin: 0 auto;
	}
		.about__contents {
			width: 100%;
			height: auto;
			padding: 40px 100px;
			background-color: var(--color--red);
			border-radius: 5px;
			filter: var(--shadow);
		}
			.about__list {
				width: 100%;
				height: auto;
			}
				.about__item {
					width: 100%;
					height: auto;
					padding: 18px 0;
					border-bottom: solid 1px var(--color--white);
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					font-size: 16px;
					font-weight: 700;
					line-height: 1.65;
					letter-spacing: 0.05em;
				}
				.about__item:last-of-type {
					border-bottom: none;
				}
					.about__item dt {
						width: 200px;
						height: auto;
						padding-left: 15px;
					}
					.about__item dd {
						flex: 1;
					}

#work {
	width: 100%;
	height: auto;
	padding: 150px 0 50px;
}
	.work__inner {
		width: 90%;
		max-width: 1200px;
		height: auto;
		margin: 0 auto;
	}
		.work__list_wrap {
			width: 100%;
			height: auto;
			margin-bottom: 50px;
		}
		.work__list_wrap:last-of-type {
			margin-bottom: 0;
		}
			.work__list_ttl {
				width: 100%;
				height: auto;
				padding-left: 25px;
				margin: 0 auto 15px;
				font-size: 18px;
				font-weight: 700;
				line-height: 1.6;
				letter-spacing: 0.05em;
				color: var(--color--white);
				position: relative;
			}
				.work__list_ttl svg {
					width: 18px;
					height: auto;
					fill: var(--color--red);
					filter: var(--shadow);
					position: absolute;
					bottom: 6.5px;
					left: 0;
				}
			.work__list {
				width: 100%;
				height: auto;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				flex-wrap: wrap;
				row-gap: 40px;
			}
				.work__list::after {
					content: '';
					display: block;
					width: 32%;
					height: 0;
				}
				.work__item {
					width: 32%;
					height: auto;
				}
					.work__item__link {
						display: block;
						width: 100%;
						height: auto;
					}
						.work__item__image {
							width: 100%;
							height: auto;
							margin: 0 auto 10px;
							overflow: hidden;
						}
						.work__item__link:hover .work__item__image {
							filter: var(--shadow);
						}
							.work__item__image img {
								width: 100%;
								height: auto;
								transform: scale(1.0,1.0);
								transition: .25s;
							}
							.work__item__link:hover .work__item__image img {
								transform: scale(1.02,1.02);
							}
						.work__item__details {
							width: 100%;
							height: auto;
						}
						.work__item__details dt,
						.work__item__details dd {
							transition: .25s;
						}
						.work__item__link:hover .work__item__details dt,
						.work__item__link:hover .work__item__details dd {
							filter: var(--shadow);
						}
							.work__item__details__cmp_name {
								width: 100%;
								height: auto;
								margin-bottom: 6px;
								font-size: 10px;
								font-weight: 700;
								line-height: 1;
								letter-spacing: 0.05em;
								color: var(--color--white);
							}
							.work__item__details__site_name {
								width: 100%;
								height: auto;
								margin-bottom: 11px;
								font-size: 14px;
								font-weight: 700;
								line-height: 1.6;
								letter-spacing: 0;
								color: var(--color--white);
							}
							.work__item__details__site_pd {
								width: 100%;
								height: auto;
								margin-bottom: 11px;
								font-size: 12px;
								font-weight: 700;
								line-height: 1;
								letter-spacing: 0.05em;
								color: var(--color--white);
							}
							.work__item__details__site_ec {
								width: 100%;
								height: auto;
								font-size: 12px;
								font-weight: 700;
								line-height: 1;
								letter-spacing: 0.05em;
								color: var(--color--white);
							}

#price {
	width: 100%;
	height: auto;
	padding: 150px 0 50px;
}
	.price__inner {
		width: 90%;
		max-width: 1000px;
		height: auto;
		margin: 0 auto;
	}
		.price__contents {
			width: 100%;
			height: auto;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
		}
			.price__list_wrap {
				width: 32%;
				height: auto;
			}
				.price__list_name {
					width: 100%;
					height: auto;
					padding-left: 24px;
					margin: 0 auto 15px;
					font-size: 18px;
					font-weight: 700;
					line-height: 1;
					letter-spacing: 0.05em;
					position: relative;
				}
					.price__list_name svg {
						width: 18px;
						height: auto;
						fill: var(--color--red);
						filter: var(--shadow);
						position: absolute;
						bottom: 0.5px;
						left: 0;
					}
				.price__list {
					width: 100%;
					height: auto;
				}
					.price__item {
						width: 100%;
						height: auto;
						padding: 20px;
						margin-bottom: 10px;
						background-color: var(--color--red);
						border-radius: 5px;
						filter: var(--shadow);
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
						font-size: 16px;
						font-weight: 700;
						line-height: 1;
						letter-spacing: 0.05em;
						position: relative;
					}
					.price__item:last-of-type {
						margin-bottom: 0;
					}
						.price__item__name {
							width: 200px;
							height: auto;
						}
						.price__item__number {
							font-family: josefin-sans, sans-serif;
							font-weight: 500;
							position: relative;
							top: -2px;
						}
						.price__item__note {
							padding: 5px 10px;
							background-color: var(--color--red);
							border-radius: 5px;
							filter: var(--shadow);
							font-size: 10px;
							position: absolute;
							bottom: -5px;
							left: 10px;
							transform: translate(0%,0%);
							z-index: 5;
							opacity: 0;
							transition: .25s;
						}
						.price__item:hover .price__item__note {
							opacity: 1;
						}

#contact {
	width: 100%;
	height: auto;
	padding: 100px 0 200px;
}
	.contact__inner {
		width: 85%;
		max-width: 900px;
		height: auto;
		margin: 0 auto;
	}
		.contact__contents {
			width: 100%;
			height: auto;
			padding: 0;
			border-radius: 5px;
			background-color: var(--color--red);
			filter: var(--shadow);
		}
			.contact__wrap {
				width: 100%;
				height: auto;
				padding: 80px 0px;
				margin: 0 auto;
			}
				.contact__contents form {
					width: 80%;
					height: auto;
					margin: 0 auto;
				}
					.form__list__container {
						width: 100%;
						height: auto;
					}
						.form__wrap {
							width: 100%;
							height: auto;
						}
							.form__list {
								width: 100%;
								height: auto;
							}
								.form__item {
									width: 100%;
									height: auto;
									margin-bottom: 40px;
								}
								.form__item:last-of-type {
									margin-bottom: 0;
								}
									.form__item_heading {
										width: 100%;
										height: auto;
										padding: 0;
										margin: 0 auto 8px;
										font-size: 16px;
										font-weight: 700;
										line-height: 1.5;
									}
									.form__item_inputbox {
										width: 100%;
										height: auto;
										font-size: 16px;
										line-height: 1.5;
									}
										/* 内容入力ページ */
										.form__item_inputbox input,
										.form__item_inputbox select,
										.form__item_inputbox textarea {
											background-color: var(--color--white);
											border-radius: 5px;
											color: var(--color--black);
											vertical-align: bottom;
										}
										.form__item_inputbox input,
										.form__item_inputbox textarea {
											width: 100%;
											height: auto;
											padding: 14px 15px 12px;
										}
										.form__item_inputbox__select_wrap {
											position: relative;
										}
										.form__item_inputbox__select_wrap::before {
											content: '';
											width: 0;
											height: 0;
											border-style: solid;
											border-width: 8px 6px 0 6px;
											border-color: var(--color--red) transparent transparent transparent;
											position: absolute;
											top: 52%;
											right: 23px;
											transform: translate(50%,-50%);
											pointer-events: none;
										}
											.form__item_inputbox select {
												width: 100%;
												height: auto;
												padding: 10px 15px 8px;
											}

									/* 内容確認ページ */
									.confirmation .form__item {
										margin-bottom: 30px;
									}
									.confirmation .form__item:last-of-type {
										border-bottom: none;
									}
										.confirmation .form__item_heading {
											padding: 0px 0px;
											margin-bottom: 5px;
										}
											.confirmation__txt {
												width: 100%;
												height: auto;
												padding: 0 0 0 10px;
												font-size: 14px;
												color: var(--color--white);
											}

				/* 完了ページ */
				.done_body {
					width: 80%;
					height: auto;
					margin: 0 auto;
				}
					.done_body p {
						width: 100%;
						height: auto;
						font-size: 14px;
						font-weight: 700;
						text-align: center;
						color: var(--color--white);
					}
				/* submitボタン */
						.form__privacypolicy {
							width: 100%;
							height: auto;
							margin: 40px auto 0;
						}
							.form__privacypolicy__txt {
								width: 100%;
								height: auto;
								text-align: center;
							}
								.form__privacypolicy__txt input {
									display: none;
								}
								.privacypolicy_label {
									padding-left: 27px;
									position: relative;
									cursor: pointer;
									color: var(--color--white);
									position: relative;
								}
									.privacypolicy_label a {
										color: var(--color--white);
										text-decoration: underline;
									}
								.privacypolicy_label::before {
									content: '';
									display: block;
									width: 15px;
									height: 15px;
									border-radius: 2px;
									border: solid 1px var(--color--white);
									position: absolute;
									top: 0;
									left: 0;
								}
								.privacypolicy_label .agree_icon {
									opacity: 0;
									position: absolute;
									top: 7.5px;
									left: 7.5px;
									transform: translate(-50%,-50%);
									transition: .2s;
								}
								.privacypolicy_label .agree_icon {
									width: 11px;
									height: auto;
									fill: var(--color--white);
									z-index: 2;
								}
								.privacypolicy_label.active_icon .agree_icon {
									opacity: 1;
								}
						.submit__container {
							width: 100%;
							height: auto;
							margin: 40px auto 0px;
							display: flex;
							justify-content: center;
							align-items: center;
						}
						.confirmation .submit__container {
							justify-content: center;
						}
							button[type="submit"],
							input[name="btn_back"],
							input[name="btn_submit"] {
								cursor: pointer;
								width: 300px;
								height: 64px;
								padding: 0;
								display: flex;
								justify-content: center;
								align-items: center;
								border-radius: 3px;
								background-color: var(--color--red);
								font-size: 15px;
								font-weight: 700;
								line-height: 1;
								letter-spacing: 0.1em;
								filter: var(--shadow);
								color: var(--color--white);
								transition: .25s;
							}
							button[type="submit"] {
								pointer-events: none;
								color: var(--color--red);
							}
							button[type="submit"].active_btn {
								pointer-events: auto;
								color: var(--color--white);
							}
							button[type="submit"]:hover {
								background-color: var(--color--white);
								color: var(--color--red);
							}
							input[name="btn_back"],
							input[name="btn_submit"] {
								margin: 0 20px;
							}
							input[name="btn_back"] {
								border: solid 1px var(--color--gray);
								background-color: var(--color--red);
								color: var(--color--white);
							}
							input[name="btn_back"]:hover {
								background-color: var(--color--white);
								color: var(--color--red);
							}
							input[name="btn_submit"] {
								background-color: var(--color--red);
								color: var(--color--white);
							}
							input[name="btn_submit"]:hover {
								background-color: var(--color--white);
								color: var(--color--red);
							}
}

/* Tablet ================================================== */
@media all and (min-width:600px) and (max-width:1024px){
#hero {
	width: 100%;
	height: 100vh;
	height: 100svh;
	position: relative;
}
	.hero__logo {
		width: 250px;
		height: auto;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
		.hero__logo svg {
			width: 100%;
			height: auto;
			fill: var(--color--white);
			filter: var(--shadow);
			transition: 1.5s;
		}
			.hero__logo.act svg {
				fill: var(--color--red);
			}
	.hero__scroll {
		width: 30px;
		height: 30px;
		position: absolute;
		bottom: 30px;
		left: 50%;
		transform: translate(-50%,0%);
	}
		.hero__scroll::before,
		.hero__scroll::after {
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			filter: var(--shadow);
		}
		.hero__scroll::before {
			width: 25px;
			height: 15px;
			border-top: solid 1px var(--color--red);
			border-bottom: solid 1px var(--color--red);
		}
		.hero__scroll::after {
			width: 15px;
			height: 30px;
			border-left: solid 1px var(--color--red);
			border-right: solid 1px var(--color--red);
		}
		.hero__scroll__core {
			width: 11px;
			height: 11px;
			background-color: var(--color--red);
			filter: var(--shadow);
			position: absolute;
			left: 50%;
			transform: translate(-50%,0%);
			animation: scmove 1.5s ease infinite;
		}
			@keyframes scmove {
				0%{
					top: -4.5px;
					opacity: 0;
				}
				30% {
					opacity: 1;
				}
				70% {
					opacity: 1;
				}
				100%{
					top: 23.5px;
					opacity: 0;
				}
			}

#about {
	width: 100%;
	height: auto;
	padding: 150px 0 50px;
}
	.about__inner {
		width: 90%;
		height: auto;
		margin: 0 auto;
	}
		.about__contents {
			width: 100%;
			height: auto;
			padding: 10px 0;
			background-color: var(--color--red);
			border-radius: 5px;
			filter: var(--shadow);
		}
			.about__list {
				width: 90%;
				height: auto;
				margin: 0 auto;
			}
				.about__item {
					width: 100%;
					height: auto;
					padding: 18px 0;
					border-bottom: solid 1px var(--color--white);
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					font-size: 14px;
					font-weight: 700;
					line-height: 1.65;
					letter-spacing: 0.05em;
				}
				.about__item:last-of-type {
					border-bottom: none;
				}
					.about__item dt {
						width: 20%;
						height: auto;
					}
					.about__item dd {
						flex: 1;
						font-weight: 500;
					}

#work {
	width: 100%;
	height: auto;
	padding: 100px 0 50px;
}
	.work__inner {
		width: 90%;
		height: auto;
		margin: 0 auto;
	}
		.work__list_wrap {
			width: 100%;
			height: auto;
		}
			.work__list_ttl {
				width: 100%;
				height: auto;
				padding-left: 25px;
				margin: 0 auto 15px;
				font-size: 18px;
				font-weight: 700;
				line-height: 1.6;
				letter-spacing: 0.05em;
				color: var(--color--white);
				position: relative;
			}
				.work__list_ttl svg {
					width: 18px;
					height: auto;
					fill: var(--color--red);
					filter: var(--shadow);
					position: absolute;
					bottom: 6.5px;
					left: 0;
				}
			.work__list {
				width: 100%;
				height: auto;
				margin: 0 auto 50px;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				flex-wrap: wrap;
			}
			.work__list:last-of-type {
				margin-bottom: 0;
			}
				.work__item {
					width: 48.5%;
					height: auto;
					margin: 0 0 45px;
				}
				.work__item:nth-last-ot-type(n+2) {
					margin-bottom: 0;
				}
					.work__item__link {
						display: block;
						width: 100%;
						height: auto;
					}
						.work__item__image {
							width: 100%;
							height: auto;
							margin: 0 auto 10px;
							overflow: hidden;
						}
						.work__item__link:hover .work__item__image {
							filter: var(--shadow);
						}
							.work__item__image img {
								width: 100%;
								height: auto;
								transform: scale(1.0,1.0);
								transition: .25s;
							}
							.work__item__link:hover .work__item__image img {
								transform: scale(1.02,1.02);
							}
						.work__item__details {
							width: 100%;
							height: auto;
						}
						.work__item__details dt,
						.work__item__details dd {
							transition: .25s;
						}
						.work__item__link:hover .work__item__details dt,
						.work__item__link:hover .work__item__details dd {
							filter: var(--shadow);
						}
							.work__item__details__cmp_name {
								width: 100%;
								height: auto;
								margin-bottom: 4px;
								font-size: 10px;
								font-weight: 700;
								line-height: 1.5;
								letter-spacing: 0.05em;
								color: var(--color--white);
							}
							.work__item__details__site_name {
								width: 100%;
								height: auto;
								margin-bottom: 11px;
								font-size: 14px;
								font-weight: 700;
								line-height: 1.6;
								letter-spacing: 0;
								color: var(--color--white);
							}
							.work__item__details__site_pd {
								width: 100%;
								height: auto;
								margin-bottom: 11px;
								font-size: 12px;
								font-weight: 700;
								line-height: 1;
								letter-spacing: 0.05em;
								color: var(--color--white);
							}
							.work__item__details__site_ec {
								width: 100%;
								height: auto;
								font-size: 12px;
								font-weight: 700;
								line-height: 1;
								letter-spacing: 0.05em;
								color: var(--color--white);
							}

#price {
	width: 100%;
	height: auto;
	padding: 150px 0 50px;
}
	.price__inner {
		width: 90%;
		max-width: 1000px;
		height: auto;
		margin: 0 auto;
	}
		.price__contents {
			width: 100%;
			height: auto;
		}
			.price__list_wrap {
				width: 100%;
				height: auto;
				margin-bottom: 60px;
			}
			.price__list_wrap:last-of-type {
				margin-bottom: 0;
			}
				.price__list_name {
					width: 100%;
					height: auto;
					padding-left: 24px;
					margin: 0 auto 15px;
					font-size: 18px;
					font-weight: 700;
					line-height: 1;
					letter-spacing: 0.05em;
					position: relative;
				}
					.price__list_name svg {
						width: 18px;
						height: auto;
						fill: var(--color--red);
						filter: var(--shadow);
						position: absolute;
						bottom: 0.5px;
						left: 0;
					}
				.price__list {
					width: 100%;
					height: auto;
				}
					.price__item {
						width: 100%;
						height: auto;
						padding: 20px;
						margin-bottom: 10px;
						background-color: var(--color--red);
						border-radius: 5px;
						filter: var(--shadow);
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
						flex-wrap: wrap;
						font-size: 16px;
						font-weight: 700;
						line-height: 1;
						letter-spacing: 0.05em;
						cursor: pointer;
						position: relative;
					}
					.price__item:last-of-type {
						margin-bottom: 0;
					}
						.price__item__name {
							width: 200px;
							height: auto;
						}
						.price__item__number {
							font-family: josefin-sans, sans-serif;
							font-weight: 500;
							position: relative;
							top: -2px;
						}
						.price__item__note {
							width: 100%;
							height: auto;
							margin-top: 8px;
							font-size: 10px;
						}

#contact {
	width: 100%;
	height: auto;
	padding: 50px 0 100px;
}
	.contact__inner {
		width: 90%;
		height: auto;
		margin: 0 auto;
	}
		.contact__contents {
			width: 100%;
			height: auto;
			padding: 0;
			border-radius: 5px;
			background-color: var(--color--red);
			filter: var(--shadow);
		}
			.contact__wrap {
				width: 85%;
				height: auto;
				padding: 40px 0px;
				margin: 0 auto;
			}
				.contact__contents form {
					width: 100%;
					height: auto;
					margin: 0 auto;
				}
					.form__list__container {
						width: 100%;
						height: auto;
					}
						.form__wrap {
							width: 100%;
							height: auto;
						}
							.form__list {
								width: 100%;
								height: auto;
							}
								.form__item {
									width: 100%;
									height: auto;
									margin-bottom: 35px;
								}
								.form__item:last-of-type {
									margin-bottom: 0;
								}
									.form__item_heading {
										width: 100%;
										height: auto;
										padding: 0;
										margin: 0 auto 5px;
										font-size: 14px;
										font-weight: 700;
										line-height: 1.5;
									}
									.form__item_inputbox {
										width: 100%;
										height: auto;
										font-size: 14px;
										line-height: 1.5;
									}
										/* 内容入力ページ */
										.form__item_inputbox input,
										.form__item_inputbox select,
										.form__item_inputbox textarea {
											background-color: var(--color--white);
											border-radius: 3px;
											color: var(--color--black);
											vertical-align: bottom;
										}
										.form__item_inputbox input,
										.form__item_inputbox textarea {
											width: 100%;
											height: auto;
											padding: 14px 15px 12px;
										}
										.form__item_inputbox__select_wrap {
											position: relative;
										}
										.form__item_inputbox__select_wrap::before {
											content: '';
											width: 0;
											height: 0;
											border-style: solid;
											border-width: 8px 6px 0 6px;
											border-color: var(--color--red) transparent transparent transparent;
											position: absolute;
											top: 52%;
											right: 23px;
											transform: translate(50%,-50%);
											pointer-events: none;
										}
											.form__item_inputbox select {
												width: 100%;
												height: auto;
												padding: 10px 15px 8px;
											}

									/* 内容確認ページ */
									.confirmation .form__item {
										margin-bottom: 30px;
									}
									.confirmation .form__item:last-of-type {
										border-bottom: none;
									}
										.confirmation .form__item_heading {
											padding: 0px 0px;
											margin-bottom: 5px;
										}
											.confirmation__txt {
												width: 100%;
												height: auto;
												padding: 0 0 0 10px;
												font-size: 14px;
												color: var(--color--white);
											}

				/* 完了ページ */
				.done_body {
					width: 80%;
					height: auto;
					margin: 0 auto;
				}
					.done_body p {
						width: 100%;
						height: auto;
						font-size: 14px;
						font-weight: 700;
						text-align: center;
						color: var(--color--white);
					}
				/* submitボタン */
						.form__privacypolicy {
							width: 100%;
							height: auto;
							margin: 40px auto 0;
						}
							.form__privacypolicy__txt {
								width: 100%;
								height: auto;
								text-align: center;
							}
								.form__privacypolicy__txt input {
									display: none;
								}
								.privacypolicy_label {
									padding-left: 27px;
									position: relative;
									cursor: pointer;
									color: var(--color--white);
									position: relative;
								}
									.privacypolicy_label a {
										color: var(--color--white);
										text-decoration: underline;
									}
								.privacypolicy_label::before {
									content: '';
									display: block;
									width: 15px;
									height: 15px;
									border-radius: 2px;
									border: solid 1px var(--color--white);
									position: absolute;
									top: 0;
									left: 0;
								}
								.privacypolicy_label .agree_icon {
									opacity: 0;
									position: absolute;
									top: 7.5px;
									left: 7.5px;
									transform: translate(-50%,-50%);
									transition: .2s;
								}
								.privacypolicy_label .agree_icon {
									width: 11px;
									height: auto;
									fill: var(--color--white);
									z-index: 2;
								}
								.privacypolicy_label.active_icon .agree_icon {
									opacity: 1;
								}
						.submit__container {
							width: 100%;
							height: auto;
							margin: 40px auto 0px;
							display: flex;
							justify-content: center;
							align-items: center;
						}
						.confirmation .submit__container {
							justify-content: center;
						}
							button[type="submit"],
							input[name="btn_back"],
							input[name="btn_submit"] {
								cursor: pointer;
								width: 300px;
								height: 64px;
								padding: 0;
								display: flex;
								justify-content: center;
								align-items: center;
								border-radius: 3px;
								background-color: var(--color--red);
								font-size: 15px;
								font-weight: 700;
								line-height: 1;
								letter-spacing: 0.1em;
								filter: var(--shadow);
								color: var(--color--white);
								transition: .25s;
							}
							button[type="submit"] {
								pointer-events: none;
								color: var(--color--red);
							}
							button[type="submit"].active_btn {
								pointer-events: auto;
								color: var(--color--white);
							}
							button[type="submit"]:hover {
								background-color: var(--color--white);
								color: var(--color--red);
							}
							input[name="btn_back"],
							input[name="btn_submit"] {
								margin: 0 20px;
							}
							input[name="btn_back"] {
								border: solid 1px var(--color--gray);
								background-color: var(--color--red);
								color: var(--color--white);
							}
							input[name="btn_back"]:hover {
								background-color: var(--color--white);
								color: var(--color--red);
							}
							input[name="btn_submit"] {
								background-color: var(--color--red);
								color: var(--color--white);
							}
							input[name="btn_submit"]:hover {
								background-color: var(--color--white);
								color: var(--color--red);
							}
}

/* SP ================================================== */
@media all and (max-width:599px){
#hero {
	width: 100%;
	height: 100vh;
	height: 100svh;
	position: relative;
}
	.hero__logo {
		width: 200px;
		height: auto;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
		.hero__logo svg {
			width: 100%;
			height: auto;
			fill: var(--color--white);
			filter: var(--shadow);
			transition: 1.5s;
		}
			.hero__logo.act svg {
				fill: var(--color--red);
			}
	.hero__scroll {
		width: 30px;
		height: 30px;
		position: absolute;
		bottom: 30px;
		left: 50%;
		transform: translate(-50%,0%);
	}
		.hero__scroll::before,
		.hero__scroll::after {
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			filter: var(--shadow);
		}
		.hero__scroll::before {
			width: 25px;
			height: 15px;
			border-top: solid 1px var(--color--red);
			border-bottom: solid 1px var(--color--red);
		}
		.hero__scroll::after {
			width: 15px;
			height: 30px;
			border-left: solid 1px var(--color--red);
			border-right: solid 1px var(--color--red);
		}
		.hero__scroll__core {
			width: 11px;
			height: 11px;
			background-color: var(--color--red);
			filter: var(--shadow);
			position: absolute;
			left: 50%;
			transform: translate(-50%,0%);
			animation: scmove 1.5s ease infinite;
		}
			@keyframes scmove {
				0%{
					top: -4.5px;
					opacity: 0;
				}
				30% {
					opacity: 1;
				}
				70% {
					opacity: 1;
				}
				100%{
					top: 23.5px;
					opacity: 0;
				}
			}

#about {
	width: 100%;
	height: auto;
	padding: 150px 0 50px;
}
	.about__inner {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
		.about__contents {
			width: 100%;
			height: auto;
			padding: 10px 0;
			background-color: var(--color--red);
			filter: var(--shadow);
		}
			.about__list {
				width: 90%;
				height: auto;
				margin: 0 auto;
			}
				.about__item {
					width: 100%;
					height: auto;
					padding: 18px 0;
					border-bottom: solid 1px var(--color--white);
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					font-size: 14px;
					font-weight: 700;
					line-height: 1.65;
					letter-spacing: 0.05em;
				}
				.about__item:last-of-type {
					border-bottom: none;
				}
					.about__item dt {
						width: 80px;
						height: auto;
					}
					.about__item dd {
						flex: 1;
						font-weight: 500;
					}

#work {
	width: 100%;
	height: auto;
	padding: 50px 0 50px;
}
	.work__inner {
		width: 90%;
		height: auto;
		margin: 0 auto;
	}
		.work__list_wrap {
			width: 100%;
			height: auto;
		}
			.work__list_ttl {
				width: 100%;
				height: auto;
				padding-left: 25px;
				margin: 0 auto 15px;
				font-size: 16px;
				font-weight: 700;
				line-height: 1.6;
				letter-spacing: 0.05em;
				color: var(--color--white);
				position: relative;
			}
				.work__list_ttl svg {
					width: 18px;
					height: auto;
					fill: var(--color--red);
					filter: var(--shadow);
					position: absolute;
					bottom: 6.5px;
					left: 0;
				}
			.work__list {
				width: 100%;
				height: auto;
				margin: 0 auto 50px;
			}
				.work__item {
					width: 100%;
					height: auto;
					margin: 0 auto 40px;
				}
				.work__item:last-ot-type {
					margin-bottom: 0;
				}
					.work__item__link {
						display: block;
						width: 100%;
						height: auto;
					}
						.work__item__image {
							width: 100%;
							height: auto;
							margin: 0 auto 10px;
							overflow: hidden;
						}
						.work__item__link:hover .work__item__image {
							filter: var(--shadow);
						}
							.work__item__image img {
								width: 100%;
								height: auto;
								transform: scale(1.0,1.0);
								transition: .25s;
							}
							.work__item__link:hover .work__item__image img {
								transform: scale(1.02,1.02);
							}
						.work__item__details {
							width: 100%;
							height: auto;
						}
						.work__item__details dt,
						.work__item__details dd {
							transition: .25s;
						}
						.work__item__link:hover .work__item__details dt,
						.work__item__link:hover .work__item__details dd {
							filter: var(--shadow);
						}
							.work__item__details__cmp_name {
								width: 100%;
								height: auto;
								margin-bottom: 4px;
								font-size: 10px;
								font-weight: 700;
								line-height: 1.5;
								letter-spacing: 0.05em;
								color: var(--color--white);
							}
							.work__item__details__site_name {
								width: 100%;
								height: auto;
								margin-bottom: 11px;
								font-size: 14px;
								font-weight: 700;
								line-height: 1.6;
								letter-spacing: 0;
								color: var(--color--white);
							}
							.work__item__details__site_pd {
								width: 100%;
								height: auto;
								margin-bottom: 11px;
								font-size: 12px;
								font-weight: 700;
								line-height: 1;
								letter-spacing: 0.05em;
								color: var(--color--white);
							}
							.work__item__details__site_ec {
								width: 100%;
								height: auto;
								font-size: 12px;
								font-weight: 700;
								line-height: 1;
								letter-spacing: 0.05em;
								color: var(--color--white);
							}

#price {
	width: 100%;
	height: auto;
	padding: 150px 0 50px;
}
	.price__inner {
		width: 90%;
		max-width: 1000px;
		height: auto;
		margin: 0 auto;
	}
		.price__contents {
			width: 100%;
			height: auto;
		}
			.price__list_wrap {
				width: 100%;
				height: auto;
				margin-bottom: 45px;
			}
			.price__list_wrap:last-of-type {
				margin-bottom: 0;
			}
				.price__list_name {
					width: 100%;
					height: auto;
					padding-left: 24px;
					margin: 0 auto 15px;
					font-size: 18px;
					font-weight: 700;
					line-height: 1;
					letter-spacing: 0.05em;
					position: relative;
				}
					.price__list_name svg {
						width: 18px;
						height: auto;
						fill: var(--color--red);
						filter: var(--shadow);
						position: absolute;
						bottom: 0.5px;
						left: 0;
					}
				.price__list {
					width: 100%;
					height: auto;
				}
					.price__item {
						width: 100%;
						height: auto;
						padding: 20px;
						margin-bottom: 10px;
						background-color: var(--color--red);
						border-radius: 5px;
						filter: var(--shadow);
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
						flex-wrap: wrap;
						font-size: 16px;
						font-weight: 700;
						line-height: 1;
						letter-spacing: 0.05em;
						cursor: pointer;
						position: relative;
					}
					.price__item:last-of-type {
						margin-bottom: 0;
					}
						.price__item__name {
							width: 200px;
							height: auto;
						}
						.price__item__number {
							font-family: josefin-sans, sans-serif;
							font-weight: 500;
							position: relative;
							top: -2px;
						}
						.price__item__note {
							width: 100%;
							height: auto;
							margin-top: 8px;
							font-size: 10px;
						}

#contact {
	width: 100%;
	height: auto;
	padding: 50px 0 100px;
}
	.contact__inner {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
		.contact__contents {
			width: 100%;
			height: auto;
			padding: 0;
			border-radius: 5px;
			background-color: var(--color--red);
			filter: var(--shadow);
		}
			.contact__wrap {
				width: 85%;
				height: auto;
				padding: 40px 0px;
				margin: 0 auto;
			}
				.contact__contents form {
					width: 100%;
					height: auto;
					margin: 0 auto;
				}
					.form__list__container {
						width: 100%;
						height: auto;
					}
						.form__wrap {
							width: 100%;
							height: auto;
						}
							.form__list {
								width: 100%;
								height: auto;
							}
								.form__item {
									width: 100%;
									height: auto;
									margin-bottom: 35px;
								}
								.form__item:last-of-type {
									margin-bottom: 0;
								}
									.form__item_heading {
										width: 100%;
										height: auto;
										padding: 0;
										margin: 0 auto 5px;
										font-size: 14px;
										font-weight: 700;
										line-height: 1.5;
									}
									.form__item_inputbox {
										width: 100%;
										height: auto;
										font-size: 14px;
										line-height: 1.5;
									}
										/* 内容入力ページ */
										.form__item_inputbox input,
										.form__item_inputbox select,
										.form__item_inputbox textarea {
											background-color: var(--color--white);
											border-radius: 3px;
											color: var(--color--black);
											vertical-align: bottom;
										}
										.form__item_inputbox input,
										.form__item_inputbox textarea {
											width: 100%;
											height: auto;
											padding: 14px 15px 12px;
										}
										.form__item_inputbox__select_wrap {
											position: relative;
										}
										.form__item_inputbox__select_wrap::before {
											content: '';
											width: 0;
											height: 0;
											border-style: solid;
											border-width: 8px 6px 0 6px;
											border-color: var(--color--red) transparent transparent transparent;
											position: absolute;
											top: 52%;
											right: 23px;
											transform: translate(50%,-50%);
											pointer-events: none;
										}
											.form__item_inputbox select {
												width: 100%;
												height: auto;
												padding: 10px 15px 8px;
											}

									/* 内容確認ページ */
									.confirmation .form__item {
										margin-bottom: 30px;
									}
									.confirmation .form__item:last-of-type {
										border-bottom: none;
									}
										.confirmation .form__item_heading {
											padding: 0px 0px;
											margin-bottom: 5px;
										}
											.confirmation__txt {
												width: 100%;
												height: auto;
												padding: 0 0 0 10px;
												font-size: 14px;
												color: var(--color--white);
											}

				/* 完了ページ */
				.done_body {
					width: 80%;
					height: auto;
					margin: 0 auto;
				}
					.done_body p {
						width: 100%;
						height: auto;
						font-size: 14px;
						font-weight: 700;
						text-align: center;
						color: var(--color--white);
					}
				/* submitボタン */
						.form__privacypolicy {
							width: 100%;
							height: auto;
							margin: 40px auto 0;
						}
							.form__privacypolicy__txt {
								width: 100%;
								height: auto;
								text-align: center;
							}
								.form__privacypolicy__txt input {
									display: none;
								}
								.privacypolicy_label {
									padding-left: 27px;
									position: relative;
									cursor: pointer;
									color: var(--color--white);
									position: relative;
								}
									.privacypolicy_label a {
										color: var(--color--white);
										text-decoration: underline;
									}
								.privacypolicy_label::before {
									content: '';
									display: block;
									width: 15px;
									height: 15px;
									border-radius: 2px;
									border: solid 1px var(--color--white);
									position: absolute;
									top: 0;
									left: 0;
								}
								.privacypolicy_label .agree_icon {
									opacity: 0;
									position: absolute;
									top: 7.5px;
									left: 7.5px;
									transform: translate(-50%,-50%);
									transition: .2s;
								}
								.privacypolicy_label .agree_icon {
									width: 11px;
									height: auto;
									fill: var(--color--white);
									z-index: 2;
								}
								.privacypolicy_label.active_icon .agree_icon {
									opacity: 1;
								}
						.submit__container {
							width: 100%;
							height: auto;
							margin: 40px auto 0px;
							display: flex;
							justify-content: center;
							align-items: center;
						}
						.confirmation .submit__container {
							justify-content: center;
						}
							button[type="submit"],
							input[name="btn_back"],
							input[name="btn_submit"] {
								cursor: pointer;
								width: 300px;
								height: 64px;
								padding: 0;
								display: flex;
								justify-content: center;
								align-items: center;
								border-radius: 3px;
								background-color: var(--color--red);
								font-size: 15px;
								font-weight: 700;
								line-height: 1;
								letter-spacing: 0.1em;
								filter: var(--shadow);
								color: var(--color--white);
								transition: .25s;
							}
							button[type="submit"] {
								pointer-events: none;
								color: var(--color--red);
							}
							button[type="submit"].active_btn {
								pointer-events: auto;
								color: var(--color--white);
							}
							button[type="submit"]:hover {
								background-color: var(--color--white);
								color: var(--color--red);
							}
							input[name="btn_back"],
							input[name="btn_submit"] {
								margin: 0 20px;
							}
							input[name="btn_back"] {
								border: solid 1px var(--color--gray);
								background-color: var(--color--red);
								color: var(--color--white);
							}
							input[name="btn_back"]:hover {
								background-color: var(--color--white);
								color: var(--color--red);
							}
							input[name="btn_submit"] {
								background-color: var(--color--red);
								color: var(--color--white);
							}
							input[name="btn_submit"]:hover {
								background-color: var(--color--white);
								color: var(--color--red);
							}
}