/*********** メインエリア全体 ***********/
#mainFlexArea {
    display: flex;
    align-items: stretch;
    /* 子要素の高さを揃える */
    justify-content: space-between;
    margin-top: 0px;
    width: 100%;
    height: calc(100vh - 141px);
    /* ヘッダーが80pxの場合 */
    overflow: hidden;
    /* 内部スクロールを抑制 */
    min-height: 100%;
    /* 全体ビューに対して高さを設定 */
    box-sizing: border-box;
    background-color: #F4FBFA;
    /* 背景色を薄い緑青系に設定 */
    z-index: 1;
    /* メニューの下にある通常のエリア */
}

.centerArea {
    position: relative;
    /* 背景とブロックのレイヤーを作るための設定 */
    text-align: center;
    background-color: #fff;
    width: 55%;
    /* 中央エリアの幅 */
    min-height: calc(100vh - 141px);
    /* 中央エリアの高さ */
    padding: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* 影をつけて立体感を追加 */
    margin: 0 auto;
    /* 中央揃え */
    overflow: visible;
    /* コンテンツが見切れないように調整 */
}

/* メインコンテンツ内の全体調整 */
#mainContents {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/* 段落全体の統一 */
.projectLogoArea p,
.philosophyArea p,
.serviceArea ul li {
    font-size: 16px;
    /* 統一された文字サイズ */
    color: #555;
    /* 統一された文字色 */
    line-height: 1.8;
    /* 行間を広げて読みやすく */
    margin: 0 0 15px 0;
    /* 下部に統一した間隔 */
}

/* ロゴエリアのスタイル */
.projectLogoArea {
    margin-bottom: 15px;
    /* 間隔を減らす */
    padding: 0 10px;
    /* テキストに対する内側余白の適切な調整 */
}

.projectLogo {
    width: 70px;
    /* ロゴ画像の幅 */
    height: auto;
    margin-bottom: 15px;
    /* テキストと間隔を確保 */
}

.projectLogoArea h1 {
    font-size: 24px;
    color: #333;
    margin: 10px 0;
    font-weight: bold;
}

.projectOrigin {
    font-size: 16px;
    color: #666;
}

/* 事業理念エリア */
.philosophyArea {
    margin-bottom: 30px;
    text-align: left;
}

.philosophyArea h2 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #00A99D;
}

.philosophyTitle {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

.philosophyDescription {
    font-size: 13px;
    line-height: 2;
    color: #555;
}

/* サービスエリア */
.serviceArea {
    margin-top: 30px;
    text-align: left;
    /* 左揃えに変更 */
}

.serviceArea h2 {
    font-size: 20px;
    color: #00A99D;
    margin-bottom: 20px;
    text-align: left;
    /* 見出しは中央揃えを維持 */
}

.serviceArea h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 15px;
    border-left: 4px solid #00A99D;
    padding-left: 10px;
    font-weight: bold;
    text-align: left;
    /* 左揃えに変更 */
}

.serviceArea ul {
    list-style-type: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.serviceArea ul li {
    padding-left: 15px;
    position: relative;
    margin: 0 0 8px 0;
    /* 下部余白を8pxに調整 */
    font-size: 14px;
    /* 文字サイズを14pxに変更 */
}

.serviceArea ul li:before {
    content: "•";
    color: #00A99D;
    position: absolute;
    left: 0;
    font-size: 18px;
    /* 箇条書きマーカーは少し大きめに保持 */
    line-height: 1.6;
    /* 行間を少し調整 */
}

/* テキストボックス、ドロップシャドウ */
.textBox {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    width: 45vw;
    height: 730px;
    margin: auto;
    font-size: 15px;
    height: 730px;
    /* 必要に応じて固定する */
    overflow-y: auto;
    /* スクロール可能に変更 */
}

.overView,
.view {
    margin: 50px;
}

.overView {
    border-bottom: #00A99D 4px solid;
    margin-bottom: 50px;
}

.overView p {
    font-size: 40px;
    text-align: left;
    margin-bottom: 0;
}

.textArea {
    text-align: left;
}

.contentArea .contents {
    width: 30vw;
    margin: 30px;
}

.timeline {
    list-style: none;
}

.timeline>li {
    margin-bottom: 60px;
}

.profile-icon {
    width: 300px;
    /* 必要に応じてサイズを調整 */
    height: auto;
    border-radius: 50%;
    /* 丸型にしたい場合 */
    object-fit: cover;
    /* サイズが異なる場合に収まりよくする */
}
/* 928px以下に適用されるCSS（スマートフォン用） */
/* スマホ用修正 */
@media screen and (max-width: 928px) {
    @media screen and (max-width: 928px) {

        html,
        body {
            height: auto !important;
            overflow: auto !important;
        }

        #mainFlexArea {
            height: auto !important;
            /* 高さ固定解除 */
            overflow: visible !important;
            /* スクロール許可 */
            display: block !important;
            /* 縦積みレイアウト */
        }

        .centerArea {
            margin: auto;
            width: 95% !important;
            text-align: center;
        }

        .centerArea p {
            width: auto !important;
        }
    }
}