*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
}

img,
picture {
  max-width: 100%;
  height: auto;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
ul,
ol,
dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
  display: none;
}

input[type="submit"],
input[type="button"],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

a {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

li {
  list-style: none;
}

:root {
  --main-color: #004b34;
  --sub-color: #a9876d;
  --border-color: #ececec;
  --font-color: #424242;
  --bg-color: #f9f9f9;
  --accent-color: #660d1f;
  --footer-font-color: #a6adb6;
  --link-color: #337ab7;
  --base-font: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ,
    Meiryo, "arial";
  --title-font: "游明朝", YuMincho, "Hiragino Mincho ProN", serif;
  --english-font: "Rethink Sans", sans-serif;
}

/*-------------------------
  基本設定
-------------------------*/

:where(html) {
  font-family: var(--base-font);
  font-weight: 500;
  color: var(--font-color);
  line-height: 1.5;
}

:where(h1, h2, h3, a) {
  letter-spacing: 0.04em;
  font-feature-settings: "palt";
}

:where(p) {
  line-height: 1.75;
}

:where(img) {
  object-fit: cover;
}

/*-------------------------
  レイアウト調整
-------------------------*/
.l-inner {
  max-width: 1280px;
  padding-right: 6%;
  padding-left: 6%;
  margin: 0 auto;
}

.l-block {
  margin: 80px 0;
  position: relative;
  scroll-margin-top: 100px;
}

@media (min-width: 1024px) {
  .l-block {
    margin: 140px 0;
    scroll-margin-top: 120px;
  }
}

.l-block--background {
  background-color: var(--bg-color);
  padding: 40px 0;
}

@media (min-width: 1024px) {
  .l-block--background {
    padding: 80px 0;
  }
}

.l-container {
  max-width: 800px;
  margin-inline: auto;
  padding-right: 6%;
  padding-left: 6%;
}

.l-grid {
  display: grid;
  gap: 30px;
}

@media (min-width: 768px) {
  .l-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .l-grid {
    gap: 80px;
  }
}

.l-grid--top {
  align-items: flex-start;
}

.l-grid img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .l-grid--reverse .l-grid__content1 {
    order: 2;
  }

  .l-grid--reverse .l-grid__content2 {
    order: 1;
  }
}

.u-center {
  text-align: center;
}

.u-space {
  margin-top: 40px;
}

@media (min-width: 1024px) {
  .u-space {
    margin-top: 80px;
  }
}

.u-space--l {
  padding-top: 40px;
}

@media (min-width: 1024px) {
  .u-space--l {
    padding-top: 80px;
  }
}

/*================================
	見出し
=================================*/

.c-heading span {
  color: var(--sub-color);
  text-transform: uppercase;
  font-family: var(--english-font);
  letter-spacing: 0.15em;
}

.c-heading h2 {
  font-family: var(--title-font);
  font-weight: normal;
  font-size: clamp(1.625rem, 1.352rem + 1.36vw, 2.375rem);
  margin-top: 24px;
  margin-bottom: min(6vw, 40px);
  letter-spacing: 0.2em;
}

.c-heading p + p {
  margin-top: 8px;
}

.c-heading--std span {
  color: var(--main-color);
  text-transform: uppercase;
  font-family: var(--english-font);
  letter-spacing: 0.15em;
}

.c-heading--std h2 {
  font-family: var(--title-font);
  font-weight: normal;
  font-size: clamp(1.625rem, 1.352rem + 1.36vw, 2.375rem);
  margin-top: 16px;
  margin-bottom: min(6vw, 40px);
}

@media (min-width: 1024px) {
  .c-heading--std p {
    margin-top: -15px;
  }
}

/*================================
	テキストエリア
=================================*/
.c-textarea {
  display: grid;
  row-gap: 20px;
}

.c-textarea p {
  line-height: 2rem;
}

@media (min-width: 1024px) {
  .c-textarea p {
    line-height: 2.25rem;
  }
}

/*================================
	ボタン
=================================*/
.c-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 300px;
  padding: 12px 24px;
  background-color: #fff;
  border: 1px solid var(--main-color);
  text-decoration: none;
  color: var(--main-color);
  margin: 32px auto 0;
  transition: opacity 0.3s; /* ホバー時のアニメーション */
}

/* ホバー時の挙動 */
.c-btn:hover {
  color: #fff;
  background: var(--main-color);
}

/* テキスト部分 */
.c-btn__text {
  font-size: 15px;
  letter-spacing: 0.1em;
  line-height: 1.5;
}

/* 矢印アイコンのエリア */
.c-btn__icon {
  position: absolute;
  right: 20px; /* 右端からの距離 */
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--main-color);
  border-right: 2px solid var(--main-color);
  transform: rotate(45deg);
  margin-top: -2px;
}

.c-btn:hover .c-btn__icon {
  border-color: #fff;
}

@media (min-width: 1024px) {
  .c-btn {
    margin-top: 40px;
    margin-left: 0;
  }
}

.c-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 14px 0;
  text-decoration: none;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  margin-top: min(8vw, 40px);
}

.c-button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: var(--border-color);
}

.c-button__label {
  flex: 1 1 auto;
  letter-spacing: 0.15em;
  color: var(--text-color);
}

.c-button__icon {
  flex: 0 0 auto;
  inline-size: 18px;
  block-size: 18px;
  position: relative;
}

.c-button__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--sub-color);
  border-top: 2px solid var(--sub-color);
  transform: rotate(45deg);
}

.c-button:hover .c-button__label {
  color: var(--sub-color);
}

.c-button:hover .c-button__icon {
  transform: translateX(2px);
}

.c-button:hover .c-button__icon::before {
  border-color: var(--sub-color);
}

.c-button:focus-visible {
  outline: 2px solid #8cbcff;
  outline-offset: 2px;
}

.c-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 14px 0;
  text-decoration: none;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  margin-top: min(8vw, 40px);
  justify-content: flex-end;
  color: var(--main-color);
}

.c-link__label {
  letter-spacing: 0.15em;
}

.c-link__icon {
  flex: 0 0 auto;
  inline-size: 18px;
  block-size: 18px;
  position: relative;
}

.c-link__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}

@media (hover: hover) {
  .c-link:hover {
    color: var(--sub-color);
  }

  .c-link:hover .c-link__icon {
    transform: translateX(2px);
  }
}

.c-link:focus-visible {
  outline: 2px solid #8cbcff;
  outline-offset: 2px;
}

/*================================
	header
=================================*/
.l-header {
  height: 60px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

.l-header.open {
  background-color: #ddd;
}

.l-header.is-scrolled {
  border-bottom: 1px solid var(--border-color); /* スクロール後に表示 */
  background: #fff;
}

.l-header__wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.l-header__logo img {
  width: 100px;
}

@media (min-width: 1024px) {
  .l-header__logo img {
    width: 140px;
  }
}

.l-header__menu li {
  text-transform: uppercase;
  color: var(--font-color);
  position: relative;
}

/* ハンバーガーメニューが表示されている場合 */
@media not all and (min-width: 1024px) {
  .l-header__wrap {
    padding: 0 0 0 16px;
  }

  .l-header__nav {
    position: fixed;
    top: 60px;
    right: -100%; /* メニューの位置マイナス指定で画面外に */
    width: 100%;
    height: 100vh;
    transition: 0.3s;
  }

  .l-header__menu {
    display: flex;
    flex-direction: column;
    z-index: 100;
  }

  .l-header__menu li {
    display: flex;
    align-items: center;
    padding: 24px 24px 24px 56px;
    letter-spacing: 0.1em;
    position: relative;
    border-top: 1px solid var(--border-color);
  }

  .l-header__menu li:last-child {
    border-bottom: 1px solid var(--border-color);
  }

  .l-header__menu > li::before {
    position: absolute;
    content: "";
    width: 12px;
    height: 12px;
    background: url(../images/icon/arrow.svg) no-repeat center center/contain;
    left: 6%;
    top: 50%;
    transform: translateY(-50%);
  }

  .l-header__nav.open {
    background: #fff;
    position: absolute;
    right: 0; /* メニューオープン時位置0にして画面内に */
    z-index: 100;
    top: 60px;
  }
}

/* 1024px以上のスタイリング */
@media (min-width: 1024px) {
  .l-header {
    padding: 0 6%;
    height: 100px;
    transition: background-color 0.3s ease;
    background: transparent;
  }

  .l-header__menu li {
    color: #fff;
  }

  .l-header.is-scrolled .l-header__menu li {
    color: var(--text-color);
  }

  .l-header.is-scrolled .l-header__menu li:hover {
    color: var(--sub-color);
    border-bottom: 1px solid var(--sub-color);
  }

  .l-header.is-scrolled .l-header__menu li.current-menu-item {
    border-bottom: 1px solid var(--sub-color);
    color: var(--sub-color);
  }

  .l-header__menu li:hover {
    border-bottom: 1px solid #fff;
  }

  .l-header__menu {
    /* メニューを横に */
    display: flex;
    align-items: center;
    gap: 40px;
  }

  .current-menu-item {
    border-bottom: 1px solid #fff;
  }
}

/*-------------------------
  ハンバーガーメニュー
-------------------------*/
.c-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border: none;
  cursor: pointer;
}

/* ハンバーガーメニューの基準線 */
.c-hamburger__line {
  display: block;
  position: relative;
  width: 24px;
  height: 2px;
  background-color: #fff;
  transition: 0.2s;
  margin: 0 auto;
}

/* ハンバーガーメニューの上下線 */
.c-hamburger__line::before,
.c-hamburger__line::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #fff;
  transition: 0.5s;
  left: 0;
}

.c-hamburger__line::before {
  transform: translateY(-10px); /* 上の線の位置 */
}

.c-hamburger__line::after {
  transform: translateY(10px); /* 下の線の位置 */
}

/* メニューオープン時 */
.c-hamburger__line.open {
  background-color: transparent; /* 真ん中の線を透明に */
}

.c-hamburger__line.open::before,
.c-hamburger__line.open::after {
  content: "";
  background-color: #fff;
  transition: 0.2s;
}

.c-hamburger__line.open::before {
  transform: rotate(45deg); /* 上の線を傾ける */
}

.c-hamburger__line.open::after {
  transform: rotate(-45deg); /* したの線を傾ける */
}

.l-header.is-scrolled .c-hamburger__line,
.l-header.is-scrolled .c-hamburger__line::before,
.l-header.is-scrolled .c-hamburger__line::after {
  background: var(--main-color);
}

.l-header.is-scrolled .c-hamburger__line.open {
  background-color: transparent; /* 真ん中の線を透明に */
}

@media (min-width: 1024px) {
  .c-hamburger {
    display: none;
  }
}

/*================================
	page-title
=================================*/

.l-page-title {
  padding: 0;
  position: relative;
  height: 300px;
}

.l-page-title__img {
  height: 100%;
  width: 100%;
}

.l-page-title__img img {
  filter: brightness(50%);
  height: 100%;
  width: 100%;
}

.l-page-title__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding-top: 60px;
  width: 100%;
}

.l-page-title span {
  display: block;
  color: #fff;
  text-transform: uppercase;
  font-family: var(--english-font);
  letter-spacing: 0.15em;
}

.l-page-title__content h1 {
  font-size: clamp(2rem, 1.727rem + 1.36vw, 2.75rem);
  font-family: var(--title-font);
  font-weight: normal;
  color: #fff;
}

@media (min-width: 768px) {
  .l-page-title {
    height: 320px;
  }
}

.l-page-title + .l-block {
  margin-top: 40px;
}

@media (min-width: 1024px) {
  .l-page-title + .l-block {
    margin-top: 120px;
  }
}

/*================================
	main-visual
=================================*/

.p-main-visual {
  position: relative;
  height: 72vh;
}

@keyframes zoomUp {
  0% {
    transform: scale(1); /* 等倍からスタート */
  }
  100% {
    transform: scale(1.15); /* 1.15倍まで拡大（数値はお好みで） */
  }
}

.p-main-visual__img {
  height: 100%;
  overflow: hidden;
}

.p-main-visual__img picture {
  display: block; /* デフォルトだと隙間ができやすいためblock推奨 */
  height: 100%;
  width: 100%;
}

.p-main-visual__img picture img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  filter: brightness(50%);
  animation: zoomUp 10s linear forwards;
}

.p-main-visual__copy {
  position: absolute;
  bottom: 6%;
  left: 6%;
  width: 90%;
  max-width: 1280px;
}

.p-main-visual__copy h1 {
  font-family: var(--title-font);
  font-weight: normal;
  font-size: clamp(2.25rem, 1.977rem + 1.36vw, 3rem);
  color: #fff;
  margin-top: 14px;
  letter-spacing: 4px;
}

.p-main-visual__copy p {
  color: #fff;
  font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem);
  margin-top: min(8vw, 40px);
  font-family: var(--title-font);
  letter-spacing: 2px;
  border-bottom: 1px solid #fff;
  display: inline-block;
  padding-bottom: 2px;
}

@media (min-width: 1024px) {
  .p-main-visual {
    height: 88vh;
  }

  .p-main-visual__copy {
    bottom: 10%;
  }
}

/*================================
	TOPページ：ギフトセット
=================================*/

.p-top-gift__wrap {
  margin: 40px 0 0;
  position: relative;
}

.p-top-gift {
  display: grid;
  gap: min(8vw, 40px);
}

.p-top-gift__img img {
  object-fit: cover;
  height: 100%;
}

@media not all and (min-width: 1023px) {
  .p-top-gift__img {
    width: 100vw;
    margin-top: 20px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .p-top-gift__img img {
    filter: brightness(90%);
  }
}

@media (min-width: 1024px) {
  .p-top-gift__wrap {
    margin: 140px 0;
  }

  .p-top-gift {
    grid-template-columns: 360px 1fr;
    column-gap: 120px;
  }
}

/*================================
	TOPページ：強み・こだわり
=================================*/

.p-top-feature {
  background: var(--bg-color);
  padding: 40px 0;
}

.p-top-feature__wrap {
  display: grid;
  row-gap: 40px;
}

.p-top-feature__img {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 下段2枚用に2列 */
  gap: 8px;
}

/* 画像の共通スタイル */
.p-top-feature__img > img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover; /* 余白なくトリミング */
  border-radius: var(--radius);
  background: #eee; /* 画像未読込時の背景 */
  filter: brightness(90%);
}

/* 上段：全幅1枚（比率はお好みで） */
.p-top-feature__img > img:first-child {
  grid-column: 1 / -1; /* 2列ぶち抜き */
  aspect-ratio: 16 / 9;
}

/* 下段：左右2枚（比率はお好みで） */
.p-top-feature__img > img:nth-child(2),
.p-top-feature__img > img:nth-child(3) {
  aspect-ratio: 4 / 3;
}

@media (min-width: 1024px) {
  .p-top-feature {
    padding: 120px 0;
  }
  .p-top-feature__wrap {
    grid-template-columns: 1fr 360px;
    column-gap: 120px;
    align-items: center;
  }

  .p-top-feature__texts {
    order: 2;
  }

  .p-top-feature__img {
    order: 1;
  }
}

/*================================
	よくある質問
=================================*/

.c-accordion {
  max-width: 800px;
  margin-top: min(8vw, 40px);
  margin-inline: auto;
  overflow: hidden;
}

.c-accordion__item {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

/* トリガーボタン */
.c-accordion__trigger {
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 0.75rem;
  border: 0;
  background: #fff;
  text-align: left;
  cursor: pointer;
  color: var(--font-color);
}

.c-accordion__trigger:hover {
  opacity: 0.7;
}

.c-accordion__badge {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  background: var(--sub-color);
  color: #fff;
}

.c-accordion__title {
  display: block;
  line-height: 1.6;
  margin: 0;
  color: var(--font-color);
}

.c-accordion__icon {
  width: 1rem;
  height: 1rem;
  position: relative;
}

.c-accordion__icon::before,
.c-accordion__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 12px;
  height: 2px;
  background: var(--sub-color);
  transition: transform 0.25s ease;
}

.c-accordion__icon::after {
  transform: rotate(90deg);
}

.c-accordion__trigger[aria-expanded="true"] .c-accordion__icon::after {
  transform: rotate(0deg);
}

.c-accordion__panel {
  overflow: hidden;
  max-height: 0; /* JSで開くときにscrollHeightを入れる */
  transition: max-height 0.28s ease;
}

.c-accordion__panel-inner {
  padding: 4px 12px 20px;
  color: #1a1a1a;
  line-height: 1.8;
  font-size: 15px;
}

/* フォーカス可視化 */
.c-accordion__trigger:focus-visible {
  outline: 2px solid #0b76d1;
  outline-offset: 2px;
}

@media (min-width: 1024px) {
  .c-accordion__trigger {
    padding: 0.875rem 1rem;
  }

  .c-accordion__panel-inner {
    padding: 0.875rem 1rem 1rem;
  }
}

/*================================
	link-list
=================================*/

.p-link-list {
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 40px 0;
}

.p-link-list__wrap {
  display: grid;
  row-gap: 20px;
}

@media (min-width: 1024px) {
  .p-link-list {
    padding: 120px 0;
  }
  .p-link-list__wrap {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 120px;
  }

  .p-link-list__nav > .c-button:first-child {
    margin-top: 0;
  }
}

/*================================
	footer
=================================*/

.l-footer {
  padding: 64px 0 24px;
  background: #f7f7f7;
}

.l-footer__head {
  display: grid;
  row-gap: 32px;
}

.l-footer__logo {
  font-size: 18px;
  font-weight: normal;
}

.l-footer__info {
  font-size: 14px;
  margin-top: 16px;
  display: grid;
  gap: 8px;
}

.l-footer__content {
  padding-top: 40px;
  font-size: 14px;
  display: grid;
  gap: 40px;
  border-top: 1px solid var(--border-color);
  margin-top: 24px;
}

.l-footer__nav {
  display: grid;
  gap: 16px;
}

.l-footer__copy {
  color: #969696;
  font-size: 12px;
}

.l-footer__link {
  width: 100%;
}

@media (min-width: 768px) {
  .l-footer__head {
    grid-template-columns: 1fr auto;
  }
}

@media (min-width: 1024px) {
  .l-footer {
    padding-bottom: 64px;
  }

  .l-footer__info {
    margin-top: 32px;
  }

  .l-footer__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
  }

  .l-footer__nav {
    display: flex;
  }
}

/*================================
	contents
=================================*/

.c-contents {
  margin-top: min(8vw, 80px);
  display: grid;
  row-gap: clamp(0px, 16vw, 120px);
}

.c-contents__item {
  display: grid;
  row-gap: 20px;
  align-items: center;
}

.c-contents__heading {
  font-family: var(--title-font);
  font-weight: normal;
  font-size: clamp(1.375rem, 1.239rem + 0.68vw, 1.75rem);
  margin-bottom: min(6vw, 40px);
}

.c-contents__textarea {
  display: grid;
  row-gap: 8px;
}

.c-contents__textarea p {
  line-height: 2rem;
}

.c-contents__img img {
  aspect-ratio: 1/ 1;
}

@media (min-width: 1024px) {
  .c-contents__item {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 6%;
  }

  .c-contents__textarea {
    row-gap: 16px;
  }
}

/*================================
	セット事例
=================================*/

.p-example {
  margin-top: min(8vw, 80px);
  display: grid;
  row-gap: 32px;
}

.p-example__item img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.p-example__textarea {
  margin-top: 12px;
}

.p-example__textarea p {
  color: #777;
  font-size: 14px;
  margin-bottom: 8px;
  text-align: center;
}

@media (min-width: 768px) {
  .p-example {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
  }
}

@media (min-width: 1024px) {
  .p-example {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
  }
}

/*================================
	オンラインショップのボタン
=================================*/
.c-button--ec {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem; /* ラベルと矢印の間 */
  padding: 16px 24px 16px 32px; /* 20px 40px */
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  border-radius: 0;
  color: var(--accent-color);
  background: var(--color-bg);
  transition: box-shadow 0.2s ease;
}

/* モディファイア（EC版：アウトライン＋右矢印） */
.c-button--ec {
  border: 1px solid var(--accent-color);
}

/* ラベルは常に中央寄せ（右側にアイコンを置いても中央を維持） */
.c-button--ec__label {
  letter-spacing: 0.08em;
  margin-inline: auto;
}

/* 右端の矢印（arrow.svg を使用） */
.c-button--ec__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background: url(../images/icon/arrow-red.svg) no-repeat center / contain; /* パスは環境に合わせて */
  transition: transform 0.2s ease;
}

/* Hover / Focus */
.c-button--ec:hover,
.c-button--ec:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-ec) 20%, transparent);
  opacity: 0.7;
}
.c-button--ec:hover .c-button--ec__icon,
.c-button--ec:focus-visible .c-button--ec__icon {
  transform: translateX(4px);
}
.c-button--ec:focus {
  outline: none;
}

/*================================
	特徴
=================================*/
.p-feature {
  display: grid;
  row-gap: 48px;
}

.p-feature__item {
  display: grid;
  row-gap: 28px;
  align-items: center;
}

.p-feature__content {
  padding: 0 6%;
}

.p-feature__heading span {
  color: var(--main-color);
  text-transform: uppercase;
  font-family: var(--english-font);
  letter-spacing: 0.15em;
}

.p-feature__heading h2 {
  font-family: var(--title-font);
  font-weight: normal;
  font-size: clamp(1.625rem, 1.352rem + 1.36vw, 2.375rem);
  margin-top: 24px;
  margin-bottom: min(6vw, 40px);
}

.p-feature__textarea {
  display: grid;
  row-gap: 12px;
}

.p-feature__textarea p {
  line-height: 2rem;
}

.p-feature__media > img {
  aspect-ratio: 1/ 1;
  object-fit: cover;
  display: block;
}

@media (min-width: 768px) {
  .p-feature {
    display: grid;
    row-gap: 64px;
  }
}

@media (min-width: 1024px) {
  .p-feature {
    row-gap: 120px;
  }

  .p-feature__item {
    grid-template-columns: 45% 55%;
  }

  .p-feature__item.-reverse {
    grid-template-columns: 55% 45%;
  }

  .-reverse .p-feature__media {
    order: 2;
  }

  .p-feature__content {
    padding: 0 12%;
  }

  .p-feature__textarea p {
    line-height: 2.25rem;
  }
}

/*================================
	取扱商品一覧
=================================*/
.p-products {
  display: grid;
  row-gap: 80px;
}

.p-products__item {
  display: grid;
  row-gap: 28px;
  align-items: center;
}

.p-products__heading span {
  color: var(--sub-color);
  text-transform: uppercase;
  font-family: var(--english-font);
  letter-spacing: 0.15em;
  padding-left: 4px;
}

.p-products__heading h2 {
  font-family: var(--title-font);
  font-weight: normal;
  font-size: clamp(1.625rem, 1.352rem + 1.36vw, 2.375rem);
  margin-top: 16px;
  margin-bottom: min(6vw, 40px);
}

.p-products__textarea {
  display: grid;
  row-gap: 12px;
}

.p-products__textarea p {
  line-height: 2rem;
}

.p-products__img img {
  height: 100%;
  object-fit: cover;
}

@media not all and (min-width: 1023px) {
  .p-products__img {
    width: 100vw;
    margin-top: 20px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

@media (min-width: 1024px) {
  .p-products {
    row-gap: 160px;
  }

  .p-products__item {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 80px;
  }

  .p-products__content {
    padding: 40px 0;
  }

  .p-products__img img {
    min-height: 420px;
  }

  .p-products__textarea p {
    line-height: 2.25rem;
  }
}

/*================================
	画像
=================================*/
.c-image {
  margin-top: 24px;
  aspect-ratio: 3 / 2;
}

/*================================
	お問い合わせ
=================================*/

.p-contact {
  max-width: 620px;
  margin-inline: auto;
}

.p-contact__heading {
  margin-top: 96px;
}

.p-contact__heading span {
  color: var(--main-color);
  text-transform: uppercase;
  font-family: var(--english-font);
  letter-spacing: 0.15em;
  text-align: center;
  display: block;
}

.p-contact__heading h1 {
  font-family: var(--title-font);
  font-weight: normal;
  font-size: clamp(1.625rem, 1.352rem + 1.36vw, 2.375rem);
  margin-top: 16px;
  text-align: center;
}

.p-contact p {
  margin-top: 20px;
}

.p-contact__lead {
  display: grid;
  row-gap: 8px;
}

.p-contact__tel {
  text-align: center;
  line-height: 1.4;
  background: #f7f7f7;
  padding: 24px 0;
  margin-top: 32px;
  margin-bottom: 40px;
}
.p-contact__tel a {
  display: inline-block;
  font-size: 32px;
  letter-spacing: 1px;
  position: relative;
}
.p-contact__tel a small {
  font-size: 18px;
  text-transform: uppercase;
}
.p-contact__tel span {
  font-size: 14px;
  display: block;
  padding-top: 8px;
}

.p-contact__note {
  margin-top: 24px;
  text-align: center;
}

@media (min-width: 1024px) {
  .p-contact__heading {
    margin-top: 160px;
    margin-bottom: 40px;
  }
}

.p-contact__form {
  background: #fafafa;
  padding: 0 12px;
}

.p-contact__lead p {
  margin-bottom: 12px;
}

.p-contact__lead a {
  text-decoration: underline;
}

.p-contact__require {
  font-size: 14px;
}

@media (min-width: 768px) {
  .p-contact__form {
    margin-top: 40px;
    padding: 20px 32px 60px;
  }
}

/*================================
	table
=================================*/

.c-table {
  max-width: 800px;
  margin: 30px auto 0;
}

.c-table__list dt {
  padding: 18px 0 13px 0;
  border-top: solid 1px #e6e6e6;
  color: var(--main-color);
  line-height: 2;
}

.c-table__list dd {
  padding: 0px 0 19px 0;
  line-height: 2;
}

.c-table__list dd:last-of-type {
  border-bottom: solid 1px #e6e6e6;
}

.c-table__list a {
  text-decoration: underline;
  color: #1839b1;
}

@media (min-width: 768px) {
  .c-table__list {
    display: grid;
    grid-template-columns: 120px 1fr;
  }

  .c-table__list dt {
    padding: 28px 0 28px;
  }

  .c-table__list dt:last-of-type {
    border-bottom: solid 1px #e6e6e6;
  }

  .c-table__list dd {
    padding: 28px 0 28px;
    border-top: solid 1px #e6e6e6;
  }
}

/*================================
	カテゴリ
=================================*/

.p-category {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 30px;
}

.p-category a {
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .p-category {
    gap: 28px 40px;
  }
}

/*================================
	チーズ一覧
=================================*/

.p-inventory {
  margin-top: min(8vw, 60px);
  display: grid;
  row-gap: 28px;
}

.p-inventory__image img {
  border: 1px solid #f0f0f0;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.p-inventory__content {
  margin-top: 16px;
}

.p-inventory__cat {
  font-size: 14px;
  color: var(--sub-color);
}

.p-inventory__title {
  font-size: 18px;
  margin-top: 4px;
}

.p-inventory__desc {
  font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem) /* 14-16px */;
  margin-top: 12px;
}

.p-inventory__info {
  margin-top: 10px;
  border-top: solid 1px #e6e6e6;
  padding-top: 10px;
  display: grid;
  row-gap: 4px;
}

.p-inventory__info dl {
  display: flex;
  gap: 10px;
  font-size: 14px;
}

@media (min-width: 768px) {
  .p-inventory {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 40px;
  }
}

@media (min-width: 1024px) {
  .p-inventory {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 48px;
  }
}

.p-category a.is-active {
  color: var(--sub-color);
  pointer-events: none; /* 選択中はクリック無効にするなど */
}

/*================================
	Instagram
=================================*/

.p-instagram {
  margin-top: 40px;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

.p-instagram img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

@media (min-width: 768px) {
  .p-instagram {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 80px;
  }
}

/*================================
	404
=================================*/

.p-error__contents {
  background: var(--bg-color);
  padding: 20px 16px;
  margin: 0 auto;
  max-width: 800px;
}

.p-error__contents h2 {
  color: var(--main-color);
  margin-bottom: 12px;
  font-size: 18px;
}

@media (min-width: 768px) {
  .p-error__contents {
    padding: 40px 40px 24px;
  }

  .p-error__contents h2 {
    font-size: 22px;
  }
}

/*================================
	privacy-policy
=================================*/

.p-policy {
  padding: 40px 0;
  max-width: 800px;
  margin: 0 auto;
}

.p-policy-main h2 {
  font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem);
  margin-top: 44px;
  margin-bottom: -18px;
}

.p-policy-main p {
  font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
  line-height: 2.25;
  margin: 30px 0;
}

.p-policy-main ul {
  margin: 30px 0;
}

.p-policy-main li {
  margin: 6px 0;
  padding-left: 24px;
  line-height: 2;
  font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
  position: relative;
}

.p-policy-main li:before {
  display: block;
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 6px;
  height: 6px;
  background-color: #333;
  border-radius: 100%;
}

@media (min-width: 1024px) {
  .p-policy {
    padding: 64px 0;
  }

  .p-policy-main h2 {
    margin-top: 54px;
  }

  .p-policy-main p {
    margin: 36px 0;
  }

  .p-policy-main ul {
    margin: 36px 0;
  }
}

/*----------------------------------------
	Form
----------------------------------------*/

.c-form__table {
  width: 100%;
}

.c-form__table th {
  width: 100%;
  padding: 20px 0 0 0;
  vertical-align: middle;
  text-align: left;
}

.c-form__table td {
  padding: 10px 0 20px 0;
  vertical-align: middle;
}

.c-form__table,
.c-form__table tbody,
.c-form__table tr,
.c-form__table th,
.c-form__table td {
  display: block;
}

.c-form__field input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /*ブラウザ標準スタイルを無効にする*/
  width: 100%;
  padding: 10px 20px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
}

/*必須ラベル*/
.require {
  padding-left: 2px;
  color: red;
}

/*----------------------------------------
	個人情報保護方針チェック
----------------------------------------*/
.c-form__privacy-box {
  margin: 0 0 24px;
}

.c-form__privacy-box a {
  text-decoration: underline;
  color: #337ab7;
}

@media screen and (min-width: 768px), print {
  .c-form__privacy-box {
    padding: 20px;
    text-align: center;
  }
}

/*----------------------------------------
	送信ボタン
----------------------------------------*/
.c-form__button {
  display: flex;
  justify-content: center;
}

.c-form__button-action {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  margin: 0;
  padding: 12px;
  width: 100%;
  max-width: 400px;
  border: 2px solid var(--main-color);
  background: var(--main-color);
  color: #fff;
  text-decoration: none;
  text-align: center;
  letter-spacing: 0.1em;
  transition: opacity 0.3s, color 0.3s;
  cursor: pointer;
}

.c-form__button-action:hover {
  opacity: 0.7;
}

div.wpcf7 .wpcf7-spinner {
  display: none !important;
}

/*================================
	送信完了画面
=================================*/

.p-thanks {
  padding: 40px 0;
  max-width: 720px;
  margin: 0 auto;
}

.p-thanks__heading {
  font-size: 24px;
}

.p-thanks__texts {
  margin-top: 20px;
}

.p-thanks__texts p {
  margin-bottom: 16px;
}

@media not all and (min-width: 767px) {
  .p-thanks__texts br {
    display: none;
  }
}

.p-thanks__alert p {
  color: #cb0808;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .p-thanks__heading {
    text-align: center;
  }
}

@media (min-width: 1024px) {
  .p-thanks {
    padding: 64px 0;
  }

  .p-thanks__heading {
    font-size: 32px;
  }

  .p-thanks__texts {
    margin-top: 28px;
    font-size: 18px;
  }

  .p-thanks__alert {
    font-size: 18px;
  }
}