.allscren { position: relative; width: 100%; height: 100%; }
header { position: relative; height: 150px; }
header a { text-decoration: none; }
header ul { margin: 0px; padding: 0px; list-style-type: none; }
header li { margin: 0px; padding: 0px; }
header .h1z { position: absolute; top: 16px; left: 20px; width: 205px; }
h1 { margin: 0px; padding: 0px; width: 100%; font-size: 1rem; line-height: 100%; }
header .h1z .giin { padding: 0px 0px 12px; font-size: 1rem; line-height: 100%; letter-spacing: 0.05em; }
header .h1z .font_sans { padding: 13px 0px 0px 2px; font-weight: bold; font-size: 1rem; line-height: 100%; color: #aaaaaa; letter-spacing: 0.05em; }
header .bgrmenubtn { position: absolute; top: 9px; right: 9px; width: 72px; cursor: pointer; z-index: 5; border-radius: 50%; }
header .bgrmenubtn img { width: 100%; }
header nav { position: absolute; top: 21px; right: 100px; margin: 0px; padding: 0px; width: 80%; max-width: 600px; line-height: 100%; font-weight: bold; display: none; }
header nav ul { width: 100%; display: flex; flex-flow: wrap; justify-content: flex-end; }
header nav li { position: relative; }
header nav li::before { content: ""; position: absolute; top: 5px; right: 0px; width: 0px; height: 17px; border-left: 1px solid #999999; }
header nav li:first-of-type::after { content: ""; position: absolute; top: 5px; left: 0px; width: 0px; height: 17px; border-left: 1px solid #999999; }
header nav li a { display: inline-block; padding: 5px 10px; text-decoration: none; }
.sidebar { position: fixed; top: 62%; right: 0px; margin: 0px; padding: 0px; width: 10%; max-width: 32px; list-style-type: none; font-size: 0.7rem; line-height: 100%; text-align: center; font-weight: bold; transform: translateY(-50%); }
.sidebar li { margin: 10px 0px 0px; padding: 0px; width: 100%; }
.sidebar a { display: block; width: 100%; white-space: nowrap; text-decoration: none; }
.sidebar a div { margin: 0px auto; padding: 0px 0px 10px; }
.topz { position: relative; width: 100%; height: calc(100% - 150px); background: linear-gradient(to right, #f7f8f8, #dee6eb); }
.topz .ph1 { position: absolute; bottom: 0px; left: 50%; width: 100%; height: 105%; overflow: hidden; transform: translateX(-50%); }
.topz .ph1 picture { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
.topz .ph1 picture img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transition-duration: 1s; transition-delay: 0.2s; }
.topz .ph2 { position: absolute; top: 2%; left: 50%; width: 45%; height: 97%; }
.topz .ph2 .m4 { position: absolute; top: 0px; left: 74%; width: 26%; max-width: 150px; height: 48%; }
.topz .ph2 .m4 img { width: 100%; height: 100%; object-fit: contain; object-position: center top; }
.topz .chara1 { position: absolute; bottom: 0px; right: 0px; max-width: 30%; max-height: 40%; }
.topz .chara2 { position: absolute; bottom: 5px; right: 5px; max-width: 20%; max-height: 30%; display: none; }
.topz .ph3 { position: absolute; top: 10%; right: 46%; width: 51%; height: 80%; }
.topz .ph3 > div { position: relative; margin: 0px auto; width: 100%; height: 100%; max-width: 530px; }
.topz .ph3 .m1 { width: 100%; max-width: 490px; height: 45%; max-height: 200px; }
.topz .ph3 .m1 img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.topz .ph3 .m2 { padding: 7% 0px 3%; width: 100%; height: 30%; max-height: 150px; box-sizing: border-box; }
.topz .ph3 .m2 img { width: 100%; height: 100%; object-fit: contain; object-position: left top; filter: drop-shadow(#ffffff 0px 0px 3px) drop-shadow(#ffffff 0px 0px 3px) drop-shadow(#ffffff 0px 0px 3px) drop-shadow(#ffffff 0px 0px 3px); }
.topz .ph3 .m3 { position: absolute; bottom: 0px; left: 0px; width: 100%; }
.topz .ph3 .m3 .nam { padding: 0px 0px 5px; font-size: 0.8rem; line-height: 100%; font-weight: bold; }
#topinfowak { position: relative; margin: 0px; padding: 0px; list-style-type: none; width: 100%; height: 60px; background-color: rgba(255, 255, 255, 0.7); overflow: hidden; }
#topinfowak li { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 5; transition-duration: 0.5s; }
#topinfowak li:nth-of-type(2) { top: 100%; }
#topinfowak li:nth-of-type(3) { top: 200%; }
#topinfowak a { position: relative; display: block; padding: 0px 10px 0px 27px; width: 100%; font-size: 1rem; line-height: 60px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; text-decoration: none; }
#topinfowak a::before { content: ""; position: absolute; top: 50%; left: 10px; width: 0px; height: 0px; border-width: 6px; border-style: solid; border-color: transparent transparent transparent #438baf; transform: translateY(-50%); }
@media screen and (max-aspect-ratio: 4 / 10) {
  .topz .ph2 .m4 { left: 50%; width: 75%; transform: translateX(-50%); }
}
@media screen and (max-aspect-ratio: 5 / 10) and (min-aspect-ratio: 4 / 10) {
  .topz .ph2 .m4 { left: 13%; width: 60%; }
}
@media screen and (max-aspect-ratio: 9 / 10) and (min-aspect-ratio: 5 / 10) {
  .topz .ph2 .m4 { left: 45%; width: 65%; transform: translateX(-50%); }
}
@media screen and (max-aspect-ratio: 9 / 10) {
  .topz .ph2 { left: 2px; width: 45%; }
  .topz .ph2 .m4 { top: 5%; }
  .topz .chara1 { display: none; }
  .topz .chara2 { display: block; }
  .topz .ph3 { right: 20%; width: 78%; height: 85%; }
  .topz .ph3 > div { max-width: 2000px; }
  .topz .ph3 .m1, .topz .ph3 .m2, #topinfowak span { display: none; }
  .sidebar { top: 50%; }
  .topz .ph1 picture { width: 170%; left: -55%; }
}
@media screen and (max-aspect-ratio: 5 / 10) {
  .topz .ph1 picture { width: 192%; left: -78%; }
}
@media screen and (min-aspect-ratio: 9 / 10) and (max-width: 768px) {
  .topz .ph2 { width: 42%; }
  .topz .ph2 .m4 { left: 80%; width: 20%; }
  .sidebar { width: 7%; }
}
@media screen and (min-aspect-ratio: 20 / 11) and (min-height: 400px) {
  .topz .ph3 { width: 37%; }
  .topz .ph2 { width: 33%; }
  .topz .ph2 .m4 { width: 29%; }
}
@media print, screen and (min-width: 768px) {
  header nav { display: block; font-size: 0.8rem; line-height: 100%; }
  #topinfowak a { font-size: 0.9rem; line-height: 60px; }
}
@media print, screen and (min-width: 850px) {
  header nav { font-size: 0.9rem; line-height: 100%; }
  header nav li a { padding: 5px 15px; }
}
@media screen and (max-height: 580px) {
  #topinfowak { height: 40px; }
  #topinfowak a { font-size: 0.8rem; line-height: 40px; }
}
@media screen and (max-height: 500px) {
  .allscren { height: 500px; }
  .sidebar { top: 280px; }
}
@media screen and (max-width: 1150px) {
  .sidebar { position: absolute; }
}
@media print {
  .allscren { height: 600px; }
  header .bgrmenubtn { display: none; }
  header nav { right: 0px; }
  .sidebar { display: none; }
}