@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,
h4 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,
h4 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カートのデザイン↓ */

.cart {
    text-align: center;
    width: 80%;
}

.cart p {
    padding-bottom: 10px;
    padding-right: 10px;
}

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


.cart dt {
    padding-right: 10px;
}

.cart th {
    background-color: #e8ffe4;
    padding: 5px 30px;
    white-space: nowrap;
    flex-wrap: wrap;
}

.cart 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;
}

section .right-arrow span {
    font-weight: normal;
    padding-right: 10px;
}

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

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

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

section p {
    padding-left: 10px;
}

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

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

/* 共通クラス↓ */
.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;
}

.color009900 {
    color: #009900;
}

.color400080 {
    color: #400080;
    font-size: 20px;
    margin: 0px 0px 8px;
}

.color_ff0000 {
    color: #ff0000;
}

.color_c11b1b {
    color: #c11b1b;
}

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

.decimal {
    list-style: decimal;
    padding-left: 20px;
}

.disc {
    list-style: disc;
    padding-left: 20px;
}

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

.flex_sb_end {
    display: flex;
    justify-content: space-between;
    align-items: end;
}

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

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

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

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

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

.fw_bold {
    font-weight: bold;
}

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

.important {
    color: #ff0000;
    font-weight: bold;
    padding-right: 8px;
}

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

.ta_center {
    text-align: center;
}

.ta_right {
    text-align: right;
}

.list-image li {
    background: url(../images/point_8Fa_02.png) no-repeat left 16px;
    border-bottom: 1px dotted #cccccc;
    padding: 8px 10px;
}

/* プレミアムセットボタン↓ */
.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;
}


/* 商品ページ共通↓ */
.border_dott {
    border-bottom: 1px dotted #ccc;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-wrap: wrap;
    padding: 0px 10px;
    width: 100%;
}

.border_dott dt {
    font-weight: bold;
    padding: 10px 0px 5px 0px;
    width: 25%;
}

.border_dott dd {
    padding: 10px 0px 5px 0px;
    width: 75%;
}

.border_dott dt:not(:first-of-type),
.border_dott dd:not(:first-of-type) {
    border-top: 1px dotted #ccc;
}

.cart select {
    -webkit-appearance: auto;
    /* 1 */
    appearance: auto;
    color: inherit;
    font: menu;
    border: 1px solid #767676;
    border-radius: 3px;
    padding: 3px 2px;
}

.flex_center_center img {
    width: 300px;
}

.members_btn {
    margin: 23px auto 48px;
    text-align: center;
}

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

.flex_start_start {
    margin-top: 30px;
}

.flex_start_start img {
    width: 300px;
}

.flex_start_start .inner {
    padding-left: 10px;
    margin-bottom: 23px;
    width: 60%;
}

.flex_start_start h3 {
    margin-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;
}

.border-none td {
    border: none;
    padding-bottom: 0px;
}

#item_info .border-bottom {
    border-color: #8c80ff;
}

#item_info .flex_start_center img {
    padding-right: 16px;
}

#item_comparison .table_scroll th:not(.color_and_bold):not(.fw_bold),
#details .table_scroll th:not(.ta_center) {
    font-weight: normal;
}

#item_comparison .table_scroll table,
#details .table_scroll table {
    border: 1px solid #0000ff;
    border-collapse: separate;
    width: 100%;
}

#item_comparison .table_scroll th,
#details .table_scroll th {
    border: 1px solid #0000ff;
    padding: 10px;
    vertical-align: middle;
}

#item_comparison .table_scroll td,
#details .table_scroll td {
    border: 1px solid #0000ff;
    padding: 10px;
    vertical-align: middle;
}

#item_profile .text-deco,
#potential .text-deco {
    color: #1fa320;
    font-family: "Noto Serif JP", serif;
    font-size: 20px;
    font-weight: 900;
}

.profile_table tr,
.blue-table tr {
    border: 1px solid #0000ff;
}

.profile_table th,
.profile_table td,
.blue-table th,
.blue-table td {
    border: 1px solid #0000ff;
    font-weight: normal;
    padding: 16px;
    vertical-align: middle;
}

.text_line {
    text-decoration-line: underline;
}

.bc_ffe1e1 {
    background-color: #ffe1e1;
}

/* ここまで */

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) {
    section p {
        padding-right: 10px;
    }

    .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,
    h4 a:hover {
        color: #3366cc;
        text-decoration: underline;
    }

    /* ハンバーガー↓ */
    .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;
    }

    .border_dott {
        display: block;
    }

    .border_dott dt,
    .border_dott dd {
        width: 100%;
    }

    .border_dott dd:not(:first-of-type) {
        border: none;
    }

    .cart {
        width: 100%;
    }

    .linear-gradient {
        width: 350px;
    }

    .flex_sb_center,
    .flex_sb_start,
    .flex_start_start,
    .flex_start_center,
    .flex_center_center,
    .flex_sb_end,
    .flex_start_end {
        display: block;
    }

    .flex_center_center img,
    .img-box img {
        width: 100%;
    }

    .flex_start_start img {
        margin: 0px auto 8px;
        width: 100%;
    }

    .flex_start_start .blue-box img {
        margin-bottom: 0px;
    }

    .flex_start_start .inner {
        padding-left: 0px;
        width: 100%;
    }

    .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;
    }
    .entire table .for_pc {
        border: none;
        padding: 0;
    }
    
    .border-none td {
        border-bottom: dotted 1px #d9d8d8;
        padding-bottom: 5px;
    }

    .premium-set_btn a {
        display: block;
    }

    .premium-set_btn p {
        padding-right: 0px;
        margin: auto;
    }

    .premium-set_btn .wrap {
        justify-content: center;
    }

    .ta_right {
        text-align: center;
    }

    /* 横並びスクロール */
    .table_scroll {
        position: relative;
        overflow-x: auto;
        white-space: nowrap;
    }

    .scroll-hint {
        position: absolute;
        top: 50%;
        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;
    }

    #item_info img,
    #component-content_list img {
        width: 100%;
    }

    #item_info .flex_start_center img {
        display: block;
        margin: 0px auto 10px;
        width: 80%;
    }

    #item_quality img,
    #date img,
    #item_profile img,
    #composition img,
    #item_comparison 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 0px 0px 10px;
    }

}