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

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

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

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

/* ここからそれぞれ↓b */
#page_good-b .table_scroll table {
    border: 1px solid #595959;
    border-collapse: collapse;
}

#page_good-b .table_scroll th {
    border-bottom: 1px dotted #d9d8d8;
    border-left: 1px solid #595959;
    border-collapse: collapse;
    padding: 10px;
    vertical-align: middle;
}

#page_good-b .table_scroll th:not(tr:first-of-type th) {
    font-weight: normal;
}

#page_good-b .table_scroll tr:first-of-type {
    background: #e8ffe4;
}

#page_good-b .table_scroll td {
    border-bottom: 1px dotted #d9d8d8;
    border-left: 1px solid #595959;
    border-collapse: collapse;
    padding: 10px;
    vertical-align: middle;
}


/* ここからそれぞれ↓f */
#details .hov li {
    font-weight: bold;
    margin: 23px 0px 23px 10px;
}

#details .color008000_n_bold {
    margin-top: 23px;
}

#details .color008000_n_bold li {
    padding-bottom: 23px;
}

#contents ol {
    list-style: auto;
    padding-left: 30px;
    padding-bottom: 23px;
}

#contents ul {
    list-style: auto;
    padding-left: 40px;
}

#contents h2 {
    font-size: 20px;
    font-weight: bold;
}

#contents .color_and_bold {
    padding-right: 10px;
}

#contents p {
    padding-left: 0px;
}

#first-explanation {
    border-top: 1px solid #8b80ff;
    border-bottom: 1px solid #8b80ff;
}

#first-explanation img {
    width: 350px;
}

.yellow-box {
    border: 1px solid #0000ff;
    background-color: #ffd88e;
    margin: 0px 0px 30px auto;
    width: 610px;
}

#p1-2 .flex_sb_start img {
    margin: 23px 0px;
    height: 250px;
    width: auto;
}

#p2 .flex_sb_center img,
#p2-4 .flex_sb_center img {
    margin: 23px 0px;
    width: 360px;
}

#p2-2 .flex_sb_start img {
    padding-bottom: 8px;
    width: 380px;
}

#p2-2 .inner {
    width: 350px;
}

#p2-5 img {
    width: 100px;
    margin-bottom: 23px;
}

#p2-5 li {
    padding-bottom: 5px;
}

#p2-5-5 img {
    margin-bottom: 23px;
    width: 640px;
}

#p2-5-5 .border-bottom,
#p-m .border-bottom {
    border-bottom: 1px solid #8b80ff;
    margin-bottom: 23px;
}

#p3-3 dl {
    margin: 23px 10px;
}

#p3-3 .paragraph {
    margin-top: 23px;
}

#p3-3 .paragraph p {
    padding-bottom: 23px;
}

#p-m img,
#p-m .flex_start_start a {
    margin: 23px 0px;
    width: 100%;
}

.pad-free {
    padding-right: 16px;
}

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

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;
        white-space: nowrap;
    }

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

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

    /* メイン共通部分↓ */
    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%;
    }

    /* それぞれ↓ */
    #contents ol {
        padding-left: 20px;
    }

    #contents ul {
        padding-left: 10px;
    }

    #contents ul li {
        padding-bottom: 10px;
    }

    #first-explanation img {
        margin-top: 20px;
    }

    .yellow-box {
        width: 350px;
    }

    #p1-2 .flex_sb_start img,
    #p2 .flex_sb_center img,
    #p2-2 .flex_sb_start img,
    #p2-3 img,
    #p2-4 .flex_sb_center img,
    #p2-5-5 img {
        width: 350px;
        height: auto;
    }

    .ta_center {
        text-align: start;
    }

    /* スマホナビからフッター↓ */
    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;
    }

}