@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,
.scroll-hint {
    display: none;
}

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

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;
    /* overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden; */
}

#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;
}

.ranking li a:hover,
.site-information li a:hover,
.up-arrow:hover,
footer li:hover,
p a:hover,
.question a:hover,
.answer a:hover,
#type_explain a:hover,
.small-menu li a:hover,
.hov a:hover,
#contents a: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,
.question a,
.answer a,
#type_explain a,
.small-menu li a,
.hov a,
#contents 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;
}

/* javaカートのデザイン↓ */
#product th,
#product2 th,
#product3 th {
    background-color: #e8ffe4;
    padding: 5px 30px;
    white-space: nowrap;
}

#product td,
#product2 td,
#product3 td {
    padding: 5px 10px;
    vertical-align: middle;
    white-space: nowrap;
}

/* メイン共通部分↓ */

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;
    padding: 5px 20px;
    width: 750px;
}

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


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

h3 {
    font-weight: bold;
    margin: 25px 0px 15px 0px;
}

h4 {
    font-weight: bold;
    margin: 16px 0px 8px;
}

h5 {
    padding: 23px 0px 8px;
}

section p {
    padding-left: 10px;
}

.small-menu {
    display: flex;
    justify-content: start;
    align-items: start;
    font-size: 14px;
    padding-bottom: 10px;
}

.small-menu li:not(:first-of-type) {
    padding-left: 5px;
}

/* 青い箱のテーブル↓ */
.blue-box-table,
.blue-box-table td,
.blue-box-table th {
    border: 1px solid #0000ff;
    border-collapse: collapse;
    margin: 23px 10px;
    white-space: nowrap;
}

.blue-box-table td,
.blue-box-table th {
    padding: 5px 10px;
}

.blue-box-table td {
    width: 45%;
}

/* 共通クラス↓ */
.border-bottom {
    border-bottom: solid 1.5px #ffcc34;
    padding-bottom: 23px;
}

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

.color008000_n_bold {
    color: #008000;
    font-weight: bold;
}

.color_ff0000 {
    color: #ff0000;
}

.color_and_bold {
    color: #ff0000;
    font-weight: bold;
}

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

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

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

.flex_start_end {
    display: flex;
    justify-items: start;
    align-items: end;
}

.fw_bold {
    font-weight: bold;
}

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

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

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

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

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

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

.point-hands {
    background: url(../images/img_k038.gif) no-repeat left top;
    background-size: 30px;
    padding-left: 35px;
}


/* プレミアムセットボタン↓ */
.premium-set_btn a {
    display: flex;
    justify-content: start;
    align-items: stretch;
    text-align: center;
    height: fit-content;
}

.premium-set_btn h4 {
    background: #66ff66;
    border: solid 2px #333;
    color: white;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 1.5px;
    margin: 0px;
    padding: 15px;
    text-shadow: 1px 1px 0 #555, -1px -1px 0 #555,
        -1px 1px 0 #555, 1px -1px 0 #555,
        0px 1px 0 #555, 0 -1px 0 #555,
        -1px 0 0 #555, 1px 0 0 #555;
}

.premium-set_btn p {
    font-family: "Noto Serif JP", serif;
    font-weight: bold;
    padding-left: 0px;
}

.premium-set_btn .wrap {
    border: solid 1px #76a3ff;
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: 14px;
    padding: 10px;
}

.premium-set_btn a {
    color: #333;
    text-decoration: none;
    margin-bottom: 23px;
}

.red-box {
    border: 1.5px solid #ff0000;
}

.ta_center {
    text-align: center;
}

/* カート周りそれぞれかも？↓*/
#product img,
#product2 img {
    width: 250px;
}

#product3 img {
    width: 120px;
}

#product .flex_sb_center,
#product2 .flex_sb_center {
    padding-bottom: 48px;
}

#product dl,
#product2 dl,
#product3 dl {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-wrap: wrap;
    padding-bottom: 16px;
    width: 385px;
}

#product dt,
#product2 dt {
    width: 55%;
}

#product dd,
#product2 dd {
    width: 45%;
}

#product3 dt {
    width: 30%;
}

#product3 dd {
    width: 70%;
}

#product3 .flex_sb_start {
    flex-wrap: wrap;
    width: 100%;
}

#product3 .flex_sb_start .inner {
    margin: 23px 0px 32px;
    text-align: center;
    width: 50%;
}

section p:not(.for_sp p) {
    padding-bottom: 23px;
}

/* ここからそれぞれ↓徹底比較 */
#first-view .text-deco {
    font-size: 24px;
    font-family: 'Noto Serif JP';
    color: #0a9c0b;
    font-weight: 900;
    padding: 24px 10px 0px;
    letter-spacing: 1.2px;
}

#first-view img {
    width: 100%;
}

#first-view .border-bottom {
    border-color: #8c81ff;
}

#Suspicion_of_glucose .red-box p,
#Suspicion_of_glucose .flex_start_start {
    margin: 23px 16px;
    padding: 0px;
}

#Suspicion_of_glucose dt {
    white-space: nowrap;
}

#comparison-a .size-change img {
    width: 100%;
}

#comparison_menu .hov {
    list-style: disc;
    margin: 16px;
}

.comparison_table {
    border: 1px solid #0000ff;
    border-collapse: collapse;
    width: 100%;
}

.comparison_table th {
    border: 1px solid #0000ff;
    border-collapse: collapse;
    font-weight: normal;
    padding: 5px 8px;
    vertical-align: middle;
}

.comparison_table th:first-of-type {
    width: 25%;
}

.comparison_table .color_and_bold {
    font-weight: bold;
}

.comparison_table td {
    border: 1px solid #0000ff;
    border-collapse: collapse;
    padding: 5px 8px;
    vertical-align: middle;
    width: 37%;
}

#fucoidan-comparison .comparison_table td {
    vertical-align: middle;
    width: 25%;
}

.comparison_table td:first-of-type:not(.normal),
.comparison_table .bc_n_bold {
    background-color: #d7f2ff;
    font-weight: bold;
}

#comparison-b img {
    padding: 16px 0px;
    width: 600px;
}

#comparison-c .pad-free,
#comparison-f .pad-free {
    padding-right: 10px;
}

#fucoxanthin .text-deco {
    color: #cc3301;
    font-family: 'Noto Serif JP';
    font-size: 18px;
    font-weight: 900;
    margin: 0px 10px 8px;
}

#fucoxanthin .pad-free {
    padding-bottom: 0px;
}

#fucoxanthin ul {
    font-weight: bold;
    list-style: disc;
    padding-left: 30px;
}

#fucoxanthin img {
    margin: 8px 0px;
    width: 70px;
}

#fucoxanthin .blue-box {
    margin-top: 0px;
}

/* フッターから共通↓*/

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 {
        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,
    .question a:hover,
    .answer a:hover,
    #type_explain a:hover,
    .small-menu li a:hover,
    .hov a:hover,
    #contents a:hover {
        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;
    }

    /* 横スクロールテーブル↓ */
    .table_scroll {
        position: relative;
        overflow-x: auto;
    }

    .table_scroll th,
    #fucoidan-comparison .table_scroll {
        white-space: nowrap;
    }

    .blue-box-table {
        border-collapse: collapse;
    }

    .scroll-hint {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 10px;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        font-weight: 700;
        line-height: 1.4;
        display: none;
        animation: scroll-hint-animation 2s infinite ease;
    }

    @keyframes scroll-hint-animation {
        0% {
            transform: translate(-50%, -50%);
        }

        50% {
            transform: translate(-40%, -50%);
        }

        100% {
            transform: translate(-50%, -50%);
        }
    }

    .scroll-hint--show {
        display: block;
    }

    /* メイン共通部分↓ */
    article {
        max-width: 350px;
        margin: 0 auto;
    }

    section p {
        padding-right: 10px;
    }

    .flex_sb_center,
    .flex_sb_start,
    .flex_start_start {
        display: block;
    }

    .linear-gradient {
        width: 350px;
    }

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

    .members_btn img {
        width: 145px;
    }

    .premium-set_btn a {
        display: block;
    }

    #product .flex_sb_center {
        flex-direction: column-reverse;
    }

    #product2 .flex_sb_center,
    #product3 .flex_sb_start {
        display: block;
    }

    #product dl,
    #product2 dl,
    #product3 dl {
        width: 350px;
    }

    #product3 .flex_sb_start .inner {
        width: 100%;
    }

    /* それぞれ↓ */
    #first-view .text-deco {
        font-size: 22px;
    }

    #comparison-b img {
        width: 100%;
    }


    /* スマホナビからフッター↓ */
    form:not(.cartjs_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 10px 0px 10px;
    }

}