/* Takuya Works の見た目。index.html と works.html の両方が読む。
   ⚠️このファイルは _build_top.py が作る。**直接いじらない**（次の書き出しで消える）
   ここから：参考サイトのトップページ用ルールを抜き出したもの
   （@media ごとそのまま。値を書き写して劣化させないため） */
html{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  word-break: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4
}
*,
:after,
:before{
  background-repeat: no-repeat;
  -webkit-box-sizing: inherit;
  box-sizing: inherit
}
*{
  padding: 0;
  margin: 0
}
abbr[title]{
  border-bottom: 0;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted
}
a{
  background-color: transparent
}
a:active,
a:hover{
  outline-width: 0
}
code,
kbd,
pre,
samp{
  font-family: monospace
}
pre{
  font-size: 1em
}
button,
input,
optgroup,
select,
textarea{
  font: inherit
}
button{
  overflow: visible
}
button,
select{
  text-transform: none
}
[role=button],
[type=button],
[type=reset],
[type=submit],
button{
  cursor: pointer;
  color: inherit
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner{
  border-style: none;
  padding: 0
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button:-moz-focusring{
  outline: 1px dotted ButtonText
}
[type=reset],
[type=submit],
button,
html [type="button"]{
  -webkit-appearance: button
}
button,
input,
select,
textarea{
  background-color: transparent;
  border-style: none
}
img{
  border-style: none
}
progress{
  vertical-align: baseline
}
body{
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  line-height: 1.5;
  background: #000;
  color: #f3f3f3;
  font-family: Noto Serif JP, sans-serif, serif;
  font-weight: 500;
  padding-top: 15pc;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: palt
}
@media only screen and (min-width:769px){
body{
    font-weight: 200;
    padding-top: 365px
  }
}
a{
  color: inherit
}
img{
  vertical-align: bottom;
  max-width: 100%
}
li,
ol,
ul{
  list-style: none
}
*{
  outline: 0
}
a:not([href]){
  opacity: .15 !important;
  pointer-events: none
}
@-webkit-keyframes text-flash{
  0 {
    opacity: 0
  }

  20%,
  35% {
    opacity: .3
  }

  to {
    opacity: 1
  }
}
@keyframes text-flash{
  0 {
    opacity: 0
  }

  20%,
  35% {
    opacity: .3
  }

  to {
    opacity: 1
  }
}
@media only screen and (max-width:768px){
.u-pc{
    display: none
  }
}
@media only screen and (min-width:769px){
.u-sp{
    display: none
  }
}
@-webkit-keyframes b{
  0 {
    transform-origin: right center;
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }

  0,
  50% {
    -webkit-transform-origin: right center
  }

  50% {
    transform-origin: right center
  }

  50%,
  51% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0)
  }

  51% {
    transform-origin: left center
  }

  51%,
  to {
    -webkit-transform-origin: left center
  }

  to {
    transform-origin: left center
  }
}
@keyframes b{

  0,
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }

  0 {
    transform-origin: right center
  }

  0,
  50% {
    -webkit-transform-origin: right center
  }

  50% {
    transform-origin: right center
  }

  50%,
  51% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0)
  }

  51% {
    transform-origin: left center
  }

  51%,
  to {
    -webkit-transform-origin: left center
  }

  to {
    transform-origin: left center;
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}
.sns-list{
  font-weight: 300;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}
@media only screen and (min-width:769px){
.sns-list{
    font-weight: 200
  }
}
@media only screen and (max-width:768px){
.sns-list{
    width: 200px
  }
}
@media only screen and (min-width:769px){
.sns-list{
    width: 15pc
  }
}
@media only screen and (max-width:768px){
.sns-list>li{
    width: 75pt
  }
.sns-list>li:not(:last-child){
    margin-bottom: 5px
  }
}
@media only screen and (min-width:769px){
.sns-list>li{
    width: 5pc
  }
}
.sns-list>li>a{
  text-decoration: none;
  color: #f3f3f3;
  opacity: .45;
  font-size: 14px
}
@media only screen and (min-width:769px){
.sns-list>li>a{
    font-size: 9pt;
    opacity: .43;
    -webkit-transition: all .3s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all .3s cubic-bezier(0.77, 0, 0.175, 1)
  }
.sns-list>li>a:hover{
    opacity: 1
  }
}
.header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 40px 8vw;
  z-index: 3;
  font-family: Prompt, -apple-system, BlinkMacSystemFont, Segoe UI, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
  font-weight: 300
}
@media only screen and (min-width:769px){
.header{
    font-weight: 200;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 50px 6.94444vw
  }
}
.header__title{
  font-size: 17px;
  text-decoration: none;
  letter-spacing: .02em
}
@media only screen and (min-width:769px){
.header__title{
    -webkit-transition: all .3s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all .3s cubic-bezier(0.77, 0, 0.175, 1)
  }
.header__title:hover{
    opacity: .3
  }
}
.header__button{
  text-indent: -9999px;
  width: 27px;
  height: 27px;
  position: relative;
  overflow: hidden
}
.header__button:not(:hover):after,
.header__button:not(:hover):before{
  -webkit-animation: c 4s -2s infinite cubic-bezier(0.77, 0, 0.175, 1);
  animation: c 4s -2s infinite cubic-bezier(0.77, 0, 0.175, 1)
}
.header__button:not(:hover):after{
  -webkit-animation-delay: -2.1s;
  animation-delay: -2.1s
}
@-webkit-keyframes c{
  0 {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }

  6.25% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
  }

  6.251% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
  }
}
@keyframes c{

  0,
  12.5% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }

  6.25% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
  }

  6.251% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
  }

  12.5% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
}
@media only screen and (min-width:769px){
.header__button{
    width: 30px;
    height: 30px;
    position: absolute;
    right: 6.94444vw;
    top: 46px
  }
.header__button:hover:before{
    -webkit-animation: d .3s 1 forwards cubic-bezier(0.77, 0, 0.175, 1);
    animation: d .3s 1 forwards cubic-bezier(0.77, 0, 0.175, 1)
  }
.header__button:hover:after{
    -webkit-animation: e .3s 1 forwards cubic-bezier(0.77, 0, 0.175, 1);
    animation: e .3s 1 forwards cubic-bezier(0.77, 0, 0.175, 1)
  }
}
.header__button:after,
.header__button:before{
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #f3f3f3;
  position: absolute;
  left: 0
}
.header__button:before{
  top: calc(50% - 3px)
}
@media only screen and (min-width:769px){
.header__button:before{
    top: calc(50% - 4px)
  }
}
.header__button:after{
  top: 50px
}
@media only screen and (min-width:769px){
.header__button:after{
    top: 50px
  }
}
.header__nav{
  position: absolute;
  left: 6.94444vw;
  top: 60px;
  font-size: 14px
}
@media only screen and (max-width:768px){
.header__nav{
    display: none !important
  }
}
.header__nav__list>li:not(:last-child){
  margin-bottom: 7px
}
.header__nav__list>li>a{
  text-decoration: none;
  -webkit-transition: all .3s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all .3s cubic-bezier(0.77, 0, 0.175, 1)
}
.header__nav__list.has-current>li>a,
.header__nav__list>li>a:hover{
  opacity: .3
}
.header__nav__list.has-current>li>a.is-current,
.header__nav__list.has-current>li>a:hover{
  opacity: 1
}
.header__nav-trigger{
  display: block;
  width: 10px;
  height: 10px;
  background: #f3f3f3;
  border-radius: 50%;
  position: absolute;
  left: 6.94444vw;
  top: 58px;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all .2s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all .2s cubic-bezier(0.77, 0, 0.175, 1);
  opacity: 1
}
@media only screen and (max-width:768px){
.header__nav-trigger{
    display: none !important
  }
}
.header__nav-trigger.is-visible{
  -webkit-transform: scale(1);
  transform: scale(1)
}
.header__nav-trigger.is-disabled{
  opacity: 0;
  pointer-events: none
}
.menu{
  position: fixed;
  z-index: 4;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
  background: #000;
  font-family: Prompt, -apple-system, BlinkMacSystemFont, Segoe UI, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
  font-weight: 200;
  display: none
}
@media only screen and (min-width:769px){
.menu{
    font-weight: 100
  }
}
@media only screen and (max-width:768px){
.menu__container{
    position: relative;
    padding-bottom: 230px
  }
.menu__container:after{
    content: "";
    display: block;
    background: url(../images/shared/autograph.svg)50%/contain no-repeat;
    width: 150px;
    height: 79px;
    position: absolute;
    bottom: 60px;
    right: 8vw;
    opacity: .95
  }
}
@media only screen and (min-width:769px){
.menu__container{
    position: relative;
    min-height: 50vw;
    height: 100%
  }
}
.menu__header{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 40px 8vw
}
@media only screen and (min-width:769px){
.menu__header{
    padding: 50px 6.94444vw 0;
    position: relative;
    z-index: 2
  }
}
.menu__title{
  font-size: 17px;
  text-decoration: none;
  letter-spacing: .02em;
  font-weight: 300
}
@media only screen and (min-width:769px){
.menu__title{
    font-weight: 200;
    -webkit-transition: all .3s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all .3s cubic-bezier(0.77, 0, 0.175, 1)
  }
}
@media only screen and (min-width:769px){
.menu__title:hover{
    opacity: .3
  }
}
.menu__button{
  width: 27px;
  height: 27px;
  text-indent: -9999px;
  overflow: hidden;
  position: relative
}
.menu__button:hover{
  -webkit-animation: h .5s cubic-bezier(0.77, 0, 0.175, 1);
  animation: h .5s cubic-bezier(0.77, 0, 0.175, 1)
}
.menu__button:after,
.menu__button:before{
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  background: #f3f3f3;
  position: absolute;
  top: 50%;
  left: calc(50% - 15px)
}
.menu__button:before{
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}
.menu__button:after{
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg)
}
@media only screen and (max-width:768px){
.menu__nav{
    width: 74.66643vw;
    margin: auto;
    position: relative;
    border-top: 1px solid #232323;
    margin-top: 13px;
    padding-top: 58px
  }
}
@media only screen and (min-width:769px){
.menu__nav__list{
    width: 27.77778vw;
    position: absolute;
    left: 6.94444vw;
    top: 16.5%
  }
}
.menu__nav__list>li{
  font-size: 7.46666vw;
  line-height: 1
}
@media only screen and (min-width:769px){
.menu__nav__list>li{
    font-size: 2.77777vw
  }
}
.menu__nav__list>li:not(:last-child){
  margin-bottom: 6vw
}
@media only screen and (min-width:769px){
.menu__nav__list>li:not(:last-child){
    margin-bottom: 1.4vw
  }
}
.menu__nav__list>li>a{
  text-decoration: none;
  display: inline-block;
  position: relative
}
@media only screen and (min-width:769px){
.menu__nav__list>li>a:after{
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: #f3f3f3;
    position: absolute;
    left: 0;
    bottom: -3px;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transition: -webkit-transform .5s cubic-bezier(0.77, 0, 0.175, 1);
    transition: -webkit-transform .5s cubic-bezier(0.77, 0, 0.175, 1);
    transition: transform .5s cubic-bezier(0.77, 0, 0.175, 1);
    transition: transform .5s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform .5scubic-bezier(0.77, 0, 0.175, 1)
  }
.menu__nav__list>li>a:hover:after{
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}
.menu__links{
  font-weight: 300
}
@media only screen and (min-width:769px){
.menu__links{
    font-weight: 200;
    font-size: 1.11111vw;
    position: absolute;
    left: 6.94444vw;
    top: 68%
  }
}
@media only screen and (max-width:768px){
.menu__links{
    margin-top: 13.7vw;
    font-size: 4.26666vw
  }
}
.menu__links>li:not(:last-child){
  margin-bottom: 4px
}
@media only screen and (min-width:769px){
.menu__links>li:not(:last-child){
    margin-bottom: .5vw
  }
}
.menu__links>li>a{
  text-decoration: none;
  display: inline-block;
  position: relative
}
@media only screen and (min-width:769px){
.menu__links>li>a:after{
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #f3f3f3;
    position: absolute;
    left: 0;
    bottom: 2px;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transition: -webkit-transform .5s cubic-bezier(0.77, 0, 0.175, 1);
    transition: -webkit-transform .5s cubic-bezier(0.77, 0, 0.175, 1);
    transition: transform .5s cubic-bezier(0.77, 0, 0.175, 1);
    transition: transform .5s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform .5scubic-bezier(0.77, 0, 0.175, 1)
  }
.menu__links>li>a:hover:after{
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}
.menu__information{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #f3f3f3
}
@media only screen and (max-width:768px){
.menu__information{
    position: relative;
    margin: 65px 0 42px;
    padding: 63px 16vw 63px 10.66667vw;
    min-height: 187px
  }
}
@media only screen and (min-width:769px){
.menu__information{
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 52.77769vw;
    padding: 8.33333vw;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
  }
}
.menu__information__background{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden
}
.menu__information__background:before{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#000));
  background: linear-gradient(to bottom, transparent, #000);
  top: 0;
  left: 0;
  position: absolute;
  z-index: 1;
  opacity: .5
}
.menu__information__background:after{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute
}
@media only screen and (min-width:769px){
.menu__information__background:after{
    top: 5vh;
    left: 0;
    background: url(../images/shared/autograph.svg)5.55556vw/38.88887vw auto no-repeat;
    opacity: .27;
    -webkit-transform: scale(0.8);
    transform: scale(0.8)
  }
}
.menu__information__background__slide{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0
}
.menu__information__background__slide__pc,
.menu__information__background__slide__sp{
  background: 50%/cover no-repeat;
  width: 100%;
  height: 100%
}
@media only screen and (max-width:768px){
.menu__information__background__slide__pc{
    display: none
  }
}
@media only screen and (min-width:769px){
.menu__information__background__slide__sp{
    display: none
  }
}
.menu__information__lang{
  font-weight: 400;
  font-size: 13px;
  color: hsla(0, 0, 100%, .45);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  width: 100%
}
@media only screen and (min-width:769px){
.menu__information__lang{
    font-weight: 300
  }
}
@media only screen and (max-width:768px){
.menu__information__lang{
    position: absolute;
    top: 30px;
    right: 10.66667vw
  }
}
@media only screen and (min-width:769px){
.menu__information__lang{
    margin-top: -30px;
    margin-bottom: 30px
  }
}
.menu__information__lang__separator{
  display: block;
  margin: 0 4px
}
.menu__information--ja .menu__information__list__title--en{
  display: none
}
.menu__information--ja .menu__information__lang__button--ja{
  color: #f3f3f3
}
.menu__information--en .menu__information__list__title--ja{
  display: none
}
.menu__information--en .menu__information__lang__button--en{
  color: #f3f3f3
}
@media only screen and (max-width:768px){
.menu__information__list{
    width: 100%
  }
}
@media only screen and (min-width:769px){
.menu__information__list{
    text-align: right
  }
}
.menu__information__list>li{
  line-height: 1.65;
  font-size: 10px
}
@media only screen and (min-width:769px){
.menu__information__list>li{
    font-size: 11px
  }
}
.menu__information__list>li:not(:last-child){
  margin-bottom: 25px
}
@media only screen and (min-width:769px){
.menu__information__list>li:not(:last-child){
    margin-bottom: 28px
  }
}
.menu__information__list>li>a{
  text-decoration: none
}
.menu__information__list>li>a .menu__information__list__title{
  text-decoration: underline
}
.menu__information__list>li>a:hover .menu__information__list__title{
  text-decoration: none
}
.menu__information__list>li>a.menu__information__external-link .menu__information__list__title:after{
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background: url(../images/icons/arrow-up-right.svg)right 4px/5px auto no-repeat
}
.menu__information__list__date{
  font-weight: 400;
  opacity: .45
}
@media only screen and (min-width:769px){
.menu__information__list__date{
    font-weight: 200;
    opacity: .4;
    font-size: 9pt
  }
}
.menu__information__list__title{
  margin-top: 3px;
  font-family: Noto Serif JP, sans-serif, serif;
  font-weight: 400
}
@media only screen and (min-width:769px){
.menu__information__list__title{
    font-weight: 200
  }
}
.menu__sns{
  font-weight: 300;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}
@media only screen and (min-width:769px){
.menu__sns{
    font-weight: 200
  }
}
@media only screen and (max-width:768px){
.menu__sns{
    margin-left: 10.66667vw
  }
}
@media only screen and (min-width:769px){
.menu__sns{
    position: absolute;
    left: 6.94444vw;
    bottom: 13.5%
  }
}
@media only screen and (max-width:768px){
.menu__copyright{
    width: 74.66643vw;
    margin: 60px auto 0;
    padding: 30px 0 0;
    border-top: 1px solid #232323
  }
}
@media only screen and (min-width:769px){
.menu__copyright{
    position: absolute;
    left: 6.94444vw;
    bottom: 41px;
    letter-spacing: .03em
  }
}
.menu__copyright>small{
  font-size: 9pt;
  font-weight: 400
}
@media only screen and (min-width:769px){
.menu__copyright>small{
    font-weight: 200;
    font-size: 10px
  }
}
@-webkit-keyframes f{
  0 {
    opacity: 0
  }

  15% {
    opacity: 1
  }

  30% {
    opacity: 0
  }

  45% {
    opacity: 1
  }

  60% {
    opacity: 0
  }

  75% {
    opacity: 1
  }

  90% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}
@keyframes f{
  0 {
    opacity: 0
  }

  15% {
    opacity: 1
  }

  30% {
    opacity: 0
  }

  45% {
    opacity: 1
  }

  60% {
    opacity: 0
  }

  75% {
    opacity: 1
  }

  90% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}
.footer__sns .sns-list>li>a:not(:hover){
  opacity: .3
}
.top-header{
  position: absolute;
  z-index: 1;
  margin: auto;
  left: 0;
  right: 0
}
@media only screen and (max-width:768px){
.top-header{
    top: calc(50% - 65px);
    text-align: center
  }
}
@media only screen and (min-width:769px){
.top-header{
    bottom: 21%;
    padding: 0 12.5vw
  }
}
/* 🔴2026-08-21：display:none をやめた。**読み上げからも消えてしまう**ため。
   画面には出さず、機械には読ませる置き方に変える（参考サイトの指定を打ち消す）。
   ⚠️width/height を0にしない。0だと読み上げが飛ばす実装がある。1pxで残す。 */
.top-header__title{
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media only screen and (max-width:768px){
.top-header__body{
    display: inline-block
  }
}
.top-header__autograph{
  display: block;
  width: 220px;
  height: 115px
}
@media only screen and (max-width:768px){
.top-header__autograph{
    margin: 0 0 0 auto
  }
}
@media only screen and (min-width:769px){
.top-header__autograph{
    width: 280px;
    height: 147px
  }
}
.top-header__message{
  font-size: 11px;
  font-family: Noto Serif JP, sans-serif, serif;
  font-weight: 500;
  line-height: 2;
  letter-spacing: .05em;
  margin-top: -5px
}
@media only screen and (min-width:769px){
.top-header__message{
    font-weight: 200
  }
}
@media only screen and (max-width:768px){
.top-header__message{
    text-align: right
  }
}
@media only screen and (min-width:769px){
.top-header__message{
    margin-top: 20px;
    padding-top: 20px;
    position: relative;
    line-height: 2.5;
    letter-spacing: .666em;
    font-size: 9pt
  }
.top-header__message:before{
    content: "";
    display: block;
    background: #f3f3f3;
    opacity: .33;
    width: 2.77778vw;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0
  }
}
.top-background-video{
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden
}
@media only screen and (max-width:768px){
.top-background-video{
    width: 64vw;
    left: 16vw;
    height: calc(100% - 250px);
    top: 115px
  }
}
@media only screen and (min-width:769px){
.top-background-video{
    width: 75.00019vw;
    bottom: 0;
    right: 0;
    height: calc(100% - 180px);
    cursor: pointer
  }
}
.top-background-video__player{
  display: block;
  pointer-events: none
}
.top-explore{
  position: absolute;
  right: 8vw;
  z-index: 1;
  overflow: hidden
}
@media only screen and (min-width:769px){
.top-explore{
    bottom: 30px;
    width: 47.22216vw;
    bottom: 0;
    right: 6.94444vw
  }
}
@media only screen and (max-width:768px){
.top-explore{
    bottom: 50px
  }
}
.top-explore__button{
  font-size: 15px;
  text-decoration: none;
  line-height: 1.8;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  position: relative
}
.top-explore__button:after{
  content: "";
  width: 10px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65.7 86.6'%3E%3Cpath fill='%23fff' d='M65.7 43.3L0 0v86.6z'/%3E%3C/svg%3E") 50%/contain no-repeat;
  display: inline-block;
  margin-left: 10px;
  -webkit-transition: -webkit-transform .5s cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform .5s cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform .5s cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform .5s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform .5scubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transform: translateX(0);
  transform: translateX(0)
}
@media only screen and (min-width:769px){
.top-explore__button:after{
    margin-left: 15px
  }
}
@media only screen and (min-width:769px){
.top-explore__button{
    background: #000;
    padding: 38px 68px;
    text-align: right;
    line-height: 2.3
  }
.top-explore__button.is-active:after,
  .top-explore__button:hover:after{
    -webkit-transform: translateX(10px);
    transform: translateX(10px)
  }
.top-explore__button.is-active .top-explore__text:after,
  .top-explore__button:hover .top-explore__text:after{
    -webkit-animation: g .5s cubic-bezier(0.77, 0, 0.175, 1);
    animation: g .5s cubic-bezier(0.77, 0, 0.175, 1)
  }
}
.top-explore__text{
  font-family: Prompt, -apple-system, BlinkMacSystemFont, Segoe UI, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
  font-weight: 400;
  display: inline-block;
  position: relative;
  overflow: hidden;
  letter-spacing: .03em
}
@media only screen and (min-width:769px){
.top-explore__text{
    font-weight: 300
  }
}
@media only screen and (max-width:768px){
.top-explore__text{
    padding-bottom: 8px
  }
}
.top-explore__text:after{
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: #f3f3f3 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQMAAACTPww9AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURUdwTAAAAJ8qhFEAAAABdFJOUwBA5thmAAAAEElEQVQI12M4wHCAwYDBAAAJyAHhfTfU3wAAAABJRU5ErkJggg==") 0 0/2px 2px repeat;
  position: absolute;
  bottom: 0;
  left: 0
}
.top-footer{
  position: absolute;
  z-index: 1;
  left: 8vw
}
@media only screen and (min-width:769px){
.top-footer{
    left: 6.94444vw;
    bottom: 42px;
    letter-spacing: .03em
  }
}
@media only screen and (max-width:768px){
.top-footer{
    bottom: 42px
  }
}
.top-footer__links{
  font-family: Prompt, -apple-system, BlinkMacSystemFont, Segoe UI, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
  font-weight: 400;
  font-size: 9pt
}
@media only screen and (min-width:769px){
.top-footer__links{
    font-weight: 200
  }
}
@media only screen and (max-width:768px){
.top-footer__links{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
  }
}
@media only screen and (min-width:769px){
.top-footer__links{
    margin-bottom: 9pt
  }
}
@media only screen and (max-width:768px){
.top-footer__links>li:first-child:after{
    content: "/";
    margin: 0 9px 0 6px
  }
}
@media only screen and (min-width:769px){
.top-footer__links>li:first-child{
    display: none
  }
}
.top-footer__links>li>a{
  text-decoration: none;
  display: inline-block
}
@media only screen and (min-width:769px){
.top-footer__links>li>a{
    -webkit-transition: all .3s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all .3s cubic-bezier(0.77, 0, 0.175, 1)
  }
.top-footer__links>li>a:hover{
    opacity: .3
  }
}
.top-footer__copyright>small{
  font-size: 10px;
  font-family: Prompt, -apple-system, BlinkMacSystemFont, Segoe UI, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
  font-weight: 400
}
@media only screen and (min-width:769px){
.top-footer__copyright>small{
    font-weight: 200
  }
}
.pager a.pager__prev:hover:before{
  -webkit-transform: translateX(-10px);
  transform: translateX(-10px)
}
.pager a.pager__next:hover:after{
  -webkit-transform: translateX(10px);
  transform: translateX(10px)
}
.pager__list .page-numbers.current,
.pager__list a.page-numbers:hover{
  opacity: 1;
  position: relative
}
.pager__list .page-numbers.current:after,
.pager__list a.page-numbers:hover:after{
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #f3f3f3;
  position: absolute;
  left: 0;
  bottom: 0
}
.biography-table tbody td a{
  display: inline-block;
  -webkit-transition: opacity .4s cubic-bezier(0.77, 0, 0.175, 1);
  transition: opacity .4s cubic-bezier(0.77, 0, 0.175, 1)
}
.biography-table tbody td a:hover{
  opacity: .5
}
@-webkit-keyframes h{
  0 {
    opacity: 0;
    -webkit-transform: scale(1.25);
    transform: scale(1.25)
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}
@keyframes h{
  0 {
    opacity: 0;
    -webkit-transform: scale(1.25);
    transform: scale(1.25)
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}
.form-action__submit button{
  font-family: Prompt, -apple-system, BlinkMacSystemFont, Segoe UI, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: .05em;
  text-align: left
}
@media only screen and (min-width:769px){
.form-action__submit button{
    font-weight: 200
  }
}
@media only screen and (max-width:768px){
.form-action__submit button{
    position: relative;
    padding-right: 22px
  }
}
@media only screen and (min-width:769px){
.form-action__submit button{
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 28px;
    padding: 0 42px
  }
}
.form-action__submit button:disabled{
  opacity: .3
}
.form-action__submit button:after{
  content: "";
  display: inline-block;
  background: url(../images/icons/arrow-right.svg)50%/contain no-repeat;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  -webkit-transition: all .4s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all .4s cubic-bezier(0.77, 0, 0.175, 1)
}
@media only screen and (max-width:768px){
.form-action__submit button:after{
    position: absolute;
    top: 8px;
    right: 0
  }
}
@media only screen and (min-width:769px){
.form-action__submit button:after{
    margin-left: 18px
  }
}
@media only screen and (min-width:769px){
.form-action__submit button:not(:disabled):hover:after{
    -webkit-transform: translateX(10px);
    transform: translateX(10px)
  }
}
a.information-item .information-item__date:after{
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #232323;
  position: absolute;
  bottom: 0;
  left: 0
}
a[href].information-item .information-item__en-title{
  color: #7a7a7a
}
a.information-item:hover{
  background: #060606
}
a.information-item:hover .information-item__content{
  border-bottom-color: transparent
}
a.information-item:hover .information-item__date:after{
  background: #f3f3f3
}
a.information-item:hover .information-item__title{
  text-decoration: underline
}
a.information-item:hover .information-item__en-title{
  color: #f3f3f3
}
@media only screen and (min-width:769px){
.exhibition-footer__link a:hover{
    text-decoration: none
  }
}
.sales-categories__points li{
  position: relative;
  padding-left: 18px;
}
.sales-categories__points li:before{
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f3f3f3;
  position: absolute;
  left: 0;
  top: .6em;
}
body.page-template-page-sales .loading,
body.page-template-page-sales .loading__background,
body.page-template-page-sales .canvas{
  display: none;
}
/* ── Takuya Works 用の上書き ──────────────────────────
   参考サイトは YouTube プレーヤー。こちらは mp4 を直接置くので
   その分だけ足す。ほかの見た目は上のルールに任せる。
   ⚠️スマホは動画ではなく**動く画像**を敷く（_top_parts.js が入れ替える）。
     見え方を合わせるため、img にも同じ指定を当てる。 */
.top-background-video video,
.top-background-video img.top-bg-anim {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
/* 🔴2026-08-23：**エコモードでも動かすためのコマ並べ**（?eco=sprite・A案）。
   iOSは低電力モード中 <video> の自動再生を必ず拒否するので、
   動かすには <video> 以外の作りが要る。
   images/nonbreath-sprite.webp は 7x7=49コマを1枚にしたもの（2100x4004・272KB）。

   仕組み：background-size を 700% 700% にすると **1コマ＝枠1つぶん**になる。
   その位置を background-position-x / -y で段階送りする。
   ⚠️**コマごとの展開が要らない**（1枚を1回読むだけ）ので、エコモードでも重くならない。
   ⚠️steps(7, jump-none) は 0%・16.7%・…・100% の7段（両端を含む）。
     ふつうの steps(7) だと 0〜85.7% になり、最後の列が出ない。
   ⚠️横の送り 0.875秒（7コマ）＝1行ぶん。縦は 6.125秒（7行）で一周。
   ⚠️動画の枠は比率0.52。この画像は既にその比率で切り出してあるので、
     cover の計算をやり直す必要がない（枠いっぱいに敷くだけ）。 */
.top-background-video .top-bg-sprite {
  position: absolute;
  inset: 0;
  background-image: url("images/nonbreath-sprite.webp");
  background-size: 700% 700%;
  background-repeat: no-repeat;
  animation: topSpriteX .875s steps(7, jump-none) infinite,
             topSpriteY 6.125s steps(7, jump-none) infinite;
}
@keyframes topSpriteX {
  from { background-position-x: 0%; }
  to   { background-position-x: 100%; }
}
@keyframes topSpriteY {
  from { background-position-y: 0%; }
  to   { background-position-y: 100%; }
}
/* ⚠️「動きを減らす」設定の人には止めて見せる（既定の作法に合わせる） */
@media (prefers-reduced-motion: reduce) {
  .top-background-video .top-bg-sprite { animation: none; }
}

/* 動画の上に暗幕。ロゴを重ねるので、少し強めにする（タクヤ指示 2026-08-07）。
   ⚠️敷きすぎない。作品が見えなくなるのが旧サイトの失敗だった。
     0.42（前）→ 0.58（今）。これ以上は映像が判別できなくなる */
.top-background-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.58);
  pointer-events: none;
}
/* 動く背景。いちばん下に敷く（映像も文字もこの上） */
#bgcanvas {
  position: fixed; inset: 0; z-index: -1;
  background: #000; pointer-events: none;
}
/* 🔴読み込みの黒幕は短く（タクヤ指示 2026-08-09
   「トップは動画は最初から表示させてていい」）。
   映像自体は最初から出ているが、この幕が1.5秒かぶっていた（実測）。
   ⚠️0にはしない。読み込み前の素の状態が一瞬見えるのを防ぐ幕なので、
     出るのをやめるのではなく**すぐ消える**ようにする。 */
.loading {
  position: fixed; inset: 0; z-index: 20; background: #000;
  display: flex; align-items: center; justify-content: center;
  /* 🔴消え方をゆっくりにする（タクヤ指示 2026-08-09
     「ローディングが終わってフェードアニメーション入れたい」）。
     ぱっと消えると「読み込みが終わった」ではなく「切り替わった」に見える。 */
  transition: opacity 1.1s cubic-bezier(.22,.61,.36,1),
              visibility 1.1s cubic-bezier(.22,.61,.36,1);
}
.loading__inner { text-align: center; }
.loading__name {
  /* ⚠️左上のロゴと同じ書体にする。違うと幕が開いた瞬間に切り替わって見える */
  font-family: "Unbounded", var(--sans); font-weight: 700;
  font-size: clamp(18px, 2.2vw, 28px); letter-spacing: .02em;
  margin-bottom: 18px;
}
/* 読み込みの帯。⚠️本当の進み具合ではなく「動いている」ことを示すもの。
   実際の読み込み量は測れない（画像も動画もバラバラに来る）ため、
   一定の速さで伸ばして、読み終わった時点で消す。 */
.loading__bar {
  width: min(220px, 44vw); height: 1px;
  background: rgba(243,243,243,.18); overflow: hidden; margin: 0 auto;
}
/* 🔴バーは**1秒で最後まで**行く（タクヤ指摘 2026-08-10
   「ローディング終わる前にローディング画面消えてる」）。
   以前は2.4秒かけて96%までしか行かない作りで、幕が開く時点でも
   バーは途中だった＝「終わる前に消えた」ように見えていた。
   ⚠️準備が1秒より早く終わっても、バーが終わるまでは幕を開けない
     （_top_parts.js の MIN_MS）。 */
.loading__bar span {
  display: block; width: 100%; height: 100%; background: #f3f3f3;
  transform: scaleX(0); transform-origin: left center;
  animation: loading-bar 1s cubic-bezier(.22,.61,.36,1) .15s forwards;
}
@keyframes loading-bar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
body.no-anim .loading__bar span { animation: none; transform: scaleX(1); }
.loading.is-hidden { opacity: 0; visibility: hidden; }

/* 🔴参考サイトの CSS には a の色指定が無く、テーマの別ファイルで当てていた。
   そのままだとフッターのリンクが**既定の青**になる（実際なった）。 */
a { color: inherit; text-decoration: none; }
a:hover { opacity: .65; }

/* ロゴ（ワードマーク＋署名）。**大きく出して映像に重ねる**（タクヤ指示 2026-08-07）。
   参考サイトの枠は 220x115 だったが、そこに収めると小さすぎるので上書きする。
   ⚠️元画像は 2242x1000 の横長（2026-08-09 差し替え）。height を指定すると潰れるので auto のまま。
   ⚠️左カラムから映像側へはみ出させる。`.top-header` は z-index:1、
     映像は z-index:0 なので、重ねても隠れない。 */
.top-header__autograph {
  display: block;
  width: 520px;   /* 2026-08-07 620→520 に縮小（タクヤ指示） */
  max-width: none;
  height: auto;
  max-height: none;
  margin-left: -14px;   /* 文字の左の余白ぶん、他の要素と頭を揃える */
}
@media only screen and (max-width:768px) {
  /* 🔴スマホの映像の枠を広げる（タクヤ指示 2026-08-09）。
     参考サイトは 64vw の細い枠だったが、縦長の画面では小さすぎる。
     左右を中身と同じ 7vw にそろえて、画面いっぱいに近づける。
     ⚠️下は 110px 空ける。SNSアイコン（下30px）と著作権表示に被らせない。 */
  .top-background-video {
    width: 86vw !important;
    left: 7vw !important;
    top: 100px !important;
    height: calc(100% - 210px) !important;
  }

  /* スマホは映像が中央の細い枠だった名残。ロゴはそれより広く取って重ねる */
  .top-header__autograph {
    width: 74vw;
    margin: 0 -6vw 0 auto;
  }
}

/* 🔴参考サイトは `.top-footer__links > li:first-child { display:none }` で
   1つ目のリンクをPCで隠していた（先方の都合）。
   こちらはリンクが Contact 1つだけなので、そのままだと**何も出なくなる**
   （実際に消えた・2026-08-07）。打ち消す。 */
.top-footer__links > li:first-child { display: block; }
.top-footer__links > li:first-child:after { content: none; }

/* ── 題字：中央上 → **左上**へ。フォントも変える（タクヤ指示 2026-08-08） ──
   参考サイトは中央固定だったので、position を打ち消して左に寄せる。
   ⚠️そのままだと下のメニュー（top:60px）と重なるので、メニューを下げる。
   フォントは Syne。幾何学だが字幅が不揃いで、普通のサンセリフに見えない。
   ⚠️別の候補：Italiana（細く優雅）／Major Mono Display（等幅で癖が強い）。
     font-family の1行を差し替えるだけで変えられる。 */
.header__title {
  position: absolute;
  left: 6.94444vw;
  top: 44px;
  transform: none;
  margin: 0;
  /* 🔴屋号は Unbounded（タクヤ選択 2026-08-10・7案から6番）。
     ⚠️字面が広い書体なので letter-spacing は足さない（0）。
       足すと右のナビや、スマホでハンバーガーとぶつかる。
     ⚠️ここを変えたら**ローディング画面の名前**も同じにする
       （幕が開いた瞬間に別の書体になるとちらつく）。 */
  font-family: "Unbounded", "Syne", sans-serif;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0;
}
.header__nav { top: 92px; }
.header__nav-trigger { top: 90px; }

@media only screen and (max-width:768px) {
  .header__title { top: 30px; left: 6vw; font-size: 18px; }
  .header__nav { top: 62px !important; }
}

/* 🔴Explore の一帯：2026-08-07 に「使わない」で隠していたが、
   2026-08-21 タクヤ指示で**右下の黒帯として復活**（文字は Contact）。
   指定そのもの（1173行〜）は参考サイトから写したまま使う。
   ⚠️参考は別ページへのリンク。こちらは画面送りなので index.html 側は data-goto="3"。 */
/* .top-explore { display: none !important; }  ← 復活のため無効化 */

/* 面ごと固定するサイトなので、参考の absolute では**スクロールで一緒に流れる**。
   他のTOP要素（.top-header / .top-footer）と挙動を揃える。 */
.top-explore{
  position: fixed;
  color: #f3f3f3;           /* ⚠️参考はテーマ側の別ファイルで色を当てていて、写した分に無い */
  transition: opacity .5s ease, visibility .5s ease,
              transform .85s cubic-bezier(.22,.61,.36,1);
}
.top-explore__button{ color: inherit; }

/* 🔴2026-08-21：タクヤ指示で**縦も横も少し詰めた**。
   参考サイトの値（幅47.22216vw / 余白38px・68px＝高さ110px）は1173行〜に
   そのまま残してある。ここは**その上書き**なので、戻したければこの塊を消せばよい。
     高さ 110px → 73px（上下の余白 38px → 19.25px）
     ⚠️中身の高さは**34.5px**（文字の行送り34.5＝15px×2.3）。余白×2＋34.5 が高さ。
     横幅 680px → 400px（47.22216vw → 27.77777vw ＝ 1440pxのとき）
       ⚠️段階：680 → 580 → 500 → 400px（2026-08-21）
   ⚠️横の余白（68px）は変えない。文字の右端が動くと、上のメニューや
     著作権表示との縦のラインが揃わなくなる。 */
@media only screen and (min-width:769px){
  .top-explore{
    width: 27.77777vw;
    /* ⚠️2026-08-21：一度 right:0（画面の右端にぴたり）を試したが**取り消した**。
       右の浮きは参考サイトの 6.94444vw のまま（1173行〜の指定がそのまま効く）。 */
  }
  .top-explore__button{ padding-top: 19.25px; padding-bottom: 19.25px; }

  /* ⚠️2026-08-21：一度「文字を左に寄せて矢印を長く伸ばす」を入れたが**取り消した**。
     文字の右寄せ＋すぐ横の小さい三角（参考サイトのまま・1192行〜）に戻している。 */

  /* 🔴2026-08-21：触った時の反応を強めた（タクヤ指示）。
     参考サイトは「三角が10px進む＋下線が右へ抜ける」だけで、暗い背景では気づきにくい。
     足したのは3つ：
       ① 左から赤い明かりが差し込む
       ② 文字が少し前へ出る
       ③ 三角が10px→20pxまで進む（文字との間が開いて「進んだ」感じになる）
     ⚠️赤は **署名画像から拾った #B00000**。勝手な赤を持ち込まない。
     ⚠️明かりは帯の中だけ。overflow:hidden で外へ出さない。 */
  .top-explore__button{
    overflow: hidden;
    isolation: isolate;      /* 明かりが文字の上に来ないように層を分ける */
  }
  .top-explore__button:before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
                rgba(176, 0, 0, .62) 0%,
                rgba(176, 0, 0, .28) 42%,
                rgba(176, 0, 0, 0) 82%);
    transform: translateX(-101%);   /* ⚠️100%だと端に1pxの線が残ることがある */
    transition: transform .55s cubic-bezier(0.77, 0, 0.175, 1);
    pointer-events: none;
    z-index: 0;
  }
  .top-explore__button:hover:before{ transform: translateX(0); }

  /* 文字と三角は明かりより前に置く */
  .top-explore__text{
    z-index: 1;
    transition: transform .5s cubic-bezier(0.77, 0, 0.175, 1);
  }
  .top-explore__button:after{ position: relative; z-index: 1; }

  .top-explore__button:hover .top-explore__text{ transform: translateX(6px); }
  .top-explore__button:hover:after{ transform: translateX(20px); }
}
.top-explore.is-gone{
  opacity: 0; visibility: hidden;
  transform: translateY(var(--leave, -5vh));
  pointer-events: none;
}
/* ⚠️動きを減らす設定の人には流さない */
@media (prefers-reduced-motion: reduce){
  .top-explore__button:before,
  .top-explore__button:after,
  .top-explore__text,
  .top-explore__button:hover .top-explore__text:after{
    transition: none; animation: none;
  }
  /* ⚠️動きは止めるが、**触ったことが分からなくなるのは困る**ので明かりは出す */
  .top-explore__button:hover:before{ transform: translateX(0); }
}

/* ── 右上：横棒 → Instagram のアイコン（タクヤ指示 2026-08-07） ── */
.header__button, .menu { display: none !important; }
.header__instagram {
  position: absolute;
  right: 6.94444vw;
  top: 54px;
  width: 22px;
  height: 22px;
  display: block;
  transition: opacity .3s ease;
}
.header__instagram svg { width: 100%; height: 100%; display: block; }
/* 🔴カーソルを合わせたら Instagram の色を出す（タクヤ指示 2026-08-13）。
   同じ形を2枚重ね、上（色つき）の濃さだけを動かす。
   ⚠️白→グラデーションに**塗りを差し替える**やり方では、じわっと変わらない
     （塗りの種類が変わる変化はブラウザが補間できない）。だから重ねている。
   ⚠️以前はカーソルで opacity:.6 に薄くしていた。色を見せるので薄くしない。 */
.header__instagram .ig-mono { fill: #f3f3f3; transition: opacity .25s ease; }
.header__instagram .ig-color { opacity: 0; transition: opacity .25s ease; }
.header__instagram:hover .ig-color { opacity: 1; }
/* ⚠️下の白は消す。残すと色に白が混ざってくすむ（Instagramの枠は中が抜けている）。 */
.header__instagram:hover .ig-mono { opacity: 0; }

@media only screen and (max-width:768px) {
  .header__instagram { top: 38px; right: 6vw; width: 20px; height: 20px; }
  /* 🔴横棒を消したことでスマホのナビが行方不明になる。ここで横並びに出す。
     参考サイトは display:none !important なので、同じ強さで打ち消す */
  .header__nav {
    display: block !important;
    position: absolute;
    left: 6vw;
    top: 62px;
    font-size: 12px;
  }
  /* 🔴スマホは**現在地だけ**を出す（タクヤ指示 2026-08-09）。
     行き先はハンバーガーにあるので、ここに全部並べると二重になる。
     ⚠️押せなくする（pointer-events:none）。いま居る所を押せても意味がない。
     ⚠️TOPでは何も出ない（現在地が付かないため）。狙いどおり。 */
  .header__nav__list { display: flex; gap: 0; }
  .header__nav__list li { padding-left: 0 !important; margin: 0 !important; }
  .header__nav__list li::before { content: none !important; }
  .header__nav a { display: none; pointer-events: none; }
  .header__nav a.is-current {
    display: inline-block; opacity: 1;
    font-family: "Prompt", var(--sans);
    font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  }
  /* 現在地は1つしか出ないので、下線は要らない（それ自体が現在地） */
  .header__nav a::after { content: none; }
  .top-header { top: calc(50% - 45px); }
}

/* スマホのフッターは「/」で区切る。参考サイトは最初の1つにしか
   区切りが入らず「InfoContact」とくっついたので、間すべてに入れる */
@media only screen and (max-width:768px) {
  .top-footer__links li + li:before { content: "/"; margin: 0 9px 0 6px; }
  .top-footer__links li:first-child:after { content: none; }
}

/* ── スクロールで画面を「入れ替える」（タクヤ指示 2026-08-08） ──────
   🔴下から出てくるのではない。各項目は画面いっぱいに固定されていて、
     その場で消えて/現れる。作品もその画面の中で完結する（下へ送らない）。 */
html, body { height: auto; overflow-x: hidden; overflow-y: auto; }
/* ⚠️参考サイトの body には padding-top: 365px が入っている（1画面固定の版面用）。
   残すと中身がずれる。TOPの要素は画面基準なので消しても位置は動かない */
body { padding-top: 0 !important; }

/* スクロールの長さを作るためだけの箱（見えない）。
   ⚠️1画面ずつ吸い付かせる。これが無いと中途半端な位置で止まり、
     「反応が悪い」と感じる（タクヤ指摘 2026-08-08） */
html { scroll-snap-type: y mandatory; }
.scroll-driver { width: 1px; opacity: 0; pointer-events: none; }
.scroll-driver .snap { height: 100vh; scroll-snap-align: start; }

.panel {
  position: fixed; inset: 0; z-index: 2;
  /* 🔴縦中央（justify-content:center）にすると、**中身が短い画面だけ
     下に寄る**（About が Works/Contact より150px下がった。タクヤ指摘 2026-08-08）。
     上から始めて、どの画面もラベルの位置を揃える。 */
  display: flex; flex-direction: column; justify-content: flex-start;
  /* ⚠️上は200px：左のナビ（〜172px）を避けるための最低ライン。
     🔴下も同じ200pxにする（タクヤ指示 2026-08-09「上下の感覚バランス」）。
       上200・下80のままだと、中身を真ん中に置いても
       上292px・下172px と目に見えて偏る（1440x900 で実測）。 */
  /* ⚠️200→150にしたら短くしすぎた（タクヤ指摘）。176で落ち着かせる。 */
  padding: 176px 6.94444vw 176px;
  opacity: 0; visibility: hidden;
  /* 🔴ただ消えて現れるだけだと「ぱっと変わった」に見える（タクヤ指摘 2026-08-08）。
     送った向きに合わせて少し流し、**移動している**ように見せる。
     ⚠️大きく動かすと「下から出てくる」作りに戻ってしまうので 5vh まで。 */
  transform: translateY(var(--enter, 5vh));
  transition: opacity .55s ease, visibility .55s ease,
              transform .85s cubic-bezier(.22,.61,.36,1);
}
.panel.is-on { opacity: 1; visibility: visible; transform: none; }
/* 🔴パネルごとの暗幕はやめた（タクヤ指摘 2026-08-09
   「ワークスから次の項目に行くとき背景の黒が一瞬はずれる」）。
   面を送るとき2枚が同時に半透明になるので、重ねても元の濃さに届かない。
     78%の幕を2枚とも50%にすると、透ける量は22%→37%。
     実測でも切り替えの最中だけ明るさ 3〜4 → 14.3 に上がっていた。
   暗幕は**パネルから切り離して1枚だけ**にする（.scrim）。
   ⚠️パネル側に背景を戻さないこと。戻すと同じことが起きる。 */
.panel::before { content: none; }

/* 面（TOP以外）に入っている間だけ出す1枚の暗幕。
   ⚠️パネルは z-index:2、映像は 0。その間の 1 に置く。
   ⚠️濃さは 0.78 のまま。切り替え中も濃さが変わらないのがこの作りの狙い。 */
.scrim {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(0,0,0,.78);
  opacity: 0; transition: opacity .5s ease;
}
body.is-inner .scrim { opacity: 1; }

.sec__label { font-family: Prompt, sans-serif; font-size: 11px;
  letter-spacing: .2em; opacity: .55; margin-bottom: 22px; }
.sec__title { font-family: "Syne", sans-serif; font-weight: 800;
  font-size: clamp(26px, 3.4vw, 44px); letter-spacing: .01em;
  margin-bottom: 34px; }

/* 🔴入りは上から順、出は下から順（同じ順だと戻ったとき不自然） */
[data-in] {
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1),
              transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--n, 0) * 55ms);
}
.panel.is-on [data-in] {
  opacity: 1; transform: none;
  transition-delay: calc(var(--i, 0) * 100ms);
}
body.no-anim [data-in] { opacity: 1; transform: none; transition: none; }

/* 🔴TOPの要素は参考サイトでは position:absolute だった。
   そのままだと**スクロールで一緒に上へ流れてしまい**、他の項目（fixed）と
   挙動が揃わない（タクヤ指摘「topのスクロールだけ前のまま」2026-08-08）。
   画面に貼り付けて、他と同じく「その場で消える」ようにする。 */
.top-header, .top-footer { position: fixed !important; }
/* TOPの要素も同じように流す。1枚目だけ止まっていると違和感が出る */
.top-header, .top-footer {
  transition: opacity .5s ease, visibility .5s ease,
              transform .85s cubic-bezier(.22,.61,.36,1);
}
.top-header.is-gone, .top-footer.is-gone {
  opacity: 0; visibility: hidden;
  transform: translateY(var(--leave, -5vh));
}

/* 背景（映像とノイズ）もわずかに動かすと、画面が移動している感じが強くなる。
   ⚠️1.5vh だけ。動かしすぎると映像が跳ねて見える */
.top-background-video, #bgcanvas {
  transition: transform .9s cubic-bezier(.22,.61,.36,1);
}
body.is-inner .top-background-video,
body.is-inner #bgcanvas { transform: translateY(-1.5vh); }
.header__nav a { opacity: .55; transition: opacity .3s ease; }
.header__nav a:hover, .header__nav a.is-current { opacity: 1; }

/* ⚠️作品はその画面に収める。高さは vh で決める */
/* ⚠️件数が増えても1画面に収める。列は幅に応じて自動で増やし、
   高さは vh で決める（10件なら 5列×2段）。 */
.works-grid {
  display: grid; gap: 20px 18px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  /* 🔴見出しと番号を消したので、上に寄って下が大きく空いた
     （タクヤ指摘 2026-08-09「消えた分バランスとって」）。
     残りの高さいっぱいに広げて、段を**縦の真ん中**に置く。
     ⚠️段が埋まらない時（作品が少ない時）の見え方のための指定。
       埋まっていれば見た目は変わらない。 */
  flex: 1 1 auto; align-content: center;
}
/* 🔴題名を消して画像だけにした（タクヤ指示 2026-08-09）。
   文字が無くなった分、押せることが伝わらないので、
   触れたら少し持ち上げて明るくする。 */
/* 🔴触れた作品が**ぼける**（タクヤ指示 2026-08-09）。
   ⚠️ぼかすと縁が透けて下地が見えるので、少し拡大して縁を外へ逃がす。
     figure 側を overflow:hidden にして、はみ出た分は切る。
   ⚠️触れられない端末（スマホ）には掛からない。hover の指定なので。 */
.works-grid figure { margin: 0; min-width: 0; cursor: pointer;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.works-grid figure:hover { transform: translateY(-4px); }
.works-grid figure img, .works-grid figure video {
  transition: filter .4s ease, transform .5s cubic-bezier(.22,.61,.36,1),
              opacity .4s ease;
}
.works-grid figure:hover img, .works-grid figure:hover video {
  filter: blur(6px); transform: scale(1.12); opacity: .8;
}
.works-grid img, .works-grid video {
  width: 100%; height: 19vh; object-fit: cover; display: block; background: #0c0c0c; }
.info-list { font-size: 13px; line-height: 2.4; letter-spacing: .06em; }
.info-list a { border-bottom: 1px solid rgba(243,243,243,.35); }

@media only screen and (max-width:768px) {
  /* 🔴左右をそろえる（タクヤ指摘 2026-08-09「全体的に右による」）。
     About だけ左に逃がすつもりで入れた padding-left:12vw が
     **全パネルに掛かっていた**（左47px 対 右23px）。
     左端の SCROLL 案内は 6〜21px にいるので、7vw(27px) あれば当たらない。 */
  /* ⚠️上下は同じ値にする。130/100 だと差30pxで目に見えて偏る。
     現在地の表示が〜80pxなので、115pxなら35pxの逃げがある。 */
  .panel { padding: 115px 7vw 115px; }

  /* 🔴コンタクトは**ヘッダーより下**で中央にする（タクヤ指示 2026-08-10
     「上に寄って見える」）。
     画面全体の中央に置くと、上はロゴと現在地表示（〜80px）で埋まって
     いるぶん、目には上に詰まって見える。面の上端を頭の下に下ろして、
     残りの空きの真ん中に置く。
     ⚠️他の面には入れない。ワークスは中を送る作りなので上端を動かすと
       送れる量が変わる。 */
  #contact {
    top: 84px;
    /* ⚠️上下の数値は「見た目の空きが同じ」になるよう実測で決めた。
       44→28（2026-08-10 実測：上と下が16pxずれていたため）。 */
    padding-top: 24px;
    padding-bottom: 28px;
  }

  /* 🔴横に流す形はやめた（タクヤ指摘 2026-08-09）。
     ・払えることに気づかれず、1件しか見られないまま終わる
     ・縦に払うと画面が変わるので、操作がぶつかる
     2列で並べて「何件あるか」が一目で分かるようにする。
     ⚠️7件目からはページ送り（works.js が1ページ6件にしている） */
  .works-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 14px 12px; overflow: visible;
  }
  .works-grid figure { flex: none; }
  /* 🔴作品を大きく見せる（タクヤ指示 2026-08-09）。
     見出しを消して空いた分、12vh → 19vh に。
     390幅なら枠は約162x160でほぼ正方形になる。
     ⚠️段数は works.js が測って決めるので、ここを変えるだけでよい
       （大きくすると1ページの件数は自動で減る）。 */
  .works-grid img, .works-grid video { height: 19vh; }
  /* 🔴ページ送りは**インスタのアイコンと同じ高さ**に置く（タクヤ指示 2026-08-09）。
     .panel が position:fixed なので、ここを基準に下から測れる。
     アイコンは bottom:30px・20px角 → 中心は画面下から40px。
     ページ送りは高さ30px → bottom:25px にすると中心が同じ40pxになる。
     ⚠️アイコン側（.header__instagram の bottom:30px）を変えたらここも直す。
     ⚠️流れから外れるので、作品が下まで伸びると重なる。
       .panel の padding-bottom(100px) が効いているうちは当たらない。 */
  .works-pager { left: 7vw; right: 7vw; bottom: 25px; }
}

/* ══ 書体（タクヤ指示 2026-08-08）════════════════════════════════
   🔴**必ずこのファイルの一番最後に置く。**
     参考サイトのCSSが各所で明朝を指定しているので、前に置くと負ける
     （一度それで .sec__title が Syne のまま残った）。
   ・明朝は使わない。土台は Noto Sans JP
   ・見出しは Archivo（角のはっきりしたグロテスク）。
     Syne は癖が強すぎるという指摘で差し替えた
   ・小さいラベル類は Prompt のまま
   別候補：Oswald（縦長で強い）／Outfit（丸い幾何学）／Anton（極太・販促寄り） */
:root {
  --sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont,
          "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}
body, body * { font-family: var(--sans); }

/* 2026-08-08：Archivo → Anton（タクヤ指示）。極太で販促物寄りの迫力。
   ⚠️Anton は太さが1種類しかないので font-weight は効かない */
.sec__title   { font-family: "Anton", var(--sans); font-weight: 400;
                letter-spacing: .01em; }
/* ⚠️この行は①より後ろにあり、同じ強さなので**こちらが勝つ**。
   ロゴの書体を変えるときは必ず両方直すこと。 */
.header__title{ font-family: "Unbounded", var(--sans); font-weight: 700; }
/* 🔴ロゴ画像は**スマホだけ**（タクヤ指示 2026-08-11「pc版は変えなくていい」）。
   PCは今までどおり文字（Unbounded）のまま。
   ⚠️両方をHTMLに置いて、表示を切り替える形にしてある。
     画像だけにするとPCが変わり、文字だけにするとスマホが変わる。
   ⚠️高さで決める。幅で決めると図柄の縦横比が変わったときに崩れる。
   ⚠️display:block を付けないと、画像の下に文字の下ずれ分の隙間ができる。 */
.header__logo { display: none; }
@media only screen and (max-width: 768px) {
  .header__title-text { display: none; }
  /* 🔴少し小さく（タクヤ指示 2026-08-13）。28px → 24px
     ⚠️Instagram のアイコン（20px）と並ぶので、これより小さくすると
       屋号の方が脇役に見える。24px あたりが下限の目安。 */
  .header__logo { display: block; height: 24px; width: auto; }
}
.sec__label,
.works-grid .cat,
.top-footer__links,
.top-footer__copyright { font-family: "Prompt", var(--sans); }

/* ── 左端中央のスクロール案内（タクヤ指示 2026-08-08） ──────────
   縦書きの SCROLL と、その下に落ちていく矢印。
   ⚠️左のメニュー（6.94vw）より内側に置くと重なるので、その手前に出す。
   ⚠️最後の画面では消す（これ以上送れないのに案内が出ていると嘘になる）。 */
.scroll-hint {
  position: fixed;
  left: 2.4vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
  transition: opacity .5s ease;
}
.scroll-hint__text {
  writing-mode: vertical-rl;
  font-family: "Prompt", var(--sans);
  font-size: 10px;
  letter-spacing: .34em;
  opacity: .6;
}
/* 矢印：細い縦線が上から下へ流れる */
.scroll-hint__arrow {
  position: relative;
  width: 1px;
  height: 54px;
  background: rgba(243,243,243,.22);
  overflow: hidden;
}
.scroll-hint__arrow::after {
  content: "";
  position: absolute;
  left: 0; top: -54px;
  width: 1px; height: 54px;
  background: linear-gradient(to bottom, transparent, #f3f3f3);
  animation: scrollflow 2.2s cubic-bezier(.65,.05,.36,1) infinite;
}
@keyframes scrollflow {
  0%   { transform: translateY(0); }
  100% { transform: translateY(108px); }
}
body.is-last .scroll-hint { opacity: 0; }
body.no-anim .scroll-hint__arrow::after { animation: none; top: 0; }

@media only screen and (max-width:768px) {
  .scroll-hint { left: 1.5vw; gap: 10px; }
  .scroll-hint__arrow { height: 40px; }
  @keyframes scrollflow { 0% { transform: translateY(0); }
                          100% { transform: translateY(80px); } }
}

/* ── ざらつき（タクヤ指示 2026-08-08） ─────────────────────────
   映像の上に薄い粒子を乗せて、質感を足す。
   ⚠️SVGのノイズを1枚敷いて位置をずらすだけ。**毎フレーム描画しない**ので軽い。
   ⚠️「トップに少し」なので、2枚目以降（body.is-inner）では消す。
   ⚠️pointer-events:none。触れると下のリンクが押せなくなる */
.grain {
  position: fixed; inset: -120px;
  z-index: 3;
  pointer-events: none;
  opacity: .085;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  animation: grainmove 1.1s steps(1) infinite;
  transition: opacity .5s ease;
}
@keyframes grainmove {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-18px, 12px); }
  40%  { transform: translate(14px, -16px); }
  60%  { transform: translate(-12px, -10px); }
  80%  { transform: translate(16px, 14px); }
  100% { transform: translate(0, 0); }
}
body.is-inner .grain { opacity: 0; }
body.no-anim .grain { animation: none; }

/* ── スマホ：右上ハンバーガー／右下SNS（タクヤ指示 2026-08-08） ─────── */
/* 🔴PCでは両方とも出さない。
   ⚠️`.drawer` の指定をスマホ用のブロックにしか書かないと、**PCでは
     素の <nav> として中身がそのまま並んで見える**（2026-08-08 実際にそうなった）。
     隠すのは必ずブロックの外に書くこと。 */
.burger { display: none; }
.drawer { display: none; }

@media only screen and (max-width:768px) {
  /* 🔴行き先はハンバーガーに入れたまま（タクヤ指示 2026-08-09）。
     ただし見出しを消したので、**いまどこにいるか**だけは常に出す。
     やり方は上の .header__nav のブロック：ナビは出すが
     「現在地の項目1つ」しか見せず、押せなくしてある。
     ⚠️ナビを全部出すと、同じ行き先がハンバーガーと二重になる
       （「infoが2つある」「コンタクト2つある」と同じ指摘を招く）。 */
  .burger {
    display: block; position: fixed; z-index: 9;
    /* 🔴屋号と高さを揃える（タクヤ指摘 2026-08-08）。
       屋号は中心44px。高さ20pxのボタンなので top は 44-10=34。
       ⚠️屋号の文字サイズを変えたら、この数字も合わせ直すこと。 */
    top: 34px; right: 5vw;
    width: 30px; height: 20px;
    background: none; border: 0; padding: 0; cursor: pointer;
    pointer-events: auto;
  }
  /* 🔴線は絶対配置で置く。
     ⚠️以前は block を積んで transform でずらしていたが、
       **2本目が枠の外（24px／枠は22px）に出ていた**（2026-08-08 実測）。
     ⚠️高さは 1.5px にしない。半端な値は端末によってにじみ、
       片方だけ太く見える（タクヤ指摘）。整数にする。 */
  .burger span {
    position: absolute; right: 0;
    height: 2px; background: #f3f3f3;
    transition: transform .35s cubic-bezier(.22,.61,.36,1),
                width .35s ease, top .35s ease;
  }
  .burger span:nth-child(1) { top: 4px;  width: 100%; }
  .burger span:nth-child(2) { top: 13px; width: 58%; }   /* 2本目は短く */

  /* ×にするときは2本とも同じ中心・同じ長さ */
  body.menu-open .burger span { top: 9px; width: 100%; }
  body.menu-open .burger span:nth-child(1) { transform: rotate(45deg); }
  body.menu-open .burger span:nth-child(2) { transform: rotate(-45deg); }

  /* 🔴メニューを開いても屋号は見えるようにする（タクヤ指示 2026-08-08）。
     ⚠️子だけ z-index を上げても出られない。`.header` が重なり順の親（fixed）
       なので、**親ごと上げる**必要がある（一度これで屋号が暗いままだった）。
     ⚠️上げると全幅のヘッダーがメニューの上に乗って触れなくなるので、
       クリックは通す。押せるのはハンバーガーと屋号だけにする。 */
  body.menu-open .header { z-index: 8; pointer-events: none; }
  body.menu-open .header__title { opacity: 1; pointer-events: auto; }
  .burger { z-index: 9; pointer-events: auto; }

  .drawer {
    display: flex;
    position: fixed; inset: 0; z-index: 6;
    /* 🔴真っ黒で覆わず**ぼかす**（タクヤ指示 2026-08-08）。
       ⚠️backdrop-filter が効かない端末では素通しになって字が読めない。
         下地の黒を .55 残しておくと、効かない場合でも読める。 */
    background: rgba(0,0,0,.55);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    backdrop-filter: blur(18px) saturate(120%);
    align-items: center; justify-content: flex-start;
    padding: 0 6vw;
    opacity: 0; visibility: hidden;
    transition: opacity .4s ease, visibility .4s ease;
  }
  body.menu-open .drawer { opacity: 1; visibility: visible; }

  /* ── 項目の出方（作り直し・タクヤ指示 2026-08-08）────────────
     🔴前の案（線を引く→文字が立ち上がる→番号）は取り消した。
       ・閉じるときに線が縮んで文字が落ちる動きが不自然だった
       ・番号は不要との判断
     ⚠️線は**動かさず常に引いておく**。動かすと開閉のたびに落ち着かない。
     ⚠️文字は「字間が詰まりながらピントが合う」。
       サイト全体で使っている ぼけ→くっきり と同じ言語なので浮かない。 */
  /* 🔴文字は中央（タクヤ指示 2026-08-10）。
     ⚠️字間(letter-spacing)は最後の字の**右側にも**入るので、
       そのままだと左に寄って見える。同じ量を text-indent で戻す。 */
  .drawer__list { text-align: center; width: 100%; }
  .drawer__list li { margin: 0; border-top: 1px solid rgba(243,243,243,.16); }
  /* 🔴線で囲むのは**行き先の4つだけ**（タクヤ指示 2026-08-10）。
     ⚠️下の線は最後の行ではなく**Contactの下**に引く。最後（SNS）に
       引くと、SNSまで同じ並びの一員に見える。
     ⚠️以前はSNSの上に18pxの隙間＋線があり、そこだけ間隔が広かった。 */
  .drawer__list li:nth-last-child(2) {
    border-bottom: 1px solid rgba(243,243,243,.16);
  }
  /* ⚠️SNSは線を持たない。サイトの外へ出るので並びから外して見せる */
  .drawer__list li:has(.drawer__sns) { border: 0; margin-top: 26px; }
  /* 🔴メニューを開いている間は現在地表示を消す（タクヤ指示 2026-08-10）。
     ⚠️引き出しの中に行き先が全部出ているので、後ろに残っていると二重になる。
     ⚠️SNSアイコンと同じ速さ（.25s・待たない）。開いた瞬間に消す。
     ⚠️`!important` が付いた位置指定（top）が後ろにあるが、
       こちらは opacity なのでぶつからない。 */
  body.menu-open .header__nav {
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease 0s;
  }

  /* SNSはロゴ。⚠️高さは指で押せる44pxを確保する。
     ⚠️`.drawer__list a`（0,1,1）の display:block に負けるので、
       こちらも同じ強さ以上で書く。`.drawer__sns` だけだと**左に寄る**。 */
  .drawer__list a.drawer__sns {
    display: flex; align-items: center; justify-content: center;
    min-height: 60px; padding: 0 !important;
  }
  /* 🔴ロゴは大きく（タクヤ指示 2026-08-10）。24px → 34px */
  .drawer__list a.drawer__sns svg {
    width: 34px; height: 34px; display: block;
  }
  /* ヘッダーと同じ作り。⚠️スマホは指で触るのでカーソルは基本乗らないが、
     PCで幅を狭めた時のために揃えておく。 */
  .drawer__list a.drawer__sns .ig-mono { fill: #f3f3f3; transition: opacity .25s ease; }
  .drawer__list a.drawer__sns .ig-color { opacity: 0; transition: opacity .25s ease; }
  .drawer__list a.drawer__sns:hover .ig-color { opacity: 1; }
  .drawer__list a.drawer__sns:hover .ig-mono { opacity: 0; }

  .drawer__list a {
    font-family: "Anton", var(--sans);
    font-size: 26px;
    display: block; padding: 20px 2px;
    text-indent: .05em;
    opacity: 0;
    letter-spacing: .42em;
    filter: blur(8px);
    transition: opacity .55s ease,
                letter-spacing .7s cubic-bezier(.22,.61,.36,1),
                filter .6s ease;
  }
  body.menu-open .drawer__list a {
    opacity: 1; letter-spacing: .05em; filter: blur(0);
  }
  /* 🔴遅れは**開く時だけ**（タクヤ指摘 2026-08-10「閉じたときの挙動がおかしい」）。
     ⚠️以前は遅れが閉じる時にも掛かっていた。幕は0.47秒で消えるのに
       項目は1秒近く動き続け、順番もばらばらに見えていた（実測）。
     ⚠️5番目（SNSのロゴ）にも遅れを付ける。付けないとここだけ先に出る。 */
  /* ⚠️薄さは**開いている時だけ**にする。素の指定に書くと
     `.drawer__list a { opacity:0 }` に勝ってしまい、
     閉じても .72 のまま残る（幕で見えないだけの状態になる）。 */
  body.menu-open .drawer__list a.drawer__sns { opacity: .72; }
  /* ⚠️薄いままだと Instagram の色がくすむ。触れている間だけ濃さを戻す。 */
  body.menu-open .drawer__list a.drawer__sns:hover { opacity: 1; }

  body.menu-open .drawer__list li:nth-child(1) a { transition-delay: .05s; }
  body.menu-open .drawer__list li:nth-child(2) a { transition-delay: .13s; }
  body.menu-open .drawer__list li:nth-child(3) a { transition-delay: .21s; }
  body.menu-open .drawer__list li:nth-child(4) a { transition-delay: .29s; }
  body.menu-open .drawer__list li:nth-child(5) a { transition-delay: .37s; }
  /* 🔴閉じる時は**すっと薄くなるだけ**（タクヤ指示 2026-08-10
     「閉じるときもフェードがいい」）。
     ⚠️字間とぼかしは**消えきってから**元に戻す（0秒＋.38s待ち）。
       一緒に動かすと、消える途中で字が広がってぼけ、
       「もう一度開いた」ように見える。
     ⚠️戻す動作自体は残す。消さないと次に開く時、
       字間が詰まる動き（.42em→.05em）が始まらない。
     ⚠️幕は .4s。項目(.38s)が先に消え終わるようにしてある。 */
  body:not(.menu-open) .drawer__list a {
    /* ⚠️戻す時刻は**幕が完全に消えた後**（幕は opacity/visibility とも .4s）。
       .38s だと幕の消え際と重なり、端末が重い時に
       「字が離れながら閉じる」のが見えた（タクヤ指摘 2026-08-10）。
       0.5s まで待たせて、確実に隠れてから戻す。 */
    transition: opacity .3s ease,
                letter-spacing 0s linear .5s,
                filter 0s linear .5s;
  }

  body.no-anim .drawer__list a {
    opacity: 1; letter-spacing: .05em; filter: none; transition: none;
  }

  /* SNSは右下へ。⚠️メニューを開いている間は隠す（重なって押しにくい） */
  .header__instagram {
    position: fixed; z-index: 5;
    top: auto; bottom: 30px; right: 6vw;
    width: 20px; height: 20px;
    transition: opacity .3s ease;
  }
  /* ⚠️消える側は待たせない。出るときだけ1.5秒待つ */
  /* 🔴`.is-loaded` を必ず一緒に書く（タクヤ指摘 2026-08-10「消えてない」）。
     ⚠️後ろの方に `body.is-loaded .header__instagram { opacity: 1 }` があり、
       強さが同じだと**後に書いた方が勝つ**。クラスを1つ足して強くする。
       ここのクラスを減らすと、また消えなくなる。 */
  body.menu-open.is-loaded .header__instagram,
  body.menu-open .header__instagram {
    opacity: 0; pointer-events: none; transition: opacity .3s ease 0s;
  }
  /* 🔴TOP以外では出さない（タクヤ指示 2026-08-10）。行き先は引き出しの中。
     ⚠️狭い画面で、常に出ている物を減らすため。作品や文章に重なりやすい。 */
  body.is-inner.is-loaded .header__instagram,
  body.is-inner .header__instagram {
    opacity: 0; pointer-events: none; transition: opacity .3s ease 0s;
  }

  /* SCROLL案内とフッターがSNSと当たらないように少しだけ逃がす */
  .top-footer { bottom: 34px; }

  /* 🔴中央のロゴと肩書きが右寄せだった（参考サイトのスマホCSSが
     text-align:right / margin:0 0 0 auto だったため）。真ん中に揃える。 */
  /* ⚠️中央に寄せるのは**ロゴだけ**（タクヤ指示 2026-08-08）。
     肩書き3行は参考サイトどおり右寄せのまま。一度まとめて中央にして戻した。 */
  .top-header { text-align: center !important; }
  .top-header__body { display: inline-block; margin: 0 auto !important; }
  /* 🔴肩書き3行の位置は**元のまま**（タクヤ指示 2026-08-10「2つ前に戻して」）。
     18px→36pxと下げたが、どちらも採用せず元に戻した。
     ⚠️元の作りは margin-top:-5px で、署名と5px重なる。これで正しい。
       下げたくなったら、ここに margin-top を足す。 */
  .top-header__message { text-align: right !important; }
  /* ⚠️肩書きと5px重なるのは**元からの作り**（負の余白）。
     差し替え前の署名でも同じ値だった。詰める必要はない。 */
  .top-header__autograph {
    width: 74vw;
    margin: 0 auto !important;
    object-position: center center;
  }
}


/* ══ サイドバー（タクヤ指示 2026-08-08）════════════════════════════
   ばらばらに置いていた屋号・メニュー・連絡先を、1本の柱としてまとめる。
   ⚠️スマホでは柱を出さない（ハンバーガーに入っているため）。 */
@media only screen and (min-width:769px) {
  /* 柱の右端に細い線。これだけで「欄」に見える */
  body::before {
    content: ""; position: fixed; z-index: 4;
    left: 20.5vw; top: 8vh; bottom: 8vh; width: 1px;
    background: linear-gradient(to bottom,
      transparent, rgba(243,243,243,.16) 18%,
      rgba(243,243,243,.16) 82%, transparent);
    pointer-events: none;
    transition: opacity .5s ease;
  }
  /* 🔴TOP画面だけに出す（タクヤ指摘「縦線なに？！」2026-08-08）。
     この線は「左に列がある」ことを示すもの。2枚目以降は中身が横いっぱいに
     広がるので、そこに縦線があるとContactのフォームなどを横切るだけになる。 */
  body.is-inner::before { opacity: 0; }
  .header__nav__list li { position: relative; padding-left: 26px; margin: 3px 0; }
  /* 番号を振ると、何枚のサイトか一目で分かる */
  .header__nav__list li::before {
    content: "0" counter(navnum); counter-increment: navnum;
    position: absolute; left: 0; top: .18em;
    font-family: "Prompt", var(--sans); font-size: 9px;
    letter-spacing: .1em; opacity: .38;
  }
  .header__nav__list { counter-reset: navnum; }
  /* 現在地は短い線で示す */
  .header__nav a { position: relative; }
  .header__nav a::after {
    content: ""; position: absolute; left: -26px; bottom: -3px;
    width: 0; height: 1px; background: #f3f3f3;
    transition: width .35s cubic-bezier(.22,.61,.36,1);
  }
  .header__nav a.is-current::after { width: 18px; }
}

/* ══ 作品の拡大表示（別ページにしない）════════════════════════════
   ⚠️3件しかないのに別ページを作ると、切り替えの世界観が途切れるうえ
     ファイルが増える。**同じ画面の中で拡大する**方式にした。 */
.viewer {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(0,0,0,.93);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
}
body.viewer-open .viewer { opacity: 1; visibility: visible; }
.viewer__stage { max-width: 74vw; max-height: 66vh; }
.viewer__stage img, .viewer__stage video {
  max-width: 74vw; max-height: 66vh; width: auto; height: auto; display: block;
}
.viewer__meta {
  position: absolute; left: 6.94444vw; bottom: 7vh;
  font-size: 12px; line-height: 1.9; letter-spacing: .04em;
}
.viewer__title { font-size: 15px; }
.viewer__cat, .viewer__count {
  font-family: "Prompt", var(--sans); font-size: 10px;
  letter-spacing: .16em; opacity: .5;
}
.viewer__close, .viewer__nav {
  position: absolute; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 0;
}
.viewer__close { top: 26px; right: 6vw; }
.viewer__close::before, .viewer__close::after {
  content: ""; position: absolute; left: 10px; top: 21px;
  width: 24px; height: 2px; background: #f3f3f3;
}
.viewer__close::before { transform: rotate(45deg); }
.viewer__close::after  { transform: rotate(-45deg); }
.viewer__nav { top: 50%; margin-top: -22px; }
.viewer__nav--prev { left: 3vw; }
.viewer__nav--next { right: 3vw; }
.viewer__nav::before {
  content: ""; position: absolute; left: 15px; top: 14px;
  width: 14px; height: 14px;
  border-top: 2px solid #f3f3f3; border-right: 2px solid #f3f3f3;
}
.viewer__nav--next::before { transform: rotate(45deg); }
.viewer__nav--prev::before { transform: rotate(-135deg); left: 17px; }
.viewer__close:hover, .viewer__nav:hover { opacity: .55; }
.works-grid figure { cursor: pointer; }

/* ══ Contact 画面 ═══════════════════════════════════════════════ */
.contact__lead { font-size: 13px; line-height: 2.1; letter-spacing: .05em;
  margin-bottom: 34px; }
.contact__mailrow { display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; margin-bottom: 34px; }
.contact__mail {
  font-family: "Anton", var(--sans);
  font-size: clamp(20px, 2.6vw, 34px); letter-spacing: .01em;
  border-bottom: 1px solid rgba(243,243,243,.35); padding-bottom: 4px;
}
.contact__copy {
  font-family: "Prompt", var(--sans); font-size: 10px; letter-spacing: .18em;
  color: #f3f3f3; background: none; cursor: pointer;
  border: 1px solid rgba(243,243,243,.35); border-radius: 2px;
  padding: 7px 14px; transition: background .3s ease, color .3s ease;
}
.contact__copy:hover { background: #f3f3f3; color: #000; }
.contact__copy.is-done { background: #f3f3f3; color: #000; }
.contact__list { font-size: 12px; line-height: 2.4; letter-spacing: .05em; }
.contact__list span {
  display: inline-block; width: 62px;
  font-family: "Prompt", var(--sans); font-size: 10px;
  letter-spacing: .16em; opacity: .5;
}
.contact__list a { border-bottom: 1px solid rgba(243,243,243,.35); }

@media only screen and (max-width:768px) {
  .viewer__stage, .viewer__stage img, .viewer__stage video {
    max-width: 86vw; max-height: 56vh;
  }
  .viewer__meta { left: 6vw; bottom: 10vh; }
  .viewer__nav--prev { left: 0; }
  .viewer__nav--next { right: 0; }
  .contact__mailrow { gap: 12px; }
}

/* ══ カテゴリのタブ（タクヤ指示 2026-08-08）══════════════════════
   ⚠️0件のカテゴリは JS が隠す。押して何も出ないタブは置かない。 */
.works-tabs {
  display: flex; flex-wrap: wrap; gap: 22px;
  /* ⚠️以前は -18px。見出しの下に詰めるための値だった。
     見出しを消した今そのままにすると、左のナビ（〜172px）に食い込む。 */
  margin: 0 0 30px;
}
.works-tab {
  background: none; border: 0; padding: 0 0 5px; cursor: pointer;
  color: #f3f3f3; opacity: .45;
  font-family: "Prompt", var(--sans); font-size: 10px; letter-spacing: .16em;
  position: relative;
  transition: opacity .3s ease;
}
.works-tab::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: #f3f3f3;
  transition: width .35s cubic-bezier(.22,.61,.36,1);
}
.works-tab:hover { opacity: .8; }
.works-tab.is-active { opacity: 1; }
.works-tab.is-active::after { width: 100%; }

/* ── ホバー：赤い線が左から伸びる（タクヤ選択 2026-08-13「B」）─────────
   これまでは、どのリンクも「薄くなる／濃くなる」だけで触った手応えが無かった。
   ⚠️赤は**新しく足した色ではない**。署名と必須マークで既に使っている #d8342f。
   ⚠️線を引く場所は要素ごとに違う。既に ::after が埋まっている所があるため：
       縦ナビ     … ::after は**現在地の短い線**（left:-26px）→ ::before を使う
       カテゴリ   … ::after は**選択中の下線**            → ::before を使う
       メール/DM  … 空いている                            → ::after を使う
   ⚠️現在地・選択中には出さない。既に白い線があるので二重になる。
   ⚠️指で触る機械には当てない。タップで出た線が残り、消し方が無くなる。 */
@media (hover: hover) and (pointer: fine) {
  .header__nav a, .works-tab, .cform__alt-btn { position: relative; }

  .header__nav a:not(.is-current)::before,
  .works-tab:not(.is-active)::before,
  .cform__alt-btn::after {
    content: ""; position: absolute; left: 0; bottom: -3px;
    width: 100%; height: 1px; background: #d8342f;
    transform: scaleX(0); transform-origin: left;
    transition: transform .42s cubic-bezier(.22,.61,.36,1);
    pointer-events: none;
  }
  /* ⚠️カテゴリとメールは**すでに線がある位置**に重ねる。3px下だと二本に見える。 */
  .works-tab:not(.is-active)::before { bottom: 0; }
  .cform__alt-btn::after { bottom: -1px; }

  .header__nav a:not(.is-current):hover::before,
  .works-tab:not(.is-active):hover::before,
  .cform__alt-btn:hover::after { transform: scaleX(1); }

  /* 線と一緒に文字も濃くする。線だけだと「触った」感が弱い。 */
  .works-tab:hover { opacity: .9; }
}
/* ⚠️メールとDMの下線は**灰色のまま**にする（2026-08-13）。
   白くすると、上に重ねた赤い線と喧嘩して色が濁って見える。 */
.cform__alt-btn:hover { opacity: 1; }

/* 絞り込みで消える作品。⚠️display:none だと詰まって見えるので、
   まず薄くしてから場所を空ける */
.works-grid figure.is-hidden {
  display: none;
}
.works-grid { transition: opacity .25s ease; }
.works-grid.is-swapping { opacity: 0; }

@media only screen and (max-width:768px) {
  .works-tabs { gap: 14px; margin: 0 0 20px; }
  .works-tab { font-size: 9px; letter-spacing: .12em; }
}

/* ══ 問い合わせフォーム（タクヤ指示 2026-08-08）════════════════════
   ⚠️項目は少なく。長いフォームは書き始める前に離脱される。
     必須は3つ（名前・メール・内容）だけにした。 */
.cform { max-width: 780px; }
.cform__row { display: flex; gap: 26px; flex-wrap: wrap; }
.cform__f { display: block; flex: 1 1 260px; margin-bottom: 20px; }
.cform__f--wide { flex-basis: 100%; }
.cform__f > span {
  display: block; margin-bottom: 7px;
  font-family: "Prompt", var(--sans); font-size: 10px;
  letter-spacing: .16em; opacity: .55;
}
.cform__f i { font-style: normal; color: #d8342f; }
.cform input, .cform select, .cform textarea {
  width: 100%; color: #f3f3f3; background: rgba(255,255,255,.04);
  border: 0; border-bottom: 1px solid rgba(243,243,243,.28);
  padding: 9px 2px; font-size: 13px; font-family: var(--sans);
  transition: border-color .3s ease, background .3s ease;
  /* 🔴スマホ（特にiPhone）は入力欄を**端末の見た目**で描く。
     角の丸い枠が勝手に付く（タクヤ指摘 2026-08-09）。
     端末任せをやめて、こちらの見た目に統一する。
     ⚠️appearance を切ると選択欄の矢印も消えるので、下で描き直している。 */
  -webkit-appearance: none; appearance: none;
  border-radius: 0;
}

/* 選択欄の矢印（端末のものが消えるので自分で置く）。
   ⚠️background の指定はここが後。上の色より後ろに書かないと消える。 */
.cform select {
  padding-right: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23f3f3f3' stroke-opacity='0.55' stroke-width='1.4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 11px 8px;
}
.cform textarea { resize: vertical; line-height: 1.8; }
.cform input:focus, .cform select:focus, .cform textarea:focus {
  outline: none; border-bottom-color: #f3f3f3; background: rgba(255,255,255,.07);
}
.cform ::placeholder { color: rgba(243,243,243,.3); }
.cform select option { background: #111; }
.cform .is-bad { border-bottom-color: #d8342f; }

/* ⚠️人には見せない。位置を画面外にする（display:none だと
   自動入力プログラムに見抜かれやすい） */
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; }

.cform__foot { display: flex; align-items: center; gap: 22px;
  flex-wrap: wrap; margin-top: 8px; }
.cform__send {
  /* ⚠️日本語なので Prompt では出ない。土台の書体にする */
  font-family: var(--sans); font-size: 13px; letter-spacing: .12em;
  display: inline-flex; align-items: center; gap: 12px;
  color: #f3f3f3; background: none; cursor: pointer;
  border: 1px solid rgba(243,243,243,.4); border-radius: 2px;
  padding: 13px 28px; transition: background .3s ease, color .3s ease;
}
/* 右向きの矢印。押すと少し進む */
.cform__send::after {
  content: ""; width: 8px; height: 8px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .3s ease;
}
.cform__send:hover { background: #f3f3f3; color: #000; }
.cform__send:hover::after { transform: rotate(45deg) translate(2px, -2px); }
.cform__send[disabled] { opacity: .4; cursor: default; }
.cform__note { font-size: 11px; opacity: .55; }

/* フォーム以外の連絡先。
   PCは文字のまま控えめに、スマホは**指で押せる帯**にする。 */
.cform__alt { display: flex; align-items: baseline; gap: 14px;
  flex-wrap: wrap; font-size: 11px; }
.cform__alt-lead { opacity: .5; }
.cform__alt-btn {
  font-size: 11px; opacity: .8;
  border-bottom: 1px solid rgba(243,243,243,.35); padding-bottom: 2px;
  transition: opacity .3s ease, border-color .3s ease;
}
.cform__note a { border-bottom: 1px solid rgba(243,243,243,.35); }
.cform__msg { margin-top: 14px; font-size: 12px; min-height: 1.4em; }
.cform__msg.is-ok { color: #7fd6a2; }
.cform__msg.is-ng { color: #ff8a86; }

@media only screen and (max-width:768px) {
  /* 🔴ボタンを縦積みにしたら画面からはみ出した（982px／画面844px）。
     入力欄の余白と本文欄の高さを詰めて収める（2026-08-08 実測して調整）。 */
  .cform__row { gap: 0; }
  .cform__f { margin-bottom: 11px; }
  .cform__f > span { margin-bottom: 4px; }
  /* 🔴入力欄は**16px**にする（タクヤ指示 2026-08-10「ズームできないように」）。
     ⚠️iOS は16px未満の入力欄を押すと**勝手に拡大する**。これは
       user-scalable=no では止まらない。16px以上にするしか手がない。
     ⚠️見た目は少し大きくなるが、狭い画面でもはみ出さないことは確認済み。 */
  .cform input, .cform select, .cform textarea { padding: 7px 2px; font-size: 16px; }
  .cform textarea { height: 84px; }
  /* ⚠️ここで padding-top だけ変えない。上下がずれる（差11px）。
     縦の位置は .panel の 115px/115px と justify-content:center に任せる。 */
  .sec__title { margin-bottom: 22px; }
  /* ⚠️スマホは横に並べず、ボタンを真ん中・案内をその下に（タクヤ指示 2026-08-08）。
     横並びのままだと折り返して左右がちぐはぐになる */
  .cform__foot {
    flex-direction: column; align-items: center; gap: 14px; margin-top: 14px;
  }
  .cform__send { width: 100%; justify-content: center; padding: 13px 0; }
  .cform__note { text-align: center; }
  /* 🔴スマホは押せる帯に（タクヤ指示 2026-08-10）。
     ⚠️指で押す物は44px以上の高さを取る。文中のリンクだと狙えない。
     ⚠️枠で囲むと「送信する」と同じ強さに見えるので、
       線は下だけ・薄めにして、主役はあくまで送信ボタンにする。 */
  .cform__alt {
    display: block; width: 100%; margin-top: 4px;
  }
  .cform__alt-lead { text-align: center; font-size: 10.5px; margin-bottom: 8px; }
  .cform__alt-btn {
    display: flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 12px; width: 100%;
    font-size: 12px; opacity: .9;
    border: 1px solid rgba(243,243,243,.22); border-radius: 2px;
    background: rgba(255,255,255,.04);
  }
  .cform__alt-btn + .cform__alt-btn { margin-top: 8px; }
  .cform__msg { text-align: center; }
}

/* ══ About（タクヤ指示 2026-08-08「中身が薄い」）════════════════════
   ⚠️1画面に収める作りなので、縦に伸ばさず**3列**で組む。
   ⚠️経歴・使用ソフト・実績件数は事実を知らないので置いていない。
     埋めるならここに1列足す。 */
.about { max-width: 980px; }
.about__lead {
  font-size: 13px; line-height: 2.1; letter-spacing: .05em;
  margin-bottom: 40px; max-width: 640px;
}
.about__cols { display: flex; gap: 56px; flex-wrap: wrap; }
.about__col { flex: 1 1 200px; min-width: 0; }
.about__col h3 {
  font-family: "Prompt", var(--sans); font-weight: 400;
  font-size: 10px; letter-spacing: .2em; opacity: .55;
  padding-bottom: 9px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(243,243,243,.16);
}
.about__col li {
  font-size: 12.5px; line-height: 2.1; letter-spacing: .04em;
}
.about__note { margin-top: 12px; font-size: 11px; opacity: .45; }
/* 3列の下に置く案内。⚠️列の中に入れない（1つの列だけ長くなる） */
.about__ask {
  margin-top: 34px; font-size: 11.5px; letter-spacing: .04em;
  opacity: .5;
}
@media only screen and (max-width:768px) {
  .about__ask { margin-top: 20px; font-size: 10.5px; }
}
/* 🔴フェードの終わりを **.5** にする（2026-08-13）。
   ⚠️`[data-in]` は 0→1 で現れる作りだが、この一文は元から薄い（.5）。
     そのままだと**ここだけ真っ白**になって浮く。
   ⚠️`.about__ask`（0,1,0）と `[data-in]`（0,1,0）は強さが同じで、
     後に書いた方が勝つ。狙い通りにするため両方を明示する。 */
.about__ask[data-in] { opacity: 0; }
.panel.is-on .about__ask[data-in] { opacity: .5; }
.about__meta li { display: flex; gap: 12px; align-items: baseline; }
.about__meta span {
  font-family: "Prompt", var(--sans); font-size: 9px;
  letter-spacing: .16em; opacity: .5; width: 34px; flex: none;
}
.about__meta a { border-bottom: 1px solid rgba(243,243,243,.3); }

@media only screen and (max-width:768px) {
  /* 🔴縦積みにすると画面からはみ出す（942px／画面844px・2026-08-08 実測）。
     Design と Development を横に並べて、行数を半分にする。 */
  .about__lead { font-size: 12px; line-height: 1.85; margin-bottom: 20px; }
  .about__cols { gap: 16px 18px; }
  /* 🔴Profile を横いっぱいにすると縦に伸びてはみ出す（990px／画面844px）。
     3列とも半分ずつにして、2段に収める（2026-08-08 実測して調整）。 */
  .about__col { flex: 1 1 calc(50% - 9px); }
  .about__col h3 { padding-bottom: 7px; margin-bottom: 10px; }
  .about__col li { font-size: 12.5px; line-height: 1.75; }
  /* ⚠️ここに padding-left を足さない。全パネルが右にずれる（上の指摘） */
}

/* Contact の暗幕は他と同じ 0.78 に戻す（タクヤ指示 2026-08-08）。
   代わりに**文字のある側だけ**を暗くする。
   ⚠️四角い箱を敷くとサイト内で唯一の「枠」になって浮くので、
     左から右へ薄れる形にして境目を作らない。 */
#contact::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: linear-gradient(to right,
    rgba(0,0,0,.72) 0%, rgba(0,0,0,.72) 40%,
    rgba(0,0,0,.35) 58%, transparent 74%);
}

/* 英語の見出し＋日本語の説明。2行組にすると列が締まる */
.about__srv li { margin-bottom: 11px; line-height: 1.5; }
.about__srv b {
  display: block; font-weight: 400;
  font-family: "Prompt", var(--sans);
  font-size: 12px; letter-spacing: .08em;
}
.about__srv i {
  display: block; font-style: normal;
  font-size: 10.5px; letter-spacing: .04em; opacity: .5; margin-top: 1px;
}
@media only screen and (max-width:768px) {
  /* 🔴スマホで10pxは実機だと読めない（タクヤ指摘 2026-08-08）。
     2列をやめて1列にし、文字を大きくする。
     ⚠️1列に戻すと縦に伸びるので、行間を詰めて画面内に収める。 */
  .about__srv li { margin-bottom: 9px; }
  .about__srv b { font-size: 13px; }
  .about__srv i { font-size: 11.5px; margin-top: 2px; }
}

.about__col--profile { flex: 0 0 190px; }
/* 見出し(About)の次に大きく。区分名より小さく、肩書きより明らかに大きく */
/* 🔴名前は大きくてよい（タクヤ指示 2026-08-09）。28px → 48px。
   🔴書体は Archivo（タクヤ指摘 2026-08-09）。
     ・Noto Sans の細字 → 本文と同じで印象に残らない（最初の指摘）
     ・Syne → **屋号（Takuya Works）と同じ書体で被る**（2度目の指摘）
     Archivo はこのサイトで他に使っていない3つ目の声。
     ⚠️書体の役割：屋号=Syne / 見出し=Anton / 名前=Archivo / ラベル=Prompt。
       増やすときはこの表に無いものを選ぶこと。
   ⚠️About は1画面に収める作りなので、大きくしたら必ず入るか測ること。 */
.about__name { font-family: "Archivo", var(--sans); font-weight: 600;
  font-size: clamp(28px, 3.2vw, 46px); letter-spacing: -.015em;
  line-height: 1.1; margin-bottom: 10px; }

/* ⚠️名前の赤い下線は消した（タクヤ指示 2026-08-09）。 */

.about__role { font-family: "Prompt", var(--sans); font-size: 10px;
  letter-spacing: .14em; opacity: .5; }
.about__h3b { margin-top: 22px !important; }
.about__tools li { font-size: 11.5px; line-height: 1.95; letter-spacing: .04em; }
@media only screen and (max-width:768px) {
  .about__col--profile { flex: 1 1 100%; }
  .about__name { font-size: 27px; }
  .about__h3b { margin-top: 14px !important; }
  .about__tools li { font-size: 11px; line-height: 1.75; }
}

.about__lead b {
  display: block; font-weight: 400;
  font-family: "Anton", var(--sans);
  font-size: clamp(17px, 1.7vw, 23px); letter-spacing: .02em;
  margin-bottom: 12px;
}
@media only screen and (max-width:768px) {
  .about__lead b { font-size: 16px; margin-bottom: 9px; }
}

.about__who { margin-bottom: 38px; }
@media only screen and (max-width:768px) {
  .about__who { margin-bottom: 24px; }
}

/* 🔴縦の低い画面（1024x600・1280x720 など）は、上の余白が効いて
   **作品が1段も入らず**ページ送りと重なっていた（2026-08-09 実測）。
   余白と写真を詰めて、必ず1段＋ページ送りが入るようにする。
   ⚠️760pxで区切ったら1366x768が1段のまま（下が大きく空いた）。
     ノートPCの主流が768〜800なので860pxまで広げてある。
   ⚠️スマホ側（max-width:768px）には掛けない。あちらは別に詰めてある。 */
@media only screen and (min-width: 769px) and (max-height: 860px) {
  /* 🔴上の余白は減らせない。左のナビが 95〜172px を占めていて、
     詰めると番号（01）がナビの「02 About」に重なる（2026-08-09 実測）。
     代わりに**見出しまわりと写真**を詰めて場所を作る。 */
  /* 🔴上下をそろえる（タクヤ指示 2026-08-09）。下だけ詰めると
     上261px・下127px と偏る（1366x768 で実測）。
     ⚠️上を減らすには左のナビも上げないと、番号や中身がナビに当たる。
       ナビ 66〜143px → 中身は166pxから。23pxの逃げがある。 */
  /* ⚠️66pxまで上げたら屋号（〜72px）に重なった。84pxが下限。
     ナビ 84〜161px → 中身は184pxから。23pxの逃げがある。 */
  .header__nav { top: 84px !important; }
  .header__nav-trigger { top: 82px; }
  .panel { padding-top: 184px; padding-bottom: 184px; }

  /* ⚠️上下をそろえると使える高さが減るので、中身も詰める。
     詰めないと問い合わせフォームがナビに食い込む（720pxで実測）。 */
  .cform__f { margin-bottom: 12px; }
  .cform__f > span { margin-bottom: 5px; }
  .cform input, .cform select, .cform textarea { padding: 7px 2px; }
  .cform textarea { height: 84px; }
  .cform__foot { margin-top: 6px; }
  .cform__msg { margin-top: 8px; }
  .about__lead { margin-bottom: 24px; }
  .about__who { margin-bottom: 22px; }
  /* ⚠️比率で組むようになったので高さは指定しない。
     低い画面では段差だけ小さくして、上下のはみ出しを防ぐ */
  .works-grid[data-mode="featured"] figure:nth-child(2n) { margin-top: 36px; }
  .works-all { margin-top: 24px; }
  .sec__label { margin-bottom: 12px; }
  .sec__title { font-size: clamp(24px, 2.5vw, 32px); margin-bottom: 18px; }
  .works-tabs { margin-bottom: 16px; }
  .works-grid { gap: 14px 18px; }
  .works-grid img, .works-grid video { height: 14vh; }
  .works-pager { bottom: 30px; }
}

/* 🔴縦の短いスマホ（iPhone SE 320x568 など）。
   問い合わせフォームが入りきらず、上の現在地表示に食い込む
   （2026-08-09 実測：中身の上65px 対 現在地の下80px）。
   本文欄と余白をさらに詰める。 */
/* 🔴境目を 640px → 700px に広げた（2026-08-10）。
   iPhone SE2/8（375x667）は 640 の外側だったため詰めが効かず、
   フォームが現在地表示に**21px食い込んでいた**（実測）。 */
@media only screen and (max-width: 768px) and (max-height: 700px) {
  .cform__f { margin-bottom: 4px; }
  .cform__f > span { margin-bottom: 2px; font-size: 9px; }
  .cform input, .cform select, .cform textarea { padding: 3px 2px; font-size: 16px; }
  .cform textarea { height: 44px; }
  .cform__foot { gap: 10px; margin-top: 6px; }
  .cform__send { padding: 9px 0; }
  .cform__note { font-size: 10px; }
  /* 🔴連絡先の帯も詰める（2026-08-10 追加した分でフォームが伸びたため）。
     ⚠️44px→38px。指で押せる下限を少し割るが、この画面の高さでは
       現在地の文字に食い込む方が実害が大きい。広い画面では44pxのまま。 */
  .cform__alt { margin-top: 0; }
  .cform__alt-lead { margin-bottom: 4px; font-size: 10px; }
  .cform__alt-btn { min-height: 38px; font-size: 11.5px; }
  .cform__alt-btn + .cform__alt-btn { margin-top: 6px; }
}

/* 🔴一番背の低い画面（320x568 など）。上の詰めでも余裕が1pxしか
   残らなかったので、本文欄と行間をもう一段詰める（2026-08-10 実測）。 */
@media only screen and (max-width: 768px) and (max-height: 600px) {
  .cform__f { margin-bottom: 3px; }
  .cform textarea { height: 36px; }
  .cform__foot { margin-top: 4px; }
  .about__lead { margin-bottom: 14px; }
  .about__who { margin-bottom: 16px; }
  /* ⚠️Webの列を足して3列になった分、Aboutが50pxはみ出した（320x568 実測）。
     行間と字を詰めて収める。 */
  .about__name { font-size: 22px; }
  .about__cols { gap: 12px 14px; }
  .about__col h3 { padding-bottom: 5px; margin-bottom: 8px; }
  .about__srv li { margin-bottom: 6px; }
  .about__srv b { font-size: 12px; }
  .about__srv i { font-size: 10.5px; }
  .about__note { margin-top: 8px; font-size: 10px; }
}

/* 🔴とても低い画面（1024x600 など）。
   ナビを縦3行のまま出すと、上下をそろえた中身がナビに食い込む
   （2026-08-09 実測：中身の上121px 対 ナビの下161px）。
   ここだけスマホと同じ**横1行**に組み替えて場所を作る。
   ⚠️01/02/03 の番号は横並びだと読みにくいので外す。 */
@media only screen and (min-width: 769px) and (max-height: 640px) {
  .header__nav { top: 78px !important; }
  .header__nav__list { display: flex; gap: 24px; }
  .header__nav__list li { padding-left: 0; margin: 0; }
  .header__nav__list li::before { content: none; }
  .header__nav a::after { left: 0; bottom: -4px; }
  .header__nav a.is-current::after { width: 100%; }
  .panel { padding-top: 124px; padding-bottom: 124px; }
  .works-grid[data-mode="featured"] figure:nth-child(2n) { margin-top: 22px; }
}

/* さらに低い画面（1280x720 など）。ここを詰めないと2段目が入らず、
   1段だけ出て下が大きく空く（2026-08-09 実測で 361px 対 372px の僅差）。 */
@media only screen and (min-width: 769px) and (max-height: 740px) {
  .works-grid img, .works-grid video { height: 13vh; }
}

/* ページ送り */
/* 🔴ページ送りは**どの画面でも下に固定**する（タクヤ指摘 2026-08-09）。
   流れに置いていたら、画面の低いPCとタブレットで下にはみ出て
   見えなくなっていた（1366x768・1280x720・1024x768 など9つ中6つ）。
   ⚠️ここが基準になって works.js が「何件入るか」を測っている。
     position:absolute を外すと件数の計算も壊れる。 */
.works-pager {
  position: absolute; left: 6.94444vw; right: 6.94444vw; bottom: 44px;
  display: flex; align-items: center; gap: 16px; margin-top: 0;
}
.works-pg {
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  background: none; border: 1px solid rgba(243,243,243,.28); border-radius: 2px;
  position: relative; transition: background .3s ease, opacity .3s ease;
}
/* 🔴矢印がずれていた（タクヤ指摘 2026-08-09）。
   原因：8px角を左上からの数値（left/top）で置いていたので、
   45度回した後の**見た目の重心**が右下にずれていた。
   直し方：真ん中に置いてから回す。回した後に見た目を合わせる
   ずらし（translate）は、回転の前ではなく**後**に掛ける。 */
.works-pg::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-top: 1.5px solid #f3f3f3; border-right: 1.5px solid #f3f3f3;
}
.works-pg--next::before { transform: rotate(45deg) translate(-1.9px, 1.9px); }
/* ⚠️戻る側は回す向きが逆なので、ずらす量も別に測って決めてある
   （どちらも中心から±0.2px 以内・4倍に拡大して実測 2026-08-09） */
.works-pg--prev::before { transform: rotate(-135deg) translate(-1.4px, 1.4px); }
.works-pg:hover:not([disabled]) { background: rgba(255,255,255,.08); }
.works-pg[disabled] { opacity: .25; cursor: default; }
.works-pg__num {
  font-family: "Prompt", var(--sans); font-size: 10px; letter-spacing: .16em;
  opacity: .55;
}
.works-err { font-size: 12px; opacity: .6; padding: 30px 0; }

/* 拡大表示の説明とリンク（data.json に入っているものだけ出る） */
.viewer__meta { max-width: 46vw; }
.viewer__desc {
  font-size: 12px; line-height: 1.9; letter-spacing: .04em;
  opacity: .8; margin-top: 8px;
}
/* ⚠️2026-08-20：リンクは1作品に複数並ぶ。gap で間を空ける
   （a に margin を付けると、1つだけの時に右側が空いて見える） */
.viewer__link { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.viewer__link a {
  font-family: "Prompt", var(--sans); font-size: 11px; letter-spacing: .06em;
  border-bottom: 1px solid rgba(243,243,243,.4); padding-bottom: 2px;
}
@media only screen and (max-width:768px) {
  .viewer__meta { max-width: 88vw; }
  .viewer__desc { font-size: 11.5px; line-height: 1.8; }
}

/* スクロールバーを消す（タクヤ指示 2026-08-08）。
   ⚠️スクロール自体は殺さない。**見えなくするだけ**。
     ホイール1回＝1画面に乗っ取っているので、つまんで動かす必要が無い。
     位置はサイドバーの 01/02/03 と左端の SCROLL で分かる。 */
html { scrollbar-width: none; }              /* Firefox */
html { -ms-overflow-style: none; }           /* 古いEdge */
html::-webkit-scrollbar { width: 0; height: 0; display: none; }
body::-webkit-scrollbar { width: 0; height: 0; display: none; }



/* ══ お試しの動き（タクヤ指示 2026-08-08）══════════════════════════
   ① ピントが合うように現れる（ぼけ → くっきり）
      ⚠️blur は重い処理。**入るときだけ**掛けて、終わったら外す。
        ずっと掛けっぱなしにするとスクロールが重くなる。 */
[data-in] {
  filter: blur(9px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1),
              transform .6s cubic-bezier(.22,.61,.36,1),
              filter .7s cubic-bezier(.22,.61,.36,1);
}
.panel.is-on [data-in] { filter: blur(0); }

/* ② 見出しは1文字ずつ。左から順にピントが合う */
/* 🔴文字を包んだ span に `body *` の書体指定が当たり、見出しの Anton が
   外れていた（1文字ずつ出す動きを入れたときの巻き添え・2026-08-08）。
   ⚠️包む要素を足したら、書体を継ぐ指定も一緒に入れること。 */
.sec__title .ch {
  font-family: inherit;
  font-weight: inherit;
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(7px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.22,.61,.36,1),
              filter .55s ease;
  transition-delay: calc(var(--c, 0) * 26ms + 120ms);
}
.panel.is-on .sec__title .ch {
  opacity: 1; transform: none; filter: blur(0);
}
/* 見出しそのものは常に出す（中の文字が動く） */
.panel .sec__title { opacity: 1 !important; transform: none !important;
  filter: none !important; }

body.no-anim [data-in],
body.no-anim .sec__title .ch {
  filter: none; opacity: 1; transform: none; transition: none;
}


/* ── マウスの先 ───────────────────────────────────
   点は指した所ちょうど、輪は少し遅れて付いてくる（cursor.js）。
   ⚠️指で触る端末には出さない。hover できる機械だけに絞る
   ⚠️pointer-events:none は外さない。**当たると何も押せなくなる**
   ⚠️difference にしてあるので、白い画像の上でも見える */
@media (hover: hover) and (pointer: fine) {
  body.cur-on, body.cur-on a, body.cur-on button,
  body.cur-on .works-grid figure { cursor: none; }
  /* 文字を打つ所だけは元の形に戻す。消すと打ち位置が分からない */
  body.cur-on input, body.cur-on textarea { cursor: text; }

  .cur {
    position: fixed; left: 0; top: 0; z-index: 9999;
    pointer-events: none; border-radius: 50%;
    opacity: 0; mix-blend-mode: difference;
    will-change: transform;
  }
  .cur--dot {
    width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff;
    transition: opacity .25s, width .25s, height .25s, margin .25s;
  }
  .cur--ring {
    width: 34px; height: 34px; margin: -17px 0 0 -17px;
    border: 1px solid rgba(255,255,255,.75);
    transition: opacity .25s, width .3s cubic-bezier(.2,.8,.2,1),
                height .3s cubic-bezier(.2,.8,.2,1),
                margin .3s cubic-bezier(.2,.8,.2,1),
                border-color .25s, background .25s;
  }
  body.cur-on .cur { opacity: 1; }

  /* ⚠️ぼかしの丸（cur--soft）は**やめた**（タクヤ指摘 2026-08-09）。
     カーソルに付いて回るので「カーソルがぼけている」ように見えていた。
     ぼかすのは作品そのもの（.works-grid figure:hover）。 */
  body.cur-hot .cur--ring {
    width: 60px; height: 60px; margin: -30px 0 0 -30px;
    border-color: rgba(255,255,255,.95); background: rgba(255,255,255,.10);
  }
  body.cur-hot .cur--dot { opacity: 0; }

  /* 押している間は締まる */
  body.cur-down .cur--ring {
    width: 26px; height: 26px; margin: -13px 0 0 -13px;
  }
  body.cur-down .cur--dot {
    width: 10px; height: 10px; margin: -5px 0 0 -5px; opacity: 1;
  }

}
/* ══ トップの代表作（3件）════════════════════════════════════
   🔴全部並べるのはやめた（タクヤ指示 2026-08-09）。
     トップは代表作だけを**大きく**見せて、続きは works.html。
   ⚠️件数を測る仕掛け（works.js の fit）はこちらでは動かない。
     3件と決まっているので、高さもここで決めてよい。 */
.works-grid[data-mode="featured"] {
  flex: 0 0 auto;
  /* 🔴横2つずつ（2列×2段）にする（タクヤ指示 2026-08-09）。
     1画面には収まらないので、**この面だけ中を動かせる**ようにした
     （下の #works の overflow-y と scroll.js を参照）。 */
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 30px;
  /* ⚠️幅の上限で大きさを決めている。これより狭い画面（iPadなど）は
     今までと同じ大きさのまま変わらない。
     ⚠️1040→900→980：縦を詰めすぎたので戻した（2026-08-09）。
       ここを変えたら「全部見る」ボタンの中央合わせの式も直す。 */
  max-width: 980px;
}
/* ⚠️高さは決め打ちにしない。**サイトの画面と同じ 16:9** で組む
   （タクヤ指示 2026-08-09「比率をウェブサイズにして」）。
   幅が変わっても形が崩れないので、どの画面でも同じ見え方になる。 */
.works-grid[data-mode="featured"] img,
.works-grid[data-mode="featured"] video {
  height: auto; aspect-ratio: 16 / 9;
}
/* 🔴2026-08-19：縦長の作品は**切らない**（タクヤ指示）。
   16:9 に cover で入れていたため、A4縦のポスターが上下6割欠けていた（実測15件）。
   縦長だけ、その作品自身の比率で出す。横長はこれまでどおり 16:9。 */
.works-grid[data-mode="featured"] figure[data-orient="portrait"] img,
.works-grid[data-mode="featured"] figure[data-orient="portrait"] video {
  aspect-ratio: var(--ar, 3 / 4);
}
/* ⚠️高さが2種類になるので、行の高さに引き伸ばされないよう上ぞろえにする。
   これが無いと、隣が縦長のとき横長まで伸びて画像が歪む。 */
.works-grid[data-mode="featured"] { align-items: start; }

/* 🔴右の列を下にずらして段差をつける（タクヤ指示 2026-08-09）。
   ⚠️transform ではなく **margin-top** でずらす。
     transform は場所の計算に入らないので、真ん中に置く計算とずれる
     （実測：上215px 対 下251px）。margin なら計算に入る。
   ⚠️触れたときの動き（少し持ち上がる）は共通の指定に任せる。 */
.works-grid[data-mode="featured"] figure:nth-child(2n) { margin-top: 44px; }

/* 画像の下に題名（タクヤ指示 2026-08-09）。カテゴリは出さない */
.works-grid[data-mode="featured"] figcaption {
  margin-top: 9px; font-size: 12.5px; line-height: 1.5;
  letter-spacing: .04em;
}

/* 🔴「全部見る」は**下の中央**にはっきり見せる（タクヤ指示 2026-08-09）。
   下線だけの控えめな作りだと、代表作4件で終わりだと思われる。
   ⚠️送信ボタンと同じ形にそろえる。サイト内で押す物の形は1種類にする。 */
.works-all {
  /* 🔴画面の中央ではなく**作品の並びの中央**に置く（タクヤ指示 2026-08-09）。
     代表作は左寄せで幅1040pxまで。その真ん中に合わせる。
     ⚠️ボタンの幅が変わっても中央に来るよう、半分だけ戻す形にしてある。
     ⚠️1040px は代表作の幅。あちらを変えたらここも直す。 */
  align-self: flex-start;
  margin-left: calc(min(980px, 100%) / 2);
  margin-top: 30px;
  display: inline-flex; align-items: center; gap: 16px;
  font-family: "Prompt", var(--sans); font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase;
  color: #f3f3f3; padding: 15px 46px;
  border: 1px solid rgba(243,243,243,.45); border-radius: 2px;
  transition: background .3s ease, color .3s ease, gap .3s ease;
}
.works-all::after {
  content: ""; width: 8px; height: 8px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.works-all:hover { background: #f3f3f3; color: #000; gap: 22px; }

/* 🔴半分だけ左へ戻す指定は、要素を **a.works-all** で書くこと。
   `.works-all` のままだと、出るときの動き（[data-in] の transform）に
   上書きされて効かない（実測：中央から122pxずれた・2026-08-09）。
   ⚠️出る前は下から、出た後は横だけ。transform は1つしか持てないので
     両方をここで書き切る。 */
a.works-all { transform: translateX(-50%) translateY(14px); }
.panel.is-on a.works-all { transform: translateX(-50%); }

@media only screen and (max-width:768px) {
  /* 🔴スマホは1列（タクヤ指示 2026-08-09）。
     ⚠️4件が1画面に収まらなくなるが、この面は中を動かせるので問題ない
       （#works の overflow-y と scroll.js）。
     ⚠️段差は付けない。1列でずらしても隙間が空くだけ。 */
  .works-grid[data-mode="featured"] {
    grid-template-columns: 1fr; gap: 18px;
  }
  .works-grid[data-mode="featured"] figure:nth-child(2n) { margin-top: 0; }
  .works-grid[data-mode="featured"] figcaption {
    margin-top: 7px; font-size: 10.5px; line-height: 1.5;
  }
  /* ⚠️スマホは横いっぱいなので、中央合わせの計算は要らない */
  .works-all {
    margin-top: 26px; font-size: 10.5px; padding: 13px 0; width: 100%;
    justify-content: center;
    align-self: stretch; margin-left: 0;
  }
  a.works-all { transform: translateY(14px); }
  .panel.is-on a.works-all { transform: none; }
}

/* 🔴WORKSの面だけ**中を動かせる**ようにする（タクヤ指示 2026-08-09）。
   代表作4件を2列×2段にすると1画面に収まらないため。
   ・端まで来てから次の面へ送る（scroll.js の innerScroller）
   ・overscroll-behavior: contain で、端に着いた時に親が動くのを止める
   ⚠️`safe center` にすること。ただの center だと、中身が画面より高いとき
     **上がはみ出して戻せなくなる**（flexbox の昔からの落とし穴）。
   ⚠️スクロールバーはサイト全体で消してあるので、ここでも出ない。
     動かせることは、下の作品が半分見えていることで伝わる。 */
#works { overflow-y: auto; overscroll-behavior: contain; }
/* 🔴WORKSだけ下の余白を詰める（タクヤ指示 2026-08-10
   「View All Works の下まで空白 スクロール1スクロール分なくしたい」）。
   実測：ボタンの下の空き＝下の余白そのもの（176px）。
   他の面は中身を上下の真ん中に置くため余白を左右対称にしているが、
   **この面は中を動かす作り**なので、下に余白を残す意味がない。
   ⚠️0にはしない。ボタンが画面の縁に貼り付いて押しにくくなる。 */
#works { padding-bottom: 48px; }
@media only screen and (max-width:768px) {
  #works { padding-bottom: 40px; }
}
/* ⚠️以前ここで #works::before を fixed にしていた（中を動かすと暗幕が
   流れて下が切れたため）。いまは暗幕が .scrim に移ったので不要。 */

/* ══ 右の余白に流す縁取りの英字（タクヤ指示 2026-08-09）════════════
   代表作の幅を1040pxで止めたので、広い画面では右が空く。そこを埋める。
   ⚠️狭い画面では出さない。作品に重なるため（1280px未満は非表示）。
   ⚠️中は塗らずに**縁だけ**（-webkit-text-stroke ＋ color:transparent）。
     Firefox も同じ指定が効く。効かない環境では単に見えなくなるだけで、
     飾りなので中身は失われない。
   ⚠️pointer-events:none。ここに当たると作品が押せなくなる。 */
/* 🔴拡大の抑止（タクヤ指示 2026-08-10）。
   ・touch-action:manipulation … **2度たたきの拡大**を止める
   ・text-size-adjust … 端末が勝手に本文を大きくするのを止める
   ⚠️2本指で広げる拡大は iOS では止められない（端末側の決まり）。
   ⚠️manipulation は画面を送る操作には影響しない。none にしないこと
     （none にすると縦の送りまで止まって、サイトが動かなくなる）。 */
html {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.edge-text { display: none; }

@media only screen and (min-width: 1280px) {
  .edge-text {
    display: block; position: fixed; z-index: 0; pointer-events: none;
    top: 0; right: 0.6vw;
    /* ⚠️高さは指定しない。縦書きでは**文字の長さがそのまま高さ**になる。
       決め打ちにすると、下の -50% が1周ぶんと合わずに飛ぶ。 */
    /* 🔴**寝かせた向きに戻す**（タクヤ指示 2026-08-10「角度戻して」）。
       一度 upright（直立）にしたが、元の倒れた向きを採用。
       ⚠️mixed では letter-spacing は**字と字の間**（＝縦方向の詰め）になる。
         upright に戻すと同じ数値でも見え方が変わる。 */
    writing-mode: vertical-rl; text-orientation: mixed;
    /* ⚠️Impact は端末に入っている書体（web から読み込まない）。
       無い環境のために Anton を控えにする。どちらも太くて縦長なので
       見た目はほぼ変わらない。 */
    /* 🔴Impact → Anton にしたが「変わってない」（タクヤ指摘 2026-08-09）。
       どちらも太い縦長のグロテスクで、輪郭だけにすると差が出ない。
       字の形そのものが違う Syne にする（Oが真円に近く、Sのうねりが独特）。
       ⚠️Syne は屋号と同じ族だが、こちらは輪郭だけの飾りで扱いが違う。 */
    /* 🔴ARU design と同じ作りにする（タクヤ指示 2026-08-10）。
       向こうの実装をそのまま写した（aru-design.html の .kv-ghost）：
         font-family:'Anton','Impact',sans-serif / font-weight:400
         text-transform:uppercase / letter-spacing:.02em
         -webkit-text-stroke:2px rgba(0,0,0,.08)  ← **濃さ8%**
       ⚠️向こうは白地に黒。こちらは黒地に白なので、同じ8%だと沈む。
         見え方をそろえるため 15% にしてある（数値ではなく見た目を合わせる）。 */
    /* 🔴Impact を先にする（タクヤ指示 2026-08-10「fontはインパクトにして」）。
       ⚠️Impact は端末に入っている書体で、web からは読み込まない。
         無い端末（多くの Android）では Anton に落ちる。どちらも
         太い縦長なので、縁取りだけの飾りとしては破綻しない。 */
    font-family: Impact, "Anton", var(--sans); font-weight: 400;
    text-transform: uppercase;
    /* 🔴とにかく大きく（タクヤ指示 2026-08-09）。
       ただし作品に重ねない。**空いている幅そのもの**を字の大きさにする。
         空き = 画面幅 − 代表作の幅(1040px) − 左の余白(6.94vw)
       これで、画面が広いほど字も大きくなり、狭い画面でも決してぶつからない。
       ⚠️1040px を変えたらこの式も直すこと。 */
    font-size: clamp(110px, calc(93vw - 1050px), 320px);
    letter-spacing: .02em; line-height: .85;
    color: transparent;
    /* 🔴縁の太さを**字の大きさに比例**させる（タクヤ指摘 2026-08-13「がびがび」）。
       これまでは 2px 固定。字は 140〜320px あるので、大きい画面ほど
       線が相対的に細くなり、斜めの部分が階段状に見えていた。
         0.012em → 140px の時 1.7px ／ 320px の時 3.8px
       🔴0.018em → 0.015em → 0.012em と2回細くした（タクヤ指示 2026-08-13）。
       ⚠️1280px幅では 1.7px。**元の 2px 固定より細い**。それでも広い画面
         （1920px）では 3.8px あるので、比例にした意味は残っている。
       ⚠️em は**その要素の font-size 基準**。font-size を変えたら太さも変わる。
       ⚠️動きのせいではないことは測って確かめた（止めた時と差が出なかった）。
       ⚠️濃さ15%は据え置き。太くすると濃く見えるので、上げると主張が強すぎる。
       ⚠️**px 固定に戻さないこと**。それがガビガビの原因だった。
         細くしたい時はこの em の数値を下げる。 */
    -webkit-text-stroke: 0.007em rgba(243,243,243,.15);
    text-stroke: 0.007em rgba(243,243,243,.15);
    white-space: nowrap;
    animation: edge-flow 46s linear infinite;
  }
  /* 🔴中の span にも**同じ書体を書く**（タクヤ指摘 2026-08-10
       「フォントが impact じゃない」）。
     ⚠️`body, body * { font-family: var(--sans) }` が span に**直接**当たるため、
       親の .edge-text に書いただけでは受け継がれない（打ち消される）。
       ここを消すと、また Noto Sans JP に戻る。
     ⚠️これまでずっと Noto Sans JP で描かれていた。Anton にした時も同じ。 */
  .edge-text span {
    font-family: Impact, "Anton", var(--sans); font-weight: 400;
  }

  /* 🔴span は block にしない。縦書きでは**ブロックが横に積まれる**ので、
     2本の柱に分かれて別の文字列に見える（2026-08-09 実際にそうなった）。
     文中に続けて流したいので inline のままにする。 */
  .edge-text span { display: inline; }

  /* 🔴角を尖らせるため、SVGで描き直した（タクヤ指摘 2026-08-13「角が丸い」）。
     CSS の -webkit-text-stroke は**角の継ぎ方を指定できない**。実測したところ、
     Impact の鋭い角（Wの谷など）が切り落とされて丸く見えていた。
     SVG なら stroke-linejoin:miter ＋ stroke-miterlimit を指定でき、尖らせられる。
     ⚠️span は**消さない**。高さ（＝流れる1周の長さ）を決めているのは span。
       SVG は絶対配置で親に重ねるだけ。位置合わせは edge.js が実測して行う。
     ⚠️JSが動かなかった時は is-ink が付かず、これまで通り span の縁取りが出る。
       **span の縁取りを消さないこと**（消すと何も見えなくなる）。 */
  /* 🔴display:none にしないこと（2026-08-13 実際に踏んだ）。
     消えている要素は**大きさを測れない**ので、位置合わせができず
     いつまでも切り替わらない。visibility なら測れて、かつ見えない。 */
  .edge-text__ink {
    position: absolute; inset: 0; width: 100%; height: 100%;
    overflow: visible; pointer-events: none; visibility: hidden;
  }
  .edge-text.is-ink .edge-text__ink { visibility: visible; }
  /* SVG が出たら、下敷きの span の縁取りは消す（二重に見えるため） */
  .edge-text.is-ink span { -webkit-text-stroke-width: 0; }
  .edge-text__ink text {
    font-family: Impact, "Anton", var(--sans); font-weight: 400;
    font-size: inherit; letter-spacing: .02em;
    writing-mode: vertical-rl; text-orientation: mixed;
    fill: none; stroke: rgba(243,243,243,.15);
    /* 🔴フチを**内側だけ**にする（タクヤ案 2026-08-13）。
       線は「中心」が輪郭なので、太さを2倍にして字の形で切り抜くと
       内half だけが残り、**外側の輪郭が字そのもの**になる。
       角は字の形そのままなので、丸まりようがない。
       ⚠️見た目の太さは 0.007em。指定は**その2倍の 0.014em**。
         細くしたい時はここを2倍で考えること（0.014→見た目0.007）。
       🔴0.024→0.020→0.016→0.014em と4回細くした（タクヤ指示 2026-08-13）。
         見た目 1.68 → 1.40 → 1.12 → 0.98px（1280px幅のとき）。
       ⚠️**1画素を切った**。これ以上細くすると線が薄れて途切れて見える。
       ⚠️内側だけなので、細くしても角は丸くならない（外の輪郭は字そのもの）。
       ⚠️下の span のフチ（JSが落ちた時の保険）と**数値を揃えること**。 */
    stroke-width: 0.014em;
    /* ⚠️内側だけにしたので継ぎ方はほぼ効かないが、切り抜きの縁が
       内側で暴れないよう miter のままにしておく。 */
    stroke-linejoin: miter; stroke-miterlimit: 20;
  }
  /* 切り抜きの型。⚠️見えている字と**まったく同じ位置**に置くこと。
     位置は edge.js が両方に同じ値を入れる。 */
  .edge-text__ink clipPath text { stroke: none; }
}
/* ⚠️2つ並べたうちの1つぶん（＝半分）だけ動かす。半分でちょうど1周する */
@keyframes edge-flow {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
/* 「動きを減らす」設定の人には流さない（止めても意味は変わらない） */
@media (prefers-reduced-motion: reduce) {
  .edge-text { animation: none !important; }
}
body.no-anim .edge-text { animation: none !important; }

/* 🔴中を動かすと、作品が屋号や現在地の文字の下を通って読めなくなる。
   上端と下端を黒く沈ませて、文字にかかる手前で消えるようにする。
   ⚠️パネル自体は z-index:2、ヘッダーは 5。この幕は 1 にして
     「作品より上・ヘッダーより下」に置く。
   ⚠️pointer-events:none。ここに当たると作品が押せなくなる。 */
#works::after {
  content: ""; position: fixed; z-index: 1; pointer-events: none;
  left: 0; right: 0; top: 0; height: 190px;
  background: linear-gradient(to bottom,
    #000 0%, rgba(0,0,0,.92) 42%, rgba(0,0,0,0) 100%);
}
@media only screen and (max-width:768px) {
  #works::after { height: 120px; }
}
#works::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* 🔴どの画面も中身を縦の真ん中に置く（タクヤ指示 2026-08-09
   「pc版も上下の感覚バランスとって」）。
   ⚠️以前これで About だけ下がったのは、見出しの有無で高さが違ったため。
     見出しを消したいまは3画面とも同じ扱いでよい。 */
#works, #info, #contact { justify-content: center; }
/* ⚠️この2行は上の行より**後**に置くこと。同じ強さなので、前に置くと負ける
   （実際に負けて、作品の上47pxが画面の外に出て戻せなくなっていた）。 */
#works { justify-content: safe center; }

/* ══ WORKS の出方（タクヤ指示 2026-08-09）════════════════════════
   代表作を1つずつ、少し下から出す。
   ⚠️触れたときに持ち上がる動き（transform）と数値がぶつかるので、
     出たあとの hover を**別に書き直して**いる。書かないと持ち上がらない。
   ⚠️並べ直すと動きが最初からやり直しになる。works.js 側で
     代表作のときは並べ直さないようにしてある。 */
.works-grid[data-mode="featured"] figure {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.works-grid[data-mode="featured"] figure:nth-child(1) { transition-delay: .20s; }
.works-grid[data-mode="featured"] figure:nth-child(2) { transition-delay: .34s; }
.works-grid[data-mode="featured"] figure:nth-child(3) { transition-delay: .48s; }
.works-grid[data-mode="featured"] figure:nth-child(4) { transition-delay: .62s; }
.panel.is-on .works-grid[data-mode="featured"] figure {
  opacity: 1; transform: none;
}
.panel.is-on .works-grid[data-mode="featured"] figure:hover {
  transform: translateY(-4px);
}
body.no-anim .works-grid[data-mode="featured"] figure {
  opacity: 1; transform: none; transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .works-grid[data-mode="featured"] figure { transition: none; }
}

/* 🔴読み込みが明けたときの入り（タクヤ指示 2026-08-09）。
   背景を少し大きい状態から実寸に戻して、静かに落ち着かせる。
   ⚠️中身（文字）の透明度はいじらない。パネルや見出しが自分の透明度を
     持っているので、上から重ねると打ち消し合う。
     動かすのは**背景の枠だけ**にする。
   ⚠️枠は position:fixed。transform を掛けると中の要素の基準が枠になるが、
     中は absolute なので影響しない。 */
.top-background-video {
  transform: scale(1.06);
  opacity: 0;
  transition: transform 1.6s cubic-bezier(.22,.61,.36,1),
              opacity 1.2s ease;
}
body.is-loaded .top-background-video { transform: none; opacity: 1; }
body.no-anim .top-background-video {
  transform: none; opacity: 1; transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .top-background-video { transition: none; transform: none; opacity: 1; }
}

/* ══ TOP の出方（タクヤ指示 2026-08-09「とっぷもそんな感じがいいかも」）══
   About と同じ考え方で、上から順にゆっくり出す。
   ① 署名（PORTFOLIO.＋手書き）がぼけから合ってくる
   ② 短い横線が左から伸びる
   ③ 肩書きの3行が1行ずつ
   ④ 著作権表示
   ⚠️出る条件は「読み込み済み（is-loaded）かつ TOPにいる（is-gone でない）」。
     戻ってきたときにもう一度出る。
   ⚠️署名は img。中の白文字（PORTFOLIO.）は画像の一部なので分けて動かせない。 */
/* 🔴署名は「手で書いている」ように出す（タクヤ指示 2026-08-10）。
   画像なので線をなぞることはできない。代わりに**左から右へ現れる**。
   署名は左から右へ書くものなので、これで書き進めているように見える。
   ⚠️速さを一定にしない。書き始めは速く、終わりでゆっくり止める
     （一定だと機械が舐めているように見える）。
   ⚠️PORTFOLIO. も同じ画像の中にある。あちらも左から右の並びなので、
     一緒に現れて不自然にならない。
   ⚠️clip-path は要素の外に出ない。はみ出している署名の右端まで含めるため
     100% ではなく余裕をもたせてある。 */
/* 🔴2026-08-21：署名を**線に沿って書く**形にした（タクヤ指示）。
   それまでは要素ごと clip-path で左から右へ現れるだけだった。
   ⚠️2層になっている。同じ場所に重ねること。
     ・.autograph__title … 白い PORTFOLIO.。**角ばった字なので幕のままでよい**
     ・.autograph__ink   … 赤い署名。SVGの線をなぞって出す
   ⚠️線の長さ(--l)・書く時間(--dur)・書き始め(--del)は
     **1本ずつHTML側に埋めてある**（sig_make.py が計算した値）。 */
.top-header__autograph {
  display: block;
  position: relative;
  opacity: 0;
  transition: opacity .5s ease .1s;
}
body.is-loaded .top-header:not(.is-gone) .top-header__autograph { opacity: 1; }

.autograph__title {
  display: block;
  width: 100%; height: auto;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(.16,.84,.30,1) .15s;
}
body.is-loaded .top-header:not(.is-gone) .autograph__title {
  clip-path: inset(0 -2% 0 0);
}

/* ⚠️絵の上にぴたりと重ねる。位置がずれると署名だけ動いて見える */
.autograph__ink {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;      /* ⚠️SVGの既定は hidden。線の端が切れないように */
  pointer-events: none;
}
.sig__stroke {
  stroke-dasharray: var(--l);
  stroke-dashoffset: var(--l);
  transition: stroke-dashoffset var(--dur, .2s) linear var(--del, 0s);
}
body.is-loaded .top-header:not(.is-gone) .sig__stroke {
  stroke-dashoffset: 0;
}
/* 書き終わってから全面を出す（型の取りこぼし対策）。
   ⚠️書いている最中に出ると、なぞっている意味が無くなる。**必ず後**。 */
.sig__fill { opacity: 0; transition: opacity .3s ease 2.60s; }
body.is-loaded .top-header:not(.is-gone) .sig__fill { opacity: 1; }

/* ⚠️動きを減らす設定では、いきなり全部見せる */
body.no-anim .top-header__autograph { opacity: 1; transition: none; }
body.no-anim .autograph__title { clip-path: none; transition: none; }
body.no-anim .sig__stroke { stroke-dashoffset: 0; transition: none; }
body.no-anim .sig__fill { opacity: 1; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .top-header__autograph { opacity: 1; transition: none; }
  .autograph__title { clip-path: none; transition: none; }
  .sig__stroke { stroke-dashoffset: 0; transition: none; }
  .sig__fill { opacity: 1; transition: none; }
}

/* 短い横線：左から伸びる。⚠️PCだけに出る線（参考サイトの作り） */
@media only screen and (min-width:769px) {
  .top-header__message:before {
    transform: scaleX(0); transform-origin: left center;
    transition: transform .8s cubic-bezier(.22,.61,.36,1);
    transition-delay: .75s;
  }
  body.is-loaded .top-header:not(.is-gone) .top-header__message:before {
    transform: scaleX(1);
  }
}

.top-header__message span {
  display: block;
  opacity: 0; transform: translateY(8px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.top-header__message span:nth-child(1) { transition-delay: .95s; }
.top-header__message span:nth-child(2) { transition-delay: 1.12s; }
.top-header__message span:nth-child(3) { transition-delay: 1.29s; }
body.is-loaded .top-header:not(.is-gone) .top-header__message span {
  opacity: 1; transform: none;
}

.top-footer__copyright {
  opacity: 0; transition: opacity .8s ease; transition-delay: 1.5s;
}
body.is-loaded .top-footer:not(.is-gone) .top-footer__copyright { opacity: 1; }

/* 🔴SNSアイコンも著作権表示と**同じ出方**にする（タクヤ指示 2026-08-10）。
   これだけ最初から出ていて、他が順に出るのと揃っていなかった。
   ⚠️消えるときは速く（.3s・待たない）。TOPを離れた時や
     メニューを開いた時に、1.5秒も残っていると邪魔になる。 */
.header__instagram { opacity: 0; transition: opacity .8s ease 1.5s; }
body.is-loaded .header__instagram { opacity: 1; }

/* ⚠️動きを減らす設定・no-anim では最初から全部出す */
body.no-anim .top-header__autograph,
body.no-anim .top-header__message span,
body.no-anim .top-footer__copyright {
  opacity: 1; filter: none; transform: none; transition: none;
}
body.no-anim .top-header__message:before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .top-header__autograph, .top-header__message span,
  .top-footer__copyright, .top-header__message:before { transition: none; }
}

/* ══ About の出方（タクヤ指示 2026-08-09）════════════════════════
   「もう少しひとつずつゆっくり」「横線も伸びる動き」「点滅」
   ・見出しの下線は**左から伸びる**
   ・項目は列ごと・行ごとに少しずつ遅らせて出す
   ・見出しの文字だけ、点いたり消えたりしてから安定する（蛍光灯の感じ）
   ⚠️列の data-in は外した。ブロックごと出す動きと二重になって濁るため。
   ⚠️遅れは「列の遅れ(--cd) ＋ 行の遅れ(--rd)」で決まる。
     項目を足したら :nth-child の行を1つ増やすこと。 */
.about__col h3 { border-bottom: 0 !important; position: relative; }
.about__col h3::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: rgba(243,243,243,.20);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .85s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--cd, 0s);
}
.panel.is-on .about__col h3::after { transform: scaleX(1); }

/* 見出しの文字：数回ちらついてから点く */
.panel.is-on .about__col h3 {
  animation: about-flicker .9s steps(1, end) both;
  animation-delay: var(--cd, 0s);
}
@keyframes about-flicker {
  0%   { opacity: 0; }
  20%  { opacity: .55; }
  30%  { opacity: 0; }
  45%  { opacity: .55; }
  55%  { opacity: .12; }
  70%  { opacity: .55; }
  100% { opacity: .55; }
}

.about__srv li, .about__note {
  opacity: 0; transform: translateY(10px);
  transition: opacity .55s ease,
              transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--cd, 0s) + var(--rd, 0s));
}
.panel.is-on .about__srv li,
.panel.is-on .about__note { opacity: 1; transform: none; }

/* 🔴**行が主**、列は少しだけずらす（タクヤ指摘 2026-08-09
   「下の方が先に表示されてる」）。
   列を主にしていたら、左の列を5行目まで出し切ってから右へ移るので、
   **左下が右上より先**に出ていた。目は上から下へ動くので不自然。
   いまは3列の1行目 → 3列の2行目 …の順で、素直に上から下へ流れる。 */
.about__col:nth-child(1) { --cd: 0s; }
.about__col:nth-child(2) { --cd: .07s; }
.about__col:nth-child(3) { --cd: .14s; }
.about__srv li:nth-child(1) { --rd: .30s; }
.about__srv li:nth-child(2) { --rd: .48s; }
.about__srv li:nth-child(3) { --rd: .66s; }
.about__srv li:nth-child(4) { --rd: .84s; }
.about__srv li:nth-child(5) { --rd: 1.02s; }
.about__note { --rd: 1.14s; }

/* ⚠️動きを減らす設定・no-anim では全部出したままにする */
body.no-anim .about__srv li, body.no-anim .about__note {
  opacity: 1; transform: none; transition: none;
}
body.no-anim .about__col h3::after { transform: scaleX(1); transition: none; }
body.no-anim .panel.is-on .about__col h3 { animation: none; opacity: .55; }
@media (prefers-reduced-motion: reduce) {
  .about__col h3::after { transition: none; }
  .panel.is-on .about__col h3 { animation: none; opacity: .55; }
  .about__srv li, .about__note { transition: none; }
}

/* ══ 作品一覧のページ（works.html）════════════════════════════
   ⚠️トップと違って**普通に縦スクロールする**。
     1画面に収める作りだと、作品が増えたときに送りが延々と続く。
   ⚠️1画面完結の仕掛け（scroll-snap・パネルの固定）はこのページでは切る。 */
body.page-works { overflow-y: auto; }
/* ⚠️トップの「左に列がある」ことを示す縦線は、このページでは意味が無い
   （中身が横いっぱいに広がるので、作品の上を線が横切るだけになる） */
body.page-works::before { display: none !important; }
body.page-works html, html:has(body.page-works) { scroll-snap-type: none; }

.allworks {
  position: relative; z-index: 2;
  padding: 150px 6.94444vw 120px;
  min-height: 100vh;
}
.allworks__head {
  display: flex; align-items: baseline; gap: 20px;
  margin-bottom: 26px;
}
.allworks__title {
  font-family: "Anton", var(--sans); font-weight: 400;
  font-size: clamp(30px, 4vw, 52px); letter-spacing: .01em;
}
/* ⚠️一覧側の作品は高さを固定しない。並ぶ数が決まっていないので、
   幅に対する比で決める（縦長の作品も横長の作品も同じ形の枠に収まる）。 */
body.page-works .works-grid {
  flex: none; align-content: start;
  /* 🔴2列にする（タクヤ指示 2026-08-09）。
     自動で詰める形だと画面が広いほど1件が小さくなり、
     何の仕事か分からなくなる。2列なら大きさが読める。 */
  /* ⚠️トップの代表作と同じ寸法にそろえる（タクヤ指示 2026-08-09）。
     幅の上限も余白も段差も、あちらと同じ値にする。
     ⚠️あちら（.works-grid[data-mode="featured"]）を変えたらここも直す。 */
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 30px;
  max-width: 980px;
}
/* ⚠️比率もトップと同じ 16:9。4:3 だと1件が縦に大きく、印象が変わる */
body.page-works .works-grid img,
body.page-works .works-grid video { height: auto; aspect-ratio: 16 / 9; }
/* 🔴2026-08-19：縦長は切らない（トップの代表作と同じ考え方）。
   ⚠️こちらは23件中15件が縦長。ここを直さないと作品ページの大半が欠けたまま。 */
body.page-works .works-grid figure[data-orient="portrait"] img,
body.page-works .works-grid figure[data-orient="portrait"] video {
  aspect-ratio: var(--ar, 3 / 4);
}
/* 🔴2026-08-19：作品ページだけ**石垣状**に並べる（タクヤ「まかせる」）。
   縦長を切らないようにした結果、横長の下に大きな空きができた
   （縦長は横長の約2.5倍の高さ。23件中15件が縦長）。
   格子のままだと、行の高さが一番高いものに合わさって隙間になる。
   → 段組み（column）にすると、高さの違うものが下から詰まって空きが消える。

   ⚠️並ぶ順番が「左の列を上から下 → 右の列」に変わる。
     作品の前後関係は管理画面の並びで決まるので、意味は壊れない。
   ⚠️途中で切れないよう break-inside: avoid を必ず付ける。
   ⚠️段差（margin-top）はここでは付けない。列の途中に入って不自然になる。 */
body.page-works .works-grid {
  /* 🔴2026-08-22：段組み → 格子に戻した（タクヤ指示）。
     段組みだと「左の列を上から下 → 右の列」の順に並び、
     管理画面の並べ替えと見た目が合わなかった。
     格子なら **左 → 右 → 次の行** で、番号どおりに並ぶ。
     ⚠️戻したぶん、縦長の下に空きが出る（2026-08-19に段組みへ変えた理由がこれ）。
       気になるなら column-count:2 / display:block に戻すだけで元通り。 */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 30px;
  align-items: start;        /* 高さの違う作品を上そろえにする */
  max-width: 980px;
}
/* 🔴2026-08-22：縦横比が混ざるタブだけ段組みに戻す（works.js が付け外しする）。
   ⚠️段組みでは gap が効かないので、figure に下余白を戻す。 */
body.page-works .works-grid.is-columns {
  display: block;
  column-count: 2;
  column-gap: 30px;
}
body.page-works .works-grid.is-columns figure { margin: 0 0 26px; }
body.page-works .works-grid figure {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  /* ⚠️2026-08-22：格子に戻したので間隔は gap に任せる。
     margin-bottom を残すと下だけ二重に空く */
  margin: 0;
  width: 100%;
}

/* 🔴左に固定の「戻る」（タクヤ指示 2026-08-09）。
   ⚠️下にも同じ物を置かない。以前「infoが2つある」と指摘された形になる。
     下にあった Back to Top は消してある。 */
.back-link {
  position: fixed; z-index: 6;
  left: 6.94444vw; top: 104px;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Prompt", var(--sans); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; opacity: .6;
  transition: opacity .3s ease, gap .3s ease;
}
.back-link::before {
  content: ""; width: 6px; height: 6px;
  border-top: 1px solid currentColor; border-left: 1px solid currentColor;
  transform: rotate(-45deg);
}
.back-link:hover { opacity: 1; gap: 16px; }
@media only screen and (max-width:768px) {
  .back-link { left: 7vw; top: 74px; font-size: 9.5px; }
}

/* 作品一覧の題名。⚠️トップの代表作と同じ見え方にそろえる */
body.page-works .works-grid figcaption {
  margin-top: 10px; font-size: 12px; line-height: 1.6;
  letter-spacing: .04em;
}
@media only screen and (max-width:768px) {
  body.page-works .works-grid figcaption { margin-top: 8px; font-size: 11.5px; }
}

/* 画面に入った作品から出す（works.js が is-in を付ける）。
   ⚠️出たあとの hover は書き直す。書かないと持ち上がらない。 */
body.page-works .works-grid figure {
  opacity: 0; transform: translateY(22px);
  transition: opacity .65s ease, transform .75s cubic-bezier(.22,.61,.36,1);
}
body.page-works .works-grid figure.is-in { opacity: 1; transform: none; }
body.page-works .works-grid figure.is-in:hover { transform: translateY(-4px); }
body.no-anim.page-works .works-grid figure {
  opacity: 1; transform: none; transition: none;
}
@media (prefers-reduced-motion: reduce) {
  body.page-works .works-grid figure { transition: none; }
}

.works-more {
  display: block; margin: 46px auto 0;
  font-family: var(--sans); font-size: 12px; letter-spacing: .12em;
  color: #f3f3f3; background: none; cursor: pointer;
  border: 1px solid rgba(243,243,243,.34); border-radius: 2px;
  padding: 13px 40px; transition: background .3s ease, color .3s ease;
}
.works-more:hover { background: #f3f3f3; color: #000; }

.allworks__back {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 54px;
  font-family: "Prompt", var(--sans); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
  padding-bottom: 6px; border-bottom: 1px solid rgba(243,243,243,.3);
  transition: border-color .3s ease, gap .3s ease;
}
.allworks__back::before {
  content: ""; width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-left: 1px solid currentColor;
  transform: rotate(-45deg);
}
.allworks__back:hover { border-bottom-color: #f3f3f3; gap: 18px; }

@media only screen and (max-width:768px) {
  .allworks { padding: 110px 7vw 90px; }
  /* 🔴スマホは1列（タクヤ指示 2026-08-09）。2列だと1件が160px幅になる
     ⚠️2026-08-19に段組み（column）へ変えたので、grid の指定では効かない。
       列数を1にする。 */
  body.page-works .works-grid {
    /* 🔴2026-08-22：スマホも**2列にそろえる**（タクヤ選択）。
       それまでは格子のタブだけ1列で、段組みのタブは2列になっており、
       タブを切り替えるたび列数が変わっていた（実測で確認）。 */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* ⚠️2026-08-22：ここで column-gap: 0 と書いたら、**格子の横の隙間まで0**になり
       作品同士がくっついた（実測 横0px）。段組みを打ち消すのは column-count だけでよい。
       ⚠️gap より後ろに column-gap を書くと、gap の横方向を上書きする。順番に注意。 */
    column-count: auto;
    /* ⚠️2026-08-22：段組みのタブ（縦26/横30）と数値をそろえる。
       タブを切り替えたときに詰まり方が変わって見えないようにする。 */
    gap: 26px 30px;
  }
  body.page-works .works-grid figure { margin-bottom: 18px; }
  body.page-works .works-grid figure:nth-child(2n) { margin-top: 0; }
  .works-more { width: 100%; padding: 13px 0; margin-top: 34px; }
  .allworks__back { margin-top: 40px; }
}

/* 🔴通し番号（01 / 02 / 03）も画面に出さない（タクヤ指示 2026-08-09）。
   ⚠️左のナビに 01/02/03 が出ているので、画面の中にもう一度は要らない。
     こちらは飾りなので、隠さず**完全に消して**場所も空ける。 */
.sec__label { display: none; }

/* 🔴見出し（Selected Works / About / Contact）は画面に出さない
   （タクヤ指示 2026-08-09「もはやこれいらない」）。
   ⚠️消さずに**隠す**。左のナビに現在地が出ているので画面には要らないが、
     検索と読み上げには見出しが要る。要素を消すと拾えなくなる。
   ⚠️1文字ずつ出す動き（.ch）も一緒に見えなくなる。狙いどおり。 */
.sec__title {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* 何枚目か（1 - 4）。線の下に縦で置く。
   ⚠️PCには左のナビ（01/02/03）があるので出さない。二重になる。
   ⚠️最後の画面では案内ごと消えるので、この数字も一緒に消える。 */
.scroll-hint__num { display: none; }
@media only screen and (max-width:768px) {
  .scroll-hint__num {
    display: block;
    writing-mode: vertical-rl; text-orientation: mixed;
    font-family: "Prompt", var(--sans); font-size: 9.5px;
    letter-spacing: .18em; opacity: .5; white-space: nowrap;
  }
}

/* ⚠️動きを減らす設定の人には遅れを付けない（cursor.js 側でも見ている） */
@media (prefers-reduced-motion: reduce) {
  .cur { transition: none !important; }
}

/* ══ 拡大表示の作り直し（2026-08-15 タクヤ指摘「画像と文字がかぶって醜い」）══
   これまで文字は左下に浮かせていたので、縦長の画像や長い説明で絵に重なっていた。
   **上に画像・下に文字**と場所を分ける。
   ⚠️この指定は元の .viewer 系より後ろに置くこと（同じ強さなら後が勝つ）。 */
.viewer {
  flex-direction: column; justify-content: center; align-items: stretch;
  gap: 14px; padding: 64px 6.94444vw 40px;
}
.viewer__stage {
  max-width: 100%; max-height: none;
  flex: 0 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.viewer__stage img, .viewer__stage video {
  max-width: 100%; max-height: 58vh; object-fit: contain;
}
.viewer__meta {
  position: static; left: auto; bottom: auto;
  max-width: 46vw; flex: 0 0 auto;
}

/* 画像が複数ある時の点 */
.viewer__dots { display: flex; justify-content: center; gap: 7px; flex: 0 0 auto; }
.viewer__dot {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(243,243,243,.32); cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.viewer__dot:hover { background: rgba(243,243,243,.6); }
.viewer__dot.is-cur { background: #f3f3f3; transform: scale(1.35); }

/* 作品の行き来（左右の矢印は画像の切り替えに使うので、こちらに置いた） */
.viewer__works { display: flex; gap: 14px; margin-top: 12px; }
.viewer__wnav {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: "Prompt", var(--sans); font-size: 10px;
  letter-spacing: .12em; color: #f3f3f3; opacity: .45;
  transition: opacity .2s ease;
}
.viewer__wnav:hover { opacity: 1; }

@media only screen and (max-width: 768px) {
  .viewer { padding: 56px 5vw 28px; gap: 10px; }
  .viewer__stage img, .viewer__stage video { max-height: 46vh; }
  .viewer__meta { max-width: 100%; }
}

/* ══ 画像の切り替え（2026-08-15 タクヤ指摘）══════════════════════
   ①置き場の高さを固定する。空になっても縮まないので、**下の文字が動かない**
     （これまでは入れ替えの一瞬だけ空になり、文字がせり上がっていた）
   ②送った向きへ滑らせながら出す
   ⚠️この指定は上の .viewer 系より後ろに置くこと（同じ強さなら後が勝つ）。 */
.viewer__stage { height: 58vh; flex: 0 0 auto; }
.viewer__stage img, .viewer__stage video { max-height: 100%; }

@keyframes vw-in-r { from { opacity: 0; transform: translateX(26px); }
                       to { opacity: 1; transform: none; } }
@keyframes vw-in-l { from { opacity: 0; transform: translateX(-26px); }
                       to { opacity: 1; transform: none; } }
.viewer__stage .is-in-r { animation: vw-in-r .34s cubic-bezier(.22,1,.36,1) both; }
.viewer__stage .is-in-l { animation: vw-in-l .34s cubic-bezier(.22,1,.36,1) both; }

@media only screen and (max-width: 768px) {
  .viewer__stage { height: 46vh; }
}
@media (prefers-reduced-motion: reduce) {
  .viewer__stage .is-in-r, .viewer__stage .is-in-l { animation: none; }
}

/* 画像の下の点（2026-08-15 タクヤ指示で数字をやめ、これだけにした）。
   ⚠️単独で「何枚あって今どれか」を示すので、前より大きく・間隔を広げる。
   ⚠️押せる的が小さすぎると指で当たらない。見た目は9pxだが当たり判定は22px。 */
.viewer__dots { gap: 0; margin-top: 4px; }
.viewer__dot {
  width: 22px; height: 22px; border-radius: 0;
  background: none; position: relative;
}
.viewer__dot::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(243,243,243,.3);
  transition: background .2s ease, transform .2s ease;
}
.viewer__dot:hover { background: none; }
.viewer__dot:hover::before { background: rgba(243,243,243,.6); }
.viewer__dot.is-cur { background: none; transform: none; }
.viewer__dot.is-cur::before { background: #f3f3f3; transform: scale(1.3); }

/* ══ 矢印の位置と点の見え方（2026-08-15 タクヤ指摘）════════════════
   矢印：画像と同じ枠(.viewer__row)の中央に置く。枠の高さ＝画像の置き場なので
     画面の大きさが変わっても必ず画像の中心に来る。
     ⚠️CSSは他の要素の位置を参照できない。同じ親に入れるのが唯一の確実な方法。
   点  ：消えていたのではなく**薄すぎて見えていなかった**（暗い地に30%の灰色9px）。
   ⚠️この指定は上の .viewer 系より後ろに置くこと（同じ強さなら後が勝つ）。 */
.viewer__row {
  position: relative; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
}
.viewer__nav { top: 50%; margin-top: -22px; }
.viewer__nav--prev { left: 3vw; }
.viewer__nav--next { right: 3vw; }

.viewer__dots { margin-top: 10px; }
.viewer__dot::before {
  width: 10px; height: 10px;
  background: rgba(243,243,243,.18);
  border: 1px solid rgba(243,243,243,.55);
  box-sizing: border-box;
}
.viewer__dot:hover::before { background: rgba(243,243,243,.5); border-color: #f3f3f3; }
.viewer__dot.is-cur::before {
  background: #f3f3f3; border-color: #f3f3f3; transform: scale(1.15);
}

/* 矢印に下地（2026-08-15 タクヤ「左のぼたんが見えない」）。
   白い線だけだと、明るい絵の上で消える。作品ごとに絵が違うので下地で固定する。 */
.viewer__nav {
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(243,243,243,.28);
  border-radius: 50%;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: background .18s ease, border-color .18s ease, opacity .18s ease;
}
.viewer__nav:hover { background: rgba(0,0,0,.62); border-color: #f3f3f3; opacity: 1; }
/* ⚠️枠が1px増えるぶん、矢印の絵が中心からずれる。位置を合わせ直す */
.viewer__nav::before { left: 14px; top: 13px; }
.viewer__nav--prev::before { left: 16px; }

/* 白い絵の上でも読めるように（2026-08-15）。
   薄い黒丸＋白矢印だと、白い画面写真の上で消えていた。 */
.viewer__nav {
  background: rgba(0,0,0,.58);
  border-color: rgba(243,243,243,.45);
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.viewer__nav:hover { background: rgba(0,0,0,.78); }
/* 矢印の線にも影を付ける。丸の縁が絵に溶けても線だけは残る */
.viewer__nav::before { filter: drop-shadow(0 1px 2px rgba(0,0,0,.85)); }

/* 🔴矢印を画像より確実に上へ（2026-08-15）。
   画像の切り替えに付けた transform が重なり順の基準を作るため、
   HTMLで画像より前にある左矢印が**画像の下に潜っていた**（右は無事）。
   ⚠️動きを足した時は、重なり順への影響も見ること。 */
.viewer__row { z-index: 0; }
.viewer__stage { position: relative; z-index: 1; }
.viewer__nav { z-index: 3; }
.viewer__close { z-index: 4; }

/* ══ 置き場を画像に合わせる／矢印の丸を消す（2026-08-15 タクヤ指示）══
   ⚠️この指定は上の .viewer 系より後ろに置くこと（同じ強さなら後が勝つ）。 */

/* ①高さを画像に合わせる。点が画像のすぐ下に付く */
.viewer__stage { height: auto; max-height: 58vh; }
.viewer__stage img, .viewer__stage video { max-height: 58vh; }
.viewer__dots { margin-top: 12px; }

/* 🔴2026-08-19：**縦長のときだけ**大きく出す（タクヤ指示）。
   「作品が小さい」のは縦長の話で、横長は今までの大きさでよい、とのこと。
   ⚠️縦長は高さで大きさが決まるので、上限を上げないと小さいまま。
     横長は幅で決まるため、上げても大きくならず説明文が押し出されるだけだった。
   ⚠️76vhを超えると説明文が画面の外に出る（実測）。 */
.viewer[data-orient="portrait"] .viewer__stage { max-height: 74vh; }
.viewer[data-orient="portrait"] .viewer__stage img,
.viewer[data-orient="portrait"] .viewer__stage video { max-height: 74vh; }

/* ②丸い下地をやめる。
   ⚠️線の影は残す。消すと白い画面写真の上で矢印が見えなくなる（実測で確認済み）。 */
.viewer__nav {
  background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.viewer__nav:hover { background: none; opacity: .55; }
.viewer__nav::before {
  left: 15px; top: 14px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.9)) drop-shadow(0 0 6px rgba(0,0,0,.6));
}
.viewer__nav--prev::before { left: 17px; }

@media only screen and (max-width: 768px) {
  .viewer__stage { max-height: 46vh; }
  .viewer__stage img, .viewer__stage video { max-height: 46vh; }
  /* 🔴縦長だけ広げる（PCと同じ考え方）。
     ⚠️スマホは説明文が折り返して縦に伸びるので、PCより控えめにする。 */
  .viewer[data-orient="portrait"] .viewer__stage { max-height: 62vh; }
  .viewer[data-orient="portrait"] .viewer__stage img,
  .viewer[data-orient="portrait"] .viewer__stage video { max-height: 62vh; }
}


/* ══════════════════════════════════════════════════════════
   🔴2026-08-21：スマホで指が届く大きさにする（タクヤ「まかせる」）
   実測で当たり判定が44pxに足りないものが7か所あった。

   ⚠️**見た目は変えない。** 余白を足して同じだけ引くので、位置も文字も動かない。
   ⚠️疑似要素（::before / ::after）は使わない。
     `.works-tab::after` は**下線**、`.back-link::before` は**矢印**に
     使われていて、上書きすると装飾が壊れる（実際に一度壊した）。
   ⚠️下線は bottom:0 が基準なので、足した余白のぶんだけ戻す。
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* ── 上下に12px。19px + 24px = 43px … 端末の丸めで44pxに届く ── */
  /* ⚠️折り返した上下の段が重なると、隣の段が反応してしまう。
     足す余白（13px×2＝26px）より行間を広くしておく */
  .works-tabs { row-gap: 36px; }
  .works-tab {
    padding-top: 16px; padding-bottom: 16px;
    margin-top: -16px; margin-bottom: -16px;
  }
  /* 足した余白のぶん、下線を元の位置へ戻す */
  .works-tab::after { bottom: 16px; }
  .works-tab:not(.is-active)::before { bottom: 13px; }

  .back-link {
    padding-top: 15px; padding-bottom: 15px;
    margin-top: -15px; margin-bottom: -15px;
  }
  /* ⚠️box-sizing:border-box だと余白が内側に入って**箱が大きくならない**。
     この3つは content-box に戻してから余白を足す */
  .header__title {
    box-sizing: content-box;
    padding-top: 12px; padding-bottom: 12px;
    margin-top: -12px; margin-bottom: -12px;
  }
  /* ── 印は上下左右に広げる（周りに何も無い） ── */
  /* ⚠️2026-08-22 修正：padding＋負のマージンだと**位置がずれる**。
     実測でハンバーガーが右へ13px押し出され、画面端まで6pxになっていた
     （本来はヘッダーの余白31px）。位置を動かさない当たり判定に変える。
     ⚠️この2つに他の ::after が無いことは確認済み。 */
  /* ⚠️2026-08-22：ここで position:relative を足したら、**絶対配置だった
     ハンバーガーが流し込みに戻って大きくずれた**（中心84px・右端から348px）。
     絶対配置の要素はそれ自体が ::after の基準になるので、指定は要らない。 */
  .header__instagram::after, .burger::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 46px; height: 46px;
  }
  /* ⚠️display:flex も入れたが、ハンバーガーの箱が変わるので入れない。
     中心の2pxずれは、線の位置を2px下げるだけで足りる（下で調整）。 */
  .top-explore__button {
    box-sizing: content-box;
    padding-top: 8px; padding-bottom: 8px;
    margin-top: -8px; margin-bottom: -8px;
  }

  /* ⚠️日本語の一文だけ読める大きさにする（英字の小さいラベルは意匠なので触らない） */
  .about__ask { font-size: 12.5px; }
}


/* ══════════════════════════════════════════════════════════
   🔴2026-08-22：「View All Works」を見出しの横に置く（タクヤ選択・B案）
   前は作品の下＝画面の外で、**一度も見えていなかった**。
   ⚠️元の位置合わせは transform: translateX(-50%) で作品列の中央に寄せていた。
     同じ transform に出現アニメ（translateY）も入っているので、
     打ち消しは**両方まとめて**書く。分けると片方が残る。
   ══════════════════════════════════════════════════════════ */
#works .works-head {
  /* ⚠️2026-08-22 修正：見出し「Selected Works」は**画面に出ていない**
     （読み上げ用に1px角で隠してある）。「見出しの横」は成立しないので、
     作品の並びの**右端の上**に置く。左端は 01/02/03 のメニューの場所なので空ける。 */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 980px;         /* 作品の並びと同じ幅にそろえる */
  margin: 0 0 18px;
}
#works .works-head .sec__title { margin-bottom: 0; }
#works .works-head a.works-all {
  align-self: center;
  margin: 0;
  left: auto;
  width: auto;
  transform: translateY(14px);        /* 出る前 */
}
#works .panel.is-on .works-head a.works-all,
.panel.is-on #works-head-dummy,
#works.is-on .works-head a.works-all,
.panel.is-on .works-head a.works-all { transform: none; }   /* 出た後 */

/* スマホは見出しの下に回り込ませる（横幅いっぱいの帯のまま） */
@media (max-width: 760px) {
  #works .works-head { gap: 14px; margin-bottom: 24px; }
  #works .works-head a.works-all { width: 100%; justify-content: center; }
}


/* 🔴2026-08-22：スマホの上部にあった Instagram の丸アイコンを消す（タクヤ指示）。
   実測で **Contactボタンと重なっていた**（重なり範囲 25×21px）。
   ⚠️導線は失われない。Contact の面に「Instagram のDM」が元からある。
   ⚠️PCでは今まで通り出す。 */
@media (max-width: 760px) {
  .header__instagram { display: none; }
}

/* 🔴2026-08-22：フェードインが何度も繰り返る件（タクヤ指摘）。
   `.panel.is-on [data-in]` で見せているため、面を出入りするたび再生されていた。
   一度出たものは戻さない。 */
.panel.has-shown [data-in] { opacity: 1; transform: none; filter: blur(0); }
.panel.has-shown .about__ask[data-in] { opacity: .5; }


/* 🔴2026-08-22：ロゴとハンバーガーの位置をそろえる（タクヤ指摘）。
   実測（スマホ390px）
     ロゴ         top30 / left 6vw(23.4px) / 高24 → 中心42
     ハンバーガー   top34 / right 5vw(19.5px) / 高20 → 中心44
   縦が2px下、横が4px外側だった。**元からのずれ**で、左右も非対称だった。
   ⚠️ロゴの文字サイズを変えたら、この数字も合わせ直すこと。 */
@media (max-width: 760px) {
  .burger { top: 32px; right: 6vw; }
}


/* 🔴2026-08-22：スマホで Contact の黒帯とコピーライトの高さをそろえる（タクヤ指摘）。
   実測（390x844）
     黒帯        bottom50 / 高35 → 中心 776.5
     コピーライト  bottom34 / 高24 → 中心 798     ← 21px下だった
   中心を合わせるには bottom = 844-776.5-12 = 55.5px。
   ⚠️元の bottom:34px は「SNSアイコンと当たらないように」の逃がしだったが、
     スマホのインスタは消したので、その理由は無くなっている。 */
@media (max-width: 760px) {
  .top-footer { bottom: 55px; }
}


/* 🔴2026-08-22：Aboutの本人写真（タクヤ指示）。
   ⚠️Aboutは1画面に収める作りなので、**名前の横**に置いて高さを増やさない。
   ⚠️元画像は正方形（2692x2692）。丸く抜いて名前と高さをそろえる。 */
.about__who {
  display: flex;
  align-items: center;
  gap: 20px;
}
.about__photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  /* ⚠️暗い画面に白い丸が浮くので、細い枠で地に馴染ませる */
  border: 1px solid rgba(243, 243, 243, .18);
}
.about__whotext { min-width: 0; }

@media (max-width: 760px) {
  .about__who { gap: 14px; }
  .about__photo { width: 68px; height: 68px; }
}


/* 🔴2026-08-22：スマホの下端をもっと下げる（タクヤ指示）。
   中心はそろえたまま、まとめて下へ。
     黒帯        bottom 50 → 28（中心 798.5）
     コピーライト  bottom 55 → 34（中心 798）
   ⚠️端に寄せすぎると、機種によっては下のバーに隠れる。28pxで止める。 */
@media (max-width: 760px) {
  .top-explore { bottom: 28px; }
  .top-footer { bottom: 34px; }
}


/* 🔴2026-08-22：作品ページの下に余白を足す（タクヤ指示・**PCだけ**）。
   いまは最後の作品の下が124pxで、唐突に終わって見える。
   ⚠️スマホは入れない（タクヤ指示）。指で送る量が増えるため。 */
@media (min-width: 761px) {
  body.page-works .works-grid { padding-bottom: 240px; }
}


/* 🔴2026-08-22：一度は点滅（about-flicker）を付けたが、**取り消した**（タクヤ指摘
   「その他は点滅じゃなくて普通にフェードだった」）。
   ⚠️点滅しているのは （Creative / Web）だけが正しい。
     この一文は [data-in] の普通のフェードのまま。再び付けないこと。 */

/* 🔴2026-08-22：PCでも Contact の黒帯とコピーライトの高さをそろえる（タクヤ指示）。
   実測（1440x900）黒帯 中心863.5 ／ コピーライト 中心846（18px上）
   → bottom を 900-863.5-12 = 24.5 ≒ 24px にする */
@media (min-width: 761px) {
  .top-footer { bottom: 24px; }
}


/* 🔴2026-08-22：トップの代表作が48px切れていた（タクヤ指摘
   「余白ないね だからアバウトにすぐ切り替わる」）。
   実測（1440x900）面900px に対し 並びの下端が948px。逃げ場が無く、
   少し送るとAboutへ飛んでいた。
   ⚠️段差（ずらし）の意匠は残したいので、**幅を少し詰めて画像を低くする**。
     980px → 890px で 1列475→430px、画像267→242px。2段で約50px縮む。
   ⚠️見出し行（ボタン）も同じ幅にそろえる。ずれると右端が合わない。 */
#works .works-grid[data-mode="featured"] { max-width: 820px; }
#works .works-head { max-width: 820px; }
/* ⚠️2026-08-22：段差も少し詰める。縦の余りを作るため（意匠は残す） */
#works .works-grid[data-mode="featured"] figure:nth-child(2n) { margin-top: 24px; }


/* 🔴2026-08-22：代表作の高さを画面の高さ基準にする（タクヤ「下の作品の下に余白が欲しい」）。
   いままで画像は aspect-ratio で**横幅から高さが決まって**いたため、
   画面が低いと入り切らなかった。実測：高さ720で −106px、800で −26px（切れていた）。
   ⚠️高い画面で大きくなりすぎないよう上限（230px）を付ける。
   ⚠️works.html の一覧は触らない。ここは代表作（トップ）だけ。 */
#works .works-grid[data-mode="featured"] img,
#works .works-grid[data-mode="featured"] video {
  aspect-ratio: auto;
  height: min(22vh, 230px);
  object-fit: cover;
}

/* 🔴2026-08-22：この一文は**最後に**出す（タクヤ指摘「順番的にフェードは最後じゃない？」）。
   見出しの点滅は 0s と .07s に始まり .9s 続く（＝ .97s まで光る）。
   既定の calc(var(--i)*100ms) だと .3s で、見出しより先に出ていた。 */
.panel.is-on .about__ask[data-in] { transition-delay: 1.15s; }


/* 🔴2026-08-22：Aboutを**上から順にフェード**させる（タクヤ指示）。
   実測で Creative / Web の列だけフェードが無く、いきなり出ていた。
   流れ： 02(0s) → About(.1s) → 名前(.2s) → 左の列(.45s) → 右の列(.6s) → その他(1.15s)
   ⚠️見出しの点滅も列に合わせて遅らせる。列が出る前に見出しだけ光ると順番が崩れる。 */
#info .about__col {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1),
              transform .6s cubic-bezier(.22,.61,.36,1);
}
#info .about__col:nth-child(1) { transition-delay: .45s; }
#info .about__col:nth-child(2) { transition-delay: .60s; }
/* ⚠️2026-08-22：ここを間違えて**列が消えた**。
   隠す側を （ID入り＝強い）にしたのに、
   出す側をクラスだけ（）にしたため、常に隠れたままだった。
   さらに  は「パネルの中の#info」の意味で、#info自身がパネルなので存在しない。
   **強さをそろえる。#info 自身に is-on / has-shown が付く。** */
#info.is-on .about__col,
#info.has-shown .about__col { opacity: 1; transform: none; }

/* 見出しの点滅を、それぞれの列に合わせる */
#info.is-on .about__col:nth-child(1) h3 { animation-delay: .45s; }
#info.is-on .about__col:nth-child(2) h3 { animation-delay: .60s; }

/* ⚠️動きを切っている端末では、そのまま出す */
body.no-anim #info .about__col { opacity: 1; transform: none; transition: none; }


/* 🔴2026-08-22：スマホの代表作を2列にする（タクヤ指示）。
   実測で1列だと4件が270〜300pxはみ出し、3件目以降が見えていなかった。
   ⚠️2026-08-09に「2列だと1件が160px幅になる」として1列にした経緯があるが、
     いまは画面幅の半分弱（約165px）を使えるので条件が違う。
   ⚠️縦に4段だったものが2段になるので、画像の高さは少し上げてよい。 */
@media (max-width: 760px) {
  #works .works-grid[data-mode="featured"] {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 12px;
    max-width: none;
  }
  /* 段差（ずらし）は2列に戻ったので付け直す。1列のときは0にしてあった */
  #works .works-grid[data-mode="featured"] figure:nth-child(2n) { margin-top: 18px; }
  /* ⚠️2026-08-22：比率を元に戻す（タクヤ指示）。PC側で入れた
     「高さを画面基準にする」指定を、スマホでは打ち消して 16:9 に戻す。
     2列なら1列165px前後で、16:9でも高さ93px程度に収まる。 */
  #works .works-grid[data-mode="featured"] img,
  #works .works-grid[data-mode="featured"] video {
    aspect-ratio: 16 / 9;
    height: auto;
  }
  #works .works-head { max-width: none; }
  /* 🔴2026-08-22：ボタンを作品の**下**へ（タクヤ指示）。
     面は元から display:flex なので、並び順だけ入れ替える。
     ⚠️2列にして作品が収まったので、下でも画面内に残る。
       1列だった時は下に置くと画面外に出て押せなかった。 */
  #works .works-grid { order: 1; }
  #works .works-head  { order: 2; margin: 22px 0 0; }
}


/* 🔴2026-08-22：スマホのこま送り対策（タクヤ報告）。実測で見つけた2つ。
   ① 閉じているメニューが**全画面をぼかし続けていた**
      .drawer は inset:0・backdrop-filter: blur(18px) saturate(1.2) のままで、
      閉じている間（opacity:0/visibility:hidden）も指定が生きていた。
      背後をぼかす処理はスマホで特に重い。**開いている時だけ**にする。
      ⚠️見た目は変わらない。閉じている時は見えていないため。
   ② 粒子（.grain）が inset:-120px で常時動いていた。
      スマホでは止める。粒は残るので質感は変わらない。 */
body:not(.menu-open) .drawer {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
@media (max-width: 760px) {
  .grain { animation: none !important; }
}

/* ══ 🔴2026-09-10：単調さ解消・動きのクオリティ向上（Fable5指示）════════
   ⚠️2026-09-10訂正：Creative/Web列の data-in="l"/"r" と .about__srv li の
     独自ステージャーは、この直後に**別の場所で既にちゃんと動いていた**
     （#info .about__col が .45s/.60s で列をフェード＝2026-08-22タクヤ指示、
      .about__srv li が --rd で行ごとに .30s刻みでフェード＝2026-08-09指摘）。
     実測せずに「data-inが無い＝動いていない」と誤診し、二重に定義して
     詳細度で潰し合っていた。列とliの追加分は削除し、事故を防ぐ。
   [data-in="scale"] だけは競合する既存ルールが無く、実測で正しく動くと
   確認済みなので残す（.about__who の写真だけ、他と違う入り方にする）。 */
[data-in="scale"] { transform: scale(.92); }
body.no-anim [data-in="scale"] { transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-in="scale"] { transform: none; }
}

/* ── ボタンにシャイン（光の帯）を足す。全面グレップで確認済み：
   このサイトに rotateX/rotateY/perspective も、ボタンの光の演出も
   一件も無かった（hall-works には既にある）。
   ⚠️矢印は既に ::after を使っているので、シャインは ::before に置く。
   ⚠️色を入れ替える既存のhoverはそのまま（transform には触らない）。 */
.works-all, .cform__send { position: relative; overflow: hidden; }
.works-all::before, .cform__send::before {
  content: ""; position: absolute; top: 0; left: -60%;
  width: 34%; height: 100%; pointer-events: none;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-16deg); transition: left .55s cubic-bezier(.2,.7,.2,1);
}
.works-all:hover::before, .cform__send:hover::before { left: 130%; }
@media (prefers-reduced-motion: reduce) {
  .works-all::before, .cform__send::before { display: none; }
}