@charset "UTF-8";

/* ------------------------------
* A Modern CSS Reset
------------------------------ */
*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

blockquote,
body,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
p {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

ol,
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

a {
  text-decoration: none;
  color: inherit;
}
a:visited {
  color: inherit;
}
a:active {
  color: inherit;
}

button,
input,
select,
textarea {
  vertical-align: middle;
  -webkit-appearance: none;
  border-radius: 0;
  border: none;
  outline: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font: inherit;
}

table {
  border-spacing: 0;
}

img,
picture {
  max-width: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  font-family: "object-fit: cover;";
}

iframe {
  max-width: 100%;
}

/* ------------------------------
* html
------------------------------ */
html {
  font-size: 62.5%;
}
html.wf-active {
  visibility: visible;
}

/* ------------------------------
* body
------------------------------ */
.body {
  position: relative;
  overflow-x: hidden;
  color: #2b2b2b;
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Sans W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.1em;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
}
.body.is-open {
  overflow: hidden;
}
.body__wrapper {
  overflow: hidden;
}

/* ------------------------------
* l-bg
------------------------------ */
.l-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.l-bg img {
	width: 100%;
}

/* ------------------------------
* l-side
------------------------------ */
.l-side {
  position: fixed;
}

.l-side__left {
  display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: calc((100% - 430px) / 2);
	height: 100%;
}

.l-side__left--01 img {
	max-height: 320px;
	height: 35vh;
}
.l-side__left--02 img {
	max-height: 470px;
	height: 51.4vh;
}
.l-side__left img {
	/* height: 100%; */
  width: 100%;
	margin-inline: auto;
	object-fit: contain;
}

.l-side__right {
  display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1;
	width: calc((100% - 430px) / 2);
	height: 100%;
}

.l-side__block {
  position: relative;
  max-width: 385px;
  width: 90%;
}
.l-side__block + .l-side__block {
	margin-top: min(50px, 11%);
}

.l-side__btn {
	position: absolute;
}
.l-side__btn--01 {
	left: 0;
	bottom: 0;
	width: 100%;
	height: min(25px, 8%);
}
.l-side__btn--02 {
	top: min(160px, 34.4%);
	left: 0;
	width: 100%;
	height: min(65px, 14%);
}

.l-side__box + .l-side__box {
  display: block;
  margin-top: min(18px, 5%);
}

/* ------------------------------
* l-main
------------------------------ */
.l-main {
	position: relative;
	max-width: 430px;
	margin-inline: auto;
}

/* ------------------------------
* c-block
------------------------------ */
.c-block {
  position: relative;
}
.c-block__btn {
  position: absolute;
}

.c-block__btn--01 {
	top: min(73px, 40%);
	left: 0;
	width: 100%;
	height: min(60px, 33%);
}

.c-block__btn--02 {
	top: min(100px, 69%);
	left: 0;
	width: min(240px, 56%);
	height: min(30px, 21%);
}

.c-block__btn--03 {
	top: min(100px, 58.5%);
	left: 45%;
	width: min(135px, 31.5%);
	height: min(30px, 16%);
}

.c-block__btn--04 {
	left: 0;
	bottom: min(27px, 8.2%);
	width: 100%;
	height: min(30px, 9.3%);
}

.c-block__btn--05 {
	top: min(170px, 16.6%);
	left: 0;
	width: 100%;
	height: min(65px, 6.4%);
}


/* ------------------------------
* c-hamburger
------------------------------ */
.c-hamburger {
  display: none;
  position: fixed;
  top: 15px;
  right: 15px;
  width: 45px;
  height: 45px;
  background: #00bfac;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  z-index: 999;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.c-hamburger span {
  width: 25px;
  height: 2px;
  background: #fff;
  margin: 3px 0;
  transition: 0.3s;
}

.c-hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5.5px, 5.5px);
}
.c-hamburger.active span:nth-child(2) {
  opacity: 0;
}
.c-hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5.5px, -5.5px);
}

/* ------------------------------
* c-drawer
------------------------------ */
.c-drawer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffffe6;
  backdrop-filter: blur(5px);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.c-drawer.active {
  opacity: 1;
  visibility: visible;
}

.c-drawer__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 350px;
  width: 85%;
  margin: auto;
  padding: 100px 0 50px;
  gap: min(20px, 4.8vw);
}
.c-drawer__btn {
	margin: min(30px, 7vw) 0;
}
.c-drawer__item:first-child {
	margin-top: 0;
}

/* ------------------------------
* lg-block
------------------------------ */
.lg-block {
  display: none;
}


@media screen and (max-width: 1024px) {
  .l-side {
    display: none;
  }

  .c-hamburger {
    display: flex;
  }
  .c-drawer {
    display: block;
  }

  .lg-block {
    display: block;
  }
}

@media screen and (max-width: 430px) {
  .l-bg {
    display: none;
  }
}