/* 哲学トーク — bright pop, clean bones */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700;800;900&family=Yuji+Boku&display=swap');
@font-face{
  font-family:"YDWAosagiLocal";
  src:url("./YDWaosagi.otf") format("opentype");
  font-display:swap;
}
@font-face{
  font-family:"YDWBananaSlipLocal";
  src:url("./YDWbananaslipplus.otf") format("opentype");
  font-display:swap;
}

:root {
  --bg: #fffdf7;
  --bg2: #f7f3e9;
  --bg3: #ffffff;
  --ink: #101010;
  --ink-mid: rgba(16,16,16,.72);
  --ink-dim: rgba(16,16,16,.45);
  --red: #f23846;
  --blue: #1479d4;
  --yellow: #ffd83d;
  --accent: var(--red);
  --border: rgba(16,16,16,.18);
  --sans: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  --display: "YDWBananaSlipLocal", "YDWAosagiLocal", "Noto Sans JP", sans-serif;
  --display-accent: "YDWBananaSlipLocal", "Noto Sans JP", sans-serif;
  --serif: var(--sans);
  --page-px: clamp(18px, 5vw, 72px);
  --transition: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:700;font-size:15px;line-height:1.75;
  overflow-x:hidden;
}
::selection{background:var(--yellow);color:var(--ink)}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--ink);border:2px solid var(--bg)}
a{color:inherit;text-decoration:none}
input,textarea,button{font-family:var(--sans);font-weight:700}
input::placeholder,textarea::placeholder{color:var(--ink-dim)}

body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  background-image:
    linear-gradient(rgba(16,16,16,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,16,16,.025) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.5), transparent 55%);
}

a.text-link{color:var(--blue);border-bottom:4px solid var(--yellow)}

.memo{
  background:#bfe9ff;
  border:2px solid var(--ink);
  box-shadow:7px 7px 0 rgba(16,16,16,.14);
  padding:18px 20px;
  position:relative;
}
.memo::before{content:none}

.tape{
  position:absolute;width:64px;height:20px;
  background:var(--yellow);
  border:0;
  transform:rotate(-4deg);
  z-index:2;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:.6em 1.3em;
  font-size:18px;font-weight:900;color:var(--ink);
  border:3px solid var(--ink);border-radius:.4em;background:var(--yellow);
  box-shadow:.1em .1em 0 var(--ink);
  cursor:pointer;transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{
  transform:translate(-.05em,-.05em);
  box-shadow:.15em .15em 0 var(--ink);
  background:var(--yellow);
}
.btn:active{
  transform:translate(.05em,.05em);
  box-shadow:.05em .05em 0 var(--ink);
}
.btn-accent{color:#fff;border-color:var(--ink);background:var(--red);box-shadow:.1em .1em 0 var(--ink)}
.btn-accent:hover{background:#ff5964}

.press-btn{
  display:inline-block;
  position:relative;
  color:var(--ink);
  font-size:18px;
  font-weight:900;
  font-family:var(--sans);
  cursor:pointer;
  background:var(--ink);
  border-radius:.4em;
  border:0;
  padding:0;
  overflow:visible;
}
.press-btn span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:.6em 1.3em;
  background:var(--yellow);
  border:3px solid var(--ink);
  border-radius:.4em;
  transform:translate(0,0);
  transition:transform .12s ease;
}
.press-btn:hover span{
  transform:translate(-.08em,-.08em);
}
.press-btn:active span{
  transform:translate(.03em,.03em);
}
.press-btn-accent span{
  color:#fff;
  background:var(--red);
}

.contact-pop-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 18px;
  color:#fff;
  background:var(--red);
  border:3px solid var(--ink);
  border-radius:999px;
  font-size:16px;
  font-weight:900;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .14s var(--transition), box-shadow .14s var(--transition), background .14s;
}
.contact-pop-btn:hover{
  transform:translate(-2px,-2px) rotate(-1deg);
  box-shadow:6px 6px 0 var(--yellow);
  background:#ff5964;
}

.link-lead{
  display:inline-block;
  font-size:14px;
  font-weight:900;
  letter-spacing:.04em;
  color:#fff;
  background:var(--blue);
  border:2px solid var(--ink);
  padding:4px 10px;
  margin-bottom:20px;
  transform:rotate(-2deg);
  box-shadow:3px 3px 0 var(--ink);
}
.link-lead:hover{
  animation:labelHop .34s var(--transition) both;
}

.sticker{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--blue);color:#fff;border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  padding:5px 12px;font-size:13px;font-weight:900;line-height:1;
  transform:rotate(-1.5deg);
}
.sticker.red{background:var(--red)}
.sticker.yellow{background:var(--yellow);color:var(--ink)}
.sticker:hover,.stamp:hover{
  animation:labelHop .34s var(--transition) both;
}

@keyframes labelHop{
  0%{translate:0 0}
  45%{translate:0 -5px}
  100%{translate:0 0}
}

.hero-heading-pop{
  clip-path:inset(0 100% 0 0);
  animation:headlineTypeIn 1.15s steps(13,end) .18s forwards, headlineTinyShake 2.6s steps(2,end) 1.35s infinite;
  transform-origin:left center;
  will-change:clip-path, transform;
}
@keyframes headlineTypeIn{
  to{clip-path:inset(0 0 0 0)}
}
@keyframes headlineTinyShake{
  0%,100%{transform:translate(0,0) rotate(-.15deg)}
  20%{transform:translate(.7px,-.4px) rotate(.12deg)}
  40%{transform:translate(-.5px,.6px) rotate(-.08deg)}
  60%{transform:translate(.4px,.2px) rotate(.1deg)}
  80%{transform:translate(-.3px,-.3px) rotate(-.12deg)}
}

.stamp{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:5px 13px;border:3px solid var(--red);
  color:var(--red);background:rgba(255,255,255,.82);
  font-size:13px;font-weight:900;line-height:1;
  transform:rotate(-6deg);
  box-shadow:0 0 0 2px rgba(242,56,70,.12) inset;
}

.life-switch-loose{
  position:relative;
  display:grid;
  gap:10px;
  justify-items:start;
  width:max-content;
  margin:6px 0 0 24px;
  transform:rotate(-5deg);
}
.switch-container{
  position:relative;
  width:150px;
  height:60px;
  background:#fff8d9;
  border:3px solid var(--ink);
  border-radius:50px;
  box-shadow:4px 4px 0 var(--ink);
}
.toggle-checkbox{display:none}
.switch{
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  height:100%;
  transform:translateY(-50%);
  border-radius:50px;
  overflow:hidden;
  cursor:pointer;
}
.toggle{
  position:absolute;
  width:80px;
  height:50px;
  top:2px;
  left:4px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding-left:12px;
  background:#fff;
  border:3px solid var(--ink);
  border-radius:50px;
  box-shadow:3px 3px 0 var(--blue);
  transition:all .24s var(--transition);
}
.led{
  width:12px;
  height:12px;
  background:var(--border);
  border:2px solid var(--ink);
  border-radius:50%;
  box-shadow:0 0 0 0 rgba(255,216,61,0);
  transition:all .24s var(--transition);
}
.toggle-checkbox:checked + .switch .toggle{
  left:63px;
  background:var(--red);
  box-shadow:3px 3px 0 var(--yellow);
}
.toggle-checkbox:checked + .switch .led{
  background:var(--yellow);
  box-shadow:0 0 13px 4px rgba(255,216,61,.75);
}
.switch:hover .toggle{transform:rotate(-2deg)}
.life-switch-message{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:7px 12px;
  background:var(--ink);
  color:#fff;
  border-radius:999px;
  font-family:"Yuji Boku", "Hiragino Mincho ProN", serif;
  font-size:16px;
  font-weight:400;
  transform:rotate(-2deg);
  -webkit-text-stroke:.35px currentColor;
  text-shadow:.7px .7px 0 rgba(255,255,255,.16);
}

.todo-check{
  appearance:none;
  width:18px;
  height:18px;
  flex:0 0 auto;
  border:2px solid var(--ink);
  background:#fff;
  border-radius:3px;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.todo-check:checked{
  background:var(--yellow);
}
.todo-check:checked::after{
  content:"";
  width:9px;
  height:14px;
  border-right:3px solid var(--red);
  border-bottom:3px solid var(--red);
  transform:rotate(42deg) translateY(-2px);
}

@keyframes float{
  0%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
  100%{transform:translateY(0)}
}
.camera-float{
  animation:float 2.5s ease-in-out infinite;
}

@keyframes tilt{
  0%{transform:rotate(-1deg)}
  50%{transform:rotate(1deg)}
  100%{transform:rotate(-1deg)}
}
.meteor-tilt{
  animation:tilt 2.8s ease-in-out infinite;
}

.reveal-on-scroll{
  opacity:0;
  transform:translateY(14px) rotate(var(--reveal-rotate, 0deg));
  transition:
    opacity .52s var(--transition) var(--reveal-delay, 0ms),
    transform .52s var(--transition) var(--reveal-delay, 0ms);
}
.reveal-on-scroll.is-visible{
  opacity:1;
  transform:translateY(0) rotate(var(--reveal-rotate, 0deg));
}
@media (prefers-reduced-motion: reduce){
  .reveal-on-scroll{
    opacity:1;
    transform:none;
    transition:none;
  }
}

.site-loader{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  background:#fffdf7;
  transition:opacity .35s var(--transition), visibility .35s var(--transition);
}
.site-loader.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.loadingspinner{
  --square:26px;
  --offset:30px;
  --duration:2.4s;
  --delay:.2s;
  --timing-function:ease-in-out;
  --in-duration:.4s;
  --in-delay:.1s;
  --in-timing-function:ease-out;
  width:calc(3 * var(--offset) + var(--square));
  height:calc(2 * var(--offset) + var(--square));
  padding:0;
  position:relative;
  transform:rotate(-4deg);
}
.loadingspinner div{
  position:absolute;
  display:grid;
  place-items:center;
  width:var(--square);
  height:var(--square);
  padding:0;
  margin:0;
  border:3px solid var(--ink);
  border-radius:3px;
  color:var(--ink);
  font-size:15px;
  font-weight:900;
  line-height:1;
  box-shadow:3px 3px 0 var(--ink);
}
.loadingspinner .square1{
  left:calc(0 * var(--offset));
  top:calc(0 * var(--offset));
  background:var(--yellow);
  animation:square1 var(--duration) var(--delay) var(--timing-function) infinite,
    squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;
}
.loadingspinner .square2{
  left:calc(0 * var(--offset));
  top:calc(1 * var(--offset));
  background:var(--red);
  color:#fff;
  animation:square2 var(--duration) var(--delay) var(--timing-function) infinite,
    squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;
}
.loadingspinner .square3{
  left:calc(1 * var(--offset));
  top:calc(1 * var(--offset));
  background:var(--blue);
  color:#fff;
  animation:square3 var(--duration) var(--delay) var(--timing-function) infinite,
    squarefadein var(--in-duration) calc(2 * var(--in-delay)) var(--in-timing-function) both;
}
.loadingspinner .square4{
  left:calc(2 * var(--offset));
  top:calc(1 * var(--offset));
  background:#fff;
  animation:square4 var(--duration) var(--delay) var(--timing-function) infinite,
    squarefadein var(--in-duration) calc(3 * var(--in-delay)) var(--in-timing-function) both;
}
.loadingspinner .square5{
  left:calc(3 * var(--offset));
  top:calc(1 * var(--offset));
  background:var(--yellow);
  animation:square5 var(--duration) var(--delay) var(--timing-function) infinite,
    squarefadein var(--in-duration) calc(4 * var(--in-delay)) var(--in-timing-function) both;
}
@keyframes square1{
  0%{left:calc(0 * var(--offset));top:calc(0 * var(--offset))}
  8.333%{left:calc(0 * var(--offset));top:calc(1 * var(--offset))}
  100%{left:calc(0 * var(--offset));top:calc(1 * var(--offset))}
}
@keyframes square2{
  0%{left:calc(0 * var(--offset));top:calc(1 * var(--offset))}
  8.333%{left:calc(0 * var(--offset));top:calc(2 * var(--offset))}
  16.67%{left:calc(1 * var(--offset));top:calc(2 * var(--offset))}
  25%{left:calc(1 * var(--offset));top:calc(1 * var(--offset))}
  83.33%{left:calc(1 * var(--offset));top:calc(1 * var(--offset))}
  91.67%{left:calc(1 * var(--offset));top:calc(0 * var(--offset))}
  100%{left:calc(0 * var(--offset));top:calc(0 * var(--offset))}
}
@keyframes square3{
  0%,100%{left:calc(1 * var(--offset));top:calc(1 * var(--offset))}
  16.67%{left:calc(1 * var(--offset));top:calc(1 * var(--offset))}
  25%{left:calc(1 * var(--offset));top:calc(0 * var(--offset))}
  33.33%{left:calc(2 * var(--offset));top:calc(0 * var(--offset))}
  41.67%{left:calc(2 * var(--offset));top:calc(1 * var(--offset))}
  66.67%{left:calc(2 * var(--offset));top:calc(1 * var(--offset))}
  75%{left:calc(2 * var(--offset));top:calc(2 * var(--offset))}
  83.33%{left:calc(1 * var(--offset));top:calc(2 * var(--offset))}
  91.67%{left:calc(1 * var(--offset));top:calc(1 * var(--offset))}
}
@keyframes square4{
  0%{left:calc(2 * var(--offset));top:calc(1 * var(--offset))}
  33.33%{left:calc(2 * var(--offset));top:calc(1 * var(--offset))}
  41.67%{left:calc(2 * var(--offset));top:calc(2 * var(--offset))}
  50%{left:calc(3 * var(--offset));top:calc(2 * var(--offset))}
  58.33%{left:calc(3 * var(--offset));top:calc(1 * var(--offset))}
  100%{left:calc(3 * var(--offset));top:calc(1 * var(--offset))}
}
@keyframes square5{
  0%{left:calc(3 * var(--offset));top:calc(1 * var(--offset))}
  50%{left:calc(3 * var(--offset));top:calc(1 * var(--offset))}
  58.33%{left:calc(3 * var(--offset));top:calc(0 * var(--offset))}
  66.67%{left:calc(2 * var(--offset));top:calc(0 * var(--offset))}
  75%{left:calc(2 * var(--offset));top:calc(1 * var(--offset))}
  100%{left:calc(2 * var(--offset));top:calc(1 * var(--offset))}
}
@keyframes squarefadein{
  0%{transform:scale(.75);opacity:0}
  100%{transform:scale(1);opacity:1}
}

.logo-watermark{
  position:absolute;pointer-events:none;z-index:-1;
  width:min(520px,70vw);opacity:.06;filter:contrast(1.3);
}

.kyoku-marquee{
  overflow:hidden;
  background:#fff;
  padding:8px 0 5px;
}
.kyoku-marquee-track{
  display:flex;
  width:max-content;
  gap:46px;
  animation:kyokuSlide 18s linear infinite;
  will-change:transform;
}
.kyoku-marquee img{
  width:clamp(260px,44vw,560px);
  height:auto;
  display:block;
  flex:0 0 auto;
  filter:contrast(1.45) brightness(.72);
}
@keyframes kyokuSlide{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 23px))}
}
@media (prefers-reduced-motion: reduce){
  .kyoku-marquee-track{animation:none}
}

.marker{
  text-decoration:underline;
  text-decoration-color:var(--red);
  text-decoration-thickness:.18em;
  text-underline-offset:.12em;
}
.marker.blue{ text-decoration-color:var(--blue) }

.headline-logo{
  font-family:var(--display);
  font-weight:400;
  font-synthesis-weight:none;
  letter-spacing:0;
  font-feature-settings:"palt";
}

.headline-logo .marker{
  text-decoration-thickness:.14em;
  text-underline-offset:.05em;
}

.accent-hand{
  font-family:var(--display-accent);
  font-weight:400;
  font-synthesis-weight:none;
  letter-spacing:0;
}

.scribble-wrap{
  position:relative;
  display:inline-block;
  isolation:isolate;
}

.scribble-word{
  display:inline-block;
  position:relative;
}

.scribble-word.tilt-left{transform:rotate(-2.5deg) translateY(2px)}
.scribble-word.tilt-right{transform:rotate(2deg) translateY(-1px)}

.scribble-line{
  position:absolute;pointer-events:none;z-index:-1;
  height:.18em;background:var(--red);
  transform:rotate(-1.5deg) skewX(-10deg);
}

.scribble-circle{
  position:absolute;pointer-events:none;border:4px solid var(--blue);
  border-radius:50%;transform:rotate(-10deg);
}

.scribble-arrow{
  position:absolute;pointer-events:none;color:var(--ink);
  font-family:var(--display-accent);font-size:28px;line-height:1;
  transform:rotate(-18deg);
}

.scribble-note{
  position:absolute;z-index:2;color:var(--red);
  font-family:var(--display-accent);font-size:18px;line-height:1;
  transform:rotate(-8deg);
  white-space:nowrap;
}

.wobble-mark{
  position:absolute;pointer-events:none;z-index:1;
  width:110px;height:28px;
}

@media(max-width:768px){
  .hero-title-tilt{
    transform:rotate(-6deg)!important;
    transform-origin:left center!important;
    margin-top:36px!important;
    margin-bottom:28px!important;
  }
  .hero-headline-note{
    right:18px!important;
    top:.34em!important;
    font-size:15px!important;
    transform:rotate(6deg)!important;
  }
  .hero-headline-arrow{display:none}
  .hero-headline-circle{
    left:-4px!important;
    top:.22em!important;
    width:1.25em!important;
    height:.7em!important;
    border-width:3px!important;
  }
  .hero-headline-wobble{
    left:1.3em!important;
    bottom:.06em!important;
    width:82px!important;
  }
}

.speech{
  position:relative;background:#fff;border:3px solid var(--ink);
  border-radius:999px;padding:16px 24px;font-weight:900;
  box-shadow:5px 5px 0 rgba(16,16,16,.12);
}
.speech::after{
  content:'';position:absolute;left:38px;bottom:-16px;width:26px;height:26px;
  background:#fff;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);
  transform:rotate(45deg);
}

.pixel{
  image-rendering:pixelated;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing:0;
  line-height:1;
}

@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

@media(max-width:768px){
  body{font-size:14px}
  .nav-links-desktop{display:none!important}
  .nav-hamburger{display:flex!important}
  .btn{width:100%}
}

@media(max-width: 760px){
  .discography-grid{
    grid-template-columns:1fr!important;
    max-width:360px!important;
    gap:44px!important;
  }
  .discography-cover{
    border-width:3px!important;
    box-shadow:4px 4px 0 rgba(16,16,16,.14)!important;
  }
  .podcast-layout{
    grid-template-columns:1fr!important;
    gap:32px!important;
    max-width:100%!important;
  }
  .podcast-layout aside{
    position:relative!important;
    top:auto!important;
  }
  .podcast-episode{
    padding:18px 0!important;
  }
  .podcast-title{
    font-size:14px!important;
    line-height:1.65!important;
    word-break:normal;
    overflow-wrap:anywhere;
  }
}