/* Next のランタイムを剥がしたことで止まった自動スクロールを、CSSアニメーションで置き換える。
   どのトラックも同じ並びを n 周ぶん含んでいるので、幅の 1/n だけずらすと継ぎ目なくループする。
   ずらし量を正確に等分するため、要素間の余白は gap ではなく margin-right で作っている
   （gap は末尾に余白が付かず、1周ぶんの幅が半端になるため）。 */

@keyframes loop-scroll-x2 {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* --- MV のインタビュー写真帯 ------------------------------------------- */

.ticker-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
}

.ticker-track--x2 {
  animation: loop-scroll-x2 100s linear infinite;
}

.ticker-track--x2 > * {
  margin-right: 150px;
}

.ticker-track--reverse {
  animation-direction: reverse;
}

/* --- #lastyear の投稿ギャラリー（旧 Swiper） ------------------------------ */

.marquee {
  overflow: hidden;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: loop-scroll-x2 80s linear infinite;
}

.marquee--reverse .marquee-track {
  animation-direction: reverse;
}

.marquee-item {
  flex: 0 0 auto;
  width: min(416px, 60vw);
  margin-right: clamp(16px, 3vw, 40px);
}

.marquee-item img {
  display: block;
  width: 100%;
  height: auto;
  /* 画像は width/height 属性を持たず lazy 読み込みなので、比率を先に確保しないと
     読み込まれるまで高さ 0 になり #lastyear 以降がガタつく（元画像は全て 1080x1350） */
  aspect-ratio: 4 / 5;
}

/* --- モバイル(md未満)のヘッダーメニュー --------------------------------- */

/* 高さは assets/js/nav.js が実測して指定する。ここは初期値と遷移だけ持つ */
[data-nav-drawer] {
  height: 0;
  transition: height 300ms ease;
}

[data-nav-toggle] {
  /* role="button" を付けたのでカーソルとタップ挙動を明示しておく */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

[data-nav-toggle] svg path {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform 300ms ease, opacity 200ms ease;
}

/* 3本線を X に。path の y は 6.5 / 12.5 / 18.5 なので上下を 6px 寄せて交差させる */
[data-nav-toggle][aria-expanded="true"] svg path:nth-of-type(1) {
  transform: translateY(6px) rotate(45deg);
}

[data-nav-toggle][aria-expanded="true"] svg path:nth-of-type(2) {
  opacity: 0;
}

[data-nav-toggle][aria-expanded="true"] svg path:nth-of-type(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track,
  .marquee-track {
    animation: none;
  }

  [data-nav-drawer],
  [data-nav-toggle] svg path {
    transition: none;
  }
}

/* --- 画像ジェネレーターの規約同意チェック ------------------------------- */

/* 元は React が状態を持つただの div で、JS を剥がすとクリックしても何も起きなかった。
   input を隠して div を飾る手もあるが、隠した required はブラウザが検証バブルを
   出せず「押しても無反応」に見えるため、input 自体を見た目にしている。 */

.terms-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  margin: 0;
  display: grid;
  place-content: center;
  background-color: #fff;
  cursor: pointer;
}

/* チェックマークは SVG 背景で描く。擬似要素を % で組むと
   place-content:center のグリッドとサイズが循環参照になり潰れるため。 */
.terms-check input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 L9.5 18 L20 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 66% 66%;
}

.terms-check input[type="checkbox"]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* --- 画像ジェネレーター ------------------------------------------------- */

/* 背景カラーは元は button だったので JS が無いと選べなかった。
   ラジオに置き換えたうえで、選択状態を :checked から見せている。 */

.swatch input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.swatch > span {
  display: block;
  transition: box-shadow 120ms ease, transform 120ms ease;
}

.swatch input[type="radio"]:checked + span {
  box-shadow: 0 0 0 3px #000;
  transform: scale(1.06);
}

.swatch input[type="radio"]:focus-visible + span {
  outline: 2px solid #000;
  outline-offset: 3px;
}

.generator-result {
  margin-top: 40px;
  text-align: center;
}

.generator-result img {
  display: block;
  width: min(100%, 420px);
  height: auto;
  margin: 0 auto 20px;
  border-radius: 12px;
}

.generator-download {
  display: block;
  padding: 14px 32px;
  background-color: var(--kittyred, #e60039);
  color: #fff;
  text-decoration: none;
}

.generator-note {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .swatch > span {
    transition: none;
  }
}

/* --- フレーム選択のプルダウン ------------------------------------------- */

/* 外枠の .combo は魚拓から復元したマークアップに付いているが、
   どの CSS にも定義が無く（元サイトの CSS にも無い）、他の入力欄だけ枠があって
   ここだけ素のテキストに見えていた。同じ見た目に揃える。
   値は他の input と同一: border 3px rgba(0,0,0,.5) / 角丸 10px / 背景 #f5f5f5。 */

.combo {
  position: relative;
  display: block;
  border: 3px solid rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  background-color: #f5f5f5;
}

.combo select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  /* 右側は自前の矢印のぶん空ける */
  padding: 5px 38px 5px 10px;
  border: 0;
  border-radius: inherit;
  background-color: transparent;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: inherit;
  cursor: pointer;
}

.combo select:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.5);
  outline-offset: 2px;
}

/* appearance:none でネイティブの矢印が消えるので、開けることが分かるよう描く */
.combo::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 9px;
  height: 9px;
  border-right: 3px solid rgba(0, 0, 0, 0.5);
  border-bottom: 3px solid rgba(0, 0, 0, 0.5);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* --- 写真アップロードの選択状態 ----------------------------------------- */

/* 選んだ画像をその場に出す。元のアイコン(file.svg)と同じ位置に差し替わるので、
   枠からはみ出さないよう上限を付ける。 */
.photo-preview {
  width: auto;
  max-width: min(220px, 60%);
  max-height: 160px;
  margin: auto;
  object-fit: contain;
  border-radius: 8px;
}

/* ドラッグ中であることを示す */
.is-dragover {
  opacity: 0.75;
}

/* --- インタビューカードのホバー ----------------------------------------- */

/* 元は framer-motion の hover バリアント（rotate:0 / scale:1.2 / zIndex:1）で、
   Next を剥がした時点で消えていたものを CSS で戻す。傾きはカードごとに
   インライン style の rotate(±5deg) で入っているため、上書きには !important が要る。 */
#interview a > div[style*="rotate"] {
  transition: transform 0.3s ease-out;
}

@media (hover: hover) {
  #interview a:hover > div[style*="rotate"] {
    transform: rotate(0deg) scale(1.2) !important;
    z-index: 1 !important;
  }
}

#interview a:focus-visible > div[style*="rotate"] {
  transform: rotate(0deg) scale(1.2) !important;
  z-index: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  #interview a > div[style*="rotate"] {
    transition: none;
  }
}

/* --- キャリアマップ（assets/js/careermap.js） ----------------------------- */

/* 「もっと見る」で開く全画面の操作できる図。寸法・配色は旧実装の
   Tailwind クラス（w-dvw h-dvh fixed z-50、ボタン類の位置や枠）を写したもの。 */
.careermap {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background-color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.careermap.is-open {
  opacity: 1;
}

.careermap:focus {
  outline: none;
}

.careermap-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* 「もっと見る」と同じボタンの黒版 */
.careermap-back {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 200px;
  height: 50px;
  border: 3px solid #000;
  border-radius: 25px;
  background-color: #000;
  color: #fff;
  font-family: inherit;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
}

.careermap-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10px;
  border: 3px solid #fff;
  border-radius: 20px;
  background-color: #000;
}

.careermap-zoom button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 57px;
  height: 60px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.careermap-back:focus-visible,
.careermap-zoom button:focus-visible {
  outline: 3px solid var(--kittyred, #e60039);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .careermap-back {
    left: 40px;
    bottom: 36px;
  }
}

/* 開いた直後の操作説明。どこを押しても閉じる */
.careermap-info {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

.careermap-info[hidden] {
  display: none;
}

.careermap-info img {
  width: 80%;
  max-width: 462px;
  height: auto;
  margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .careermap {
    transition: none;
  }
}

/* --- 見本画像の扇（assets/js/sample-fan.js） ----------------------------- */

/* 重なった3枚が、見えたときに広がる。値は旧実装の whileInView の行き先
   （x/y はそれぞれの画像自身の幅・高さに対する割合）。並びは HTML の
   sample-1, sample-3, sample-2 の順。インライン style の translate(-50%, -50%) が
   初期位置なので、上書きには !important が要る。
   動きは本番（旧実装）と同じ framer-motion の既定のバネ
   （stiffness 500 / damping 25 / mass 1）。本番で測った値と一致することを確認済み。
   約 12% 行き過ぎてから戻り、0.5 秒でほぼ止まる。その曲線を 10ms 刻みで linear() にしたもの。 */
.sample-fan > img {
  /* linear() を解釈できない環境（iOS 17.1 以前など）は宣言ごと捨てるので、近い動きの代替を先に置く */
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
  transition: transform 0.5s linear(
    0, 0.0229, 0.0839, 0.1717, 0.2765, 0.3901, 0.5054, 0.617, 0.7208, 0.8139,
    0.8946, 0.9621, 1.0164, 1.0579, 1.0877, 1.107, 1.1174, 1.1203, 1.1172, 1.1097,
    1.099, 1.0863, 1.0726, 1.0587, 1.0453, 1.0329, 1.0218, 1.0122, 1.0042, 0.9977,
    0.9928, 0.9893, 0.987, 0.9858, 0.9855, 0.9859, 0.9869, 0.9882, 0.9897, 0.9914,
    0.993, 0.9946, 0.9961, 0.9974, 0.9986, 0.9995, 1.0003, 1.0009, 1.0013, 1.0016,
    1
  );
}

.sample-fan.is-spread > img:nth-child(1) {
  transform: translateX(-115%) translateY(-50%) rotate(-26.51deg) !important;
}

.sample-fan.is-spread > img:nth-child(2) {
  transform: translateX(23%) translateY(-70%) rotate(14.6deg) !important;
}

.sample-fan.is-spread > img:nth-child(3) {
  transform: translateX(-50%) translateY(-95%) rotate(-2.68deg) !important;
}

@media (prefers-reduced-motion: reduce) {
  .sample-fan > img {
    transition: none;
  }
}

/* --- MV の写真帯の大きさ -------------------------------------------------- */

/* 旧実装は画面幅 1280px 未満で、写真・リボン・余白・間隔・下段のずらし量をすべて
   (画面幅 / 1280) 倍に縮めていた（scale = min(1, innerWidth / 1280)）。
   剥がした時点の 1280px 用の固定値のままだとスマホで写真が画面いっぱいになるので、同じ比率で戻す。 */
.hero-card {
  padding-right: min(70px, 100vw * 70 / 1280);
  padding-top: min(100px, 100vw * 100 / 1280);
}

.hero-card__photo {
  width: min(300px, 100vw * 300 / 1280);
}

.hero-card__ribbon {
  width: min(265px, 100vw * 265 / 1280);
}

.ticker-track--x2 > .hero-card {
  margin-right: min(150px, 100vw * 150 / 1280);
}

.hero-row--lower {
  transform: translateY(max(-125px, 100vw * -125 / 1280));
}

/* 中央のロゴ。旧実装は画面幅いっぱい（最大 1182px）に旧ロゴ（大賞入り・横 1335px）を置いていた。
   大賞を外した新ロゴは横 1075px なので、文字の大きさが同じになるよう 1075/1335 を掛ける */
.hero-title {
  width: min(952px, 100vw * 1075 / 1335);
}

/* --- 上に弧の付いた箱（旧 SpecialBox） ------------------------------------ */

/* メッセージの赤い箱と投稿依頼の枠。上の弧は「円を切り抜いた窓」で、旧実装は画面幅で
   窓の幅・円の大きさ・箱の上の余白を段階的に変えていた。1024px 用の固定値のままだと、
   スマホでは弧が箱より広くなってはみ出す。値は旧実装と同じ（窓の高さ = 幅 × 48/368、
   円のずらし量 = -(円の直径 - 窓の幅) / 2）。 */
.special-box {
  padding-top: 43px;
}

.special-box__mask {
  width: 368px;
  height: 48px;
  transform: translateX(-50%);
}

.special-box__circle {
  width: 740px;
  height: 740px;
  transform: translateX(-186px);
}

@media (max-width: 1023px) {
  .special-box { padding-top: 27px; }
  .special-box__mask { width: 276px; height: 36px; }
  .special-box__circle { transform: translateX(-232px); }
}

@media (max-width: 767px) {
  .special-box { padding-top: 21px; }
  .special-box__mask { width: 184px; height: 24px; }
  .special-box__circle { width: 370px; height: 370px; transform: translateX(-93px); }
}

@media (max-width: 479px) {
  .special-box { padding-top: 10px; }
  .special-box__mask { width: 100px; height: 13.043px; }
  .special-box__circle { width: 200px; height: 200px; transform: translateX(-50px); }
}

/* --- ボタンの矢印・ラジオボタン ------------------------------------------- */

.more-arrow {
  margin-left: 15px;
}

/* 掲載可否の「はい / いいえ」。既定の 13px だと小さく、文字にも密着していた */
input[type="radio"][name="permission"] {
  width: 20px;
  height: 20px;
  margin: 0 6px 0 0;
  vertical-align: middle;
}

input[type="radio"][name="permission"] + .radio-label {
  vertical-align: middle;
}

/* --- スマホだけの詰め ------------------------------------------------------ */

@media (max-width: 767px) {
  /* 「どんなステップアップができる？」は旧デザインの青地用の白文字で、白地では見えないのに
     1行分の高さを取っていた。見出しの下の余白（画面幅の 10%）も詰める */
  .casestudy-lead {
    display: none;
  }

  .casestudy-head {
    margin-bottom: 8px;
  }

  #information {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  #information dt,
  #information dd {
    font-size: 14px;
  }
}

/* --- 「メッセージを投稿しよう！」の見出しとフッターのコピーライト ------------- */

.message-title {
  width: clamp(180px, 58.5938vw, 600px);
}

@media (max-width: 767px) {
  /* SP では見出しが小さかったので、依頼の矢印どおり枠の内側いっぱい近く（枠の約 92%）まで広げる */
  .message-title-wrap {
    width: 100%;
  }

  /* 上限は PC 側の幅（58.5938vw）の 767px 時点に合わせ、768px の境目で大きさが飛ばないようにする */
  .message-title {
    width: min(calc(100% - 10px), 450px);
  }

  .footer-copyright {
    font-size: 11px;
  }

}

/* サンリオの承認番号の行は1行固定（whitespace-nowrap）。11px なら 370px 以上の幅では
   1行で収まる（依頼のスクショどおり）が、それ未満だと末尾がフッターの overflow-hidden で
   切れて見えなくなる。370px ちょうどは右端に余白が無いので、375px 未満で折り返す。ライセンス表記は全文見える必要があるので、そこでだけ折り返させる */
@media (max-width: 374px) {
  .footer-copyright .whitespace-nowrap {
    flex-wrap: wrap;
    white-space: normal;
  }
}

/* --- 画像生成フォームの (必須) / (任意) と「SNSアカウントなし」のチェック -------- */

/* 見出しの後ろに小さく付ける。(任意) も (必須) と同じ大きさにする */
.form-badge {
  margin-left: 0.2em;
  font-size: 0.55em;
  white-space: nowrap;
}

.form-badge--required {
  color: var(--kittyred, #e60039);
}

.sns-none-check {
  margin-top: 20px;
  gap: 10px;
}

.sns-none-check input[type="checkbox"] {
  width: 28px;
  height: 28px;
}

.sns-none-check span {
  font-size: 14px;
  line-height: 1.5;
}

/* チェック中は入力欄を使えないので、使えないことが見て分かるようにする */
input[name="xaccount"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* プレゼント画像差し替え */
@media screen and (min-width: 768px){
  .present-txt {
    margin-bottom: 50px;
  }
}
.present-box {
    padding: 25px 10px;
    border-style: var(--tw-border-style);
    border-width: 2px;
    position: relative;
}
@media screen and (min-width: 768px){
  .present-box {
      padding: 30px 40px 40px;
      border-width: 3px;
  }
}

.present-box h4 {
  background: #fff;
  position: absolute;
  top: -16px;
  max-width: 220px;
  width: 70%;
  font-size: 16px;
}
@media screen and (min-width: 768px){
  .present-box h4 {
    top: -20px;
    max-width: 300px;
    width: 40%;
    font-size: 1.25rem;
  }
}

.present-box-inner {
  padding: 25px 15px;
  border-radius: 28px;
}
@media screen and (min-width: 768px){
  .present-box-inner {
    padding: 50px 0 35px;
  }
}

.present-box-inner p{
  font-size: 14px;
  text-align: justify;
  margin-bottom: 20px;
}
@media screen and (min-width: 768px){
  .present-box-inner p{
    font-size: 16px;
    margin-bottom: 30px;
    text-align: center;
  }
}
@media screen and (max-width: 767px){
  .present-box-inner p br{
    display: none;
  }
}

.present-box-image div:first-child img{
  border-radius: 47px 47px 0 0;
}

.present-box-image div:last-child img{
  border-radius: 0 0 47px 47px;
}
@media screen and (min-width: 768px){
  .present-box-image div:first-child img{
    border-radius: 200px 0 0 200px;
  }

  .present-box-image div:last-child img{
    border-radius: 0 200px 200px 0;
  }
}