@charset "UTF-8";
    html, body {
      margin: 0;
      padding: 0;
      height: 100%; /* HTMLとbodyに高さを設定 */
    }

    body {
  background-image: url('../img/bg.jpg');
  background-size: cover; /* 背景を画面全体に表示 */
  background-position: center; /* 背景を中央揃え */
  background-attachment: fixed; /* 背景を固定 */
  margin: 0;
  padding: 0;
  min-height: 100vh;
    }
html {scroll-behavior: smooth;}
.jumbotron.jumbotron-fluid.c_kv {
/*  position: relative;*/
  min-height: 360px;
  margin-bottom: 0;
/*  overflow: hidden;*/
  background:url("../img/kv.png")no-repeat center center;
/*  background-size: 100%;*/
	background-color:#fff;
	padding: 1rem;
	border-radius:1rem;
	
}
a.linkk{
    /*コレ*/display: block;
    border: none;
		text-decoration: none;
}
.sc1{margin-top: 3rem}
/*
.sc1 h1 {
  font-size:1.4rem;
  padding: 0.4rem 1rem;
  color: #494949;
	border-left: solid 5px #78b9cd;
	margin-bottom: 1.6rem;
}
*/
.sc1 h1 {
  font-size:1.6rem;
  position: relative;
  padding: 0.25em 0;
}
.sc1 h1:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(78, 188, 234), transparent);
  background: linear-gradient(to right, rgb(78, 188, 234), transparent);
}

.tview{
background: #f0f0f0; padding:2rem;
}
.tview h3{
font-size:1.3rem;
margin-bottom: 2rem;
}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pci { display: block !important; }
.spi { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pci { display: none !important; }
    .spi { display: block !important; }
.jumbotron.jumbotron-fluid.c_kv {
  min-height: 212px!important;
	margin-bottom: 0;
  background-image:url("../img/jalc_kv_sp.png");}
	.sc1{margin-top: 1rem}
	h1.spi{font-size:1.4rem;}
	p.spi{color:white;}
}
@media (max-width: 575.98px) {
.tview{padding:1rem;}
.tview h3{margin-bottom: 0.5rem;}
.jumbotron.jumbotron-fluid.c_kv {
  background-size: 100%;
  background-image:url("../img/kv.png");
}
.jumbotron.jumbotron-fluid.c_kv {
  min-height: 120px!important;
}
.vm{
	position:relative;
	width:100%;
	height:0;
	padding-top:30%;
}
.vm iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
}

footer {
    margin:4rem 0 0 0;
    padding: 2rem 0;
    color: #e9ecef;
    background-color: #343a40;
}
.h1sub{font-size:1rem;font-weight: bold;}
.sha4 {
color:#004155 !important;
/*
text-shadow: 2px 2px 10px #cadded ,
-2px 2px 10px #cadded ,
2px -2px 10px #cadded ,
-2px -2px 10px #cadded;
*/}
.teal2{background-color:#2274B8;}
.snm{font-size:0.9rem;line-height:1.2rem;text-align:right;/*margin-right:2rem;*/}
.snm2{font-size:1rem;line-height:1.2rem;text-align:right;}
@media (max-width: 575.98px) {
.snm{text-align:left;margin:0;}
}
.st{font-size:0.8rem;line-height:1.3rem;}
.red{color:red;}
.modal-content h2{font-size:1.1rem;margin-bottom:1.4rem;line-height:1.6rem;}
.modal-content h3{font-size:1rem;}
h2.shicho{font-size:1.6rem;color:#333;}
.nav-link {padding: 1rem 1rem;}
.nav-pills .nav-link.active, .nav-pills .show > .navlink.active.pill1{width:20vw;font-weight:bold;text-align:center;font-size:1.6rem;}
.nav-pills .nav-link, .nav-pills .show > .navlink.pill1{width:20vw;font-weight:bold;text-align:center;font-size:1.6rem;}
.crp a.btn.btn-outline-success{padding: 1rem;font-weight:bold;border-width: thick;}
.scbig{font-size:1.2rem;}
@media (max-width: 575.98px) {
.nav-pills .nav-link.active, .nav-pills .show > .navlink.active.pill1{width:auto;font-size:1rem;}
.nav-pills .nav-link, .nav-pills .show > .navlink.pill1{width:auto;font-size:1rem;}
.scbig {font-size: 1.1rem;
}
}
.sc1 h1.ond{font-size:1.2rem; border-left:none;margin-bottom:0;padding-bottom:0.5rem;font-weight: bold;}
.kou{font-size:1rem;font-weight:normal;color:#666;}
p.tbstr{margin:0 0 2rem;padding:0;font-size:0.8rem;}
.green{color:limegreen;}
.lblue{color:#4682B4;}
p.indent-1 {
padding-left:3.3em;
text-indent:-3.3em;
}
.fs-sss{font-size:1rem; font-weight: normal !important;}
@media(max-width:575.98px){
.sc1 h1.ond{font-size:1rem;}
.fs-sss{font-size:0.86rem;}
}
/* ページTOPに戻る */
.pagetop{
    display: none;
    position: fixed;
    right: 15px;
    bottom: 60px;
}
.pagetop a{
    display: block;
    font-size: 0;
    width: 50px;
    height: 50px;
    text-align: center;
    background: #7db4e6;
    line-height: 50px;
}
.pagetop a i{
    font-size: 20px;
    color:#fff;
    line-height: 50px;
}
@media screen and (max-width: 767px) {
    br.br-pc {
        display: none !important;
    }
} /* max-width: 767px END */
 
@media screen and (min-width: 768px) {
    br.br-sp {
        display: none !important;
    }
} /* min-width: 768px END */

.disabled{pointer-events: none;opacity:0.2;}
.fs-sb{font-size:0.8rem;font-weight:bold;line-height:0.9rem !important;color:#17a2b8;}
.fs-s1{font-size:0.86rem;}

a.btn.disabled2{pointer-events: none;opacity:0.6;background-color:#ccc !important;font-size:1rem;font-weight: bold; }
a.btn.btn-grad {
background-image: linear-gradient(to right, #000046 0%, #1CB5E0  51%, #000046  100%);
font-size: 1.4rem;
font-weight: bold;
transition: 0.5s;
background-size: 200% auto;
color: white;            
box-shadow: 0 0 20px #eee;
border-radius: 10px;
display: block;
}

.btn-grad:hover {
background-position: right center; /* change the direction of the change here */
color: #fff;
text-decoration: none;
}

/*-----もだる表示-------------*/
/*infoエリアをはじめは非表示*/
#info{
	display: none;
}

/*モーダルの横幅を変更したい場合*/
.modaal-container{
    max-width: 600px;
}

/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}

.ograd{
/*  background-image: linear-gradient(90deg, rgba(65, 164, 253, 1), rgba(14, 244, 255, 1));*/
	background-image: linear-gradient(90deg, rgba(255, 22, 22, 1), rgba(5, 0, 255, 1));
}
.gyo tr th,.gyo tr td{padding:1rem 0 !important;word-wrap: break-word !important; white-space: normal;}
.gyop tr th,.gyop tr td{padding:1rem 0.5rem!important;word-wrap: break-word !important; white-space: normal;}


.btn-group.tbtn .btn {
    background: linear-gradient(to right, #77A1D3 0%, #79CBCA 51%, #77A1D3 100%);
    color: white;
    border: none;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    transition: background-position 0.5s, box-shadow 0.3s;
    background-size: 200% auto;
}

.btn-group.tbtn .btn:hover {
    background-position: right center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    color: white;
}

.btn-group.tbtn .btn:active {
    background: linear-gradient(to right, #4e54c8 0%, #8f94fb 51%, #4e54c8 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    color: white;
}
  .img-thumbnail {
    cursor: pointer; 
		width:150px;
  }
	  @media (min-width: 768px) { /* タブレット以上のサイズ */
    .carousel .carousel-item img {
      max-width: 75%; /* デスクトップでは画像幅を75%に */
      margin: 0 auto; /* 画像を中央揃え */
    }
  }

  @media (max-width: 767.98px) { /* スマートフォン */
    .carousel .carousel-item img {
      max-width: 100%; /* スマートフォンでは幅100% */
    }
  }
	

  /* モーダル全体の設定 */
  .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.8) !important; /* 背景色を黒にして透明度を0.8に */
  }
  .modal-content {
    background-color: transparent !important; /* モーダルの背景色を透明に */
    border: none !important; /* 枠線を削除 */
  }

  .modal-dialog {
    background-color: transparent !important; /* モーダルダイアログの背景を透明に */
    border: none !important; /* ダイアログの枠線を削除 */
  }

  .modal-body {
    padding: 0 !important; /* 画像周りの余白をなくす */
  }

  /* 矢印アイコンの色 */
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    background-color: #000 !important; /* 矢印の色を黒に */
    border-radius: 50% !important;     /* 丸くする */
    width: 3rem !important;            /* 矢印の大きさ */
    height: 3rem !important;           /* 矢印の大きさ */
  }

  /* 矢印のホバー時の色 */
  .carousel-control-prev-icon:hover,
  .carousel-control-next-icon:hover {
    background-color: #555 !important; /* ホバー時に矢印の色をグレーに */
  }

  /* ボタンの色変更 */
  .btn-primary {
    background-color: #007bff !important; /* ボタン背景色 */
    border-color: #007bff !important;     /* ボタンの枠線色 */
  }

  .btn-primary:hover {
    background-color: #0056b3 !important; /* ホバー時のボタン背景色 */
    border-color: #0056b3 !important;     /* ホバー時の枠線色 */
  }
	
/*	お知らせ*/
.inblock {
  max-width: 100%;
  display: inline-block;
}
.coll-item {
  color: #000;
  border-bottom: 1px solid #e7e7e7;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 30px;
  padding: 10px 20px 20px;
  font-size: 16px;
  display: flex;
}

.newsp-time {
  border-bottom: 1px none var(--light-gray);
  color: #000;
  align-items: center;
  min-width: 120px;
  margin-bottom: 0;
  margin-right: 0;
  padding-bottom: 0;
  padding-right: 20px;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  display: flex;
}

.newsp-link {
  color: #333;
  flex: 0 auto;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 300;
  text-decoration: none;
}

.newsp-link:hover {
  text-decoration: underline;
}
.divblock {
  border: 1px none var(--light-gray);
  background-color: #fff;
/*  margin-top: 40px;*/
  margin-bottom: 40px;
/*  padding: 40px 0 20px;*/
  overflow: visible;
}
  .linkblock {
    flex-direction: column;
    align-items: flex-start;
  }
.wdlist {
  margin: 0;
  padding: 0;
  list-style: none;
}
wditems{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.smltx8{font-size:80%;}
@media (max-width: 768px) {
  .coll-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .newsp-time {
    margin-bottom: 10px;
  }
}

.btntxts{font-size:0.85rem !important; font-weight: bold !important;}
.smltx7{margin-top:0.5rem;font-size:70%;line-height:120%;display:block;}