﻿/* ============================
   繝ｪ繝ｩ繧､繝悶え繧ｧ繧｢ - Medical Page
============================ */

/* 繝壹・繧ｸ蝗ｺ譛峨・padding隱ｿ謨ｴ */
#page-medical.page-top-under {
  padding-bottom: 0;
  padding-top: 0;
}

/* medical繝壹・繧ｸ蟆ら畑: 繝代Φ縺上★繝ｪ繧ｹ繝医ｒ逕ｻ蜒丞・縺ｧabsolute驟咲ｽｮ */
.medical-hero-image .breadcrumb {
  position: absolute;
  padding: 0 clamp(5rem, 3.725rem + 5.23vw, 10rem);
  /* 蟾ｦ蜿ｳ縺ｮ繝代ョ繧｣繝ｳ繧ｰ縺ｮ縺ｿ邯呎価・井ｸ贋ｸ九・0・・*/
  top: clamp(5.625rem, 4.191rem + 5.88vw, 11.25rem);
  /* 390px譎・ 90px縲・920px譎・ 180px・医・繝・ム繝ｼ荳九・菴咲ｽｮ・・*/
  left: 0;
  right: 0;
  z-index: 10;
}

/* 繝偵・繝ｭ繝ｼ逕ｻ蜒上お繝ｪ繧｢ */
.medical-hero-image {
    width: 100%;
    height: clamp(25.5rem, 21.852rem + 14.967vw, 39.8125rem);
    /* 390px譎・ 408px縲・920px譎・ 637px */
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* 逕ｻ蜒丞・騾壹せ繧ｿ繧､繝ｫ */
.medical-hero-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* PC逕ｻ蜒・ 螂ｳ諤ｧ縺ｮ菴咲ｽｮ繧偵Ξ繧ｹ繝昴Φ繧ｷ繝悶↓隱ｿ謨ｴ */
.medical-hero-image .pc {
    object-position: clamp(70%, 58% + 1.5625vw, 88%) center;
    /* 768px譎・ 70%縲・920px譎・ 88% */
}

/* 繝・せ繧ｯ繝医ャ繝・ PC逕ｻ蜒上ｒ陦ｨ遉ｺ縲ヾP逕ｻ蜒上ｒ髱櫁｡ｨ遉ｺ */
.medical-hero-image .sp {
    display: none;
}

/* 繝｢繝舌う繝ｫ・・90px莉･荳具ｼ・ SP逕ｻ蜒上ｒ陦ｨ遉ｺ縲￣C逕ｻ蜒上ｒ髱櫁｡ｨ遉ｺ */
@media (max-width: 390px) {
    .medical-hero-image .pc {
        display: none;
    }
    .medical-hero-image .sp {
        display: block;
        object-position: right center;
        /* 螂ｳ諤ｧ繧貞承蛛ｴ縺ｫ驟咲ｽｮ */
    }
}

/* 繧ｪ繝ｼ繝舌・繝ｬ繧､繧ｳ繝ｳ繝・Φ繝・*/
.medical-overlay {
    position: absolute;
    top: clamp(11.4375rem, 9.446rem + 8.17vw, 19.25rem);
    /* 390px譎・ 183px縲・920px譎・ 308px */
    left: clamp(2.5rem, -1.148rem + 14.967vw, 16.8125rem);
    /* 390px譎・ 40px縲・920px譎・ 269px */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 10;
}

/* 譌･譛ｬ隱槭ち繧､繝医Ν */
.medical-title-ja {
    color: #050505;
    font-family: "Noto Sans JP";
    font-size: clamp(1.25rem, 1.059rem + 0.784vw, 2rem);
    /* 390px譎・ 20px縲・920px譎・ 32px */
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: clamp(0.0625rem, 0.0275rem + 0.144vw, 0.2rem);
    /* 390px譎・ 1px縲・920px譎・ 3.2px */
    margin: 0 0 0 -6px;
}

/* 闍ｱ隱槭ち繧､繝医Ν */
.medical-title-en {
    color: #858585;
    font-family: Raleway, sans-serif !important;
    font-size: clamp(0.875rem, 0.716rem + 0.654vw, 1.5rem);
    /* 390px譎・ 14px縲・920px譎・ 24px */
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: clamp(0.0875rem, 0.072rem + 0.065vw, 0.15rem);
    /* 390px譎・ 1.4px縲・920px譎・ 2.4px */
    margin: clamp(0.5rem, 0.325rem + 0.719vw, 1.1875rem) 0 0 0;
    /* 390px譎・ 8px縲・920px譎・ 19px */
}

@media (max-width: 390px) {
    .medical-title-en {
        font-weight: 400;
    }
}

/* 襍､縺・ｷ・*/
.medical-line {
    width: clamp(4.9375rem, 4.603rem + 1.373vw, 6.25rem);
    /* 390px譎・ 79px縲・920px譎・ 100px */
    height: clamp(0.25rem, 0.218rem + 0.131vw, 0.375rem);
    /* 390px譎・ 4px縲・920px譎・ 6px */
    background-color: #C1272D;
    margin: clamp(1rem, 0.761rem + 0.98vw, 1.9375rem) 0 0 0;
    /* 390px譎・ 16px縲・920px譎・ 31px */
}

/* 隱ｬ譏取枚・育區縺・レ譎ｯBOX・・*/
.medical-desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: left;

    /* 閭梧勹繝懊ャ繧ｯ繧ｹ繧ｹ繧ｿ繧､繝ｫ・・ngine-desc縺ｨ蜷梧ｧ假ｼ・*/
    width: clamp(14.2rem, 11.702rem + 10.248vw, 24rem);
    height: clamp(3rem, 2.458rem + 2.222vw, 5.125rem);
    border-radius: clamp(1rem, 0.745rem + 1.046vw, 2rem);
    background: #FFF;

    font-style: normal;
    margin: clamp(1.3125rem, 0.866rem + 1.83vw, 3.0625rem) 0 0 0;
    /* 390px譎・ 21px縲・920px譎・ 49px */
    color: #050505;
    font-family: "Noto Sans JP";
    font-size: clamp(0.75rem, 0.623rem + 0.523vw, 1.25rem);
    font-weight: 400;
    line-height: clamp(1.25rem, 1.059rem + 0.784vw, 2rem);
    letter-spacing: clamp(0.0875rem, 0.062rem + 0.105vw, 0.1625rem);
}

@media (min-width: 769px) {
    .medical-desc {
        letter-spacing: 0.06rem;
    }
}

/* ============================
   Mechanism繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ
============================ */

.medical-mechanism {
    margin-top: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(0rem, -2.167rem + 8.889vw, 8.5rem);
    /* 390px: 0px縲・920px: 120px */
    margin-left: clamp(2rem, -8.231rem + 21.287vw, 17.313rem);
    /* 390px: 20px縲・920px: 277px */
    margin-right: clamp(2rem, -3.512rem + 11.468vw, 10.25rem);
    /* 390px: 20px縲・440px: 151px縲・920px: 210px */
}

/* 蟾ｦ蛛ｴ縺ｮ繧ｳ繝ｳ繝・Φ繝・お繝ｪ繧｢ */
.mechanism-content {
    width: clamp(19.375rem, 15.982rem + 13.922vw, 32.688rem);
    /* 390px譎・ 310px縲・920px譎・ 534px */
    margin-top: clamp(5rem, 2.833rem + 8.889vw, 13.5rem);
    /* 390px譎・ 80px縲・920px譎・ 216px */
}

/* 蜿ｳ蛛ｴ縺ｮ繧ｰ繝ｩ繝・・繧ｷ繝ｧ繝ｳBOX */
.mechanism-gradient-box {
    width: clamp(21.875rem, 14.738rem + 29.281vw, 49.875rem);
    /* 390px譎・ 350px縲・920px譎・ 798px */
    margin-top: clamp(1.75rem, -0.114rem + 7.647vw, 9.063rem);
    /* 390px譎・ 28px縲・920px譎・ 145px・・ero荳狗ｫｯ縺九ｉ縺ｮ霍晞屬・・*/
    padding-bottom: clamp(28.236rem, 19.673rem + 35.133vw, 44.837rem);
    /* 390px譎・ 451.776px縲・920px譎・ 717.392px・・bsolute隕∫ｴ繧貞庶繧√ｋ縺溘ａ縺ｮ繧ｹ繝壹・繧ｹ・・*/
    display: flex;
    position: relative;
}

/* 繧ｰ繝ｩ繝・・繧ｷ繝ｧ繝ｳ閭梧勹・域闘莨ｼ隕∫ｴ縺ｧopacity蛻・屬・・*/
.mechanism-gradient-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: clamp(1rem, 0.618rem + 1.569vw, 3.125rem);
    /* 390px譎・ 16px縲・920px譎・ 50px */
    background: linear-gradient(0deg, #FFAB9A 0%, #FFCF4C 100%);
    opacity: 0.08;
    z-index: 0;
}

/* BOX蜀・・蟾ｦ蛛ｴ繧ｳ繝ｳ繝・Φ繝・お繝ｪ繧｢ */
.mechanism-box-left {
    position: absolute;
    top: clamp(2.5rem, 1.736rem + 3.137vw, 5.5rem);
    /* 390px: 40px縲・920px: 88px */
    left: clamp(1.25rem, -0.88rem + 4.431vw, 4.438rem);
    /* 390px: 20px縲・920px: 71px */
    width: clamp(12.5rem, 10.274rem + 9.150vw, 21.25rem);
    /* 390px: 200px縲・920px: 340px */
    z-index: 2;
}

/* BOX蜀・・蜿ｳ蛛ｴ逕ｻ蜒上お繝ｪ繧｢ */
.mechanism-box-right {
    position: absolute;
    top: clamp(3.75rem, 3.966rem - 0.884vw, 2.904rem);
    /* 390px: 60px縲・920px: 46.47px */
    right: clamp(1.159rem, -0.447rem + 3.342vw, 3.563rem);
    /* 390px: 38.54px縲・920px: 62.81px */
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* medical1逕ｻ蜒・*/
.mechanism-img1 {
    width: clamp(10.674rem, 8.448rem + 9.133vw, 19.407rem);
    /* 390px: 170.784px縲・920px: 310.51px */
    height: clamp(6.240rem, 4.939rem + 5.338vw, 11.346rem);
    /* 390px: 99.84px縲・920px: 181.54px */
    mix-blend-mode: screen;
    margin-bottom: 3rem;
    /* 390px: 15.4px縲・920px: 28px */
}

/* medical2逕ｻ蜒・*/
.mechanism-img2 {
    width: clamp(11.05rem, 5.03rem + 12.525vw, 20.06rem);
    /* 390px: 176.88px縲・920px: 321.358px */
    height: clamp(5.25rem, 2.369rem + 5.995vw, 9.563rem);
    /* 390px: 88.44px縲・920px: 160.678px */
    mix-blend-mode: screen;
    margin-bottom: 7.688rem;
    /* 390px: 69.61px縲・920px: 123px */
}

/* medical3逕ｻ蜒・*/
.mechanism-img3 {
    width: clamp(10.85rem, 6.113rem + 9.856vw, 17.94rem);
    /* 390px: 157.9px縲・920px: 287px */
    height: clamp(4.699rem, 2.66rem + 4.242vw, 7.75rem);
    /* 390px: 78.48px縲・920px: 142.7px */
    object-fit: cover;
}

/* SVG遏｢蜊ｰ1 (蛹ｻ逋・縺ｨ2縺ｮ髢・ */
.mechanism-arrow1 {
    position: absolute;
    top: clamp(8.125rem, 6.079rem + 4.256vw, 11.187rem);
    /* 390px: 155.552px縲・920px: 239.984px */
    right: clamp(4.471rem, 3.352rem + 4.593vw, 8.864rem);
    /* 390px: 110.536px縲・920px: 198.816px */
    width: clamp(2rem, 1.920rem + 0.327vw, 2.313rem);
    /* 390px: 32px縲・920px: 37px */
    height: clamp(1.438rem, 1.390rem + 0.196vw, 1.625rem);
    /* 390px: 23px縲・920px: 26px */
    z-index: 3;
}

/* SVG遏｢蜊ｰ2 (蛹ｻ逋・縺ｨ3縺ｮ髢薙∽ｸ句髄縺・ */
.mechanism-arrow2 {
    position: absolute;
    top: clamp(18.75rem, 12.988rem + 11.99vw, 27.375rem);
    /* 390px: 291.312px縲・920px: 500.992px */
    right: clamp(5.221rem, 4.149rem + 4.397vw, 9.426rem);
    /* 390px: 83.536px縲・920px: 150.816px */
    width: clamp(0.813rem, 0.781rem + 0.131vw, 0.938rem);
    /* 390px: 13px縲・920px: 15px */
    height: clamp(1.125rem, 1.093rem + 0.131vw, 1.25rem);
    /* 390px: 18px縲・920px: 20px */
    z-index: 3;
}
@media screen and (max-width: 1300px) and (min-width: 769px) {
    .mechanism-img1 {
        margin-bottom: clamp(3rem, 0.104rem + 6.026vw, 5rem);
    }
    .mechanism-arrow1 {
        top: clamp(8.125rem, 4.504rem + 7.533vw, 10.625rem);
    }
    .mechanism-arrow2 {
        top: clamp(18.75rem, 9.699rem + 18.832vw, 25rem);
    }
    }

@media (max-width: 768px) {
.mechanism-img1 {
    width: clamp(10.625rem, 4.779rem + 12.163vw, 19.375rem);
    /* 390px: 170.784px縲・920px: 310.51px */
    height: clamp(6.25rem, 2.845rem + 7.084vw, 11.346rem);
    /* 390px: 99.84px縲・920px: 181.54px */
    mix-blend-mode: screen;
    margin-bottom: clamp(0.963rem, 0.762rem + 0.824vw, 1.75rem);
    /* 390px: 15.4px縲・920px: 28px */
}
/* medical2逕ｻ蜒・*/
.mechanism-img2 {
    width: clamp(11.055rem, 8.753rem + 9.444vw, 20.085rem);
    /* 390px: 176.88px縲・920px: 321.358px */
    height: clamp(5.528rem, 4.377rem + 4.721vw, 10.042rem);
    /* 390px: 88.44px縲・920px: 160.678px */
    mix-blend-mode: screen;
    margin-bottom: clamp(4.351rem, 3.5rem + 3.489vw, 7.688rem);
    /* 390px: 69.61px縲・920px: 123px */
}

/* medical3逕ｻ蜒・*/
.mechanism-img3 {
    width: clamp(9.869rem, 7.812rem + 8.438vw, 17.938rem);
    /* 390px: 157.9px縲・920px: 287px */
    height: clamp(4.905rem, 3.882rem + 4.196vw, 8.919rem);
    /* 390px: 78.48px縲・920px: 142.7px */
    object-fit: cover;
    margin-top: clamp(0rem, -2.837rem + 11.64vw, 2.75rem);
}
.medical-mechanism {
    margin-top: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(0rem, -2.167rem + 8.889vw, 8.5rem);
    /* 390px: 0px縲・920px: 120px */
    margin-left: clamp(1.25rem, -0.980rem + 9.150vw, 10rem);
    margin-right: clamp(1.25rem, -0.980rem + 9.150vw, 10rem);
}
.mechanism-box-left {
    left: clamp(1.25rem, 0.438rem + 3.333vw, 4.4375rem);
}
.mechanism-box-right {
    right: clamp(1.159rem, 0.546rem + 2.514vw, 3.563rem);
}
.mechanism-arrow1 {
    top: clamp(5.813rem, 4.443rem + 5.619vw, 11.187rem);
}
.mechanism-arrow2 {
    top: clamp(14.332rem, 11.007rem + 13.639vw, 27.375rem);
}
.mechanism-content {
    width: clamp(19.375rem, 3.254rem + 66.138vw, 35rem);

}
}



/* Mechanism #1, #2 縺ｮ繝ｩ繝吶Ν */
.mechanism-num {
    color: #BA2A20;
    font-family: "Noto Sans JP";
    font-size: clamp(0.875rem, 0.843rem + 0.131vw, 1rem);
    /* 390px: 14px縲・920px: 16px */
    font-style: normal;
    font-weight: 700;
    line-height: clamp(1rem, 0.245rem + 3.137vw, 2.5rem);
    /* 390px: 16px縲・920px: 40px */
    letter-spacing: 0;
    margin: 0 0 clamp(0.5rem, 0.436rem + 0.261vw, 0.75rem) 0;
    /* 390px: 12px縲・920px: 8px */
}

/* 驩ｱ遏ｳ縺碁□襍､螟也ｷ壹ｒ霈ｻ蟆・*/
.mechanism-text1 {
    color: #000;
    font-family: "Noto Sans JP";
    font-size: clamp(1rem, 0.936rem + 0.261vw, 1.25rem);
    /* 390px: 16px縲・920px: 20px */
    font-style: normal;
    font-weight: 500;
    line-height: 159%;
    letter-spacing: clamp(0.1rem, 0.094rem + 0.026vw, 0.125rem);
    /* 390px: 1.6px縲・920px: 2px */
    margin: 0 0 clamp(2.5rem, 1.385rem + 4.575vw, 6.875rem) 0;
    /* 390px: 40px縲・920px: 103px */
}

/* 菴捺ｸｩ繧堤・貅舌→縺励√Μ繝ｩ繧､繝冶｣ｽ蜩√′驕襍､螟也ｷ壹ｒ霈ｻ蟆・*/
.mechanism-text2 {
    color: #000;
    font-family: "Noto Sans JP";
    font-size: clamp(1rem, 0.936rem + 0.261vw, 1.25rem);
    /* 390px: 16px縲・920px: 20px */
    font-style: normal;
    font-weight: 500;
    line-height: 159%;
    letter-spacing: clamp(0.1rem, 0.094rem + 0.026vw, 0.125rem);
    /* 390px: 1.6px縲・920px: 2px */
    margin: 0 0 clamp(4.938rem, 3.408rem + 6.275vw, 10.938rem) 0;
    /* 390px: 79px縲・920px: 160px */
}

/* 逹逕ｨ縺吶ｋ縺縺代〒 */
.mechanism-final-text {
    color: #000;
    font-family: "Noto Sans JP";
    font-size: clamp(0.875rem, 0.843rem + 0.131vw, 1rem);
    /* 390px: 14px縲・920px: 16px */
    font-style: normal;
    font-weight: 500;
    line-height: clamp(1rem, 0.245rem + 3.137vw, 2.5rem);
    /* 390px: 16px縲・920px: 40px */
    letter-spacing: 0;
    margin: 0 0 clamp(-0.5rem, 0.128rem - 0.523vw, 0rem) 0;
    /* 390px: 0px縲・920px: -8px */
}

/* 陦陦御ｿ・ｲ・・*/
.mechanism-final-emphasis {
    color: #BA2A20;
    font-family: "Noto Sans JP";
    font-size: clamp(1.5rem, 1.245rem + 1.046vw, 2.5rem);
    /* 390px: 24px縲・920px: 40px */
    font-style: normal;
    font-weight: 700;
    line-height: 159%;
    letter-spacing: clamp(0.06rem, 0.012rem + 0.199vw, 0.25rem);
    /* 390px: 0.96px縲・920px: 4px */
    margin: 0;
}

/* 768px莉･荳・ 邵ｦ荳ｦ縺ｳ縺ｫ蛻・ｊ譖ｿ縺・*/
@media (max-width: 768px) {
    .medical-mechanism {
        flex-direction: column;
        align-items: center;
    }

    .mechanism-gradient-box {
        margin: 1.75rem 0 0 0;
        /* 390px譎・ 28px */
        overflow: visible;
    }

    .mechanism-gradient-box::before {
        background: #FFF9F5;
        opacity: 1;
    }
}

/* Mechanism繝ｩ繝吶Ν */
.mechanism-label {
    color: rgba(159, 33, 7, 0.50);
    font-family: Raleway, sans-serif !important;
    font-size: 1rem;
    /* 390px譎・ 16px縲・920px譎・ 15.808px 竕・16px */
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0;
    /* 1920px譎・ 0% */
    margin: 0 0 clamp(0.375rem, 1.63rem - 1.046vw, 1.375rem) 0;
    /* 390px譎・ 22px縲・920px譎・ 6px */
}

/* 縲檎捩繧九□縺代〒螟峨ｏ繧九堺ｻ慕ｵ・∩ */
.mechanism-title {
    color: #333333;
    font-family: "Noto Sans JP";
    font-size: clamp(1.25rem, 1.217rem + 0.131vw, 1.2703rem);
    /* 390px譎・ 20px縲・920px譎・ 20.324px */
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 0;
    margin: 0 0 clamp(1.875rem, 1.365rem + 2.092vw, 3.875rem) 0;
    /* 390px譎・ 30px縲・920px譎・ 57px */
}

@media (max-width: 390px) {
    .mechanism-title {
        letter-spacing: 0.05em;
        /* 390px譎・ 5% */
    }
}

/* 逹繧九□縺代〒陦陦御ｿ・ｲ縺励∬ｺｫ菴薙ｒ繧ｵ繝昴・繝医・*/
.mechanism-catchphrase {
    color: #BA2A20;
    font-family: "Noto Sans JP";
    font-size: clamp(1.563rem, 1.27rem + 0.608vw, 2rem);
    /* 390px譎・ 30px縲・920px譎・ 32px */
    font-style: normal;
    font-weight: 500;
    line-height: 190%;
    letter-spacing: clamp(0.056rem, -0.04rem + 0.2vw, 0.2rem);
    margin: 0 0 clamp(1.875rem, 1.971rem - 0.392vw, 1.5rem) 0;
    /* 390px譎・ 30px縲・920px譎・ 24px */
}

@media (max-width: 390px) {
    .mechanism-catchphrase {
        font-weight: 400;
        line-height: 44px;
        /* 390px譎・ 30px ﾃ・1.467 = 44px (147%) */
        letter-spacing: 6px;
    }
}

/* 隱ｬ譏取枚 */
.mechanism-description {
    color: #000;
    font-family: "Noto Sans JP";
    font-size: clamp(0.875rem, 0.843rem + 0.131vw, 1rem);
    /* 390px譎・ 14px縲・920px譎・ 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 200%;
    letter-spacing: 0.02em;
    margin: 0;
}

/* ============================
   謾ｹ陦悟宛蠕｡
============================ */

/* SP蟆ら畑謾ｹ陦鯉ｼ・90px莉･荳九〒陦ｨ遉ｺ・・*/
.sp-br {
    display: none;
}

@media (max-width: 768px) {
    .sp-br {
        display: block;
    }
    .pc-br {
        display: none !important;
    }
}

/* PC蟆ら畑謾ｹ陦鯉ｼ・201px莉･荳翫〒陦ｨ遉ｺ・・*/
.pc-br {
    display: none;
}

@media (min-width: 1486px) {
    .pc-br {
        display: block;
    }
    .sp-br {
        display: none !important;
    }
}

/* BOX蜀・ユ繧ｭ繧ｹ繝育畑: SP蟆ら畑謾ｹ陦鯉ｼ・68px莉･荳九〒陦ｨ遉ｺ・・*/
.sp-br2 {
    display: none;
}

@media (max-width: 768px) {
    .sp-br2 {
        display: block;
    }
    .mechanism-catchphrase {
        font-size: clamp(1.875rem, 1.843rem + 0.131vw, 2rem);
        letter-spacing: 0.1em;
        font-weight: 400;
        line-height: 38px;
    }
}

/* 繧ｿ繝悶Ξ繝・ヨ繝ｻ繝｢繝舌う繝ｫ逕ｨ謾ｹ陦鯉ｼ・300px莉･荳九〒陦ｨ遉ｺ・・*/
.tablet-br {
    display: none;
}

@media (max-width: 1300px) {
    .tablet-br {
        display: block;
    }
}

/* ============================
   Technology繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ
============================ */

.medical-technology {
    margin-top: clamp(5rem, 4.188rem + 3.333vw, 8.188rem);
    /* 390px: 80px縲・920px: 227px */
    margin-left: clamp(2rem, -3.345rem + 11.121vw, 10rem);
    /* 390px: 20px縲・920px: 160px */
    margin-right: clamp(2rem, -3.345rem + 11.121vw, 10rem);
    /* 390px: 20px縲・920px: 160px・亥ｷｦ縺ｨ蜷後§・・*/
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: clamp(0rem, -2.167rem + 8.889vw, 8.5rem);
    /* 390px: 0px縲・920px: 138px */
}

/* 蟾ｦ蛛ｴ・・920px譎ゑｼ・ 荳雁・・・90px譎ゑｼ峨・繧ｳ繝ｳ繝・Φ繝・お繝ｪ繧｢ */
.technology-content {
    width: clamp(19.375rem, 15.922rem + 14.165vw, 32.921rem);
    /* 390px: 310px縲・920px: 526.73px */
    margin-top: clamp(0rem, -1.530rem + 6.275vw, 6rem);
    /* 390px: 0px縲・920px: 96px */
}

/* 蜿ｳ蛛ｴ・・920px譎ゑｼ・ 荳句・・・90px譎ゑｼ峨・繧ｰ繝ｩ繝・・繧ｷ繝ｧ繝ｳBOX */
.technology-gradient-box {
    width: clamp(21.875rem, 14.738rem + 29.281vw, 49.875rem);
    /* 390px: 350px縲・920px: 798px */
    border-radius: clamp(1rem, 0.458rem + 2.222vw, 3.125rem);
    /* 390px: 16px縲・920px: 50px */
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: clamp(2.5rem, 2.133rem + 1.503vw, 3.938rem);
    /* 390px: 40px縲・920px: 63px・井ｸ矩Κ菴咏區・・*/
}

/* 繧ｰ繝ｩ繝・・繧ｷ繝ｧ繝ｳ閭梧勹・域闘莨ｼ隕∫ｴ縺ｧopacity蛻・屬縲・920px譎ゅ・縺ｿ・・*/
.technology-gradient-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: clamp(1rem, 0.458rem + 2.222vw, 3.125rem);
    /* 390px: 16px縲・920px: 50px */
    background: linear-gradient(0deg, #FFAB9A 0%, #FFCF4C 100%);
    opacity: 0.08;
    z-index: 0;
}

/* BOX蜀・・逕ｻ蜒擾ｼ医ョ繧ｹ繧ｯ繝医ャ繝礼畑・・*/
.technology-img-desktop {
    margin-top: clamp(2.625rem, 1.998rem + 1.304vw, 3.563rem);
    /* 390px: 42px縲・920px: 57px */
    margin-left: clamp(1.25rem, -0.412rem + 3.457vw, 3.737rem);
    /* 390px: 20px縲・920px: 59.79px */
    width: clamp(21rem, 6.284rem + 30.618vw, 43.026rem);
    /* 390px: 310px縲・920px: 688.41px */
    height: auto;
    /* 逕ｻ蜒上・蜈・・豈皮紫繧剃ｿ昴▽ */
    z-index: 1;
}

/* BOX蜀・・逕ｻ蜒擾ｼ医Δ繝舌う繝ｫ逕ｨ・牙・譛溽憾諷九・髱櫁｡ｨ遉ｺ */
.technology-img-mobile {
    display: none;
}

/* Technology繝ｩ繝吶Ν */
.technology-label {
    color: rgba(159, 33, 7, 0.50);
    font-family: Raleway, sans-serif !important;
    font-size: 1rem;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0;
    margin: 0 0 clamp(0.375rem, 1.63rem - 1.046vw, 1.375rem) 0;
    /* 390px: 22px縲・920px: 6px */
}

/* 繝ｪ繝ｩ繧､繝悶・髢捺磁繝・・繝斐Φ繧ｰR謚陦薙→縺ｯ */
.technology-title {
    color: #333333;
    font-family: "Noto Sans JP";
    font-size: clamp(1.25rem, 1.217rem + 0.131vw, 1.2703rem);
    /* 390px: 20px縲・920px: 20.324px */
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 0;
    margin: 0 0 clamp(1.875rem, 1.461rem + 1.699vw, 3.5rem) 0;
    /* 390px: 30px縲・920px: 57px */
}

@media (max-width: 390px) {
    .technology-title {
        letter-spacing: 0.05em;
    }
}

/* 閧ｩ繧・・縺ｮ閾ｪ辟ｶ縺ｪ蜍輔″繧呈髪縺医ｋ縲・*/
.technology-catchphrase {
    color: #BA2A20;
    font-family: "Noto Sans JP";
    font-size: clamp(1.563rem, 1.27rem + 0.608vw, 2rem);
    /* 390px: 30px縲・920px: 32px */
    font-style: normal;
    font-weight: 500;
    line-height: 190%;
    letter-spacing: clamp(0.056rem, -0.04rem + 0.2vw, 0.2rem);
    margin: 0 0 clamp(1.5rem, 1.971rem - 0.392vw, 1.875rem) 0;
    /* 390px: 30px縲・920px: 24px */
}

@media (max-width: 390px) {
    .technology-catchphrase {
        font-weight: 400;
        line-height: 44px;
        letter-spacing: 6px;
    }
}

/* 隱ｬ譏取枚 */
.technology-description {
    color: #000;
    font-family: "Noto Sans JP";
    font-size: clamp(0.875rem, 0.843rem + 0.131vw, 1rem);
    /* 390px: 14px縲・920px: 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 200%;
    letter-spacing: 0.02em;
    margin: 0;
}

/* 768px莉･荳・ 邵ｦ荳ｦ縺ｳ縺ｫ蛻・ｊ譖ｿ縺・*/
@media (max-width: 768px) {
    .medical-technology {
        flex-direction: column-reverse;
        /* 繝・く繧ｹ繝医′荳翫。OX縺御ｸ九↓縺ｪ繧・*/
        align-items: center;
        gap: clamp(1.875rem, 1.230rem + 2.646vw, 2.5rem);
        /* 390px: 30px縲・68px: 40px・域沐霆溘↓諡｡螟ｧ邵ｮ蟆擾ｼ・*/
    }

    .technology-content {
        margin-top: 0;
    }

    .technology-gradient-box {
        margin-top: clamp(1.75rem, 1.299rem + 1.852vw, 2.188rem);
        /* 390px: 28px縲・68px: 35px・域沐霆溘↓諡｡螟ｧ邵ｮ蟆擾ｼ・*/
    }

    /* 逕ｻ蜒上→BOX繧ｹ繧ｿ繧､繝ｫ繧貞・繧頑崛縺・*/
    .technology-gradient-box::before {
        background: #FFF9F5;
        opacity: 1;
    }

    /* 繝・せ繧ｯ繝医ャ繝礼判蜒上ｒ髱櫁｡ｨ遉ｺ */
    .technology-img-desktop {
        display: none;
    }

    /* 繝｢繝舌う繝ｫ逕ｻ蜒上ｒ陦ｨ遉ｺ */
    .technology-img-mobile {
        display: block;
        margin-top: clamp(2.625rem, 2.386rem + 0.980vw, 3.563rem);
        /* 390px: 42px */
        margin-left: 1.25rem;
        /* 20px */
        width: clamp(19.375rem, 13.347rem + 24.730vw, 43.026rem);
        /* 390px: 310px縲・920px: 688.41px */
        height: auto;
        /* 逕ｻ蜒上・蜈・・豈皮紫繧剃ｿ昴▽ */
        z-index: 1;
    }
    .medical-technology {
        margin-top: clamp(5rem, 4.188rem + 3.333vw, 8.188rem);
        /* 390px: 80px縲・920px: 227px */
        margin-left: clamp(1.25rem, -0.980rem + 9.150vw, 10rem);
        /* 390px: 20px縲・920px: 160px */
        margin-right: clamp(1.25rem, -0.980rem + 9.150vw, 10rem);
        /* 390px: 20px縲・920px: 160px・亥ｷｦ縺ｨ蜷後§・・*/
        display: flex;

        gap: clamp(0rem, -4.167rem + 17.086vw, 8.625rem);
        /* 390px: 0px縲・920px: 138px */
    }
    .technology-img-desktop {
        margin-top: clamp(2.625rem, 2.386rem + 0.980vw, 3.563rem);
    /* 390px: 42px縲・920px: 57px */
    margin-left: clamp(1.25rem, 0.616rem + 2.601vw, 3.737rem);
        width: clamp(19.375rem, 13.347rem + 24.730vw, 43.026rem);
    }
    .technology-catchphrase {
        font-size: clamp(1.875rem, 1.843rem + 0.131vw, 2rem);
        letter-spacing: 0.1em;
        font-weight: 400;
        line-height: 38px;
    }
    /* 蟾ｦ蛛ｴ・・920px譎ゑｼ・ 荳雁・・・90px譎ゑｼ峨・繧ｳ繝ｳ繝・Φ繝・お繝ｪ繧｢ */
.technology-content {
    width: clamp(19.375rem, 3.254rem + 66.138vw, 35rem);
}
}

/* ============================
   Evidence繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ
============================ */

.medical-evidence {
    display: flex;
    margin-top: clamp(5rem, 4.044rem + 3.922vw, 8.75rem);
    /* 390px: 80px縲・920px: 140px */
    margin-left: clamp(2rem, -8.231rem + 21.287vw, 17.313rem);
    margin-right: clamp(2rem, -3.512rem + 11.468vw, 10.25rem);
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(0rem, -2.167rem + 8.889vw, 8.5rem);
    /* 390px: 28px縲・920px: 137px */
}

/* 蟾ｦ蛛ｴ・・920px譎ゑｼ・ 荳雁・・・90px譎ゑｼ峨・繧ｳ繝ｳ繝・Φ繝・お繝ｪ繧｢ */
.evidence-content {
    width: clamp(19.375rem, 15.982rem + 13.922vw, 32.688rem);
    /* 390px譎・ 310px縲・920px譎・ 534px */
    margin-top: clamp(0rem, -3.345rem + 13.725vw, 13.125rem);
    /* 390px: 0px縲・920px: 210px */
}

/* 蜿ｳ蛛ｴ・・920px譎ゑｼ・ 荳句・・・90px譎ゑｼ峨・繧ｰ繝ｩ繝・・繧ｷ繝ｧ繝ｳBOX */
.evidence-gradient-box {
    width: clamp(21.875rem, 14.738rem + 29.281vw, 49.875rem);
    /* 390px譎・ 350px縲・920px譎・ 798px */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: clamp(2.5rem, 2.197rem + 1.242vw, 3.688rem);
    /* 390px: 40px縲・920px: 59px・井ｸ矩Κ菴咏區・・*/
}

/* 繧ｰ繝ｩ繝・・繧ｷ繝ｧ繝ｳ閭梧勹・域闘莨ｼ隕∫ｴ縺ｧopacity蛻・屬・・*/
.evidence-gradient-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: clamp(1rem, 0.618rem + 1.569vw, 3.125rem);
    /* 390px譎・ 16px縲・920px譎・ 50px */
    background: linear-gradient(0deg, #FFAB9A 0%, #FFCF4C 100%);
    opacity: 0.08;
    z-index: 0;
}

/* BOX蜀・・繧ｿ繧､繝医Ν */
.evidence-box-title {
    margin-top: clamp(2.5rem, 2.229rem + 1.111vw, 3.563rem);
    /* 390px: 40px縲・920px: 57px */
    color: #000;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: clamp(1.25rem, 1.059rem + 0.784vw, 1.5rem);
    /* 390px: 20px縲・920px: 24px */
    font-weight: 700;
    line-height: 100%;
    margin-bottom: 0;
    z-index: 1;
}

/* BOX蜀・・逕ｻ蜒擾ｼ医ョ繧ｹ繧ｯ繝医ャ繝礼畑・・*/
.evidence-img-desktop {
    margin-top: clamp(1.375rem, 0.993rem + 1.569vw, 2.875rem);
    /* 390px: 22px縲・920px: 46px */
    width: clamp(19.375rem, 15.392rem + 16.340vw, 35rem);
    /* 390px: 310px縲・920px: 560px */
    height: auto;
    /* 逕ｻ蜒上・蜈・・豈皮紫繧剃ｿ昴▽ */
    z-index: 1;
}

/* BOX蜀・・逕ｻ蜒擾ｼ医Δ繝舌う繝ｫ逕ｨ・牙・譛溽憾諷九・髱櫁｡ｨ遉ｺ */
.evidence-img-mobile {
    display: none;
}

/* 襍､譫繝懊ャ繧ｯ繧ｹ */
.evidence-result-box {
    margin-top: clamp(1.224rem, 0.899rem + 1.334vw, 2.5rem);
    /* 390px: 19.59px縲・920px: 40px */
    margin-left: clamp(0.313rem, 0.265rem + 0.196vw, 0.5rem);
    /* 390px: 5px縲・920px: 8px・亥承縺ｫ遘ｻ蜍包ｼ・*/
    width: clamp(19.375rem, 15.392rem + 16.340vw, 35rem);
    /* 390px: 310px縲・920px: 560px */
    height: clamp(3.125rem, 2.583rem + 2.222vw, 5.25rem);
    /* 390px: 50px縲・920px: 84px */
    border-radius: clamp(1.988rem, 1.650rem + 1.386vw, 3.313rem);
    /* 390px: 31.8px縲・920px: 53px */
    border: 1px solid #BA2A20;
    background: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

/* 襍､譫蜀・・繝・く繧ｹ繝・*/
.evidence-result-text {
    color: #BA2A20;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: clamp(1.125rem, 0.934rem + 0.784vw, 1.875rem);
    /* 390px: 18px縲・920px: 30px */
    font-weight: 700;
    line-height: 160%;
    letter-spacing: clamp(0.1125rem, 0.094rem + 0.078vw, 0.1875rem);
    /* 390px: 1.8px縲・920px: 3px */
    margin: 0;
}

/* 繧｢繝ｳ繝繝ｼ繝ｩ繧､繝ｳ */
.evidence-underline {
    text-decoration: underline;
}

/* 豕ｨ驥医ユ繧ｭ繧ｹ繝・*/
.evidence-note {
    margin-top: clamp(1.013rem, 0.697rem + 1.294vw, 2.25rem);
    /* 390px: 16.2px縲・920px: 36px */
    margin-left: clamp(0rem, -1.459rem + 5.987vw, 3.688rem);
    /* 390px: 0px縲・920px: 59px・・OX蟾ｦ遶ｯ縺九ｉ・・*/
    align-self: flex-start;
    /* 隕ｪ縺ｮcenter謠・∴繧剃ｸ頑嶌縺阪∝ｷｦ謠・∴縺ｫ */
    color: #000;
    font-family: "Noto Sans JP";
    font-size: clamp(0.75rem, 0.734rem + 0.065vw, 0.813rem);
    /* 390px: 12px縲・920px: 13px */
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.06rem;
    text-align: left;
    z-index: 1;
    margin-bottom: 0;
}

/* Evidence繝ｩ繝吶Ν */
.evidence-label {
    color: rgba(159, 33, 7, 0.50);
    font-family: Raleway, sans-serif !important;
    font-size: 1rem;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0;
    margin: 0 0 clamp(0.375rem, 2.257rem - 1.569vw, 1.875rem) 0;
    /* 390px: 30px縲・920px: 6px */
}

/* 逹逕ｨ縺ｫ繧医ｋ螟牙喧・亥ｽ鍋､ｾ貂ｬ螳壹ョ繝ｼ繧ｿ・・*/
.evidence-title {
    color: #333333;
    font-family: "Noto Sans JP";
    font-size: clamp(1.25rem, 1.217rem + 0.131vw, 1.2703rem);
    /* 390px: 20px縲・920px: 20.324px */
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 0;
    margin: 0 0 clamp(1.438rem, 0.896rem + 2.222vw, 3.563rem) 0;
    /* 390px: 23px縲・920px: 50px */
}

@media (max-width: 390px) {
    .evidence-title {
        letter-spacing: 0.05em;
    }
}

/* 逹逕ｨ30蛻・〒陦陦後ｒ菫・ｲ縲・*/
.evidence-catchphrase {
    color: #BA2A20;
    font-family: "Noto Sans JP";
    font-size: clamp(1.875rem, 1.843rem + 0.131vw, 2rem);
    /* 390px: 30px縲・920px: 32px */
    font-weight: 400;
line-height: 38px;
    letter-spacing: 0.1em;
    margin: 0 0 clamp(1.5rem, 1.971rem - 0.392vw, 1.875rem) 0;
    /* 390px: 30px縲・920px: 24px */
}

@media (max-width: 390px) {
    .evidence-catchphrase {
        font-weight: 400;
        line-height: 38px;
        letter-spacing: 6px;
    }
}

/* 隱ｬ譏取枚 */
.evidence-description {
    color: #000;
    font-family: "Noto Sans JP";
    font-size: clamp(0.875rem, 0.843rem + 0.131vw, 1rem);
    /* 390px: 14px縲・920px: 16px */
    font-weight: 400;
    line-height: 180%;
    letter-spacing: 0.02em;
    margin: 0;
}

/* 768px莉･荳・ 邵ｦ荳ｦ縺ｳ縺ｫ蛻・ｊ譖ｿ縺・*/
@media (max-width: 768px) {
    .medical-evidence {
        flex-direction: column;
        align-items: center;
        margin-left: clamp(1.25rem, -0.980rem + 9.150vw, 10rem);
        margin-right: clamp(1.25rem, -0.980rem + 9.150vw, 10rem);
    }

    .evidence-content {
        margin-top: 0;
        width: clamp(19.375rem, 3.254rem + 66.138vw, 35rem);
    }

    .evidence-gradient-box {
        margin: 1.75rem 0 0 0;
        /* 390px譎・ 28px */
        overflow: visible;
    }

    .evidence-gradient-box::before {
        background: #FFF9F5;
        opacity: 1;
    }

    /* 繝・せ繧ｯ繝医ャ繝礼判蜒上ｒ髱櫁｡ｨ遉ｺ */
    .evidence-img-desktop {
        display: none;
    }

    /* 繝｢繝舌う繝ｫ逕ｻ蜒上ｒ陦ｨ遉ｺ */
    .evidence-img-mobile {
        display: block;
        margin-top: clamp(1.375rem, 0.993rem + 1.569vw, 2.875rem);
        /* 390px: 22px */
        width: clamp(19.375rem, 15.392rem + 16.340vw, 35rem);
        /* 390px: 310px */
        height: auto;
        /* 逕ｻ蜒上・蜈・・豈皮紫繧剃ｿ昴▽ */
        z-index: 1;
    }

    /* 豕ｨ驥医ユ繧ｭ繧ｹ繝医ｒ荳ｭ螟ｮ謠・∴ */
    .evidence-note {
        align-self: center;
        margin-left: 0;
    }
}

/* ============================
   Recommend繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ
============================ */

.medical-recommend {
    margin-top: clamp(5rem, 3.088rem + 7.843vw, 12.5rem);
    /* 390px: 80px縲・920px: 227px・・92px + 35px隱ｿ謨ｴ・・*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 繧ｰ繝ｩ繝・・繧ｷ繝ｧ繝ｳBOX */
.recommend-box {
    position: relative;
    width: clamp(21.875rem, 90vw, 99.75rem);
    /* 390px: 350px縲・69px: 692px縲・920px: 1596px・育判蜒上・BOX縺九ｉ縺ｯ縺ｿ蜃ｺ縺励※陦ｨ遉ｺ・・*/
    min-height: clamp(92.563rem, 90.474rem + 4.344vw, 95.688rem);
    /* 769px: 1481px縲・920px: 1531px */
    border-radius: clamp(1rem, 0.458rem + 2.222vw, 3.125rem);
    /* 390px: 16px縲・920px: 50px */
    background: linear-gradient(0deg, #F2F2F2 0%, #F9F9F9 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: clamp(3.125rem, 2.486rem + 2.614vw, 6.563rem);
    /* 390px: 50px縲・920px: 105px */
    padding-bottom: 0;
    overflow: hidden;
}

/* Recommend繝ｩ繝吶Ν */
.recommend-label {
    color: rgba(159, 33, 7, 0.50);
    font-family: Raleway, sans-serif !important;
    font-size: clamp(1rem, 0.984rem + 0.065vw, 0.988rem);
    /* 390px: 16px縲・920px: 15.808px */
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    margin: 0;
}

/* 縺薙ｓ縺ｪ莠ｺ縺ｫ縺翫☆縺吶ａ */
.recommend-title {
    color: #333333;
    font-family: "Noto Sans JP";
    font-size: clamp(1.25rem, 1.217rem + 0.131vw, 1.2703rem);
    /* 390px: 20px縲・920px: 20.324px */
    font-weight: 700;
    line-height: 140%;
    text-align: center;
    letter-spacing: clamp(0.0625rem, 0.0625rem + 0vw, 0.0625rem);
    /* 390px: 1px縲・920px: 1px */
    margin: 0;
    margin-top: 8px;
}

/* 豈取律縺ｮ繧ｳ繝ｳ繝・ぅ繧ｷ繝ｧ繝ｳ繧呈紛縺医◆縺・☆縺ｹ縺ｦ縺ｮ譁ｹ縺ｫ縲・*/
.recommend-catchphrase {
    width: clamp(19.375rem, 8.94rem + 42.810vw, 60.313rem);
    /* 390px: 310px縲・920px: 965px */
    margin-top: clamp(1.875rem, 1.445rem + 1.765vw, 3.563rem);
    /* 390px: 30px縲・920px: 57px */
    color: #BA2A20;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: clamp(1.375rem, 1.216rem + 0.654vw, 2rem);
    /* 390px: 22px縲・920px: 32px */
    font-style: normal;
    font-weight: 500;
    line-height: clamp(2.25rem, 1.855rem + 1.621vw, 3.8rem);
    /* 390px: 36px縲・920px: 60.8px */
    letter-spacing: clamp(0.2rem, 0.294rem - 0.078vw, 0.275rem);
    /* 390px: 4.4px縲・920px: 3.2px */
    margin-bottom: 0;
}

/* 隱ｬ譏取枚 */
.recommend-description {
    width: clamp(19.375rem, 10.055rem + 38.235vw, 55.938rem);
    /* 390px: 310px縲・920px: 895px */
    margin-top: clamp(1rem, 0.841rem + 0.654vw, 1.625rem);
    /* 390px: 16px縲・920px: 26px */
    color: #050505;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: clamp(0.875rem, 0.843rem + 0.131vw, 1rem);
    /* 390px: 14px縲・920px: 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    letter-spacing: clamp(0.0175rem, 0.009rem + 0.034vw, 0.05rem);
    /* 390px: 0.28px縲・920px: 0.8px */
    margin-bottom: 0;
}

/* 390px譎ゅ・繧ｹ繧ｿ繧､繝ｫ隱ｿ謨ｴ */
@media (max-width: 390px) {
    .recommend-catchphrase {
        font-family: "Noto Sans JP";
    }

    .recommend-description {
        color: #000;
        text-align: left;
        line-height: 200%;
    }
}

/* 逕ｻ蜒上→繝・く繧ｹ繝医・繧ｰ繝ｪ繝・ラ */
.recommend-items {
    margin-top: clamp(2.5rem, 2.102rem + 1.635vw, 4.063rem);
    /* 390px: 40px縲・920px: 85px */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1.245rem, 1.160rem + 0.346vw, 1.578rem) clamp(0.75rem, 0.670rem + 0.327vw, 1.063rem);
    /* row-gap: 390px: 19.92px・育判蜒上°繧臥判蜒上∪縺ｧ66px・峨・920px: 25.248px縲…olumn-gap: 390px: 12px縲・920px: 17px */
}

/* 蜷・い繧､繝・Β・育判蜒・繝・く繧ｹ繝茨ｼ・*/
.recommend-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 逕ｻ蜒・*/
.recommend-item img {
    width: clamp(9.313rem, 8.182rem + 4.641vw, 13.75rem);
    /* 390px: 149px縲・920px: 220px */
    height: clamp(6.25rem, 5.453rem + 3.268vw, 9.375rem);
    /* 390px: 100px縲・920px: 150px */
    object-fit: cover;
}

/* 繝・く繧ｹ繝医お繝ｪ繧｢ */
.recommend-item-text {
    margin-top: clamp(0.5rem, 0.325rem + 0.719vw, 1.188rem);
    /* 390px: 8px縲・920px: 19px */
    color: #050505;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: clamp(0.875rem, 0.843rem + 0.131vw, 1rem);
    /* 390px: 14px縲・920px: 16px */
    font-style: normal;
    font-weight: 500;
    line-height: clamp(136%, 136% + 0vw, 151%);
    /* 390px: 136%縲・920px: 151% */
    letter-spacing: clamp(0.0438rem, 0.0406rem + 0.013vw, 0.05rem);
    /* 390px: 0.7px縲・920px: 0.8px */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(1.188rem, 1.106rem + 0.340vw, 1.51rem);
    /* 2陦後ユ繧ｭ繧ｹ繝医・鬮倥＆縺ｫ蜷医ｏ縺帙◆蝗ｺ螳夐ｫ倥＆・亥桙逶ｴ荳ｭ螟ｮ謠・∴逕ｨ・・*/
    margin-bottom: 0;
}

/* 390px蟆ら畑謾ｹ陦鯉ｼ育判蜒上い繧､繝・Β逕ｨ・・*/
.sp-br3 {
    display: none;
}

@media (max-width: 768px) {
    .sp-br3 {
        display: block;
    }
}

/* 486px莉･荳句ｰら畑謾ｹ陦・*/
.sp-br-486 {
    display: none;
}

@media (max-width: 486px) {
    .sp-br-486 {
        display: block;
    }
}

/* ============================
   閭梧勹繝・く繧ｹ繝茨ｼ・ear to change the world・・
============================ */

.recommend-text-upper,
.recommend-text-lower {
    position: absolute;
    color: #FFF;
    -webkit-text-stroke-width: clamp(0.019rem, 0.008rem + 0.046vw, 0.063rem);
    /* 390px: 0.3px縲・920px: 1px */
    -webkit-text-stroke-color: #BA2A20;
    font-family: "din-2014", "DIN 2014", "ff-din-paneuropean", "DIN Alternate", sans-serif !important;
    font-size: clamp(4.088rem, 1.656rem + 9.974vw, 13.625rem);
    /* 390px: 65.4px縲・920px: 218px */
    font-style: normal;
    font-weight: 700;
    line-height: clamp(6.3rem, 2.553rem + 15.373vw, 21rem);
    /* 390px: 100.8px縲・920px: 336px */
    letter-spacing: clamp(-0.136rem, -0.017rem - 0.100vw, -0.041rem);
    /* 390px: -0.654px縲・920px: -2.18px */
    opacity: 0.5;
    width: clamp(59.419rem, 24.078rem + 144.988vw, 198.063rem);
    /* 390px: 950.7px縲・920px: 3169px */
    max-width: 100%; /* BOX縺九ｉ縺ｯ縺ｿ蜃ｺ縺輔↑縺・ｈ縺・↓蛻ｶ髯・*/
    height: clamp(5.670rem, 1.889rem + 15.509vw, 20.5rem);
    /* 390px: 90.72px縲・920px: 328px */
    flex-shrink: 0;
    white-space: nowrap;
    
    z-index: 1;
}

.recommend-text-upper {
    bottom: clamp(8.781rem, 7.196rem + 6.503vw, 15rem);
    /* 390px: 140.5px縲・920px: 240px */
    left: clamp(-4.375rem, -2.258rem - 1.765vw, -2.688rem);
    /* 390px: -43px縲・920px: -70px・・OX蟾ｦ遶ｯ縺九ｉ繝・く繧ｹ繝亥ｷｦ遶ｯ縺ｾ縺ｧ縺ｮ霍晞屬・・*/
}

.recommend-text-lower {
    bottom: clamp(-1rem, 5.721rem - 5.601vw, 4.356rem);
    /* 390px: 69.7px縲・920px: -16px */
    left: clamp(-44.563rem, -7.151rem - 31.176vw, -14.75rem);
    /* 390px: -236px縲・920px: -713px・・OX蟾ｦ遶ｯ縺九ｉ繝・く繧ｹ繝亥ｷｦ遶ｯ縺ｾ縺ｧ縺ｮ霍晞屬・・*/
}

/* ============================
   蜷ｹ縺榊・縺励お繝ｪ繧｢
============================ */

.recommend-balloons {
    margin-left: auto;
    margin-right: auto;
}

.balloon-text {
    position: absolute;
    z-index: 2;
}

.balloon-main-text {
    color: #000;
    font-family: "Noto Sans JP";
    font-size: clamp(0.875rem, 0.859rem + 0.065vw, 0.9375rem);
    /* 390px: 14px縲・920px: 15px */
    font-style: normal;
    line-height: 170%;
    margin: 0;
}

.balloon-badge {
    background: #BA2A20;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
}

/* 繝・せ繧ｯ繝医ャ繝暦ｼ・201px莉･荳奇ｼ・*/
@media (min-width: 1201px) {
    .recommend-balloons {
        position: relative;
        width: clamp(21.875rem, 90vw, 99.75rem);
        /* 390px: 350px縲・920px: 1596px - recommend-box縺ｨ蜷後§蟷・*/
        min-height: 41.625rem;
    }

    .balloon {
        position: absolute;
        z-index: 3;
    }

    .pc-balloon-large,
    .pc-balloon-medium,
    .sp-balloon {
        display: none;
    }

    .balloon-1 {
        top: clamp(1.688rem, 0.159rem + 6.275vw, 7.688rem);
        /* 768px: 27px縲・920px: 123px・亥・縺ｮ蛟､繧堤ｶｭ謖・ｼ・*/
        left: clamp(3.313rem, -0.638rem + 16.209vw, 18.813rem);
        /* 768px: 53px縲・920px: 301px・亥・縺ｮ蛟､繧堤ｶｭ謖・ｼ・*/
        z-index: 5;
    }

    .balloon-2 {
        top: clamp(1.375rem, 0.132rem + 5.098vw, 6.25rem);
        /* 768px: 22px縲・920px: 100px・亥・縺ｮ蛟､繧堤ｶｭ謖・ｼ・*/
        right: clamp(3.094rem, -0.594rem + 15.131vw, 17.563rem);
        /* 768px: 49.5px縲・920px: 281px・亥・縺ｮ蛟､繧堤ｶｭ謖・ｼ・*/
        z-index: 5;
    }

    .balloon-3 {
        top: clamp(17.5rem, -0.543rem + 37.587vw, 25.125rem);
        /* 768px: 280px縲・920px: 402px・亥・縺ｮ蛟､繧堤ｶｭ謖・ｼ・*/
        left: clamp(1.047rem, -0.152rem + 4.918vw, 5.75rem);
        /* 768px: 16.75px縲・920px: 95px・亥・縺ｮ蛟､繧堤ｶｭ謖・ｼ・*/
    }

    .balloon-4 {
        top: clamp(17.5rem, 6.228rem + 23.472vw, 22.313rem);
        /* 768px: 280px縲・920px: 357px・亥・縺ｮ蛟､繧堤ｶｭ謖・ｼ・*/
        right: clamp(0.891rem, -0.172rem + 4.363vw, 5.063rem);
        /* 768px: 14.25px縲・920px: 81px・亥・縺ｮ蛟､繧堤ｶｭ謖・ｼ・*/
    }

    .balloon-1 .balloon-img {
        width: clamp(15.25rem, 5.228rem + 20.852vw, 30.25rem);
        /* 769px: 244px縲・920px: 484px */
        height: clamp(17.04rem, 24.063rem - 5.851vw, 21.25rem);
        /* 769px: 340px縲・920px: 272.64px */
    }

    .balloon-2 .balloon-img {
        width: clamp(13.313rem, 1.996rem + 23.545vw, 30.25rem);
        /* 769px: 213px縲・920px: 484px */
        height: clamp(13.24rem, 23.264rem - 8.353vw, 19.25rem);
        /* 769px: 308px縲・920px: 211.87px */
    }

    .balloon-3 .balloon-img {
        width: clamp(16.375rem, 7.105rem + 19.287vw, 30.25rem);
        /* 769px: 262px縲・920px: 484px */
        height: clamp(13.549rem, 24.416rem - 9.054vw, 20.063rem);
        /* 769px: 321px縲・920px: 216.78px */
    }

    .balloon-4 .balloon-img {
        width: clamp(14.938rem, 4.707rem + 21.286vw, 30.25rem);
        /* 769px: 239px縲・920px: 484px */
        height: clamp(14.313rem, 30.889rem - 13.814vw, 24.25rem);
        /* 769px: 388px縲・920px: 229px */
    }

    .balloon-1 .balloon-text {
        top: clamp(1.813rem, 3.179rem - 1.139vw, 3.531rem);
        /* 769px: 25px縲・920px: 29px */
        left: clamp(2.313rem, 2.146rem + 0.347vw, 2.563rem);
        /* 769px: 37px縲・920px: 41px */
        width: clamp(13.5rem, 0.089rem + 21.436vw, 25.813rem);
        /* 1001px: 216px縲・920px: 413px */
        height: clamp(8rem, 17.965rem - 6.638vw, 10rem);
        /* 1001px: 221px縲・920px: 160px */
    }

    .balloon-2 .balloon-text {
        top: clamp(1.938rem, 3.690rem - 1.639vw, 4.188rem);
        /* 769px: 25px縲・920px: 31px */
        left: clamp(1.688rem, 1.270rem + 0.869vw, 2.313rem);
        /* 769px: 27px縲・920px: 37px */
        width: clamp(13.75rem, 0.952rem + 20.457vw, 25.5rem);
        /* 1001px: 220px縲・920px: 408px */
        height: clamp(4.875rem, 12.621rem - 4.788vw, 6.875rem);
        /* 1001px: 154px縲・920px: 110px */
    }

    .balloon-3 .balloon-text {
        top: clamp(1.938rem, 3.690rem - 1.639vw, 5.969rem);
        /* 769px: 25px縲・920px: 31px */
        left: clamp(1.813rem, 1.228rem + 1.216vw, 2.688rem);
        /* 769px: 29px縲・920px: 43px */
        width: clamp(15.5rem, 4.675rem + 17.302vw, 25.438rem);
        /* 1001px: 248px縲・920px: 407px */
        height: clamp(4.875rem, 6.082rem + 3.265vw, 10rem);
        /* 1001px: 130px縲・920px: 160px */
    }

    .balloon-4 .balloon-text {
        top: clamp(1.75rem, 3.429rem - 1.483vw, 4.813rem);
        /* 769px: 25px縲・920px: 28px */
        left: clamp(2.094rem, 2.031rem + 0.130vw, 2.188rem);
        /* 769px: 33.5px縲・920px: 35px */
        width: clamp(15.1875rem, 4.025rem + 17.846vw, 25.438rem);
        /* 1001px: 243px縲・920px: 407px */
        height: clamp(6.5rem, 18.623rem - 8.488vw, 8.4375rem);
        /* 1001px: 213px縲・920px: 135px */
    }

    .balloon-main-text {
        font-weight: clamp(400, 291.667 + 22.569vw, 500);
        letter-spacing: clamp(0.0188rem, 0.033rem - 0.030vw, 0.035rem);
    }

    .balloon-badge {
        width: clamp(8.313rem, 8.729rem - 0.347vw, 8.563rem);
        /* 769px: 137px縲・920px: 133px */
        height: clamp(1.125rem, 1.229rem - 0.087vw, 1.188rem);
        /* 769px: 19px縲・920px: 18px */
        margin-top: clamp(1.25rem, 0.742rem + 1.058vw, 0.75rem);
        border-radius: clamp(0.840rem, 0.360rem + 1.000vw, 1.563rem);
        font-size: 0.688rem;
        /* 769px: 11px縲・920px: 11px・亥崋螳夲ｼ・*/
        letter-spacing: clamp(0.037rem, 0.020rem + 0.035vw, 0.069rem);
    }

    .pc-balloon-xlarge {
        display: block;
    }

    .balloon-text-mobile {
        display: none;
    }
}

/* 繝弱・繝・C蟶ｯ縺ｧ縺ｮ蜷ｹ縺榊・縺励ユ繧ｭ繧ｹ繝井ｽ咲ｽｮ隱ｿ謨ｴ (1201px-1620px) */
@media (min-width: 1201px) and (max-width: 1620px) {
    .balloon-1 .balloon-text,
    .balloon-2 .balloon-text,
    .balloon-3 .balloon-text,
    .balloon-4 .balloon-text {
        top: clamp(2.75rem, 5.644rem - 2.86vw, 3.5rem);
        /* 1201px: 56px縲・620px: 44px */
    }
}

/* 1440px帯: 右下バルーンを少し横長に調整 */
@media (min-width: 1360px) and (max-width: 1520px) {
    .balloon-4 .balloon-img {
        width: calc(clamp(14.938rem, 4.707rem + 21.286vw, 30.25rem) * 1.05);
        height: calc(clamp(14.313rem, 30.889rem - 13.814vw, 24.25rem) * 0.89);
    }

    .balloon-2 .balloon-img {
        height: calc(clamp(13.24rem, 23.264rem - 8.353vw, 19.25rem) * 0.92);
    }

    .balloon-2 .balloon-text {
        top: calc(clamp(2.75rem, 5.644rem - 2.86vw, 3.5rem) - 0.6rem);
    }

    .balloon-4 {
        right: clamp(0.891rem, -0.172rem + 4.363vw, 5.063rem);
        transform: none;
    }

    .balloon-4 .balloon-text {
        left: calc(clamp(2.094rem, 2.031rem + 0.130vw, 2.188rem) + 0.4rem);
        top: calc(clamp(2.75rem, 5.644rem - 2.86vw, 3.5rem) - 0.45rem);
    }
}

/* 繝・せ繧ｯ繝医ャ繝暦ｼ・001px-1200px・・*/
@media (min-width: 1001px) and (max-width: 1200px) {
    .recommend-balloons {
        position: relative;
        width: clamp(21.875rem, 90vw, 99.75rem);
        /* 1001px: 901px縲・200px: 1080px */
        min-height: 45.625rem;
    }

    .balloon {
        position: absolute;
        z-index: 3;
    }

    .pc-balloon-xlarge,
    .pc-balloon-medium,
    .sp-balloon {
        display: none;
    }

    .pc-balloon-large {
        display: block;
    }

    /* balloon-1 */
    .balloon-1 {
        top: clamp(1.688rem, 0.159rem + 6.275vw, 7.688rem);
        left: clamp(3.313rem, -0.638rem + 16.209vw, 18.813rem);
        z-index: 5;
    }

    .balloon-1 .balloon-img {
        width: clamp(18.125rem, 4.291rem + 22.111vw, 20.875rem);
        /* 1001px: 290px縲・200px: 334px */
        height: 20.313rem;
        /* 325px蝗ｺ螳・*/
    }

    .balloon-1 .balloon-text {
        top: clamp(1.813rem, 3.179rem - 1.139vw, 3.531rem);
        left: clamp(2.313rem, 2.146rem + 0.347vw, 2.563rem);
        width: clamp(13.5rem, 0.089rem + 21.436vw, 25.813rem);
        height: clamp(8rem, 17.965rem - 6.638vw, 10rem);
    }

    /* balloon-2 */
    .balloon-2 {
        top: clamp(1.375rem, 0.132rem + 5.098vw, 6.25rem);
        right: clamp(3.094rem, -0.594rem + 15.131vw, 17.563rem);
        z-index: 5;
    }

    .balloon-2 .balloon-img {
        width: clamp(16.75rem, 2.288rem + 23.116vw, 19.625rem);
        /* 1001px: 268px縲・200px: 314px */
        height: clamp(17.438rem, 23.091rem - 7.538vw, 18.375rem);
        /* 1001px: 294px縲・200px: 279px */
    }

    .balloon-2 .balloon-text {
        top: clamp(1.938rem, 3.690rem - 1.639vw, 4.188rem);
        left: clamp(1.688rem, 1.270rem + 0.869vw, 2.313rem);
        width: clamp(13.75rem, 0.952rem + 20.457vw, 25.5rem);
        height: clamp(4.875rem, 12.621rem - 4.788vw, 6.875rem);
    }

    /* balloon-3 */
    .balloon-3 {
        top: clamp(17.5rem, -0.543rem + 37.587vw, 25.125rem);
        left: clamp(1.047rem, -0.152rem + 4.918vw, 5.75rem);
    }

    .balloon-3 .balloon-img {
        width: clamp(19.313rem, 8.624rem + 17.085vw, 21.438rem);
        /* 1001px: 309px縲・200px: 343px */
        height: clamp(18.063rem, 22.208rem - 5.528vw, 18.75rem);
        /* 1001px: 300px縲・200px: 289px */
    }

    .balloon-3 .balloon-text {
        top: clamp(1.938rem, 3.690rem - 1.639vw, 5.969rem);
        left: clamp(1.813rem, 1.228rem + 1.216vw, 2.688rem);
        width: clamp(15.5rem, 4.675rem + 17.302vw, 25.438rem);
        height: clamp(4.875rem, 6.082rem + 3.265vw, 10rem);
    }

    /* balloon-4 */
    .balloon-4 {
        top: clamp(17.5rem, 6.228rem + 23.472vw, 22.313rem);
        right: clamp(0.891rem, -0.172rem + 4.363vw, 5.063rem);
    }

    .balloon-4 .balloon-img {
        width: clamp(18.063rem, 5.802rem + 19.598vw, 20.5rem);
        /* 1001px: 289px縲・200px: 328px */
        height: clamp(20.813rem, 30.989rem - 13.568vw, 22.5rem);
        /* 1001px: 360px縲・200px: 333px */
    }

    .balloon-4 .balloon-text {
        top: clamp(1.75rem, 3.429rem - 1.483vw, 4.813rem);
        left: clamp(2.094rem, 2.031rem + 0.130vw, 2.188rem);
        width: clamp(15.1875rem, 4.025rem + 16.846vw, 19.438rem);
        height: clamp(6.5rem, 18.623rem - 8.488vw, 8.4375rem);
    }

    .balloon-main-text {
        font-weight: clamp(400, 291.667 + 22.569vw, 500);
        letter-spacing: clamp(0.0188rem, 0.033rem - 0.030vw, 0.035rem);
    }

    .balloon-badge {
        width: clamp(8.313rem, 8.729rem - 0.347vw, 8.563rem);
        height: clamp(1.125rem, 1.229rem - 0.087vw, 1.188rem);
        margin-top: clamp(1.25rem, 0.742rem + 1.058vw, 0.75rem);
        border-radius: clamp(0.840rem, 0.360rem + 1.000vw, 1.563rem);
        font-size: 0.688rem;
        letter-spacing: clamp(0.037rem, 0.020rem + 0.035vw, 0.069rem);
    }

    .balloon-text-mobile {
        display: none;
    }
}

/* 769px縲・919px: 謾ｹ陦後ｒ辟｡蜉ｹ蛹厄ｼ・920px莉･荳翫・<br>繧定｡ｨ遉ｺ・・*/
@media (min-width: 769px) and (max-width: 1919px) {
    .balloon-text br {
        display: none;
    }
}

/* 荳ｭ髢薙し繧､繧ｺ・・69px縲・000px・・*/
@media (min-width: 769px) and (max-width: 1000px) {
    .recommend-balloons {
        position: relative;
        width: clamp(21.875rem, 90vw, 99.75rem);
        min-height: 45.625rem;
    }

    .balloon {
        position: absolute;
        z-index: 3;
    }

    .pc-balloon-xlarge,
    .pc-balloon-large,
    .sp-balloon {
        display: none;
    }

    .pc-balloon-medium {
        display: block;
    }

    /* balloon-1 */
    .balloon-1 {
        top: clamp(4.688rem, 0.159rem + 6.275vw, 7.688rem);
        /* 769px: 27px縲・920px: 123px */
        left: clamp(3.313rem, -0.638rem + 16.209vw, 18.813rem);
        /* 769px: 53px縲・920px: 301px */
        z-index: 5;
    }

    .balloon-1 .balloon-img {
        width: clamp(15.25rem, 5.678rem + 19.913vw, 18.125rem);
        /* 769px: 244px縲・000px: 290px */
        height: clamp(20.3125rem, 24.371rem - 6.494vw, 21.25rem);
        /* 769px: 340px縲・000px: 325px */
    }

    .balloon-1 .balloon-text {
        top: clamp(0.813rem, 0.12rem + 2.842vw, 3.531rem);
        /* 769px: 25px縲・920px: 29px */
        left: clamp(2.313rem, 2.146rem + 0.347vw, 2.563rem);
        /* 769px: 37px縲・920px: 41px */
        width: clamp(11.625rem, 6.631rem + 10.39vw, 13.125rem);
        /* 769px: 170px縲・920px: 413px */
        height: clamp(8rem, 18.321rem - 8.601vw, 14.188rem);
        /* 769px: 227px縲・920px: 128px */
    }

    /* balloon-2 */
    .balloon-2 {
        top: clamp(1.375rem, 0.132rem + 5.098vw, 6.25rem);
        /* 769px: 22px縲・920px: 100px */
        right: clamp(3.094rem, -0.594rem + 15.131vw, 17.563rem);
        /* 769px: 49.5px縲・920px: 281px */
        z-index: 5;
    }

    .balloon-2 .balloon-img {
        width: clamp(13.313rem, 3.514rem + 20.390vw, 16.75rem);
        /* 769px: 213px縲・000px: 268px */
        height: clamp(18.375rem, 21.854rem - 5.844vw, 19.25rem);
        /* 769px: 308px縲・000px: 294px */
    }

    .balloon-2 .balloon-text {
        top:clamp(1.938rem, 1.364rem + 2.353vw, 1.188rem);
        /* 769px: 25px縲・920px: 31px */
        left: clamp(1.688rem, 1.270rem + 0.869vw, 2.313rem);
        /* 769px: 27px縲・920px: 37px */
        width: clamp(9.938rem, -0.460rem + 21.634vw, 25.5rem);
        /* 769px: 159px縲・920px: 408px */
        height: clamp(4.875rem, 14.750rem - 8.183vw, 10.875rem);
        /* 769px: 174px縲・920px: 78px */
    }

    /* balloon-3 */
    .balloon-3 {
        top: clamp(23.5rem, -0.543rem + 37.587vw, 25.125rem);
        /* 769px: 280px縲・920px: 402px */
        left: clamp(1.047rem, -0.152rem + 4.918vw, 5.75rem);
        /* 769px: 16.75px縲・920px: 95px */
    }

    .balloon-3 .balloon-img {
        width: clamp(16.375rem, 6.022rem + 21.513vw, 19.3125rem);
        /* 769px: 262px縲・000px: 309px */
        height: clamp(18.75rem, 18.75rem + 0vw, 18.75rem);
        /* 769px: 321px縲・000px: 300px */
    }

    .balloon-3 .balloon-text {
        top: clamp(1.938rem, 3.690rem - 1.639vw, 5.969rem);
        /* 769px: 25px縲・920px: 31px */
        left: clamp(1.813rem, 1.228rem + 1.216vw, 2.688rem);
        /* 769px: 29px縲・920px: 43px */
        width: clamp(12.75rem, 3.754rem + 18.711vw, 25.438rem);
        /* 769px: 204px縲・920px: 407px */
        height: clamp(4.875rem, 12.250rem - 6.112vw, 8.125rem);
        /* 769px: 130px縲・920px: 78px */
    }

    /* balloon-4 */
    .balloon-4 {
        top: clamp(17.5rem, 6.228rem + 23.472vw, 22.313rem);
        /* 769px: 280px縲・920px: 357px */
        right: clamp(0.891rem, -0.172rem + 4.363vw, 5.063rem);
        /* 769px: 14.25px縲・920px: 81px */
    }

    .balloon-4 .balloon-img {
        width: clamp(14.938rem, 4.185rem + 22.360vw, 18.0625rem);
        /* 769px: 239px縲・000px: 289px */
        height: clamp(22.5rem, 33.016rem - 17.662vw, 24.25rem);
        /* 769px: 388px縲・000px: 360px */
    }

    .balloon-4 .balloon-text {
        top: clamp(1.75rem, 3.429rem - 1.483vw, 4.813rem);
        /* 769px: 25px縲・920px: 28px */
        left: clamp(2.094rem, 2.031rem + 0.130vw, 2.188rem);
        /* 769px: 33.5px縲・920px: 35px */
        width: clamp(10.75rem, 1.238rem + 19.781vw, 25.438rem);
        /* 769px: 172px縲・920px: 407px */
        height: clamp(6.5rem, 20.696rem - 11.796vw, 14.625rem);
        /* 769px: 234px縲・920px: 104px */
    }

    .balloon-main-text {
        font-weight: clamp(400, 291.667 + 22.569vw, 500);
        letter-spacing: clamp(0.0188rem, 0.033rem - 0.030vw, 0.035rem);
    }

    .balloon-badge {
        width: clamp(8.313rem, 8.729rem - 0.347vw, 8.563rem);
        /* 769px: 137px縲・920px: 133px */
        height: clamp(1.125rem, 1.229rem - 0.087vw, 1.188rem);
        /* 769px: 19px縲・920px: 18px */
        margin-top: clamp(1.25rem, 0.742rem + 1.058vw, 0.75rem);
        border-radius: clamp(0.840rem, 0.360rem + 1.000vw, 1.563rem);
        font-size: 0.688rem;
        /* 769px: 11px縲・920px: 11px・亥崋螳夲ｼ・*/
        letter-spacing: clamp(0.037rem, 0.020rem + 0.035vw, 0.069rem);
    }

    .balloon-text-mobile {
        display: none;
    }
}

/* 繝｢繝舌う繝ｫ・・68px莉･荳具ｼ・*/
@media (max-width: 768px) {
    .recommend-box {
        overflow: visible;
    }

    .recommend-balloons {
        width: clamp(19.375rem, 14.378rem + 20.503vw, 24.219rem);
        /* 390px: 310px縲・68px: 387.5px */
        margin-top: clamp(2.5rem, 1.855rem + 2.646vw, 3.125rem);
        /* 390px: 40px縲・68px: 50px */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(0.625rem, 0.464rem + 0.661vw, 0.781rem);
        /* 390px: 10px縲・68px: 12.5px */
    }

    .balloon {
        position: relative;
        width: 100%;
        z-index: 3;
    }

    .balloon-img {
        width: 100%;
        height: auto;
    }

    .balloon-1 .balloon-text {
        top: clamp(6.475rem, 5.686rem + 3.238vw, 7.24rem);
        left: 50%;
        transform: translate(-50%, -50%);
        width: clamp(16.375rem, 13.473rem + 11.905vw, 19.188rem);
        /* 390px: 261px縲・68px: 285px */
        height: clamp(7.438rem, 13.152rem - 11.905vw, 10.25rem);
        /* 390px: 164px縲・68px: 119px */
    }

    .balloon-2 .balloon-text {
        top: 34%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: clamp(16.313rem, 15.216rem + 4.497vw, 17.375rem);
        /* 390px: 261px縲・68px: 278px */
        height: 5.938rem;
        /* 390px: 95px縲・68px: 95px・亥崋螳夲ｼ・*/
    }

    .balloon-3 .balloon-text {
        top: 34%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: clamp(16.313rem, 15.216rem + 4.497vw, 17.375rem);
        /* 390px: 261px縲・68px: 278px */
        height: 5.938rem;
        /* 390px: 95px縲・68px: 95px・亥崋螳夲ｼ・*/
    }

    .balloon-4 .balloon-text {
        top: 38%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: clamp(16.438rem, 15.857rem + 2.381vw, 17rem);
        /* 390px: 261px縲・68px: 278px */
        height: 7.9rem;
        /* 390px: 126.4px縲・68px: 126.4px・亥崋螳夲ｼ・*/
    }

    .balloon-main-text {
        font-weight: 400;
        letter-spacing: clamp(0.035rem, 0.026rem + 0.037vw, 0.044rem);
        /* 390px: 0.56px縲・68px: 0.7px */
    }

    .balloon-badge {
        width: clamp(9.875rem, 7.328rem + 10.450vw, 12.344rem);
        /* 390px: 158px縲・68px: 197.5px */
        height: clamp(1.438rem, 1.067rem + 1.521vw, 1.797rem);
        /* 390px: 23px縲・68px: 28.75px */
        margin-top: clamp(1rem, 0.742rem + 1.058vw, 1.25rem);
        /* 390px: 16px縲・68px: 20px */
        border-radius: clamp(0.938rem, 0.696rem + 0.992vw, 1.172rem);
        /* 390px: 15px縲・68px: 18.75px */
        font-size: clamp(0.75rem, 0.556rem + 0.794vw, 0.938rem);
        /* 390px: 12px縲・68px: 15px */
        letter-spacing: clamp(0.075rem, 0.056rem + 0.079vw, 0.094rem);
        /* 390px: 1.2px縲・68px: 1.5px */
    }

    .pc-balloon-xlarge,
    .pc-balloon-large,
    .pc-balloon-medium {
        display: none;
    }

    .sp-balloon {
        display: block;
    }

    .balloon-text-desktop {
        display: none;
    }

    .balloon-text-mobile {
        display: block;
    }
    .recommend-text-upper {
        bottom: clamp(8.781rem, -0.731rem + 39.022vw, 18rem);
        left:0;
    }
    .recommend-text-lower {
        bottom: clamp(4rem, -2.19rem + 25.397vw, 10rem);
        left:0;
    }
    .recommend-text-upper,
    .recommend-text-lower {
        overflow: hidden; /* 縺ｯ縺ｿ蜃ｺ縺励◆驛ｨ蛻・ｒ髱櫁｡ｨ遉ｺ */
    }
}

/* ============================
   閭梧勹逕ｻ蜒上→蜃ｺ螻募・
============================ */

.recommend-bottom-image {
    position: relative;
    z-index: 4;
    text-align: center;
}

.bottom-img {
    width: clamp(54.188rem, 21.41rem + 68.2vw, 103.25rem);
    /* 769px: 867px縲・920px: 1652px */
    height: auto;
}

.pc-bottom {
    display: none;
}

.sp-bottom {
    display: block;
}

.recommend-source {
    color: #000;
    font-family: "Noto Sans JP";
    font-size: clamp(0.75rem, 0.719rem + 0.127vw, 0.875rem);
    /* 390px: 12px縲・920px: 14px */
    font-weight: 400;
    letter-spacing: clamp(0.038rem, 0.036rem + 0.007vw, 0.044rem);
    /* 390px: 0.6px縲・920px: 0.7px */
    text-align: center;
    margin-top: clamp(1rem, 0.892rem + 0.915vw, 1.188rem);
    /* 390px: 16px縲・920px: 19px・・OX荳狗ｫｯ縺九ｉ16px縲・9px荳具ｼ・*/
    margin-bottom: 0;
}

/* 繝・せ繧ｯ繝医ャ繝暦ｼ・69px莉･荳奇ｼ・*/
@media (min-width: 769px) {
    .recommend-bottom-image {
        margin-top: clamp(-40rem, -4.553rem + -26.257vw, -7.75rem);
        /* 769px: -275px縲・920px: -577px・・OX荳狗ｫｯ縺ｫ逕ｻ蜒丈ｸ狗ｫｯ繧帝・鄂ｮ・・*/
    }

    .bottom-img {
        max-width: none; /* BOX縺九ｉ縺ｯ縺ｿ蜃ｺ縺励※陦ｨ遉ｺ */
    }

    .pc-bottom {
        display: block;
    }

    .sp-bottom {
        display: none;
    }

    .recommend-source {
        text-align: right;
        line-height: normal;
        width: clamp(21.875rem, 90vw, 99.75rem);
        /* recommend-box縺ｨ蜷後§蟷・↓險ｭ螳壹＠縲∝承蟇・○縺ｧBOX縺ｮ蜿ｳ遶ｯ縺ｫ蜷医ｏ縺帙ｋ */
    }
}

@media (min-width: 1409px) {
    .recommend-bottom-image {
        margin-top: clamp(-563px, calc(-316px + (-247 * (100vw - 1409px) / 511)), -316px);
    }
}

/* 繝｢繝舌う繝ｫ・・68px莉･荳具ｼ・*/
@media (max-width: 768px) {
    .recommend-bottom-image {
        margin-top: clamp(-6.25rem, -5.577rem + -2.764vw, -5rem);
        /* 390px: -100px縲・68px: -80px・亥聖縺榊・縺・縺ｨ驥阪・縺ｦ菴咏區繧定ｩｰ繧√ｋ・・*/
        text-align: left;
    }

    .sp-bottom {
        width: clamp(24.375rem, 4.772rem + 80.423vw, 43.375rem);
        /* 390px: 571px縲・68px: 867px */
        max-width: none; /* 隕ｪ隕∫ｴ縺ｮ蟷・宛邏・ｒ隗｣髯､縺励※BOX縺九ｉ縺ｯ縺ｿ蜃ｺ縺励※陦ｨ遉ｺ */
        height: auto;
        margin-left: clamp(0.125rem, 7.173rem - 39.683vw, -2.5rem);
        /* 390px: -40px縲・68px: -190px・郁ｦｪ隕∫ｴ縺ｮ蟾ｦ遶ｯ縺九ｉ繝薙Η繝ｼ繝昴・繝亥ｷｦ遶ｯ縺ｾ縺ｧ縺ｮ霍晞屬繧堤嶌谿ｺ・・*/
    }

    .recommend-source {
        line-height: clamp(1.25rem, 0.928rem + 1.323vw, 1.563rem);
        /* 390px: 20px縲・68px: 25px */
    }
}

/* ============================
   Sales results繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ
============================ */

.medical-sales {
    margin-top: clamp(5.25rem, 4.899rem + 1.438vw, 6.625rem);
    padding-bottom: clamp(0rem, -1.593rem + 6.536vw, 6.25rem);
    /* 390px: 84px縲・920px: 106px */
    text-align: center;
}

/* Sales results繝ｩ繝吶Ν */
.sales-label {
    color: rgba(159, 33, 7, 0.50);
    font-family: Raleway, sans-serif !important;
    font-size: clamp(1rem, 0.984rem + 0.065vw, 0.988rem);
    /* 390px: 16px縲・920px: 15.808px */
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    margin: 0;
}

/* 雋ｩ螢ｲ螳溽ｸｾ */
.sales-title {
    color: #333333;
    font-family: "Noto Sans JP";
    font-size: clamp(1.25rem, 1.217rem + 0.131vw, 1.2703rem);
    /* 390px: 20px縲・920px: 20.324px */
    font-weight: 700;
    line-height: 140%;
    text-align: center;
    letter-spacing: clamp(0.0625rem, 0.0625rem + 0vw, 0.0625rem);
    /* 390px: 1px縲・920px: 1px */
    margin: 0;
    margin-top: 8px;
}

/* 縺溘￥縺輔ｓ縺ｮ譁ｹ縺ｫ繝ｪ繝ｩ繧､繝悶え繧ｧ繧｢繧偵＃諢帷畑縺・◆縺縺・※縺翫ｊ縺ｾ縺吶・*/
.sales-catchphrase {
    color: #BA2A20;
    font-family: "Noto Sans JP";
    font-size: clamp(1.375rem, 1.216rem + 0.654vw, 2rem);
    /* 390px: 22px縲・920px: 32px */
    font-style: normal;
    font-weight: 500;
    line-height: clamp(2.25rem, 1.859rem + 1.601vw, 3.8rem);
    /* 390px: 36px縲・920px: 60.8px */
    letter-spacing: clamp(0.2rem, 0.294rem - 0.078vw, 0.275rem);
    /* 390px: 4.4px縲・920px: 3.2px */
    text-align: center;
    margin: clamp(1.875rem, 1.445rem + 1.765vw, 3.5625rem) 0 0 0;
    /* 390px: 30px縲・920px: 57px */
}

/* 謾ｹ陦悟宛蠕｡: 1024px莉･荳九〒陦ｨ遉ｺ */
.sales-br {
    display: none;
}

@media (max-width: 1024px) {
    .sales-br {
        display: inline;
    }
}

/* ========================================
   雋ｩ螢ｲ螳溽ｸｾ 邨ｱ險医・繝・け繧ｹ
   ======================================== */

/* 閭梧勹繝懊ャ繧ｯ繧ｹ */
.sales-stats-box {
    position: relative;
    width: clamp(21.875rem, 1.96rem + 81.7vw, 100rem);
    /* 390px: 350px, 1920px: 1600px */
    height: clamp(15.5rem, 13.209rem + 3.575vw, 17.5rem);
    /* 280px (1920px) - SP縺ｯ蛻･騾碑ｨｭ螳・*/
    margin: clamp(1.875rem, 1.397rem + 1.96vw, 3.75rem) auto 0;
    /* 390px: 30px, 1920px: 60px */
    border-radius: clamp(1rem, -0.216rem + 4.99vw, 3.125rem);
    /* 390px: 16px, 1920px: 50px */
}

/* 閭梧勹繧ｰ繝ｩ繝・・繧ｷ繝ｧ繝ｳ・育桝莨ｼ隕∫ｴ縺ｧ騾乗・蠎ｦ繧帝←逕ｨ・・*/
.sales-stats-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(0deg, #FFAB9A 0%, #FFCF4C 100%);
    opacity: 0.08;
}

/* 繝ｩ繝吶Ν繝ｩ繝・ヱ繝ｼ・育ｸｦ縺ｫ邱壹・繝・く繧ｹ繝医・邱夲ｼ・*/
.stat-label-wrapper {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 繝ｩ繧､繝ｳ */
.stat-line {
    display: block;
    width: clamp(5.9375rem, 5.459rem + 1.96vw, 7.8125rem);
    /* 390px: 95px, 1920px: 125px */
    height: clamp(0.0375rem, 0.011rem + 0.11vw, 0.0625rem);
    /* 390px: 0.6px, 1920px: 1px */
    background: #BA2A20;
}

/* 繝ｩ繝吶Ν繝・く繧ｹ繝・*/
.stat-label-text {
    color: #BA2A20;
    font-family: "Noto Sans JP";
    font-size: clamp(0.875rem, 0.811rem + 0.26vw, 1.125rem);
    /* 390px: 14px, 1920px: 18px */
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: clamp(0.3125rem, 0.201rem + 0.46vw, 0.75rem) 0 clamp(0.375rem, 0.247rem + 0.52vw, 0.875rem);
    /* top margin: 390px: 5px, 1920px: 12px */
    /* bottom margin: 390px: 6px, 1920px: 14px */
}

/* 謨ｰ蛟､繝ｩ繝・ヱ繝ｼ */
.stat-value-wrapper {
    position: absolute;
    display: flex;
    align-items: baseline;
}

/* 謨ｰ蛟､ */
.stat-number {
    color: #BA2A20;
    font-family: "din-2014", "DIN 2014", "ff-din-paneuropean", "DIN Alternate", sans-serif !important;
    font-size: clamp(3.75rem, 1.102rem + 4.134vw, 6.063rem);
    /* 390px: 48px, 1920px: 97px */
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: clamp(-0.03rem, -0.022rem - 0.032vw, -0.0606rem);
    /* 390px: -0.48px, 1920px: -0.97px */
}

/* 蜊倅ｽ搾ｼ域椢繝ｻ莠ｺ・・*/
.stat-unit {
    color: #BA2A20;
    font-family: "Noto Sans JP";
    font-size: clamp(1.25rem, 0.931rem + 1.31vw, 2.5rem);
    /* 390px: 20px, 1920px: 40px */
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-left: clamp(0.25rem, 0.154rem + 0.39vw, 0.625rem);
    /* 390px: 4px, 1920px: 10px */
    position: relative;
}

/* 豕ｨ驥茨ｼ遺ｻ1, 窶ｻ2・・*/
.stat-note {
    position: absolute;
    top: clamp(1.25rem, -0.539rem + 2.793vw, 2.813rem);
    /* 390px: -4px, 1920px: -7px */
    right: 0;
    color: #000;
    font-family: "Noto Sans JP";
    font-size: clamp(0.75rem, 0.766rem - 0.065vw, 0.6875rem);
    /* 390px: 12px, 1920px: 11px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: right;
}

/* 髮・ｨ域悄髢薙ユ繧ｭ繧ｹ繝・*/
.sales-period {
    position: absolute;
    color: #000;
    font-family: "Noto Sans JP";
    font-size: 0.75rem;
    /* 12px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

/* PC逕ｨ髮・ｨ域悄髢・*/
.sales-period-pc {
    display: block;
}

/* SP逕ｨ髮・ｨ域悄髢・*/
.sales-period-sp {
    display: none;
    line-height: 1.25rem;
    /* 20px */
}

/* ========================================
   PC 繝ｬ繧､繧｢繧ｦ繝・(1920px蝓ｺ貅・
   ======================================== */

/* 繧ｻ繝・ヨ1: 邏ｯ險郁ｲｩ螢ｲ譫壽焚 - 繝ｩ繝吶Ν菴咲ｽｮ */
.sales-stat-1 .stat-label-wrapper {
    left: clamp(1.875rem, -9.578rem + 17.877vw, 11.875rem);
    /* 190px */
    top: 5.9375rem;
    /* 95px */
}

/* 繧ｻ繝・ヨ1: 邏ｯ險郁ｲｩ螢ｲ譫壽焚 - 謨ｰ蛟､菴咲ｽｮ */
.sales-stat-1 .stat-value-wrapper {
    left: clamp(9rem, -5.029rem + 21.899vw, 21.25rem);
    /* 340px (190+125+25) */
    top: clamp(3.5rem, 5.646rem - 1.79vw, 4.5rem);
    /* 1025px: 4.5rem(72px), 1920px: 3.5rem(56px) */
}

/* 繧ｻ繝・ヨ2: 縺疲・逕ｨ閠・焚 - 繝ｩ繝吶Ν菴咲ｽｮ */
.sales-stat-2 .stat-label-wrapper {
    left: clamp(28rem, -0.345rem + 44.246vw, 52.75rem);
    /* 844px */
    top: 5.9375rem;
    /* 95px - 蜷後§鬮倥＆ */
}

/* 繧ｻ繝・ヨ2: 縺疲・逕ｨ閠・焚 - 謨ｰ蛟､菴咲ｽｮ */
.sales-stat-2 .stat-value-wrapper {
    left: clamp(35rem, 4.794rem + 47.151vw, 61.375rem);
    /* 982px (844+113+25) */
    top: clamp(3.5rem, 5.646rem - 1.79vw, 4.5rem);
    /* 64px - 蜷後§鬮倥＆ */
}

/* 髮・ｨ域悄髢薙・菴咲ｽｮ - PC: 1,000,000縺ｮ23px荳九〒莠ｺ縺ｮ蜿ｳ蛛ｴ縺ｫ謠・∴繧・*/
.sales-period-pc {
    top: clamp(10.5rem, 8.209rem + 3.575vw, 12.5rem);
    /* 167px (64+97+6 竕・167, 23px below number) */
    right: clamp(1.9rem, -7.377rem + 14.48vw, 10rem);
    /* 隱ｿ謨ｴ蛟､ */
}

/* ========================================
   SP 繝ｬ繧､繧｢繧ｦ繝・(1024px莉･荳・
   ======================================== */

@media (max-width: 1024px) {
    .sales-stats-box {
        width: clamp(21.875rem, 16.339rem + 22.713vw, 30.875rem);
        /* 350px */
        height: 18.125rem;
        /* 290px */
        margin-top: 1.875rem;
        /* 30px */
        border-radius: 1rem;
        /* 16px */
    }

    /* SP逕ｨ: 閭梧勹繧貞腰濶ｲ縺ｫ */
    .sales-stats-box::before {
        background: #FFF9F5;
        opacity: 1;
    }

    /* 繧ｻ繝・ヨ1: 繝ｩ繝吶Ν */
    .sales-stat-1 .stat-label-wrapper {
        left: clamp(1rem, 0.231rem + 3.155vw, 2.25rem);
        /* 20px */
        top: 3.8125rem;
        /* 61px */
    }

    /* 繧ｻ繝・ヨ1: 謨ｰ蛟､ */
    .sales-stat-1 .stat-value-wrapper {
        left: clamp(7.75rem, 6.789rem + 3.943vw, 9.313rem);
        /* 125px (20+95+10) */
        top: clamp(2rem, 3.131rem - 1.77vw, 2.7rem);
        /* 1024px: 2rem(32px), 390px: 2.7rem(43.2px) */
    }

    /* 繧ｻ繝・ヨ2: 繝ｩ繝吶Ν - 16px荳・*/
    .sales-stat-2 .stat-label-wrapper {
        left: clamp(1rem, 0.231rem + 3.155vw, 2.25rem);
        /* 20px */
        top: 8.8125rem;
        /* 157px (61+48+48 = 157px approx, 16px below set1) */
    }

    /* 繧ｻ繝・ヨ2: 謨ｰ蛟､ */
    .sales-stat-2 .stat-value-wrapper {
        left: clamp(7.75rem, 6.789rem + 3.943vw, 9.313rem);
        /* 125px */
        top: clamp(7rem, 8.131rem - 1.77vw, 7.7rem);
        /* 1024px: 7rem(112px), 390px: 7.7rem(123.2px) */
    }

    /* 繝ｩ繧､繝ｳ */
    .stat-line {
        width: 5.9375rem;
        /* 95px */
        height: 0.0375rem;
        /* 0.6px */
    }

    /* 繝ｩ繝吶Ν繝・く繧ｹ繝・*/
    .stat-label-text {
        font-size: 0.875rem;
        /* 14px */
        margin: 0.3125rem 0 0.375rem;
        /* 5px, 6px */
    }

    /* 謨ｰ蛟､ */
    .stat-number {
        font-size: 3rem;
        /* 48px */
        letter-spacing: -0.1rem;
        /* -0.48px */
    }

    /* 蜊倅ｽ・*/
    .stat-unit {
        font-size: 1.25rem;
        /* 20px */
        margin-left: 0.25rem;
        /* 4px */
    }

    /* 豕ｨ驥・*/
    .stat-note {
        font-size: 0.75rem;
        /* 12px */
        top: clamp(1rem, 0.385rem + 2.524vw, 2rem);
        /* -4px */
    }

    /* 髮・ｨ域悄髢・*/
    .sales-period-pc {
        display: none;
    }

    .sales-period-sp {
        display: block;
        left: 1.25rem;
        /* 20px */
        top: 12.625rem;
        /* 218px (146+48+24 竕・218px, 28px below number) */
        line-height: 1.25rem;
        /* 20px */
        text-align: left;
    }
    .stat-number {
        font-size: clamp(3rem, 2.218rem + 3.2vw, 6.0625rem);
    }
}

