@charset "UTF-8";

/* =========================================================
   Tailwindで賄えない軽微なスタイルと演出のカスタム
   ========================================================= */

/* 共通セクション */
.section { padding: 4rem 0; background: #fff; }
.section-soft {
  padding: 4rem 0;
  background: linear-gradient(180deg, #fff, #f8f5f2 45%, #fff);
}

/* ナビリンク */
.nav-link { color: rgb(15 23 42); transition: color .2s ease; }
.nav-link:hover { color: #8c5e3c; }

/* 見出し */
.section-heading {
  color: #8c5e3c;
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .05em;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

/* ヒーローデコ */
.mv-deco { position: absolute; opacity: .9; pointer-events: none; will-change: transform; }
.deco01 { top: .5rem; left: -1rem; width: 110px; }
.deco02 { top: 1.5rem; right: -1rem; width: 120px; }
.deco03 { bottom: 2rem; right: 1rem; width: 90px; opacity: .7; }
.deco04 { bottom: 1rem; left: .5rem; width: 100px; opacity: .7; }

/* Slickの初期フォーカスによるアウトラインを抑止（保険） */
.slick-slide:focus { outline: none; }

/* エリア番号ごとの色（最小追加） */
.nb-1  { background:#3f39a5 !important; } /* indigo-600   */
.nb-2  { background:#ef4444 !important; } /* red-500      */
.nb-3  { background:#0ea5e9 !important; } /* sky-500      */
.nb-4  { background:#122d67 !important; } /* blue-600     */
.nb-5,
.nb-6  { background:#f97316 !important; } /* orange-500   */
.nb-7  { background:#f278a7 !important; } /* fuchsia-500  */
.nb-8,
.nb-9  { background:#10b981 !important; } /* emerald-500  */
.nb-10 { background:#0d9488 !important; } /* teal-600     */

/* ホバーズーム */
.hover-zoom { overflow: hidden; border-radius: .75rem; }
.hover-zoom img { transition: transform .5s ease; display:block; }
.hover-zoom:hover img { transform: scale(1.06); }

/* タグ（ピル） */
.tag-area-kenko, .tag-area-oshigoto, .tag-area-annai {
  color:#fff; padding:.2rem .6rem; border-radius:.5rem; display:inline-block; margin-top:.25rem;
  font-weight:200; font-size:.9rem;
}
.tag-area-kenko { background:#10b981; }   /* emerald-500 */
.tag-area-oshigoto { background:#3b82f6; }/* blue-500    */
.tag-area-annai { background:#f59e0b; }   /* amber-500   */

/* エリア番号バッジ */
.number-box {
  display:inline-grid; place-items:center;
  width:2rem; height:2rem; border-radius:.5rem;
  color:#fff; font-weight:800; background:#0ea5e9; /* sky-500 */
}
.number-red { background:#ef4444 !important; } /* red-500 */

/* カード */
.card {
  background:#fff; border:1px solid rgb(226 232 240);
  border-radius: .75rem; box-shadow: 0 10px 25px rgba(0,0,0,.06);
  padding: 1rem;
  transition: transform .15s ease, box-shadow .15s ease;
  will-change: transform;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,.08); }
.card-title { font-size: 1.125rem; font-weight: 700; }

/* ボタン */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:#200a52; color:#fff; font-weight:700;
  border-radius:.75rem; padding:.7rem 1.2rem;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
  box-shadow: 0 10px 25px rgba(32,10,82,.15);
}
.btn-primary:hover{ transform: translateY(-1px); background:#2e1673; }
.btn-primary:active{ transform: translateY(0); }

/* 入力UI */
.form-input, .form-textarea{
  width:100%;
  border:1px solid rgb(203 213 225); border-radius:.5rem;
  padding:.6rem .75rem; outline: none;
}
.form-input:focus, .form-textarea:focus{
  border-color:#8c5e3c; box-shadow: 0 0 0 3px rgba(140,94,60,.15);
}

/* 横ギャラリーのスクロールバー */
#photoCarousel { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
#photoCarousel::-webkit-scrollbar{ height: 10px; }
#photoCarousel::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:999px; }
#photoCarousel::-webkit-scrollbar-track{ background:transparent; }

/* FAQ（details/summary） */
.faq-item{
  background:#fff; border:1px solid rgb(226 232 240);
  border-radius: .75rem; box-shadow: 0 10px 25px rgba(0,0,0,.06);
  padding: .75rem 1rem;
}
.faq-item > summary{ cursor: pointer; list-style: none; font-weight: 200; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item[open] > summary { color:#8c5e3c; }
.faq-a{ padding:.5rem 0 .25rem; color: rgb(71 85 105); }

/* ステータスカード（カウンター） */
.stat-card{
  background:#fff; border:1px solid rgb(226 232 240);
  border-radius:1rem; padding:1rem; text-align:center;
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
}
.stat-num{ font-size: clamp(2rem, 1.5rem + 3vw, 3rem); font-weight:900; color:#200a52; }
.stat-label{ color: rgb(100 116 139); font-weight:700; }

/* タブ */
.btn-chip{
  border:1px solid rgb(226 232 240); background:#fff; color:#200a52; font-weight:700;
  padding:.5rem .9rem; border-radius:999px; transition: all .15s ease;
}
.btn-chip:hover{ transform: translateY(-1px); box-shadow: 0 10px 25px rgba(0,0,0,.06); }
.btn-chip.active{ background:#200a52; color:#fff; }

/* タイムライン風 */
.timeline{ position: relative; margin-left: .75rem; }
.timeline::before{
  content:""; position:absolute; left: .4rem; top:0; bottom:0; width: 2px; background: #e2e8f0;
}
.time-row{ display:grid; grid-template-columns: 80px 1fr; gap: 1rem; align-items:start; margin-bottom: 1rem; }
.time{ color:#64748b; font-weight:500; }
.time-card{
  background:#fff; border:1px solid rgb(226 232 240); border-radius:.75rem; padding: .9rem 1rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
}
.time-title{ color:#200a52; }
.time-desc{ color:#475569; margin-top:.25rem; }
.time-tags{ display:flex; flex-wrap:wrap; gap:.25rem; margin-top:.35rem; }
.tag{ background:#f1ebe6; color:#8c5e3c; border-radius:.5rem; padding:.15rem .45rem; font-weight:300; font-size:.8rem; }

/* 画像モーダル */
.img-modal{ position: fixed; inset: 0; z-index: 10000; }
.img-modal.hidden{ display:none; }
.img-modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.6); }
.img-modal-inner{ position: absolute; inset:0; display:grid; place-items:center; padding: 2rem; }
.img-modal-inner img{
  max-width: min(1200px, 92vw); max-height: 84vh;
  border-radius: 1rem; box-shadow: 0 20px 40px rgba(0,0,0,.3);
}
.img-modal-close{
  position:absolute; top:1rem; right:1rem; font-size:2rem; color:#fff;
  background:transparent; border:none; cursor:pointer;
}

/* ギャラリー画像 */
.gallery-img{
  width:100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius:.75rem; box-shadow: 0 10px 25px rgba(0,0,0,.06);
}

/* ===== カウントダウン（大きめに表示） ===== */
#dday{
  font-size: clamp(1.25rem, 1rem + 3vw, 2.5rem); /* SP〜PCで可変拡大 */
  line-height: 1.2;
  padding: .5rem .9rem;
}

/* ===== マスク通知の見やすさ調整（白地でも可読） ===== */
#maskNotification h3{
  /* 背景色（白）上で文字が沈まないよう、ブランド色テキスト＋枠に */
  background: transparent !important;
  color: #200a52 !important;             /* ← テキスト色をブランド色に */
  border: 2px solid #200a52;
  border-radius: .5rem;
}

#maskNotification i.fa-mask-face{
  color: #200a52 !important;             /* ← アイコン色も文字と同じに */
}

/* ===== 全ページのスムーススクロール（アンカー遷移） ===== */
html { scroll-behavior: smooth; }

/* ===== スマホ右下：Topに戻る（md以上では非表示） ===== */
.to-top{
  position: fixed; right: 1rem; bottom: 1rem;
  width: 56px; height: 56px; border-radius: 9999px;
  background: #200a52; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(32,10,82,.25);
  z-index: 1000;
  opacity: 0; transform: translateY(20px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.to-top.show{ opacity: 1; transform: translateY(0); pointer-events: auto; }
.to-top i{ font-size: 1.25rem; }

/* ===== セクション “追加” 演出（見出しが来たら内容がふわっと現れる） ===== */
.reveal-on-scroll{ opacity: 0; transform: translateY(12px); }
.section-active .reveal-on-scroll{
  animation: fadeUp .6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(12px); }
  to  { opacity:1; transform: translateY(0); }
}
@media (min-width: 1024px) {
  .to-top { width: 64px; height: 64px; }
  .to-top i { font-size: 1.4rem; }
}

/* ===== セクションのメリハリ（交互背景） ===== */
.section--alt {
  background: linear-gradient(180deg, #fff, #f8f5f2 40%, #fff);
}

/* ===== セクションの区切り（波型ディバイダー） ===== */
.section-divider {
  position: relative;
  height: 44px;
  overflow: hidden;
}
.section-divider svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.section-divider .wave-fill-1 { fill: #ffffff; }   /* 上下の色はJSで切替 */
.section-divider .wave-fill-2 { fill: #f8f5f2; }

/* ===== 見出しの楽しいバッジ（ぽよん演出） ===== */
.heading-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-left: .5rem; padding: .2rem .6rem;
  font-weight: 800; font-size: .8rem;
  color: #fff; background: #200a52;
  border-radius: 999px; box-shadow: 0 6px 18px rgba(32,10,82,.18);
  animation: badge-pop .7s cubic-bezier(.22,1,.36,1) both, badge-bob 2.6s ease-in-out 1s infinite;
}
.heading-badge i { font-size: .9rem; }

@keyframes badge-pop {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes badge-bob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-2px); }
}

/* ===== セクション内の“楽しい粒”をふわっと（控えめパーティクル） ===== */
.fun-spark {
  position: absolute; width: 8px; height: 8px;
  background: radial-gradient(circle at 60% 40%, #ffd166 0 55%, transparent 56%);
  border-radius: 50%;
  box-shadow:
    18px -8px 0 #ff6b6b,
    -14px 12px 0 #4cc9f0,
    6px 18px 0 #8ac926;
  opacity: 0; transform: translateY(8px) scale(.9);
  animation: spark-pop .8s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes spark-pop {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== 既存の“出現”演出と相性の良い微調整 ===== */
.section-active .section-heading { filter: drop-shadow(0 2px 0 rgba(0,0,0,.04)); }

/* セクション交互背景用 */
.section--alt {
  background: linear-gradient(180deg, #f8f5f2 0%, #ffffff 100%);
}

/* 小粒ポップ演出（見出しの右上に1回だけ） */
.section-heading { position: relative; } /* 見出し内に絶対配置するため */

.fun-spark{
  position: absolute;
  top: -6px;           /* 見出しの右上あたり */
  right: -10px;
  width: 8px; height: 8px;
  background: radial-gradient(circle at 60% 40%, #ffd166 0 55%, transparent 56%);
  border-radius: 50%;
  opacity: 0; transform: translateY(8px) scale(.9);
  animation: spark-pop .8s cubic-bezier(.22,1,.36,1) forwards;
  /* ちょっと賑やかに見せるための影（粒） */
  box-shadow:
    18px -8px 0 #ff6b6b,
    -14px 12px 0 #4cc9f0,
    6px 18px 0 #8ac926;
}
@keyframes spark-pop{
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 小粒ポップ演出（複数粒） */
.fun-spark {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  opacity: 0;
  transform: scale(.5);
  animation: spark-pop 0.9s ease-out forwards;
}
@keyframes spark-pop {
  0%   { opacity: 0; transform: scale(.5) translateY(0); }
  40%  { opacity: 1; transform: scale(1.2) translateY(-6px); }
  100% { opacity: 0; transform: scale(.3) translateY(-20px); }
}

/* 小粒ポップ演出（残る版） */
.fun-spark {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  opacity: 0;
  transform: scale(.5);
  animation: spark-pop-stay 1s ease-out forwards;
}

@keyframes spark-pop-stay {
  0%   { opacity: 0; transform: scale(.5) translateY(0); }
  40%  { opacity: 1; transform: scale(1.2) translateY(-6px); }
  100% { opacity: 1; transform: scale(1) translateY(-12px); } /* ← 最後は残す */
}

/* 小粒ポップ演出（残る＋ゆらゆら） */
.fun-spark {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  opacity: 0;
  transform: scale(.5);
  animation: spark-pop-stay 1s ease-out forwards, spark-float 4s ease-in-out infinite;
}

/* 出現時 */
@keyframes spark-pop-stay {
  0%   { opacity: 0; transform: scale(.5) translateY(0); }
  40%  { opacity: 1; transform: scale(1.2) translateY(-6px); }
  100% { opacity: 1; transform: scale(1) translateY(-12px); }
}

/* ゆらゆらアニメーション */
@keyframes spark-float {
  0%   { transform: translateY(-12px) translateX(0); }
  25%  { transform: translateY(-16px) translateX(3px); }
  50%  { transform: translateY(-20px) translateX(0); }
  75%  { transform: translateY(-16px) translateX(-3px); }
  100% { transform: translateY(-12px) translateX(0); }
}

/* =========================
   粒（fun-spark）演出 用 CSS 完全版
   ========================= */

/* 見出し内に粒を絶対配置できるように（JSでもposition付与するが保険で） */
.section-heading {
  position: relative;
}

/* 粒の基本スタイル（サイズ・色はJSで個別に指定） */
.fun-spark {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;          /* クリックを邪魔しない */
  opacity: 0;
  transform: scale(.5);
  will-change: transform, opacity;

  /* 出現 0.8s → その後はずっとゆらゆら（無限） */
  animation:
    spark-pop   0.8s ease-out forwards,
    spark-float 4s ease-in-out 0.8s infinite;
  /* JS 側で top / left / right / width / height / background を付与します */
}

/* 出現時の“ポッ” */
@keyframes spark-pop {
  0%   { opacity: 0; transform: scale(.5) translateY(0); }
  60%  { opacity: 1; transform: scale(1.2) translateY(-6px); }
  100% { opacity: 1; transform: scale(1) translateY(-10px); }
}

/* ゆらゆら（横にわずか＆上下にふわっと） */
@keyframes spark-float {
  0%   { transform: translateY(-10px) translateX(0); }
  25%  { transform: translateY(-14px) translateX(3px); }
  50%  { transform: translateY(-18px) translateX(0); }
  75%  { transform: translateY(-14px) translateX(-3px); }
  100% { transform: translateY(-10px) translateX(0); }
}

/* 端末が“動き少なめ”設定のときは揺れを止める（アクセシビリティ） */
@media (prefers-reduced-motion: reduce) {
  .fun-spark {
    animation: spark-pop 0.6s ease-out forwards; /* 出現のみで停止 */
  }
}

/* 出現前の見え方 */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(12px);
}

/* 出現時のアニメーション */
.section-active .reveal-on-scroll {
  animation: fadeUp .6s cubic-bezier(.22,1,.36,1) both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 画像コンテナを相対配置にする */
.image-container {
  position: relative;
  display: inline-block; /* 必要に応じて block/inline-block */
}

/* 左上に重ねるラベル */
.overlay-text {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(220, 38, 38, 0.9); /* 赤っぽい背景 */
  color: #fff;
  font-size: 0.85rem;
  font-weight: 300;
  padding: 4px 8px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  pointer-events: none; /* クリックを透過 */
  z-index: 2;
}

/* ホバーで少し拡大する演出（任意） */
.image-container:hover .overlay-text {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

/* === タッチ/ドラッグで横スクロール === */
.news-carousel {
  position: relative;
  overflow-x: auto;                /* ← スクロール可能に */
  scroll-snap-type: x mandatory;   /* スナップ */
  -webkit-overflow-scrolling: touch;
}
.news-track {
  display: flex;
  align-items: stretch;
  gap: 12px;
  /* animation: news-marquee … ← これを削除 or 上書きで無効化 */
  animation: none !important;
}
.news-carousel::-webkit-scrollbar { display: none; } /* スクロールバー隠す（任意） */

/* ユーザー操作で2/3/4枚表示（既存ルールを活かしつつ） */
.news-item { flex: 0 0 25%; scroll-snap-align: start; min-width: 0; }
@media (max-width:1279.98px) { .news-item { flex-basis: 33.3333%; } }
@media (max-width:1023.98px) { .news-item { flex-basis: 50%; } }   /* タブレット=2 */
@media (max-width:639.98px)  { .news-item { flex-basis: 50%; } }   /* スマホ=2 */

/* 画像を常に同じ高さでトリミング（スマホで小さめ＆統一） */
.news-item .hover-zoom img {
  width: 100%;
  height: 140px;          /* お好みで 120〜160px */
  object-fit: cover;
  display: block;
}
@media (max-width:639.98px){
  .news-item .hover-zoom img { height: 120px; }  /* スマホ時さらに低く */
}

/* 前後ボタン */
.news-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:9999px;
  background:rgba(0,0,0,.55); color:#fff; border:none;
  display:grid; place-items:center;
  z-index: 5; cursor: pointer;
  transition: opacity .15s ease, transform .15s ease;
}
.news-nav:hover{ opacity:.9; transform:translateY(calc(-50% - 1px)); }
.news-nav.prev{ left:6px; }
.news-nav.next{ right:6px; }
@media (max-width:639.98px){
  .news-nav{ width:32px; height:32px; background:rgba(0,0,0,.5); }
}

#dday .num {
  font-size: 3.5rem;   /* 数値は大きく */
  font-weight: 700;
  font-family: 'Fredoka', sans-serif;
}

#dday .label {
  font-size: 2.5rem;   /* 「開催まで」「日」「時間」などは小さめ */
  font-weight: 400;
  margin: 0 2px;
  font-family: 'Mochiy Pop One', sans-serif;
}

/* 数字全般を Fredoka に */
body {
  font-family: 'Mochiy Pop One', sans-serif !important;
}

.num, 
.stat-num, 
#dday, 
#dday .num, 
.countdown, 
.countdown span, 
.timeline .time {
  font-family: 'Fredoka', sans-serif !important;
}

/* 見出し用フォント（太め） */
h1, h2, h3, .section-heading {
  font-family: 'Mochiy Pop One', sans-serif;
  font-weight: 400; /* Mochiy Pop One は太さ1種類 */
}

/* 本文寄りの見出しや小見出し */
h4,h5, h6, p, li, .stat-label, .faq-a, .card-title {
  font-family: 'Mochiy Pop One', sans-serif;
  font-weight: 250; /* 読みやすい細さ */
}

/* 数字専用フォント */
.stat-num, #dday {
  font-family: 'Fredoka', sans-serif;
  font-weight: 450;
}

/* === News Carousel: レスポンシブ画像高さ統一 === */
.news-carousel .hover-zoom {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;   /* デフォルトは横長16:9 */
  overflow: hidden;
  border-radius: .75rem;
}

.news-carousel .hover-zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 中央にトリミングして収める */
  object-position: center;
  display: block;
}

/* SPメニュー: ナビ開閉時の背景と配置 */
#mainNav.is-open {
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* SPメニューのドロップダウンパネル */
#navbarResponsiveSp{
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgb(226 232 240);
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
  z-index: 60;               /* ナビより前面に */
}

/* メニュー項目の押しやすさと区切り */
#navbarResponsiveSp .nav-link{
  padding: .9rem 1rem;
  border-bottom: 1px solid rgba(226,232,240,.6);
}
#navbarResponsiveSp .nav-link:last-child{
  border-bottom: none;
}

/* 余白を詰めて、画面上部でメニューと背景が繋がるように */
#mainNav { position: fixed; }

/* === SPメニュー：スライド＆フェード === */
#navbarResponsiveSp {
  overflow: hidden;
  max-height: 0;                /* 閉 */
  opacity: 0;
  transform: translateY(-8px);
  transition: max-height .35s ease, opacity .25s ease, transform .35s ease;
  will-change: max-height, opacity, transform;
}
#navbarResponsiveSp.open {
  max-height: 600px;            /* 開（中身に合わせて適宜） */
  opacity: 1;
  transform: translateY(0);
}

/* メニュー項目のちょい遅延フェード（任意だが可愛い） */
#navbarResponsiveSp.open .nav-link {
  animation: spItemFade .38s ease both;
}
#navbarResponsiveSp.open .nav-link:nth-child(1){ animation-delay: .02s; }
#navbarResponsiveSp.open .nav-link:nth-child(2){ animation-delay: .05s; }
#navbarResponsiveSp.open .nav-link:nth-child(3){ animation-delay: .08s; }
#navbarResponsiveSp.open .nav-link:nth-child(4){ animation-delay: .11s; }
#navbarResponsiveSp.open .nav-link:nth-child(5){ animation-delay: .14s; }
#navbarResponsiveSp.open .nav-link:nth-child(6){ animation-delay: .17s; }
#navbarResponsiveSp.open .nav-link:nth-child(7){ animation-delay: .20s; }
#navbarResponsiveSp.open .nav-link:nth-child(8){ animation-delay: .23s; }
#navbarResponsiveSp.open .nav-link:nth-child(9){ animation-delay: .26s; }
@keyframes spItemFade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 背景の白＆影は data 属性で切替（既存navに付いてるやつを再利用） */
#mainNav[data-open="true"]{
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* アイコン回転の小アニメ（fa-bars → fa-xmark切替時） */
.icon-spin-in { animation: iconSpin .25s ease both; }
@keyframes iconSpin {
  from { transform: rotate(-90deg); opacity: 0; }
  to   { transform: rotate(0deg);   opacity: 1; }
}