@charset "utf-8";
/* 全5ページ共通のヘッダー。各ページのCSSとは独立させてある（sh 接頭辞） */
/* ===== 共通ヘッダー（sh）。各ページのCSSに触らずに済むよう独立させている ===== */
.sh{position:fixed;top:0;left:0;right:0;z-index:310;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem clamp(1rem,4vw,3rem);mix-blend-mode:multiply;pointer-events:none}
.sh>*{pointer-events:auto}
.sh-gap{height:calc(2rem + 30px)}
/* ヘッダーの高さ。各ページが上の余白を取るのに使う（実測 PC 62px / 携帯 66px） */
:root{--sh-h:62px}
@media (max-width:760px){ :root{--sh-h:66px} }

/* ===== 下へスクロールしたら紙の地を出す。最上部では透過のまま ===== */
/* 地は擬似要素に持たせて不透明度だけ動かす。
   mix-blend-mode は補間できないので、地が出るのと同時に normal へ切り替える */
.sh::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  /* ページの紙色（#E9E8E6）より一段濃くして、帯としてはっきり分かるようにする */
  background:#DAD5CB url("../../naoto-assets/tile/paper-white@512w.webp") repeat;
  background-size:320px;background-blend-mode:multiply;
  border-bottom:1.5px solid rgba(20,17,15,.28);
  box-shadow:0 6px 18px rgba(20,17,15,.1);
  opacity:0;transition:opacity .28s ease}
.sh--solid::before{opacity:1}
/* multiply のままだと紙の地が濃い写真に負けて透けるので、地が出たら normal */
.sh--solid{mix-blend-mode:normal}
/* 地が出ているあいだは、濃い面用の反転より地のほうが優先。
   紙の上に紙色の文字が乗ってしまうのを防ぐ */
.sh--solid.sh--on-dark .sh__id,
.sh--solid.sh--on-dark .sh__nav a,
.sh--solid.sh--on-dark .sh__btn{color:#14110F}
.sh--solid.sh--on-dark .sh__nav a[aria-current="page"]{border-bottom-color:#14110F}
@media (prefers-reduced-motion:reduce){ .sh::before{transition:none} }
/* HOMEはローディングが明けてから出す。他のページは最初から出す */
html.loading .sh{opacity:0}
html.ready .sh{opacity:1;transition:opacity .6s ease .2s}

.sh__id{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#14110F}
.sh__logo{width:30px;height:30px;border-radius:50%;flex:none;
  background:url("../../naoto-works/works/icon-face-cut@420w.webp") center/cover no-repeat}
.sh__id b{font-family:Anton,sans-serif;font-size:.74rem;letter-spacing:.16em;white-space:nowrap}

.sh__nav{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.6rem)}
.sh__nav a{font-family:Anton,sans-serif;font-size:.7rem;letter-spacing:.16em;
  text-decoration:none;color:#14110F;padding-bottom:.15rem;border-bottom:2px solid transparent}
.sh__nav a:hover{border-bottom-color:#D3381C}
.sh__nav a[aria-current="page"]{border-bottom-color:#14110F}

/* ハンバーガー：3本線。開くと×になる */
.sh__btn{display:none;width:34px;height:34px;border:0;background:none;padding:0;cursor:pointer;
  position:relative;color:#14110F}
.sh__btn i,.sh__btn i::before,.sh__btn i::after{position:absolute;left:6px;right:6px;height:2.6px;
  background:currentColor;content:"";transition:transform .22s ease,opacity .18s ease}
.sh__btn i{top:50%;translate:0 -50%}
.sh__btn i::before{top:-8px;left:0;right:0}
.sh__btn i::after{top:8px;left:0;right:0}
.sh__btn[aria-expanded="true"] i{background:transparent}
.sh__btn[aria-expanded="true"] i::before{transform:translateY(8px) rotate(45deg)}
.sh__btn[aria-expanded="true"] i::after{transform:translateY(-8px) rotate(-45deg)}

/* 全面メニュー */
/* 通りすがりのメニュー。
   罫線で区切った表をやめ、街の人が立っている紙の上に、
   大きさと位置を振った文字を手で置いたように並べる。
   マークアップは5ページに複製されているので、ここのCSSだけで成立させる。 */
.sh-menu{position:fixed;inset:0;z-index:300;        /* ページ側の最前面（about の .tabs が 200）より上 */
  display:grid;align-content:center;
  gap:clamp(.2rem,1.6vh,1.1rem);
  padding:clamp(4.5rem,11vh,7rem) clamp(1rem,4vw,3.4rem) clamp(1.6rem,5vh,3.4rem);
  background:#E9E8E6 url("../../naoto-assets/tile/paper-white@512w.webp") repeat;
  background-size:320px;
  overflow:hidden}
.sh-menu[hidden]{display:none}
/* 人の上に文字が乗っても読めるよう、紙色のにじみで浮かせる（街の文言と同じ考え方） */
.sh-menu nav{position:relative;z-index:1;display:grid;justify-items:center;gap:clamp(.2rem,1.6vh,1.1rem)}
.sh-menu a{display:flex;align-items:baseline;gap:.8rem;text-decoration:none;color:#14110F;
  padding:clamp(.55rem,1.7vh,.95rem) 0;position:relative;width:max-content;max-width:100%;
  text-shadow:0 0 10px #E9E8E6,0 0 10px #E9E8E6,0 0 22px #E9E8E6,0 0 22px #E9E8E6}
/* 大きさも寄せも傾きも1行ずつ振る。紙の上に手で置いたように散らす。
   横のずれは left（動きの translate とぶつからない）、間隔は上の余白で作る */
.sh-menu a:nth-of-type(1){left:-25%;rotate:-1.2deg}
.sh-menu a:nth-of-type(2){left:26%;rotate:.8deg;margin-top:clamp(.2rem,2vh,1.4rem)}
.sh-menu a:nth-of-type(3){left:-23%;rotate:-.6deg}
.sh-menu a:nth-of-type(4){left:19%;rotate:1.3deg;margin-top:clamp(.3rem,2.4vh,1.8rem)}
.sh-menu a:nth-of-type(5){left:-15%;rotate:-.9deg}
.sh-menu em{font-family:Anton,sans-serif;font-style:normal;
  font-size:clamp(2rem,11vw,4.2rem);letter-spacing:.02em;line-height:.96;
  transition:color .18s ease,translate .18s ease}
.sh-menu a:nth-of-type(2) em{font-size:clamp(1.7rem,9vw,3.5rem)}
.sh-menu a:nth-of-type(3) em{font-size:clamp(2.3rem,12.5vw,4.8rem)}
.sh-menu a:nth-of-type(4) em{font-size:clamp(1.6rem,8.4vw,3.2rem)}
.sh-menu a:nth-of-type(5) em{font-size:clamp(1.9rem,10vw,3.8rem)}
.sh-menu span{font-weight:900;font-size:.72rem;
  color:rgba(20,17,15,.55);white-space:nowrap}
/* いま見ているページと、触っているところだけ朱の線を引く */
.sh-menu a::after{content:"";position:absolute;left:0;right:0;bottom:clamp(.35rem,1.1vh,.7rem);
  height:3px;background:#D3381C;scale:0 1;transform-origin:left center;
  transition:scale .24s cubic-bezier(.2,.6,.2,1)}
/* 開いたときに出る初期の枠を消す。キーボード操作のときだけ朱で示す */
.sh-menu:focus{outline:none}
.sh-menu a:focus{outline:none}
.sh-menu a:focus-visible{outline:3px solid #D3381C;outline-offset:4px}
.sh-menu a:hover em,.sh-menu a:focus-visible em{color:#D3381C;translate:.25rem 0}
.sh-menu a:hover::after,.sh-menu a:focus-visible::after{scale:1 1}
.sh-menu a[aria-current="page"] em{color:#D3381C}
.sh-menu a[aria-current="page"]::after{scale:1 1}
/* 足元は手書きの署名で締める */
.sh-menu__foot{position:relative;z-index:1;
  font-family:Anton,sans-serif;font-size:.6rem;letter-spacing:.2em;
  color:rgba(20,17,15,.45);margin-top:clamp(1.6rem,5vh,3rem);line-height:1.9;text-align:center;
  text-shadow:0 0 10px #E9E8E6,0 0 10px #E9E8E6,0 0 20px #E9E8E6,0 0 20px #E9E8E6}
/* 開いたときに、下から起き上がって並ぶ */
.sh-menu a,.sh-menu__foot{animation:shIn .42s cubic-bezier(.2,.6,.2,1) both}
.sh-menu a:nth-of-type(1){animation-delay:.04s}
.sh-menu a:nth-of-type(2){animation-delay:.09s}
.sh-menu a:nth-of-type(3){animation-delay:.14s}
.sh-menu a:nth-of-type(4){animation-delay:.19s}
.sh-menu a:nth-of-type(5){animation-delay:.24s}
.sh-menu__foot{animation-delay:.3s}
@keyframes shIn{from{opacity:0;translate:0 1.4rem}to{opacity:1;translate:0 0}}

/* 濃い面の上では墨のままだと読めない（実測 2.68:1）。紙色に反転する */
.sh--on-dark{mix-blend-mode:normal}
.sh--on-dark .sh__id,
.sh--on-dark .sh__nav a,
.sh--on-dark .sh__btn{color:#E9E8E6}
.sh--on-dark .sh__nav a[aria-current="page"]{border-bottom-color:#E9E8E6}
.sh--on-dark .sh__nav a:hover{border-bottom-color:#D3381C}

@media (max-width:760px){
  .sh__nav{display:none}
  .sh__btn{display:block}
  .sh__id b{font-size:.66rem}
}
@media (prefers-reduced-motion:reduce){
  .sh__btn i,.sh__btn i::before,.sh__btn i::after{transition:none}
  html.ready .sh{transition:none}
  .sh-menu a,.sh-menu__foot{animation:none}
  .sh-menu em,.sh-menu a::after{transition:none}
}


/* ===== ページの切り替え ===== */
/* 幕の地。去るときと着いたときで同じ面を出すので、作りは一か所にまとめる */
:root{
  --sh-curtain:
    url("../../naoto-assets/overlay/photocopy-grain@420w.webp") repeat,
    url("../../naoto-assets/tile/paper-white@512w.webp") repeat,
    radial-gradient(118% 84% at 50% 34%,rgba(255,255,255,.18),rgba(255,255,255,0) 60%),
    radial-gradient(125% 105% at 50% 48%,rgba(20,17,15,0) 52%,rgba(20,17,15,.15) 100%),
    radial-gradient(90% 60% at 88% 96%,rgba(20,17,15,.14),rgba(20,17,15,0) 70%),
    linear-gradient(to bottom,#D44226 0 76%,#BC361C 79%,#A02E14 100%);
  --sh-curtain-size:340px,270px,auto,auto,auto,auto;
  --sh-curtain-blend:multiply,multiply,screen,multiply,multiply,normal}
/* 紙の地に地面の線を引き、その上を街の人が歩いて横切る。
   行き先は真ん中に袋文字・英字・日本語の3段で示す。文字はそれだけ */
.sh-fade{position:fixed;inset:0;z-index:400;pointer-events:none;overflow:hidden;
  /* 開いた先が紙なので、幕は朱に振る。紙の目を掛け合わせて「紙に塗った色」にする。
     模様は入れず、地面より下だけを深くして立つ場所を作る */
  background:var(--sh-curtain);
  background-size:var(--sh-curtain-size);
  background-blend-mode:var(--sh-curtain-blend);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility 0s linear .3s}
.sh-fade.is-on{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}

/* 行き先。後ろに大きな袋文字、手前に英字と日本語 */
.sh-fade__ghost{position:absolute;left:50%;top:38%;translate:-50% -50%;
  font-family:Anton,sans-serif;font-size:min(32vw,28vh);line-height:.8;
  letter-spacing:.02em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.34);
  opacity:0;pointer-events:none}
/* 入れ物は場所を取らない。中の2行をそれぞれ画面に対して置く */
.sh-fade__mid{display:contents}
/* 英字。去る幕と着いた先の幕で、まったく同じ置き方・同じ大きさにする */
.sh-fade__name,
html.sh-arrive::after{position:fixed;left:0;right:0;top:38%;translate:0 -50%;
  margin:0;text-align:center;pointer-events:none;
  font-family:Anton,sans-serif;font-weight:400;
  font-size:clamp(2rem,11vw,5.4rem);line-height:1;letter-spacing:.04em;
  color:#F3F0EA}
/* 日本語。英字の下に、英字の高さの半分＋ひと息ぶん下げて置く */
.sh-fade__jp,
html.sh-arrive body::before{position:fixed;left:0;right:0;
  top:calc(38% + clamp(2rem,11vw,5.4rem) * .5 + clamp(.55rem,1.8vh,1rem));
  margin:0;text-align:center;pointer-events:none;
  font-family:system-ui,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-weight:900;
  font-size:clamp(.74rem,2.6vw,1rem);letter-spacing:.14em;
  color:#14110F}
.sh-fade__name,.sh-fade__jp{opacity:0}
.sh-fade.is-on .sh-fade__ghost{animation:shGhost .78s cubic-bezier(.2,.7,.3,1) both}
.sh-fade.is-on .sh-fade__name{animation:shNameIn .58s cubic-bezier(.2,.7,.3,1) .08s both}
.sh-fade.is-on .sh-fade__jp{animation:shJpIn .58s cubic-bezier(.2,.7,.3,1) .24s both}
@keyframes shGhost{from{opacity:0;scale:1.06}to{opacity:1;scale:1}}
@keyframes shNameIn{from{opacity:0;translate:0 calc(-50% + .7rem)}to{opacity:1;translate:0 -50%}}
@keyframes shJpIn{from{opacity:0;translate:0 .7rem}to{opacity:1;translate:0 0}}

/* 地面の線。手前の1本と、奥にもう1本。奥の人はそちらを歩く */
.sh-fade__ground{position:absolute;left:0;right:0;bottom:13vh;height:2px;
  background:rgba(243,240,234,.7);opacity:0}
.sh-fade__ground::after{content:"";position:absolute;left:0;right:0;top:5px;height:1px;
  background:#14110F;opacity:.42}
.sh-fade__ground::before{content:"";position:absolute;left:0;right:0;bottom:9vh;height:1px;
  background:rgba(243,240,234,.34)}
.sh-fade.is-on .sh-fade__ground{animation:shLine .66s cubic-bezier(.2,.7,.3,1) both}
@keyframes shLine{from{opacity:0;scale:.2 1}to{opacity:1;scale:1 1}}

/* 着いた先。去りぎわの場面をそのまま続ける。出入りの動きは使わず、出ている状態から始める */
.sh-fade.is-cont{opacity:1;visibility:visible;pointer-events:none;transition:none}
.sh-fade.is-cont .sh-fade__ghost,
.sh-fade.is-cont .sh-fade__name,
.sh-fade.is-cont .sh-fade__jp,
.sh-fade.is-cont .sh-fade__ground{animation:none;opacity:1}
/* 人も文字も地も、まとめて一度に引く */
.sh-fade.is-cont.is-leave{opacity:0;transition:opacity .42s ease}

/* 着いた先。去りぎわと同じ朱の面から始めて、じんわり引く */
html.sh-arrive::before{content:"";position:fixed;inset:0;z-index:500;pointer-events:none;
  background:var(--sh-curtain);
  background-size:var(--sh-curtain-size);
  background-blend-mode:var(--sh-curtain-blend);
  animation:shArrive 1.2s cubic-bezier(.4,0,.75,.9) both}
/* 行き先の文字も同じ場所に出して、地と一緒に引く。文字のほうが少しだけ長く残る */
html.sh-arrive::after{content:var(--sh-to,"");z-index:501;
  animation:shArriveText 1.2s cubic-bezier(.4,0,.75,.9) both}
html.sh-arrive body::before{content:var(--sh-jp,"");z-index:501;
  animation:shArriveText 1.2s cubic-bezier(.4,0,.75,.9) both}
/* 地と文字は同じ時間・同じ曲がり方。濃さが違うだけなので、画面全体が一度に引く */
@keyframes shArrive{0%,42%{opacity:1}100%{opacity:0}}
@keyframes shArriveText{0%,42%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  html.sh-arrive::before,
  html.sh-arrive::after,
  html.sh-arrive body::before{animation-duration:.3s}
}

/* 歩いて横切る人。脚は動かせないので、歩幅に合わせた上下・傾き・足元の影で歩きを作る */
.sh-fade__walk{position:absolute;left:0;right:0;bottom:0;top:0;pointer-events:none}
/* 横へ運ぶのは外側。中の上下と傾きとぶつからないよう役割を分ける */
.sh-fade__p{position:absolute;bottom:13vh;left:0;translate:100vw 0;will-change:transform}
.sh-fade__p img{display:block;width:auto;transform-origin:50% 100%;
  filter:drop-shadow(0 2px 5px rgba(20,17,15,.2))}
/* 足元の影。地面の線に接している感じを出す */
.sh-fade__p i{position:absolute;left:50%;bottom:-.5vh;z-index:-1;
  width:60%;height:1.4vh;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(20,17,15,.42),rgba(20,17,15,0))}

/* 大きさ・立つ高さ・濃さの3つで奥行きを作る。
   2人目がいちばん奥（小さく・高く・薄い）、3人目が手前。最大でも22vh に抑える */
.sh-fade__p:nth-child(1){bottom:13vh}                 /* 中ほど。手前の線の上 */
.sh-fade__p:nth-child(2){bottom:22vh;opacity:.68}     /* 奥。奥の線の上。空気に溶かす */
.sh-fade__p:nth-child(3){bottom:9vh}                  /* 手前。線より少し下 */
/* 4人目は広い画面のときだけ。狭い画面では場所がないので出さない */
.sh-fade__p:nth-child(4){display:none;bottom:17vh;opacity:.84}
.sh-fade__p:nth-child(4) img{height:11.5vh}
@media (min-width:900px){ .sh-fade__p:nth-child(4){display:block} }
.sh-fade.is-on .sh-fade__p:nth-child(4){animation-duration:4.48s;animation-delay:-.51s}
.sh-fade.is-on .sh-fade__p:nth-child(4) img,
.sh-fade.is-on .sh-fade__p:nth-child(4) i{animation-duration:.46s}
.sh-fade__p:nth-child(1) img{height:15vh}
.sh-fade__p:nth-child(2) img{height:8.5vh}
.sh-fade__p:nth-child(3) img{height:22vh}
/* 奥の人は影も薄く小さく */
.sh-fade__p:nth-child(2) i{opacity:.5;height:.9vh}
/* 5人目。いちばん奥の列をもう一人。2人目と同じ線の上なので背丈も近づける */
.sh-fade__p:nth-child(5){bottom:22vh;opacity:.62}
.sh-fade__p:nth-child(5) img{height:9.5vh}
.sh-fade__p:nth-child(5) i{opacity:.46;height:.9vh}

.sh-fade.is-on .sh-fade__p{animation:shCross 2.1s linear both}
.sh-fade.is-on .sh-fade__p img{animation:shBob .45s ease-in-out infinite}
.sh-fade.is-on .sh-fade__p i{animation:shStep .45s ease-in-out infinite}
/* 負の遅れで出発点をずらす。3人が重ならないように横へ散らす */
/* 全員いったん画面の右の外。遅れは小さく、入ってくる順だけを作る。
   速さは背丈なりなので、手前の人から先に入ってきて自然にばらける */
.sh-fade.is-on .sh-fade__p:nth-child(1){animation-duration:3.55s;animation-delay:-.37s}
.sh-fade.is-on .sh-fade__p:nth-child(2){animation-duration:6.06s;animation-delay:-.15s}
.sh-fade.is-on .sh-fade__p:nth-child(3){animation-duration:2.64s;animation-delay:-.32s}
.sh-fade.is-on .sh-fade__p:nth-child(5){animation-duration:5.15s;animation-delay:-.4s}
/* 歩幅も1人ずつ変える。揃うと機械に見える */
.sh-fade.is-on .sh-fade__p:nth-child(2) img,
.sh-fade.is-on .sh-fade__p:nth-child(2) i{animation-duration:.44s}
.sh-fade.is-on .sh-fade__p:nth-child(3) img,
.sh-fade.is-on .sh-fade__p:nth-child(3) i{animation-duration:.42s}
.sh-fade.is-on .sh-fade__p:nth-child(5) img,
.sh-fade.is-on .sh-fade__p:nth-child(5) i{animation-duration:.45s}

@keyframes shCross{from{translate:134vw 0}to{translate:-72vw 0}}
/* 1周期＝2歩。0%と50%が着地で、いちばん低い */
@keyframes shBob{
  0%   {transform:translateY(0)     rotate(-1.9deg)}
  12.5%{transform:translateY(-2.9%) rotate(-1deg)}
  25%  {transform:translateY(-4.3%) rotate(0deg)}
  37.5%{transform:translateY(-2.9%) rotate(1deg)}
  50%  {transform:translateY(0)     rotate(1.9deg)}
  62.5%{transform:translateY(-2.9%) rotate(1deg)}
  75%  {transform:translateY(-4.3%) rotate(0deg)}
  87.5%{transform:translateY(-2.9%) rotate(-1deg)}
  100% {transform:translateY(0)     rotate(-1.9deg)}
}
/* 影は着地で濃く広く、浮いているあいだは薄く小さく */
@keyframes shStep{
  0%,50%,100%{opacity:1;transform:translateX(-50%) scale(1,1)}
  25%,75%    {opacity:.36;transform:translateX(-50%) scale(.66,.7)}
}

@media (prefers-reduced-motion:reduce){
  .sh-fade{transition:opacity .01s linear}
  .sh-fade.is-on .sh-fade__ghost,
  .sh-fade.is-on .sh-fade__name,
  .sh-fade.is-on .sh-fade__jp,
  .sh-fade.is-on .sh-fade__ground{animation:none;opacity:1;scale:1 1;translate:none}
  .sh-fade.is-on .sh-fade__ghost{translate:-50% -50%}
  .sh-fade.is-on .sh-fade__p{animation:none;translate:34vw 0}
  .sh-fade.is-on .sh-fade__p img,
  .sh-fade.is-on .sh-fade__p i{animation:none}
}

/* メニューの出入りもひと呼吸つなぐ */
.sh-menu{opacity:0;transition:opacity .2s ease}
.sh-menu.is-open{opacity:1}

/* ===== 画面に残る相談ボタン ===== */
/* 丸く、やわらかく。影は朱を含ませて紙から浮かせる。
   メニュー（300）より下に置いて、開いているあいだは隠れる */
.sh-cta{position:fixed;right:clamp(.9rem,4vw,2rem);bottom:clamp(.9rem,3.2vh,2rem);z-index:290;
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.6rem .62rem .6rem 1.15rem;text-decoration:none;border-radius:999px;
  background:#D3381C;color:#FFF7F3;
  box-shadow:0 .9rem 2.2rem rgba(211,56,28,.3),0 .2rem .6rem rgba(20,17,15,.14);
  opacity:0;visibility:hidden;translate:0 .8rem;scale:.96;
  transition:opacity .42s cubic-bezier(.2,.8,.2,1),translate .42s cubic-bezier(.2,.8,.2,1),
             scale .42s cubic-bezier(.2,.8,.2,1),visibility 0s linear .42s,
             box-shadow .26s ease,background .26s ease}
.sh-cta.is-on{opacity:1;visibility:visible;translate:0 0;scale:1;transition-delay:0s;
  animation:shFloat 4.6s ease-in-out 1.1s infinite}
/* 出たあとは、ゆっくり上下に漂わせる */
@keyframes shFloat{0%,100%{translate:0 0}50%{translate:0 -3px}}
.sh-cta b{font-weight:900;font-size:.82rem;letter-spacing:.09em;white-space:nowrap;line-height:1}
/* 矢印は白い丸の中に。小さいところほど作りを見せる */
.sh-cta i{flex:none;width:1.7rem;height:1.7rem;border-radius:50%;background:#FFF7F3;
  display:grid;place-items:center}
.sh-cta i::before{content:"";width:.32rem;height:.32rem;margin-left:-.12rem;
  border-top:2px solid #D3381C;border-right:2px solid #D3381C;rotate:45deg}
.sh-cta:hover,.sh-cta:focus-visible{background:#BA2F15;
  box-shadow:0 1.2rem 2.6rem rgba(211,56,28,.36),0 .3rem .8rem rgba(20,17,15,.16)}
.sh-cta:active{scale:.97}
.sh-cta:focus-visible{outline:3px solid #14110F;outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .sh-cta{transition:opacity .01s linear}
  .sh-cta.is-on{animation:none}
}