:root {
  /* colors */
  --base-color:#3f3f3f;
  --bg-color:#eeeeee;
  --main-color:#B4CEE7;
  --link-color:#0013c0;
  --accent-blue: #006AA9;
  --blue2:#00597C;
  --blue3:#5B9FCF;
  --accent-green:#CDFF7D;
  --accent-yellow:#faff00;
  --border-color:#cccccc;
  --gray:#666666;
  /* catalog colors */
  --desk-1:#ea5550;
  --desk-2:#f2a090;
  --desk-3:#ee7b6d;
  --o-chair-1:#b963a4;
  --o-chair-2:#d3a4ca;
  --o-chair-3:#c584b7 ;
  --m-table-1:#9070af;
  --m-table-2:#bba8d0 ;
  --m-table-3:#a68bc0;
  --m-chair-1:#5976ba;
  --m-chair-2:#9faad6;
  --m-chair-3:#7c8fc7 ;
  --partition-1:#76b1e1;
  --partition-2:#b4d0ed;
  --partition-3:#96c1e7;
  --m-support-1:#409ad6;
  --m-support-2:#a4cfe3;
  --m-support-3:#73adde;
  --storage-1:#45bdcf;
  --storage-2:#a4d9e3;
  --storage-3:#7bcbd9;
}

:root {
  /* font-size */
  --base-text:16px;
  --h1-text:36px;
  --h2-text:28px;
  --h3-text:22px;
  --h4-text:18px;
  --btn-text:20px;
}

:root {
  /* Shadow */
  --shadow-shape: 6px 6px 3px 0px;
  --shadow-color: rgba(0, 0, 0, 0.1);
}

.wrapper {
  margin: 0 auto;
  position: relative;
  width: 1200px;
  color: var(--base-color);
  background-color: #ffffff;
  text-align: left;
  font-family: "Figtree", "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: var(--base-text);
  font-weight: 400;
  scroll-behavior: smooth;
  opacity: 1;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-height: 100vh;
  height: auto;
  overflow: hidden;
  -webkit-transition: background-color 0.5s, color 0.5s;
  transition: background-color 0.5s, color 0.5s;
  -webkit-text-size-adjust: 100%;
}
.wrapper *, .wrapper *::before, .wrapper *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.wrapper :where(h1, h2, h3, h4, h5, ul, li, a, p) {
  overflow-wrap: break-word;
  line-height: 1em;
  text-wrap: wrap;
  padding: 0;
  margin: 0;
}
.wrapper h1, .wrapper h2, .wrapper h3, .wrapper h4, .wrapper h5 {
  margin: 0 0 calc(0.25em + 1rem) 0;
  text-align: center;
}
.wrapper p, .wrapper li, .wrapper a {
  line-height: 1.6;
}
.wrapper ul li {
  list-style: none;
}
.wrapper a {
  text-decoration: none;
  display: block;
}
.wrapper a:hover {
  text-decoration: none;
}
.wrapper a:hover img {
  opacity: 1;
}
.wrapper img {
  max-width: 100%;
  vertical-align: bottom;
  max-inline-size: 100%;
  block-size: auto;
  line-height: 1px;
}
.wrapper section,
.wrapper div {
  margin: 0;
  padding: 0;
  display: block;
  position: relative;
}

.wrapper {
  margin: 0;
  background: var(--bg-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 98vh;
  width: 100%;
}
.wrapper .bookWrap {
  height: 98vh;
  aspect-ratio: 14/10;
  overflow: hidden;
}
.wrapper .bookWrap .book {
  position: relative;
  -webkit-perspective: 2000px;
          perspective: 2000px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.wrapper .page {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 50%;
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.8s;
  transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  transition: transform 0.8s, -webkit-transform 0.8s;
  will-change: transform;
}
.wrapper .page.flipped {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}
.wrapper .front,
.wrapper .back {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background: white;
  border: 1px solid #ddd;
  background-color: #ffffff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.wrapper .front img,
.wrapper .back img {
  max-width: 100%;
  vertical-align: bottom;
  max-inline-size: 100%;
  block-size: auto;
  line-height: 1px;
}
.wrapper .back {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.wrapper .pageContent {
  padding: 30px;
  font-family: sans-serif;
}