* {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: normal;
  -webkit-tap-highlight-color: transparent;
  --font_size: min(3.6svh, 1.2vw);
  --nav_size: calc(var(--font_size) * 8);
}
body {
  overflow: hidden;
}
#nav {
  top: 0;
  position: fixed;
  width: var(--nav_size);
  height: 100svh;
  z-index: 1;
}
#nav ul {
  display: flex;
  width: var(--nav_size);
  height: 100svh;
  justify-content: center;
  flex-direction: column;
  font-size: var(--font_size);
  line-height: 4;
  list-style: none;
  transform: translateY(-100svh);
}
#nav li {
  text-align: center;
  position: relative;
  cursor: pointer;
  transition: all .3s ease;
}
#nav li.selected {
  color: #FFFFFF;
  font-weight: bold;
}
#nav_selected {
  top: 0;
  display: flex;
  width: var(--nav_size);
  height: 100svh;
  justify-content: center;
  flex-direction: column;
}
#nav_selected_content {
  margin: var(--font_size);
  height: calc(var(--font_size) * 2.5);
  background: #000000;
  transition: all .3s ease;
}
#nav_selected_content.top {
  transform: translateY(calc(var(--font_size) * -4));
}
#nav_selected_content.about {
  transform: translateY(0);
}
#nav_selected_content.contact {
  transform: translateY(calc(var(--font_size) * 4));
}
#wrapper {
  position: fixed;
  width: calc(100vw - var(--nav_size));
  height: 100svh;
  margin-left: var(--nav_size);
  display: grid;
  grid-template-rows: 100svh 100svh 100svh;
  transition: all .3s ease;
}
#wrapper.top {
  transform: none;
}
#wrapper.about {
  transform: translateY(-100svh);
}
#wrapper.contact {
  transform: translateY(-200svh);
}
#top {
  grid-row: 1;
  width: inherit;
  height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#yink {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: 1 / 3;
  grid-row: 1;
}
#yink_yink {
  height: calc(var(--font_size) * 24);
  opacity: 0;
  transition: all 1s ease-in-out;
}
#temp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100svh;
  grid-column: 2;
  grid-row: 1;
  color: #000000;
  font-style: normal;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}
#temp_a {
  font-size: calc(var(--font_size) * 2);
  font-weight: normal;
}
#temp_b,
#temp_b a {
  color: #000000;
  font-size: var(--font_size);
  font-weight: bold;
  padding: var(--font_size) 0;
}
#temp_c {
  font-size: var(--font_size);
  font-weight: normal;
}
#temp_d {
  font-size: calc(var(--font_size) * 1.25);
  font-weight: normal;
}
#about {
  grid-row: 2;
  width: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font_size);
}
#about_list dt {
  float: left;
  clear: left;
  width: calc(var(--font_size) * 5);
  margin: var(--font_size) var(--font_size) var(--font_size) 0;
  text-align: right;
}
#about_list dd {
  float: left;
  max-width: 48vw;
  padding-left: var(--font_size);
  margin: var(--font_size) 0;
  border-left: 1px solid #000000;
  font-weight: bold;
}
#about_list dd br {
  display: none;
}
#contact {
  grid-row: 3;
  width: inherit;
}
#contact iframe {
  width: 100vw;
  height: 100svh;
  transform: translateX(calc(var(--nav_size) * -1));
}
#contact_wrapper {
  width: calc(100vw - var(--nav_size));
  height: 100svh;
  overflow-y: scroll;
  transform: translateX(var(--nav_size));
}
#contact_wrapper * {
  font-size: var(--font_size);
  color: #000000;
}
#contact_wrapper #main_input,
#contact_wrapper #main_exit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
#contact_wrapper #main_confirm {
  margin: calc(50svh - calc(var(--font_size) * 12)) 0;
}
#contact_wrapper .section__ttl {
  display: none;
}
#contact_wrapper .section__body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* #contact_wrapper #txt_explain,
#contact_wrapper .red_txt {
  position: absolute;
  transform: translateY(-100%);
} */
#contact_wrapper #txt_explain {
  margin-top: calc(var(--font_size) * 2);
}
#contact_wrapper #txt_explain p {
  text-align: center;
  font-weight: bold;
}
#contact_wrapper #main_input #txt_explain p,
#contact_wrapper #main_confirm #txt_explain p {
  font-size: calc(var(--font_size) * .75);
}
#contact_wrapper #txt_explain:after {
  content: "\A";
  white-space: pre;
}
#contact_wrapper .red_txt li {
  list-style-type: none;
  text-align: center;
  font-weight: bold;
  margin-bottom: calc(var(--font_size) / 2);
  font-size: calc(var(--font_size) * .75);
}
#contact_wrapper th {
  position: absolute;
  text-align: right;
  transform: translate(-100%, calc(var(--font_size) / 2));
  padding-right: var(--font_size);
}
#contact_wrapper td {
  float: left;
  margin-bottom: calc(var(--font_size) * 2);
  width: calc(var(--font_size) * 36);
  min-width: calc(var(--font_size) * 36);
  max-width: calc(var(--font_size) * 36);
}
#contact_wrapper td * {
  width: calc(var(--font_size) * 36);
  min-width: calc(var(--font_size) * 36);
  max-width: calc(var(--font_size) * 36);
  min-height: calc(var(--font_size) * 2.5);
  padding: calc(var(--font_size) / 2);
  box-sizing: border-box;
  border: none;
  outline: 1px solid #000000;
  background: none;
}
#contact_wrapper .red {
  display: none;
}
#contact_wrapper .button_box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: calc(var(--font_size) * 36);
  gap: calc(var(--font_size) * 2);
  margin-bottom: calc(var(--font_size) * 2);
}
#contact_wrapper .button_box input {
  background: none;
  border: none;
  padding: calc(var(--font_size) / 2) 0;
  cursor: pointer;
  outline: 1px solid #000000;
  line-height: calc(var(--font_size) * 1.5);
  flex-grow: .5;
}
#contact_wrapper #main_input .button_box::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: calc(var(--font_size) / 2);
  height: calc(var(--font_size) / 2);
  margin: 0 0 0 calc(var(--font_size) * 4);
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  transform: rotate(135deg);
}
#contact_wrapper .button_box input:hover {
  background: hsla(0, 0%, 0%, 0.125);
}
#contact_wrapper #main_confirm td {
  padding: calc(var(--font_size) / 2);
  box-sizing: border-box;
  overflow-wrap: break-word;
  background: #f2f2f2;
}
#contact_wrapper #main_confirm .button_box {
  flex-flow: row-reverse;
}
#contact_wrapper #main_confirm .button_box *:nth-child(1) {
  flex-grow: 2;
}
#contact_wrapper #main_confirm .button_box *:nth-child(2) {
  flex-grow: 1;
}
@media screen and (orientation: portrait) {
  * {
    margin: 0;
    padding: 0;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: normal;
    --font_size: min(4vw, calc(calc(100vw + 100svh) / 100));
    --nav_size: calc(var(--font_size) * 4);
  }
  body {
    overflow: hidden;
  }
  #nav {
    top: 0;
    position: fixed;
    width: 100vw;
    height: var(--nav_size);
    z-index: 1;
  }
  #nav ul {
    display: flex;
    width: 100vw;
    height: var(--nav_size);
    justify-content: center;
    flex-direction: row;
    font-size: var(--font_size);
    line-height: 1;
    list-style: none;
    transform: translateY(-100%);
    align-items: center;
    gap: calc(var(--font_size) * 2);
  }
  #nav li {
    text-align: center;
    width: calc(var(--font_size) * 6);
    position: relative;
    cursor: pointer;
    transition: all .3s ease;
  }
  #nav li.selected {
    color: #FFFFFF;
    font-weight: bold;
  }
  #nav_selected {
    display: flex;
    width: 100vw;
    height: var(--nav_size);
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }
  #nav_selected_content {
    margin: var(--font_size);
    width: calc(var(--font_size) * 6);
    height: calc(var(--font_size) * 2.5);
    background: #000000;
    transition: all .3s ease;
  }
  #nav_selected_content.top {
    transform: translateX(calc(var(--font_size) * -8));
  }
  #nav_selected_content.about {
    transform: translateX(0);
  }
  #nav_selected_content.contact {
    transform: translateX(calc(var(--font_size) * 8));
  }
  #wrapper {
    position: fixed;
    width: 100vw;
    height: calc(100svh - var(--nav_size));
    margin-left: 0;
    margin-top: var(--nav_size);
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 100vw 100vw 100vw;
    transition: all .3s ease;
  }
  #wrapper.top {
    transform: none;
  }
  #wrapper.about {
    transform: translateX(-100vw);
  }
  #wrapper.contact {
    transform: translateX(-200vw);
  }
  #top {
    grid-row: auto;
    grid-column: 1;
    height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* width: calc(var(--font_size) * 24); */
    margin: 0 auto;
  }
  #yink {
    display: flex;
    width: 100%;
    /* justify-content: flex-start; */
    align-items: flex-start;
  }
  #yink_yink {
    width: calc(var(--font_size) * 48);
    height: auto;
    opacity: 0;
    transition: all 1s ease-in-out;
  }
  #temp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: min-content;
    padding: var(--font_size);
    color: #000000;
    font-style: normal;
    opacity: 0;
    transition: opacity 2s ease-in-out;
  }
  #temp_a {
    font-size: calc(var(--font_size) * 2);
    font-weight: normal;
  }
  #temp_b,
  #temp_b a {
    color: #000000;
    font-size: var(--font_size);
    font-weight: bold;
    padding: var(--font_size) 0;
  }
  #temp_b br {
    display: none;
  }
  #temp_c {
    font-size: var(--font_size);
    font-weight: normal;
    width: 100%;
    text-align: right;
  }
  #temp_d {
    font-size: calc(var(--font_size) * 1.25);
    font-weight: normal;
    width: 100%;
    text-align: right;
  }
  #about {
    grid-row: auto;
    grid-column: 2;
    height: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font_size);
  }
  #about_list dt {
    float: left;
    clear: left;
    width: calc(var(--font_size) * 5);
    margin: var(--font_size) var(--font_size) var(--font_size) 0;
    text-align: right;
  }
  #about_list dd {
    float: left;
    max-width: 48vw;
    padding-left: var(--font_size);
    margin: var(--font_size) 0;
    border-left: 1px solid #000000;
    font-weight: bold;
  }
  #about_list dd br {
    display: none;
  }
  #contact {
    grid-row: auto;
    grid-column: 3;
    height: inherit;
  }
  #contact iframe {
    transform: translateY(calc(var(--nav_size) * -1));
  }
  #contact_wrapper {
    width: 100vw;
    height: calc(100svh - var(--nav_size));
    transform: translateY(var(--nav_size));
  }
  #contact_wrapper #main_confirm {
    margin: calc(50svh - calc(var(--font_size) * 18)) 0;
  }
  #contact_wrapper #txt_explain,
  #contact_wrapper .red_txt {
    max-width: calc(var(--font_size) * 24);
  }
  #contact_wrapper th {
    position: relative;
    display: block;
    text-align: left;
    transform: none;
    padding-right: initial;
  }
  #contact_wrapper td {
    width: calc(var(--font_size) * 20);
    min-width: calc(var(--font_size) * 20);
    max-width: calc(var(--font_size) * 20);
  }
  #contact_wrapper td * {
    width: calc(var(--font_size) * 20);
    min-width: calc(var(--font_size) * 20);
    max-width: calc(var(--font_size) * 20);
  }
  #contact_wrapper .button_box {
    max-width: calc(var(--font_size) * 20);
  }
  #contact_wrapper table {
    margin-bottom: var(--font_size);
  }
}
@media screen and (orientation: landscape) and (hover: none) {
  * {
    --font_size: calc(min(3.6svh, 1.2vw) * 1.25);
  }
}
@media screen and (orientation: portrait) and (hover: none) {
  * {
    --font_size: calc(min(4vw, calc(calc(100vw + 100svh) / 100)) * 1.25);
  }
}
* {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
*::-webkit-scrollbar {
  display: none;
}
textarea {
  resize: none;
}
#temp {
  display: none;
}