@charset "UTF-8";
@font-face {
  font-family: "Noto Sans Japanese";
  font-weight: normal;
  src: url(../fonts/NotoSansJP-Regular.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans Japanese";
  font-weight: bold;
  src: url(../fonts/NotoSansJP-Bold.woff2) format("woff2");
  font-display: swap;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  line-height: 1.5;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: unset;
  }
}
:focus:not(:focus-visible) {
  outline: 0;
}

/* HTML
----------------------------------------------------- */
html {
  height: 100%;
  width: 100%;
  scrollbar-gutter: stable;
}
@media screen and (min-width: 768px) {
  html.is-fontsize-l {
    font-size: 18px;
  }
}
@media screen and (min-width: 1400px) {
  html {
    font-size: 18px;
  }
  html.is-fontsize-l {
    font-size: 20px;
  }
}
/* Body
----------------------------------------------------- */
body {
  position: relative;
  max-width: 100%;
  min-height: 100%;
  margin: 0;
  font-family: "Noto Sans Japanese", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #2d2d2d;
  text-size-adjust: 100%;
  text-rendering: optimizespeed;
  -webkit-tap-highlight-color: transparent;
}

/* Anchor
----------------------------------------------------- */
a {
  color: #093f86;
}

a:hover {
  color: #0d6efd;
  text-decoration: none;
}
a:hover img {
  opacity: 0.8;
}

/* Bootstrap Reset
----------------------------------------------------- */
.row-0.row {
  margin-right: 0;
  margin-left: 0;
}

.row-0.row > * {
  padding-right: 0;
  padding-left: 0;
}

.row-4.row {
  margin-right: -2px;
  margin-left: -2px;
}

.row-4.row > * {
  padding-right: 2px;
  padding-left: 2px;
}

.row-8.row {
  margin-right: -4px;
  margin-left: -4px;
}

.row-8.row > * {
  padding-right: 4px;
  padding-left: 4px;
}

.page-header {
  border-bottom: 1px solid #ccc;
}

.page-header-inner {
  display: flex;
  align-items: center;
  padding-left: 12px;
}

@media (min-width: 768px) {
  .page-header-inner {
    padding-top: 8px;
    padding-right: 12px;
    padding-bottom: 8px;
    margin: 0 auto;
  }
}
@media (min-width: 1400px) {
  .page-header-inner {
    max-width: 1320px;
    padding-right: 0;
    padding-left: 0;
  }
}
/* .header-logo ヘッダーロゴ表示領域
---------------------------------------------- */
.header-logo {
  margin-right: auto;
  text-align: left;
}

.header-logo a {
  display: block;
  width: 180px;
  height: 0;
  padding-top: 30px;
  overflow: hidden;
  background-image: url(../images/logo_header.svg);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 180px 30px;
}

/* .logo ヘッダー/ナビゲーション指定 */
.header-logo:hover {
  opacity: 0.75;
}

@media (min-width: 992px) {
  .header-logo a {
    width: 300px;
    height: 0;
    padding-top: 50px;
    margin-bottom: 0;
    background-size: 300px 50px;
  }
}
/* .header-sns SNSアイコン表示領域
---------------------------------------------- */
.header-sns {
  display: none;
  height: 100%;
}

.list-sns {
  display: flex;
  align-items: center;
  padding: 8px 0;
  margin-bottom: 0;
  list-style: none;
}

.list-sns li {
  flex: 1 0 0;
  padding: 4px;
  text-align: center;
}

.list-sns li:hover {
  opacity: 0.75;
}

@media (min-width: 768px) {
  .header-sns {
    display: block;
  }
  .list-sns {
    padding: 0;
  }
}
/* .header-changefont 文字サイズ
---------------------------------------------- */
.header-changefont {
  display: none;
}

@media (min-width: 768px) {
  .header-changefont {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 4px;
    margin: 0 16px;
    font-size: 14px;
    background-color: #efefef;
    border-top-left-radius: 16px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 16px;
  }
  .title-changefont {
    padding-right: 8px;
    padding-left: 4px;
  }
  .btn-fontsize {
    padding: 0 8px;
    border: 0 none;
  }
  .font-l, .is-fontsize-l .font-m {
    font-weight: normal;
    color: #fff;
    background-color: #636363;
  }
  .font-l:hover, .is-fontsize-l .font-m:hover {
    background-color: #2d2d2d;
  }
  .font-m, .is-fontsize-l .font-l {
    font-weight: bold;
    color: #2d2d2d;
    background-color: #ffe100;
  }
  .font-m:hover, .is-fontsize-l .font-l:hover {
    background-color: #ffe100;
  }
}

/* main
----------------------------------------------------- */
main {
  margin-bottom: 3rem;
}

main img {
  max-width: 100%;
  height: auto;
}

/* .section-bundle
----------------------------------------------------- */
.section-bundle {
  margin-bottom: 5rem;
}

/* .section-footer
----------------------------------------------------- */
/* .sns-button　SNSボタン */
.section-footer {
  margin-top: 5rem;
}

.back-button-area {
  width: 100%;
  margin-bottom: 1rem;
}

/* .sns-button　SNSボタン */
.sns-button-area {
  display: flex;
  width: 100%;
  padding-left: 0;
  list-style: none;
  justify-content: flex-end;
  align-items: center;
}

/*
.sns-button-area li {
  width: calc(50% - 4px);
}
*/

.sns-button-area li:first-child {
  margin-right: 1.2rem;
  font-weight:bold;
}

@media (min-width: 768px) {
  .section-footer {
    display: flex;
  }
  .sns-button-area {
    width: auto;
    margin-left: auto;
  }
}
/* .breadcrumbs　パンくずリスト
----------------------------------------------------- */
.breadcrumbs-area {
  padding: 0.5rem 0;
  overflow-x: auto;
  background-color: #f0d7a4;
}

.breadcrumbs {
  display: flex;
  padding-left: 0;
  margin: 8px 0;
  line-height: 1;
  letter-spacing: 0;
  list-style: none;
}
.breadcrumbs li {
  /* display: inline-block; */
  flex: 0 0 auto;
}
.breadcrumbs li::before {
  margin-right: 0.25rem;
  content: "＞";
}
.breadcrumbs li:first-child::before {
  content: "";
}
.breadcrumbs a {
  color: #2d2d2d;
}



/* .footer-area01
----------------------------------------------------- */
.footer-area01 {
  position: relative;
}

/* テレフォンサービス */
.box-telephone {
  padding: 16px;
  border-radius: 4px;
}

.title-box-telephone {
  font-size: 24px;
}

.title-telephone {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 16px;
  color: #e42c1f;
}

@media screen and (max-width: 479px) {
  .box-telephone .table00, .box-telephone .table00 tbody, .box-telephone .table00 tr, .box-telephone .table00 th, .box-telephone .table00 td {
    display: block;
  }
  .box-telephone .table00 th {
    padding-bottom: 0;
  }
  .box-telephone .table00 th, .box-telephone .table00 td {
    padding-top: 0;
  }
  .box-telephone .text-right {
    text-align: left;
  }
}
/* .footer-area02
----------------------------------------------------- */
.footer-area02 {
  color: #000;
  background-color: #f1d7a1;
}

.footer-area02-navi {
  padding-left: 0;
  list-style: none;
}
.footer-area02-navi li {
  display: block;
  margin-bottom: 8px;
}
.footer-area02-navi a {
  color: #000;
}

@media (min-width: 768px) {
  .footer-area02-navi li {
    display: inline-block;
    margin-bottom: 0;
  }
  .footer-area02-navi li::before {
    content: "｜";
  }
  .footer-area02-navi li:last-child::after {
    content: "｜";
  }
}
/* フッターバナー領域
----------------------------------------------------- */
.footer-banner-area {
  text-align: center;
  border-top: 2px solid #fff;
}

.footer-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 0 0;
  margin: 0 auto;
  list-style: none;
}

.footer-banner li {
  margin-bottom: 16px;
}

footer {
  padding-top: 32px;
  font-size: 14px;
  background-color: #ffeba5;
}

@media (min-width: 768px) {
  .footer-banner {
    flex-direction: row;
  }
  .footer-banner li {
    max-width: 33.3333%;
    padding-right: 8px;
  }
  .footer-banner li:last-child {
    padding-right: 0;
  }
}
/* ページトップへ
----------------------------------------------------- */
#pagetop {
  position: fixed;
  bottom: 50px;
  left: 50%;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  text-align: center;
  cursor: pointer;
  background-color: rgba(60, 60, 60, 0.8);
  border-radius: 50%;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  transition: 0.5s all ease-in-out;
  transform: translateX(-50%);
}
#pagetop:hover {
  background-color: rgba(60, 60, 60, 0.9);
}
#pagetop:hover img {
  margin-top: -8px;
}

/* page-title
----------------------------------------------------- */
.page-title {
  position: relative;
  margin-top: 140px;
  padding: 3rem 0;
  margin-bottom: 0rem;
  line-height: 1.5;
  text-align: center;
/*
  background-image: url(../images/bg_pagetitle.jpg);
*/
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

@media (min-width: 768px) {
  .page-title {
    margin-top: 140px;
  }
}
@media (min-width: 992px) {
  .page-title {
    margin-top: 0px;
    top:50px;
    margin-bottom: 5rem;
    font-size: 2.5rem;
  }
}
@media (min-width: 1025px) {
  .page-title {
    top:65px;
  }
}
.title-area{
  position: relative;
}
/*
.page-title::after {
  position: absolute;
  right: 15%;
  bottom: -50px;
  width: 160px;
  height: 160px;
  content: "";
  z-index: 2;
  background-image: url(../images/logo_gradation.svg);
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: contain;
}


@media screen and (max-width: 991px){
  .page-title::after {
      right: 8%;
      bottom: -40px;
      width: 120px;
      height: 120px;
  }
}

@media screen and (max-width: 767px) {
  .page-title::after {
      right: 5%;
      width: 100px;
      height: 100px;
  }
}
*/

/* section-title
----------------------------------------------------- */
.section-title {
  position: relative;
  padding: 0 0 1rem 1.25rem;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: bold;
}
.section-title::before {
  position: absolute;
  top: 0.25rem;
  left: 0;
  display: block;
  width: 0.5rem;
  height: 1.5rem;
  content: "";
  background-image: linear-gradient(-45deg, #f4d923 0%, #e5301e 72%, #e5301e 100%);
}

@media (min-width: 992px) {
  .section-title {
    font-size: 2rem;
  }
  .section-title::before {
    top: 0.8rem;
    height: 2rem;
  }
}
/* title01
----------------------------------------------------- */
.title01 {
  position: relative;
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  margin: 1.25rem 0 1rem;
  background-color: #f6f6f6;
}
.title01::before {
  position: absolute;
  top: 50%;
  left: -0.5rem;
  display: block;
  width: 1.5rem;
  height: 2px;
  content: "";
  background-image: linear-gradient(-45deg, #f4d923 0%, #e5301e 72%, #e5301e 100%);
  transform: translateY(-50%);
}

/* title02
----------------------------------------------------- */
.title02 {
  padding: 0.5rem 1rem 1rem;
  margin: 0 0 1rem;
  font-weight: bold;
  border-bottom: #e8e8e8 solid 2px;
}

/* title03
----------------------------------------------------- */
.title03 {
  margin-bottom: 0.75em;
}
.title03::before {
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-right: 0.5em;
  vertical-align: middle;
  content: "";
  background-image: linear-gradient(-45deg, #f4d923 0%, #f90 72%, #f90 100%);
}

/* table
----------------------------------------------------------- */
/* table00 */
.table00 {
  width: 100%;
  margin: 0;
}

.table00 th, .table00 td {
  padding: 4px 8px;
}

/* table01 */
.table01 {
  width: 100%;
}

.table01 th {
  padding: 0.5rem;
  font-weight: bold;
  border: solid 1px #ccc;
}

.table01 td {
  padding: 0.5rem;
  border: solid 1px #ccc;
}

/* table02 */
.table02 {
  width: 100%;
  border-bottom: solid 1px #ccc;
}

.table02 th {
  padding: 0.5rem;
  font-weight: bold;
  background-color: #ffe100;
  border-top: solid 1px #ccc;
}

.table02 td {
  padding: 0.5rem;
  border-top: solid 1px #ccc;
}

/* table03 */
.table03 {
  width: 100%;
  border: solid 1px #ccc;
}

.table03 th, .table03 td {
  padding: 0.5rem;
}

/* .btn-back 一覧にもどるボタン
--------------------------------------------------------- */
a.btn-back {
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 0 0 0 32px;
  font-weight: bold;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
  vertical-align: middle;
  background-color: #636363;
  border-radius: 2px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  transition: 0.5s all ease-in-out;
}
a.btn-back:hover {
  top: 2px;
}

a.btn-back::before {
  position: absolute;
  top: 50%;
  left: 16px;
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  content: "";
  transform: rotate(-45deg);
}

/* .btn-sns SNSシェアボタン
--------------------------------------------------------- */
a.btn-sns {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 60px;
  padding: 0.2rem 0.35rem;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  border-radius: 2px;
  /*box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);*/
  transition: 0.5s all ease-in-out;
}

a.btn-sns:hover {
  top: 2px;
}

/*
.btn-sns.twitter {
  background-color: #000;
}

.btn-sns.line {
  background-color: #06c755;
}
*/
.btn-sns.twitter span::before,
.btn-sns.line span::before {
  display: inline-block;
  width: 50px;
  height: 50px;
  /*margin-right: 0.5rem;*/
  vertical-align: middle;
  content: "";
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 50px 50px;
}

.btn-sns.twitter span::before {
  background-image: url(../images/icon/icon_x.png);
}

.btn-sns.line span::before {
  background-image: url(../images/icon_line.svg);
}

@media (min-width: 768px) {
  a.btn-back {
    width: 10rem;
  }
  /*
  a.btn-sns {
    width: 8rem;
  }
    */
}
/* .btn-keirinjp KEIRIN.JPリンクボタン
--------------------------------------------------------- */
.btn-keirinjp, a.btn-keirinjp {
  position: relative;
  display: block;
  width: 100%;
  padding: 1rem 0.25rem;
  color: #fff;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  background-color: #2d2d2d;
  border-radius: 2px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  transition: 0.5s all ease-in-out;
}
.btn-keirinjp span::before, a.btn-keirinjp span::before {
  display: inline-block;
  width: 24px;
  height: 16px;
  margin-right: 8px;
  vertical-align: middle;
  content: "";
  background-image: url(../images/icon_keirinjp_blue.svg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 22.4px 16px;
}
.btn-keirinjp:hover, a.btn-keirinjp:hover {
  top: 2px;
  background-color: #2d2d2d;
}

/* .btn-primary,a.btn-primary　共通：黒ボタン
--------------------------------------------------------- */
.btn-primary, a.btn-primary {
  position: relative;
  display: block;
  padding: 1rem 0.25rem;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #3c3c3c;
  border-radius: 2px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}
.btn-primary:hover, a.btn-primary:hover {
  top: 2px;
  background-color: #2d2d2d;
}

/* .btn-white,a.btn-white 角丸白ボタン
--------------------------------------------------------- */
.btn-white, a.btn-white {
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  color: #e42c1f;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-out;
}

.btn-white:hover, .btn-white:focus {
  top: 2px;
  color: #fff;
  background-color: #e42c1f;
}

/* .btn-gradation
--------------------------------------------------------- */
.btn-gradation, a.btn-gradation {
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 1rem 0.75rem;
  color: #fff;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  background-image: linear-gradient(-45deg, #f4d923 0%, #e5301e 72%, #e5301e 100%);
  border-radius: 9999px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
  transition: 0.5s all ease-in-out;
}

.btn-gradation:hover, .btn-gradation:focus {
  top: 2px;
  background-image: linear-gradient(-135deg, #f4d923 0%, #e5301e 72%, #e5301e 100%);
}

/* .list-inline 横並びリスト
----------------------------------------------------------- */
.list-inline li {
  display: inline-block;
  padding-left: 0;
  margin-right: 16px;
  list-style: none;
}

/* .list-button
----------------------------------------------------------- */
.list-button {
  display: flex;
  padding-left: 0;
  margin-right: -4px;
  margin-left: -4px;
  list-style: none;
}

.list-button li {
  flex: 1 0 0%;
  padding-right: 4px;
  padding-left: 4px;
  margin-bottom: 0.5rem;
}

.list-button a {
  position: relative;
  display: block;
  width: 100%;
  padding: 4px 8px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  background-color: #3c3c3c;
  border-radius: 2px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}

.list-button a:hover, .list-button a:focus {
  top: 2px;
  color: #fff;
  background-color: #2d2d2d;
}

/* .list-arrow, .list-arrow-inline 矢印アイコン付きリスト
----------------------------------------------------------- */
.list-arrow, .list-arrow-inline {
  padding-left: 0;
  list-style: none;
}
.list-arrow li, .list-arrow-inline li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 0.5rem;
}
.list-arrow li::before, .list-arrow-inline li::before {
  position: absolute;
  top: 1rem;
  left: 0;
  display: block;
  width: 8px;
  height: 12px;
  margin-top: -6px;
  content: "";
  background: url(../images/icon_arrow.svg) center left/8px 12px no-repeat;
}

/* 矢印アイコン付き横並び指定 */
.list-arrow-inline li {
  display: inline-block;
  margin-right: 16px;
}
.list-arrow-inline li:last-child {
  margin-right: 0;
}

/* .list-square ■マーク付きリスト
----------------------------------------------------------- */
.list-square {
  padding-left: 0;
  list-style: none;
}
.list-square li {
  margin-bottom: 0.5rem;
}
.list-square li::before {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.5rem;
  vertical-align: middle;
  content: "";
  background-image: linear-gradient(-45deg, #f4d923 0%, #f90 72%, #f90 100%);
}

/* .list-number 円形ナンバーマーク付きリスト（<ol>専用)
----------------------------------------------------------- */
.list-number {
  position: relative;
  padding-left: 0;
  list-style: none;
  counter-reset: li;
}

.list-number li {
  position: relative;
  padding: 0;
  margin: 12px 20px 0 24px;
  line-height: 1.5;
}

.list-number > li::before {
  position: absolute;
  top: -1px;
  left: -34px;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  font-size: 14px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  content: counter(li) "";
  counter-increment: li;
  background: #e42c1f;
  border-radius: 100%;
}

/* スマホ設定 */
@media screen and (max-width: 575px) {
  .list-number {
    padding: 0 10px 0 20px;
    font-size: 14px;
  }
  .list-number li {
    padding: 0;
    margin: 6px 20px 0 8px;
  }
  .list-number > li::before {
    top: 0;
    left: -30px;
    width: 20px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
  }
}
/* 年度対応リスト
----------------------------------------------------------- */
.list-nendo {
  padding: 1rem;
  list-style: none;
  background-color: #f6f6f6;
  border-radius: 4px;
}
.list-nendo li {
  position: relative;
  display: inline-block;
  padding-left: 16px;
  margin-right: 16px;
  margin-bottom: 0.5rem;
}
.list-nendo li::before {
  position: absolute;
  top: 1rem;
  left: 0;
  display: block;
  width: 8px;
  height: 12px;
  margin-top: -6px;
  content: "";
  background: url(../images/icon_arrow.svg) center left/8px 12px no-repeat;
}
.list-nendo li:last-child {
  margin-left: 0;
}

@media screen and (min-width: 768px) {
  .list-nendo {
    padding: 1rem 2rem;
  }
}
/* クラス指定なしリスト
----------------------------------------------------------- */
main ul:not([class]) {
  padding-left: 0;
  list-style-type: none;
}

main ul:not([class]) li {
  position: relative;
  padding-left: 1.25rem;
}

main ul:not([class]) li::before {
  display: inline-block;
  margin-right: 0.5rem;
  margin-left: -1.25rem;
  font-size: 0.75rem;
  color: #f90;
  content: "〇";
}

/* Font Color
----------------------------------------------------- */
.text-black {
  color: #000;
}

.text-white {
  color: #fff;
}

.text-red {
  color: #e42c1f;
}

.text-yellow {
  color: #ffe100;
}

.text-accent {
  color: #f90;
}

/* Font size
----------------------------------------------------- */
.text-xlarge {
  font-size: 2rem !important;
}

.text-large {
  font-size: 1.5rem !important;
}

.text-default {
  font-size: 1rem !important;
}

.text-small {
  font-size: 0.875rem !important;
}

.text-xsmall {
  font-size: 0.75rem !important;
}

.text-12px {
  font-size: 12px !important;
}

/* bold
----------------------------------------------------- */
.bold {
  font-weight: bold;
}

/* Text Decoration
----------------------------------------------------- */
.text-introductory {
  margin-bottom: 3rem;
}

@media screen and (min-width: 1400px) {
  .text-introductory {
    margin-bottom: 4rem;
  }
}
.text-underline {
  background: linear-gradient(transparent 90%, #ffe600 0%) repeat scroll 0 0;
}

.text-shadow {
  text-shadow: 1px 1px 2px #707070;
}

.text-update {
  font-size: 0.875rem;
  text-align: right;
}

.text-attention {
  color: #e42c1f;
}
.text-attention::before {
  margin-right: 0.25rem;
  content: "※";
}

.tips {
  color: #f90;
}

/* align
--------------------------------------------------------- */
.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

/* background
--------------------------------------------------------- */
.bg-theme02 {
  background-color: #ffe100;
}

.bg-light {
  background-color: #f6f6f6;
}

.badge-news {
  display: inline-block;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 1.2rem;
  color: #fff;
  vertical-align: middle;
  background-color: #e42c1f;
  border-radius: 0.6rem;
}

.box-round {
  padding: 1rem;
  background-color: #fff;
  border-radius: 4px;
}

.box-linklist {
  padding: 1rem;
  background-color: #f6f6f6;
  border-radius: 4px;
}

@media screen and (min-width: 768px) {
  .box-linklist {
    padding: 1rem 2rem;
  }
}
/* スマホサイズ専用表示対応 */
@media screen and (min-width: 576px) {
  .for-sp {
    display: none;
  }
}
/* 動画レスポンシブWeb対応 */
.movie-wrap {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  margin-bottom: 5%;
  overflow: hidden;
}

.movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* イメージ画像用ボーダー指定 */
.img-border {
  border: solid 1px #e8e8e8;
}


/* ==============================================================
2026.03.23 リニューアル追加
============================================================== */
/* ==============================================================
グローバルメニュー
============================================================== */
.head-bar {
  position: absolute;
  top:0;
  right:0;
  display: flex;
  width: 100%;
  height: 65px;
}
.head-bar.is-open {
  background-color: #ffffff;
  position: fixed;
}
/* フローティング
------------------------------------------------------------ */
.float-menu {
  position: fixed;
  top:0;
  right:0;
  display: flex;
  height:65px;
  width:calc(100% - (65px * 0.85 / 55 * 450) - 20px - 10px);
}
.float-menu {
  width:calc(100% - (65px * 0.85 / 55 * 450) - 20px - 10px);
}
.message-area {
  position: fixed;
}
/* 縦表示
------------------------------------------------------------ */
.menu-area {
  position: absolute;
  top:0;
  right:0;
  margin-top: calc(65px * 0.15 / 2);
  width:65px;
  margin-right: 20px;
  background-color: rgba(249, 255, 255, 0.8);
  border-radius: 10px;
  box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, .5);
}
/* 横表示
------------------------------------------------------------ */
.menu-area.is-open {
  box-shadow: none;
  position: absolute;
  top:0;
  right:0;
  margin-top: calc((65px * 0.15 / 2) + (65px * 0.15 / 2));
  width:100%;
  height: calc(65px * 0.85 - (65px * 0.15 / 2));
  margin-right: calc(20px + ((65px - (65px * 0.85 - (65px * 0.15 / 2))) /2));
  border-radius: 0px;
  background-color: rgba(249, 255, 255, 0);
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: calc(65px * 0.2 / 2);
}
/* トグルアイコン
------------------------------------------------------------ */
button.navbar-toggler {
  width: calc(65px * 0.85 - (65px * 0.15 / 2));
  aspect-ratio: 1/1;
  margin-left: calc((65px - (65px * 0.85 - (65px * 0.15 / 2))) /2);
  margin-top: calc(65px * 0.15 / 2);
  background-color: #643232;
  position: relative;
  border: none;
  cursor: pointer;
  border-radius: 8px;
}

.menu-area.is-open button.navbar-toggler {
  margin-top: 0px;
  margin-left:10%;
}

.navbar-toggler .bar {
  position: absolute;
  left: 50%;
  width: 60%;
  height: 3px;
  background: #ffffff;
  transform: translateX(-50%);
  transition: 0.4s;
}

.navbar-toggler .bar:nth-child(1) {
  top: 50%;
  transform: translate(-50%, -10px);
}

.navbar-toggler .bar:nth-child(2) {
  top: 50%;
  transform: translate(-50%, -50%);
}

.navbar-toggler .bar:nth-child(3) {
  top: 50%;
  transform: translate(-50%, 7px);
}

.navbar-toggler:focus,
.navbar-toggler:focus-visible {
outline: none;
box-shadow: none;
}

.navbar-toggler.is-active .bar:nth-child(1) {
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}

.navbar-toggler.is-active .bar:nth-child(2) {
top: 50%;
transform: translate(-50%, -50%);
opacity: 0;
}

.navbar-toggler.is-active .bar:nth-child(3) {
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}

/* グローバルメニュー中身
------------------------------------------------------------ */
#mainNav {
  display: none;
}
#mainNav.is-open {
  display: block;
}
body.is-fixed {
  width: 100%;
  overflow: hidden;
}

.menu-icon {
  width: calc(65px * 0.8);
  aspect-ratio: 1/1;
  margin: calc(65px * 0.15 / 2) calc(65px * 0.2 / 2);
}

#mainNav {
  width:100%;
  height:calc(100vh - 65px);
  overflow-x: hidden;
  position: fixed;
  top: 65px;
  left: 0;
  z-index: 9999999;
  background-color: #38724a;
  color: #ffffff;
}

#mainNav h3 {
  color: #ffffff!important;
  font-size: 1.5rem;
}

#mainNav li {
  list-style: none;
}

#mainNav li a {
  color: #ffffff;
  text-decoration: none;
}

#mainNav li a:hover {
  text-decoration: underline;
}

#mainNav ul.twoline {
  display: flex;
  flex-wrap: wrap;
}
#mainNav ul.twoline li {
  flex: 0 0 50%;
}

#mainNav h3::before {
  content: "";                
  display: inline-block;      
  width: 1.4em;
  height: 1em;
  vertical-align: middle;
  background-color: white;
}

#mainNav .racers-info h3::before {
  -webkit-mask: url(../images/icon_navi_athletes.svg) no-repeat center / contain;
  mask: url(../images/icon_navi_athletes.svg) no-repeat center / contain;
}

#mainNav .race-info h3::before {
  -webkit-mask: url(../images/icon_navi_races.svg) no-repeat center / contain;
  mask: url(../images/icon_navi_races.svg) no-repeat center / contain;
}

#mainNav .facility-info h3::before {
  -webkit-mask: url(../images/icon_navi_facility.svg) no-repeat center / contain;
  mask: url(../images/icon_navi_facility.svg) no-repeat center / contain;
}

#mainNav .news-info h3::before {
  -webkit-mask: url(../images/icon_navi_info.svg) no-repeat center / contain;
  mask: url(../images/icon_navi_info.svg) no-repeat center / contain;
}

#mainNav .camp-info h3::before {
  -webkit-mask: url(../images/icon_navi_event.svg) no-repeat center / contain;
  mask: url(../images/icon_navi_event.svg) no-repeat center / contain;
}

#mainNav .autorace-info h3::before {
  background: url(../images/icon_autorace.svg) no-repeat center / contain;
}

#mainNav .race-info h3.character-room::before {
  -webkit-mask: none;
  mask: none;
  background: url(../images/icon_character_menu.png) no-repeat center / contain;
}

#mainNav ul {
  border-left-width: 5px;
  border-left-style: solid;
  padding-left: 5%;
}
.racers-info ul {
  border-left-color: #ea5317;
}
.race-info ul {
  border-left-color: #f5e458;
}
.facility-info ul {
  border-left-color: #49becf;
}
.news-info ul {
  border-left-color: #e2715e;
}
.camp-info ul {
  border-left-color: #e6c96f;
}
.autorace-info ul {
  border-left-color: #49becf;
}

#mainNav img {
  max-width: 100%;
  height: auto;
}
#mainNav div.container {
  padding-bottom: 3rem!important;
}
@media screen and (max-width: 1024px){
  #mainNav div.container {
    padding-bottom: 6rem!important;
  }
}
/* グローバルメニュー中身バナー部
------------------------------------------------------------ */
#mainNav .pickup-wrapper {
  position: relative;
}
#mainNav .swiper {
  height:100%;
}
#mainNav .swiper-slide {
  height:100%;
}
#mainNav .pickup-controls {
  width:100%;
  height:100%;
  position: absolute;
  top: 0;
}
#mainNav .swiper-button-next {
  border: none;
    color: transparent;
    cursor: pointer;
    width: 40px;
    aspect-ratio: 1 / 1;
    background-image: url(../images/btn_arrow_next.svg);
    background-position: right center;
    right:-24px;
}
#mainNav .swiper-button-prev {
  border: none;
    color: transparent;
    cursor: pointer;
    width: 40px;
    aspect-ratio: 1 / 1;
    background-image: url(../images/btn_arrow_prev.svg);
    background-position: right center;
    left:-24px;
}
#mainNav .swiper img {
  aspect-ratio: 265/82.81;
  width: 100%;
  object-fit: contain;
}  
#mainNav .swiper-pagination-bullet {
  background: #ffffff;
  opacity: 1;
  margin: 4px;
}
#mainNav .swiper-pagination {
  bottom:-1.5rem;
}
#mainNav .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #ff0000;
}

/* 重要なお知らせ
------------------------------------------------------------ */
.message-area {
  color: #e10024;
  margin-top: calc(65px * 0.15 / 2);
  margin-right: 10px;
  /*margin-left: calc((65px * 0.85 / 55 * 450) + 20px + 10px);*/
  background-color: rgba(255 255 255 / 95%);
  width: calc(100% - 65px - 20px - 10px - (65px * 0.85 / 55 * 450) - 20px - 10px);
  height: calc(65px * 0.85);
  border-radius: 10px;
  overflow: hidden;
  transition: height 0.3s ease;
  box-shadow: 0px 0px 2px 2px #e10024;
}

.message-area.is-open {
  height: calc((65px * 0.85)*5);
}

.info-important {
  width: 100%;
  height: 100%;
  display: flex;
}
.info-important h6 {
  width: 20%;
  height: calc(65px * 0.85);
  min-height: calc(65px * 0.85);
  max-height: calc(65px * 0.85);
  margin: 0;
  padding-left: 5px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
}
.info-important h6::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.3em;
  vertical-align: middle;
  background: url(../images/mark_!.png)
      no-repeat center / contain;
  filter: invert(12%) sepia(98%) saturate(7486%) hue-rotate(345deg) brightness(92%) contrast(109%);

}

.info-important #list-important{
  width: 70%;
  height: 100%;
  margin: 0px;
}
.info-important li.list-important {
  height: calc(65px * 0.85);
  min-height: calc(65px * 0.85);
  display: flex;
  padding:0px;
  margin: 0px;
  gap: 2%;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

.info-important li.list-important {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  gap: 8px;
}
.info-important li.list-important.is-multiline {
  align-items: flex-start;
}

#list-important {
  visibility: hidden;
}
#list-important.is-ready {
  visibility: visible;
  padding: 0;
}

.info-important li.list-important .date {
  white-space: nowrap;
  flex-shrink: 0;
  color: #000;
}

.info-important li.list-important a {
  flex: 1;
  min-width: 0;

  /* 2行制限 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
}

.info-important li.list-important a {
  color: #000;
}
.info-important li.list-important a:hover {
  text-decoration: underline;
}

.info-important li.list-important span {
  text-wrap: nowrap;
  font-weight: bold;
}

.info-important li.list-important span.badge-news {
  color: #ffffff;
}

#list-important .mark-info .date::after {
  display: none;
}

#list-important li::before {
  display: none;
}

.btn-important {
  position: relative;
  width: 10%;
  height: calc(65px * 0.85);
  min-height: calc(65px * 0.85);
  max-height: calc(65px * 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  cursor: pointer;
}

.btn-important::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  background-color: #ff6600;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.btn-important::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 4px;
  background-color: #fff;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.btn-important span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 22px;
  background-color: #fff;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  transform-origin: center;
  z-index: 2;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.message-area.is-open .btn-important span {
  transform: translate(-50%, -50%) rotate(90deg) scale(0);
  opacity: 0;
}

/* 別府競輪ロゴ
------------------------------------------------------------ */
.logo-area {
  width:100%;
  height:65px;
  display: flex;
  align-items: center;
}
.logo-area .logo-img {
  height:85%;
  aspect-ratio: 450/55;
  margin-left:20px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  display: flex;
  align-items: center;
}
.logo-area .logo-img img {
  height:85%;
  margin: 0 auto;
}

@media screen and (max-width: 1024px){
  .head-bar {
      /*position: fixed;*/
      width:100%;
      height:calc(50 + (65px * 0.15 / 2) + (50px * 0.15 / 2));
  }
  .logo-area {
      height:50px;
  }
  .logo-area .logo-img {
      width: 35vw;
      height: auto;
  }
  .float-menu {
      width: calc(100% - (50px * 0.85 / 55 * 450) - 20px - 10px);
      height: 50px;
  }
  .message-area {
      width: calc(100% - 65px - 20px - 10px - (50px * 0.85 / 55 * 450) - 20px - 10px);
      height: calc(50px * 0.85);
      margin-left: 10px;
      margin-top: calc(50px * 0.15 / 2);
  }
  .menu-area {
      width: 50px;
  }
  .info-important {
      font-size: 14px;
  }
  button.navbar-toggler {
      width: calc(50px * 0.85);
      height: calc(50px * 0.85);
      margin-left: calc(50px * 0.15 / 2);
      margin-top: calc(50px * 0.15 / 2);
  }
  .menu-area.is-open {
      height:50px;
      margin-right: calc(20px + (50px * 0.15 / 2));
      margin-top: calc((65px * 0.15 / 2) + (50px * 0.15 / 2));
      gap: calc(50px * 0.2 / 2);
      align-items: flex-start;
  }
  .menu-icon {
      width: calc(50px * 0.8);
  }
  .menu-icon {
      width: calc(50px * 0.8);
      margin: calc(50px * 0.15 / 2) calc(50px * 0.2 / 2);
  }
  .menu-area.is-open button.navbar-toggler {
      margin-top: 0px;
      margin-left: calc(50px * 0.15 / 2);
  }
  #mainNav {
      height: calc(100vh - 50px);
      top: calc(50 + (65px * 0.15 / 2) + (50px * 0.15 / 2));
  }
  .info-important h6 {
      height: calc(50px * 0.85);
      min-height: calc(50px * 0.85);
      max-height: calc(50px * 0.85);
  }
  .info-important li.list-important {
      height: calc(50px * 0.85);
      min-height: calc(50px * 0.85);
  }
  .btn-important {
      height: calc(50px * 0.85);
      min-height: calc(50px * 0.85);
      max-height: calc(50px * 0.85);
  }
}
@media screen and (max-width: 991px){
  .head-bar {
      position: fixed;
      width:100%;
      height:50px;
      background-color: #ffffff;
      box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, .5);
  }
  .first-view-5 a {
    z-index: 6;
  }
  .logo-area {
      height:50px;
  }
  .logo-area .logo-img {
      width: 180px;
      height: auto;
      background-color: transparent;
  }
  .logo-area .logo-img img {
      height:100%;
      max-width: 100%;
      margin: 0 auto;
  }
  .float-menu {
      height:50px;
      width:100%;
      position: absolute;
      top: 0px;
  }
  .is-open .float-menu {
      top:0;
  }
  .message-area {
      width:95%;
      height:75px;
      margin: 0 auto;
      margin-left: 2.5%;
      top: 55px;
  }
  .menu-area {
      top:0px;
      margin: 0;
      width: 120px;
      height:50px;
      background-color: transparent;
      box-shadow: none;
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
  }
  .menu-area.is-open {
      height:50px;
      margin-right:0;
      margin-top: 0;
      gap:0;
      align-items: center;
  }
  
  button.navbar-toggler {
      width: 50px;
      height: 50px;
      margin-top: 0;
      border-radius: 0px;
  }
  .menu-icon {
      width: calc(50px * 0.8);
  }
  .menu-area.is-open button.navbar-toggler {
      margin-top: 0px;
      margin-left: calc(50px * 0.15 / 2);
  }
  #mainNav {
      height: calc(100vh - 50px);
      top: 50px;
  }
  #mainNav ul {
      padding-left: 2%;
  }
  .pickup-list.is-slide > .col-6 {
      flex: 0 0 auto;
  }
  .pickup-list.is-slide {
      gap: 0.5%;
  }
  .info-important {
      flex-wrap: wrap;
  }
  .info-important h6 {
      width:100%;
      height:25px;
      min-height: 0px;
      max-height: 25px;
  }
  .info-important #list-important {
      width: 85%;
  }
  .info-important li.list-important {
      height: 50px;
      min-height: 0px;
      padding: 5px;
      margin: 0px;
      gap: 2%;
  }
  .btn-important {
      width: 15%;
      height: calc(25px * 0.85);
      min-height: calc(25px * 0.85);
      max-height: calc(25px * 0.85);
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      cursor: pointer;
  }
  .btn-important::after {
      width: 25px;
      height: 25px;
  }
  .info-important h6 {
      justify-content: center;
  }
  .btn-important span {
      width: 4px;
      height: 20px;
  }
  .btn-important::before {
      width: 20px;
      height: 4px;
  }
  @media screen and (max-width: 767px){
      .pickup-list.is-slide {
          gap: 1.5%;
      }
  }
}

/* ==============================================================
コピーライト
============================================================== */
.copyright-kumamine {
  height:18px;
  aspect-ratio: 125/21;
}
@media (min-width: 992px) {
  .copyright-kumamine {
    padding-left: 5px;
  }
}
/* ==============================================================
電話
============================================================== */
@media (min-width: 768px) {
  .tel-link {
    pointer-events: none;
    color: inherit;
    text-decoration: none;
    cursor: default;
  }
}

/* ==============================================================
共通
============================================================== */
.hidden {
  display: none;
}

.for-pc {
  display: block;
}
@media (max-width: 991px) {
  .for-pc {
      display: none;
  }
}

.h-fit {
  height:100%;
}
.w-fit {
  width:100%;
}
.first-view-5 {
  z-index:5;
}