@charset "UTF-8";
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ CSS-Ver ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
:root {
  --ff_title: "Raleway", sans-serif;
  --ff_main: "M PLUS 1", sans-serif;
  --ff_code: "M PLUS 1 Code", monospace;
  --ff_404: "Montserrat", sans-serif;
  
  --clr_bg: #000000;
  --clr_bg-green: #0E1202;
  --clr_bg-blue: #03050D;
  --clr_bg-caseImg: #AAAAAA;

  --clr_darkgray: #2A2A2A;
  --clr_line: #404040;
  

  --clr_text-blue: #CCD9FF;
  --clr_text-green: #EBF7CF;
  --clr_text-gray: #D6D6D6;
  --clr_text-pcnav: #959595;

  --clr_brackets-blue: #386DFF;
  --clr_brackets-green: #4D6114;
  --clr_brackets-yellow: #CDFF36;
  --clr_brackets-yellow2: #7b9920;
  --clr_brackets-gray: #888888;

  --clr_origin-green: #69821B;
  --clr_origin-blue: #1B3582;
  --clr_origin-gray: #888888;

/* 360px〜1280px */
  --ri_12-24: clamp(0.75rem, 0.457rem + 1.3vw, 1.5rem);
  --ri_12-64: clamp(0.75rem, -0.522rem + 5.65vw, 4rem);
  --ri_24-32: clamp(1.5rem, 1.304rem + 0.87vw, 2rem);
  --ri_24-64: clamp(1.5rem, 0.522rem + 4.35vw, 4rem);
  --ri_32-40: clamp(2rem, 1.804rem + 0.87vw, 2.5rem);
  --ri_25-129: clamp(1.563rem, -0.981rem + 11.3vw, 8.063rem);

  --rb_12-16: clamp(0.75rem, 0.652rem + 0.43vw, 1rem);
  --rb_12-24: clamp(0.75rem, 0.457rem + 1.3vw, 1.5rem);
  --rb_12-32: clamp(0.75rem, 0.261rem + 2.17vw, 2rem);
  --rb_24-32: clamp(1.5rem, 1.304rem + 0.87vw, 2rem);
  --rb_48-64: clamp(3rem, 2.609rem + 1.74vw, 4rem);
  --rb_96-128: clamp(6rem, 5.217rem + 3.48vw, 8rem);

  --rib_12-24: clamp(0.75rem, 0.457rem + 1.3vw, 1.5rem);
  --rib_24-32: clamp(1.5rem, 1.304rem + 0.87vw, 2rem);

  --rf_14-24: clamp(0.875rem, 0.63rem + 1.09vw, 1.5rem);
  --rf_16-24: clamp(1rem, 0.804rem + 0.87vw, 1.5rem);
  --rf_24-32: clamp(1.5rem, 1.304rem + 0.87vw, 2rem);
  --rf_24-40: clamp(1.5rem, 1.109rem + 1.74vw, 2.5rem);
  --rf_128-192: clamp(8rem, 6.435rem + 6.96vw, 12rem);

/* 360px〜480px */
  --rfex_12-16: clamp(0.75rem, 3.33vw, 1rem);

  /* 744px〜1280px */
  --rbex_1-160: clamp(0.125rem, -13.582rem + 29.48vw, 10rem);
  --riex_96-384: clamp(6rem, -18.985rem + 53.73vw, 24rem);
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ Basic ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
body {
  background-color: var(--clr_bg);
  font-family: var(--ff_main);
  letter-spacing: .1em;
  line-height: 1.75;
}

body::before {
  content: "";
  width: 100vw;
  height: 90vh;
  height: 90svh;
  position: fixed;
  top: 1rem;
  z-index: -2;
  background-image: linear-gradient(to right, var(--clr_brackets-blue), var(--clr_brackets-green));
  opacity: var(--bg-opacity, 1);
}

body::after {
  content: "";
  width: 200vw;
  height: 100vh;
  height: 100svh;
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url(/assets/img/mv_sp.svg);
  background-repeat: no-repeat;
  background-position: var(--bg-pos-x, 0vw) center;
  background-size: cover;
  filter: brightness(var(--bg-brightness, 100%));
}

@media screen and (min-width: 59rem) {
body::after {
  background-image: url(/assets/img/mv_pc.svg);
  filter: brightness(var(--bg-brightness, 100%));
}
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ Loading ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.loading {
  display: block grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  position: fixed;
  z-index: 1000;
  background-color: var(--clr_bg);
  overflow: hidden;
  animation-name: loading;
  animation-duration: 6.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes loading {
  0%{opacity: 1}
  93.3%{opacity: 1}
  100%{opacity: 0}
}

.js-loading-hide {
  display: none;
}

.logo {
  width: var(--rf_128-192);
  grid-column: 1;
  grid-row: 1;
  place-self: center;
  opacity: 0;
}

.logo__front.js-animation {
  animation-name: loadingF;
  animation-duration: 5.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

@keyframes loadingF {
  0%{opacity: 0}
  20%{opacity: 1}
  40%{opacity: 1}
  70%{opacity: 0}
  80%{opacity: 0}
  100%{opacity: 0}
}

.logo__back.js-animation {
  animation-name: loadingB;
  animation-duration: 5.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

@keyframes loadingB {
  0%{opacity: 0}
  20%{opacity: 0}
  40%{opacity: 0}
  60%{opacity: 1}
  80%{opacity: 1}
  100%{opacity: 0}
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ Header ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.header {
  max-width: 80rem;
  padding-block-start: var(--rb_12-32);
  margin: 0 auto;
}

.header__tradeName {
  color: var(--clr_text-gray);
  font-family: var(--ff_title);
  font-size: var(--rf_14-24);
  font-weight: 200;
}

.header__tradeName--bullet {
  color: var(--clr_origin-gray);
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ Hamburger ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.hamburger {
  width: 2.5rem;
  height: 2rem;
  position: fixed;
  top: var(--rb_12-24);
  right: var(--ri_12-24);
  z-index: 100;
  box-shadow: 0 0 .25rem var(--clr_text-gray) inset;
  background-color: transparent;
  backdrop-filter: blur(.25rem);
  cursor: pointer;
}

.hamburger__line {
  width: 1rem;
  display: block flow;
  position: absolute;
  inset: 0;
  margin: auto;
}

.hamburger__line::before,
.hamburger__line::after {
  content: "";
  width: 100%;
  height: 1px;
  display: block flow;
  position: absolute;
  background-color: var(--clr_text-gray);
  scale: 1 .5;
  transition: rotate .3s ease-in-out;
}

.hamburger__line::before {
  translate: 0 .75rem;
}

.hamburger__line::after {
  translate: 0 1.25rem;
}

.hamburger__line.js-hamburger-change::before {
  translate: 0 1rem;
  rotate: 45deg;
}

.hamburger__line.js-hamburger-change::after {
  translate: 0 1rem;
  rotate: -45deg;
}

@media screen and (min-width: 80rem) {
  .hamburger,
  .hamburger__line {
    display: none;
  }
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ Nav ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.nav {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
  translate: 100% 0;
  background-image: linear-gradient(to left, var(--clr_bg-blue), rgb(0 0 0 / .7));
  transition: translate.3s ease-in-out, opacity .6s ease-in-out;
  opacity: 0;
}

.nav__container {
  position: absolute;
  top: 6rem;
  right: 2.5rem;
  font-family: var(--ff_code);
  font-size: 1.25rem;
  line-height: 1;
}

.nav__deco {
  color: var(--clr_line);
}

.nav__list {
  padding: 2.5rem 0 2.5rem 2.5rem;
  border-inline-start: 1px solid var(--clr_darkgray);
}

.nav__list li {
  margin-block-start: 2.5rem;
  color: var(--clr_text-gray);
}

.nav__list li:first-child {
  margin-block-start: 0;
}

.js-nav-show {
  translate: 0 0;
  opacity: 1;
}

@media screen and (min-width: 80rem) {
.nav {
  width: auto;
  height: auto;
  position: fixed;
  translate: 0 0;
  background-image: none;
  opacity: 1;
}

.nav__container {
  position: static;
  font-size: 1rem;
  line-height: 1;
}

.nav__deco {
  display: none;
}

.nav__list {
  display: block flex;
  column-gap: 3rem;
  padding: 1rem 2rem;
  margin-block-start: 1rem;
  border-inline-start: none;
  backdrop-filter: blur(3rem);
}

.nav__list li {
  position: relative;
  margin-block-start: 0;
  color: var(--clr_text-pcnav);
  transition: color .3s;
}

.nav__list li::before {
  content: "";
  width: 100%;
  height: .125rem;
  position: absolute;
  bottom: -.5rem;
  left: 0;
  background: linear-gradient(90deg, var(--clr_brackets-blue) 0%, var(--clr_brackets-yellow2) 100%);
  scale: 0 100%;
  transition: scale .2s;
}

.nav__list li:hover::before,
.nav__list li:focus-visible::before {
  scale: 100% 100%;
}
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ Main ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.main__container {
  padding-inline-start: var(--ri_12-64);
}


/* ＝＝＝＝＝＝＝＝ Main Visual  ＝＝＝＝＝＝＝＝ */
.mv {
  height: 100vh;
  height: 100svh;
}

.mv__container {
  width: 100%;
  max-width: 80rem;
  height: 100%;
  margin: 0 auto;
  border-inline-start: 1px solid var(--clr_line);
}

.mv__copy {
  position: absolute;
  top: 50%;
  margin-inline-start: var(--ri_12-64);
  translate: 0 -50%;
  font-size: var(--rf_24-40);
  line-height: 2;
}

.mv__copy--upper {
  display: block flow;
  position: relative;
  color: #aaa;
}

.mv__copy--upper::before {
  content: "";
  width: 103%;
  height: 70%;
  position: absolute;
  top: 18%;
  left: -.5rem;
  z-index: -1;
  background-color: var(--clr_bg);
  filter: blur(.375rem);
  opacity: .8;
}

.mv__copy--lower {
  display: block flow;
  position: relative;
  color: var(--clr_bg);
  font-weight: 600;
}

.mv__copy--lower::before {
  content: "";
  width: 103%;
  height: 70%;
  position: absolute;
  top: 18%;
  left: -.5rem;
  z-index: -1;
  background-color: var(--clr_text-gray);
  filter: blur(.375rem);
  opacity: .6;
}

/* ＝＝＝＝＝＝＝＝ Main Common ＝＝＝＝＝＝＝＝ */
.section__container {
  max-width: 80rem;
  padding-block: var(--rb_48-64);
  border-inline-start: 1px solid var(--clr_line);
  margin: 0 auto;
}

.section__inner {
  padding-inline: var(--ri_12-64);
  padding-block: var(--rb_48-64);
  margin-inline-start: var(--ri_12-64);
  border-inline-start: 1px solid var(--clr_line);
}

.section__title {
  margin-inline-start: var(--ri_12-64);
  font-family: var(--ff_code);
  font-size: var(--rf_16-24);
}

.section__title--bullet {
  padding-inline-end: .125rem;
  font-weight: 700;
}

.section__title--bullet.--blue,
.section__title--bullet.--blue {
  color: var(--clr_brackets-blue);
}

.section__title--bullet.--yellow,
.section__title--bullet.--yellow {
  color: var(--clr_brackets-yellow);
}

.section__title--bullet.--gray,
.section__title--bullet.--gray {
  color: var(--clr_brackets-gray);
}

.section__heading {
  font-size: var(--rf_24-32);
  line-height: 1.5;
}

.section__heading--text {
  display: block flow;
}

.section__inner p {
  max-width: 32rem;
}

.section__margin--L {
  margin-block-start: var(--rb_48-64);
}

.section__margin--S {
  margin-block-start: var(--rb_24-32);
}

.section__closeTag {
  margin-inline-start: var(--ri_12-64);
  color: var(--clr_darkgray);
  font-family: var(--ff_code);
}

.section__closeTag:before {
  content: "</";
}

.section__closeTag:after {
  content: ">";
}


/* ＝＝＝＝＝＝＝＝ Service ＝＝＝＝＝＝＝＝ */
.service {
  color: var(--clr_text-blue);
}

.philosophy {
  margin-block-start: var(--rb_48-64);
}

.philosophy__item {
  max-width: 32rem;
  padding: 1rem 1.5rem 1.5rem;
  margin-block-start: var(--rb_24-32);
  box-shadow: 0 0 .5rem var(--clr_text-blue) inset;
  backdrop-filter: blur(.5rem);
}

.philosophy__item dt {
  font-size: 1.25rem;
  font-weight: 500;
}

.philosophy__item dt::before {
  padding-inline-end: 1rem;
  color: transparent;
  font-size: 1.5rem;
  -webkit-text-stroke: 1px var(--clr_brackets-blue);
  vertical-align: -.09375rem;
}

.philosophy__item:nth-child(1) {
  content: "";
  margin-inline: 0 auto;
}

.philosophy__item:nth-child(2) {
  content: "";
  margin-inline: auto;
}

.philosophy__item:nth-child(3) {
  content: "";
  margin-inline: auto 0;
}

.philosophy__item:nth-child(1) dt::before {
  content: "01";
}

.philosophy__item:nth-child(2) dt::before {
  content: "02";
}

.philosophy__item:nth-child(3) dt::before {
  content: "03";
}

.philosophy__item dd::before {
  content: "";
  width: 100%;
  height: 0.125rem;
  margin-block: .25rem .75rem;
  display: block;
  background-color: var(--clr_bg);
  box-shadow: 0 0 .125rem var(--clr_text-blue) inset;
}

.service__text--right {
  margin: var(--rb_48-64) 0 0 auto;

}

@media screen and (min-width: 80rem) {
.philosophy {
  display: block flex;
  column-gap: 2rem;
}

.philosophy__item {
  flex: 1;
  margin-block-start: 0;
}
}

/* ＝＝＝＝＝＝＝＝ Works ＝＝＝＝＝＝＝＝ */
.works {
  color: var(--clr_text-green);
}

.works__heading--bullet {
  margin-inline-end: .25rem;
  color: var(--clr_brackets-green);
  text-shadow:  0 0 1px var(--clr_text-green);
}

.case {
  max-width: 36rem;
  padding: var(--rib_12-24);
  margin-block-start: var(--rb_96-128);
  box-shadow: 0 0 .5rem var(--clr_text-green) inset;
  backdrop-filter: blur(.5rem);
  /* cursor: pointer; */
  transition: box-shadow .3s;
}

.case:hover,
.case:focus-visible,
.case:focus-within {
  box-shadow: 0 0 1rem var(--clr_brackets-yellow) inset;
}

.case:nth-of-type(odd) {
  margin-inline: 0 auto;
}

.case:nth-of-type(even) {
  margin-inline: auto 0;
}

.case:first-child {
  margin-block-start: 0rem;
}

.caseTitle__wrapper {
  display: block flex;
  justify-content: space-between;
}

.caseDetail__open {
  margin-inline-end: .25rem;
  border-block-end: 1px solid var(--clr_text);
  background-color: transparent;
  cursor: pointer;
}

.caseDetail__open img {
  width: 1.25rem;
  vertical-align: .275rem;
}

.case__cover {
  width: 64%;
  height: auto;
  aspect-ratio: 53 / 32;
  display: block flow;
  margin: var(--rb_12-16) auto 0;
}

.case__cover source,
.case__cover img {
  width: 100%;
  height: 100%;
}

.case__process {
  margin-block-start: var(--rb_12-16);
  font-size: .875rem;
  text-align: right;
}

.caseDetail {
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  padding: var(--rb_24-32) var(--ri_24-64) var(--rb_48-64);
  background-color: var(--clr_bg-green);
  color: var(--clr_text-green);
  opacity: 0;
  transition: opacity .3s ease-in-out;
  cursor: auto;
}

.caseDetail__inner {
  max-width: 60rem;
  margin: 0 auto;
}

.js-caseDetail-show {
  opacity: 1;
}

.caseDetail__title {
  font-size: 1.25rem;
  font-weight: 500;
}

.caseDetail__close.hamburger, 
.caseDetail__close .hamburger__line {
  display: block;
}

.caseDetail__data {
  margin-block-start: var(--rb_12-24);
}

.caseDetail__cover {
  padding: var(--rib_24-32);
  display: block grid;
  place-content: center;
  box-shadow: 0 0 .5rem var(--clr_text-green) inset;
}

.caseDetail__cover source,
.caseDetail__cover img {
  width: 100%;
  height: auto;
}

.section__inner p.caseDetail__url {
  max-width: 100%;
  margin: var(--rb_24-32) auto 0;
  font-size: var(--rfex_12-16);
}

.caseDetail__url a {
  padding: .75rem 2rem .75rem .75rem;
  display: block flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-shadow: 0 0 .5rem var(--clr_text-green) inset;
  font-family: var(--ff_code);
  overflow-wrap: anywhere;
  transition: background-color .3s ease-in-out;
}

.caseDetail__url a::after {
  content: "";
  width: 1rem;
  height: 1rem;
  position: absolute;
  right: 1rem;
  background-image: url(/assets/img/external-link.svg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.caseDetail__url a:hover,
.caseDetail__url a:focus-visible {
  background-color: var(--clr_brackets-green);
}

.caseDetail__process {
  display: block grid;
  max-width: 32rem;
  padding-block: .75rem;
  margin: var(--rb_24-32) auto 0;
  box-shadow: 0 0 .5rem var(--clr_text-green) inset;
}
.caseDetail__process.case-1 {
  grid-template-columns: 1fr auto 1fr auto 1fr;
  grid-template-rows: repeat(7,auto);
}
.caseDetail__process.case-1 dt:nth-of-type(1) {
  grid-column: 2;
  grid-row: 1;
}
.caseDetail__process.case-1 dt:nth-of-type(2) {
  grid-column: 2;
  grid-row: 5;
  margin-block-start: 1rem;
}
.caseDetail__process.case-1 dd:nth-of-type(1) {
  grid-column: 4;
  grid-row: 1;
}
.caseDetail__process.case-1 dd:nth-of-type(2) {
  grid-column: 4;
  grid-row: 2;
}
.caseDetail__process.case-1 dd:nth-of-type(3) {
  grid-column: 4;
  grid-row: 3;
}
.caseDetail__process.case-1 dd:nth-of-type(4) {
  grid-column: 4;
  grid-row: 4;
}
.caseDetail__process.case-1 dd:nth-of-type(5) {
  grid-column: 4;
  grid-row: 5;
  margin-block-start: 1rem;
}

.caseDetail__process.case-2 {
  grid-template-columns: 1fr auto 1fr auto 1fr;
  grid-template-rows: repeat(9,auto);
}
.caseDetail__process.case-2 dt:nth-of-type(1) {
  grid-column: 2;
  grid-row: 1;
}
.caseDetail__process.case-2 dt:nth-of-type(2) {
  grid-column: 2;
  grid-row: 2;
  margin-block-start: 1rem;
}
.caseDetail__process.case-2 dt:nth-of-type(3) {
  grid-column: 2;
  grid-row: 3;
  margin-block-start: 1rem;
}
.caseDetail__process.case-2 dt:nth-of-type(4) {
  grid-column: 2;
  grid-row: 4;
  margin-block-start: 1rem;
}
.caseDetail__process.case-2 dt:nth-of-type(5) {
  grid-column: 2;
  grid-row: 8;
  margin-block-start: 1rem;
}
.caseDetail__process.case-2 dt:nth-of-type(6) {
  grid-column: 2;
  grid-row: 9;
  margin-block-start: 1rem;
}
.caseDetail__process.case-2 dd:nth-of-type(1) {
  grid-column: 4;
  grid-row: 1;
}
.caseDetail__process.case-2 dd:nth-of-type(2) {
  grid-column: 4;
  grid-row: 2;
  margin-block-start: 1rem;

}
.caseDetail__process.case-2 dd:nth-of-type(3) {
  grid-column: 4;
  grid-row: 3;
  margin-block-start: 1rem;
}
.caseDetail__process.case-2 dd:nth-of-type(4) {
  grid-column: 4;
  grid-row: 4;
  margin-block-start: 1rem;
}
.caseDetail__process.case-2 dd:nth-of-type(5) {
  grid-column: 4;
  grid-row: 5;
}
.caseDetail__process.case-2 dd:nth-of-type(6) {
  grid-column: 4;
  grid-row: 6;
}
.caseDetail__process.case-2 dd:nth-of-type(7) {
  grid-column: 4;
  grid-row: 7;
}
.caseDetail__process.case-2 dd:nth-of-type(8) {
  grid-column: 4;
  grid-row: 8;
  margin-block-start: 1rem;
}
.caseDetail__process.case-2 dd:nth-of-type(9) {
  grid-column: 4;
  grid-row: 9;
  margin-block-start: 1rem;
}

.caseDetail__description {
  max-width: 32rem;
  margin: 0 auto;
}

.caseDetail__description dt {
  padding-block-end: .25rem;
  margin-block: 6rem 1rem;
  border-block-end: 1px solid var(--clr_text-green);
}

.caseDetail__description--img {
  padding-block: 1.5rem;
  margin-block-start: 1rem;
  background-color: var(--clr_bg-caseImg);
  text-align: center;
}

.caseDetail__description--img source,
.caseDetail__description--img img {
  width: 70%;
  max-width: 24rem;
}

.caseDetail__description--video {
  margin: 1rem auto 0;
  text-align: center;
}

.caseDetail__video--container {
  max-width: 32rem;
  height: auto;
  display: inline flow-root;
  position: relative;
}

.caseDetail__video {
  width: 100%;
  height: 100%;
}

.caseDetail__video--pause {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity .3s ease-in-out;
}

@media screen and (min-width: 60rem) {
.caseDetail__data {
  display: block grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 2rem;
}
.caseDetail__cover {
  grid-column: 1;
  grid-row: 1 / 3;
}
.caseDetail__url {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  margin: 0;
}
.caseDetail__process {
  grid-column: 2;
  grid-row: 2;
  align-self: flex-end;
  max-width: none;
  margin: 0;
}
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ Profile ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.profile {
  color: var(--clr_text-gray);
}

.section__inner.--profile {
  position: relative;
}

.section__heading.--profile::after {
  content: "";
  display: inline flow-root;
  width: 3rem;
  height: 3rem;
  margin-inline-start: 1rem;
  background-image: url("/assets/img/ichisanta.svg");
  background-size: contain;
  border-radius: 50%;
  vertical-align: -.75rem;
}

.profile__img {
  width: 6rem;
  height: auto;
  position: absolute;
  top: 0;
  right: var(--ri_24-64);
}

@media screen and (min-width: 46.5rem) {
.profile__img {
  width: var(--riex_96-384);
  top: var(--rbex_1-160);
}

}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ Contact ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.contact {
  color: var(--clr_text-blue);
}

.section__container--contact {
  max-width: 80rem;
  padding-block: var(--rb_48-64) 100vh;
  padding-block: var(--rb_48-64) 100svh;
  border-inline-start: 1px solid var(--clr_line);
  margin: 0 auto;

}

.section__heading--lower {
  position: relative;
}

.section__heading--lower::after {
  content: "";
  display: block flow-root;
  width: var(--ri_32-40);
  aspect-ratio: 5 / 3;
  position: absolute;
  bottom: var(--rb_24-32);
  right: calc(-1 * var(--ri_24-32));
  background-image: url("/assets/img/contact-deco.svg");
  background-size: contain;
  background-repeat: no-repeat;
  rotate: 30deg;
}

.contact__btn--container {
  margin-block-start: 6rem;
}

.contact__btn {
  width: 100%;
  max-width: 32rem;
  display: block flow;
  position: relative;
  background-image: var(--clr_bg);
  color: #fff;
  transition: color .5s;
}

.contact__btn:hover, 
.contact__btn:focus-visible {
  color: var(--clr_bg);
  font-weight: 500;
}

.contact__btn::before {
  content: "";
  width: 0;
  height: 100%;
  position: absolute;
  background: linear-gradient(90deg, var(--clr_brackets-blue) 0%, var(--clr_brackets-yellow2) 100%);
  filter: blur(.375rem);
  transition: width .2s;
}

.contact__btn:hover::before, 
.contact__btn:focus-visible::before {
  width: 100%;
}

.contact__btn--icon {
  display: block grid;
  place-content: center;
  width: 4rem;
  height: 4rem;
  position: absolute;
  top: -50%;
  left: 1.5rem;
  z-index: 1;
  border-radius: 50%;
  box-shadow: inset 0 0 .5rem var(--clr_text-blue);
  background-color: var(--clr_bg);
}

.contact__btn--frame {
  display: block flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 4rem;
  position: relative;
  box-shadow: inset 0 0 .5rem var(--clr_text-blue);
  backdrop-filter: blur(.5rem);
  font-family: var(--ff_code);
  font-size: 1.25rem;
}

.contact__btn--frame::after {
  content: "→";
  position: absolute;
  right: 1.5rem;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ Footer ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.footer {
  max-width: 80rem;
  padding-block-end: 1.5rem;
  margin: 0 auto;
}

.footer__copyright {
  color: var(--clr_line);
  font-family: var(--ff_title);
  font-size: .75rem;
  letter-spacing: .05em;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 404 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.error404__container {
  width: 100vw;
  height: 200vh;
  height: 200svh;
  margin: 0 auto;
  border-inline-start: 1px solid var(--clr_line);
}

.error404__hgroup {
  position: fixed;
  top: 50%;
  margin-inline-start: var(--ri_12-64);
  translate: 0 -50%;
  font-size: var(--rf_24-40);
  line-height: 2;
}

.error404__heading {
  color: #aaa;
  text-shadow:
    .125rem .125rem #000,
    .125rem -.125rem #000,
    -.125rem .125rem #000,
    -.125rem -.125rem #000,
    .25rem .25rem #000,
    .25rem -.25rem #000,
    -.25rem .25rem #000,
    -.25rem -.25rem #000
}

.error404__heading--sub {
  color: var(--clr_bg);
  font-weight: 600;
  text-shadow:
    /* .0625rem .0625rem var(--clr_brackets-blue),
    .0625rem -.0625rem var(--clr_brackets-blue),
    -.0625rem .0625rem var(--clr_brackets-blue),
    -.0625rem -.0625rem var(--clr_brackets-blue), */
    .125rem .125rem .25rem var(--clr_brackets-blue),
    .125rem -.125rem .25rem var(--clr_brackets-blue),
    -.125rem .125rem .25rem var(--clr_brackets-blue),
    -.125rem -.125rem .25rem var(--clr_brackets-blue)
}