@charset "UTF-8";
/* ========================================
	 common.cssのヘッダースタイルを保護
======================================== */
/* ヘッダー本体 */
.mod_header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  background-color: #0c559f !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: grid !important;
  /* ロゴ */
  /* メニューボタン */
  /* オーバーレイ */
  /* ドロワーメニュー */
  /* ナビゲーション */
  /* アコーディオン */
  /* 閉じるボタン */
}
@media print, screen and (min-width: 767px) {
  .mod_header { /* PC */
    height: 80px !important;
    grid-template-columns: auto 1fr auto !important;
    padding: 0 73px !important;
  }
}
@media screen and (max-width: 767px) {
  .mod_header { /* SP */
    height: 60px !important;
    grid-template-columns: 1fr auto !important;
    padding: 0 20px !important;
  }
}
.mod_header * {
  box-sizing: border-box;
}
.mod_header .logo {
  grid-row: 1 !important;
  align-self: center !important;
}
@media print, screen and (min-width: 767px) {
  .mod_header .logo { /* PC */
    width: 268px !important;
    grid-column: 2 !important;
    justify-self: center !important;
  }
}
@media screen and (max-width: 767px) {
  .mod_header .logo { /* SP */
    width: 178px !important;
    grid-column: 1 !important;
  }
}
.mod_header .logo a {
  display: block !important;
}
.mod_header .logo img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}
.mod_header .menubtn {
  display: block !important;
  width: 30px !important;
  height: 20px !important;
  position: relative !important;
  grid-column: -1 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  align-self: center !important;
  z-index: 1000 !important;
  cursor: pointer !important;
  transition: 0.2s !important;
}
.mod_header .menubtn:hover {
  opacity: 0.6 !important;
}
.mod_header .menubtn .open,
.mod_header .menubtn .close {
  display: block;
}
.mod_header .menubtn .bar {
  position: absolute !important;
  display: block !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 30px !important;
  height: 2px !important;
  margin: auto !important;
  background-color: #ffffff !important;
  border-radius: 2px !important;
}
.mod_header .menubtn .open .bar {
  transition: width 0.3s !important;
}
.mod_header .menubtn .open .bar:nth-child(1) {
  bottom: -18px !important;
}
.mod_header .menubtn .open .bar:nth-child(2) {
  bottom: 0 !important;
}
.mod_header .menubtn .open .bar:nth-child(3) {
  top: -18px !important;
}
.mod_header .menubtn .close .bar {
  width: 0 !important;
  transition: width 0.3s !important;
}
.mod_header .menubtn .close .bar:nth-child(1) {
  transform: rotate(45deg) !important;
}
.mod_header .menubtn .close .bar:nth-child(2) {
  transform: rotate(-45deg) !important;
}
.mod_header .overlay {
  display: none;
}
.mod_header .drawer {
  position: fixed !important;
  bottom: 0 !important;
  right: 0 !important;
  opacity: 0 !important;
  z-index: 1000 !important;
  pointer-events: none !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  transition: opacity 0.4s !important;
  font-size: 16px !important;
}
@media print, screen and (min-width: 767px) {
  .mod_header .drawer { /* PC */
    top: 80px !important;
  }
}
@media screen and (max-width: 767px) {
  .mod_header .drawer { /* SP */
    top: 60px !important;
    width: 100% !important;
  }
}
.mod_header .drawer::-webkit-scrollbar {
  width: 0px !important;
  height: 0px !important;
}
.mod_header .nav {
  display: grid !important;
  grid-template-columns: 1fr !important;
  background-color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  /* 子メニュー */
  /* 業者ポータルリンク */
}
@media print, screen and (min-width: 767px) {
  .mod_header .nav { /* PC */
    width: 450px !important;
  }
}
@media screen and (max-width: 767px) {
  .mod_header .nav { /* SP */
    width: 100% !important;
  }
}
.mod_header .nav li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.mod_header .nav > li:not(:first-of-type) {
  border-top: 1px solid #ffffff !important;
}
.mod_header .nav > li > a {
  background-color: #bfe7f7 !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  text-decoration: none !important;
}
@media print, screen and (min-width: 767px) {
  .mod_header .nav > li > a { /* PC */
    height: 60px !important;
    padding: 0 26px !important;
  }
}
@media screen and (max-width: 767px) {
  .mod_header .nav > li > a { /* SP */
    height: 50px !important;
    padding: 0 30px 0 23px !important;
  }
}
.mod_header .nav > li > a:hover {
  opacity: 0.7 !important;
}
.mod_header .nav > li > a::after {
  content: "" !important;
  display: block !important;
  border-top: 2px solid #2E80C6 !important;
  border-right: 2px solid #2E80C6 !important;
  transform: rotate(45deg) !important;
  border-radius: 1px !important;
  margin: auto !important;
}
@media print, screen and (min-width: 767px) {
  .mod_header .nav > li > a::after { /* PC */
    width: 12px !important;
    height: 12px !important;
  }
}
@media screen and (max-width: 767px) {
  .mod_header .nav > li > a::after { /* SP */
    width: 10px !important;
    height: 10px !important;
  }
}
.mod_header .nav > li > a span {
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: #0c559f !important;
}
@media print, screen and (min-width: 767px) {
  .mod_header .nav > li > a span { /* PC */
    font-size: 20px !important;
  }
}
@media screen and (max-width: 767px) {
  .mod_header .nav > li > a span { /* SP */
    font-size: 16px !important;
  }
}
.mod_header .nav .child {
  border-top: 1px solid #ffffff !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.mod_header .nav .child li {
  margin: 0 !important;
  padding: 0 !important;
}
.mod_header .nav .child li a {
  background-color: #bfe7f7 !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  text-decoration: none !important;
}
@media print, screen and (min-width: 767px) {
  .mod_header .nav .child li a { /* PC */
    height: 60px !important;
    padding: 0 26px 0 70px !important;
  }
}
@media screen and (max-width: 767px) {
  .mod_header .nav .child li a { /* SP */
    height: 50px !important;
    padding: 0 30px 0 23px !important;
  }
}
.mod_header .nav .child li a:hover {
  opacity: 0.7 !important;
}
.mod_header .nav .child li a::after {
  content: "" !important;
  display: block !important;
  border-top: 2px solid #2E80C6 !important;
  border-right: 2px solid #2E80C6 !important;
  transform: rotate(45deg) !important;
  border-radius: 1px !important;
  margin: auto !important;
}
@media print, screen and (min-width: 767px) {
  .mod_header .nav .child li a::after { /* PC */
    width: 12px !important;
    height: 12px !important;
  }
}
@media screen and (max-width: 767px) {
  .mod_header .nav .child li a::after { /* SP */
    width: 10px !important;
    height: 10px !important;
  }
}
.mod_header .nav .child li a span {
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: #0c559f !important;
}
@media print, screen and (min-width: 767px) {
  .mod_header .nav .child li a span { /* PC */
    font-size: 20px !important;
  }
}
@media screen and (max-width: 767px) {
  .mod_header .nav .child li a span { /* SP */
    font-size: 16px !important;
  }
}
.mod_header .nav a.vendor {
  background-color: #ffffff !important;
}
.mod_header .nav a.vendor span {
  color: #707070 !important;
}
.mod_header .accordion {
  display: block !important;
}
.mod_header .accordion .titlebox {
  background-color: #bfe7f7 !important;
  position: relative !important;
}
.mod_header .accordion .titlebox a {
  background-color: #bfe7f7 !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  text-decoration: none !important;
}
@media print, screen and (min-width: 767px) {
  .mod_header .accordion .titlebox a { /* PC */
    height: 60px !important;
    padding: 0 26px !important;
  }
}
@media screen and (max-width: 767px) {
  .mod_header .accordion .titlebox a { /* SP */
    height: 50px !important;
    padding: 0 30px 0 23px !important;
  }
}
.mod_header .accordion .titlebox a:hover {
  opacity: 0.7 !important;
}
.mod_header .accordion .titlebox a span {
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: #0c559f !important;
}
@media print, screen and (min-width: 767px) {
  .mod_header .accordion .titlebox a span { /* PC */
    font-size: 20px !important;
  }
}
@media screen and (max-width: 767px) {
  .mod_header .accordion .titlebox a span { /* SP */
    font-size: 16px !important;
  }
}
.mod_header .accordion .titlebox::before, .mod_header .accordion .titlebox::after {
  content: "" !important;
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  background-color: #2E80C6 !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  margin: auto !important;
}
@media print, screen and (min-width: 767px) {
  .mod_header .accordion .titlebox::before, .mod_header .accordion .titlebox::after { /* PC */
    right: 25px !important;
  }
}
@media screen and (max-width: 767px) {
  .mod_header .accordion .titlebox::before, .mod_header .accordion .titlebox::after { /* SP */
    right: 27.5px !important;
  }
}
.mod_header .accordion .titlebox::after {
  transform: rotate(90deg) !important;
  transition: transform 0.3s ease !important;
}
.mod_header .accordion .open.active .titlebox::after {
  transform: rotate(0deg) !important;
}
.mod_header .menuclose {
  background-color: #ffffff !important;
}
.mod_header .menuclose .closebtn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  color: #0c559f !important;
  background-color: #EEEFEF !important;
  text-align: center !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  padding: 0 26px !important;
  cursor: pointer !important;
}
@media print, screen and (min-width: 767px) {
  .mod_header .menuclose .closebtn { /* PC */
    font-size: 20px !important;
    height: 70px !important;
  }
}
@media screen and (max-width: 767px) {
  .mod_header .menuclose .closebtn { /* SP */
    font-size: 16px !important;
    height: 60px !important;
  }
}
.mod_header .menuclose .closebtn:hover {
  opacity: 0.7 !important;
}
.mod_header .menuclose .closebtn span::before {
  content: "✕" !important;
  margin-right: 5px !important;
}

/* メニューが開いた時 */
.spmenuopen .mod_header .menubtn .open .bar {
  width: 0 !important;
}
.spmenuopen .mod_header .menubtn .close .bar {
  width: 24px !important;
}
.spmenuopen .mod_header .overlay {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.47) !important;
  z-index: 999 !important;
}
@media print, screen and (min-width: 767px) {
  .spmenuopen .mod_header .overlay { /* PC */
    margin-top: 80px !important;
  }
}
@media screen and (max-width: 767px) {
  .spmenuopen .mod_header .overlay { /* SP */
    margin-top: 60px !important;
  }
}
.spmenuopen .mod_header .drawer {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* body全体のpadding-topも確保 */
@media print, screen and (min-width: 767px) {
  body { /* PC */
    padding-top: 80px !important;
  }
}
@media screen and (max-width: 767px) {
  body { /* SP */
    padding-top: 60px !important;
  }
}