@charset "UTF-8";
/* CSS Document */
:root{
  --base: 80,85,90; /*#464B50*/
  --white: 245,249,252; /*#F5F9FC*/
  --gray: 190,195,200; /*#BEC3C8*/
  --ash: 225,230,240; /*#E1E6F0*/
  --blue: 86,141,196; /*#568DC4*/
  --off: 255,255,255; /*#FFFFFF*/
  --back: 130,165,180; /*#82a5b4*/
  --spacer: 275px;
  --gutter: 45px;
}
* {
  color: rgba(var(--base),1);
  font-family: new-atten, dnp-shuei-gothic-gin-std, sans-serif;
  font-style: normal;
  font-weight: 400;
  box-sizing: border-box;
  text-decoration: none;
}
body {
  font-size: 13.25px;
  text-align: justify;
  word-break: break-all;
  line-height: 2.2;
  margin: 0;
  padding: 0;
}
.no-scroll {
  overflow: hidden;
  pointer-events: none;
  overscroll-behavior: none;
  touch-action: none;
  scrollbar-gutter: stable;
}
h1,h2,h3,h4,div,dl,dt,dd,ul,li,img,a,p,span,iframe,small,strong,figure,address,select,input,button,textarea,i,b,u,hr,em,sub,time,nav {
  margin: 0;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  list-style: none;
  text-align: justify;
  word-break: break-all;
  outline: none;
  background: none;
  border: none;
}
button {
  cursor: pointer;
}
br {
  line-height: 1;
}
sub {
  bottom: initial;
}
small {
  font-size: 85%;
}
img {
  display: block;
  width: 100%;
}
a {
  cursor: pointer;
}
p a {
  text-decoration: underline;
}
.eng {
  font-family: adobe-caslon-pro, serif;
}

/* indention */
.brWid {
  display: block !important;
}
.brMid {
  display: none !important;
}
.brNar {
  display: none !important;
}

/* underconstruction */
.underconstruction {
  padding: var(--gap);
}
.underconstruction p {
  margin: auto;
  text-align: center;
}

/**/
body {
  opacity: 0;
  transition: opacity 0.5s ease;
}

body.loaded {
  opacity: 1;
}

.loader {
  width: 100%;
  height: 100%;
  background: rgba(var(--off),1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 1;
  visibility: visible;
  transition: 0.5s ease;
}
.loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


/* compornent parts */
[data-appear] {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: .4s ease-in .04s;
}
[data-appear].is-show {
  visibility: visible;
  opacity: 1;
  pointer-events: initial;
}

img.cover {
  height: 100%;
  object-fit: cover;
}

.sns {
  display: flex;
}
.sns a + a {
  margin: 0 0 0 11px;
}
.sns img {
  width: 32px;
  transition: .2s ease;
}
.sns a:hover img {
  transform: scale(1.06);
}

.reservation {
  width: 210px;
  padding: 0 50px 0 0;
  position: fixed;
  bottom: 40px;
  right: 0;
  cursor: pointer;
  z-index: 10;
}
.reservation span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: rgba(var(--white),1);
  background-color: rgba(var(--white),0);
  border-radius: 50%;
  position: relative;
}
.reservation i {
  padding: 5px 0 0 5px;
  font-size: 80%;
  letter-spacing: .02rem;
  white-space: nowrap;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.reservation b {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
}
.reservation b img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  animation: circle 8s ease infinite;
}
@keyframes circle {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}
.reservation .is-show {
  opacity: 1;
  visibility: visible;
}
.reservation hr {
  width: 55px;
  height: 1px;
  background-color: rgba(var(--white),1);
  position: absolute;
  top: 50%;
  left: calc(210px - 55px);
  transform: translate(0,-50%);
  animation: line 8s ease infinite;
}
@keyframes line {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  30% {
    transform: scaleX(0);
    transform-origin: left;
  }
  35% {
    transform: scaleX(100%);
    transform-origin: left;
  }
  90% {
    transform: scaleX(100%);
    transform-origin: right;
  }
  95% {
    transform: scaleX(0);
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}
.reservation span,
.reservation :is(i, b img, hr) {
  transition: .2s ease-in;
}
.reservation:is(.has-action, .has-color) span {
  color: rgba(var(--blue),1);
  background-color: rgba(var(--off),.8);
}
.reservation:is(.has-action, .has-color) hr {
  background-color: rgba(var(--blue),1);
}
.reservation:hover span {
  color: rgba(var(--white),1);
  background-color: rgba(var(--blue));
}
.reservation:hover i {
  letter-spacing: .04rem;
}
.reservation:hover b {
  opacity: 0;
  visibility: hidden;
}

.global {
  display: flex;
  flex-wrap: wrap;
}
.global a {
  line-height: 1.6;
  letter-spacing: .02rem;
  white-space: nowrap;
  position: relative;
}
.global a + a {
  margin: 0 0 0 18px;
  padding: 0 0 0 20px;
}
.global a:before,
.global a:after {
  content: '';
  position: absolute;
}
.global a + a:before {
  width: .5px;
  height: 18px;
  background-color: rgba(var(--base),1);
  top: 50%;
  left: 0;
  transform: translate(0,-65%) rotate(42.5deg);
}
.global a:after {
  width: 0;
  height: 1px;
  border-bottom: 1px solid;
  bottom: -18px;
  left: 50%;
  transform: translate(-50%,0);
  transition: .2s ease-out;
}
.global a:hover:after {
  width: 100%;
}
.global a + a:hover:after {
  width: calc(100% - 20px);
  left: calc(50% + 10px);
}

.title {
  display: flex;
  font-size: 650%;
  letter-spacing: -.01rem;
  color: rgba(var(--ash),1);
  overflow: hidden;
}
.title.clip {
  position: absolute;
  top: calc(var(--spacer) + 60px);
  left: var(--gutter);
  z-index: -1;
}
.title i {
  position: relative;
}

.textbox {
  position: relative;
}
.textbox, .textbox > * {
  display: flex;
  flex-direction: column;
}
.textbox picture {
  margin: 0 0 75px 0;
}
.textbox h3 {
  line-height: 1.6;
}
.textbox h3 i {
  margin: 0 0 5px 0;
  font-size: 190%;
  letter-spacing: .02rem;
}
.textbox p {
  margin: 50px 0 0 0;
}
.textbox p b {
  margin: 30px 0 0 0;
}
.textbox {
  width: 45vw;
  margin: 120px auto 130px;
}
.textbox.top {
  width: initial;
  margin: 0;
  position: absolute;
  top: var(--spacer);
  left: calc(50% + 12.5vw);
}
.textbox.top + .visual {
  margin: 300px 0 0 0;
}

.visual {
  display: flex;
  align-items: center;
  position: relative;
  z-index: -1;
}
.visual .view {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 72.5vw;
  height: 100%;
  max-height: 500px;
  z-index: -1;
}
.visual.left {
  justify-content: flex-start;
}
.visual.right {
  justify-content: flex-end;
}
.visual.center {
  justify-content: center;
}
.visual.center picture {
  width: 45vw;
  aspect-ratio: 1;
}
.visual.left .item {
  right: 0;
}
.visual.right .item {
  left: 0;
}

.item {
  will-change: transform;
  position: absolute;
  z-index: -2;
}
.item001 {
  width: 32.5vw;
  max-width: 450px;
  top: -30%;
}
.item002 {
  width: 42.5vw;
  max-width: 525px;
  top: 82.5%;
}
.item003 {
  width: 57.5vw;
  max-width: 725px;
  top: 2.5%;
  left: 0;
}
.item004 {
  width: 52.5vw;
  max-width: 675px;
  top: 0%;
  right: 0;
}
.item005 {
  width: 37.5vw;
  max-width: 500px;
  top: 75%;
  left: 0;
}
.item006 {
  width: 47.5vw;
  max-width: 660px;
  top: 103%;
  right: 0;
}

.list {
  display: grid;
}
.list a {
  display: flex;
  flex-direction: column;
}
.list span {
  font-size: 90%;
  line-height: 2;
}
.list h2 {
  margin: 25px 0 12px;
  font-size: 104%;
  letter-spacing: .02rem;
}

.hamb {
  position: fixed;
  top: calc(var(--gutter) - 18px);
  left: calc(var(--gutter) - 18px);
  transition: .2s ease-in .2s;
}
.hamb button {
  position: relative;
}
.hamb button > * {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hamb button i {
  width: 45px;
  position: relative;
}
.hamb button b {
  margin: 3px 0 0 0;
  font-size: 70%;
}
.open {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 10;
}
.open.has-action {
  opacity: 1;
  visibility: visible;
  pointer-events: initial;
  filter: drop-shadow(1px 1.5px 0px rgba(var(--white),.84));
}
.open button b {
  letter-spacing: .06rem;
}
.close {
  z-index: 10;
}
.close button b {
  letter-spacing: .04rem;
}

.modal {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: rgba(var(--off),.95);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: 0s;
}
.modal .frame {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  position: relative;
}
.modal > * {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: .5s ease-in .3s;
}
.has-action > * {
  opacity: 1;
  visibility: visible;
  pointer-events: initial;
}

.navigation .frame {
  font-size: 85%;
}
.navigation .frame ul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-57.5%);
}
.navigation .frame li {
  margin: 10px 0;
  text-align: center;
}
.navigation .frame li:not(.logo, .sns) a {
  display: block;
  min-width: 100px;
  text-align: center;
  position: relative;
}
.navigation .frame li:not(.logo, .sns) a:before {
  content: '';
  width: 0;
  height: 1px;
  background-color: rgba(var(--gray),1);
  position: absolute;
  top: 40%;
  left: calc(100% + 25px);
  transition: .3s ease;
}
.navigation .frame li:not(.logo, .sns):hover a:before {
  width: 75px;
}
.navigation .logo {
  padding: 0 0 40px 0;
}
.navigation .logo > * {
  display: flex;
  justify-content: center;
  align-items: center;
}
.navigation .logo img {
  width: 95px;
}
.navigation .sns {
  justify-content: center;
  padding: 30px 0 0 0;
}
.navigation .sns img {
  width: 30px;
}
.navigation .global {
  font-size: 90%;
  position: absolute;
  bottom: var(--gutter);
  left: var(--gutter);
}
.navigation .global a + a {
  margin: 0 0 0 16px;
  padding: 0 0 0 20px;
}
.navigation .global a + a:before {
  height: 15px;
  transform: translate(0,-65%) rotate(42.5deg);
}

.stores .frame {
  width: 80%;
  min-width: 1000px;
  margin: auto;
  padding: 150px 0 150px 60px;
}
.stores .title {
  line-height: 1.2;
  opacity: .5;
  position: fixed;
  bottom: -42px;
  left: -12px;
  white-space:nowrap;
}
.stores .block {
  display: flex;
}
.stores .block + .block {
  margin: 60px 0 0 0;
}
.stores .block > h2 {
  width: 155px;
}
.stores .list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 35px;
  width: calc(100% - 160px);
  padding: 0 0 0 110px;
}
.stores .box {
  flex-direction: row;
  align-items: center;
  gap: 0 20px;
  position: relative;
}
.stores .box:before {
  content: '';
  width: 0;
  height: 0;
  background-color: rgba(var(--ash),.6);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(1);
  transition: .3s ease;
  z-index: -1;
}
.stores .box:hover:before {
  width: calc(100% + 30px);
  height: calc(100% + 30px);
}
.stores .box picture {
  width: 35%;
  height: 100%;
  min-height: 135px;
}
.stores .box div {
  display: flex;
  flex-direction: column;
  width: calc(100% - 35%);
  position: relative;
}
.stores .box h2 {
  margin: 6px 0 0 0;
  font-size: 95%;
  line-height: 1;
}
.stores .box span {
  margin: 15px 0;
  font-size: 75%;
  line-height: 1.8;
  white-space: nowrap;
}
.stores .box em {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25px;
  padding: 1px 0 0 0;
  background-color: rgba(var(--blue),1);
  color: rgba(var(--white),1);
  border-radius: 15px;
  font-size: 72.5%;
}
.stores .box .window {
  width: 15px;
  position: absolute;
  top: 3px;
  right: 3px;
}

.list-base {
  width: 800px;
  margin: auto;
  padding: 150px 0;
}
.list-base h2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 0 90px 0;
}
.list-base h2 i {
  font-size: 310%;
}
.list-base h2 b {
  letter-spacing: .02rem;
}
.list-base hr {
  width: 100%;
  height: 1px;
  margin: 50px 0;
  background-color: rgba(var(--gray),1);
}
.list-base div {
  font-size: 95%;
}
.list-base h3 {
  display: flex;
  align-items: center;
  margin: 20px 0 25px;
  font-size: 108%;
}
.list-base h3 i {
  width: 135px;
}
.list-base h3 b {
  padding: 3px 0 0 15px;
  font-size: 90%;
}
.list-base :is(dl,ul,ol) {
  margin: 20px 0 0 0;
  line-height: 1.8;
}
.list-base li + li {
  margin: 6px 0 0 0;
}
.list-base dl {
  display: flex;
  font-size: 95%;
}
.list-base dt {
  width: 125px;
  white-space: nowrap;
}
.list-base dd {
  width: calc(100% - 125px);
}
.list-base dd p {
  height: 22px;
}
.list-base dd p img {
  width: auto;
  height: 100%;
  object-fit: cover;
}
.list-base div :is(ol,ul,dl) + p,
.list-base dd span + p {
  margin: 40px 0 0 0;
}
.list-base dd span {
  display: flex;
  flex-direction: column;
  margin: 25px 0 0 0;
}
.list-base dd span a {
  display: flex;
}
.list-base dd span a + a {
  margin: 9px 0 0 0;
}
.list-base dd span i {
  width: 150px;
  padding: 0 0 0 calc(1em + 3px);
  position: relative;
  white-space: nowrap;
}
.list-base dd span i:before {
  content: '';
  width: 6px;
  height: 6px;
  border: .5px solid;
  position: absolute;
  top: 7px;
  left: 2px;
}
.list-base dd span b {
  width: calc(100% - 150px);
}
.list-base dd span u {
  position: relative;
}
.list-base dd span u + u:before {
  content: '／';
  margin: 0 1px 0 0;
}
.list-base dd span u br {
  display: none;
}
.list-base ol li {
  padding: 0 0 0 calc(1em + 3px);
  position: relative;
}
.list-base ol li:before {
  content: '';
  width: 6px;
  height: 6px;
  border: .5px solid;
  position: absolute;
  top: 7px;
  left: 2px;
}

.has-action {
  opacity: 1;
  visibility: visible;
  pointer-events: initial;
}

.totop {
  display: flex;
  justify-content: flex-end;
  width: 57px;
  height: 110px;
}
.totop:hover img {
  animation: bounce 0.5s ease-out;
}
@keyframes bounce {
  0% {
      transform: translateY(0);
  }
  25% {
      transform: translateY(-15px);
      animation-timing-function: ease-in;
  }
  50% {
      transform: translateY(0);
  }
  75% {
      transform: translateY(-7px);
      animation-timing-function: ease-in;
  }
  100% {
      transform: translateY(0);
  }
}

header {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  position: relative;
}
header > * {
  display: flex;
  position: absolute;
  color: rgba(var(--white),1);
}
header :is(h1,h2,.sns) {
  left: 55px;
}
header h1 {
  width: 165px;
  top: 57px;
}
header h2 {
  flex-direction: column;
  align-items: flex-start;
  top: 50%;
  transform: translate(0,-30%);
}
header h2 i {
  font-size: 215%;
  line-height: 1.1;
  letter-spacing: .02rem;
}
header h2 b {
  margin: 25px 0 0 0;
  line-height: 2;
  letter-spacing: .02rem;
}
header .global {
  font-size: 90%;
  top: 66px;
  right: 55px;
}
header .global a + a:before {
  background-color: rgba(var(--white),1);
}
header .sns {
  bottom: 54px;
}
.keyvisual {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
}
.keyvisual picture {
  width: 100%;
  height: 100%;
}

section {
  width: 100%;
  position: relative;
}

.concept {
  margin: calc(var(--spacer) * .6) 0 0;
  padding: calc(var(--spacer) * .5) 0 0;
}

.salon {
  margin: calc(var(--spacer) * .5) 0 0;
  padding: calc(var(--spacer) * .5) 0 0;
}
.salon .intro {
  padding: 0 0 0 29vw;
}
.salon .intro h2 {
  margin: 0 0 0 -3px;
}
.salon .intro h3 {
  margin: 0 0 50px 0;
  font-size: 110%;
}
.salon .intro p {
  width: 80%;
  max-width: 725px;
}

.salon .block {
  display: flex;
  align-items: flex-start;
  margin: 100px 0 0 0;
}
.salon .block + .block {
  margin: 150px 0 0 0;
}
.salon .block .text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30vw;
  padding: 10px calc(var(--gutter) + 2vw) 0;
  position: sticky;
  top: calc(50% - 210px);
}
.salon .block .text h2 {
  width: 90%;
  max-width: 200px;
  text-align: center;
}
.salon .block .text h3 {
  margin: 40px 0;
}
.salon .block .text p {
  font-size: 93%;
  line-height: 2;
}
.salon .list {
  grid-template-columns: 1fr 1fr;
  gap: 70px 18px;
  width: 70vw;
}
.salon .list picture {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 450px;
  aspect-ratio: 1;
  overflow: hidden;
}
.salon .list picture img {
  transform: scale(1);
  transition: 10s linear;
}
.salon .list a:hover picture img {
  transform: scale(1.3);
}

.salon .list span + span {
  display: flex;
  align-items: center;
  margin: 20px 0 0 0;
  font-size: 80%;
}
.salon .list span img {
  width: 15px;
  margin: -3px 5px 0 0;
}

.products {
  margin: calc(var(--spacer) * .7) 0 0;
  padding: calc(var(--spacer) * .7) 0 0;
}
.products .title {
  justify-content: flex-end;
}
.products .title i {
  right: -10px;
}
.products .list {
  width: calc(100% - var(--gutter) * 4);
  max-width: 1200px;
  grid-template-columns:repeat(4,1fr);
  gap: 60px 18px;
  margin: 110px auto 0;
}
.products .list h2 {
  text-align: center;
}
.products .list a > * {
  width: 100%;
}

.recruit {
  margin: calc(var(--spacer) * .7) 0 0;
  padding: calc(var(--spacer) * .7) 0 0;
}
.recruit .title.clip {
  top: calc(var(--spacer) - 125px);
}     
.recruit .textframe.right > * {
  padding-left: calc(50% + 1.5vw);
}

.stickyframe {
  display: grid;
  align-items: start;
}
.stickyframe > * {
  grid-area: 1/1;
}
.stickytext {
  padding: calc(var(--gutter) * 3) 0 calc(var(--gutter) * 2) 0;
}
.textframe + .textframe {
  margin: calc(var(--spacer) * 2.5) 0 0 0;
}
.textframe.left > * {
  padding-left: 10vw;
}
.textframe.right > * {
  padding-left: calc(50% + 10vw);
}
.textframe .textbox {
  width: 100%;
  padding-right: var(--gutter);
}
.textframe .textbox > * {
  width: initial;
}
.stickyvisual {
  display: grid;
  justify-content: center;
  align-items: center;
  margin: calc(var(--spacer) * 2.5) 0 calc(var(--spacer) * 1.3);
  position: sticky;
  top: 50%;
  transform: translate(0,-50%);
  z-index: -1;
}
.stickyvisual > * {
  grid-area: 1/1;
  visibility: hidden;
  opacity: 0;
  transition: .3s ease-in;
}
.stickyvisual .is-show {
  visibility: visible;
  opacity: 1;
}

.entry {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.entry a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  aspect-ratio: 1;
  margin: 75px 0 100px;
  border-radius: 50%;
  position: relative;
  transition: .2s ease;
}
.entry a i {
  width: calc(100% + 5px);
  aspect-ratio: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transform-origin: center;
  animation: rolling 40s linear infinite;
  transition: .5s ease-out;
}
@keyframes rolling {
  0% { transform: translate(-50%,-50%) rotate(0deg); }
  100% { transform: translate(-50%,-50%) rotate(360deg); }
}
.entry a b {
  font-size: 115%;
  letter-spacing: .02rem;
  transition: .2s ease;
}
.entry a:hover {
  background-color: rgba(var(--blue));
  color: rgba(var(--white),1);
}
.entry a:hover i {
  width: calc(100% + 50px);
  opacity: 0;
  visibility: hidden;
}
.entry a:hover b {
  letter-spacing: .08rem;
}
.entry p {
  font-size: 95%;
  text-align: center;
}

header.child {
  display: flex;
  justify-content: center;
  width: 20vw;
  min-width: 200px;
  height: initial;
  padding: 60px 0 0 var(--gutter);
}
.child h1 {
  width: 155px;
  position: relative;
  top: initial;
  left: initial;
}

main.child {
  width: 57.5vw;
  min-width: 600px;
  margin: auto;
  font-size: 95%;
}
.child .title {
  margin: 0 0 0 -3px;
}
.backpage {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20vw;
  padding: 0 0 0 calc(var(--gutter) - 15px);
  font-size: 85%;
  letter-spacing: -.02rem;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0,-80%);
  cursor: pointer;
}
.backpage button {
  display: flex;
  justify-content: center;
  align-items: center;
}
.backpage i {
  display: flex;
  align-items: flex-end;
  width: 13px;
  height: 6px;
  margin: 0 9px 0 0;
  position: relative;
  transition: .3s ease;
}
.backpage i hr {
  width: 100%;
  height: 1px;
  background-color: rgba(var(--base),1);
}
.backpage i:before {
  content: "";
  width: 10px;
  height: 1px;
  background-color: rgba(var(--base),1);
  position: absolute;
  top: calc(50% + 2px);
  left: 0;
  transform: rotate(-25deg);
  transform-origin: 0.25px 50%;
}
.backpage:hover i {
  transform: translate(-5px,0);
}
.backpage b {
  white-space: nowrap;
}

.bookmark {
  display: flex;
  flex-direction: column;
  width: 175px;
  font-size: 77.5%;
  position: fixed;
  top: 50%;
  right: 0;
  transform: translate(0,-90%);
}
.bookmark a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.bookmark a + a {
  margin: 6px 0 0 0;
}
.bookmark i {
  padding: 0 0 0 20px;
  white-space: nowrap;
  position: relative;
}
.bookmark i:before,
.bookmark i:after {
  content: "";
  width: 6px;
  height: 1px;
  background-color: rgba(var(--base),1);
  position: absolute;
  top: calc(50% - 2.5px);
  left: 0;
  transform-origin: .5px 50%;
  opacity: 0;
  visibility: hidden;
  transition: .3s ease;
}
.bookmark i:before {
  transform: rotate(45deg);
}
.bookmark i:after {
  transform: rotate(-45deg);
}
.bookmark b {
  width: 9px;
  position: absolute;
  top: 4px;
  left: -1px;
}
.bookmark hr {
  width: 100%;
  height: 1px;
  margin: 0 0 0 18px;
  background-color: rgba(var(--gray),1);
  transition: .6s ease;
}
.bookmark a:hover hr {
  width: 0;
}
.bookmark .is-show i:before,
.bookmark .is-show i:after {
  opacity: 1;
  visibility: visible;
}

.info {
  padding: calc(var(--gutter) * 1.5) 0 0 0;
}
.info h2 {
  display: flex;
  flex-direction: column;
  padding: calc(var(--gutter) * 1.5) 0 0 0;
  font-size: 140%;
  letter-spacing: .04rem;
}
.info h2 i {
  display: block;
  height: 14px;
  margin: 0 0 14px 0;
}
.info h2 img {
  width: initial;
}
.info ul {
  margin: var(--gutter) 0 0;
  line-height: 1.9;
}
.info ul li + li {
  margin: 2px 0 0 0;
}
.info .sns {
  margin: var(--gutter) 0 0;
}
.info .sns a {
  display: flex;
  align-items: center;
}
.info .sns i {
  padding: 0 0 0 .5em;
}
.info p {
  margin: var(--gutter) 0 0;
}
.info .sns img {
  width: 30px;
}
.info picture {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 450px;
}

.menu {
  padding: calc(var(--gutter) * 2.5) 0 0 0;
}
.menu .block {
  margin: calc(var(--gutter) * 1) 0 0 0;
}
.menu .block + .block {
  margin: calc(var(--gutter) * 1.8) 0 0 0;
}
.menu .block :is(h3,li) {
  display: grid;
  grid-template-columns: 1fr 75px;
  justify-content: space-between;
  align-items: center;
}
.menu .block :is(h3,li) b {
  text-align: center;
}
.menu h3 i {
  font-size: 120%;
}
.menu h3 i small {
  margin: 0 0 0 -2px;
}
.menu h3 b {
  margin: 6px 0 0 0;
  font-size: 80%;
}
.menu ul {
  margin: 15px 0 0 0;
  border-top: 1px solid rgba(var(--gray),1);
}
.menu li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(var(--gray),1);
}
.menu p {
  display: flex;
  justify-content: flex-end;
  margin: 18px 0 0 0;
  font-size: 85%;
  line-height: 2;
}

.access {
  padding: calc(var(--gutter) * 2.5) 0;
}
.access .map {
  height: 400px;
  margin: calc(var(--gutter) * .75) 0 calc(var(--gutter) * 1.25);
  background-color: rgba(var(--ash),1);
}
.access .map iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.access .way li a {
  text-decoration: underline;
}
.access .way > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 38px;
  margin: 25px 0 0 -5px;
  padding: 3px 0 0 0;
  border: 1px solid rgba(var(--gray),1);
  border-radius: 20px;
  transition: .3s ease;
}
.access .way > a:hover {
  border: 1px solid rgba(var(--gray),0);
  color: rgba(var(--white),1);
  background-color: rgba(var(--blue),1);
}

footer {
  padding: 125px var(--gutter) 95px;
  font-size: 80%;
  line-height: 2.6;
}
footer h2 {
  width: 125px;
  margin: 75px 0;
}
footer div + div {
  margin: 25px 0 0 0;
}
footer dl {
  display: flex;
  align-items: flex-start;
}
footer dt {
  display: flex;
  align-items: center;
  width: 200px;
  margin: 0 12px 0 0;
}
footer dt i {
  white-space: nowrap;
}
footer dt hr {
  width: 100%;
  height: .5px;
  background-color: rgba(var(--base),1);
  margin: -3px 0 0 12px;
}
footer span {
  display: flex;
  align-items: center;
}
footer .global {
  margin: 6px 0 0 0;
}
footer .global a {
  transition: .2s ease;
}
footer .global a:hover {
  color: rgba(var(--gray),1);
}
footer .global a:after {
  display: none;
}
footer .copy {
  display: flex;
  align-items: center;
  margin: 50px 0 0 0;
}
footer .sns img {
  width: 27px;
}
footer .copy p {
  padding: 5px 0 0 20px;
}
footer .copy i {
  font-size: 125%;
  position: relative;
  bottom: -1px;
}


@media screen and (max-width:1080px) {

  .title,
  .textbox,
  .textbox.top,
  .textframe .textbox,
  .visual.center picture,
  .visual .view,
  .salon .intro,
  .salon .block,
  .products .list,
  .list-base,
  main.child {
    width: 75%;
    max-width: 650px;
    min-width:initial;
  }
  .title {
    margin: auto;
    font-size: 500%;
    line-height: 1.6;
  }
  .title.clip {
    position: initial;
    top: initial;
    left: initial;
  }
  .textbox {
    margin: 90px auto;
  }
  .textbox h3 i {
    margin: 0 0 12px 0;
  }
  .textbox.top {
    margin: 90px auto 0;
    position: initial;
    top: initial;
    left: initial;
  }
  .textbox.top + .visual {
    margin: 110px auto 0 ;
  }
  :not(.stickyvisual).visual {
    position: initial;
  }
  .visual.center picture,
  .visual .view {
    max-height: initial;
    aspect-ratio: 1;
  }
  .visual.left,
  .visual.right {
    justify-content: center;
  }
  .visual.right .item {
    left: initial;
  }
  .view {
    padding: 0;
  }

  .item001 {
    width: 40vw;
    max-width: 375px;
    top: 10%;
  }
  .item002 {
    width: 50vw;
    max-width: 500px;
    top: calc(100% + 10px);
    left: initial;
    right: 0;
  }
  .item003 {
    width: 72.5vw;
    max-width: 660px;
    top: -5%;
    left: calc(50% - 30vw);
  }
  .item004 {
    width: 82.5vw;
    max-width: 660px;
    top: -3%;
    left: initial;
    right: 0;
  }
  .item005 {
    display: none;
  }
  .item006 {
    width: 62.5vw;
    max-width: 660px;
  }

  .concept {
    margin: calc(var(--spacer) * .75) 0 0;
    padding: calc(var(--spacer) * .75) 0 0;
  }
  .salon .intro {
    margin: auto;
    padding: 0;
  }
  .salon .intro h3 {
    margin: 90px auto 50px;
  }
  .salon .intro p {
    width: 100%;
    max-width: initial;
  }
  .salon .block {
    flex-direction: column;
    margin: 100px auto 0 ;
    border-top: 1px solid rgba(var(--base),.5);
  }
  .salon .block + .block {
    margin: 100px auto 0 ;
  }
  .salon .block .text {
    width: 100%;
    padding: 100px 0 90px;
    position: initial;
    top: initial;
  }
  .salon .block .text h2 {
    width: 200px;
  }
  .salon .block .text p {
    font-size: 100%;
    line-height: 2.2;
  }
  .salon .list {
    width: 100%;
  }
  .salon .list picture {
    max-height: initial;
  }
  .products {
    margin: calc(var(--spacer) * 1.1) 0 0;
    padding: calc(var(--spacer) * 1.1) 0 0;
  }
  .products .title {
    justify-content: flex-start;
  }
  .products .title i {
    right:0;
  }
  .products .list {
    grid-template-columns:repeat(2,1fr);
    margin: 110px auto 0;
  }
  .products .list a > * {
    text-align: left;
  }
  .recruit {
    margin: calc(var(--spacer) * 1.1) 0 0;
    padding: calc(var(--spacer) * 1.1) 0 0;
  }
  .stickytext {
    padding: 0;
  }
  .stickyvisual {
    margin: calc(var(--spacer) * 3.3) auto calc(var(--spacer) * 0.75);
  }
  .stickyvisual.center picture {
    width: 100%;
    margin: auto;
  }
  .recruit :is(.textframe.right,.recruit .textframe.left) > * {
    padding: 0;
  }
  .textframe + .textframe {
    margin: calc(var(--spacer) * 4) 0 0 0;
  }
  .textframe .textbox {
    margin: 110px auto 0;
  }
  .textframe .textbox > * {
    z-index: 1;
  }
  .textframe.left .textbox:before {
    content: '';
    width: 100%;
    height: calc(100% + 175px);
    background-color: rgba(var(--off),.75);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    filter: blur(30px);
  }
  .entry a {
    margin: 150px 0 100px;
  }
  .stores .frame {
    width: 750px;
    min-width: initial;
    padding: 200px 0;
  }
  .stores .block {
    flex-direction: column;
    align-items: center;
  }
  .stores .title {
    justify-content: flex-end;
    width: auto;
    font-size: 525%;
    position: absolute;
    top: 30px;
    bottom: initial;
    left: initial;
    right: 0;
  }
  .stores .title i {
    right: -9px;
  }
  .stores .block > h2 {
    width: 175px;
    margin: 0 0 75px 0;
  }
  .stores .block + .block {
    margin: 100px 0 0 0;
  }
  .stores .list {
    width: 100%;
    padding: 0;
  }
  header.child {
    width: auto;
    justify-content: flex-start;
    padding: 60px 0 0 0;
  }
  header.child,
  .backpage {
    padding-left: 50%;
    transform: translate(-320px, 0px);
  }
  .backpage {
    width: initial;
    top: 110px;
  }
  .bookmark {
    width: 160px;
    top: 44px;
    transform: initial;
  }
  .bookmark a {
    background-color: rgba(var(--off),.8);
  }
  .info {
    padding: 0;
  }
  main.child {
    margin: calc(var(--spacer) * .5) auto 0;
  }
  .access {
    padding: calc(var(--gutter) * 2.5) 0 0;
  }
  footer {
    padding: 200px var(--gutter) 95px;
  }

  .list-base dd span a {
    flex-direction: column;
  }
  .list-base dd span a > * {
    width: 100%;
  }
    
}


@media screen and (max-width:840px) {
  body {
    font-size: 13px;
  }

  .brWid {
    display: none !important;
  }
  .brMid {
    display: block !important;
  }
  .brNar {
    display: none !important;
  }

  .title,
  .textbox,
  .textbox.top,
  .textframe .textbox,
  .visual.center picture,
  .visual .view,
  .salon .intro,
  .salon .block,
  .products .list,
  .list-base,
  main.child {
    width: calc(100% - var(--gutter) * 2);
    max-width: initial;
    min-width:initial;
  }

  header h1 {
    top: 50px;
  }
  header .global {
    display: none;
  }
  .hamb {
    left: initial;
    right: calc(var(--gutter) - 15px);
  }
  .open {
    opacity: 1;
    visibility: visible;
    pointer-events: initial;
  }
  .open.has-action {
    filter: drop-shadow(-1px 1.5px 0px rgba(var(--white),.84));
  }
  .open button i img {
    opacity: 0;
    visibility: hidden;
    transition: .3s ease;
  }
  .open.has-action button i img {
    opacity: 1;
    visibility: visible;
    pointer-events: initial;
  }
  .open button i:before {
    content: '';
    width: 100%;
    height: 100%;
    background-image: url(/images/common/ico-scissors-white.svg);
    background-size: cover;
    opacity: 1;
    visibility: visible;
    pointer-events: initial;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: .3s ease;
  }
  .open.has-action button i:before {
    opacity: 0;
    visibility: hidden;
  }
  .open button b {
    color: rgba(var(--white),1);
    letter-spacing: .08rem;
    transition: .3s ease;
  }
  .open.has-action button b {
    color: rgba(var(--base),1);
  }
  .reservation {
    width: 175px;
    padding: 0 20px 0 0;
    bottom: 30px;
  }
  .reservation hr {
    width: 55px;
    left: calc(210px - 55px);
  }

  .item001 {
    width: 47.5vw;
    top: 7.5%;
  }
  .item002 {
    width: 55vw;
    top: 97.5%;
  }
  .item003 {
    width: 87.5vw;
    top: -4%;
    left: calc(50% - 42.5vw);
  }
  .item004 {
    width: 92.5vw;
  }
  .item005 {
    display: none;
  }
  .item006 {
    width: 75vw;
  }

  .stickyvisual {
    margin: 130vw auto calc(var(--spacer) * 0.75);
  }

  .stores .title {
    font-size: 500%;
    left: -10px;
    right: initial;
  }
  .stores .title i {
    right: initial;
  }
  .stores .frame {
    width: 440px;
    padding: 175px 0;
  }
  .stores .list {
    grid-template-columns: 1fr;
  }

  .products {
    margin: calc(var(--spacer) * 1.2) 0 0;
    padding: calc(var(--spacer) * 1.2) 0 0;
  }

  header.child,
  .backpage {
    padding-left: 6.2%;
    transform: initial;
  }
  main.child {
    margin: 115px auto 0;
  }

  footer dl {
    flex-direction: column;
  }  
  footer :is(dl + dl,div + div) {
    margin: 45px 0 0 0;
  }
  footer dl > * {
    width: 100%;
  }
  footer dt {
    font-size: 140%;
  }
  footer dt hr {
    display: none;
  }

}


@media screen and (max-width:640px) {

  body {
    line-height: 2.0;
  }

  .brWid {
    display: none !important;
  }
  .brMid {
    display: none !important;
  }
  .brNar {
    display: block !important;
  }
  
  header :is(h1,h2,.sns) {
    left: 22px;
  }
  header h1 {
    width: 148px;
    top: 40px;
  }
  .hamb {
    top: 25px;
    right: 13px;
  }

  .navigation .global {
    top: 50px;
    bottom: initial;
  }

  .title,
  .textbox,
  .textbox.top,
  .textframe .textbox,
  .visual.center picture,
  .visual .view,
  .salon .intro,
  .salon .block,
  .products .list,
  .entry,
  .list-base,
  .stores .frame,
  main.child,
  footer {
    width: calc(100% - 42px);
  }

  .title {
    font-size: 400%;
    letter-spacing: -.06rem;
  }

  header h2 {
    top: initial;
    bottom: 66px;
    transform: initial;
  }
  header h2 b {
    margin: 15px 0 0 0;
    line-height: 1.7;
  }
  header .sns {
    display: none;
  }

  .reservation {
    width: 100%;
    height: 44px;
    padding: 0;
    bottom: 0;
    right: 0;
    transition: .2s ease-in;
  }
  .reservation:is(.has-action, .has-color) {
    height: 48px;
  }
  .reservation span {
    height: 100%;
    border-radius: 0;
  }
  .reservation:is(.has-action, .has-color) span {
    background-color: rgba(var(--blue),.75);
  }
  .reservation i {
    padding: 3px 0 0 0;
  }
  .reservation:is(.has-action, .has-color) i {
    color: rgba(var(--off),1);
    font-size: 84%;
    letter-spacing: .06rem;
    z-index: 1;
  }
  .reservation b {
    width: 100%;
    height: 1px;
    border-width: 1px 0 0 0;
    border-color: rgba(var(--white),.2);
    border-style: solid;
    position: absolute;
    top: 0;
    left: 0;
  }
  .reservation b img {
    display: none;
    animation: initial;
  }
  .reservation hr {
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    transform: initial;
    opacity: .8;
    animation: line 12s ease infinite;
  }
  .reservation:is(.has-action, .has-color) hr {
    height: 100%;
    opacity: .75;
  }

  .item001 {
    width: 65vw;
    max-width: 350px;
    top: 100.5%;
  }
  .item002 {
    display: none;
  }
  .item003 {
    width: 90vw;
    max-width: 500px;
    left: calc(50% - 45vw);
  }
  .item004 {
    width: 97.5vw;
    max-width: 500px;
  }
  .item005 {
    display: none;
  }
  .item006 {
    width: 85vw;
    max-width: 500px;
    top: 105%;
  }

  .textframe .textbox {
    margin: 90px auto 0;
  }
  .textbox h3 {
    line-height: 1.4;
  }
  .textbox h3 i {
    margin: 0 0 12px 0;
    font-size: 192%;
    letter-spacing: -.02rem;
    word-break: break-word;
    text-align: left;
  }
  .textbox.top {
    margin: 60px auto 0;
  }
  .textbox.top + .visual {
    margin: 66px auto 0;
  }
  .textbox p b {
    display: none;
  }
  .textbox p br {
    display: none;
  }

  .concept {
    margin: calc(var(--spacer) * .1) 0 0;
    padding: calc(var(--spacer) * .5) 0 0;
  }
  .salon .intro h3 {
    margin: 60px auto 50px;
  }
  .list h2 {
    font-size: 100%;
    margin: 25px 0 5px;
    letter-spacing: .04rem;
  }
  .list span {
    font-size: 93%;
    line-height: 1.6;
  }
  .salon {
    margin: calc(var(--spacer) * .5) 0 0;
    padding: calc(var(--spacer) * .5) 0 0;
  }
  .salon .block {
    margin: 75px auto 0;
  }
  .salon .block + .block {
    margin: 85px auto 0;
  }
  .salon .block .text h2 {
    width: 182px;
  }
  .salon .block .text h3 {
    margin: 44px 0;
  }
  .salon .block .text {
    padding: 90px 0 75px;
  }
  .salon .block .text p {
    line-height: 2;
  }
  .salon .list {
    grid-template-columns: 1fr;
    gap: 40px 0px;
  }
  .salon .list span img {
    width: 13px;
    margin: -2px 6px 0 0;
  }
  .salon .list span + span {
    margin: 13px 0 0 0;
    font-size: 82%;
  }
  .salon .list picture {
    height: 62.5vw;
    max-height: 300px;
    aspect-ratio: initial;
  }

  .products {
    margin: calc(var(--spacer) * .7) 0 0;
    padding: calc(var(--spacer) * .7) 0 0;
  }
  .products .list {
    margin: 90px auto 0;
    gap: 50px 10px;
  }
  .products .list h2 {
    margin: 18px 0 10px 0;
  }
  .products .list span br {
    display: none;
  }

  .recruit {
    margin: calc(var(--spacer) * .65) 0 0;
    padding: calc(var(--spacer) * .65) 0 0;
  }
  .stickyvisual {
    margin: 660px auto 200px;
    transform: translate(0,calc(-50% - 10px));
  }
  .textframe + .textframe {
    margin: calc(100vw + 150px) 0 0 0;
  }
  .textframe + .textframe .textbox {
    margin: auto;
  }
  .entry {
    margin: auto;
  }
  .entry p {
    font-size: 100%;
    text-align: justify;
  }
  .entry p br {
    display: none;
  }
  .entry a {
    margin: 90px 0 85px;
  }
  .entry a i {
    width: calc(100% - 15px);
  }

  .global a + a,
  .navigation .global a + a {
    margin: 0 0 0 12px;
    padding: 0 0 0 13px;
  }
  .global a + a:before,
  .navigation .global a + a:before {
    height: 13px;
  }
  .navigation .logo img {
    width: 90px;
  }

  header.child {
    justify-content: center;
    padding: 110px 0 0 0;
    left:initial;
  }
  header.child:before {
    content: '';
    width: 100vw;
    height: 50px;
    background-color: rgba(var(--off),.8);
    border-bottom: .5px solid rgba(var(--base),.3);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
  }
  main.child {
    margin: 30px auto 0;
    font-size: 100%;
    line-height: 2.1;
  }
  .child h1 {
    width: 80px;
    left: initial;
  }
  .bookmark {
    flex-direction: row;
    justify-content: flex-end;
    width: 50%;
    font-size: 72.5%;
    top: 18px;
    right: 20px;
    z-index: 2;
  }
  .bookmark a {
    flex-direction: column;
    background-color: initial;
  }
  .bookmark a + a {
    margin: 0 0 0 15px;
  }
  .bookmark i {
    padding: 0;
  }
  .bookmark i:before,
  .bookmark i:after {
    display: none;
  }
  .bookmark b {
    width: 5px;
    position: relative;
    top: initial;
    bottom: 3px;
    left: initial;
  }
  .bookmark hr {
    width: 3px;
    height: 3px;
    margin: 0 0 0 0;
    border-radius: 50%;
    opacity: 0;
    position: relative;
    bottom: 6px;
  }
  .bookmark .is-show hr {
    opacity: 1;
  }
  .backpage {
    padding: initial;
    font-size: 75%;
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 2;
  }
  .backpage i {
    width: 11px;
    margin: 0 6px 0 0;
  }
  .backpage i hr,
  .backpage i:before {
    height: .6px;
  }

  .info .view {
    display: flex;
    flex-direction: column-reverse;
  }
  .info h2 {
    align-items: center;
    padding: 0 0 calc(var(--gutter) * 1.3) 0;
    font-size: 108%;
  }
  .info h2 i {
    height: 24px;
    margin: 0 0 18px 0;
  }
  .list-base div {
    font-size: 95%;
    line-height: 2.1;
  }
  .info picture {
    height: 75vw;
    max-height: 300px;
  }
  .menu,
  .access {
    padding: calc(var(--gutter) * 2.25) 0 0 0;
  }
  .menu p {
    font-size: 95%;
    line-height: 1.8;
  }
  .menu .block + .block {
    margin: calc(var(--gutter) * 1.5) 0 0 0;
  }
  .access .map {
    margin: calc(var(--gutter) * 1.5) 0 calc(var(--gutter) * 1);
  }
  .access .way ul {
    font-size: 95%;
  }
  .stores .title {
    font-size: 100%;
    line-height: 1.5;
    letter-spacing: .04rem;
    color: rgba(var(--base),1);
    top: 50px;
    left: 22.5px;
    opacity: 1;
  }
  .stores .frame {
    padding: 150px 0;
  }
  .stores .block > h2 {
    width: 165px;
  }

  footer {
    padding: 170px 0 130px;
    margin: auto;
  }
  .child + footer {
    padding: 130px 0 130px;
  }
  .totop {
    width: 62px;
    position: relative;
    left: -9px;
  }
  footer h2 {
    margin: 60px 0;
  }
  footer .global a {
    line-height: 2;
  }
  footer div dl + dl .global {
    width: 250px;
  }
  footer div dl + dl .global a:nth-child(3) {
    margin: 0;
    padding: 0;
  }
  footer div dl + dl .global a:nth-child(3):before {
    display: none;
  }
  footer :is(dl + dl,div + div) {
    margin: 32px 0 0 0;
  }
  footer .copy {
    margin: 40px 0 0 0;
  }

  .navigation .global {
    top: 45px;
    left: 22px;
  }
  .navigation .frame ul {
    transform: translate(-50%,-49%);
  }
  .navigation .logo {
    padding: 0 0 30px 0;
  }
  .navigation .frame li {
    margin: 8px 0;
  }
  .navigation .sns {
    padding: 25px 0 0 0;
  }
  .list-base {
    padding: 142px 0;
  }
  .list-base h2{
    margin: 0 0 75px 0;
  }
  .list-base h2 i {
    font-size: 220%;
  }
  .list-base :is(dl,ul,ol) {
    line-height: 1.7;
  }
  .list-base dl {
    flex-direction: column;
  }
  .list-base dl > * {
    width: 100%;
  }
  .list-base li + li {
    margin: 8px 0 0 0;
  }
  .list-base ol li {
    padding: 0 0 0 calc(1em + 2px);
  }
  .list-base dd p {
    height: 18px;
    margin: 40px 0 0 0;
  }
  .list-base dd span a + a {
    margin: 15px 0 0 0;
  }
  .list-base :is(ol li,dd span i):before {
    top: 6px;
    left: 1px;
  }
  .list-base dd span b {
    display: flex;
    flex-direction: column;
    padding: 3px 0 0 calc(1em + 3px);
  }
  .list-base dd span u br {
    display: block;
  }
  .list-base dd span u + u:before {
    display: none;
  }

}

.ntf {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: rgba(var(--back),1);
  color: rgba(var(--white),1);
}
.ntf .block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.ntf .block > * {
  text-align: center;
  line-height: 1.6;
}
.ntf .block h1 {
  width: 175px;
}
.ntf .block h2 {
  margin: 20px 0 25px;
}
.ntf .block a {
  min-width: 70%;
  margin: 25px auto 0 auto;
  padding: 0 0 12px 0;
  border-bottom: 1px solid;
}