@charset "utf-8";

/* ------ common ------ */

* {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5% !important;
    overflow-y: scroll
}

body {
    color: #333333 !important;
    font: 100 1.5rem/1.6 'Noto Serif JP', "Yu Mincho", YuMincho, serif !important;
    font-weight: normal !important;
    background: #EDFFC9;
    -webkit-text-size-adjust: 100%
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    font-size: 100%
}

img {
    max-width: 100%
}

ul {
    list-style: none
}

table {
    border-spacing: 0;
    border-collapse: collapse
}

form label {
    cursor: pointer
}

input:focus,
select:focus,
textarea:focus {
    outline: none
}

a {
    color: #000 !important;
    text-decoration: none !important;
    transition: all 0.3s ease-in-out
}

a:hover,
a:active,
a:focus {
    color: #000 !important;
    outline: none !important
}

a img {
    border: none
}

.cf:after {
    content: '';
    display: block;
    clear: both
}

::-moz-selection {
    color: #333;
    background: #000
}

::selection {
    color: #333333;
    background: #000
}

::-webkit-input-placeholder {
    color: #999
}

::-moz-placeholder {
    color: #999;
    opacity: 1
}

:-ms-input-placeholder {
    color: #999
}


/* ------ header ------ */

header {
    width: 100%;
    min-width: 1200px;
    height: 80px;
    margin: 0 !important;
    border: none !important;
    background: #ffffff6e;
    position: fixed !important;
    top: 0;
    z-index: 100
}

header .inner {
    width: 100% !important;
    height: 80px;
    font-size: 0;
    padding: 0 !important;
    margin: 0 auto !important;
    position: relative
}

header .inner::after {
    content: "";
    width: 100%;
    height: 4px;
    margin: auto;
    /* background: url("../img/header_line.png") repeat; */
    position: absolute;
    bottom: -4px
}

header .logo {
    width: 240px;
    height: 119px;
    text-align: center;
    margin: auto;
    /* background: url("../img/logo_min.png") no-repeat; */
    background-size: cover;
    position: absolute;
    right: 0;
    bottom: -119px;
    left: 0;
    z-index: 100
}

header .logo img {
    width: 90px;
    position: relative;
    top: -50px
}



/* menu trigger */

header .menuBtn {
    width: 80px;
    height: 80px;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    z-index: 100
}

header .menuTrigger,
header .menuTrigger span {
    transition: all .4s;
    display: inline-block
}

header .menuTrigger .menuIcon {
    width: 30px;
    height: 25px;
    position: relative;
    top: 27.5px;
    display: inline-block
}

header .menuTrigger span {
    width: 100%;
    height: 2px;
    background: #EC6800;
    position: absolute;
    left: 0
}

header .menuTrigger span:nth-child(1) {
    top: 0
}

header .menuTrigger span:nth-child(2) {
    top: 11px
}

header .menuTrigger span:nth-child(3) {
    bottom: 0
}

header .menuTrigger span:nth-child(1) {
    animation: menu-bar01 .75s forwards
}

header .menuTrigger.active span:nth-child(1) {
    transform: translateY(11px) rotate(-45deg)
}

header .menuTrigger.active span:nth-child(2) {
    left: 50%;
    animation: active-menu-bar02 .8s forwards;
    opacity: 0
}

@-webkit-keyframes active-menu-bar02 {
    100% {
        height: 0
    }
}

@keyframes active-menu-bar02 {
    100% {
        height: 0
    }
}

header .menuTrigger.active span:nth-child(3) {
    transform: translateY(-11px) rotate(45deg)
}


@media screen and (max-width: 768px) {
    header {
        min-width: inherit;
        height: 60px
    }

    header .inner {
        height: 60px
    }

    header .inner::after {
        height: 2px;
        background-size: cover;
        bottom: -2px
    }

    header .logo {
        width: 120px;
        height: 59px;
        bottom: -59px
    }

    header .logo img {
        width: 50px;
        top: -40px
    }



    /* menu trigger */

    header .menuBtn {
        width: 60px;
        height: 60px
    }

    header .menuTrigger .menuIcon {
        width: 25px;
        height: 20px;
        top: 20px
    }

    header .menuTrigger span:nth-child(2) {
        top: 9px
    }

    header .menuTrigger.active span:nth-child(1) {
        transform: translateY(9px) rotate(-45deg)
    }

    header .menuTrigger.active span:nth-child(3) {
        transform: translateY(-9px) rotate(45deg)
    }
}


/* ------ nav ------ */

header nav {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: fixed;
    top: 0;
    right: -100%;
    transition: all 0.3s ease-in-out;
    overflow-y: scroll;
    float: none
}

header nav.open {
    min-height: 100vh;
    padding-bottom: 100px;
    background: #7FA72C;
    right: 0;
    z-index: 100
}

header nav .globalNav ul {
    width: 80%;
    height: auto;
    font-size: 0;
    margin: 80px auto 0
}

header nav .globalNav li {
    width: 50%;
    height: 60px;
    font-size: 1.8rem;
    letter-spacing: 0.09em;
    vertical-align: top;
    line-height: 60px;
    text-align: center;
    display: inline-block
}

header nav .globalNav li::before {
    width: 0;
    height: 0
}

header nav .globalNav li a {
    color: #fff !important
}

header nav .globalNav li a:hover {
    opacity: 0.8
}

header nav .ECsiteBtn {
    width: 240px;
    text-align: center;
    margin: 20px auto 0
}

header nav .ECsiteBtn a {
    color: #fff !important;
    font-size: 0;
    border: 1px solid #fff;
    border-radius: 25px;
    display: block
}

header nav .ECsiteBtn a:hover {
    opacity: 0.8
}

header nav .ECsiteBtn img {
    height: 20px;
    position: relative;
    top: -15px
}

header nav .ECsiteBtn p {
    font-size: 1.6rem;
    letter-spacing: 0.09em;
    line-height: 50px;
    margin-left: 10px;
    display: inline-block
}

header nav .siteWrap {
    /* width: 900px; */
    margin: 40px auto 0;
    display: flex;
    justify-content: center;
}

header nav .siteWrap ul {
    font-size: 0
}

header nav .siteWrap li {
    width: 290px;
    vertical-align: top;
    display: inline-block
}

header nav .siteWrap li+li {
    margin-left: 40px
}

header nav .siteWrap a {
    height: 60px;
    color: #fff !important;
    border: 1px solid #fff;
    border-radius: 6px;
    display: block
}

header nav .siteWrap a:hover {
    opacity: 0.8
}

header nav .siteWrap p {
    font-size: 1.2rem;
    letter-spacing: 0.09em;
    text-align: center;
    padding-top: 6px
}

header nav .siteWrap span {
    font-size: 1.8rem;
    display: block
}

header nav .snsWrap {
    margin-top: 40px;
    display: block
}

header nav .snsWrap ul {
    font-size: 0;
    text-align: center
}

header nav .snsWrap li {
    width: 30px;
    vertical-align: middle;
    display: inline-block
}

header nav .snsWrap li+li {
    margin-left: 40px
}


@media screen and (max-width: 768px) {
    header nav .globalNav ul {
        width: 100%;
        margin-top: 60px
    }

    header nav .globalNav li {
        width: 100%;
        height: 50px;
        font-size: 1.6rem;
        line-height: 50px;
        display: block
    }

    header nav .ECsiteBtn p {
        font-size: 1.4rem
    }

    header nav .siteWrap {
        width: 100%
    }

    header nav .siteWrap li {
        margin: 0 auto;
        display: block
    }

    header nav .siteWrap li+li {
        margin-top: 20px;
        margin-left: auto
    }

    header nav .siteWrap a {
        height: 60px;
        color: #fff !important;
        border: 1px solid #fff;
        border-radius: 6px;
        display: block
    }

    header nav .siteWrap a:hover {
        opacity: 0.8
    }

    header nav .siteWrap p {
        font-size: 1.2rem;
        text-align: center;
        padding-top: 6px
    }

    header nav .siteWrap span {
        font-size: 1.8rem;
        display: block
    }
}


/* ------ main visual ------ */

main {
    width: 100%;
    margin: 0 auto;
}


/* ---top--- */

.top {
    background-image: url(../img/bg_1.png);
    background-size: cover;
}

.top_logo img {
    padding-top: 150px;
    width: 55%;
    display: block;
    margin: 0 auto;
}

.gaiju-tachi {
    margin: 0 auto;
    padding-top: 40px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    align-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

.gaiju_1 {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    align-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

.gaiju_1 img {
    width: 30%;
    height: auto;
}

.gaiju_2 {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    align-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

.gaiju_2 img {
    width: 30%;
    height: auto;
}

.cachcopy {
    width: 100%;
    margin: 0 auto;
    background-color: #ffffff6e;
    margin: 30px 0;
    padding: 1%;
}


.contact {
    width: 900px;
    margin: 0 auto;
    padding: 50px 0;
}

.contact_tel {
    color: #000;
    font-weight: 700;
    font-size: 3.2rem;
    text-align: center;
    padding: 20px 35px;
    margin-bottom: 20px;
    background-color: #EC6800;
    border-radius: 3px;
    box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.45);
}

.bold img {
    width: 8%;
}

.contact_mail {
    color: #000;
    font-weight: 700;
    font-size: 3.2rem;
    text-align: center;
    padding: 20px 35px;
    margin-bottom: 20px;
    background-color: #EC6800;
    border-radius: 3px;
    box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.45);
}





/* .mainVisualWrap .mainTxtWrap {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    display: block;
}

.mainVisualWrap .mainTxtBox {
    color: #fff;
    padding: 30px;
    background: rgba(61, 34, 16, 0.8);
    position: absolute;
    top: -320px;
    left: 40px
}

.mainVisualWrap .mainTitle {
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: 0.09em
}

.mainVisualWrap .mainTxt {
    font-size: 1.6rem;
    letter-spacing: 0.09em;
    margin-top: 20px
} */

@media screen and (max-width: 768px) {
    main {
        min-width: inherit;
        height: 560px;
        margin-top: 60px
    }

    .mainVisualWrap .slider {
        height: 560px
    }


    .mainVisualWrap .mainTxtWrap {
        width: 100%
    }

    .mainVisualWrap .mainTxtBox {
        width: 92%;
        padding: 20px;
        margin: auto;
        top: inherit;
        right: 0;
        bottom: 60px;
        left: 0
    }

    .mainVisualWrap .mainTitle {
        font-size: 2.2rem
    }

    .mainVisualWrap .mainTxt {
        font-size: 1.4rem;
        letter-spacing: 0.06em
    }

    .top {
        margin: -60px auto;
    }

    .top_logo {
        margin: -50px auto;
    }

    .top_logo img {
        padding-top: 10px;

    }

}


/* ------ concept ------ */

#concept {
    padding-top: 30px;
    margin: -10px;
    background: url("../img/bg_2.png") no-repeat;
    background-size: cover;
}

#concept .inner {
    width: 1200px;
    text-align: center;
    padding: 50px 10px 140px;
    margin: 0 auto;
}

#concept .title {
    position: relative;
    display: inline-block
}

#concept .txtWrap p {
    color: #333;
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1.8;
    margin-top: 60px;
    background-color: #ffffff6e;
    margin: 25px 0;
    padding: 5% 0;
}

@media screen and (max-width: 768px) {
    #concept {
        padding-top: 60px;
        margin-top: -60px;
        /* background: url("../img/bg_dark_sp.jpg") repeat */
    }

    #concept .inner {
        width: 100%;
        padding: 140px 4% 80px
    }

    #concept .title::before {
        width: 60px;
        height: 55px;
        top: 55px;
        left: -60px
    }

    #concept .title::after {
        content: "";
        width: 70px;
        height: 51px;
        top: 60px;
        right: -60px
    }

    #concept h2 {
        font-size: 2.4rem
    }

    /* #concept h2::before {
        width: 80px;
        height: 30px;
        top: -50px
    } */

    #concept .txtWrap {
        font-size: 1.4rem
    }
}

/* ------ reason ------ */

#reason {
    background-color: #FFB367;
    margin-top: -30px;
}

#reason .inner {
    width: 1200px;
    text-align: center;
    padding: 50px 10px 140px;
    margin: 0 auto;
}

#reason .inner {
    color: #333;
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1.8;
    margin-top: 60px;
    margin: 25px auto;
    padding: 2% 0 5% 0;
}

#reason .inner .title {
    margin-bottom: 20px;
}

#reason .inner .title img {
    width: 6%;
}

.ryouokin {
    display: flex;
}

.ryoukin_flex {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    align-content: center;
    align-items: stretch;
    flex-wrap: nowrap;
}

/* #reason h2 {
    font-size: 2.8rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1.4;
    position: relative
} */

/* #reason .txtWrap {
    width: 800px;
    font-size: 1.7rem;
    letter-spacing: 0.09em;
    margin: 40px auto 0;
    position: relative
}

#reason .txtWrap .title {
    font-size: 2rem;
    font-weight: 600;
    margin-top: 40px
}

#reason .txtWrap p+p {
    margin-top: 20px
} */

@media screen and (max-width: 768px) {
    /* #reason {
        background: url("../img/bg_right_sp.jpg") repeat
    } */

    #reason .inner {
        width: 100%;
        padding: 30px 4% 30px
    }

    /* #reason .inner::before {
        content: "";
        width: 140px;
        height: 101px;
        margin: auto;
        background: url("../img/reason_bg01.png") no-repeat;
        background-size: cover;
        position: absolute;
        bottom: -40px;
        left: 10px
    } */

    /* #reason .inner::after {
        content: "";
        width: 95px;
        height: 140px;
        margin: auto;
        background: url("../img/reason_bg02.png") no-repeat;
        background-size: cover;
        position: absolute;
        top: -60px;
        right: 10px
    } */

    #reason h2 {
        font-size: 2.4rem
    }

    /* #reason h2::before {
        width: 80px;
        height: 30px;
        top: -50px
    } */

    #reason .txtWrap {
        width: 100%;
        font-size: 1.4rem
    }

    #reason .txtWrap::before {
        width: 0;
        height: 0;
        background: none;
        bottom: 0;
        left: 0
    }

    #reason .txtWrap::after {
        width: 0;
        height: 0;
        background: none;
        right: 0;
        bottom: 40p0
    }

    #reason .txtWrap .title {
        font-size: 1.8rem
    }

    #reason .txtWrap p br {
        display: none
    }
}


/* ------ check ------ */
.check {
    background-color: #FFB367;
    margin-top: -30px;
}

.check .inner {
    width: 1200px;
    text-align: center;
    padding: 50px 10px 140px;
    margin: 0 auto;
}

.check .inner {
    color: #333;
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1.8;
    margin-top: 60px;
    margin: 25px auto;
    padding: 2% 0 5% 0;
}

.check .inner .title img {
    width: 6%;
}

.check .inner ul {
    background-color: #fff;
    width: 80%;
    margin: 5% auto;
    padding: 3%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-content: center;
    flex-wrap: nowrap;
}

.check .inner ul span {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.check .inner ul img {
    width: 30%;
    padding: 2%;
}


@media screen and (max-width: 768px) {
    #feature {
        min-width: inherit;
        background-size: contain
    }

    #feature .inner {
        width: 100%;
        padding: 140px 4% 40px
    }

    #feature h2 {
        font-size: 2.4rem
    }

    #feature h2::before {
        width: 80px;
        height: 30px;
        top: -50px
    }

    #feature .txtWrap {
        width: 100%;
        margin: 40px auto 0
    }

    #feature .txtWrap .title {
        font-size: 1.8rem
    }

    #feature .txtWrap .txt+.title {
        margin-top: 40px
    }

    #feature .txtWrap .txt {
        font-size: 1.4rem
    }

    #feature .sourceBox .source {
        font-size: 1.2rem
    }

    .check .inner {
        width: 80%;
        text-align: center;
        padding: 20px 10px 100px;
        margin: 0 auto;
    }

    .check .inner {
        color: #333;
        font-size: 2.2rem;
        font-weight: 600;
        letter-spacing: 0.09em;
        line-height: 1.8;
        margin-top: 60px;
        margin: 25px auto;
        padding: 2% 0 5% 0;
    }

}


/* ------ lineup ------ */

#lineup {
    background: #f0ede6
}

#lineup .inner {
    width: 1200px;
    text-align: center;
    padding: 200px 10px;
    margin: 0 auto
}

#lineup h2 {
    color: #42210b;
    font-size: 2.8rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1.4;
    margin-bottom: 10px;
    position: relative
}

#lineup h2::before {
    content: "";
    width: 100px;
    height: 38px;
    margin: auto;
    /* background: url("../img/deco_brown.png") no-repeat; */
    background-size: cover;
    position: absolute;
    top: -60px;
    right: 0;
    left: 0
}

#lineup .itemBox {
    width: 1000px;
    text-align: left;
    margin: 80px auto 0
}

#lineup .itemTitle {
    font-size: 2.2rem;
    letter-spacing: 0.09em;
    line-height: 50px;
    text-align: left;
    padding-left: 20px
}

#lineup .itemBox:nth-child(2) .itemTitle {
    background: #f4b895
}

#lineup .itemBox:nth-child(3) .itemTitle {
    background: #efc38e
}

#lineup .itemBox:nth-child(4) .itemTitle {
    background: #92cfc7
}

#lineup .itemBox:nth-child(5) .itemTitle {
    background: #97c6d9
}

#lineup .itemBox:nth-child(6) .itemTitle {
    background: #f6bab3
}

#lineup .itemList {
    margin-top: 60px
}

#lineup .itemList ul {
    font-size: 0
}

#lineup .itemList li {
    width: 320px;
    vertical-align: top;
    text-align: center;
    margin-top: 60px;
    margin-right: 20px;
    display: inline-block
}

#lineup .itemList li:nth-child(1),
#lineup .itemList li:nth-child(2),
#lineup .itemList li:nth-child(3) {
    margin-top: 0
}

#lineup .itemList li:nth-child(3n) {
    margin-right: 0
}

#lineup .itemList li p {
    font-size: 1.4rem;
    letter-spacing: 0.09em;
    margin-top: 20px
}

#lineup .itemList li p span {
    display: block
}

#lineup .itemList li p span.itemN {
    font-size: 1.6rem;
    font-weight: 600
}

#lineup .itemList li p span.itemP {
    color: #bf0000;
    font-size: 1.6rem
}

#lineup .itemList li p span.itemP em {
    color: #42210b;
    font-size: 1.3rem
}

@media screen and (max-width: 768px) {
    #lineup .inner {
        width: 100%;
        padding: 100px 4%
    }

    #lineup h2 {
        font-size: 2.4rem
    }

    #lineup h2::before {
        width: 80px;
        height: 30px;
        top: -50px
    }

    #lineup .itemBox {
        width: 100%;
        margin: 60px auto 0
    }

    #lineup .itemTitle {
        font-size: 1.6rem;
        line-height: 1.6;
        text-align: center;
        padding: 10px
    }

    #lineup .itemTitle span {
        font-size: 1.4rem;
        display: block
    }

    #lineup .itemList {
        margin-top: 40px
    }

    #lineup .itemList li {
        width: 48%;
        max-width: 400px;
        margin-top: 40px;
        margin-right: 4%
    }

    #lineup .itemList li:nth-child(3) {
        margin-top: 40px
    }

    #lineup .itemList li:nth-child(3n) {
        margin-right: 4%
    }

    #lineup .itemList li:nth-child(2n) {
        margin-right: 0
    }

    #lineup .itemList li p span.itemN br {
        display: none
    }
}


/* ------ footer ------ */

footer {
    width: 100%;
    padding: 0 !important;
    background: url("../img/bg_right.jpg") repeat !important
}

footer .inner {
    width: 1200px;
    font-family: "Yu Gothic", YuGothic, sans-serif;
    padding: 80px 40px;
    margin: 0 auto;
    position: relative
}

/* footer .inner::before {
    content: "";
    width: 260px;
    height: 184px;
    background: url("../img/footer_animal.png") no-repeat;
    position: absolute;
    top: -154px;
    right: 20px
} */

footer .footerBox {
    font-size: 0
}

footer .shopInfo {
    width: 420px;
    vertical-align: top;
    display: inline-block
}

footer .shopInfo .logo img {
    width: 160px;
    margin-left: 30px
}

footer .shopInfo .txtWrap {
    color: #000;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    margin-top: 20px
}

footer .shopInfo .txtWrap span {
    font-size: 1.4rem;
    margin-top: 10px;
    display: block
}

footer .footerNav {
    width: 660px;
    font-size: 0;
    vertical-align: top;
    margin-left: 40px;
    display: inline-block
}

footer .footerNav ul {
    font-size: 0
}

footer .footerNav li {
    width: 50%;
    color: #000;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    vertical-align: top;
    padding: 6px 0;
    display: inline-block
}

footer .footerNav li a:hover {
    opacity: 0.8
}

footer .footerNav .siteWrap {
    width: 620px;
    margin: 20px auto 0;
    display: flex;
    justify-content: center;

}

footer .footerNav .siteWrap ul {
    font-size: 0
}

footer .footerNav .siteWrap li {
    width: 290px;
    vertical-align: top;
    display: inline-block
}

footer .footerNav .siteWrap li+li {
    margin-left: 40px
}

footer .footerNav .siteWrap a {
    height: 60px;
    color: #fff !important;
    background: #3d2210;
    border-radius: 6px;
    display: block
}

footer .footerNav .siteWrap a:hover {
    opacity: 0.8
}

footer .footerNav .siteWrap p {
    font-size: 1.2rem;
    font-weight: 500;
    text-align: center;
    padding-top: 8px
}

footer .footerNav .siteWrap span {
    font-size: 1.8rem;
    font-weight: 600;
    display: block
}

footer .footerNav .snsWrap {
    margin-top: 20px
}

footer .footerNav .snsWrap img {
    width: 36px
}

footer .footerNav .cfWrap {
    width: 660px;
    font-size: 0;
    padding: 10px 20px;
    margin: 20px auto 0;
    border: 2px solid #3d2210;
    border-radius: 6px
}

footer .footerNav .cfWrap .txtWrap {
    width: 300px;
    vertical-align: middle;
    margin-right: 26px;
    display: inline-block
}

footer .footerNav .cfWrap .txtWrap p {
    color: #000;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.09em
}

footer .footerNav .cfWrap .btnWrap {
    width: 290px;
    vertical-align: middle;
    display: inline-block
}

footer .footerNav .cfWrap .btnWrap a {
    height: 60px;
    color: #fff !important;
    text-align: center;
    background: #3d2210;
    border-radius: 6px;
    display: block
}

footer .footerNav .cfWrap .btnWrap a:hover {
    opacity: 0.8
}

footer .copyright {
    text-align: center;
    padding: 0 !important;
    background: #3d2210
}

footer .copyright small {
    color: #cdb882;
    font-size: 1.4rem;
    line-height: 60px;
    letter-spacing: 0.09em
}


@media screen and (max-width: 768px) {
    footer {
        background: url("../img/bg_right_sp.jpg") repeat !important
    }

    footer .inner {
        width: 100%;
        padding: 60px 4%
    }

    /* footer .inner::before {
        width: 180px;
        height: 127px;
        background-size: cover;
        top: -97px;
        right: 20px
    } */

    footer .shopInfo {
        width: 100%;
        display: block
    }

    footer .shopInfo .logo {
        text-align: center
    }

    footer .shopInfo .logo img {
        width: 100px;
        margin-left: 0
    }

    footer .shopInfo .txtWrap {
        font-size: 1.4rem;
        text-align: center
    }

    footer .footerNav {
        width: 100%;
        margin-left: 0;
        display: block
    }

    footer .footerNav ul {
        display: none
    }

    footer .footerNav .snsWrap {
        text-align: center
    }

    footer .footerNav .cfWrap {
        width: 100%;
        padding: 20px
    }

    footer .footerNav .cfWrap .txtWrap {
        width: 100%;
        margin-right: 26px;
        margin-bottom: 20px;
        display: block
    }

    footer .footerNav .cfWrap .txtWrap p {
        text-align: center
    }

    footer .footerNav .cfWrap .btnWrap {
        width: 100%;
        display: block
    }
}



/* ------ breadcrumb ------ */

.breadcrumbWrap {
    width: 100%;
    max-width: 1200px;
    padding: 90px 10px 10px;
    margin: 0 auto
}

.breadcrumbWrap ul li {
    font-size: 1.4rem;
    letter-spacing: 0.09em;
    display: inline-block
}

.breadcrumbWrap ul li:after {
    font-family: FontAwesome;
    content: "\f105";
    font-size: 1.6rem;
    margin: 0 8px
}

.breadcrumbWrap ul li:last-child:after {
    content: ""
}

.breadcrumbWrap li img {
    width: 20px;
    position: relative;
    top: -4px
}

@media screen and (max-width: 768px) {
    .breadcrumbWrap {
        display: none
    }
}


/* ------ item list ------ */

#itemList .inner {
    width: 1200px;
    text-align: center;
    padding: 200px 10px 200px;
    margin: 0 auto
}

#itemList h1 {
    color: #42210b;
    font-size: 2.8rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1.4;
    margin-bottom: 10px;
    position: relative
}

#itemList h1::before {
    content: "";
    width: 100px;
    height: 38px;
    margin: auto;
    background: url("../img/deco_brown.png") no-repeat;
    background-size: cover;
    position: absolute;
    top: -60px;
    right: 0;
    left: 0
}

#itemList .categoryList {
    margin: 40px auto 0
}

#itemList .categoryList ul {
    font-size: 0
}

#itemList .categoryList li {
    width: 200px;
    font-size: 1.6rem;
    letter-spacing: 0.09em;
    line-height: 50px;
    vertical-align: top;
    display: inline-block
}

#itemList .categoryList li+li {
    margin-left: 20px
}

#itemList .categoryList li a {
    color: #fff !important;
    background: #3d2210;
    border-radius: 5px;
    display: block
}

#itemList .categoryList li a:hover {
    opacity: 0.8
}

#itemList .itemListWrap {
    width: 1200px;
    text-align: left;
    margin: 60px auto 0
}

#itemList .itemListWrap ul {
    font-size: 0
}

#itemList .itemListWrap li {
    width: 285px;
    vertical-align: top;
    margin-top: 60px;
    margin-right: 20px;
    display: inline-block
}

#itemList .itemListWrap li:nth-child(1),
#itemList .itemListWrap li:nth-child(2),
#itemList .itemListWrap li:nth-child(3),
#itemList .itemListWrap li:nth-child(4) {
    margin-top: 0
}

#itemList .itemListWrap li:nth-child(4n) {
    margin-right: 0
}

#itemList .itemListWrap .txtWrap {
    color: #42210b;
    font-size: 1.6rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.09em;
    margin-top: 10px
}

#itemList .itemListWrap .itemBottom {
    font-size: 0;
    margin-top: 4px
}

#itemList .itemListWrap .itemPreservation {
    font-size: 1.4rem;
    vertical-align: middle;
    display: inline-block
}

#itemList .itemListWrap .itemPreservation .normal {
    color: #fff;
    padding: 1px 6px 2px;
    background: #ce7331
}

#itemList .itemListWrap .itemPreservation .frozen {
    color: #fff;
    padding: 1px 6px 2px;
    background: #7698e3
}

#itemList .itemListWrap .itemPrice {
    color: #bf0000;
    font-size: 1.6rem;
    vertical-align: middle;
    margin-left: 10px;
    display: inline-block
}

#itemList .itemListWrap .itemPrice em {
    color: #42210b;
    font-size: 1.3rem
}

#itemList .itemListWrap .itemsoldout {
    color: #fff;
    font-size: 1.4rem;
    font-weight: normal;
    padding: 10px;
    margin-top: 10px;
    background: #696969
}

@media screen and (max-width: 768px) {
    #itemList .inner {
        width: 100%;
        padding: 180px 4% 100px
    }

    #itemList h1 {
        font-size: 2.4rem
    }

    #itemList h1::before {
        width: 80px;
        height: 30px;
        top: -50px
    }

    #itemList .categoryList li {
        width: calc((100% - 10px) / 2);
        font-size: 1.4rem;
        margin-top: 10px;
        margin-right: 10px
    }

    #itemList .categoryList li+li {
        margin-left: 0
    }

    #itemList .categoryList li:nth-child(2n) {
        margin-right: 0
    }

    #itemList .categoryList li:nth-child(1),
    #itemList .categoryList li:nth-child(2) {
        margin-top: 0
    }

    #itemList .itemListWrap {
        width: 100%;
        margin: 40px auto 0
    }

    #itemList .itemListWrap li {
        width: calc((100% - 10px) / 2);
        margin-top: 40px;
        margin-right: 10px
    }

    #itemList .itemListWrap li:nth-child(1),
    #itemList .itemListWrap li:nth-child(2) {
        margin-top: 0
    }

    #itemList .itemListWrap li:nth-child(3),
    #itemList .itemListWrap li:nth-child(4) {
        margin-top: 40px
    }

    #itemList .itemListWrap li:nth-child(2n) {
        margin-right: 0
    }

    #itemList .itemListWrap li img {
        width: 100%;
        height: auto
    }

    #itemList .itemListWrap .txtWrap .itemBottom {
        margin-top: 0
    }

    #itemList .itemListWrap .itemPreservation {
        margin-top: 4px;
        display: block
    }

    #itemList .itemListWrap .itemPrice {
        margin-left: 0;
        display: block
    }
}


/* pagenation */

#itemList .paginationWrap {
    margin: 60px auto 0
}

#itemList .paginationWrap .pagination ul {
    font-size: 0
}

#itemList .paginationWrap .pagination li {
    vertical-align: top;
    display: inline-block
}

#itemList .paginationWrap .pagination li+li {
    margin-left: 10px
}

#itemList .paginationWrap .pagination li a,
#itemList .paginationWrap .pagination li span {
    font-size: 1.4rem;
    letter-spacing: 0.09em;
    line-height: 40px;
    padding: 0 20px;
    background: #fff;
    transition: 0.3s;
    border-radius: 4px;
    display: block
}

#itemList .paginationWrap .pagination li a:hover {
    color: #fff !important;
    background: #3d2210
}

#itemList .paginationWrap .pagination li .current {
    color: #fff;
    background: #3d2210;
    cursor: default
}

@media screen and (max-width: 768px) {
    #itemList .paginationWrap {
        margin: 40px auto 0
    }
}


/* ------ item ------ */

#item .inner {
    width: 1020px;
    font-size: 0;
    padding: 140px 10px 200px;
    margin: 0 auto
}

#item .itemImage {
    width: 500px;
    vertical-align: top;
    display: inline-block
}

#item .itemImage .item-img-main img {
    width: 100%;
    height: auto
}

#item .itemImage .item-img-thumb {
    font-size: 0;
    margin-top: 10px
}

#item .itemImage .thumbnail-item {
    width: calc((100% - 30px) / 4);
    vertical-align: top;
    margin-right: 10px;
    margin-bottom: 10px;
    display: inline-block;
    cursor: pointer
}

#item .itemImage .thumbnail-item:nth-child(4n) {
    margin-right: 0
}

#item .itemImage .thumbnail-item img {
    width: 100%;
    height: auto
}

#item .itemImage .thumbnail-item img:hover {
    opacity: 0.8
}

#item .itemInfo {
    width: 440px;
    font-size: 1.6rem;
    vertical-align: top;
    margin-left: 60px;
    display: inline-block
}

#item .itemInfo .title h1 {
    font-size: 2.8rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1.4;
    margin-bottom: 10px;
    position: relative
}

#item .itemInfo .description {
    font-size: 1.6rem;
    letter-spacing: 0.09em;
    margin-top: 40px
}

#item .itemInfo .description h2 {
    letter-spacing: 0.09em;
    padding-bottom: 6px;
    margin: 20px 0 10px;
    border-bottom: 1px dashed #42210b
}

#item .itemInfo .description p.indent {
    text-indent: -1em;
    padding-left: 1em
}

#item .itemInfo .description p.tmo {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px dotted #42210b
}

#item .itemInfo .description p+p {
    margin-top: 10px
}

#item .itemInfo .description table {
    width: 100%;
    margin-top: 20px
}

#item .itemInfo .description table th {
    width: 50%;
    text-align: center;
    padding: 10px;
    border: 1px solid #c1c1c1;
    background: #efefef
}

#item .itemInfo .description table td {
    width: 50%;
    text-align: center;
    padding: 10px;
    border: 1px solid #c1c1c1;
    background: #fff
}

#item .itemInfo .price p {
    color: #bf0000;
    font-size: 2.4rem;
    font-weight: 600;
    text-align: right;
    margin-top: 20px
}

#item .itemInfo .price em {
    color: #42210b;
    font-size: 1.2rem
}

#item .itemInfo .item-info .skuform {
    margin: 20px 0 0
}

#item .itemInfo .item-info .skuform .skuname {
    padding: 10px;
    background: #c1c1c1
}

#item .snsWrap {
    text-align: right;
    margin-top: 20px
}

#item .snsWrap a {
    width: 200px;
    height: 30px;
    color: #fff !important;
    text-align: left;
    padding-left: 30px;
    background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
    background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
    position: relative;
    border-radius: 15px;
    display: inline-block;
    overflow: hidden
}

#item .snsWrap a:hover {
    opacity: 0.8
}

#item .snsWrap a img {
    width: 20px;
    position: relative;
    top: -5px
}

#item .snsWrap a span {
    font-size: 1.4rem;
    letter-spacing: 0.09em;
    line-height: 30px;
    margin-left: 10px
}

@media screen and (max-width: 768px) {
    #item .inner {
        width: 100%;
        padding: 140px 4% 100px
    }

    #item .itemImage {
        width: 100%;
        display: block
    }

    #item .itemInfo {
        width: 100%;
        font-size: 1.4rem;
        margin-top: 40px;
        margin-left: 0;
        display: block
    }

    #item .itemInfo .title h1 {
        font-size: 2.4rem
    }

    #item .itemInfo .description {
        margin-top: 20px
    }

    #item .snsWrap a {
        width: 48%;
        padding-left: 20px
    }
}


/* ------ media ------ */

#media .inner {
    width: 1200px;
    text-align: center;
    padding: 200px 10px 200px;
    margin: 0 auto
}

#media h1 {
    color: #42210b;
    font-size: 2.8rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1.4;
    margin-bottom: 10px;
    position: relative
}

#media h1::before {
    content: "";
    width: 100px;
    height: 38px;
    margin: auto;
    background: url("../img/deco_brown.png") no-repeat;
    background-size: cover;
    position: absolute;
    top: -60px;
    right: 0;
    left: 0
}

#media .txt {
    font-size: 1.6rem;
    letter-spacing: 0.09em;
    margin-top: 40px
}

#media .txt a {
    text-decoration: underline !important
}

#media .mediaList {
    width: 1000px;
    text-align: left;
    padding: 80px;
    margin: 60px auto 0;
    background: #fff
}

#media .mediaList li a {
    font-size: 0;
    padding: 20px;
    border-top: 1px dashed #4e311d;
    display: block
}

#media .mediaList li:last-child {
    border-bottom: 1px dashed #4e311d
}

#media .mediaList .date {
    width: 180px;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.09em;
    vertical-align: top;
    display: inline-block
}

#media .mediaList .title {
    width: 620px;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.09em;
    vertical-align: top;
    display: inline-block
}

#media .mediaList li a:hover {
    color: #bf0000 !important
}

@media screen and (max-width: 768px) {
    #media .inner {
        width: 100%;
        padding: 180px 4% 100px
    }

    #media h1 {
        font-size: 2.4rem
    }

    #media h1::before {
        width: 80px;
        height: 30px;
        top: -50px
    }

    #media .txt {
        font-size: 1.4rem
    }

    #media .txt br {
        display: none
    }

    #media .mediaList {
        width: 100%;
        padding: 40px 20px;
        margin: 60px auto 0
    }

    #media .mediaList .date {
        font-size: 1.4rem
    }

    #media .mediaList .title {
        font-size: 1.4rem;
        margin-top: 10px
    }
}


/* pagination */

#media .paginationWrap {
    text-align: center;
    margin: 40px auto 0
}

#media .paginationWrap .pagination {
    display: inline-block;
    overflow: hidden
}

#media .paginationWrap .pagination li {
    display: inline-block
}

#media .paginationWrap .pagination li a,
#media .paginationWrap .pagination li span {
    min-width: 36px;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 6px;
    margin: 0 3px;
    background: #fff;
    border-radius: 10px;
    transition: 0.3s;
    float: left;
    position: relative
}

#media .paginationWrap .pagination li .next,
#media .paginationWrap .pagination li .prev {
    font-family: 'Montserrat', sans-serif
}

#media .paginationWrap .pagination li a:hover {
    color: #fff !important;
    background: #3d2210
}

#media .paginationWrap .pagination li .current {
    color: #fff;
    background: #3d2210;
    cursor: default
}

#media .paginationWrap .pagination li:first-child a,
#media .paginationWrap .pagination li:first-child span,
#media .paginationWrap .pagination li:last-child a,
#media .paginationWrap .pagination li:last-child span {
    border-radius: 10px
}

@media screen and (max-width: 768px) {
    #media .paginationWrap {
        margin: 40px auto 0
    }
}


/* 記事 */

article {
    /*padding-top: 60px !important*/
}

article #article {
    width: 900px;
    padding: 20px;
    margin: 80px auto 200px
}

#article .title {
    padding-bottom: 10px;
    margin-bottom: 40px;
    border-bottom: 1px solid #42210b
}

#article .title h1 {
    font-size: 2.2rem;
    letter-spacing: 0.09rem
}

#article .title p {
    font-size: 1.4rem;
    letter-spacing: 0.09em
}

#article .articleContent {
    font-size: 1.6rem;
    letter-spacing: 0.09em;
    padding-bottom: 40px
}

#article .articleContent img {
    max-width: 100%;
    height: auto;
    margin-top: 10px;
    display: block
}

#article .articleContent img+img {
    margin-top: 20px
}

#article .articleContent iframe {
    margin-top: 10px !important
}

#article .articleContent h2 {
    font-size: 1.8rem;
    padding: 10px 0;
    margin: 40px 0 20px;
    border-bottom: solid 4px #eaeaea;
    position: relative
}

#article .articleContent h2:before {
    content: "";
    width: 72px;
    height: 4px;
    background: #586d70;
    position: absolute;
    bottom: -4px;
    left: 0
}

#article .articleContent h3 {
    font-size: 1.6rem;
    margin: 40px 0 10px;
    padding-bottom: 10px;
    border-bottom: dotted 1px #eaeaea
}

#article .articleContent p {
    letter-spacing: 0.05em;
    margin-top: 20px
}

#article .articleContent .movieWrap {
    width: 100%;
    padding-top: 56.25%;
    position: relative
}

#article .articleContent .movieWrap iframe {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    right: 0
}

#article .articleFooter .navigation {
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    text-align: center;
    padding: 20px 0
}

#article .articleFooter .navigation>div {
    margin: 0 10px;
    display: inline-block
}

#article .articleFooter .navigation .prev,
#article .articleFooter .navigation .next {
    color: #9fa3ab
}

#article .articleFooter .navigation .prev a,
#article .articleFooter .navigation .next a {
    color: #586d70
}

#article .articleFooter .navigation .prev a:hover,
#article .articleFooter .navigation .next a:hover {
    color: #c68936
}

#article .articleFooter .navigation .prev i,
#article .articleFooter .navigation .next i {
    vertical-align: middle;
    position: relative;
    display: inline-block
}

#article .articleFooter .navigation .prev i:before {
    content: "";
    width: 14px;
    height: 14px;
    border-top: 1px solid #9fa3ab;
    border-right: 1px solid #9fa3ab;
    position: absolute;
    top: -9px;
    left: -40px;
    transform: rotate(225deg)
}

#article .articleFooter .navigation .next i:after {
    content: "";
    width: 14px;
    height: 14px;
    border-top: 1px solid #9fa3ab;
    border-right: 1px solid #9fa3ab;
    position: absolute;
    top: -9px;
    right: -40px;
    transform: rotate(45deg)
}

#article .articleFooter .navigation .prev a i:before,
#article .articleFooter .navigation .next a i:after {
    border-top: 1px solid #586d70;
    border-right: 1px solid #586d70
}

#article .articleFooter .navigation .prev a:hover i:before,
#article .articleFooter .navigation .next a:hover i:after {
    border-top-color: #c68936;
    border-right-color: #c68936
}

@media screen and (max-width: 768px) {
    article {
        /*padding-top: 40px !important*/
    }

    article #article {
        width: 100%;
        padding: 0 10px
    }

    #article .title h1 {
        font-size: 2rem
    }

    #article .articleContent p {
        margin-top: 1em
    }
}


/* ------ bingogibier ------ */

#bingogibier .inner {
    width: 1200px;
    text-align: center;
    padding: 200px 10px 200px;
    margin: 0 auto
}

#bingogibier h1 {
    color: #42210b;
    font-size: 2.8rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1.4;
    margin-bottom: 10px;
    position: relative
}

#bingogibier h1::before {
    content: "";
    width: 100px;
    height: 38px;
    margin: auto;
    background: url("../img/deco_brown.png") no-repeat;
    background-size: cover;
    position: absolute;
    top: -60px;
    right: 0;
    left: 0
}

#bingogibier .txtWrap {
    width: 800px;
    letter-spacing: 0.09em;
    margin: 40px auto 0
}

#bingogibier .wanaryou+.txtWrap {
    margin-top: 80px
}

#bingogibier .txtWrap h2 {
    font-size: 2rem;
    font-weight: 600
}

#bingogibier .txtWrap p {
    font-size: 1.7rem;
    letter-spacing: 0.09em;
    text-align: left;
    margin-top: 20px;
}

#bingogibier .wanaryou {
    font-size: 0;
    margin-top: 60px
}

#bingogibier .wanaryou .wanaImage,
#bingogibier .wanaryou .wanaTxt {
    width: 500px;
    height: 335px;
    text-align: center;
    vertical-align: middle;
    display: inline-block
}

#bingogibier .wanaryou .wanaImage img {
    width: 100%;
    max-width: 500px
}

#bingogibier .wanaryou .wanaTxt {
    padding: 60px;
    text-align: left;
    background: #fff
}

#bingogibier .wanaryou .wanaTxt h3 {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.09rem;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #000
}

#bingogibier .wanaryou .wanaTxt p {
    font-size: 1.7rem;
    letter-spacing: 0.09rem
}

#bingogibier .processList {
    width: 1000px;
    text-align: left;
    margin: 40px auto 0
}

#bingogibier .processList ul {
    margin-top: 40px
}

#bingogibier .processList li+li {
    margin-top: 40px
}

#bingogibier .processList h3 {
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: 0.09em
}

#bingogibier .processList p {
    font-size: 1.7rem;
    letter-spacing: 0.09rem;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #42210b;
    background: #fff;
    position: relative
}

/*
#bingogibier .processList li:nth-child(7) p::after {
    content: "";
    width: 200px;
    height: 164px;
    margin: auto;
    background: url(../img/bingogibier/trimming_image.png) no-repeat;
    background-size: cover;
    position: absolute;
    right: 40px;
    bottom: -60px
}
*/

@media screen and (max-width: 768px) {
    #bingogibier .inner {
        width: 100%;
        padding: 180px 4% 100px
    }

    #bingogibier h1 {
        font-size: 2.4rem
    }

    #bingogibier h1::before {
        width: 80px;
        height: 30px;
        top: -50px
    }

    #bingogibier .txtWrap {
        width: 100%
    }

    #bingogibier .txtWrap br {
        display: none
    }

    #bingogibier .wanaryou+.txtWrap {
        margin-top: 60px
    }

    #bingogibier .txtWrap h2 {
        font-size: 1.8rem
    }

    #bingogibier .txtWrap p {
        font-size: 1.4rem
    }

    #bingogibier .wanaryou {
        margin-top: 40px
    }

    #bingogibier .wanaryou .wanaImage,
    #bingogibier .wanaryou .wanaTxt {
        width: 100%;
        max-width: 500px;
        height: auto;
        margin: 0 auto;
        display: block
    }

    #bingogibier .wanaryou .wanaTxt {
        padding: 20px
    }

    #bingogibier .wanaryou .wanaTxt h3 {
        font-size: 1.8rem
    }

    #bingogibier .wanaryou .wanaTxt p {
        font-size: 1.4rem
    }

    #bingogibier .processList {
        width: 100%
    }

    #bingogibier .processList p {
        font-size: 1.4rem
    }

    /*
    #bingogibier .processList li:nth-child(7) p::after {
        width: 100px;
        height: 83px;
        right: 10px;
        bottom: 43px
    }
    */
}


/* ------ contact & wholesale ------ */

#contact .inner,
#wholesale .inner {
    width: 1200px;
    text-align: center;
    padding: 200px 10px 200px;
    margin: 0 auto
}

#contact h1,
#wholesale h1 {
    color: #42210b;
    font-size: 2.8rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1.4;
    margin-bottom: 10px;
    position: relative
}

#contact h1::before,
#wholesale h1::before {
    content: "";
    width: 100px;
    height: 38px;
    margin: auto;
    background: url("../img/deco_brown.png") no-repeat;
    background-size: cover;
    position: absolute;
    top: -60px;
    right: 0;
    left: 0
}

#contact .txtWrap,
#wholesale .txtWrap {
    font-size: 1.6rem;
    letter-spacing: 0.09em;
    margin-top: 40px
}

@media screen and (max-width: 768px) {

    #contact .inner,
    #wholesale .inner {
        width: 100%;
        padding: 180px 4% 100px
    }

    #contact h1,
    #wholesale h1 {
        font-size: 2.4rem
    }

    #contact h1::before,
    #wholesale h1::before {
        width: 80px;
        height: 30px;
        top: -50px
    }

    #contact .txtWrap,
    #wholesale .txtWrap {
        font-size: 1.4rem
    }

    #contact .txtWrap br,
    #wholesale .txtWrap br {
        display: none
    }
}


/* form */

.contactForm {
    width: 1000px;
    text-align: left;
    padding: 80px;
    margin: 60px auto 0;
    background: #fff
}

.contactForm .dlWrap dl {
    font-size: 0;
    text-align: left;
    border-bottom: 1px dashed #c1c1c1
}

.contactForm .dlWrap dl:first-child {
    border-top: 1px dashed #c1c1c1
}

.contactForm .dlWrap dl dt {
    width: 30%;
    font-size: 1.6rem;
    letter-spacing: 0.09em;
    font-weight: 500;
    vertical-align: top;
    padding: 26px 10px;
    display: inline-block
}

.contactForm .dlWrap dl dt .required {
    color: #bf0000;
    font-size: 1.2rem;
    font-weight: normal;
    margin-left: 20px
}

.contactForm .dlWrap dl dd {
    width: 70%;
    font-size: 1.6rem;
    vertical-align: middle;
    padding: 20px 10px;
    display: inline-block
}

.contactForm .dlWrap dl dd select {
    width: 100%;
    height: 40px;
    letter-spacing: 0.09em;
    padding: 0 10px !important;
    border: 1px solid #c1c1c1;
    background: #fff;
    -webkit-appearance: menulist-button !important
}

.contactForm .dlWrap dl dd input {
    width: 100%;
    height: 40px;
    letter-spacing: 0.09em;
    padding: 10px;
    border: 1px solid #c1c1c1
}

#wholesale dd.zipcode ul {
    font-size: 0
}

#wholesale dd.zipcode li {
    font-size: 1.4rem;
    vertical-align: top;
    display: inline-block
}

#wholesale dd.zipcode li+li {
    margin-left: 20px
}

#wholesale .contactForm dd.zipcode input[type=text] {
    width: 200px
}

#wholesale .contactForm dd.zipcode input[type=button] {
    width: 100px;
    height: 40px;
    color: #fff;
    font-size: 1.3rem;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 40px;
    padding: 0;
    border: none;
    background: #3d2210;
    cursor: pointer
}

#wholesale .contactForm dd.zipcode input[type=button]:hover {
    opacity: 0.8
}

.contactForm .dlWrap dl dd textarea {
    width: 100%;
    height: 100px;
    letter-spacing: 0.09em;
    padding: 10px;
    border: 1px solid #c1c1c1
}

.contactForm .dlWrap dl dd select:-webkit-autofill,
.contactForm .dlWrap dl dd input:-webkit-autofill,
.contactForm .dlWrap dl dd textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset
}

#wholesale .caution {
    text-align: center;
    margin-top: 20px
}

.contactForm .enterBtn {
    margin-top: 40px
}

.contactForm .enterBtn input[type="submit"] {
    width: 480px;
    height: 50px;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 500;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.09em;
    line-height: 50px;
    padding: 0 !important;
    margin: 0 auto !important;
    border: none;
    background: #7FA72C;
    border-radius: 5px;
    transition: 0.3s;
    display: block;
    cursor: pointer;
    -webkit-appearance: none
}

.contactForm .enterBtn input[type="submit"]:hover {
    opacity: 0.8
}

@media screen and (max-width: 768px) {
    .contactForm {
        width: 100%;
        padding: 40px 4%;
        margin: 20px auto 0
    }

    .contactForm .dlWrap {
        width: 100%;
        margin-top: 0
    }

    .contactForm .dlWrap dl dt {
        width: 100%
    }

    .contactForm .dlWrap dl dd {
        width: 100%;
        padding: 0 0 20px
    }

    #wholesale .contactForm dd.zipcode input[type=text] {
        width: 160px
    }

    #wholesale .caution p br {
        display: none
    }

    .contactForm .enterBtn {
        margin-top: 20px
    }

    .contactForm .enterBtn input[type="submit"] {
        width: 100%;
        font-size: 1.6rem
    }
}


/* contact form 7 */

form.invalid .wpcf7-response-output,
form.spam .wpcf7-response-output {
    color: #fff;
    font-size: 1.4rem;
    text-align: center;
    padding: 10px !important;
    margin: 0 !important;
    border: none !important;
    background: #666
}

form.sent .wpcf7-response-output {
    color: #bf0000;
    font-size: 1.4rem;
    text-align: center;
    font-weight: bold;
    padding: 10px !important;
    margin: 0 !important;
    border: none !important;
    background: #f0ede6
}


/* ------ rule ------ */

#rule .inner {
    width: 1200px;
    text-align: center;
    padding: 200px 10px 200px;
    margin: 0 auto
}

#rule h1 {
    color: #42210b;
    font-size: 2.8rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1.4;
    margin-bottom: 10px;
    position: relative
}

#rule h1::before {
    content: "";
    width: 100px;
    height: 38px;
    margin: auto;
    background: url("../img/deco_brown.png") no-repeat;
    background-size: cover;
    position: absolute;
    top: -60px;
    right: 0;
    left: 0
}

#rule .tableWrap {
    width: 1000px;
    padding: 80px;
    margin: 80px auto 0;
    background: #fff
}

#rule .tableWrap>table {
    width: 100%
}

#rule .tableWrap>table>tbody>tr>th,
#rule .tableWrap>table>tbody>tr>td {
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.09em;
    vertical-align: top;
    text-align: left;
    padding: 20px;
    border: 1px dashed #4e311d;
    border-right: none;
    border-left: none
}

#rule .tableWrap>table>tbody>tr>th {
    width: 200px
}

#rule .tableWrap td p+p {
    margin-top: 10px
}

#rule .tableWrap td a {
    text-decoration: underline !important
}

#rule .tableWrap table table {
    width: 100%;
    margin: 10px 0 20px
}

#rule .tableWrap table table th {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    vertical-align: top;
    text-align: left;
    padding: 10px;
    border-right: none;
    border-left: none;
    background: #f0ede6
}

#rule .tableWrap table table th span {
    font-size: 1.4rem;
    margin-left: 10px
}

#rule .tableWrap table table td {
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.09em;
    vertical-align: top;
    text-align: left;
    padding: 10px;
    border-right: none;
    border-left: none
}

#rule .tableWrap table table td span {
    margin-left: 1em;
    position: relative
}

#rule .tableWrap table table td span::before {
    content: "/";
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -0.5em
}

@media screen and (max-width: 768px) {
    #rule .inner {
        width: 100%;
        padding: 180px 4% 100px
    }

    #rule h1 {
        font-size: 2.4rem
    }

    #rule h1::before {
        width: 80px;
        height: 30px;
        top: -50px
    }

    #rule .tableWrap {
        width: 100%;
        padding: 40px 20px;
        margin: 60px auto 0
    }

    #rule .tableWrap>table>tbody>tr>th,
    #rule .tableWrap>table>tbody>tr>td {
        width: 100%;
        padding: 20px 10px;
        display: block
    }

    #rule .tableWrap>table>tbody>tr>th {
        border-bottom: none
    }

    #rule .tableWrap>table>tbody>tr>tr+tr th {
        border-top: none
    }

    #rule .tableWrap>table>tbody>tr>td {
        font-size: 1.4rem;
        padding-top: 0;
        border-top: none;
        border-bottom: none
    }

    #rule .tableWrap table table th {
        font-size: 1.4rem
    }

    #rule .tableWrap table table th span {
        margin-left: 0;
        display: block
    }

    #rule .tableWrap table table td {
        font-size: 1.4rem;
        padding: 10px 0
    }
}


/* ------ policy ------ */

#policy .inner {
    width: 1200px;
    text-align: center;
    padding: 200px 10px 200px;
    margin: 0 auto
}

#policy h1 {
    color: #42210b;
    font-size: 2.8rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1.4;
    margin-bottom: 10px;
    position: relative
}

#policy h1::before {
    content: "";
    width: 100px;
    height: 38px;
    margin: auto;
    background: url("../img/deco_brown.png") no-repeat;
    background-size: cover;
    position: absolute;
    top: -60px;
    right: 0;
    left: 0
}

#policy .txtWrap {
    font-size: 1.6rem;
    letter-spacing: 0.09em;
    margin-top: 40px
}

#policy .listWrap {
    width: 1000px;
    text-align: left;
    padding: 80px;
    margin: 60px auto 0;
    background: #fff
}

#policy .listWrap>ul>li+li {
    padding-top: 40px;
    margin-top: 40px;
    border-top: 1px dashed #c1c1c1
}

#policy .listWrap h2 {
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: 0.09em
}

#policy .listWrap p {
    font-size: 1.6rem;
    letter-spacing: 0.09em;
    margin-top: 20px
}

#policy .listWrap li ul {
    font-size: 1.6rem;
    letter-spacing: 0.09em;
    margin-top: 20px
}

@media screen and (max-width: 768px) {
    #policy .inner {
        width: 100%;
        padding: 180px 4% 100px
    }

    #policy h1 {
        font-size: 2.4rem
    }

    #policy h1::before {
        width: 80px;
        height: 30px;
        top: -50px
    }

    #policy .txtWrap {
        font-size: 1.4rem
    }

    #policy .txtWrap br {
        display: none
    }

    #policy .listWrap {
        width: 100%;
        padding: 40px 20px;
        margin: 60px auto 0
    }

    #policy .listWrap h2 {
        font-size: 1.6rem
    }

    #policy .listWrap p {
        font-size: 1.4rem
    }

    #policy .listWrap li ul {
        font-size: 1.4rem
    }

    #policy .listWrap li li {
        text-indent: -1em;
        padding-left: 1em
    }
}


/* ------ error ------ */

#error .inner {
    width: 1200px;
    text-align: center;
    padding: 200px 10px 200px;
    margin: 0 auto
}

#error h1 {
    color: #42210b;
    font-size: 2.8rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1.4;
    margin-bottom: 10px;
    position: relative
}

#error h1::before {
    content: "";
    width: 100px;
    height: 38px;
    margin: auto;
    background: url("../img/deco_brown.png") no-repeat;
    background-size: cover;
    position: absolute;
    top: -60px;
    right: 0;
    left: 0
}

#error .txtWrap {
    font-size: 1.6rem;
    letter-spacing: 0.09em;
    margin-top: 40px
}

@media screen and (max-width: 768px) {
    #error .inner {
        width: 100%;
        padding: 180px 4% 100px
    }

    #error h1 {
        font-size: 2.4rem
    }

    #error h1::before {
        width: 80px;
        height: 30px;
        top: -50px
    }

    #error .txtWrap {
        font-size: 1.4rem
    }

    #error .txtWrap br {
        display: none
    }
}


/* カートページ */

#content.cart-page {
    padding-bottom: 0 !important
}

#cartPage,
#cartCustomer,
#cartDelivery,
#cartConfirm,
#wc_ordercompletion {
    width: 1020px;
    padding: 200px 10px;
    margin: 0 auto
}

#cartPage .cart_page_title,
#cartCustomer .cart_page_title,
#cartDelivery .cart_page_title,
#cartConfirm .cart_page_title,
#wc_ordercompletion .cart_page_title {
    color: #42210b;
    font-size: 2.8rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 10px !important;
    position: relative
}

#cartPage .cart_page_title::before,
#cartCustomer .cart_page_title::before,
#cartDelivery .cart_page_title::before,
#cartConfirm .cart_page_title::before,
#wc_ordercompletion .cart_page_title::before {
    content: "";
    width: 100px;
    height: 38px;
    margin: auto;
    background: url("../img/deco_brown.png") no-repeat;
    background-size: cover;
    position: absolute;
    top: -60px;
    right: 0;
    left: 0
}

#cartPage .cart_navi,
#cartCustomer .cart_navi,
#cartDelivery .cart_navi,
#cartConfirm .confiem_notice {
    margin-top: 40px
}

#cartPage .cart_navi li.current,
#cartPage .cart_navi li.current:before,
#cartPage .cart_navi li.current:after,
#cartCustomer .cart_navi li.current,
#cartCustomer .cart_navi li.current:before,
#cartCustomer .cart_navi li.current:after,
#cartDelivery .cart_navi li.current,
#cartDelivery .cart_navi li.current:before,
#cartDelivery .cart_navi li.current:after,
#cartConfirm .cart_navi li.current,
#cartConfirm .cart_navi li.current:before,
#cartConfirm .cart_navi li.current:after {
    background: #3d2210 !important
}

#cartPage #cart .upbutton input {
    color: #bf0000 !important;
    border: 1px solid #bf0000 !important
}

#cartPage #cart #cart_table {
    background: #fff
}

#cartPage .send input.continue_shopping_button {
    background: #c1c1c1
}

#cartPage .send input.continue_shopping_button:hover {
    opacity: 0.8
}

#cartPage .footer_explanation .toItemPage {
    width: 240px;
    text-align: center;
    margin: 20px auto 0
}

#cartPage .footer_explanation .toItemPage a {
    width: 100%;
    color: #fff !important;
    font-size: 1.6rem;
    letter-spacing: 0.09em;
    line-height: 50px;
    text-align: center;
    margin: 20px auto 0;
    background: #3d2210;
    border-radius: 5px;
    display: block
}

#cartPage .footer_explanation .toItemPage a:hover {
    opacity: 0.8
}

#cartCustomer #customer-info h5 {
    color: #42210b;
    font-size: 1.6rem;
    letter-spacing: 0.09em;
    padding: 0 0 10px;
    margin: 20px 0
}

#cartCustomer #customer-info table.customer_form {
    background: #fff
}

#cartCustomer #customer-info table.customer_form th,
#cartCustomer #customer-info table.customer_form td {
    padding: 20px !important
}

#cartCustomer .send input.back_cart_button {
    background: #c1c1c1
}

#cartCustomer .send input.back_cart_button:hover {
    opacity: 0.8
}

#cartDelivery #delivery-info table.customer_form {
    background: #fff
}

#cartDelivery #delivery-info table.customer_form th,
#cartDelivery #delivery-info table.customer_form td {
    padding: 20px !important
}

#cartDelivery .send input.back_to_customer_button {
    background: #c1c1c1
}

#cartDelivery .send input.back_to_customer_button:hover {
    opacity: 0.8
}

#cartConfirm #cart #cart_table,
#cartConfirm #cart #point_table tr:nth-child(1) td,
#cartConfirm #cart #point_table tr:nth-child(2) td,
#cartConfirm #confirm_table {
    background: #fff
}

#cartConfirm .send input.back_to_delivery_button {
    background: #c1c1c1
}

#cartConfirm .send input.back_to_delivery_button:hover {
    opacity: 0.8
}

#cartConfirm #confirm_table {
    margin-top: 20px
}

#wc_ordercompletion #cart_completion h3 {
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    margin-bottom: 20px !important
}

#wc_ordercompletion #cart_completion .header_explanation {
    font-size: 1.6rem
}

#cart_completion .send .back_to_top_button {
    background: #c1c1c1
}

#cart_completion .send .back_to_top_button:hover {
    background: #c1c1c1 !important;
    opacity: 0.8
}

@media screen and (max-width: 768px) {

    #cartPage,
    #cartCustomer,
    #cartDelivery,
    #cartConfirm,
    #wc_ordercompletion {
        width: 100%;
        padding: 180px 0 100px
    }

    #cartPage .cart_page_title,
    #cartCustomer .cart_page_title,
    #cartDelivery .cart_page_title,
    #cartConfirm .cart_page_title,
    #wc_ordercompletion .cart_page_title {
        font-size: 2.4rem
    }

    #cartPage .cart_page_title::before,
    #cartCustomer .cart_page_title::before,
    #cartDelivery .cart_page_title::before,
    #cartConfirm .cart_page_title::before,
    #wc_ordercompletion .cart_page_title::before {
        width: 80px;
        height: 30px;
        top: -50px
    }

    #cartPage .footer_explanation .toItemPage a {
        font-size: 1.3rem;
        line-height: 40px;
        border-radius: 4px
    }

    #cartPage #cart .upbutton {
        font-size: 1.3rem;
        text-align: left !important
    }

    #cartPage #cart .upbutton input {
        margin: 10px 0;
        display: block;
        float: right
    }

    #cartPage #cart #cart_table {
        font-size: 1.1rem
    }

    #cartCustomer #customer-info table.customer_form tr {
        padding: 0 !important;
        margin: 0 !important
    }

    #cartCustomer #customer-info table.customer_form tr:last-child {
        border-bottom: none
    }

    #cartCustomer #customer-info table.customer_form th {
        padding-bottom: 0 !important
    }

    #cartCustomer .send {
        margin-top: 20px
    }

    #cartCustomer #customer-info form+h5 {
        margin-top: 40px
    }

    #cartDelivery #delivery-info table.customer_form tr {
        padding: 0 !important;
        margin: 0 !important
    }

    #cartDelivery #delivery-info table.customer_form tr:last-child {
        border-bottom: none
    }

    #cartDelivery #delivery-info table.customer_form th {
        padding-bottom: 0 !important
    }

    #cartDelivery .send {
        margin-top: 20px
    }
}


/* メンバーページ */

#content.member-page {
    padding: 0 !important
}

#memberLogin,
#memberPage,
#memberNew,
#newPassword,
#memberConplete {
    width: 1000px;
    text-align: center;
    padding: 200px 10px 200px;
    margin: 0 auto
}

#memberLogin .loginbox,
#newPassword .loginbox {
    padding-bottom: 0 !important
}

#memberLogin .new-entry {
    margin-bottom: 0
}

#memberLogin .member_page_title,
#memberNew .member_page_title,
#newPassword .member_page_title,
#memberPage .member_page_title,
#memberConplete .member_page_title {
    color: #42210b;
    font-size: 2.8rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1.4;
    margin: 0 0 10px;
    position: relative
}

#memberLogin .member_page_title::before,
#memberNew .member_page_title::before,
#newPassword .member_page_title::before,
#memberPage .member_page_title::before,
#memberConplete .member_page_title::before {
    content: "";
    width: 100px;
    height: 38px;
    margin: auto;
    background: url("../img/deco_brown.png") no-repeat;
    background-size: cover;
    position: absolute;
    top: -60px;
    right: 0;
    left: 0
}

#memberLogin .member-box input.loginmail,
#memberLogin .member-box input.loginpass,
#wc_lostmemberpassword .loginbox input.loginmail {
    height: 50px
}

#memberLogin .member-box input[type="submit"].member_login_button,
#memberLogin .new-entry a,
#memberNew .send input[type="submit"],
#newPassword .loginbox input[type="submit"]#member_login,
#memberPage .send input[type="submit"].editmember {
    color: #fff !important;
    background: #3d2210 !important
}

#memberLogin .member-box input[type="submit"].member_login_button:hover,
#memberLogin .new-entry a:hover,
#memberNew .send input[type="submit"]:hover,
#newPassword .loginbox input[type="submit"]#member_login:hover,
#memberPage .send input[type="submit"].editmember:hover {
    opacity: 0.8 !important
}

#wc_login .loginbox .member-box #nav a {
    text-decoration: underline !important
}

#newPassword .loginbox #nav a {
    margin-top: 8px;
    background: #c1c1c1 !important
}

#newPassword .loginbox #nav a:hover {
    opacity: 0.8
}

#wc_login .loginbox .new-entry,
#wc_member .loginbox .new-entry {
    margin-top: 20px !important;
    background-color: #fff !important
}

#wc_login .error_message,
#wc_member .error_message,
#wc_changepassword .error_message,
#wc_lostmemberpassword .error_message {
    width: 100% !important;
    color: #bf0000 !important;
    text-align: center !important;
    margin: 0 auto !important
}

#memberNew .error_message {
    width: 100% !important;
    color: #bf0000 !important;
    text-align: center !important;
    margin: 0 auto 20px !important
}

#memberNew #newmember table.customer_form {
    background: #fff
}

#memberNew #newmember table.customer_form th,
#memberNew #newmember table.customer_form td {
    padding: 20px !important
}

#memberConplete #memberpages .header_explanation+p {
    font-size: 1.7rem;
    letter-spacing: 0.09em;
    margin-top: 40px
}

#memberConplete #memberpages p a {
    color: #fff !important;
    background: #3d2210 !important
}

#memberConplete #memberpages .send a {
    background: #c1c1c1
}

#memberConplete #memberpages a:hover {
    opacity: 0.8
}

#memberPage #memberinfo {
    margin-top: 40px
}

#memberPage #memberinfo table {
    background: #fff
}

#memberPage #memberinfo .member_submenu {
    margin-top: 20px
}

#memberPage #memberinfo .member_submenu .member-edit a {
    color: #fff !important;
    background: #3d2210
}

#memberPage #memberinfo .member_submenu .member-logout a {
    background: #c1c1c1
}

#memberPage #memberinfo h3 {
    text-align: left;
    padding-bottom: 8px
}

#memberPage #memberinfo .customer_form th,
#memberPage #memberinfo .customer_form td {
    padding: 20px
}

.member-page #memberinfo .send input.editmember,
.member-page #memberinfo .send input.deletemember {
    margin-left: 10px !important
}

.member-page #memberinfo .send input.top,
.member-page #memberinfo .send input.deletemember {
    background: #c1c1c1 !important
}

@media screen and (max-width: 768px) {

    #memberLogin,
    #memberPage,
    #memberNew,
    #newPassword,
    #memberConplete {
        width: 100%;
        padding: 180px 4% 100px
    }

    #memberLogin .new-entry {
        margin-bottom: 0
    }

    #memberLogin .member_page_title,
    #memberNew .member_page_title,
    #newPassword .member_page_title,
    #memberPage .member_page_title,
    #memberConplete .member_page_title {
        font-size: 2.4rem
    }

    #memberLogin .member_page_title::before,
    #memberNew .member_page_title::before,
    #newPassword .member_page_title::before,
    #memberPage .member_page_title::before,
    #memberConplete .member_page_title::before {
        width: 80px;
        height: 30px;
        top: -50px
    }

    #memberNew #newmember table.customer_form tr {
        padding: 0 !important;
        margin: 0 !important
    }

    #memberNew #newmember table.customer_form th {
        padding: 20px 20px 0 !important
    }

    #memberNew #newmember .send {
        margin-top: 20px
    }

    #memberConplete #memberpages .header_explanation+p {
        font-size: 1.4rem
    }

    #memberPage #memberinfo .member_submenu .member-edit {
        margin: 0
    }

    #memberPage #memberinfo .member_submenu .member-logout {
        margin: 10px 0 0
    }

    #memberPage #memberinfo .customer_form tr {
        margin: 0
    }

    #memberPage #memberinfo .customer_form th {
        padding: 20px 20px 0
    }

    .member-page #memberinfo .send input.editmember,
    .member-page #memberinfo .send input.deletemember {
        margin-left: 0 !important
    }

    .member-page #memberinfo .send input.top,
    .member-page #memberinfo .send input.editmember,
    .member-page #memberinfo .send input.deletemember {
        width: 100%
    }

    .member-page #memberinfo .send input.top {
        margin: 0
    }

    .member-page #memberinfo .send input.editmember {
        margin: 10px 0 0
    }

    .member-page #memberinfo .send input.deletemember {
        margin: 10px 0 0
    }
}


/* PC・SP切り替え */

.spOnly {
    display: none !important
}

@media screen and (max-width: 768px) {
    .spOnly {
        display: block !important
    }

    .pcOnly {
        display: none !important
    }
}


/* -----font----- */
.blue-normal {
    color: #2C45A7;
    font-weight: 800;
    font-size: 3.2rem;
    text-align: center;
    text-shadow: 2px 2px 0 #FFF, -2px -2px 0 #FFF,
        -2px 2px 0 #FFF, 2px -2px 0 #FFF,
        0px 2px 0 #FFF, 0 -2px 0 #FFF,
        -2px 0 0 #FFF, 2px 0 0 #FFF;
}

.blue-bold {
    color: #2C45A7;
    font-weight: 800;
    font-size: 4.0rem;
    text-align: center;
    text-shadow: 2px 2px 0 #FFF, -2px -2px 0 #FFF,
        -2px 2px 0 #FFF, 2px -2px 0 #FFF,
        0px 2px 0 #FFF, 0 -2px 0 #FFF,
        -2px 0 0 #FFF, 2px 0 0 #FFF;
}

.red-bold {
    color: #CA3120;
    font-weight: 800;
    font-size: 4.0rem;
    text-align: center;
    text-shadow: 2px 2px 0 #FFF, -2px -2px 0 #FFF,
        -2px 2px 0 #FFF, 2px -2px 0 #FFF,
        0px 2px 0 #FFF, 0 -2px 0 #FFF,
        -2px 0 0 #FFF, 2px 0 0 #FFF;
}

.bold {
    font-weight: 800;
    font-size: 3.2rem;
}

.bold_red {
    color: #CA3120;
    font-weight: 800;
    font-size: 4.0rem;
    .bold_red.bold_red
}

.bg_white {
    background-color: #fff;
    padding: 50px;
}

.bg_blue {
    background-color: #2C45A7;
    padding: 50px;
    width: 100%;
}

@media screen and (max-width: 768px) {

    .blue-normal {
        font-size: 2.2rem;
    }

    .blue-bold {
        font-size: 2.8rem;
    }

    .red-bold {
        font-size: 2.8rem;
    }

    .bold {
        font-size: 2.3rem;
    }

    .bold_red {
        font-size: 2.8rem;
    }

    .contact {
        margin: 0px auto;
        padding: 20px 0;
    }

    .contact2 {
        width: 80%;
        margin: 20px auto;
    }

    .contact_tel {
        color: #000;
        font-weight: 700;
        font-size: 2.2rem;
        text-align: center;
        padding: 20px 35px;
        margin-bottom: 20px;
        background-color: #EC6800;
        border-radius: 3px;
        box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.45);
    }

    .bold img {
        width: 8%;
    }

    .contact_mail {
        color: #000;
        font-weight: 700;
        font-size: 2.2rem;
        text-align: center;
        padding: 20px 35px;
        margin-bottom: 20px;
        background-color: #EC6800;
        border-radius: 3px;
        box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.45);
    }

}