@charset "UTF-8";

/* ======================================
   MV
   ====================================== */
/* ロゴは写真の左に並ぶだけなので、重ねずに横並びで置く */
.mv {
  display: flex;
  align-items: center;
  max-width: 1440px;
  margin-inline: auto;
  gap: 40px;
}

/* --- MV：スライダー --- */
/* 写真は右寄せ・左上のみ角丸。コピーは画像に焼き込み済み */
.mv__slider {
  position: relative;
  margin-left: auto;
  width: min(74.3%, 1070px);
  aspect-ratio: 1070 / 702;
  border-top-left-radius: 300px;
  overflow: hidden;
}

.mv__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s;
}
.mv__slide.is-active { opacity: 1; }

/* 切替を望まない環境ではフェードさせない */
@media (prefers-reduced-motion: reduce) {
  .mv__slide { transition: none; }
}

/* --- MV：縦組みロゴ --- */
/* デザイン上の位置はページ最上部から y=134。.mv はヘッダー(76px)の下から始まるのでその差分 */
.mv__logo {
  flex-shrink: 0;
  margin: 58px 0 0 113px;
  width: 125px;
  height: auto;
  align-self: flex-start;
}

/* --- MV：レスポンシブ --- */
@media (max-width: 768px) {
  /* SPは写真が全幅の縦長（375×702）。縦組みロゴは出さない（.pc-only）
     角丸はPC(300px)と別値でSPは200px指定なので、ここで上書きする */
  .mv { display: block; }
  .mv__slider { width: 100%; aspect-ratio: 375 / 702; border-top-left-radius: 200px; }
}


/* ======================================
   コンセプト
   ====================================== */
/* PCの上下余白だけは共通の .section より広い（SPは .section と同じに戻す） */
.concept { padding-block: 140px 151px; }

/* テキストは画像群に対して天地中央。高さは画像のずらし量で決まる */
.concept__inner {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 40px;
  /* 左右の空きは同じではなく左が15px広い。space-evenly の分配に効くので
     .inner の 20px に上乗せする（右はそのまま20px） */
  padding-left: 35px;
}

.concept__heading {
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 3.2px;
}
.concept__text {
  margin: 20px 0 0;
  /* デザインの本文幅は461px。上限を置かないと「ご用途に あわせた」の行が
     486pxまで伸び、右の縦短冊との間が143px→119pxに詰まる（AUN#6・#8）。
     行数（4行）は変わらない */
  max-width: 461px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 2px;
}

.concept__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 39px 0 0 6px;
  padding: 0;
}

/* 3枚を高さ違いでずらして並べる。左上と右下だけ角丸（MV・流れと共通のモチーフ） */
.concept__images {
  display: flex;
  align-items: flex-start;
  gap: 31px;
  flex-shrink: 0;
}
/* 3枚とも同じ 120x542。3枚目を最上にして、1枚目・2枚目を下げ高低差を付ける */
.concept__image {
  width: 120px;
  border-top-left-radius: 60px;
  border-bottom-right-radius: 60px;
}
.concept__image:nth-child(1) { margin-top: 50px; }
.concept__image:nth-child(2) { margin-top: 125px; }

/* --- コンセプト：レスポンシブ --- */
@media (max-width: 768px) {
  /* 上下余白は共通の .section（64px）どおり。PCの広い指定を戻す */
  .concept { padding-block: 64px; }

  /* 見出しは全幅、その下に本文（左）と画像（右）、最後にボタンを全幅で積む。
     body を display:contents にして中の要素を直接グリッドへ載せる */
  .concept__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "heading heading"
      "text    images"
      "tags    tags";
    align-items: center;
    gap: 24px;
    /* SPは左右とも .inner の 20px（PCの左寄せ分は戻す） */
    padding-left: 20px;
    /* 画面が広くても中身は 500px までに収め中央寄せ。左右に間延びしないようにする */
    max-width: 500px;
  }
  .concept__body { display: contents; }
  .concept__heading { grid-area: heading; font-size: 22px; letter-spacing: 2px; }
  /* 「ビジネスシーンの贈り」（10文字）で折り返す。行送りは26px（16 × 1.625） */
  .concept__text {
    grid-area: text;
    margin: 0;
    font-size: 16px;
    line-height: 1.625;
    letter-spacing: 0;
  }
  /* 右端は .inner の余白（20px）に揃える */
  .concept__images {
    grid-area: images;
    gap: 3px;
    margin: 0;
  }
  .concept__tags {
    grid-area: tags;
    flex-direction: column;
    /* デザイン 1）ホームSP の実測（ボタン高54px・間隔10px）。AUN#10 */
    gap: 10px;
    margin: 20px 0 0;
  }
  .concept__tags li { width: 100%; }
  .concept__tags .label-tag { width: 100%; }

  /* 縦短冊3枚。回転はさせず、上下の段差だけ付ける。
     PCより縦横比が細く、元画像の比率では収まらないので aspect-ratio で切り抜く。
     PC側が :nth-child で幅・角丸を持つため同じ詳細度で上書き */
  .concept__image:nth-child(1),
  .concept__image:nth-child(2),
  .concept__image:nth-child(3) {
    width: 46px;
    height: auto;
    aspect-ratio: 46 / 178;
    object-fit: cover;
    border-radius: 23px 0;
  }
  .concept__image:nth-child(1) { margin-top: 9px; }
  .concept__image:nth-child(2) { margin-top: 28px; }
  .concept__image:nth-child(3) { margin-top: 0; }
}

/* 中間幅（〜768pxのうち広い方）は、間延びしないよう枠を広げ画像も一段大きくする */
@media (min-width: 560px) and (max-width: 768px) {
  .concept__inner { max-width: 620px; }
  .concept__images { gap: 6px; }
  .concept__image:nth-child(1),
  .concept__image:nth-child(2),
  .concept__image:nth-child(3) {
    width: 90px;
    border-radius: 45px 0;
  }
  .concept__image:nth-child(1) { margin-top: 18px; }
  .concept__image:nth-child(2) { margin-top: 56px; }
  .concept__image:nth-child(3) { margin-top: 0; }
}


/* ======================================
   探し方にあわせて選べます
   ====================================== */
.search {
  background: #F7F5F1 url('../img/bg-texture.jpg') repeat left top / 1440px auto;
}

.search__list {
  list-style: none;
  display: grid;
  /* カード最大340px。余りは両端揃えで列間に配る */
  grid-template-columns: repeat(3, minmax(0, 340px));
  justify-content: space-between;
  gap: 40px;
  margin: 34px 0 0;
  padding: 0;
}
/* 3枚とも上端を揃える。margin の一括 auto は縦にも効いて本文の行数が多いカードだけ
   ずれるため、横方向だけに限る（横中央寄せはSPの1列時に効く） */
.search__item { max-width: 340px; margin-inline: auto; }
/* カード全体が1つのリンク。説明文の行数が違っても「詳細を見る」が下端で揃うようにする */
.search__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 画像の右に縦書きキャッチ */
.search__visual {
  display: flex;
  align-items: center;
  gap: 35px;
}
/* 基本は230px。カードが狭まる帯では縮むが、広い画面で伸びはしない（flex-grow なし） */
/* このカードは df_image_size_name() が df-square（490x490）を返すので、比率を指定しないと
   高さが元画像任せになり正方形で出る。運用者がどんな写真に差し替えても230x210で収まるよう固定する */
.search__image {
  width: 230px;
  aspect-ratio: 230 / 210;
  object-fit: cover;
  min-width: 0;
  align-self: flex-start;
}

/* 縦書き。文字送りは font-size + letter-spacing なので、デザインの行送り19.2pxを ls で再現する */
/* text-orientation: upright で半角数字も正立させる（既定だと横倒しになる） */
.search__catch {
  position: relative;
  writing-mode: vertical-rl;
  text-orientation: upright;
  margin: 0;
  padding-right: 19px;
  line-height: 1.5;
  letter-spacing: 3.2px;
}
/* キャッチの右に付く縦罫線。テキストに対して垂直中央 */
.search__catch::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 3px;
  height: 111px;
  background: url('../img/search-line.svg') no-repeat center / contain;
}

.search__title {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 35px 0 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 1px;
}
.search__text {
  margin: 18px 0 0;
  line-height: 1.6;
}
/* margin-top: auto で下端へ寄せる。最低20pxは空ける */
.search__item .link-arrow {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 20px;
}

/* --- 探し方：レスポンシブ --- */
@media (max-width: 768px) {
  .search__list { grid-template-columns: 1fr; gap: 40px; }
  .search__item { max-width: 440px; }
  /* キャッチは列数（1〜2列）が違っても右端で揃える。画像はキャッチに押されず同じ幅を保つ */
  .search__visual { justify-content: space-between; gap: 18px; }
  /* 画像は画面左端にぴったり付ける（.inner の左余白20pxぶん食い込ませる） */
  .search__image { width: 72vw; margin-left: -20px; }
  /* 写真からタイトルまではデザイン実測27px（PCの35pxより詰まる）。AUN#13・#14 */
  .search__title { margin-top: 27px; }
}





/* ======================================
   制作実績
   ====================================== */

.works__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 270px));
  justify-content: space-between;
  gap: 12px;
  margin: 40px 0 0;
  padding: 0;
}
/* 運用で入る写真の縦横比がまちまちでもカードが揃うよう、比率を固定して切り抜く */
.works__image {
  width: 100%;
  aspect-ratio: 270 / 190;
  object-fit: cover;
}

.works__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
}

.works__title {
  margin: 9px 0 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}
/* カード全体が1つのリンク */
.works__link { display: block; }
.works__item .link-arrow { margin-top: 20px; }

.works__more { margin: 50px 0 0; text-align: center; }

/* --- 制作実績：レスポンシブ --- */
@media (max-width: 768px) {
  .works__list { grid-template-columns: repeat(2, 1fr); justify-content: stretch; gap: 32px 16px; }
  .works__title { font-size: 16px; }
}


/* ======================================
   ご注文から納品までの流れ
   ====================================== */
.flow { padding-top: 0; }

/* 縦書きブロックと画像を横に並べる。画像はコンテンツの右端に接地させる */
.flow__inner {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

/* 見出し・本文とも縦書き。右から左へ流れるので row-reverse で並べる */
.flow__body {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: flex-start;
}

/* 縦書きなので line-height が列と列の間隔（横方向）になる。
   height は縦書きでは「行の長さ」。横書きの親（flex）に置いた縦書きブロックは
   Safari（WebKit）が高さを内容から決めず途中で折り返す（SPで本文が5列になった・2026-10-13）ので、
   max-content で「内容ぶん」を明示する。Chrome では auto と同じ結果 */
.flow__heading {
  writing-mode: vertical-rl;
  height: max-content;
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 6.4px;
}
.flow__text {
  writing-mode: vertical-rl;
  height: max-content;
  margin: 8px 40px 0 0;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 3.6px;
}

/* 縦罫そのものは共通の .link-ruled が描く。ここでは配置だけ持つ */
.flow__link { margin: auto 20px 0 0; }

/* SP用画像に差し替えるための <picture>。箱としては数えず、img を直接レイアウトに乗せる */
.flow__inner > picture { display: contents; }

/* 縦書きテキストの高さに引き伸ばされないよう上端揃え。狭い画面では比率を保って縮む */
.flow__image {
  display: block;
  align-self: flex-start;
  min-width: 0;
  height: auto;
  margin-top: 48px;
  border-top-left-radius: 100px;
  border-bottom-right-radius: 100px;
}

/* --- 流れ：レスポンシブ --- */
@media (max-width: 768px) {
  /* 画像を画面幅いっぱいの絶対配置にし、本文の上端が画像の下端に少し乗る（デザイン指定） */
  .flow { position: relative; padding-top: 0; }
  .flow__inner { flex-direction: column; }
  /* 画像の高さは約91vw。76vwから本文を始めて下端に約15vwぶん重ねる。
     絶対配置の画像より前面に出し（z-index）、縦書きブロックを左端に寄せる */
  .flow__body {
    position: relative;
    z-index: 1;
    justify-content: flex-end; /* row-reverse なので flex-end が左側 */
    padding: 76vw 0 0;
    gap: 0;  /* 列間はデザインの実測値を要素ごとに持つ（下） */
  }
  /* SP の文字はデザイン（542:31029）実測。見出し 24px・字送り29px・列間40px、
     本文 16px・字送り18px・列間26px。本文の上端は見出しと揃える（PCの margin-top 8px を打ち消す）。
     要素間の余白は字面どうしの距離（見出し→本文 51px・本文→リンク 31px・リンク左 40px）から
     line-height の半分（見出し8px・本文5px）を引いた値 */
  .flow__heading {
    font-size: 24px;
    line-height: 1.6667;
    letter-spacing: 5px;
  }
  .flow__text {
    margin: 0 38px 0 0;
    font-size: 16px;
    line-height: 1.625;
    letter-spacing: 2px;
  }
  .flow__link { margin: auto 26px 0 20px; }
  .flow__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin-top: 0;
    aspect-ratio: 375 / 340;
    object-fit: cover;
  }
}