/* ========================================

   セミナーアーカイブ動画

\======================================== */



.es-seminar,

.es-seminar \* {

  box-sizing: border-box;

}



.es-seminar {

  --seminar-orange: #ff7d27;

  --seminar-green: #3d921d;

  --seminar-text: #333;



  --seminar-arc-size: clamp(68rem, 78vw, 150rem);

  --seminar-arc-thickness: clamp(7rem, 7.3vw, 14rem);

  --seminar-arc-top-offset: clamp(52rem, 60vw, 115rem);

  --seminar-arc-right-offset: clamp(26rem, 26vw, 50rem);

  --seminar-arc-bottom-offset: clamp(42rem, 51vw, 98rem);

  --seminar-arc-left-offset: clamp(39rem, 44.3vw, 85rem);



  position: relative;

  overflow: hidden;



  padding: 13rem 0 16rem;



  background-color: #fff;



  background-image: linear-gradient(

    0deg,

    rgba(255, 226, 110, 0.32) 0%,

    rgba(255, 112, 0, 0.8) 66%,

    rgba(255, 112, 0, 0.8) 100%

  );

}





/* ========================================

   右上と左下の太い円弧

\======================================== */



.es-seminar::before,

.es-seminar::after {

  box-sizing: border-box;



  position: absolute;

  z-index: 0;



  display: block;



  background: linear-gradient(

    90deg,

    rgba(255, 226, 110, 0.1) 0%,

    rgba(252, 180, 54, 0.4) 100%

  );



  border-radius: 50%;



  content: "";



  -webkit-mask-image: radial-gradient(

    farthest-side,

    transparent calc(100% - var(--seminar-arc-thickness) - 0.1rem),

    #000 calc(100% - var(--seminar-arc-thickness))

  );



  mask-image: radial-gradient(

    farthest-side,

    transparent calc(100% - var(--seminar-arc-thickness) - 0.1rem),

    #000 calc(100% - var(--seminar-arc-thickness))

  );



  mix-blend-mode: screen;



  pointer-events: none;

}



.es-seminar::before {

  top: calc(0rem - var(--seminar-arc-top-offset));

  right: calc(0rem - var(--seminar-arc-right-offset));



  width: var(--seminar-arc-size);

  height: var(--seminar-arc-size);

}



.es-seminar::after {

  bottom: calc(0rem - var(--seminar-arc-bottom-offset));

  left: calc(0rem - var(--seminar-arc-left-offset));



  width: var(--seminar-arc-size);

  height: var(--seminar-arc-size);

}





/* ========================================

   コンテナ

\======================================== */



.es-seminar__container {

  position: relative;

  z-index: 1;



  width: 96rem;

  max-width: calc(100% - 4.8rem);



  margin-inline: auto;

}





/* ========================================

   左側の縦文字

\======================================== */



.es-seminar__side-text {

  position: absolute;

  z-index: 1;



  top: 5rem;

  left: -2rem;



  color: rgba(255, 255, 255, 0.2);



  font-family: "League Spartan", sans-serif;

  font-size: 14rem;

  font-weight: 500;

  line-height: 1;



  writing-mode: vertical-rl;



  pointer-events: none;

  user-select: none;

}





/* ========================================

   セクションタイトル

\======================================== */



.es-seminar__title {

  margin: 0 0 7.6rem;



  color: #fff;



  font-family: "Zen Maru Gothic", sans-serif;

  font-size: 5rem;

  font-weight: 700;

  line-height: 1.4;

  letter-spacing: 0.04em;



  text-align: center;

}





/* ========================================

   動画カード

\======================================== */



.es-seminar__card {

  display: grid;

  grid-template-columns: 50rem minmax(0, 1fr);



  min-height: 28.1rem;



  overflow: hidden;



  color: var(--seminar-text);

  text-decoration: none;



  background-color: #fffffff0;



  border-radius: 1.6rem;



  box-shadow: 0 0.8rem 2.5rem rgba(141, 76, 22, 0.15);

}



.es-seminar__card--link:hover {

  color: var(--seminar-text);

}



.es-seminar__card--link:focus-visible {

  outline: 0.3rem solid #fff;

  outline-offset: 0.5rem;

}





/* ========================================

   YouTubeサムネイル

\======================================== */



.es-seminar__media {

  min-width: 0;

  min-height: 28.1rem;



  background-color: #3a2419;



}



.es-seminar__thumbnail,

.es-seminar__thumbnail img {

  display: block;



  width: 100%;

  height: 100%;

}



.es-seminar__thumbnail {

  position: relative;



  overflow: hidden;

}



.es-seminar__thumbnail img {

  object-fit: cover;



  transition: transform 0.5s ease;

}



.es-seminar__card--link:hover .es-seminar__thumbnail img {

  transform: scale(1.03);

}





/* ========================================

   公開後の再生アイコン

\======================================== */



.es-seminar__play {

  position: absolute;



  top: 50%;

  left: 50%;



  display: block;



  width: 7.4rem;

  height: 7.4rem;



  background-color: rgba(255, 255, 255, 0.84);



  border-radius: 50%;



  box-shadow:

    0 0 0 1.5rem rgba(255, 255, 255, 0.34),

    0 0.5rem 1.8rem rgba(0, 0, 0, 0.2);



  transform: translate(-50%, -50%);

}



.es-seminar__play::before {

  position: absolute;



  top: 50%;

  left: 54%;



  width: 0;

  height: 0;



  border-top: 1.55rem solid transparent;

  border-bottom: 1.55rem solid transparent;

  border-left: 2.45rem solid #4b4747;



  content: "";



  transform: translate(-50%, -50%);

}





/* ========================================

   公開前ステータス

\======================================== */



.es-seminar__status {

  position: absolute;



  top: 50%;

  left: 50%;



  display: none;



  min-width: 13rem;

  min-height: 4.4rem;



  align-items: center;

  justify-content: center;



  gap: 0.4rem;



  padding: 0.8rem 1.8rem;



  color: #fff;



  font-size: 1.5rem;

  font-weight: 700;

  letter-spacing: 0.08em;



  white-space: nowrap;



  background-color: rgba(51, 51, 51, 0.82);



  border-radius: 999px;



  transform: translate(-50%, -50%);

}



.es-seminar__status-main {

  font-size: 1.4rem;

}



.es-seminar__status-external {

  font-size: 1.2rem;

}





/* ========================================

   カード本文

\======================================== */



.es-seminar__body {

  display: flex;



  min-width: 0;



  flex-direction: column;

  align-items: flex-start;



  padding: 3.2rem 3.4rem 2.4rem;

}



.es-seminar__date {

  margin: 0 0 4px;



  color: #555;



  font-family: "Noto Sans JP", sans-serif;

  font-size: max(12px, 1.5rem);

  font-weight: 500;

  line-height: 1.5;

}



.es-seminar__description {

  margin: 0;



  color: var(--seminar-text);



  font-family: "Noto Sans JP", sans-serif;

  font-size: 2.2rem;

  font-weight: 600;

  line-height: 1.65;

  letter-spacing: 0.03em;

}



/* ========================================

   動画を見るボタン

\======================================== */



.es-seminar__button {

  position: relative;

  isolation: isolate;



  display: flex;



  min-width: 34.8rem;

  min-height: 6.6rem;



  align-items: baseline;

  justify-content: center;



  margin-top: auto;



  padding: 1.8rem 2.4rem 1.2rem;



  overflow: hidden;



  color: #fff;



  font-family: "Noto Sans JP", sans-serif;

  font-size: 2rem;

  font-weight: 700;

  line-height: 1.4;

  letter-spacing: 0.08em;



  text-align: center;

  text-decoration: none;

  white-space: nowrap;



  /* 通常時 */

  background-color: #3d921d;



  border-radius: 999px;

}



/* ========================================

   左 → 右へ流れる明るい黄緑

\======================================== */



.es-seminar__button::before {

  position: absolute;

  z-index: 0;



  /*

   \* ボタンより大きくして

   \* 色面の境界が縁に見えにくくする

   */

  top: -15%;

  bottom: -15%;

  left: -25%;



  width: 170%;



  /*

   \* 先端だけやわらかくぼかす

   */

  background: linear-gradient(

    90deg,

    #76bb32 0%,

    #76bb32 70%,

    rgba(118, 187, 50, 0.9) 82%,

    rgba(118, 187, 50, 0.45) 92%,

    rgba(118, 187, 50, 0) 100%

  );



  content: "";



  opacity: 0.35;



  transform: translateX(-110%);



  /*

   \* マウスを外したときの戻り

   \* 少しだけ速めにする

   */

  transition:

    transform 0.32s cubic-bezier(0.45, 0, 0.55, 1);



  pointer-events: none;

}





/* ========================================

   ホバー

   左 → 右へ流れる

\======================================== */



.es-seminar__button:not(.es-seminar__button--disabled):hover::before {

  transform: translateX(0);



  /*

   \* 入るときだけほんの少しゆったり

   */

  transition-duration: 0.38s;

}





/* ========================================

   文字は常に前面

\======================================== */



.es-seminar__button-main,

.es-seminar__button-external {

  position: relative;

  z-index: 1;

}



.es-seminar__button-main {

  font-size: 1em;

  letter-spacing: 0.05em;

}



.es-seminar__button-external {

  font-size: 0.75em;

}





/* ========================================

   公開前

\======================================== */



.es-seminar__button--disabled {

  background-color: #4b931d;



  cursor: not-allowed;

}



.es-seminar__button--disabled::before {

  display: none;

}





/* ========================================

   動きを減らす設定

\======================================== */



@media (prefers-reduced-motion: reduce) {



  .es-seminar__button::before {

    transition: none;

  }



}





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



  .es-seminar__card {

    grid-template-columns: 1fr;

  }



  .es-seminar__media {

    min-height: 20rem;

  }



  .es-seminar__body {

    padding: 3.2rem;

    padding-bottom: 4.8rem;

  }



  .es-seminar__description {

    font-size: max(18px, 2.2rem);


  }



}



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



  .es-seminar__card {

    grid-template-columns: 1fr;

  }



  .es-seminar__media {

    min-height: 20rem;

  }



  .es-seminar__body {

    padding: 2.4rem;

  }



}



/* ========================================

   スマートフォン

\======================================== */



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



  .es-seminar {

    padding:

      6rem

      0

      8rem;

  }



  .es-seminar__container {

    width: 100%;

    max-width: 100%;



    padding:

      0

      1.5rem;

  }





  /* ----------------------------------------

     左側の縦文字

  ---------------------------------------- */



  .es-seminar__side-text {

    top: 2.4rem;

    left: -1.6rem;



    font-size: 8rem;

  }





  /* ----------------------------------------

     セクションタイトル

  ---------------------------------------- */



  .es-seminar__title {

    margin-bottom: 3.5rem;



    font-size: 2.8rem;

    line-height: 1.5;

  }





  /* ----------------------------------------

     動画カード

  ---------------------------------------- */



  .es-seminar__card {

    display: block;



    min-height: 0;



    border-radius: 1.4rem;

  }





  /* ----------------------------------------

     サムネイル

  ---------------------------------------- */



  .es-seminar__media {

    min-height: 0;



    aspect-ratio: 16 / 9;

  }



  .es-seminar__thumbnail,

  .es-seminar__thumbnail img {

    width: 100%;

    height: 100%;

  }



  .es-seminar__thumbnail img {

    object-fit: cover;

  }





  /* ----------------------------------------

     再生アイコン

  ---------------------------------------- */



  .es-seminar__play {

    width: 5.8rem;

    height: 5.8rem;



    box-shadow:

      0 0 0 1rem rgba(255, 255, 255, 0.34),

      0 0.4rem 1.4rem rgba(0, 0, 0, 0.2);

  }



  .es-seminar__play::before {

    border-top-width: 1.2rem;

    border-bottom-width: 1.2rem;

    border-left-width: 1.9rem;

  }





  /* ----------------------------------------

     公開前ステータス

  ---------------------------------------- */



  .es-seminar__status {

    min-width: 11rem;

    min-height: 3.8rem;



    padding:

      0.6rem

      1.4rem;



    font-size: 1.2rem;

  }



  .es-seminar__status-main {

    font-size: 1.2rem;

  }



  .es-seminar__status-external {

    font-size: 1.1rem;

  }





  /* ----------------------------------------

     カード本文

  ---------------------------------------- */



  .es-seminar__body {

    display: flex;



    padding:

      2rem

      1.7rem

      2.4rem;

  }





  /* ----------------------------------------

     日付

  ---------------------------------------- */



  .es-seminar__date {

    margin-bottom: 4px;



    font-size: 1.1rem;

    line-height: 1.5;

  }





  /* ----------------------------------------

     説明文

  ---------------------------------------- */



  .es-seminar__description {

    padding-bottom: 0;



    font-size: clamp(15px, 1.8rem, 32px);

    line-height: 1.55;

  }





  /* ----------------------------------------

     動画を見るボタン

  ---------------------------------------- */



  .es-seminar__button {

    width: 100%;

    min-width: 0;

   height: auto;



    margin-top: 20px;

    padding:

  4px 12px;



    align-items: center;



    font-size: 1.6rem;



    border-radius: 999px;

    min-height: max(40px, 4.0rem );



  }



  .es-seminar__button-main {

    font-size: 1em;

  }



  .es-seminar__button-external {

    font-size: 0.72em;

  }



}


/* =========================================================
   セミナーアーカイブ動画
   2本表示対応
   PC：2枚横並び / SP：横スワイプ＋インジケーター
========================================================= */


/* -------------------------------------------------------
   動画一覧
------------------------------------------------------- */

.es-seminar__list {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 2.8rem;
}


/* -------------------------------------------------------
   PC：2枚横並び用カード
------------------------------------------------------- */

.es-seminar__list .es-seminar__card {
  display: flex;

  min-width: 0;
  min-height: 100%;

  flex-direction: column;
}


/* -------------------------------------------------------
   サムネイル
------------------------------------------------------- */

.es-seminar__list .es-seminar__media {
  width: 100%;
  min-height: 0;

  aspect-ratio: 16 / 9;
}

.es-seminar__list .es-seminar__thumbnail-link {
  display: block;

  width: 100%;
  height: 100%;
}

.es-seminar__list .es-seminar__thumbnail {
  width: 100%;
  height: 100%;
}

.es-seminar__list .es-seminar__thumbnail img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* -------------------------------------------------------
   本文
------------------------------------------------------- */

.es-seminar__list .es-seminar__body {
  display: flex;

  flex: 1;
  flex-direction: column;

  padding:
    2.6rem
    2.8rem
    2.8rem;
}

.es-seminar__list .es-seminar__description {
  font-size: max(18px, 2.4rem);
}


/* -------------------------------------------------------
   ボタン
------------------------------------------------------- */

.es-seminar__list .es-seminar__button {
  width: 100%;
  min-width: 0;

  margin-top: 3rem;
}


/* =========================================================
   公開準備中サムネイル
========================================================= */

/* 再生マーク本体 */

.es-seminar__thumbnail--preparing .es-seminar__play {
  position: absolute;
  z-index: 2;

  top: 50%;
  left: 50%;

  width: 8rem;
  height: 8rem;

  background-color: rgba(255, 255, 255, 0.92);

  border: 0.3rem solid rgba(255, 255, 255, 0.96);
  border-radius: 50%;

  box-shadow:
    0 0.8rem 2.4rem rgba(0, 0, 0, 0.22),
    0 0 0 0.8rem rgba(255, 255, 255, 0.16);

  opacity: 1;

  transform: translate(-50%, -50%);
}

.es-seminar__thumbnail--preparing .es-seminar__play::before {
  position: absolute;

  top: 50%;
  left: 53%;

  width: 0;
  height: 0;

  border-top: 1.4rem solid transparent;
  border-bottom: 1.4rem solid transparent;
  border-left: 2.2rem solid #f58200;

  content: "";

  transform: translate(-50%, -50%);
}


/* 公開準備中ラベル */

.es-seminar__thumbnail--preparing .es-seminar__status {
  position: absolute;
  z-index: 3;

  top: auto;
  bottom: 1.6rem;
  left: 50%;

  display: inline-flex;

  min-width: 0;
  min-height: 0;

  padding: 0.7rem 1.4rem;

  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  white-space: nowrap;

  background-color: rgba(51, 51, 51, 0.82);
  border-radius: 999px;

  transform: translateX(-50%);
}


/* =========================================================
   セミナー動画：シンプルなホバーアニメーション
========================================================= */

.es-seminar__thumbnail img {
  transition: transform 0.4s ease;
}

@media (hover: hover) {

  .es-seminar__card:hover .es-seminar__thumbnail img {
    transform: scale(1.04);
  }

}


/* =========================================================
   インジケーター
   PCでは非表示
========================================================= */

.es-seminar__indicator {
  display: none;
}


/* =========================================================
   Tablet
========================================================= */

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

  .es-seminar__list {
    gap: 2rem;
  }

  .es-seminar__list .es-seminar__body {
    padding:
      2.4rem
      2.2rem
      2.6rem;
  }

}


/* =========================================================
   Smartphone
   2枚目を少し見せる横スワイプ＋インジケーター
========================================================= */

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

  /* ----------------------------------------
     横スワイプ領域
  ---------------------------------------- */

  .es-seminar__list {
    display: flex;

    width: 100vw;

    gap: 1.6rem;

    /*
     * 親コンテナの中央基準から
     * 画面左端まで広げる
     */
    margin-left: calc(50% - 50vw);

    /*
     * 1枚目のカードだけ
     * 通常コンテンツと同じ位置から開始
     */
    padding-left: 1.5rem;

    /*
     * 最後のカードも
     * 左端まできちんとスナップできる余白
     */
    padding-right: 5.5rem;
    padding-bottom: 1rem;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    scroll-padding-left: 1.5rem;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
  }

  .es-seminar__list::-webkit-scrollbar {
    display: none;
  }


  /* ----------------------------------------
     カード
     2枚目を少し見せる
  ---------------------------------------- */

  .es-seminar__list .es-seminar__card {
    flex: 0 0 calc(100vw - 5.5rem);

    min-width: 0;
    min-height: 100%;

    scroll-snap-align: start;
    scroll-snap-stop: always;
  }


  /* ----------------------------------------
     サムネイル
  ---------------------------------------- */

  .es-seminar__list .es-seminar__media {
    aspect-ratio: 16 / 9;
  }


  /* ----------------------------------------
     本文
  ---------------------------------------- */

  .es-seminar__list .es-seminar__body {
    display: flex;

    min-height: unset;

    flex-direction: column;

    padding:
      2.2rem
      1.8rem
      2.4rem;
  }

  .es-seminar__list .es-seminar__description {
    font-size: max(18px, 1.6rem);
    line-height: 1.55;
  }


  /* ----------------------------------------
     ボタン
  ---------------------------------------- */

  .es-seminar__button {
    font-size: max(16px, 1.5rem);
  }

  .es-seminar__list .es-seminar__button {
    margin-top: 20px;
  }


  /* ----------------------------------------
     公開準備中：再生マーク
  ---------------------------------------- */

  .es-seminar__thumbnail--preparing .es-seminar__play {
    width: 7rem;
    height: 7rem;
  }

  .es-seminar__thumbnail--preparing .es-seminar__play::before {
    border-top-width: 1.2rem;
    border-bottom-width: 1.2rem;
    border-left-width: 1.9rem;
  }


  /* ----------------------------------------
     スライドインジケーター
  ---------------------------------------- */

  .es-seminar__indicator {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 0.8rem;

    margin-top: 2rem;
  }

.es-seminar__dot {
  width: 0.9rem;
  height: 0.9rem;

  padding: 0;

  background-color: rgba(255, 255, 255, 1);

  border: 1px solid #fda035;
  border-radius: 50%;

  cursor: pointer;

  transition:
    width 0.25s ease,
    background-color 0.25s ease,
    border-radius 0.25s ease;
}

.es-seminar__dot.is-active {
  width: 2.6rem;

  background-color: #fda035;

  border-color: #fda035;


  border-radius: 999px;
}
}

/* =========================================================
   Small Smartphone
========================================================= */

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

  .es-seminar__list .es-seminar__card {
    flex-basis: calc(100vw - 4.5rem);
  }

  .es-seminar__list .es-seminar__description {
    font-size: 1.8rem;
  }

}


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

  .es-seminar__list {
    align-items: start;
  }

  .es-seminar__list .es-seminar__card {
    min-height: 0;
  }

  .es-seminar__list .es-seminar__body {
    display: block;
    flex: none;
  }

  .es-seminar__list .es-seminar__button {
    margin-top: 2rem;
  }

}

.es-seminar__date {
  display: none;
}

.es-seminar__list .es-seminar__button {
  display: none;
}

/* =========================================================
   セミナー動画：説明文
========================================================= */

.es-seminar__summary {
  margin: 0.8rem 0 0;

  color: #777;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.7;
}

@media screen and (max-width: 767px) {
  .es-seminar__summary {
    margin: 0.6rem 0 0;

    font-size: 14px;
    line-height: 1.6;
  }
}

/* =========================================================
   セミナー動画：タイトルマーカー
========================================================= */

.es-seminar__description {
  display: inline-block;

  padding: 0 0.15em;

  background:
    linear-gradient(
      transparent 58%,
      rgba(255, 190, 85, 0.40) 58%
    );
}