/*Extra small None  <576px
Small sm  ≥576px
Medium  md  ≥768px
Large lg  ≥992px
Extra large xl  ≥1200px
Extra extra large xxl ≥1400px*/

@charset "UTF-8";
.pc-on{
	display: block;
}
@media (max-width: 767px) {
	.sp-off{
	display: none;
	}
}
@media (max-width: 991px) {
  .tb-off{
  display: none;
  }
}

.sp{display: none;}
@include common.sp{
    .sp{display: block;}
    .pc{display: none} 
}

.n-color{
	color:#08348b;
}
.n-color-bg{
  background:#08348b;
}

.n-primary{
  color: #007bff;
}
.n-primary:hover{
  color: #53a6ff;
}

.mw-60{
  max-width: 60%;
}
.mw-70{
  max-width: 70%;
}
.mw-80{
  max-width: 80%;
}
.mw-90{
  max-width: 90%;
}
.mw-100{
  max-width: 100%;
}

.vw-35{
  max-width: 35vw;
}
.vw-40{
  max-width: 40vw;
}
/*@media (min-width: 768px) {
  .table-responsive-off{
    width: 80%;
  }  
}
@media (min-width: 992px) {
  .table-responsive-off{
    width: 550px;
  }
}*/

/*
.sidebar .nav-link .sidebar-icon{
	color: #a2d2e5;
}*/

@media (min-width: 768px) {
  .list-table-min{
    width: 700px;
  } 
}
@media (min-width: 992px) {
  .list-table-min{
    width: 700px;
  } 
}

/* side-nav ---------------------------------------*/
.n-title{
  text-align: center;
}
.n-title img{
  margin-bottom: 10px;
}
div:has(.n-title){
  padding-top: 8px;
  padding-bottom: 4px;
}
@media (max-width: 991px) {
  .n-title{
  text-align: left;
  }
  .n-title img{
    margin-right: 1em;
  }
}

/* list-table ---------------------------------------*/
.card .table td, .card .table th{
	padding-left: 0.8rem;
	padding-right: 0.8rem;
}

.table td, .table th{
	font-size: 0.75rem;
	font-size: clamp(0.7rem, 1.2vw, 0.85rem);
}

.table-responsive {
  -webkit-overflow-scrolling: touch; /* iOS慣性スクロール対応 */
  overflow-x: auto;
  overflow-y: hidden;
}

/*table-design*/
.table-secondary{
  --bs-table-bg:  #ebeced;
  color: #ccc;
}
.table-secondary td{
  color: #999;

}
.table-secondary td a{
  color: #999;
  pointer-events: none;
  text-decoration: none !important;
}
.link-underline-primary {
  text-decoration: underline;
  color: var(--bs-primary);
}

.table-scroll-hint {
  position: relative;
  overflow-x: auto;
}

/* グラデーション表示 */
.scroll-gradient {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
  pointer-events: none;
/*  transition: opacity 0.3s ease;*/
  opacity: 0; /* 初期状態は非表示（後にJSで表示制御） */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #555;
}

.scroll-gradient p{
	position: absolute;
	top: -30px;
	right: 0;
	z-index: 100;
}
/*.scroll-textBox{
  height: 100px;
}*/

/*スクロールできます*/
.scroll-text{
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
#scroll-text {
  transition: opacity 0.3s ease;
  opacity: 0;
  z-index: 100;
/*  position: absolute;*/
  text-align: right;
  margin: 0;
  font-size: 0.8em;
  right:1em;
  width: 100px;
    background:rgba(0,0,0,0.4);
    color: #fff;
    text-align: center;
    font-size: 1em;

}
/*2秒後に文字消える*/
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#scroll-text.fade-out {
  animation: fadeOut 4s forwards;
}

/*指アイコンアニメーション*/
.scroll-icon {
  display: inline-block;
  animation: scrollWiggle 4s ease-in-out infinite;
  transform: translateX(0);
}
/* 控えめに左右へ揺れる */
@keyframes scrollWiggle {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-6px); /* 控えめな左移動 */
  }
}

.sp-n-logo{
  background: #fff;
}
.sp-n-logo img{
  padding: 5px;
  display: block;
}