/* 基本のページ全体のスタイル */
body {
    margin: 0;
    padding: 0;
    padding-top: 75px; /* fixed header (PC) */
    font-size: 16px;
    line-height: 1.6;
}

/* 管理バーあり（PC） */
body.admin-bar {
    padding-top: 107px; /* 75px header + 32px admin bar */
}

/* SP: ヘッダー高さ 60px */
@media screen and (max-width: 1200px) {
    body            { padding-top: 60px; }
    body.admin-bar  { padding-top: 92px; } /* 60px + 32px */
}

/* 管理バーあり・極小画面 */
@media screen and (max-width: 600px) {
    body.admin-bar  { padding-top: 106px; } /* 60px + 46px */
}

/* 見出しの基本スタイル */
/* h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

h2 {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
} */


/* メインタイトルのスタイル */
.main-title {
    font-size: 2.5rem; /* メインタイトルのフォントサイズを設定 */
    color: #333; /* メインタイトルの色を設定 */
    font-weight: bold; /* 太字に設定 */
    margin: 0; /* デフォルトの余白を削除 */
}

/* 下線のスタイル */
.underline {
    width: 60px; /* 下線の幅を設定 */
    height: 4px; /* 下線の高さを設定 */
    background-color: #4CC313; /* 下線の色を緑色に設定 */
    margin: 10px auto; /* 上下に余白を設定し、中央に配置 */
    border-radius: 2px; /* 下線の角を丸める */
}

/* 親要素に relative を設定 */
#intro {
    position: relative; /* 子要素の位置を親要素を基準にする */
}


/* 見出しのスタイル */
.banner-text {
    position: absolute; /* 親要素を基準に絶対位置を指定 */
    left: 50%; /* 横方向の中央に配置 */
    bottom: 10%; /* 下端から10%の位置に配置 */
    transform: translateX(-50%); /* 横方向の中央揃え */
    text-align: center; /* テキストを中央揃え */
}

/* 見出しのスタイル */
.banner-text h2 {
    font-size: 2.5rem; /* 見出しのフォントサイズを調整 */
    font-weight: bold; /* 見出しを太字に設定 */
    color: #4BC314; /* テキストの色を設定 */
    margin: 0;
}

/* サブテキストのスタイル */
.banner-text p {
    font-size: 1rem; /* サブテキストのフォントサイズを調整 */
    font-weight: normal;
    color: #3C3C3C;
    margin: 10px 0 0; /* 上に余白を追加 */
}


/* Smash Balloon オンボーディングウィジェット・チャットバブルを非表示 */
[class*="sbi-wizard"],
[class*="sbi-onboarding"],
[id*="sbi-wizard"],
[class*="smash-balloon"],
[id*="smash-balloon"],
[class*="sb-onboarding"],
.sb-bubble,
[class*="sbb-"] { display: none !important; }

/* レスポンシブ対応：画面幅が768px以下のとき */
@media (max-width: 768px) {
    .section-title {
        padding: 15px; /* 上下の余白を縮小 */
        margin: 15px auto; /* 上下の余白を縮小 */
    }

    .section-subtitle {
        font-size: 1rem; /* サブタイトルのフォントサイズを縮小 */
    }

    .main-title {
        font-size: 1.2rem; /* メインタイトルのフォントサイズを縮小 */
    }

    .underline {
        width: 50px; /* 下線の幅を縮小 */
    }
}