続きを見る機能が実装できない

Question

    <main>
        <div class="resultmain">
            <div class="bg-color">
                <?php

                $elevenless = "<b>あなたは自由奔放で我が道を行くタイプです。</b><br>「みんなと一緒」や「常識」が似合わないあなたは<br>他の人が想像もつかないようなことをやってのける力を持っています。<br>自分の可能性を最大限に広げたいと思っているあなたは様々なことに挑戦していきます。<br>その経験の中で学んだことを自分自身の強みとして生き抜いていくことができます！<br>そんなあなたのことを周りの人は「生きる力がある人だな」と思っています。<br>恋愛においては好き嫌いがはっきりしているため<br>あなたのことを理解してくれる人であなたが良いと思った相手であればとてもうまくいきます！<br>";
                $elevenlessalpha = ["F", "J", "P", "V", "Z", "Q"];
                $elevenlessalphastr = "F, J, P, V ,Z, Q";
                $twelveoneless = "<b>あなたは底力を出せる人です。</br><br>普段から全てに全力で取り組むというよりは、<br><b>「自分でやると決めたことに対しては全力でやる」</b><br>といったタイプです。だからといってその他のことを疎かにするかといえばそうでもありません。<br>やらなければいけないことややるべきことも要領よくこなす能力を持っています。<br>期限が決められている物事に取り組んでいるときに締め切りが近づくと通常の何倍もの効果を発揮し底力を見せます。<br>自分でも「最初から本気出せばよかったな」と思うことがあるのではないでしょうか？<br>そんなあなたは周りの人から「能力の高い人だな」と思われているようです。<br>恋愛においては少し奥手なところもありますが、<br>「自分の気持ちに嘘はつきたくない」と考えているため好きな人ができると、迷いながらも一途に思い続けることができます。<br>";
                $twelveonelessalpha = ["O", "B", "H", "L", "D", "W", "E", "C", "G"];
                $twelveonelessalphastr = "O, B, H, L, D, W, E, C, G,";
                $twelveeightless = "<b>あなたはオンとオフを切り替えられる人です。</b><br>集中しなければならないときにはしっかりと集中し、家などでゆっくりしていい時には周りの人に見せられないほどスイッチをオフにします。<br>好きなことや、やりたいことに対してスイッチが入ると<b>すさまじい集中力</b>を発揮することができます。<br>そして、集中力モードに入っている時が一番あなたらしい状態とも言えます。<br>そんなあなたのことを周りの人は<b>「努力家だな」</b>と思っています。あなたが集中している姿や一生懸命な姿を見てそのように感じているそうです。<br>恋愛においては本気で恋をすると何か他のことをしている時でも好きな人が何度も頭の中に出てくるくらい相手の人を考えるようです。<br>そのような真剣な恋をしているときは普段のあなたよりも感情が動きやすくなっているため、楽しい状態でもあり苦しい状態でもあります。<br>そんな矛盾した感情の中でも前向きに考えようとするところがあなたの魅力的なところです。";
                $twelveeightlessalpha = ["M", "Y", "A", "T", "S", "N", "R", "U", "K", "I"];
                $twelveeightlessalphastr = "M, Y, A, T, S, N, R, U, K, I";
                ?>

                <p class="result">診断結果！</p><br>

                <?php
                if (7 <= $point && $point <= 11) {
                    print($elevenless);
                    print("$name" . "さんの恋人になる人の苗字の頭文字は<br>" . "「" . $elevenlessalphastr . "」" . "の人です！<br>");
                    if (in_array($initial, $elevenlessalpha)) {
                        print("好きな人と両想いかも？！");
                    } else {
                        print("もしかしたら別の人といい感じなのかも…！");
                    }
                }
                if (12 <= $point && $point <= 21) {
                    print($twelveoneless);
                    print("$name" . "さんの恋人になる人の苗字の頭文字は<br>" . "「" . $twelveonelessalphastr . "」" . "の人です！<br>");
                    if (in_array($initial, $twelveonelessalpha)) {
                        print("好きな人と両想いかも？！");
                    } else {
                        print("もしかしたら別の人といい感じなのかも…！");
                    }
                }
                if (22 <= $point && $point <= 28) {
                    print($twelveeightless);
                    print("$name" . "さんの恋人になる人の苗字の頭文字は<br>" . "「" . $twelveeightlessalphastr . "」" . "の人です！<br>");
                    if (in_array($initial, $twelveeightlessalpha)) {
                        print("好きな人と両想いかも？！");
                    } else {
                        print("もしかしたら別の人といい感じなのかも…！");
                    }
                }
                ?>
            </div>
            <div class="youtube">
                <!--<p>参考動画</p>
                    <iframe src="https://www.youtube.com/embed/IVUBP7sJ-HA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                -->
            </div>
            <div class="readmore">
                <input id="check1" class="readmore-check" type="checkbox">
                <div class="readmore-content">
                    中身のテキスト
                </div>
                <label class="readmore-label" for="check1"></label>
            </div>
        </div>
    </main>

@charset "UTF-8";
.main {
  margin-top: 10px;
  margin-left: 5px;
}

.main h1 {
  margin-bottom: 50px;
  color: black;
  font-size: 20px;
  font-weight: 600;
}

.main h1 span {
  font-size: 26px;
  font-weight: 700;
}

.main .bg-img {
  background-image: url(img/01.jpg);
  background-size: cover;
  background-position: center;
}

.main .bg-img .bg-color {
  background-color: rgba(255, 255, 255, 0.5);
}

.main .bg-img .bg-color .my {
  padding-left: 25px;
}

.main .bg-img .bg-color .my b {
  font-size: 18px;
}

.main .bg-img .bg-color .my p {
  margin-bottom: 5px;
  margin-top: 30px;
}

.main .bg-img .bg-color .my .name {
  padding: 10px;
  padding-right: 145px;
}

.main .bg-img .bg-color .my .favper {
  padding: 10px;
  padding-right: 145px;
}

.main .bg-img .bg-color .my .error {
  color: red;
  margin-top: 0;
}

.main .bg-img .bg-color .my .question-contents .question p {
  display: inline-block;
  font-size: 18px;
  border-bottom: 1px black solid;
}

.main .bg-img .bg-color .my .question-contents .question input {
  width: 18px;
  height: 18px;
  padding-right: 18px;
  margin-top: 20px;
}

.main .bg-img .bg-color .my .submit {
  width: 200px;
  height: 60px;
  margin-top: 30px;
  margin-bottom: 30px;
  display: inline-block;
  border-radius: 8%;
  /* 角丸       */
  font-size: 15pt;
  /* 文字サイズ */
  text-align: center;
  /* 文字位置   */
  cursor: pointer;
  /* カーソル   */
  padding: 15px 50px;
  /* 余白       */
  background: rgba(153, 0, 0, 0.95);
  /* 背景色     */
  color: #ffffff;
  /* 文字色     */
  line-height: 1em;
  /* 1行の高さ  */
  -webkit-transition: 0.3s;
  transition: 0.3s;
  /* なめらか変化 */
  -webkit-box-shadow: 1px 1px 1px #666666;
          box-shadow: 1px 1px 1px #666666;
  /* 影の設定 */
  border: 2px solid rgba(153, 0, 0, 0.95);
  /* 枠の指定 */
}

.main .bg-img .bg-color .my .submit:hover {
  -webkit-box-shadow: none;
          box-shadow: none;
  /* カーソル時の影消去 */
  color: rgba(153, 0, 0, 0.95);
  /* 背景色     */
  background: #ffffff;
  /* 文字色     */
}

.resultmain {
  margin-top: 30px;
  margin-left: 20px;
  margin-right: 20px;
  /* 続きを読むボタン */
  /*チェック時にボタンを非表示*/
  /*チェック時に高さを自動に戻す*/
  /*チェック時グラデーション等を削除*/
}

.resultmain .bg-color {
  background-color: rgba(255, 255, 255, 0.5);
}

.resultmain .bg-color .result {
  display: inline-block;
  color: red;
  border: red 2px solid;
  font-size: 26px;
  font-weight: 700;
}

.resultmain .readmore {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /*以下お好み*/
  /* ボーダーを付ける場合 */
  padding: 10px;
  border: 1px solid #CCC;
}

.resultmain .readmore-content {
  position: relative;
  overflow: hidden;
  /*以下お好み*/
  /*高さの初期値*/
  height: 100px;
}

.resultmain .readmore-content::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  content: "";
  /*以下お好み グラデーションの色と高さ 高さはreadmoreのheight以下にすること*/
  height: 50px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.8)), color-stop(50%, rgba(255, 255, 255, 0.8)), to(#fff));
  background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 50%, #fff 100%);
}

.resultmain .readmore-label {
  display: table;
  bottom: 5px;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  margin: 0 auto;
  z-index: 2;
  padding: 0 10px;
  background-color: #ff7777;
  border-radius: 10px;
  color: #FFF;
}

.resultmain .readmore-label:before {
  content: '続きを読む';
}

.resultmain .readmore-check {
  display: none;
}

.resultmain .readmore-check:checked ~ .readmore-label {
  position: static;
  transform: translateX(0);
  -webkit-transform: translateX(0);
  /* 「続きを読む」を押した後、元に戻す必要がない場合は、上のオプションを消してこの1行だけにする */
  /* display: none; */
}

.resultmain .readmore-check:checked ~ .readmore-label:before {
  content: '閉じる';
}

.resultmain .readmore-check:checked ~ .readmore-content {
  height: auto;
}

.resultmain .readmore-check:checked ~ .readmore-content::before {
  display: none;
}

.resultmain .youtube {
  width: 300px;
  margin: 50px auto 0 auto;
}

.resultmain .youtube iframe {
  display: block;
}

分からないこと

中身のテキストの箇所に続きを見るを作りたいのですが上にチェックボックスが作られてうまく実装できません。良ければ回答のほうお願いします。

Answer 1

普通に動きました。
cssが読み込まれてないだけじゃないでしょうか？
「続きを読む」っていうピンクのボタンは表示されていますか？

cssが読み込まれていたら

.resultmain .readmore-check {
  display: none;
}

なのでチェックボックスは表示されないはずです。