/* ==========================================================================
   Sunny Side ボルダリングハウス トップページ
   カラー：オレンジ #ED6C2A / アイボリー #EAE4DC / グレー #ACA59D / 白黒
   フォント：Montserrat（見出し・英字）/ Roboto（本文英字）/ Noto Sans JP（和文）
   ========================================================================== */

:root{
  --bg:          #F3F0E9; /* ivory, brightened */
  --bg-alt:      #FFFFFF; /* white, alternating sections */
  --bg-tint:     #F8F6F2; /* faint gray-white tint, alternating sections, brightened */
  --surface:     #FFFFFF;
  --text:        #1C1B19; /* near-black */
  --text-soft:   #B7B0A6; /* gray, brightened */
  --line:        #B7B0A6; /* gray, brightened */
  --accent:      #ED6C2A;
  --accent-deep: #C6591F;

  --font-display: 'Montserrat', 'Noto Sans JP', sans-serif;
  --font-body:    'Roboto', 'Noto Sans JP', sans-serif;

  --container: 1180px;
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.7;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width: var(--container); margin:0 auto; padding: 0 24px; }
.section{ padding: 100px 0; }
.section--sm{ padding: 96px 0; }
.section--alt{ background: var(--bg-alt); }
.section--tint{ background: var(--bg-tint); }
.text-center{ text-align:center; }
.text-soft{ color: var(--text-soft); }
.text-accent{ color: var(--accent); }

.heading{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .04em;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
}
.eyebrow-line{ height:1px; width:64px; background: var(--line); margin: 40px auto; }

.btn{
  display:inline-block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight:700;
  letter-spacing: .16em;
  padding: 18px 38px;
  border-radius: 999px;
  transition: all .35s ease;
  border: 1px solid transparent;
  width: 268px;
  max-width: 100%;
  text-align: center;
}
.btn--accent{
  background: var(--accent);
  color:#fff;
  box-shadow: 0 10px 26px -12px rgba(237,108,42,.55);
}
.btn--accent:hover{ background: var(--accent-deep); transform: translateY(-2px); }
.btn--outline{
  border-color: var(--line);
  color: var(--text);
}
.btn--outline:hover{ background: var(--text); color:#fff; border-color: var(--text); }
.btn--sm{ padding: 14px 30px; font-size: .88rem; margin-top: 24px; width: 300px; }

.link{ position:relative; display:inline-block; font-size:.72rem; letter-spacing:.16em; color: var(--text-soft); padding-bottom: 3px; }
.link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: currentColor; transform: scaleX(0); transform-origin:right;
  transition: transform .4s ease;
}
.link:hover::after{ transform: scaleX(1); transform-origin: left; }

/* ---- スマホでだけ改行したい箇所に使う ---- */
.br-sp{ display:none; }
@media (max-width: 859px){
  .br-sp{ display:inline; }
}

/* ---- reveal-on-scroll ---- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ==========================================================================
   LANGUAGE TOGGLE (JA / EN)
   ========================================================================== */
.lang-en{ display:none !important; }
html.is-en .lang-ja{ display:none !important; }
html.is-en .lang-en{ display:revert !important; }
html.is-en .header__cta.lang-en{ display:none !important; }
@media (min-width: 860px){
  html.is-en .header__cta.lang-en{ display:inline-block !important; }
}

/* .point__badge is a span (inline by default); no extra override needed since
   display:revert already restores that on language switch */

.lang-toggle{
  display:flex; align-items:center; gap:6px;
  background:none; border:1px solid var(--line); border-radius:999px;
  padding:6px 12px; cursor:pointer;
  font-family: var(--font-display); font-size:.7rem; letter-spacing:.1em;
  color: var(--text-soft);
}
.lang-toggle__opt{ padding:2px 4px; transition: color .25s ease; }
.lang-toggle__opt.is-active{ color: var(--accent); font-weight:700; }
.lang-toggle__sep{ opacity:.5; }

.header{
  position: fixed; top:0; left:0; right:0; z-index:50;
  background: rgba(234,228,220,.88);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(172,165,157,.35);
}
.header__row{
  max-width: var(--container); margin:0 auto; padding: 0 24px;
  height: 64px; display:flex; align-items:center; justify-content:space-between;
}
.header__logo{ font-family: var(--font-display); font-weight:700; letter-spacing:.2em; color: var(--accent); font-size:1.05rem; }
.header__nav{ display:none; gap: 32px; font-size:.82rem; color: var(--text-soft); }
.header__cta{ display:none; }

@media (min-width: 860px){
  .header__nav{ display:flex; }
  .header__cta{ display:inline-block; }
}

/* ==========================================================================
   HERO (FV) — スマホ版のみ：フルスクリーン演出シーケンス
   タイムライン（合計14秒、1回だけ再生して最終カットで静止）
   ①0-5s 中央にコピー／②5-8s 添付2＋コピー切替／③8-11s 添付3のみ
   ④11-13s 添付4に切替（フルスクリーン）／⑤13-14s 添付4に添付5ロゴを重ねて静止
   ========================================================================== */
.hero-fv{
  display:block;
  position:relative;
  height: 100vh;   /* dvh非対応ブラウザ用フォールバック */
  height: 81dvh;  /* 6.3インチ等の実機で、アドレスバー分の余白ができないよう動的ビューポート高さに合わせる */
  min-height: 560px;
  overflow:hidden;
}
.fv-gradient{
  position:absolute; inset:0; z-index:0;
  background: radial-gradient(circle at 50% 45%, var(--bg) 0%, var(--bg) 35%, #D9D3C8 100%);
}

.fv-scene{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
}
.fv-photo{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
}

/* ---- scene 3: 添付3と添付6（同サイズ書き出し）をぴったり重ねたスタックごと
   流体シェイプ（ブロブ）に切り抜かれながらジワっと縮小し、
   静止した後も少しゆらぎ続ける。右サイドは画面から少しはみ出す横広の形 ---- */
.fv-blob-stack{
  position:absolute; top:0; bottom:0; left:0; right:auto;
  overflow:hidden;
}
.fv-blob-stack .fv-photo{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}

.fv-scene--03 .fv-blob-stack{
  animation:
    fvScene03Blob 14s ease forwards,
    fvBlobWobble 7s ease-in-out 11s infinite;
}

/* ---- ④ 添付6を、③（流体シェイプ）と全く同じタイミング・サイズ・動きで重ねる。
   クリップ（border-radius）だけ入れず、輪郭からはみ出た部分が浮き出て見える ---- */
.fv-hero-cutout{
  position:absolute; z-index:1;
  max-width:none;
  object-fit:cover;
  filter: drop-shadow(0 18px 28px rgba(25,19,21,.28));
  opacity:0;
  animation:
    fvHeroCutoutShrink 14s ease forwards,
    fvHeroCutoutIn 14s ease forwards;
}

.fv-copy{
  position:relative; z-index:1;
  font-family: var(--font-display);
  font-weight:700;
  letter-spacing:.06em;
  text-align:center;
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3rem);
  line-height:1.55;
  color:#191315;
}
.fv-copy--on-photo{
  color:#FFFFFF;
  text-shadow: 0 4px 24px rgba(0,0,0,.35);
}

.fv-logo{
  position:absolute; z-index:2;
  top:50dvh; left:50%;
  transform: translate(-50%,-60%);
  opacity:0;
}

/* ---- タイムライン（14s） ---- */
.fv-scene--01{ animation: fvScene01 14s ease forwards; }
.fv-scene--02{ animation: fvScene02 14s ease forwards; }
.fv-scene--03{ animation: fvScene03 14s ease forwards; }
.fv-scene--04{ animation: fvScene04 14s ease forwards; }
.fv-logo{ animation: fvLogo 14s ease forwards; }

@keyframes fvScene01{
  0%{ opacity:0; }
  14%{ opacity:1; }        /* 0 → 約2秒かけてジワっと浮き出る */
  32.86%{ opacity:1; }     /* 4.6s 地点まで保持 */
  35.71%{ opacity:0; }     /* 5s でフェードアウト（②とクロスフェード） */
  100%{ opacity:0; }
}
@keyframes fvScene02{
  0%{ opacity:0; }
  32.86%{ opacity:0; }
  35.71%{ opacity:1; }     /* 5s でフェードイン */
  54.29%{ opacity:1; }     /* 7.6s まで保持 */
  57.14%{ opacity:0; }     /* 8s でフェードアウト */
  100%{ opacity:0; }
}
@keyframes fvScene03{
  0%{ opacity:0; }
  54.29%{ opacity:0; }
  57.14%{ opacity:1; }     /* 8s でフェードイン */
  100%{ opacity:1; }       /* ④とクロスフェードさせず、③のスタックはそのまま残して縮小させる */
}
/* ③＋添付6を、全く同じ位置・サイズ・タイミングでジワっと縮小させ、
   常にぴったり重なって見えるようにする。画面幅にきっちり収まるサイズにする */
@keyframes fvScene03Blob{
  0%{
    left:0; top:0; width:100%; height:100%;
    border-radius: 0%;
  }
  57.14%{                                  /* 8s まで画面いっぱいの四角のまま */
    left:0; top:0; width:100%; height:100%;
    border-radius: 0%;
  }
  78.57%{                                  /* 8s→11s の3秒かけてジワっと縮小＋ブロブ化 */
    left:0; top:11dvh; width:100vw; height:70dvh;
    border-radius: 45% 80% 40% 60% / 60% 55% 45% 40%;
  }
  100%{
    left:0; top:11dvh; width:100vw; height:70dvh;
    border-radius: 45% 70% 40% 60% / 60% 55% 45% 40%;
  }
}
/* 縮小しきった後、ブロブの輪郭が少しだけ形を変えながらゆらぎ続ける */
@keyframes fvBlobWobble{
  0%{   border-radius: 45% 80% 40% 60% / 60% 55% 45% 40%; }
  50%{  border-radius: 60% 40% 55% 45% / 45% 60% 40% 55%; }
  100%{ border-radius: 45% 80% 40% 60% / 60% 55% 45% 40%; }
}
/* 添付6は③と全く同じ位置・サイズ・タイミングで動かす（クリップなし＝輪郭からはみ出て見える） */
@keyframes fvHeroCutoutShrink{
  0%{
    left:0; top:0; width:100%; height:100%;
  }
  57.14%{
    left:0; top:0; width:100%; height:100%;
  }
  78.57%{
    left:0; top:11dvh; width:100vw; height:70dvh;
  }
  100%{
    left:0; top:11dvh; width:100vw; height:70dvh;
  }
}
/* 添付6は③と同じ8sのタイミングでふわっと見え始める */
@keyframes fvHeroCutoutIn{
  0%{ opacity:0; }
  54.29%{ opacity:0; }
  57.14%{ opacity:1; }     /* 8s、③と同時にフェードイン */
  100%{ opacity:1; }
}
@keyframes fvScene04{
  0%{ opacity:0; }
  75.71%{ opacity:0; }
  78.57%{ opacity:1; }     /* 11s、③のスタックが縮小しきったタイミングでロゴの入れ物を表示 */
  100%{ opacity:1; }       /* そのまま静止（最終カット） */
}
@keyframes fvLogo{
  0%{ opacity:0; }
  92.86%{ opacity:0; }     /* 13s まではロゴなし */
  100%{ opacity:1; }       /* 13s→14s の1秒でロゴが重なって静止 */
}

@media (prefers-reduced-motion: reduce){
  .fv-scene, .fv-logo{ animation:none !important; }
  .fv-scene--01, .fv-scene--02, .fv-scene--03{ opacity:0; }
  .fv-scene--04, .fv-logo{ opacity:1; }
}

/* PC（860px以上）ではスマホ用FVを出さない */
@media (min-width: 860px){
  .hero-fv{ display:none; }
}

/* line-art hold decorations */
.hold{ position:absolute; stroke: var(--line); fill:none; stroke-width:1.4; }
.hold--accent{ stroke: var(--accent); opacity:.5; }

/* ==========================================================================
   HERO (FV) — PC版：従来のブランドテキスト＋画像スライドイン
   スマホ（859px以下）では非表示、スマホ版FVのみ表示
   ========================================================================== */
.hero{
  display:none;
  position:relative;
  padding-top: 64px;
  min-height: 92vh;
  align-items:center;
  overflow:hidden;
  background: radial-gradient(circle at 50% 45%, var(--bg) 0%, var(--bg) 35%, #D9D3C8 100%);
}
@media (min-width: 860px){
  .hero{ display:flex; }
}
.hero__grid{
  position:relative; width:100%;
  max-width: var(--container); margin:0 auto; padding: 0 24px;
  display:grid; gap: 56px; align-items:center;
}
@media (min-width: 860px){
  .hero__grid{ grid-template-columns: 1fr 1fr; }
}

.hero__copy{ order:2; }
.hero__headline{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem);
  line-height:1.5;
}
.hero__sub{ margin-top: 40px; font-size: .95rem; line-height: 2.2; color: var(--text-soft); }
.hero__sub strong{ display:block; margin-top:4px; font-family: var(--font-display); font-weight:700; letter-spacing:.2em; font-size:1.15rem; color: var(--text); }
.hero__actions{ margin-top: 48px; display:flex; flex-wrap:wrap; gap: 16px; }
.hero__actions .btn{ width: 224px; padding: 16px 20px; }

@media (min-width: 860px){
  .hero__copy{ order:1; }
}

.hero__stage{
  position:relative;
  order:1;
  aspect-ratio: 4 / 5;
  border-radius: 40px;
  overflow:hidden;
  background: var(--bg-tint);
  box-shadow: 0 30px 60px -25px rgba(28,27,25,.25);
}
@media (min-width: 860px){ .hero__stage{ order:2; } }

.hero__brand-text{
  position:absolute; right: 24px; bottom: 28px; z-index:1;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .04em;
  font-size: clamp(1rem, .7rem + 1.4vw, 1.5rem);
  color: var(--text);
  text-align:right;
  animation: brandTextIn .9s cubic-bezier(.22,1,.36,1) .35s both;
}

.hero__image{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; object-fit:cover;
  transform: translate3d(115%, 0, 0);
  animation: heroImageIn 1.15s cubic-bezier(.65,0,.35,1) 1.05s both;
}

@keyframes brandTextIn{
  0%{ opacity:0; transform: translate(46px, 46px); }
  100%{ opacity:1; transform: translate(0,0); }
}
@keyframes heroImageIn{
  0%{ transform: translate3d(115%,0,0); }
  100%{ transform: translate3d(0,0,0); }
}


/* ---- blob section divider ---- */
.divider{ position:relative; height: 90px; overflow:hidden; line-height:0; }
.divider svg{ width:100%; height:100%; display:block; }

/* ==========================================================================
   ABOUT / WELCOME — with the continuously moving sun
   ========================================================================== */
.about{ position:relative; overflow:hidden; background: var(--bg-alt) url('images/背景空.jpg') center/cover no-repeat; }
.about__inner{ max-width: 720px; margin:0 auto; padding: 0 24px; text-align:center; }
.about__lead{ font-family: var(--font-display); font-weight:700; letter-spacing:.2em; font-size: clamp(1.1rem,.9rem+1vw,1.4rem); color: var(--accent); }
.about__body{ margin-top: 56px; font-size: .95rem; line-height: 2.4; white-space: pre-line; }
.about__link{ margin-top: 40px; }

/* ---- gallery: full-bleed, endlessly looping horizontal marquee ---- */
.gallery-marquee{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 80px;
  overflow: hidden;
}
.gallery-marquee__track{
  display:flex;
  align-items:flex-end;
  gap: 12px;
  width: max-content;
  padding: 0 12px;
  animation: galleryMarqueeScroll 44s linear infinite;
}
.gallery-marquee:hover .gallery-marquee__track{ animation-play-state: paused; }
.gallery-marquee__track img{
  flex: 0 0 auto;
  width: clamp(160px, 17vw, 232px);
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 24px;
}
.gallery-marquee__track img:nth-child(odd){ margin-bottom: 32px; }
@keyframes galleryMarqueeScroll{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-50%,0,0); }
}
@media (prefers-reduced-motion: reduce){
  .gallery-marquee__track{ animation: none; overflow-x: auto; }
}

/* ---- sun graphic: always gently moving ---- */
.sun{
  position:absolute;
  top: 4%;
  right: 6%;
  width: 150px; height:150px;
  pointer-events:none;
  animation: sunFloat 6.5s ease-in-out infinite;
}
.sun__rays{ transform-origin: 50% 50%; animation: sunSpin 40s linear infinite; }
.sun__core{ fill: var(--accent); opacity:.9; }
.sun__ray{ stroke: var(--accent); stroke-width: 2; stroke-linecap: round; opacity:.55; }

@keyframes sunFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-16px); }
}
@keyframes sunSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

@media (max-width: 640px){
  .sun{ width: 96px; height:96px; top:2%; right:4%; }
}

/* ==========================================================================
   POINTS
   ========================================================================== */
.points__title{ text-align:center; }
.point{ margin-top: 96px; display:grid; gap: 40px; align-items:center; }
.point:first-of-type{ margin-top: 64px; }
@media (min-width: 860px){
  .point{ grid-template-columns: 3fr 2fr; gap: 64px; align-items:start; }
  .point--reverse{ grid-template-columns: 2fr 3fr; }
  .point--reverse .point__figure{ order:2; }
  .point--reverse .point__copy{ order:1; }
}
.point__figure{ position:relative; border-radius: 32px; overflow:hidden; aspect-ratio: 5/4; background: var(--bg-tint); }
.point__figure img{ width:100%; height:100%; object-fit:cover; }
.point__heading{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.point__num{ font-family: var(--font-display); font-weight:700; font-size:2.2rem; color: rgba(237,108,42,.55); }
.point__num::after{ content:"\FF0E"; }
.point__name{ font-family: var(--font-display); font-weight:700; font-size:1.25rem; margin-top:0; }
.point__text{ margin-top: 24px; font-size:.92rem; line-height:2; white-space: pre-line; }
.point__badges{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.point__badge{
  background: var(--text);
  color: #fff;
  border: 1px solid var(--text);
  padding: 5px 13px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight:700;
  font-size: .68rem;
  letter-spacing:.06em;
}

/* ==========================================================================
   VOICE
   ========================================================================== */
.voice{ position:relative; overflow:hidden; }
.voice__grid{ margin-top: 64px; display:grid; gap: 24px; }
@media (min-width: 860px){ .voice__grid{ grid-template-columns: repeat(3,1fr); } }
.voice__card{
  background: var(--surface); border-radius: 28px; padding: 36px 30px;
  text-align:center; box-shadow: 0 20px 45px -30px rgba(28,27,25,.35);
}
.voice__avatar{ width: 64px; height:64px; border-radius:50%; overflow:hidden; margin: 0 auto; background: var(--bg-tint); }
.voice__avatar img{ width:100%; height:100%; object-fit:cover; }
.voice__quote{ margin-top: 24px; font-size:.92rem; line-height:1.9; }
.voice__name{ margin-top: 24px; font-size:.72rem; letter-spacing:.14em; color: var(--text-soft); }

/* ==========================================================================
   NEWS
   ========================================================================== */
.news__note{ text-align:center; font-size:.72rem; letter-spacing:.14em; color: var(--text-soft); margin-top:16px; }
.news__list{ max-width: 680px; margin: 56px auto 0; border-top:1px solid rgba(172,165,157,.5); }
.news__item{ padding: 26px 0; border-bottom:1px solid rgba(172,165,157,.5); display:flex; align-items:center; gap: 18px; font-size:.88rem; color: var(--text-soft); }
.news__dot{ width:10px; height:10px; border-radius:50%; border:1px solid var(--line); flex-shrink:0; }

/* ==========================================================================
   ACCESS
   ========================================================================== */
.access__grid{ margin-top: 64px; display:grid; gap: 48px; }
@media (min-width: 860px){ .access__grid{ grid-template-columns: 1fr 1fr; } }
.access__map{ border-radius: 32px; overflow:hidden; aspect-ratio: 4/3; background: var(--bg-tint); }
.access__map img{ width:100%; height:100%; object-fit:cover; }
.access__map iframe{ width:100%; height:100%; display:block; }
.access__info{ font-size: .92rem; }
.access__hours-title{ font-family: var(--font-display); font-weight:700; margin-top: 40px; margin-bottom: 10px; font-size:1.1rem; }
.access__table{ margin-top: 24px; }
.access__row{ display:flex; justify-content:space-between; padding: 12px 0; border-bottom: 1px solid rgba(172,165,157,.5); }
.access__row-label{ color: var(--text-soft); }

/* ==========================================================================
   PRICING (placeholder)
   ========================================================================== */
.pricing__box{
  margin-top: 40px; padding: 72px 24px; text-align:center;
  border: 1px dashed var(--line); border-radius: 28px;
  color: var(--text-soft); font-size:.85rem; letter-spacing:.12em;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ max-width: 720px; margin: 56px auto 0; padding: 0 24px; display:flex; flex-direction:column; gap: 16px; }
.faq__item{ background: var(--surface); border: 1px solid rgba(172,165,157,.4); border-radius: 18px; padding: 20px 26px; }
.faq__item > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:.92rem; }
.faq__item > summary::-webkit-details-marker{ display:none; }
.faq__q-mark{ font-family: var(--font-display); color: var(--accent); font-weight:700; margin-right:8px; }
.faq__plus{ color: var(--text-soft); font-size:1.2rem; transition: transform .3s ease; flex-shrink:0; }
.faq__item[open] .faq__plus{ transform: rotate(45deg); }
.faq__answer{ margin-top: 16px; font-size:.85rem; line-height:1.9; color: var(--text-soft); white-space: pre-line; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ position:relative; padding: 88px 0; overflow:hidden; }
.footer__inner{ max-width: 640px; margin:0 auto; padding:0 24px; text-align:center; }
.footer__logo{ font-family: var(--font-display); font-weight:700; letter-spacing:.2em; font-size:1.3rem; color: var(--accent); }
.footer__addr{ margin-top: 12px; font-size:.72rem; letter-spacing:.14em; color: var(--text-soft); }
.footer__sns{ margin-top: 40px; display:flex; align-items:center; justify-content:center; gap: 24px; }
.footer__sns a{
  width: 44px; height:44px; border-radius:50%; border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color: var(--text-soft);
  transition: all .3s ease;
}
.footer__sns a:hover{ color: var(--accent); border-color: var(--accent); }
.footer__copyright{ margin-top: 48px; font-size:.68rem; letter-spacing:.14em; color: var(--text-soft); }