header { background-color: #ffffff; }
header .relv { height: 150px; text-align: center; overflow-y: hidden; background-repeat: no-repeat; background-position: center bottom; }
header .wrapper { width: 96%; margin: 0px 2%; }
header ul { margin: 0px; padding: 0px; list-style-type: none; }
header li { margin: 0px; padding: 0px; }
h1 { position: absolute; top: 5px; left: 0px; margin: 0px; padding: 0px; width: 211px; height: 86px; font-size: 0.7rem; line-height: 100%; z-index: 10; }
header img.bgrbtn { position: absolute; top: 12px; left: 12px; cursor: pointer; z-index: 3; display: none; }
header .btnmenu { position: absolute; top: 12px; right: 2px; width: 160px; z-index: 3; display: flex; flex-flow: wrap; justify-content: flex-end; }
header .btnmenu li { margin: 0px 0px 0px 9px; width: 30px; height: 30px; }
header .telz { position: absolute; top: 52px; right: 2px; width: 310px; display: none; z-index: 3; }
header .telz li { display: inline-block; margin: 0px 0px 0px 5px; }
header .telz li:nth-of-type(1) { padding-top: 4px; font-size: 0.8rem; line-height: 100%; }
header .telz li:nth-of-type(2) { font-size: 1.33rem; line-height: 100%; font-weight: bold; }
header .telz li:nth-of-type(3) { padding-top: 5px; font-size: 0.7rem; line-height: 100%; font-family: arial, sans-serif; }
header nav { position: absolute; bottom: 10px; left: 0px; width: 100%; z-index: 3; }
header nav ul { width: 100%; line-height: 125%; text-align: center; display: flex; flex-flow: row; justify-content: space-between; }
header nav li { flex-basis: 25%; border-left: 1px solid #9bcee5; box-sizing: border-box; }
header nav li:first-of-type { display: none; }
header nav li:nth-of-type(5) { display: none; }
header nav li:last-of-type { border-right: 1px solid #9bcee5; }
header nav li a { display: block; padding: 7px 0px 4px; width: 100%; text-decoration: none; color: #333333; }
header nav li div { padding: 7px 0px 4px; width: 100%; color: #666666; }
header nav li span { font-size: 0.8rem; line-height: 100%; color: #408cbc; font-family: arial, sans-serif; letter-spacing: 0.05em; }
header .searchs { position: absolute; top: 95px; right: 0px; margin: 0px; padding: 7px 15px 5px; width: 212px; display: none; text-align: left; border: 1px solid #9bcee5; box-sizing: border-box; }
header .searchs input[type="text"] { display: block; margin: 0px; padding: 0px; border: 0px; width: 90%; height: 18px; outline: 0px; line-height: 100%; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", メイリオ, sans-serif; }
header .searchs input[type="image"] { display: block; position: absolute; top: 0px; bottom: 0px; right: 10px; margin: auto; content: ""; vertical-align: middle; }
header .searchs input::-webkit-input-placeholder { color: #bbbbbb; }
header .searchs input::placeholder { color: #bbbbbb; }
.topiz { background-color: #9dd3ed; background-repeat: no-repeat; background-position: center top; background-image: url("/hpdata/bg/1.jpg"); }
#topiitems { position: relative; margin: 0px auto; width: 1000px; max-width: 100%; overflow: hidden; }
#topimages { position: relative; margin: 0px auto; padding-bottom: 64.28%; width: 100%; height: 0px; }
#topimages > div, #topimages > a { display: block; position: absolute; top: 0px; left: 0px; width: 100%; opacity: 0; }
#topimages .slsw:first-of-type { opacity: 1; }
#topmsg { position: absolute; top: 0px; left: 0px; opacity: 1; width: 100%; height: 100%; overflow: hidden; z-index: 15; }
picture.mp { width: 100%; }
picture.sp { position: absolute; top: 50%; left: 0px; width: 100%; z-index: 2; text-align: center; }
picture.sp img, picture.sp source { margin: 0px auto; max-width: 80%; max-height: 80%; }
.topib { position: absolute; top: 50%; width: 26px; height: 100px; background-color: #000000; z-index: 29; cursor: pointer; opacity: 0.6; transform: translateY(-50%); }
.topib::after { position: absolute; top: 0px; bottom: 0px; margin: auto; width: 10px; height: 10px; vertical-align: middle; content: ""; transform: rotate(45deg); }
.topib:hover { opacity: 0.9; }
.topib1 { left: 1%; }
.topib1::after { left: 10px; border-bottom: 1px solid #ffffff; border-left: 1px solid #ffffff; }
.topib2 { right: 1%; }
.topib2::after { left: 5px; border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; }
.topi_jbx { position: absolute; display: flex; bottom: 15px; left: 0px; width: 100%; height: 7px; z-index: 29; flex-direction: row; justify-content: center; }
.topi_jbx div { margin: 0px 10px; padding: 0px; width: 7px; height: 7px; background-color: #ffffff; border-radius: 50%; opacity: 0.5; }
.topi_jbx div:nth-of-type(1) { opacity: 0.8; }
@media print, (min-width: 700px) {
  #topimages { padding-bottom: 40%; }
}
@media print, (min-width: 670px) {
  header nav { left: 2%; width: 96%; }
  header nav li { flex-basis: 17%; }
  header nav li:first-of-type { flex-basis: 16%; display: block; }
  header nav li:nth-of-type(5) { display: block; }
  header nav li:last-of-type { flex-basis: 16%; }
}
@media screen and (min-width: 768px) {
  header .relv { height: 215px; }
  header .wrapper { width: 1000px; max-width: 94%; margin: 0px auto; }
  h1 { top: 37px; }
  header .telz { display: flex; flex-flow: wrap; justify-content: flex-end; }
  header img.bgrbtn { display: block; }
  header .searchs { display: block; }
}
@media screen and (min-width: 1160px) {
  header img.bgrbtn { position: fixed; }
}
@media print {
  header .relv { height: 215px; }
  header .wrapper { width: 800px; margin: 0px; }
  h1 { top: 37px; }
  header .telz { display: flex; flex-flow: wrap; justify-content: flex-end; }
  header img.bgrbtn { display: none; }
  header .searchs { display: block; }
}