@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap);
@font-face {
  font-family: 'Arial';
  src: url(assets/5afb1f7c7464ace62524.ttf);
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DejaVuSans';
  src: url(assets/67ed0b9aeb82e75288aa.ttf);
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'GenEiAntiqueNv5M';
  src: url(assets/9ee7febc3d0c69019ef6.ttf);
  font-weight: normal;
  font-style: normal;
}

.div_page {
  position: absolute;
  top: 0;
  left: 0;
  height: 4093px;
  width: 2894px;
  background-color: #808080;
}

.div_tachiotoshi {
  position: absolute;
  top: 232px;
  left: 150px;
  height: 3629px;
  width: 2593px;
  background-color: #C0C0C0;
}

.div_genko {
  position: absolute;
  top: 42px;
  left: 42px;
  height: 3545px;
  width: 2509px;
  background-color: var(--page-background-color);
}

.div_safearea {
  position: absolute;
  top: 111px;
  left: 230px;
  height: 3323px;
  width: 2050px;
  background-color: var(--page-background-color);
  /* #00FF00; */
}

.card_container {
  --index: 0;
  /* default value */
}

.card {
  position: absolute;
  height: 710px;
  width: 42%;
  overflow: hidden;

  top: calc(var(--index) * 1.45 * 15.5% / 2 - 5%);

  box-sizing: border-box;
  border-radius: 50px;
  padding: 40px;
  /*border: hsla(220, 50%, 40%, 1.0) 4px solid;*/
  /* border: #000000 4px solid; */
  /* border: #000000 0px solid; */
  border: hsla(calc(30 * var(--index2) * 1.41), 50%, 50%, 1.0) 2px solid;

  /* box-shadow: #00000080 10px 10px 20px; */
  box-shadow:
    hsla(calc(30 * var(--index2) * 1.41), 100%, 50%, 1.0) 0px 0px 20px,
    #00000080 10px 10px 30px;

  font-family: 'Arial', 'Noto Sans JP';
  line-height: 115px;

  transform-origin: 50% 50%;
  --rotate-deg: 0deg;
}

.card.card_static {
  /* position: static; */
  left: 10px !important;
  transform: rotate(0) translateX(0) translateY(0) !important;
}

.card:nth-child(2n + 1) {
  left: calc(50% + 45px);
  transform: rotate(calc(1.0 * var(--rotate-deg))) translateX(calc((2 * var(--card-translate-x) - 1) * 20px)) translateY(calc(90px + 350px));
}

.card:nth-child(2n + 2) {
  right: calc(50% + 45px);
  transform: rotate(calc(1.0 * var(--rotate-deg))) translateX(calc((2 * var(--card-translate-x) - 1) * 20px)) translateY(calc(-70px - 170px + 350px));
}

.card:nth-child(12n + 1) {
  --index: 0;
  --index3: 1;
  --card-translate-x: 0;
}

.card:nth-child(12n + 2) {
  --index: 1;
  --index3: 1.6;
  --card-translate-x: 0;
}

.card:nth-child(12n + 3) {
  --index: 2;
  --index3: 2.1;
  --card-translate-x: 1;
}

.card:nth-child(12n + 4) {
  --index: 3;
  --index3: 3.5;
  --card-translate-x: 1;
}

.card:nth-child(12n + 5) {
  --index: 4;
  --index3: 5.4;
  --card-translate-x: 0;
}

.card:nth-child(12n + 6) {
  --index: 5;
  --index3: 6.2;
  --card-translate-x: 0;
}

.card:nth-child(12n + 7) {
  --index: 6;
  --index3: 7.2;
  --card-translate-x: 1;
}

.card:nth-child(12n + 8) {
  --index: 7;
  --index3: 0;
  --card-translate-x: 1;
}

.card:nth-child(12n + 9) {
  --index: 8;
  --card-translate-x: 0;
}

.card:nth-child(12n + 10) {
  --index: 9;
  --card-translate-x: 0;
}

.card:nth-child(12n + 11) {
  --index: 10;
  --card-translate-x: 1;
}

.card:nth-child(12n + 12) {
  --index: 11;
  --card-translate-x: 1;
}

.card {
  --index2: calc(1.0 * (var(--index3) - 1));
}

.card::before {
  content: "hello";
  position: absolute;

  top: 0px;
  left: 0px;
  height: 99999%;
  width: 99999%;
  border-radius: 34px;

  background-color: hsla(calc(30 * var(--index2) * 1.41), 80%, 90%, 1.0);
  background-image: url(assets/31ffad7f6c87de0109ba.png);

  transform-origin: 0% 0%;
  transform: scale(0.6) translateY(-400px);
}

.card_bottom::before {
  content: "";
  position: absolute;

  top: 0px;
  left: 0px;
  height: 500px;
  width: 660px;

  box-sizing: border-box;
  border-radius: 30px;
  background-color: #FFFFFF;
  box-shadow: #00000020 5px 5px 15px;
}

.textarea_name {
  position: absolute;
  top: 0px;
  left: 0px;
  font-size: 68px;
  height: 94px;

  box-sizing: border-box;
  padding: 0px 20px;
  border-radius: 30px;
}

.textarea_name_bg {
  position: absolute;
  top: 0px;
  left: 0px;
  font-size: 68px;
  height: 94px;

  background-color: #FFFFFF;
  box-shadow: #00000020 5px 5px 15px;
  box-sizing: border-box;
  padding: 0px 20px;
  border-radius: 30px;
}

.textarea_name div,
.textarea_name_bg div {
  transform: translateY(-6px);
}

.textarea_name_bg div {
  visibility: hidden;
}

.textarea_name div::after {
  content: "Aあ";
  visibility: hidden;
}

.profile_icon {
  position: absolute;
  top: 0px;
  left: 0px;
}

.profile_icon img {
  width: 280px;
  height: 280px;
  object-fit: cover;

  box-sizing: border-box;
  /* border: hsla(220, 50%, 40%, 1.0) 4px solid; */
  border: hsla(calc(30 * var(--index2) * 1.41), 50%, 50%, 1.0) 4px solid;
  border-radius: 99999px;

  box-shadow: #00000040 5px 5px 15px;
}

.page_thumbnail img {
  width: calc(300px * 0.77);
  height: calc(424px * 0.77);

  box-sizing: border-box;
  /* border: hsla(220, 50%, 40%, 1.0) 4px solid; */
  border: hsla(calc(30 * var(--index2) * 1.41), 50%, 50%, 1.0) 4px solid;
  border-radius: 0px;

  box-shadow: #00000040 5px 5px 15px;
}

.textarea_main {
  position: relative;
  top: 15px;
  left: 20px;
  width: 620px;
  font-size: 34px;
  /* text-align: justify; */
}

.textarea_links {
  font-family: 'DejaVuSans', 'GenEiAntiqueNv5M';
  line-height: 45px;
}

.textarea_message {
  font-family: 'GenEiAntiqueNv5M';
  line-height: 45px;
  transform: translateY(20px);
}

.card_part_name {
  position: absolute;
  top: 40px;
  left: 350px;
  white-space: nowrap;
}

.card_part_profile_icon {
  position: absolute;
  top: 30px;
  left: 30px;
}

.card_part_page_thumbnail {
  position: absolute;
  top: 340px;
  left: 50px;
  transform: rotate(10deg);
}

.card_part_pagenumber {
  position: absolute;
  top: 610px;
  right: 740px;
  white-space: nowrap;
}

.card_part_message {
  position: absolute;
  top: 170px;
  left: 350px;
}

.textarea_card_pagenumber {
  font-size: 34px;
  font-family: 'GenEiAntiqueNv5M';
  line-height: 45px;
  text-align: left;

  padding-left: 0.25em;
  padding-right: 0.25em;

  box-sizing: border-box;
  border: rgba(255, 255, 255, 1) 8px solid;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: #00000030 5px 5px 15px;
}

.index_page_icon {
  position: absolute;
  top: 0px;
  left: 0px;
}

.index_thumbnail {
  position: absolute;
  top: 110px;
  left: -20px;
}

.index_thumbnail img {
  width: 370px;
  height: 370px;

  box-sizing: border-box;
  border: #808080 4px solid;
  /* border-radius: 40px; */
  /* border-radius: 20% 20% 20% 20% / 10% 10% 10% 10%; */
  border-radius: 35% 12% 35% 12% / 30% 10% 30% 10%;

  box-shadow: #00000040 5px 5px 15px;
}

.textarea_index_name {
  position: relative;
  top: 0px; /* will be overwritten */
  left: -45px;
  width: 420px;
  font-size: 50px;
  font-family: 'GenEiAntiqueNv5M';
  line-height: 45px;
  text-align: center;
}

.textarea_index_pagenumber {
  position: absolute;
  top: 100px;
  left: -30px;
  font-size: 50px;
  font-family: 'GenEiAntiqueNv5M';
  line-height: 45px;
  text-align: left;

  box-sizing: border-box;
  border: rgba(255, 255, 255, 1) 12px solid;
  border-radius: 30px;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: #00000080 5px 5px 15px;
}

img.emoji {
  width: 0.95em !important;
  height: 0.95em !important;
  vertical-align: -0.15em;
  padding-right: 0.05em;
}

.white-page-background {
  --page-background-color: #FFFFFF;
}

.black-page-background {
  --page-background-color: #000000;
}

.hidden_object {
  visibility: hidden;
}

.nowrap {
  white-space: nowrap;
}

div.form-container {
  background-color: #f0f0f8;
  border-radius: 8px;
  padding: 1em;
  border: 2px solid #888888;
}

input[type="text"] {
  border-radius: 6px;
  padding: 0.2em 0.6em;
  margin: 0.2em;
}

select {
  border-radius: 6px;
  padding: 0.2em 0.6em;
  margin: 0.2em;
}

textarea {
  border-radius: 6px;
  padding: 0.4em 0.6em;
  margin: 0.2em;
}

input[type="button"] {
  border-radius: 10px;
  padding: 0.6em 0.8em;
  margin: 0.2em;
  background-color: #407da2;
  color: #ffffff;
  border: 0px;
  cursor: pointer;
}

input[type="button"]:hover,
input[type="button"]:active {
  background-color: #2e6386;
}

.text-dimmed {
  opacity: 0.7;
  font-size: 0.85em;
}

b.label-bold {
  font-size: 1.1em;
}

.no-display-object {
  display: none;
}

.edit-recommend {
  color: black;
  background-color: white;
  font-weight: bold;
  /* font-size: 1.2em; */
  display: inline-block;
  user-select: all;
}