@charset "UTF-8";

body {
    color: #333;
    font-family: 'メイリオ',
        Meiryo,
        'ヒラギノ角ゴ Pro W3',
        'Hiragino Kaku Gothic Pro',
        'MS Pゴシック',
        'Osaka',
        sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.for_sp {
    display: none;
}

header {
    background-image: linear-gradient(#fff, #ececec);
    border-top: solid 4px #0337a1;
    border-bottom: solid 4px #0337a1;
    margin-top: 15px;
}

header p {
    font-size: 12px;
    margin: 0px auto 0px;
    max-width: 1000px;
    padding-top: 5px;
}

.header_p {
    background-color: #e8e8e8;
    border-top: solid 1px #d1d1d1;
    margin-top: 10px;
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

h1 {
    color: #0337a1;
    font-family: "Noto Serif JP", serif;
    font-size: 40px;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: bold;
    line-height: 25px;
    padding-top: 20px;
}

h1 span {
    color: #333;
    font-size: 16px;
    font-weight: bold;
}

header ul {
    padding: 5px 0px 0px;
    text-align: end;
}

.color-change {
    color: #3366cc;
}

.icon {
    background-image: url(../images/pointMail_8Fa.png);
    background-repeat: no-repeat;
    background-position: center left;
    padding-left: 20px;
}

.icon:hover {
    color: #ff9903;
}

header li :last-of-type {
    margin-top: 10px;
}

.display-flex {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin: 45px auto 0px;
    max-width: 1000px;
}

input {
    border: solid 1px #767676;
    border-radius: 3px;
    padding: 3px 2px;
}

[type="submit"]:hover {
    background-color: #E5E5E5;
}

.text {
    width: 230px;
}

.button {
    padding: 1px 6px;
    margin: 10px 0px 15px;
}

aside {
    width: 230px;
}

#pc-global-nav li {
    background-image: url(../images/mainmenuBg_8Fa.png);
    background-size: cover;
    height: 45px;
    line-height: 45px;
    margin-bottom: 1px;
    padding: 0px 0px 0px 25px;
}

#pc-global-nav li:hover {
    background-image: url(../images/mainmenuBg_on_8Fa.png);
}

#pc-global-nav li a {
    display: block;
    width: 100%;
}

.ranking-title {
    background-image: url(../images/sideBg_8Fa.png);
    background-size: cover;
    display: flex;
    justify-content: start;
    align-items: center;
    height: 40px;
    margin: 25px 0px 2px;
}

.ranking-title img {
    width: 38px;
    margin-left: 15px;
}

.ranking ol {
    border: solid 1px #63bcdd;
    padding: 10px 5px 3px 5px;
}

.ranking li {
    border-top: solid 1px #63bcdd;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-wrap: wrap;
    line-height: 2;
    padding: 5px 5px 20px 0px;
}

.ranking ol li:nth-child(n+4) {
    padding: 5px 5px 5px 0px;
}

.ranking li a {
    color: #3366cc;
    text-decoration: underline;
    width: 180px;
}

.hov {
    color: #3366cc;
    text-decoration: underline;
}

.ranking li a:hover,
.site-information li a:hover,
.up-arrow:hover,
footer li:hover,
p a:hover,
.hov:hover {
    color: #57b6e7;
    text-decoration: underline;
}

#first-place {
    background-image: url(../images/icon_No1.gif);
    background-repeat: no-repeat;
    background-position: 30px 70px;
    border: none;
    padding: 5px 0px 30px 0px;
}

.ranking li img {
    padding-top: 3px;
}

.right-arrow {
    background-image: url(../images/point_8Fa.png);
    background-repeat: no-repeat;
    background-position: top 10px left;
    padding: 5px 0px 5px 20px;
}

.up-arrow {
    background-image: url(../images/returnTop_8Fa.png);
    background-repeat: no-repeat;
    background-position: center left;
    color: #3366cc;
    text-decoration: underline;
    padding-left: 20px;
    display: block;
    width: fit-content;
    margin: 25px 0px 0px auto;
}

.site-information h2 {
    background-color: #80ff80;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    margin: 5px 0px;
    padding: 5px;
    text-align: center;
    width: 230px;
}

.site-information li {
    background-color: #f0f8ff;
    border: solid 1px blue;
    margin: 5px 0px;
    padding: 8px;
    text-align: center;
}

.site-information li a,
p a {
    color: #3366cc;
    text-decoration: underline;
}

.external-website {
    margin-top: 20px;
}

.external-website img,
.free-dial img {
    width: 230px;
}

.shopinfo h2 {
    background-image: url(../images/sideBg_8Fa.png);
    background-size: cover;
    height: 40px;
    line-height: 40px;
    margin: 5px 0px 2px;
    text-align: center;
}

.shopinfo .border {
    border: solid 1px #63bcdd;
}

.shopinfo h3 {
    font-weight: bold;
    padding: 10px 10px 5px;
}

.shopinfo p,
.shopinfo dl {
    padding-left: 10px;
}

.shopinfo dl p {
    padding-left: 0px;
}

.shopinfo .color-change {
    text-decoration: underline;
}

.shopinfo dd img {
    display: block;
    margin: 0px auto 10px;
}

.QRcode {
    font-size: 14px;
    margin: 20px 0px;
    text-align: center;
}

/* ↓メイン共通部分 */
article {
    width: 750px;
}

.linear-gradient {
    background-image: linear-gradient(#fefefe, #ececec);
    border: solid 1px #d1d1d1;
    border-radius: 5px 5px 0px 0px;
    border-bottom: solid 5px #0337a1;
    font-size: 20px;
    margin: 30px 0px 16px;
    padding: 5px 5px 5px 20px;
    width: 750px;
}

.linear-gradient span {
    padding-left: 10px;
    text-transform: uppercase;
}

section .right-arrow {
    /* section内右矢印画像 */
    border-bottom: dotted 1px #ccc;
    margin-top: 25px;
}

section p {
    padding-left: 10px;
}

.padding-top8 {
    padding-top: 8px;
}

.padding-left10 {
    padding-left: 10px;
}

.blue-box {
    border: 1px solid #0000ff;
    margin: 20px 0px;
    padding: 3px;
}

.flex_sb_center {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.flex_sb_center p {
    padding-left: 0px;
}

.flex_sb_start,
.flex_forpc {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.ta_right {
    text-align: right;
}

.ta_center {
    text-align: center;
}

.flex_start_start {
    display: flex;
    justify-content: start;
    align-items: start;
    max-width: 750px;
}

.img_width img {
    width: 200px;
    padding-left: 20px;
}

.ta_right img {
    width: 120px;
}

.flex_start_start h3:first-of-type {
    padding: 30px 0px 10px;
}

.padding-bottom23 {
    padding-bottom: 23px;
}

.margin-top23 {
    margin-top: 23px;
}

.color_ff0000 {
    color: #ff0000;
}

.color_c11b1b {
    color: #c11b1b;
}

.color_and_bold {
    color: #ff0000;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.fs20_n_bold {
    font-size: 20px;
    font-weight: bold;
}

.margin8080 {
    margin: 8px 0px;
}

.menu-list_blue {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px auto;
    width: 90%;
}

.display-flex_small {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: start;
    padding: 16px 0px;
    width: 100%;
}

.display-flex_small .ta_right {
    width: 28%;
}

.premium-set_btn_orange a {
    border: 1px solid #ffc13f;
    display: flex;
    justify-content: start;
    align-items: center;
    text-align: center;
    height: fit-content;
    width: 100%;
}

.premium-set_btn_orange h4 {
    background: #ffc13f;
    color: white;
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 1.5px;
    padding: 15px;
    text-align: start;
    text-shadow: 1px 1px 0 #edb245, -1px -1px 0 #edb245,
        -1px 1px 0 #edb245, 1px -1px 0 #edb245,
        0px 1px 0 #edb245, 0 -1px 0 #edb245,
        -1px 0 0 #edb245, 1px 0 0 #edb245;
    width: 50%;
}

.premium-set_btn_orange h4 span {
    display: block;
    font-size: 20px;
    font-weight: 400;
    line-height: 20px;
    text-shadow: none;
    text-align: end;
}

.premium-set_btn_orange p {
    background: #fdfaf4;
    color: #bb7c0e;
    width: 50%;
}

#fv img {
    width: 100%;
    margin-bottom: 25px;
}

h3 {
    font-weight: bold;
}

#fv a {
    display: block;
    padding: 20px 0px;
}

article h3 {
    font-size: 20px;
}

.fw_bold {
    font-weight: bold;
}

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

.main-flex img {
    width: 270px;
}

#details .inner {
    text-align: center;
}

.price {
    color: #c11b1b;
    padding-top: 5px;
}

.cart {
    margin: 8px 0px 22px;
}

.special-offers {
    color: red;
    margin: 8px 0px 45px;
    text-align: center;
}

.members_btn {
    text-align: center;
}

.members_btn img {
    padding: 0px 5px;
}

/* ↓ここからそれぞれ */
#about_vitalmore .blue-box img {
    width: 40%;
}

#recommend h3 {
    margin-top: 30px;
}

#recommend .display-flex:not(:last-child) {
    border-bottom: 1px solid #7ccc7c;
    padding-bottom: 30px;
}

#recommend-point .fw_bold {
    padding: 23px 0px;
}

#recommend-point img {
    width: 100%;
}

#recommend-point img:last-of-type {
    padding: 5px 0px;
}

#recommend-point .padding-bottom23:last-child {
    border-bottom: 1px solid #8c81ff;
}

.display-flex_small h3 {
    padding: 10px 10px 10px 0px;
}

#special-price .flex_sb_center p {
    padding: 10px 0px 0px 0px;
    width: 50%;
}

#special-price .flex_sb_center img {
    width: 100%;
}

#special-price .flex_sb_center p:last-of-type {
    padding-left: 5px;
}

#special-price .flex_forpc p {
    padding: 30px 0px 45px 0px;
}

#dl_n_calender dl {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 10px;
    width: 390px;
}

#dl_n_calender dt {
    background: url(../images/point_8Fa_02.png) center left no-repeat;
    border-bottom: 1px dotted #cccccc;
    padding: 5px 15px;
    width: 25%;
}

#dl_n_calender dd {
    border-bottom: 1px dotted #cccccc;
    padding: 5px 0px;
    width: 75%;
}

#dl_n_calender .blue-box {
    height: 360px;
}

#dl_n_calender h3 {
    padding: 10px;
}

#dl_n_calender .blue-box iframe {
    width: 340px;
}

#QAdetails img {
    width: 70%;
}

#dl_text_flex1 .flex_start_start,
#dl_text_flex2 .flex_start_start,
#dl_text_flex3 .flex_start_start {
    border-bottom: dotted 1px #ccc;
    ;
    flex-wrap: wrap;
    padding: 8px;
    width: 100%;
}

#dl_text_flex1 dt,
#dl_text_flex2 dt,
#dl_text_flex3 dt {
    font-weight: bold;
    padding-top: 8px;
    width: 21%;
}

#dl_text_flex1 dt:not(:first-of-type),
#dl_text_flex2 dt:not(:first-of-type),
#dl_text_flex3 dt:not(:first-of-type) {
    border-top: dotted 1px #ccc;
}

#dl_text_flex1 dd,
#dl_text_flex2 dd,
#dl_text_flex3 dd {
    padding: 8px;
    width: 79%;
}

#dl_text_flex1 dd:not(:first-of-type),
#dl_text_flex2 dd:not(:first-of-type),
#dl_text_flex3 dd:not(:first-of-type) {
    border-top: dotted 1px #ccc;
}

/* #point {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
}

#point img {
    width: 280px;
}

.padding-top {
    padding-top: 8px;
}

#intake h3,
#set h3,
#product h3 {
    margin: 48px 0px 8px;
}

#intake p,
#set p {
    margin-bottom: 23px;
    padding-left: 10px;
}

#date .entire {
    border-top: dotted 1px #d9d8d8;
    margin: 48px 0px 5px;
}

.entire th {
    background-color: #e8ffe4;
    border-bottom: dotted 1px #d9d8d8;
    padding: 5px 16px 5px 10px;
    vertical-align: middle;
    white-space: nowrap;
}

.entire td {
    border-bottom: dotted 1px #d9d8d8;
    padding: 5px 15px 5px 8px;
}

.entire table {
    margin-bottom: 30px;
}

.entire table td {
    padding: 10px 120px 5px 8px;
}
 */
/* ここまで */

footer {
    background-image: url(../images/footerBg_8Fa.png);
    background-position: top left;
    background-repeat: repeat-x;
    margin-top: 40px;
    padding-top: 45px;
    text-align: center;
}

footer p {
    background-color: #0337a1;
    color: #fff;
    margin-top: 5px;
    padding-top: 8px;
    padding-bottom: 8px;
}

footer ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

footer li {
    color: #3366cc;
    padding: 15px 20px;
    text-decoration: underline;
}

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

    .for_pc,
    .flex_forpc {
        display: none;
    }

    .for_sp {
        display: block;
        width: 350px;
    }

    .ranking li a:hover,
    .site-information li a:hover,
    .up-arrow:hover,
    footer li:hover,
    p a:hover,
    .hov {
        color: #3366cc;
        text-decoration: underline;
    }

    .main-flex,
    #point {
        display: block;
    }

    /* ハンバーガー↓ */
    .menu-trigger {
        width: 50px;
        height: 50px;
        position: fixed;
        top: 20px;
        right: 0px;
        z-index: 3;
        outline: none;
    }

    .menu-trigger span {
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 50%;
        width: 30px;
        /* 線の幅 */
        height: 3px;
        /* 線の太さ */
        border-radius: 2px;
        /* 線淵丸める */
        background-color: #0337a1;
        /* 線色 */
        transform: translate(-50%, -50%);
    }

    .menu-trigger span:nth-of-type(1) {
        top: 14px;
    }

    .menu-trigger span:nth-of-type(2) {
        top: 27px;
    }

    .menu-trigger span:nth-of-type(3) {
        top: 39px;
    }

    .menu-trigger.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 40%;
    }

    .menu-trigger.active span:nth-of-type(2) {
        opacity: 0;
    }

    .menu-trigger.active span:nth-of-type(3) {
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 40%;
    }

    #sp-global-nav {
        position: fixed;
        z-index: 999;
        top: -120%;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 95);
        transition: all 0.6s;
    }

    #sp-global-nav.panelactive {
        top: 0;
        z-index: 2;
    }

    #sp-global-nav .main {
        position: absolute;
        z-index: 999;
        top: 10%;
        left: 50%;
        transform: translate(-50%, -10%);
        text-align: start;
    }

    #sp-global-nav .main a {
        background-image: url(../images/mainmenuBg_8Fa.png);
        background-repeat: no-repeat;
        background-position: center;
        margin: 10px 0px 1px;
        padding: 10px 20px;
        width: 230px;
    }

    #sp-global-nav li a {
        display: block;
        margin-top: 0px;
    }

    #sp-global-nav .sub {
        position: absolute;
        z-index: 999;
        top: 83%;
        /* left: 20%; */
        left: 50%;
        transform: translate(-50%, -70%);

        /* width: 230px; */
    }

    #sp-global-nav .sub li {
        background-color: #f0f8ff;
        border: solid 1px #333;
        border-radius: 5px;
        margin: 10px 0px;
        padding: 10px 20px;
        text-align: left;
        width: 230px;
    }

    /* ハンバーガーここまで↑ */
    /* ヘッダー固定部↓ */
    .header-flex {
        display: block;
        padding: 0px 10px;
    }

    header p {
        padding: 5px 10px 0px;
    }

    h1 {
        font-size: 24px;
    }

    h1 span {
        font-size: 14px;
    }

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

    header .for_sp img:first-of-type {
        width: 50px;
        padding-right: 10px;
    }

    #fixed {
        background: url(../images/cart_icon.png) no-repeat 58px center;
        background-size: 35px;
        background-color: #0337a1;
        border-radius: 10px;
        color: #fff;
        font-size: 24px;
        padding: 10px 0px 10px 98px;
        position: fixed;
        left: 50%;
        bottom: 20px;
        transform: translateX(-50%);
        z-index: 1;
        width: 300px;
    }

    #fixed img {
        width: 300px;
    }

    /* ヘッダー固定部↑*/
    /* ↓メイン部分 */

    article {
        width: 350px;
        margin: 0 auto;
    }

    .linear-gradient {
        width: 350px;
    }

    .flex_start_start,
    .flex_sb_center,
    .flex_sb_start,
    .premium-set_btn_orange a {
        display: block;
    }

    #fv img {
        background-color: #e1eaf1;
        height: 100px;
        object-fit: cover;
        margin-bottom: 0px;
    }

    #fv .for_sp {
        background-color: #e1eaf1;
        color: #414566;
        text-shadow: #fff 1px 1px;
        margin-bottom: 23px;
    }

    section p {
        padding-right: 10px;
    }

    /* それぞれ↓ */
    #about_vitalmore .flex_start_start img {
        width: 100%;
    }

    #about_vitalmore .flex_start_start h3 {
        padding: 10px;
    }

    #nano_pre .blue-box {
        border: none;
    }

    #nano_pre .blue-box img {
        width: 250px;
        margin: 30px 0px 10px;
    }

    #nano_pre .pad_free img {
        padding: 30px 0px 0px;
    }

    #recommend .display-flex,
    .display-flex_small {
        display: block;
        margin-top: 16px;
        text-align: center;
    }

    #recommend .ta_right {
        text-align: center;
    }

    #recommend-point .ta_right p {
        text-align: left;
    }

    #recommend-point .ta_center p,
    #recommend-point .ta_center h3 {
        text-align: left;
    }

    #recommend-point img {
        width: 80%;
        padding-bottom: 23px;
    }

    .menu-list_blue {
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
    }

    .menu-list_blue li {
        padding: 8px 0px;
        width: 45%;
    }

    .display-flex_small {
        padding: 0px;
    }

    .display-flex_small .ta_right {
        border-bottom: 1px solid #ccc;
        margin: 0px 0px 30px;
        text-align: center;
        width: 100%;
    }

    .display-flex_small .ta_right a img {
        padding-bottom: 20px;
    }

    .premium-set_btn_orange h4,
    .premium-set_btn_orange p {
        width: 100%
    }

    #special-price .flex_sb_center p {
        width: 100%;
    }

    #special-price .flex_forpc p {
        text-align: center;
        padding: 10px 0px 5px 0px;
    }

    #special-price .flex_sb_center p:last-of-type {
        padding-left: 0px;
    }

    #special-price .for_sp p {
        padding: 0px;
    }

    #special-price .flex_forsp {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0px;
    }

    #special-price .for_sp img {
        width: 100%;
    }

    #dl_n_calender dl {
        padding: 5px;
        width: 350px;
    }

    #dl_n_calender dt {
        padding: 5px 7px;
        width: 23%;
    }




    #QAdetails img {
        width: 100%;
    }

    #dl_text_flex1 dt,
    #dl_text_flex2 dt,
    #dl_text_flex3 dt {
        background-color: #fffbdf;
        width: 350px;
    }

    #dl_text_flex1 dt:not(:first-of-type),
    #dl_text_flex2 dt:not(:first-of-type),
    #dl_text_flex3 dt:not(:first-of-type) {
        border: none;
        margin-top: 30px;
    }

    #dl_text_flex1 dd,
    #dl_text_flex2 dd,
    #dl_text_flex3 dd {
        width: 350px;
    }

    #dl_text_flex1 dd:not(:first-of-type),
    #dl_text_flex2 dd:not(:first-of-type),
    #dl_text_flex3 dd:not(:first-of-type) {
        border: none;

    }

    /*  */

    /* .main-flex {
        text-align: center;
    }

    #point img {
        margin: 48px auto 8px;
        width: 350px;
    }

    .members_btn img {
        width: 145px;
    }

    .entire tr,
    .entire td {
        display: block;
    }

    .entire th {
        width: 350px;
    }

    .entire td {
        padding-bottom: 15px;
    }

    .entire table {
        margin-bottom: 10px;
    } */

    /*  */
    form {
        text-align: center;
        margin-top: 60px;
    }

    .text {
        font-size: 24px;
        width: 300px;
    }

    .button {
        font-size: 20px;
    }

    .ranking-title {
        height: 60px;
        justify-content: center;
        font-size: 24px;
    }

    .ranking-title img {
        margin: 0px;
    }

    .ranking li {
        width: fit-content;
        margin: 0 auto;
    }

    .ranking li a {
        width: 216px;
    }

    .site-information h2 {
        width: 350px;
        padding: 12px;
        margin-top: 40px;
    }

    .site-information li {
        margin: 10px 0px;
        padding: 16px;
    }

    .external-website img,
    .free-dial img {
        width: 350px;
        margin-top: 10px;
    }

    .shopinfo h2 {
        height: 62px;
        font-size: 24px;
        line-height: 62px;
        margin-top: 40px;
    }

    .shopinfo h3 {
        padding: 10px 20px 5px;
    }

    .shopinfo br {
        display: none;
    }

    .shopinfo p,
    .shopinfo dl {
        padding-left: 20px;
    }

    .padding-bottom {
        padding-bottom: 10px;
    }

    .shopinfo dd img {
        width: 200px;
    }

    .QRcode {
        font-size: 24px;
        margin: 60px 0px;
    }

    .QRcode img {
        width: 300px;
    }

    footer ul {
        display: block;
        padding-bottom: 100px;
    }

    footer li {
        text-align: start;
        padding: 5px 0px 0px 10px;
    }
}