@charset "UTF-8";

/* ==========================================================================
   Concept page（岩倉鉱泉とは）
   Base: style.css（変数・共通パーツ）
   ヒーロー・イントロ: css/lower.css（.c-lower-hero / .c-intro）
   Figma: PC 1440 / SP 402
   ========================================================================== */

.p-concept {
  overflow-x: clip;
}

.p-concept > section {
  position: relative;
  isolation: isolate;
}

/* ==========================================================================
   p-concept-particular（3つのこだわり）
   ========================================================================== */

.p-concept-particular {
  padding-top: 88px;
}

.p-concept-particular__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 52px;
}

.p-concept-particular__block {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* inner の 52px と合わせて、ブロック間は Figma の 64px */
.p-concept-particular__block + .p-concept-particular__block {
  margin-top: 12px;
}

/* 筆円：赤丸の中心を、筆の右上（1時半の先端）に合わせる。基準は 392×390 内の (322, 64.5) */
.p-concept-particular__num {
  --brush-size: 248px;
}

.p-concept-particular__num::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(50% - var(--brush-size) * 0.8214);
  top: calc(50% - var(--brush-size) * 0.1645);
  width: var(--brush-size);
  aspect-ratio: 392 / 390;
  background: url("../img/common-bg-circle-brush.svg") no-repeat center / contain;
  pointer-events: none;
}

.p-concept-particular__heading {
  display: flex;
  align-items: flex-start;
  gap: var(--space-20);
  margin-bottom: 0;
}

.p-concept-particular__block--cuisine .p-concept-particular__heading {
  flex-direction: row-reverse;
}

.p-concept-particular__catch {
  display: flex;
  align-items: flex-start;
  align-self: flex-start;
  gap: var(--space-8);
  height: auto;
  padding-top: 44px;
  margin: 0;
}

.p-concept-particular__catch span {
  flex: none;
  height: auto;
  writing-mode: vertical-rl;
  font-size: var(--fs-heading-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
}

.p-concept-particular__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 56px;
}

.p-concept-particular__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 0.9375rem;
  font-weight: var(--fw-regular);
  line-height: var(--lh-none);
  color: var(--color-white);
  background-color: var(--color-main);
  border-radius: var(--radius-circle);
}

.p-concept-particular__kanji {
  flex: none;
  height: auto;
  margin: 0;
  font-size: 3.5rem;
  font-weight: var(--fw-regular);
  line-height: var(--lh-none);
  color: #282626;
  writing-mode: vertical-rl;
}

.p-concept-particular__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  max-width: 402px;
  padding-inline: var(--container-gutter);
}

.p-concept-particular__photo {
  display: block;
}

.p-concept-particular__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 197 / 234;
  object-fit: cover;
}

.p-concept-particular__photo--b {
  padding-top: 40px;
}

.p-concept-particular__photo--a {
  padding-bottom: 40px;
}

.p-concept-particular__block--cuisine .p-concept-particular__photo--a {
  padding-bottom: 40px;
  padding-top: 0;
}

.p-concept-particular__block--cuisine .p-concept-particular__photo--b {
  padding-top: 40px;
  padding-bottom: 0;
}

.p-concept-particular__block--mineralspring .p-concept-particular__photo--b,
.p-concept-particular__block--space .p-concept-particular__photo--b {
  order: -1;
}

.p-concept-particular__photo--c,
.p-concept-particular__photo--d {
  display: none;
}

.p-concept-particular__text {
  max-width: 322px;
  margin: 32px var(--container-gutter) 0;
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
}

/* SP（〜768）：写真と本文は Figma（402.5幅・本文362）の比率。筆円は左右中央、上フチは縦書き2文字目 */
@media (max-width: 768px) {
  .p-concept-particular__inner {
    width: 96vw;
    max-width: none;
    margin-inline: auto;
  }

  .p-concept-particular__block {
    z-index: 0;
    width: 100%;
  }

  .p-concept-particular__media {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    padding-inline: 0;
  }

  /* 見出しの fade-in（transform）より筆円が写真・キャッチの手前に出るのを防ぐ */
  .p-concept-particular__catch,
  .p-concept-particular__kanji {
    position: relative;
    z-index: 1;
  }

  .p-concept-particular__text {
    width: calc(362 / 402.5 * 100%);
    max-width: none;
    margin: 32px auto 0;
  }

  .p-concept-particular__num {
    position: static;
  }

  .p-concept-particular__num::before {
    /* 上フチを2文字目（泉・事・間）の中央に合わせる。赤丸36 + 間隔4 + 1文字目 + 2文字目の半分 */
    top: calc(40px + 5.25rem);
    left: 50%;
    width: 248px;
    transform: translate(-50%, 0);
  }
}

/* 500〜768：画面幅いっぱいに広げず、左右に余白を残す */
@media (min-width: 500px) and (max-width: 768px) {
  .p-concept-particular__inner {
    width: 88%;
    max-width: 540px;
  }
}

@media (min-width: 769px) {
  .p-concept-particular {
    padding-top: 160px;
  }

  .p-concept-particular__inner {
    gap: 0;
    max-width: 1440px;
    margin-inline: auto;
  }

  .p-concept-particular__block {
    display: grid;
    align-items: start;
    width: min(1440px, 100%);
    padding: 120px clamp(40px, 5.56vw, 80px) 0;
  }

  .p-concept-particular__block + .p-concept-particular__block {
    margin-top: 0;
  }

  /* 写真を親グリッドの子にして、上段・下段に振り分ける */
  .p-concept-particular__media {
    display: contents;
  }

  .p-concept-particular__photo {
    min-width: 0;
  }

  .p-concept-particular__photo--a,
  .p-concept-particular__photo--b,
  .p-concept-particular__block--cuisine .p-concept-particular__photo--a,
  .p-concept-particular__block--cuisine .p-concept-particular__photo--b {
    order: 0;
    padding: 0;
  }

  .p-concept-particular__photo img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: cover;
  }

  .p-concept-particular__heading {
    gap: 36px;
    align-self: start;
  }

  .p-concept-particular__catch {
    gap: 12px;
    padding-top: 68px;
  }

  .p-concept-particular__catch span {
    font-size: 1.375rem;
  }

  .p-concept-particular__name {
    gap: var(--space-8);
    width: 100px;
  }

  .p-concept-particular__num {
    --brush-size: 392px;
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }

  .p-concept-particular__kanji {
    font-size: 6.25rem;
  }

  .p-concept-particular__text {
    max-width: none;
    margin: 60px 0 0;
    line-height: var(--lh-body);
  }

  /* 鉱泉：上段は見出し＋大写真（677×479）、下段は小写真（552×303）＋本文 */
  .p-concept-particular__block--mineralspring {
    grid-template-columns: minmax(0, 552fr) minmax(0, 51fr) minmax(0, 37fr) minmax(0, 560fr) minmax(0, 80fr);
    grid-template-areas:
      "heading heading photoA photoA photoA"
      "photoB . . text .";
  }

  .p-concept-particular__block--mineralspring .p-concept-particular__heading {
    grid-area: heading;
    justify-self: end;
    margin-right: clamp(40px, 7.22vw, 104px);
  }

  .p-concept-particular__block--mineralspring .p-concept-particular__photo--a {
    grid-area: photoA;
  }

  .p-concept-particular__block--mineralspring .p-concept-particular__photo--a img {
    aspect-ratio: 677 / 479;
  }

  .p-concept-particular__block--mineralspring .p-concept-particular__photo--b {
    grid-area: photoB;
  }

  .p-concept-particular__block--mineralspring .p-concept-particular__photo--b img {
    aspect-ratio: 552 / 303;
  }

  .p-concept-particular__block--mineralspring .p-concept-particular__text {
    grid-area: text;
    max-width: 560px;
  }

  /* 食事：左右を反転。大写真は 80px 下げ、下段は本文＋小写真 */
  .p-concept-particular__block--cuisine {
    grid-template-columns: minmax(0, 116fr) minmax(0, 505fr) minmax(0, 84fr) minmax(0, 130fr) minmax(0, 104fr) minmax(0, 181fr);
    grid-template-areas:
      "photoA photoA photoA photoA . heading"
      ". text . photoB photoB photoB";
    padding-inline: clamp(40px, 11.11vw, 160px);
  }

  .p-concept-particular__block--cuisine .p-concept-particular__heading {
    grid-area: heading;
    flex-direction: row;
    justify-self: start;
  }

  .p-concept-particular__block--cuisine .p-concept-particular__photo--a {
    grid-area: photoA;
    padding-top: 80px;
  }

  .p-concept-particular__block--cuisine .p-concept-particular__photo--a img {
    aspect-ratio: 835 / 444;
  }

  .p-concept-particular__block--cuisine .p-concept-particular__photo--b {
    grid-area: photoB;
  }

  .p-concept-particular__block--cuisine .p-concept-particular__photo--b img {
    aspect-ratio: 413 / 259;
  }

  .p-concept-particular__block--cuisine .p-concept-particular__text {
    grid-area: text;
    max-width: 505px;
  }

  /* 空間：上段は見出し＋写真3枚、下段は小写真＋本文（写真の下に空の行を作らない） */
  .p-concept-particular__block--space {
    grid-template-columns: minmax(192px, 200fr) minmax(0, 104fr) minmax(0, 315fr) 16px minmax(0, 315fr) 16px minmax(0, 315fr);
    grid-template-areas:
      "heading . photoA . photoB . photoC"
      "photoD photoD text text text text text";
    row-gap: 60px;
    padding-bottom: 120px;
  }

  .p-concept-particular__block--space .p-concept-particular__heading {
    grid-area: heading;
    justify-self: end;
  }

  .p-concept-particular__photo--c,
  .p-concept-particular__photo--d {
    display: block;
  }

  .p-concept-particular__block--space .p-concept-particular__photo--a,
  .p-concept-particular__block--space .p-concept-particular__photo--b,
  .p-concept-particular__block--space .p-concept-particular__photo--c {
    padding-top: 80px;
  }

  .p-concept-particular__block--space .p-concept-particular__photo--a {
    grid-area: photoA;
  }

  .p-concept-particular__block--space .p-concept-particular__photo--b {
    grid-area: photoB;
  }

  .p-concept-particular__block--space .p-concept-particular__photo--c {
    grid-area: photoC;
  }

  .p-concept-particular__block--space .p-concept-particular__photo--a img,
  .p-concept-particular__block--space .p-concept-particular__photo--b img,
  .p-concept-particular__block--space .p-concept-particular__photo--c img {
    aspect-ratio: 321 / 453;
  }

  .p-concept-particular__block--space .p-concept-particular__photo--d {
    grid-area: photoD;
    width: 100%;
    max-width: 296px;
  }

  .p-concept-particular__block--space .p-concept-particular__photo--d img {
    aspect-ratio: 296 / 200;
  }

  .p-concept-particular__block--space .p-concept-particular__text {
    grid-area: text;
    max-width: 763px;
    margin-top: 0;
    margin-left: clamp(20px, 3.2vw, 46px);
  }
}

/* 1440以上：食事の本文だけ広げ、末尾の「い。」が1字だけ落ちないようにする。
   列の合計比率は変えず、本文と小写真のあいだの空きから 25px 分を本文へ移す。 */
@media (min-width: 1440px) {
  .p-concept-particular__block--cuisine {
    grid-template-columns: minmax(0, 116fr) minmax(0, 530fr) minmax(0, 59fr) minmax(0, 130fr) minmax(0, 104fr) minmax(0, 181fr);
  }

  .p-concept-particular__block--cuisine .p-concept-particular__text {
    max-width: 530px;
  }
}

/* タブレット（769〜1024）：見出しを縮め、写真を下げて重なりと右端の詰まりを避ける */
@media (min-width: 769px) and (max-width: 1024px) {
  .p-concept-particular__heading {
    gap: clamp(16px, 2.5vw, 24px);
  }

  .p-concept-particular__catch {
    gap: 8px;
    padding-top: 36px;
  }

  .p-concept-particular__catch span {
    font-size: clamp(0.9375rem, 1.9vw, 1.125rem);
  }

  .p-concept-particular__name {
    gap: 6px;
    width: clamp(4.25rem, 8.5vw, 5.5rem);
  }

  .p-concept-particular__num {
    --brush-size: calc(392px * 0.7);
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .p-concept-particular__kanji {
    font-size: clamp(4.25rem, 8.5vw, 5.5rem);
  }

  .p-concept-particular__block--mineralspring {
    row-gap: 24px;
  }

  .p-concept-particular__block--mineralspring .p-concept-particular__photo--a {
    padding-top: 36px;
  }

  .p-concept-particular__block--cuisine {
    grid-template-columns: minmax(0, 116fr) minmax(0, 505fr) minmax(0, 64fr) minmax(0, 120fr) minmax(16px, 40px) minmax(160px, 168px);
    padding-left: clamp(36px, 5vw, 48px);
    padding-right: clamp(48px, 6.5vw, 64px);
    row-gap: 28px;
  }

  .p-concept-particular__block--cuisine .p-concept-particular__heading {
    justify-self: end;
  }

  .p-concept-particular__block--cuisine .p-concept-particular__photo--a {
    padding-top: 104px;
  }

  .p-concept-particular__block--space {
    grid-template-columns: minmax(148px, 168px) minmax(20px, 40px) minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr);
    row-gap: 48px;
  }

  .p-concept-particular__block--space .p-concept-particular__photo--a,
  .p-concept-particular__block--space .p-concept-particular__photo--b,
  .p-concept-particular__block--space .p-concept-particular__photo--c {
    padding-top: 96px;
  }
}

/* ==========================================================================
   p-concept-feature（岩倉鉱泉の特徴）
   ========================================================================== */

.p-concept-feature {
  padding-block: 88px;
}

.p-concept-feature__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
}

.p-concept-feature__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  width: 100%;
  max-width: 322px;
  padding-inline: var(--container-gutter);
  list-style: none;
}

@media (min-width: 769px) {
  .p-concept-feature {
    padding-block: 160px;
    background-color: var(--color-bg-beige);
  }

  .p-concept-feature__inner {
    gap: 84px;
  }

  .p-concept-feature__list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 36px;
    max-width: calc(1280px + var(--container-gutter) * 2);
  }
}

/* ==========================================================================
   p-concept-history
   ========================================================================== */

.p-concept-history {
  position: relative;
  z-index: 0;
  padding-block: 100px;
  color: var(--color-white);
  background-color: var(--color-text);
}

.p-concept-history::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(43, 35, 35, 0.8), rgba(43, 35, 35, 0.8)),
    url("../img/sp-concept-history-bg-img.webp");
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  background-attachment: scroll, scroll;
}

.p-concept-history__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 52px;
  width: 100%;
  margin-inline: auto;
  padding-inline: 40px;
}

.p-concept-history__list {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}

.p-concept-history__item {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.p-concept-history__title {
  gap: var(--space-8);
}

.p-concept-history__title .section-title__en {
  font-size: var(--fs-en-sm);
}

.p-concept-history__img {
  display: block;
  width: 100%;
  aspect-ratio: 322 / 194;
  object-fit: cover;
}

.p-concept-history__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.p-concept-history__lead {
  font-size: var(--fs-heading-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.p-concept-history__text {
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
}

@media (min-width: 769px) {
  .p-concept-history {
    padding-block: 160px;
  }

  .p-concept-history::before {
    background-image:
      linear-gradient(rgba(43, 35, 35, 0.8), rgba(43, 35, 35, 0.8)),
      url("../img/pc-concept-history-bg-img.webp");
    background-attachment: fixed, fixed;
    background-position: center, center;
    background-size: cover, cover;
  }

  .p-concept-history__inner {
    gap: clamp(72px, 10vw, 142px);
    width: 100%;
    max-width: calc(1280px + var(--container-gutter) * 2);
    padding-inline: var(--container-gutter);
  }

  .p-concept-history__list {
    gap: 142px;
  }

  .p-concept-history__item {
    display: grid;
    grid-template-columns: minmax(0, 558fr) minmax(0, 474fr);
    grid-template-areas:
      "media title"
      "media body";
    align-items: start;
    column-gap: clamp(40px, 5.83vw, 84px);
    row-gap: var(--space-20);
  }

  .p-concept-history__item--reverse {
    grid-template-columns: minmax(0, 474fr) minmax(0, 558fr);
    grid-template-areas:
      "title media"
      "body media";
  }

  .p-concept-history__title {
    grid-area: title;
  }

  .p-concept-history__title .section-title__en {
    font-size: var(--fs-en-md);
  }

  .p-concept-history__media {
    grid-area: media;
    align-self: center;
  }

  .p-concept-history__img {
    aspect-ratio: 558 / 344;
  }

  .p-concept-history__body {
    grid-area: body;
    gap: var(--space-16);
  }

  .p-concept-history__lead {
    font-size: var(--fs-lead);
  }

  .p-concept-history__text {
    line-height: var(--lh-body);
  }
}

/* iPadなどタッチ端末だけ。iOSは background-attachment: fixed で背景が極端に拡大される。
   PCのパララックス（hoverできる環境）と、768px以下のスマホ表示は変えない */
@media (min-width: 769px) and (hover: none) and (pointer: coarse) {
  .p-concept-history::before {
    background-attachment: scroll, scroll;
    background-position: center, center;
    background-size: cover, cover;
  }
}

/* 500〜768：1カラムのまま、左右をスマホ（40px）よりゆったり取る */
@media (min-width: 500px) and (max-width: 768px) {
  .p-concept-history__inner {
    padding-inline: clamp(56px, 10vw, 80px);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .p-concept-history__list {
    gap: clamp(64px, 8vw, 96px);
  }

  .p-concept-history__item,
  .p-concept-history__item--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(24px, 4vw, 48px);
  }
}