@charset "UTF-8";

p.error {
	font-size: 90%;
	color: #BD1616;
	line-height: 1;
	margin-top: 0.5em !important;
	display: block;
	width: 100%;
}
#contact .contact .contact-form .box-white .form-row-agree p.error {
	text-align: center;
}

#contact .contact .contact-form button {
	font-size: 1.6rem;
}

#contact .contact .contact-form.confirm .box-btn {
	display: flex;
	justify-content: center;
	gap: 0 5%;
}
#contact .contact .contact-form.confirm .box-btn button {
	min-width: auto !important;
	width: 100%;
	max-width: 270px;
}
#contact .contact .contact-form.confirm .box-btn .btn-back .line-circle {
	transform: rotateY(180deg);
	left: 22px;
	right: unset;
}
@media only screen and (max-width: 750px) {
	#contact .contact .contact-form.confirm .box-btn .btn-back {
		padding-left: 40px;
		padding-right: 15px;
	}
}

#contact .contact .contact-form.thanks .box-white {
	text-align: center;
}
#contact .contact .contact-form.thanks h2 {
	font-weight: 700;
	font-size: 2.6rem;
	line-height: 1.2;
	margin-bottom: 1.5em;
}
#contact .contact .contact-form.thanks p {
	margin-top: 1em;
}
#contact .contact .contact-form.thanks .btn-box {
	display: flex;
	justify-content: center;
	margin-top: 2em;
}
#contact .contact .contact-form.thanks .btn-download {
	width: 100%;
	max-width: 360px;
	background: #FFF;
}
#contact .contact .contact-form.thanks .btn-download:hover {
	color: #000;
}
#contact .contact .contact-form.thanks .btn-download .icn {
	margin-right: 1em;
}
#contact .contact .contact-form.thanks .btn-download .icn img {
	width: 25px;
	height: 25px;
}
@media only screen and (max-width: 750px) {
	#contact .contact .contact-form.thanks .box-white {
		padding: 2em 1em;
	}
	#contact .contact .contact-form.thanks h2 {
		margin-bottom: unset;
	}
	#contact .contact .contact-form.thanks .btn-download .icn img {
		width: 15px;
		height: 15px;
	}
}
#contact .contact .contact-form.thanks .txt-box {
	border-top: 1px solid #D0D0D0;
	margin-top: 2em;
	text-align: left;
}


/* thumbnail ratio */
#news .news .news-slick .item a .cover img {
	width: 100%;
	aspect-ratio: 74/53; /* w/h */
	object-fit: cover;
}
#news-inner .news-inner .news-list ul li a .cover img {
	width: 100%;
	aspect-ratio: 10/7; /* w/h */
	object-fit: cover;
}
.page-top #pro .pro .box-content .pro-cat ul li a .cover img {
	width: 100%;
	aspect-ratio: 65/54; /* w/h */
	object-fit: cover;
}
.page-top .column-list .item a .cover img {
	width: 100%;
	aspect-ratio: 1/1; /* w/h */
	object-fit: cover;
}
.popular .column-list .item a .cover img,
.latest .column-list .item a .cover img,
.products .column-list .item a .cover img,
.recipes-list-featured .item a .cover img {
	width: 100%;
	aspect-ratio: 7/5; /* w/h */
	object-fit: cover;
}
.recipes-list .item a .cover img {
	width: 100%;
	aspect-ratio: 14/9; /* w/h */
	object-fit: cover;
}
#recipes .recipes .recipes-video .box-content .recipes-video-slick .slick-list .slick-track .slick-slide > div .item a .cover img {
	width: 100%;
	aspect-ratio: 13/19; /* w/h */
	object-fit: cover;
}
.news-detail .box-white .relared-article .relared-article-list .item a .cover img,
.recipes-list-related-article .item a .cover img {
	width: 100%;
	aspect-ratio: 31/20; /* w/h */
	object-fit: cover;
}
#recipes-inner .recipes-inner .content-flex .col-l .recipes-row.box.ranking ul li a .cover img {
	width: 100%;
	aspect-ratio: 15/11; /* w/h */
	object-fit: cover;
}
#recipes-inner .recipes-inner .content-flex .col-l .recipes-row.box.ranking ul li:nth-child(n+4) a .cover .no {
	display: none;
}

.column-inner .box-content .category ul li a.current,
#pro-inner .pro-inner .pro-filter ul li a.current {
	color: #fff;
	background-color: #BD1616;
	pointer-events: none;
}

.featured.recipes-list {
	margin-top: 40px;
}
.featured.recipes-list h3,
.featured.recipes-list .img {
	margin-top: 0;
}
@media only screen and (max-width: 750px) {
	.featured.recipes-list {
		margin-top: 30px;
	}
}

.box-video {
	width: 80%;
	margin: 40px auto 0;
}
.box-video .video {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
}
.box-video .video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media only screen and (max-width: 750px) {
	.box-video {
		width: 100%;
		margin-top: 30px;
	}
}

/* ===== recipes-new（親グリッド：左右を独立させ、互いの高さに追従させない） ===== */
#recipes-inner .recipes-inner .content-flex .col-r .recipes-row .recipes-new {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  align-items: start; /* stretch をやめる：右が左の高さに引き伸ばされない */
}
#recipes-inner .recipes-inner .content-flex .col-r .recipes-row .recipes-new .recipes-list {
  grid-template-columns: 1fr;
}
/* 大カードの表示切り替え（選択中のみ表示） */
#recipes-inner .recipes-inner .content-flex .col-r .recipes-row .recipes-new .recipes-list .item {
  display: none;
}
#recipes-inner .recipes-inner .content-flex .col-r .recipes-row .recipes-new .recipes-list .item.is-active {
  display: block;
  animation: recipeFade .25s ease;
}
@keyframes recipeFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* ===== サムネイル4枚：左の高さに追従させず、上詰めで並べる ===== */
#recipes-inner .recipes-inner .content-flex .col-r .recipes-row .recipes-new .recipes-thumb4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  align-content: start; /* 上詰め。左が高くても縦に間延びさせない */
  /* height:100% / grid-template-rows / min-height は指定しない（追従の原因） */
}
/* 各サムネイル：47:55 で固定（クリックしても常に一定） */
#recipes-inner .recipes-inner .content-flex .col-r .recipes-row .recipes-new .recipes-thumb4 .thumb {
  position: relative;          /* リング（::after）の基準 */
  display: block;
  width: 100%;
  aspect-ratio: 47 / 55;       /* ← 縦横比を固定 */
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 13px;
  overflow: hidden;            /* 画像の角をボタンの角丸でクリップ */
  cursor: pointer;
  opacity: .7;                 /* 非選択は少し暗く（不要なら削除） */
  transition: opacity .2s ease;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
#recipes-inner .recipes-inner .content-flex .col-r .recipes-row .recipes-new .recipes-thumb4 .thumb:hover,
#recipes-inner .recipes-inner .content-flex .col-r .recipes-row .recipes-new .recipes-thumb4 .thumb.is-current {
  opacity: 1;                  /* ホバー時と選択中はくっきり */
}
/* 選択中のリング（レイアウトずれなし・角丸追従） */
#recipes-inner .recipes-inner .content-flex .col-r .recipes-row .recipes-new .recipes-thumb4 .thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px #b3161a; /* リング色はサイトに合わせて調整 */
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
#recipes-inner .recipes-inner .content-flex .col-r .recipes-row .recipes-new .recipes-thumb4 .thumb.is-current::after {
  opacity: 1;
}
/* 画像はボタンいっぱいに敷く（比率はボタン側で固定済み） */
#recipes-inner .recipes-inner .content-flex .col-r .recipes-row .recipes-new .recipes-thumb4 .thumb img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;            /* 角丸はボタン側で管理 */
  transition: transform .3s ease;
}
#recipes-inner .recipes-inner .content-flex .col-r .recipes-row .recipes-new .recipes-thumb4 .thumb:hover img {
  transform: scale(1.05);
}
#recipes-inner .recipes-inner .content-flex .col-r .recipes-row .recipes-new .recipes-thumb4 .thumb:focus-visible {
  outline: 2px solid #b3161a; /* フォーカス可視化。色はサイトに合わせて調整 */
  outline-offset: 2px;
}
/* ===== 850px 以下：カード縦積み（サムネイルは比率固定なので追加指定不要） ===== */
@media only screen and (max-width: 850px) {
  #recipes-inner .recipes-inner .content-flex .col-r .recipes-row .recipes-new {
    grid-template-columns: 1fr;
  }
}
/* ===== 750px 以下：4枚を横一列に ===== */
@media only screen and (max-width: 750px) {
  #recipes-inner .recipes-inner .content-flex .col-r .recipes-row .recipes-new .recipes-thumb4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* .cover を正方形にして余白を白に */
#pro .pro .box-content .pro-slick-wrapper .pro-slick .slick-list .slick-track .slick-slide > div .item a .cover,
#pro-inner .pro-inner .pro-list-cat .row .box-white .box-content .subcat-cnt-item .grid .col-r .pro-list-cat-slick .item a .cover,
#pro-inner .pro-inner .pro-list .item a .cover,
#recipes-inner .recipes-inner .recipes-inner-row .box-detail .row.title .cover .img {
  position: relative;
  padding-top: 100%;   /* 高さ = 幅 で正方形 */
  height: 0;
  overflow: hidden;
  background-color: #fff;
}
/* 画像はどのサイズでも枠内に収める（縦横の長い方をフィット） */
#pro .pro .box-content .pro-slick-wrapper .pro-slick .slick-list .slick-track .slick-slide > div .item a .cover img,
#pro-inner .pro-inner .pro-list-cat .row .box-white .box-content .subcat-cnt-item .grid .col-r .pro-list-cat-slick .item a .cover img,
#pro-inner .pro-inner .pro-list .item a .cover img,
#recipes-inner .recipes-inner .recipes-inner-row .box-detail .row.title .cover .img img {
  position: absolute;
  inset: 0;            /* top/left/right/bottom: 0 */
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* もともと3つだったのが2つになりまして */
#pro-inner .pro-inner .pro-list-cat .row .box-white .box-content .subcat-btn ul.col2 {
  -ms-grid-columns: 1fr [2];
  grid-template-columns: repeat(2, 1fr);
}
@media only screen and (max-width: 1180px) {
  #pro-inner .pro-inner .pro-list-cat .row .box-white .box-content .subcat-btn ul.col2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: auto;
  }
  #pro-inner .pro-inner .pro-list-cat .row .box-white .box-content .subcat-btn ul.col2 li {
    min-width: 280px;
  }
}
@media only screen and (max-width: 1180px) and (max-width: 750px) {
  #pro-inner .pro-inner .pro-list-cat .row .box-white .box-content .subcat-btn ul.col2 li {
    min-width: 160px;
  }
}