@charset "UTF-8";
/* CSS Document */

.aufguss * {
  font-style:italic;
}
header.aufguss {
  overflow-x:hidden;
  overflow-y:visible;
}

.hamb[data-color="color"] i {
  outline:1.5px solid var(--white);
}
.hamb[data-color="color"] b {
  color:var(--white);
}

.this-title {
  display:flex;
  flex-direction:column;
}
.this-title > * {
  display:flex;
}
.this-title.center > * {
  justify-content:center;
}
.this-title.left > * {
  justify-content:flex-start;
}
.this-title.right > * {
  justify-content:flex-end;
}
.this-title img {
  width:auto;
  height:90px;
}
.this-title b {
  padding:8px 3px 0 3px;
  font-size:145%;
}
.this-title.center b {
  padding:15px 3px 0 3px;
}

.wave.type-single {
  transition:.3s ease;
}
.wave.type-single.fixed {
  position:fixed;
}
.wave.type-single.has-scroll {
  bottom:-20px;
}

.maintitle {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:100vh;
  height:100svh;
  opacity:0;
  transform:scale(0) rotate(360deg);
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  opacity:1;
  overflow:hidden;
  transition:.5s ease-in .05s;
  filter:drop-shadow(3px 3px 0 var(--base));
}
.maintitle img {
  width:82%;
  max-width:1180px;
  margin:18px 0 0 0;
  transform:rotate(-18deg) skew(-35deg);
}
.maintitle.is-show {
  opacity:1;
  transform:scale(1) rotate(0deg);
}
.maintitle.has-scroll {
  opacity:0;
  transform:scale(0) rotate(360deg);
}

.subtitle {
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-end;
  color:var(--white);
  position:absolute;
  top:50px;
  right:25px;
  z-index:2;
}
.subtitle i {
  padding:3px 50px;
  border:.5px solid var(--white-75);
  font-size:80%;
  letter-spacing:.04rem;
  white-space:nowrap;
}

.tagline {
  display:flex;
  justify-content:center;
  align-items:center;
  letter-spacing:0.08rem;
  line-height:1.8;
  text-align:right;
  position:absolute;
  bottom:50px;
  right:30px;
  z-index:1;
}
.tagline i {
  width:36px;
  margin:-5px 6px 0 0;
}
.tagline b {
  white-space:nowrap;
}

.copy-toast {
  padding:9px 100px;
  color:var(--base);
  background:var(--white);
  border-radius:9px;
  font-size:103%;
  text-align:center;
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  transition:opacity 0.3s ease;
  z-index:9999;
}
.copy-toast.is-show {
  opacity:1;
}

.slide-title {
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  overflow:hidden;
  z-index:0;
  transition:.5s ease-in .05s;
}
.slide-title .slide-track {
  animation:slide-loop 140s linear infinite;
  min-width:calc(8800px * 2);
  margin:90px 0 0 0;
}
.slide-title .slide-track img {
  width:8800px;
}
.slide-title.has-scroll {
  opacity:.5;
}
.slide-title.is-hidden {
  opacity:0;
  transform:scale(0) rotate(360deg);
}

.master {
  width:600px;
  position:absolute;
  top:-100vh;
  left:50%;
  transform:translate(-50%,0);
  transition:.5s ease-in .05s;
}
.master img {
  width:100%;
  height:auto;
  will-change:transform;
  transition:transform 0.05s linear;
}
.master.is-show {
  top:0;
}

.intro {
  padding:150px 0 0;
}
.intro .this-title {
  padding:0 75px 125px;
}
.intro .frame {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
.intro .frame div {
  width:50%;
  padding:0 75px;
  font-size:98%;
  line-height:2.2;
}
.intro .frame div:nth-child(odd) {
  margin:-30px 0 0 0;
}
.intro .frame div:nth-child(even) {
  margin:135px 0 0 0;
}
.intro div h3 {
  display:flex;
  align-items:center;
  margin:0 0 35px 0;
  position:relative;
}
.intro div h3 i {
  display:block;
  width:35px;
  position:absolute;
  top:-45px;
  left:-40px;
}
.intro div h3 img {
  width:100%;
}
.intro div h3 b {
  font-size:112%;
  letter-spacing:.02rem;
}

.masters {
  padding:125px 75px 0;
}
.masters h2 {
  display:flex;
  justify-content:flex-end;
}
.masters .frame {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0 40px;
  position:relative;
  top:-60px;
}
.masters .block {
  margin:0 0 60px 0;
  position:relative;
  overflow:hidden;
}
.masters .block:nth-child(3n + 1) {
  top:calc(100px * 0);
}
.masters .block:nth-child(3n + 2) {
  top:calc(100px * 1);
}
.masters .block:nth-child(3n) {
  top:calc(100px * 2);
}
.masters picture {
  width:100%;
  margin:auto;
  border:2px solid var(--white);
  border-radius:50%;
  background-color:var(--gray-95);
  aspect-ratio:1;
  overflow:hidden;
  position:relative;
}
.masters picture img {
  position:relative;
  z-index:1;
}
.masters picture .wave {
  height:125px;
  margin:0;
  position:absolute;
  bottom:0;
  left:0;
  z-index:0;
  opacity:.9;
}
.masters .wave .slide-track {
  min-width:calc(360px * 2);
  animation:slide-loop 25s linear infinite;
}
.masters .wave .slide-track img {
  width:360px;
  position:relative;
}
.masters .block div {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 18px;
}
.masters .block div h2 {
  margin:22px 0 15px;
  font-size:110%;
  letter-spacing:.04rem;
}
.masters .block div > *:not(h2) {
  font-size:93%;
  line-height:1.8;
}
.masters .block ul {
  width:100%;
}
.masters .block li {
  display:flex;
  justify-content:center;
  overflow:hidden;
}
.masters .block li > * {
  display:flex;
  align-items:center;
  white-space:nowrap;
  overflow:hidden;
}
.masters .block li b {
  overflow:hidden;
  text-overflow:ellipsis;
}
.masters .block li hr {
  width:100%;
  height:1px;
  border-top:1px solid;
}
.masters .block div p {
  padding:15px 0 0 0;
}

.join {
  padding:175px 75px 0;
}
.join .step {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:100%;
  margin:120px 0 0 0;
  position:relative;
}
.join .step:before,
.join .step:after {
  content:'';
  width:1px;
  height:100%;
  border-left:2px solid var(--white);
  position:absolute;
  top:0;
  transform:skewX(35deg);
}
.join .step:before {
  left:calc(50% - 325px);
}
.join .step:after {
  left:calc(50% + 325px);
}
.join .step dl {
  display:flex;
  align-items:center;
  width:425px;
  padding:0 0 0 25px;
  position:relative;
}
.join .step dl:nth-child(1) {
  left:-75px;
}
.join .step dl:nth-child(2) {
  left:-25px;
}
.join .step dl:nth-child(3) {
  left:25px;
}
.join .step dl:nth-child(4) {
  left:75px;
}
.join .step dl + dl {
  margin:33px 0 0 0;
}
.has-circle {
  display:flex;
  justify-content:center;
  align-items:center;
  width:40px;
  height:40px;
  border:1.5px solid;
  border-radius:50%;
}
.has-circle > * {
  font-size:120%;
  padding:0 3px 0 0;
}
.join .step dd {
  margin:0 0 0 9px;
}
.join .step dd small {
  margin:0 0 0 -3px;
  font-size:82%;
}
.join .notes {
  margin:130px 0 0 0;
}
.join .notes p :is(a,em) {
  margin:0 0 0 2px;
  padding:0 3px 0 1px;
  color:var(--white);
  background-color:initial;
  border-bottom:1px solid var(--white);
}

.facility {
  padding:200px 75px 0;
}
.facility :is(.feature) {
  line-height:2;
}
.facility .lead {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  margin:50px 0 0;
}
.facility .lead > * {
  width:575px;
}
.facility .lead h3 {
  margin:0 0 30px 0;
  font-size:112%;
  letter-spacing:.02rem;
}
.feature {
  padding:30px 0 150px 0;
}
.feature ul {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:100px 30px;
}
.feature li {
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  position:relative;
}
.feature li:nth-child(3n + 2) {
  top:calc(90px * 1);
}
.feature li:nth-child(3n) {
  top:calc(90px * 2);
}
.feature picture {
  width:72.5%;
  max-width:235px;
}
.feature h3 {
  padding:40px 0 25px 0;
  text-align:center;
}
.feature p {
  font-size:93%;
  line-height:1.8;
}

.banner {
  display:block;
  margin:150px 0 0 0;
  border-radius:9px;
  border:1px solid var(--white);
  position:relative;
  overflow:hidden;
}
.banner picture {
  height:575px;
  overflow:hidden;
}
.banner p {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:100%;
  height:100%;
  line-height:1.6;
  position:absolute;
  top:0;
  left:0;
  z-index:1;
}
.banner p:before,
.banner p:after {
  content:'';
  width:50px;
  height:50px;
  border-top:1px solid;
  border-right:1px solid;
  position:absolute;
  top:calc(50% - 22.5px);
  z-index:2;
}
.banner p:before {
  left:calc(50% - 140px);
  transform:rotate(-135deg);
  animation:slide-left 1.5s ease-out infinite;
}
.banner p:after {
  right:calc(50% - 140px);
  transform:rotate(45deg);
  animation:slide-right 1.5s ease-out infinite;
}
@keyframes slide-left {
  0% {
    left:calc(50% - 140px);
  }
  100% {
    left:calc(50% - 200px);
    opacity:0;
  }
}
@keyframes slide-right {
  0% {
    right:calc(50% - 140px);
  }
  100% {
    right:calc(50% - 200px);
    opacity:0;
  }
}

.banner p i {
  font-size:260%;
}

.share {
  padding:225px 0 275px;
}
.share .frame {
  width:975px;
  margin:75px auto 0 auto;
}
.share .frame h3 {
  display:flex;
  justify-content:center;
  align-items:center;
  margin:60px 0 30px 0;
  font-size:85%;
}
.share .frame h3 i {
  letter-spacing:.04rem;
  position:relative;
}
.share .frame h3 i:before,
.share .frame h3 i:after {
  content:'';
  width:1px;
  height:100%;
  border-left:1px solid var(--white);
  position:absolute;
  top:-3px;
}
.share .frame h3 i:before {
  left:-30px;
  transform:skewX(32.5deg);
}
.share .frame h3 i:after {
  right:-30px;
  transform:skewX(-32.5deg);
}
.share .frame ul {
  display:flex;
  justify-content:center;
  align-items:center;
}
.share .frame li + li {
  margin:0 0 0 18px;
}
.share .frame li img {
  width:42px;
}
.share .clickbait {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  margin:60px 0 0 0;
  padding:20px 0;
  color:var(--base);
  background-color:var(--white);
  border-radius:6px;
}
.share .clickbait i {
  width:36px;
  margin:0 10px 0 0;
}
.share .clickbait b {
  font-size:110%;
  letter-spacing:.04rem;
}

@media screen and (max-width:1240px) {}
@media screen and (max-width:1080px) {
  .maintitle img {
    width:95%;
    max-width:initial;
    margin:20px 0 0 0;
  }
  .master {
    width:550px;
  }
  .master.is-show {
    top:2vh;
  }
  .intro .frame div {
    padding:0 50px;
  }
  .masters {
    padding:125px 50px 0;
  }
  .masters .frame {
    gap:0 15px;
  }
  .masters .block div {
    padding:0 9px;
  }
  .join {
    padding:125px 50px 0;
  }
  .join .step:before {
    left:calc(50% - 275px);
  }
  .join .step:after {
    left:calc(50% + 275px);
  }
  .has-circle {
    width:32px;
    height:32px;
  }
  .has-circle > * {
    font-size:110%;
  }
  .facility {
    padding:200px 50px 0;
  }

  .share {
    padding:225px 50px 275px;
  }
  .share .this-title img {
    width:100%;
    height:initial;
  }
  .share .frame {
    width:100%;
  }
}

@media screen and (max-width:880px) {
  .this-title:is(.left,.right) > * {
    justify-content:center;
  }
  .this-title:is(.left,.right) b {
    padding:15px 3px 0 3px;
  }
  .maintitle img {
    width:97.5%;
    margin:0;
    transform:rotate(-22deg) skew(-35deg);
  }
  .subtitle {
    top:calc(50% + 60px);
    left:50%;
    right:initial;
    opacity:0;
    transform:translate(-50%,0) rotate(-25deg) skew(-25deg);
    transition:.5s ease-in;
  }
  .subtitle.is-show {
    opacity:1;
  }
  .subtitle.has-scroll {
    opacity:0;
  }
  .subtitle i {
    padding:0;
    font-size:110%;
    border:initial;
  }
  .master {
    width:475px;
  }
  .master.is-show {
    top:3.5vh;
  }
  .this-title img {
    height:66px;
  }
  .intro .this-title {
    padding:0 0 125px 0;
  }
  .intro .frame {
    flex-direction:column;
  }
  .intro .frame div {
    width:100%;
    padding:0 40px;
  }
  .intro .frame div:nth-child(odd),
  .intro .frame div:nth-child(even) {
    margin:75px 0 0 0;
  }
  .intro .frame div:first-child {
    margin:0;
  }
  .intro div h3 i {
    width:25px;
    top:-27px;
    left:-25px;
  }
  .masters {
    padding:175px 40px 0;
  }
  .masters .frame {
    grid-template-columns:repeat(2,1fr);
    gap:0 20px;
    margin:50px 0 0 0;
    top:0;
  }
  .masters .block {
    margin:0 0 84px 0;
  }
  .masters .block:is(
    :nth-child(3n + 1),
    :nth-child(3n + 2),
    :nth-child(3n)
  ) {
    top:initial;
  }
  .masters .block:nth-child(even) {
    top:84px;
  }
  .masters picture {
    border-width:1.5px;
  }
  .masters .block div {
    padding:0 6px;
  }
  .join {
    padding:175px 40px 0;
  }
  .join .step:before,
  .join .step:after {
    display:none;
  }
  .join .step {
    margin:80px 0;
    padding:70px 0;
    border-top:1px solid var(--white-75);
    border-bottom:1px solid var(--white-75);
  }
  .join .step dl {
    width:375px;
    padding:0;
  }
  .join .step dl:nth-child(1) {
    left:-30px;
  }
  .join .step dl:nth-child(2) {
    left:-15px;
  }
  .join .step dl:nth-child(3) {
    left:15px;
  }
  .join .step dl:nth-child(4) {
    left:30px;
  }
  .join .step dl + dl {
    margin:22px 0 0 0;
  }
  .has-circle {
    width:27px;
    height:27px;
  }
  .has-circle > * {
    padding:0 2.5px 0 0;
    font-size:100%;
  }
  .join .step dd {
    margin:0 0 0 8px;
  }
  .join .notes {
    margin:80px 0 0 0;
  }

  .facility {
    padding:175px 40px 0;
  }
  .facility .lead {
    align-items:center;
  }
  .facility .lead > * {
    width:100%;
  }
  .facility .lead h3 {
    text-align:center;
  }
  .feature {
    padding:60px 0 0 0;
  }
  .feature ul {
    grid-template-columns:repeat(2,1fr);
    gap:70px 30px;
  }
  .feature li:is(
    :nth-child(3n + 2),
    :nth-child(3n)
  ) {
    top:initial;
  }
  .feature picture {
    width:60%;
    min-width:200px;
  }

  .share {
    padding:200px 40px 250px;
  }
  .share .frame li img {
    width:37px;
  }
  .share .clickbait {
    padding:18px 0;
  }
  .share .clickbait i {
    width:27px;
  }
  .share .clickbait b {
    font-size:100%;
  }

}

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

  .this-title img {
    height:44px;
  }
  .this-title b {
    font-size:125%;
  }

  .maintitle img {
    width:100vw;
    margin:33px 0 0 0;
  }
  .subtitle {
    top:calc(50% + 50px);
  }
  .subtitle i {
    font-size:95%;
    letter-spacing:.02rem;
  }
  .slide-title .slide-track {
    animation:slide-loop 120s linear infinite;
    min-width:calc(4500px * 2);
    margin:75px 0 0 0;
  }
  .slide-title .slide-track img {
    width:4500px;
  }
  .tagline {
    font-size:90%;
    letter-spacing:0;
    bottom:40px;
    left:50%;
    right:initial;
    transform:translate(-50%,0);
    pointer-events:initial;
  }
  .tagline i {
    width:24px;
    margin:0 3px 0 0;
  }

  header.aufguss {
    pointer-events:none;
  }

  .master {
    width:95vw;
  }
  .master.is-show {
    top:10vh;
  }

  .intro .this-title {
    padding:0 0 80px 0;
  }
  .intro .frame div {
    padding:0 20px;
  }
  .intro div h3 {
    flex-direction:row;
    justify-content:center;
  }
  .intro div h3 i {
    width:22px;
    position:relative;
    top:-12px;
    left:-12px;
  }
  .intro .frame div p {
    font-size:95%;
  }
  .masters {
    padding:150px 50px 0;
  }
  .masters .frame {
    grid-template-columns:repeat(1,1fr);
  }
  .masters .block {
    margin:0 0 40px 0;
  }
  .masters .block div {
    padding:0;
  }
  .masters .block:nth-child(even) {
    top:initial;
  }
  .masters .block div h2 {
    margin:20px 0 15px;
    font-size:122%;
  }
  .masters .block div > *:not(h2) {
    font-size:95%;
  }
  .masters picture {
    max-width:330px;
  }
  .masters .block div p {
    padding:12px 0 0 0;
  }
  .join {
    padding:150px 20px 0;
  }
  .has-circle {
    width:25px;
    height:25px;
    border-width:1px;
  }
  .has-circle > * {
    font-size:90%;
  }
  .join .step {
    align-items:flex-start;
    margin:55px 0;
    padding:55px 0;
  }
  .join .step dl:nth-child(1),
  .join .step dl:nth-child(2),
  .join .step dl:nth-child(3),
  .join .step dl:nth-child(4) {
    left:0;
  }
  .join .step dl {
    width:auto;
  }
  .join .step dl + dl {
    margin:12px 0 0 0;
  }
  .join .step dd {
    margin:0 0 0 6px;
  }
  .join .notes {
    margin:0;
  }

  .facility {
    padding:150px 20px 0;
  }
  .feature {
    padding:60px 0 0 0;
  }
  .feature ul {
    grid-template-columns:repeat(1,1fr);
    gap:60px 0;
  }
  .feature picture {
    width:45%;
    min-width:150px;
    max-width:230px;
  }
  .feature h3 {
    font-size:112%;
  }
  .feature p {
    font-size:100%;
    line-height:2;
  }
  .banner {
    margin:90px 0 0 0;
  }
  .banner picture {
    height:460px;
  }
  .banner p:before {
    left:calc(50% - 100px);
  }
  .banner p:after {
    right:calc(50% - 100px);
  }
  @keyframes slide-left {
    0% {
      left:calc(50% - 100px);
    }
    100% {
      left:calc(50% - 130px);
      opacity:0;
    }
  }
  @keyframes slide-right {
    0% {
      right:calc(50% - 100px);
    }
    100% {
      right:calc(50% - 130px);
      opacity:0;
    }
  }

  .share {
    padding:175px 20px 225px;
  }
  .share .frame h3 {
    margin:50px 0 25px;
  }
  .share .frame h3 i:before,
  .share .frame h3 i:after {
    height:85%;
    top:2px;
  }
  .share .clickbait {
    margin:40px 0 0 0;
  }

  .copy-toast {
    min-width:275px;
    padding:9px 20px;
    font-size:90%;
  }

}