@charset "UTF-8";
/**
 * /food_dx/asp-tanomu.asp
 */
:root  {
    --color-Text-Primary: #000000;
    --color-Text-White: #FFFFFF;
    --color-Theme-Asp: #02AED4;
    --color-Theme-AspLight: #C7E2EA;
    --color-Theme-AspDark: #0299BA;
    --color-Theme-Tanomu: #FF9027;
    --color-Theme-TanomuLight: #F6ECCA;
    --color-Theme-TanomuDark: #E58223;

    --side-margin: 20px;
    @media (min-width: 1200px) {
        --side-margin: 32px;
    }
}
body {
    color: var(--color-Text-Primary);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
}
main {
    position: relative;
}
.container {
    position: relative;
	margin-inline: auto;
	width: calc(100% - var(--side-margin) * 2);
    max-width: 1400px;
}

/* 表示・非表示 */
.pc_only {
	display: none;
}
.sp_only {
	display: block;
}
@media (min-width: 768px) {
	.sp_only {
		display: none;
	}
	.pc_only {
		display: block;
	}
}
/* btn */
.btncta {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 1em .5em;
	background-color: var(--color-Theme-Asp);
	border-radius: 999px;
	color: var(--color-Text-White);
	font-size: min(calc(24 / 390 * 100vw), 24px);
	font-weight: bold;
	line-height: 1.25;
	text-align: center;
	transition: .3s;
	&:hover {
		opacity: 1;
	}
	&.triangle {
		&::before {
			content: "";
			width: 0;
			height: 0;
			border-style: solid;
			border-width: min(calc(10 / 390 * 100vw), 10px) 0 min(calc(10 / 390 * 100vw), 10px) min(calc(16 / 390 * 100vw), 16px);
			border-color: transparent transparent transparent var(--color-Text-White);
			position: absolute;
			right: .75em;
			transition: .3s;
		}
		&.triangle:hover {
			&::before {
				right: .5em;
			}
		}
	}
}
@media (min-width: 768px) {
	.btncta {
		font-size: min(calc(32 / 1400 * 100vw), 32px);
		&.triangle {
			&::before {
				border-width: min(calc(14 / 1400 * 100vw), 14px) 0 min(calc(14 / 1400 * 100vw), 14px) min(calc(22 / 1400 * 100vw), 22px);
			}
		}
	}
}

.mainv {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	.heading {
		display: contents;
		.container {
			display: contents;
			.heading_item {
				display: flex;
				flex-flow: column;
				align-items: center;
				width: 100%;
				padding: min(calc(16 / 390 * 100vw), 16px);
				.img_logo {
					width: min(calc(160 / 390 * 100vw), 180px);
				}
				&.asp {
					background-color: var(--color-Theme-Asp);
					order: 1;
				}
				&.tanomu {
					background-color: var(--color-Theme-Tanomu);
					order: 3
				}
			}
		}
	}
	.content {
		position: relative;
		width: 100%;
		aspect-ratio: 1 / 1.6;
		background: linear-gradient(165deg, var(--color-Theme-AspLight) 0%, var(--color-Theme-AspLight) 50.0%, var(--color-Theme-TanomuLight) 50.0%, var(--color-Theme-TanomuLight) 100%);
		order: 2;
		&::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			background-image: url(/web/jp/food_dx/asp-tanomu/image/new/mainv_bg_sp.png);
		}
		.container {
			height: 100%;
			h1 {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 100%;
				p {
					padding-bottom: .25em;
					font-size: min(calc(22 / 390 * 100vw), 40px);
					font-weight: 700;
					line-height: 1.25;
					text-align: center;
					transform: rotate(-15deg);
					.asp {
						color: var(--color-Theme-Asp);
						font-size: 1.5em;
						font-weight: 900;
					}
					.tanomu {
						color: var(--color-Theme-Tanomu);
						font-size: 1.5em;
						font-weight: 900;
					}
				}
			}
		}
	}

	.cta {
		display: contents;
		.container {
			display: contents;
			.cta_item {
				position: absolute;
				z-index: 100;
				.btncta {
					padding: .75em 1.5em;
					box-shadow: 0 8px 8px 0 rgba(0, 0, 0, .25);
					font-size: min(calc(24 / 390 * 100vw), 32px);
					&.triangle::before {
						content: none;
					}
				}
				&.asp {
					top: min(calc(92 / 390 * 100vw), 112px);
					right: 0;
					.btncta {
						background-color: var(--color-Theme-Asp);
						border-radius: 999px 0 0 999px;
						&:hover {
							background-color: var(--color-Theme-AspDark);
						}
					}
				}
				&.tanomu {
					bottom: min(calc(88 / 390 * 100vw), 112px);
					left: 0;
					.btncta {
						background-color: var(--color-Theme-Tanomu);
						border-radius: 0 999px 999px 0;
						&:hover {
							background-color: var(--color-Theme-TanomuDark);
						}
					}
				}
			}
		}
	}
}

@media (min-width: 768px) {
	.mainv {
		.heading {
			display: block;
			width: 100%;
			background: linear-gradient(90deg, var(--color-Theme-Asp) 0%, var(--color-Theme-Asp) 50.0%, var(--color-Theme-Tanomu) 50.0%, var(--color-Theme-Tanomu) 100%);
			.container {
				display: flex;
				flex-flow: row wrap;
				justify-content: center;
				.heading_item {
					padding: min(calc(24 / 1400 * 100vw), 24px);
					width: 50%;
					gap: min(calc(24 / 1400 * 100vw), 24px);
					p {
						color: var(--color-Text-White);
						font-size: min(calc(24 / 1400 * 100vw), 24px);
						font-weight: bold;
						line-height: 1.5;
						font-feature-settings: "palt";
					}
					.img_logo {
						width: min(calc(320 / 1400 * 100vw), 320px);
					}
					&.asp {
						order: inherit;
					}
					&.tanomu {
						order: inherit;
					}
				}
			}
		}
		.content {
			height: auto;
			aspect-ratio: inherit;
			background: linear-gradient(90deg, var(--color-Theme-AspLight) 0%, var(--color-Theme-AspLight) 50.0%, var(--color-Theme-TanomuLight) 50.0%, var(--color-Theme-TanomuLight) 100%);
			order: inherit;
			&::after {
				content: none;
			}
			.container {
				display: flex;
				flex-flow: row wrap;
				justify-content: center;
				height: auto;
				h1 {
					width: min(calc(264 / 1400 * 100vw), 264px);
					p {
						font-size: min(calc(48 / 1400 * 100vw), 48px);
						font-weight: 700;
						line-height: 1.18;
						text-align: left;
						transform: rotate(0);
						writing-mode: vertical-rl;
						.asp {
							color: var(--color-Theme-Tanomu);
							font-size: min(calc(64 / 1400 * 100vw), 64px);
						}
						.tanomu {
							color: var(--color-Theme-Asp);
							font-size: min(calc(64 / 1400 * 100vw), 64px);
						}
					}
				}
				.main_item {
					position: relative;
					padding: 24px 16px;
					width: 50%;
					height: min(calc(512 / 1400 * 100vw), 512px);
					display: flex;
					align-items: center;
					justify-content: center;
					z-index: 10;
					&::after {
						content: "";
						position: absolute;
						top: 0;
						left: 0;
						z-index: -2;
						height: 100%;
						aspect-ratio: 1 / 1;
						background-position: center;
						background-repeat: no-repeat;
						background-size: cover;
						background-image: url(/web/jp/food_dx/asp-tanomu/image/new/mainv_bg_asp.svg);
					}
					.logo_IM {
						position: absolute;
						top: 16px;
						left: 0;
						width: min(calc(176 / 1400 * 100vw), 176px);
						height: min(calc(56 / 1400 * 100vw), 56px);
					}
					.img_mainv {
						display: flex;
						align-items: center;
						justify-content: flex-start;
						width: min(calc(456 / 1400 * 100vw), 456px);
						height: min(calc(320 / 1400 * 100vw), 320px);
						img {
							display: block;
							width: min(calc(408 / 1400 * 100vw), 408px);
						}
					}

					&.tanomu {
						&::after {
							left: auto;
							right: 0;
							background-image: url(/web/jp/food_dx/asp-tanomu/image/new/mainv_bg_tanomu.svg);
						}
						.img_mainv {
							justify-content: flex-end;
							img {
								width: min(calc(336 / 1400 * 100vw), 336px);
							}
						}
					}
				}
			}
		}
		.cta {
			display: block;
			width: 100%;
			padding: 0 0 24px 0;
			background: linear-gradient(90deg, var(--color-Theme-AspLight) 0%, var(--color-Theme-AspLight) 50.0%, var(--color-Theme-TanomuLight) 50.0%, var(--color-Theme-TanomuLight) 100%);
			.container {
				display: flex;
				flex-flow: row wrap;
				justify-content: center;
				background-color:rgba(255, 255, 255, 0.5);
				.cta_item {
					position: relative;
					padding: 24px 48px;
					width: 50%;
					.cta_text {
						display: flex;
						justify-content: center;
						align-items: center;
						gap: .25em;
						margin-bottom: .5em;
						color: var(--color-Theme-Asp);
						font-size: min(calc(32 / 1400 * 100vw), 32px);
						font-weight: bold;
						line-height: 1.5;
						font-feature-settings: "palt";
						&::before,
						&::after {
							content: "";
							height: 3px;
							width: 1em;
							background-color: var(--color-Theme-Asp);
							border-radius: 4px;
						}
						&::before {
							transform: rotate(60deg);
						}
						&::after {
							transform: rotate(-60deg);
						}
					}
					.btncta {
						padding: 1em .5em;
						font-size: min(calc(32 / 1400 * 100vw), 32px);
						box-shadow: inherit;
						&.triangle {
							&::before {
								content: "";
							}
						}
					}
					&.asp {
						top : inherit;
						left: inherit;
						.btncta {
							border-radius: 999px;
						}
						.cta_text {
							color: var(--color-Theme-Asp);
							&::before,
							&::after {
								background-color: var(--color-Theme-Asp);
							}
						}
					}
					&.tanomu {
						right: inherit;
						bottom: inherit;
						.btncta {
							border-radius: 999px;
						}
						.cta_text {
							color: var(--color-Theme-Tanomu);
							&::before,
							&::after {
								background-color: var(--color-Theme-Tanomu);
							}
						}
					}
				}
			}
		}
	}
}

.which {
	padding: 48px 0 0;
	background: var(--color-Theme-AspLight);
	.container {
		display: contents;
		.text_which {
			display: block;
			width: min(calc(320 / 390 * 100vw), 320px);
			margin: 0 auto;
			img {
				display: block;
			}
		}
		.fukidashi_wrap {
			.fukidashi_item {
				padding: 32px 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				.fukidashi_box {
					position: relative;
					width: min(calc(320 / 390 * 100vw), 320px);
					aspect-ratio: 2 / 1;
					display: flex;
					align-items: center;
					justify-content: center;
					p {
						position: relative;
						padding-bottom: .5em;
						color: var(--color-Text-White);
						font-size: min(calc(20 / 390 * 100vw), 20px);
						font-weight: bold;
						line-height: 1.75;
						z-index: 10;
					}
					&::after {
						content: "";
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background-position: center;
						background-repeat: no-repeat;
						background-size: cover;
					}
				}
				.img_logo {
					margin-top: 16px;
					width: calc(100% - var(--side-margin) * 2);
					max-width: 400px;
					img {
						display: block;
						margin-inline: auto;
						padding: min(calc(16 / 390 * 100vw), 16px);
						width: min(calc(160 / 390 * 100vw), 160px);
					}
				}
				.checkitem_list {
					margin-top: 24px;
					.checkitem {
						padding: 16px;
						background-color:rgba(255, 255, 255, 0.8);
						border-radius: 16px;
						display: flex;
						flex-direction: column;
						align-items: center;
						gap: min(calc(12 / 390 * 100vw), 12px);
						& + .checkitem {
							margin-top: 16px;
						}
						.text {
							padding-bottom: .5em;
							border-bottom: 1px solid #999;
							font-size: min(calc(24 / 390 * 100vw), 24px);
							line-height: 1.5;
							font-weight: 500;
							text-align: center;
						}
						.stars {
							img {
								display: block;
								width: min(calc(240 / 390 * 100vw), 240px);
							}
						}
					}
				}
				.img {
					margin-top: 24px;
				}
				.btn_area {
					margin-top: 12px;
					width: min(calc(320 / 390 * 100vw), 400px);
					.btncta {
						font-size: min(calc(24 / 390 * 100vw), 24px);
					}
				}
				&.asp {
					background-color: var(--color-Theme-AspLight);
					.img_logo {
						background-color: var(--color-Theme-Asp);
					}
					.fukidashi_box {
						&::after {
							background-image: url(/web/jp/food_dx/asp-tanomu/image/new/fukidashi_bg_asp.svg);
						}
					}
					.img {
						width: min(calc(320 / 390 * 100vw), 320px);
					}
					.btn_area {
						margin-top: 12px;
						.btncta {
							background-color: var(--color-Theme-Asp);
							&:hover{
								background-color: var(--color-Theme-AspDark);
							}
						}
					}
				}
				&.tanomu {
					background-color: var(--color-Theme-TanomuLight);
					.img_logo {
						background-color: var(--color-Theme-Tanomu);
					}
					.fukidashi_box {
						&::after {
							background-image: url(/web/jp/food_dx/asp-tanomu/image/new/fukidashi_bg_tanomu.svg);
						}
					}
					.img {
						width: min(calc(208 / 390 * 100vw), 208px);
					}
					.btn_area {
						margin-top: -48px;
						.btncta {
							background-color: var(--color-Theme-Tanomu);
							&:hover{
								background-color: var(--color-Theme-TanomuDark);
							}
						}
					}
				}
			}
		}
	}
}
/* which */
@media (min-width: 768px) {
	.which {
		padding: 24px 0 64px;
		background: linear-gradient(90deg, var(--color-Theme-AspLight) 0%, var(--color-Theme-AspLight) 50.0%, var(--color-Theme-TanomuLight) 50.0%, var(--color-Theme-TanomuLight) 100%);
		.container {
			display: block;
			.fukidashi_wrap {
				position: relative;
				display: flex;
				flex-flow: row wrap;
				justify-content: space-between;
				.fukidashi_item {
					padding: 0;
					width: 50%;
					.fukidashi_box {
						position: relative;
						width: min(calc(384 / 1400 * 100vw), 384px);
						aspect-ratio: 2 / 1;
						display: flex;
						align-items: center;
						justify-content: center;
						p {
							position: relative;
							padding-bottom: .5em;
							color: var(--color-Text-White);
							font-size: min(calc(24 / 1400 * 100vw), 24px);
							font-weight: bold;
							line-height: 1.75;
							z-index: 10;
						}
						&::after {
							content: "";
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							background-position: center;
							background-repeat: no-repeat;
							background-size: cover;
						}
					}
					&.asp {
						.fukidashi_box {
							margin-left: 0;
							margin-right: auto;
							p {
								&::after {
									background-image: url(/web/jp/food_dx/asp-tanomu/image/new/fukidashi_bg_asp.svg);
								}
							}
						}
					}
					&.tanomu {
						.fukidashi_box {
							margin-right: 0;
							margin-left: auto;
							p {
								&::after {
									background-image: url(/web/jp/food_dx/asp-tanomu/image/new/fukidashi_bg_tanomu.svg);
								}
							}
						}
					}
				}
			}
			.text_which {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: min(calc(536 / 1400 * 100vw), 536px);
				margin-bottom: 0;
				img {
					display: block;
				}
			}
			.checkitem_list {
				margin-top: 16px;
				padding: 48px min(calc(64 / 1400 * 100vw), 64px);
				background-color:rgba(255, 255, 255, 0.8);
				border-radius: 16px;
				box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .20);
				.checkitem {
					width: 100%;
					display: flex;
					flex-flow: row wrap;
					justify-content: space-evenly;
					align-items: center;
					gap: 0;
					& + .checkitem {
						margin-top: min(calc(32 / 1400 * 100vw), 32px);
					}
					.text {
						padding: 0;
						min-width: min(calc(480 / 1400 * 100vw), 400px);
						font-size: min(calc(32 / 1400 * 100vw), 32px);
						font-weight: 500;
						text-align: center;
						order: 2;
					}
					.stars {
						img {
							display: block;
							width: min(calc(240 / 1400 * 100vw), 240px);
						}
						&.asp {
							order: 1;
						}
						&.tanomu {
							order: 3;
						}
					}
				}
			}
		}
	}
}

/* footer */
.footer {
	padding: 32px 0;
	background-color: var(--color-Text-Primary);
	margin-inline: auto;
	.footer_logo {
		img {
			display: block;
			margin-inline: auto;
			width: 180px;
		}
	}
	.footer_list {
		display: flex;
		flex-direction: column;
		gap: 12px;
		width: fit-content;
		margin: 24px auto 0;
		li {
			a {
				display: flex;
				flex-flow: row;
				align-items: center;
				gap: 4px;
				font-size: 14px;
				line-height: 1.25;
				color: var(--color-Text-White);
			}
			.new_tab::after {
				content: "";
				display: inline-block;
				width: 10px;
				aspect-ratio: 1;
				background-position: center;
				background-repeat: no-repeat;
				background-size: contain;
				background-image: url(/web/jp/food_dx/asp-tanomu/image/new/icon_new-tab.svg);
			}
		}
	}
	.footer_copyright {
		margin-top: 24px;
		color: #999;
		font-size: 12px;
		text-align: center;
	}
}
@media (min-width: 768px) {
	.footer {
		.footer_logo {
			img {
				width: 240px;
			}
		}
		.footer_list {
			margin-top: 32px;
			flex-flow: row wrap;
			justify-content: center;
			gap: 12px;
			li {
				&:not(:last-child) {
					padding-right: 12px;
					border-right: solid 1px var(--color-Text-white);
				}
			}
		}
	}
}