/* ==================================================================
   ウイングナカヤマ トップページ
   レイアウトの寸法・動きの秒数とイージングは、参考サイトを 1440x900 で
   実測した値（scratchpad/hxxxp/*.json）。目分量で変えていない。
   文章・写真・ロゴはウイングナカヤマのもの。テクスチャーはCodexで新規生成。
================================================================== */

:root{
  /* 色（実測で出た値だけ） */
  --black:#000;
  --white:#fff;
  --ghost:#d6d6d6;     /* 大見出しの2行目 */
  --date:#9b9b9b;      /* 日付 */
  --cat:#767676;       /* カテゴリ */
  --hair:#ececec;      /* セクション境界の線 */
  --band:#f3f3f3;      /* スライダー背面の帯 */
  --tile:#e8e8e8;      /* タイルの枠 */
  --ph:#cccccc;        /* 写真が読み込まれる前の地・区切りの斜線 */
  --accent:#c3df5f;    /* 下線だけに使う黄緑 */

  /* 書体（参考元の書体は有償なので、無料の近いもので置き換え） */
  /* rama-gothic の代わり。無料の極細コンデンス19種を実測し、大文字の高さを揃えたとき
     単語幅の誤差が最小だった Six Caps（HODGE +28px / SERVICE -7px）。他は約2倍の幅 */
  --huge:"Six Caps","Arial Narrow",sans-serif;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;     /* DIN Next Condensed の代わり */
  --din:"Barlow","Noto Sans JP","Helvetica Neue",Arial,sans-serif;        /* DIN Next の代わり */
  /* 参考元と同じ。英数字は Zilla Slab、日本語はその後ろのゴシックで出す。
     以前は Georgia と serif を挟んでいたため、日本語が明朝（ヒラギノ明朝など）に落ちていた */
  --slab:"Zilla Slab","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  --jp:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif; /* 源ノ角ゴシックと同じ字形 */

  /* 動き（実測） */
  --e-rise:cubic-bezier(.86,0,.07,1);
  --e-slide:cubic-bezier(.6,0,.25,1);
  --e-line:cubic-bezier(.08,.92,.35,1);
  --e-wipe:cubic-bezier(.9,0,.1,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--black);
  font-family:var(--slab),var(--jp);font-size:13px;line-height:normal;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,p,figure,address,dl,dd{margin:0}
address{font-style:normal}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* 日本語の見出しは <wbr> の位置でだけ折り返す。最終行に1〜2字だけ残るのも防ぐ */
.about__title,.news__title{word-break:keep-all;overflow-wrap:anywhere}
h2,h3,p,address{text-wrap:pretty}

/* 画面の縁の黒線（左6px・上6px、固定） */
body::before{content:"";position:fixed;top:0;left:0;width:6px;height:100vh;background:var(--black);z-index:60}
body::after{content:"";position:fixed;top:0;left:0;width:100%;height:6px;background:var(--black);z-index:60}

/* ---------- テクスチャー（背景に薄く重ねる） ---------- */
.tex-paper::after,.tex-concrete::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-size:640px 640px;background-repeat:repeat}
.tex-paper::after{background-image:url("../tex/texture-paper.jpg");opacity:.06;mix-blend-mode:multiply}
.tex-concrete::after{background-image:url("../tex/texture-concrete.jpg");opacity:.08;mix-blend-mode:screen}

/* ---------- 下線（黄緑。ホバーで左から伸びる） ---------- */
.uline{position:relative;display:inline-block;z-index:0}
.uline::after{content:"";position:absolute;left:0;right:-3px;bottom:3px;height:6px;background:var(--accent);
  z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--e-line)}
.uline:hover::after,.uline.is-current::after{transform:scaleX(1)}

/* Learn More（先頭に75pxの線、文字の下に常時6pxの黄緑） */
.more{position:relative;display:inline-block;padding-left:88.4px}
.more::before{content:"";position:absolute;left:0;top:15.36px;width:75.39px;height:2px;background:var(--black)}
.more a{position:relative;display:inline-block;padding-left:2px;z-index:0;white-space:nowrap;
  font-family:var(--cond);font-weight:500;font-size:26px;letter-spacing:.91px;line-height:32px}
/* 下線は文字に重ねず、文字の下に引く（赤は黒い文字と重なると読めなくなる） */
.more a::after{content:"";position:absolute;left:0;right:-3.16px;top:28px;height:4px;background:var(--accent);z-index:-1}
.more--light::before{background:var(--white)}
.more--light a{color:var(--white)}
/* 押せる範囲を上下44pxまで広げる（見た目は変えない） */
.more a::before,.news__cat a::before,.access__tel a::before,.menu__tel::before{content:"";position:absolute;left:50%;top:50%;width:max(calc(100% + 16px),44px);height:44px;transform:translate(-50%,-50%)}
/* 読み上げだけに残す文字 */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 日本語の本文を <wbr> の位置でだけ折り返す（「カス / タム」のような語の途中の改行を防ぐ） */
.u-phrase{word-break:keep-all;overflow-wrap:anywhere}
.u-nowrap{white-space:nowrap}

/* ---------- ヘッダー ---------- */
.header{position:relative;height:0;z-index:40}
/* 参考元のロゴ枠（左72・上60・高さ72）に、丸ロゴ＋社名の組みで収める */
/* 横幅は参考元の式に合わせて伸縮させる（ヘッダーの中身は画面幅の90%） */
.logo{position:absolute;left:5%;top:60px;height:72px}
.logo a{display:flex;align-items:center;gap:14px;height:100%;
  font-family:var(--din);font-weight:700;font-size:25px;line-height:.98;letter-spacing:.5px;text-transform:uppercase}
.logo img{width:72px;height:72px}
/* 参考元は中身の右端から115px。書体の幅が違うので、1440幅で左端908pxになる値にしてある */
.gnav{position:absolute;right:calc(5% + 161px);top:57px;display:flex}
.gnav ul + ul{margin-left:50px}
.gnav li + li{margin-top:14px}
.gnav a{position:relative;display:inline-block;padding-left:2px;z-index:0;white-space:nowrap;
  font-family:var(--jp);font-weight:700;font-size:15px;line-height:20px;letter-spacing:.06em}
.gnav a::after{content:"";position:absolute;left:0;right:-1.5px;top:19px;height:3px;background:var(--accent);z-index:-1;
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--e-line)}
.gnav a:hover::after,.gnav a[aria-current="page"]::after{transform:scaleX(1)}

/* ハンバーガー（右上 97px の黒い四角、白い縦棒3本） */
.humb{position:fixed;top:0;right:0;width:97px;height:97px;background:var(--black);z-index:70}
.humb span{position:absolute;top:33px;width:3px;height:31px;background:var(--white);transition:transform .35s ease}
.humb span:nth-child(1){left:37px;top:35px}
.humb span:nth-child(2){left:47px;top:29px}
.humb span:nth-child(3){left:57px;top:35px}
.is-menu .humb span:nth-child(1){transform:translate(10px,-3px) rotate(45deg)}
.is-menu .humb span:nth-child(2){transform:scaleY(0)}
.is-menu .humb span:nth-child(3){transform:translate(-10px,-3px) rotate(-45deg)}
.menu{position:fixed;inset:0;background:var(--black);color:var(--white);z-index:65;
  display:flex;flex-direction:column;align-items:center;justify-content:safe center;overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s}
.is-menu .menu{opacity:1;visibility:visible}
.menu ul{display:grid;gap:18px;text-align:center}
.menu a{font-family:var(--huge);font-size:min(6.1vw,7vh);line-height:1;text-transform:uppercase}
/* メニューの下に電話と営業時間（スマホではここが一番早く電話に着く） */
.menu__info{margin-top:48px;text-align:center}
.menu .menu__tel{position:relative;display:inline-block;z-index:0;font-family:var(--din);font-weight:700;font-size:28px;line-height:1.2;text-transform:none}
.menu__tel::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:3px;background:var(--accent);z-index:-1}
.menu__hours{margin-top:12px;font-family:var(--jp);font-weight:700;font-size:14px}

/* ---------- 1. メインビジュアル（画面の高さ。ただし幅の69%まで） ---------- */
.mv{position:relative;height:100vh;max-height:69vw}
/* 幅と高さは中身に合わせる（行数・文字数が変わっても列が画面の外や次の列にはみ出さない） */
.mv__info{position:absolute;left:0;top:250px;width:auto;height:auto;writing-mode:vertical-rl}
.mv__info::before{content:"";position:absolute;left:0;top:0;width:10px;height:100%;background:var(--black)}
/* 最初の画面で「どこの何の店か」が日本語で読めるように、縦書きの一文は日本語にしている */
.mv__info p{margin-left:30px;padding:16px 0;font-family:var(--jp);font-weight:700;font-size:14px;line-height:22.5px;letter-spacing:.1em}
.mv__scroll{position:absolute;left:3.9%;bottom:31px;width:2px;height:71px;background:var(--black)}
.mv__scroll::before{content:"scroll";position:absolute;left:-10px;top:-60px;writing-mode:vertical-rl;
  font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.9px;text-transform:uppercase}
.mv__sns{position:absolute;right:2.5%;top:calc(52% - 52px);display:grid;gap:19px;z-index:5}
.mv__sns a{display:grid;place-items:center;width:24px;height:24px}

/* 参考元 32.5vw（1440幅で468px）。Six Caps は字高を合わせると 27.15vw（391px）。
   行送り・字間は1440幅で合わせた値を em に直したもの。
   位置は参考元と同じく、2語のまとまりの中心を「横49%・縦55.5%」に置く（語の長さが変わっても中央に来る） */
.mv__words{position:absolute;left:49%;top:55.5%;transform:translate(-50%,-50%);display:flex;align-items:flex-start;z-index:3;pointer-events:none}
.mv__word{font-family:var(--huge);font-weight:400;font-size:27.15vw;line-height:.9575em;letter-spacing:.00363em;
  text-transform:uppercase;white-space:nowrap}
.mv__word--a{color:var(--black)}
.mv__word--b{margin-left:37px;margin-top:10vw;color:var(--ghost)}

.mv__visual{position:absolute;right:6.7%;bottom:-22%;width:44vw;height:39vw;background:var(--hair);overflow:hidden;z-index:2}
.mv__slide{position:absolute;inset:0;opacity:0;transform:scale(1.3);
  transition:transform 1.4s var(--e-wipe),opacity 1s ease}
.mv__slide.is-active{opacity:1;transform:scale(1)}
.mv__slide picture{position:absolute;inset:0;display:block}
.mv__slide img{width:100%;height:100%;object-fit:cover}
.mv__slide::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.3);z-index:1}

/* ---------- 2. 黒い帯（高さ29vw、左9%をあける） ---------- */
.band{position:relative;height:29vw}
.band__bg{position:absolute;top:0;left:9%;right:0;bottom:0;background:var(--black);overflow:hidden}

/* ---------- セクション共通 ---------- */
.sect{position:relative;padding-top:150px}
.sect::before{content:"";position:absolute;top:0;left:50%;width:86%;height:1px;background:var(--hair);transform:translateX(-50%)}
.inner{width:82%;margin-left:9%}
/* 参考元 227px / 字間6.81px。Six Caps は字高を合わせると190px、幅を合わせる字間は7.81px */
.huge{display:flex;white-space:nowrap;font-family:var(--huge);font-weight:400;font-size:190px;line-height:192.95px;letter-spacing:7.81px;text-transform:uppercase}
.huge--ghost{color:var(--ghost)}
.sect__top{position:relative;height:193px}

/* 文字が1字ずつ下からせり上がる */
/* flex:none … 幅が足りないときに1字ずつ縮んで切れるのを防ぐ */
.split .ch{display:inline-block;flex:none;overflow:hidden;vertical-align:top}
.split .ch__in{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--e-rise)}
.split.is-in .ch__in{transform:none}

/* 写真が黒い幕の横走りで現れる */
.wipe{position:relative;overflow:hidden;background:var(--ph)}
.wipe::before{content:"";position:absolute;inset:0;background:var(--black);z-index:2;transform:scaleX(0);transform-origin:left}
.wipe img{opacity:0}
.wipe.is-in::before{animation:wipe 1.2s var(--e-wipe) forwards}
.wipe.is-in img{animation:wipeImg 1.2s linear forwards}
@keyframes wipe{0%{transform:scaleX(0);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}
  50.1%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
@keyframes wipeImg{0%,50%{opacity:0}50.1%,100%{opacity:1}}

/* 下からふわっと */
.fade{opacity:0;transform:translateY(20px);transition:opacity .75s ease,transform .75s ease}
.fade.is-in{opacity:1;transform:none}

/* スライダーの矢印（107pxの黒い四角） */
.arrows{position:absolute;right:109px;top:24px;display:flex;gap:4px}
.arrow{position:relative;width:107px;height:107px;background:var(--black)}
.arrow::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;border-top:3px solid var(--white);border-left:3px solid var(--white)}
.arrow--prev::after{transform:translate(-30%,-50%) rotate(-45deg)}
.arrow--next::after{transform:translate(-70%,-50%) rotate(135deg)}
/* 参考元は端でも黒のまま（最後まで行くと先頭に戻る） */

/* overflow:clip … キーボードで枠の外のカードに移ったとき、ブラウザが枠を勝手に横スクロールしない */
.slider{position:relative;margin-left:7%;padding-left:9vw;overflow:hidden;overflow:clip}
/* 参考元: 上端は9vw下、高さはスライダーの106% */
.slider::before{content:"";position:absolute;left:0;right:0;top:9vw;bottom:calc(-9vw - 6%);background:var(--band)}
.slider__track{position:relative;display:flex;transition:transform .8s var(--e-slide);z-index:1}
/* つかんで横に動かせる（縦のスクロールはブラウザに任せる） */
[data-carousel]{touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
[data-carousel].is-dragging{cursor:grabbing}
[data-carousel] img{-webkit-user-drag:none;pointer-events:none}
/* スマホだけ出すドット（押せる範囲は高さ44px、線は2px） */
.slider__dots{position:relative;display:none;justify-content:center;gap:4px;margin-top:18px;z-index:1}
.slider__dots button{position:relative;width:45px;height:44px}
/* 選んでいない線も読めるよう #767676（白地に4.5:1）。今の位置は太さ6pxで見分ける */
.slider__dots button::before{content:"";position:absolute;left:0;right:0;top:21px;height:2px;background:var(--cat)}
.slider__dots button.is-on::before{top:19px;height:6px;background:var(--black)}

/* ---------- 3. ABOUT（右の文が左の見出しより長いときだけ、左の見出しが止まって見える） ---------- */
/* 実測: 上の余白130pxを含めて高さ593px。次のSERVICEまで150px空く */
.about{position:relative;padding-top:130px;height:593px;margin-bottom:150px}
.about .inner{display:flex;align-items:flex-start;height:463px}
.about__left{width:52%}
.about__copy{position:sticky;top:130px;padding-bottom:100px}
/* トップの Since 1931 と会社概要の Wing Nakayama を同じ式で。1440幅の190px・字下げ136pxを上限に、狭い画面では縮める */
.about__copy .huge{font-size:min(190px,13.2vw);line-height:1.0155;letter-spacing:.0411em}
.about__copy .huge--ghost{margin-left:min(136px,9.44vw)}
.about__right{width:46%}
.about__title{margin:-9px 0 0 -4px;font-family:var(--jp);font-weight:900;font-size:42px;line-height:normal;letter-spacing:-1.68px}
.about__desc{max-width:44em;margin-top:30px;font-size:15px;line-height:36.75px;letter-spacing:.45px}
.about__right .more{margin-top:33.8px}

/* ---------- 4. SERVICE（参考元: 表示枠の140%に3枚。1440幅でカード幅505、送り565） ---------- */
/* 実測: スライダー上端は見出し(193px)の104px下 */
.service .slider{margin-top:104px}
.service__card{flex:0 0 calc(39.2vw - 60px);margin-right:60px;padding-bottom:10vw}
.service__card .wipe{height:34vw}
.service__card .wipe img{width:100%;height:100%;object-fit:cover}
.service__cont{margin-top:55px}
.service__title{font-family:var(--cond);font-weight:700;font-size:63px;line-height:76px;text-transform:uppercase}
.service__title small{margin-left:14px;font-family:var(--jp);font-size:13px;font-weight:700;letter-spacing:0;vertical-align:middle}
.service__desc{margin-top:15px;width:86%;font-size:14px;line-height:30.8px;letter-spacing:.28px}
.service__cont .more{margin-top:33.8px}

/* ---------- 5. WORKS（黒い帯。参考元: 帯の83%に5枚。1440幅でタイル幅221、送り238） ---------- */
/* 帯の下の余白。高さを固定していた時（1440幅で1222px）と同じになる値 */
.works{padding-bottom:161.6px}
.works .sect__top .more{position:absolute;right:0;top:39px}
.works__under{position:relative;margin-top:80px;margin-left:6px;padding:135px 0;overflow:hidden}
.works__under::before{content:"";position:absolute;inset:0;background:var(--black)}
.works__list{position:relative;width:83%;margin:0 auto;overflow:hidden;overflow:clip;z-index:1}
/* 最後のタイルの右の余白17pxを枠の外に出して、タイルの並びを帯のちょうど中央に置く */
.works__track{display:flex;margin-right:-17px;transition:transform .8s var(--e-slide)}
.works__item{flex:0 0 calc(20% - 17px);min-width:0;margin-right:17px;text-align:center;color:var(--white)}
.works__tile{display:block;background:var(--white);border:3px solid var(--tile);height:16.5vw}
.works__tile img{width:100%;height:100%;object-fit:cover}
.works__name{margin-top:45.5px}
/* 1440幅で42px。それより狭い画面ではタイル幅に合わせて縮める（KUMAMONがタイルからはみ出さない） */
.works__eng{font-family:var(--cond);font-weight:500;font-size:min(42px,2.92vw);line-height:37.8px;text-transform:uppercase}
.works__jpn{margin-top:8px;font-family:var(--jp);font-weight:700;font-size:14px}
/* 押せる範囲は高さ44px、線は2px（線の位置は以前と同じ） */
.works__dots{position:relative;display:flex;justify-content:center;gap:4px;margin-top:41px;z-index:1}
.works__dots button{position:relative;width:45px;height:44px}
/* 赤い帯の上：線はすべて白（6:1）、今の位置は太さ6pxで見分ける */
.works__dots button::before{content:"";position:absolute;left:0;right:0;top:21px;height:2px;background:var(--white)}
.works__dots button.is-on::before{top:19px;height:6px}

/* ---------- 6. NEWS（参考元: 表示枠の110%に4枚。1440幅でカード幅295、送り333） ---------- */
.news{padding-bottom:38.8px}
.news .slider{margin-top:100px}
.news__card{flex:0 0 calc(23.1vw - 38px);margin-right:38px;padding-bottom:9vw}
.news__card .wipe{height:20vw;background:#e5e5e5}
.news__card .wipe img{width:100%;height:100%;object-fit:cover}
.news__cont{margin-top:32px;width:93%}
/* 灰色の地（#efefef）の上なので、灰の文字は読めない。黒にする */
.news__date{font-family:var(--din);font-weight:500;font-size:15px;color:var(--black);letter-spacing:.6px}
.news__title{margin-top:10px;font-family:var(--jp);font-weight:700;font-size:20px;line-height:30px}
.news__desc{margin-top:16px;font-size:14px;line-height:1.9;letter-spacing:.28px}
.news__desc::before{content:"";display:block;width:20px;height:3px;margin-bottom:10px;background:var(--black)}
.news__cat{margin-top:18px;padding-bottom:9px}
.news__cat a{position:relative;display:inline-block;z-index:0;font-family:var(--jp);font-weight:700;font-size:11.5px;letter-spacing:.345px;color:var(--black)}
.news__cat a::after{content:"";position:absolute;left:0;right:0;top:auto;bottom:-5px;height:3px;background:var(--accent);z-index:-1}

/* ---------- 7. ACCESS ---------- */
/* 実測: NEWSの終わり(5744)からACCESS(5894)まで150px空く */
.access{margin-top:150px}
.access .sect__top{display:flex;align-items:center}
.access .huge{flex:0 0 398px}
.access__info{flex:1 1 auto;min-width:0}
.access__addr{font-family:var(--jp);font-weight:700;font-size:18px;line-height:32.4px}
.access__row{display:flex;align-items:center;margin-top:6px}
.access__open{font-family:var(--din);font-weight:500;font-size:21px;letter-spacing:-.63px}
.access__open span{font-family:var(--jp);font-weight:700;font-size:14px;letter-spacing:.42px;white-space:nowrap}
.access__tel{position:relative;margin-left:20px;padding-left:12px;font-family:var(--din);font-weight:500;font-size:21px;letter-spacing:-.63px;white-space:nowrap}
.access__tel a{position:relative;display:inline-block;z-index:0}
.access__tel::before{content:"";position:absolute;left:1px;top:-4px;width:1px;height:31.19px;background:var(--ph);transform:rotate(19deg)}
.access__info .more{margin-top:34px}
/* 769〜1080px は情報欄が狭いので、営業時間と電話を2行に分ける（電話番号の途中で割れない） */
@media (min-width:769px) and (max-width:1080px){
  .access__row{flex-wrap:wrap;row-gap:6px}
  /* SERVICE / NEWS の見出しと矢印がぶつからないよう、矢印を中身の右端まで寄せる */
  .arrows{right:0}
}
/* 実測: 地図の上端は見出しの80px下 */
.access__map{margin:80px 0 0 7vw;width:calc(100% - 8.7vw);height:47vw;background:var(--band);position:relative;display:grid;place-items:center}
.access__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.access__map p{font-family:var(--cond);font-weight:500;font-size:26px;letter-spacing:.91px;color:var(--cat)}

/* ---------- フッター（黒。中身は画面幅の76.9%） ---------- */
.footer{position:relative;margin-top:90px;background:var(--black);color:var(--white);overflow:hidden}
.footer__inner{width:76.9%;margin:0 auto;padding-top:126px;padding-bottom:52px}
.footer__top{display:flex;height:315px}
.footer__left{width:54.9%}
.footer__logo{display:flex;align-items:center;gap:16px;height:90px;font-family:var(--din);font-weight:700;font-size:27px;line-height:.98;text-transform:uppercase}
.footer__logo img{width:84px;height:84px}
.footer__addr{margin-top:28px;font-family:var(--jp);font-weight:700;font-size:14px;line-height:25.9px;letter-spacing:.7px}
.footer__row{display:flex;flex-wrap:wrap;row-gap:6px;align-items:center;margin-top:6px;font-family:var(--din);font-weight:500;font-size:14px}
.footer__row span{font-family:var(--jp);font-weight:700;font-size:12px}
.footer__row .tel{position:relative;margin-left:12px;padding-left:12px}
.footer__row .tel::before{content:"";position:absolute;left:1px;top:-2px;width:1px;height:10.39px;background:var(--ph);transform:rotate(19deg)}
.footer__map{display:flex;align-items:center;justify-content:center;margin-top:41px;width:314px;max-width:100%;height:78px;
  border:1px solid rgba(255,255,255,.2);font-family:var(--jp);font-weight:700;font-size:14px;letter-spacing:.08em;transition:background .3s ease,color .3s ease}
.footer__map:hover{background:var(--white);color:var(--black)}
/* メニューは中身の右端にそろえる（1440幅で左端764px。以前の配置と同じ） */
.footer__nav{display:flex;margin-left:auto}
.footer__nav ul{min-width:100px}
.footer__nav ul + ul{margin-left:6.95vw}
/* 769〜1080px は住所とメニューが横に並ばないので、メニューを住所の下に回す */
@media (min-width:769px) and (max-width:1080px){
  .footer__top{flex-wrap:wrap;height:auto;row-gap:64px}
  .footer__left{width:100%}
  .footer__nav{margin-left:0}
}
.footer__nav li + li{margin-top:19px}
.footer__nav a{white-space:nowrap;font-family:var(--jp);font-weight:700;font-size:14px;line-height:19px;letter-spacing:.06em}
.footer__nav .sub a{font-family:var(--jp);font-weight:700;font-size:12px;letter-spacing:.06em}
.footer__nav .sub li + li{margin-top:10px}
.footer__nav .sub a::before{content:"- "}
.footer__bottom{margin-top:254px;font-family:var(--din);font-weight:500;font-size:13px}
.totop{position:absolute;right:45px;bottom:45px;width:92px;height:92px;border:1px solid rgba(255,255,255,.2);transition:background .3s ease}
.totop::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;border-top:3px solid var(--white);border-left:3px solid var(--white);transform:translate(-50%,-25%) rotate(45deg)}
.totop:hover{background:rgba(255,255,255,.2)}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion:reduce){
  .split .ch__in,.fade{transform:none;opacity:1;transition:none}
  .wipe img{opacity:1}.wipe::before{display:none}
  .mv__slide{transition:none}
  .slider__track,.works__track{transition:none}
}

/* ==================================================================
   スマホ（768px以下）
   参考元の @media screen and (max-width:768px) を iPhone 390幅で実測して書き起こした。
   参考元の見出し書体は rama-gothic。Six Caps に置き換えるときは、文字サイズを 0.836倍にする
   （1440幅で字高を合わせたときの比率。例: 33.5vw → 28vw）。
================================================================== */
@media (max-width:768px){
  /* ヘッダー（ロゴは左8.25%・上37px・高さ51px、メニューボタンは77px） */
  .logo{left:8.25%;top:37px;height:51px}
  .logo a{gap:10px;font-size:18px}
  .logo img{width:51px;height:51px}
  .gnav{display:none}
  .humb{width:77px;height:77px}
  .humb span{height:25px}
  .humb span:nth-child(1){left:30px;top:28px}
  .humb span:nth-child(2){left:38px;top:24px}
  .humb span:nth-child(3){left:46px;top:28px}
  .is-menu .humb span:nth-child(1){transform:translate(8px,-2px) rotate(45deg)}
  .is-menu .humb span:nth-child(3){transform:translate(-8px,-2px) rotate(-45deg)}
  .menu{align-items:flex-start;justify-content:flex-start}
  .menu ul{width:66%;margin:22vw auto 0;gap:1.4vw;text-align:left}
  .menu a{font-size:11.95vw}
  .menu .menu__tel{font-size:24px}
  .menu__info{width:66%;margin:10vw auto 0;text-align:left}
  .menu{padding-bottom:40px}

  /* メインビジュアル（画面の高さいっぱい。帯は出さない） */
  .mv{max-height:none}
  .mv__info{top:auto;bottom:13px;left:-5px;height:auto;width:auto}
  .mv__info p{margin-left:29px;font-size:13px;line-height:19px;letter-spacing:.1em}
  .mv__scroll,.mv__sns{display:none}
  .mv__words{left:50.4%}
  .mv__word{font-size:33.86vw}
  .mv__word--b{margin-left:12px;margin-top:25vw}
  .mv__visual{right:4.7%;bottom:3.3%;width:69vw;height:76%}
  .band{display:none}

  /* セクション共通（中身は画面幅の77%、セクションの間は65px） */
  .sect{padding-top:65px}
  .inner{width:77%;margin-left:11.5%}
  .huge{font-size:28vw;line-height:28.475vw;letter-spacing:.0411em}
  .sect__top{height:auto}
  .more{padding-left:61.2px}
  .more::before{top:10.6px;width:52.2px}
  .more a{font-size:18px;letter-spacing:.54px;line-height:23px}
  .more a::after{top:20px;height:3px}
  .arrows{display:none}
  .slider::before{top:10vw;bottom:calc(-10vw - 6%)}
  .slider__dots{display:flex}

  /* ABOUT（見出しと本文を縦に積む） */
  .about{padding-top:56px;height:auto;margin-bottom:65px}
  .about .inner{flex-direction:column;height:auto}
  .about__left,.about__right{width:100%}
  .about__copy{position:relative;top:auto;padding-bottom:0}
  .about__copy .huge{font-size:24vw;line-height:.957}
  .about__copy .huge--ghost{margin-left:12vw}
  .about__right{margin-top:40px}
  .about__title{margin:-3px 0 0 -2px;font-size:26px;letter-spacing:-.1em}
  .about__desc{margin-top:1.6em;font-size:15px;line-height:2.1;letter-spacing:.3px}
  .about__right .more{margin-top:19.8px}

  /* SERVICE（表示枠の180%に2枚＝1枚と次の端が見える） */
  .service .slider{margin-top:44px}
  .service__card{flex-basis:calc(75.6vw - 25px);margin-right:25px;padding-bottom:18vw}
  .service__card .wipe{height:64vw}
  .service__cont{margin-top:35px}
  .service__title{font-size:43px;line-height:52px}
  .service__desc{width:95%;margin-top:8px;font-size:15px;line-height:1.9;letter-spacing:.3px}
  .service__cont .more{margin-top:19.8px}
  .service{padding-bottom:65px}

  /* WORKS（帯の83%に対して180%で2枚。左だけ切る） */
  .works{padding-bottom:0}
  .works .sect__top .more{display:none}
  .works__under{margin-top:36px;padding:49px 0 57px}
  .works__list{overflow:visible;clip-path:inset(0 -100vw 0 0)}
  .works__item{flex-basis:calc(90% - 17px)}
  .works__tile{height:65vw}
  .works__name{margin-top:32.5px}
  .works__eng{font-size:38px;line-height:34.2px}
  .works__jpn{margin-top:6px;font-size:12px}

  /* NEWS（本文は出さない） */
  .news{padding-bottom:0}
  .news .slider{margin-top:40px}
  .news__card{flex-basis:calc(75.6vw - 38px);padding-bottom:9vw}
  .news__card .wipe{height:63vw}
  .news__cont{margin-top:28px}
  .news__date{font-size:14px}
  .news__title{margin-top:8px;font-size:16px;line-height:1.6}
  .news__desc{display:none}
  .news__cat{margin-top:10px;padding-bottom:25px}
  .news__cat a{font-size:11px}

  /* ACCESS（電話番号に下線を引いて、押せることを見せる） */
  .access{margin-top:65px}
  .access .sect__top{flex-direction:column;align-items:flex-start}
  .access .huge{flex:none}
  .access__info{margin-top:32px;width:100%}
  .access__addr{font-size:15px;line-height:1.8}
  .access__row{flex-direction:column;align-items:flex-start;margin-top:2px}
  .access__open{font-size:15px;letter-spacing:-.45px}
  .access__open span{font-size:12px;letter-spacing:.36px}
  .access__tel{margin:8px 0 0;padding-left:0;font-size:18px;letter-spacing:-.72px}
  .access__tel::before{content:none;position:static;display:inline-block;width:auto;height:auto;margin-right:4px;background:none;transform:none;font-size:13px;letter-spacing:0}
  .access__tel a{position:relative;display:inline-block;z-index:0}
  .access__tel a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:3px;background:var(--accent);z-index:-1}
  .access__info .more{display:none}
  .access__map{margin:64px auto 0;width:calc(100% - 8.2vw);height:95vw}

  /* フッター（メニューと地図ボタンは出さない） */
  .footer{margin-top:21px}
  .footer__inner{width:75%;padding-top:79px;padding-bottom:34px}
  .footer__top{display:block;height:auto}
  .footer__left{width:100%}
  .footer__nav{display:none}
  .footer__logo{height:auto}
  .footer__addr{margin-top:29px;font-size:13px;line-height:1.8;letter-spacing:.52px}
  .footer__row{display:block;margin-top:5px;font-size:13px}
  /* 電話は下に24pxの余白を付けて押せる範囲を44pxに（上の営業時間の行には食い込ませない） */
  .footer__row .tel{display:block;width:max-content;margin:0 0 -24px;padding:4px 0 24px}
  .footer__row .tel::before{display:none}
  .footer__map{display:none}
  .footer__bottom{margin-top:198px;font-size:11px}
  .totop{right:19px;bottom:23px;width:70px;height:70px}
  /* 読ませる日本語の小さなラベルを1段大きく（40〜60代がスマホで読む前提） */
  .works__jpn{font-size:13px}
  .footer__addr{font-size:14px}
}

/* 横向きのスマホ（高さ500px以下）：メニューを2列にして、電話まで1画面に収める。収まらなくてもメニューの中はスクロールできる */
@media (max-width:768px) and (max-height:500px){
  .menu ul{grid-template-columns:repeat(2,auto);column-gap:48px;margin-top:88px}
  .menu a{font-size:min(11.95vw,64px)}
  .menu__info{margin-top:24px}
}

/* ==================================================================
   ペルソナ確認（2026-09-15）からの修正
   近所の修理客（63歳）・自転車/原付を買いたい保護者（47歳）・県外のカスタム検討者（34歳）で
   スマホを1画面ずつ使ってもらい、「探す・迷う・大きすぎる」と言われた所を直した。
================================================================== */
/* 英字の大見出しの下に日本語（何のセクションか分かるように） */
.sect__jp{position:absolute;left:0;top:100%;margin-top:6px;font-family:var(--jp);font-weight:700;font-size:16px;letter-spacing:.12em}
/* 「Learn More」は押しても何が起きるか分からないので日本語に */
.more--jp a{font-family:var(--jp);font-weight:700;font-size:17px;letter-spacing:.06em}
.works__more a::after{background:var(--white)}
.works__more{display:none}
/* サービスの英字名の下に日本語 */
.service__title small{display:block;margin:2px 0 0;font-family:var(--jp);font-weight:700;font-size:15px;line-height:1.5;letter-spacing:.06em;vertical-align:baseline}
/* メニューにも日本語・アクセス・Instagram */
.menu__jp{display:block;margin-top:4px;font-family:var(--jp);font-weight:700;font-size:14px;line-height:1.4;letter-spacing:.1em;text-transform:none}
.menu .menu__ig{display:inline-block;margin-top:16px;font-family:var(--din);font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:none;text-decoration:underline;text-underline-offset:5px}
.footer__ig{display:inline-block;margin-top:14px;font-family:var(--din);font-weight:500;font-size:14px;letter-spacing:.04em;text-decoration:underline;text-underline-offset:4px}
/* 「（日曜定休）」を営業時間と同じ大きさに（来店前に一番見る情報） */
.access__open span,.footer__row span{font-size:inherit}
/* 電話の帯（スマホだけ。画面の下に固定） */
.callbar{display:none}

@media (max-width:768px){
  .sect__jp{position:static;margin-top:4px;font-size:14px}
  .more--jp a{font-size:15px;letter-spacing:.04em}
  .service__title small{font-size:14px}
  .menu__jp{margin-top:0;font-size:13px}
  /* 英字の大見出しを約7割に（見出しだけの画面が続かないように） */
  .sect{padding-top:56px}
  .huge{font-size:20vw;line-height:1.02}
  .about__copy .huge{font-size:18vw;line-height:.96}
  .about__copy .huge--ghost{margin-left:9vw}
  /* WORKS は横に送らず、2列で4台＋「すべての作例を見る」 */
  .works__under{padding:40px 0 48px}
  .works__list{overflow:visible;clip-path:none}
  .works__track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px;margin-right:0;transform:none!important}
  .works__item{margin-right:0}
  .works__item:nth-child(n+5){display:none}
  .works__tile{height:36vw}
  .works__name{margin-top:12px}
  .works__eng{font-size:24px;line-height:1.1}
  .works__dots{display:none}
  .works__more{position:relative;display:block;width:83%;margin:30px auto 0;z-index:1}
  /* 最初の画面は、下に固定した電話の帯のぶん低くする（縦書きの一文と写真が帯に隠れないように） */
  .mv{height:calc(100vh - 63px);height:calc(100svh - 63px)}
  /* 電話の帯 */
  .callbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;column-gap:10px;
    padding:8px 16px calc(8px + env(safe-area-inset-bottom));background:var(--black);color:var(--white);border-top:3px solid var(--accent)}
  .callbar__tel{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:14px;color:inherit}
  .callbar__map{flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:44px;padding:0 16px;border:2px solid var(--white);font-family:var(--jp);font-weight:700;font-size:14px;letter-spacing:.06em;color:var(--white)}
  .callbar__label{grid-row:1 / 3;display:flex;align-items:center;height:44px;padding:0 12px;background:var(--accent);font-family:var(--jp);font-weight:700;font-size:14px;letter-spacing:.06em}
  .callbar__num{font-family:var(--din);font-weight:700;font-size:22px;line-height:1.15;letter-spacing:.02em}
  .callbar__hours{font-family:var(--jp);font-weight:700;font-size:13px;line-height:1.4}
  /* 帯に隠れないよう、フッターの下を空ける */
  .footer__inner{padding-bottom:98px}
  .totop{bottom:87px}
}

/* ==================================================================
   行の組み（.data）：会社データ・用事の一覧で使う。下層ページ専用だったものを、
   トップの「うちの仕事」でも使うため共通に移した（2026-09-28）
================================================================== */
/* 会社データ（参考元 How to Access の行の組み：上に2pxの黒線） */
.data{width:950px;max-width:100%;margin:55px auto 0;text-align:left}
.data__row{display:flex;align-items:center;padding:30px 40px;border-top:2px solid var(--black)}
.data__row:last-child{border-bottom:2px solid var(--black)}
.data dt{flex:0 0 330px;display:flex;align-items:center}
.data__eng{flex:0 0 150px;font-family:var(--cond);font-weight:700;font-size:27px;letter-spacing:.05em;text-transform:uppercase}
.data__jpn{position:relative;padding-left:24px;font-family:var(--jp);font-weight:700;font-size:13px}
.data__jpn::before{content:"";position:absolute;left:0;top:50%;width:1px;height:15px;background:var(--black);transform:translateY(-50%) rotate(25deg)}
/* 値は <wbr> の位置でだけ折り返す（「任意保 / 険」のような分断を防ぐ） */
.data dd{flex:1 1 auto;min-width:0;font-family:var(--jp);font-weight:700;font-size:17px;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}
.data dd a,.info__tel a,.contact-list a,.form__note a,.viewer__tel a{position:relative;display:inline-block;z-index:0}
/* 下線は文字に重ねず、文字の下に引く（参考元の電話番号と同じ位置） */
.data dd a::after,.info__tel a::after,.contact-list a::after,.form__note a::after,.viewer__tel a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;background:var(--accent);z-index:-1}
.data dd a::before,.info__tel a::before,.contact-list a::before,.form__note a::before,.viewer__tel a::before{content:"";position:absolute;left:50%;top:50%;width:max(calc(100% + 16px),44px);height:44px;transform:translate(-50%,-50%)}

@media screen and (max-width:768px){
  .data__row{padding:26px 24px}
  .data dt{flex-basis:230px}
  .data__eng{flex-basis:110px;font-size:22px}
  .data{margin-top:32px}
  .data__row{display:block;padding:20px 12px}
  .data dt{display:flex}
  .data__eng{flex:0 0 auto;margin-right:24px;font-size:20px}
  .data__jpn{font-size:12px}
  .data dd{margin-top:6px;font-size:15px}
}