/*
Theme Name: Slurm LP Theme
Description: Slurm Workload Manager 導入LP用テーマ
Author: Your Name
Version: 1.0
*/

/* 基本設定（余白をリセット） */
body, h1, p {
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

/* ヒーローセクション（背景画像の設定） */
.hero {
    /* ①ロゴが切れないよう、高さを「400px」から「auto」か「高さ指定」に変更 */
    min-height: 500px; 
    background-image: url('images/slum_top.jpg');   /* 画像名を確認してください */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center; /* 垂直中央 */
    justify-content: center; /* ②中央寄せに変更 */
    color: #ffffff;
    text-align: center; /* ②テキスト自体も中央揃え */
    margin-top: 130px;
}

@media screen and (min-width:768px) and (max-width:1024px) {
    .hero {
        margin-top: 0px;
    }
}

/* テキストエリアの装飾 */
.hero-content {
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9);
}

.hero-sub-copy {
    /* ②文字を大きく */
    font-size: 1.5rem; 
    font-weight: bold;
    margin-bottom: 1rem;
}

.hero-title {
    /* ②文字を大きく */
    font-size: 4rem; 
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
}

/* s, W, M の色指定 */
.highlight {
    color: #42afea;
}

.hero-main-copy {
    /* ②文字を大きく */
    font-size: 3.5rem; 
    font-weight: bold;
}

/* 共通設定：中身を中央に寄せるための箱 */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 20px;
    display: flex;
    align-items: center;
    gap: 40px; /* 画像と文字の間の余白 */
}

/* Serviceセクション全体 */
.service-intro {
    background-color: #ffffff;
}

/* 左側：画像エリア */
.service-visual {
    flex: 1; /* 幅を半分に */
}
.service-visual img {
    max-width: 100%;
    height: auto;
}

/* 右側：テキストエリア */
.service-text {
    flex: 1; /* 幅を半分に */
}

.service-text h2 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 10px;
    border-bottom: 2px solid #42afea; /* 下線をつけて強調 */
    display: inline-block;
}

.service-text h3 {
    font-size: 1.2rem;
    margin: 20px 0 10px;
}

.service-text ul {
    list-style: none;
    padding: 0;
}

.service-text ul li {
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

/* リストの先頭に青い「・」をつける */
.service-text ul li::before {
    content: "●";
    color: #42afea;
    position: absolute;
    left: 0;
}

.service-text p {
    line-height: 1.6;
    margin-top: 20px;
}
.service-lead {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 20px 20px; /* 下側の余白を少し狭く */
    text-align: center;
}

.service-lead h2 {
    font-size: 2rem;
    color: #333; /* 黒文字 */
    display: block;
    padding-bottom: 15px;
    margin-bottom: 30px;
    position: relative;
    border-bottom: 2px solid #42afea; /* 下線：#42afea */
}

.lead-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1rem;
    color: #333;
}

.highlight-text {
    font-weight: bold;
    color: #333; /* 必要であれば色も指定 */
}
/* 画面幅が768px以下（スマホ・タブレット）の場合の設定 */
@media screen and (max-width: 768px) {
    .container {
        flex-direction: column; /* 横並びを縦並びに変更 */
        padding: 40px 20px;
        gap: 30px;
    }

    .service-visual, 
    .service-text {
        flex: none;
        width: 100%; /* 横幅いっぱいに広げる */
    }

    .service-text {
        text-align: left; /* テキストは左揃えを維持 */
    }

    /* ヒーローセクションの文字サイズもスマホ向けに調整 */
    .hero-title {
        font-size: 2.2rem;
    }
    .hero-main-copy {
        font-size: 1.8rem;
    }
}

/* 特徴セクション全体 */
.features {
    background-color: #f9f9f9;
    padding: 80px 0;
}

.features-title {
    text-align: center;
    margin-bottom: 50px;
    padding: 0 20px;
}

.features-title h2 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 20px;
}

/* 縦にカードを並べるためのコンテナ */
.container-column {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 特徴カード本体 */
.feature-card {
    background: #fff;
    border: 2px solid #42afea; /* 青い枠線 */
    position: relative;
    margin-bottom: 60px;
    padding: 30px;
}

/* カード右上の数字 */
.card-number {
    position: absolute;
    top: -20px;
    right: 30px;
    background: #42afea;
    color: #fff;
    padding: 5px 15px;
    font-weight: bold;
    font-size: 1.2rem;
}

/* カードの見出し */
.card-header h3 {
    text-align: center;
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

/* カードの中身（画像とテキストの横並び） */
.card-content {
    display: flex;
    align-items: center;
    gap: 30px;
}

.card-visual {
    flex: 1;
}

.card-visual img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.card-text {
    flex: 2; /* テキストを少し広めに */
    line-height: 1.7;
    font-size: 1rem;
}

/* スマホ用設定：カード内も縦並びにする */
@media screen and (max-width: 768px) {
    .card-content {
        flex-direction: column;
    }
    .card-header h3 {
        font-size: 1.2rem;
    }
}
/* 02専用：中身を縦に並べる */
.card-content-vertical {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.card-text-top {
    line-height: 1.7;
    font-size: 1rem;
    text-align: left;
}

/* 3つの画像を横に並べる設定 */
.card-visual-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.grid-item {
    flex: 1;
    text-align: center;
}

.grid-item img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.grid-item p {
    font-size: 0.9rem;
    font-weight: bold;
    color: #42afea;
}



/* スマホ対応：3つの並びを縦にする */
@media screen and (max-width: 768px) {
    .card-visual-grid {
        flex-direction: column;
        align-items: center;
    }
    .grid-item {
        width: 80%;
        margin-bottom: 20px;
    }
}

/* お問い合わせセクション全体 */
.cta-section {
    background-image: url('images/AdobeStock_350458730.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* パララックス効果（背景固定） */
    color: #fff;
    text-align: center;
    overflow: hidden; 
    padding-bottom: 80px; /* フッターとの間に大きなクッションを作る */
    margin-bottom: 350px !important; /* 強制的にフッターを200px下に押し下げる */
    display: block !important;
}

/* 文字を読みやすくするための青い重ね地 */
.cta-overlay {
    background-color: rgba(66, 175, 234, 0.7); /* コーポレートカラーを半透明で */
    padding: 80px 20px;
}

.cta-container {
    max-width: 900px;
    margin: 0 auto;
}

.cta-container h2 {
    font-size: 2.2rem;
    margin-bottom: 30px;
    line-height: 1.4;
}

.cta-description {
    text-align: left; /* 長文なので左寄せ */
    line-height: 1.8;
    margin-bottom: 50px;
}

.cta-description p {
    margin-bottom: 1.5rem;
}

/* お問い合わせボタン */
.cta-button {
    display: inline-block;
    background-color: #fff;
    color: #42afea;
    padding: 20px 40px;
    border-radius: 50px; /* 角丸 */
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.cta-button:hover {
    background-color: #42afea;
    color: #fff;
    transform: translateY(-3px); /* 浮き上がる演出 */
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .cta-container h2 {
        font-size: 1.6rem;
    }
    .cta-button {
        font-size: 1rem;
        padding: 15px 25px;
    }
}

/* 以前追加したスマホ用設定（@media）を探して、中身を追記します */
@media screen and (max-width: 768px) {
    .hero {
        /* スマホ用画像に切り替え */
        background-image: url('images/slum_mobile_top.jpg');
        /* スマホだと高さが必要な場合が多いので、調整（必要に応じて数値を変更してください） */
        min-height: 600px; 
    }
 .container {
        flex-direction: column;
        padding: 40px 20px;
        gap: 30px;
    }
    /* ...省略... */
}
 
.service-text p {
    line-height: 1.6;
    margin-top: 20px;
}
.service-lead2 {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 20px 20px; /* 下側の余白を少し狭く */
    text-align: center;
}

.service-lead2 h2 {
    font-size: 2rem;
    color: #333; /* 黒文字 */
    display: block;
    padding-bottom: 15px;
    margin-bottom: 30px;
    position: relative;
    border-bottom: 2px solid #42afea; /* 下線：#42afea */
}
.service-intro2 {
    background-color: #ffffff;
}

.highlight-text {
    background: #f4f9ff; /* 爽やかな薄い青背景 */
    border-left: 6px solid #42afea; /* 芯の通った太めのアクセント線 */
    padding: 25px 30px;
    margin: 40px 0;
    line-height: 2;
    font-weight: bold;
    color: #333;
    font-size: 1.05rem;
    border-radius: 0 4px 4px 0; /* 右側の角だけ少し丸くすると今風です */
}