<section class="sec">
  <div class="inner">
    <h2 class="hdg">私たちについて</h2>
    <div class="content">
      <p class="txt">この文章はAIを用いて生成されたダミーテキストです。私たちは、最先端のテクノロジー製品から革新的なサービスソリューションまで、幅広い架空のポートフォリオを展示しています。各ページには、緻密に作り込まれた製品説明、ニュースリリース、企業の歴史、社員紹介など、実際の企業サイトに期待される情報が満載されており、サイト訪問者にとっての興味を惹きつけるコンテンツが用意されています。</p>
      <p class="txt">当サイトはウェブ開発者、デザイナー、マーケティングプロフェッショナルのための実験場として機能し、彼らがウェブデザインのレイアウトやコンテンツの配置、ナビゲーションの流れといった要素を評価、改善することを目的としています。また、このダミーサイトは教育目的での利用や、クライアントへのプレゼンテーションの際に、具体的なビジュアルエイドとして活用することができます。</p>
      <p class="txt">どうぞ、この完全に架空の世界を自由に探索して、リアルなウェブ体験を模擬することで、あなたのウェブ関連プロジェクトの品質を高めるインスピレーションを得てください。私たちのダミーコンテンツは細部にまでこだわり、リアリズムと実用性のバランスを取りながら、あなたのクリエイティブな試みをサポートすることを目指しています。</p>
      <a href="/about" class="link">詳細はこちら</a>
    </div>
  </div>
</section>

.sec {
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;

    .inner {
      background-color: #fff;
      padding: 120px;
    }

    .hdg {
      font-size: 3rem;
      letter-spacing: 0.03em;
      font-weight: 700;
    }

    .content {
      max-width: 60%;
      margin-top: 40px;
      font-size: 1.25rem;
      line-height: 1.8;
    }

    .txt {
      + .txt {
        margin-top: 20px;
      }
    }

    .link {
      width: fit-content;
      display: block;
      margin-top: 60px;
      font-size: 1.25rem;
      letter-spacing: 0.03em;
      font-weight: 700;
      color: #000;
      text-decoration: underline;
      transition: opacity 0.3s ease;

      &:hover {
        opacity: 0.6;
      }
    }
  }