@charset "UTF-8";

/* ==================================================
   Base & Reset
   ================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 400;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    color: #333;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* ==================================================
   Layout
   ================================================== */

.l-container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 24px;
}

@media (min-width: 1200px) {
    .l-container { padding-inline: 0; }
}

.u-img-pc { display: block; width: 100%; }
.u-img-sp { display: none; width: 100%; }

@media (max-width: 767px) {
    .u-img-pc { display: none; }
    .u-img-sp { display: block; }
}

/* テーマ */
.u-theme-dark {
    background-color: #0f233d;
    color: #ffffff;
}

.u-w-full-vw {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}
.u-w-600 { width: 600px; max-width: 100%; margin-inline: auto; }
.u-w-310 { width: 310px; max-width: 100%; margin-inline: auto; }
.u-text-center { text-align: center; }

/* ==================================================
   Margins
   ================================================== */

/* 1. 見出し画像の下、およびテキストの下 (共通 60/40) */
.u-mb-heading,
.u-mb-default { 
    margin-bottom: 60px; 
}

.u-mb-02-main { 
    margin-bottom: 160px; 
}

@media (max-width: 767px) {
    .u-mb-heading,
    .u-mb-default { 
        margin-bottom: 40px; 
    }
    .u-mb-02-main { 
        margin-bottom: 60px; 
    }
}

.u-mb-03-01 { margin-bottom: 100px; }
.u-mb-03-02 { margin-bottom: 0px; }
.u-mb-03-03 { margin-bottom: 160px; }

@media (max-width: 767px) {
    .u-mb-03-01 { margin-bottom: 60px; }
    .u-mb-03-02 { margin-bottom: 40px; } /* CSV値 */
    .u-mb-03-03 { margin-bottom: 60px; }
}

.u-w-full-vw { width: 100vw; margin-left: calc(50% - 50vw); }
.u-w-600 { width: 600px; max-width: 100%; margin-inline: auto; }
.u-w-310 { width: 310px; max-width: 100%; margin-inline: auto; }
.u-text-center { text-align: center; }

.u-mb-03-01 { margin-bottom: 100px; }
.u-mb-03-02 { margin-bottom: 0px; }
.u-mb-03-03 { margin-bottom: 160px; }

@media (max-width: 767px) {
    .u-mb-03-01 { margin-bottom: 60px; }
    .u-mb-03-02 { margin-bottom: 40px; }
    .u-mb-03-03 { margin-bottom: 60px; }
}

.u-mb-04-01 { margin-bottom: 100px; }
.u-mb-04-02 { margin-bottom: 160px; }
.u-mb-04-03 { margin-bottom: 60px; } 
.u-mb-04-04 { margin-bottom: 160px; }
.u-mb-04-05 { margin-bottom: 160px; }

.u-mb-text { margin-bottom: 40px; }

@media (max-width: 767px) {
    .u-mb-04-01 { margin-bottom: 40px; }
    .u-mb-04-02 { margin-bottom: 60px; }
    .u-mb-04-03 { margin-bottom: 40px; }
    .u-mb-04-04 { margin-bottom: 60px; }
    .u-mb-04-05 { margin-bottom: 60px; }

    .u-mb-text { margin-bottom: 30px; }
}

/* 100px / 60px */
.u-mb-100 { margin-bottom: 100px; }
/* 160px / 60px */
.u-mb-160 { margin-bottom: 160px; }

@media (max-width: 767px) {
    .u-mb-100 { margin-bottom: 60px; }
    .u-mb-160 { margin-bottom: 60px; }
}

.u-mb-60  { margin-bottom: 60px; }
.u-mb-80  { margin-bottom: 80px; }
.u-mb-100 { margin-bottom: 100px; }
.u-mb-160 { margin-bottom: 160px; }

@media (max-width: 767px) {
    .u-mb-60, .u-mb-80, .u-mb-100, .u-mb-160 {
        margin-bottom: 60px;
    }
}

.u-mb-24  { margin-bottom: 24px; }
.u-mb-40  { margin-bottom: 40px; }
.u-mb-60  { margin-bottom: 60px; }
.u-mb-80  { margin-bottom: 80px; }
.u-mb-100 { margin-bottom: 100px; }
.u-mb-160 { margin-bottom: 160px; }

@media (max-width: 767px) {
    .u-mb-24  { margin-bottom: 24px; }
    .u-mb-40  { margin-bottom: 40px; } /* 小さい余白は維持 */
    .u-mb-60  { margin-bottom: 60px; }
    .u-mb-80  { margin-bottom: 60px; }
    .u-mb-100 { margin-bottom: 60px; }
    .u-mb-160 { margin-bottom: 60px; } /* 大きい余白は60pxに統一 */
}

/* ==================================================
   Section: sec_01
   ================================================== */

.sec-01 { width: 100%; }
.sec-01__img-group img {
    width: 100vw;
}

/* ==================================================
   Section: sec_02
   ================================================== */

.sec-02 {
    /* 仕様: PC 160px / SP 60px */
    padding-top: 160px;
    padding-bottom: 160px; 
}

.sec-02__text {
    /* 仕様: PC 24px */
    font-size: 24px;
    text-align: center;
    line-height: 1.8;
}

@media (max-width: 767px) {
    .sec-02 {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .sec-02__text {
        font-size: 16px; 
        text-align: left;
    }
}

#sec_02 img[src*="ttl_02_h2_pc_01.png"] {
    width: 790px !important;
    max-width: 100%;
    margin: 0 auto;
}

.sec-02__heading {
    text-align: center;
}

/* ==================================================
   Section: sec_03 
   ================================================== */

.sec-03 {
    padding-top: 160px;
    padding-bottom: 160px;
    width: 100%;
}

.sec-03__text {
    font-size: 24px;
    text-align: center;
    line-height: 1.8;
}

.sec-03__full-img {
    width: 100%;
}
.sec-03__full-img img {
    width: 100%;
    height: auto;
}

.sec-03__split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* 左：テキスト */
.sec-03__split-text {
    flex: 1;
}

/* 右：画像 (600px固定) */
.sec-03__split-img {
    flex: 0 0 600px;
    width: 600px;
}
.sec-03__split-img img {
    /* 画像サイズ調整 */
    width: 100%;
    height: auto;
}

/* 横並び時のテキスト調整 */
.sec-03__text--side {
    text-align: left;
    font-size: 20px;
}

/* 見出し02用の余白 */
.u-mb-heading-small {
    margin-bottom: 30px;
}

@media (max-width: 767px) {
    .sec-03 {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .sec-03__text {
        font-size: 16px;
        text-align: left;
    }

    /* 横並び解除 -> 縦積み */
    .sec-03__split {
        display: flex;
        flex-direction: column-reverse;
        gap: 32px;
    }

    .sec-03__split-img {
        width: 100%;
        max-width: 310px; /* CSV sp値 */
        margin: 0 auto;
        flex: none;
    }
    
    .sec-03__text--side {
        font-size: 16px;
    }
}

/* ==================================================
   Component: CTA (Fixed Specifications)
   ================================================== */
.cta { width: 100%; }

.cta__box {
    background-color: #ae0000; 
    border-radius: 20px;
    overflow: hidden;
    padding-bottom: 60px;
}

.cta__band { margin-bottom: 20px; }

.cta__title {
    color: #fff;
    font-family: "M PLUS 1p", sans-serif;
    font-size: 40px; /* PC */
    text-align: center;
    margin: 0 0 40px;
    font-weight: 400;
}

.cta__buttons {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding-inline: 40px;
}

.cta__btn { transition: opacity 0.3s; }
.cta__btn:hover { opacity: 0.8; }

@media (max-width: 767px) {
    .cta__box {
        border-radius: 10px;
        padding-bottom: 40px;
    }
    .cta__title {
        font-size: 20px; /* SP */
        margin-bottom: 24px;
    }
    .cta__buttons {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding-inline: 20px;
    }
}

/* ==================================================
   2. Section: sec_04
   ================================================== */
.sec-04 {
    padding-top: 160px;
    padding-bottom: 160px;
}

.sec-04__text {
    font-size: 24px;
    text-align: center;
    line-height: 1.8;
    margin-top: 0; 
}

.sec-04__heading-sub {
    text-align: center;
    margin-bottom: 60px; /* 修正：60pxに変更 */
}

/* PC用画像設定 */
.sec-04__heading-sub .u-img-pc {
    width: 640px;
    max-width: 100%;
    margin: 0 auto;
}

/* SP用画像設定 */
.sec-04__heading-sub .u-img-sp {
    width: 100%;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .sec-04__heading-sub {
        margin-bottom: 60px; 
    }
}

.sec-04__img img {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .sec-04 {
        background-color: #0f233d !important;
        padding-top: 60px;
        padding-bottom: 60px;
    }
    
    .sec-04__text {
        font-size: 16px;
        text-align: left;
    }

    .sec-04__heading-sub img {
        width: 100%;
        max-width: 342px;
    }
}

/* ==================================================
   1. Margins
   ================================================== */
.u-mb-24  { margin-bottom: 24px; }
.u-mb-40  { margin-bottom: 40px; }
.u-mb-60  { margin-bottom: 60px; }
.u-mb-80  { margin-bottom: 80px; }
.u-mb-100 { margin-bottom: 100px; }
.u-mb-160 { margin-bottom: 160px; }

@media (max-width: 767px) {
    .u-mb-24  { margin-bottom: 24px; }
    .u-mb-40  { margin-bottom: 40px; } 
    .u-mb-60  { margin-bottom: 60px; }
    .u-mb-80  { margin-bottom: 60px; }
    .u-mb-100 { margin-bottom: 60px; }
    .u-mb-160 { margin-bottom: 60px; }
}

/* ==================================================
   Section: sec_05
   ================================================== */
.sec-05 {
    background-color: #fff;
    padding-top: 160px;
    padding-bottom: 160px;
    color: #333;
}

.sec-05 p,
.sec-05__text,
.sec-05__desc {
    margin-top: 0 !important;
}

.u-fz-35 { font-size: 35px; line-height: 1.5; }
.u-fz-24 { font-size: 24px; line-height: 1.8; }
.u-fz-20 { font-size: 20px; line-height: 1.8; }
.u-fz-18 { font-size: 18px; line-height: 1.8; }
.u-fw-bold { font-weight: bold; }

.sec-05__text {
    text-align: center; /* 基本は中央 */
}
.u-text-left {
    text-align: left !important; /* 左揃え強制 */
}

/* --- 2カラムレイアウト --- */
.sec-05__split {
    display: flex;
    align-items: center;
    gap: 60px;
}
.sec-05__split-img {
    flex: 0 0 var(--pc-width, 645px);
    width: var(--pc-width, 645px);
}
.sec-05__split-img img {
    width: 100%;
    height: auto;
}
.sec-05__split-text {
    flex: 1;
    text-align: left;
}

/* --- 画像幅制御 (Wrapper) --- */
.sec-05__img-wrap {
    text-align: center;
    width: var(--pc-width, 100%);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.sec-05__img-wrap img {
    width: 100%;
    height: auto;
}

/* --- 全幅画像 --- */
.sec-05__full-img {
    width: 100%;
}
.sec-05__full-img img {
    width: 100%;
    height: auto;
}

/* --- 見出し画像 --- */
.sec-05__heading {
    text-align: center;
}
.sec-05__heading img {
    max-width: 100%;
    height: auto;
}

/* ==================================================
   SP Responsive
   ================================================== */

@media (max-width: 767px) {
    .sec-05 {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .sec-05__split {
        display: block; 
    }
    .sec-05__split-img {
        width: var(--sp-width, 342px); 
        max-width: 100%;
        margin: 0 auto 30px;
    }
    .sec-05__split-text {
        text-align: left;
    }

    /* フォントサイズ縮小 */
    .u-fz-35 { font-size: 20px; }
    .u-fz-24 { font-size: 16px; }
    .u-fz-20 { font-size: 14px; }
    .u-fz-18 { font-size: 13px; }

    .sec-05__img-wrap {
        width: var(--sp-width, 342px) !important;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ==================================================
   Section: sec_06
   ================================================== */
.sec-06 {
    padding-top: 160px;
    padding-bottom: 160px;
}

.sec-06__placeholder {
    text-align: center;
    opacity: 0.5;
    font-size: 20px;
    letter-spacing: 0.1em;
}

@media (max-width: 767px) {
    .sec-06 {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

/* ==================================================
   Footer
   ================================================== */

.footer {
    background-color: #343434;
    color: #ffffff;
    padding: 20px 0;
    text-align: center;
}

.footer__copyright {
    font-size: 18px;
}

/* SP Responsive */
@media (max-width: 767px) {
    .footer__copyright {
        font-size: 13px;
    }
}