/* FLOWのヒーロー、見出し、ボタンの共通設定 */
#content.flow .flow-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  height: 380px;
  background-image: url("flow-hero-kanda.webp");
  background-position: center calc(100% - 25vh);
  background-size: 100% auto;
  animation: flow-hero-zoom 40s ease-in-out infinite alternate;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
#content.flow .flow-hero__copy {
  text-align: center;
}
#content.flow .flow-hero__title {
  margin: 0;
  color: #ffffff;
  font: 400 60px/1.15 "Oswald", "Arial Narrow", Arial, sans-serif;
  letter-spacing: 0.07em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
#content.flow .flow-hero__subtitle {
  margin: 7px 0 0;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
#content.flow section.cont a.flow-button {
  border-color: #666666;
  transform-origin: center;
  transition: transform 0.6s ease, opacity 0.6s ease;
}
#content.flow section.cont a.flow-button:hover {
  opacity: 1;
  transform: scale(1.03);
}
#content.flow section.cont01.cont > .inner {
  padding-top: 47px;
}
/* スマホ：画像をヒーロー内に収め、写真の下側を基準にゆっくり拡大する */
@media (max-width: 760px) {
  #content.flow .flow-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    height: 230px;
    background-image: none;
    background-attachment: scroll;
    animation: none;
  }
  #content.flow .flow-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("flow-hero-kanda.webp") center bottom / cover no-repeat;
    transform-origin: center bottom;
    animation: flow-hero-mobile-zoom 40s ease-in-out infinite alternate;
    pointer-events: none;
  }
  #content.flow .flow-hero__copy {
    position: relative;
    z-index: 1;
  }
  #content.flow .flow-hero__title {
    font-size: 46px;
  }
  #content.flow .flow-hero__subtitle {
    font-size: 14px;
  }
}
@keyframes flow-hero-mobile-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
/* 6つの手順を一覧で見せる進行ライン */



/* 番号リンク：上下に頂点がある小さな六角形。共通ボタンの余白を解除する */


#content.flow .step[id] {
  scroll-margin-top: 120px;
}
@keyframes flow-hero-zoom {
  from { background-size: 100% auto; }
  to { background-size: 108% auto; }
}
@media (prefers-reduced-motion: reduce) {
  #content.flow .flow-hero,
  #content.flow .flow-hero::before { animation: none; }
}

/* スマホでも6つの番号を横一列に収める */
@media (max-width: 760px) {
  
  
  
  
  
}

.po-flow-screen-scroll {
  position: fixed;
  z-index: 99990;
  left: calc(50% - 22px);
  width: 44px;
  box-sizing: border-box;
  bottom: calc(max(8px, env(safe-area-inset-bottom)) + 6px);
  transform: translateY(0);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #fff;
  mix-blend-mode: normal;
  pointer-events: none;
  user-select: none;
  font:
    400 10px/1.4 "Oswald",
    "Arial Narrow",
    Arial,
    sans-serif;
  letter-spacing: 0.12em;
}
.po-flow-screen-scroll i {
  display: block;
  width: 1px;
  height: 24px;
  overflow: hidden;
}
.po-flow-screen-scroll i::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  animation: po-flow-screen-scroll-line 2s ease-in-out infinite;
}
@keyframes po-flow-screen-scroll-line {
  0% {
    transform: translateY(-105%);
  }
  70%,
  100% {
    transform: translateY(105%);
  }
}
@media (max-width: 760px) {
  .po-flow-screen-scroll {
    gap: 3px;
    /* 5拠点共通：麹町Chromeの基準32.8976px。安全余白は加算せず大きい方を採用。 */
    bottom: max(32.8976377953px, env(safe-area-inset-bottom, 0px));
  }
  .po-flow-screen-scroll i {
    height: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .po-flow-screen-scroll i::after {
    animation: none;
  }
}

/* 中央の上矢印：文字・縦棒とは分け、矢印の領域だけクリック可能。 */
.po-flow-screen-scroll .po-screen-back-top {
  display: grid;
  place-items: center;
  width: 44px;
  height: 32px;
  margin: 0 0 -14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}
.po-flow-screen-scroll .po-screen-back-top svg {
  display: block;
  width: 18px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}
.po-flow-screen-scroll .po-screen-back-top:hover svg {
  transform: translateY(-2px);
}
.po-flow-screen-scroll .po-screen-back-top:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}
@media (pointer: coarse) {
  .po-flow-screen-scroll .po-screen-back-top {
    height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .po-flow-screen-scroll .po-screen-back-top svg {
    transition: none;
  }
}

.po-flow-screen-scroll .po-screen-back-top[hidden] {
  display: none;
}
.po-flow-screen-scroll[data-position="hero"] .po-screen-back-top {
  display: none;
}

.po-flow-screen-scroll {
  mix-blend-mode: normal;
  color: var(--po-scroll-ink, #fff);
}


#content.flow {padding-top:var(--flow-header-offset,0px);overflow-anchor:none;}
#content.flow .flow-breadcrumb {display:flex;gap:10px;max-width:1120px;box-sizing:border-box;margin:20px auto 0;padding:0 24px;font-size:12px;line-height:1.6;}
#content.flow .flow-breadcrumb a {color:inherit;}
body:has(#content.flow) footer .pagetop {display:none!important;}
@media(max-width:760px){#content.flow .flow-hero::before {background-image:url("flow-hero-kanda-mobile.webp");}}

.po-flow-index {
  display: flex;
  align-items: stretch;
  height: 33.1875px;
  margin: 0;
  padding: 0 max(28px, calc((100% - 1120px) / 2));
  background: #eaeae3;
  box-shadow: inset 0 -1px #d9d9d2;
  overflow-x: auto;
  scrollbar-width: none;
  z-index: 89;
}
.po-flow-index::-webkit-scrollbar {
  display: none;
}
.po-flow-index.is-fixed {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--po-index-top, 0px);
}
.po-flow-index a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  flex: 1 0 auto;
  height: 100%;
  padding: 0 14px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
.po-flow-index__number {
  font:
    400 12px/1 Oswald,
    sans-serif;
  color: var(--accent);
}
.po-flow-index a:is(:hover, :focus-visible) {
  background: #171717;
  color: #fff;
}
.po-flow-index a:is(:hover, :focus-visible) span {
  color: inherit;
}

#content.flow {--accent:#b3312a;} .po-flow-index a {box-sizing:border-box;color:#222;text-decoration:none;margin:0;border:0;} #content.flow .flow-hero {background-position:center bottom;background-size:cover;background-attachment:scroll;animation:none;} #content.flow .step[id] {scroll-margin-top:var(--jump-offset,130px);} @media(max-width:760px){.po-flow-index,.po-flow-index.is-fixed{height:35px;padding:0 12px;}.po-flow-index a{font-size:11px;padding:0 12px;gap:8px;}}
#content.flow section.cont a.flow-button {background:#171717;border-color:#171717;color:#fff;opacity:1;transition:background-color .3s ease,border-color .3s ease,transform .6s ease;} #content.flow section.cont a.flow-button:is(:hover,:focus-visible) {background:#555;border-color:#555;color:#fff;opacity:1;transform:scale(1.025);}
/* Alternate step backgrounds, starting with white. */
#content.flow section.cont01.cont,#content.flow section.cont03.cont,#content.flow section.cont05.cont {background:#fff;}
#content.flow section.cont02.cont,#content.flow section.cont04.cont,#content.flow section.cont06.cont {background:#edede3;}
#content.flow section.cont .arrow img {display:none;}
#content.flow section.cont .arrow {width:0;height:0;padding:0;margin:0 auto;border-left:21px solid transparent;border-right:21px solid transparent;border-top:18px solid #fff;}
#content.flow section.cont03.cont .arrow,#content.flow section.cont05.cont .arrow {border-top-color:#edede3;}
/* Transparent hexagonal step labels and section chevrons. */
#content.flow section.cont .flow-step-badge {display:flex;align-items:center;justify-content:center;gap:4px;width:66px;height:76px;padding:0;margin:0 auto 24px;background:#171717;color:#fff;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);font-family:Oswald,sans-serif;}
#content.flow section.cont .flow-step-badge span {font-size:13px;line-height:1;}
#content.flow section.cont .flow-step-badge strong {font-size:28px;font-weight:500;line-height:1;}
#content.flow section.cont {position:relative;}
#content.flow section.cont .arrow {display:none!important;}
#content.flow section.cont02.cont::before,#content.flow section.cont03.cont::before,#content.flow section.cont04.cont::before,#content.flow section.cont05.cont::before,#content.flow section.cont06.cont::before {content:"";position:absolute;z-index:2;top:0;left:50%;transform:translateX(-50%);width:0;height:0;border-left:33px solid transparent;border-right:33px solid transparent;border-top:30px solid #fff;pointer-events:none;}
#content.flow section.cont03.cont::before,#content.flow section.cont05.cont::before {border-top-color:#edede3;}
/* Viewport-fixed photo clipped by the moving hero. */
#content.flow .flow-hero {position:relative;isolation:isolate;clip-path:inset(0);overflow:hidden;background:none;animation:none;}
#content.flow .flow-hero::before {content:"";position:fixed;z-index:0;left:0;right:0;top:var(--flow-photo-top,140px);height:var(--flow-photo-height,380px);background:url("flow-hero-kanda.webp") center 55% / cover no-repeat;transform:none;animation:none;pointer-events:none;}
#content.flow .flow-hero__copy {position:relative;z-index:1;}
@media(max-width:760px){#content.flow .flow-hero::before {background-image:url("flow-hero-kanda-mobile.webp");}}
@media(prefers-reduced-motion:reduce){#content.flow .flow-hero::before {position:absolute;top:0;height:100%;}}
/* Dark photographic treatment keeps the white heading legible. */
#content.flow .flow-hero::after {content:"";position:absolute;inset:0;z-index:0;background:rgba(0,0,0,.30);pointer-events:none;}
#content.flow .flow-hero__copy {z-index:1;}
.flow-mobile-break {display:none;}
#content.flow .flow-visit-items {list-style:none;padding:0;margin:12px auto;text-align:center;font:inherit;}
#content.flow .flow-visit-items li {float:none;width:auto;margin:0;padding:0;}
#content.flow .flow-visit-items li::before {content:"・";}
@media(max-width:760px){.flow-mobile-break {display:initial;}#content.flow .flow-visit-items {text-align:left;width:100%;box-sizing:border-box;padding-left:max(0px,calc(50% - 56px));}#content.flow .flow-visit-items li {padding-left:1em;text-indent:-1em;}}

/* Shared hero height: desktop/tablet 420px, mobile 330px. */
#content.flow .flow-hero { box-sizing: border-box; height: 420px !important; min-height: 0 !important; max-height: none !important; }
@media (max-width: 760px) {
  #content.flow .flow-hero { height: 330px !important; }
}