/**
 * PROJECT: [サイト名]
 * ---------------------------------------
 * [PREFIX RULES]
 * pu-c- : Components (汎用パーツ)
 * pu-p- : Project (固有セクション)
 * pu-u- : Utility (微調整)
 * ---------------------------------------
 * INDEX:
 * 1.0 Variables
 * 2.0 Global
 * 3.0 Components (pu-c-)
 * 4.0 Sections (pu-p-)
 * 5.0 Utility (pu-u-)
 */

/* ==========================================================================
1.0 Variables
========================================================================== */

html {
    scroll-behavior: smooth;
}

/* SnowMonkeyFormsのカスタムCSS */
/* ======================================= */
/* フォームスタイルはLetterにすること */


:root {
    /* 必須ラベルの背景色 */
    --smf-required-lavel-color: #E87A90;
    /* 任意ラベルの背景色 */
    --smf-optional-lavel-color: #9ca3af;
    /* 送信ボタンの背景色 */
    --smf-send-btn-color: var(--wp--preset--color--unitone-accent);
    /* 画面の背景色 */
    --smf-window-backgroud-color: #ffffff;
    /* 通常の文字色 */
    --smf-normal-text-color: #222222;

}

.smf-item__description {
    background: var(--smf-required-lavel-color);
    display: inline-block;
    padding: 0.2rem 0.8rem;
    border-radius: 0.2rem;
    color: var(--smf-window-backgroud-color);
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0;
    margin-left: 0.5rem;
}

/* 任意ラベルにはnini-btnクラスをつける */
.nini-btn .smf-item__description {
    background: var(--smf-optional-lavel-color);
}

.smf-action .smf-button-control__control[data-action="complete"],
.smf-action .smf-button-control__control[data-action="confirm"] {
    background-image: none;
    background-color: var(--smf-send-btn-color);
    color: var(--smf-window-backgroud-color);
    border-color: transparent;
    border-radius: 0.3rem;
    letter-spacing: 0.2rem;
    font-weight: bold;
    width: 350px;
    max-width: 100%;
    border-radius: 100px;
    transition: all 0.3s ease;
}

.smf-action .smf-button-control__control[data-action="complete"]:hover,
.smf-action .smf-button-control__control[data-action="confirm"]:hover {
    background-color: #519e7fc7;
}

.smf-action .smf-button-control__control[data-action="back"] {
    background-color: transparent;
    background-image: none;
    border: none;
    text-decoration: underline;
    text-decoration-color: var(--smf-normal-text-color);
    letter-spacing: 0.2rem;
    font-weight: 500;
}

.smf-form--letter .smf-item__col--label {
    display: flex;
    align-items: center;
}

.smf-form .smf-checkbox-control,
.smf-form .smf-radio-button-control {
    align-items: center;
}

.smf-form .smf-checkbox-control__control,
.smf-form .smf-radio-button-control__control {
    margin-top: 0;
}

/* リキャプチャの非表示 */
.grecaptcha-badge {
    visibility: hidden;
}


/* ==========================================================================
2.0 Global
========================================================================== */

.unitone-accordion__q {

    background: #d9d2b6;
    color: #fff;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    line-height: 1;
    font-weight: bold;
}

.unitone-accordion__summary-content {
    gap: 1.5rem;
}

.unitone-accordion__icon {
    display: none;
}

/* ==========================================================================
3.0 Components
========================================================================== */

/* 「角括弧見出し」のスタイル */
.wp-block-heading.is-style-bracket-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 左側の < */
.wp-block-heading.is-style-bracket-heading::before {
    content: '<';
    color: #222222;
    font-weight: bold;
}

/* 右側の > */
.wp-block-heading.is-style-bracket-heading::after {
    content: '>';
    color: #222222;
    font-weight: bold;
}

/* 付箋風スタイルの定義 */
.wp-block-heading.is-style-sticky-note {
    padding: 0.7em 1em;
    border-left: 8px solid var(--wp--preset--color--unitone-accent);
    /* background: #FFFFFF; */
    line-height: 1.8;
}

/* エディタ上でも見やすくするための微調整 */
.is-style-sticky-note {
    box-sizing: border-box;
}

/* ==========================================================================
4.0 Sections
========================================================================== */

/* ==========================================================================
5.0 Utility
========================================================================== */

/* 3つのFUが繋ぐ未来の階段デザイン */
.step-bar:nth-child(2) {
    align-self: center;
}

.step-bar:nth-child(3) {
    align-self: flex-end;
}