@charset "UTF-8";
:root {
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-24: 1.5rem;
  --font-size-32: 2rem;
  --font-size-35: 2.1875rem;
  --font-size-40: 2.5rem;
  --font-size-50: 3.125rem;
  --font-size-60: 3.75rem;
  --padding-horizontal: 4.86vw;
}

body {
  background-color: #fff;
  color: #333;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0;
  font-weight: inherit;
}

h2 {
  font-size: clamp(1.25rem, 0.738rem + 2.1vw, 2rem);
  letter-spacing: 0.08em;
}

p {
  margin-bottom: 0;
}

:where(.main) p[class^=p] {
  font-size: clamp(1rem, 0.903rem + 0.4vw, 1.125rem);
  line-height: 1.8;
  letter-spacing: 0.06em;
}

img {
  max-width: 100%;
}

a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

a:focus-visible {
  color: inherit;
}
.julius-sans-one-regular {
  font-family: "Julius Sans One", sans-serif;
}

.montserrat-light {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
}

.hidden {
  display: none !important;
}

.fade-in {
  transition: opacity 1s ease-in, translate 0.8s ease-out;
}

.fade-in.is-ready {
  opacity: 0;
  translate: 0 50px;
}

.fade-in.show {
  opacity: 1 !important;
  translate: 0 0 !important;
}

.container {
  max-width: 1130px;
}

.row {
  margin-right: 0;
  margin-left: 0;
}

.bg-gradient {
  background: linear-gradient(180deg, #FDFAF1 85.55%, #FFFFFF 100%);
}

.link-button a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 1.778em;
  font-size: clamp(16px, 16px + 2 * (100vw - 390px) / 570, 18px);
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.link-button a::after {
  content: "";
  width: 1.889em;
  height: 1.889em;
  background: transparent url(https://mirai-beauty.jp/system_panel/uploads/images/20250123155420680914.svg) center/100% auto no-repeat;
}

.link-button a:focus-visible {
  text-decoration: none;
}
.page-title {
  padding-top: clamp(64px, 64px + 66 * (100vw - 390px) / 570, 130px);
  padding-bottom: clamp(64px, 64px + 61 * (100vw - 390px) / 570, 125px);
  text-align: center;
}

.page-title h1 {
  color: #4c180b;
  font-size: clamp(1.875rem, 0.583rem + 5.3vw, 3.75rem);
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.page-title h1 + p {
  margin-top: -6px;
  font-size: clamp(1.25rem, 0.616rem + 2.6vw, 2.188rem);
  letter-spacing: 0.08em;
}

.gmap {
  width: min(848px, 100%);
  aspect-ratio: 848/393;
  margin-right: auto;
  margin-left: auto;
}

.gmap iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

.webgene-blog {
  display: grid;
  max-width: 867px;
  margin-right: auto;
  margin-left: auto;
}

.webgene-item {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 26px 24px 32px;
  border-bottom: 1px solid #ddd;
}

.webgene-blog .news-category {
  flex: 0 0 132px;
  padding: 3px;
  border-radius: 100em;
  border: 1px solid currentColor;
  color: #9f665d;
  font-size: clamp(0.75rem, 0.653rem + 0.4vw, 0.875rem);
  letter-spacing: 0.04em;
  text-align: center;
}

.webgene-blog .news-date {
  flex: 0 0 auto;
  font-size: clamp(0.875rem, 0.778rem + 0.4vw, 1rem);
  letter-spacing: 0.04em;
}

.webgene-blog .news-title {
  flex: 0 0 100%;
  font-size: clamp(1rem, 0.903rem + 0.4vw, 1.125rem);
  line-height: 1.8;
  letter-spacing: 0.06em;
}

.webgene-blog .news-title a {
  display: -webkit-box;
  height: 2lh;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.webgene-pagination {
  margin-top: 50px;
  margin-right: 2.5em;
  font-size: clamp(1.125rem, 1.028rem + 0.4vw, 1.25rem);
}

.webgene-pagination ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.5em;
  color: #a9a9a9;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  letter-spacing: 0.06em;
}

.webgene-pagination li::before {
  content: "​";
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}

.webgene-pagination .selected {
  color: #333;
}

.webgene-pagination :where(.prev, .next) {
  flex: 0 0 1.7em;
  height: 1.7em;
}

.webgene-pagination :where(.prev, .next) a {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  font-size: 0;
  background: transparent url(https://mirai-beauty.jp/system_panel/uploads/images/20250123155420680914.svg) center/100% auto no-repeat;
}

.webgene-pagination .prev {
  margin-right: 0.95em;
  scale: -1 1;
}

.webgene-pagination .next {
  margin-left: 0.95em;
}

.header {
  position: sticky;
  z-index: 5;
  top: 0;
  background-color: #fdfaf1;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  margin-right: auto;
  margin-left: auto;
  padding: 27px 1.67% 22px 6.39%;
}

.header-logo {
  width: min(272px, 40vw);
}

.header-nav {
  display: none;
}

.navbar {
  position: fixed;
  top: 0;
  right: 0;
  display: grid;
  justify-items: end;
  width: 100%;
  padding: 0;
  background-color: #fdfaf1;
}

.navbar-toggler {
  position: fixed;
  top: 10px;
  right: 10px;
  display: grid;
  place-content: center;
  gap: 4px;
  width: 60px;
  height: 60px;
  padding: 0;
  color: #333;
}

.navbar-toggler-icon {
  display: block;
  width: 30px;
  height: 2px;
  background-color: #333;
  background-image: none;
}

.navbar-toggler[aria-expanded=true] .navbar-toggler-icon {
  position: absolute;
  inset: 0;
  margin: auto;
}

.navbar-toggler[aria-expanded=true] .navbar-toggler-icon:nth-of-type(1) {
  rotate: 45deg;
}

.navbar-toggler[aria-expanded=true] .navbar-toggler-icon:nth-of-type(2) {
  rotate: -45deg;
}

.navbar-toggler[aria-expanded=true] .navbar-toggler-icon:nth-of-type(3) {
  display: none;
}

.navbar-nav {
  display: grid;
  align-content: start;
  gap: 10px;
  height: 100dvh;
  padding: 100px 40px 40px;
}

.navbar-nav a {
  padding-top: 10px;
  padding-bottom: 10px;
}

.reserve-button a {
  position: fixed;
  z-index: 5;
  right: 13px;
  bottom: 33px;
  display: block;
  width: calc(2lh + 4.9em);
  height: calc(2lh + 4.9em);
  aspect-ratio: 1/1;
  padding: 1.15em 0 1.7em;
  border-radius: 50%;
  background-color: #c76c5e;
  color: #fff;
  font-size: clamp(0.875rem, 0.607rem + 1.1vw, 1.25rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-align: center;
}

.reserve-button a::before {
  content: "";
  display: block;
  width: 1.65em;
  height: 1.65em;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 8px;
  background: transparent url(https://mirai-beauty.jp/system_panel/uploads/images/20250122163713667008.svg) center/100% auto no-repeat;
}

.reserve-button a:focus-visible {
  text-decoration: none;
}
.footer {
  padding-bottom: clamp(120px, 120px + 140 * (100vw - 390px) / 570, 260px);
  background-color: #dbbeb6;
  font-size: clamp(1rem, 0.903rem + 0.4vw, 1.125rem);
}

.footer::before {
  content: "";
  display: block;
  width: 100%;
  height: 30.97vw;
  background-image: url(https://mirai-beauty.jp/system_panel/uploads/images/20250123142531798027.svg), linear-gradient(to bottom, #fff, #dbbeb6);
  background-position: center top;
  background-size: 100%;
  background-repeat: no-repeat;
}

.footer-inner {
  padding-top: clamp(80px, 80px + 108 * (100vw - 390px) / 570, 188px);
}

.footer-row {
  max-width: 1130px;
  margin-right: auto;
  margin-left: auto;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 50px 72px;
  margin-top: 50px;
}

.footer-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 300px;
}

.footer-logo {
  width: 221px;
  margin-right: min(19px, 1.73vw);
}

.footer-info {
  flex: 0 0 auto;
}

.footer-address {
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 8px;
  letter-spacing: 0.03em;
  line-height: 1.8;
}

.footer-tel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-24);
  letter-spacing: 0.03em;
}

.footer-tel::before {
  content: "";
  width: 1.042em;
  height: 1.042em;
  background: transparent url(https://mirai-beauty.jp/system_panel/uploads/images/20250122165203678421.svg) center/100% auto no-repeat;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 24px + 18 * (100vw - 390px) / 570, 42px) 33px;
  max-width: 610px;
  letter-spacing: 0.05em;
}

.copyright {
  padding-top: 14px;
  padding-bottom: 14px;
  background-color: #4c180b;
  color: #fff;
  font-size: 0.688rem;
  text-align: center;
}

.top-fv {
  position: relative;
  padding-top: clamp(60px, 60px + 61 * (100vw - 390px) / 570, 121px);
  padding-bottom: min(575px, 39.93vw);
  font-size: clamp(1rem, 0.659rem + 1.4vw, 1.5rem);
  letter-spacing: 0.06em;
}

.top-fv::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 41.11vw;
  background: #fdfaf1 url(https://mirai-beauty.jp/system_panel/uploads/images/20250218124825960468.jpg) center bottom/100% auto no-repeat;
}

.top-fv .img {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 73.54vw;
  height: 41.11vw;
}

.top-fv-inner {
  position: relative;
  z-index: 1;
}

.top-fv-inner > * {
  transition: opacity 0.8s ease-out;
}

.no-transition > * {
  transition: none;
}

.top-fv-inner > .is-ready {
  opacity: 0;
}

.top-fv-inner > .show {
  opacity: 1 !important;
}

.top-fv h1 {
  margin-top: 8px;
  margin-bottom: 42px;
  font: inherit;
}

.top-fv h1 + p {
  letter-spacing: 0.06em;
}

.top-page h2 {
  color: #4c180b;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: clamp(2rem, 0.806rem + 4.9vw, 3.75rem);
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.section-heading p {
  font-size: clamp(1.5rem, 1.159rem + 1.4vw, 2rem);
  letter-spacing: 0.06em;
}

.top-about {
  position: relative;
  z-index: 1;
  padding-top: 174px;
  padding-bottom: 120px;
  background-image: url(https://mirai-beauty.jp/system_panel/uploads/images/20250123154805796660.png), url(https://mirai-beauty.jp/system_panel/uploads/images/20250123154825702081.svg);
  background-size: min(100%, 711px) auto, 720px auto;
  background-position: center top 100px, center bottom;
  background-repeat: no-repeat;
  text-align: center;
}

.top-about h2 {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: clamp(18px, 18px + 17 * (100vw - 390px) / 570, 35px);
  font-weight: 400;
  letter-spacing: 0.08em;
}

.top-about h2 + p {
  margin-top: clamp(40px, 40px + 30 * (100vw - 390px) / 570, 70px);
  font-size: clamp(1rem, 0.829rem + 0.7vw, 1.25rem);
}

.top-about .link-button {
  margin-top: clamp(40px, 40px + 48 * (100vw - 390px) / 570, 88px);
}

.top-menu {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin-right: auto;
  margin-left: auto;
}

.top-menu .img {
  display: block;
  width: min(492px, 100% - 30px);
  aspect-ratio: 492/279;
  margin-top: 40px;
  margin-right: auto;
  margin-left: auto;
}

.top-menu-inner {
  position: relative;
  z-index: 1;
  max-width: 906px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 40px;
}

.top-menu-inner .section-heading {
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 47px;
  text-align: center;
}

:where(.top-menu, .top-makeover) .link-button {
  max-width: 740px;
  margin-top: 50px;
  margin-right: auto;
  margin-left: auto;
  text-align: right;
}

.top-menu .section-heading + p {
  margin-left: 7px;
}

.top-service {
  padding-top: clamp(120px, 120px + 66 * (100vw - 390px) / 570, 186px);
}

.top-service-inner {
  display: grid;
  gap: 85px 7.85%;
  justify-items: center;
  max-width: 1113px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
}

.top-service .col {
  position: relative;
  display: grid;
  gap: 1.167em;
  max-width: 500px;
  padding-top: clamp(64px, 64px + 26 * (100vw - 390px) / 570, 90px);
  padding-bottom: clamp(48px, 48px + 26 * (100vw - 390px) / 570, 74px);
  background-color: #dbbeb6;
  font-size: clamp(1rem, 0.903rem + 0.4vw, 1.125rem);
  text-align: center;
}

.top-service h2 {
  position: absolute;
  top: -0.617em;
  right: 0;
  left: 0;
  text-align: center;
}

.top-service h2 + p {
  font-size: clamp(1.5rem, 1.159rem + 1.4vw, 2rem);
  letter-spacing: 0.06em;
}

.top-service .link-button {
  margin-top: 1.667em;
}

.top-flow {
  padding: clamp(120px, 120px + 95 * (100vw - 390px) / 570, 215px) 15px 204px;
  background: transparent url(https://mirai-beauty.jp/system_panel/uploads/images/20250123154805796660.png) center top 56px/min(100%, 711px) auto no-repeat;
  text-align: center;
}

.top-flow h2,
.top-news h2,
.top-access h2 {
  font-size: clamp(2rem, 1.22rem + 3.2vw, 3.125rem);
}

.top-flow .section-heading {
  margin-bottom: clamp(48px, 48px + 28 * (100vw - 390px) / 570, 76px);
}

.top-flow .link-button {
  margin-top: clamp(40px, 40px + 33 * (100vw - 390px) / 570, 73px);
}

.top-makeover {
  position: relative;
  max-width: 1440px;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: clamp(60px, 60px + 57 * (100vw - 390px) / 570, 117px);
}

.top-makeover .img {
  display: block;
  width: min(510px, 100% - 30px);
  aspect-ratio: 510/279;
  margin-top: 40px;
  margin-right: auto;
  margin-left: auto;
  pointer-events: none;
}

.top-makeover-inner {
  position: relative;
  z-index: 1;
}

.top-makeover h2 + p {
  margin-top: 8px;
  margin-left: 1.625em;
}

.top-makeover .section-heading + p {
  max-width: 928px;
  margin: clamp(40px, 40px + 18 * (100vw - 390px) / 570, 58px) auto;
}

.top-news {
  padding-top: clamp(48px, 48px + 29 * (100vw - 390px) / 570, 77px);
  background: transparent url(https://mirai-beauty.jp/system_panel/uploads/images/20250131120157931203.jpg) center top/100% auto no-repeat;
}

.top-news .section-heading {
  margin-bottom: 28px;
  text-align: center;
}

.top-news h2 {
  margin-bottom: 18px;
}

.top-news .link-button {
  max-width: 1100px;
  margin-top: 42px;
  margin-right: auto;
  margin-left: auto;
  text-align: right;
}

.top-access {
  max-width: 878px;
  margin-right: auto;
  margin-left: auto;
  padding-top: clamp(100px, 100px + 100 * (100vw - 390px) / 570, 200px);
  padding-bottom: 93px;
  text-align: center;
}

.top-access h2 {
  margin-bottom: 7px;
}

.top-access .link-button {
  margin-top: 30px;
  text-align: right;
}

.top-access .gmap {
  margin-top: 50px;
}

.top-access .gmap + p {
  margin-top: 40px;
  margin-bottom: 54px;
}

.page-about {
  padding-bottom: clamp(160px, 160px + 217 * (100vw - 390px) / 570, 377px);
}
.page-about .page-title {
  padding-bottom: 33px;
}
.page-about .section-lead {
  position: relative;
  padding-bottom: clamp(80px, 80px + 66 * (100vw - 390px) / 570, 146px);
  text-align: center;
}
.page-about .section-lead::before,
.page-about .section-lead::after {
  content: "";
  display: block;
  width: 50%;
  aspect-ratio: 532/360;
}
.page-about .section-lead::before {
  background: transparent url(https://mirai-beauty.jp/system_panel/uploads/images/20250205144845991329.png) center/100% auto no-repeat;
}
.page-about .section-lead::after {
  margin-left: auto;
  background: transparent url(https://mirai-beauty.jp/system_panel/uploads/images/20250205144845318271.png) center/100% auto no-repeat;
}
.page-about .section-lead h2 {
  font-size: clamp(1.25rem, 0.909rem + 1.4vw, 1.75rem);
}
.page-about .section-lead > * {
  position: relative;
  z-index: 1;
}
.page-about .section-lead p {
  margin-top: clamp(32px, 32px + 18 * (100vw - 390px) / 570, 50px);
}
.page-about .section-lead p + p {
  margin-top: 1lh;
}
.page-about .section-lead p + h2 {
  margin-top: clamp(80px, 80px + 85 * (100vw - 390px) / 570, 165px);
  font-size: clamp(1.25rem, 0.738rem + 2.1vw, 2rem);
}
.page-about .section-concept {
  padding-top: 8px;
  padding-bottom: clamp(48px, 48px + 39 * (100vw - 390px) / 570, 87px);
}
.page-about .section-concept .row {
  align-items: center;
  gap: 28px 21px;
  margin-top: 37px;
}
.page-about .section-concept .text strong {
  color: #4c180b;
  font-size: clamp(1.125rem, 0.954rem + 0.7vw, 1.375rem);
  font-weight: 500;
}
.page-about .section-concept p + p {
  margin-top: 28px;
}
.page-about .section-concept .img {
  width: 100%;
  max-width: 411px;
  aspect-ratio: 411/402;
}
.page-about .section-features {
  padding-top: clamp(48px, 48px + 28 * (100vw - 390px) / 570, 76px);
}
.page-about .section-features h2 {
  text-align: center;
}
.page-about .features-wrap {
  display: flex;
  flex-direction: column-reverse;
  gap: 40px;
  margin-top: clamp(40px, 40px + 43 * (100vw - 390px) / 570, 83px);
}
.page-about .features-wrap .img {
  width: 50%;
}
.page-about .features-wrap .container {
  display: grid;
  gap: clamp(32px, 32px + 28 * (100vw - 390px) / 570, 60px) 0;
  margin-left: 0;
  padding-left: 0;
  counter-reset: num;
}
.page-about .features-wrap .container > div {
  display: grid;
  grid-template-columns: 3.438rem 1fr;
  gap: 21px 16px;
  counter-increment: num;
}
.page-about .features-wrap .container > div::before {
  content: "0" counter(num);
  color: #af9189;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2rem, 1.659rem + 1.4vw, 2.5rem);
  font-optical-sizing: auto;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.06em;
  text-align: right;
}
.page-about .features-wrap :where(h3, p) {
  grid-column: 2/3;
}
.page-about .features-wrap h3 {
  display: flex;
  align-items: center;
  color: #4c180b;
  font-size: clamp(1.125rem, 0.954rem + 0.7vw, 1.375rem);
  font-weight: 500;
  letter-spacing: 0.06em;
}

.page-menu {
  padding-bottom: clamp(160px, 160px + 98 * (100vw - 390px) / 570, 258px);
}
.page-menu .bg-gradient,
.page-menu .section-white {
  position: relative;
}
.page-menu .bg-gradient::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: clamp(160px, 160px + 23 * (100vw - 390px) / 570, 183px);
  right: 0;
  width: 50%;
  aspect-ratio: 532/360;
  background: transparent url(https://mirai-beauty.jp/system_panel/uploads/images/20250206095012283960.png) center/100% auto no-repeat;
}
.page-menu .section-white::after {
  content: "";
  display: block;
  width: 50%;
  aspect-ratio: 532/360;
  margin-left: auto;
  background: transparent url(https://mirai-beauty.jp/system_panel/uploads/images/20250205144845318271.png) center/100% auto no-repeat;
}
.page-menu h2 {
  margin-bottom: clamp(24px, 24px + 22 * (100vw - 390px) / 570, 46px);
  width: -moz-fit-content;
  width: fit-content;
  padding-right: 1.313em;
  padding-left: 1.281em;
  padding-bottom: 13px;
  background: transparent url(https://mirai-beauty.jp/system_panel/uploads/images/20250206110659747893.svg) left bottom/100% auto no-repeat;
  color: #4c180b;
}
.page-menu .section-face h2 {
  padding-right: 0.938em;
  padding-left: 0.938em;
  background-image: url(https://mirai-beauty.jp/system_panel/uploads/images/20250206111621485846.svg);
}
.page-menu .section-white h2 {
  padding-right: 1.031em;
  padding-left: 1.031em;
  background-image: url(https://mirai-beauty.jp/system_panel/uploads/images/20250206111626815244.svg);
}
.page-menu .section-other h2 {
  padding-right: 1.094em;
  padding-left: 1.094em;
  background-image: url(https://mirai-beauty.jp/system_panel/uploads/images/20250206111631245882.svg);
}
.page-menu h3 {
  display: grid;
  place-content: center;
  width: 7.389em;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #f8e7e2;
  font-size: clamp(0.875rem, 0.704rem + 0.7vw, 1.125rem);
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-align: center;
}
.page-menu p {
  font-size: clamp(0.875rem, 0.704rem + 0.7vw, 1.125rem);
}
.page-menu .container {
  max-width: 1000px;
}
.page-menu .menu-wrap {
  display: grid;
  gap: 55px;
  margin-right: auto;
  margin-left: auto;
}
.page-menu .section-hair .menu-wrap {
  max-width: 612px;
}
.page-menu .section-face .menu-wrap {
  max-width: 932px;
}
.page-menu .section-white .menu-wrap {
  max-width: 508px;
}
.page-menu .section-other .menu-wrap {
  max-width: 654px;
}
.page-menu .menu-wrap > .container {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 min(50px, 8.17%);
  padding-right: 0;
  padding-left: 0;
}
.page-menu .section-white .menu-wrap > .container {
  gap: 0;
}
.page-menu .menu-wrap + p {
  margin-top: clamp(40px, 40px + 20 * (100vw - 390px) / 570, 60px);
}
.page-menu .menu-container {
  grid-column: 2/3;
}
.page-menu .menu-container .row {
  justify-content: space-between;
  padding-top: 1px;
  padding-bottom: 4px;
  border-bottom: 1px solid #ddd;
}
.page-menu .menu-container p:nth-of-type(1) {
  color: #4c180b;
}
.page-menu .menu-container p:nth-of-type(2) {
  flex: 1 0 auto;
  text-align: right;
}
.page-menu .section-hair .menu-container {
  max-width: 294px;
}
.page-menu .section-white .menu-container {
  max-width: 423px;
}
.page-menu .section-other .menu-container {
  max-width: 470px;
}
.page-menu div[class*=section] > p {
  text-align: center;
}
.page-menu .section-hair > p + p {
  margin-top: calc(1lh - 0.722em);
}
.page-menu .section-hair > p em {
  display: inline-block;
  padding: 0.667em 1em 0.778em;
  border-radius: 10px;
  background-color: #f8e1da;
  font-style: normal;
}
.page-menu .section-hair {
  padding-top: 29px;
}
.page-menu .section-face {
  padding-top: clamp(80px, 80px + 50 * (100vw - 390px) / 570, 130px);
}
.page-menu .section-white {
  padding-top: clamp(80px, 80px + 53 * (100vw - 390px) / 570, 133px);
}

.page-recommend {
  padding-bottom: clamp(80px, 80px + 107 * (100vw - 390px) / 570, 187px);
}
.page-recommend .section-menu {
  padding-top: 23px;
}
.page-recommend .section-menu h2 {
  display: flex;
  align-items: flex-end;
  gap: 0.938em;
  margin-bottom: clamp(40px, 40px + 26 * (100vw - 390px) / 570, 66px);
  color: #4c180b;
  font-weight: 500;
  line-height: 1.43;
}
.page-recommend .section-menu h2::before {
  color: #af9189;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2rem, 0.806rem + 4.9vw, 3.75rem);
  font-optical-sizing: auto;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.06em;
}

.page-recommend {
  counter-reset: index;
}

.recommend-section h2::before {
  counter-increment: index;
  content: counter(index, decimal-leading-zero);
}

.page-recommend .section-01 h2::before {
  content: "01";
}
.page-recommend .section-02 h2::before {
  content: "02";
}
.page-recommend .section-03 h2::before {
  content: "03";
}
.page-recommend .section-04 h2::before {
  content: "04";
}
.page-recommend .section-menu p + p {
  margin-top: 1lh;
}
.page-recommend .link-button {
  margin-top: 29px;
}
.page-recommend .section-menu .row {
  gap: 40px;
  align-items: flex-start;
  justify-content: space-between;
}
.page-recommend .section-menu .img {
  width: 50%;
  max-width: 359px;
}
.page-recommend .section-01 .link-button {
  padding-right: 10px;
  text-align: right;
}
.page-recommend .section-02,
.page-recommend .recommend-section-even {
  padding-top: clamp(60px, 60px + 65 * (100vw - 390px) / 570, 125px);
  background: transparent url(https://mirai-beauty.jp/system_panel/uploads/images/20250206144207824294.png) left bottom no-repeat;
  background-size: 70% auto;
}
.page-recommend .section-02 .inner,
.page-recommend .recommend-section-even .inner{
  max-width: 1330px;
}
.page-recommend .section-02 .row,
.page-recommend .recommend-section-even .row {
  flex-direction: row-reverse;
  padding-right: 0 !important;
}
.page-recommend .section-02 .text,
.page-recommend .recommend-section-even .text {
  flex: 1 1 auto;
  max-width: 800px;
}
.page-recommend .section-03 {
  background: transparent url(https://mirai-beauty.jp/system_panel/uploads/images/20250205144845318271.png) right bottom no-repeat;
  background-size: 70% auto;
}
.page-recommend .section-03 .inner {
  padding-top: clamp(60px, 60px + 104 * (100vw - 390px) / 570, 164px);
}
.page-recommend .section-03 .link-button {
  margin-top: 40px;
}
.page-recommend .section-item {
  display: grid;
  gap: 60px;
  max-width: 1140px;
  padding-top: clamp(100px, 100px + 147 * (100vw - 390px) / 570, 247px);
}
.page-recommend .section-item h2 {
  text-align: center;
}
.page-recommend .section-item .row {
  gap: 20px 8.11%;
}
.page-recommend .section-item .row:nth-of-type(even) {
  flex-direction: row-reverse;
}
.page-recommend .section-item .text {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: clamp(20px, 20px + 20 * (100vw - 390px) / 570, 40px) 20px;
  align-items: start;
}
.page-recommend .section-item .text p:nth-of-type(3) {
  grid-column: span 2;
}

.page-care {
  padding-bottom: clamp(80px, 80px + 156 * (100vw - 390px) / 570, 236px);
  text-align: center;
}
.page-care .section-lead {
  padding-top: clamp(24px, 24px + 31 * (100vw - 390px) / 570, 55px);
  padding-bottom: clamp(80px, 80px + 67 * (100vw - 390px) / 570, 147px);
  background: transparent url(https://mirai-beauty.jp/system_panel/uploads/images/20250206144207824294.png) left bottom no-repeat;
  background-size: 36.94vw auto;
}
.page-care .section-lead h2 {
  margin-bottom: clamp(40px, 40px + 40 * (100vw - 390px) / 570, 80px);
}
.page-care .section-lead p + p {
  margin-top: 1lh;
}
.page-care .section-example {
  padding-top: clamp(48px, 48px + 59 * (100vw - 390px) / 570, 107px);
}
.page-care .section-example .row {
  justify-content: space-between;
  flex-wrap: nowrap;
  max-width: 764px;
  margin-right: auto;
  margin-left: auto;
}
.page-care .section-example .row + .row {
  margin-top: clamp(24px, 24px + 23 * (100vw - 390px) / 570, 47px);
}
.page-care .section-example .row:nth-of-type(2) {
  margin-top: 25px;
}
.page-care .section-example p {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.25rem, 0.811rem + 1.8vw, 1.875rem);
  font-optical-sizing: auto;
  font-weight: 300;
  line-height: 1.23;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.page-care .section-example :where(p, img) {
  flex: 0 0 43.06%;
  width: 43.06%;
  height: auto;
}

.page-makeover {
  padding-bottom: clamp(80px, 80px + 160 * (100vw - 390px) / 570, 240px);
  background-image: linear-gradient(180deg, #FDFAF1 54.79%, #FFFFFF 64.07%);
  text-align: center;
}
.page-makeover .section-lead {
  padding-top: clamp(40px, 40px + 80 * (100vw - 390px) / 570, 120px);
  padding-bottom: clamp(100px, 100px + 100 * (100vw - 390px) / 570, 200px);
  background: transparent url(https://mirai-beauty.jp/system_panel/uploads/images/20250206144207824294.png) left bottom no-repeat;
  background-size: 36.94vw auto;
}
.page-makeover h2 {
  margin-bottom: clamp(40px, 40px + 20 * (100vw - 390px) / 570, 60px);
  font-size: clamp(1.125rem, 0.516rem + 2.5vw, 2rem);
}
.page-makeover .section-lead h2 {
  margin-right: -15px;
  margin-left: -15px;
  color: #4c180b;
}
.page-makeover .section-lead p + p {
  margin-top: 1lh;
}
.page-makeover .section-lead .container {
  max-width: 814px;
}
.page-makeover .section-example > p {
  max-width: 620px;
  margin-right: auto;
  margin-left: auto;
}
.page-makeover .section-example p + .row {
  margin-top: clamp(60px, 60px + 20 * (100vw - 390px) / 570, 80px);
}
.page-makeover .section-example .row {
  justify-content: space-between;
  flex-wrap: nowrap;
  max-width: 1010px;
  margin-right: auto;
  margin-left: auto;
}
.page-makeover .section-example .row + .row {
  margin-top: clamp(60px, 60px + 53 * (100vw - 390px) / 570, 113px);
}
.page-makeover .section-example .row:nth-of-type(2) {
  margin-top: 15px;
}
.page-makeover .section-example .row > p {
  flex: 0 0 40.69%;
  width: 40.69%;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.125rem, 0.613rem + 2.1vw, 1.875rem);
  font-optical-sizing: auto;
  font-weight: 300;
  line-height: 1.23;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.page-makeover .section-example .col {
  flex: 0 0 40.69%;
  width: 40.69%;
  padding-right: 0;
  padding-left: 0;
}
.page-makeover .section-example .col p {
  margin-top: 1.111em;
}
.page-makeover .section-example img {
  width: 100%;
  height: auto;
}

.page-access {
  padding-bottom: clamp(100px, 100px + 174 * (100vw - 390px) / 570, 274px);
  background-image: linear-gradient(180deg, #FDFAF1 35.81%, #FFFFFF 41.99%);
}
.page-access h2 {
  text-align: center;
}
.page-access .section-info {
  padding-top: 39px;
  padding-bottom: clamp(100px, 100px + 99 * (100vw - 390px) / 570, 199px);
  background: transparent url(https://mirai-beauty.jp/system_panel/uploads/images/20250206144207824294.png) left bottom no-repeat;
  background-size: 36.94vw auto;
}
.page-access .section-info h2 {
  margin-bottom: 48px;
}
.page-access .section-info .container {
  max-width: 700px;
}
.page-access .section-info .row {
  flex-wrap: nowrap;
  justify-content: flex-start;
  max-width: calc(597px + 0.125em);
  margin-left: auto;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ddd;
}
.page-access .section-info h3 {
  flex: 0 0 9.167em;
  font-size: clamp(1rem, 0.903rem + 0.4vw, 1.125rem);
  line-height: 1.8;
  letter-spacing: 0.06em;
}
.page-access .section-access {
  text-align: center;
}
.page-access .section-access h2 {
  margin-bottom: clamp(40px, 40px + 23 * (100vw - 390px) / 570, 63px);
}
.page-access .section-access h3 {
  margin-bottom: 20px;
  color: #4c180b;
  font-size: clamp(1.125rem, 0.954rem + 0.7vw, 1.375rem);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.06em;
}
.page-access .section-access p + h3 {
  margin-top: clamp(40px, 40px + 28 * (100vw - 390px) / 570, 68px);
}
.page-access .section-access .area-wrap {
  max-width: 968px;
  margin: clamp(60px, 60px + 20 * (100vw - 390px) / 570, 80px) auto clamp(80px, 80px + 80 * (100vw - 390px) / 570, 160px);
}
.page-access .section-access p + .row {
  margin-top: clamp(40px, 40px + 28 * (100vw - 390px) / 570, 68px);
}
.page-access .section-access .area-wrap .row {
  align-items: flex-start;
  gap: 7.02%;
  text-align: left;
}
.page-access .section-access .area-wrap .row + .row {
  margin-top: 40px;
}
.page-access .section-access .area-wrap .montserrat-light {
  color: #af9189;
  font-size: clamp(40px, 40px + 20 * (100vw - 390px) / 570, 60px);
  line-height: 1.2;
  letter-spacing: 0.06em;
}
.page-access .section-access .gmap {
  margin-top: 34px;
}
.page-access .section-map {
  margin-top: clamp(80px, 80px + 80 * (100vw - 390px) / 570, 160px);
}

.page-flow {
  padding-bottom: clamp(100px, 100px + 170 * (100vw - 390px) / 570, 270px);
  background: linear-gradient(180deg, #FDFAF1 34.79%, #FFFFFF 40.69%);
}
.page-flow .section-reserve {
  padding-top: clamp(24px, 24px + 31 * (100vw - 390px) / 570, 55px);
  text-align: center;
}
.page-flow .section-reserve h2 + p {
  margin-top: 52px;
  margin-bottom: 57px;
  font-size: clamp(1.125rem, 0.954rem + 0.7vw, 1.375rem);
}
.page-flow .section-reserve .howto {
  max-width: 979px;
  margin-right: auto;
  margin-left: auto;
  padding: 23px 15px clamp(40px, 40px + 33 * (100vw - 390px) / 570, 73px);
  border-radius: 20px;
  background-color: #f8e7e2;
}
.page-flow .section-reserve .howto h3 {
  margin-bottom: 40px;
  font-size: clamp(1.25rem, 0.982rem + 1.1vw, 1.625rem);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.06em;
}
.page-flow .section-reserve .howto .lead-text {
  margin-bottom: 10px;
}
.page-flow .section-reserve em {
  color: #4c180b;
  font-size: clamp(1.25rem, 1.153rem + 0.4vw, 1.375rem);
  font-weight: 500;
  font-style: normal;
}
.page-flow .section-reserve .row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px 20px;
  justify-items: start;
  align-items: end;
  max-width: 785px;
  margin-top: clamp(40px, 40px + 27 * (100vw - 390px) / 570, 67px);
  margin-right: auto;
  margin-left: auto;
  text-align: left;
}
.page-flow .section-reserve .row + .row {
  margin-top: 40px;
}
.page-flow .section-reserve .montserrat-light {
  color: #af9189;
  font-size: clamp(2rem, 0.806rem + 4.9vw, 3.75rem);
  font-optical-sizing: auto;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.06em;
}
.page-flow .section-reserve .row p:nth-of-type(3) {
  grid-column: span 2;
  padding-left: 13px;
}
.page-flow .section-flow {
  max-width: 1330px;
  padding-top: clamp(80px, 80px + 87 * (100vw - 390px) / 570, 167px);
  padding-bottom: clamp(60px, 60px + 71 * (100vw - 390px) / 570, 131px);
}
.page-flow .section-flow h2 {
  margin-bottom: clamp(40px, 40px + 53 * (100vw - 390px) / 570, 93px);
  text-align: center;
}
.page-flow .section-flow em {
  color: #4c180b;
  font-weight: 500;
  font-style: normal;
}
.page-flow .section-flow .row {
  position: relative;
  gap: 4.44%;
  font-size: clamp(1.25rem, 1.079rem + 0.7vw, 1.5rem);
}
.page-flow .section-flow .row + .row {
  margin-top: clamp(40px, 40px + 40 * (100vw - 390px) / 570, 80px);
}
.page-flow .section-flow .row::before {
  content: "";
  position: absolute;
  left: 0.583em;
  top: 0.5em;
  width: 1px;
  height: calc(100% + clamp(40px, 40px + 40 * (100vw - 390px) / 570, 80px));
  background-color: #e8b3a4;
}
.page-flow .section-flow .row:last-of-type::before {
  content: none;
}
.page-flow .section-flow .row p:first-of-type {
  display: flex;
  align-items: flex-start;
  gap: 1.042em;
  width: 13.958em;
  font-size: 1em;
}
.page-flow .section-flow .row p:first-of-type::before {
  content: "";
  width: 1.167em;
  aspect-ratio: 1;
  margin-top: 0.333em;
  border-radius: 50%;
  background-color: #ebb8aa;
}
.page-flow .section-flow .row p:last-of-type {
  padding-left: 3.313rem;
  font-size: clamp(1rem, 0.903rem + 0.4vw, 1.125rem);
}
.page-flow .section-proposal {
  padding-top: clamp(40px, 40px + 49 * (100vw - 390px) / 570, 89px);
  background: transparent url(https://mirai-beauty.jp/system_panel/uploads/images/20250205144845318271.png) right top 40px no-repeat;
  background-size: 30% auto;
}
.page-flow .section-proposal h2 {
  margin-bottom: clamp(60px, 60px + 53 * (100vw - 390px) / 570, 113px);
  text-align: center;
}
.page-flow .section-proposal .proposal-container {
  position: relative;
  max-width: 1440px;
  margin-right: auto;
  margin-left: auto;
}
.page-flow .proposal-container .container {
  max-width: 1198px;
}
.page-flow .section-proposal .row {
  align-items: flex-start;
  gap: 10px 1.5em;
  margin-bottom: 20px;
  font-size: clamp(1.125rem, 0.954rem + 0.7vw, 1.375rem);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.06em;
}
.page-flow .section-proposal .row :where(h3, p) {
  font: inherit;
}
.page-flow .section-proposal .proposal-wrap {
  max-width: 905px;
  margin-top: 40px;
  padding: 24px 34px;
  padding-bottom: 24px;
  border-radius: 10px;
  background-color: #f8e7e2;
}
.page-flow .proposal-wrap .row {
  gap: clamp(40px, 40px + 22 * (100vw - 390px) / 570, 62px);
  color: #4c180b;
}
.page-flow .section-proposal .img {
  display: block;
  margin-top: 40px;
  margin-right: 15px;
  margin-left: 15px;
}
.page-flow .proposal-container:nth-of-type(odd) .img {
  text-align: right;
}
.page-flow .proposal-container:nth-of-type(2) {
  margin-top: clamp(80px, 80px + 56 * (100vw - 390px) / 570, 136px);
}
.page-flow .proposal-container:nth-of-type(3) {
  z-index: 1;
  margin-top: clamp(80px, 80px + 41 * (100vw - 390px) / 570, 121px);
}
.page-flow .proposal-container:nth-of-type(4) {
  margin-top: -38px;
  padding-top: clamp(120px, 120px + 146 * (100vw - 390px) / 570, 266px);
  background: transparent url(https://mirai-beauty.jp/system_panel/uploads/images/20250206144207824294.png) left top no-repeat;
  background-size: 36.94vw auto;
}
.page-flow .proposal-container:nth-of-type(even) .proposal-wrap {
  max-width: 852px;
}

.page-news {
  position: relative;
  background-image: linear-gradient(180deg, #FDFAF1 66.25%, #FFFFFF 77.49%);
}
.page-news .news-archive-wrap {
  padding-top: 30px;
  padding-bottom: clamp(100px, 100px + 175 * (100vw - 390px) / 570, 275px);
}
.page-news .category-wrap {
  gap: clamp(20px, 20px + 15 * (100vw - 390px) / 570, 35px);
  align-items: flex-start;
  max-width: 867px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 42px;
}
.page-news .category-wrap h2 {
  font-size: clamp(1rem, 0.903rem + 0.4vw, 1.125rem);
  line-height: 1.8;
  letter-spacing: 0.06em;
}
.page-news .category-wrap .col {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px clamp(20px, 20px + 15 * (100vw - 390px) / 570, 35px);
  padding-right: 0;
  padding-left: 0;
}
.page-news .category-wrap p {
  flex: 0 0 9.429em;
  line-height: 1;
  font-size: clamp(0.75rem, 0.653rem + 0.4vw, 0.875rem);
  letter-spacing: 0.04em;
  text-align: center;
}
.page-news .category-wrap :where(.current, a) {
  padding: 6px;
  border: 1px solid #9f665d;
  border-radius: 100em;
}
.page-news .category-wrap .current {
  background-color: #9f665d;
  color: #fff;
}
.page-news .category-wrap a {
  width: 100%;
  color: #9f665d;
}

.news-detail {
  padding-bottom: clamp(120px, 120px + 166 * (100vw - 390px) / 570, 286px);
  background: linear-gradient(180deg, #FDFAF1 70.92%, #FFFFFF 82.87%);
}
.news-detail .webgene-blog {
  max-width: 902px;
}
.news-detail .webgene-item {
  padding-top: clamp(24px, 24px + 26 * (100vw - 390px) / 570, 50px);
}
.news-detail .news-date {
  color: #777;
  font-size: clamp(1rem, 0.903rem + 0.4vw, 1.125rem);
  line-height: 1.8;
  letter-spacing: 0.06em;
}
.news-detail .row {
  flex-direction: row-reverse;
  justify-content: center;
  gap: 40px 5.1%;
  padding-top: 44px;
}
.news-detail .content {
  flex: 1 1 auto;
  font-size: clamp(1rem, 0.903rem + 0.4vw, 1.125rem);
  line-height: 1.8;
  letter-spacing: 0.06em;
}
.news-detail .link-button {
  margin-top: clamp(40px, 40px + 41 * (100vw - 390px) / 570, 81px);
  text-align: right;
}

.page-news::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: clamp(18px, 70px + -52 * (100vw - 390px) / 250, 70px);
  right: 0;
  width: 40%;
  aspect-ratio: 532/360;
  background: transparent url(https://mirai-beauty.jp/system_panel/uploads/images/20250205144845318271.png) right bottom/100% auto no-repeat;
}

.news-detail::before {
  top: 71px;
}

@media (min-width: 640px){
  .webgene-item {
    flex-wrap: nowrap;
    align-items: center;
  }
  .webgene-blog .news-title {
    flex: initial;
  }
  .header-inner {
    padding-left: 1.67%;
  }
  .navbar {
    width: auto;
  }
  .top-about {
    padding-bottom: 186px;
    background-size: min(100%, 711px) auto, min(150%, 1440px) auto;
    background-position: center top -130px, center bottom;
  }
  .top-menu .img {
    content: "";
    position: absolute;
    top: 50px;
    right: 0;
    width: 50%;
  }
  .top-menu-inner {
    padding-top: 20.83%;
  }
  .page-about .section-lead {
    padding-top: clamp(48px, 48px + 49 * (100vw - 640px) / 320, 97px);
  }
  .page-about .section-lead::before,
  .page-about .section-lead::after {
    position: absolute;
    z-index: 0;
    width: 36.94vw;
  }
  .page-about .section-lead::before {
    top: 0;
    left: 0;
  }
  .page-about .section-lead::after {
    right: 0;
    bottom: 0;
  }
  .page-about .features-wrap {
    flex-direction: row;
    align-items: flex-start;
    gap: 3.82%;
  }
  .page-about .features-wrap .img {
    flex: 0 0 29.65%;
  }
  .page-menu .bg-gradient::before {
    width: 36.94vw;
  }
  .page-recommend .section-item .row {
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  .page-recommend .section-item .img {
    flex: 0 0 min(37.03vw, 411px);
  }
  .page-recommend .section-item .text {
    padding-top: clamp(24px, 24px + 42 * (100vw - 960px) / 64, 66px);
  }
  .page-access .section-access .area-wrap .row {
    flex-wrap: nowrap;
  }
  .page-access .section-access .area-wrap .img {
    flex: 0 0 27.53%;
  }
  .page-flow .section-proposal {
    background-size: 36.94vw auto;
    background-position: right top;
  }
  .page-flow .proposal-container .heading,
  .page-flow .proposal-container .heading + p {
    padding-right: 34px;
    padding-left: 34px;
  }
  .page-news .category-wrap {
    padding-left: 24px;
  }
  .news-detail .row {
    flex-wrap: nowrap;
    padding-left: 24px;
  }
  .news-detail .img {
    flex: 0 0 32.86%;
  }
  .page-news::before {
    width: 36.94vw;
  }
}

@media (min-width: 960px){
  .footer-inner {
    padding-left: 25px;
  }
  .footer-row {
    flex-wrap: nowrap;
  }
  .top-about {
    background-position: center top -64px, center bottom;
  }
  .top-service-inner {
    grid-template-columns: 1fr 1fr;
  }
  .top-service .col {
    grid-template-rows: subgrid;
    grid-row: span 3;
  }
  .page-about .section-concept .row {
    flex-wrap: nowrap;
  }
  .page-about .section-concept .img {
    flex: 0 0 37.36%;
  }
  .page-menu .section-white::after {
    position: absolute;
    z-index: 0;
    width: 36.94vw;
    right: 0;
    top: 210px;
  }
  .page-menu .section-face .menu-wrap {
    padding-left: 6.01%;
  }
  .page-recommend .bg-gradient {
    padding-bottom: 312px;
  }
  .page-recommend .section-menu .row {
    flex-wrap: nowrap;
    gap: 20px;
    padding-right: 20px;
  }
  .page-recommend .section-menu .img {
    flex: 0 0 33.24%;
  }
  .page-recommend .section-01 .img {
    padding-top: 60px;
  }
  .page-recommend .section-02,
  .page-recommend .recommend-section-even {
    background-position: left top 22px;
    background-size: 36.94vw auto;
  }
  .page-recommend .section-02 .link-button,
  .page-recommend .recommend-section-even .link-button {
    margin-top: 0;
    padding-right: 158px;
    text-align: right;
  }
  .page-recommend .section-02 .img,
  .page-recommend .recommend-section-even .img {
    padding-top: 134px;
  }
  .page-recommend .section-03 {
    margin-top: -346px;
    background-position: right top;
    background-size: 36.94vw auto;
  }
  .page-recommend .section-03 .img {
    padding-top: 79px;
  }
  .page-recommend .section-03 .link-button {
    padding-right: 19px;
    text-align: right;
  }
  .page-access .section-access {
    margin-top: -15px;
  }
  .page-flow .section-flow .row {
    flex-wrap: nowrap;
    padding-left: 7.52%;
  }
  .page-flow .section-flow .row::before {
    left: calc(7.52% + 0.583em);
  }
  .page-flow .section-flow .row p:last-of-type {
    padding-left: 0;
  }
  .page-flow .section-proposal .img {
    position: absolute;
    bottom: 30px;
    margin: 0;
  }
  .page-flow .proposal-container:nth-of-type(odd) .container > * {
    width: 77.48%;
  }
  .page-flow .proposal-container:nth-of-type(odd) .heading,
  .page-flow .proposal-container:nth-of-type(odd) .heading + p {
    max-width: 724px;
    padding-right: 0;
  }
  .page-flow .proposal-container:nth-of-type(odd) .proposal-wrap {
    padding-right: 15.58%;
  }
  .page-flow .proposal-container:nth-of-type(odd) .img {
    right: 0;
    width: 30.9vw;
  }
  .page-flow .proposal-container:nth-of-type(even) .container {
    max-width: 1222px;
  }
  .page-flow .proposal-container:nth-of-type(even) .heading,
  .page-flow .proposal-container:nth-of-type(even) .heading + p {
    width: 80%;
    max-width: 706px;
    margin-left: auto;
    padding-right: 46px;
  }
  .page-flow .proposal-container:nth-of-type(even) .proposal-wrap {
    width: 80%;
    margin-left: auto;
    padding-right: 46px;
    padding-left: 12.33%;
  }
  .page-flow .proposal-container:nth-of-type(even) .img {
    left: 0;
    width: 30.9vw;
  }
  .news-detail .webgene-blog {
    padding-right: 35px;
  }
}

@media (min-width: 980px){
  .page-menu .section-other {
    padding-top: clamp(60px, 60px + 75 * (100vw - 390px) / 570, 135px);
  }
}

@media (min-width: 1024px){
  .top-menu {
    margin-top: -23px;
  }
  .top-menu .img {
    top: 0;
    width: calc(50% - 228px);
  }
  .top-menu-inner {
    padding-top: 38px;
  }
  .top-makeover .img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: calc(50% - 228px);
  }
  .top-makeover-inner {
    padding-top: 16px;
  }
  .page-access .section-access .area-wrap .row {
    padding-left: 6.2%;
  }
}

@media (min-width: 1280px){
  .header-logo {
    width: min(272px, 18.89vw);
  }
  .header-nav {
    display: flex;
    align-items: center;
    gap: min(40px, 2.78vw);
    line-height: 1.44;
  }
  .navbar {
    display: none;
  }
  .page-flow .proposal-container:nth-of-type(even) .heading,
  .page-flow .proposal-container:nth-of-type(even) .heading + p {
    width: 100%;
    padding-left: 0;
  }
  .page-flow .proposal-container:nth-of-type(even) .proposal-wrap {
    width: 100%;
  }
  .page-flow .proposal-container:nth-of-type(even) .img {
    left: 7.08vw;
  }
  .page-flow .proposal-container:nth-of-type(3) .img {
    right: 4.86vw;
  }
}

@media (min-width: 1360px){
  .header-inner {
    padding-right: 6.39%;
  }
}

@media (any-hover: hover){
  a:hover {
    color: inherit;
  }
  .link-button a:hover {
    text-decoration: none;
  }
  .reserve-button a:hover {
    text-decoration: none;
  }
}