@charset "utf-8";
/*--------------------------------------------------------------------------------

  products

--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
  .prod-mv
--------------------------------------------------------------------------------*/
.prod-mv {
  --gap: clamp(2px, 1vw, 0.5rem);
  pointer-events: none;
  overflow: hidden;
  position: relative;
  z-index: -1;
  margin: 0 var(--SP-side-space-s);
  border-radius: var(--rd-q);
}
.prod-mv_area-img {
  width: calc(100% + (var(--rd-h) * 2) + (var(--gap) * 2));
  max-height: 400px;
  margin-left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: var(--gap);
}
.prod-mv_logo {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  grid-area: 2 / 4 / 4 / 6;
  border-radius: var(--rd-q);
  background-color: #FFF;
  display: grid;
  place-content: center;
  place-items: center;
}
.prod-mv_logo img { width: min(80%, 260px); }
.prod-mv_img {
  border-radius: var(--rd-q);
  overflow: hidden;
  grid-column: span 2;
  grid-row: span 2;
}
.prod-mv_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}
@media (max-width: 760px) {
  .prod-mv_area-img { width: 125%; }
}
.prod-mv-txt {
  text-align: center;
  font-family: var(--ff-go);
  font-weight: 500;
  font-size: clamp(var(--fs-n), 3vw, var(--fs-2m));
  line-height: var(--line-height-l);
  padding: var(--space-l) var(--side-space) 1rem var(--side-space);
}

/*--------------------------------------------------------------------------------
  .prod-notes
--------------------------------------------------------------------------------*/
.prod-notes {
  border: 1px solid var(--color-primary);
  padding: var(--inner-space-2s);
  margin-top: var(--space-l);
  margin-bottom: var(--space-3l);
  font-size: var(--fs-s);
}
.prod-notes_ttl {
  color: var(--color-primary);
  font-size: var(--fs-m-rem);
  font-weight: bold;
  margin-bottom: 0.25rem;
}

/*--------------------------------------------------------------------------------
  .prod-nav
--------------------------------------------------------------------------------*/
@media not (max-width: 760px) { .prod-nav { --col: 3; --img-breakpoint: 1000; } }
@media (max-width: 760px) { .prod-nav { --col: 2; --img-breakpoint: 500; } }
.prod-nav {
  --img-height: 140;
  --link-color: var(--txt-color);
  --link-color-hover: var(--color-primary);
  --link-deco: none;
  --link-deco-hover: none;
  display: grid;
  grid-template-columns: repeat(var(--col), 1fr);
  gap: var(--space-2s);
}
.prod-nav li {
  text-align: center;
  font-size: clamp(var(--fs-s), 3vw, var(--fs-m));
  font-weight: bold;
  line-height: var(--line-height-s);
}
.prod-nav li,
.prod-nav a {
  display: grid;
  gap: 0;
  grid-template-rows: subgrid;
  grid-row: span 2;
}
.prod-nav a {
  border: 2px solid var(--border-color);
  border-radius: var(--rd-q);
  padding: var(--inner-space-2s);
}
.prod-nav_img {
  align-self: center;
  margin: 0.5rem 0 1rem 0;
}
.prod-nav_img img {
  max-height: min(calc(var(--img-height) / var(--img-breakpoint) * 100vw), (var(--img-height) * 1px));
}

/*--------------------------------------------------------------------------------
  .prod-lineup
--------------------------------------------------------------------------------*/
.prod-lineup { padding-top: 1rem; }
.prod-lineup_ttl {
  margin-top: var(--space-2l);
}
.prod-lineup_ttl:first-of-type {
  margin-top: var(--space-l);
}
.prod-lineup_video {
  margin-top: 0.5rem;
  margin-bottom: var(--space-l);
}
.prod-lineup_video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--rd-1);
}
@media not (max-width: 760px) {
  .prod-lineup_video {
    width: 100%;
    max-width: min(calc(800 / 760 * 100vw), 800px);
    margin-inline: auto;
  }
}

/*--------------------------------------------------------------------------------
  .prod-list
--------------------------------------------------------------------------------*/
@media not (max-width: 760px) { .prod-list { --col: 3; --img-breakpoint: 1000; } }
@media (max-width: 760px) and (not (max-width: 500px)) { .prod-list { --col: 2; --img-breakpoint: 760; } }
@media (max-width: 500px) { .prod-list { --col: 1; --img-breakpoint: 500; } }
.prod-list {
  --img-height: 300;
  font-size: var(--fs-s);
  display: grid;
  grid-template-columns: repeat(var(--col), 1fr);
  gap: var(--space-l) var(--space-m);
}
.prod-list_item {
  line-height: var(--line-height-s);
  margin-top: 0.5rem;
  display: grid;
  gap: var(--inner-space-2s) 0;
  grid-template-rows: subgrid;
  grid-row: span 2;
}
.prod-list_img {
  text-align: center;
  align-self: center;
  border: 1px solid var(--border-color);
  border-radius: var(--rd-1);
  padding: var(--inner-space-s);
}
.prod-list_img img {
  max-height: min(calc(var(--img-height) / var(--img-breakpoint) * 100vw), (var(--img-height) * 1px));
}
.prod-list_txt .ttl {
  font-size: var(--fs-m-rem);
  font-weight: bold;
  margin-bottom: 0.5rem;
}

/*--------------------------------------------------------------------------------
  .prod-list2
--------------------------------------------------------------------------------*/
.prod-list2 {
  font-size: var(--fs-s);
  display: grid;
  row-gap: var(--space-l);
}
.prod-list2_item {
  line-height: var(--line-height-s);
  margin-top: 0.5rem;
  display: grid;
  gap: var(--inner-space-2s) var(--space-m);
}
.prod-list2_img img {
  border-radius: var(--rd-1);
}
.prod-list2_content {
  display: grid;
  grid-template-rows: 1fr auto;
  row-gap: var(--inner-space-s);
}
.prod-list2_txt { align-self: center; }
.prod-list2_txt .ttl {
  font-size: var(--fs-m-rem);
  font-weight: bold;
  line-height: var(--line-height-s);
  margin-bottom: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75em;
}
.prod-list2_txt .ttl:has(.tag) { margin-bottom: 0.75rem; }
.prod-list2_txt .ttl .tag {
  border: 1px solid var(--color-secondary);
  line-height: 1;
  padding: 0.35rem 0.5rem;
  color: var(--color-secondary);
  font-size: var(--fs-s-rem);
  font-weight: normal;
}
@media not (max-width: 760px) {
  .prod-list2_item {
    grid-template-columns: min(48%, 480px) 1fr;
  }
}

/*--------------------------------------------------------------------------------
  .prod-data-tbl
--------------------------------------------------------------------------------*/
@media not (max-width: 760px) {
  .prod-data-tbl { --width: min(80%, 440px); }
  .prod-data-tbl:has(thead th:nth-child(3)) { --width: min(100%, 560px); }
}
@media (max-width: 760px) { .prod-data-tbl { --width: 100%; margin-bottom: 0.5rem; } }
.prod-data-tbl {
  width: var(--width);
  line-height: var(--line-height-2s);
}
.prod-data-tbl caption {
  font-size: var(--fs-s);
  margin-bottom: 0.25rem;
}
.prod-data-tbl thead th { background-color: var(--bg-quaternary-3); }
.prod-data-tbl tbody td { background-color: var(--bg-quaternary); }
.prod-data-tbl th,
.prod-data-tbl td {
  text-align: center;
  vertical-align: middle;
  padding: 0.75em;
}
.prod-data-tbl th {
  font-weight: normal;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.prod-data-tbl th:not(:first-child),
.prod-data-tbl td:not(:first-child) {
  border-left: 4px solid #FFF;
}
.prod-data-tbl tbody tr:not(:first-child) {
  border-top: 1px solid var(--bg-quaternary-3);
}
.prod-data-tbl thead:has(th:nth-child(2)) th:nth-last-child(-n+2) { width: 50%; }
.prod-data-tbl thead:has(th:nth-child(3)) th:nth-last-child(-n+2) { width: 35%; }

/*--------------------------------------------------------------------------------

  brand

--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
  .brand-hd
--------------------------------------------------------------------------------*/
.brand-hd {
  --ttl2-mgb: 0;
  display: grid;
  gap: var(--space-m);
  margin-bottom: var(--space-m);
}
.brand-hd_logo {
  width: 100%;
  margin-top: -0.25rem;
  display: flex;
  justify-content: end;
  align-items: center;
  column-gap: var(--inner-space-m);
}
.brand-hd_logo img:not([src*="gokokuajidori"]) { max-height: 3.5em; }
.brand-hd_logo img[src*="gokokuajidori"] { max-height: 2em; }
.brand-hd_logo li,
.brand-hd_logo a {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media not (max-width: 760px) {
  .brand-hd {
    grid-template-columns: auto 1fr;
  }
}
@media (max-width: 760px) {
  .brand-hd_logo {
    width: min(100%, 600px);
    font-size: clamp(var(--fs-n), 3vw, var(--fs-m));
    justify-content: space-around;
    margin: 1rem auto;
    padding: 0 var(--inner-space-s);
  }
}

/*--------------------------------------------------------------------------------
  .brand
--------------------------------------------------------------------------------*/
.brand {
  border-top: 1px solid var(--border-color-dark);
  border-bottom: 1px solid var(--border-color-dark);
  padding: var(--inner-space-m) 0;
  display: grid;
  gap: var(--inner-space-s) 0;
}
.brand_logo {
  align-self: center;
  text-align: center;
  padding: 0 var(--inner-space-l);
}
.brand_logo img { margin: 0.25rem 0; }
.brand_logo img:not([src*="gokokuajidori"]) { max-height: 8em; max-width: 70%; }
.brand_logo img[src*="gokokuajidori"] { max-height: 4em; }
.brand_txt .ttl {
  font-weight: bold;
  font-size: var(--fs-2m);
  margin-bottom: 0.5rem;
}
.brand_txt .ttl small {
  font-size: var(--fs-2s);
}
@media not (max-width: 760px) {
  .brand {
    grid-template-columns: min(40%, 400px) 1fr;
  }
  .brand_txt {
    display: grid;
    align-content: center;
  }
}
@media (max-width: 760px) {
  .brand_logo {
    /* viewport(min:500px, max:760px) */
    font-size: clamp(1rem, 0.519rem + 1.54vw, 1.25rem);
  }
  .brand_logo img:not([src*="gokokuajidori"]) { max-height: 7em; }
}

/*--------------------------------------------------------------------------------
  .brand-point 
--------------------------------------------------------------------------------*/
@media not (max-width: 760px) {
  .brand-point { --no-fs: var(--fs-2s); }
}
@media (max-width: 760px) {
  .brand-point { --no-fs: min(2.2vw, var(--fs-3s)); }
}
.brand-point { margin-top: var(--space-2l); }
.brand-point_item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  gap: 0.75rem clamp(1rem, 5vw, var(--space-m));
  position: relative;
}
.brand-point_item:not(:last-of-type) {
  padding-bottom: calc(var(--space-l) + 0.5rem);
}
.brand-point_item:before {
  content: "";
  font-size: var(--no-fs);
  width: 1px;
  height: 100%;
  background-color: var(--border-color-light);
  position: absolute;
  left: calc(4em - 0.5px);
  top: -0.25rem;
  z-index: -1;
}
.brand-point_no {
  line-height: var(--line-height-2s);
  font-size: var(--no-fs);
  grid-row: span 2;
  align-self: start;
  background-color: var(--color-primary);
  color: #FFF;
  text-align: center;
  display: grid;
  place-items: center;
  place-content: center;
  width: 8em;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  padding: 1.5em;
  transform: translateY(-0.5rem);
}
.brand-point_no .num {
  line-height: 1;
  font-weight: 600;
  font-size: var(--fs-l);
  margin-top: 0.25rem;
}
.brand-point_ttl {
  color: var(--color-primary);
  font-family: var(--ff-go);
  font-size: var(--fs-l);
  font-weight: 700;
  line-height: var(--line-height-s);
}

/* .brand-point_img
----------------------------------------*/
@media not (max-width: 760px) {
  .brand-point_item:has(.brand-point_img) {
    grid-template-columns: auto 1fr auto;
  }
  .brand-point_img {
    --img-breakpoint: 1000;
    grid-column: 3 / -1;
    grid-row: 1 / span 2;
    align-self: end;
  }
}
@media (max-width: 760px) {
  .brand-point_item:has(.brand-point_img) {
    grid-template-rows: auto 1fr auto;
  }
  .brand-point_img {
    --img-breakpoint: 640;
    grid-column: 2 / -1;
    text-align: right;
  }
}
.brand-point_img img {
  width: min(calc(170 / var(--img-breakpoint) * 100vw), 170px);
}

/*--------------------------------------------------------------------------------
  .brand-area 
--------------------------------------------------------------------------------*/
.brand-area {
  display: flex;
  gap: var(--space-l);
}
@media not (max-width: 1000px) {
  .brand-area {
    justify-content: space-between;
    align-items: end;
  }
}
@media (max-width: 1000px) {
  .brand-area {
    flex-direction: column;
    align-items: center;
  }
}

/*--------------------------------------------------------------------------------
  .brand-area-farmer
--------------------------------------------------------------------------------*/
.brand-area-farmer_img {
  display: flex;
  gap: var(--space-s) var(--space-3s);
}
.brand-area-farmer_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  border-radius: var(--rd-q);
}
@media not (max-width: 1000px) {
  .brand-area-farmer:not(:has(li:nth-child(2))) {
    width: min(calc(440 / var(--base-width) * 100vw), 440px);
  }
  .brand-area-farmer:has(li:nth-child(2)) {
    width: min(calc(880 / var(--base-width) * 100vw), 880px);
  }
}
@media (max-width: 1000px) {
  .brand-area-farmer {
    margin-inline: auto;
  }
}
@media (max-width: 1000px) and (not (max-width: 760px)) {
  .brand-area-farmer:not(:has(li:nth-child(2))) {
    width: min(calc(560 / 1000 * 100vw), 560px);
  }
}
@media (max-width: 760px) {
  .brand-area-farmer {
    width: min(100%, 480px);
  }
  .brand-area-farmer_img {
    flex-direction: column;
  }
}
.brand-area-farmer .tooltip {
  width: min(90%, 360px);
  margin-inline: auto;
  position: relative;
  padding: 0.75em 1.5em;
  line-height: var(--line-height-s);
  font-weight: bold;
  text-align: center;
  margin-bottom: var(--inner-space-m);
}
.brand-area-farmer .tooltip:before {
  content: "";
  position: absolute;
  bottom: -0.25em;
  left: 50%;
  width: 100%;
  height: 35%;
  box-sizing: border-box;
  border: 1.5px solid var(--txt-color);
  border-top: none;
  border-bottom-right-radius: 9999px;
  border-bottom-left-radius: 9999px;
  translate: -50%;
}
.brand-area-farmer .tooltip:after {
  content: "";
  position: absolute;
  top: calc(100% + 0.25em);
  left: 50%;
  width: 1.25em;
  height: 1.5px;
  box-sizing: border-box;
  background-color: var(--txt-color);
  box-shadow: 0 1.5px 0 #ffffff, 0 -1.5px 0 #ffffff;
  outline: 4px solid #FFF;
  rotate: -50deg;
  translate: -50%;
}

/*--------------------------------------------------------------------------------
  .brand-area-map
--------------------------------------------------------------------------------*/
@media not (max-width: 1000px) {
  .brand-area-map { --img-breakpoint: var(--base-width); }
}
@media (max-width: 1000px) {
  .brand-area-map { --img-breakpoint: 640; }
}
.brand-area-map {
  background-color: var(--bg-tertiary);
}
.brand-area-map_ttl {
  font-size: var(--fs-m);
  font-weight: bold;
  color: #FFF;
  line-height: var(--line-height-s);
  background-color: var(--color-tertiary-light);
  padding: min(var(--space-3s), 0.75rem) var(--space-3s);
}
.brand-area-map_content {
  position: relative;
  display: grid;
}
.brand-area-map_img img {
  min-height: 100%;
  height: calc(360 / var(--img-breakpoint) * 100vw);
  max-height: 360px;
  object-fit: cover;
}
.brand-area-map_list {
  --list-mark-mgt: 0.2em;
  --list-mark-color: var(--color-tertiary-light);
  --list-mark-fs: var(--fs-s);
  align-self: end;
  font-size: var(--fs-s);
  line-height: var(--line-height-s);
  background-color: #FFF;
  padding: var(--inner-space-2s);
  border-radius: var(--rd-q);
  margin: var(--inner-space-m);
}
.brand-area-map_list dt {
  color: var(--color-tertiary-light);
  font-size: var(--fs-m);
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.brand-area-map_list dd ul {
  margin-left: calc(var(--fs-m) - 1em);
}
@media not (max-width: 1000px) {
  .brand-area-map {
    flex-grow: 2;
  }
}
@media (max-width: 1000px) {
  .brand-area-map {
    width: 100%;
  }
  .brand-area-map:not(:has(.brand-area-map_list)) .brand-area-map_img {
    text-align: center;
  }
}
@media not (max-width: 500px) {
  .brand-area-map:has(.brand-area-map_list) .brand-area-map_img {
    grid-area: 1 / 1 / 2 / 6;
  }
  .brand-area-map_list {
    grid-area: 1 / 4 / 2 / 8;
  }
}
@media (max-width: 500px) {
  .brand-area-map:has(.brand-area-map_list) .brand-area-map_img {
    text-align: center;
  }
  .brand-area-map_list {
    margin-top: 0;
  }
}

/*--------------------------------------------------------------------------------
  .brand-recipe
--------------------------------------------------------------------------------*/
.brand-recipe {
  margin-top: var(--space-2l);
  border: clamp(2px, 0.39vw, 3px) solid var(--color-quinary-lighter);
  background-color: var(--bg-quinary);
  border-radius: var(--rd-1);
  text-align: center;
  display: grid;
  line-height: var(--line-height-s);
}
.brand-recipe_img1 { grid-area: recipe-img1; pointer-events: none; }
.brand-recipe_img2 { grid-area: recipe-img2; pointer-events: none; }
.brand-recipe_img3 { grid-area: recipe-img3; pointer-events: none; }
.brand-recipe_img4 { grid-area: recipe-img4; pointer-events: none; }
.brand-recipe_txt { grid-area: recipe-txt; }
.brand-recipe_btn { grid-area: recipe_btn; }
.brand-recipe_txt .txt1 {
  font-weight: bold;
  font-size: var(--fs-2m);
  margin-bottom: 0.75rem;
}
.brand-recipe_txt .txt2 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
}
.brand-recipe_txt .txt2:before,
.brand-recipe_txt .txt2:after {
  content: "";
  width: 1.5em;
  height: 1px;
  box-sizing: border-box;
  background-color: var(--txt-color);
}
.brand-recipe_txt .txt2:before { transform: rotate(60deg); }
.brand-recipe_txt .txt2:after { transform: rotate(-60deg); }
.brand-recipe_btn {
  --btn-txt: #FFF;
  --btn-txt-hover: #FFF;
  --btn-bg: var(--color-secondary);
  --btn-bg-hover: var(--color-secondary-light);
  --btn-outline: 1px solid transparent;
  --btn-outline-hover: 1px solid transparent;
  --newwin-color: #FFF;
  --btn-line-height: var(--line-height-2s);
}
.brand-recipe_btn small {
  font-size: var(--fs-2s);
  font-weight: normal;
}
@media not (max-width: 760px) {
  .brand-recipe {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "recipe-img1 recipe-txt recipe-img2"
      "recipe-img3 recipe_btn recipe-img4";
  }
  .brand-recipe_img1 { align-self: center; }
  .brand-recipe_img3,
  .brand-recipe_img4 { align-self: start; padding-bottom: var(--inner-space-s); }
  .brand-recipe_img2 { align-self: flex-start; }
  .brand-recipe_img1 img,
  .brand-recipe_img2 img,
  .brand-recipe_img3 img,
  .brand-recipe_img4 img { width: min(60%, 140px); min-width: 100px; }
  .brand-recipe_img1 img { transform: translateX(-15%); }
  .brand-recipe_img3 img { transform: translateX(15%); }
  .brand-recipe_img2 img { transform: translateX(5%); }
  .brand-recipe_img4 img { transform: translateX(-15%); }
  .brand-recipe_txt { padding: var(--inner-space-m) 0 var(--inner-space-s) 0; align-self: end; }
  .brand-recipe_btn { padding-bottom: var(--inner-space-m); align-self: start; }
}
@media (max-width: 760px) {
  .brand-recipe {
    padding: var(--inner-space-m) var(--inner-space-s);
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "recipe-txt recipe-txt recipe-txt"
      "recipe-img1 recipe-img3 recipe-img4"
      "recipe_btn recipe_btn recipe_btn";
  }
  .brand-recipe_img2 { display: none; }
  .brand-recipe_img1 { text-align: right; }
  .brand-recipe_img4 { text-align: left; }
  .brand-recipe_img1 img,
  .brand-recipe_img3 img,
  .brand-recipe_img4 img { width: min(70%, 120px); }
  .brand-recipe_img1 img { transform: translateX(20%); }
  .brand-recipe_img4 img { transform: translateX(-20%); }
  .brand-recipe_txt { padding-bottom: var(--inner-space-s); }
  .brand-recipe_btn { padding-top: var(--inner-space-s); }
}