/* メニュースタイル */
header {
  height: 50px;
  /*
  height: 65px; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #333fff;
  color: white;
  padding: 10px 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  */
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  z-index: 1000;
}

/* メニューが表示されるときのスタイル */
header.visible {
  transform: translateY(0);
}

.header-right-2 {
  display: flex;
  justify-content: flex-end; /* 子要素を右揃え */
  align-items: center; /* 子要素を縦方向に中央揃え */
  /* height: 100%; */
  line-height: 50px; /* 親要素のline-height */
}

.header-right-2 a {
  display: flex; /* 子要素内のコンテンツを整列させるためにflexを使用 */
  align-items: center; /* 縦方向の中央揃え */
  /* height: 100%; */ /* 親要素（nav）の高さに合わせる */
  line-height: inherit; /* 親要素のline-heightを継承する */
  padding: 0 25px;
  color: white;
  transition: all 0.5s;
}

.header-right-2 a:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.logo {
  width: 270px;
  margin-top: 4px;
}


.heading2 {
  /* padding-top: 80px; */
  padding-bottom: 40px;
  /* color: #5f5d60; */
}


.top-wrapper {
  background-image: url("../img/test.jpg");
  padding: 140px 0 80px 0;
}

.top-wrapper h1 {
  opacity: 0.95;
  font-size: 45px;
  letter-spacing: 4px;
  margin: 10px 0px;
}

.top-wrapper p {
  opacity: 0.9;
  margin-top: 5px;
  margin-bottom: 5px;
}

.top-interval {
  margin-top: 0px;
  margin-bottom: 50px;
}

.btn-wrapper {
  text-align: center;
  margin: 60px 0;
}

.androidapp {
  background-color: rgba(32, 32, 32, 0.9);
  /* background-color: #202020; */
  margin-right: 0px;
  /* opacity: 0.2; */
}


.lesson {
  width: 50%;
  margin-bottom: 50px;
}

@media all and (max-width: 1060px) {
  .lesson {
    width: 100%;
  }
}

.lesson-wrapper-yt {
  padding-bottom: 80px;
  /* padding-left: 5%; */
  /* padding-right: 5%; */
  background-color: #f7f7f7;
  text-align: center;

  margin: 0;
  display: flex;
  justify-content: center;  /* 水平方向 */
  /* align-items: center; */  /* 垂直方向 */
}

.lesson-wrapper-2 {
  margin-bottom: 1rem;
}

.lesson-wrapper-photo-cp {
  padding-bottom: 0px;
  padding-left: 5%;
  padding-right: 5%;
  background-color: #f7f7f7;
  text-align: center;
}

.ludo-overview-image {
  width: 448px/* 1792/4 */; /* 横幅を300pxに拡大 */
  height: auto; /* アスペクト比を保ちながら高さを自動調整 */

  -webkit-mask-image: radial-gradient(circle/*ellipse*/, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0.3) 100%);
  mask-image: radial-gradient(circle/*ellipse*/, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0.3) 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
  
  /*
  background: conic-gradient(
    from 45deg,
    rgba(255, 0, 0, 1),
    rgba(255, 0, 0, 0) 25%,
    rgba(0, 255, 0, 0) 50%,
    rgba(0, 0, 255, 0) 75%,
    rgba(0, 0, 255, 1)
  );
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  */

  /* SVGマスクを適用 */
  /*
  -webkit-mask-image: url('../svg/mask.svg');
  mask-image: url('../svg/mask.svg');
  mask-size: cover;
  */
}

.ludo-overview-image2 {
  width: 480px/* 960/2 */; /* 横幅を300pxに拡大 */
}

.lesson-icon p {
  position: static; /* 初期値に戻す */
  top: auto; /* 初期値に戻す */
  width: 100%;
  color: #918996;
}


.text-contents {
  color: #a49fa7;
}


.container2 {
  max-width: 1170px;
  /* width: 100%; */  /* ※これを有効化すると、なせかYouTubeが左端に行ってしまう */
  padding: 0 15px;
  margin: 0 auto;
}

.text-contents2 {
  /* width: 80%; */
  /* display: inline-block; */
  display: block;
  margin-top: 15px;
  font-size: 13px;
  color: #b3aeb5;
}


/* 親要素 */
.video-container {
  /* position: relative; */
  width: 640px; /* 動画の横幅 */
  height: 480px; /* 動画の縦幅 */
  /* padding: 10px; */ /* 淵の幅 */
  /* background: rgba(0, 0, 0, 0.5); */ /* 半透明の背景 */
  border-radius: 15px; /* 淵を角丸にする */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* 影を追加 */
  text-align: center;
}

/* iframe自体 */
.video-container iframe {
  /* width: 100%; */
  /* height: 100%; */
  border: none; /* iframeの枠線を削除 */
  border-radius: 10px; /* iframe自体も角丸にする */
}


/* Footer */
footer img {
  width: 270px;
}


/* 汎用 */
.flex_centering {
  display: flex; /* 子要素を横並びにする */
  justify-content: center; /* 子要素を横方向に中央揃え */
  /*gap: 10px*/; /* 子要素間の間隔（任意） */
}
.text-align-center {
  text-align: center;
}
.max-width-minus150px {
  max-width: 1020px;
}

/* 汎用スペース */
.spaced-top-none {
  margin-top: 0px;
  /* padding-top: 0px; */
}
.spaced-top-small {
  margin-top: 25px;
}
.spaced-bottom-small {
  margin-bottom: 25px; /* 下方向に30pxの余白を追加　※ marginの折り畳みを考慮 */
}


/* フェードインさせる要素 */
.colla-fadein {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}


.shadow {
  /* font-size: 32px; */
  color: #fff;
  text-shadow: 2px 2px 12px rgba(0, 0, 0, 0.9);
}

.shadow2 {
  /* font-size: 32px; */
  color: #fff;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 1.0);
}