body {
	width: 375px;
	height: 100%;
	margin: auto;
	background-color: #bdbdbd;
}

.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #333;
  transition: 0.5s;
  position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  bottom: 100%;
  left: 0%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: rgb(110, 110, 110);
  transition: .5s;
  text-align: center;
  padding-top: 20px;
}

/* メニュー黒ポチを消す */
.nav_list {
  list-style: none;
  margin: 100px
}


.nav_item{
  margin-bottom: 20px;
}

.nav_item a {
  color: #fff;
  text-decoration: none;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  bottom: 0;/* メニューを画面に入れる */
  
}

.frame {
  overflow-x: hidden;
  width: 100%;
  min-width: 375.0px;
  min-height: 1450pt;
  position: relative;
  background-color: #FFFFFF;
}

.frame .rectangle {
  position: absolute;
  top: 30px;
  left: 1px;
  width: 375px;
  height: 1620px;
}

.frame .adobestock {
  position: absolute;
  top: 376px;
  left: 1px;
  width: 375px;
  height: 687px;
  aspect-ratio: 0.55;
}

.frame .text-wrapper {
  top: 933px;
  left: 128px;
  font-size: 12px;
  line-height: 22px;
  position: absolute;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
}

.frame .plus-ai {
  top: 441px;
  left: 14px;
  position: absolute;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 25px;
  white-space: nowrap;
}

.frame .span {
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 25px;
}

.frame .text-wrapper-2 {
  font-size: 24px;
}

.frame .div {
  top: 728px;
  left: 128px;
  font-size: 12px;
  line-height: 22px;
  position: absolute;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
}

.frame .plus-beauty {
  top: 690px;
  left: 19px;
  position: absolute;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 25px;
  white-space: nowrap;
}

.frame .text-wrapper-3 {
  top: 479px;
  left: 128px;
  font-size: 12px;
  line-height: 22px;
  position: absolute;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
}

.frame .plus-trust {
  top: 895px;
  left: 19px;
  position: absolute;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 25px;
  white-space: nowrap;
}

.frame .text-wrapper-4 {
  position: absolute;
  top: 393px;
  left: 19px;
  font-family: "Crimson Text-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 32px;
  letter-spacing: 0;
  line-height: 25px;
  white-space: nowrap;
}

.frame .text-wrapper-5 {
  top: 310px;
  left: 124px;
  font-size: 15px;
  line-height: 25px;
  position: absolute;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
}

.frame .img {
  position: absolute;
  top: 17px;
  left: -506px;
  width: 375px;
  height: 36px;
}

.frame .text-wrapper-6 {
  position: absolute;
  top: 41px;
  left: 298px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 12px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .rectangle-2 {
  position: absolute;
  top: 43px;
  left: 335px;
  width: 30px;
  height: 3px;
}

.frame .rectangle-3 {
  position: absolute;
  top: 50px;
  left: 335px;
  width: 30px;
  height: 3px;
}

.frame .aiplus-rogo {
  position: absolute;
  top: 66px;
  left: 48px;
  width: 261px;
  height: 261px;
  aspect-ratio: 1;
  object-fit: cover;
}

.frame .line {
  top: 428px;
  left: 13px;
  width: 289px;
  height: 1px;
  position: absolute;
  object-fit: cover;
}

.frame .group {
  position: absolute;
  top: 1076px;
  left: 0;
  width: 387px;
  height: 517px;
}

.frame .text-footer-7 {
  position: absolute;
  top: 231px;
  left: 56px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 25px;
  white-space: nowrap;
}

.frame .text-footer-9 {
  top: 356px;
  left: 35px;
  font-size: 15px;
  line-height: 25px;
  white-space: nowrap;
  position: absolute;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
}

.frame .text-footer-10 {
  top: 407px;
  left: 35px;
  font-size: 15px;
  line-height: 25px;
  white-space: nowrap;
  position: absolute;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
}

.frame .text-footer-11 {
  top: 407px;
  left: 195px;
  font-size: 15px;
  line-height: 25px;
  white-space: nowrap;
  position: absolute;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
}

.frame .text-footer-12 {
  top: 356px;
  left: 195px;
  font-size: 15px;
  line-height: 25px;
  white-space: nowrap;
  position: absolute;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
}

.frame .aiplus-rogo-foot {
  position: absolute;
  top: 0;
  left: 70px;
  width: 231px;
  height: 231px;
  aspect-ratio: 1;
  object-fit: cover;
}

.frame .line-2 {
  top: 342px;
  left: 0;
  width: 375px;
  height: 1px;
  position: absolute;
  object-fit: cover;
}

.frame .line-3 {
  top: 392px;
  left: 0;
  width: 375px;
  height: 1px;
  position: absolute;
  object-fit: cover;
}

.frame .line-4 {
  top: 446px;
  left: 0;
  width: 375px;
  height: 1px;
  position: absolute;
  object-fit: cover;
}

.frame .line-5 {
  top: 343px;
  left: 186px;
  width: 1px;
  height: 104px;
  position: absolute;
  object-fit: cover;
}

.frame .ellipse-x {
  left: 42%;
  position: absolute;
  top: 473px;
  width: 44px;
  height: 44px;
  background-color: #dbdbdb;
  border-radius: 22px;
}

.frame .vector-x {
  position: absolute;
  width: 5.17%;
  height: 3.48%;
  top: 93.81%;
  left: 45%;
}

.line-reserve-btn {
  position: absolute;
  top: 540px;
  left: 27%;
  background-color: #dbdbdb;
  color: #000;
  font-family: "Inter-Regular", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 22px;
  text-decoration: none;
  white-space: nowrap;
  z-index: 101;
  display: inline-block;
  text-align: center;
}