/*
Theme Name: Hanpenkun
Theme URI: https://hanpenkun.jp/
Author: cielkocka
Description: はんぺんくん公式サイト（hanpenkun.jp）をWordPress独自テーマとして再現。STUDIO製の静的サイトをCPT＋ACFで運用可能にしたもの。お知らせ(news)/住民(character)/グッズ(goods)/ギャラリー(gallery)のCPTを持つ。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: hanpenkun
*/

/* ============================================================
   はんぺんくん  hanpenkun.jp 再現スタイル
   ============================================================ */
:root{
  --blue:        #51aed0;
  --blue-deep:   #3f9dc0;
  --blue-light:  #7cbede;
  --ink:         #5a5a5a;
  --gray:        #8b8b8b;
  --pink:        #f6c9d6;
  --gray-bg:     #ececec;   /* グッズ・関連・フッターの薄グレー */
  --font-jp: 'Zen Maru Gothic','Hiragino Maru Gothic ProN',sans-serif;
  --font-en: 'Lato',sans-serif;
  --maxw: 1180px;
  --header-h: 70px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--font-jp);color:var(--ink);
  font-size:15px;line-height:1.8;letter-spacing:.06em;background:#fff;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;transition:opacity .2s;}
a:hover{opacity:.7;}
.en{font-family:var(--font-en);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

/* ---------- HEADER ---------- */
.hd{position:fixed;top:0;left:0;right:0;height:var(--header-h);z-index:50;
  background:#fff;display:flex;align-items:center;}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1400px;}
.hd-logo img{height:30px;width:auto;}
.hd-logo .txt{font-family:var(--font-jp);font-weight:700;font-size:24px;color:var(--blue);letter-spacing:.18em;}
.hd-nav{display:flex;align-items:center;gap:30px;}
.hd-nav a{font-size:14px;font-weight:500;color:#555;letter-spacing:.08em;}
.hd-sns{display:flex;gap:14px;align-items:center;}
.hd-sns a{color:var(--blue);font-size:17px;}
.hd-sns svg{width:20px;height:20px;fill:var(--blue);}
.burger{display:none;border:0;background:none;font-size:24px;color:var(--blue);cursor:pointer;}

/* ---------- 空ゾーン（HERO＋お知らせを1枚の空背景で繋ぐ） ---------- */
.sky-zone{position:relative;
  /* 上部が白すぎたので、空画像をさらに下へずらして青味を上に。テクスチャを下地に重ねる */
  background:url('assets/deco/sky-hero.webp') center 62% / cover no-repeat,
             url('assets/deco/blue-texture.webp') center top/cover no-repeat, var(--blue);}
/* ヘッダー直下のうっすらした上端を引き締める（薄青のかぶせ） */
.sky-zone::before{content:"";position:absolute;top:0;left:0;right:0;height:160px;z-index:0;
  background:linear-gradient(180deg, rgba(81,174,208,.45) 0%, rgba(81,174,208,0) 100%);pointer-events:none;}
/* 下端を雲でシームレスに次セクション(白)へ繋ぐ */
.sky-zone .cloud-band--down{position:relative;z-index:3;}

/* ---------- HERO ---------- */
.hero{position:relative;height:90vh;min-height:640px;overflow:hidden;padding-top:var(--header-h);}
.hero-inner{position:absolute;left:0;right:0;top:var(--header-h);bottom:0;z-index:2;}
/* 縦書きタイトル（中央・1列固定） */
.hero-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--font-jp);font-weight:700;color:#fff;
  writing-mode:vertical-rl;text-orientation:upright;white-space:nowrap;
  font-size:clamp(44px,7vw,96px);letter-spacing:.08em;line-height:1.0;
  text-shadow:0 6px 0 rgba(63,157,192,.22);z-index:2;margin:0;}
/* はんぺん2体を斜めに配置（左上・右下） */
.hero-char{position:absolute;width:clamp(210px,24vw,380px);
  filter:drop-shadow(0 16px 22px rgba(63,120,150,.22));z-index:1;}
.hero-char--left{left:8%;top:14%;
  animation:drop-in-l 1s cubic-bezier(.34,1.4,.5,1) .15s both, sway-l 6s ease-in-out 1.5s infinite;}
.hero-char--right{right:8%;bottom:10%;
  animation:drop-in-r 1s cubic-bezier(.34,1.4,.5,1) .5s both, sway-r 6.5s ease-in-out 2s infinite;}
/* ロード時に上から落ちて着地 */
@keyframes drop-in-l{0%{opacity:0;transform:translateY(-120vh) rotate(-14deg);}70%{opacity:1;}100%{opacity:1;transform:translateY(0) rotate(-6deg);}}
@keyframes drop-in-r{0%{opacity:0;transform:translateY(-120vh) rotate(14deg);}70%{opacity:1;}100%{opacity:1;transform:translateY(0) rotate(6deg);}}
/* 着地後：斜めを保ちつつ ふわふわ揺れる */
@keyframes sway-l{0%,100%{transform:translateY(0) rotate(-6deg);}50%{transform:translateY(-18px) rotate(-9deg);}}
@keyframes sway-r{0%,100%{transform:translateY(0) rotate(6deg);}50%{transform:translateY(-18px) rotate(9deg);}}

/* ---------- セクション共通 ---------- */
.sec{position:relative;}
.sec-blue{background:var(--blue);}
.sec-gray{background:var(--gray-bg);}
.sec-white{background:#fff;}
.sec-pad{padding:80px 0;}

/* 円弧見出し（HANPEN★GOODS等）＋日本語サブ */
.sec-title{text-align:center;margin:0 0 48px;}
.sec-title .arc{font-family:var(--font-en);font-weight:700;letter-spacing:.32em;
  color:var(--blue);font-size:18px;}
.sec-title .arc .star{color:var(--pink);}
.sec-title .sub{display:block;font-family:var(--font-jp);font-weight:700;
  color:#fff;font-size:clamp(26px,4vw,38px);margin-top:6px;letter-spacing:.12em;}
.sec-title.dark .sub{color:var(--blue);}

/* 雲の境界（添付準拠：もこもこの大きな白い雲シルエットSVG）
   白い雲が下向きに垂れ下がる帯。青背景の上に重ねる。 */
.cloud-band{height:120px;background:url('assets/deco/cloud-band.svg') bottom center/100% 100% no-repeat;
  position:relative;z-index:2;margin-bottom:-1px;line-height:0;}
.cloud-band--flip{transform:scaleY(-1);margin-top:-1px;margin-bottom:0;}
/* 空ゾーンの下端：白い雲が下にせり出して次セクション(白)に溶け込む */
.cloud-band--down{height:140px;background:url('assets/deco/cloud-band.svg') bottom center/100% 100% no-repeat;margin-bottom:-1px;}

/* ---------- お知らせ（空ゾーン内・背景透過） ---------- */
.news-sec{background:transparent;padding:10px 0 70px;position:relative;z-index:2;}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.news-card{background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 10px 24px rgba(40,90,120,.16);display:flex;flex-direction:column;}
.news-card .thumb{aspect-ratio:16/10;overflow:hidden;background:#dfe9ee;}
.news-card .thumb img{width:100%;height:100%;object-fit:cover;}
.news-card .body{padding:18px 18px 22px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
.news-card .ttl{font-size:14px;font-weight:500;line-height:1.6;color:#444;}
.news-card .date{font-family:var(--font-en);background:var(--blue);color:#fff;
  font-size:13px;padding:5px 16px;border-radius:999px;letter-spacing:.05em;}

/* ---------- はんぺんくんとは ----------
   背景はHEROと同じ青グラデ。中央の本文エリアは白い雲に囲まれる。 */
.about{background:#fff;text-align:center;position:relative;padding:0;}
.about-inner{background:#fff;position:relative;z-index:1;padding:30px 0 50px;}
.about-row{display:flex;align-items:center;justify-content:center;gap:40px;}
.about-face{width:90px;flex:0 0 90px;animation:bob 4s ease-in-out infinite;}
.about-face:last-child{animation-delay:.6s;}
.about-text{font-size:clamp(16px,2.2vw,21px);line-height:2.4;color:var(--blue);font-weight:500;white-space:pre-line;}

/* ---------- 住民たち（グリッド） ----------
   添付準拠：専用のグリッド背景画像をセクション全面に敷く。 */
.chars{position:relative;padding:140px 0 96px;overflow:hidden;
  background:url('assets/deco/grid-light.webp') top center/cover no-repeat,
             url('assets/deco/blue-texture.webp') center/cover no-repeat, var(--blue);}
/* 上端に白い雲（白いABOUTから青いCHARSへシームレスに繋ぐ） */
.chars::before{content:"";position:absolute;top:-1px;left:0;right:0;height:120px;z-index:2;
  background:url('assets/deco/cloud-band.svg') top center/100% 100% no-repeat;
  transform:scaleY(-1);}
.chars .wrap{position:relative;z-index:1;}
.char-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:80px 40px;margin-top:48px;}
.char{text-align:center;}
.char img{width:auto;max-height:250px;margin:0 auto 20px;
  filter:drop-shadow(0 8px 12px rgba(40,90,120,.18));}
/* ホバーで1回転しながら少し拡大（回転後は拡大状態を保持） */
.char:hover img{animation:char-spin .6s cubic-bezier(.34,1.2,.5,1) forwards;}
@keyframes char-spin{
  0%{transform:rotate(0deg) scale(1);}
  100%{transform:rotate(360deg) scale(1.12);}
}
.char .name{color:#fff;font-weight:700;font-size:16px;letter-spacing:.08em;}

/* ---------- カルーセル共通（グッズ／ギャラリー） ---------- */
.carousel{position:relative;}
.track{display:flex;gap:34px;overflow-x:auto;
  padding:18px 48px 24px;scrollbar-width:none;}
.track::-webkit-scrollbar{display:none;}
.arrows{display:flex;gap:30px;justify-content:center;margin-top:30px;}
.arrow{width:46px;height:46px;border-radius:50%;border:0;background:#fff;
  color:var(--blue);font-size:22px;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.12);
  display:flex;align-items:center;justify-content:center;}
.arrow:hover{background:var(--blue);color:#fff;}

/* グッズ */
.goods-sec{background:var(--gray-bg);position:relative;padding:40px 0 80px;}
/* アーチ見出し */
.goods-arch{position:relative;height:130px;margin-top:-1px;
  background:var(--blue);}
.goods-arch::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:340px;height:170px;background:var(--gray-bg);
  border-radius:170px 170px 0 0;border:3px solid var(--pink);border-bottom:none;}
.goods-arch .arc-label{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  z-index:2;font-family:var(--font-en);font-weight:700;color:var(--blue);
  letter-spacing:.2em;font-size:17px;white-space:nowrap;}
.goods-arch .arc-label .star{color:var(--pink);}
.goods{flex:0 0 280px;scroll-snap-align:center;background:#fff;border-radius:6px;
  overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.08);
  display:flex;flex-direction:column;transition:transform .3s ease;}
.goods:hover{transform:translateY(-6px);}
.goods .pic{width:280px;height:280px;background:#fff;flex:0 0 280px;}
.goods .pic img{width:100%;height:100%;object-fit:cover;}
.goods .info{padding:18px 16px 24px;text-align:center;flex:1;
  display:flex;flex-direction:column;justify-content:flex-start;gap:10px;}
.goods .gname{font-size:13.5px;line-height:1.7;color:#444;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;}
.goods .price{font-size:13.5px;color:#555;font-weight:500;}

/* ギャラリー
   元サイト準拠：均一な水色背景＋上下の白い波線、フレームは薄青マット付き白フレーム。 */
.gallery-sec{position:relative;overflow:hidden;padding:64px 0 72px;
  background:url('assets/deco/blue-texture.webp') center/cover no-repeat, var(--blue);}
/* 上下の波線ボーダー（白・うっすら） */
.gallery-sec::before,.gallery-sec::after{content:"";position:absolute;left:0;right:0;height:14px;
  background:url('assets/deco/wave.svg') repeat-x center/auto 14px;opacity:.55;z-index:2;}
.gallery-sec::before{top:14px;}
.gallery-sec::after{bottom:14px;}
.gallery-sec .wrap{position:relative;z-index:1;}
/* 装飾オーバーレイ（ドット円・星）：左下と右下のハーフトーン円＋ちらほら星 */
.gallery-sec .gdeco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.gallery-sec .gdeco i{position:absolute;}
/* ハーフトーンの円（白ドット） */
.gallery-sec .gdeco .dotcircle{width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.55) 2.2px, transparent 2.6px) 0 0/16px 16px;
  -webkit-mask:radial-gradient(circle at center, #000 60%, transparent 62%);
          mask:radial-gradient(circle at center, #000 60%, transparent 62%);opacity:.9;}
.gallery-sec .gdeco .dc1{left:-60px;bottom:-40px;}
.gallery-sec .gdeco .dc2{right:60px;bottom:-70px;width:170px;height:170px;}
.gallery-sec .gdeco .dc3{right:-50px;top:30px;width:200px;height:200px;}
/* 星（4芒星） */
.gallery-sec .gdeco .star{width:30px;height:30px;opacity:.95;
  background:conic-gradient(from 45deg,transparent 0 10%,#fff 10% 15%,transparent 15% 35%,#fff 35% 40%,transparent 40% 60%,#fff 60% 65%,transparent 65% 85%,#fff 85% 90%,transparent 90%);
  -webkit-mask:radial-gradient(circle,#000 70%,transparent 71%);}
.gallery-sec .gdeco .st1{left:6%;top:24%;}
.gallery-sec .gdeco .st2{right:5%;top:18%;width:38px;height:38px;}
.gallery-sec .gdeco .st3{left:46%;bottom:8%;width:22px;height:22px;}
.poladot{flex:0 0 300px;scroll-snap-align:center;background:#fff;
  padding:12px;box-shadow:0 10px 22px rgba(40,90,120,.22);
  border-radius:3px;transition:transform .3s ease;}
.poladot:hover{transform:translateY(-8px) scale(1.02);}
/* 薄青のマット（元サイト準拠） */
.poladot .pic{width:276px;height:276px;overflow:hidden;background:#cfe3ee;
  display:flex;align-items:center;justify-content:center;}
.poladot .pic img{width:100%;height:100%;object-fit:cover;}

/* ---------- 関連サイト ---------- */
.links-sec{background:var(--gray-bg);padding:70px 0 90px;}
.links-grid{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-top:10px;}
.link-banner{width:340px;height:200px;border-radius:8px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;box-shadow:0 6px 16px rgba(0,0,0,.08);}
.link-banner.shop{background:var(--blue);color:#fff;}
.link-banner.shop .big{font-family:var(--font-en);font-size:34px;letter-spacing:.04em;}
.link-banner.shop .small{font-family:var(--font-en);font-size:13px;letter-spacing:.3em;}
.link-banner.soraru{background:#fff;}
.link-banner.soraru .big{font-family:var(--font-jp);font-size:40px;color:#222;letter-spacing:.12em;}
.link-banner.soraru .small{font-size:13px;letter-spacing:.3em;color:#333;}

/* ---------- フッター ---------- */
.ft{background:var(--gray-bg);padding:34px 0 40px;border-top:1px solid #dcdcdc;}
.ft .wrap{display:flex;align-items:center;justify-content:space-between;}
.ft .copy{font-family:var(--font-en);font-size:12px;color:#888;}
.ft .sns{display:flex;gap:14px;}
.ft .sns svg{width:18px;height:18px;fill:var(--blue);}

/* ---------- 帯（ピンクドット） ---------- */
.band{height:24px;background:url('assets/deco/band-dots.webp') center/auto 100% repeat-x;}

/* ---------- アニメーション ---------- */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(-1.5deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(.85)}100%{opacity:1;transform:scale(1)}}
/* 矢印が左右に寄せ合うループアニメ（ヒントになる動き） */
@keyframes nudge-left{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}
@keyframes nudge-right{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.arrow[data-d="-1"]{animation:nudge-left 1.4s ease-in-out infinite;}
.arrow[data-d="1"]{animation:nudge-right 1.4s ease-in-out infinite;}
.arrow:hover{animation-play-state:paused;}

/* スクロールで出現（JSが .in を付与） */
.reveal{opacity:0;}
.reveal.in{animation:fadeUp .7s cubic-bezier(.2,.7,.3,1) forwards;}
/* 住民はポップで出現（順番に遅延） */
.char.reveal.in{animation:popIn .55s ease forwards;}
/* カルーセル内（グッズ／ギャラリー）は横スクロールで交差判定が効かないため常時表示 */
.goods.reveal,.poladot.reveal{opacity:1;}
.reveal.d1{animation-delay:.08s}.reveal.d2{animation-delay:.16s}
.reveal.d3{animation-delay:.24s}.reveal.d4{animation-delay:.32s}
.reveal.d5{animation-delay:.40s}.reveal.d6{animation-delay:.48s}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal.in{opacity:1;animation:none!important;}
  .hero-char,.about-face{animation:none!important;}
}

/* ---------- レスポンシブ ---------- */

/* タブレット */
@media(max-width:980px){
  .news-grid{grid-template-columns:1fr 1fr;gap:20px;max-width:680px;margin:0 auto;}
  .char-grid{grid-template-columns:repeat(3,1fr);gap:54px 24px;}
}

/* スマホ（768px以下） */
@media(max-width:768px){
  :root{--header-h:60px;}
  .wrap{padding:0 18px;}

  /* ヘッダー：ハンバーガー表示・SNSリンクは隠す */
  .hd-logo .txt{font-size:21px;letter-spacing:.12em;}
  .hd-nav{position:fixed;top:var(--header-h);left:0;right:0;background:#fff;flex-direction:column;
    gap:0;padding:6px 22px 14px;transform:translateY(-140%);transition:transform .32s ease;
    box-shadow:0 10px 20px rgba(0,0,0,.1);max-height:calc(100vh - var(--header-h));overflow:auto;}
  .hd-nav.open{transform:translateY(0);}
  .hd-nav a{padding:15px 2px;border-bottom:1px solid #eee;width:100%;font-size:15px;}
  .hd-sns{gap:0;}
  .hd-sns a{display:none;}     /* SNSアイコンは隠す */
  .burger{display:block;}

  /* ヒーロー：2体を上下に大きく＋タイトル中央。重なり回避のため縦並び感に */
  .hero{height:auto;min-height:0;padding:calc(var(--header-h) + 30px) 0 40px;}
  .hero-inner{position:relative;inset:auto;height:auto;min-height:78vh;}
  .hero-title{font-size:clamp(40px,15vw,72px);letter-spacing:.06em;}
  .hero-char{width:clamp(110px,30vw,150px);}
  .hero-char--left{left:5%;top:12%;}
  .hero-char--right{right:5%;bottom:8%;}

  /* お知らせ：1カラム */
  .news-grid{grid-template-columns:1fr;max-width:340px;}
  .news-sec{padding:6px 0 50px;}

  /* セクション見出し */
  .sec-title{margin-bottom:30px;}
  .sec-title .sub{font-size:clamp(22px,6vw,28px);}

  /* とは */
  .about-row{flex-direction:column;gap:14px;}
  .about-face{width:64px;flex-basis:64px;}
  .about-inner{padding:18px 0 34px;}
  .about-text{font-size:16px;line-height:2.1;}

  /* 住民：2カラム・少し小さく */
  .chars{padding:90px 0 70px;}
  .char-grid{grid-template-columns:repeat(2,1fr);gap:44px 16px;}
  .char img{max-height:130px;margin-bottom:12px;}
  .char .name{font-size:14px;}
  .chars::before{height:80px;}

  /* 雲帯 */
  .cloud-band,.cloud-band--down{height:64px;}

  /* グッズ：カード小さめ */
  .goods-arch{height:96px;}
  .goods-arch::after{width:230px;height:118px;border-radius:118px 118px 0 0;}
  .goods-arch .arc-label{bottom:24px;font-size:14px;letter-spacing:.12em;}
  .goods-sec{padding:24px 0 56px;}
  .track{gap:18px;padding:14px 22px 18px;}
  .goods{flex:0 0 210px;}
  .goods .pic{width:210px;height:210px;flex-basis:210px;}
  .goods .gname{font-size:12.5px;}

  /* ギャラリー */
  .gallery-sec{padding:50px 0 56px;}
  .poladot{flex:0 0 230px;padding:10px;}
  .poladot .pic{width:210px;height:210px;}
  .gallery-sec .gdeco .dotcircle{transform:scale(.7);}

  /* 矢印 */
  .arrow{width:40px;height:40px;font-size:20px;}
  .arrows{gap:22px;margin-top:22px;}

  /* 関連サイト */
  .links-sec{padding:50px 0 64px;}
  .links-grid{gap:16px;}
  .link-banner{width:100%;max-width:320px;height:160px;}
  .link-banner.shop .big{font-size:30px;}
  .link-banner.soraru img{width:56%;}

  /* フッター */
  .ft{padding:26px 0 32px;}
  .ft .wrap{flex-direction:column;gap:14px;text-align:center;}
}

/* 細いスマホ（400px以下） */
@media(max-width:400px){
  .char-grid{gap:36px 12px;}
  .char img{max-height:112px;}
  .goods{flex:0 0 180px;}
  .goods .pic{width:180px;height:180px;flex-basis:180px;}
  .poladot{flex:0 0 200px;}
  .poladot .pic{width:180px;height:180px;}
}

/* ギャラリー見出し（日本語2行・白・小さめ） */
.sec-title--jp{margin-bottom:36px;}
.sec-title--jp .sub{color:#fff;font-size:clamp(20px,2.6vw,26px);line-height:1.5;letter-spacing:.16em;}
.sec-title--jp .sub::after{content:none;}

/* ---------- ライトボックス（ギャラリー拡大） ---------- */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(40,90,120,.82);
  display:none;align-items:center;justify-content:center;padding:5vh 5vw;cursor:zoom-out;
  opacity:0;transition:opacity .25s ease;}
.lightbox.open{display:flex;opacity:1;}
.lightbox img{max-width:90vw;max-height:88vh;border-radius:6px;
  box-shadow:0 20px 50px rgba(0,0,0,.4);background:#fff;
  animation:lbpop .3s cubic-bezier(.2,.8,.3,1);}
@keyframes lbpop{from{transform:scale(.9);opacity:.4}to{transform:scale(1);opacity:1}}
.lb-close{position:fixed;top:20px;right:28px;width:46px;height:46px;border-radius:50%;
  border:0;background:#fff;color:var(--blue);font-size:28px;line-height:1;cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.2);}

/* ---------- SNSアイコン（公式ブランドSVG・インライン） ---------- */
.hd-sns a{display:inline-flex;align-items:center;justify-content:center;color:var(--blue);}
.hd-sns a svg{width:20px;height:20px;fill:currentColor;}
.burger svg{width:24px;height:24px;color:var(--blue);}
.ft .sns a{display:inline-flex;color:var(--blue);}
.ft .sns a svg{width:19px;height:19px;fill:currentColor;}