/* ==========================================================================
   contact.css
   お問い合わせ（contact.php）・送信完了（thanks.php）専用スタイル
   ========================================================================== */

/* ==========================================================================
   p-methods（①電話 ②メールフォーム ③Instagram DM）
   3枚のカードを少しずつ傾けて、付箋を並べたような配置に。
   ========================================================================== */
.p-methods__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  list-style: none;
}

.p-methods__card {
  --card-bg: #fff;
  --card-accent: var(--color-main);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 50px 19px 34px;
  border-radius: 44px;
  background: var(--card-bg);
  border: 3px dashed var(--card-accent);
  text-align: center;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s ease;
}

.p-methods__card--tel {
  transform: rotate(-1.5deg);
  box-shadow: 0 12px 0 var(--color-pink-deep);
}
.p-methods__card--mail {
  transform: rotate(1deg) translateY(16px);
  box-shadow: 0 12px 0 var(--color-sun-light);
  --card-bg: var(--color-cream);
}
.p-methods__card--insta {
  transform: rotate(-0.5deg);
  box-shadow: 0 12px 0 #f4d3e6;
  --card-accent: #d6336c;
}

.js-inview.is-inview .p-methods__card--tel.c-pop {
  transform: rotate(-1.5deg);
}
.js-inview.is-inview .p-methods__card--mail.c-pop {
  transform: rotate(1deg) translateY(16px);
}
.js-inview.is-inview .p-methods__card--insta.c-pop {
  transform: rotate(-0.5deg);
}

.p-methods__card:hover,
.js-inview.is-inview .p-methods__card.c-pop:hover {
  transform: rotate(0deg) translateY(-6px);
}

.p-methods__num {
  position: absolute;
  top: -22px;
  left: 26px;
  padding: 6px 16px;
  border-radius: 30px;
  background: var(--color-sun);
  color: #8c1313;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  box-shadow: 0 0 0 4px #fff;
  transform: rotate(-8deg);
}

.p-methods__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--card-accent);
  color: #fff;
  font-size: 2.2rem;
  animation: c-float 4s ease-in-out infinite;
}

.p-methods__card--insta .p-methods__icon {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.p-methods__card--mail .p-methods__icon {
  animation-delay: -1.3s;
}

.p-methods__card--insta .p-methods__icon {
  animation-delay: -2.6s;
}

.p-methods__ttl {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--card-accent);
}

.p-methods__text {
  font-family: var(--font-round);
  font-weight: 700;
  line-height: 1.8;
}

.p-methods__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  padding: 12px 24px;
  border-radius: 40px;
  background: var(--card-accent);
  color: #fff;
  font-weight: 700;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.p-methods__link:hover {
  opacity: 1;
  transform: scale(1.06) rotate(-2deg);
}

.p-methods__link--tel {
  align-items: baseline;
  gap: 4px;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
}

.p-methods__link--tel small {
  font-size: 0.8rem;
}

.p-methods__note {
  font-size: 0.75rem !important;
  line-height: 1.7;
  color: #8c5a5a;
}

.p-methods__note a {
  color: var(--color-main);
  font-weight: 700;
  border-bottom: 1px dashed currentColor;
}

/* ==========================================================================
   p-privacy（個人情報保護方針）
   ========================================================================== */
.p-privacy__box {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding: 76px 60px 56px;
  border-radius: 60px;
  /* products.php #supermarket（.p-super__card）と同じ：白地に淡い方眼＋内側の点線 */
  background-color: #fff;
  background-image: linear-gradient(rgba(200, 39, 46, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(200, 39, 46, 0.07) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: center;
  outline: 2px dashed var(--color-main);
  outline-offset: -18px;
  box-shadow:
    0 0 0 8px #fff7f7,
    0 10px 40px rgba(232, 150, 156, 0.25);
}

/* 上の左右の角に貼った紙テープ（.p-super__tape と同じ柄） */
.p-privacy__tape {
  position: absolute;
  top: 18px;
  z-index: 2;
  width: 130px;
  height: 34px;
  background: repeating-linear-gradient(45deg, rgba(214, 164, 76, 0.85) 0 10px, rgba(232, 199, 138, 0.85) 10px 20px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

.p-privacy__tape--l {
  left: -30px;
  transform: rotate(-38deg);
}

.p-privacy__tape--r {
  right: -30px;
  transform: rotate(38deg);
  background: repeating-linear-gradient(45deg, rgba(200, 39, 46, 0.75) 0 10px, rgba(232, 120, 125, 0.75) 10px 20px);
}

.p-privacy__lead {
  line-height: 2;
}

.p-privacy__list {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 34px;
  list-style: none;
  counter-reset: privacy;
}

.p-privacy__list > li {
  position: relative;
  padding-left: 58px;
  counter-increment: privacy;
}

.p-privacy__list > li::before {
  content: counter(privacy);
  position: absolute;
  left: 0;
  top: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-main);
  color: #fff;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 900;
  box-shadow: 0 0 0 4px var(--color-sun-light);
}

.p-privacy__list h3 {
  margin-bottom: 6px;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--color-main);
}

.p-privacy__list p {
  line-height: 1.9;
}

.p-privacy__list ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding: 14px 20px;
  border-radius: 18px;
  background: rgb(235 187 187 / 25%);
  list-style: none;
}

.p-privacy__list ul li {
  position: relative;
  padding-left: 18px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.8;
}

.p-privacy__list ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-sun);
}

/* 背景・黄色の丸は上の .p-privacy__list ul / li をそのまま使う */
.p-privacy__contact a {
  color: var(--color-main);
  font-weight: 700;
}

.p-privacy__date {
  margin-top: 30px;
  text-align: right;
  font-size: 0.85rem !important;
  color: #8c5a5a;
}

/* ==========================================================================
   p-thanks（送信完了）
   ========================================================================== */
.p-thanks {
  padding: 80px 0;
}

.p-thanks__card {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 60px 50px 50px;
  border: 2px dashed var(--color-main);
  border-radius: 50px;
  background: #fff;
  text-align: center;
}

.p-thanks__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  margin: -115px auto 20px;
  border-radius: 50%;
  background: var(--color-sun);
  color: var(--color-main);
  font-size: 3rem;
  box-shadow:
    0 0 0 8px #fff,
    0 0 0 18px rgba(255, 207, 63, 0.3);
  animation: p-thanks-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes p-thanks-pop {
  from {
    transform: scale(0) rotate(-90deg);
  }
  to {
    transform: scale(1) rotate(0);
  }
}

.p-thanks__ttl {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 900;
  color: var(--color-main);
  line-height: 1.5;
}

.p-thanks__text {
  margin-top: 20px;
  font-family: var(--font-round);
  font-weight: 700;
  line-height: 2;
}

.p-thanks__note {
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: 20px;
  background: var(--color-cream);
  font-size: 0.88rem !important;
  line-height: 1.9;
}

.p-thanks__note a {
  color: var(--color-main);
  font-weight: 700;
}

/* 注文の完了ページ（thanks-order.php）：「まだ注文は確定していない」ことを目立たせる */
.p-thanks__alert {
  margin-top: 24px;
  padding: 20px 24px;
  border: 2px solid var(--color-main);
  border-radius: 20px;
  background: #fff5f5;
  line-height: 1.9;
}

.p-thanks__alert-ttl {
  font-family: var(--font-round);
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--color-main);
}

.p-thanks__alert-ttl i {
  margin-right: 6px;
}

.p-thanks__alert-ttl strong {
  background: linear-gradient(transparent 60%, var(--color-sun-light) 60%);
}

.p-thanks__alert-text {
  margin-top: 6px;
  font-weight: 700;
}

.p-thanks__alert-text strong {
  color: var(--color-main);
}

.p-thanks__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 30px;
}

.p-thanks__actions .c-btn {
  margin: 0;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
/* 1256px未満：カード幅が狭くなるので、電話番号は「TEL.」の下に番号を置き、注意書きは左揃えにする */
@media screen and (max-width: 1255px) {
  .p-methods__note {
    text-align: left;
  }

  .p-methods__note br {
    display: none;
  }

  .p-methods__link--tel {
    align-items: center;
    flex-direction: column;
    gap: 0;
    text-align: center;
  }
}

@media screen and (max-width: 1000px) {
  .p-methods__list {
    grid-template-columns: 1fr;
    gap: 44px;
    max-width: 520px;
    margin: 0 auto;
  }

  .p-methods__card--mail,
  .js-inview.is-inview .p-methods__card--mail.c-pop {
    transform: rotate(1deg);
  }

  /* 完了ページのアイコン（タブレット）：画面幅に合わせて84〜96px。
     カード上端の線にアイコンの中心が来るよう、上余白（60px）＋半径ぶん上へずらす。
     600px以下は下の @media でさらに小さくする */
  .p-thanks__icon {
    --icon-size: clamp(84px, 10vw, 96px);
    width: var(--icon-size);
    height: var(--icon-size);
    margin: calc(-60px - var(--icon-size) / 2) auto 18px;
    font-size: calc(var(--icon-size) * 0.42);
    box-shadow:
      0 0 0 7px #fff,
      0 0 0 15px rgba(255, 207, 63, 0.3);
  }
}

/* 760px以下：完了ページの説明文は行数が増えるので左揃えにして読みやすくする */
@media screen and (max-width: 760px) {
  .p-thanks__text,
  .p-thanks__alert-text,
  .p-thanks__note {
    text-align: left;
  }

  .p-thanks__text br {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  .p-methods__card {
    padding: 46px 20px 30px;
    border-radius: 34px;
  }

  .p-privacy__box {
    padding: 50px 22px 34px;
    border-radius: 36px;
    outline-offset: -10px;
    box-shadow:
      0 0 0 6px #fff7f7,
      0 8px 28px rgba(232, 150, 156, 0.25);
  }

  .p-privacy__tape {
    top: 12px;
    width: 90px;
    height: 26px;
  }

  .p-privacy__tape--l {
    left: -22px;
  }

  .p-privacy__tape--r {
    right: -22px;
  }

  /* 番号の右には見出しだけ置き、本文・リストは番号の左端にそろえて幅を広く使う */
  .p-privacy__list > li {
    padding-left: 0;
  }

  .p-privacy__list h3 {
    display: flex;
    align-items: center;
    min-height: 30px;
    margin-bottom: 10px;
    padding-left: 46px;
  }

  .p-privacy__list > li::before {
    width: 34px;
    height: 34px;
  }

  .p-thanks__card {
    padding: 50px 22px 36px;
    border-radius: 34px;
  }

  /* アイコンは画面幅に合わせて縮める（390px幅で約74px、最小60px〜最大84px）。
     カード上端の線にアイコンの中心が来るよう、上余白（50px）＋半径ぶん上へずらす */
  .p-thanks__icon {
    --icon-size: clamp(60px, 19vw, 84px);
    width: var(--icon-size);
    height: var(--icon-size);
    margin: calc(-50px - var(--icon-size) / 2) auto 16px;
    font-size: calc(var(--icon-size) * 0.42);
    box-shadow:
      0 0 0 6px #fff,
      0 0 0 13px rgba(255, 207, 63, 0.3);
  }

  .p-thanks__alert {
    padding: 16px 15px;
  }

  .p-thanks__actions {
    flex-direction: column;
  }

  .p-thanks__actions .c-btn {
    justify-content: center;
  }
}

/* お問い合わせ種別（fieldset直下の行）は上の余白をなくし、下で間隔をとる */
.p-mailform .c-form__step > .c-form__row {
  margin-top: 0;
  margin-bottom: 22px;
}