/* ==========================================
   1. ページ全体のインナー枠（読みやすさの制限）
========================================== */
.about-inner {
    /* 親要素（main-container）の中で広がるが、800px以上にはならない */
    width: 100%; 
    max-width: 800px; 
    
    /* main-containerのど真ん中に配置しつつ、上下の余白を動的にする */
    margin: clamp(15px, 4vw, 30px) auto;
    
    display: flex;
    flex-direction: column;
    
    /* セクション（ブロック）同士の大きな隙間 */
    gap: clamp(15px, 4vw, 30px); 
}

/* ==========================================
   2. 各要素ブロック（縦並び・中央揃え）
========================================== */
.about-section {
    display: flex;
    flex-direction: column;
    align-items: center; /* 横方向の中央揃え */
    text-align: center;  /* 文字の中央揃え */
}

/* ==========================================
   3. 個別のパーツデザイン
========================================== */
/* タイトル */
.about-title {
    color: #ffffff;
    font-size: clamp(15px, 4vw, 42px);
    letter-spacing: 2px;
    font-weight: bold;
    
    /* 下に線を引いてアクセントにする（不要なら削除OK） */
    border-bottom: 2px solid #1af7fb;
    padding-bottom: 10px;
}

/* 説明文 */
.about-desc {
    color: #ffffff;
    font-size: clamp(14px, 1.5vw, 18px);
    width: 100%;
}

/* 画像を囲む箱 */
.about-image {
    width: 100%;
}

/* 画像本体の設定 */
.about-image img {
    width: 100%;
    height: auto;
}