header { position: relative; padding: 60px 0px 20px; width: 100%; line-height: 100%; }
header .h1z { position: relative; margin: 0px auto; padding: 0px; width: 60%; max-width: 220px; }
header .h1z h1 { margin: 0px; padding: 0px; width: 100%; font-size: 1rem; line-height: 100%; }
header .h1z > div { position: relative; width: 100%; height: 0px; font-size: 0.9rem; line-height: 100%; }
header .h1z .ccp { position: absolute; top: -27px; left: -13px; display: inline-block; z-index: -1; transform: rotate(-15deg); }
header .h1z .ccp::before, header .h1z .ccp::after { content: ""; position: absolute; top: -20%; width: 0px; height: 140%; border-left: 1px solid #333333; }
header .h1z .ccp::before { left: -12px; transform: rotate(-30deg); }
header .h1z .ccp::after { right: -5px; transform: rotate(17deg); }
header .h1z img { width: 100%; height: auto; }
header .wagamachi { position: absolute; top: 5px; right: 5px; width: 25%; max-width: 97px; }
header .bgrmn { position: absolute; top: 0px; right: 0px; width: 60px; height: 60px; cursor: pointer; display: none; }
header nav { margin: 0px auto; padding: 0px; width: 100%; max-width: 400px; font-size: 0.9rem; }
header nav ul { margin: 0px; padding: 5px 0px 0px; list-style-type: none; width: 100%; display: flex; flex-flow: wrap; justify-content: center; }
header nav li { display: inline-block; margin: 15px 0px 0px; padding: 0px; border-right: 1px solid #153b54; white-space: nowrap; }
header nav li:first-of-type { border-left: 1px solid #153b54; }
header nav li:nth-of-type(2) { display: none; }
header nav li:nth-of-type(5) { border-left: 1px solid #153b54; }
header nav span { display: none; }
header nav a { display: inline-block; padding: 0px 10px; text-decoration: none; }
header .snsbox { position: absolute; top: 15px; left: 15px; margin: 0px; padding: 0px; list-style-type: none; width: 100px; display: none; flex-flow: row; justify-content: flex-start; }
header .snsbox li { margin: 0px 3px 0px 0px; padding: 0px; width: 27px; height: 27px; }
header .snsbox img { width: 100%; height: auto; }
.topv { position: relative; margin: 0px auto; width: 96%; max-width: 350px; text-align: center; }
.topv .topvp { display: inline-block; margin: 0px auto; padding: 20px 0px 0px; max-height: 400px; text-align: left; font-size: 0.95rem; line-height: 200%; letter-spacing: 0.1em; transform: translateX(-4px); white-space: nowrap; }
.topv .topvp span { position: relative; display: inline-block; }
.topv .pz { width: 100%; display: flex; flex-flow: row; justify-content: center; }
.topv img.i1 { max-width: 50%; }
.topv img.i2 { max-width: 50%; }
.topv img.i3 { position: absolute; bottom: 96px; right: 6px; width: 55px; height: auto; z-index: 2; }
.topv img.i4 { position: absolute; top: 7%; right: 3%; width: 12%; height: auto; z-index: 2; display: none; }
.topv img.cat { position: absolute; bottom: 64px; right: 28px; width: 40px; height: auto; z-index: 2; }
.topv img.bird { position: absolute; top: 40px; left: 5px; width: 40px; height: auto; z-index: 2; }
.tate { font-family: "Noto Serif CJK JP Subset Tate", serif; }
.tate2 { font-family: 游明朝体, YuMincho, 游明朝, "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝", "MS PMincho", serif; }
@media screen and (max-width: 320px) {
  .topv img.cat, .topv img.bird, .topv img.i3 { display: none; }
}
@media print, screen and (min-width: 360px) {
  header nav { font-size: 1rem; }
}
@media print, screen and (min-width: 390px) {
  header nav li:nth-of-type(2) { display: inline-block; }
  header .h1z { max-width: 250px; }
}
@media print, screen and (min-width: 460px) {
  header nav { max-width: 500px; }
  header nav a { padding: 0px 15px; }
}
@media screen and (min-width: 390px) and (max-width: 459px) {
  header nav li:nth-of-type(4) { border-left: 1px solid #153b54; }
  header nav li:nth-of-type(5) { border-left: 0px; }
}
@media print, screen and (min-width: 570px) {
  .topv { width: 90%; max-width: 840px; }
  .topv .topvp { padding-top: 30px; font-size: 0.93rem; line-height: 200%; letter-spacing: 0.1em; }
  .topv .pz { display: block; }
  .topv img.i1 { position: absolute; bottom: 25%; left: 0px; width: 29%; z-index: 2; }
  .topv img.i2 { position: absolute; bottom: 25%; right: 0px; width: 29%; z-index: 2; }
  .topv img.bird { top: 33%; left: 10%; width: 5%; }
  .topv img.cat { top: 90px; right: 12%; width: 43px; }
  .topv img.i4 { display: block; top: 30px; right: 3%; width: 80px; }
  .topv img.i3 { display: none; }
}
@media print, screen and (min-width: 680px) {
  header .h1z { max-width: 280px; }
  header { padding: 55px 0px 20px; }
  header .snsbox { display: flex; }
  header nav { padding-top: 15px; max-width: 600px; }
  .topv .topvp { line-height: 225%; }
  .topv img.cat { right: 11%; }
  .topv img.i1, .topv img.i2 { width: 31%; }
  header .wagamachi { right: 62px; }
  header .bgrmn { display: block; }
}
@media screen and (min-width: 680px) and (max-width: 767px) {
  header nav span { display: inline; }
}
@media print, screen and (min-width: 768px) {
  .topv .topvp { padding-right: 10px; line-height: 250%; }
  header nav { max-width: 100%; }
  header nav li:nth-of-type(5) { border-left: 0px; }
  header nav a { padding: 0px 10px; }
  .topv img.cat { right: 13%; }
  .topv img.i4 { top: 20px; width: 101px; }
}
@media print, screen and (min-width: 1100px) {
  .topv .topvp { line-height: 225%; }
  header nav a { padding: 0px 12px; }
  .topv img.i1, .topv img.i2 { bottom: 26%; }
  .topv img.cat { top: 100px; }
  .topv img.i4 { top: 30px; }
}