/* ==========================================================================
   # こんなんつくっちゃいました
   ========================================================================== */

.konnan {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #ecf1f5;
  color: #000;
  letter-spacing: 0;
}

/* ページ上部の大理石風テクスチャ */
.konnan::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: 2795px;
  background: url("../images/konnan/bg-texture.png") center top / cover no-repeat;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ==========================================================================
   ## Hero
   ========================================================================== */

.konnan-hero {
  position: relative;
}

.konnan-hero__lines {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1400px, 100%);
  max-width: none;
  height: auto;
  opacity: 0.6;
  transform: translateX(-50%);
  pointer-events: none;
}

.konnan-hero__stage {
  --u: calc(100cqw / 1400);
  position: relative;
  width: min(1400px, 100%);
  aspect-ratio: 1400 / 919;
  margin-inline: auto;
  container-type: inline-size;
}

.konnan-hero__stage * {
  --u: calc(100cqw / 1400);
}

.konnan-hero__title {
  margin: 0;
}

.konnan-hero__art {
  position: absolute;
  left: calc(164 * var(--u));
  top: calc(137 * var(--u));
  width: calc(1084 * var(--u));
  height: auto;
}

.konnan-hero__hand {
  position: absolute;
  height: auto;
}

.konnan-hero__hand--left {
  left: calc(87 * var(--u));
  top: calc(257 * var(--u));
  width: calc(133.5 * var(--u));
}

.konnan-hero__hand--right {
  left: calc(1179 * var(--u));
  top: calc(264 * var(--u));
  width: calc(127.5 * var(--u));
}

.konnan-hero__chara {
  position: absolute;
  top: calc(700 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateX(-50%);
}

.konnan-hero__chara--seimitsu {
  left: calc(246 * var(--u));
}

.konnan-hero__chara--ojichan {
  left: calc(1135 * var(--u));
}

.konnan-hero__chara-label {
  width: calc(180 * var(--u));
  height: auto;
}

.konnan-hero__chara--ojichan .konnan-hero__chara-label {
  width: calc(188 * var(--u));
}

.konnan-hero__chara-name {
  margin-top: calc(9.5 * var(--u));
  padding-inline: calc(7 * var(--u));
  background-color: #fff;
  color: #1b5da8;
  font-size: calc(22 * var(--u));
  font-weight: 700;
  line-height: calc(32 * var(--u));
  white-space: nowrap;
}

.konnan-hero__chara-text {
  margin-top: calc(8 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: calc(23 * var(--u));
  white-space: nowrap;
}

.konnan-hero__chara-text span {
  padding-inline: calc(2 * var(--u));
  background-color: #fff;
}

.konnan-hero__lead {
  position: absolute;
  left: calc(489 * var(--u));
  top: calc(724 * var(--u));
  width: calc(409 * var(--u));
  font-size: calc(18 * var(--u));
  font-weight: 500;
  line-height: calc(34 * var(--u));
  letter-spacing: 0.06em;
  text-align: center;
}

@media (max-width: 768px) {
  .konnan-hero__stage {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 12px;
    aspect-ratio: auto;
    padding: 110px 16px 48px;
  }

  .konnan-hero__title {
    width: 100%;
  }

  .konnan-hero__art {
    position: static;
    width: 100%;
  }

  .konnan-hero__hand {
    display: none;
  }

  .konnan-hero__chara {
    position: static;
    width: calc(50% - 6px);
    transform: none;
  }

  .konnan-hero__chara-label,
  .konnan-hero__chara--ojichan .konnan-hero__chara-label {
    width: 100%;
    max-width: 160px;
  }

  .konnan-hero__chara-name {
    margin-top: 6px;
    padding-inline: 6px;
    font-size: 16px;
    line-height: 26px;
  }

  .konnan-hero__chara-text {
    margin-top: 6px;
    font-size: 12px;
    line-height: 20px;
    white-space: normal;
  }

  .konnan-hero__chara-text span {
    padding-inline: 2px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .konnan-hero__lead {
    position: static;
    width: 100%;
    font-size: 15px;
    line-height: 1.9;
  }
}

/* ==========================================================================
   ## Works
   ========================================================================== */

.konnan-works {
  width: min(1280px, calc(100% - 40px));
  margin-inline: auto;
}

.konnan-work {
  position: relative;
  border: 2px solid #000;
  background-color: #fff;
}

.konnan-work + .konnan-work {
  margin-top: 58px;
}

.konnan-work--06 {
  margin-top: 90px !important;
}

.konnan-work--07 {
  margin-top: 32px !important;
}

.konnan-work__title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 105px;
  margin: 0;
  padding-inline: 16px;
  border-bottom: 2px solid #000;
  background-image:
    radial-gradient(circle at 1.5px 1.5px, rgb(210 214 219 / 25%) 1.5px, transparent 1.6px),
    linear-gradient(90deg, #185baa 0%, #348daa 49%, #6eb83f 100%);
  background-size: 9px 9px, auto;
  color: #fff;
  font-family: "Quantico", "Figtree", sans-serif;
  font-size: clamp(26px, 4.3vw, 60px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-align: center;
}

.konnan-work__body {
  display: grid;
  grid-template-columns: 480fr 480fr;
  column-gap: 50px;
  align-items: start;
  padding: 50px 10.15% 0 10.94%;
}

.konnan-work--reverse .konnan-work__text {
  order: 2;
}

.konnan-work--02 .konnan-work__body {
  min-height: 453px;
}

.konnan-work--03 .konnan-work__body {
  min-height: 613px;
}

.konnan-work--04 .konnan-work__body {
  min-height: 589px;
}

.konnan-work--05 .konnan-work__body {
  min-height: 411px;
}

.konnan-work--06 .konnan-work__body {
  min-height: 464px;
}

.konnan-work--07 .konnan-work__body {
  min-height: 496px;
}

.konnan-work__tag {
  display: inline-block;
  padding: 9px 8px;
  background-color: #1b5da8;
  color: #fff;
  font-size: clamp(22px, 2.3vw, 32px);
  font-weight: 900;
  line-height: 30px;
}

.konnan-work__heading {
  margin-top: 20px;
  color: #1b5da8;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 900;
  line-height: 1.36;
}

.konnan-work--06 .konnan-work__heading,
.konnan-work--07 .konnan-work__heading {
  margin-top: 10px;
}

.konnan-work__desc {
  margin-top: 18px;
  font-size: 15px;
  line-height: 26px;
}

.konnan-work--06 .konnan-work__desc,
.konnan-work--07 .konnan-work__desc {
  margin-top: 30px;
}

.konnan-work--02 .konnan-work__desc {
  color: #333;
}

.konnan-work__btn {
  position: relative;
  display: flex;
  align-items: center;
  width: 242px;
  height: 60px;
  margin-top: 29px;
  padding-left: 30px;
  border: 1px solid #9b9fa2;
  border-radius: 4px;
  background: linear-gradient(90deg, #185baa 0%, #348daa 49%, #6eb83f 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  transition: opacity 0.4s;
}

.konnan-work__btn::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #fff;
  transform: translateY(-50%);
}

.konnan-work__btn:hover {
  opacity: 0.8;
}

/* ---------- 写真まわり ---------- */

.konnan-work__media {
  --u: calc(100cqw / 480);
  position: relative;
  container-type: inline-size;
}

.konnan-work__media * {
  --u: calc(100cqw / 480);
}

.konnan-work--01 .konnan-work__media {
  margin-top: 45px;
}

.konnan-work--03 .konnan-work__media {
  margin-top: -16px;
}

.konnan-work--05 .konnan-work__media {
  margin-top: -20px;
}

.konnan-work--07 .konnan-work__media {
  margin-top: 58px;
}

.konnan-work__photo {
  display: block;
  width: calc(450 * var(--u));
  height: auto;
}

.konnan-work__figure {
  margin: 0 0 0 calc(30 * var(--u));
}

.konnan-work__figure figcaption {
  margin-top: calc(9 * var(--u));
  padding-right: calc(10 * var(--u));
  color: #171313;
  font-size: 14px;
  line-height: 21px;
  text-align: right;
}

.konnan-work--03 .konnan-work__photo--main {
  width: calc(263 * var(--u));
}

.konnan-work__photos {
  display: flex;
  gap: calc(29 * var(--u));
  margin-top: calc(28 * var(--u));
}

.konnan-work__photos .konnan-work__photo {
  width: calc(225.5 * var(--u));
}

.konnan-work--04 .konnan-work__photo--main {
  margin-left: calc(30 * var(--u));
}

.konnan-work--04 .konnan-work__photo--sub {
  width: calc(225 * var(--u));
  margin: calc(14 * var(--u)) 0 0 calc(143 * var(--u));
}

.konnan-work--05 .konnan-work__photo {
  width: calc(478 * var(--u));
}

.konnan-work--06 .konnan-work__photo,
.konnan-work--07 .konnan-work__photo {
  width: 100%;
}

/* キャラクター・吹き出し */
.konnan-deco {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  max-width: none;
  height: auto;
}

.konnan-deco--chara {
  z-index: 2;
}

.konnan-deco--hand {
  z-index: 3;
}

.konnan-deco__shape {
  display: block;
  width: 100%;
  height: auto;
}

.konnan-deco__text {
  position: absolute;
  max-width: none;
  height: auto;
}

/* ---------- 微細加工の補足 ---------- */

.konnan-work__extra {
  padding: 6px 10.15% 57px 10.78%;
}

.konnan-work__extra .konnan-work__desc {
  margin-top: 0;
}

.konnan-work__samples {
  display: grid;
  grid-template-columns: 480fr 480fr;
  column-gap: 50px;
  margin-top: 16px;
}

.konnan-work__sample {
  margin: 0;
}

.konnan-work__sample img {
  display: block;
  width: 86%;
  height: auto;
}

.konnan-work__sample--neji {
  margin-left: 1%;
}

.konnan-work__sample--chou {
  margin-left: 4.5%;
}

.konnan-work__sample--chou img {
  width: 81.7%;
}

.konnan-work__sample figcaption {
  width: 86%;
  margin-top: 8px;
  font-size: 15px;
  line-height: 26px;
  text-align: center;
}

@media (max-width: 768px) {
  .konnan-works {
    width: calc(100% - 32px);
  }

  .konnan-work + .konnan-work,
  .konnan-work--06,
  .konnan-work--07 {
    margin-top: 32px !important;
  }

  .konnan-work__title {
    height: 72px;
  }

  .konnan-work__body {
    grid-template-columns: 1fr;
    min-height: 0 !important;
    padding: 28px 16px 32px;
  }

  .konnan-work--reverse .konnan-work__text {
    order: 0;
  }

  .konnan-work__media,
  .konnan-work--01 .konnan-work__media,
  .konnan-work--03 .konnan-work__media,
  .konnan-work--05 .konnan-work__media,
  .konnan-work--07 .konnan-work__media {
    margin-top: 24px;
  }

  /*
   * 写真・キャラ・吹き出しは PC と同じ配置のまま縮小する。
   * 写真列（幅 480）からはみ出すキャラ・吹き出しも含めた範囲を画面幅に合わせる（値は page-konnan.php で計算）。
   */
  .konnan-work__media {
    padding-left: calc(var(--k-pad, 0) * 100%);
    aspect-ratio: var(--k-ratio, auto);
  }

  .konnan-work__media * {
    --u: calc(100cqw / var(--k-max, 480));
  }

  /* 絶対配置は余白の外側が基準になるため、左の余白分ずらす */
  .konnan-deco {
    left: calc((var(--x) + var(--k-off, 0)) * var(--u));
  }

  .konnan-work__figure figcaption {
    font-size: 12px;
    line-height: 18px;
  }

  .konnan-work__extra {
    padding: 0 16px 32px;
  }

  .konnan-work__extra .konnan-work__desc {
    margin-top: 24px;
  }

  .konnan-work__samples {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }

  .konnan-work__sample--neji,
  .konnan-work__sample--chou {
    margin-left: 0;
  }

  .konnan-work__sample img,
  .konnan-work__sample--chou img,
  .konnan-work__sample figcaption {
    width: 100%;
  }
}

/* ==========================================================================
   ## その他の製品
   ========================================================================== */

.konnan-items {
  width: min(1200px, calc(100% - 40px));
  margin-inline: auto;
  padding-block: 101px 100px;
}

.konnan-items__title {
  width: fit-content;
  margin: 0 auto;
  background: linear-gradient(90deg, #185baa 0%, #348daa 49%, #6eb83f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

.konnan-items__title-small {
  font-size: 33px;
}

.konnan-items__list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 54px 60px;
  margin-top: 40px;
}

/* 同じ行のカードで、説明文・仕様・価格の位置をそろえる */
.konnan-item {
  display: grid;
  grid-column: span 3;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0;
}

.konnan-item:nth-child(n + 5) {
  grid-column: span 2;
}

.konnan-item__image {
  width: 100%;
  height: auto;
  aspect-ratio: 570 / 240;
  border-radius: 8px;
  object-fit: cover;
}

.konnan-item:nth-child(n + 5) .konnan-item__image {
  aspect-ratio: 3 / 2;
}

.konnan-item__name {
  margin-top: 26px;
  color: #333;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0.07em;
}

.konnan-item__name::after {
  content: "";
  display: block;
  height: 3px;
  margin-top: 14.5px;
  background: linear-gradient(#1b5da8, #1b5da8) left / 104px 100% no-repeat, #9b9fa2;
}

.konnan-item__desc {
  margin-top: 18.5px;
  color: #333;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 0.03em;
}

.konnan-item__spec {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  gap: 0 18px;
  margin: 20px 0 0;
  padding: 24px 30px;
  border-radius: 4px;
  background-color: #fff;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.03em;
}

.konnan-item__spec dt {
  color: #1b5da8;
  font-weight: 500;
}

.konnan-item__spec dd {
  margin: 0;
  color: #333;
}

.konnan-item__price {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  color: #333;
}

.konnan-item__price-label {
  font-size: 12px;
  line-height: 1;
}

.konnan-item__price-value {
  font-family: "Figtree", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
}

@media (max-width: 1000px) {
  .konnan-items__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 24px;
  }

  .konnan-item,
  .konnan-item:nth-child(n + 5) {
    grid-column: span 1;
  }

  .konnan-item__image,
  .konnan-item:nth-child(n + 5) .konnan-item__image {
    aspect-ratio: 3 / 2;
  }
}

@media (max-width: 768px) {
  .konnan-items {
    width: calc(100% - 32px);
    padding-block: 64px;
  }

  .konnan-items__title {
    font-size: 26px;
    line-height: 1.5;
  }

  .konnan-items__title-small {
    font-size: 20px;
  }

  .konnan-items__list {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 32px;
  }

  .konnan-item__spec {
    padding: 18px 20px;
  }
}

/* ==========================================================================
   ## Contact
   ========================================================================== */

.konnan-contact {
  position: relative;
  overflow: hidden;
  padding: 65px 20px 79px;
  border-radius: 50px 50px 0 0;
  background: linear-gradient(90deg, #185baa 0%, #348daa 49%, #6eb83f 100%);
  color: #fff;
  text-align: center;
}

.konnan-contact__mark {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  max-width: none;
  height: 100%;
  opacity: 0.3;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.konnan-contact__inner {
  position: relative;
}

.konnan-contact__title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0.04em;
}

.konnan-contact__lead {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.02em;
}

.konnan-contact__boxes {
  display: flex;
  justify-content: center;
  gap: 11px;
  margin-top: 30px;
}

.konnan-contact__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 394px;
  height: 144px;
  padding-top: 27px;
  transition: opacity 0.4s;
}

.konnan-contact__box:hover {
  opacity: 0.8;
}

.konnan-contact__box--tel {
  border: 1px solid #fff;
  border-radius: 4px;
  background-color: rgb(255 255 255 / 8%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
}

.konnan-contact__box--form {
  border-radius: 8px;
  background-color: #fff;
  color: #333;
}

.konnan-contact__box-label {
  font-size: 16px;
  line-height: 32px;
  letter-spacing: 0.02em;
}

.konnan-contact__tel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  font-family: "Figtree", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: 0.02em;
}

.konnan-contact__tel img {
  width: 25px;
  height: auto;
}

.konnan-contact__hours {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.05em;
}

.konnan-contact__form {
  margin-top: 14px;
  color: #1b5da8;
  font-size: 24px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.08em;
}

@media (max-width: 768px) {
  .konnan-contact {
    padding: 48px 16px 56px;
    border-radius: 30px 30px 0 0;
  }

  .konnan-contact__title {
    font-size: 21px;
    line-height: 1.5;
  }

  .konnan-contact__lead {
    font-size: 14px;
    text-align: left;
  }

  .konnan-contact__lead br {
    display: none;
  }

  .konnan-contact__boxes {
    flex-direction: column;
    align-items: center;
  }

  .konnan-contact__box {
    width: 100%;
    max-width: 394px;
    height: 128px;
    padding-top: 20px;
  }

  .konnan-contact__form {
    font-size: 20px;
  }
}

/* ==========================================================================
   ## Motion（js/konnan.js が .is-motion を付けたときだけ動く）
   ========================================================================== */

/* ---------- Hero ---------- */

.konnan.is-motion .konnan-hero__lines {
  animation: konnan-lines 1.1s ease-in-out infinite alternate;
}

.konnan.is-motion .konnan-hero__art,
.konnan.is-motion .konnan-hero__hand,
.konnan.is-motion .konnan-hero__chara,
.konnan.is-motion .konnan-hero__lead {
  opacity: 0;
}

.konnan.is-motion .konnan-hero.is-in .konnan-hero__art {
  animation:
    konnan-boom 0.9s cubic-bezier(0.2, 1.4, 0.4, 1) 0.1s both,
    konnan-breath 3.2s ease-in-out 1.4s infinite;
}

.konnan.is-motion .konnan-hero.is-in .konnan-hero__stage {
  animation: konnan-shake 0.45s linear 0.55s both;
}

.konnan.is-motion .konnan-hero.is-in .konnan-hero__hand--left {
  animation: konnan-scribble 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 0.9s both;
}

.konnan.is-motion .konnan-hero.is-in .konnan-hero__hand--right {
  animation: konnan-scribble 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 1.1s both;
}

.konnan.is-motion .konnan-hero.is-in .konnan-hero__chara--seimitsu {
  animation: konnan-slide-left 0.7s cubic-bezier(0.2, 1.3, 0.4, 1) 1.2s both;
}

.konnan.is-motion .konnan-hero.is-in .konnan-hero__chara--ojichan {
  animation: konnan-slide-right 0.7s cubic-bezier(0.2, 1.3, 0.4, 1) 1.35s both;
}

.konnan.is-motion .konnan-hero.is-in .konnan-hero__lead {
  animation: konnan-rise 0.7s ease-out 1.6s both;
}

/* ---------- 作品カード ---------- */

.konnan.is-motion .konnan-work {
  opacity: 0;
  translate: 0 60px;
  rotate: -1.5deg;
}

.konnan.is-motion .konnan-work--reverse {
  rotate: 1.5deg;
}

.konnan.is-motion .konnan-work.is-in {
  opacity: 1;
  translate: 0 0;
  rotate: 0deg;
  transition:
    opacity 0.5s ease,
    translate 0.8s cubic-bezier(0.2, 1.3, 0.4, 1),
    rotate 0.8s cubic-bezier(0.2, 1.3, 0.4, 1);
}

/* 英字タイトル：1 文字ずつ上から落ちて弾む */
.konnan-title-inner {
  display: block;
}

.konnan-word {
  display: inline-block;
  white-space: nowrap;
}

.konnan-char {
  display: inline-block;
}

.konnan.is-motion .konnan-work .konnan-char {
  opacity: 0;
}

.konnan.is-motion .konnan-work.is-in .konnan-char {
  animation: konnan-drop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) calc(0.25s + var(--i) * 0.035s) both;
}

/* タグ：スタンプを押すように */
.konnan.is-motion .konnan-work__tag {
  opacity: 0;
}

.konnan.is-motion .konnan-work.is-in .konnan-work__tag {
  animation: konnan-stamp 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) 0.55s both;
}

/* 見出し：黄色いマーカーを引く */
.konnan-marker {
  background-image: linear-gradient(transparent 62%, rgb(255 233 77 / 85%) 62%, rgb(255 233 77 / 85%) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.konnan.is-motion .konnan-marker {
  background-size: 0% 100%;
  transition: background-size 0.9s cubic-bezier(0.6, 0, 0.3, 1) 0.9s;
}

.konnan.is-motion .konnan-work.is-in .konnan-marker {
  background-size: 100% 100%;
}

/* 写真：少し傾いて落ちてくる */
.konnan.is-motion .konnan-work__photo,
.konnan.is-motion .konnan-work__figure {
  opacity: 0;
}

.konnan.is-motion .konnan-work.is-in .konnan-work__photo,
.konnan.is-motion .konnan-work.is-in .konnan-work__figure {
  animation: konnan-photo 0.7s cubic-bezier(0.2, 1.3, 0.4, 1) 0.45s both;
}

.konnan.is-motion .konnan-work.is-in .konnan-work__photos .konnan-work__photo:nth-child(1),
.konnan.is-motion .konnan-work.is-in .konnan-work__photo--sub {
  animation-delay: 0.6s;
}

.konnan.is-motion .konnan-work.is-in .konnan-work__photos .konnan-work__photo:nth-child(2) {
  animation-delay: 0.72s;
}

/* 図版の中の写真は図版ごと動かす */
.konnan.is-motion .konnan-work__figure .konnan-work__photo {
  opacity: 1;
  animation: none !important;
}

/* キャラ：下から「ぴょこっ」と飛び出して、そのままゆらゆら */
.konnan.is-motion .konnan-deco {
  opacity: 0;
}

.konnan.is-motion .konnan-work.is-in .konnan-deco--chara {
  transform-origin: 50% 100%;
  animation:
    konnan-jump 0.75s cubic-bezier(0.3, 1.5, 0.5, 1) var(--d, 0.9s) both,
    konnan-bob 2.6s ease-in-out calc(var(--d, 0.9s) + 0.8s) infinite;
}

/* 吹き出し：「ポン」と出て、ときどき揺れる */
.konnan.is-motion .konnan-work.is-in .konnan-deco--bubble,
.konnan.is-motion .konnan-work.is-in .konnan-deco--hand {
  transform-origin: 50% 90%;
  animation:
    konnan-pop 0.55s cubic-bezier(0.3, 1.7, 0.5, 1) var(--d, 1.35s) both,
    konnan-wobble 3.4s ease-in-out calc(var(--d, 1.35s) + 0.6s) infinite;
}

/* ---------- 作品ごとの小ネタ ---------- */

/* 01 微細加工：ルーペで覗くようにピントが合う */
.konnan.is-motion .konnan-work__sample img {
  opacity: 0;
}

.konnan.is-motion .konnan-work__extra.is-in .konnan-work__sample img {
  animation: konnan-focus 1s cubic-bezier(0.2, 1, 0.3, 1) both;
}

.konnan.is-motion .konnan-work__extra.is-in .konnan-work__sample--chou img {
  animation-delay: 0.25s;
}

/* 02 超硬薄物：薄い板が「ペラッ」とめくれる */
.konnan-work--02 .konnan-work__media {
  perspective: 900px;
}

.konnan.is-motion .konnan-work--02.is-in .konnan-work__figure {
  transform-origin: 0 50%;
  animation: konnan-flip 1.1s cubic-bezier(0.3, 1.3, 0.5, 1) 0.45s both;
}

/* 03 Do!Doooon!：写真が上から叩きつけられて、カードごと揺れる */
.konnan.is-motion .konnan-work--03.is-in .konnan-work__photo--main {
  animation: konnan-slam 0.6s cubic-bezier(0.5, 0, 0.75, 0) 0.4s both;
}

.konnan.is-motion .konnan-work--03.is-in {
  animation: konnan-shake 0.5s linear 1s both;
}

/* 04 桜島：火山がゴゴゴ…と震える */
.konnan.is-motion .konnan-work--04.is-in .konnan-work__photo--main {
  animation:
    konnan-photo 0.7s cubic-bezier(0.2, 1.3, 0.4, 1) 0.45s both,
    konnan-rumble 0.9s linear 1.2s both;
}

/* 05 コマ：写真がコマのように回りながら止まる */
.konnan.is-motion .konnan-work--05.is-in .konnan-work__photo {
  animation: konnan-spin 1.6s cubic-bezier(0.15, 0.6, 0.25, 1) 0.4s both;
}

.konnan.is-motion .konnan-work--05.is-in .konnan-char {
  animation-name: konnan-drop-spin;
}

/* 06 スプーン・07 笛：ハートと音符がふわふわ */
.konnan-particles {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: visible;
  pointer-events: none;
}

.konnan-particle {
  position: absolute;
  left: var(--x);
  bottom: 30%;
  color: #e9547b;
  font-size: calc(26px * var(--s));
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  text-shadow: 0 2px 0 #fff;
}

.konnan-work--07 .konnan-particle {
  left: auto;
  right: calc(var(--x) * 0.35);
  bottom: 22%;
  color: #1b5da8;
}

.konnan-particles.is-playing .konnan-particle {
  animation: konnan-float 3.6s ease-out var(--d) infinite;
}

.konnan-work:not(.is-in) .konnan-particles {
  display: none;
}

/* ---------- その他の商品 ---------- */

.konnan.is-motion .konnan-items__title {
  opacity: 0;
}

.konnan.is-motion .konnan-items__title.is-in {
  animation: konnan-boom 0.8s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.konnan-items__list {
  perspective: 1200px;
}

.konnan.is-motion .konnan-item {
  opacity: 0;
}

.konnan.is-motion .konnan-item.is-in {
  transform-origin: 50% 0;
  animation: konnan-card 0.8s cubic-bezier(0.2, 1.2, 0.4, 1) calc(var(--i, 0) * 0.14s) both;
}

.konnan.is-motion .konnan-item__price-value {
  display: inline-block;
}

.konnan.is-motion .konnan-item.is-in .konnan-item__price-value {
  animation: konnan-stamp 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) calc(0.6s + var(--i, 0) * 0.14s) both;
}

.konnan-item__image {
  transition: scale 0.5s cubic-bezier(0.2, 1.4, 0.4, 1), rotate 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@media (hover: hover) {
  .konnan.is-motion .konnan-item:hover .konnan-item__image {
    scale: 1.04;
    rotate: -1deg;
  }
}

/* ---------- お問い合わせ ---------- */

.konnan.is-motion .konnan-contact__mark,
.konnan.is-motion .konnan-contact__title,
.konnan.is-motion .konnan-contact__lead,
.konnan.is-motion .konnan-contact__box {
  opacity: 0;
}

.konnan.is-motion .konnan-contact.is-in .konnan-contact__mark {
  animation: konnan-boom 0.9s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.konnan.is-motion .konnan-contact.is-in .konnan-contact__title {
  animation: konnan-rise 0.6s ease-out 0.3s both;
}

.konnan.is-motion .konnan-contact.is-in .konnan-contact__lead {
  animation: konnan-rise 0.6s ease-out 0.45s both;
}

.konnan.is-motion .konnan-contact.is-in .konnan-contact__box {
  animation: konnan-jump 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) 0.6s both;
}

.konnan.is-motion .konnan-contact.is-in .konnan-contact__box--form {
  animation-delay: 0.75s;
}

/* ---------- スクロールに合わせて歩くセイミツくん ---------- */

.konnan-runner {
  --p: 0;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  height: 6px;
  pointer-events: none;
  opacity: 0;
  translate: 0 100%;
  transition: opacity 0.4s, translate 0.4s;
}

.konnan-runner.is-shown {
  opacity: 1;
  translate: 0 0;
}

body:has(.p-drawer.is-open) .konnan-runner {
  opacity: 0;
}

.konnan-runner__track {
  position: absolute;
  inset: 0;
  background: rgb(27 93 168 / 15%);
}

.konnan-runner__bar {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #185baa 0%, #348daa 49%, #6eb83f 100%);
  transform: scaleX(var(--p));
  transform-origin: 0 50%;
}

.konnan-runner__chara {
  position: absolute;
  bottom: 4px;
  left: calc(var(--p) * (100% - 34px));
  width: 34px;
}

.konnan-runner__chara img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 25%));
}

.konnan-runner.is-walking .konnan-runner__chara img {
  animation: konnan-walk 0.32s ease-in-out infinite;
}

.konnan-runner.is-goal .konnan-runner__chara img {
  animation: konnan-goal 0.9s cubic-bezier(0.3, 1.5, 0.5, 1) infinite;
}

.konnan-runner__goal {
  position: absolute;
  right: 40px;
  bottom: 60px;
  padding: 4px 10px;
  border: 2px solid #000;
  border-radius: 999px;
  background: #ffe94d;
  color: #000;
  font-family: "Quantico", "Figtree", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  scale: 0;
  transform-origin: 100% 100%;
  transition: opacity 0.2s, scale 0.4s cubic-bezier(0.3, 1.7, 0.5, 1);
}

.konnan-runner.is-goal .konnan-runner__goal {
  opacity: 1;
  scale: 1;
}

@media (max-width: 768px) {
  .konnan-runner {
    height: 4px;
  }

  .konnan-runner__chara {
    left: calc(var(--p) * (100% - 26px));
    width: 26px;
  }

  .konnan-runner__goal {
    right: 30px;
    bottom: 46px;
    font-size: 12px;
  }
}

/* ---------- keyframes ---------- */

@keyframes konnan-lines {
  from {
    scale: 1;
    opacity: 0.5;
  }
  to {
    scale: 1.035;
    opacity: 0.7;
  }
}

@keyframes konnan-boom {
  0% {
    opacity: 0;
    scale: 0.3;
    rotate: -8deg;
  }
  55% {
    opacity: 1;
    scale: 1.1;
    rotate: 2deg;
  }
  100% {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }
}

@keyframes konnan-breath {
  0%,
  100% {
    opacity: 1;
    scale: 1;
  }
  50% {
    opacity: 1;
    scale: 1.015;
  }
}

@keyframes konnan-shake {
  0%,
  100% {
    translate: 0 0;
  }
  15% {
    translate: -7px 3px;
  }
  30% {
    translate: 6px -4px;
  }
  45% {
    translate: -5px 2px;
  }
  60% {
    translate: 4px -2px;
  }
  75% {
    translate: -2px 1px;
  }
}

@keyframes konnan-scribble {
  0% {
    opacity: 0;
    scale: 0.4;
    rotate: -20deg;
  }
  100% {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }
}

@keyframes konnan-slide-left {
  0% {
    opacity: 0;
    translate: -80px 0;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes konnan-slide-right {
  0% {
    opacity: 0;
    translate: 80px 0;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes konnan-rise {
  0% {
    opacity: 0;
    translate: 0 24px;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes konnan-drop {
  0% {
    opacity: 0;
    translate: 0 -70px;
    rotate: -25deg;
  }
  100% {
    opacity: 1;
    translate: 0 0;
    rotate: 0deg;
  }
}

@keyframes konnan-drop-spin {
  0% {
    opacity: 0;
    translate: 0 -70px;
    rotate: -540deg;
  }
  100% {
    opacity: 1;
    translate: 0 0;
    rotate: 0deg;
  }
}

@keyframes konnan-stamp {
  0% {
    opacity: 0;
    scale: 2.4;
    rotate: -14deg;
  }
  100% {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }
}

@keyframes konnan-photo {
  0% {
    opacity: 0;
    translate: 0 -40px;
    rotate: 5deg;
    scale: 0.9;
  }
  100% {
    opacity: 1;
    translate: 0 0;
    rotate: 0deg;
    scale: 1;
  }
}

@keyframes konnan-jump {
  0% {
    opacity: 0;
    translate: 0 70px;
    scale: 0.6 0.4;
  }
  60% {
    opacity: 1;
    translate: 0 -14px;
    scale: 0.95 1.08;
  }
  100% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@keyframes konnan-bob {
  0%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
  50% {
    opacity: 1;
    translate: 0 -6px;
  }
}

@keyframes konnan-pop {
  0% {
    opacity: 0;
    scale: 0;
    rotate: -12deg;
  }
  100% {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }
}

@keyframes konnan-wobble {
  0%,
  80%,
  100% {
    opacity: 1;
    rotate: 0deg;
  }
  85% {
    opacity: 1;
    rotate: -4deg;
  }
  90% {
    opacity: 1;
    rotate: 3deg;
  }
  95% {
    opacity: 1;
    rotate: -1.5deg;
  }
}

@keyframes konnan-focus {
  0% {
    opacity: 0;
    scale: 0.4;
    filter: blur(10px);
  }
  60% {
    opacity: 1;
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    scale: 1;
    filter: blur(0);
  }
}

@keyframes konnan-flip {
  0% {
    opacity: 0;
    transform: rotateY(-85deg);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

@keyframes konnan-slam {
  0% {
    opacity: 0;
    translate: 0 -160px;
    scale: 1.25;
  }
  100% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@keyframes konnan-rumble {
  0%,
  100% {
    translate: 0 0;
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    translate: -2px 1px;
  }
  20%,
  40%,
  60%,
  80% {
    translate: 2px -1px;
  }
}

@keyframes konnan-spin {
  0% {
    opacity: 0;
    scale: 0.3;
    rotate: -1080deg;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }
}

@keyframes konnan-float {
  0% {
    opacity: 0;
    translate: 0 0;
    rotate: 0deg;
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    translate: 18px -120px;
    rotate: var(--r);
  }
}

@keyframes konnan-card {
  0% {
    opacity: 0;
    transform: rotateX(-70deg) translateY(30px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes konnan-walk {
  0%,
  100% {
    translate: 0 0;
    rotate: -6deg;
  }
  50% {
    translate: 0 -5px;
    rotate: 6deg;
  }
}

@keyframes konnan-goal {
  0%,
  100% {
    translate: 0 0;
    scale: 1;
  }
  40% {
    translate: 0 -18px;
    scale: 1.05;
  }
}

@media (prefers-reduced-motion: reduce) {
  .konnan-runner {
    display: none;
  }
}