@charset "UTF-8";
/* CSS Document */

/* 1. アニメーションの定義 */

/* その場で */
@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 上から */
@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 下から */
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 右から */
@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* 左から */
@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* ここまで */

*{
  box-sizing:border-box;
}

body{
  color:#222222;
  background: #fff;
  font-family: メイリオ, Meiryo, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size:16px;
  max-width: 1025px;
  margin-left:auto;
	margin-right:auto;
}

.base{
  width:90%;
  margin-left:auto;
	margin-right:auto;
}

.header{
  display: flex;
  background: linear-gradient(to top, rgba(80, 248, 223, 1), rgba(80, 248, 223, 0));
  position: sticky;
  top: 0;
  width:100%;
  height: 80px;
  z-index: 1000; /* 他の要素より前面に表示 */
}

.logo{
  display: flex;
  margin: auto 0px auto 5px;
  width: 30%;
  height: auto;
}

.menubar{
	width:70%;
	}
.menubar ul{
  display: flex;
  width: auto;
  list-style-type: none;
}

.menubar li{
  width: auto;
  height: 58px;
  display: flex;
  align-items:flex-end;
  line-height:1.5;
  text-align: center;
  margin-top: 12px;
  margin-left: auto;
  margin-right: auto;
}

.header a{
  font-size: clamp(12px, 1.6vw, 16px);
  color:#181818;
  text-decoration: none;
}

.sub_txt{
  font-size: clamp(10px, 1.4vw, 12px);
  letter-spacing: 1px; 
}

.over{
	transition: text-shadow 0.3s ease-in-out;
}

.over:hover{
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}


#keyvisual{
  border-width: 0px 1px 1px 1px;
  border-style: solid;
  border-color: rgb(200, 200, 200);
  border-radius: 0px 0px 10px 10px; /* 右下＆左下のみ丸くする */
  margin-bottom: 2%;
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

.header_main_box{
  font-family: "Noto Serif JP", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-weight:600;
  width: 100%;
  position: absolute;
  top:40%;
  left:50%;
  transform: translate(-50%,-50%);
  text-align: center;
  line-height:2;
}
.hdr_txt1{
  color:#ce0101;
  font-size: clamp(18px, 3.8vw, 40px);
  letter-spacing: 8px;
  display: inline;
  padding-bottom: 0px; /* 文字と線の間隔 */
  border-bottom: 3px solid red;
}

.hdr_txt2{
  font-size: clamp(10px, 1.8vw, 18px);
  letter-spacing: 0px;
}

.fadeDown {
  animation-name:fadeDownAnime;
  animation-duration:2s;
  animation-fill-mode:forwards;
  opacity:0;
}


.fadeUp {
  animation-name:fadeUpAnime;
  animation-duration:2s;
  animation-fill-mode:forwards;
  opacity:0;
}

.clear {
    clear: both;
}
/* ここから footer ------------------------------- */

.footer_box{
  display: grid;
  width: 100%;
	background: linear-gradient(to top, rgba(150, 150, 150, 0.8) 0%, rgba(150, 150, 150, 0.8) 25%, rgba(150, 150, 150, 0.6) 30%, rgba(150, 150, 150, 0.6) 65%, rgba(150, 150, 150, 0.8) 90%, rgba(150, 150, 150, 0.8) 100%);
	color:rgba(255, 255, 255, 1);
  text-align: center;
  padding-top: 2.5%;
  padding-bottom: 0.7%;
  margin-bottom: 2%;
  border-radius: 0px 0px 10px 10px; /* 右下＆左下のみ丸くする */
}

.footer_box a {
  font-size: clamp(13px, 1.4vw, 16px);
	color:rgba(255, 255, 255, 1);
  text-decoration: none;
  margin-right: 2.5%;
  line-height:2;

}

.footer_menu1{
  display: flex;  /* 横並びにする */
  flex-wrap: wrap; /* 必要なら折り返し */
  justify-content: center; /* 通常は中央揃え */
  gap: 2%;  /* 要素間の余白 */
}

.footer_menu2{
  display: flex;  /* 横並びにする */
  flex-wrap: wrap; /* 必要なら折り返し */
  justify-content: center; /* 通常は中央揃え */
  gap: 2%;  /* 要素間の余白 */
  margin-top: 0%;
}

.footer_menu3{
  display: flex;  /* 横並びにする */
  flex-wrap: wrap; /* 必要なら折り返し */
  justify-content: center; /* 通常は中央揃え */
  gap: 2%;  /* 要素間の余白 */
  margin-bottom: 1%;
}

.footer_text{
  display:contents;
  width: 100%;
  font-size: clamp(10px, 1.4vw, 15px);
	text-align: center;
  line-height:2;
  margin-bottom: 1%;
}