/* ヘッダー */
/* ヘッダー */
#header {
    width: 100%;
    height: auto; /* 高さを自動調整 */
    text-align: center;
    display: flex; /* フレックスボックスで中央揃え */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* はみ出し部分を非表示 */
   background-color: #fff; /* 背景色を白に変更 */
    margin-top: 100px; /* 上に20pxの余白を追加 */
}

#header img {
    max-width: 100%; /* 親要素の幅にフィット */
    height: auto; /* アスペクト比を維持 */
    display: block;
}

/* セクション */
#sec01 {
    padding: 10px;
}

.vision {
    margin: 20px auto;
    width: 90%;
    max-width: 600px;
    line-height: 1.6;
}

.vision p {
    margin: 10px 0;
}

/* PROFILEセクション */
#sec05 {
    padding: 20px;
    background-color: #fff;
}

.profile dl {
    display: grid;
    grid-template-columns: 30% 70%; /* 左30%, 右70%の幅で表示 */
    gap: 10px 20px; /* 行間と列間の余白 */
    max-width: 600px;
    margin: 0 auto;
}

.profile dt {
    text-align: right;
    font-weight: bold;
}

.profile dd {
    text-align: left;
}
/* フォントの統一 */
body {
    font-family: '游ゴシック', 'Yu Gothic', Arial, sans-serif; /* 游ゴシックを優先 */
    color: #333; /* 濃い目のグレー */
    margin: 0;
    padding: 0;
}

/* セクション全体の中央揃え */
#sec01 {
    text-align: center; /* セクション全体を中央揃え */
    margin: 0 auto;
    padding: 20px;
}

/* セクションタイトル */
#sec01 h2 {
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 20px; /* タイトル下に余白 */
}

/* 本文 */
#sec01 .vision {
    max-width: 600px; /* 最大幅を設定して改行を調整 */
    margin: 0 auto;
}

#sec01 .vision p {
    line-height: 1.6; /* 行間を調整 */
    margin-bottom: 10px; /* 各段落の余白 */
    word-break: break-word; /* 長い単語を適切に折り返し */
}

/* プロフィール表のレイアウト */
#sec05 .profile dl {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 左右均等の幅で配置 */
    gap: 10px; /* 行間の余白 */
    justify-content: center; /* グリッド全体を中央揃え */
}

#sec05 .profile dt {
    text-align: right; /* 項目名を右揃え */
    font-weight: bold;
}

#sec05 .profile dd {
    text-align: left; /* 内容を左揃え */
    margin: 0;
}
#sec05 h2 {
    text-align: center; /* 中央揃え */
    font-size: 24px; /* 適宜調整可能なフォントサイズ */
    line-height: 1.5; /* 行間の調整 */
    margin: 0 auto; /* 水平方向の中央揃え */
    margin-bottom: 20px; /* 下に20pxの余白を追加 */
}
.profile {
    text-align: center; /* テキストを中央揃え */
    margin: 0 auto; /* 必要に応じて全体を中央配置 */
}
.profile p strong {
    font-weight: bold; /* 太字（ブラウザデフォルトでも太字になります） */
    color: #000; /* 必要なら色を設定 */
}
/* 通常のヘッダー画像スタイル */
#header img {
    max-width: 70%; /* 通常の幅調整 */
    height: auto; /* 縦横比を維持 */
    display: block;
}

/* スマホ専用スタイル */
@media only screen and (max-width: 768px) {
    body {
        padding-top: 20px; /* 余白を全体に追加 */
    }

    #header {
        margin-top: 20px !important; /* 上に20pxの余白を確実に追加 */
        overflow: visible; /* 切れる問題を防ぐ */
        height: auto; /* 必要に応じて高さ調整可能 */
    }
}


 /* スマホ専用スタイル */
@media only screen and (max-width: 768px) {
    #header img {
        transform: scale(2); /* 150%に拡大 */
        transform-origin: center center; /* 中央基準 */
    }
}