@charset "utf-8";f_links_bar

section .homehe{
    width: 100%;
    height: 100%;
    color: black;
    border-bottom: 2px solid #000;
}

.main_visual{
    margin-bottom: 0;
}

/* ホームボタンの記述 */
.homehe {
    display: flex;
    align-items: center;
  }

  .image-container {
    display: flex;
    align-items: center;
    position: relative;
    max-height: 100px; /* 画像の最大高さを指定 */
    max-width: 100px; /* 画像の最大幅を指定 */
  }

  .arrow {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid black;
  }

  .arrow2 {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid red;
  }
  
  

  .homebtn {
    max-height: 100%; /* 画像の最大高さを指定 */
    max-width: 100%; /* 画像の最大幅を指定 */
  }

  /* タイトルを大きく */
  h6{
    font-size: 40px;
    font-weight: bold;
    text-shadow: khaki;
    padding-top: 30px;
    padding-left: 16px;
  }

  /* 下層ページのコメントボックス */
  
  .kasoubox1{
    width: 90%;
    padding: 16px;
    margin: 0 auto;
    background-color: khaki;
    border: 3px solid #000;

  }

  .kasoubox2{
    width: 90%;
    padding: 16px;
    margin: 0 auto 100px;
    background-color: khaki;
    border: 3px solid #000;

  }

  /* 人生をより豊かにする～の上のスペース */
  .jinsei{
    padding-top: 100px;
  }

  /* FXEXの内容他ブロック分けの */

/* .exnakami を画面中央に寄せる */
.exnakami {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  max-width: 800px; /* 要素の最大幅を設定（任意の値に調整） */
}

/* .kuwasiku を .exnakami の中央に配置する */
.kuwasiku {
  font-size: 30px;
  font-weight: bold;
	text-shadow: 2px 2px 2px yellow;
  display: block;
  text-align: center;

  /* 追加: 要素を中央に配置するためのスタイル */
  position: relative;
}

/* .exnakami1 のスタイル（そのまま） */
.exnakami1 {
  display: inline-block;
  padding: 10px;
  background-color: #f0f0f0;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin: 5px;
}

.exnakami1 img {
  width: 200px;
  height: 200px;
}

.exnakami1:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.767);
}

/* 矢印の記述 */
.yajirusi {
  font-size: 40px;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.blink {
  animation: blink 1s infinite;
}

/* カリュキュラムページのタイトルや動画、スライドショー */
.taitoru {
  font-size: 35px;
  font-weight: bold;
  text-align: center;
  margin: 0 auto;
  margin-top: 50px; /* 余白を追加 */
}

.ciroiro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cdouga, .csura {
  padding-top: 0;
  margin-bottom: 0;
  margin: 0 auto; /* 余白を追加 */
  border: 3px solid #000;
}

.spe{
  margin-bottom: 100px;
}


.csura{
  width: 560px;
  height: 315px;
  border-bottom: 3px solid #000;
  margin-bottom: 30px;
}

/* 自己紹介ページの各リンクなどの記載 */

.flex-container {
  display: flex;
  justify-content: space-around;
  margin-top: 100px;
}
.flex-container > .kakoi {
  flex-basis: 30%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex-container > .kakoi2 {
  flex-basis: 30%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.kakoi {
  font-size: 20px;
  background-color: bisque;
  text-align: center;
  vertical-align: top;
  font-weight: bold;
  border: 3px solid red;
  width: 100%;
  margin-bottom: 100px;
}

.kakoi .note-embed, .kakoi img {
  margin: auto;
}

.kakoi:hover {
  transform: scale(1.05);  /* 要素を5%拡大します */
  transition: transform 0.3s ease-in-out; /* 拡大に0.3秒かけて、ゆっくりと開始して急速に終わるアニメーションを適用します */
}

.kakoi2 {
  font-size: 20px;
  background-color: #f0f0f0;
  text-align: center;
  vertical-align: top;
  font-weight: bold;
  border: 3px double #000;
  width: 100%;
  margin-bottom: 100px;
}

.kakoi2 .note-embed, .kakoi img {
  margin: auto;
}

.kakoi2:hover {
  transform: scale(1.05);  /* 要素を5%拡大します */
  transition: transform 0.3s ease-in-out; /* 拡大に0.3秒かけて、ゆっくりと開始して急速に終わるアニメーションを適用します */
}




.note-embed{
  padding-top: 30px;
}

.manecha{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#centered-images p img.slide-image {
    width: auto;
    max-width: 100%;
}

.center-content {
  margin-top: 50px;
  text-align: center;
}

div .touroku  {
  margin: auto 0;
  padding-bottom: 40px;
  padding-right: 30px;

}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.touroku {
  animation: blink 2s infinite;
}

a .hova {
  transition: transform 0.3s ease-in-out; /* アニメーションの効果をスムーズにするための設定 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); /* 影の効果を追加 */
}

a:hover .hova {
  transform: scale(1.3); /* ホバー時にはさらに10%拡大する */
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); /* ホバー時には影を大きくする */
}

@keyframes blink {
  0%   {opacity: 1;}
  50%  {opacity: 0;}
  100% {opacity: 1;}
}

.yajirusi-class {
  animation-name: blink;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}


.saisyo .video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9のアスペクト比を維持 */
  height: 0;
  overflow: hidden;
}

.saisyo .video-wrapper iframe {
  position: absolute;
  width: 100%; /* .video-wrapper要素の全幅 */
  height: 100%; /* .video-wrapper要素の全高 */
  top: 0;
  left: 0;
}

.saisyo {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 1行に3列を作る */
  grid-gap: 20px; /* グリッドのギャップ（列と行の間隔）を設定 */
  border: 10px double red;
}

.saisyo .sai {
  width: 100%;
  height: auto; /* 画像のアスペクト比を維持 */
}

.sai{
  border: 5px solid #000;
}

.video-wrapper{
  border: 3px solid yellow;
}

.syokaimendan {
  border: 10px double red;
}

.syokaimendan {
  display: flex;
  margin-top: 200px;
  margin-bottom: 200px;
}

.syokaimendan .sai,
.syokaimendan .nyuukai {
  width: 50%; /* 親要素の幅の50%を占める */
  height: auto; /* 高さは自動的に調節 */
}

.waku{
  margin-top: 100px;
}

/* 上下にスペース100px空ける */
.jougesupe{
  margin-top: 100px;
  margin-bottom: 100px;
}
.kasen{
  color: red;
  border-bottom: 1px double #000;
}

.youtube {
  width: 70%; 
  height: 0;
  padding-bottom: 33.75%; /* 9/16 * 60% = 33.75% */
  position: relative;
  overflow: hidden;
  border: 30px solid #00000000;
}

.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.wakuwaku{
  border: 5px solid #000;
  width: 80%; /* 必要に応じて幅を調整してください */
  height: auto;
  font-size: 30px;
  margin: 0 auto 100px; /* これを追加 */

}

.dawriron{
  border: 20px double #000;
  width: 80%; /* 必要に応じて幅を調整してください */
  height: auto;
  font-size: 40px;
  margin: 0 auto 100px; /* これを追加 */

}

th{
  text-align: center;
  width: 600px;
  font-weight: bold;
  text-shadow: 3px 3px 3px yellow; ;
  border: none;
}

table{
  border: none;
}

.tyoujuuyou{
  font-size: 30px;
  border: 3px dashed #000;
  text-shadow: 2px 2px 2px red;
}

.fib {
  font-size: 20px;
  text-align: left;
  color:red;
  font-weight: bold;
  line-height: 0; /* adjust this value as needed */
}