@charset "UTF-8";
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

/* =========================================
   枠線・上部丸アイコンタイプ
   ========================================= */
.is-style-icon-box-lightbulb,
.is-style-icon-box-check,
.is-style-icon-box-times,
.is-style-icon-box-alert,
.is-style-icon-box-feather {
    position: relative;
    padding: 20px 25px;
    margin-top: 35px;
    margin-bottom: 25px;
    background-color: #fff;
    border-radius: 2px;
}

:where(.is-style-icon-box-lightbulb, .is-style-icon-box-check, .is-style-icon-box-times, .is-style-icon-box-alert, .is-style-icon-box-feather) {
    margin-top: 35px;
    margin-bottom: 25px;
}

/* 内部の段落の余白調整 */
.is-style-icon-box-lightbulb > *:first-child,
.is-style-icon-box-check > *:first-child,
.is-style-icon-box-times > *:first-child,
.is-style-icon-box-alert > *:first-child,
.is-style-icon-box-feather > *:first-child { margin-top: 0; }
.is-style-icon-box-lightbulb > *:last-child,
.is-style-icon-box-check > *:last-child,
.is-style-icon-box-times > *:last-child,
.is-style-icon-box-alert > *:last-child,
.is-style-icon-box-feather > *:last-child { margin-bottom: 0; }

/* アイコンの共通設定 */
.is-style-icon-box-lightbulb::before,
.is-style-icon-box-check::before,
.is-style-icon-box-times::before,
.is-style-icon-box-alert::before,
.is-style-icon-box-feather::before {
    position: absolute;
    top: -16px;
    left: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    z-index: 1;
}

/* 電球 (オレンジ) */
.is-style-icon-box-lightbulb { border: 2px solid #f39c12; }
.is-style-icon-box-lightbulb::before { content: "\f0eb"; background-color: #f39c12; font-weight: 400; }

/* チェック (緑) */
.is-style-icon-box-check { border: 2px solid #2ecc71; }
.is-style-icon-box-check::before { content: "\f00c"; background-color: #2ecc71; }

/* バツ (赤) */
.is-style-icon-box-times { border: 2px solid #e74c3c; }
.is-style-icon-box-times::before { content: "\f00d"; background-color: #e74c3c; }

/* アラート (黄) */
.is-style-icon-box-alert { border: 2px solid #f1c40f; }
.is-style-icon-box-alert::before { content: "\f12a"; background-color: #f1c40f; }

/* メモ(羽根) (グレー) */
.is-style-icon-box-feather { border: 2px solid #8e959b; }
.is-style-icon-box-feather::before { content: "\f52d"; background-color: #8e959b; }


/* =========================================
   背景塗りつぶし・左アイコンタイプ
   ========================================= */
.is-style-icon-box-good,
.is-style-icon-box-bad,
.is-style-icon-box-info,
.is-style-icon-box-announce,
.is-style-icon-box-pencil {
    position: relative;
    padding: 20px 20px 20px 55px;
    margin-top: 25px;
    margin-bottom: 25px;
    border-radius: 2px;
}

:where(.is-style-icon-box-good, .is-style-icon-box-bad, .is-style-icon-box-info, .is-style-icon-box-announce, .is-style-icon-box-pencil) {
    margin-top: 25px;
    margin-bottom: 25px;
}

/* 余白調整 */
.is-style-icon-box-good > *:first-child, .is-style-icon-box-bad > *:first-child,
.is-style-icon-box-info > *:first-child, .is-style-icon-box-announce > *:first-child,
.is-style-icon-box-pencil > *:first-child { margin-top: 0; }
.is-style-icon-box-good > *:last-child, .is-style-icon-box-bad > *:last-child,
.is-style-icon-box-info > *:last-child, .is-style-icon-box-announce > *:last-child,
.is-style-icon-box-pencil > *:last-child { margin-bottom: 0; }

/* アイコンの共通設定 */
.is-style-icon-box-good::before,
.is-style-icon-box-bad::before,
.is-style-icon-box-info::before,
.is-style-icon-box-announce::before,
.is-style-icon-box-pencil::before {
    position: absolute;
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 18px;
}

/* 縦線の共通設定 */
.is-style-icon-box-good::after,
.is-style-icon-box-bad::after,
.is-style-icon-box-info::after,
.is-style-icon-box-announce::after,
.is-style-icon-box-pencil::after {
    content: "";
    position: absolute;
    top: 15px;
    bottom: 15px;
    left: 46px;
    width: 1px;
}

/* グッド (薄緑) */
.is-style-icon-box-good { background-color: #f1fcf4; }
.is-style-icon-box-good::before { content: "\f164"; color: #2ecc71; }
.is-style-icon-box-good::after { background-color: #a3e4d7; }

/* バッド (薄青) */
.is-style-icon-box-bad { background-color: #f1f8fc; }
.is-style-icon-box-bad::before { content: "\f165"; color: #3498db; }
.is-style-icon-box-bad::after { background-color: #aed6f1; }

/* インフォ (薄ピンク) */
.is-style-icon-box-info { background-color: #fef4f6; }
.is-style-icon-box-info::before { 
    content: "\f129"; color: #fff; background-color: #f06292;
    width: 20px; height: 20px; display: flex; justify-content: center; align-items: center;
    border-radius: 50%; font-size: 12px; left: 16px;
}
.is-style-icon-box-info::after { background-color: #f5b7b1; }

/* アナウンス (薄オレンジ) */
.is-style-icon-box-announce { background-color: #fef7f1; }
.is-style-icon-box-announce::before { content: "\f0a1"; color: #f39c12; }
.is-style-icon-box-announce::after { background-color: #f5cba7; }

/* えんぴつ (薄グレー) */
.is-style-icon-box-pencil { background-color: #f8f9f9; }
.is-style-icon-box-pencil::before { content: "\f303"; color: #7f8c8d; }
.is-style-icon-box-pencil::after { background-color: #d5dbdb; }




/* =========================================
   シンプルな枠線タイプ
   ========================================= */
.is-style-box-simple {
    border: 1px solid #ddd;
    background-color: #fff;
    padding: 30px 25px;
    border-radius: 2px;
}

/* ▼ エディターのマージン設定を優先させるため :where() を使用 */
:where(.is-style-box-simple) {
    margin-top: 25px;
    margin-bottom: 25px;
}

/* 内部の段落の余白調整 */
.is-style-box-simple > *:first-child { margin-top: 0; }
.is-style-box-simple > *:last-child { margin-bottom: 0; }




/* =========================================
   テキスト装飾 (マーカー)
   ========================================= */

/* ▼ 細線マーカー (下から40%を塗る) ▼ */
.marker-red-thin    { background: linear-gradient(transparent 60%, rgba(231, 76, 60, 0.4) 60%); }
.marker-yellow-thin { background: linear-gradient(transparent 60%, rgba(255, 235, 59, 0.5) 60%); }
.marker-green-thin  { background: linear-gradient(transparent 60%, rgba(46, 204, 113, 0.4) 60%); }
.marker-blue-thin   { background: linear-gradient(transparent 60%, rgba(52, 152, 219, 0.4) 60%); }

/* ▼ 太線マーカー (下から90%を塗る) ▼ */
.marker-red-thick    { background: linear-gradient(transparent 10%, rgba(231, 76, 60, 0.4) 10%); }
.marker-yellow-thick { background: linear-gradient(transparent 10%, rgba(255, 235, 59, 0.5) 10%); }
.marker-green-thick  { background: linear-gradient(transparent 10%, rgba(46, 204, 113, 0.4) 10%); }
.marker-blue-thick   { background: linear-gradient(transparent 10%, rgba(52, 152, 219, 0.4) 10%); }




/* -----------------------------------------
   お問い合わせ領域スタイル
   ----------------------------------------- */
.contact-box {
    background-color: #f5f5f5;
    padding: 40px 20px;
    text-align: center;
    margin: 30px 0 40px;
}

/* ▼ 修正: .page-content を前に付けて優先度を上げる */
.btn--gray-arrow {
    display: inline-flex;
    align-items: stretch;
    background-color: rgb(173 173 173);
    color: #fff !important; /* 文字色を強制的に白にする */
    text-decoration: none !important; /* 下線を消す */
    font-weight: bold;
    transition: opacity 0.3s;
}
.btn--gray-arrow:hover {
    opacity: 0.9;
    text-decoration: none;
}
.btn--gray-arrow .text {
    padding: 15px 40px;
    font-size: 16px;
    display: flex;
    align-items: center;
}
.btn--gray-arrow .arrow {
    background-color: rgb(141 136 136);
    padding: 0 20px;
    display: flex;
    align-items: center;
    font-size: 20px;
}



@media (max-width: 900px) {
    /* お問い合わせボタン */
    .contact-box {
        padding: 30px 15px;
    }
    .btn--gray-arrow {
        width: 100%; 
        max-width: 320px;
    }
    .btn--gray-arrow .text {
        flex-grow: 1;
        justify-content: center;
        padding: 15px 10px;
        font-size: 14px;
    }
    .btn--gray-arrow .arrow {
        padding: 0 15px;
    }

    .btn--gray-arrow .text {
        padding: 15px 20px;
    }
}



/* =========================================
   タブ切り替えブロック
   ========================================= */
.fd7-tabs-front-wrap {
    margin: 30px 0;
}
.fd7-tabs-nav {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 2px 2px 0 0;
    overflow: hidden;
    margin-bottom: -1px; /* 下のコンテンツ枠の線と重ねる */
}
.fd7-tab-btn {
    flex: 1;
    background: #f9f9f9;
    border: none;
    border-right: 1px solid #ddd;
    padding: 15px 10px;
    font-size: 16px;
    font-weight: bold;
    color: #555;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    outline: none;
    text-align: center;
}
.fd7-tab-btn:last-child {
    border-right: none;
}
.fd7-tab-btn:hover {
    background: #f0f0f0;
}
.fd7-tab-btn.is-active {
    background: var(--primary-color);
    color: #fff;
}
.fd7-tab-content-front {
    border: 1px solid #ddd;
    padding: 30px;
    background: #fff;
    border-radius: 0 0 2px 2px;
}
@media (max-width: 600px) {
    .fd7-tab-btn {
        font-size: 14px;
        padding: 12px 5px;
    }
    .fd7-tab-content-front {
        padding: 20px 15px;
    }
}



/* =========================================
   Q&A ブロック (アコーディオン)
   ========================================= */
.fd7-faq-wrap {
    margin: 40px 0;
}
.fd7-faq-item {
    border: 1px solid #ddd;
    margin-bottom: 15px;
    background: #fff;
    overflow: hidden;
}
.fd7-faq-item:last-child {
    margin-bottom: 0;
}

/* 質問(Q)エリア */
.fd7-faq-q {
    padding: 20px;
    background-color: #fff; /* 閉じている時は白 */
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s;
}
.fd7-faq-item.is-open .fd7-faq-q {
    background-color: #f9f9f9; /* 開いている時は薄いグレー */
}
.fd7-faq-q:hover {
    background-color: #f9f9f9;
}
.fd7-faq-q-icon {
    font-size: 18px;
    color: var(--primary-color);
    padding-right: 20px;
    margin-right: 20px;
    border-right: 1px solid #eee;
    flex-shrink: 0;
    line-height: 1;
}
.fd7-faq-q-text {
    flex-grow: 1;
    font-size: 16px;
    font-weight: bold;
    color: var(--primary-color);
    padding-right: 15px;
    line-height: 1.5;
}

/* 開閉アイコン (∨ / ∧) */
.fd7-faq-toggle {
    width: 10px;
    height: 10px;
    border-right: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    transform: rotate(45deg); /* 下向き矢印 */
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-top: -5px; /* 中央揃え微調整 */
}
.fd7-faq-item.is-open .fd7-faq-toggle {
    transform: rotate(-135deg); /* 開いた時は上向き矢印 */
    margin-top: 5px;
}

/* 回答(A)エリアのスライド開閉アニメーション */
.fd7-faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}
.fd7-faq-item.is-open .fd7-faq-a {
    grid-template-rows: 1fr;
}
.fd7-faq-a-inner {
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    padding: 0 20px; /* 閉じている時は上下パディング0 */
    transition: padding 0.3s ease;
}
.fd7-faq-item.is-open .fd7-faq-a-inner {
    padding: 20px;
    border-top: 1px solid #eee;
}

/* 回答(A)アイコン */
.fd7-faq-a-icon {
    font-size: 18px;
    color: #333;
    padding-right: 20px;
    margin-right: 20px;
    border-right: 1px solid #eee;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px; /* 1行目のテキストと高さを合わせる */
}

/* 回答(A)テキスト */
.fd7-faq-a-content {
    flex-grow: 1;
    font-size: 15px;
    line-height: 1.8;
    color: #333;
}
.fd7-faq-a-content > *:first-child { margin-top: 0; }
.fd7-faq-a-content > *:last-child { margin-bottom: 0; }

/* スマホ表示の調整 */
@media (max-width: 900px) {
    .fd7-faq-q { padding: 15px; }
    .fd7-faq-q-text { font-size: 14px; }
    .fd7-faq-a-inner { padding: 0 15px; }
    .fd7-faq-item.is-open .fd7-faq-a-inner { padding: 15px; }
    .fd7-faq-a-content { font-size: 14px; }
    .fd7-faq-q-icon, .fd7-faq-a-icon {
        font-size: 16px; padding-right: 10px; margin-right: 10px;
    }
    .fd7-faq-toggle {
        width: 5px;
        height: 5px;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
}