/* ==========================================
   1. サイト全体のベース設定
========================================== */
html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* 画面の高さを100%確保 */
}

body {
    background-color: #222222;
    color: #ffffff;
    /* Flexboxで縦並びのレイアウトを作る */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 画面の高さ分を最低保証 */
}

/* ページ内のメインコンテンツを囲む箱 */
.wrapper {
    flex: 1; /* 余白をすべてここに割り当ててフッターを押し下げる */
    
    /* ヘッダーの分だけ下に押し下げる（旧bodyのpadding-topをこちらへ移動） */
    padding-top: clamp(70px, 6vw, 100px);
}

/* ==========================================
   1. メインコンテナ
========================================== */
.main-container {
    margin: 0 auto;
    width: 80%;
    max-width: 1400px; /* 4K対応：広がりすぎ防止 */
    padding: 0px;
}

/* ==========================================
   2. 共通の見出し（セクションタイトル）
========================================== */
h2.title {
    border-left: 5px solid #1af7fb;
    color: #eeeeee;
    padding-left: 10px;
    
    /* 【追加】見出しのサイズもスマホ〜4Kで滑らかに可変させます */
    font-size: clamp(16px, 2vw, 28px);
}

h3.sub-title {
    border-left: 5px solid #1af7fb;
    color: #eeeeee;
    padding-left: 10px;
    
    /* 【追加】見出しのサイズもスマホ〜4Kで滑らかに可変させます */
    font-size: clamp(16px, 1.5vw, 22px);
}



/* ==========================================
   3. メッセージエリア（各ページ共通パーツ）
========================================== */
.message {
    text-align: center; 
    text-shadow: 0 0 1px #ffffff, 0 0 15px rgba(79, 174, 234, 1.0);
    
    /* 4K対応：上下と左右の余白を画面幅に合わせて動的に変化 */
    padding: clamp(30px, 4vw, 50px) clamp(10px, 2vw, 20px); 
}

/* メッセージの文字(h3)の設定 */
.message h3 {
    margin: 0; 
    
    /* 4K対応：14px〜24pxの間で画面に合わせて可変 */
    font-size: clamp(14px, 1.5vw, 24px); 
    
    color: #ffffff; 
    font-weight: normal; 
    line-height: 1.6; 
}

/* ==========================================
   スムーススクロールの設定（htmlタグに追加）
========================================== */
html {
    /* 一瞬で飛ぶのではなく、滑らかにスクロールさせる */
    scroll-behavior: smooth; 
}

/* ==========================================
   固定ヘッダーの潜り込み防止（すべてのid要素に適用）
========================================== */
/* ページ内ジャンプの着地点を、ヘッダーの高さ分（今回は最大100px）だけ下にズラす */
[id] {
    scroll-margin-top: clamp(70px, 6vw, 100px); 
}

/* ==========================================
   リンク（aタグ）の基本設定
========================================== */
a {
    /* 1. 色を固定する（お好みの色に変更してください） */
    color: #1af7fb; 
    /* 2. 下線をなくす */
    text-decoration: none; 
    /* ホバーした時に一瞬で変わるのではなく、0.3秒かけてフワッと変化させる */
    transition: all 0.3s ease; 
}

/* ==========================================
   ホバー時（マウスが乗った時）の設定
========================================== */
a:hover {
    filter: brightness(0.7);
}