@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:not(.cartjs_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 {
    appearance: auto;
    border: solid 1px #767676;
    border-radius: 3px;
    padding: 3px 2px;
}

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

#formWrap input,
#formWrap textarea {
    appearance: auto;
    border: solid 1px #767676;
    border-radius: 3px;
    font-size: 16px;
    padding: 3px 2px;
    margin: 3px;
}

#formWrap select {
    appearance: auto;
    border: solid 1px #767676;
    border-radius: 3px;
    font-size: 16px;
    margin: 3px;
}

.submit_btn input {
    width: 25%;
}

.text {
    width: 230px;
}

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

.checkbtn {
    border: solid 1px #767676;
    border-radius: 3px;
    font-size: 16px;
    padding: 3px 2px;
    margin: 3px;
}

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

#details h2 {
    padding-left: 20px;
    text-transform: uppercase;
}

#details h2 span {
    padding-left: 10px;
}

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

#details .right-arrow {
    font-weight: bold;
}

.color009900 {
    color: #009900;
}

/*  */
#formWrap {
    max-width: 750px;
    margin: 30px auto 0px;
    color: #333;
}

.color_ff0000 {
    color: #ff0000;
}

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

#contact_form,
#credit_form,
#monitor_form {
    width: 100%;
    margin: 0 auto 30px;
    border-collapse: collapse;
}

#contact_form tr,
#credit_form tr,
#monitor_form tr {
    border: 1px dotted #d9d8d8;
}

#contact_form td,
#credit_form th,
#credit_form td {
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    padding: 5px 15px 5px;
    vertical-align: middle;
}


.q_number {
    font-size: 18px;
}

.fw_bold {
    font-weight: bold;
    padding-top: 15px;
}

.padding-left10 {
    padding: 10px;
}

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

.fields ul {
    padding: 8px 0px;
}

.fields li {
    margin: 5px 0px;
}

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

#formWrap .margin-right16 {
    margin-right: 16px;
}

.submit_btn {
    margin: 16px 0px 30px;
    text-align: center;
}

/* お問い合わせ↓ */
#contact_form .q_number {
    background-color: #d3d5fc;
}

#contact_form .question {
    background-color: #defaf8;
}

#contact_form .fields {
    background-color: #ffffca;
}

/* クレジット↓ */
#credit_form th {
    background-color: #e8ffe4;
    padding: 15px;
}

#credit_form .question {
    width: 28%;
}

#details p:not(#contact_form p) {
    padding-bottom: 23px;
}

/*  */
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 {
        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%);
    }

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

    #formWrap {
        max-width: 350px;
    }

    #formWrap th {
        display: none;
    }

    .color_ff0000 {
        padding-left: 5px;
    }

    #contact_form,
    #credit_form {
        border-bottom: 1px solid #333;
    }

    .q_number,
    .question,
    .fields {
        width: auto;
        display: block;
        text-align: left;
    }

    #credit_form .question {
        width: 100%;
    }

    #contact_form .q_number,
    #credit_form .q_number {
        padding: 10px 15px 0px;
    }

    #contact_form .fields,
    #credit_form .fields {
        padding: 10px 15px 30px;
    }

    .q_number {
        border-top: 1px solid #333;
    }

    #contact_form .q_number {
        background-color: #defaf8;
    }

    #formWrap form input[type="text"]:not(.fit input[type="text"]),
    #formWrap form textarea {
        width: 100%;
        margin: 0px auto;
        padding: 5px;
        font-size: 110%;
        display: block;
    }

    #formWrap form input[type="submit"],
    #formWrap form input[type="reset"],
    #formWrap form input[type="button"] {
        display: block;
        width: 70%;
        height: 40px;
        margin: 10px auto;
    }

    [type="submit"]:hover,
    [type="reset"]:hover,
    .checkbtn :hover {
        background-color: #f0f0f0;
    }

    /*  */
    .for_sp 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;
    }

}