:root{
 --univ-color: #ff5611;
 --univ-color-rgb: 255, 86, 17;
}

*{ box-sizing:border-box; }

.page .d-in-b {
  display: inline-block;
}
/* =========
   Character base (影なし)
========= */
.chara{
  position:relative;
  display:inline-grid;
  place-items:center;
  padding:14px;
  border-radius:var(--radius);
  text-decoration:none;
  outline:none;
  transform-origin:50% 92%;
}

.chara img{
  display:block;
  width:260px;
  height:auto;
  filter:none;                 /* 影なし */
  transform: translate3d(0,0,0) rotate(0deg) scale(1);
  will-change: transform;
}

.chara .glow{
  position:absolute;
  inset: 10px;
  border-radius:var(--radius);
  z-index:-1;
  opacity:0;
  transform: scale(.92);
  transition: opacity 260ms ease, transform 260ms ease;
  filter: blur(12px);
}

.chara:focus-visible{
  box-shadow: 0 0 0 4px var(--ring);
}

/* =========
  ④ walk: とことこ接近
========= */
.card {
  overflow: hidden;
}
.chara--walk {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  z-index: 5;
}

.chara--walk img {
  display: block;
  transform: translate3d(20px, 6px, 0) scale(.88);
  transform-origin: center bottom;
}

.chara--walk .glow {
  position: absolute;
  inset: auto 50% 0 auto;
  opacity: 0;
  transform: translateX(50%) scale(.9);
  transition:
    opacity 240ms ease
    transform 1020ms cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}

/* 押してる間の補助 */
.chara--walk:active .glow,
.chara--walk:focus-visible .glow,
.chara--walk.is-walk .glow {
  opacity: 1;
  transform: translateX(50%) scale(1);
}

.chara--walk.is-walk img {
  animation: walkIn 1020ms cubic-bezier(.2, .8, .2, 1) 1 both;
}

/* PC hover は hover できる環境だけ */
@media (min-width: 560px) and (hover: hover) and (pointer: fine) {
  .chara--walk:hover img {
    animation: walkIn 1020ms cubic-bezier(.2, .8, .2, 1) 1 both;
  }

  .chara--walk:hover .glow {
    opacity: 1;
    transform: translateX(50%) scale(1);
  }
}

/* フォーカスリング */
.chara--walk:focus-visible {
  outline: 2px solid #333;
  outline-offset: 4px;
}

@keyframes walkIn{
  0% {
    transform: translate3d(0, 18px, 0) scale(1) rotate(0deg);
  }
  10% {
    transform: translate3d(-6px, 12px, 0) scale(1.08) rotate(-1.4deg);
  }
  20% {
    transform: translate3d(6px, 18px, 0) scale(1.14) rotate(1.2deg);
  }
  30% {
    transform: translate3d(-4px, 25px, 0) scale(1.22) rotate(-1deg);
  }
  40% {
    transform: translate3d(4px, 50px, 0) scale(1.28) rotate(.8deg);
  }
  50% {
    transform: translate3d(-4px, 80px, 0) scale(1.28) rotate(-1deg);
  }
  60% {
    transform: translate3d(4px, 100px, 0) scale(1.28) rotate(.8deg);
  }
  70% {
    transform: translate3d(-2px, 150px, 0) scale(1.3333) rotate(-1deg);
  }
  80% {
    transform: translate3d(2px, 180px, 0) scale(1.8333) rotate(.8deg);
  }
  90% {
    transform: translate3d(-3px, 200px, 0) scale(1.9333) rotate(-1deg);
  }
  100% {
    transform: translate3d(10px, 240px, 0) scale(2) rotate(-1deg);
  }
}

/* =========
  Reduced motion
========= */
@media (prefers-reduced-motion: reduce){
  .chara img{
    animation:none !important;
    transition:none;
  }
  .chara .glow{ transition:none; }
}

/* =========
  Footer
========= */
.foot{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.foot p{
  margin:0;
  font-size:12.5px;
  color:var(--muted);
}

/* 内部リンク*/
html {
  scroll-behavior: smooth;
}
 #about_logo,#about_kouki,#about_color,#about_charactor,#about_use_logo,#about_use_cha {
  scroll-margin-top: 180px;
}
.linksDown {
 list-style: none;
 padding: 0!important;
 display: flex;
 flex-wrap: wrap;
 margin-bottom: 1em;
}
.linksDown li {
  width: 50%;
  padding: 5px;
  height: 4em;
  line-height: 1.3;
}
.linksDown a {
  color: #333;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  border:1px solid #26c5cf;
  height: 100%;
  align-items: center;
  font-weight:500;
  padding: .5em;
  position: relative;
  transition: all .4s;
  font-size: 0.85em;
}
.linksDown a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #26c5cf;
}
.linksDown a span {
  display: inline-block;
}
.linksDown a:hover {
  background: #26c5cf;
}
.linksDown a:hover::after {
  border-top: 8px solid #fff;
}
@media print, screen and (min-width: 960px) {
    .linksDown li {
    width: calc(100% / 3);
  }
  .linksDown a {
    font-size: 1em;
  }
  .linksDown a br {
    display: none;
  }
}

.visualLogo {
  max-width: 460px;
  margin-top:2em;
  margin-bottom: 2em;
}
.visualKoki {
  max-width: 150px;
}
.page p.ttl-bold {
  font-size: 1.2em;
}
.flex2colD3 {
 align-items: center;
}
.fCenter img{
  margin: auto;
  display: block;
}
.univColor {
  max-width: 280px;
}
.about-color {
  margin: 0 .2em 1.5em;
}
.about-color dt,
.about-showl dt{
  font-weight: 500;
  width: 6.5em;
}
.about-color dt span {
  color: var(--univ-color);
  font-weight: 700;
}
.about-showl {
  margin:2em 0 0;
}
.about-color dd,
.about-showl dd {
  margin: 0;
  width: calc(100% - 6.5em);
}
.about-showl dt span {
  display: inline-block;
  padding-left: 0.5em;
  padding-right: 0.5em;
  background-color: rgb(var(--univ-color-rgb), 0.15);
}
.about-showl dt,
.about-showl dd {
 margin-bottom: .5em;
}
.page .dlFlex {
  display: flex;
  flex-wrap: wrap;
}

.page h3.h3Bk {
  color: #333;
}
.chara2 img{
  height:130px;
}
.about-showl {

}
ul.about-showl {
  padding: 0;
  margin-top: 0;
}
ul.about-showl li {
  position: relative;
}
ul.about-showl li::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background-color: var(--univ-color);
  border-radius: 1000px;
  position: absolute;
  left: -1em;
  top: .75em

}
.pageLink a.disabled {
  pointer-events: none;
  cursor: pointer;
  background: #eee;
}
@media print, screen and (max-width: 959.9px) {
  .charactor {
    margin: auto;
    width: 320px;
  }
  .visualLogo {
   margin-left: auto;
   margin-right: auto;
   display: block;
  }
}
@media print, screen and (min-width: 960px) {
.charactor {
  display: flex;
  align-items: baseline;
}
.chara2 img{
  margin-bottom: 30px; 
  margin-left: 20px;;
}
}