/* TSUWAMONO LP — style.css */

/* ---- リセット ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: calc(100vw / 1920 * 10); }

img { max-width: 100%; height: auto; vertical-align: bottom; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- フォント変数・配色 ---- */
:root {
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;

  --color-black: #000;
  --color-white: #fff;
  --color-green: #7ac943;
  --color-green-dark: #086d3d;
  --color-blue: #01294A;
  --color-gray-bg: #e6e6e6;
  --color-ink: #231815;
}

body {
  font-family: var(--font-sans);
  color: var(--color-white);
  background: var(--color-black);
}

.green-serif { color: var(--color-green); font-family: var(--font-serif); }

.sp-only { display: none; }

/* ---- 共通部品 ---- */
.circle-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-white);
  font-weight: 900;
  font-size: 3.4rem;
  width: 20rem; height: 20rem;
  gap: 0.6rem;
}

/* ==== 1. FV / .header + .hero ==== */
.header {
  position: relative;
  height: 0;
  z-index: 6;
}
.header__logo-mark {
  position: absolute;
  top: 4.3rem;
  right: 4.6rem;
  width: 15.25rem;
}

.hero {
  position: relative;
  height: 89rem;
  background: var(--color-black);
}
.hero__logo {
  position: absolute;
  top: 23.6rem;
  left: 50%;
  transform: translateX(-50%) translateX(1rem);
  width: 53rem;
}
.hero__logo-text { display: block; width: 100%; }
.hero__logo-samurai {
  position: absolute;
  left: 31.42%;
  top: 2.07%;
  width: 32.93%;
}
.hero__catch {
  position: absolute;
  top: 65rem;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 4.6rem;
  line-height: 1;
  color: var(--color-white);
  white-space: nowrap;
}
.hero__catch-green {
  color: var(--color-green);
}
.hero__catch-green-gu {
  display: inline-block;
  font-size: 1.68em;
  vertical-align: middle;
  transform: translateY(-1.05rem);
}

@keyframes hero-logo-rise {
  from { opacity: 0; transform: translateY(2rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-gu-pulse {
  0%   { scale: 1;    rotate: 0deg; }
  18%  { scale: 2;    rotate: 0deg; }
  50%  { scale: 0.9;  rotate: -5deg; }
  70%  { scale: 1.07; rotate: 3deg; }
  100% { scale: 1;    rotate: 0deg; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__logo.js-hero-anim .hero__logo-text,
  .hero__logo.js-hero-anim .hero__logo-samurai {
    opacity: 0;
    transform: translateY(2rem);
  }
  .hero__logo.js-hero-anim.is-inview .hero__logo-text {
    animation: hero-logo-rise 0.8s ease-out forwards;
  }
  .hero__logo.js-hero-anim.is-inview .hero__logo-samurai {
    animation: hero-logo-rise 0.8s ease-out 0.2s forwards;
  }
  .hero__catch-green-gu.is-pulse {
    transform-origin: 50% 70%;
    animation: hero-gu-pulse 0.9s ease-out 1.1s both;
  }
}

/* ==== 汎用: セクション出現アニメーション（.js-fade-up） ==== */
@media (prefers-reduced-motion: no-preference) {
  html.js .js-fade-up {
    opacity: 0;
    transform: translateY(3rem);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }
  html.js .js-fade-up.is-inview {
    opacity: 1;
    transform: translateY(0);
  }
  html.js .js-fade-up--delay1 { transition-delay: 0.15s; }
  html.js .js-fade-up--delay2 { transition-delay: 0.3s; }
  html.js .js-fade-up--delay3 { transition-delay: 0.45s; }
}

/* ==== 2. 課題提起 / .problem ==== */
.problem {
  position: relative;
  height: 40rem;
  background: var(--color-black);
}
.problem__lead {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-weight: 700;
  font-size: 5rem;
  line-height: 1;
  color: var(--color-white);
}
.problem__lead:nth-of-type(1) { top: 15rem; }
.problem__lead:nth-of-type(2) { top: 26rem; }

/* ==== 3. キービジュアル / .keyvisual ==== */
.keyvisual {
  position: relative;
  height: 37.5rem;
  background: var(--color-black);
}
.keyvisual__title {
  position: absolute;
  top: 0.7rem;
  left: 0;
  right: 0;
  text-align: center;
}
.keyvisual__title-img { width: 114.8rem; vertical-align: top; }
.keyvisual__lead {
  position: absolute;
  top: 21.4rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 3.2rem;
  line-height: 1.55;
  color: var(--color-white);
}

/* ==== 4. コンセプト / .concept ==== */
.concept {
  position: relative;
  height: 214rem;
  background: var(--color-black);
  color: var(--color-white);
}
.concept__title {
  position: absolute;
  top: 2.7rem;
  left: 0;
  right: 0;
  text-align: center;
  font-weight: 700;
  line-height: 1.15;
}
.concept__title::before {
  content: "";
  position: absolute;
  top: 6.95rem;
  left: 70.2rem;
  width: 7.05rem;
  height: 2.7rem;
  border-top: 0.21rem solid var(--color-white);
  border-bottom: 0.21rem solid var(--color-white);
}
.concept__title-line { display: block; }
.concept__title-line:nth-child(1) { font-size: 5rem; }
.concept__title-line:nth-child(2) { font-size: 6rem; }
.concept__big { font-size: 1.9em; vertical-align: -2rem; }

.concept__speech {
  position: absolute;
  writing-mode: vertical-rl;
  line-height: 1.5;
  font-feature-settings: "vhal";
}
.concept__speech--serif { font-family: var(--font-serif); font-weight: 400; }

.concept__samurai-reading {
  position: absolute;
  top: 8.13rem;
  left: 121.94rem;
  width: 24.78rem;
  transform: scaleX(-1);
}
.concept__speech--reading {
  top: 0rem;
  left: 122rem;
  font-size: 2.4rem;
}

.concept__tea-lady {
  position: absolute;
  top: 26.21rem;
  left: 39.51rem;
  width: 14.5rem;
}
.concept__speech--tea {
  top: 25rem;
  left: 55rem;
  font-size: 2.4rem;
}

.concept__samurai-point {
  position: absolute;
  top: 52.663rem;
  left: 70.731rem;
  width: 67.754rem;
}
.concept__point-badge {
  position: absolute;
  top: 69.1rem;
  left: 107.8rem;
  width: 6.2rem;
  z-index: 2;
}
.concept__speech--lead {
  top: 84rem;
  left: 60rem;
  font-size: 4.2rem;
  line-height: 1.65;
}

.concept__body {
  position: absolute;
  top: 143rem;
  left: 0;
  right: 0;
  text-align: center;
  font-weight: 400;
  font-size: 3.2rem;
  line-height: 1.8;
  color: var(--color-white);
}
.concept__statement {
  position: absolute;
  top: 163.85rem;
  left: 0;
  right: 0;
  text-align: center;
  font-weight: 700;
  font-size: 5rem;
  line-height: 2.06;
  color: var(--color-white);
}

/* ==== 5. お品書き見出し / .menu-heading ==== */
.menu-heading {
  position: relative;
  height: 46rem;
  background: var(--color-gray-bg);
  color: var(--color-black);
}
.menu-heading__logo-mark {
  position: absolute;
  top: -10.83rem;
  left: 50%;
  transform: translateX(-50%);
  width: 21.4rem;
  z-index: 3;
}
.menu-heading__logo {
  position: absolute;
  top: 3rem;
  left: 125rem;
  width: 35rem;
  height: 42rem;
}
.menu-heading__logo-good {
  position: absolute;
  top: 3.4rem;
  left: 8.8rem;
  width: 22.58rem;
  z-index: 2;
}
.menu-heading__logo-samurai {
  position: absolute;
  top: 9.28rem;
  left: -0.22rem;
  width: 33rem;
  z-index: 1;
}
.menu-heading__title {
  position: absolute;
  top: 20.7rem;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 4rem;
  line-height: 1.6;
  color: var(--color-ink);
}
.menu-heading__label-text {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 2.6rem;
}
.menu-heading__label-num {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.5rem;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 7rem;
  line-height: 1;
}
.menu-heading__label-num::before,
.menu-heading__label-num::after {
  content: "";
  width: 18rem;
  border-top: 0.15rem solid currentColor;
}

/* ==== 6. お品書き1 Social good Tile / .tile ==== */
.tile {
  position: relative;
  height: 404rem;
  background: var(--color-gray-bg);
  color: var(--color-black);
}
.tile > * {
  position: absolute;
  left: 0;
  right: 0;
}

/* お品書き1ラベル。構造上は.tileの先頭子要素 */
.menu-heading__label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.tile__logo {
  top: 14.3rem;
  left: 74.53rem;
  right: auto;
  margin: 0;
  width: 43.5rem;
}

.tile__upcycle {
  top: 46.8rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 10rem;
  transform: translateX(-7.8rem);
}
.tile__upcycle-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tile__upcycle-caption {
  font-weight: 700;
  font-size: 3rem;
  margin-bottom: 1.2rem;
}
.tile__upcycle-photo { width: 58rem; }
.tile__upcycle-photo--tile { width: 46rem; }
.tile__upcycle-arrow { 
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tile__upcycle-mark {
  width: 17.7rem;
  height: auto;
}
.tile__upcycle-tri {
  margin-top: 5rem;
  width: 0; height: 0;
  border-top: 4.35rem solid transparent;
  border-bottom: 4.35rem solid transparent;
  border-left: 4.6rem solid var(--color-black);
}

.tile__speech {
  top: 102.8rem;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 1.7;
}
.tile__thinking-samurai {
  position: absolute;
  top: 100.8rem;
  left: 132.5rem;
  right: auto;
  width: 23rem;
  height: 23rem;
  overflow: hidden;
  border-radius: 50%;
}
.tile__thinking-samurai img {
  position: absolute;
  width: 49rem;
  max-width: none;
  top: -1rem;
  left: -14.2rem;
}

.tile__card {
  top: 137.2rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 128.7rem;
  background: var(--color-white);
  padding: 1.5rem 5rem;
}
.tile__card-aside {
  position: absolute;
  top: 7.88rem;
  left: -18.85rem;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 1.5rem;
}
.tile__card-aside-text {
  position: absolute;
  top: -3.5rem;
  left: 11rem;
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.5;
}
.tile__card-aside img { width: 14.1rem; }
.tile__process {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8.5rem;
}
.tile__process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 32rem;
}
.tile__process-step:nth-child(1) { width: 33.7rem; }
.tile__process-step:nth-child(2) { width: 35.65rem; }
.tile__process-step:nth-child(3) { width: 35.3rem; }
.tile__process-head {
  font-weight: 700;
  font-size: 2.6rem;
  margin-bottom: 1.8rem;
  color: var(--color-green-dark);
}
.tile__process-num {
  font-weight: 700;
  margin-right: 2rem;
}
.tile__process-step img { width: 100%; }
.tile__process-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 17.28rem;
  right: -8.2rem;
  width: 6.7rem;
  height: 0.65rem;
  background: var(--color-green-dark);
}
.tile__process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 16.36rem;
  right: -8.1rem;
  width: 2.5rem;
  height: 2.5rem;
  border-top: 0.65rem solid var(--color-green-dark);
  border-right: 0.65rem solid var(--color-green-dark);
  transform: rotate(45deg);
}
.tile__card-body {
  text-align: center;
  font-size: 1.9rem;
  line-height: 1.9;
  font-weight: 500;
}

.tile__merits {
  top: 181rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.tile__merit sub { font-size: 0.6em; vertical-align: -0.15em; }
.tile__merits-note {
  top: 207.4rem;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 3.6rem;
}

.tile__scene-lead {
  top: 222.3rem;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 4.4rem;
  line-height: 1.7;
}
.tile__scene-diagram {
  top: 242.3rem;
  height: 52rem;
}
.tile__scene-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tile__scene-item:first-of-type { left: 40.3rem; top: 3.05rem; width: 20.92rem; }
.tile__scene-item:last-of-type  { left: 130.3rem; top: -5.06rem; width: 41.68rem; }
.tile__scene-item:first-of-type .tile__scene-icon { width: 20.92rem; }
.tile__scene-item:last-of-type  .tile__scene-icon { width: 41.68rem; }
.tile__scene-icon { margin-bottom: 2rem; }
.tile__scene-caption { font-weight: 900; font-size: 2.4rem; white-space: nowrap; }
.tile__scene-dashed {
  position: absolute;
  top: 14.8rem;
  left: 62rem;
  width: 68rem;
  border-top: 0.25rem dashed var(--color-black);
}
.tile__scene-dashed::after {
  content: "";
  position: absolute;
  right: -0.4rem;
  top: -0.7rem;
  border-left: 1.2rem solid var(--color-black);
  border-top: 0.7rem solid transparent;
  border-bottom: 0.7rem solid transparent;
}
.tile__scene-arrow {
  position: absolute;
  top: 23rem;
  left: 50%;
  transform: translateX(-50%);
  right: auto;
  width: 35.96rem;
}

.tile__benefit {
  top: 289.5rem;
  text-align: center;
  font-weight: 900;
  font-size: 2.6rem;
  line-height: 1.9;
}

.tile__cases {
  top: 312.8rem;
  width: 100%;
  overflow: hidden;
}
.cases-slider .swiper-slide {
  width: 85.9rem;
  position: relative;
}
.tile__case img {
  height: 64.4rem;
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.tile__case-caption {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  pointer-events: none;
  text-align: center;
  color: var(--color-white);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 12.5rem;
  line-height: 1;
  letter-spacing: 0.02em;
}

.tile__balloon {
  top: 377.2rem;
  height: 34rem;
}
.tile__balloon-samurai {
  position: absolute;
  left: 41.09rem;
  top: 3.42rem;
  width: 24.78rem;
  z-index: 1;
}
.tile__balloon-text {
  position: absolute;
  left: 60.4rem;
  top: 7.1rem;
  width: max-content;
  padding: 0 6.85rem;
  text-align: center;
  background: var(--color-white);
  border-radius: 3.25rem;
  line-height: 6.5rem;
  font-weight: 600;
  font-size: 3.5rem;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.2s ease;
  z-index: 2;
}
.tile__balloon-text::after {
  content: "";
  position: absolute;
  left: 3.24rem;
  bottom: -1.89rem;
  width: 2.38rem;
  height: 2.136rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23.8 21.36'%3E%3Cpath d='M10.98,0s1.22,18.92-10.98,21.36c0,0,23.8-2.44,23.8-21.36h-12.81Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
}

/* ==== 7. お品書き2 Social good Promotion / .promotion ==== */
.promotion {
  position: relative;
  height: 292rem;
  background: var(--color-gray-bg);
  color: var(--color-black);
}
.promotion > * { position: absolute; left: 0; right: 0; }

/* お品書き2ラベル。構造上は.promotionの先頭子要素 */
.promotion__label {
  top: 0.5rem;
  text-align: center;
}

.promotion__logo { top: 15rem; left: 74.53rem; right: auto; margin: 0; width: 43.5rem; }

.promotion__services {
  top: 39.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.promotion__writer-samurai {
  top: 54rem;
  left: 74.55rem;
  right: auto;
  transform: scaleX(-1);
  width: 35.54rem;
}
.promotion__speech--vertical {
  writing-mode: vertical-rl;
  top: 65rem;
  left: 103rem;
  right: auto;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 4.6rem;
  line-height: 1.5;
}

.promotion__item { height: 0; top: 14rem; }
.promotion__item-illust { position: absolute; }
.promotion__item-title {
  position: absolute;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 10.8rem;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
}
.promotion__item-title::after {
  content: "";
  position: absolute;
  top: 11.6rem;
  border-top: 0.2rem solid var(--color-black);
}
.promotion__item-sub {
  display: block;
  font-family: "corporate-logo-ver2", var(--font-sans);
  font-weight: 700;
  font-size: 2.2rem;
  letter-spacing: 0.08em;
  margin-top: 2.2rem;
  text-align: center;
}
.promotion__item-body {
  position: absolute;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1.6;
}

.promotion__item--planning .promotion__item-illust { top: 74.64rem; left: 42.12rem; width: 49.73rem; }
.promotion__item--planning .promotion__item-title { top: 100rem; left: 114rem; }
.promotion__item--planning .promotion__item-title::after { left: -24.7rem; width: 70rem; }
.promotion__item--planning .promotion__item-body { top: 120rem; left: 0; width: 123rem; }

.promotion__item--vi .promotion__item-title { top: 150rem; left: 42rem; }
.promotion__item--vi .promotion__item-title::after { left: -6rem; width: 67.3rem; }
.promotion__item--vi .promotion__item-illust { top: 134.7rem; left: 102.51rem; width: 57.56rem; }
.promotion__vi-diagram {
  position: absolute;
  top: 174rem;
  left: 97.9rem;
  display: flex;
  align-items: center;
  gap: 2.6rem;
}
.promotion__vi-diagram .promotion__tag { justify-content: center; font-size: 2.8rem; }
.promotion__vi-diagram .promotion__tag:first-child { width: 29rem; }
.promotion__vi-diagram .promotion__tag:last-child { width: 31rem; }
.promotion__item--vi .promotion__item-body { top: 179rem; left: 87rem; width: 88rem; }

.promotion__item--pr .promotion__item-illust { top: 184.58rem; left: 30.26rem; width: 71.45rem; }
.promotion__item--pr .promotion__item-title { top: 210rem; left: 116rem; }
.promotion__item--pr .promotion__item-title::after { left: -14.3rem; width: 57.2rem; }
.promotion__pr-diagram {
  position: absolute;
  top: 233.6rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
}
.promotion__item--pr .promotion__item-body { top: 245.5rem; left: 0; right: 0; }

.promotion__tag {
  display: inline-flex;
  align-items: center;
  background: var(--color-white);
  font-weight: 500;
}
.promotion__times {
  display: inline-block;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0;
  color: var(--color-black);
  vertical-align: middle;
}
.promotion__times::before,
.promotion__times::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5rem;
  height: 0.3rem;
  background: currentColor;
}
.promotion__times::before { transform: translate(-50%, -50%) rotate(45deg); }
.promotion__times::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.promotion__pr-group {
  width: 65rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.6rem;
}
.promotion__pr-head {
  background: var(--color-black);
  color: var(--color-white);
  font-weight: 400;
  font-size: 2.6rem;
  height: 4.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.promotion__pr-tags {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.6rem;
}
.promotion__pr-tags .promotion__tag { width: 18.6rem; height: 4.2rem; justify-content: center; font-size: 2.1rem; padding: 0 1rem; }
.promotion__plus { color: var(--color-black); align-self: center; font-size: 4rem; }
.promotion__pr-arrow { color: #898989; font-size: 3.2rem; align-self: center; margin: 0 2rem; }

.promotion__closing {
  top: 276rem;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 4rem;
  line-height: 1.5;
}

/* ==== 8. フッター / .footer ==== */
.footer {
  position: relative;
  height: 187.3rem;
  background: var(--color-black);
  color: var(--color-white);
}
.footer > * { position: absolute; }
.footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18.1rem;
  background: var(--color-white);
}
.brand-good { color: var(--color-green); }

.footer__map { 
  top: 11rem;
  left: 24rem;
  width: 74rem;
  background-color: var(--color-white);
}
.footer__map-frame {
  width: 100%;
  height: 45rem;
  border: 0;
  display: block;
}
.footer__map-bar {
  width: 66rem;
  margin: 1.6rem auto;
  background: var(--color-white);
  color: var(--color-black);
  font-size: 1.9rem;
  text-align: center;
  align-self: center;
  padding: 0.6rem 2rem;
  border-radius: 3.4rem;
  border: 1px solid var(--color-blue);
}
.footer__map-bar .bigblue {
  color: var(--color-blue);
  font-size: 2.8rem;
  letter-spacing: 0.3rem;
}
.footer__logo { top: 15.2rem; left: 117.41rem; width: 48.19rem; }
.footer__logo-text { display: block; width: 100%; }
.footer__logo-samurai {
  position: absolute;
  left: 31.42%;
  top: 2.07%;
  width: 32.93%;
}
.footer__address {
  top: 47rem;
  left: 113rem;
  font-weight: 100;
  font-size: 2.5rem;
  line-height: 1.9;
  letter-spacing: 0.08em;
}
.big-letter-spacing {
  letter-spacing: 0.4rem;
}

.footer__office {
  top: 67rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin: 5rem 0;
}
.footer__office__item { width: 45.4rem; }
.footer__office__item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  border-radius: 0.4rem;
}

.footer__message {
  top: 107rem;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 4rem;
  line-height: 1.7;
}
.footer__divider {
  top: 125rem;
  left: 50%;
  transform: translateX(-50%);
  width: 49rem;
  border: none;
  border-top: 0.1rem solid var(--color-white);
}

.footer__contact { top: 129rem; left: 0; right: 0; text-align: center; }
.footer__contact-title { font-weight: 500; font-size: 2.6rem; margin-bottom: 2.2rem; }
.footer__contact-line {
  font-weight: 500;
  font-size: 3.4rem;
  line-height: 1.7;
}

.footer__sns {
  top: 150rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 7.5rem;
}
.footer__sns svg { width: 5.5rem; height: 5.5rem; color: var(--color-white); display: block; }

.footer__logo-link {
  position: absolute;
  top: 160.6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 21.43rem;
  z-index: 1;
}
.footer__logo-mark {
  display: block;
  width: 100%;
}

.footer__copyright {
  top: 182rem;
  left: 0;
  right: 0;
  text-align: center;
  font-weight: 300;
  font-size: 1.8rem;
  color: var(--color-ink);
  z-index: 1;
}

/* ==== SP版レイアウト @media (max-width:768px) ==== */
@media (max-width: 768px) {

  /* ==== SP-0: 基盤 ==== */
  html { font-size: calc(100vw / 375 * 10); }

  .sp-only { display: inline; }
  .pc-only { display: none; }

  /* ==== SP-1: FV / .header+.hero ==== */
  .header__logo-mark { top: 1.7rem; right: 1.3rem; width: 8.3rem; }

  .hero {
    height: auto;
    padding: 21rem 0 23rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero__logo { position: relative; top: auto; left: auto; transform: none; margin: 0; width: 27rem; }
  .hero__catch {
    position: static;
    top: auto; left: auto; right: auto;
    width: auto;
    margin-top: 5rem;
    font-size: 1.75rem;
  }
  .hero__catch-green-gu { transform: translateY(-0.4rem); }
  /* ==== SP-1: 課題提起 / .problem ==== */
  .problem {
    height: auto;
    padding: 4.8rem 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .problem__lead {
    position: static;
    top: auto; left: auto; right: auto;
    font-size: 2.5rem;
    line-height: 1.67;
  }

  /* ==== SP-1: キービジュアル / .keyvisual ==== */
  .keyvisual {
    height: auto;
    padding: 3.55rem 0 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .keyvisual__title {
    position: static;
    top: auto; left: auto; right: auto;
  }
  .keyvisual__title-img--sp { width: 22.4rem; vertical-align: top; }
  .keyvisual__lead {
    position: static;
    top: auto; left: auto; right: auto;
    margin-top: 4.5rem;
    font-size: 1.5rem;
    line-height: 1.75;
  }

  /* ==== SP-1: コンセプト / .concept ==== */
  .concept {
    height: auto;
    padding: 0.6rem 0 5.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .concept__title {
    position: static;
    top: auto; left: auto; right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .concept__title::before {
    position: static;
    top: auto; left: auto;
    width: 2.7rem;
    height: 5rem;
    margin: 0 auto 3rem;
    border-top: none;
    border-bottom: none;
    border-left: 0.26rem solid var(--color-white);
    border-right: 0.26rem solid var(--color-white);
  }
  .concept__title-line:nth-child(1) { font-size: 3.4rem; line-height: 1; }
  .concept__title-line:nth-child(2) { font-size: 3.6rem; line-height: 1; margin-top: 3rem; margin-bottom: 0; }
  .concept__big { font-size: 1.8em; vertical-align: -1rem; }

  .concept__group {
    position: relative;
    align-self: stretch;
    width: 100%;
  }
  .concept__group > img,
  .concept__group > .concept__speech {
    position: absolute;
    top: auto; left: auto; right: auto;
    transform: none;
  }
  .concept__group > .concept__speech { white-space: nowrap; }

  .concept__group--reading { height: 14rem; margin-top: 3rem; }
  .concept__group--reading .concept__samurai-reading {
    top: 4.3rem;
    left: 23rem;
    width: 10rem;
    transform: scaleX(-1);
  }
  .concept__group--reading .concept__speech--reading {
    top: 0.4rem;
    left: 17rem;
    font-size: 1.5rem;
    line-height: 2;
  }

  .concept__group--tea { height: 13rem; margin-top: 2.3rem; }
  .concept__group--tea .concept__tea-lady {
    top: 0.5rem;
    left: 6.6rem;
    width: 6rem;
  }
  .concept__group--tea .concept__speech--tea {
    top: 0rem;
    left: 16.5rem;
    font-size: 1.4rem;
    line-height: 1.5;
  }

  .concept__group--point { height: 50rem; margin-top: -3.3rem; }
  .concept__group--point .concept__samurai-point {
    top: 4.4rem;
    /* left: 50%; */
    transform: translateX(-50%);
    width: 35.95rem;
  }
  .concept__group--point .concept__point-badge {
    top: 15.3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 5.6rem;
    z-index: 2;
  }
  .concept__group--point .concept__speech--lead {
    top: 22rem;
    left: 9.4rem;
    right: auto;
    font-size: 3.4rem;
    line-height: 1.8;
    z-index: 2;
  }

  .concept__body {
    position: static;
    top: auto; left: auto; right: auto;
    margin-top: 4rem;
    font-size: 1.5rem;
    line-height: 1.75;
  }
  .concept__statement {
    position: static;
    top: auto; left: auto; right: auto;
    margin-top: 4rem;
    font-size: 2.6rem;
    line-height: 1.59;
  }

  /* ==== ▼SP-2: お品書き見出し / .menu-heading ==== */
  .menu-heading { height: 13.6rem; }
  .menu-heading__logo-mark { top: -3.8rem; width: 7.5rem; }
  .menu-heading__logo {
    top: 1.2rem; left: auto; right: 1.3rem;
    transform: scale(0.29);
    transform-origin: top right;
  }
  .menu-heading__title { top: 4.8rem; left: 0; right: 0; font-size: 1.45rem; line-height: 1.7; }
  .menu-heading__label-text { font-size: 1.35rem; }
  .menu-heading__label-num { font-size: 2.6rem; gap: 2.4rem; }
  .menu-heading__label-num::before,
  .menu-heading__label-num::after { width: 8.5rem; }

  /* ==== ▼SP-2: お品書き1 Tile / .tile ==== */
  .tile {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.2rem 0 0.6rem;
    margin-top: -1px;
  }
  .tile > * {
    position: relative;
    top: auto; left: auto; right: auto;
    margin-left: 0; margin-right: 0;
  }
  /* お品書き1ラベル。.tileの先頭子要素として通常のフロー配置 */
  .menu-heading__label { margin-bottom: 2.4rem; }

  .tile__logo { width: 19rem; margin: 0; }

  .tile__upcycle {
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
    margin-top: 1.2rem;
    transform: none;
  }
  .tile__upcycle-caption { font-size: 2rem; margin-bottom: 1.2rem; }
  .tile__upcycle-photo { width: 26rem; }
  .tile__upcycle-photo--tile { width: 26rem; }
  .tile__upcycle-item:last-child { transform: none; }
  .tile__upcycle-arrow {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    height: 8rem;
    display: block;
  }
  .tile__upcycle-mark {
    position: absolute;
    top: 50%; left: 50%;
    transform: translateY(-50%);
    margin: 0 0 0 4.7rem;
    width: 8.85rem;
    height: auto;
  }
  .tile__upcycle-tri {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: 0; height: 0;
    border-top: 2.15rem solid var(--color-black);
    border-bottom: 0;
    border-left: 2.08rem solid transparent;
    border-right: 2.08rem solid transparent;
  }

  .tile__thinking-samurai {
    position: relative;
    top: -4.3rem; left: auto; right: auto;
    align-self: flex-end;
    margin-right: 2rem;
    margin-bottom: -5rem;
    width: 9rem; height: 9rem;
    z-index: 1;
  }
  .tile__thinking-samurai img { width: 19rem; top: -0.6rem; left: -5.6rem; }
  .tile__speech {
    margin-top: -2.6rem;
    font-size: 2.3rem;
    line-height: 1.65;
  }

  .tile__card {
    position: relative;
    top: auto; left: auto; right: auto;
    width: 32.5rem;
    background: transparent;
    padding: 1.8rem 0 0;
    margin: 2rem 0 0;
    z-index: 0;
  }
  .tile__card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 68rem;
    background: var(--color-white);
    z-index: -1;
  }
  .tile__card-aside {
    position: absolute;
    top: 1.8rem; left: 1.5rem;
    display: block;
    z-index: 1;
  }
  .tile__card-aside-text {
    position: static;
    top: auto; left: auto;
    writing-mode: vertical-rl;
    font-size: 1.6rem;
    line-height: 1.6;
  }
  .tile__card-aside img { width: 10.2rem; display: block; margin: 1.2rem 0 0 -1.7rem; }
  .tile__process {
    flex-direction: column;
    align-items: center;
    gap: 3.8rem;
    margin: 0;
  }
  .tile__process-step,
  .tile__process-step:nth-child(1),
  .tile__process-step:nth-child(2),
  .tile__process-step:nth-child(3) { width: 18rem; }
  .tile__process-step img { width: 20rem; }
  .tile__process-head { font-size: 1.85rem; margin-bottom: 1.2rem; text-align: center; white-space: nowrap; line-height: 1.2; }
  .tile__process-head .tile__process-num { display: block; margin-right: 0; margin-bottom: 0.5rem;}
  .tile__process-step:not(:last-child)::before {
    top: auto; bottom: -2.6rem; right: auto; left: 50%;
    width: 0.35rem; height: 2.7rem;
    transform: translateX(-50%);
  }
  .tile__process-step:not(:last-child)::after {
    top: auto; bottom: -2.6rem; right: auto; left: 50%;
    width: 1.7rem; height: 1.7rem;
    border-top: 0.35rem solid var(--color-green-dark); border-right: 0.35rem solid var(--color-green-dark);
    transform: translateX(-50%) rotate(135deg);
  }
  .tile__card-body {
    font-size: 1.55rem;
    line-height: 1.6;
    margin-top: 2rem;
  }

  .circle-badge { width: 11.7rem; height: 11.7rem; }
  .tile__merits { gap: 0.6rem; margin-top: 1.6rem; }
  .tile__merit { font-size: 1.9rem; }
  .tile__merits-note { font-size: 2.2rem; margin-top: 1.4rem; }

  .tile__scene-lead { font-size: 2.4rem; line-height: 1.45; margin-top: 1.8rem; }

  .tile__scene-diagram { height: 19rem; width: 100%; margin-top: 1.5rem; }
  .tile__scene-item:first-of-type { left: 2rem; top: 2rem; width: 7rem; flex-direction: column-reverse; z-index: 3; }
  .tile__scene-item:last-of-type  { left: 24rem; top: 4.4rem; width: 13.5rem; z-index: 3; }
  .tile__scene-item:first-of-type .tile__scene-icon { width: 7rem; }
  .tile__scene-item:last-of-type  .tile__scene-icon { width: 12.5rem; }
  .tile__scene-icon { margin-bottom: 1rem; }
  .tile__scene-item:first-of-type .tile__scene-icon { margin-bottom: 0; margin-top: 1rem; }
  .tile__scene-caption { font-size: 1.6rem; }
  .tile__scene-item:first-of-type .tile__scene-caption { transform: translateX(3rem); }
  .tile__scene-item:last-of-type  .tile__scene-caption { transform: translateX(-3rem); }
  .tile__scene-dashed { top: 9rem; left: 9.6rem; width: 17rem; z-index: 2; }
  .tile__scene-arrow { top: 3.8rem; width: 14.5rem; z-index: 1; left: 47%;}

  .tile__benefit { font-size: 2.5rem; line-height: 1.5; margin-top: 2.6rem; }

  .tile__cases { width: 100%; margin-top: 2.4rem; }
  .cases-slider .swiper-slide { width: 24.6rem; }
  .tile__case img { height: 30.9rem; }
  .tile__case-caption { font-size: 3.2rem; }

  .tile__balloon {
    position: relative;
    top: auto; left: auto; right: auto;
    align-self: stretch;
    width: 100%;
    height: 6.1rem;
    margin-top: 2rem;
  }
  .tile__balloon-samurai { left: 1.75rem; top: 0.2rem; width: 6.4rem; z-index: 2; }
  .tile__balloon-text {
    left: 4.9rem; top: 0.1rem;
    width: max-content;
    padding: 0 2rem 0 2rem;
    font-size: 1.35rem;
    line-height: 2.37rem;
    border-radius: 1.19rem;
    z-index: 1;
  }
  .tile__balloon-text::after {
    left: 2.4rem; bottom: -0.55rem;
    width: 0.857rem; height: 0.769rem;
    transform: none;
  }

  /* ==== ▼SP-3: お品書き2 Promotion / .promotion ==== */
  .promotion {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0 2.5rem;
    margin-top: -1px;
  }
  .promotion > * {
    position: relative;
    top: auto; left: auto; right: auto;
    margin: 0;
  }
  /* お品書き2ラベル。.promotionの先頭子要素として通常のフロー配置 */
  .tile__label { margin: 2.4rem 0; }

  .promotion__logo { width: 25rem; margin-top: 0.5rem; }

  .promotion__services { margin-top: 1.4rem; gap: 0.6rem; }
  .promotion__service { font-size: 2rem; }

  .promotion__writer-samurai {
    margin-top: -3.8rem;
    right: 5rem;
    width: 16rem;
  }
  .promotion__speech--vertical {
    margin-top: -13rem;
    margin-left: 9rem;
    margin-bottom: 4rem;
    font-size: 2.3rem;
    line-height: 1.65;

  }

  .promotion__item {
    height: auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1.3rem;
  }
  .promotion .promotion__item-illust,
  .promotion .promotion__item-title,
  .promotion .promotion__item-body,
  .promotion .promotion__vi-diagram,
  .promotion .promotion__pr-diagram {
    position: relative;
    top: auto; left: auto; right: auto;
    margin-left: 0; margin-right: 0;
  }

  .promotion__item-title { width: 100%; font-size: 5.2rem; }
  .promotion__item-sub { font-size: 1.4rem; font-weight: 700; margin-top: 1rem; }
  .promotion__item--planning .promotion__item-title::after,
  .promotion__item--vi .promotion__item-title::after,
  .promotion__item--pr .promotion__item-title::after {
    top: 5.5rem; left: 50%; right: auto;
    transform: translateX(-50%);
    width: 33rem;
  }
  .promotion .promotion__item-body {
    width: 100%;
    font-size: 1.4rem;
    line-height: 1.85;
    margin-top: 1.2rem;
    margin-bottom: 1.6rem;
  }

  .promotion__item--planning .promotion__item-title { order: 1; }
  .promotion__item--planning .promotion__item-illust { order: 2; width: 15.5rem; margin-top: 1.2rem; }
  .promotion__item--planning .promotion__item-body { order: 3; }

  .promotion__item--vi .promotion__item-illust { width: 20rem; margin-top: 1.3rem; }
  .promotion__vi-diagram {
    width: 34rem;
    justify-content: space-between;
    gap: 0;
    margin-top: 1.3rem;
  }
  .promotion__vi-diagram .promotion__tag { font-size: 1.6rem; height: 3.2rem; }
  .promotion__vi-diagram .promotion__tag:first-child { width: 14.5rem; }
  .promotion__vi-diagram .promotion__tag:last-child { width: 15rem; }
  .promotion__vi-diagram .promotion__times::before,
  .promotion__vi-diagram .promotion__times::after { width: 2.8rem; }

  .promotion__item--pr .promotion__item-title { order: 1; }
  .promotion__item--pr .promotion__item-illust { order: 2; width: 31.2rem; margin-top: 1.3rem; }
  .promotion__item--pr .promotion__item-body { order: 4; }
  .promotion__pr-diagram {
    order: 3;
    width: 35rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    margin-top: 1.3rem;
  }
  .promotion__pr-group { width: 100%; gap: 0.4rem; }
  .promotion__pr-head { height: 2.3rem; font-size: 1.7rem; }
  .promotion__pr-tags { height: 2.4rem; }
  .promotion__pr-tags .promotion__tag { width: 12rem; height: 2.3rem; font-size: 1.2rem; padding: 0; }
  .promotion__plus { font-size: 2.2rem; }
  .promotion__pr-arrow { align-self: center; margin: 0.1rem 0; font-size: 2.2rem; transform: rotate(90deg); }

  .promotion__closing { font-size: 2.35rem; line-height: 1.3; margin-top: 1.6rem; }

  /* ==== ▼SP-3: フッター / .footer ==== */
  .footer {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 3.5rem;
  }
  .footer > * {
    position: relative;
    top: auto; left: auto; right: auto;
    margin: 0;
  }
  .footer::before { height: 8rem; }

  .footer__logo { order: 1; width: 20rem; margin-bottom: 1.4rem;}

  .footer__address {
    order: 2;
    margin: 2rem auto;
    font-size: 1.5rem;
    line-height: 1.3;
    letter-spacing: 0;
  }
  .big-letter-spacing {
    letter-spacing: 0.3rem;
  }
  .footer__map {
    order: 3;
    align-self: stretch;
    width: 100%;
  }
  .footer__map-frame { height: 24rem; }
  .footer__map-bar {
    width: 36rem;
    margin: 1.3rem auto;
    font-size: 1.2rem;
    padding: 0.5rem 1rem;
  }
  .footer__map-bar .bigblue { font-size: 1.6rem; letter-spacing: 0; }

  .footer__office {
    order: 4;
    display: flex;
    flex-direction: column;
    align-self: center;
    width: 80%;
    gap: 1rem;
    margin-top: 2rem;
  }
  .footer__office__item { width: 100%; }

  .footer__message {
    order: 5;
    width: 100%;
    margin-top: 1.6rem;
    font-size: 1.55rem;
    line-height: 1.8;
  }
  .footer__divider { order: 6; width: 30rem; margin-top: 1.6rem; transform: none; }
  .footer__contact { order: 7; width: 100%; margin-top: 1.6rem; }
  .footer__contact-title { font-size: 1.55rem; margin-bottom: 1.6rem; }
  .footer__contact-line { font-size: 1.7rem; line-height: 1.6; }
  .footer__sns { order: 8; width: 100%; margin-top: 2.4rem; gap: 4rem; }
  .footer__sns svg { width: 3rem; height: 3rem; }
  .footer__logo-link {
    order: 9;
    transform: none;
    margin-top: 2.4rem;
    width: 9.5rem;
  }
  .footer__copyright {
    order: 10;
    width: 100%;
    margin-top: 0.2rem;
    padding-bottom: 1.2rem;
    font-size: 1.3rem;
  }

}