/* ===========================
  ボタン設定
=========================== */
.more-link {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  margin: clamp(1.5rem, 0.926rem + 2.35vw, 3.75rem) 0 0 0;
}
.more-link:hover {
  opacity: 1;
}
/* 丸い外枠 */
.circle-arrow {
  width: 80px;
  height: 80px;
  border: 2px solid #050505;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
  overflow: hidden;
  min-width: 60px;
  transition: background 0.3s ease;
}
/* テキスト */
.more-text {
  color: #050505;
  font-size: clamp(1rem, 0.936rem + 0.26vw, 1.25rem);
  letter-spacing: 0.1em;
  font-weight: 600;
  text-wrap: nowrap;
}
/* ---- 共通変数 ---- */
.more-link { 
  --dur: .48s; 
  --gap: 24px; 
  --shift: 35px; 
  --ease: cubic-bezier(.2,.8,.2,1);
}
/* --- 矢印部分（極密着Ver.） --- */
.arrow-line,
.arrow-tip {
  position: absolute;
  top: 50%;
  transition: transform var(--dur) var(--ease), background .2s linear, border-color .2s linear;
}
/* 胴体（棒） */
.arrow-line {
  left: 50%;
  width: 16px;
  height: 2px;
  background: #050505;
  transform: translate(-7.5px, -50%);
  transform-origin: left center;
}
/* 先端（＞部分） */
.arrow-tip {
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid #050505;
  border-right: 2px solid #050505;
  transform: translate(-2px, -50%) rotate(45deg);
}
/* --- テキストの初期状態 --- */
.more-link .more-text {
  transition: transform var(--dur) var(--ease), color .2s linear;
  will-change: transform;
}
/* PC専用アニメーション（769px以上でのみ有効） */
@media (min-width: 769px) {

  /* pill化・反転 */
  .circle-arrow {
    transition:
      width var(--dur) var(--ease),
      border-radius var(--dur) var(--ease),
      background var(--dur) var(--ease),
      border-color var(--dur) var(--ease);
      min-width: unset;
      border-radius: 50px;
  }

  .more-link:hover .circle-arrow {
    background: #050505;
  }

  /* 色反転 */
  .more-link:hover .arrow-line {
    background: #FFF;
    transform: translate(-7.5px, -50%);
  }
  .more-link:hover .arrow-tip {
    border-color: #FFF;
    transform: translate(-2px, -50%) rotate(45deg);
  }

  /* PC用 .is-hover クラス対応（JS制御時） */
  .more-link.is-hover .circle-arrow {
    background: #050505;
  }
  .more-link.is-hover .arrow-line {
    background: #FFF;
    transform: translate(-7.5px, -50%);
  }
  .more-link.is-hover .arrow-tip {
    border-color: #FFF;
    transform: translate(-2px, -50%) rotate(45deg);
  }
}
/* スマホ（768px以下）はアニメーション無効（静止） */
@media (max-width: 768px) {
  .circle-arrow {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: transparent;
    border-color: #050505;
  }

  .arrow-line,
  .arrow-tip {
    transition: none;
  }

  .more-link:hover .circle-arrow,
  .more-link:hover .arrow-line,
  .more-link:hover .arrow-tip,
  .more-link:hover .more-text {
    transform: none !important;
    color: inherit;
    background: transparent;
    border-color: #050505;
  }
}
/* PCだけ hover を許可（デスクトップ＆ポインタが細かい環境） */
@media (min-width: 769px) and (any-hover: hover) and (any-pointer: fine) {
    .more-link:hover .circle-arrow {
        background: #050505;
        transition: background var(--dur) var(--ease);
    }
    .more-link:hover .arrow-line {
        background: #FFF;
        transform: translate(-7.5px, -50%);
    }
    .more-link:hover .arrow-tip {
        border-color: #FFF;
        transform: translate(-2px, -50%) rotate(45deg);
    }
}
/* タッチ端末 & スマホは"完全停止 */
/* pointer: coarse = プライマリデバイスがタッチの場合のみ（タッチスクリーン付きノートPCは除外） */
@media (max-width: 768px), (hover: none), (pointer: coarse) {
    /* 状態を初期に強制固定（アニメ/トランジションも殺す） */
    .more-link {
      gap: 24px !important;
    }
    .circle-arrow {
        width: 60px !important;             /* 任意：小さめ固定。不要なら削除可 */
        height: 60px !important;
        border-radius: 50% !important;
        background: transparent !important;
        border-color: #050505 !important;
        overflow: hidden;                    /* はみ出し保護 */
        min-width: 60px;
    }
    .arrow-line,
    .arrow-tip,
    .more-text,
    .circle-arrow,
    .more-link {
        /* transition: none !important; */
        animation: none !important;
    }
    .more-link:hover .circle-arrow { 
        width: 60px !important;
        height: 60px !important;
        background: transparent !important;
        border-color: #050505 !important;
    }
    .more-link:hover .arrow-line {
        background: #050505 !important;
        transform: translate(-7.5px, -50%) !important;
    }
    .more-link:hover .arrow-tip {
        border-color: #050505 !important;
        transform: translate(-2px, -50%) rotate(45deg) !important;
    }
    .more-link:hover .more-text {
        transform: none !important;
        color: inherit !important;
    }
}


/* ===========================
  小さいボタン設定
=========================== */
.small-more-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 7.19vw;
  gap: 24px;
  color: #050505;
  text-decoration: none;
  cursor: pointer;
  margin: 0;
  width: clamp(18.125rem, 17.966rem + 0.65vw, 18.75rem);
}
/* 丸い外枠 */
.small-circle-arrow {
  width: 33px;
  height: 33px;
  border: 2px solid #FFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
  transition: background 0.3s ease;
}
/* 代表あいさつセクション用（黒背景） */
#message .small-circle-arrow,
.message-btm-right-arrow {
  background: #050505;
  border: none;
}
/* 棒（→の胴体部分） */
.small-arrow-line {
  position: absolute;
  width: 7px;
  height: 2px;
  background: #FFF;
  left: calc(77% - 12px);
  top: 50%;
  transform: translateY(-50%);
  transition: background 0.3s ease;
  border-radius: 999px;
}
/* ＞の先端部分 */
.small-arrow-tip {
  position: absolute;
  right: calc(18% - -6px);
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid #FFF;
  border-right: 2px solid #FFF;
  transform: translateY(-50%) rotate(45deg);
  transition: border-color 0.3s ease; 
  border-radius: 1px;
}
/* テキスト */
.small-more-text {
  font-size: clamp(1rem, 0.936rem + 0.26vw, 1.25rem);
  letter-spacing: 0.1em;
  font-weight: 400;
}

/* ノートPC帯: フォントサイズ・ボタンサイズを抑える（約15%縮小） */
@media screen and (min-width: 1280px) and (max-width: 1800px) {
  .small-more-text {
    font-size: clamp(1rem, 0.85rem + 0.18vw, 1.0625rem);
  }

  .small-circle-arrow {
    width: 28px;
    height: 28px;
    border-width: 1.5px;
  }

  /* 代表あいさつセクション用（黒背景） */
  #message .small-circle-arrow,
  .message-btm-right-arrow {
    background: #050505;
    border: none;
  }

  .small-arrow-line {
    width: 6px;
    height: 1.5px;
    left: calc(50% - 3px);
    border-radius: 1px;
  }

  .small-arrow-tip {
    width: 5px;
    height: 5px;
    right: calc(50% - 2px);
    border-radius: 0 1.5px 0 0;
    border-width: 1.5px;
  }
}

@media screen and (max-width: 1380px) {
  .small-circle-arrow {
    width: 28px;
    height: 28px;
    border: 2px solid #FFF;
    position: relative;
  }

  /* 代表あいさつセクション用（黒背景） */
  #message .small-circle-arrow,
  .message-btm-right-arrow {
    background: #050505;
    border: none;
  }

  .small-arrow-line {
    display: none;
  }

  .small-arrow-tip {
    display: none;
  }

  .small-circle-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: url(../../images/small-arrow-sp.svg) no-repeat center center;
    background-size: contain;
  }
}

@media screen and (max-width: 900px) {
  .small-more-link {
    justify-content: space-between;
    width: 100%;
    height: 70px;
    padding: 0px 20px;
  }
}