/* =====================================================
 * 医療脱毛（女性向け）ページ用CSS
 * page-datsumou-female.php 専用
 * ===================================================== */

/* --- 共通ユーティリティ --- */
.sp-only { display: none; }
.pc-only { display: inline; }
.dat-color-primary { color: #ff6366; }

/* --- 共通セクション --- */
.dat-section { padding: 60px 0; }
.dat-section--grey { background: #f5f5f5; }
.dat-section__inner { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.dat-section__head { text-align: center; margin-bottom: 40px; }
.dat-section__head img { max-width: 100%; height: auto; }

/* --- 共通ボタン --- */
.dat-btn {
    display: inline-block;
    background: #ff6366;
    color: #fff;
    text-decoration: none;
    padding: 16px 40px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    transition: opacity 0.3s;
}
.dat-btn:hover { opacity: 0.8; }
.dat-btn__small { display: block; font-size: 12px; font-weight: normal; }

/* =====================================================
 * ファーストビュー
 * ===================================================== */
.dat-fv {
    position: relative;
    overflow: hidden;
}
.dat-fv__bg { position: relative; }
.dat-fv__bg img { width: 100%; height: auto; display: block; }
.dat-fv__body {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 5%;
}
.dat-fv__txt-box { max-width: 50%; }
.dat-fv__txt img { max-width: 100%; height: auto; }
.dat-fv__list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}
.dat-fv__item {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}
.dat-fv__item::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #ff6366;
    font-weight: bold;
}
.dat-fv__btn-box { text-align: center; margin-top: 20px; }

/* =====================================================
 * 月額料金セクション
 * ===================================================== */
.dat-price { padding: 40px 0; }
.dat-price__box {
    background: #fff;
    border: 3px solid #ff6366;
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
}
.dat-price__top { margin-bottom: 20px; }
.dat-price__top img { max-width: 100%; height: auto; }
.dat-price__box-txt {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}
.dat-price__box-txt span { color: #ff6366; }
.dat-price__small { font-size: 14px; }
.dat-price__box-price {
    font-size: 36px;
    font-weight: bold;
    color: #ff6366;
    margin-bottom: 15px;
}
.dat-price__box-price span { font-size: 48px; }
.dat-price__box-caution {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.8;
}
.dat-price__label {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}
.dat-price__label-item {
    background: #ff6366;
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
}
.dat-price__link {
    color: #ff6366;
    text-decoration: underline;
    font-weight: bold;
}

/* =====================================================
 * 脱毛業界セクション
 * ===================================================== */
.dat-industry { padding: 40px 0; }
.dat-industry__box {
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.dat-industry__head {
    text-align: center;
    margin-bottom: 20px;
    background: #4a4a4a;
    border-radius: 12px 12px 0 0;
    margin: -30px -30px 20px;
    padding: 20px 30px;
}
.dat-industry__head img { max-width: 100%; height: auto; }
.dat-industry__body-list { list-style: none; padding: 0; margin: 0 0 30px; }
.dat-industry__body-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed #ddd;
}
.dat-industry__icon { flex-shrink: 0; margin-top: 2px; }
.dat-industry__txt { font-size: 15px; line-height: 1.6; }
.dat-industry__body-box { text-align: center; }
.dat-industry__body-box img { max-width: 100%; height: auto; }
.dat-industry__body-box--txt img { max-width: 500px; }

/* =====================================================
 * 無料サポートセクション
 * ===================================================== */
.dat-support__list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 30px;
}
.dat-support__item {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.dat-support__item-ttl {
    background: #ff6366;
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    margin: 0;
}
.dat-support__item-zero {
    font-size: 32px;
    font-weight: bold;
    color: #ff6366;
    margin: 8px 0 0;
}
.dat-support__item-txt {
    font-size: 12px;
    color: #666;
    margin-top: 8px;
}
.dat-support__bottom {
    background: #fff;
    border: 2px solid #ff6366;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
}
.dat-support__bottom-ttl {
    font-size: 20px;
    font-weight: bold;
    color: #ff6366;
    margin-bottom: 12px;
}
.dat-support__bottom-txt {
    font-size: 14px;
    margin-bottom: 20px;
}
.dat-support__label {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.dat-support__label-item {
    background: #ff6366;
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
}

/* =====================================================
 * 美容と医療セクション
 * ===================================================== */
.dat-beauty {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
}
.dat-beauty__main { text-align: center; }
.dat-beauty__head { text-align: center; margin-bottom: 30px; }
.dat-beauty__head img { max-width: 400px; height: auto; }
.dat-beauty__pic { text-align: center; margin-bottom: 30px; }
.dat-beauty__pic img { max-width: 600px; width: 100%; height: auto; }
.dat-beauty__txt {
    font-size: 15px;
    line-height: 2;
    text-align: center;
}

/* =====================================================
 * 比較表セクション
 * ===================================================== */
.dat-compare { padding: 40px 0; }
.dat-compare__box {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0;
    border: 2px solid #ff6366;
    border-radius: 12px;
    overflow: hidden;
}
.dat-compare__head {
    grid-column: 1 / -1;
    background: #ff6366;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    padding: 16px;
}
.dat-compare__ttl {
    background: #fff5f5;
    padding: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #eee;
}
.dat-compare__cell {
    padding: 16px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    line-height: 1.6;
}
.dat-compare__cell--price { font-weight: bold; }

/* =====================================================
 * マシン紹介セクション
 * ===================================================== */
.dat-machine__txt {
    text-align: center;
    font-size: 15px;
    margin-bottom: 30px;
}
.dat-machine__box {
    display: grid;
    grid-template-columns: 100px 1fr 1fr;
    gap: 0;
    border: 2px solid #ff6366;
    border-radius: 12px;
    overflow: hidden;
}
.dat-machine__place {
    background: #ff6366;
    color: #fff;
    text-align: center;
    padding: 8px;
    font-weight: bold;
    font-size: 13px;
}
.dat-machine__head {
    background: #ff6366;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 12px;
    font-size: 14px;
}
.dat-machine__ttl {
    background: #fff5f5;
    padding: 12px 8px;
    font-weight: bold;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-bottom: 1px solid #eee;
}
.dat-machine__cell {
    padding: 12px;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.dat-machine__cell--pic {
    display: flex;
    align-items: center;
    justify-content: center;
}
.dat-machine__cell--pic img {
    height: 100px;
    width: auto;
}
.dat-machine__bold {
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
}
.dat-machine__body {
    font-size: 11px;
    color: #666;
    display: block;
}

/* =====================================================
 * 施術の流れセクション
 * ===================================================== */
.dat-step__list {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 30px;
}
.dat-step__item {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.dat-step__item-pic { margin-bottom: 16px; }
.dat-step__item-pic img {
    width: 100%;
    border-radius: 8px;
}
.dat-step__item-ttl {
    font-size: 16px;
    font-weight: bold;
    color: #ff6366;
    margin-bottom: 10px;
}
.dat-step__item-txt {
    font-size: 13px;
    line-height: 1.7;
    text-align: left;
}
.dat-step__btn-box { margin-top: 16px; }

/* =====================================================
 * 3つの強みセクション
 * ===================================================== */
.dat-strength__list {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 30px;
}
.dat-strength__item {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.dat-strength__item-pic { margin-bottom: 16px; }
.dat-strength__item-pic img {
    width: 100%;
    border-radius: 8px;
}
.dat-strength__item-ttl {
    font-size: 16px;
    font-weight: bold;
    color: #ff6366;
    margin-bottom: 10px;
}
.dat-strength__item-txt {
    font-size: 13px;
    line-height: 1.7;
}

/* =====================================================
 * FAQ セクション
 * ===================================================== */
.dat-faq__ttl {
    text-align: center;
    font-size: 24px;
    color: #ff6366;
    margin-bottom: 30px;
}
.dat-faq__list { list-style: none; padding: 0; }
.dat-faq__item {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.dat-faq__item--ttl {
    padding: 16px 48px 16px 50px;
    font-weight: bold;
    font-size: 15px;
    position: relative;
    cursor: pointer;
    margin: 0;
    display: flex;
    align-items: center;
}
.dat-faq__item--q { flex: 1; }
.dat-faq__toggle {
    width: 24px;
    height: 24px;
    position: relative;
    flex-shrink: 0;
    margin-left: 12px;
}
.dat-faq__toggle::before,
.dat-faq__toggle::after {
    content: "";
    position: absolute;
    background: #ff6366;
    border-radius: 2px;
    transition: transform 0.3s;
}
.dat-faq__toggle::before {
    width: 16px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.dat-faq__toggle::after {
    width: 2px;
    height: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.dat-faq__item.is-open .dat-faq__toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}
.dat-faq__item--ttl::before {
    content: "Q";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: #ff6366;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}
.dat-faq__item--txt {
    padding: 0 20px 16px 50px;
    font-size: 14px;
    line-height: 1.7;
    color: #555;
    display: none;
    margin: 0;
}
.dat-faq__item--txt::before {
    content: "A";
    position: absolute;
    left: 16px;
    background: #666;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}
.dat-faq__item.is-open .dat-faq__item--txt { display: block; position: relative; }

/* =====================================================
 * 脱毛プランセクション
 * ===================================================== */
.dat-course__nav {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
}
.dat-course__nav-item {
    background: #ff6366;
    color: #fff;
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 14px;
    transition: opacity 0.3s;
}
.dat-course__nav-item:hover { opacity: 0.8; }
.dat-course__nav-sm { font-size: 11px; display: block; }
.dat-course__txt {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
}
.dat-course__pic { text-align: center; margin-bottom: 40px; }
.dat-course__pic img { max-width: 100%; height: auto; }
.dat-course__pic-ttl {
    font-size: 20px;
    font-weight: bold;
    color: #ff6366;
    text-align: center;
    margin-bottom: 20px;
}
.dat-course__dot--blue { color: #5bc0de; font-size: 18px; }
.dat-course__dot--orange { color: #f0ad4e; font-size: 18px; }
.dat-course__dot--pink { color: #ff6366; font-size: 18px; }
.dat-course__parts {
    margin-bottom: 40px;
    padding-top: 20px;
}
.dat-course__slist {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.dat-course__sitem {
    background: #fff;
    border-radius: 8px;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.dat-course__sitem-img img {
    width: 100%;
    height: auto;
    display: block;
}
.dat-course__sitem-txt {
    padding: 8px;
    font-size: 13px;
    font-weight: bold;
}
.dat-course__box {
    background: #fff;
    border: 2px solid #ff6366;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
}
.dat-course__box-ttl {
    font-size: 18px;
    font-weight: bold;
    color: #ff6366;
    margin-bottom: 8px;
}
.dat-course__box-price {
    font-size: 28px;
    font-weight: bold;
    color: #ff6366;
}
.dat-course__sm { font-size: 12px; color: #666; }

/* 麻酔クリーム */
.dat-course__anesthesia {
    background: #fff;
    border: 2px solid #ff6366;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 40px;
}
.dat-course__anesthesia-head {
    background: #ff6366;
    color: #fff;
    text-align: center;
    font-weight: bold;
    padding: 12px;
    font-size: 16px;
}
.dat-course__anesthesia-body { padding: 24px; }
.dat-course__anesthesia-price-inline {
    text-align: center;
    margin-bottom: 16px;
    color: #ff6366;
    font-weight: bold;
}
.dat-course__anesthesia-unit-inline {
    border-bottom: 2px solid #ff6366;
    padding-bottom: 2px;
    margin-right: 8px;
}
.dat-course__anesthesia-num { font-size: 36px; }
.dat-course__anesthesia-yen { font-size: 20px; }
.dat-course__anesthesia-caution {
    font-size: 13px;
    line-height: 1.7;
    text-align: center;
    margin-bottom: 16px;
}
.dat-course__anesthesia-list {
    font-size: 12px;
    color: #666;
    line-height: 1.7;
    padding-left: 20px;
}
.dat-course__anesthesia-list li { margin-bottom: 4px; }

/* =====================================================
 * コラムセクション
 * ===================================================== */
.dat-column__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}
.dat-column__item {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: #333;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: box-shadow 0.3s;
}
.dat-column__item:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.dat-column__item-pic img {
    width: 100%;
    height: auto;
    display: block;
}
.dat-column__item-ttl {
    padding: 12px 16px 4px;
    font-size: 15px;
    font-weight: bold;
    color: #ff6366;
    line-height: 1.5;
}
.dat-column__item-txt {
    padding: 0 16px 16px;
    font-size: 13px;
    line-height: 1.6;
    color: #666;
}

/* =====================================================
 * お問い合わせセクション
 * ===================================================== */
.dat-contact { padding: 50px 0; background: #fff; }
.dat-contact__box { max-width: 960px; margin: 0 auto; }
.dat-contact__ttl {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
}
.dat-contact__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.dat-contact__item {
    background: #fafafa;
    border-radius: 12px;
    padding: 30px;
}
.dat-contact__web,
.dat-contact__tel {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 12px;
}
.dat-contact__txt {
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 20px;
}
.dat-contact__btn { text-align: center; }
.dat-contact__number {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.dat-contact__number-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #333;
    padding: 8px 12px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #ddd;
    transition: background 0.3s;
}
.dat-contact__number-link:hover { background: #f5f5f5; }
.dat-contact__name {
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}
.dat-contact__num {
    font-size: 14px;
    font-weight: bold;
    color: #ff6366;
}

/* =====================================================
 * レスポンシブ（SP: 768px以下）
 * ===================================================== */
@media screen and (max-width: 768px) {
    .sp-only { display: inline; }
    .pc-only { display: none; }

    .dat-section { padding: 40px 0; }
    .dat-section__inner { padding: 0 16px; }
    .dat-section__head { margin-bottom: 24px; }

    /* FV */
    .dat-fv__body {
        position: relative;
        padding: 20px 16px;
        align-items: center;
        text-align: center;
    }
    .dat-fv__txt-box { max-width: 100%; }
    .dat-fv__list { margin: 16px 0; display: inline-block; text-align: left; }
    .dat-fv__btn-box { text-align: center; width: 100%; }

    /* 料金 */
    .dat-price__box { padding: 24px 16px; }
    .dat-price__box-txt { font-size: 16px; }
    .dat-price__box-price { font-size: 28px; }
    .dat-price__box-price span { font-size: 36px; }
    .dat-price__label { flex-direction: column; align-items: center; }

    /* 業界 */
    .dat-industry__box { padding: 20px 16px; }
    .dat-industry__head { margin: -20px -16px 20px; padding: 16px; border-radius: 12px 12px 0 0; }

    /* サポート */
    .dat-support__list { grid-template-columns: 1fr 1fr; }
    .dat-support__item-zero { font-size: 26px; }
    .dat-support__bottom { padding: 20px 16px; }
    .dat-support__bottom-ttl { font-size: 16px; }
    .dat-support__label { flex-direction: column; align-items: center; }

    /* 美容と医療 */
    .dat-beauty__head img { max-width: 250px; }
    .dat-beauty__pic img { max-width: 100%; }

    /* 比較表 */
    .dat-compare__box { grid-template-columns: 80px 1fr; }
    .dat-compare__ttl { font-size: 12px; padding: 10px 8px; }
    .dat-compare__cell { font-size: 12px; padding: 10px 8px; }

    /* マシン */
    .dat-machine__box { grid-template-columns: 70px 1fr 1fr; }
    .dat-machine__ttl { font-size: 11px; padding: 8px 4px; }
    .dat-machine__cell { font-size: 11px; padding: 8px; }
    .dat-machine__cell--pic img { height: 60px; }

    /* 施術の流れ */
    .dat-step__list { flex-direction: column; }
    .dat-step__item { padding: 16px; }

    /* 強み */
    .dat-strength__list { flex-direction: column; }
    .dat-strength__item { padding: 16px; }

    /* FAQ */
    .dat-faq__ttl { font-size: 20px; }

    /* コース */
    .dat-course__nav { gap: 8px; }
    .dat-course__nav-item { padding: 8px 16px; font-size: 13px; }
    .dat-course__slist { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .dat-course__box { padding: 16px; }
    .dat-course__box-price { font-size: 22px; }
    .dat-course__pic-ttl { font-size: 18px; }

    /* コラム */
    .dat-column__list { grid-template-columns: 1fr; }

    /* お問い合わせ */
    .dat-contact__inner { grid-template-columns: 1fr; gap: 20px; }
    .dat-contact__item { padding: 20px 16px; }
    .dat-contact__number { grid-template-columns: 1fr; }
    .dat-contact__ttl { font-size: 20px; }
}