/* ========================================
   GOエナジー株式会社
   style.css (メインビジュアル対応・完全版)
======================================== */

/* -----------------------------
   Reset
----------------------------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:
        "Yu Gothic",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        "sans-serif";
    color:#333;
    background:#ffffff;
    line-height:1.8;
    font-size:16px;
}

/* -----------------------------
   Layout
----------------------------- */

.container{
    width:90%;
    max-width:1200px;
    margin:0 auto;
}

/* -----------------------------
   Header
----------------------------- */

.site-header{
    background:#006934;
    border-bottom:1px solid #dddddd;
    padding:30px 0;
}

.page-title{
    color:#FFFFFF;
    font-size:36px;
    margin-bottom:10px;
}

.concept{
    color:#FFFFFF;
    font-size:18px;
    margin-bottom:25px;
}

/* -----------------------------
   Navigation
----------------------------- */

.main-nav ul{
    list-style:none;
    display:flex;
    gap:30px;
    flex-wrap:wrap;
    padding-left:0; /* 左側の不要なズレを解消 */
}

.main-nav a{
    color:#FFFFFF;
    text-decoration:none;
    font-weight:bold;
    transition:.3s;
}

.main-nav a:hover{
    color:#3F72AF;
}

/* -----------------------------
   Main
----------------------------- */

main{
    padding:60px 0;
}

/* -----------------------------
   Section
----------------------------- */

section{
    margin-bottom:80px;
}

.section-title{
    color:#006934;
    border-left:6px solid #006934;
    padding-left:15px;
    margin-bottom:30px;
    font-size:30px;
}

/* -----------------------------
   Hero (メインビジュアルエリア - プランA適用)
----------------------------- */

.hero {
    margin-bottom: 80px;
}

/* ========================================
   News / お知らせ
======================================== */

.news-box h3{
    color:#006934;
    font-size:24px;
    margin-bottom:20px;
}


.news-list{
    list-style:none;
    padding-left:0;
}


.news-list li{
    display:flex;
    gap:30px;
    padding:12px 0;
    border-bottom:1px solid #dddddd;
}


.news-date{
    width:120px;
    color:#666;
    font-weight:bold;
}


.news-title{
    color:#333;
}


/* スマホ対応 */

@media (max-width:768px){

    .news-list li{
        display:block;
    }

    .news-date{
        display:block;
        width:auto;
        margin-bottom:5px;
    }

}

.hero-image {
    position: relative; /* 文字を重ねる基準位置 */
    width: 100%;
    height: 450px;      /* パソコン表示時の高さ */
    border-radius: 10px;
    overflow: hidden;   /* 角丸からはみ出た画像をカット */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); 
/* 軽い影で立体感をプラス */
}

.hero-img {
    width: 100%;        /* 親要素の幅いっぱいに広げる */
    height: 100%;       /* 親要素の高さいっぱいに広げる */
    object-fit: cover;  /* 画像比率を保ったまま綺麗にトリミング表示 */
    display: block;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 画像の上に濃紺の半透明グラデーションを重ねて文字を読みやすくする */
/*
    background: linear-gradient(135deg, rgba(15, 44, 89, 0.9) 0%, rgba(15, 44, 89, 0.4) 100%);
*/
    
    /* 中の文字を垂直方向中央に配置 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px;
    color: #ffffff;
}

.hero-overlay .hero-title {
    color: #ffffff;
    font-size: 38px;
    margin-bottom: 15px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* 文字の後ろに影をつけて可読性アップ */
}

.hero-overlay .hero-copy {
    color: #ffffff;
    font-size: 26px;
    margin-bottom: 20px;
}

.hero-overlay .hero-text {
    color: #e0e0e0;
    max-width: 700px;
}

/* -----------------------------
   Card
----------------------------- */

.card{
    background:#fafafa;
    border:1px solid #dddddd;
    border-radius:8px;
    padding:30px;
}

/* -----------------------------
   Mission
----------------------------- */

.mission-box{
    text-align:center;
}

.mission-box h3{
    color:#006934;
    margin-bottom:20px;
    font-size:28px;
}

.mission-box p{
    margin-bottom:15px;
}

/* -----------------------------
   Tables
----------------------------- */

.business-table,
.profile-table{
    width:100%;
    border-collapse:collapse;
    margin-top:20px;
}

.business-table th,
.profile-table th{
    background:#006934;
    color:#ffffff;
    padding:15px;
    text-align:left;
}

.business-table td,
.profile-table td{
    border:1px solid #dddddd;
    padding:18px;
    vertical-align:top;
}

.business-table ul{
    margin-left:20px;
}

.profile-table th{
    width:25%;
}

/* -----------------------------
   Notice
----------------------------- */

.notice{
    margin-top:20px;
    padding:15px;
    background:#FFF3CD;
    background:#CDCDCD;
    color:#856404;
    color:#121212;
    border:1px solid #FFE69C;
    border-radius:5px;
}

/* -----------------------------
   Lists
----------------------------- */

ul{
    padding-left:20px;
}

li{
    margin-bottom:8px;
}

/* -----------------------------
   Footer
----------------------------- */

.site-footer{
    background:#006934;
    color:#ffffff;
    text-align:center;
    padding:40px 0;
    margin-top:80px;
}

/* -----------------------------
   Link
----------------------------- */

a{
    color:#006934;
}

a:hover{
    color:#3F72AF;
}

/* -----------------------------
   Responsive
----------------------------- */

@media (max-width:992px){

    .page-title{
        font-size:30px;
    }

    .hero-overlay .hero-title {
        font-size:30px;
    }

    .hero-overlay .hero-copy {
        font-size:22px;
    }

}

@media (max-width:768px){

    body{
        font-size:15px;
    }

    .page-title{
        font-size:26px;
    }

    .section-title{
        font-size:24px;
    }

    .main-nav ul{
        flex-direction:column;
        gap:15px;
    }

    /* スマホ時のヒーローエリア調整 */
    .hero-image {
        height: auto;
        min-height: 320px;
    }

    .hero-overlay {
        padding: 25px;
        justify-content: flex-end; /* スマホでは下寄せにして画像の上部を見せる */
        background: linear-gradient(to top, rgba(15, 44, 89, 0.95) 50%, rgba(15, 44, 89, 0.2) 100%);
    }

    .hero-overlay .hero-title {
        font-size: 22px;
    }

    .hero-overlay .hero-copy {
        font-size: 16px;
    }

    .hero-overlay .hero-text {
        font-size: 13px;
    }

    .business-table,
    .profile-table{
        display:block;
        overflow-x:auto;
    }

}

@media (max-width:480px){

    .container{
        width:94%;
    }

    .hero-overlay .hero-title {
        font-size:20px;
    }

    .hero-overlay .hero-copy {
        font-size:15px;
    }

}

/* ========================================
   Project (画像横並びレイアウト)
======================================== */

/* カードを横並びのFlexボックスにする */
.project-flex {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 縦方向の中央揃え */
    gap: 30px;          /* テキストと画像の間の余白 */
}

/* テキスト領域の横幅 */
.project-body {
    flex: 1;            /* 空いているスペースをいっぱいに広げる */
}

/* 画像領域（メインビジュアルの約半分程度のサイズ感に調整） */
.project-image-box {
    width: 40%;         /* カード全体の40%の幅に制限 */
    max-width: 450px;   /* 大きくなりすぎないように上限を設定 */
    height: 250px;      /* 画像の高さを固定 */
    border-radius: 6px;
    overflow: hidden;   /* 角丸からはみ出た画像をカット */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* 軽い影をプラス */
}

/* 画像自体のトリミング設定 */
.project-img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* 画像の比率を保ったまま綺麗にトリミング表示 */
    display: block;
}

/* -----------------------------
   Responsive (Project用スマホ対応)
----------------------------- */
@media (max-width: 768px) {
    /* スマホ時は縦並びにする */
    .project-flex {
        flex-direction: column-reverse; /* 画像を上、テキストを下に配置 */
        align-items: stretch;
        gap: 20px;
    }

    /* スマホ時は画像の横幅を100%に広げる */
    .project-image-box {
        width: 100%;
        max-width: 100%;
        height: 200px; /* スマホで見やすい高さに微調整 */
    }
}


.submit-btn:active {
    transform: scale(0.98); /* クリック時に少しへこむ演出 */
}

/* -----------------------------
   Responsive (Contactスマホ対応)
----------------------------- */
@media (max-width: 768px) {
    .contact-card {
        padding: 20px; /* スマホではカードの内側余白を少し狭く */
    }
    .contact-lead {
        text-align: left; /* スマホでは左揃えの方が見やすい */
        font-size: 0.9rem;
    }
    .submit-btn {
        width: 100%; /* スマホではボタンを横いっぱいに広げる */
        padding: 15px 0;
    }
}

/* ========================================
   Contact (メーラー起動ボタン)
======================================== */

.contact-card {
    text-align: center;
    padding: 50px 30px;
}

.contact-lead {
    margin-bottom: 30px;
    color: #333;
    font-size: 1.05rem;
}

.contact-action {
    margin: 35px 0;
}

/* メール起動ボタンのデザイン（元の送信ボタン風のモダンな見た目） */
.mail-btn {
    display: inline-block;
    background-color: #006934;
    color: #ffffff !important; /* 文字色を強制的に白に */
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    padding: 18px 50px;
    border-radius: 35px;
    box-shadow: 0 4px 15px rgba(15, 44, 89, 0.25);
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
}

.mail-btn:hover {
    background-color: #3F72AF;
    box-shadow: 0 6px 20px rgba(63, 114, 175, 0.35);
    transform: translateY(-2px); /* ホバー時に少し浮き上がる演出 */
}

.mail-btn:active {
    transform: translateY(0);
}

/* ボタンの下の補足テキスト */
.contact-sub-text {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* スマホ表示時の調整 */
@media (max-width: 768px) {
    .contact-card {
        padding: 30px 20px;
    }
    .contact-lead {
        text-align: left;
        font-size: 0.95rem;
    }
    .mail-btn {
        width: 100%;
        padding: 15px 10px;
        font-size: 1rem;
    }
    .contact-sub-text {
        text-align: left;
    }
}

/* ========================================
   MADS Philosophy 小見出し強調
======================================== */

#philosophy .business-table h4 {
    color: #006934;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* ========================================
   Table Title
======================================== */

.table-title{
    color:#006934;
    font-size:26px;
    font-weight:bold;
    margin-top:40px;
    margin-bottom:15px;
    padding-left:15px;
    border-left:6px solid #006934;
}

/* MADS Philosophy 内 h3 強調 */

.philosophy-sub-title{
    color:#006934;
    font-size:28px;
    font-weight:bold;
    margin-top:40px;
    margin-bottom:20px;
}