/*＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿制作の裏側ページ共通レイアウト＿＿
  portfolio-story.html / yogurun-cafe-story.html で共通して使う
  「戻るバー・ヒーロー・セクション・カード」などの部品。
  色・フォントなどのトークンは style.css を参照。
                                                                                  */

/*＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ページ全体＿＿*/
.making-of {
  width: 100%;
}

/*＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿戻るバー＿＿*/
.making-of__back-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgb(255 255 255 / 90%);
  backdrop-filter: blur(1.2rem);
  border-bottom: 0.15rem solid rgb(var(--blue-mist) / 22%);
}

.making-of__back-bar-inner {
  padding: 1.2rem max(2.4rem, calc((100% - var(--container)) / 2));
}

/* フッターの「作品一覧へ戻る」と同じピル型で、押せる見た目に揃える */
.making-of__back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: #fff;
  border: 0.1rem solid rgb(var(--blue-mist) / 60%);
  border-radius: 999px;
  padding: 0.8rem 1.8rem;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--blue-royal);
  transition: background 0.2s, color 0.2s, border-color 0.2s;

  @media (width < 768px) {
    font-size: 1.4rem;
  }
  @media (768px <= width) {
    font-size: 1.5rem;
  }
}

.making-of__back-link-arrow {
  font-size: 1.8rem;
  transition: transform 0.3s var(--ease-bounce);
}

@media (hover: hover) {
  .making-of__back-link:hover {
    background: var(--blue-royal);
    border-color: var(--blue-royal);
    color: #fff;
  }

  .making-of__back-link:hover .making-of__back-link-arrow {
    transform: translateX(-0.4rem);
  }
}

/*＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ヒーロー＿＿*/
.making-of-hero {
  position: relative;
  background: var(--blue-light);
  padding: 10rem 2.4rem 13rem;
  text-align: center;
  overflow: hidden;
}

.making-of-hero__eyebrow {
  font-family: var(--font-display);
  letter-spacing: 0.18em;
  color: rgb(30 58 80 / 55%);
  margin-bottom: 0.8rem;

  @media (width < 768px) {
    font-size: 1rem;
  }
  @media (768px <= width) {
    font-size: 1.4rem;
  }
}

.making-of-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.08em;

  @media (width < 768px) {
    font-size: var(--fs-hero);
  }
  @media (768px <= width) {
    font-size: clamp(3rem, 5vw, 4.4rem);
  }
}

.decoration-heart--making-of-hero-left {
  position: absolute;
  top: 18%;
  left: 9%;
  width: 2.2rem;
  aspect-ratio: 24 / 22;
  fill: #fff;
  animation: makingOfFloatHeart 4s ease-in-out infinite;
}

.decoration-heart--making-of-hero-right {
  position: absolute;
  top: 62%;
  right: 11%;
  width: 1.6rem;
  aspect-ratio: 24 / 22;
  fill: #fff;
  animation: makingOfFloatHeart 5s ease-in-out infinite 0.6s;
}

@keyframes makingOfFloatHeart {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1rem);
  }
}

/*＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿本文セクション共通＿＿*/
.making-of-section {
  padding: 14rem max(2.4rem, calc((100% - var(--container)) / 2)) 0;
}

.making-of-section--tight {
  padding-top: 10rem;
}

.making-of-section--last {
  margin-bottom: 14rem;
}

.making-of-section__title {
  font-weight: 700;
  color: var(--blue-royal);
  letter-spacing: 0.05em;
  margin-bottom: 2.8rem;

  @media (width < 768px) {
    font-size: 2.2rem;
  }
  @media (768px <= width) {
    font-size: 2.6rem;
  }
}

.making-of-section__lead {
  font-size: var(--fs-body);
  line-height: 2;
  max-width: 72rem;
  margin-bottom: 4rem;
}

/*＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿サイトスクリーンショット＿＿*/
.making-of-thumbnail {
  position: relative;
  display: block;
  width: 100%;
  max-width: 72rem;
  aspect-ratio: 16 / 10;
  border-radius: 1.6rem;
  overflow: hidden;
  background: var(--base);
  box-shadow: 0 1.2rem 3.2rem rgb(67 117 204 / 15%);

  /* ホバー可能な端末ではテキストリンク行を隠すため、本文との余白をこちらで持つ */
  @media (hover: hover) {
    margin-bottom: 4.8rem;
  }
}

.making-of-thumbnail__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ホバー時：薄い青のオーバーレイ＋中央に「サイトを見る」ピルをふわっと出して
   スクリーンショット自体が押せることを伝える */
.making-of-thumbnail::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(67 117 204 / 18%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.making-of-thumbnail__hover-label {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, calc(-50% + 0.8rem));
  opacity: 0;
  background: rgb(255 255 255 / 95%);
  border-radius: 999px;
  padding: 1rem 2.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  color: var(--blue-royal);
  white-space: nowrap;
  box-shadow: 0 0.4rem 1.6rem rgb(var(--blue-mist) / 30%);
  transition: opacity 0.3s ease, transform 0.4s var(--ease-bounce);
  pointer-events: none;
}

@media (hover: hover) {
  .making-of-thumbnail:hover::after {
    opacity: 1;
  }

  .making-of-thumbnail:hover .making-of-thumbnail__hover-label {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* スクリーンショット下の「実際のサイトを見る」リンク
   画像だけではリンクだと伝わりにくいため、テキストでも明示する。
   行はサムネイルと同じ幅にして、矢印の先が画像の右端に揃うよう右寄せ */
/* テキストリンクはホバーできない端末（スマホ等）専用。
   マウスのある環境では画面幅に関係なくサムネイルのホバー演出が案内役になるため、
   幅ではなく hover 判定で出し分けて文言との重複を避ける */
.making-of-site-link-row {
  display: flex;
  justify-content: flex-end;
  max-width: 72rem;
  margin-bottom: 4.8rem;

  @media (hover: hover) {
    display: none;
  }
}

.making-of-site-link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  /* スクリーンショットとの間隔を padding で確保し、隙間ごとクリックできるようにする */
  padding-top: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--blue-royal);

  @media (width < 768px) {
    font-size: 1.3rem;
  }
  @media (768px <= width) {
    font-size: 1.4rem;
  }
}

.making-of-site-link__arrow {
  transition: transform 0.3s var(--ease-bounce);
}

@media (hover: hover) {
  .making-of-site-link:hover .making-of-site-link__arrow {
    transform: translateX(0.4rem);
  }
}

/*＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ターゲット・課題・目的カード＿＿*/
.making-of-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 2rem;
}

.making-of-info-grid__card {
  background: #fff;
  border: 0.15rem solid rgb(var(--blue-mist) / 25%);
  border-radius: 1.6rem;
  padding: 2.4rem;
}

.making-of-info-grid__label {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--blue-royal);
  letter-spacing: 0.08em;
  margin-bottom: 1rem;

  @media (width < 768px) {
    font-size: 1.4rem;
  }
  @media (768px <= width) {
    font-size: 1.6rem;
  }
}

.making-of-info-grid__text {
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--sub);
}

/*＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿情報設計フロー＿＿
  SPはラベルの文字数がバラバラだと矢印が宙に浮いて見えるため、
  横並びの矢印フローではなく縦並び＋下向き矢印に切り替える。
                                                                                  */
.making-of-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  @media (width < 768px) {
    flex-direction: column;
    align-items: center;
  }
}

.making-of-flow__step {
  display: flex;
  align-items: center;

  @media (width < 768px) {
    flex-direction: column;
  }
}

.making-of-flow__label {
  background: var(--blue-light);
  color: var(--text);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;

  @media (width < 768px) {
    padding: 1rem 2rem;
    font-size: 1.2rem;
  }
  @media (768px <= width) {
    padding: 1.2rem 2.2rem;
    font-size: 1.4rem;
  }
}

.making-of-flow__arrow {
  margin: 0 1.4rem;
  color: var(--sub);
  font-size: 1.8rem;

  @media (width < 768px) {
    margin: 0.8rem 0;
    transform: rotate(90deg);
  }
}

/*＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿配色スウォッチ＿＿*/
.making-of-swatches {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.making-of-swatches__item {
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
}

/*＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿デザインタグ＿＿*/
.making-of-tags {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 4rem;
}

.making-of-tags__item {
  background: var(--blue-light);
  color: var(--text);
  border-radius: 999px;
  padding: 0.8rem 1.8rem;
  font-size: 1.3rem;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.04em;

  @media (width < 768px) {
    padding: 0.6rem 1.2rem;
    font-size: 1.1rem;
  }
}

/*＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿制作期間＿＿*/
.making-of-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 2rem;
  margin-bottom: 4.8rem;
}

.making-of-timeline__card {
  background: #fff;
  border: 0.15rem solid rgb(var(--blue-mist) / 25%);
  border-radius: 1.6rem;
  padding: 2.4rem;
}

.making-of-timeline__duration {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--blue-royal);
  margin-bottom: 0.8rem;

  @media (width < 768px) {
    font-size: 1.8rem;
  }
  @media (768px <= width) {
    font-size: 2.2rem;
  }
}

.making-of-timeline__label {
  font-size: var(--fs-body);
  color: var(--sub);
}

/*＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿使用ツール＿＿*/
.making-of-tools-heading {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--blue-royal);
  letter-spacing: 0.08em;
  margin-bottom: 1.6rem;

  @media (width < 768px) {
    font-size: 1.2rem;
  }
  @media (768px <= width) {
    font-size: 1.4rem;
  }
}

.making-of-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-bottom: 4rem;
}

.making-of-tools__item {
  background: var(--blue-light);
  color: var(--text);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;

  @media (width < 768px) {
    padding: 0.8rem 1.6rem;
    font-size: 1.2rem;
  }
  @media (768px <= width) {
    padding: 1rem 2rem;
    font-size: 1.4rem;
  }
}

/*＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿フッター＿＿*/
.making-of-footer {
  background: var(--blue-light);
  text-align: center;
  padding: 8rem 2.4rem 4.8rem;
}

.making-of-footer__link {
  display: inline-block;
  background: rgb(255 255 255 / 90%);
  border: 0.1rem solid rgb(var(--blue-mist) / 60%);
  border-radius: 30px;
  padding: 1.2rem 3.2rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--blue-royal);
  letter-spacing: 0.06em;
  margin-bottom: 4rem;
  transition: background 0.2s, color 0.2s;

  &:hover {
    background: var(--blue-royal);
    color: #fff;
  }
}

.making-of-footer__brand {
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
  font-size: var(--fs-footer-brand);
  color: var(--sub);
  letter-spacing: 0.12em;
  margin-bottom: 0.4rem;
}

.making-of-footer__copyright {
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
  color: var(--sub);
  letter-spacing: 0.08em;

  @media (width < 768px) {
    font-size: 1rem;
  }
  @media (768px <= width) {
    font-size: 1.2rem;
  }
}