@charset "UTF-8";

/* 
h-vitamin-d
------------------------ 
*/

/* section01 */

#hvd .sec01 {
    /* background: #d5e4ea; */
    background: #cfeaf6;
}

#hvd .sec01 .arrow {
    width: 7%;
    margin: 0 auto;
}

#hvd .sec01 .inner {
    padding-top: 3%;
}

#hvd .sec01 h3 {
    font-size: 3.7rem;
    line-height: 1.35;
    position: relative;
    color: #52474a;
}

#hvd .sec01 h3::after {
    content: '';
    background: url(../images/menu/h-vitamin-d/sec1_shape1.png) no-repeat;
    background-size: contain;
    width: 4%;
    aspect-ratio: 32/39;
    position: absolute;
    bottom: 29%;
    right: 14%;
}

@media screen and (max-width: 550px) {
    #hvd .sec01 h3::after {
        right: 15.5%;
    }
}

#hvd .sec01 h3 span {
    font-size: 4.7rem;
    color: #5795b2;
}

@media screen and (max-width: 749px) {
    #hvd .sec01 h3 {
        font-size: 4.9vw;
    }

    #hvd .sec01 h3 span {
        font-size: 6.3vw;
        color: #5795b2;
    }
} 

#hvd .sec01 .txt_wrap {
    position: relative;
    margin: 4% 0 4%;
}

#hvd .sec01 .txt_wrap::before {
    content: '';
    width: 100%;
    height: 100%;
    background: #b8d1dc;
    position: absolute;
    top: 2.5%;
    left: 1.5%;
}

#hvd .sec01 .txt_wrap .border {
    position: relative;
    z-index: 3;
    background: #fff;
    padding: 4% 5%;
    border: 3px solid #5795b2;
}

@media screen and (max-width: 450px) {
    #hvd .sec01 .txt_wrap .border {
        border: 2px solid #5795b2;
    }
}

#hvd .sec01 .txt_wrap .border ul li {
    padding: 2% 2%;
    border-bottom: 2px solid #e7e7e7;
}

#hvd .sec01 .txt_wrap .border ul li:last-child {
    border-bottom: none;
}

#hvd .sec01 .txt_wrap .border ul li figure {
    width: 7%;
    margin-right: 2%;
}

#hvd .sec01 .txt_wrap .border ul li p {
    font-size: 2.8rem;
    color: #52474a;
}

@media screen and (max-width: 749px) {
    #hvd .sec01 .txt_wrap .border ul li p {
        font-size: 3.7vw;
    }
}

/* section02 */

#hvd .sec02 {
    /* background: #c6e4f2; */
    background: #cfeaf6;
    position: relative;
}

#hvd .sec02 h3 {
    position: absolute;
    width: 100%;
    top: -2%;
    left: 0;
    z-index: 3;
}

#hvd .sec02 .w_bg {
    padding: 2% 4% 2%;
    position: relative;
    border: 5px solid #6abfe7;
}

@media screen and (max-width: 450px) {
    #hvd .sec02 .w_bg {
        border: 5px solid #6abfe7;
    }
}

#hvd .sec02 .img1 {
    margin-bottom: 8%;
}

#hvd .sec02 .txt1 {
    margin-bottom: 6%;
}

#hvd .sec02 .txt2 {
    margin-bottom: 8%;
}

#hvd .sec02 .img6 {
    margin: 3% 0 4%;
}

/* section03 */

#hvd .sec03 {
    background: url("../images/menu/h-vitamin-d/sec3_bg.jpg") repeat-y;
    background-size: contain;
}

#hvd .sec03 h3 {
    position: relative;
    padding: 6% 0 0;
}

#hvd .sec03 h3 img {
    margin: 0 auto;
    max-width: 85%;
}

#hvd .sec03 h3 span {
    font-size: 6rem;
}

#hvd .sec03 ul li {
    position: relative;
    margin-bottom: 14%;
}

#hvd .sec03 .inner {
    padding-top: 12%;
}

#hvd .sec03 ul li::before {
    content: '';
    background: #c7e6f3;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 1.5%;
    left: 1.5%;
}

#hvd .sec03 ul li .border {
    position: relative;
    border: 3px solid #6bc0e8;
    padding: 8% 3% 4% 2%;
}

#hvd .sec03 ul li .border .ttl_area {
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
}

#hvd .sec03 ul li .border .ttl_area h4 {
    position: absolute;
    color: #fff;
    top: 15%;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    font-size: 4.3rem;
}

#hvd .sec03 ul li .border .flex figure {
    width: 58%;
}

#hvd .sec03 ul li .border .flex p {
    width: 39%;
}

@media screen and (max-width: 749px) {
    #hvd .sec03 ul li .border p {
        font-size: 3.5vw;
    }
}

#hvd .sec03 ul li .border .bottom_txt_hvd {
    padding: 0 2%;
}


/* section04 */

#hvd .sec04 {
    background: #e8f5fb;
    position: relative;
    padding-top: 8%;
    margin-bottom: 4%;
}

#hvd .sec04 h3 {
    /* transform: translateY(-33%); */
    position: absolute;
    top: -12%;
    left: 0;
}

#hvd .sec04 .inner {
    padding: 6% 5%;
}

#hvd .sec04 .img1 {
    margin-top: -4%;
}

#hvd .sec04 .bg_area {
    background: #fbe7e6;
    position: relative;
    padding-bottom: 50%;
}

#hvd .sec04 .bg_area figure {
    position: absolute;
    top: -45%;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
}

/* section05 */

/* #hvd .sec05 {
    padding-bottom: 4%;
} */


/* #hvd .sec05 .w_bg p {
    font-size: 2.7rem;
}

#hvd .sec05 .flex figure {
    width: 53%;
}

#hvd .sec05 .flex p {
    width: 40%;
}

#hvd .sec05 .bold_txt {
    color: #eb774d;
} */

#hvd .sec05 {
    background: #fbf9db;
}

#hvd .sec05 .top_txt {
    margin-bottom: 6%;
}

#hvd .sec05 .inner {
    padding: 6% 6%;
}

#hvd .sec05 .inner figure {
    margin-bottom: 6%;
}

#hvd .sec05 .flex_pc .p_txt .border_txt {
    border-bottom: 1px solid #4db3e3;
}


/* section06 */

#hvd .sec06 .sec06_top {
    background: #b5dff3;
    position: relative;
    padding: 6% 0 4%;
}

/* #hvd .sec06 .sec06_top::before {
    content: '';
    background: url("../images/menu/h-vitamin-d/sec6_top.png") no-repeat;
    background-size: cover;
    width: 100%;
    aspect-ratio: 750/59;
    position: absolute;
    top: -14.5%;
    left: 0;
} */

/* @media screen and (max-width: 450px) {
    #hvd .sec06 .sec06_top::before {
        top: -13.5%;
    }
} */

/* #hvd .sec06 .sec06_top::after {
    content: '';
    background: url("../images/menu/h-vitamin-d/sec6_bottom.png") no-repeat;
    background-size: cover;
    width: 100%;
    aspect-ratio: 750/59;
    position: absolute;
    bottom: -14%;
    left: 0;
} */

#hvd .sec06 h3 {
    max-width: 70%;
    margin: 0 auto;
}

#hvd .sec06 .inner {
    padding-top: 4%;
    padding-bottom: 0;
}

#hvd .sec06 .w_bg {
    padding: 4% 4%;
    border: 4px solid #6bc0e8;
}

@media screen and (max-width: 450px) {
    #hvd .sec06 .w_bg {
        border: 3px solid #6bc0e8;
    }
}

#hvd .sec06 .sec06_bottom {
    padding: 8% 5%;
}

#hvd .sec06 .sec06_bottom dl dt {
    font-size: 3rem;
    width: 33%;
    margin: 0 auto;
    background: url("../images/menu/h-vitamin-d/sec6_shape1.png") no-repeat center center;
    background-size: contain;
    margin-bottom: 3%;
}

#hvd .sec06 .g6pd_wrap {
    background: #fae1e5;
    padding: 5% 0;
}

#hvd .sec06 .g6pd_wrap .ttl_area {
    background: #fff;
    margin: 0 10%;
    position: relative;
}

#hvd .sec06 .g6pd_wrap .ttl_area::after {
    content: '';
    height: 100%;
    width: 100%;
    background: #f5bdc5;
    position: absolute;
    top: 4%;
    left: 1.5%;
    z-index: 1;
}

#hvd .sec06 .g6pd_wrap .bg_area {
    background: #fff;
    padding: 4% 0 3%;
    position: relative;
    z-index: 3;
}

#hvd .sec06 .g6pd_wrap .ttl_area h4 {
    font-size: 4rem;
}

#hvd .sec06 .g6pd_wrap .color_txt {
    color: #e86b7b;
}

#hvd .sec06 .g6pd_wrap .inner {
    padding: 6% 6% 1%;
}

/* section07 */

#hvd .sec07 .inner {
    padding-top: 4%;
    padding-bottom: 4%;
}

#hvd .sec07 ul li {
    margin-bottom: 3%;
    border: 2px solid #a6d9f1;
    padding: 4% 4%;
}

#hvd .sec07 ul li dt .txt_l {
    font-size: 3.9rem;
}

#hvd .sec07 ul li .flex {
    align-items: flex-end;
}

#hvd .sec07 ul li dd .price {
    font-size: 5rem;
    color: #e86b7b;
    font-weight: 700;
    line-height: 1.2;
}

#hvd .sec07 ul li dd .price span {
    font-size: 4rem;
}

#hvd .sec07 ul .g6pd_price {
    padding: 0;
}

#hvd .sec07 ul .g6pd_price dt {
    background: #d2ecf8;
    padding: 2% 4%;
}

#hvd .sec07 ul .g6pd_price dt .txt_box {
    border: 2px solid #a6d9f1;
    box-sizing: border-box;
    width: 15%;
    padding: 1% 0;
    text-align: center;
}

#hvd .sec07 ul .g6pd_price dt .txt_box .p_txt {
    line-height: 1.3;
    font-weight: 700;
    color: #6db3d3;
}

#hvd .sec07 ul .g6pd_price dt .txt_wrap {
    width: 80%;
}

#hvd .sec07 ul .g6pd_price dt .txt_wrap .bold_txt {
    font-size: 3.4rem;
}

#hvd .sec07 ul .g6pd_price dt .txt_wrap .bold_txt span {
    font-size: 4rem;
}

#hvd .sec07 ul .g6pd_price dt .txt_wrap .p_txt {
    font-size: 2.4rem;
}

#hvd .sec07 ul .g6pd_price dd {
    padding: 2% 4%;
    justify-content: center;
}


/* renewar 2411 */
#hvd .pk_txt {
    color: #4db3e3;
}

#hvd .bottom_info .pk_txt {
    color: #4fb0dd;
}

#hvd .approval .pk_txt {
    color: #4fb0dd;
}