/* heder 半透明 */
.l-container {
  max-width: 100%;
  margin: 0 auto;
  padding-top: 80px;
  align-items: center;
}

.header {
  height: 80px;
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  transition: 0.5s;
}
.header.scroll {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.header.scroll li {
  color: #000;
}

.header__inner {
  height: inherit;
}

.header__nav {
  height: inherit;
}

.header__nav ul {
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
}
.header__nav ul li {
  color: #000;
  font-weight: bold;
  font-size: 18px;
}


/*  スクロールスパイ用padding */
html {
  scroll-padding-top: 90px;
}

/* custumimage_ビルボードの大きさ指定 */
.custom-image {
  height: 230px;
  object-fit: cover; /* 画像の比率を崩さず、領域に収める */
  width: 100%;
}
.custom-image-top {
  height: 680px;
  object-fit: cover;
  width: 100%;
}
/* typo */
body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.font-small {
  font-size: 0.9rem;
}
.font-small-ss {
  font-size: 0.75rem
}
/* nav-link */
.nav-link {
  color: #000;
}
.link-green {
  color: #95E1A1;
}
.navbar .navbar-nav .nav-link:hover {
  color: #cccccc;
}
.dropdown-item:hover {
  background-color: #95E1A1;
}
.canvas-link {
  color: #000;
}
.canvas-link:hover {
  color: #cccccc;
}
/* 縁取り文字 */
.fuchidori {
  color: #000;
  text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}

/* タイトル明朝体 */
.serif_min {
  font-family: "Expletus Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
/* success color */
.text-green {
  color:#95E1A1;
}
.bg-success-green {
  background-color: #95E1A1;
  color: #FFF;
}
.btn-outline-success {
  background-color: #FFF;
  color: #000;
  border: 1px #000;
}
.btn-outline-success:hover {
  background-color: #95E1A1;
  color: #FFF;
  border: 1px #96E1A1;
}
/* info color */
.btn-info {
  background-color: #9DE0FF;
  color: #FFF;
  border: none;
}
.link-wh-info {
  color: #9DE0FF;
}
.card-link_blue {
  color: #9DE0FF;
}
.bg-info-wh {
  background-color: #9DE0FF;
}
/* primary color */
.btn-primary {
  background-color: #769FFF;
  color: #FFF;
}
.bg-primary-blue {
  background-color: #769FFF;
}
.border-primary-b {
  color: #133168;
}
/* secondary color*/
.bg-secondary-grey {
  background-color: #D8D9DA;
}
.bg-secondary-wh-grey {
  background-color: #F1F1F1;
}


/* danger color */
.bg-danger-red {
  background-color: #FF7681;
}
/* card-bodyのborderなし変更 */
.card {
  border: none;
}
/* card-footer色変更 */
.card-footer {
  background-color: #FFF;
  border: none;
}

/* ページコンテンツ幅1000px内 */
.content-container {
  max-width: 1000px;
  margin: 0 auto;
}
/* 画像の幅を950pxに固定 */
.custom-img {
  width: 950px;
  max-width: 100%; /* 画面幅が狭い場合には幅を画面に収める */
  height: auto; /* 画像の比率を保持 */
  margin: 0 auto;
}

/* 背景グラデーション */
.bg_gradient {
    background: linear-gradient(to bottom, #ECF8FF, #FFFEF1, #FFFFFF);
  }

/* footerリンク　ホバー時animation */
.image-hover img {
    display: block;
    transition: opacity 0.3s ease;
}

.image-hover:hover img {
    opacity: 0.5; /* ホバー時の透明度 */
}

/* 破線border */
.border-hasen-yellow {
  padding: 0.5em 1em;
  margin: 2em 0;
  background: #fdfaf1;
  border: dashed 2px #FFD358;/*点線*/
}
.border-hasen-info {
  padding: 0.5em 1em;
  margin: 2em 0;
}

/* スクロールフワッとanimation */
.content {
  opacity: 0;
}
.content.inview {
  animation-name: fade-in;
  animation-duration: .5s;
  animation-timing-function: ease-in-out;
  animation-delay: .4s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes fade-in {
  0% {
    transform: translateY(40px);
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

/* lording anim */
/* styles.css */
#loading-screen {
  position: fixed; /* 固定位置にする */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 1.0); /* 背景の白い半透明 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* コンテンツの上に表示 */
  animation: fadeOut 2s forwards; /* フェードアウトのアニメーションを適用 */
  animation-delay: 1s; /* 1秒後にフェードアウトを開始 */
}

#loading-gif {
  width: 480px; /* GIFのサイズを指定 */
  height: 100px;
}

/* フェードアウトのアニメーション */
@keyframes fadeOut {
  from {
      opacity: 1;
  }
  to {
      opacity: 0;
      visibility: hidden;
  }
}

#contents {
  /* コンテンツは最初から表示されるが、ローディング画面の下に隠れる */
  position: relative;
  z-index: 1; /* ローディング画面より下に表示 */
}


/* primary color変更 */

/*------------------------------------
- COLOR primary
------------------------------------*/
.alert-primary {
  color: #010c10;
  background-color: #69c4ef;
  border-color: #56bded;
}

.alert-primary hr {
  border-top-color: #3fb4eb;
}

.alert-primary .alert-link {
  color: #000000;
}

.badge-primary {
  color: #fff;
  background-color: #0D5B80;
}

.badge-primary[href]:hover, .badge-primary[href]:focus {
  color: #fff;
  background-color: #083a51;
}

.bg-primary {
  background-color: #0D5B80 !important;
}

a.bg-primary:hover, a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
  background-color: #083a51 !important;
}

.border-primary {
  border-color: #0D5B80 !important;
}

.btn-primary {
  color: #fff;
  background-color: #0D5B80;
  border-color: #0D5B80;
}

.btn-primary:hover {
  color: #fff;
  background-color: #09435f;
  border-color: #083a51;
}

.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(13, 91, 128, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: #0D5B80;
  border-color: #0D5B80;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #083a51;
  border-color: #063043;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(13, 91, 128, 0.5);
}

.btn-outline-primary {
  color: #0D5B80;
  background-color: transparent;
  border-color: #0D5B80;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #0D5B80;
  border-color: #0D5B80;
}

.btn-outline-primary:focus, .btn-outline-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(13, 91, 128, 0.5);
}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
  color: #0D5B80;
  background-color: transparent;
}

.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: #0D5B80;
  border-color: #0D5B80;
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(13, 91, 128, 0.5);
}

.list-group-item-primary {
  color: #010c10;
  background-color: #56bded;
}

.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
  color: #010c10;
  background-color: #3fb4eb;
}

.list-group-item-primary.list-group-item-action.active {
  color: #fff;
  background-color: #010c10;
  border-color: #010c10;
}

.table-primary,
.table-primary > th,
.table-primary > td {
  background-color: #56bded;
}

.table-hover .table-primary:hover {
  background-color: #3fb4eb;
}

.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
  background-color: #3fb4eb;
}

.text-primary {
  color: #0D5B80 !important;
}

a.text-primary:hover, a.text-primary:focus {
  color: #083a51 !important;
}