@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=M+PLUS+1p:wght@700;800&display=swap');

.main {
	overflow: clip;
}

[class^="cp-yamitsukimen-"] {
	color: #000;
	font-family: 'Noto Sans JP', sans-serif;
}

[class^="cp-yamitsukimen-"] img {
	width: 100%;
}

.cp-yamitsukimen-mplus1 {
	font-family: "M PLUS 1p", sans-serif !important;
	font-style: normal;
}

.cp-yamitsukimen-red {
	color: #DE0716;
}

.cp-yamitsukimen-note {
	color: #777777;
	margin-top: 20px;
}

.cp-pc {
	display: block;
}
.cp-sp {
	display: none;
}

@media (width < 768px) {
	.cp-pc {
		display: none;
	}
	.cp-sp {
		display: block;
	}
}

/*-----------
	animation
----------*/
@keyframes popin {
	0% {
		opacity: 0;
		transform: scale(0.5);
	}

	60% {
		opacity: 1;
		transform: scale(1.1);
	}

	80% {
		transform: scale(0.95);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes fadeUp {
	0% {
		opacity: 0;
		transform: translateY(40px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (width >= 768px) {
	.anime-pop {
		opacity: 0;
		transform: scale(0.5);
		animation: popin 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	}

	.anime-fadein {
		opacity: 0;
		animation: fadeUp 0.6s cubic-bezier(0.33, 1, 0.68, 1) forwards;
	}
}

/* ヒーローエリア */
.cp-yamitsukimen-hero {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 1440 / 800;
	background: linear-gradient(90deg, #FFE100 0%, #FFE100 50%, #EA7704 50%, #EA7704 100%);
}

.cp-yamitsukimen-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 100%);
}

.cp-yamitsukimen-hero__upper {
	position: relative;
	max-width: 1440px;
	margin-inline: auto;
}

.cp-yamitsukimen-hero__title {
	position: relative;
}

.cp-yamitsukimen-hero__title::before {
	content: '';
	position: absolute;
	top: calc(-371 / 1440 * 100vw);
	left: 50%;
	translate: -50% 0;
	width: calc(2422 / 1440 * 100vw);
	aspect-ratio: 2422 / 742;
	background-color: #fff;
	border-radius: 100%;
	z-index: 1;
}

.cp-yamitsukimen-hero__title h1 {
	width: calc(547 / 1440 * 100vw);
	margin-inline: auto;
	padding-top: calc(26 / 1440 * 100vw);
}

.cp-yamitsukimen-hero__title h1 {
	position: relative;
	z-index: 1;
}

.cp-yamitsukimen-hero__catch1 {
	position: absolute;
	top: calc(50 / 1440 * 100vw);
	left: calc(80 / 1440 * 100vw);
	width: calc(293 / 1440 * 100vw);
	rotate: -5deg;
	z-index: 1;
}

.cp-yamitsukimen-hero__catch2 {
	position: absolute;
	top: calc(34 / 1440 * 100vw);
	right: calc(43 / 1440 * 100vw);
	width: calc(370 / 1440 * 100vw);
	rotate: 5deg;
	z-index: 1;
	animation-delay: 0.4s;
}

.cp-yamitsukimen-hero__product {
	position: relative;
	display: flex;
	justify-content: space-between;
	width: calc(496 / 1440 * 100vw);
	margin-top: calc(-16 / 1440 * 100vw);
	margin-inline: auto;
	z-index: 1;
}

.cp-yamitsukimen-hero__product li {
	width: calc(220 / 1440 * 100vw);
}

.cp-yamitsukimen-hero__men1 {
	position: absolute;
	left: calc(30 / 1440 * 100vw);
	bottom: calc(-120 / 1440 * 100vw);
	width: calc(557 / 1440 * 100vw);
}

.cp-yamitsukimen-hero__men2 {
	position: absolute;
	right: calc(30 / 1440 * 100vw);
	bottom: calc(-120 / 1440 * 100vw);
	width: calc(557 / 1440 * 100vw);
}

@media (width >= 1440px) {
	.cp-yamitsukimen-hero {
		height: 800px;
	}

	.cp-yamitsukimen-hero__upper {
		width: 1440px;
	}

	.cp-yamitsukimen-hero__title::before {
		top: -371px;
		width: 2422px;
		height: 742px;
		aspect-ratio: auto;
	}

	.cp-yamitsukimen-hero__title h1 {
		width: 547px;
	}

	.cp-yamitsukimen-hero__catch1 {
		top: 50px;
		left: 80px;
		width: 293px;
	}

	.cp-yamitsukimen-hero__catch2 {
		position: absolute;
		top: 34px;
		right: 43px;
		width: 370px;
	}

	.cp-yamitsukimen-hero__product {
		width: 496px;
		margin-top: -16px;
	}

	.cp-yamitsukimen-hero__product li {
		width: 220px;
	}

	.cp-yamitsukimen-hero__men1 {
		left: 30px;
		bottom: -120px;
		width: 557px;
	}

	.cp-yamitsukimen-hero__men2 {
		right: 30px;
		bottom: -120px;
		width: 557px;
	}
}



@media (width < 768px) {
	.cp-yamitsukimen-hero {
		height: 680px;
		aspect-ratio: 375 / 680;
	}

	.cp-yamitsukimen-hero__upper {
		position: static;
	}

	.cp-yamitsukimen-hero__title::before {
		content: '';
		position: absolute;
		top: -304px;
		width: 768px;
		height: 534px;
		aspect-ratio: auto;
	}
	.cp-yamitsukimen-hero__title h1 {
		width: 310px;
		padding-top: 15px;
	}

	.cp-yamitsukimen-hero__catch1 {
		top: auto;
		bottom: 25px;
		left: calc(50% - 148px);
		width: 103px;
	}

	.cp-yamitsukimen-hero__catch2 {
		top: auto;
		bottom: 0;
		left: calc(50% + 23px);
		width: 147px;
	}

	.cp-yamitsukimen-hero__product {
		width: 349px;
		margin-inline: auto;
		z-index: 1;
	}

	.cp-yamitsukimen-hero__product li {
		width: 169px;
	}
}

/* リード */
.cp-yamitsukimen-lead {
	max-width: 1400px;
	padding: 82px 20px 89px;
	margin-inline: auto;
	background-color: #fff;
	text-align: center;
}

.cp-yamitsukimen-lead__catch {
	max-width: 1014px;
	margin-inline: auto;
}

.cp-yamitsukimen-lead__text {
	margin-top: 20px;
	color: #000;
	font-size: 23px;
	font-weight: 600;
}

.cp-yamitsukimen-lead__text strong {
	color: #D2000F;
	padding-right: 5px;
}

@media (768px <= width < 900px) {
	.cp-yamitsukimen-lead__text {
		font-size: 18px;
	}
}

@media (width < 768px) {
	.cp-yamitsukimen-lead {
		padding-block: 60px;
	}

	.cp-yamitsukimen-lead__text {
		font-size: 16px;
		line-height: 1.6;
	}

	.cp-yamitsukimen-lead__text strong {
		padding-right: 0;
	}
}

/* 期間限定新登場 */
.cp-yamitsukimen-about {
	padding-bottom: 65px;
	background: url(/ajipon/yamitsukimen/img/bg.png) no-repeat 50% 0 / cover;
}

.cp-yamitsukimen-about__limited {
	width: 100%;
	max-width: 1400px;
	margin-inline: auto;
}

.cp-yamitsukimen-about__title {
	margin-top: 72px;
	text-align: center;
}

.cp-yamitsukimen-about__title-text1 {
	display: block;
	font-family: "M PLUS 1p", sans-serif;
	font-size: 32px;
	font-weight: 800;
	line-height: 1;
}

.cp-yamitsukimen-about__title-text2 {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin-top: 15px;
	font-family: "M PLUS 1p", sans-serif;
	font-size: 70px;
	font-weight: 900;
	line-height: 1;
}

.cp-yamitsukimen-about__title-text2 sub {
	font-size: 23px;
	top: -.5em;
}

.cp-yamitsukimen-about__title-text2 img {
	width: 204px;
	height: auto;
	padding-left: 5px;
}

.cp-yamitsukimen-about__body {
	max-width: 1020px;
	padding-inline: 20px;
	margin: 38px auto 0;
}

.cp-yamitsukimen-about__text {
	font-weight: 700;
}

.cp-yamitsukimen-about__text span {
	display: block;
	padding: 0 8px 3px;
	line-height: 2;
	font-size: 21px;
	font-weight: 700;
	background: url(/ajipon/yamitsukimen/img/line.png) repeat-x left bottom / contain;
	background-size: auto 2px;
}

.cp-yamitsukimen-about__text em {
	color: #D2000F;
	font-style: normal;
}

.cp-yamitsukimen-about__text span:not(:first-child) {
	margin-top: 10px;
}

.cp-yamitsukimen-about__image {
	width: min(904px, 100%);
	margin: -12px auto 0;
	rotate: -3deg;
}

@media (768px <= width < 900px) {
	.cp-yamitsukimen-about__title-text1 {
		font-size: 23px;
	}

	.cp-yamitsukimen-about__title-text2 {
		font-size: 55px;
	}

	.cp-yamitsukimen-about__title-text2 img {
		width: 150px;
	}

	.cp-yamitsukimen-about__text span {
		font-size: 18px;
	}
}

@media (width < 768px) {
	.cp-yamitsukimen-about {
		position: relative;
		padding-top: 102px;
		padding-bottom: 30px;
	}

	.cp-yamitsukimen-about__limited {
		position: absolute;
		top: 0;
		left: 50%;
		translate: -50% 0;
		width: 457px;
		margin-inline: auto;
	}

	.cp-yamitsukimen-about__title {
		margin-top: 0;
	}

	.cp-yamitsukimen-about__title-text1 {
		font-size: 18px;
		line-height: 1.4;
	}

	.cp-yamitsukimen-about__title-text2 {
		display: block;
		margin-top: 5px;
		font-size: 40px;
		font-weight: 900;
		line-height: 1.2;
	}

	.cp-yamitsukimen-about__title-text2 sub {
		font-size: 18px;
		top: .3em;
	}

	.cp-yamitsukimen-about__title-text2 img {
		display: block;
		width: 116px;
		height: auto;
		padding-left: 0;
		margin: 5px auto 0;
	}

	.cp-yamitsukimen-about__body {
		padding-inline: 20px;
		margin-top: 40px;
	}

	.cp-yamitsukimen-about__text span {
		font-size: 15px;
	}

	.cp-yamitsukimen-about__image {
		width: 100%;
		margin-top: 20px;
		rotate: 0;
	}
}

/* 商品詳細 */
.cp-yamitsukimen-product__inner {
	position: relative;
	max-width: 1193px;
	padding-inline: 20px;
	margin-inline: auto;
}

.cp-yamitsukimen-product__title {
	width: min(446px, 100%);
	margin-inline: auto;
}

.cp-yamitsukimen-product__pkg {
	position: absolute;
	z-index: 1;
}

.cp-yamitsukimen-product__men {
	position: absolute;
	width: 670px;
}

.cp-yamitsukimen-product__detail {
	width: 50%;
	max-width: 576px;
	padding-bottom: 80px;
	text-align: center;
}

.cp-yamitsukimen-product__copy {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.28;
}

.cp-yamitsukimen-product__text {
	margin-top: 12px;
	font-size: 15px;
	font-weight: 500;
	line-height: 2;
}

.cp-yamitsukimen-product__button {
	margin-top: 30px;
}

.cp-yamitsukimen-product__button .cp-button_inner {
	border-color: #EA5504;
	background-color: #EA5504;
	border-radius: 100vmax;
}

.cp-yamitsukimen-product__reipe {
	position: relative;
	padding-block: 88px 73px;
}

.cp-yamitsukimen-product__reipe-title {
	margin-bottom: 24px;
	font-family: "M PLUS 1p", sans-serif;
	font-size: 56px;
	font-weight: 800;
	text-align: center;
	line-height: 1.33;
}

.cp-yamitsukimen-product__reipe-title span {
	display: block;
	font-size: 28px;
}

.cp-yamitsukimen-recipe .cp-yamitsukimen-recipe__icon {
	width: 124px;
	margin-bottom: 14px;
	text-align: center;
}

.cp-yamitsukimen-recipe a {
	color: #000;
}

.cp-yamitsukimen-recipe .cp-imageset_title {
	text-align: center;
}

.cp-yamitsukimen-recipe .cp-imageset_image {
	background-color: #fff;
}


/* 極旨 */
.cp-yamitsukimen-product-gokuuma .cp-yamitsukimen-product__reipe {
	background: linear-gradient(180deg, #FFEF7A 0%, #FFE100 100%);
}

.cp-yamitsukimen-product-gokuuma .cp-yamitsukimen-product__title {
	padding-block: 77px 30px;
}

.cp-yamitsukimen-product-gokuuma .cp-yamitsukimen-product__upper {
	padding-right: 50%;
}

.cp-yamitsukimen-product-gokuuma .cp-yamitsukimen-product__detail {
	padding-bottom: 86px;
}

.cp-yamitsukimen-product-gokuuma .cp-yamitsukimen-product__pkg {
	width: 296px;
	left: calc(50% + 20px);
	bottom: -68px;
}

.cp-yamitsukimen-product-gokuuma .cp-yamitsukimen-product__men {
	bottom: -94px;
	left: calc(50% + 120px);
}


/* 辛旨 */
.cp-yamitsukimen-product-karauma .cp-yamitsukimen-product__reipe {
	background: linear-gradient(180deg, #F2AD68 0%, #EA7704 100%);
}

.cp-yamitsukimen-product-karauma .cp-yamitsukimen-product__upper {
	padding-left: 50%;
}

.cp-yamitsukimen-product-karauma .cp-yamitsukimen-product__title {
	padding-block: 67px 23px;
}

.cp-yamitsukimen-product-karauma .cp-yamitsukimen-product__detail {
	margin-left: 50%;
}

.cp-yamitsukimen-product-karauma .cp-yamitsukimen-product__pkg {
	width: 296px;
	bottom: -67px;
	left: calc(50% - 305px);
}

.cp-yamitsukimen-product-karauma .cp-yamitsukimen-product__men {
	bottom: -135px;
	left: calc(50% - 790px);
}

@media (width >= 768px) and (any-hover: hover){
	.cp-yamitsukimen-product__button .cp-button_inner:hover {
		color: #EA5504;
		background-color: #fff;
	}

	.cp-yamitsukimen-product__button .cp-button_inner:hover::before {
		background-image: url(/assets/img/cms_parts/ico_blank-orange.svg);
	}

	.cp-yamitsukimen-recipe img,
	.cp-yamitsukimen-recipe .cp-imageset_title {
		transition: opacity .2s;
	}

	.cp-yamitsukimen-recipe a:hover img,
	.cp-yamitsukimen-recipe a:hover .cp-imageset_title {
		opacity: .7;
	}
}

@media (768px <= width < 900px) {
	.cp-yamitsukimen-product__copy {
		font-size: 24px;
	}

	.cp-yamitsukimen-product__text {
		font-size: 14px;
		font-weight: 500;
		line-height: 2;
	}

	.cp-yamitsukimen-product__button {
		display: block;
	}

	.cp-yamitsukimen-product__button.cp-button-container .cp-button-container_item {
		margin: 20px auto 0;
	}
}

@media (width < 768px) {
	.cp-yamitsukimen-product__inner {
		padding-inline: 0;
	}

	.cp-yamitsukimen-product__title {
		width: calc(272 / 375 * 100vw);
		margin-inline: auto;
	}

	.cp-yamitsukimen-product__upper {
		position: relative;
	}

	.cp-yamitsukimen-product__pkg {
		position: static;
	}

	.cp-yamitsukimen-product__men {
		position: absolute;
		width: calc(300 / 375 * 100vw);
	}

	.cp-yamitsukimen-product__detail {
		position: relative;
		width: 100%;
		max-width: 100%;
		text-align: center;
		z-index: 1;
	}

	.cp-yamitsukimen-product__copy {
		font-size: 22px;
	}

	.cp-yamitsukimen-product__text {
		margin-top: 20px;
		font-size: 14px;
	}

	.cp-yamitsukimen-product__button {
		margin-top: 30px;
	}

	.cp-yamitsukimen-product__reipe {
		padding: 0  20px 60px;
	}

	.cp-yamitsukimen-product__reipe-title {
		font-size: 34px;
	}

	.cp-yamitsukimen-product__reipe-title span {
		font-size: 15px;
	}

	.cp-yamitsukimen-recipe .cp-yamitsukimen-recipe__icon {
		width: 80px;
		margin-bottom: 10px;
	}

	/* 極旨 */
	.cp-yamitsukimen-product-gokuuma .cp-yamitsukimen-product__reipe {
		background: #FFE100;
	}

	.cp-yamitsukimen-product-gokuuma .cp-yamitsukimen-product__title {
		padding-block: 30px 0;
		margin-bottom: -40px;
	}

	.cp-yamitsukimen-product-gokuuma .cp-yamitsukimen-product__upper {
		padding-right: 0;
	}

	.cp-yamitsukimen-product-gokuuma .cp-yamitsukimen-product__detail {
		background: linear-gradient(180deg, #FFEF7A 0%, #FFE100 100%);
		padding: 62px 20px 66px;
	}

	.cp-yamitsukimen-product-gokuuma .cp-yamitsukimen-product__pkg {
		position: relative;
		width: calc(147 / 375 * 100vw);
		left: 15px;
		bottom: -40px;
		z-index: 2;
	}

	.cp-yamitsukimen-product-gokuuma .cp-yamitsukimen-product__men {
		left: auto;
		right: 0;
		bottom: -40px;
	}


	/* 辛旨 */
	.cp-yamitsukimen-product-karauma .cp-yamitsukimen-product__reipe {
		background: #EA7704;
	}

	.cp-yamitsukimen-product-karauma .cp-yamitsukimen-product__upper {
		padding-left: 0;
	}

	.cp-yamitsukimen-product-karauma .cp-yamitsukimen-product__title {
		padding-block: 30px 0;
		margin-bottom: -60px;
	}

	.cp-yamitsukimen-product-karauma .cp-yamitsukimen-product__detail {
		background: linear-gradient(180deg, #F2AD68 0%, #EA7704 100%);
		margin-left: 0;
		padding: 62px 20px 66px;
	}

	.cp-yamitsukimen-product-karauma .cp-yamitsukimen-product__pkg {
		position: relative;
		width: calc(147 / 375 * 100vw);
		left: calc(50% + 15px);
		bottom: -60px;
		z-index: 2;
	}

	.cp-yamitsukimen-product-karauma .cp-yamitsukimen-product__men {
		right: auto;
		left: 10px;
		bottom: -80px;
	}

}