@charset "UTF-8";

.hero {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.main {
  height:65vh;
  background-color:#01365e;
}

.hero {
  height:65vh;
}

.top-btn-box {
  position:absolute;
  top:-2vh;
}

.top-btn {
  border:3px solid #d4b572;
  background-color:#d4b572;
  text-align:center;
  font-size:0.8rem;
  color:#fff;
}

.top-btn-con {
  background: linear-gradient(90deg, rgb(22, 135, 237, 0), rgb(0, 0, 0, 0.3)), url(../img/common/bg-blue.jpg) center center;
  padding:2vw 1vw;
}

.top-btn-con p {
  margin-bottom:0;
  font-size:0.7vw;
}

.top-btn h2 {
  color:#d4b572;
  font-size:1.1vw;
}

a.top-btn-link:hover {
  text-decoration:none;
  opacity:0.9;
}

.top-btn-more {
  color:#01365e;
  font-weight:700;
}

.intro {
  position:relative;
}

.intro-box {
  background: linear-gradient(90deg, rgb(22, 135, 237, 0), rgb(0, 0, 0, 0.4)), url(../img/common/bg-blue.jpg) center center;
  background-size:cover;
  color:#fff;
  padding-top:12vw;
  padding-bottom:5vw;
}

.intro-main {
  color:#d4b572;
  font-size:1.5rem;
  font-weight:700;
  line-height:170%;
}

.top-con {
  margin-bottom:10rem;
}

.top-con-end {
  margin-bottom:5rem;
}

.top-con-main{
  background: linear-gradient(90deg, rgb(22, 135, 237, 0), rgb(0, 0, 0, 0.4)), url(../img/common/bg-blue.jpg) center center;
  background-size:cover;
  color:#fff;
}

.top-con-main h2 {
  color:#d4b572;
  font-weight:500;
  font-size:2rem;
  margin-bottom:1.5rem;
}

.top-con-main img {
  position:absolute;
  bottom:10px;
  box-shadow: #d4b572 10px 10px 0;  
}

.top-con-main img.right {
  right:0;
  margin-right:10px;
}

.top-con-main img.left {
  left:0;
  margin-left:10px;
}

.top-con-main img:hover {
  opacity:0.9;
}

.top-con-sub {
  background-color:#f2f2f2;
  border-bottom:1px solid #01365e;
}

.top-con-sub h3 {
  font-size:1.2rem;
  border-bottom:1px solid #ccc;
  padding-bottom:0.5rem;
  margin-bottom:0.5rem;
}

.top-con-sub p {
  font-size:0.9rem;
  line-height:150%;
}

.top-con-sub a {
  color:#000;
}

.top-con-sub a:hover {
  text-decoration:none;
  opacity:0.7;
}

.info-box {
  padding:5rem 0 4rem 0;
  font-family: 'Noto Sans JP', sans-serif;
}

.info-box a {
  color:#333;
}

.info-box h2 {
  font-weight:700;
  font-size:1rem;
  color:#000;
  margin-bottom:1.5rem;
}

.info-box dl {
  border-bottom:2px dotted #999;
  padding-bottom:0.5rem;
  margin-bottom:0.5rem;
  font-size:0.8rem;
}

.top-banner li{
  list-style:none;
  margin-bottom:1.3rem;
}

.top-banner li a:hover {
  opacity: 0.7;
}

.old-news-link a{
  color:#333;
  text-decoration:underline;
  font-size:0.7rem;
  margin-top:1.5rem;
}

.old-news-link a:hover {
  text-decoration:none;
  color:#666;
}

/*スクロールダウン全体の場所*/
.scrolldown2{
  /*描画位置※位置は適宜調整してください*/
  position:absolute;
  top:0;
  left:50%;
  }
  
  /*Scrollテキストの描写*/
  .scrolldown2 span{
  /*描画位置*/
  position: absolute;
  left:10px;
  bottom:10px;
  /*テキストの形状*/
  color: #f2f2f2;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  }
  
  /* 丸の描写 */
  .scrolldown2:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom:0;
  left:-4px;
  /*丸の形状*/
  width:10px;
  height:10px;
  border-radius: 50%;
  background:#f2f2f2;
  /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation:
  circlemove 1.6s ease-in-out infinite,
  cirlemovehide 1.6s ease-out infinite;
  }
  
  /*下からの距離が変化して丸の全体が上から下に動く*/
  @keyframes circlemove{
  0%{bottom:45px;}
  100%{bottom:-5px;}
  }
  
  /*上から下にかけて丸が透過→不透明→透過する*/
  @keyframes cirlemovehide{
  0%{opacity:0}
  50%{opacity:1;}
  80%{opacity:0.9;}
  100%{opacity:0;}
  }
  
  /* 線の描写 */
  .scrolldown2:after{
  content:"";
  /*描画位置*/
  position: absolute;
  bottom:0;
  left:0;
  /*線の形状*/
  width:2px;
  height: 50px;
  background:#f2f2f2;
  }

@media screen and (max-width: 768px) {

  .top-btn-con p {
    display:none;
  }

  .top-btn h2 {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
    font-size: 1rem;
  }

  .top-btn {
    border: 2px solid #d4b572;
    font-size: 0.6rem;
    line-height: 150%;
    color: #fff;
  }

  .top-btn-con {
    padding:0.5rem 0;
  }

  .intro-main {
    font-size:1rem;
    margin-bottom:2rem;
  }
  
  .intro-box {
    padding-top:18vw;
    font-size:0.8rem;
    padding-bottom:3rem;
  }

  .main {
    height:50vh;
    margin-top:10vw;
  }
  
  .hero {
    height:55vh;
  }

  .top-btn-box {
    top:2vh;
  }

  .info-box {
    padding:2rem 0;
  }

  .top-con {
    margin-bottom:0;
  }

  .top-con-main img {
    position:relative;
  }

  .top-con-main h2 {
    font-size:1.5rem;
    margin-top:1.5rem;
  }

  .top-con-main p {
    font-size:0.9rem;
    line-height:150%;
  }

  .top-con-main img.left,
  .top-con-main img.right {
    left:auto;
    right:auto;
    margin-right:0;
    margin-left:0;
  }

  .top-con-sub h3 {
    font-size:1rem;
  }

  .top-con-sub p {
    font-size:0.9rem;
  }

  .top-con-end {
    margin-bottom:2rem;
  }

  .sp-border {
    border-bottom:1px solid #ccc;
    padding-bottom:1rem;
  }

  .top-banner ul{
    margin-top:3rem;
    padding:0;
  }

  .top-banner li {
    margin-bottom:0.5rem;
  }

}

@media screen and (max-width: 599px) {

  .main {
    margin-top:16vw;
  }

  .top-con-main h2 {
    text-align:center;
  }

  .intro-box {
    padding-top:13rem;
  }
}