@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Leckerli+One&family=Zen+Maru+Gothic&display=swap");
/* DNA Diet LP ? new_style.css */

:root {
    --c-text: #663f33;
    --c-accent: #ff4770;
    --c-accent2: #FF456C;
    --c-gold: #996633;
    --c-pink-border: #f7b6d2;
    --c-pink-bg: #fff0fa;
    --c-teal: #D5EEED;
    --c-yellow: #FFFF73;
    --w-section: 1080px;
    --w-page: 1240px;
    /* top_ba_showcase ? design reference sizes (300×500 front, 280×500 side) */
    --top-ba-front-ratio: 300 / 500;
    --top-ba-side-ratio: 280 / 500;
    --ba-voice-photo-ratio: 1479 / 1109;
    --font-gothic: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    --font-body: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif;
    --font-mincho: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    --shadow-white: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 0 -2px 0 #fff, 0 2px 0 #fff, -2px 0 0 #fff, 2px 0 0 #fff;
    --shadow-text: -1px -1px 0 #663f33,
        0 -1px 0 #663f33, 1px -1px 0 #663f33, -1px 0 0 #663f33, 1px 0 0 #663f33, -1px 1px 0 #663f33, 0 1px 0 #663f33, 1px 1px 0 #663f33, -2px 0 0 #663f33, 2px 0 0 #663f33, 0 -2px 0 #663f33, 0 2px 0 #663f33;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
figcaption,
img,
section,
header,
nav,
address {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

address {
    font-style: normal;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

/* shared section width */
.conts,
.text,
.top_ba_showcase,
.case_wrap,
.box03_help,
.dnadiet_box09,
.box10_flow,
.box11_qa,
.box13_media,
.box07_point_below,
.dnadiet_box08,
.box12_staffex,
.dnadiet_box12 .menseki,
.ba_voice {
    width: 95%;
    max-width: var(--w-section);
}

/* white outline text (stats, catch copy) */
:is(.box03_help_catch_lead, .box03_help_catch_line, .box03_help_catch_em, .box03_help_catch_bottom) {
    text-shadow: var(--shadow-white);
}

/* pill badge */
:is(.top_ba_badge, .top_ba_catch) {
    display: inline-block;
    background: var(--c-accent);
    border-radius: 50px;
    color: #fff;
    font-weight: bold;
    line-height: 1.4;
}

/* LAYOUT */

html {
    overflow-x: hidden;
    max-width: 100%;
    font-size: 54.12%;
    font-size: calc(54.12% + ((1vw - 3.2px) * 0.37));
    font-family: var(--font-gothic);
}

body {
    font-family: var(--font-body);
    font-size: 1.5em;
    line-height: 1.5;
    color: var(--c-text);
    overflow-x: hidden;
    max-width: 100%;
}

#container {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

#container.container_dnadiet {
    background: url(../img/dnadiet/body_bg.png) repeat-x top left #FAF1F1 fixed;
}

#contents.contents_dnadiet,
#container.contents_diet {
    overflow: visible;
    margin: 0 auto 30px;
    padding: 20px 0;
    max-width: 1240px;
    width: 100%;
    background: #fff;
    box-shadow: 0 0 5px #ddd;
}

#contents.contents_dnadiet {
    width: 98%;
    max-width: var(--w-page);
    padding-top: 0;
    padding-bottom: 20px;
}

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

a:link {
    color: #83A139;
}

a:visited {
    color: #FCAFA7;
}

a:hover,
a:active {
    color: #BAEA83;
}

a:active img,
a:hover img {
    opacity: 0.7;
}


/* UTILITIES */

.clear {
    clear: both;
}

.right {
    text-align: right;
}

.left {
    text-align: left;
}

.center {
    text-align: center;
}

.img_left,
.img_right {
    margin: 0 auto 0.5em;
}

.img_center {
    display: block;
    margin: 0 auto 16px;
}

.attention {
    text-align: right;
    color: #C03;
    font-size: 13px;
}

.marker {
    background-color: #FFE8EE;
    font-weight: bold;
}

.bold {
    font-weight: bold;
}

.spot,
.h_dnadiet .spot-a {
    font-weight: bold;
    font-size: 110%;
}

.menseki {
    margin: 1.5rem 0 0;
    color: #C00;
    text-align: right;
}

.m-r50 {
    margin-right: 50px;
}

/* PC/SP img swap */
.only_pc {
    display: block;
}

.only_sp {
    display: none;
}

.sp_off {
    display: none;
}


/* SHARED */

.conts,
.text {
    margin: 0 auto 1.6rem;
}

.conts::after,
.text::after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: "";
    clear: both;
    height: 0;
}

.conts_text_img {
    margin-bottom: 30px !important;
}

.ttl {
    margin: 0 4px 32px;
    text-align: center;
}

.bnr {
    margin: 0 4px 16px;
}

.corona_bnr {
    margin: 0 4px 20px;
    padding-top: 30px;
}

/* Anchor offset for in-page links */
#staff_ba {
    margin-top: -120px;
    padding-top: 120px;
}

/* Kiran sparkle */

.kiran-img {
    position: relative;
    overflow: hidden;
    contain: paint;
    margin: 0px auto auto auto;
    width: 100%;
    max-width: 760px;
    margin-bottom: 40px;
}

.price_bar {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    padding: 10px 0 8px;
    display: flex;
    justify-content: center;
    align-items: baseline;
    font-family: "Leckerli One", cursive;

    /* Soft white-to-pink glow, fading at edges */
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.75) 12%,
            rgba(255, 248, 252, 0.92) 50%,
            rgba(255, 255, 255, 0.75) 88%,
            transparent 100%);

    /* Pink guide lines above and below the price */
    border-top: 2px solid #ff4770;
    border-bottom: 2px solid #ff4770;

}

.price_bar .yen,
.price_bar .price,
.price_bar .tax {
    color: #ff4770;
    font-weight: bold;
}

.price_bar .yen {
    font-size: 4rem;
    line-height: 1;
    margin-right: 1px;
    align-self: flex-end;
    padding-bottom: 6px;
}

.price_bar .price {
    font-size: 7.5rem;
    line-height: 1;
    letter-spacing: -0.03em;

    /* White halo around the digits */
    text-shadow:
        0 0 6px #fff,
        0 0 12px rgba(255, 255, 255, 0.95),
        0 0 20px rgba(255, 255, 255, 0.7),
        1px 0 0 rgba(255, 255, 255, 0.6),
        -1px 0 0 rgba(255, 255, 255, 0.6),
        0 1px 0 rgba(255, 255, 255, 0.6),
        0 -1px 0 rgba(255, 255, 255, 0.6);
}

.price_bar .tax {
    font-size: 4rem;
    line-height: 1;
    font-weight: normal;
}

.kiran {
    height: 100%;
    width: 50px;
    position: absolute;
    top: -180px;
    left: 0;
    background-color: #fff;
    opacity: 0;
    transform: translateX(-120%) rotate(45deg) scale(0);
    will-change: transform, opacity;
    animation: reflection 3s infinite;
}

@keyframes reflection {
    0% {
        transform: scale(0) rotate(45deg);
        opacity: 0;
    }

    30% {
        transform: scale(0) rotate(45deg);
        opacity: 0.3;
    }

    31% {
        transform: scale(4) rotate(45deg);
        opacity: 0.7;
    }

    100% {
        transform: scale(50) rotate(45deg);
        opacity: 0;
    }
}

/* CTA button animation */
.tel_anime {
    animation-duration: 1.3s;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes swing {
    20% {
        transform: rotate(7deg);
    }

    40% {
        transform: rotate(-2deg);
    }

    60% {
        transform: rotate(2deg);
    }

    80% {
        transform: rotate(-2deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.swing {
    transform-origin: center center;
    animation-name: swing;
}

p.bnr.tel_anime,
p.bnr.tel_bnr.tel_anime {
    overflow: hidden;
}

p#dnadiet_return span {
    display: none;
    line-height: unset;
}


/* HEADER */

.header_pc {
    display: none;
}

.header_sp {
    background: #fff;
}

.header_inner {
    overflow: hidden;
    margin: 0 auto;
    max-width: 1240px;
}

.header_top {
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
    max-width: 640px;
}

.header_sp .header_top {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 98%;
    background: #fff;
}

.header_sp .h_logo {
    padding: 1em 0.5em 0;
    box-sizing: border-box;
}

.gnav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background: linear-gradient(to bottom, #fff 12%, #eee 100%);
    box-shadow: 0 7px 7px -2px rgba(0, 0, 0, 0.2);
}

.gnav.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.gnav ul {
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
    max-width: 640px;
}

.gnav li {
    float: left;
    padding: 10px 0;
    width: 50%;
}

.gnav img {
    width: 95%;
}


/* HERO */

.main_img {
    display: block;
    margin: 0 auto 1em;
    width: 100%;
}


/* .h_dnadiet headings */

.h_dnadiet {
    position: relative;
    margin: 6.2rem auto 2.4rem;
    padding: 1rem;
    background: linear-gradient(to bottom, #ff8ca6 1%, #ff456e 9%, #ff6f8e 94%, #ff6a8b 100%);
    text-align: left;
    font-size: 2rem;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    color: #fff;
}

.h_dnadiet::after {
    content: url(../img/dnadiet/douiu_pic01.png);
    display: inline-block;
    position: absolute;
    bottom: -0.8rem;
    right: 0.2em;
    transform: scale(0.9);
    transform-origin: bottom right;
    z-index: 5;
}

.h_dnadiet.no_topmargin {
    margin-top: 0;
}

.h_dnadiet .spot,
.h_dnadiet .spot-a {
    font-size: 2.4rem;
}

.h_dnadiet .spot {
    display: block;
    width: 74%;
}

.h_dnadiet .spot-a {
    color: #FFFF73;
}

.more-cases {
    display: none;
}

/* box01 ? intro */

.top_idenshilogo {
    padding: 20px 0 0;
}

.top_idenshilogo>p {
    width: 50%;
}

.top_idenshilogo_text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 20px;
}

.top_idenshilogo_text_img {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    border-top: 2px solid #ff4770;
    border-bottom: 2px solid #ff4770;
    position: relative;
    margin-bottom: 10px;
}

.top_idenshilogo_text_img::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 10px;
    height: 10px;
    background: white;
    border-left: 2px solid #ff4770;
    border-bottom: 2px solid #ff4770;
    transform: rotate(-45deg);
    background-color: white;
}

.top_idenshilogo_text_img img {
    width: 20%;
    margin: 0;
}

.top_idenshilogo_text_img_text {
    font-size: clamp(10px, 2vw, 30px);
    text-align: center;
    margin-left: 10px;
    line-height: 1.4;
}

.top_idenshilogo_text_img_text span {
    font-size: clamp(18px, 2vw, 30px);
}

.top_idenshilogo_text_img_text_by {
    font-size: clamp(15px, 1.5vw, 25px) !important;
}


.top_idenshilogo_text p {
    font-size: clamp(20px, 2.5vw, 35px);
    text-align: center;
    font-weight: 900;
}

.top_idenshilogo_text_img_text_bold {
    font-size: clamp(30px, 4vw, 45px);
    color: #ff4770;
    background: linear-gradient(transparent 70%, #fff36d 60%);
}

.top_idenshilogo_text_img_text_special {
    font-size: clamp(20px, 2vw, 30px) !important;
}

/* box02 */

.box02_figure,
.box02_bnr {
    margin: 0 auto 1.6rem;
}

.nayami_img_box {
    display: block;
    position: relative;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    margin-bottom: 10px;
}

.nayami_img_box img {
    display: block;
    position: relative;
    width: 100%;
}

.nayami_img_box .box_text {
    width: fit-content;
    display: block;
    position: absolute;
    text-align: center;
}

.nayami_img_box .box_text.box_text1 {
    font-size: clamp(6px, 2vw, 15px);
    bottom: 8%;
    left: 4%;
}

.nayami_img_box .box_text.box_text2 {
    font-size: clamp(6px, 2vw, 15px);
    top: 34%;
    left: 9%;
}

.nayami_img_box .box_text.box_text3 {
    font-size: clamp(6px, 2vw, 15px);
    top: 9%;
    left: 30%;
}

.nayami_img_box .box_text.box_text4 {
    font-size: clamp(6px, 2vw, 15px);
    top: 14%;
    left: 60%;
}

.nayami_img_box .box_text.box_text5 {
    font-size: clamp(6px, 2vw, 15px);
    top: 47%;
    right: 4%;
}

.box02_txt_note {
    margin: 0;
    font-size: 1.4rem;
}

.box02_idenshi_txt_lead {
    margin: 0 0 15px;
    font-size: 1.8rem;
}

.box02_idenshi_txt_em {
    margin: 0 0 15px;
    font-size: 2.4rem;
}

.confidence_bnr {
    margin-bottom: 10px;
}

.box02_txt_em {
    margin: 0 0 15px;
    font-size: 2.4rem;
}

.box02_txt_lead span,
.box02_txt_em span {
    color: var(--c-accent);
    font-weight: bold;
}

.box02_txt_lead {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.box02_idenshi_txt_lead span,
.box02_idenshi_txt_em span {
    color: var(--c-accent);
    font-weight: bold;
}


/* box03 */

.wrapperbg_gray {
    background-color: #dcdcdc;
    padding: 20px 0 10px;
    background-image: url(../img/dnadiet/onayami_woman_sp.png);
    background-position: left bottom;
    background-repeat: no-repeat;
}

.nayami_list {
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.nayami_list li {
    background-color: rgba(255, 255, 255, 0.8);
    display: inline-block;
    font-weight: bold;
    font-size: 16px;
    width: 60%;
    text-align: center;
    border-radius: 50px;
    padding: 8px;
    margin-bottom: 8px;
}

.nayami_list li span {
    color: #ff4a72;
    background: linear-gradient(transparent 60%, #ffff5a 0);
}

.conts.nayami_txt p {
    text-align: unset;
}

.conts.nayami_txt p br {
    display: none;
}

.box03_help {
    margin: 0 auto;
}

.box03_help_conts {
    overflow: hidden;
    padding: 3vw 0 2vw;
    background: url(../img/dnadiet/dounaru_help_bg.png) no-repeat top center;
    background-size: 100%;
}

.box03_help_catch {
    margin: 0 auto 1rem;
    max-width: 92%;
    text-align: center;
}

.box03_help_catch_lead {
    display: block;
    font-weight: bold;
    font-size: clamp(1.4rem, 2.25vw, 2.75rem);
    color: var(--c-text);
    line-height: 1.45;
}

.box03_help_catch_line {
    display: block;
    font-weight: bold;
    font-size: clamp(2rem, 3.5vw, 4rem);
    color: var(--c-text);
    line-height: 1.15;
}

.box03_help_catch_em {
    color: var(--c-accent);
    font-size: clamp(2.6rem, 4vw, 5rem);
    font-weight: bold;
}

.box03_help_catch_bottom {
    font-weight: bold;
    font-size: clamp(2rem, 3.5vw, 4rem);
    color: var(--c-text);
    line-height: 1.25;
}

.box03_help_txt {
    text-align: center;
}

.box03_help_txt br {
    display: none;
}


/* box04 ? before/after */
.top_ba_showcase {
    margin: 0 auto 2.4rem;
    padding: 3rem 0;
}

.top_ba_board {
    padding: 30px 20px;
    border: 5px solid var(--c-pink-border);
    border-radius: 10px;
    background-color: #fff0fa;
    background-size: 9px 9px;
    background-image: linear-gradient(-45deg, #fff 15%, transparent 15%, transparent 50%, #fff 50%, #fff 65%, transparent 65%, transparent);
    box-sizing: border-box;
}

.top_ba_inbox {
    display: flex;
    align-items: stretch;
    gap: 1.6rem;
}

.top_ba_main {
    flex: 1 1 65%;
    min-width: 0;
    background: url(../img/dnadiet/before_after_background.png) no-repeat center center;
    background-size: 72%;
}

.top_ba_photos {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
}

.top_ba_figure {
    flex: 0 0 48%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.top_ba_badge {
    position: relative;
    z-index: 1;
    margin-bottom: 0.6rem;
    padding: 0.5rem 2.4rem;
    font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.top_ba_figure_badge {
    position: relative;
    z-index: 1;
    width: 65%;
    height: auto;
    flex-shrink: 0;
}

/* Fixed frame ? front-facing B/A (300×500); any source resolution fills this box */
.top_ba_photo_frame {
    position: relative;
    width: 100%;
    aspect-ratio: var(--top-ba-front-ratio);
    overflow: hidden;
    flex-shrink: 0;
}

/* Fixed frame ? side-profile B/A (280×500) */
.top_ba_side_frame {
    position: relative;
    width: 100%;
    aspect-ratio: var(--top-ba-side-ratio);
    overflow: hidden;
}

:is(.top_ba_photo_frame, .top_ba_side_frame) .top_ba_photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom center;
}

.top_ba_stats {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    width: max-content;
    max-width: min(42%, 220px);
    padding: 0 0.4rem;
    pointer-events: none;
    font-family: "Leckerli One", cursive;
    font-size: 6rem;
    line-height: 0.5;
    color: #ffdce2;
    font-weight: 100;
}

.top_ba_stat {
    text-align: center;
}

.top_ba_stat_label {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--c-accent);
    font-family: var(--font-mincho);
    font-size: clamp(1.5rem, 2vw, 3rem);
    font-weight: bold;
    line-height: 1;
}

.top_ba_stat_value,
.top_ba_stat_unit {
    display: inline;
    color: #fafcc5;
    font-weight: 500;
    -webkit-text-stroke: 0.7rem var(--c-accent);
    paint-order: stroke fill;
    font-weight: 500;
}

.top_ba_stat_value {
    font-size: clamp(4rem, 6vw, 7rem);
    line-height: 1;
}

.top_ba_stat_unit {
    font-size: clamp(2.4rem, 2vw, 3rem);
}

.top_ba_side {
    flex: 0 0 35%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 1.2rem;
}

.top_ba_voice_box {
    padding: 2.4rem 1.2rem 1.6rem;
    background: #fff;
    border: 2px solid #f7b6d2;
    border-radius: 4px;
    text-align: center;
    box-sizing: border-box;
}

.top_ba_catch {
    position: relative;
    margin-bottom: 2rem;
    padding: 1rem 3rem;
    font-size: clamp(1.3rem, 2vw, 2rem);
    border-radius: 5px;
}

.top_ba_voice_txt {
    margin: 0;
    color: var(--c-accent);
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    font-weight: bold;
    line-height: 1.5;
}

.top_ba_voice_name {
    margin: 0.8rem 0 0;
    color: var(--c-gold);
    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
    font-weight: bold;
    text-align: right;
}

.top_ba_side_photos {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.2rem;
    width: 100%;
}

.top_ba_side_photo {
    flex: 1 1 0;
    min-width: 0;
    max-width: 46%;
}

.top_ba_side_arrow {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    align-self: center;
    padding: 0 0.1rem;
}

.top_ba_side_arrow span {
    color: var(--c-accent);
    font-size: 40px;
    font-weight: bold;
    line-height: 1;
}

/* Legacy img-row before/after blocks */
.top_ba_box {
    display: flex;
    flex-direction: column;
    padding: 0 6px;
    margin: 0 10px 10px;
    background: repeating-linear-gradient(315deg, #fee4fa, #fee4fa 3px, #fff0fa 0, #fff0fa 11px);
}

.ba_voice {
    overflow: hidden;
    clear: both;
    border: solid 1px #868695;
    padding: 1em;
    margin: 0 auto 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items: stretch;
}

.ba_voice_photo_frame {
    position: relative;
    width: 100%;
    aspect-ratio: var(--ba-voice-photo-ratio);
    overflow: hidden;
    flex-shrink: 0;
}

.ba_voice_photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ba_v_txtbox {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: clamp(16px, 3vw, 20px);
}

.ba_voice_ttl {
    font-weight: bold;
}

.ba_chui {
    border-top: solid 1px #868695;
    margin: 4px;
}

.ba_txt {
    font-size: 13px;
    color: #aaa;
    line-height: 1.4;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background: #fff;
}

/* Main container */

.top_ba02 {
    width: 95%;
    max-width: var(--w-section);
    margin: auto;
}

.top_ba_leg_inr {
    position: relative;
    width: 60%;
    max-width: 100%;
    margin: 10px;
    border-radius: 10px;
    overflow: hidden;

    background-color: #fbf7c4;
    background-size: 9px 9px;
    background-image: linear-gradient(-45deg,
            #fff 15%,
            transparent 15%,
            transparent 50%,
            #fff 50%,
            #fff 65%,
            transparent 65%,
            transparent);
}

/* Left / right comparison area */
.top_ba_leg_photos {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* Each side (Before / After) */
.top_ba_leg_figure {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 0 120px;
    overflow: hidden;
}

/*
    Media wrapper ? ribbon is positioned against the photo,
    so it always overlaps the waist regardless of img size.
  */
.top_ba_leg_media {
    position: relative;
    width: 90%;
    flex-shrink: 0;
}

/* Fixed-size frame ? identical box for any source resolution */
.top_ba_leg_photo_frame {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 3/4.5;
    overflow: hidden;
}

/* White glow behind legs */
.top_ba_leg_media::before {
    content: "";
    position: absolute;
    width: 70%;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #fff;
    z-index: 0;
    pointer-events: none;
}

.top_ba_leg_media>.top_ba_leg_figure_badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.top_ba_leg_photo {
    display: block;
    width: 70%;
    object-position: center top;
}

/*
    Ribbon labels ? wider than the photo (118%), large text,
    overlapping the top of the img to hide the waist.
  */
.top_ba_leg_label {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;

    width: 118%;
    padding: 18px 10px;
    text-align: center;

    color: #fff;
    font-family: "Arial", "Helvetica Neue", sans-serif;
    font-size: clamp(30px, 4.8vw, 46px);
    font-weight: bold;
    letter-spacing: 0.08em;
    line-height: 1;

    clip-path: polygon(22px 0%,
            calc(100% - 22px) 0%,
            100% 50%,
            calc(100% - 22px) 100%,
            22px 100%,
            0% 50%);
}

/* Center transition arrows */
.top_ba_leg_arrow {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;

    display: flex;
    color: var(--c-accent);
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
    pointer-events: none;
}

.top_ba_leg_arrow span {
    display: block;
    margin-left: -6px;
}

.top_ba_leg_arrow span:first-child {
    margin-left: 0;
}

/* Bottom testimonial box */
.top_ba_leg_voice_box {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    width: calc(100% - 48px);
    padding: 15px 10px;
    background: #fff;
    border: 3px solid var(--c-accent);
    border-radius: 20px;
    text-align: center;
}

.top_ba_leg_voice_txt {
    margin: 0;
    font-family: "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
    font-size: clamp(1.1rem, 1.5vw, 1.8rem);
    font-weight: bold;
    line-height: 1.75;
    color: var(--c-text);
}

.top_ba_leg_voice_txt .spot {
    color: var(--c-accent);
    font-weight: bold;
}

/* Case study charts */
.case_wrap {
    border: solid 1px #868695;
    padding: 0.6em;
    margin: 0 auto 20px;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: #FBF7C4;
}

.case_wrap_inner {
    background-color: white;
}

.case_img {
    display: flex;
    padding: 3%;
    justify-content: space-between;
}

.case_img img {
    width: 48%;
    margin: 0;
}

.case_title {
    text-align: center;
    margin-bottom: 15px;
    font-size: 24px;
    font-weight: bold;
}

.case_result {
    text-align: center;
    margin-top: 5%;
    padding-bottom: 5%;
    line-height: 1;
    font-size: 18px;
    font-weight: bold;
}

/* box05 */

.dnadiet_box05 strong {
    color: #FF456C;
    font-size: 1.8rem;
}

.dnadiet_box05> :first-child {
    margin-bottom: 18px;
}

.box05_chigai02_txt p {
    margin-bottom: 8px;
}

.dnadiet_box05 .h_dnadiet.no_topmargin {
    margin-top: -20px;
}

.box05_subttl {
    position: relative;
    padding: 0.8rem 1.6rem;
    margin: 0 auto 3.2rem;
    background: #D5EEED;
    text-align: center;
    font-family: inherit;
    font-weight: bold;
}

.box05_subttl span {
    display: block;
}

.box05_subttl_span {
    /* font-size: 24px; */
    font-size: clamp(16px, 5.3vw, 24px);
}

.box05_subttl+p {
    margin: 0 auto 1.6rem;
}

.box05_subttl02,
.box05_subttl03 {
    margin: min(5vw, 40px) auto !important;
    text-align: center;
}

.box05_subtitle {
    font-size: clamp(18px, 3.75vw, 34px);
    font-weight: bold;
    line-height: 1.4;
}

.box05_subtitle_span {
    font-size: clamp(23px, 5.3vw, 48px);
    color: var(--c-accent);
}

.box05_subtitle1 {
    font-size: clamp(18px, 4.2vw, 38px);
    font-weight: bold;
    line-height: 1.4;
    color: var(--c-accent);
}

.box05_subtitle1_span {
    color: var(--c-text);
    font-size: clamp(20px, 5.4vw, 50px);
}

.box05_subtitle1_span1 {
    color: var(--c-accent);
    font-size: clamp(20px, 5.4vw, 50px);
    background: linear-gradient(transparent 60%, #fff36d 60%);
}

.box05_subtitle1_span2 {
    color: var(--c-text);
    font-size: clamp(18px, 4.2vw, 38px);

}

.box05_subtitle1_span3 {
    color: var(--c-text);
    font-size: clamp(20px, 4.25vw, 50px);
}

.box05_subtitle1_span4 {
    font-size: clamp(20px, 4.25vw, 50px);
}

.box05_subtitle1_span5 {
    color: var(--c-text);
}

.chigai_txt05_11::after {
    display: none;
}

/* Hide legacy img headline ? replaced by chigai_txt05_11_box */
p.box05_subttl02.chigai_txt05_11 {
    display: none;
}

.chigai_txt05_11_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: min(5vw, 28px);
    margin: min(5vw, 40px) auto;
    width: 100%;
    max-width: var(--w-section);
}

.chigai_txt05_11_box .box05_subttl02_txt {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.chigai_txt05_11_box .box05_subttl02_txt p {
    margin: 0;
    font-weight: bold;
    text-align: center;
    line-height: 1.45;
    font-size: clamp(20px, 4.2vw, 44px);
}

.chigai_txt05_11_box .chigai_txt05_11_accent {
    color: var(--c-accent);
}

.chigai_txt05_11_box .chigai_txt05_11_brown {
    color: var(--c-text);
}

.chigai_txt05_11_box .chigai_txt05_11_highlight {
    color: var(--c-text);
    background: linear-gradient(transparent 55%, var(--c-yellow) 55%);
}

.chigai_txt05_11_box .box05_subttl02_img {
    flex: 0 0 auto;
    width: min(52%, 220px);
    margin: 0 auto;
}

.chigai_txt05_11_box .box05_subttl02_img img {
    display: block;
    width: 100%;
    height: auto;
}

.box05_title_txt h3 {
    color: #663f33;
    font-size: 2.2rem;
    font-weight: bold;
    background-color: #d5eeed;
    padding: 5px 0 5px 20px;
    margin: 0 0 10px;
}

.ac_conts {
    display: none;
}

#ac_bt {
    text-align: center;
    cursor: pointer;
}

.box05_reason li,
.box06_reason li {
    width: 95%;
    max-width: var(--w-section);
    margin: 0 auto 1.6rem;
    padding: 4rem;
    border: solid 1px #ccc;
    box-sizing: border-box;
}

.box05_reason li {
    box-shadow: inset 0 0 0 2rem var(--c-pink-bg);
}

.box06_reason li {
    box-shadow: inset 0 0 0 2rem var(--c-teal);
}

:is(.box05_reason_upper h3, .box06_reason_upper h3) {
    overflow: hidden;
    margin: 0 auto 1.6rem;
    padding: 0 0.8rem 0.2rem;
    border-bottom: dotted 3px #999;
    color: var(--c-accent2);
    line-height: 1.2;
}

.box05_reason h3 {
    font-size: clamp(15px, 3vw, 20px);
    overflow: hidden;
    margin: 0 auto 1.6rem;
    padding: 0 0.8rem 0.2rem;
    border-bottom: dotted 3px #999;
    color: #FF456C;
    line-height: 1.2;
}

.box06_reason_upper h2 {
    overflow: hidden;
    padding: 0 0.8rem 0.2rem;
    font-weight: bold;
    text-shadow: var(--shadow-text);
    color: white;
    letter-spacing: 2px;
    background: linear-gradient(transparent 55%, var(--c-yellow) 55%);
    width: fit-content;
    margin-bottom: 15px;
    line-height: 1.2;
}

.box06_reason_upper h2 span {
    font-size: 30px;
}

.box06_reason_upper h3 {
    font-size: 2.2rem;
}

.box05_reason_txt p {
    margin: 0 auto 1.6rem;
}

.box05_reason_matome {
    margin: min(5vw, 40px) auto;
}

.box05_present {
    background: #fff0fa;
    padding: min(3vw, 24px);
    box-sizing: border-box;
}


/* box06 */
.box06_reason li:first-child,
.box06_reason li:nth-child(3) {
    padding-bottom: 2rem;
}

.box06_reason li br {
    display: none;
}

.box06_reason_upper {
    overflow: hidden;
}

.box06_reason_upper figure {
    margin: 0 auto 0.8rem;
}

.box06_reason_upper h3 br {
    display: none;
}

.box06_reason_upper h3 img {
    display: block;
    margin: 0 auto 1.2rem 0;
}

.box06_reason_txt {
    overflow: hidden;
    padding: 0 0.8rem;
    margin: 0 auto 1.6rem;
}

.box06_reason_txt strong {
    color: #FF456C;
}

.box06_reason_txt02 {
    box-sizing: border-box;
}

.box06_reason_txt02 .small {
    font-size: 0.9em;
}

.box06_reason6_pics,
.box06_reason2_pics {
    clear: both;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.box06_reason6_pics>*,
.box06_reason7_pics>*,
.box06_reason2_pics>* {
    margin-bottom: 1.2rem;
}

.box06_reason6_pics> :nth-child(-n+2) {
    width: 48%;
}

.box06_reason6_pics> :last-child {
    width: 98%;
    max-width: 430px;
}


/* box07-08 */

.dnadiet_box07 h2 {
    margin: 0 auto 1.6rem;
    padding: 3.2rem 0 1.2rem;
    background: url(../img/dnadiet/point_bg01.png) no-repeat center center;
    text-align: center;
    font-size: 2.4rem;
    font-weight: bold;
}

.box07_point_list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto 2.4rem;
}

.box07_point_list li {
    position: relative;
    width: 48%;
    max-width: 324px;
    margin: 0 1%;
}

.box07_point_below {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.box07_point_below figure {
    flex: 0 0 auto;
    margin: 0;
}

.box07_point_below figure img {
    display: block;
    width: 100%;
    height: auto;
}

.box07_point_below_text {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    text-align: center;
}

.box07_point_below_text p {
    margin: 0;
    line-height: 1.5;
}

.box07_point_below_lead {
    font-size: clamp(14px, 2.8vw, 22px);
    font-weight: bold;
    color: var(--c-text);
}

.box07_point_below_em {
    margin-top: 0.35em;
    font-size: clamp(26px, 5vw, 44px);
    font-weight: bold;
    color: var(--c-accent);
    line-height: 1.35;
}

.box07_point_below_promise {
    font-size: clamp(34px, 6.8vw, 58px);
    line-height: 1.2;
}

.dnadiet_box08 {
    margin: 0 auto 1.6rem;
    background: var(--c-teal);
    padding: 1.6rem;
    border: solid 1.2rem #D5EEED;
    text-align: center;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 0.4rem #fff;
}

.dnadiet_box08 br {
    display: none;
}

.box08_owabi_txt01 {
    margin: 0 auto 1.6rem;
}

.box08_owabi_txt01 strong {
    font-size: 2rem;
}

.box08_owabi_txt02 strong {
    color: #FF456C;
}

.box08_owabi_txt02 strong.spot {
    font-size: 2.4rem;
}


/* box09 */

.dnadiet_box09 {
    margin: 0 auto 1.6rem;
}

.box09_omoushikomi {
    margin-bottom: 50px;
}

.box09_counseling_conts {
    overflow: hidden;
}

.box09_counseling_conts h2,
.box09_counseling_ttl {
    margin: 0 auto 1.6rem;
}

.box09_counseling_conts figure {
    max-width: 240px;
}

.box09_counseling_ttl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35em 0.5em;
    font-weight: bold;
    line-height: 1.25;
}

.box09_counseling_ttl_main {
    display: inline-block;
    padding: 0.4em 0.85em;
    background: var(--c-accent2);
    color: #fff;
    font-size: clamp(14px, 3.8vw, 32px);
    border-radius: 6px;
    box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.18);
}

.box09_counseling_ttl_sub {
    color: var(--c-accent2);
    font-size: clamp(14px, 4.8vw, 40px);
    line-height: 1.1;
}

.box09_counseling_txt strong {
    color: #FF456C;
}

.box09_counseling_txt02 {
    margin: 2.4rem;
    font-size: 1.8rem;
    font-weight: 900;
    text-align: center;
}

.box09_counseling_txt02 span {
    color: #FF456C;
}

.box09_counseling_bnr01 {
    margin: 0 auto 2.4rem;
    width: 95%;
    max-width: var(--w-section);
    padding: 1.6rem;
    background: #FF456C;
    border-radius: 1.2rem;
    text-align: center;
}

.box09_counseling_bnr01 a {
    display: block;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    line-height: 1.45;
}

.box09_counseling_bnr01 a:hover {
    opacity: 0.92;
}

.box09_counseling_bnr01_line1,
.box09_counseling_bnr01_line2 {
    display: block;
}

.box09_counseling_bnr01_line1 {
    font-size: clamp(16px, 4.2vw, 34px);
}

.box09_counseling_bnr01_em {
    color: var(--c-yellow);
}

.box09_counseling_bnr01_line2 {
    margin-top: 0.2em;
    font-size: clamp(10px, 3.2vw, 28px);
}

.box09_omoushikomi figure {
    margin-bottom: -1.6rem;
}

.box09_omoushikomi br {
    display: none;
}

.box09_omoushikomi_txt strong {
    font-size: 2.4rem;
    color: #FF456C;
}

.box09_omoushikomi_attention {
    font-size: clamp(28px, 4.8vw, 32px);
    font-weight: bold;
    text-align: center;
    color: var(--c-accent2);
}

.omoushikomi_txt02 {
    position: relative;
    top: 0;
    margin: 1em auto;
    padding: 3%;
    width: 98%;
    max-width: 640px;
    background: #fdeaae;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}

.conseling_lead {
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: var(--c-accent2);
    font-size: clamp(13px, 3.5vw, 32px);
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
}

.conseling_info {
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.conseling_info_inner {
    display: flex;
    gap: 1.6rem;
    align-items: flex-start;
    margin-bottom: 30px;
}

.conseling_map {
    margin-bottom: 30px;
    aspect-ratio: 16 / 9;
}

.conseling_map iframe {
    width: 100%;
    border: 0;
}

.conseling_hospital_photo {
    flex: 0 0 52%;
    max-width: 52%;
}

.conseling_hospital_photo img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 1rem;
}

.conseling_details {
    flex: 1 1 48%;
    max-width: 48%;
}

.conseling_contact_info {
    margin: 1.2rem 1.4rem;
}

.conseling_schedule {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 1rem;
}

.conseling_schedule th,
.conseling_schedule td {
    text-align: center;
    font-size: clamp(14px, 2vw, 20px);
}

.conseling_schedule tr {
    border-bottom: 1px solid;
    line-height: 2;
}

.conseling_schedule th,
.conseling_schedule td {
    font-weight: 100;
}

.conseling_schedule th:first-child,
.conseling_schedule td:first-child {
    white-space: nowrap;
}

.conseling_schedule-note {
    font-size: 1.8rem;
    margin: 0 0 1rem;
    line-height: 1.6;
}

.conseling_access {
    display: grid;
    grid-template-columns: minmax(5rem, auto) 1fr;
    row-gap: 0.4rem;
    column-gap: 1rem;
    font-size: clamp(0.95rem, 1.3vw, 1rem);
}

.conseling_access_note {
    font-size: clamp(14px, 1.6vw, 16px);
}

.conseling_access dt {
    font-size: clamp(12px, 1.5vw, 14px);
    font-weight: 700;
    color: #63482d;
}

.conseling_access dd {
    font-size: clamp(12px, 1.5vw, 14px);
    margin: 0;
    line-height: 1.8;
    text-align: left;
}

.conseling_contact_buttons .conseling_contact_btn img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;
}

.conseling_contact_buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

/* box10-13 */

.box10_flow {
    margin: 0 auto 1.6rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.box10_flow li {
    margin: 0 0 1.6rem;
    max-width: 240px;
}

.box10_flow li figure {
    border: solid 0.4rem #fff;
    box-shadow: 0 0 0 0.1rem #ccc;
    aspect-ratio: 8 / 5;
    overflow: hidden;
}

.box10_flow_ttl {
    text-align: left;
    font-weight: bold;
    margin-bottom: 8px;
}

.box10_flow_ttl span {
    background-color: var(--c-text);
    color: white;
    font-weight: 100;
    padding: 1px 4px;
    border-radius: 3px;
}

.box10_flow_txt {
    margin: 0.8rem 0;
    font-size: 1.3rem;
    line-height: 1.4;
}



.box11_qa {
    margin: 0 auto 1.6rem;
}

.box11_qa li {
    margin: 0 auto 1.6rem;
    max-width: 320px;
}

.box11_qa li .q {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.box11_qa li .q p {
    padding: 1.5rem;
    font-size: 2.2rem;
    line-height: 1.5;
}

.box11_qa li .q span {
    font-size: 3.2rem;
    font-family: cursive;
}

.box11_qa li .a {
    padding: 1.5rem;
    background: #D5EEED;
    font-size: 1.3rem;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.box11_qa li .a span {
    font-size: 3.5rem;
    color: var(--c-accent2);
}

.box13_media {
    margin: 0 auto 1.6rem;
}

.box13_media_ttl {
    text-align: center;
    font-size: clamp(10px, 4vw, 42px);
    margin-bottom: 25px;
}

.box13_media_list {
    display: flex;
    justify-content: center;
}

.box13_media_list li {
    width: 30%;
    max-width: 260px;
    margin: 0 1.5% 1.6rem;
}

.box13_media_list figcaption {
    padding: 0.8rem;
    text-align: center;
}

.footer {
    background: #6d3d2f;
    color: #ffffff;
    padding: 2rem 0;
}

.footer_inner {
    width: 95%;
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.footer_logo img {
    display: block;
    max-width: 220px;
    height: auto;
}

.footer_text {
    font-size: 1.2rem;
    line-height: 1.6;
    margin: 0;
    color: #f4dfd6;
}

.footer_text a {
    color: #ffd8c6;
    text-decoration: underline;
}

.footer_top {
    display: none;
}

.footer_top img {
    display: block;
    width: 56px;
    height: auto;
}

@media screen and (max-width: 679px) {
    .footer_inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer_logo {
        display: none;
    }

    .footer_text {
        font-size: 1rem;
        max-width: 100%;
    }

    .footer_top {
        display: block;
        margin-top: 1rem;
    }
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* --- max 480px --- */
@media screen and (max-width: 480px) {

    .price_bar {
        bottom: 15px !important;
    }

    .price_bar .price {
        font-size: clamp(20px, 9vw, 40px) !important;
    }

    .top_ba_leg_voice_box {
        padding: 5px;
        border-radius: 10px;
        border: 2px solid var(--c-accent);
    }

    .top_ba_leg_figure {
        padding: 40px 0 70px;
    }

    .top_ba_stats {
        line-height: 0.5 !important;
    }

    .box05_subtitle1 {
        line-height: 1.6;
    }

    .box07_point_below_text p {
        font-size: clamp(10px, 5vw, 40px);
    }

    .box07_point_below_em {
        font-size: clamp(10px, 8vw, 80px) !important;
    }

    .box07_point_below_promise {
        font-size: clamp(10px, 12vw, 120px) !important;
    }

    .box09_counseling_bnr01 {
        width: 100%;
        padding: 1rem;
    }

    .conseling_lead {
        margin-bottom: 20px;
    }

    .conseling_info_inner {
        margin-bottom: 20px;
    }
}


/* --- max 679px --- */
@media screen and (max-width: 679px) {
    .box07_point_list li:last-child {
        margin-top: -2rem;
    }

    .only_pc {
        display: none;
    }

    .only_sp {
        display: block;
    }

    .top_ba_showcase {
        padding: 2rem 0;
    }

    .top_ba_board {
        padding: 15px;
    }

    .top_ba_inbox {
        flex-direction: column;
        gap: 20px;
    }

    .top_ba_side {
        flex: 1 1 auto;
    }

    .top_ba_catch {
        padding: 1rem 2rem;
    }

    .top_ba_catch::after {
        bottom: -15px;
        border-width: 15px 8px 0 8px;
    }

    .top_ba_stats {
        max-width: min(50%, 200px);
        gap: 2rem;
        line-height: 1;
    }

    .top_ba_stat_label {
        font-size: clamp(1.8rem, 3vw, 2rem);
        margin-bottom: 6px;
    }

    .top_ba_stat_value {
        font-size: clamp(4.4rem, 7vw, 6rem);
        letter-spacing: -0.1em;
        display: flex;
        align-items: flex-end;
        line-height: 1;
        justify-content: center;
    }

    .top_ba_leg_inr {
        width: 100%;
    }

    .top_ba_leg_voice_txt {
        font-size: clamp(1rem, 3.5vw, 3rem);
    }

    .top_idenshilogo>p {
        width: 100%;
    }

    .top_idenshilogo_text {
        align-items: normal;
    }

    .top_idenshilogo_text_img_text {
        font-size: clamp(1.5rem, 4vw, 50px);
    }

    .top_idenshilogo_text_img_text span {
        font-size: clamp(1.5rem, 4.5vw, 35px);
    }

    .top_idenshilogo_text_img_text_by {
        font-size: clamp(1.5rem, 3.5vw, 35px) !important;
    }

    .top_idenshilogo_text_img_text_bold {
        font-size: clamp(2.5rem, 7vw, 35px);
    }

    .top_idenshilogo_text_img_text_special {
        font-size: clamp(1.5rem, 3.5vw, 35px) !important;
    }

    .top_idenshilogo_text p {
        font-size: clamp(2rem, 5vw, 35px);
    }

    .price_bar {
        bottom: 30px;
    }

    .price_bar .yen {
        font-size: clamp(2rem, 6vw, 35px);
    }

    .price_bar .price {
        font-size: clamp(50px, 9vw, 70px);
    }

    .price_bar .tax {
        font-size: clamp(2rem, 6vw, 35px);
    }

    .box03_help_catch_lead {
        font-size: clamp(1rem, 5vw, 6rem);
    }

    .box03_help_catch_line {
        font-size: clamp(1.5rem, 7vw, 9rem);
    }

    .box03_help_catch_em {
        font-size: clamp(1.5rem, 9vw, 10rem);
    }

    .box03_help_catch_bottom {
        font-size: clamp(1.5rem, 7vw, 9rem);
    }

    .top_ba_voice_box {
        padding: 1.5rem 0.2rem 0.8rem;
    }

    .box06_reason_txt02 {
        position: relative;
        display: inline-block;
        margin: 2rem auto;
        padding: 1.6rem;
        background: #FBF7C4;
    }

    .box06_reason_txt02::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -1.5rem;
        border: 1.5rem solid transparent;
        border-top: 1.5rem solid #FBF7C4;
    }

    .conseling_info_inner {
        flex-direction: column;
        gap: 2.6rem;
    }

    .conseling_hospital_photo,
    .conseling_details {
        max-width: 100%;
        width: 100%;
    }

    .conseling_schedule th,
    .conseling_schedule td {
        font-size: clamp(13px, 3vw, 30px);
    }

    .conseling_access {
        column-gap: 0;
    }

    .conseling_access dt {
        font-size: clamp(13px, 3vw, 18px);
    }

    .conseling_access dd {
        font-size: clamp(13px, 2.5vw, 20px);
    }
}

/* --- min 480px --- */
@media screen and (min-width: 480px) {

    .box05_chigai {
        display: flex;
        justify-content: space-around;
        align-items: flex-end;
    }

    .box05_chigai p {
        margin-bottom: 0;
    }

    .box05_chigai_pic {
        width: 100%;
        max-width: 250px;
        margin-right: 30px;
    }

    .box05_chigai02 .img_left,
    .box05_chigai02 .img_right {
        float: none;
        margin: 0 0 1em;
    }

    .box07_point_list li {
        width: 31%;
    }

    .box07_point_below {
        flex-direction: row-reverse;
        align-items: center;
        justify-content: center;
    }

    .box07_point_below figure {
        flex: 0 0 min(50%, 550px);
    }

    .box07_point_below_text {
        flex: 1 1 50%;
    }

    .box07_point_below_lead {
        font-size: clamp(13px, 2.2vw, 22px);
        font-weight: bold;
    }

    .box07_point_below_em {
        font-size: clamp(18px, 3.8vw, 44px);
    }

    .box07_point_below_promise {
        font-size: clamp(24px, 5.2vw, 50px);
    }

    .box10_flow li {
        width: 48%;
        box-sizing: border-box;
        padding-right: 2.8rem;
    }

    .box10_flow li:not(:last-child) {
        position: relative;
    }

    .box10_flow li:not(:last-child)::before {
        position: absolute;
        top: 6rem;
        right: 0.8rem;
        content: url(../img/dnadiet/flow_arrow.png);
        display: block;
    }

    .couseling_in_list li {
        width: 50%;
    }

    .couseling_in_list li> :nth-child(2) {
        min-height: 4em;
    }
}

/* --- min 680px (PC layout) --- */
@media screen and (min-width: 680px) {
    body {
        line-height: 1.8;
        width: 100%;
        max-width: 1240px;
        margin-top: 0 !important;
    }

    #contents.contents_dnadiet {
        overflow: visible;
        margin: 3rem auto 30px;
        padding: 0 0 20px;
        width: 98%;
        max-width: 1240px;
        background: #fff;
        box-shadow: 0 0 5px #ddd;
    }

    html {
        font-size: 62.5%;
    }

    .img_left {
        margin: 0 16px 16px 0;
        float: left;
    }

    .img_right {
        margin: 0 0 16px 16px;
        float: right;
    }

    .main_img {
        margin: 1em 0 0;
        text-align: center;
    }

    .pc_off {
        display: none;
    }

    .padding_right_120_only_pc {
        padding-right: 120px !important;
    }

    .sp_off {
        display: block;
    }

    .bnr {
        margin: 0 0 16px;
        text-align: center;
    }

    /* Header ? PC */
    .header_sp {
        display: none;
    }

    .header_pc {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        width: 100%;
        background: linear-gradient(to bottom, #f6f6ed 0%, #fff 67%, #f3f3e7 100%);
        box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.3);
    }

    #header {
        min-height: 140px;
    }

    #contents.contents_dnadiet {
        margin-top: 140px;
    }

    .h_upper {
        display: flex;
        justify-content: space-between;
        margin: 16px auto 16px;
        width: 98%;
    }

    .h_name {
        width: 31.61%;
        max-width: 380px;
        margin: 8px 1.33% 0 0;
    }

    .h_name h1 {
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 0.1em;
    }

    .header_in_list {
        display: flex;
        justify-content: flex-end;
        max-width: 696px;
        width: 40%;
        gap: 10px;
    }

    .header_in_list li {
        width: 310px;
    }

    .h_in_contact {
        display: flex;
        margin: 4px 0 0;
    }

    .h_bt_tel {
        display: inline-block;
        cursor: pointer;
    }

    /* Section headings */
    .h_dnadiet {
        text-align: center;
    }

    .h_dnadiet::after {
        bottom: -1rem;
        right: 15px;
    }

    .h_dnadiet .spot {
        width: auto;
        display: inline-block;
    }

    /* box03 */
    .box03_help {
        display: flex;
        flex-flow: row-reverse;
        align-items: flex-end;
        margin-bottom: 0;
    }

    .box03_help_conts {
        width: 45%;
    }

    .box03_help figure {
        width: 55%;
    }

    .wrapperbg_gray {
        padding: 40px 0 46px;
        margin-top: -24px;
        background-image: url(../img/dnadiet/onayami_woman_pc.png);
        background-position: center top 40px;
    }

    .nayami_list {
        box-sizing: border-box;
        padding: 20px;
        margin: 40px auto 0;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .nayami_list li {
        width: 40%;
        line-height: 1.2;
        padding: 24px 16px;
        border-radius: 70px;
        font-size: 30px;
    }

    .nayami_list li:first-of-type,
    .nayami_list li:nth-of-type(2) {
        margin-bottom: 4%;
    }

    .conts.nayami_txt p {
        text-align: center;
    }

    .conts.nayami_txt p br {
        display: unset;
    }

    /* box04 */
    .top_ba_showcase {
        padding: 3rem 0;
    }

    .top_ba_stats {
        max-width: min(50%, 240px);
    }

    .top_ba_box {
        display: flex;
        flex-direction: row;
        padding: 0 6px;
        margin: 0 auto 1.6rem;
        width: 95%;
        max-width: 1080px;
    }

    .ba_voice {
        flex-direction: row;
        align-items: flex-start;
        gap: 1.3em;
        padding: 1em 1em;
    }

    .ba_voice_photo_frame {
        flex: 0 0 35%;
        width: 50%;
        max-width: 50%;
    }

    .ba_v_txtbox {
        flex: 1 1 65%;
        font-size: clamp(16px, 2vw, 22px);
    }

    .ba_txt {
        font-size: 13px;
        color: #aaa;
    }

    .top_ba02 {
        display: flex;
        justify-content: center;
    }

    .conts-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.6rem;
        margin-bottom: 30px;
    }

    .top_idenshilogo {
        display: flex;
        justify-content: center;
        margin: 50px 0px 20px 0px;

    }


    /* box05 */
    .box05_subttl {
        margin: 4.8rem auto 3.2rem;
    }

    .box05_subttl::after {
        content: url(../img/dnadiet/chigai_pic01.png);
        display: block;
        position: absolute;
        bottom: -0.8rem;
        left: calc(50% + 195px);
    }

    .box05_subttl02 img,
    .box05_subttl03 img {
        display: inline-block;
    }

    .chigai_txt05_11 {
        padding: 0;
        background: none;
    }

    .chigai_txt05_11::after {
        display: none;
    }

    .chigai_txt05_11_box {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: min(2.5vw, 20px);
        margin: min(5vw, 48px) auto;
    }

    .chigai_txt05_11_box .box05_subttl02_txt {
        flex: 1 1 62%;
    }

    .chigai_txt05_11_box .box05_subttl02_txt p {
        font-size: clamp(22px, 3.6vw, 44px);
        line-height: 1.5;
    }

    .chigai_txt05_11_box .box05_subttl02_img {
        flex: 0 0 min(30%, 200px);
        width: min(30%, 200px);
        margin: 0;
        align-self: flex-end;
    }

    /* box06 */
    .box06_reason_upper figure {
        float: left;
        width: 33%;
        max-width: 300px;
        margin: 0 0.8rem 0.8rem 0;
    }


    .box06_reason_lower {
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .box06_reason_txt02 {
        position: relative;
        display: inline-block;
        margin: 2rem 1.5rem 2rem 0;
        padding: 2rem;
        background: #FBF7C4;
        width: 70%;
        max-width: 800px;
        text-align: center;
    }

    .box06_reason_txt02::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 100%;
        margin-top: -1.5rem;
        border: 1.5rem solid transparent;
        border-left: 1.5rem solid #FBF7C4;
    }

    .box06_reason6_pics {
        flex-wrap: nowrap;
    }

    .box06_reason7_pics {
        clear: both;
        display: flex;
        align-items: flex-start;
    }

    .box06_reason6_pics> :first-child,
    .box06_reason6_pics> :nth-child(2) {
        width: 30%;
    }

    .box06_reason6_pics> :last-child {
        width: 40%;
    }

    .box06_reason7_pics>* {
        position: relative;
    }

    .box06_reason7_pics> :first-child {
        width: 41.58%;
        max-width: 410px;
    }

    .box06_reason7_pics> :last-child {
        width: 58.41%;
        max-width: 576px;
    }

    .box06_reason7_pics figcaption {
        position: absolute;
        top: 0;
        width: 37.5vw;
        max-width: 240px;
    }

    /* box07/08 */
    .dnadiet_box08 br {
        display: inline;
    }

    /* box09 */
    .box09_omoushikomi {
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        flex-direction: row-reverse;
    }

    .box09_omoushikomi>* {
        width: 48%;
    }

    .omoushikomi_txt02 {
        margin: 0 auto;
        padding: 20px 25px;
        max-width: 990px;
    }

    .conseling_contact_buttons {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 2rem;
        justify-content: center;
    }

    /* box11 */
    .box11_qa {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .box11_qa li {
        width: 48%;
        margin: 0 1%;
    }

    .box11_qa_wide li {
        width: 100%;
        max-width: 660px;
    }

    /* box12 */
    .dnadiet_box12 h2 br {
        display: none;
    }

    .box12_staffex {
        padding: 2.4rem;
        font-size: 1.7rem;
        font-weight: 500;
        text-shadow: 0 0 10px #fff;
    }

    .box12_staffex_pic {
        width: 40%;
        margin: 0 0 1.6rem 1.6rem;
    }


}

/* --- min 882px --- */
@media screen and (min-width: 882px) {
    #contents.contents_dnadiet {
        margin-top: 5rem;
    }

    .top_ba_stats {
        line-height: 1;
    }
}

/* --- min 984px --- */
@media screen and (min-width: 984px) {
    .box06_reason li br {
        display: inline;
    }

    .box06_reason_upper h3 br {
        display: inline;
    }

    .box09_omoushikomi br {
        display: inline;
    }

    .box09_omoushikomi {
        align-items: center;
    }

    .box09_omoushikomi> :first-child {
        max-width: 500px;
    }
}

/* --- min 1096px --- */
@media screen and (min-width: 1096px) {
    .conseling_contact_buttons {
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 2rem;
        justify-content: center;
    }

    .box11_qa_wide li {
        max-width: 1000px;
    }

    .conts-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.6rem;
    }

}

/* --- min 1240px --- */
@media screen and (min-width: 1240px) {
    body {
        min-width: 1240px;
        max-width: none;
        padding: 0;
    }

    #container {
        min-width: 1240px;
    }

    #contents.contents_dnadiet {
        width: 1240px;
    }

    .box03_help_conts {
        padding: 8rem 0 4rem;
    }

    .box03_help_txt br {
        display: inline;
    }

    .box09_counseling_ttl {
        justify-content: flex-start;
    }

    .box09_counseling_conts h2,
    .box09_counseling_ttl {
        float: right;
        width: 75%;
    }

    .box09_counseling_txt {
        clear: right;
        float: right;
        overflow: hidden;
        width: 75%;
    }

    #h_gnav ul li a {
        font-size: 14px;
    }
}