/* ==============================
   基本スタイル（PC・スマホ共通）
============================== */
body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-color: #fff;
}

.container {
    width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* ==============================
   ヒーローセクション
============================== */
/* PCヒーロー */
.hero, .mobile-hero {
    position: relative;
    text-align: center;
}

.hero img, .mobile-hero img {
    width: 100%;
    height: auto;
    display: block;
}

/* PCヒーロー見出し */
.hero h1 {
    position: absolute;
    bottom: 0;
    left: 10%;
    color: #2b3f7f;
    font-size: 80px;
    font-weight: bold;
    text-shadow:1px 1px 0 #ffffff, -1px -1px 0 #ffffff,
        -1px 1px 0 #ffffff, 1px -1px 0 #ffffff,
        0px 1px 0 #ffffff, 0-1px 0 #ffffff,
        -1px 0 0 #ffffff, 1px 0 0 #ffffff;
}

/* スマホヒーロー見出し */
.mobile-hero h3 {
    position: absolute;
    bottom: 0;
    left: 8%;
    color: #2b3f7f;
    font-weight: bold;
    text-shadow:1px 1px 0 #ffffff, -1px -1px 0 #ffffff,
        -1px 1px 0 #ffffff, 1px -1px 0 #ffffff,
        0px 1px 0 #ffffff, 0-1px 0 #ffffff,
        -1px 0 0 #ffffff, 1px 0 0 #ffffff;
    font-size: 25px; /* デフォルトスマホサイズ */
}

/* ==============================
   コンテンツ
============================== */
.content {
    text-align: center;
    margin-top: 80px;
}

.lead {
    font-size: 30px;
    margin-bottom: 60px;
}

/* ボタン */
.buttons {
    display: flex;
    justify-content: center;
    gap: 70px;
    flex-wrap: wrap;
    white-space: nowrap;
    margin-bottom: 150px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 217, 0, 0.5);
    color: #333;
    text-decoration: none;
    width: 260px;
    height: 65px;
    border-radius: 8px;
    font-size: 25px;
    font-weight: bold;
    border: none;
    box-shadow: 0 6px 0 rgba(180, 150, 0, 0.8);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 rgba(180, 150, 0, 0.8);
}

.btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 rgba(180, 150, 0, 0.8);
}

/* ==============================
   スマホコンテンツ
============================== */
.mobile-content {
    text-align: center;
    margin-top: 30px;
}

.mobile-lead {
    font-size: 20px;
    margin-bottom: 20px;
}

/* ボタン */
.mobile-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    white-space: nowrap;
    margin-bottom: 50px;
}

.mobile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 217, 0, 0.5);
    color: #333;
    text-decoration: none;
    width: 200px;
    height: 50px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    box-shadow: 0 6px 0 rgba(180, 150, 0, 0.8);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.mobile-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 rgba(180, 150, 0, 0.8);
}

.mobile-btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 rgba(180, 150, 0, 0.8);
}

/* ==============================
   フッター
============================== */
.main-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    width: 100%;
    background-color: #f8f8f8;
    text-align: center;
    border-top: 1px solid #ddd;
}

.footer {
    background: #f1f1f1;
    padding: 20px;
    text-align: center;
    font-size: 0.9rem;
}

.footer-content {
    text-align: center;
    margin-top: 10px;
    margin-left: 300px;
}

.footer-logo {
    display: flex;
    margin-left: 0px;
    gap: 40px;
}

.footer-link {
    color: #000;
    text-decoration: none;
    margin: 0 10px;
}

.footer-link:hover {
    text-decoration: underline;
}

.japhic-logo {
    height: 85px;
    width: auto;
}

/* ==============================
   スマホ用フッター（右端寄せ確定版）
============================== */
.mobilemain-footer {
    display: flex !important;   /* 強制的にFlexを適用 */
    justify-content: space-between; /* これで左右に分かれる */
    align-items: center;        /* 上下中央揃え */
    background-color: #f8f8f8;
    
    /* ここが重要！ */
    width: 100%;                /* 画面の端から端まで広げる */
    box-sizing: border-box;     /* paddingを含めて100%にする */
    padding: 20px 15px;         /* 左右に少し隙間を作る */
}

/* 左側：リンク集 */
.mobilefooter-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;    /* 文字の先頭を左揃え */
    gap: 3px;
    font-size: 11px;
    margin: 0;                  /* 余計なマージンを消す */
}

/* 右側：ロゴエリア */
.mobilefooter-logo {
    display: flex;
    align-items: flex-end;    /* ロゴ同士を「下端」で揃える */
    gap: 10px;
    margin-left: auto;        /* 右寄せ */
    margin-top: 50px;         /* ★ここでロゴ全体を下に下げています（数値はお好みで） */
}

/* ロゴのサイズ（高さが違う場合はここで調整） */
.mobilecompany-logo {
    height: 25px;            /* 会社ロゴを少し小さくしてバランス調整 */
    width: auto;
    margin-bottom: 2px;      /* 微調整：JAPHICロゴと高さを合わせるため */
}

.mobilejaphic-logo {
    height: 45px;
    width: auto;
}
/* ==============================
   メディアクエリ（スマホ用）
============================== */
@media screen and (max-width: 768px) {
    /* コンテナフル幅 */
    .container {
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
    }

    /* PCフッター非表示、スマホフッター表示 */
    .main-footer { display: none; }
    .mobilemain-footer { display: block; }

    /* ヒーロー見出しサイズ調整 */
    .mobile-hero h1 {
        font-size: 40px !important; /* 確実に上書き */
        left: 5%; /* スマホ用に位置調整 */
        bottom: 10px;
    }

    /* その他スマホ用文字サイズ調整 */
    h1 { font-size: 18px; }
}

/* ==============================
   PC表示時の切り替え設定
============================== */
@media screen and (min-width: 769px) {
    /* PCの時は、スマホ専用のクラスがついた要素をすべて消す */
    .mobile-only, 
    .mobile-hero, 
    .mobilemain-footer {
        display: none !important;
    }
}

/* ==============================
   スマホ表示時の切り替え設定（既存のものを修正）
============================== */
@media screen and (max-width: 768px) {
    /* スマホの時は、PC専用のクラスがついた要素を消す */
    .PC-only, 
    .hero, 
    .main-footer {
        display: none !important;
    }
    
    /* コンテナを100%にする既存の記述はそのままでOK */
    .container {
        width: 100%;
    }
}