/*キャプションBOXの余白消し*/
@media (min-width: 600px) {
  .cap_box_content {
    padding: 0;
  }
}

@media (min-width: 300px) {
  .cap_box_content {
    padding: 0;
  }
}

/*キャプションBOXのテキスト調整*/
.wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* 上寄せ */
  margin-top: -8em;
  /* 上にスペースを空けてバランス調整 */
  height: 100%;
}

/*topページのフッター上余白*/
.l-content{
  margin-bottom: 0!important;
}



/*セクションタイトル調整*/
.message-box-property {
  padding-top: 1.5rem !important;
}

@media (max-width: 850px) {
  .message-box-property {
    padding-top: 0 !important;
  }
}

/*リッチボックスのエリア調整*/
.back-white {
  background-color: #fff;
  border-radius: 20px;
  /* 黒の実線・1px */
}

/*join-usセクションイラスト調整*/
.negative-margin {
  margin-top: -2rem !important;
}

.picture-adjustment {
  position: relative;
}

.picture-adjustment-img {
  position: absolute;
  bottom: -8rem;
  right: -1rem;
}

.picture-adjustment-img-second {
  position: absolute;
  bottom: -6rem;
  left: -1rem;
}

@media (max-width: 1050px) {

  .picture-adjustment-img,
  .picture-adjustment-img-second {
    width: 240px;
  }
}

@media (max-width: 430px) {
  .picture-adjustment-img {
    width: 140px;
    bottom: -4rem;

  }

  .picture-adjustment-img-second {
    width: 140px;
    bottom: 0;


  }
}

/*GoogleMAP下のテキストaddress調整*/
.address-box {
  font-style: normal;
  padding: 0 1rem 1rem 1rem;
  margin-top:-0.5rem;
  font-weight: 500;
}
/*テキスト折り返し禁止*/
.no-wrap {
    white-space: nowrap;
}


/*joinus　船団員の声*/
.join-us-box {
  padding: 2rem;
}

.swell-block-fullWide__SVG.-bg.-top {
  z-index: 1;
}

.swell-block-fullWide__inner {
    z-index: 2;
}

/* =======================
   Timeline（SWELL用・CSS）
   ======================= */
.tdc-timeline {
  --n: 10;
  /* JSで上書き */
  --base: 80vw;
  --max: 1000px;
  --parent-width: min(var(--max), var(--base));
  --dot: 25px;
  --dot-sm: 17px;
  --track-h: 5px;
  --anim-ms: 700;
  /* ← 全角スペース除去済み */
  --active: #2C3E50;
  --inactive: #AEB6BF;
  --text: #424949;
  color: var(--text);
  padding: 0 0;
}

/* 見出し */
.tdc-timeline h3 {
  text-align: left;
  font-weight: 600;
  font-size: 20px;
}

.tdc-timeline h3 span {
  white-space: nowrap;
}


/* ラッパー */
.tdc-timeline .flex-parent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* レール（背景） */
.tdc-timeline .input-flex-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: var(--parent-width);
  max-width: var(--max);
  height: 100px;
  position: relative;
  z-index: 0;
  --progress-px: 0px;
  /* JSが更新 */
  background:
    linear-gradient(var(--active), var(--active)) left center / var(--progress-px) var(--track-h) no-repeat,
    linear-gradient(var(--inactive), var(--inactive)) left center / 100% var(--track-h) no-repeat;
}

/* ドット（ボタン） */
.tdc-timeline .input {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background-color: var(--inactive);
  position: relative;
  cursor: pointer;
  outline: none;
  transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease;
  color: inherit;
  line-height: 1;
  z-index: 1;
}

.tdc-timeline .input:hover {
  transform: scale(1.06);
}

.tdc-timeline .input:focus-visible {
  box-shadow: 0 0 0 3px rgba(44, 62, 80, .25);
}

/* 擬似要素の線は使わない（食い込み防止） */
.tdc-timeline .input::before,
.tdc-timeline .input::after {
  content: none !important;
}

/* 状態色 */
.tdc-timeline .input.is-past,
.tdc-timeline .input.is-active {
  background-color: var(--active);
}

/* 年とツールチップ */
.tdc-timeline .input span {
  width: 1px;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  visibility: hidden;
}

.tdc-timeline .input span::after {
  content: attr(data-year);
  visibility: visible;
  position: absolute;
  left: 50%;
  top: 25px;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}

.tdc-timeline .input span::before {
  content: attr(data-info);
  visibility: visible;
  position: absolute;
  left: 50%;
  top: -65px;
  transform: translateX(-5px) rotate(-45deg);
  width: 70px;
  font-size: 12px;
  text-indent: -10px;
  white-space: nowrap;
  color: var(--text);
}

/* 説明文 */
.tdc-timeline .description-flex-container {
  width: var(--parent-width);
  max-width: var(--max);
  font-weight: 400;
  font-size: 22px;
  margin-top: 1rem;
  text-align: center;
}

.tdc-timeline .description-flex-container p {
  display: none;
  margin: 0;
}

.tdc-timeline .description-flex-container p.is-active {
  display: block;
}

/* 進捗の伸び余裕（既定値のまま維持） */
.tdc-timeline {
  --progress-overshoot: 30px;
}

@media (min-width: 1250px) {
  .tdc-timeline {
    --parent-width: var(--max);
  }
}

/* “ふわっと”強調はボタンのみに限定 */
.tdc-timeline button.input.is-active {
  transform: scale(1.08);
  box-shadow: 0 0 0 6px rgba(44, 62, 80, .12);
}

/* 850px以下：ドット小さく、レール細く */
@media (max-width: 850px) {
  .tdc-timeline {
    --track-h: 3px;
  }

  .tdc-timeline .input {
    width: var(--dot-sm);
    height: var(--dot-sm);
  }
}

/* 600px以下：モバイルUI（丸ラベル配置／レール背景なし） */
@media (max-width: 600px) {
  .tdc-timeline .flex-parent {
    justify-content: initial;
  }

  .tdc-timeline .input-flex-container {
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    height: auto;
    margin-top: 15vh;
    background: none;
  }

  .tdc-timeline .input {
    width: 60px;
    height: 60px;
    margin: 0 10px 50px;
    background-color: var(--inactive);
  }

  .tdc-timeline .input.is-past,
  .tdc-timeline .input.is-active {
    background-color: var(--active);
  }

  .tdc-timeline .input span {
    width: 100%;
    height: 100%;
    visibility: visible;
    display: block;
  }

  .tdc-timeline .input span::before {
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%) rotate(0);
    text-indent: 0;
    text-align: center;
  }

  .tdc-timeline .input span::after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ECF0F1;
    font-size: 15px;
  }

  .tdc-timeline .description-flex-container {
    margin-top: 30px;
    text-align: center;
  }
}

/* ---- 飾り（■＋テキスト）---- */
.tdc-timeline {
  --deco-x: 18%;
  --deco-size: 12px;
  --deco-tilt: 0deg;
  --deco-dy: 0px;
}

.tdc-timeline .input-flex-container {
  position: relative;
}

.tdc-timeline .timeline-deco {
  position: absolute;
  left: var(--deco-x);
  top: calc(50% + var(--deco-dy));
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.tdc-timeline .timeline-deco::before {
  content: "";
  display: block;
  inline-size: var(--deco-size);
  block-size: var(--deco-size);
  background: var(--active);
  border-radius: 2px;
}

.tdc-timeline .timeline-deco::after {
  content: attr(data-text);
  position: absolute;
  left: 50%;
  top: -24px;
  transform: translateX(-5px) rotate(var(--deco-tilt));
  font-size: 12px;
  font-weight: 600;
  color: #ff6347;
  white-space: nowrap;
}

/* 装飾は完全静止（テーマの汎用アニメを遮断） */
.tdc-timeline .timeline-deco,
.tdc-timeline .timeline-deco::before,
.tdc-timeline .timeline-deco::after {
  transition: none !important;
  animation: none !important;
}

.tdc-timeline .timeline-deco:active,
.tdc-timeline .timeline-deco:focus,
.tdc-timeline .timeline-deco:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  transform: translate(-50%, -50%) !important;
}

/* モバイルで邪魔なら非表示 */
@media (max-width: 600px) {
  .tdc-timeline .timeline-deco {
    display: none;
  }
}

/* ==============================
   変数合成方式（最終版）
   ============================== */

/* 共通：最終的な transform は合成する */
.info-fade,
.info-flip {
  --shift-y: 0;
  /* レイアウト用（JSが更新） */
  --anim-xform: translateY(0);
  /* アニメ用（CSSクラスで更新） */

  transform: translateY(var(--shift-y)) var(--anim-xform);
  transition: transform .8s ease, opacity .8s ease;
  /* 時間はお好みで */
  will-change: transform, opacity;
}

/* ---- Fade ---- */
.info-fade {
  opacity: 0;
  /* 初期は少し下げる（視差っぽさ） */
  --anim-xform: translateY(20px);
}

.info-fade.in-view {
  opacity: 1;
  --anim-xform: translateY(0);
}

/* ---- Flip ---- */
.info-flip {
  opacity: 0;
  transform-origin: top center;
  /* 起点は上辺 */
  backface-visibility: hidden;
  /* 初期は手前に倒す。perspective もアニメ側に含める */
  --anim-xform: perspective(800px) rotateX(-90deg);
}

.info-flip.in-view {
  opacity: 1;
  --anim-xform: perspective(800px) rotateX(0deg);
}

/* 動き控えめ設定 */
@media (prefers-reduced-motion: reduce) {

  .info-fade,
  .info-flip {
    transition: none;
    opacity: 1;
    --anim-xform: translateY(0);
  }
}

.custom-button {
  display: block;
  /* 親要素の幅いっぱいに広げる */
  width: 100%;
  /* 親要素の幅いっぱいに広げる */
  padding: 0.5rem 1rem;
  background-color: #4169e1;
  /* 黒背景 */
  color: #fff;
  /* 白文字 */
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  overflow: hidden;
  /* ホバーアニメーションではみ出る部分を隠す */
  position: relative;
  z-index: 1;
  /* ホバー要素より前面に */
  transition: color 0.4s ease-in-out;
  /* 文字色の変化を滑らかに */
}

.custom-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #333, rgb(106, 141, 175));
  /* グラデーションの背景 */
  transform: translateX(-100%);
  /* 左に隠しておく */
  transition: transform 0.4s ease-in-out;
  /* 変形を滑らかに */
  z-index: -1;
  /* ボタンの下に配置 */
}

.custom-button:hover {
  color: #fff;
  /* ホバー時の文字色（変化なしでも良いが見やすさのため記載） */
}

.custom-button:hover::before {
  transform: translateX(0);
  /* 左からスライドして表示 */
}

/*モーダル関係*/
.modal-card.is-hidden {
  display: none;
}

/* モーダルの層を最前面へ */
.tdc-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.tdc-modal[aria-hidden="false"] {
  display: block;
}

.tdc-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 9998;
}

.tdc-modal__dialog {
  position: relative;
  margin: 15vh auto;
  max-width: min(920px, 92vw);
  max-height: 86vh;
  background: #fff;
  border-radius: 12px;
  overflow: auto;
  z-index: 10000;
}

@media (max-width: 599px) {
  .tdc-modal__dialog {
    position: relative;
    margin: 9vh auto;
  }
}


.tdc-modal__header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.tdc-modal__title {
  margin: 0;
  font-size: 1.25rem;
}

/* バッテンのヒットエリア改良：最低44pxのタップ領域＋見た目は据え置き */
.tdc-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  /* 見た目の文字サイズはそのまま */
  font-size: 28px;
  line-height: 1;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 10001;

  /* 当たり判定をしっかり確保 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  /* タップ領域 */
  height: 44px;
  /* タップ領域 */
  padding: 0;
  /* アイコンがズレないように */
}

/* さらに外側まで当たり判定を拡張（視覚には出ない） */
.tdc-modal__close::before {
  content: "";
  position: absolute;
  inset: -6px;
  /* ヒットエリアを上下左右に+6px拡張 */
}

/* ホバー/フォーカスで分かりやすく（任意） */
.tdc-modal__close:focus-visible,
.tdc-modal__close:hover {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .08) inset;
  border-radius: 8px;
}

/* SPはもう一回り大きめ（任意） */
@media (max-width: 599px) {
  .tdc-modal__close {
    font-size: 32px;
    width: 48px;
    height: 48px;
  }
}


/* 背景スクロールを止める */
html.tdc-modal-open,
body.tdc-modal-open {
  overflow: hidden !important;
}

/* （任意）SPで×を少し大きく */
@media (max-width: 599px) {
  .tdc-modal__close {
    font-size: 32px;
  }
}