/* ==================================================== */
/* component--使いまわしするもの*/
/* ==================================================== */

/* Buttons */

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 10px 30px 10px 50px;
    text-decoration: none;

    /* フォント設定 */
    font-family: "ryumin-pr6n", serif;
    font-weight: 500;
    letter-spacing: 0.1em;
    font-size: 18px;
    color: var(--lp-color-text);

    /* 背景：透過黒 */
    background-color: var(--lp-color-half);

    /* 枠線：金グラデーション */
    border: 2px solid; /* 太さ */
    border-image-source: var(--lp-color-gradation);
    border-image-slice: 1; 
    transition: all 0.3s ease;
}

/* 三角アイコン (左側配置) */
.lp-btn::before {
    content: "";
    position: absolute;
    left: 20px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent var(--lp-color-text);
    transition: transform 0.3s ease;
}

/* ホバー演出 */
.lp-btn:hover {
    opacity: 0.9;
    box-shadow: 0px 0px 20px 4px rgba(240, 204, 126, 0.3), 0px 0px 28px 4px rgba(244, 231, 207, 0.3);
}

.lp-btn:hover::before {
    transform: translateX(3px); 
}

.lp-faq__item.is-open .lp-faq__answer {
    display: block;
}

.lp-box {
    background-color: var(--lp-color-half);
    border: 1px solid;
    border-image-source: var(--lp-color-gradation);
    border-image-slice: 1; 
    padding: 2rem 1rem;
    width: 80%;
    max-width: 800px;
    margin: auto;
}

@media (max-width: 768px) {
    .lp-box {
        width: 95%;
    }
}

.lp-box__text {
    font-size: clamp(1rem, 0.816rem + 0.78vw, 1.6rem);
    margin: 0 0 1rem;
}

/* 2 Column */
.lp-two__wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (min-width: 768px) {
    .lp-two__wrap {
        flex-direction: row;
        align-items: center;
    }
}

/* Cards */
.lp-cards__grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .lp-cards__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Cards */
.lp-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 16px;
}

.lp-card__img {
    border-radius: 6px;
    margin-bottom: 12px;
}

.lp-card__title {
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.lp-card__text {
    font-size: 0.95rem;
}

/* -------------------------------------------
   Margin Utilities (5の倍数 / Size Based)
   CSSの末尾に記述して、各コンポーネントの余白を上書きします。
------------------------------------------- */

/* Bottom Margin (mb) */
.mb-xs { margin-bottom: 10px; }  /* 最小限 */
.mb-s  { margin-bottom: 20px; }  /* パーツ間 */
.mb-m  { margin-bottom: 40px; }  /* ブロック間 */
.mb-l  { margin-bottom: 80px; }  /* セクション間（小） */
.mb-xl { margin-bottom: 120px; } /* セクション間（大） */

/* Top Margin (mt) */
.mt-xs { margin-top: 10px; }
.mt-s  { margin-top: 20px; }
.mt-m  { margin-top: 40px; }
.mt-l  { margin-top: 80px; }
.mt-xl { margin-top: 120px; }

/* Vertical Margin (my / 上下セット) */
.my-s  { margin-top: 20px; margin-bottom: 20px; }
.my-m  { margin-top: 40px; margin-bottom: 40px; }
.my-l  { margin-top: 80px; margin-bottom: 80px; }
.my-xl { margin-top: 120px; margin-bottom: 120px; }

/* Responsive (スマホでの調整)*/
@media (max-width: 768px) {
    /* スマホでは大きな余白を1段階ずつ繰り下げるとバランスが良いです */
    .mb-xl, .mt-xl, .my-xl { margin-top: 80px; margin-bottom: 80px; }
    .mb-l,  .mt-l,  .my-l  { margin-top: 50px; margin-bottom: 50px; }
    .mb-m,  .mt-m,  .my-m  { margin-top: 30px; margin-bottom: 30px; }
}


/* -------------------------------------------
  ふわっと表示 
------------------------------------------- */
/* クラスが外れた時（戻る時）は一瞬で透明に戻す */
.js-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.2s, transform 0.2s;
}

/* 画面に入った時（is-visibleがついた時）は、ふわっと時間をかける */
.js-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1.2s cubic-bezier(0.33, 1, 0.68, 1), 
                transform 1.2s cubic-bezier(0.33, 1, 0.68, 1);
}

/* 遅延用（並んでいる要素を順番に出したい時用） */
.delay-s  { transition-delay: 0.2s; }
.delay-m  { transition-delay: 0.4s; }
.delay-l  { transition-delay: 0.6s; }