@charset "UTF-8";

/* =========================================================
   Variables & Base
========================================================= */
:root {
    --color-pink: #ff66c4;
    --color-pink-light: #ffebf0;
    --color-line: #06C755;
    --color-line-hover: #05b34c;
    --color-text: #333333;
    --color-bg-gray: #f8f8f8;
    --color-white: #ffffff;
    --font-base: 'Noto Sans JP', sans-serif;
    --font-heading: 'Kiwi Maru', serif;
}

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

body {
    font-family: var(--font-base);
    color: var(--color-text);
    line-height: 1.6;
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}
a:hover {
    opacity: 0.8;
}

/* 汎用クラス */
.text-pink { color: var(--color-pink); }
.text-orange { color: #ff7f50; }

/* =========================================================
   Layout (ly-)
========================================================= */
.ly-header {
    background-color: var(--color-white);
    border-bottom: 2px solid var(--color-pink-light);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.ly-header__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center; 
}

.ly-main {
    overflow: hidden;
}

.ly-section {
    padding: 60px 20px;
}
.ly-section--white {
    background-color: var(--color-white);
}
.ly-section--gray {
    background-color: var(--color-bg-gray);
}
.ly-section--hero {
    padding: 0;
}
.ly-section__inner {
    max-width: 900px;
    margin: 0 auto;
}
.ly-section__cta {
    text-align: center;
    margin-top: 40px;
    font-weight: bold;
}
.ly-section__cta p {
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.ly-footer {
    background-color: var(--color-pink-light);
    padding: 50px 20px 20px;
}
.ly-footer__inner {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
}
.ly-footer__copyright {
    text-align: center;
    margin-top: 40px;
    font-size: 0.85rem;
    color: #666;
}

/* =========================================================
   Elements (el-)
========================================================= */
.el-heading-sec {
    font-family: var(--font-heading);
    font-size: 2rem;
    text-align: center;
    color: var(--color-pink);
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 15px;
}
.el-heading-sec::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background-color: var(--color-pink);
    border-radius: 2px;
}

.el-btn {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    cursor: pointer;
}
.el-btn--large {
    font-size: 1.2rem;
    padding: 20px 40px;
    width: 100%;
    max-width: 400px;
}
.el-btn--line {
    background-color: var(--color-line);
    color: var(--color-white);
}
.el-btn--pink {
    background-color: var(--color-pink);
    color: var(--color-white);
}

/* 目立たせるためのアニメーション */
.el-btn--pulse {
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(6, 199, 85, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(6, 199, 85, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(6, 199, 85, 0); }
}

.el-floating-line {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--color-line);
    color: var(--color-white);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 999;
}
.el-floating-line i {
    font-size: 1.8rem;
    margin-bottom: 2px;
}

/* =========================================================
   Blocks (bl-)
========================================================= */
/* Header Logo */
.bl-header-logo {
    display: flex;
    align-items: center; /* ロゴとテキストを縦中央揃え */
    gap: 15px; /* ロゴとテキストの間隔 */
}

/* 追加するテキスト用のスタイル */
.bl-header-logo__text {
    font-size: 1.4rem; /* フォントサイズ調整 */
    font-weight: bold;
    color: var(--color-pink); /* メインカラーを使用 */
    font-family: var(--font-heading); /* 見出し用フォントを使用 */
}

.bl-header-logo__img {
    height: 60px; /* 少し大きめ */
    object-fit: contain;
}

/* Hero */
.bl-hero {
    position: relative;
}
.bl-hero__img {
    width: 100%;
    max-height: 80vh;
    object-fit: cover;
}

/* Campaign */
.bl-campaign {
    max-width: 800px;
    margin: -60px auto 0;
    position: relative;
    z-index: 10;
    background: var(--color-white);
    border: 3px solid var(--color-pink);
    border-radius: 20px;
    padding: 40px 20px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.bl-campaign__badge {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-pink);
    color: var(--color-white);
    padding: 5px 30px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 1.2rem;
    letter-spacing: 2px;
}
.bl-campaign__title {
    font-size: 1.8rem;
    margin-bottom: 15px;
}
.bl-campaign__desc {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 30px;
}
.bl-campaign__note {
    font-size: 0.85rem;
    color: #666;
    margin-top: -20px; /* 上のdescの余白を少し打ち消して近づける */
    margin-bottom: 25px;
}

@media screen and (max-width: 768px) {
    .bl-campaign__note {
        font-size: 0.8rem;
        margin-top: -15px;
        margin-bottom: 20px;
    }
}
.hl-price {
    font-size: 2.5rem;
    color: #e53935;
}

/* Message */
.bl-message {
    display: flex;
    align-items: center;
    gap: 40px;
}
.bl-message__content {
    flex: 1;
}
.bl-message__img-wrapper {
    flex: 1;
}
.bl-message__img {
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.bl-message__list {
    list-style: none;
    margin-bottom: 20px;
    font-size: 1.1rem;
    font-weight: bold;
}
.bl-message__list li {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ccc;
}

/* About / Step */
.bl-about__text {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.1rem;
}
.bl-step {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 50px;
}
.bl-step__item {
    text-align: center;
    width: 30%;
}
.bl-step__img {
    border-radius: 50%;
    margin: 0 auto 15px;
    border: 5px solid var(--color-pink-light);
}
.bl-step__text {
    font-weight: bold;
    font-size: 1.1rem;
}

/* Feature */
.bl-feature__list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    list-style: none;
    margin-bottom: 30px;
}
.bl-feature__item {
    background: var(--color-white);
    padding: 15px 25px;
    border-radius: 50px;
    font-weight: bold;
    color: var(--color-pink);
    border: 2px solid var(--color-pink-light);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.bl-feature__bottom {
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
}

/* Salary */
.bl-salary__lead {
    text-align: center;
    font-weight: bold;
    margin-bottom: 30px;
    font-size: 1.2rem;
}
.bl-salary__grid {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}
.bl-salary__card-lead {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--color-white);
    background-color: var(--color-pink);
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}
.bl-salary__card {
    flex: 1;
    background: var(--color-pink-light);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
}
.bl-salary__card-title {
    font-size: 1.1rem;
    margin-bottom: 10px;
}
.bl-salary__card-price {
    font-size: 1.7rem;
    font-weight: bold;
    color: var(--color-pink);
}
.bl-salary-detail {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.bl-salary-detail__txt-area .average {
    font-size: 1.1rem;
    color: var(--color-pink);
    font-weight: bold;
    margin-bottom: 10px;
}
.bl-salary-detail__item {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--color-white);
    border: 2px solid var(--color-pink-light);
    padding: 20px;
    border-radius: 10px;
}
.bl-salary-detail__img-area {
    width: 150px;
    flex-shrink: 0;
}
.bl-salary-detail__img {
    border-radius: 10px;
}
.bl-salary-detail__txt-area h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}
.bl-salary-detail__txt-area .calc {
    font-size: 1.3rem;
    margin-bottom: 5px;
}
.bl-salary-detail__txt-area .calc strong {
    color: var(--color-pink);
    font-size: 1.6rem;
}
.bl-salary-detail__txt-area .note {
    font-size: 0.9rem;
    color: #666;
}

/* FAQ */
.bl-faq__list {
    max-width: 800px;
    margin: 0 auto;
}
.bl-faq__item {
    background: var(--color-white);
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.bl-faq__q {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--color-pink);
    margin-bottom: 10px;
    padding-left: 30px;
    position: relative;
}
.bl-faq__q::before {
    content: 'Q.';
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-heading);
    font-size: 1.4rem;
}
.bl-faq__a {
    padding-left: 30px;
    position: relative;
    line-height: 1.8;
}
.bl-faq__a::before {
    content: 'A.';
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: #aaaaaa;
}

/* Footer Info */
.bl-footer-info {
    flex: 1;
    min-width: 300px;
}
.bl-footer-info__name {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--color-pink);
}
.bl-footer-info__text {
    margin-bottom: 10px;
    line-height: 1.8;
}
.bl-footer-actions {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-end;
}

/* =========================================================
   Media Queries (SP)
========================================================= */
@media screen and (max-width: 768px) {
    .bl-hero__img {
        padding-bottom: 30px;
    }
    .bl-salary-detail__txt-area .calc {
        font-size: 1rem;
    }
    .bl-feature__bottom {
        font-size: 1rem;
    }
    .ly-section__cta p {
        font-size: 0.9rem;}
    .bl-campaign__title {
        font-size: 1.5rem;
    }
    .bl-campaign__desc {
        font-size: 1.4rem;
    }
    .hl-price {
    font-size: 2rem;
    }
    .bl-campaign {
        /* marginの3つ目の値(40px)を追加し、次のセクションとの被りを防ぐ */
        margin: -30px 15px 40px; 
        /* paddingの1つ目の値(60px)を増やし、バッジとテキストの被りを防ぐ */
        padding: 60px 15px 30px; 
    }
    
    .bl-campaign__badge {
        /* バッジが2行になって縦幅が出た分、基準位置を少し上に逃がす */
        top: -30px; 
        /* （任意）スマホ時にバッジが横に窮屈な場合は幅を指定 */
        width: 80%;
        max-width: 220px;
    }
    .bl-message {
        flex-direction: column;
    }
    .bl-step {
        flex-direction: column;
        align-items: center;
    }
    .bl-step__item {
        width: 80%;
    }
    .bl-salary__grid {
        flex-direction: column;
    }
    .bl-salary-detail__item {
        flex-direction: column;
        text-align: center;
    }
    .bl-campaign {
        margin: -30px 15px 0;
        padding: 30px 15px;
    }
    .bl-footer-actions {
        align-items: center;
        width: 100%;
    }
    .bl-about__text {
    font-size: 0.84rem;
    }
    .el-heading-sec {
    font-size: 1.2rem;
    }
}

/* Step, Salary Card, FAQなどのアイテムにホバー効果を付与 */
.bl-step__item,
.bl-salary__card,
.bl-salary-detail__item,
.bl-faq__item {
    transition: transform 0.3s, box-shadow 0.3s;
}

.bl-step__item:hover,
.bl-salary__card:hover,
.bl-salary-detail__item:hover,
.bl-faq__item:hover {
    transform: translateY(-5px); /* 少し上に浮かせる */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* 影を強くする */
}

/* =========================================================
   Layout (ly-)
========================================================= */

.ly-main {
    overflow: hidden; /* ★スライドアニメーションによる横揺れを防ぐ。既存のまま */
}

.bl-faq__item {
    background: var(--color-white);
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 既存の 10px を 5px に変更 */
}
.bl-message__img {
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 既存の 10px/20px を調整 */
}

/* =========================================================
   Navigation (PC & SP)
========================================================= */
/* ヘッダーの中身を左右に分ける */
.ly-header__inner {
    justify-content: space-between;
}

/* -----------------------------
   PC用ナビゲーション
----------------------------- */
.bl-global-nav {
    display: none; /* 初期状態（スマホ）では非表示 */
}
.bl-global-nav__list {
    display: flex;
    list-style: none;
    gap: 25px;
    font-weight: bold;
    font-size: 0.95rem;
}
.bl-global-nav__list a {
    color: var(--color-text);
    padding: 10px 0;
    transition: color 0.3s;
}
.bl-global-nav__list a:hover {
    color: var(--color-pink);
}

/* -----------------------------
   スマホ用ハンバーガーボタン
----------------------------- */
.bl-hamburger {
    display: block;
    position: relative;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1000; /* メニューより上に配置 */
    outline: none;
}
.bl-hamburger span {
    position: absolute;
    left: 7px;
    width: 30px;
    height: 3px;
    background-color: var(--color-pink); /* ボタンの色 */
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}
.bl-hamburger span:nth-of-type(1) { top: 12px; }
.bl-hamburger span:nth-of-type(2) { top: 20px; }
.bl-hamburger span:nth-of-type(3) { top: 28px; }

/* ボタンが押された時（×印になる） */
.bl-hamburger.is-active span:nth-of-type(1) {
    top: 20px;
    transform: rotate(45deg);
}
.bl-hamburger.is-active span:nth-of-type(2) {
    opacity: 0;
}
.bl-hamburger.is-active span:nth-of-type(3) {
    top: 20px;
    transform: rotate(-45deg);
}

/* -----------------------------
   スマホ用ドロワーメニュー
----------------------------- */
.bl-drawer-nav {
    position: fixed;
    top: 0;
    right: -100%; /* 初期状態は画面外（右側）に隠す */
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background-color: var(--color-white);
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    transition: right 0.3s ease-in-out;
    z-index: 999;
    padding-top: 80px; /* ヘッダーの高さ分下げる */
    overflow-y: auto;
}
/* クラスがついたら画面内に入ってくる */
.bl-drawer-nav.is-active {
    right: 0;
}
.bl-drawer-nav__list {
    list-style: none;
    padding: 0 20px 40px;
}
.bl-drawer-nav__list li {
    border-bottom: 1px dashed var(--color-pink-light);
}
.bl-drawer-nav__list a {
    display: block;
    padding: 15px 10px;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--color-text);
}
.bl-drawer-nav__list i {
    color: var(--color-pink);
    margin-right: 10px;
    width: 20px;
    text-align: center;
}
.bl-drawer-nav__btn {
    margin-top: 20px;
    border-bottom: none !important;
    text-align: center;
}
.bl-drawer-nav__btn .el-btn {
    width: 100%;
    padding: 12px 20px;
    font-size: 1rem;
}

/* -----------------------------
   Media Queries (PCの時の表示切り替え)
----------------------------- */
@media screen and (min-width: 769px) {
    .bl-global-nav {
        display: block; /* PCメニューを表示 */
    }
    .bl-hamburger,
    .bl-drawer-nav {
        display: none; /* スマホ用メニューとボタンを隠す */
    }
}
/* =========================================================
   Utility Classes (改行制御)
========================================================= */
/* PCの時は改行させない（非表示） */
.u-sp-br {
    display: none;
}

/* =========================================================
   Media Queries (SP向け)
========================================================= */
@media screen and (max-width: 768px) {
    /* スマホの時は改行させる */
    .u-sp-br {
        display: block; 
    }
    
    /* 2行になった時に行間が開きすぎないように少し詰める */
    .bl-header-logo__text {
        line-height: 1.2;
    }
}
@media screen and (max-width: 406px) {
    .bl-header-logo__text {
        font-size: 1rem;
    }
}