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

/*==============================*/
/* LP */
/*==============================*/
    .rickma_h2{color: #4cb2c0; font-size: 2em; font-weight: bold; padding-bottom: 23px; border-bottom: 10px solid #c7e7eb; text-align: center; margin: 100px auto 70px;}
    .rickma_main_area{background: #f4fafb; padding: 50px 50px; display: flex; flex-wrap: wrap; gap: 50px; width: calc(90% - 100px); margin: auto auto 50px; align-items:center;}
    .rickma_main_area h3{color: #54b6c2; text-align: center; font-size: 1.6em; font-weight: bold; margin-bottom: 2em;}

    .rickma_main_area img{width: 200px; height: auto; margin: auto;}
    .rickma_main_area p{font-size: 1.2em; margin-bottom: 1.5em!important;}
    
    @media screen and (max-width: 649px) {
        .rickma_main_area{width: calc(100% - 100px);}
    }
    
    
    .table-container {
      border-radius: 0px;
      overflow: hidden; /* これで中のテーブルの角を強制的に削る */
      border: 1px solid #c7e7eb; /* 枠線はdivにつける */
      overflow: hidden;
      background: #c7e7eb;
    }

    .collapse-table {
      border-collapse: collapse; 
      border-spacing: 0!important;

      border: none;
      width: 100%;
        margin-bottom: 0;
    }
    
    .collapse-table th,
    .collapse-table td{padding: 20px 40px;}
    
    .collapse-table td p{line-height: 2em;}
    
    .collapse-table th{background: #c7e7eb; font-size: 1.14em; font-weight: bold; color: #595959;}
    .collapse-table th{
        border-top: 0px solid #c7e7eb!important;
        border-right: 1px solid #FFF!important; 
        border-left: 1px solid #c7e7eb!important;
        border-bottom: 1px solid #FFF!important; }

    .collapse-table td{background: #FFF;
        border-top: 0px solid #c7e7eb!important;
        border-right: 1px solid #FFF!important; 
        border-left: 1px solid #c7e7eb!important;
        border-bottom: 1px solid #c7e7eb!important; }

    .collapse-table tr:last-child th{border-bottom: 0px solid #FFF!important;}
    .collapse-table tr:last-child td{border-bottom: 0px solid #FFF!important;}

    
    .collapse-table h3{color: #4cb2c0;}
    .collapse-table h3 a{text-decoration: underline;}
    .collapse-table h3 a:hover{text-decoration: underline; color: #004F61;}
    

    /* 全体のコンテナ（初期状態：横並び） */
    .youtube-link-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px; /* 動画同士の間隔 */
      width: 80%;
      margin: 30px auto 30px;
      box-sizing: border-box;
    }

    /* 各リンク枠（PC・タブレット：横並びで50%ずつ） */
    .youtube-link-box {
      flex: 1;
      /* 隙間（gap:20px）の半分を引いて、きれいに2等分にする計算 */
      width: calc(50% - 10px); 
      text-decoration: none;
      display: block;
    }

    /* 【重要】画面幅が650px未満（SP）になったら縦並びにする */
    @media screen and (max-width: 649px) {
      .youtube-link-box {
        width: 100%;
        flex: none;
      }
    }
    /* サムネイルの比率を16:9に固定する枠 */
    .thumbnail-wrapper {
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
      background-color: #000;
      border-radius: 8px;
    }

    /* サムネイル画像の配置 */
    .thumbnail-wrapper img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    /* ホバー時に画像を少し拡大 */
    .youtube-link-box:hover .thumbnail-wrapper img {
      transform: scale(1.05);
    }

    /* YouTube風の再生ボタン */
    .play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 58px;
      height: 38px;
      background-color: rgba(33, 33, 33, 0.8);
      border-radius: 14px;
      transition: background-color 0.2s ease;
    }

    /* 再生ボタンの中の三角マーク */
    .play-icon::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 55%;
      transform: translate(-50%, -50%);
      border-style: solid;
      border-width: 10px 0 10px 15px;
      border-color: transparent transparent transparent #fff;
    }

    /* ホバー時にボタンを赤色にする */
    .youtube-link-box:hover .play-icon {
      background-color: #ff0000;
    }

    
    ul.stmp_lst{width: calc(100% - 100px); display: flex; flex-wrap: wrap; justify-content:flex-start; gap: 50px; margin: auto auto 10px;
    border: 0px solid #26b1c5; border-radius: 10px; padding: 50px;}
    ul.stmp_lst li img{width: 70px; height: auto;}
    ul.stmp_lst + p{margin: auto auto 50px;}
    ul.stmp_lst + p > a{margin: auto auto 20px;}
    ul.stmp_lst + p +p{margin: auto auto 100px;}
    
    ul.stmp_lst + p.btn a{background: #4cb2c0!important;}
     ul.stmp_lst + p.btn a:hover{opacity: 0.7;}
    
    
    /* ▼ 600px以下のレスポンシブ設定 */
    @media (max-width: 600px) {
      ul.stmp_lst {
        width: 100%; /* スマホ画面幅いっぱいに広げる（必要に応じて調整） */
        padding: 15px; /* 外側の余白をスマホ用に縮小 */
        gap: 50px 15px; /* 3列が綺麗に収まるように隙間を狭める */
      }

      /* 子要素（liなど、実際のスタンプのアイテム） */
      ul.stmp_lst > * {
        /* 3列の場合、隙間（gap）は2つ分。
           全体(100%) から 「15px × 2つ分」を引き、それを3等分する */
        width: calc((100% - 15px * 2) / 3);
        box-sizing: border-box; /* 幅の計算を狂わせないためのお守り */
      }
    }