header { position: relative; padding: 0px 0px 47px; width: 100%; border-width: 0px 0px 10px; border-style: solid; background-color: #e7f4f7; }
header::before { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 42px; z-index: 4; content: ""; background-image: url("/hpdata/bg/19.png"); background-position: left bottom; background-repeat: repeat-x; background-size: 720px 42px; }
header .relv { height: 110px; }
header a { text-decoration: none; }
header ul { list-style-type: none; }
header .h1z { position: absolute; top: 60%; left: 0px; z-index: 10; transform: translateY(-50%); }
header .bgrmn { position: absolute; top: 0px; right: -10px; width: 60px; height: 60px; cursor: pointer; z-index: 9; }
header nav { position: absolute; bottom: -5px; right: 0px; margin: 0px; padding: 0px; width: 100%; font-size: 0.9rem; line-height: 125%; font-weight: bold; z-index: 9; display: none; }
header nav ul { margin: 0px; padding: 0px; list-style-type: none; width: 100%; max-width: 1180px; display: flex; flex-flow: wrap; justify-content: flex-end; }
header nav li { margin: 0px 0px 0px 8px; padding: 0px; }
header nav li:nth-of-type(1) { display: none; }
header nav a { position: relative; display: inline-block; }
header .ulnk { position: absolute; top: 0px; right: 0px; margin: 0px; padding: 8px 0px 0px; width: 145px; font-size: 0.75rem; line-height: 100%; display: none; flex-flow: row; justify-content: flex-end; z-index: 9; }
header .ulnk li { position: relative; margin: 15px 0px 0px 12px; padding: 0px; }
header .ulnk li:first-of-type { margin-left: 0px; }
header .searchebox { position: absolute; top: 12px; right: 0px; width: 227px; border: 1px solid #e0eaec; background-color: #ffffff; z-index: 9; border-radius: 15px; display: none; }
header .searchebox form { display: flex; flex-flow: row; align-items: flex-start; padding: 3px 0px 2px; }
header .searchebox input[type="text"] { display: block; margin: 0px 4px 1px 11px; padding: 0px; width: calc(100% - 46px); font-size: 0.9rem; border: 0px; outline: 0px; font-family: "Noto Sans CJK JP Subset", 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", メイリオ, sans-serif; }
header .searchebox input::placeholder { color: #cccccc; }
header .searchebox input[type="image"] { display: block; width: 24px; border-radius: 3px; }
header .kinou { position: absolute; top: 3px; right: 235px; width: 195px; font-size: 13px; line-height: 21px; display: none; flex-flow: wrap; justify-content: space-between; z-index: 9; }
header .kinou #kinou01 { width: 86px; }
header .kinou #kinou02 { width: 105px; }
header .kinou .mo { font-size: 0.55rem; line-height: 150%; }
header .kinou ul { margin: 0px; padding: 0px; display: flex; flex-flow: row; text-align: center; }
header .kinou li { margin: 1px 3px 0px 0px; padding: 0px; border: 1px solid #e0eaec; background-color: #ffffff; cursor: pointer; border-radius: 3px; }
header .kinou #kinou02 li { width: 30px; }
header .kinou #kinou01 li { width: 38px; }
header .kinou #kinou02 li:nth-of-type(1) { background-color: #ffffff; color: #222222; }
header .kinou #kinou02 li:nth-of-type(2) { background-color: #000000; color: #ffffff; }
header .kinou #kinou02 li:nth-of-type(3) { background-color: #0000ff; color: #ffff00; }
header .nlnk { position: absolute; top: 63px; right: 0px; margin: 0px; padding: 0px; width: calc(100% - 330px); max-width: 350px; font-size: 0.94rem; line-height: 200%; display: none; flex-flow: row; justify-content: space-between; text-align: center; z-index: 9; }
header .nlnk li { position: relative; margin: 0px; padding: 0px; flex-basis: 49%; }
header .nlnk a { display: flex; flex-flow: wrap; justify-content: center; align-items: center; width: 100%; text-decoration: none; border-radius: 20px; }
header .nlnk a > div:first-of-type { margin-right: 3px; font-size: 0.55rem; line-height: 100%; display: none; }
header .niji { position: absolute; bottom: -47px; right: 10px; width: 100px; z-index: 3; }
header .kumo1 { position: absolute; bottom: 0px; left: 0px; width: 25%; max-width: 231px; height: auto; z-index: 2; }
header .kumo2 { position: absolute; bottom: 0px; right: 0px; width: 25%; max-width: 231px; height: auto; z-index: 2; }
.blkbg header { background-color: transparent; color: #ffffff; }
.blkbg header .kumo1, .blkbg header .kumo2, .blkbg header .niji, .blkbg header::before { display: none; }
.blkbg header a { text-decoration: underline; }
.blkbg header .nlnk a { color: #ffff00; }
.blkbg header .kinou li { border-color: transparent; }
.bluebg header { background-color: transparent; color: #ffffff; }
.bluebg header .kumo1, .bluebg header .kumo2, .bluebg header .niji, .bluebg header::before { display: none; }
.bluebg header a { text-decoration: underline; }
.bluebg header .nlnk a { color: #ffff00; }
.bluebg header .kinou li { border-color: transparent; }
.bigfont header .ulnk { font-size: 14px; }
.bigfont header .nlnk { max-width: 500px; font-size: 18px; }
.bigfont header nav { font-size: 18px; }
@media print, screen and (min-width: 400px) {
  header .h1z { top: 70%; }
  header .niji { width: 120px; }
}
@media print, screen and (min-width: 640px) {
  header .relv { height: 145px; }
  header .h1z { top: 50%; }
  header nav, header .searchebox { display: block; }
  header .nlnk, header .kinou { display: flex; }
  header .niji { right: auto; left: 10%; width: 145px; }
  header .bgrmn { display: none; }
}
@media print, screen and (min-width: 680px) {
  header .nlnk { max-width: 350px; }
  header .kumo1, header .kumo2 { width: 231px; height: 170px; z-index: 2; }
}
@media print, screen and (min-width: 800px) {
  header .nlnk { max-width: 450px; }
  header .nlnk a > div:first-of-type { display: inline; }
}
@media print, screen and (min-width: 900px) {
  header nav { font-size: 1rem; line-height: 125%; }
  header nav li { margin-left: 18px; }
  header .ulnk { display: flex; }
  header .searchebox { right: 145px; }
  header .kinou { right: 380px; }
  .bigfont header nav { font-size: 20px; }
}
@media print, screen and (min-width: 1000px) {
  header nav li:nth-of-type(1) { display: block; }
}
@media print {
  header { padding: 0px; background-color: transparent; }
  header::before, header .niji, header .kumo1, header .kumo2 { display: none; }
  header nav { bottom: 10px; }
}