@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300..700&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap");
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img, picture, video, svg {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

ol, ul, nav, summary {
  list-style: none;
}

a {
  color: #000;
  text-decoration: none;
}

sup, sub {
  font-size: 0.6em;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(200 / 750 * 100vw);
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  line-height: 0;
  font-feature-settings: "palt";
  letter-spacing: calc(100em / 1000);
  color: #000;
  background: hsl(0, 0%, 100%);
}
body:has(> header.open) {
  overflow: hidden;
}

header nav, footer nav, #arsoasalon {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  line-height: 0;
  font-feature-settings: "palt";
  letter-spacing: calc(100em / 1000);
}

#header_dummy {
  width: 100%;
  height: calc(100.5 / 750 * 100vw);
}

header {
  display: grid;
  grid-template: auto 0/auto 0 1fr;
  width: 100%;
  max-height: 100dvh;
  overflow: hidden auto;
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 900;
  padding: calc(19 / 750 * 100vw) 0 calc(18 / 750 * 100vw);
  background: hsl(0, 0%, 100%);
}
header::before {
  content: "";
  display: none;
  width: 100%;
  height: 100dvh;
  position: fixed;
  inset: 0 auto auto 0;
  z-index: -1;
  background: hsla(0, 0%, 100%, 0.4);
}
header > h1 {
  grid-row: 1/2;
  grid-column: 1/4;
  justify-self: center;
  width: calc(142 / 750 * 100vw);
}
header > h1 > a > img {
  width: 100%;
  height: auto;
}
header > nav {
  display: none;
  grid-row: 1/2;
  grid-column: 2/3;
}
header > button {
  grid-row: 1/2;
  grid-column: 1/2;
  justify-self: start;
  appearance: none;
  width: calc(63 / 750 * 100vw);
  height: calc(63 / 750 * 100vw);
  position: relative;
  margin: 0 0 0 calc(20 / 750 * 100vw);
  background: transparent;
  border: none;
}
header > button::before {
  content: "";
  display: block;
  width: calc(33 / 750 * 100vw);
  height: 0;
  position: absolute;
  inset: calc(23 / 750 * 100vw) auto auto calc(14 / 750 * 100vw);
  border-bottom: calc(1.3 / 750 * 100vw) solid hsl(357, 100%, 39%);
  transform-origin: center;
  transition: transform 0.3s, border-color 0.3s;
}
header > button::after {
  content: "";
  display: block;
  width: calc(33 / 750 * 100vw);
  height: 0;
  position: absolute;
  inset: calc(37 / 750 * 100vw) auto auto calc(14 / 750 * 100vw);
  border-bottom: calc(1.3 / 750 * 100vw) solid hsl(357, 100%, 39%);
  transform-origin: center;
  transition: transform 0.3s, border-color 0.3s;
}
header > a {
  grid-row: 1/2;
  grid-column: 3/4;
  justify-self: end;
  width: calc(63 / 750 * 100vw);
  height: calc(63 / 750 * 100vw);
  margin: 0 calc(18 / 750 * 100vw) 0 0;
}
header > a > img {
  width: 100%;
  height: auto;
}
header > section {
  grid-row: 2/3;
  grid-column: 1/4;
  display: none;
}
header > section:nth-of-type(1) {
  display: none;
  width: 100%;
  margin: calc(16 / 750 * 100vw) 0 0;
}
header > section:nth-of-type(1) > nav {
  width: calc(700 / 750 * 100vw);
  margin: 0 auto;
}
header > section:nth-of-type(1) > nav > li {
  width: 100%;
  font-size: calc(28 / 750 * 100vw);
  line-height: 1;
  border-bottom: calc(1 / 750 * 100vw) solid hsl(0, 0%, 84%);
}
header > section:nth-of-type(1) > nav > li:last-of-type {
  border-bottom: none;
}
header > section:nth-of-type(1) > nav > li > a {
  display: block;
  padding: calc(48 / 750 * 100vw) calc(25 / 750 * 100vw);
  background: url(../image/common/header_02_1.svg) right calc(27 / 750 * 100vw) center/calc(21 / 750 * 100vw) no-repeat;
}
header > section:nth-of-type(1) > nav > li:nth-of-type(1) > details > summary, header > section:nth-of-type(1) > nav > li:nth-of-type(5) > details > summary, header > section:nth-of-type(1) > nav > li:nth-of-type(6) > details > summary {
  padding: calc(48 / 750 * 100vw) calc(25 / 750 * 100vw);
  background: url(../image/common/header_02_2.svg) right calc(27 / 750 * 100vw) center/calc(21 / 750 * 100vw) no-repeat;
}
header > section:nth-of-type(1) > nav > li:nth-of-type(1) > details > nav, header > section:nth-of-type(1) > nav > li:nth-of-type(5) > details > nav, header > section:nth-of-type(1) > nav > li:nth-of-type(6) > details > nav {
  width: calc(600 / 750 * 100vw);
  margin: 0 auto;
}
header > section:nth-of-type(1) > nav > li:nth-of-type(1) > details > nav > li, header > section:nth-of-type(1) > nav > li:nth-of-type(5) > details > nav > li, header > section:nth-of-type(1) > nav > li:nth-of-type(6) > details > nav > li {
  font-size: calc(24 / 750 * 100vw);
  line-height: calc(60 / 750 * 100vw);
}
header > section:nth-of-type(1) > nav > li:nth-of-type(1) > details[open], header > section:nth-of-type(1) > nav > li:nth-of-type(5) > details[open], header > section:nth-of-type(1) > nav > li:nth-of-type(6) > details[open] {
  padding: 0 0 calc(50 / 750 * 100vw);
}
header > section:nth-of-type(1) > nav > li:nth-of-type(3) > details > summary, header > section:nth-of-type(1) > nav > li:nth-of-type(4) > details > summary {
  padding: calc(48 / 750 * 100vw) calc(25 / 750 * 100vw);
  background: url(../image/common/header_02_2.svg) right calc(27 / 750 * 100vw) center/calc(21 / 750 * 100vw) no-repeat;
}
header > section:nth-of-type(1) > nav > li:nth-of-type(3) > details[open], header > section:nth-of-type(1) > nav > li:nth-of-type(4) > details[open] {
  padding: 0 0 calc(50 / 750 * 100vw);
}
header > section:nth-of-type(1) > nav > li:nth-of-type(3) > details[open] > summary, header > section:nth-of-type(1) > nav > li:nth-of-type(4) > details[open] > summary {
  background: url(../image/common/header_02_3.svg) right calc(27 / 750 * 100vw) center/calc(21 / 750 * 100vw) no-repeat;
}
header > section:nth-of-type(1) > nav > li:nth-of-type(3) > details > nav, header > section:nth-of-type(1) > nav > li:nth-of-type(4) > details > nav {
  display: flex;
  flex-wrap: wrap;
  gap: calc(37 / 750 * 100vw) calc(40 / 750 * 100vw);
  width: calc(600 / 750 * 100vw);
  margin: 0 auto;
}
header > section:nth-of-type(1) > nav > li:nth-of-type(3) > details > nav > li, header > section:nth-of-type(1) > nav > li:nth-of-type(4) > details > nav > li {
  width: calc(280 / 750 * 100vw);
}
header > section:nth-of-type(1) > nav > li:nth-of-type(3) > details > nav > li > a > figure > img, header > section:nth-of-type(1) > nav > li:nth-of-type(4) > details > nav > li > a > figure > img {
  width: calc(280 / 750 * 100vw);
  height: auto;
}
header > section:nth-of-type(1) > nav > li:nth-of-type(3) > details > nav > li > a > figure > figcaption, header > section:nth-of-type(1) > nav > li:nth-of-type(4) > details > nav > li > a > figure > figcaption {
  margin: calc(11 / 750 * 100vw) 0 0;
  font-size: calc(24 / 750 * 100vw);
  line-height: 1;
}
header > section:nth-of-type(1) > nav > li:nth-of-type(3) > details > nav > li > nav > li, header > section:nth-of-type(1) > nav > li:nth-of-type(4) > details > nav > li > nav > li {
  margin: calc(58 / 750 * 100vw) 0 0;
  font-size: calc(24 / 750 * 100vw);
  line-height: calc(1 / 750 * 100vw);
}
header > section:nth-of-type(1) > nav > li:nth-of-type(3) > details > details, header > section:nth-of-type(1) > nav > li:nth-of-type(4) > details > details {
  margin: calc(38 / 750 * 100vw) auto 0;
}
header > section:nth-of-type(1) > nav > li:nth-of-type(3) > details > details > summary, header > section:nth-of-type(1) > nav > li:nth-of-type(4) > details > details > summary {
  position: relative;
  margin: 0 calc(50 / 750 * 100vw);
  padding: calc(61 / 750 * 100vw) 0 calc(61 / 750 * 100vw) calc(176 / 750 * 100vw);
  background: hsl(0, 0%, 97%) url(../image/common/header_02_2.svg) right calc(27 / 750 * 100vw) center/calc(21 / 750 * 100vw) no-repeat;
}
header > section:nth-of-type(1) > nav > li:nth-of-type(3) > details > details > summary::before, header > section:nth-of-type(1) > nav > li:nth-of-type(4) > details > details > summary::before {
  content: "";
  display: block;
  width: calc(130 / 750 * 100vw);
  height: calc(130 / 750 * 100vw);
  position: absolute;
  inset: calc(50% - 65 / 750 * 100vw) auto auto calc(22 / 750 * 100vw);
}
header > section:nth-of-type(1) > nav > li:nth-of-type(3) > details > details[open] > summary, header > section:nth-of-type(1) > nav > li:nth-of-type(4) > details > details[open] > summary {
  background: hsl(0, 0%, 97%) url(../image/common/header_02_3.svg) right calc(27 / 750 * 100vw) center/calc(21 / 750 * 100vw) no-repeat;
}
header > section:nth-of-type(1) > nav > li:nth-of-type(3) > details > details:first-of-type, header > section:nth-of-type(1) > nav > li:nth-of-type(4) > details > details:first-of-type {
  margin: 0 auto;
}
header > section:nth-of-type(1) > nav > li:nth-of-type(3) > details > details:nth-of-type(1) > summary::before, header > section:nth-of-type(1) > nav > li:nth-of-type(4) > details > details:nth-of-type(1) > summary::before {
  background: url(../image/common/header_04_3_1.webp) center/contain no-repeat;
}
header > section:nth-of-type(1) > nav > li:nth-of-type(3) > details > details:nth-of-type(2) > summary::before, header > section:nth-of-type(1) > nav > li:nth-of-type(4) > details > details:nth-of-type(2) > summary::before {
  background: url(../image/common/header_04_3_2.webp) center/contain no-repeat;
}
header > section:nth-of-type(1) > nav > li:nth-of-type(3) > details > details:nth-of-type(3) > summary::before, header > section:nth-of-type(1) > nav > li:nth-of-type(4) > details > details:nth-of-type(3) > summary::before {
  background: url(../image/common/header_04_3_3.webp) center/contain no-repeat;
}
header > section:nth-of-type(1) > nav > li:nth-of-type(3) > details > details:nth-of-type(4) > summary::before, header > section:nth-of-type(1) > nav > li:nth-of-type(4) > details > details:nth-of-type(4) > summary::before {
  background: url(../image/common/header_04_3_4.webp) center/contain no-repeat;
}
header > section:nth-of-type(1) > nav > li:nth-of-type(3) > details > details:nth-of-type(5) > summary::before, header > section:nth-of-type(1) > nav > li:nth-of-type(4) > details > details:nth-of-type(5) > summary::before {
  background: url(../image/common/header_04_3_5.webp) center/contain no-repeat;
}
header > section:nth-of-type(1) > nav > li:nth-of-type(3) > details > details:nth-of-type(6) > summary::before, header > section:nth-of-type(1) > nav > li:nth-of-type(4) > details > details:nth-of-type(6) > summary::before {
  background: url(../image/common/header_04_3_6.webp) center/contain no-repeat;
}
header > section:nth-of-type(1) > nav > li:nth-of-type(3) > details > details > nav, header > section:nth-of-type(1) > nav > li:nth-of-type(4) > details > details > nav {
  width: calc(600 / 750 * 100vw);
  margin: calc(21 / 750 * 100vw) auto 0;
}
header > section:nth-of-type(1) > nav > li:nth-of-type(3) > details > details > nav > li, header > section:nth-of-type(1) > nav > li:nth-of-type(4) > details > details > nav > li {
  font-size: calc(24 / 750 * 100vw);
  line-height: calc(60 / 750 * 100vw);
}
header.open {
  grid-template: auto 1fr/auto 0 1fr;
}
header.open::before {
  display: block;
}
header.open > button::before {
  transform: translate(0, calc(6.75 / 750 * 100vw)) rotate(45deg) scale(1.2727272727, 1);
  border-color: hsl(357, 0%, 10%);
}
header.open > button::after {
  transform: translate(0, calc(-6.75 / 750 * 100vw)) rotate(-45deg) scale(1.2727272727, 1);
  border-color: hsl(357, 0%, 10%);
}
header.open > section:nth-of-type(1) {
  display: block;
}

#arsoasalon {
  width: 100%;
  height: calc(725 / 750 * 100vw);
  position: relative;
  margin: calc(80 / 750 * 100vw) 0 0;
  padding: 0;
  background: hsl(357, 100%, 39%) url(../image/common/arsoasalon_01_sp.webp) right bottom/calc(673 / 750 * 100vw) no-repeat;
}
#arsoasalon > div {
  width: calc(710 / 750 * 100vw);
  height: calc(418 / 750 * 100vw);
  position: absolute;
  inset: calc(41 / 750 * 100vw) auto auto 0;
  padding: calc(41 / 750 * 100vw) 0 0 calc(51 / 750 * 100vw);
  background: hsl(0, 0%, 100%);
}
#arsoasalon > div > hgroup > h2 {
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  font-size: calc(60 / 750 * 100vw);
  line-height: 1;
  letter-spacing: calc(25em / 1000);
  color: hsl(0, 1%, 45%);
}
#arsoasalon > div > hgroup > p {
  margin: calc(18 / 750 * 100vw) 0 0;
  font-weight: 400;
  font-size: calc(24 / 750 * 100vw);
  line-height: 1;
  letter-spacing: calc(50em / 1000);
  color: hsl(0, 1%, 45%);
}
#arsoasalon > div > nav {
  display: flex;
  flex-wrap: wrap;
  gap: calc(32 / 750 * 100vw);
  list-style: none;
  margin: calc(65 / 750 * 100vw) auto 0;
  padding: 0;
}
#arsoasalon > div > nav > li {
  width: 100%;
}
#arsoasalon > div > nav > li > a {
  display: block;
  width: fit-content;
  font-weight: 400;
  font-size: calc(28 / 750 * 100vw);
  line-height: 1;
  letter-spacing: calc(50em / 1000);
  text-decoration: none;
  color: hsl(0, 0%, 0%);
}

footer {
  display: grid;
  grid-template: auto auto auto/auto 1fr;
  gap: 0 calc(80 / 750 * 100vw);
  width: 100%;
  margin: calc(120 / 750 * 100vw) 0 0;
  padding: calc(40 / 750 * 100vw) 0 calc(39 / 750 * 100vw) calc(27 / 750 * 100vw);
  background: hsl(0, 0%, 97%);
}
footer > h1 {
  grid-row: 1/2;
  grid-column: 1/2;
  width: calc(142 / 750 * 100vw);
  margin: calc(1 / 750 * 100vw) 0 0 calc(3 / 750 * 100vw);
}
footer > h1 > a {
  display: block;
  width: calc(142 / 750 * 100vw);
  height: calc(44 / 750 * 100vw);
}
footer > h1 > a > img {
  width: 100%;
  height: auto;
}
footer > nav:nth-of-type(1) {
  grid-row: 2/3;
  grid-column: 1/2;
  display: flex;
  gap: calc(30 / 750 * 100vw);
  margin: calc(14 / 750 * 100vw) 0 0 0;
}
footer > nav:nth-of-type(1) > li {
  width: calc(39 / 750 * 100vw);
  height: calc(39 / 750 * 100vw);
}
footer > nav:nth-of-type(1) > li > a {
  display: block;
  width: calc(39 / 750 * 100vw);
  height: calc(39 / 750 * 100vw);
}
footer > nav:nth-of-type(1) > li > a > img {
  width: 100%;
  height: auto;
}
footer > nav:nth-of-type(2) {
  grid-row: 1/2;
  grid-column: 2/3;
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: calc(40 / 750 * 100vw);
  width: calc(380 / 750 * 100vw);
}
footer > nav:nth-of-type(2) > li {
  width: 100%;
}
footer > nav:nth-of-type(2) > li > a {
  font-size: calc(20 / 750 * 100vw);
  line-height: 1;
  letter-spacing: calc(50em / 1000);
  color: hsl(0, 0%, 50%);
}
footer > nav:nth-of-type(3) {
  grid-row: 2/3;
  grid-column: 2/3;
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: calc(23 / 750 * 100vw);
  width: calc(380 / 750 * 100vw);
  margin: calc(48 / 750 * 100vw) 0 0 0;
}
footer > nav:nth-of-type(3) > li {
  width: 100%;
}
footer > nav:nth-of-type(3) > li > a {
  font-size: calc(18 / 750 * 100vw);
  line-height: 1;
  letter-spacing: calc(50em / 1000);
  color: hsl(0, 0%, 50%);
}
footer > small {
  grid-row: 3/4;
  grid-column: 1/3;
  justify-self: end;
  display: block;
  width: fit-content;
  margin: calc(47 / 750 * 100vw) calc(51 / 750 * 100vw) 0 0;
  font-size: calc(16 / 750 * 100vw);
  line-height: 1;
  letter-spacing: calc(50em / 1000);
  color: hsl(0, 0%, 50%);
}
@media screen and (max-width:768px){
  .pc {
    display: none;
  }
}
@media print, screen and (min-width:769px){
  .sp {
    display: none;
  }
  html {
    scroll-padding-top: 8.3333333333vw;
  }
  body:has(> header.open) {
    overflow: auto;
  }
  #header_dummy {
    width: 100%;
    height: min(calc(80 / 1920 * 100vw), 80px);
  }
  header {
    grid-template: auto 0fr/auto 1fr 0;
    padding: min(calc(12 / 1920 * 100vw), 12px) 0 min(calc(10 / 1920 * 100vw), 10px);
  }
  header::before {
    display: none !important;
  }
  header > h1 {
    grid-row: 1/2;
    grid-column: 1/2;
    justify-self: start;
    width: min(calc(130 / 1920 * 100vw), 130px);
    margin: 0 0 0 min(calc(50 / 1920 * 100vw), 50px);
  }
  header > nav {
    justify-self: end;
    align-self: center;
    display: flex;
    gap: min(calc(50 / 1920 * 100vw), 50px);
    margin: 0 min(calc(104 / 1920 * 100vw), 104px) 0 0;
  }
  header > nav > li {
    position: relative;
    font-size: min(calc(16 / 1920 * 100vw), 16px);
    line-height: 1;
    letter-spacing: min(calc(1.6 / 1920 * 100vw), 1.6px);
    color: hsl(0, 1%, 45%);
  }
  header > nav > li:not(:has(> a)) {
    cursor: pointer;
    transition: opacity 0.3s;
  }
  header > nav > li:not(:has(> a)):hover {
    opacity: 0.7;
  }
  header > nav > li > a {
    color: hsl(0, 1%, 45%);
    transition: opacity 0.3s;
  }
  header > nav > li > a:hover {
    opacity: 0.7;
  }
  header > button {
    grid-row: 1/2;
    grid-column: 3/4;
    display: none;
  }
  header > a {
    display: none;
  }
  header > section {
    grid-row: 2/3;
    grid-column: 1/4;
    display: none;
  }
  header > section:nth-of-type(1) {
    display: none !important;
  }
  header > section:nth-of-type(2), header > section:nth-of-type(3), header > section:nth-of-type(4), header > section:nth-of-type(5), header > section:nth-of-type(6) {
    margin: min(calc(34 / 1920 * 100vw), 34px) 0 0;
    padding: 0 0 min(calc(21 / 1920 * 100vw), 21px);
  }
  header > section:nth-of-type(2) > nav, header > section:nth-of-type(5) > nav, header > section:nth-of-type(6) > nav {
    display: flex;
    gap: min(calc(100 / 1920 * 100vw), 100px);
    width: fit-content;
    margin: 0 auto;
  }
  header > section:nth-of-type(2) > nav > li, header > section:nth-of-type(5) > nav > li, header > section:nth-of-type(6) > nav > li {
    font-size: min(calc(16 / 1920 * 100vw), 16px);
    line-height: 1;
    letter-spacing: calc(100em / 1000);
  }
  header > section:nth-of-type(2) > nav > li > a, header > section:nth-of-type(5) > nav > li > a, header > section:nth-of-type(6) > nav > li > a {
    color: hsl(0, 0%, 0%);
    transition: opacity 0.3s;
  }
  header > section:nth-of-type(2) > nav > li > a:hover, header > section:nth-of-type(5) > nav > li > a:hover, header > section:nth-of-type(6) > nav > li > a:hover {
    opacity: 0.7;
  }
  header > section:nth-of-type(4) > nav {
    display: flex;
    gap: min(calc(60 / 1920 * 100vw), 60px);
    width: fit-content;
    margin: 0 auto;
  }
  header > section:nth-of-type(4) > nav > li > a > figure > div {
    width: min(calc(192 / 1920 * 100vw), 192px);
    height: min(calc(100 / 1920 * 100vw), 100px);
    overflow: hidden;
  }
  header > section:nth-of-type(4) > nav > li > a > figure > div > img {
    display: block;
    width: min(calc(192 / 1920 * 100vw), 192px);
    height: auto;
    transition: transform 0.6s;
  }
  header > section:nth-of-type(4) > nav > li > a > figure > figcaption {
    margin: min(calc(11 / 1920 * 100vw), 11px) 0 0;
    font-size: min(calc(16 / 1920 * 100vw), 16px);
    line-height: 1;
  }
  header > section:nth-of-type(4) > nav > li > a:hover > figure > div > img {
    transform: scale(1.07);
  }
  header > section:nth-of-type(4) > nav > li > nav {
    display: flex;
    flex-wrap: wrap;
    gap: min(calc(29 / 1920 * 100vw), 29px);
    width: min(calc(192 / 1920 * 100vw), 192px);
    margin: min(calc(27 / 1920 * 100vw), 27px) 0 0;
  }
  header > section:nth-of-type(4) > nav > li > nav > li {
    font-size: min(calc(16 / 1920 * 100vw), 16px);
    line-height: 1;
  }
  header > section:nth-of-type(4) > nav > li > nav > li > a {
    transition: opacity 0.3s;
  }
  header > section:nth-of-type(4) > nav > li > nav > li > a:hover {
    opacity: 0.7;
  }
  header > section:nth-of-type(3) > nav:nth-of-type(1) {
    display: flex;
    gap: min(calc(23 / 1920 * 100vw), 23px);
    width: fit-content;
    margin: 0 auto;
  }
  header > section:nth-of-type(3) > nav:nth-of-type(1) > li {
    width: min(calc(215 / 1920 * 100vw), 215px);
    position: relative;
    padding: min(calc(44 / 1920 * 100vw), 44px) min(calc(5 / 1920 * 100vw), 5px) min(calc(40 / 1920 * 100vw), 40px) min(calc(87 / 1920 * 100vw), 87px);
    font-size: min(calc(16 / 1920 * 100vw), 16px);
    line-height: 1;
    text-align: center;
    background: hsl(0, 0%, 97%);
    cursor: pointer;
  }
  header > section:nth-of-type(3) > nav:nth-of-type(1) > li::before {
    content: "";
    display: block;
    width: min(calc(87 / 1920 * 100vw), 87px);
    height: min(calc(87 / 1920 * 100vw), 87px);
    position: absolute;
    inset: min(calc(8 / 1920 * 100vw), 8px) auto auto min(calc(8 / 1920 * 100vw), 8px);
    transition: transform 0.6s;
  }
  header > section:nth-of-type(3) > nav:nth-of-type(1) > li:nth-of-type(1)::before {
    background: url(../image/common/header_04_3_1.webp) center/contain no-repeat;
  }
  header > section:nth-of-type(3) > nav:nth-of-type(1) > li:nth-of-type(2)::before {
    background: url(../image/common/header_04_3_2.webp) center/contain no-repeat;
  }
  header > section:nth-of-type(3) > nav:nth-of-type(1) > li:nth-of-type(3)::before {
    background: url(../image/common/header_04_3_3.webp) center/contain no-repeat;
  }
  header > section:nth-of-type(3) > nav:nth-of-type(1) > li:nth-of-type(4)::before {
    background: url(../image/common/header_04_3_4.webp) center/contain no-repeat;
  }
  header > section:nth-of-type(3) > nav:nth-of-type(1) > li:nth-of-type(5)::before {
    background: url(../image/common/header_04_3_5.webp) center/contain no-repeat;
  }
  header > section:nth-of-type(3) > nav:nth-of-type(1) > li:nth-of-type(6)::before {
    background: url(../image/common/header_04_3_6.webp) center/contain no-repeat;
  }
  header > section:nth-of-type(3) > nav:nth-of-type(1) > li:hover::before {
    transform: scale(1.07);
  }
  header > section:nth-of-type(3) > nav:nth-of-type(1) > li.open {
    background: hsl(0, 0%, 92%);
  }
  header > section:nth-of-type(3) > nav:nth-of-type(2) {
    margin: min(calc(27 / 1920 * 100vw), 27px) auto 0;
  }
  header > section:nth-of-type(3) > nav:nth-of-type(2) > li {
    display: none;
    gap: min(calc(70 / 1920 * 100vw), 70px);
    width: fit-content;
  }
  header > section:nth-of-type(3) > nav:nth-of-type(2) > li > nav > li {
    font-size: min(calc(14 / 1920 * 100vw), 14px);
    line-height: min(calc(36 / 1920 * 100vw), 36px);
  }
  header > section:nth-of-type(3) > nav:nth-of-type(2) > li > nav > li > a {
    transition: opacity 0.3s;
  }
  header > section:nth-of-type(3) > nav:nth-of-type(2) > li > nav > li > a:hover {
    opacity: 0.7;
  }
  header > section:nth-of-type(3) > nav:nth-of-type(2) > li:nth-of-type(1) {
    margin: 0 0 0 calc(50% - min(calc(703 / 1920 * 100vw), 703px));
  }
  header > section:nth-of-type(3) > nav:nth-of-type(2) > li:nth-of-type(2) {
    margin: 0 0 0 calc(50% - min(calc(464 / 1920 * 100vw), 464px));
  }
  header > section:nth-of-type(3) > nav:nth-of-type(2) > li:nth-of-type(3) {
    margin: 0 auto;
  }
  header > section:nth-of-type(3) > nav:nth-of-type(2) > li:nth-of-type(4) {
    margin: 0 0 0 calc(50% + min(calc(12 / 1920 * 100vw), 12px));
  }
  header > section:nth-of-type(3) > nav:nth-of-type(2) > li:nth-of-type(5) {
    margin: 0 0 0 calc(50% + min(calc(250 / 1920 * 100vw), 250px));
  }
  header > section:nth-of-type(3) > nav:nth-of-type(2) > li:nth-of-type(6) {
    margin: 0 0 0 calc(50% + min(calc(488 / 1920 * 100vw), 488px));
  }
  header > section:nth-of-type(3):has(> nav:nth-of-type(1) > li:nth-of-type(1).open) > nav:nth-of-type(2) > li:nth-of-type(1) {
    display: flex;
  }
  header > section:nth-of-type(3):has(> nav:nth-of-type(1) > li:nth-of-type(2).open) > nav:nth-of-type(2) > li:nth-of-type(2) {
    display: flex;
  }
  header > section:nth-of-type(3):has(> nav:nth-of-type(1) > li:nth-of-type(3).open) > nav:nth-of-type(2) > li:nth-of-type(3) {
    display: flex;
  }
  header > section:nth-of-type(3):has(> nav:nth-of-type(1) > li:nth-of-type(4).open) > nav:nth-of-type(2) > li:nth-of-type(4) {
    display: flex;
  }
  header > section:nth-of-type(3):has(> nav:nth-of-type(1) > li:nth-of-type(5).open) > nav:nth-of-type(2) > li:nth-of-type(5) {
    display: flex;
  }
  header > section:nth-of-type(3):has(> nav:nth-of-type(1) > li:nth-of-type(6).open) > nav:nth-of-type(2) > li:nth-of-type(6) {
    display: flex;
  }
  header:has(> nav > li.open) {
    position: fixed;
    grid-template: auto 1fr/auto 1fr 0;
  }
  header:has(> nav > li:nth-of-type(1).open) > section:nth-of-type(2) {
    display: block;
  }
  header:has(> nav > li:nth-of-type(3).open) > section:nth-of-type(3) {
    display: block;
  }
  header:has(> nav > li:nth-of-type(4).open) > section:nth-of-type(4) {
    display: block;
  }
  header:has(> nav > li:nth-of-type(5).open) > section:nth-of-type(5) {
    display: block;
  }
  header:has(> nav > li:nth-of-type(6).open) > section:nth-of-type(6) {
    display: block;
  }
  #arsoasalon {
    height: min(calc(380 / 1920 * 100vw), 380px);
    margin: min(calc(120 / 1920 * 100vw), 120px) 0 0;
    background: hsl(357, 100%, 39%) url(../image/common/arsoasalon_01_pc.webp) calc(50% + min(calc(440 / 1920 * 100vw), 440px)) center/min(calc(1040 / 1920 * 100vw), 1040px) no-repeat;
  }
  #arsoasalon > div {
    width: min(calc(891 / 1920 * 100vw), 891px);
    height: min(calc(260 / 1920 * 100vw), 260px);
    inset: min(calc(60 / 1920 * 100vw), 60px) auto auto calc(50% - min(calc(831 / 1920 * 100vw), 831px));
    padding: min(calc(56 / 1920 * 100vw), 56px) 0 0 min(calc(130 / 1920 * 100vw), 130px);
    background: hsl(0, 0%, 100%);
  }
  #arsoasalon > div > hgroup > h2 {
    font-size: min(calc(50 / 1920 * 100vw), 50px);
  }
  #arsoasalon > div > hgroup > p {
    margin: min(calc(6 / 1920 * 100vw), 6px) 0 0;
    font-size: min(calc(16 / 1920 * 100vw), 16px);
    line-height: 1;
  }
  #arsoasalon > div > nav {
    gap: min(calc(52 / 1920 * 100vw), 52px);
    margin: min(calc(51 / 1920 * 100vw), 51px) auto 0;
    padding: 0;
  }
  #arsoasalon > div > nav > li {
    width: fit-content;
  }
  #arsoasalon > div > nav > li > a {
    font-size: min(calc(18 / 1920 * 100vw), 18px);
    transition: opacity 0.3s;
  }
  #arsoasalon > div > nav > li > a:hover {
    opacity: 0.7;
  }
  footer {
    gap: 0;
    width: 100%;
    margin: min(calc(150 / 1920 * 100vw), 150px) 0 0;
    padding: min(calc(50 / 1920 * 100vw), 50px) 0 min(calc(20 / 1920 * 100vw), 20px) min(calc(63 / 1920 * 100vw), 63px);
    background: hsl(0, 0%, 97%);
  }
  footer > h1 {
    width: min(calc(152 / 1920 * 100vw), 152px);
    margin: 0;
  }
  footer > h1 > a {
    width: min(calc(152 / 1920 * 100vw), 152px);
    height: min(calc(68 / 1920 * 100vw), 68px);
  }
  footer > nav:nth-of-type(1) {
    gap: min(calc(26 / 1920 * 100vw), 26px);
    margin: min(calc(32 / 1920 * 100vw), 32px) 0 0 min(calc(2 / 1920 * 100vw), 2px);
  }
  footer > nav:nth-of-type(1) > li {
    width: min(calc(28 / 1920 * 100vw), 28px);
    height: min(calc(28 / 1920 * 100vw), 28px);
  }
  footer > nav:nth-of-type(1) > li > a {
    width: min(calc(28 / 1920 * 100vw), 28px);
    height: min(calc(28 / 1920 * 100vw), 28px);
    transition: opacity 0.3s;
  }
  footer > nav:nth-of-type(1) > li > a:hover {
    opacity: 0.7;
  }
  footer > nav:nth-of-type(2) {
    gap: min(calc(34 / 1920 * 100vw), 34px);
    width: min(calc(470 / 1920 * 100vw), 470px);
  }
  footer > nav:nth-of-type(2) > li > a {
    font-size: min(calc(16 / 1920 * 100vw), 16px);
    transition: opacity 0.3s;
  }
  footer > nav:nth-of-type(2) > li > a:hover {
    opacity: 0.7;
  }
  footer > nav:nth-of-type(3) {
    gap: min(calc(11 / 1920 * 100vw), 11px);
    width: min(calc(470 / 1920 * 100vw), 470px);
    margin: min(calc(48 / 1920 * 100vw), 48px) 0 0 0;
  }
  footer > nav:nth-of-type(3) > li > a {
    font-size: min(calc(13 / 1920 * 100vw), 13px);
    transition: opacity 0.3s;
  }
  footer > nav:nth-of-type(3) > li > a:hover {
    opacity: 0.7;
  }
  footer > small {
    margin: min(calc(129 / 1920 * 100vw), 129px) min(calc(49 / 1920 * 100vw), 49px) 0 0;
    font-size: min(calc(13 / 1920 * 100vw), 13px);
  }
}