@charset "UTF-8";
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
}

ins {
  background-color: #fff;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #fff;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

/* =======================
 CSS変数へミラー
======================= */
:root {
  --main-bg: #c1c3c3;
  --bright-bg: #ededed;
  --mid-white: #dbdbdb;
  --white-txt: #f9f9f9;
  --main-black: #282e31;
  --night-black: #131c1f;
  --dark-gray: #3e3e3e;
  --bright-gray: #777;
  --main-txt: #282e31;
  --accent-main: #32c2c7; /* grad start */
  --accent-sub-1: #1796bd; /* grad end（将来#008FBAに差し替え可） */
  --accent-link: #21a1c5;
}

/* 代表グラデ用ユーティリティ（直書き防止） */
.u-grad-brand {
  background-image: linear-gradient(135deg, var(--accent-main), var(--accent-sub-1));
}

/* ==================================== */
/*   フォントサイズ スマホ-PC自動切換え   */
/*==================================== */
html {
  scroll-behavior: smooth;
  background-color: #131c1f;
  transform: scale(3);
}

#contact {
  scroll-margin-top: 80px;
}

body {
  max-width: 1400px;
  margin: 0 auto;
  /* 左右中央寄せ */
  background: #c1c3c3;
  color: #282e31;
  font-family: "Murecho", "Noto Sans JP", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.8;
  overflow-x: hidden;
  overflow-y: visible;
  transform: none;
}
@media (max-width: 768px) {
  body {
    font-size: 0.9rem;
  }
}

.container {
  max-width: 1400px;
  margin: 0 0;
  padding: 0 0px;
  font-weight: 500;
}

a {
  color: #1796bd;
  text-decoration: none;
  transition: color 0.2s;
  font-weight: 500;
}
a:hover {
  color: #32c2c7;
}

h1,
h2,
h3 {
  font-weight: 700;
  letter-spacing: 0.02em;
}

main {
  margin-top: 0;
  font-weight: 500;
}

.site-footer {
  text-align: center;
  color: #282e31;
  font-size: 0.9rem;
  padding: 0;
  background-color: #282e31;
}
@media (max-width: 768px) {
  .site-footer {
    font-size: 0.9rem;
  }
}

.logo {
  font-family: "Monomaniac One", "Noto Sans JP";
  letter-spacing: 0.04em;
}

.intro-block {
  margin: 3rem auto;
  width: 100%;
  max-width: 90vw;
  text-align: center;
  font-size: 1rem;
}
@media (max-width: 768px) {
  .intro-block {
    font-size: 1rem;
  }
}
@media (max-width: 767px) {
  .intro-block {
    margin: 1rem auto 3rem auto;
  }
}

.kinsoku {
  line-break: strict;
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: normal;
}

/* 本文にレイヤーを載せる下準備 */
html,
body {
  transform: none !important;
}

body {
  position: relative;
  z-index: 0;
}

/* 質感テクスチャ：本文と一緒にスクロールする */
body::after {
  content: "";
  position: absolute;
  /* ← fixedにしないのがポイント */
  inset: 0;
  /* ページ全体（bodyの高さぶん）に広がる */
  pointer-events: none;
  z-index: 1500;
  /* テキストより前に出したいなら高めに。後ろなら 0〜1 に */
  opacity: 0.01;
  mix-blend-mode: normal;
  /* あなたの画像パス（CSSの場所からの相対パス！） */
  /* 例: style.css が /css/ にあり、画像が /images/ にあるなら… */
  background-image: url("../images/texture-02.svg");
  background-repeat: repeat;
  background-size: 128px 128px;
  background-position: 50% 0;
}

/* モバイルだけ薄めたい時 */
@media (max-width: 767px) {
  body::after {
    opacity: 0.01;
    /* 確認で濃くしたい時は .4 とかに */
    background-size: 180px 180px;
  }
}
/*=================スクロールバー=====================*/
@media (min-width: 768px) {
  /* スクロールバー全体 */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  /* バーの背景 */
  ::-webkit-scrollbar-track {
    background: #282e31;
  }
  /* スクロール部分 */
  ::-webkit-scrollbar-thumb {
    background-color: #c1c3c3;
    /* スクロールバーの色 */
    border-radius: 3px;
  }
  /* スクロールバーを押した時 */
  ::-webkit-scrollbar-thumb:active {
    background-color: #282e31;
  }
}
/* 縦スクロールバー非表示 */
@media (max-width: 767px) {
  ::-webkit-scrollbar {
    display: none;
  }
  /* Firefox用 */
  body {
    scrollbar-width: none;
  }
}
/*=================切り替え表示用=====================*/
.works--sp {
  display: block;
}

.works--pc {
  display: none;
}

@media (min-width: 768px) {
  .works--sp {
    display: none;
  }
  .works--pc {
    display: block;
  }
}
/*============================================
	― PC表示
=============================================*/
.pc-disblock {
  display: block;
}

.pc-disline {
  display: inline;
}

.pc-dislineblock {
  display: inline-block;
}

.pc-none {
  display: none !important;
}

.sp-disblock {
  display: none;
}

.sp-disline {
  display: none;
}

.sp-dislineblock {
  display: none;
}

.sp-disblock--hide {
  display: block;
  /* デフォルトは表示 */
}
@media (max-width: 767px) {
  .sp-disblock--hide {
    display: none !important;
    /* スマホだけ非表示 */
  }
}

/*============================================
      ― スマホ表示切り替え
  =============================================*/
@media (max-width: 767px) {
  .pc-disblock {
    display: none;
  }
  .pc-disline {
    display: none;
  }
  .pc-dislineblock {
    display: none;
  }
  .sp-disblock {
    display: block;
  }
  .sp-disline {
    display: inline;
  }
  .sp-dislineblock {
    display: inline-block;
  }
  .sp-none {
    display: none !important;
  }
}
/* メニュー展開中はルートごと止める */
html.menu-open,
body.menu-open {
  overflow: hidden;
  /* スクロール不可 */
  height: 100%;
  /* ルートを固定高さに */
  overscroll-behavior: none;
  /* バウンス/画面外スクロール抑止 */
}

/* メニュー自体は縦に長くなったら中だけスクロール可能に */
.minimal-nav .mobile-menu {
  display: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.site-header {
  position: sticky;
  top: 0;
  left: 0;
  max-width: 100%;
  opacity: 0.95;
  color: #282e31;
  background: #c1c3c3;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  background-color: #c1c3c3;
}
.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 20px;
  padding-left: 20px;
  max-width: 1400px;
  margin: 0 auto;
}
.site-header .container .logo {
  font-size: 1.3rem;
  font-weight: 1000;
  letter-spacing: 0.01em;
}
@media (max-width: 768px) {
  .site-header .container .logo {
    font-size: 1.3rem;
  }
}
.site-header .container .logo .accent {
  color: #32c2c7;
}
.site-header .container .minimal-nav {
  display: flex;
  align-items: center;
}
.site-header .container .minimal-nav ul {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-header .container .minimal-nav ul a {
  position: relative;
  color: #282e31;
  text-decoration: none;
  font-family: "Monomaniac One", "Noto Sans JP";
  font-size: 1.3rem;
  font-weight: 700;
  padding: 0.2em 0;
  transition: color 0.25s;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 768px) {
  .site-header .container .minimal-nav ul a {
    font-size: 1.3rem;
  }
}
.site-header .container .minimal-nav ul a::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #21a1c5;
  transition: width 0.33s cubic-bezier(0.83, 0, 0.17, 1);
}
.site-header .container .minimal-nav ul a:hover {
  color: #21a1c5;
}
.site-header .container .minimal-nav ul a:hover::after {
  width: 100%;
}
.site-header .container .minimal-nav .hamburger {
  display: none;
}
.site-header .container .minimal-nav .mobile-menu {
  display: none;
}
.site-header .logo {
  margin-left: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.site-header .logo .logo-icon {
  position: absolute;
  left: 15px;
  width: 45px;
  height: auto;
  opacity: 0.5;
  z-index: -1;
}
.site-header .hamburger,
.site-header .hamburger.open {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

@media (min-width: 768px) {
  .site-header {
    padding: 0rem 3rem;
  }
  .logo {
    font-size: 2.5rem !important;
  }
  .mobile-menu {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .site-header .container {
    margin: 0;
    flex-direction: row;
    align-items: center;
    padding: 0 0 0.2rem 0 !important;
    line-height: 0.5;
  }
  .site-header .container .logo {
    margin-left: 3rem;
    font-size: 2rem;
  }
  .site-header .container .logo .logo-icon {
    position: absolute;
    left: 0.5rem;
    width: 30px;
    height: auto;
    opacity: 0.5;
  }
  .site-header .container .minimal-nav {
    justify-content: flex-end;
  }
  .site-header .container .minimal-nav ul {
    display: none;
    z-index: 1;
  }
  .site-header .container .minimal-nav .hamburger {
    -webkit-tap-highlight-color: transparent;
    font-family: "Monomaniac One", "Noto Sans JP";
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 2px solid #c1c3c3;
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
    background: #c1c3c3;
    box-sizing: border-box;
    overflow: visible;
    margin-left: 1rem;
    z-index: 110;
    position: relative;
  }
  .site-header .container .minimal-nav .hamburger span {
    position: absolute;
    left: 50%;
    width: 22px;
    height: 3px;
    background: #282e31;
    margin: 0;
    border-radius: 2px;
    transition: all 0.35s cubic-bezier(0.83, 0, 0.17, 1);
    transform: translateX(-50%);
  }
  .site-header .container .minimal-nav .hamburger span:nth-child(1) {
    top: 12px;
  }
  .site-header .container .minimal-nav .hamburger span:nth-child(2) {
    top: 19px;
  }
  .site-header .container .minimal-nav .hamburger span:nth-child(3) {
    top: 26px;
  }
  .site-header .container .minimal-nav .hamburger.open span:nth-child(1) {
    top: 19px;
    transform: translateX(-50%) rotate(45deg);
  }
  .site-header .container .minimal-nav .hamburger.open span:nth-child(2) {
    opacity: 0;
  }
  .site-header .container .minimal-nav .hamburger.open span:nth-child(3) {
    top: 19px;
    transform: translateX(-50%) rotate(-45deg);
  }
  .site-header .container .minimal-nav .mobile-menu {
    display: flex;
    position: fixed;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "Monomaniac One", "Noto Sans JP";
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: #f9f9f9;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.33s;
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    /* ロゴ背景を透かして表示 */
  }
  .site-header .container .minimal-nav .mobile-menu.open {
    background: #c1c3c3;
    border-color: #c1c3c3;
    opacity: 0.99;
    pointer-events: auto;
    transition-delay: 0.05s;
  }
  .site-header .container .minimal-nav .mobile-menu .logo-icon {
    content: "";
    top: 70%;
    position: absolute;
    margin: 0 auto;
    width: 100px;
    height: auto;
    opacity: 0.6;
    pointer-events: none;
    /* 邪魔しない */
    z-index: 0;
  }
  .site-header .container .minimal-nav .mobile-menu .site-header.menu-open {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .site-header .container .minimal-nav .mobile-menu ul {
    list-style: none;
    padding: 0 0 30% 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    align-items: center;
  }
  .site-header .container .minimal-nav .mobile-menu ul a {
    color: #282e31;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    font-family: "Monomaniac One", "Noto Sans JP";
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.25s, transform 0.4s;
  }
  /* メニュー展開中は背面スクロールを止める */
}
@media (max-width: 767px) and (max-width: 768px) {
  .site-header .container .minimal-nav .mobile-menu ul a {
    font-size: 1.3rem;
  }
}
@media (max-width: 767px) {
  .site-header .container .minimal-nav .mobile-menu.open ul li:nth-child(1) a {
    transition-delay: 0.15s;
    opacity: 1;
    transform: none;
  }
  .site-header .container .minimal-nav .mobile-menu.open ul li:nth-child(2) a {
    transition-delay: 0.25s;
    opacity: 1;
    transform: none;
  }
  .site-header .container .minimal-nav .mobile-menu.open ul li:nth-child(3) a {
    transition-delay: 0.35s;
    opacity: 1;
    transform: none;
  }
  .site-header .container .minimal-nav .mobile-menu.open ul li:nth-child(4) a {
    transition-delay: 0.45s;
    opacity: 1;
    transform: none;
  }
  .site-header .container .minimal-nav .mobile-menu.open ul li:nth-child(5) a {
    transition-delay: 0.45s;
    opacity: 1;
    transform: none;
  }
  .site-header .container .minimal-nav .mobile-menu.open ul li:nth-child(6) a {
    transition-delay: 0.45s;
    opacity: 1;
    transform: none;
  }
  .site-header .container .minimal-nav .mobile-menu.open ul li:nth-child(7) a {
    transition-delay: 0.45s;
    opacity: 1;
    transform: none;
  }
  body.menu-open {
    overflow: hidden;
    touch-action: none;
  }
}
/* 非インタラクティブな装飾は当たり判定を消しておく（保険） */
.section.hero .vertical-line,
.section.hero .vertical-en,
.section-divider svg {
  pointer-events: none;
}

/* UA差をなくすため、リンクとボタンは必ず指カーソルに */
a[href],
button,
[role=button],
.clickable {
  cursor: pointer;
}

/* ===================== */
/* 視覚フラッシュの抑制（モバイルメニュー） */
/* ===================== */
/* アンカーの被り対策（JSで --header-h を設定済み） */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h, 64px);
}

/* タップ時のハイライトを消す（Android系） */
.mobile-menu a {
  -webkit-tap-highlight-color: transparent;
}

/* メニューの背景は“暗く半透明”固定（開閉で色が変わって白っぽく見えないように） */
@media (max-width: 767px) {
  .minimal-nav .mobile-menu {
    background: rgba(40, 46, 49, 0.78);
    /* displayの切替で一瞬白くならないように、visibilityで制御してもOK */
  }
  .minimal-nav .mobile-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s;
  }
  .minimal-nav .mobile-menu.open {
    opacity: 0.999;
    visibility: visible;
    pointer-events: auto;
  }
}
/* ====================================*/
/* セクション背景Div*/
/*==================================== */
.section {
  position: relative;
}
.section .section-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: none;
}
.section .container {
  position: relative;
  z-index: 1;
  max-width: 100%;
  margin-inline: auto;
}

/* ====================================*/
/*==================================== */
.section-background.section-background--hero {
  background: main-bg;
  z-index: -1 !important;
}

.section-background.section-background--works {
  background: #dbdbdb;
  z-index: -1 !important;
}

.section-background.section-background--about {
  background: #282e31 !important;
}

.section-background.section-background--flow {
  background: #c1c3c3 !important;
}

.section-background.section-background--price {
  background: #c1c3c3;
}

.section-background.section-background--tools {
  background: #282e31 !important;
}

.section-background.section-background--totools {
  height: 300px;
  background: linear-gradient(178deg, #c1c3c3 0%, #c1c3c3 50%, #282e31 50%, #282e31 0%);
  display: flex;
  margin-bottom: -1px;
}

.section-background.section-background--fromtools {
  height: 300px;
  background: linear-gradient(178deg, #282e31 0%, #282e31 50%, #c1c3c3 50%, #c1c3c3 0%);
  display: flex;
  margin-top: -1px;
}

.section-background.section-background--contact {
  background: #c1c3c3;
}

.section-background.section-background--footer-play {
  background: #282e31;
}

/* ====================================*/
/*==================================== */
@media (max-width: 767px) {
  .section-background.section-background--works {
    background: linear-gradient(to bottom, #c1c3c3, #282e31);
  }
}
/* ====================================*/
/*==================================== */
.section-background.section.dark-section .container {
  color: #f9f9f9;
}

.section-background.section.dark-section .containers p {
  color: #f9f9f9;
}

/* ====================================*/
/* About（最小リセット：親だけで列幅／子は幅指定しない） */
/* ==================================== */
.section.about {
  font-size: 1rem;
  position: relative;
  color: #f9f9f9;
  padding: 0;
  overflow: hidden;
  /* ===================== */
  /* 列幅は親だけで決定：600px上限、画面が狭ければ自動で縮む */
  /* ===================== */
  /* ブロック間の段落感だけ残す（幅は親に任せる） */
  /* ===== 見出し＋本文（縦積み・左寄せ・改行自動） ===== */
  /* ===== 強み（右端が他と揃うようpaddingで幅を削らない）===== */
  /* ===== Flotidot語源：縦並び・中央配置。テキストは左寄せ ===== */
  /* ===== 自己紹介（横並び→SPで縦）===== */
}
@media (max-width: 768px) {
  .section.about {
    font-size: 1rem;
  }
}
.section.about .container {
  padding: 0 30px 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
}
.section.about .about-content {
  max-width: 580px;
  margin: 50px 0 auto;
  box-sizing: border-box;
}
.section.about .about-lead,
.section.about .about-skills,
.section.about .about-flow-tide-dot,
.section.about .about-intro {
  margin-bottom: 48px;
}
.section.about .about-headline {
  font-size: 1.2rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  margin: 0 0 0.5rem;
  text-align: left;
  /* ← 文字は左寄せ */
  /* 幅は指定しない（親の100%） */
}
@media (max-width: 768px) {
  .section.about .about-headline {
    font-size: 1.2rem;
  }
}
.section.about .about-summary {
  font-size: 1rem;
  line-height: 1.9;
  margin: 0;
  font-weight: 350;
  white-space: normal;
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
  /* 長い英数も自然に折り返す */
  /* 幅は指定しない（親の100%） */
}
@media (max-width: 768px) {
  .section.about .about-summary {
    font-size: 1rem;
  }
}
.section.about .about-strengths {
  list-style: square inside;
  /* インデントはinsideで作る */
  padding: 0;
  margin: 0.5rem 0 0;
}
.section.about .about-strengths li {
  font-weight: 350;
  line-height: 1.8;
  margin-bottom: 0.6rem;
}
.section.about .about-flow-tide-dot {
  display: flex;
  flex-direction: column;
  /* 常に縦並び */
  align-items: center;
  gap: 16px;
}
.section.about .about-flow-tide-dot #about-lottie {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  margin: 0 auto;
}
.section.about .about-flow-tide-dot .flow-tide-dot-text {
  font-weight: 350;
  font-size: 1rem;
  margin: 0;
  /* 幅は親の100% */
  text-align: left;
  line-height: 1.9;
}
@media (max-width: 768px) {
  .section.about .about-flow-tide-dot .flow-tide-dot-text {
    font-size: 1rem;
  }
}
.section.about .about-intro {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  font-weight: 350;
}
.section.about .about-intro .about-avery {
  margin-top: 100px;
  display: flex;
  align-items: center;
  gap: 24px;
  /* 幅は親の100% */
}
.section.about .about-intro .icon-anim-wrap {
  -webkit-tap-highlight-color: transparent;
}
.section.about .about-intro .about-icon,
.section.about .about-intro .about-icon * {
  -webkit-tap-highlight-color: transparent;
}
.section.about .about-intro .about-icon {
  cursor: pointer;
  flex: 0 0 90px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 1px solid #f9f9f9;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.section.about .about-intro .about-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
.section.about .about-intro p {
  font-size: 1rem;
  line-height: 1.8;
  margin-top: 4px;
}
@media (max-width: 768px) {
  .section.about .about-intro p {
    font-size: 1rem;
  }
}

/* ====================================*/
/* モバイル：幅は .about-content の clamp に任せる */
/* 追加の max-width や !important はナシ */
/* ==================================== */
@media (max-width: 767px) {
  .section.about .about-lead,
  .section.about .about-skills,
  .section.about .about-flow-tide-dot,
  .section.about .about-intro {
    margin-bottom: 36px;
  }
  .section.about .about-intro .about-avery {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  .section.about .about-summary,
  .section.about .about-flow-tide-dot .flow-tide-dot-text {
    line-height: 1.85;
  }
  .container {
    padding: 0 10px 200px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
  }
  .flow-tide-dot-text {
    text-align: center !important;
  }
  /* ===================== */
  /* 列幅は親だけで決定：600px上限、画面が狭ければ自動で縮む */
  /* ===================== */
  .about-content {
    max-width: auto;
    width: 85vw;
    min-width: 300px;
  }
}
/* About前スペーサー（そのまま） */
.section.about-spacer {
  padding: 0;
  margin: -100px auto;
  height: 380px;
  background-color: #282e31;
}

@media (max-width: 767px) {
  .section.about-spacer {
    height: 320px;
  }
}
/* ページ全体でタップ時の青いハイライトを無効化 */
* {
  -webkit-tap-highlight-color: transparent;
}

.about-icon,
.icon-anim-wrap,
.about-icon img {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* ====================================
    全体
==================================== */
.section.works {
  position: relative;
  padding: 0;
  z-index: 50;
  /* 必要に応じて最低限の高さを確保 */
}

/* 本文コンテナの基本。両端に余白も作る */
.container,
.section.works .inner {
  max-width: 100px;
  margin-inline: auto;
  padding: 0;
}

/* Swiper本体は親幅に100%で収め、横方向は隠す */
.section.works .swiper,
.section.works .swiper-container {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  /* 重要：スライドのはみ出し隠し */
}

.swiper-container {
  z-index: 3;
}

/* まれに .swiper-wrapper に余計な左右マージンが入るテーマがあるので念のため */
.section.works .swiper-wrapper {
  margin: 0 !important;
}

/* ====================================*/
/*サムネイル画像＋動画*/
/* ==================================== */
.video-thumb {
  margin: 0 auto;
  position: relative;
  width: 100%;
  max-width: 90vw;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.video-thumb img.thumb-img,
.video-thumb video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: opacity 0.4s;
}
.video-thumb img.thumb-img {
  opacity: 1;
  z-index: 2;
}
.video-thumb video {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}
.video-thumb:hover img.thumb-img, .video-thumb:focus-within img.thumb-img {
  opacity: 0;
}
.video-thumb:hover video, .video-thumb:focus-within video {
  opacity: 1;
  filter: brightness(50%);
}

/* ====================================
   動画ホバー
==================================== */
.play-icon-overlay,
.click-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
  text-align: center;
}

.play-icon-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}
.play-icon-overlay .circle-bg {
  position: absolute;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 0;
}
.play-icon-overlay .play-icon {
  position: relative;
  font-size: 1.2rem;
  color: #f9f9f9;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  z-index: 1;
  transition: none;
}
@media (max-width: 768px) {
  .play-icon-overlay .play-icon {
    font-size: 1.2rem;
  }
}

/* 丸背景だけホバー時に縮小＋フェードアウト */
.video-thumb:hover .circle-bg {
  opacity: 0;
  transform: scale(0.6);
}

.click-label {
  top: 58%;
  font-size: 0.8rem;
  color: #f9f9f9;
  text-shadow: 0 0 4px 0 3px 7px rgba(30, 40, 60, 0.15);
  opacity: 0;
  transition: opacity 0.3s;
}
@media (max-width: 768px) {
  .click-label {
    font-size: 0.8rem;
  }
}

.video-thumb:hover .click-label {
  opacity: 1;
}

.video-thumb:hover .stay-here-btn {
  opacity: 1;
}

/* このまま見るボタン */
.stay-here-btn {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: #dbdbdb;
  color: #282e31;
  font-size: 0.8rem;
  padding: 5px 8px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s, transform 0.2s, background-color 0.2s;
  z-index: 3;
}
@media (max-width: 768px) {
  .stay-here-btn {
    font-size: 0.8rem;
  }
}
.stay-here-btn:hover {
  transform: translateY(0px);
  background-color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* ▶ 再生マークやラベルを is-playing の間だけ非表示に */
.video-thumb.is-playing .click-label,
.video-thumb.is-playing .stay-here-btn,
.video-thumb.is-playing .play-icon-overlay {
  display: none;
}

/* is-playing中は .slide-overlay を非表示にする */
.swiper-slide.is-playing .slide-overlay {
  opacity: 0 !important;
}

.video-thumb.is-playing.hovering video {
  filter: brightness(50%) !important;
}

.video-thumb.is-playing.hovering .click-label,
.video-thumb.is-playing.hovering .stay-here-btn,
.video-thumb.is-playing.hovering .play-icon-overlay {
  display: block !important;
}

.video-thumb:not(.is-playing):hover video {
  filter: brightness(50%);
}

.video-thumb.is-playing video {
  filter: brightness(1) !important;
}

/* cssでのクラス説明 */
/* PC：ホバーで表示するUI。SP：初期から表示してホバーは無効 */
.video-thumb .hover-ui {
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.swiper-slide:hover .video-thumb .hover-ui {
  opacity: 1;
}

/* PC用 */
.is-touch .video-thumb .hover-ui {
  opacity: 1;
}

/* SPは常時表示 */
.is-touch .swiper-slide:hover .video-thumb .hover-ui {
  opacity: 1;
}

/* 擬似ホバー上書き */
/* ====================================
    キャプション
==================================== */
.video-meta {
  padding: 16px 40px;
  text-align: center;
}

.video-title {
  position: relative;
  /* 疑似要素を使うには相対配置にする */
  display: block;
  margin: 24px 0;
  padding: 10px 0;
  background-color: #282e31;
  /* 必要に応じて調整 */
  color: #f9f9f9;
  font-family: "Monomaniac One", "Noto Sans JP";
  font-weight: 300;
  font-size: 1.3rem;
  text-align: center;
  box-shadow: none;
  z-index: 10;
  white-space: nowrap;
  /* 改行しないように強制 */
}

.video-title::after {
  content: "";
  position: absolute;
  /* これがないと表示されません */
  top: 4px;
  left: 4px;
  width: 100%;
  height: 100%;
  border: #282e31 1px solid;
  z-index: -1;
  pointer-events: none;
  /* 疑似要素にマウス操作させない */
  box-sizing: border-box;
  /* サイズ調整のため推奨 */
  border-radius: 0;
  /* 角丸なしでOKなら指定 */
}

/* ====================================
    説明
==================================== */
.video-highlight {
  font-size: 0.9rem;
  color: #3e3e3e;
  margin-bottom: 6px;
}
@media (max-width: 768px) {
  .video-highlight {
    font-size: 0.9rem;
  }
}

.video-detail {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 90%;
  color: #777;
  display: flex;
  justify-content: center;
  margin: auto;
  gap: 1.2em;
}
.video-detail li {
  white-space: nowrap;
}

/* ====================================
    アイコン
==================================== */
/* ベース：インラインで使えるモノトーンアイコン（文字色に追従） */
.meta-icon {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.35em;
  vertical-align: -0.12em;
  background-color: currentColor; /* ← 文字色に追従 */
  -webkit-mask: center/contain no-repeat;
  mask: center/contain no-repeat;
}

/* ジャンル（タグ）アイコン：ファイルパスは実際の設置先に合わせて変更 */
.icon--genre {
  -webkit-mask-image: url("/images/icon/icon-genre.svg");
  mask-image: url("/images/icon/icon-genre.svg");
}

.icon--time {
  -webkit-mask-image: url("/images/icon/icon-time.svg");
  mask-image: url("/images/icon/icon-time.svg");
}

/* ====================================
    埋め込み動画
==================================== */
.yt-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}

.yt-player-wrap {
  position: relative;
  width: 95vw;
  max-width: 1200px;
  aspect-ratio: 16/9;
}

#yt-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.yt-close {
  position: absolute;
  top: -40px;
  right: 0px;
  width: 40px;
  height: 40px;
  background: rgba(150, 150, 150, 0.8);
  color: #282e31;
  font-size: 1.5rem;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(30, 30, 30, 0.2);
  transition: background 0.2s;
}
.yt-close:hover {
  background: rgb(255, 255, 255);
}

/* ====================================
    モーダル制御
==================================== */
/* モーダルの暗幕 */
#yt-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: background-color 0.4s ease, opacity 0.4s ease;
}

/* 表示状態 */
#yt-modal.active {
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 1;
  pointer-events: auto;
}

/* 動画ラップの初期状態 */
#yt-player-wrap {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
  position: relative;
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* 動画ラップ表示状態 */
#yt-modal.active #yt-player-wrap {
  transform: scale(1);
  opacity: 1;
}

/* ローディングスピナー */
#yt-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  border: 6px solid #777;
  border-top-color: #3e3e3e;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 10;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.foriio-ghost {
  display: flex;
  z-index: 30;
  gap: 8px;
  cursor: pointer;
  pointer-events: auto;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  max-width: 300px;
  border: 1px solid rgba(154, 163, 170, 0.35);
  border-radius: 9999px;
  color: #777;
  margin: 30px auto 0;
  text-decoration: none;
  font-size: 0.9rem;
  transition: border-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
@media (max-width: 768px) {
  .foriio-ghost {
    font-size: 0.9rem;
  }
}

.foriio-ghost:hover {
  border-color: #21a1c5;
  color: #21a1c5;
  white-space: nowrap;
  opacity: 0.95;
}

.portfolio-link {
  display: flex;
  position: relative;
  cursor: pointer;
  font-size: 0.9rem;
  max-width: 500px;
  text-align: center;
  margin: 30px auto 0;
  /* auto で中央揃え */
  /* 親幅いっぱいに広げる */
  display: flex;
  /* フレックスボックスで */
  justify-content: center;
  /* 中央に寄せる */
  z-index: 10;
}
@media (max-width: 768px) {
  .portfolio-link {
    font-size: 0.9rem;
  }
}

.portfolio-link a {
  display: inline-flex;
  align-items: center;
}

.works {
  /* ===================== */
  /* Swiper初期化中はトランジション無効（勝手に動かない） */
  /* ===================== */
  /* 準備完了したら有効化（従来の見た目を維持） */
}
@media (min-width: 768px) {
  .works {
    background-color: #dbdbdb;
    position: relative;
    overflow: visible;
    /* works用 */
    /* cssでのクラス説明 */
    /* .reveal-freeze 中はクラス付け替えの瞬間に生じる“パッ/加速”を抑える */
    /* cssでのクラス説明 */
    /* .reveal-freeze 中はクラス付け替えの瞬間に生じる“パッ/加速”を抑える */
    /* ====================================*/
    /* Swiper本体構造*/
    /* ==================================== */
    /* ====================================*/
    /* スライド1枚分*/
    /* ==================================== */
    /* ====================================
       スライダーナビボタン  矢印
    ==================================== */
    /* ====================================
        ページネーション
    ==================================== */
    /* ====================================
        モーダル制御
    ==================================== */
    /* モーダルの暗幕 */
    /* 表示状態 */
    /* 動画ラップの初期状態 */
    /* 動画ラップ表示状態 */
    /* ローディングスピナー */
  }
  .works .works-mask-pc {
    margin: auto 40px;
    position: relative;
    overflow: hidden;
    height: 620px;
  }
  .works .swiper-container {
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .works.is-revealed .swiper-container {
    opacity: 1;
  }
  .works .dot-group {
    top: 0;
    transform: translate(-50%, -60%);
  }
  .works .section.works.reveal-freeze .swiper-wrapper,
  .works .section.works.reveal-freeze .swiper-slide,
  .works .section.works.reveal-freeze .slide-overlay {
    transition: none !important;
  }
  .works .divider-curve {
    background-color: #c1c3c3;
  }
  .works .dot-group {
    position: absolute;
    left: 50%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    pointer-events: none;
  }
  .works .section.works.reveal-freeze .swiper-wrapper,
  .works .section.works.reveal-freeze .swiper-slide,
  .works .section.works.reveal-freeze .slide-overlay {
    transition: none !important;
  }
  .works .intro-block {
    margin-top: -70px;
  }
  .works .swiper-container {
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    /* 縦中央 */
    justify-content: center;
    /* 横中央 */
    padding-top: 20px;
    height: 550px;
    /* 画面全体の高さ */
  }
  .works .swiper-wrapper {
    display: flex;
    align-items: stretch;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    /* デフォルトはease */
  }
  .works .section.works {
    max-width: 100%;
    min-height: 34vw;
    /* これで横幅制限（必要なら960pxとかでもOK） */
  }
  .works .swiper-slide {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    /* 縦中央 */
    justify-content: center;
    /* 横中央 */
    height: 450px !important;
    width: 600px;
    flex-shrink: 0;
    padding: 20px;
    overflow: hidden;
    background-color: #ededed;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(36, 52, 80, 0.1);
    filter: grayscale(80%) brightness(0.7);
    will-change: transform, opacity;
    transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.3s;
  }
  .works .swiper-slide .work-card {
    position: relative;
    flex-direction: column;
    width: 95%;
    margin: auto;
    height: 380px;
    transform: translateY(-5%);
  }
  .works .swiper-slide:hover {
    transform: translateY(-3px) scale(1.01);
    filter: grayscale(0%) brightness(1);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
  }
  .works .swiper-slide.swiper-slide-active {
    filter: none;
  }
  .works .swiper-slide iframe {
    pointer-events: none;
  }
  .works .swiper-slide.swiper-slide-active iframe {
    pointer-events: auto;
  }
  .works .swiper-slide .slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  .swiper-slide-active .works .swiper-slide .slide-overlay {
    opacity: 0;
  }
  .works .swiper-nav-wrapper {
    height: 60px;
    /* ボタンの高さと合わせる */
    display: flex;
    justify-content: center;
    /* 左右ボタンの間隔 */
    gap: 150px;
    align-items: center;
    /* 縦中央揃え */
    position: absolute;
    width: 100%;
    /* 下からの位置*/
    bottom: 0px;
    left: 0;
    z-index: 10;
    /* 左右の位置 */
    /*矢印ホバー*/
    /* 左矢印は逆方向に動く */
    /* Swiperのデフォルト矢印を非表示 */
  }
  .works .swiper-nav-wrapper .swiper-button-prev {
    left: 0px;
  }
  .works .swiper-nav-wrapper .swiper-button-next {
    left: 0px;
  }
  .works .swiper-nav-wrapper .swiper-button-prev,
  .works .swiper-nav-wrapper .swiper-button-next {
    position: relative;
    background: #282e31;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease;
    z-index: 10;
    position: relative;
    /* 絶対配置やtop指定はやめる */
    top: auto;
    /* リセット */
    transform: none;
    /* リセット */
    width: 40px;
    height: 40px;
  }
  .works .swiper-nav-wrapper .swiper-button-prev svg.arrow-icon,
  .works .swiper-nav-wrapper .swiper-button-next svg.arrow-icon {
    width: 20px;
    height: 20px;
  }
  .works .swiper-nav-wrapper .swiper-button-prev:hover svg.arrow-icon,
  .works .swiper-nav-wrapper .swiper-button-next:hover svg.arrow-icon {
    transform: translateX(2px);
  }
  .works .swiper-nav-wrapper .swiper-button-prev,
  .works .swiper-nav-wrapper .swiper-button-next {
    background-color: rgb(62.9213483146, 72.3595505618, 77.0786516854);
  }
  .works .swiper-nav-wrapper .swiper-button-prev:hover,
  .works .swiper-nav-wrapper .swiper-button-next:hover {
    transition: background-color 0.3s ease;
    background-color: #282e31;
  }
  .works .swiper-nav-wrapper .swiper-button-prev:hover,
  .works .swiper-nav-wrapper .swiper-button-next:hover {
    transition: background-color 0.3s ease;
    background-color: #282e31;
  }
  .works .swiper-nav-wrapper .swiper-button-prev:hover,
  .works .swiper-nav-wrapper .swiper-button-next:hover {
    transition: background-color 0.3s ease;
    background-color: #282e31;
  }
  .works .swiper-nav-wrapper .swiper-button-prev:hover svg.arrow-icon {
    transform: translateX(-2px);
  }
  .works .swiper-nav-wrapper .swiper-button-prev::after,
  .works .swiper-nav-wrapper .swiper-button-next::after {
    display: none;
  }
  .works .swiper-nav-wrapper .swiper-button-prev svg.arrow-icon {
    margin-left: -2px;
  }
  .works .swiper-nav-wrapper .swiper-button-next svg.arrow-icon {
    margin-right: 1px;
  }
  .works .swiper-pagination {
    position: absolute;
    bottom: 30px !important;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 1;
  }
  .works #yt-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: background-color 0.4s ease, opacity 0.4s ease;
  }
  .works #yt-modal.active {
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 1;
    pointer-events: auto;
  }
  .works #yt-player-wrap {
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
    position: relative;
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
  }
  .works #yt-modal.active #yt-player-wrap {
    transform: scale(1);
    opacity: 1;
  }
  .works #yt-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    border: 6px solid #777;
    border-top-color: #3e3e3e;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 10;
  }
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
}
.works .section.works .swiper-wrapper,
.works .section.works .swiper-slide {
  transition: none !important;
  /* 初期のtranslate配置で動かさない */
}
.works html.is-anim-ready .section.works .swiper-slide {
  transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.3s;
}

@media (max-width: 767px) {
  /* ==============スマホ================ */
  /* ==================================== */
  /*works全体 */
  /*==================================== */
  /* スマホ用全体置き換えCSS */
  /* worksセクション調整 */
  .section.works {
    position: relative;
    margin: 0px 0 0 0;
    min-height: 100px;
    z-index: 50;
    padding: 0;
  }
  .container {
    display: flex;
    justify-content: center;
    /* 横中央 */
    align-items: center;
    /* 縦中央 */
  }
  /* ====================================*/
  /* スマホ*/
  /*==================================== */
  .mobile-vertical-scroll {
    display: block !important;
  }
  .mobile-horizontal-scroll {
    display: none !important;
  }
  /*==================================== */
  /* スクロールするカード一枚*/
  /*==================================== */
  .scroll-item {
    display: flex;
    position: relative;
    flex-direction: column;
    /* 垂直方向に中央寄せ */
    justify-content: center;
    /* 横方向にも中央寄せ*/
    align-items: center;
    margin: 0 auto;
    padding: 20px;
    z-index: 10;
    height: 100%;
    max-width: 75vw;
    background-color: #ededed;
    border-radius: 6px;
    box-shadow: 0 3px 7px rgba(30, 40, 60, 0.15);
  }
  .swiper-slide {
    width: 100% !important;
  }
  .container {
    padding: 0;
  }
  .video-title {
    font-size: 1rem;
    padding: 10px 20px;
    line-height: 0.9;
  }
  /* 背景エリアの余白 */
  /* 横スクロールコンテナは非表示 */
  /* 縦スクロールコンテナは表示 */
  /* スクロールアイテムの初期状態 */
  /* 表示状態 */
  /* カード幅調整 */
  /* CSSでPC表示時に非表示にする方法 */
  /* ====================================*/
  /*サムネイル画像＋動画*/
  /* ==================================== */
  /* ====================================*/
  /*カード内容*/
  /* ==================================== */
  /* ===================== */
  /*SP（タッチ）では初期からホバーUIを表示（強制上書き） */
  /*===================== */
  /* 暗転オーバーレイも最初から表示 */
}
@media (max-width: 767px) and (max-width: 768px) {
  .video-title {
    font-size: 1rem;
  }
}
@media (max-width: 767px) {
  .sp-works-bg {
    padding: 50px 0;
  }
  .mobile-horizontal-scroll {
    display: none !important;
  }
  .mobile-vertical-scroll {
    display: block !important;
  }
  .mobile-vertical-scroll .scroll-item {
    margin-bottom: 50px;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .mobile-vertical-scroll .scroll-item.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .mobile-vertical-scroll .work-card {
    width: 90vw;
    margin: 0 auto;
  }
  #works-bg-circle {
    display: none !important;
  }
  .video-thumb,
  .work-card {
    pointer-events: auto !important;
  }
  .video-thumb:hover img.thumb-img, .video-thumb:focus-within img.thumb-img {
    opacity: 0;
  }
  .mute-play-btn {
    color: #f9f9f9;
  }
  .video-meta {
    padding: 16px 0px !important;
    text-align: center;
  }
  html.is-touch .video-thumb {
    position: relative;
    /* ::afterを確実に重ねられるように */
  }
  .mobile-vertical-scroll .video-thumb {
    aspect-ratio: 16/9;
  }
  html.is-touch .video-thumb .play-icon-overlay,
  html.is-touch .video-thumb .click-label,
  html.is-touch .video-thumb .stay-here-btn {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
    /* ボタン操作可 */
  }
  html.is-touch .video-thumb::after {
    opacity: 1 !important;
  }
  .play-icon-overlay .play-icon {
    font-size: 0.9rem;
  }
}
@media (max-width: 767px) and (max-width: 768px) {
  .play-icon-overlay .play-icon {
    font-size: 0.9rem;
  }
}
@media (max-width: 767px) {
  .play-icon-overlay .circle-bg {
    width: 3rem;
    height: 3rem;
  }
  .click-label {
    margin-top: 1rem;
    line-height: 1.2 !important;
  }
}
@media (max-width: 767px) {
  html.is-touch .video-thumb::after {
    content: "";
    position: absolute;
    inset: 0; /* 上下左右すべて0 */
    background: rgba(0, 0, 0, 0.4); /* 暗さ調整 */
    opacity: 1 !important; /* 常時表示 */
    visibility: visible !important;
    pointer-events: none; /* 操作は透過 */
    border-radius: inherit; /* カードの角丸と合わせる */
    z-index: 2; /* アイコンの下 or 上に調整 */
  }
}
.price-section {
  /* Price セクション全体の縦並び中央揃え */
  /* ========================== */
  /* ========================== */
  /* 丸カード設定 */
  /* 丸カード設定 スマホver */
  /* ========================== */
  /*繋ぎlottie */
  /* ========================== */
  /* ========================== */
  /* ========================== */
  /* ========================== */
  /* ========================== */
  /* ========================== */
  /* ========================== */
  /* ========================== */
  /* ========================== */
  /* ========================== */
  /* ========================== */
}
.price-section .timeline-wrapper {
  display: flex;
  flex-direction: column;
  /* 縦方向に並べる */
  align-items: center;
  /* 横方向中央揃え */
  /* カードや繋ぎの間隔 */
}
.price-section .price-block {
  overflow: hidden;
  position: relative;
  /* 中身の絶対配置基準 */
  width: 95vw;
  aspect-ratio: 1/1;
  max-width: 500px;
  min-width: 350px;
  /* カード幅（調整可） */
  height: auto;
  /* カード高さ（調整可） */
  display: flex;
  /* 内部をflexで中央揃え */
  justify-content: center;
  /* 横中央 */
  align-items: center;
  /* 縦中央 */
  z-index: 2;
}
.price-section .price-block--circle {
  transition: opacity 0.8s ease, transform 0.8s ease;
  position: relative;
  /* 中身の絶対配置基準 */
  width: 1000px;
  /* カード幅（調整可） */
  height: 400px;
  /* カード高さ（調整可） */
  display: flex;
  /* 内部をflexで中央揃え */
  justify-content: center;
  /* 横中央 */
  align-items: center;
  /* 縦中央 */
  z-index: 2;
}
.price-section .price-block--circle-sp {
  position: relative;
  /* 中身の絶対配置基準 */
  width: 800px;
  /* カード幅（調整可） */
  height: 400px;
  /* カード高さ（調整可） */
  display: flex;
  /* 内部をflexで中央揃え */
  justify-content: center;
  /* 横中央 */
  align-items: center;
  /* 縦中央 */
  z-index: 2;
}
.price-section .connect-block {
  margin-top: -2rem;
  margin-bottom: -2rem;
  position: relative;
  /* 中身の絶対配置基準 */
  width: 200px;
  /* カード幅（調整可） */
  height: 100px;
  /* カード高さ（調整可） */
  display: flex;
  /* 内部をflexで中央揃え */
  justify-content: center;
  /* 横中央 */
  align-items: center;
  /* 縦中央 */
  z-index: 1;
}
.price-section .price-card-lottie,
.price-section .price-card-lottie--circle-sp,
.price-section .price-card-lottie--circle {
  position: absolute;
  /* 枠全体を覆う */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.price-section .price-card-lottie.is-flipped {
  transform: scaleX(-1);
}
.price-section .price-contents,
.price-section .price-contents--circle {
  display: flex;
  top: -15px;
  position: relative;
  /* Lottieより前面 */
  flex-direction: column;
  gap: 1rem;
  text-align: center;
  max-width: 70%;
  z-index: 10;
  font-size: 0.9rem;
}
@media (max-width: 768px) {
  .price-section .price-contents,
  .price-section .price-contents--circle {
    font-size: 0.9rem;
  }
}
.price-section .price-contents h3,
.price-section .price-contents--circle h3 {
  margin-bottom: 1rem;
}
.price-section .price-contents--left {
  left: -10px;
}
.price-section .price-contents--right {
  top: -10px;
  right: -10px;
}
.price-section .price-card {
  position: relative;
  border-radius: 12px;
}
.price-section .price-block--circle,
.price-section .price-block {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.price-section .price-block--circle.from-left,
.price-section .price-block.from-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.price-section .price-block--circle.from-right,
.price-section .price-block.from-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.price-section .price-block--circle.is-inview,
.price-section .price-block.is-inview {
  opacity: 1;
  transform: translateX(0);
}
.price-section .price-divider {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
  .price-block--circle--pc {
    display: none !important;
  }
  .price-block--circle--sp {
    display: block !important;
  }
  h3 {
    margin-bottom: 0.5rem !important;
  }
  .price-section {
    overflow: hidden;
    /* テキスト部分（折り返し有効化） */
  }
  .price-section .container {
    padding-bottom: 0 !important;
  }
  .price-section .price-contents--circle {
    font-size: 0.8rem;
    width: 400vw;
    max-width: 400px;
    white-space: normal;
    /* 折り返し許可 */
    word-break: break-word;
    /* 単語途中でも折り返し */
    overflow-wrap: break-word;
    text-align: center;
  }
}
@media (max-width: 768px) and (max-width: 768px) {
  .price-section .price-contents--circle {
    font-size: 0.8rem;
  }
}
@media (max-width: 768px) {
  .price-section .price-contents,
  .price-section .price-contents--circle {
    gap: 0.2rem !important;
  }
  .price-section .price-contents--circle ul,
  .price-section .price-contents--circle li {
    list-style: none;
    white-space: normal;
    /* 折り返し許可 */
    word-break: break-word;
    align-items: left;
    /* 単語途中でも折り返し */
    overflow-wrap: break-word;
  }
}
@media (min-width: 768px) {
  .price-section {
    padding-top: 300px;
    position: relative;
    overflow: hidden;
    font-size: 0.9rem;
  }
}
@media (min-width: 768px) and (max-width: 768px) {
  .price-section {
    font-size: 0.9rem;
  }
}
.faq {
  margin-top: 300px;
  margin-bottom: 300px;
}
.faq .faq-content {
  display: flex;
  flex-direction: column; /* 縦並び */
  align-items: center; /* 子要素の横方向中央揃え */
  justify-content: center; /* 必要なら縦方向中央揃え */
}
.faq .faq-card {
  width: 200px;
  height: 200px;
  position: relative;
}
.faq .faq-card:nth-child(1) {
  transform: translateX(-60px);
}
.faq .faq-card:nth-child(2) {
  transform: translateX(60px);
}

.flow-section {
  z-index: 10;
  overflow: hidden;
  width: 100%;
  /*ここまで変更禁止*/
}
.flow-section #lottie-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 10;
}
.flow-section .section-title {
  position: relative;
  font-size: 1.3rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.5rem;
  color: #282e31;
  display: block;
}
@media (max-width: 768px) {
  .flow-section .section-title {
    font-size: 1.3rem;
  }
}

/* ================================== */
/* flow-section全体の基本設定 */
/* ================================== */
.flow-section {
  padding-top: 100px;
  margin-top: 0;
  width: 100%;
  overflow: hidden;
  /* =========タイトル========== */
  /* ===========セクション説明=========== */
  /*=======================================*/
  /*         カードブロック全体             */
  /*=======================================*/
  /*===========出現アニメーション時の移動距離=========*/
  /* 個別でさらに動かしたいときは style で --dx/--dy を上書き可 */
  /* ステップの中身はそのまま。背景のSVGは別要素なので影響なし */
  /* お好みで段差（ステッガー） */
  /* ユーザーの簡易アクセシビリティ配慮 */
  /* ==================================== */
  /*   アイコンアニメーション   */
  /*==================================== */
  /* アイコンのactive時のスタイル */
  /* 初期は隠す */
  /* アクティブで見せる */
  /* ==================================== */
  /*    ステップアイコン                   */
  /*==================================== */
  /* ==================================== */
  /*    flowカード                        */
  /*==================================== */
  /*=======枠戸の隙間======= */
}
.flow-section .flow-section-divider {
  width: 100%;
  overflow: hidden;
}
.flow-section .section-lead {
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 480px;
  /* 横幅の上限 */
  margin: 3rem auto 3rem;
  /* 上下に適度な余白、左右は中央寄せ */
  padding: 0 1rem;
  /* スマホ用に左右パディング */
  text-align: center;
  /* 中央揃え */
  font-weight: 500;
  letter-spacing: 0.02em;
}
@media (max-width: 768px) {
  .flow-section .section-lead {
    font-size: 1.2rem;
  }
}
.flow-section #lottie-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 10;
}
.flow-section .timeline-wrapper {
  max-width: 600px;
  margin: 0 auto;
  margin-left: auto;
  padding: 0;
  position: relative;
  box-sizing: border-box;
}
.flow-section .flow-block {
  margin: 0 auto;
  position: relative;
  width: 400px;
  height: 400px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding: 20px;
  -webkit-tap-highlight-color: transparent;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}
.flow-section .flow-block.flow-visible {
  opacity: 1;
  transform: translate(0, 0);
  pointer-events: auto;
}
.flow-section .flow-list .flow-block {
  transition-delay: 60ms;
}
.flow-section .flow-list .flow-block:nth-child(2) {
  transition-delay: 120ms;
}
.flow-section .flow-list .flow-block:nth-child(3) {
  transition-delay: 180ms;
}
@media (prefers-reduced-motion: reduce) {
  .flow-section .flow-block,
  .flow-section .flow-block.is-inview {
    transition: none;
    transform: none;
    opacity: 1;
  }
}
.flow-section .flow-card-lottie {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 1;
  transform: none;
  transition: none;
}
.flow-section .flow-contents {
  position: relative;
  z-index: 10;
  max-width: 320px;
  height: 100%;
  width: 100%;
  padding: 2rem;
  margin: auto auto;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 縦横の厳密な中央 */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.flow-section .step-label {
  margin-top: 0px;
  font-family: "Monomaniac One", "Noto Sans JP";
  font-weight: 700;
  font-size: 0.9rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  opacity: 1;
  transition: opacity 0.6s ease;
}
@media (max-width: 768px) {
  .flow-section .step-label {
    font-size: 0.9rem;
  }
}
.flow-section .card-title {
  font-weight: 500;
  font-size: 1.2rem;
  margin: 0 0 5px 0;
  opacity: 1;
  transition: opacity 0.6s ease;
}
@media (max-width: 768px) {
  .flow-section .card-title {
    font-size: 1.2rem;
  }
}
.flow-section .step-brief-detail {
  position: relative;
  font-size: 0.9rem;
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
@media (max-width: 768px) {
  .flow-section .step-brief-detail {
    font-size: 0.9rem;
  }
}
.flow-section .step-brief-detail .foot-note {
  font-size: 0.8rem;
  color: #777;
}
@media (max-width: 768px) {
  .flow-section .step-brief-detail .foot-note {
    font-size: 0.8rem;
  }
}
.flow-section .icon-wrap {
  margin-top: 10px;
}
.flow-section .step-icon .icon-wrap,
.flow-section .step-icon .icon {
  opacity: 1;
  display: block;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
  will-change: opacity, transform;
}
.flow-section .flow-block.active .step-icon .icon-wrap,
.flow-section .flow-block.active .step-icon .icon {
  opacity: 0.4;
  transform: translateY(0px);
}
.flow-section .icon {
  display: inline-block;
  background: linear-gradient(135deg, #32c2c7, #1796bd);
  -webkit-mask: no-repeat center/contain;
  mask: no-repeat center/contain;
}
.flow-section .step-icon {
  /* ▼アイコンごとにマスクだけ切り替える */
  /* アイコンひな形 ctrl+/で解除 */
}
.flow-section .step-icon .wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.flow-section .step-icon .icon {
  width: 200px;
}
.flow-section .step-icon .icon--flow-contact {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%23000' d='M22 7.535v9.465a3 3 0 0 1 -2.824 2.995l-.176 .005h-14a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-9.465l9.445 6.297l.116 .066a1 1 0 0 0 .878 0l.116 -.066l9.445 -6.297z'/%3E%3Cpath fill='%23000' d='M19 4c1.08 0 2.027 .57 2.555 1.427l-9.555 6.37l-9.555 -6.37a2.999 2.999 0 0 1 2.354 -1.42l.201 -.007h14z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%23000' d='M22 7.535v9.465a3 3 0 0 1 -2.824 2.995l-.176 .005h-14a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-9.465l9.445 6.297l.116 .066a1 1 0 0 0 .878 0l.116 -.066l9.445 -6.297z'/%3E%3Cpath fill='%23000' d='M19 4c1.08 0 2.027 .57 2.555 1.427l-9.555 6.37l-9.555 -6.37a2.999 2.999 0 0 1 2.354 -1.42l.201 -.007h14z'/%3E%3C/svg%3E");
}
.flow-section .step-icon .icon--flow-meeting {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%23000' d='M18 3a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-4.724l-4.762 2.857a1 1 0 0 1 -1.508 -.743l-.006 -.114v-2h-1a4 4 0 0 1 -3.995 -3.8l-.005 -.2v-8a4 4 0 0 1 4 -4zm-2.8 9.286a1 1 0 0 0 -1.414 .014a2.5 2.5 0 0 1 -3.572 0a1 1 0 0 0 -1.428 1.4a4.5 4.5 0 0 0 6.428 0a1 1 0 0 0 -.014 -1.414m-5.69 -4.286h-.01a1 1 0 1 0 0 2h.01a1 1 0 0 0 0 -2m5 0h-.01a1 1 0 0 0 0 2h.01a1 1 0 0 0 0 -2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%23000' d='M18 3a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-4.724l-4.762 2.857a1 1 0 0 1 -1.508 -.743l-.006 -.114v-2h-1a4 4 0 0 1 -3.995 -3.8l-.005 -.2v-8a4 4 0 0 1 4 -4zm-2.8 9.286a1 1 0 0 0 -1.414 .014a2.5 2.5 0 0 1 -3.572 0a1 1 0 0 0 -1.428 1.4a4.5 4.5 0 0 0 6.428 0a1 1 0 0 0 -.014 -1.414m-5.69 -4.286h-.01a1 1 0 1 0 0 2h.01a1 1 0 0 0 0 -2m5 0h-.01a1 1 0 0 0 0 2h.01a1 1 0 0 0 0 -2'/%3E%3C/svg%3E");
}
.flow-section .step-icon .icon--flow-quotation {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23000'%3E%3Cpath d='m44.0609 43.51-6.19006 4.1a2.99983 2.99983 0 0 1 -4.58-3.18006l.59001-2.42994h-22.61a1.00012 1.00012 0 0 1 .00006-2h23.08992c.21875-.79138.60608-3.12561 1.10986-3.77008l1.56012-2.22992h-25.76a1.00013 1.00013 0 0 1 0-2h27.16l8.12-11.59v-2.84h-7.58a6.01116 6.01116 0 0 1 -6-6v-7.57h-20.21a6.80289 6.80289 0 0 0 -6.79 6.79v42.43a6.79438 6.79438 0 0 0 6.79 6.78h27a6.79433 6.79433 0 0 0 6.79-6.78v-12.93c-.49711.63371-1.80181 2.81724-2.48991 3.22zm-32.79004-27.51h15a1.00012 1.00012 0 0 1 -.00006 2h-14.99994a1.00012 1.00012 0 0 1 0-2zm0 8h18.99a1.00012 1.00012 0 0 1 -.00006 2h-18.98994a1.00012 1.00012 0 0 1 0-2zm19.58 25.92-2.69 1.94a1.83854 1.83854 0 0 1 -2.9-1.45008l-.88.88007a1.83772 1.83772 0 0 1 -3.08-.91l-.92.91a1.8369 1.8369 0 0 1 -3.11994-1.29l-.00006-.27c-.118.01233-6.11639 3.638-5.99 3.27a1.00662 1.00662 0 0 1 -.49005-1.87l5.74-3.29a1.8508 1.8508 0 0 1 2.73998 1.75001l.88007-.88007a1.83648 1.83648 0 0 1 3.08.92011l.92-.92011a1.83831 1.83831 0 0 1 3.11993 1.33007l2.41-1.74a1.00209 1.00209 0 1 1 1.18 1.62z'/%3E%3Cpath d='m38.97081 15.57h6.98l-10.98-10.99v6.99a4.00533 4.00533 0 0 0 4 4z'/%3E%3Cpath d='m51.28081 17.15-.83 1.18c1.72344 1.21063 4.34216 3.03393 6.06 4.24l.83-1.18a3.69826 3.69826 0 0 0 -6.06-4.24z'/%3E%3Cpath d='m36.9608 37.72c-.25628 1.06213-1.72 7.15-1.71991 7.15a1.00965 1.00965 0 0 0 1.53 1.07007l6.14008-4.05993c2.6243-3.43514 9.79721-13.98805 12.44986-17.67014-1.73444-1.22027-4.32569-3.01947-6.06-4.24-2.99445 4.28024-12.49939 17.72031-12.34003 17.75z'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23000'%3E%3Cpath d='m44.0609 43.51-6.19006 4.1a2.99983 2.99983 0 0 1 -4.58-3.18006l.59001-2.42994h-22.61a1.00012 1.00012 0 0 1 .00006-2h23.08992c.21875-.79138.60608-3.12561 1.10986-3.77008l1.56012-2.22992h-25.76a1.00013 1.00013 0 0 1 0-2h27.16l8.12-11.59v-2.84h-7.58a6.01116 6.01116 0 0 1 -6-6v-7.57h-20.21a6.80289 6.80289 0 0 0 -6.79 6.79v42.43a6.79438 6.79438 0 0 0 6.79 6.78h27a6.79433 6.79433 0 0 0 6.79-6.78v-12.93c-.49711.63371-1.80181 2.81724-2.48991 3.22zm-32.79004-27.51h15a1.00012 1.00012 0 0 1 -.00006 2h-14.99994a1.00012 1.00012 0 0 1 0-2zm0 8h18.99a1.00012 1.00012 0 0 1 -.00006 2h-18.98994a1.00012 1.00012 0 0 1 0-2zm19.58 25.92-2.69 1.94a1.83854 1.83854 0 0 1 -2.9-1.45008l-.88.88007a1.83772 1.83772 0 0 1 -3.08-.91l-.92.91a1.8369 1.8369 0 0 1 -3.11994-1.29l-.00006-.27c-.118.01233-6.11639 3.638-5.99 3.27a1.00662 1.00662 0 0 1 -.49005-1.87l5.74-3.29a1.8508 1.8508 0 0 1 2.73998 1.75001l.88007-.88007a1.83648 1.83648 0 0 1 3.08.92011l.92-.92011a1.83831 1.83831 0 0 1 3.11993 1.33007l2.41-1.74a1.00209 1.00209 0 1 1 1.18 1.62z'/%3E%3Cpath d='m38.97081 15.57h6.98l-10.98-10.99v6.99a4.00533 4.00533 0 0 0 4 4z'/%3E%3Cpath d='m51.28081 17.15-.83 1.18c1.72344 1.21063 4.34216 3.03393 6.06 4.24l.83-1.18a3.69826 3.69826 0 0 0 -6.06-4.24z'/%3E%3Cpath d='m36.9608 37.72c-.25628 1.06213-1.72 7.15-1.71991 7.15a1.00965 1.00965 0 0 0 1.53 1.07007l6.14008-4.05993c2.6243-3.43514 9.79721-13.98805 12.44986-17.67014-1.73444-1.22027-4.32569-3.01947-6.06-4.24-2.99445 4.28024-12.49939 17.72031-12.34003 17.75z'/%3E%3C/g%3E%3C/svg%3E");
}
.flow-section .step-icon .icon--flow-contract {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%23000' d='M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005zm3 14h-6a1 1 0 0 0 0 2h6a1 1 0 0 0 0 -2m0 -4h-6a1 1 0 0 0 0 2h6a1 1 0 0 0 0 -2'/%3E%3Cpath fill='%23000' d='M19 7h-4l-.001 -4.001z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%23000' d='M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005zm3 14h-6a1 1 0 0 0 0 2h6a1 1 0 0 0 0 -2m0 -4h-6a1 1 0 0 0 0 2h6a1 1 0 0 0 0 -2'/%3E%3Cpath fill='%23000' d='M19 7h-4l-.001 -4.001z'/%3E%3C/svg%3E");
}
.flow-section .step-icon .icon--flow-scenario {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M14 4a1 1 0 0 1 1 -1h5a1 1 0 0 1 1 1v5a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 14h12a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h3a2 2 0 0 1 2 2v12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M14 4a1 1 0 0 1 1 -1h5a1 1 0 0 1 1 1v5a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 14h12a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h3a2 2 0 0 1 2 2v12'/%3E%3C/svg%3E");
}
.flow-section .step-icon .icon--flow-storyboard {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%23000' d='M8.813 11.612c.457 -.38 .918 -.38 1.386 .011l.108 .098l4.986 4.986l.094 .083a1 1 0 0 0 1.403 -1.403l-.083 -.094l-1.292 -1.293l.292 -.293l.106 -.095c.457 -.38 .918 -.38 1.386 .011l.108 .098l4.674 4.675a4 4 0 0 1 -3.775 3.599l-.206 .005h-12a4 4 0 0 1 -3.98 -3.603l6.687 -6.69l.106 -.095zm9.187 -9.612a4 4 0 0 1 3.995 3.8l.005 .2v9.585l-3.293 -3.292l-.15 -.137c-1.256 -1.095 -2.85 -1.097 -4.096 -.017l-.154 .14l-.307 .306l-2.293 -2.292l-.15 -.137c-1.256 -1.095 -2.85 -1.097 -4.096 -.017l-.154 .14l-5.307 5.306v-9.585a4 4 0 0 1 3.8 -3.995l.2 -.005h12zm-2.99 5l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%23000' d='M8.813 11.612c.457 -.38 .918 -.38 1.386 .011l.108 .098l4.986 4.986l.094 .083a1 1 0 0 0 1.403 -1.403l-.083 -.094l-1.292 -1.293l.292 -.293l.106 -.095c.457 -.38 .918 -.38 1.386 .011l.108 .098l4.674 4.675a4 4 0 0 1 -3.775 3.599l-.206 .005h-12a4 4 0 0 1 -3.98 -3.603l6.687 -6.69l.106 -.095zm9.187 -9.612a4 4 0 0 1 3.995 3.8l.005 .2v9.585l-3.293 -3.292l-.15 -.137c-1.256 -1.095 -2.85 -1.097 -4.096 -.017l-.154 .14l-.307 .306l-2.293 -2.292l-.15 -.137c-1.256 -1.095 -2.85 -1.097 -4.096 -.017l-.154 .14l-5.307 5.306v-9.585a4 4 0 0 1 3.8 -3.995l.2 -.005h12zm-2.99 5l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007z'/%3E%3C/svg%3E");
}
.flow-section .step-icon .icon--flow-animation {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%23000' d='M10.49,7.32,13.28,9l-2.79,1.68ZM21.75,4V14A1.76,1.76,0,0,1,20,15.75H4A1.76,1.76,0,0,1,2.25,14V4A1.76,1.76,0,0,1,4,2.25H20A1.76,1.76,0,0,1,21.75,4ZM15,9a1.24,1.24,0,0,0-.6-1.07L10.88,5.81A1.24,1.24,0,0,0,9,6.88v4.24a1.26,1.26,0,0,0,.63,1.09,1.33,1.33,0,0,0,.62.16,1.24,1.24,0,0,0,.64-.18l3.53-2.12A1.24,1.24,0,0,0,15,9ZM2.25,19.5a.76.76,0,0,0,.75.75H5.75v-1.5H3A.76.76,0,0,0,2.25,19.5ZM21,18.75H10.25v1.5H21a.75.75,0,0,0,0-1.5ZM8,17.25a.76.76,0,0,0-.75.75v3a.75.75,0,0,0,1.5,0V18A.76.76,0,0,0,8,17.25Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%23000' d='M10.49,7.32,13.28,9l-2.79,1.68ZM21.75,4V14A1.76,1.76,0,0,1,20,15.75H4A1.76,1.76,0,0,1,2.25,14V4A1.76,1.76,0,0,1,4,2.25H20A1.76,1.76,0,0,1,21.75,4ZM15,9a1.24,1.24,0,0,0-.6-1.07L10.88,5.81A1.24,1.24,0,0,0,9,6.88v4.24a1.26,1.26,0,0,0,.63,1.09,1.33,1.33,0,0,0,.62.16,1.24,1.24,0,0,0,.64-.18l3.53-2.12A1.24,1.24,0,0,0,15,9ZM2.25,19.5a.76.76,0,0,0,.75.75H5.75v-1.5H3A.76.76,0,0,0,2.25,19.5ZM21,18.75H10.25v1.5H21a.75.75,0,0,0,0-1.5ZM8,17.25a.76.76,0,0,0-.75.75v3a.75.75,0,0,0,1.5,0V18A.76.76,0,0,0,8,17.25Z'/%3E%3C/svg%3E");
}
.flow-section .step-icon .icon--flow-check {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='m14.39844 21.67789v6.11133h3.44531v-25.53516h-10.84375c-2.61914 0-4.75 2.13086-4.75 4.75v16.03516c-.00616 2.69263 2.26001 4.85376 4.94531 4.75v-6.11133c0-.41406.33594-.75.75-.75h5.70313c.41405 0 .75.33594.75.75zm-7.20313-5.16895v-7.74219c0-.41406.33594-.75.75-.75h5.70313c.41405 0 .75.33594.75.75v7.74219c0 .41406-.33595.75-.75.75h-5.70313c-.41406 0-.75-.33594-.75-.75z'/%3E%3Cpath fill='%23000' d='m8.695 22.428h4.203v5.361h-4.203z'/%3E%3Cpath fill='%23000' d='m19.344 2.254h25.313v25.535h-25.313z'/%3E%3Cpath fill='%23000' d='m8.695 9.517h4.203v6.242h-4.203z'/%3E%3Cpath fill='%23000' d='m51.102 22.428h4.203v5.361h-4.203z'/%3E%3Cpath fill='%23000' d='m51.102 9.517h4.203v6.242h-4.203z'/%3E%3Cpath fill='%23000' d='m57 2.25406h-10.84375v25.53516h3.44531v-6.11133c0-.41406.33593-.75.75-.75h5.70313c.41406 0 .75.33594.75.75v6.11133c2.6853.10376 4.95148-2.05737 4.94531-4.75v-16.03516c0-2.61914-2.13086-4.75-4.75-4.75zm-.19531 14.25488c0 .41406-.33594.75-.75.75h-5.70313c-.41407 0-.75-.33594-.75-.75v-7.74219c0-.41406.33593-.75.75-.75h5.70313c.41406 0 .75.33594.75.75z'/%3E%3Cpath fill='%23000' d='m21.78851 29.77768c-3.19629 3.1958-3.19629 8.39648 0 11.59229l2.82892 2.82922 6.3266-6.32697-8.09497-8.09454c-.29297-.29297-.76758-.29297-1.06055 0z'/%3E%3Cpath fill='%23000' d='m40.30951 47.23764-.91821-.91785-6.32617 6.32678 6.6897 6.6897c1.59766 1.59814 3.69629 2.39697 5.7959 2.39697 2.09863 0 4.19824-.79932 5.7959-2.39697 1.54883-1.54785 2.40137-3.60645 2.40137-5.79639 0-2.18945-.85254-4.24805-2.40137-5.7959-3.01758-3.01855-7.82129-3.18652-11.03711-.50635zm8.4043 9.46582c-.84375.84375-1.9668 1.30859-3.16309 1.30859-1.19531 0-2.31934-.46484-3.16309-1.30859-1.74414-1.74414-1.74414-4.58203 0-6.32617.84375-.84375 1.96777-1.30859 3.16309-1.30859 1.19629 0 2.31934.46484 3.16309 1.30859s1.30859 1.9668 1.30859 3.16309c0 1.1958-.46484 2.31934-1.30859 3.16309z'/%3E%3Cpath fill='%23000' d='m23.68695 47.25082c-3.21582-2.6792-8.01904-2.51221-11.03809.50635-3.1958 3.1958-3.1958 8.396 0 11.5918 1.59814 1.59814 3.69727 2.39697 5.7959 2.39697 2.09912 0 4.19824-.79883 5.79639-2.39697l6.68823-6.68823-6.32593-6.32642zm-2.07861 9.46533c-.87207.87207-2.01807 1.30811-3.16357 1.30811s-2.29102-.43604-3.16309-1.30811c-1.74414-1.74414-1.74414-4.58203 0-6.32617s4.58252-1.74414 6.32666 0 1.74414 4.58203 0 6.32617z'/%3E%3Cpath fill='%23000' d='m42.20697 29.79086c-.28125-.28125-.7793-.28125-1.06055 0l-14.95215 14.95264c-.29297.29297-.29297.76758 0 1.06055l5.26563 5.26563c.14063.14063.33105.21973.53027.21973s.38965-.0791.53027-.21973l9.68652-9.68701c3.19629-3.1958 3.19629-8.396 0-11.5918zm-9.14063 15.46729-.88477.88428c-.14648.14648-.33887.21973-.53027.21973-.19238 0-.38379-.07324-.53027-.21973-.29297-.29297-.29297-.76807 0-1.06055l.88477-.88428c.29395-.29346.76855-.29248 1.06055 0 .29297.29297.29297.76807 0 1.06055z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='m14.39844 21.67789v6.11133h3.44531v-25.53516h-10.84375c-2.61914 0-4.75 2.13086-4.75 4.75v16.03516c-.00616 2.69263 2.26001 4.85376 4.94531 4.75v-6.11133c0-.41406.33594-.75.75-.75h5.70313c.41405 0 .75.33594.75.75zm-7.20313-5.16895v-7.74219c0-.41406.33594-.75.75-.75h5.70313c.41405 0 .75.33594.75.75v7.74219c0 .41406-.33595.75-.75.75h-5.70313c-.41406 0-.75-.33594-.75-.75z'/%3E%3Cpath fill='%23000' d='m8.695 22.428h4.203v5.361h-4.203z'/%3E%3Cpath fill='%23000' d='m19.344 2.254h25.313v25.535h-25.313z'/%3E%3Cpath fill='%23000' d='m8.695 9.517h4.203v6.242h-4.203z'/%3E%3Cpath fill='%23000' d='m51.102 22.428h4.203v5.361h-4.203z'/%3E%3Cpath fill='%23000' d='m51.102 9.517h4.203v6.242h-4.203z'/%3E%3Cpath fill='%23000' d='m57 2.25406h-10.84375v25.53516h3.44531v-6.11133c0-.41406.33593-.75.75-.75h5.70313c.41406 0 .75.33594.75.75v6.11133c2.6853.10376 4.95148-2.05737 4.94531-4.75v-16.03516c0-2.61914-2.13086-4.75-4.75-4.75zm-.19531 14.25488c0 .41406-.33594.75-.75.75h-5.70313c-.41407 0-.75-.33594-.75-.75v-7.74219c0-.41406.33593-.75.75-.75h5.70313c.41406 0 .75.33594.75.75z'/%3E%3Cpath fill='%23000' d='m21.78851 29.77768c-3.19629 3.1958-3.19629 8.39648 0 11.59229l2.82892 2.82922 6.3266-6.32697-8.09497-8.09454c-.29297-.29297-.76758-.29297-1.06055 0z'/%3E%3Cpath fill='%23000' d='m40.30951 47.23764-.91821-.91785-6.32617 6.32678 6.6897 6.6897c1.59766 1.59814 3.69629 2.39697 5.7959 2.39697 2.09863 0 4.19824-.79932 5.7959-2.39697 1.54883-1.54785 2.40137-3.60645 2.40137-5.79639 0-2.18945-.85254-4.24805-2.40137-5.7959-3.01758-3.01855-7.82129-3.18652-11.03711-.50635zm8.4043 9.46582c-.84375.84375-1.9668 1.30859-3.16309 1.30859-1.19531 0-2.31934-.46484-3.16309-1.30859-1.74414-1.74414-1.74414-4.58203 0-6.32617.84375-.84375 1.96777-1.30859 3.16309-1.30859 1.19629 0 2.31934.46484 3.16309 1.30859s1.30859 1.9668 1.30859 3.16309c0 1.1958-.46484 2.31934-1.30859 3.16309z'/%3E%3Cpath fill='%23000' d='m23.68695 47.25082c-3.21582-2.6792-8.01904-2.51221-11.03809.50635-3.1958 3.1958-3.1958 8.396 0 11.5918 1.59814 1.59814 3.69727 2.39697 5.7959 2.39697 2.09912 0 4.19824-.79883 5.79639-2.39697l6.68823-6.68823-6.32593-6.32642zm-2.07861 9.46533c-.87207.87207-2.01807 1.30811-3.16357 1.30811s-2.29102-.43604-3.16309-1.30811c-1.74414-1.74414-1.74414-4.58203 0-6.32617s4.58252-1.74414 6.32666 0 1.74414 4.58203 0 6.32617z'/%3E%3Cpath fill='%23000' d='m42.20697 29.79086c-.28125-.28125-.7793-.28125-1.06055 0l-14.95215 14.95264c-.29297.29297-.29297.76758 0 1.06055l5.26563 5.26563c.14063.14063.33105.21973.53027.21973s.38965-.0791.53027-.21973l9.68652-9.68701c3.19629-3.1958 3.19629-8.396 0-11.5918zm-9.14063 15.46729-.88477.88428c-.14648.14648-.33887.21973-.53027.21973-.19238 0-.38379-.07324-.53027-.21973-.29297-.29297-.29297-.76807 0-1.06055l.88477-.88428c.29395-.29346.76855-.29248 1.06055 0 .29297.29297.29297.76807 0 1.06055z'/%3E%3C/svg%3E");
}
.flow-section .step-icon .icon--flow-delivery {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='m302.627 219.429a8.535 8.535 0 0 1 -8.534 8.538h-68.959a8.533 8.533 0 0 1 0-17.066h68.959a8.532 8.532 0 0 1 8.534 8.528zm130.687 40.581v-247.855h-66.657v83.068a8.521 8.521 0 0 1 -14.553 6.033l-42.718-42.713-42.713 42.713a8.534 8.534 0 0 1 -6.038 2.5 8.729 8.729 0 0 1 -3.269-.651 8.56 8.56 0 0 1 -5.274-7.887v-83.063h-66.638v247.855zm-164.15-247.855h80.436v62.468l-34.18-34.18a8.531 8.531 0 0 0 -12.062 0l-34.189 34.18v-62.468zm-268.899 356.415a12.8 12.8 0 0 0 1.935 9.708l77.756 115.781a12.965 12.965 0 0 0 17.958 3.529l38-25.52a12.948 12.948 0 0 0 3.528-17.958l-77.737-115.782a12.983 12.983 0 0 0 -17.972-3.528l-38 25.51a12.867 12.867 0 0 0 -5.467 8.26zm89.035-20.251c12.152-9.052 24.709-18.42 31.8-24.151a8.626 8.626 0 0 0 1.114-1.08 85.834 85.834 0 0 1 117.545-12.279 8.582 8.582 0 0 0 5.2 1.759h79.757a18.055 18.055 0 0 1 0 36.11h-79.761a8.531 8.531 0 1 0 0 17.062h79.757a35.175 35.175 0 0 0 34.714-29.789l119.781-64.039c11-5.883 24.279-2.411 30.237 7.9 6.613 11.467-.859 23.788-9.27 30.859l-133.829 112.5a32.727 32.727 0 0 1 -22.151 8.071h-191.048a8.534 8.534 0 0 0 -5.4 1.929l-1.17.948-57.5-85.639z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='m302.627 219.429a8.535 8.535 0 0 1 -8.534 8.538h-68.959a8.533 8.533 0 0 1 0-17.066h68.959a8.532 8.532 0 0 1 8.534 8.528zm130.687 40.581v-247.855h-66.657v83.068a8.521 8.521 0 0 1 -14.553 6.033l-42.718-42.713-42.713 42.713a8.534 8.534 0 0 1 -6.038 2.5 8.729 8.729 0 0 1 -3.269-.651 8.56 8.56 0 0 1 -5.274-7.887v-83.063h-66.638v247.855zm-164.15-247.855h80.436v62.468l-34.18-34.18a8.531 8.531 0 0 0 -12.062 0l-34.189 34.18v-62.468zm-268.899 356.415a12.8 12.8 0 0 0 1.935 9.708l77.756 115.781a12.965 12.965 0 0 0 17.958 3.529l38-25.52a12.948 12.948 0 0 0 3.528-17.958l-77.737-115.782a12.983 12.983 0 0 0 -17.972-3.528l-38 25.51a12.867 12.867 0 0 0 -5.467 8.26zm89.035-20.251c12.152-9.052 24.709-18.42 31.8-24.151a8.626 8.626 0 0 0 1.114-1.08 85.834 85.834 0 0 1 117.545-12.279 8.582 8.582 0 0 0 5.2 1.759h79.757a18.055 18.055 0 0 1 0 36.11h-79.761a8.531 8.531 0 1 0 0 17.062h79.757a35.175 35.175 0 0 0 34.714-29.789l119.781-64.039c11-5.883 24.279-2.411 30.237 7.9 6.613 11.467-.859 23.788-9.27 30.859l-133.829 112.5a32.727 32.727 0 0 1 -22.151 8.071h-191.048a8.534 8.534 0 0 0 -5.4 1.929l-1.17.948-57.5-85.639z'/%3E%3C/svg%3E");
}
.flow-section .brief {
  /* 均一サイズ&中央寄せ用の箱を作る */
  height: 90px;
  display: grid;
  place-items: center;
  color: #282e31;
  font-size: 0.9rem;
  line-height: 1.4;
  opacity: 1;
  /* アニメーションさせるやつ */
  transform: translateY(0px) scale(1);
  transform-origin: center;
  transition: color 0.35s ease, transform 0.4s ease, opacity 0.35s ease;
}
@media (max-width: 768px) {
  .flow-section .brief {
    font-size: 0.9rem;
  }
}
.flow-section .step-detail {
  position: absolute;
  font-size: 0.9rem;
  width: 100%;
  color: #282e31;
  opacity: 0;
  height: 160px;
  align-items: center;
  transform: translateY(0.4rem);
  pointer-events: none;
  margin-top: 5px;
  display: flex;
  justify-content: center;
  text-align: center;
  transition: opacity 0.4s ease, transform 0.4s ease-out, max-height 0.4s ease;
}
@media (max-width: 768px) {
  .flow-section .step-detail {
    font-size: 0.9rem;
  }
}
.flow-section .flow-block.active .step-label {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.flow-section .arrow {
  position: relative;
  width: 24px;
  margin: 0 auto 5px auto;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  will-change: transform;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.flow-section .arrow svg {
  position: absolute;
  inset: 0;
  width: 20px;
  height: 20px;
  stroke: #282e31;
  stroke-width: 3;
  fill: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.flow-section .flow-block.active .card-title {
  opacity: 0;
}
.flow-section .flow-block.active .brief {
  opacity: 0;
  color: rgb(85.8426966292, 98.7191011236, 105.1573033708);
  transform: translateY(0px) scale(0.92);
}
.flow-section .flow-block.active .step-detail {
  opacity: 1;
  border-radius: 6px;
  pointer-events: auto;
  transform: translateY(0rem);
}
.flow-section .arrow-down {
  opacity: 1;
  transform: translateY(0px);
}
.flow-section .arrow-up {
  opacity: 0;
  transform: translateY(0px);
}
.flow-section .flow-block.active .arrow {
  transform: translateY(0px);
}
.flow-section .flow-block.active .arrow-down {
  opacity: 0;
}
.flow-section .flow-block.active .arrow-up {
  opacity: 1;
}

/* ==================================== */
/*    スマホ                       */
/*==================================== */
@media (max-width: 767px) {
  .icon {
    width: 2rem;
    height: 2rem;
    display: inline-block;
    background: linear-gradient(135deg, #32c2c7, #1796bd);
    -webkit-mask: no-repeat center/contain;
    mask: no-repeat center/contain;
  }
  .flow-block.step-after {
    margin-top: 5rem;
  }
  .flow-contents {
    padding: 5rem;
  }
  .flow-section {
    padding-top: 400px !important;
    margin-top: -50px !important;
    width: 100%;
  }
  .flow-section-divider {
    width: 100%;
    overflow: hidden;
  }
  .section.flow .container {
    padding: 0 0 50vw 0vw;
  }
  .section.flow .flow-block {
    width: var(--flow-mobile-card-size);
    /* 画面幅から左右の余白を引いたサイズ */
    height: var(--flow-mobile-card-size);
    margin-bottom: 3px;
    /* カード間の隙間 */
  }
  .section.flow .flow-card-lottie {
    /* 絶対指定を解除してフローに参加 */
    width: 100%;
    height: auto;
  }
  :root {
    --flow-mobile-card-size: 280px;
  }
  /* 繋ぎの線lottie*/
  .flow-card-conect-lottie {
    width: var(--flow-mobile-card-size);
    height: 35px;
    transform: scale(2.3);
    margin: 0 !important;
  }
  .timeline-wrapper {
    max-width: 100%;
    /* 幅いっぱいに広げる */
    padding: 0;
    /* 横に余白をつける */
  }
  .step-brief-detail {
    position: relative;
    width: 80% !important;
  }
  .step-icon .icon {
    width: 3rem !important;
    /* ← 箱のサイズ */
    height: 3rem !important;
    display: block;
    margin-top: -0.5rem;
    margin-bottom: -0.5rem;
  }
}
@media (min-width: 787px) {
  .flow-row {
    margin-bottom: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
  }
  /*PC用カードサイズ*/
  .flow-block {
    width: 280px !important;
    height: 280px !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    /* flexで縮まないように */
  }
  .flow-block.active .step-detail {
    opacity: 1;
    border-radius: 6px;
    pointer-events: auto;
    transform: translateY(0rem) !important;
  }
  .flow-card-conect-lottie {
    transform: rotate(-90deg) !important;
    margin-top: 0px;
    width: 30px;
    /* 配置用の枠は小さく */
    height: 280px;
    /* カードの高さに合わせる */
    overflow: visible;
    /* 中身がはみ出しても表示 */
    max-width: none !important;
    flex: 0 0 auto !important;
    /* flexで縮まないように */
  }
  /* 中身のLottie（SVGやcanvas）を拡大 */
  .flow-card-conect-lottie > * {
    transform: scale(13) !important;
    /* 2倍に拡大 */
    transform-origin: center;
    pointer-events: none !important;
  }
  .step-icon .icon {
    width: 200px;
    /* PCの横サイズ（必要なら調整してOK） */
    height: 40px;
    /* PCの縦サイズ */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
  }
  .icon-wrap {
    height: 25px;
    /* 既存運用をそのまま維持したいなら残す */
    margin-top: 0 !important;
    margin-bottom: 5px !important;
  }
}
.icon,
.icon-wrap,
.step-icon {
  -webkit-tap-highlight-color: transparent;
  /* タップ時の青いハイライトを無効化 */
  outline: none;
  /* 念のため */
}

/* タップ時に出る青い枠や背景を消す */
.icon-wrap,
.icon-wrap * {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.section.tools {
  overflow: hidden;
}
.section.tools .container {
  padding-bottom: 50px;
}
.section.tools .intro-block {
  margin-bottom: 2rem;
  color: #f9f9f9 !important;
}
.section.tools .tool-item {
  background: #ededed;
  border-radius: 6px;
  padding: 30px 50px 60px;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}
.section.tools .tool-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #282e31;
  border-radius: 6px;
  transform: translate(8px, 8px);
  pointer-events: none;
  z-index: -1;
}
.section.tools .tool-item ul {
  margin: 20px;
  list-style: square;
}
.section.tools .tool-item ul p {
  margin-left: -20px;
  list-style: square;
}
.section.tools .tool-item li {
  margin-left: 10px;
}
.section.tools .tool-item .tool-link {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-block;
  padding: 12px 20px;
  border-radius: 9999px;
  color: #282e31;
  text-decoration: none;
  font-weight: 600;
  border: solid 1px #282e31;
  transition: transform 0.2s ease, color 0.2s ease, border 0.2s ease;
}
.section.tools .tool-item .tool-link:hover {
  transform: translateY(0px);
  color: #21a1c5;
  border: solid 1px #21a1c5;
}
.section.tools .tool-item .tool-link:focus-visible {
  outline: 2px solid #21a1c5;
  outline-offset: 2px;
}

/* ベース：どの幅でもこれが効く（最後に置く） */
.tools-section .tool-item {
  box-sizing: border-box;
  /* パディング込みで計算 */
  inline-size: clamp(280px, 88vw, 900px);
  /* 画面幅に応じて 280px〜900px */
  margin-inline: auto;
  /* 中央寄せ */
  padding: 24px 50px 60px;
  /* 既存を維持 */
  position: relative;
  flex: 0 0 auto;
  /* 親flexでも伸ばさない */
}

/* ベース：どの幅でもこれが効く（最後に置く） */
.tools-section .tool-item {
  box-sizing: border-box;
  /* パディング込みで計算 */
  inline-size: clamp(280px, 88vw, 900px);
  /* 画面幅に応じて 280px〜900px */
  margin-inline: auto;
  /* 中央寄せ */
  padding: 24px 50px 60px;
  /* 既存を維持 */
  position: relative;
  flex: 0 0 auto;
  /* 親flexでも伸ばさない */
}

/* ================================
  方法A：flexで中央寄せ（推奨）
  ・スマホ時のみ .tool-item を縦フレックス＋中央寄せ
  ・説明テキストは左寄せを維持
================================ */
/* モバイルでの微調整だけを上書き */
@media (max-width: 767px) {
  .tools-section .tool-item {
    padding: 20px 20px 20px 20px;
    /* モバイルは内側余白を少しタイトに */
    inline-size: min(90vw, 900px);
  }
  .tools-section .tool-item .tool-link {
    position: static;
    right: auto !important;
    bottom: auto;
    display: block;
    text-align: center;
    margin: 16px auto 0;
    max-width: 300px;
  }
  .tools-section .container {
    padding: 20px 20px 50px 20px !important;
  }
  .tool-item {
    padding: 24px 20px 60px !important;
  }
}
.contact {
  font-size: 0.9rem;
  padding-top: 100px;
  padding-bottom: 100px;
  font-weight: 500;
}
@media (max-width: 768px) {
  .contact {
    font-size: 0.9rem;
  }
}
.contact .container {
  max-width: 900px;
  padding: 2rem;
}
.contact .supplement {
  color: #3e3e3e;
  margin-top: 1rem;
  font-size: 0.8rem;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .contact .supplement {
    font-size: 0.8rem;
  }
}

/* ==================================== */
/*   Tally埋め込み：ローディング & フェード */
/* ==================================== */
.contact {
  font-size: 0.9rem;
  padding-top: 0;
  padding-bottom: 150px;
  font-weight: 500;
}
@media (max-width: 768px) {
  .contact {
    font-size: 0.9rem;
  }
}
.contact .container {
  max-width: 900px;
  padding: 2rem;
}

/* ローディング表示 */
.contact-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem 1rem;
  color: #999999;
  font-size: 0.95rem;
}

/* スピナー */
.contact-loading .spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #999999;
  border-top: 3px solid #32c2c7;
  /* 青グラデ始点 */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* iframe本体（1か所に統一） */
.section.contact iframe {
  min-height: 500px;
  /* ガタつき防止の“高さだけ確保” */
  width: 100%;
  display: block;
  border: none;
  opacity: 0;
  /* フェードイン用 */
  transition: opacity 0.6s;
}

/* ロード完了でフェードイン */
.section.contact iframe.is-loaded {
  opacity: 1;
}

/* iframeにis-loadedが付いたらローディング非表示 */
.section.contact .container:has(iframe.is-loaded) .contact-loading {
  display: none;
}

.section.hero {
  position: relative;
  padding: 80px 0 300px 0;
  background: #c1c3c3;
  /* 四角（SVG）影 */
  /* 英字飾り */
}
.section.hero .has-shadow {
  filter: drop-shadow(3px 3px 3px rgba(36, 52, 80, 0.3));
}
.section.hero .hero-main {
  display: flex;
  flex-direction: column;
  /* スマホは縦積み */
  align-items: center;
}
.section.hero .visual-box {
  width: 240px;
  height: 240px;
}
.section.hero .visual-box svg {
  width: 100%;
  height: 100%;
  display: block;
}
.section.hero .hero-lottie {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  margin-top: -100px;
  width: 280px;
  height: 280px;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.section.hero .hero-lottie.is-inview {
  opacity: 1;
  transform: translateX(0);
}
.section.hero .hero-copy {
  font-size: 1.2rem;
  margin-top: 20px;
  width: 280px;
  height: 280px;
}
@media (max-width: 768px) {
  .section.hero .hero-copy {
    font-size: 1.2rem;
  }
}
.section.hero .vertical-en {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: "Caveat";
  font-size: 2.1rem;
  font-weight: 400;
  position: absolute;
  right: 10%;
  top: 120px;
  letter-spacing: 0.08em;
  line-height: 1.18;
  white-space: nowrap;
}
.section.hero .vertical-line {
  position: absolute;
  top: 55vw;
  width: 2px;
  right: 20%;
  height: 400px;
  background: #282e31;
}

/* PC表示時 */
@media (min-width: 768px) {
  .section.hero {
    padding: 120px 8vw;
    margin-bottom: 200px;
    /* 英字飾り */
  }
  .section.hero .hero-main {
    flex-direction: row;
    /* 横並び */
    align-items: flex-start;
    gap: 60px;
  }
  .section.hero .visual-box {
    flex-shrink: 0;
    width: 30vw;
    aspect-ratio: 1/1;
    height: auto;
    max-width: 400px;
  }
  .section.hero .hero-lottie {
    width: 30vw;
    aspect-ratio: 1/1;
    height: auto;
    max-width: 400px;
    margin-top: 20px;
    margin-left: -100px;
    /* 四角より少し下げる */
  }
  .section.hero .vertical-line {
    top: 200px !important;
    right: 15%;
    width: 2px;
    height: 400px;
  }
  .section.hero .vertical-en {
    right: 10%;
  }
}
@media (max-width: 767px) {
  .section.hero {
    padding: 80px 0 100px 0;
    /* 英字飾り */
  }
  .section.hero .hero-main {
    align-items: flex-start;
    /* 左寄せ */
    width: 100%;
    padding-left: 5vw;
    /* 左余白調整 */
  }
  .section.hero .visual-box {
    margin-left: 0;
  }
  .section.hero .container {
    padding-bottom: 0px;
  }
  .section.hero .hero-lottie {
    margin-left: -20px;
    margin-top: -30px;
  }
  .section.hero .vertical-line {
    right: 15%;
  }
  .section.hero .vertical-en {
    font-size: 1.8rem;
    right: 5%;
  }
}
/* ====================================*/
/* 丸型仕切り*/
/*==================================== */
.section-divider {
  position: relative;
  text-align: center;
  background: #c1c3c3;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 100%;
}
.section-divider .divider-curve--top {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: visible;
}
.section-divider .divider-curve--top svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}
.section-divider .divider-curve--top svg path {
  fill: #dbdbdb;
}

.divider-curve--bottom {
  position: relative;
  background-color: #282e31 !important;
  width: 100%;
  height: 200px;
  overflow: hidden;
  z-index: 1;
}
.divider-curve--bottom svg {
  position: absolute;
  margin-top: -10px;
  /* 微調整 */
  top: 10px;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
}
.divider-curve--bottom svg path {
  fill: #dbdbdb;
}

/* ====================================*/
/* セクションタイトル統一デザイン*/
/*==================================== */
.dot-group {
  margin-bottom: 3rem;
}
.dot-group .dot {
  box-shadow: 0 3px 7px rgba(30, 40, 60, 0.15);
  margin: 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #32c2c7, #1796bd);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dot-group .dot.small {
  width: 10px;
  height: 10px;
}
.dot-group .dot.medium {
  width: 24px;
  height: 24px;
}
.dot-group .dot.large {
  width: 140px;
  height: 140px;
  font-size: 1.6rem;
  font-weight: 500;
  font-family: "Monomaniac One", "Noto Sans JP";
  color: #f9f9f9;
  z-index: 20;
}

@media (max-width: 767px) {
  /* ====================================*/
  /* title*/
  /*==================================== */
  .container {
    display: flex;
    justify-content: center;
    /* 横中央 */
    align-items: center;
    /* 縦中央 */
    flex-direction: column;
  }
  .dot-group {
    margin-bottom: 3rem;
    left: 50%;
    display: flex;
    flex-direction: column;
    /* 縦方向に積む */
    align-items: center;
    /* 横中央揃え */
    gap: 8px;
  }
  .dot-group .dot.small {
    width: 5px;
    height: 5px;
  }
  .dot-group .dot.medium {
    width: 12px;
    height: 12px;
  }
  .dot-group .dot.large {
    width: 80px;
    height: 80px;
    font-size: 1.5rem;
    font-weight: 500;
  }
}
.site-footer {
  background: #282e31;
  color: #f9f9f9;
  padding: 40px 20px;
  text-align: center;
  font-size: 0.9rem;
  /* ▼ 1段目：ナビゲーションリンク群 */
  /* ▼ 2段目：コピーライト */
  /* ▼ 3段目：SNSリンク */
}
.site-footer .footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.site-footer .footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer .footer-nav ul li a {
  color: #f9f9f9;
  text-decoration: none;
  transition: color 0.25s ease;
}
.site-footer .footer-nav ul li a:hover {
  color: #21a1c5;
}
.site-footer .footer-copy {
  font-size: 0.8rem;
  opacity: 0.7;
}
.site-footer .footer-sns {
  margin-top: 0.3rem;
}
.site-footer .footer-sns a {
  color: #f9f9f9;
  transition: color 0.25s ease;
}
.site-footer .footer-sns a:hover {
  color: #21a1c5;
}
.site-footer .footer-sns a svg {
  display: block;
  width: 15px;
  height: 15px;
}
.site-footer .logo-icon {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  opacity: 0.9;
  width: 3rem;
  height: auto;
}

footer::after {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  margin: 15px auto 0;
  background: url("../images/flotidot-logo.svg") no-repeat center/contain;
  opacity: 0.8;
}

/* ==================================== */
/*  一度だけ下からふわっと出現（共通）   */
/* ==================================== */
/* 初期状態：軽く下に、非表示 */
.reveal-once {
  opacity: 0;
  transform: translateY(10px);
  will-change: opacity, transform;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* 表示トリガー後：元位置＆不透明 */
.reveal-once.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 速度を少しだけ落としたいバリエーション*/
.reveal-once.slow {
  transition-duration: 0.9s;
}

/* 速度を少しだけ早くしたいバリエーション */
.reveal-once.fast {
  transition-duration: 0.3s;
}

/* 遅延バリエーション */
.reveal-once.delay-1 {
  transition-delay: 0.1s;
}

.reveal-once.delay-2 {
  transition-delay: 0.15s;
}

.reveal-once.delay-3 {
  transition-delay: 0.2s;
}

.reveal-once.delay-4 {
  transition-delay: 0.25s;
}

.reveal-once.delay-5 {
  transition-delay: 0.3s;
}

.reveal-once.delay-6 {
  transition-delay: 0.35s;
}

.reveal-once.delay-7 {
  transition-delay: 0.4s;
}

.reveal-once.delay-8 {
  transition-delay: 0.45s;
}

.reveal-once.delay-9 {
  transition-delay: 0.5s;
}

/* タイトル専用 */
.reveal-title {
  opacity: 0;
  transform: translateY(24px); /* 本文より少し大きめに動かす */
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-title.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 動きに弱い利用者への配慮：移動はやめてフェードのみ or すぐ表示 */
@media (prefers-reduced-motion: reduce) {
  .reveal-once {
    transform: none;
    transition: opacity 0.4s ease;
  }
  .reveal-title {
    transform: none;
    transition: opacity 0.4s ease;
  }
}
/* スマホ：ホバーUIを初期表示に強制 */
html.is-touch .video-thumb .hover-ui {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto;
}

/* スマホ：:hoverによる出し入れを無効化（保険） */
html.is-touch .video-thumb:hover .hover-ui,
html.is-touch .swiper-slide:hover .hover-ui {
  opacity: 1 !important;
  visibility: visible !important;
}

/* スマホ：もしPC用に「初期非表示」を強く指定している複合セレクタがある場合の対抗策 */
html.is-touch body .video-thumb .hover-ui {
  opacity: 1 !important;
}/*# sourceMappingURL=style.css.map */