@charset "UTF-8";
/*----------------------------------------

              $[ec]

----------------------------------------*/

.ec__logo {
    width: 300px;
    margin: 0 auto 40px
}

@media screen and (max-width:800px) {
    .ec__logo {
        width: 200px;
        margin: 0 auto 20px
    }
}

.ec__logo a {
    display: block
}

.ec__logo a:hover {
    opacity: .8
}

.ec__top {
    width: 400px;
    margin: 0 auto 40px;
    text-align: center
}

@media screen and (max-width:800px) {
    .ec__top {
        width: 300px;
        margin: 20px auto
    }
}

@media screen and (max-width:640px) {
    .ec__top {
        width: 240px
    }
}

.ec__top h2 {
    margin: 0 0 20px
}

.ec__top p {
    font-size: 20px
}

@media screen and (max-width:800px) {
    .ec__top p {
        font-size: 16px
    }
}

.ec__guide h4 {
    margin: 0 0 30px;
    font-size: 16px;
    line-height: 24px
}

@media screen and (max-width:640px) {
    .ec__guide h4 {
        margin: 0 0 20px;
        font-size: 14px;
        text-align: center
    }
}

.ec__guide h4 span {
    display: inline-block;
    background-color: #40220f;
    padding: 0 30px;
    margin: 0 20px 0 0;
    border-radius: 15px;
    color: #fff
}

@media screen and (max-width:640px) {
    .ec__guide h4 span {
        display: block;
        margin: 0 0 10px
    }
}

.ec__guide h4 strong {
    font-size: 20px
}

.ec__guide a:not(.btn) {
    text-decoration: underline
}

.ec__guide a:not(.btn):hover {
    color: #108c49
}

.ec__guide_top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #f5f7f7;
    padding: 60px 5%
}

@media screen and (max-width:800px) {
    .ec__guide_top {
        padding: 30px 5%
    }
}

.ec__guide_top h3 {
    margin: 0 0 15px;
    font-size: 20px
}

@media screen and (max-width:640px) {
    .ec__guide_top h3 {
        margin: 0 0 10px;
        font-size: 16px
    }
}

.ec__guide_top .nomgb {
    width: 100%
}

.ec__guide_box {
    width: 45%
}

@media screen and (max-width:800px) {
    .ec__guide_box {
        width: 100%
    }
}

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

.ec__guide_nav li {
    width: 30%
}

@media screen and (max-width:800px) {
    .ec__guide_nav li {
        width: 49%;
        margin: 0 0 10px
    }
}

.ec__guide_nav a {
    display: block;
    padding: 10px 16px;
    background-color: #f5f7f7;
    border-radius: 25px;
    text-align: center;
    line-height: 30px
}

@media screen and (max-width:640px) {
    .ec__guide_nav a {
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 11px;
        line-height: 30px;
        letter-spacing: normal
    }
}

.ec__guide_nav a:after {
    float: right;
    content: "\f107";
    font-size: 14px;
    font-family: FontAwesome;
    font-weight: 400
}

.ec__guide_nav a:hover {
    background-color: #108c49;
    color: #fff
}

.ec__guide_logo {
    margin: 0 0 20px
}

@media screen and (max-width:640px) {
    .ec__guide_logo {
        text-align: center
    }
}

.ec__guide_logo img {
    height: 30px
}

@media screen and (max-width:640px) {
    .ec__guide_logo img {
        height: 24px
    }
}

.ec__guide_att {
    margin: 15px 0 40px 1em
}

.ec__guide_att li {
    font-size: 11px;
    font-weight: 500
}

.ec__guide_att li:before {
    content: "※";
    margin: 0 0 0 -1em
}

.ec__itemlist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%
}

.ec__itemlist .item {
    width: 30%;
    margin: 0 1.5% 20px
}

@media screen and (max-width:800px) {
    .ec__itemlist .item {
        width: 48%
    }
}

@media screen and (max-width:640px) {
    .ec__itemlist .item {
        width: 80%
    }
}

.ec__itemlist .item a {
    display: block
}

.ec__itemlist .item a:hover {
    opacity: .8;
    color: #108c49
}

.ec__itemlist .itemTitle h2 {
    font-size: 16px;
    line-height: 1.6
}

@media screen and (max-width:640px) {
    .ec__itemlist .itemTitle h2 {
        font-size: 14px
    }
}

.ec__itemlist .itemDetail {
    color: #108c49;
    font-size: 18px;
    font-family: Ubuntu, sans-serif
}

@media screen and (max-width:640px) {
    .ec__itemlist .itemDetail {
        font-size: 12px
    }
}

.ec__itemlist .itemPrice span {
    font-size: 12px
}

.ec__itemlist .itemSend {
    display: inline-block;
    background: #f5f7f7;
    padding: 0 1em;
    margin: .5em 0;
    color: #40220f;
    font-size: 12px
}

.ec__itemlist .itemImg {
    position: relative;
    margin: 0 0 10px
}

.ec__itemlist .comingSoon {
    color: #e83828;
    font-size: 14px
}

.ec__itemlist .soldout_cover {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.ec__itemlist .soldout_cover p {
    margin: 0;
    font-size: 18px;
    font-family: Ubuntu, sans-serif;
    text-align: center
}

@media screen and (max-width:640px) {
    .ec__itemlist .label_image {
        width: 40px;
        height: 40px
    }
}

.ec__itempage .item {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 0 60px
}

.ec__itempage .itemImg {
    width: 50%
}

@media screen and (max-width:800px) {
    .ec__itempage .itemImg {
        width: 100%;
        margin: 0 auto 20px
    }
}

.ec__itempage .itemImg #slideImgPager .mCSB_container {
    display: flex;
    flex-wrap: wrap;
    width: 100%
}

.ec__itempage .itemImg #slideImgPager li {
    width: 18%;
    max-width: 70px;
    margin: 5px 1% 0
}

.ec__itempage .itemImg #slideImgPager img {
    width: 100%;
    height: auto
}

.ec__itempage .itemImg .imgBox .btn {
    max-width: 100%;
    margin: 0
}

.ec__itempage .purchase {
    width: 45%
}

@media screen and (max-width:800px) {
    .ec__itempage .purchase {
        width: 100%
    }
}

.ec__itempage .purchase .itemTitle {
    margin: 15px 0;
    font-size: 28px;
    line-height: 1.6
}

@media screen and (max-width:800px) {
    .ec__itempage .purchase .itemTitle {
        margin: 10px 0;
        font-size: 20px
    }
}

.ec__itempage .purchase .itemPrice {
    margin: 0 0 20px
}

.ec__itempage .purchase .itemPrice h2 {
    color: #108c49;
    font-size: 20px;
    font-family: Ubuntu, sans-serif
}

@media screen and (max-width:640px) {
    .ec__itempage .purchase .itemPrice h2 {
        font-size: 16px
    }
}

.ec__itempage .purchase .itemPrice h2 span {
    font-size: 12px
}

.ec__itempage .purchase .itemPrice span {
    color: #108c49
}

.ec__itempage .purchase .itemPrice.itemPrice_soldout h2 {
    text-decoration: line-through
}

.ec__itempage .purchase .itemPrice .comingSoon {
    color: #e83828;
    font-size: 14px
}

.ec__itempage .purchase #itemAttention {
    margin: 0 0 20px
}

.ec__itempage .purchase #itemAttention p {
    margin: 0;
    font-size: 11px;
    font-weight: 500
}

.ec__itempage .purchase #itemAttention a {
    text-decoration: underline
}

.ec__itempage .purchase #itemAttention a:hover {
    color: #108c49
}

.ec__itempage .purchase #itemSelect {
    margin: 0 0 20px
}

.ec__itempage .purchase #itemSelect #amountSelectWrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

.ec__itempage .purchase #itemSelect #amountSelect {
    margin: 0 0 0 10px;
    line-height: 20px
}

.ec__itempage .purchase .purchaseButton {
    margin: 0 0 20px
}

.ec__itempage .purchase .purchaseButton .purchaseButton__btn--addToCart {
    display: block;
    border-radius: 30px;
    width: 100%;
    background: #108c49;
    margin: 20px 0;
    padding: 10px 0;
    cursor: pointer;
    color: #fff;
    font-size: 20px;
    line-height: 40px;
    text-align: center;
    font-family: "M PLUS Rounded 1c", メイリオ, sans-serif;
    font-weight: 600
}

@media screen and (max-width:640px) {
    .ec__itempage .purchase .purchaseButton .purchaseButton__btn--addToCart {
        font-size: 16px;
        line-height: 30px
    }
}

.ec__itempage .purchase .purchaseButton .purchaseButton__btn--addToCart:hover {
    transition: .4s ease-in-out;
    background: #a1c303;
    color: #fff
}

.ec__itempage .purchase .purchaseButton .purchaseButton__btn--noItem {
    display: block;
    border: 1px solid #108c49;
    padding: 10px 0;
    color: #108c49;
    font-size: 12px;
    text-align: center
}

.ec__itempage .purchase .purchaseButton .purchaseButton__btn:hover {
    opacity: .8
}

.ec__itempage .purchase .shareButtons {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0
}

.ec__itempage .purchase .shareButtons>div {
    margin-right: 4px
}

.ec__itempage .purchase #reportBtn a {
    color: #ccc;
    font-size: 11px;
    font-weight: 500
}

.ec__itempage .itemDescription {
    width: 100%;
    margin: 20px 0
}

.ec__itempage .itemDescription a {
    text-decoration: underline
}

.ec__contact h1,
.ec__contact h2,
.ec__law h1,
.ec__law h2,
.ec__privacy h1,
.ec__privacy h2 {
    width: 100%;
    margin: 0 0 30px;
    font-size: 30px;
    font-weight: 700;
    line-height: 2;
    text-align: center
}

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

    .ec__contact h1,
    .ec__contact h2,
    .ec__law h1,
    .ec__law h2,
    .ec__privacy h1,
    .ec__privacy h2 {
        font-size: 26px
    }
}

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

    .ec__contact h1,
    .ec__contact h2,
    .ec__law h1,
    .ec__law h2,
    .ec__privacy h1,
    .ec__privacy h2 {
        font-size: 18px;
        line-height: 1.8
    }
}

.ec__contact h1:before,
.ec__contact h2:before,
.ec__law h1:before,
.ec__law h2:before,
.ec__privacy h1:before,
.ec__privacy h2:before {
    display: block;
    font-size: 14px;
    font-family: Ubuntu, sans-serif;
    line-height: 20px
}

.ec__contact h3,
.ec__law h3,
.ec__privacy h3 {
    display: inline-block;
    background-color: #40220f;
    margin: 30px 0;
    padding: 0 30px;
    border-radius: 15px;
    color: #fff;
    font-size: 16px;
    line-height: 24px
}

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

    .ec__contact h3,
    .ec__law h3,
    .ec__privacy h3 {
        margin: 15px 0;
        font-size: 14px;
        text-align: center
    }
}

.ec__contact p,
.ec__law p,
.ec__privacy p {
    margin: 0
}

.ec__contact .main {
    height: auto
}

.ec__contact .inquirySection {
    padding: 0
}

.ec__contact .inquirySection p {
    text-align: center
}

.ec__contact .inquirySection dt span {
    margin: 0 0 0 5px;
    color: #108c49
}

.ec__contact .inquirySection dd {
    margin: 0 0 20px
}

.ec__contact .inquirySection input {
    width: 100%
}

.ec__contact .inquirySection textarea {
    width: 100%;
    height: 200px
}

.ec__contact .inquirySection .control-panel {
    margin: 40px auto
}

.ec__contact .inquirySection #buttonLeave {
    display: block;
    width: 400px;
    padding: 5px 0;
    margin: 20px auto;
    background: #fff;
    border: solid 2px #40220f;
    cursor: pointer;
    font-size: 16px;
    font-family: "M PLUS Rounded 1c", メイリオ, sans-serif;
    font-weight: 600;
    line-height: 30px;
    text-align: center
}

@media screen and (max-width:640px) {
    .ec__contact .inquirySection #buttonLeave {
        font-size: 12px
    }
}

.ec__contact .inquirySection #buttonLeave:hover {
    background: #40220f;
    color: #fff;
    transition: .4s ease-in-out
}

.ec__privacy h2:before {
    content: "PRIVACY POLICY"
}

.ec__privacy .privacy_intro,
.ec__privacy dd {
    margin: 0 0 40px
}

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

    .ec__privacy .privacy_intro,
    .ec__privacy dd {
        margin: 0 0 20px
    }
}

.ec__privacy dt {
    font-size: 18px
}

@media screen and (max-width:640px) {
    .ec__privacy dt {
        font-size: 16px
    }
}

.ec__law h2:before {
    content: "LAW"
}

#baseMenu {
    position: absolute;
    top: 20px;
    right: 20px
}

#baseMenu ul {
    display: flex;
    flex-wrap: wrap
}

#baseMenu li {
    width: 24px;
    margin: 0 15px
}

@media screen and (max-width:640px) {
    #baseMenu li {
        width: 20px;
        margin: 0 5px
    }
}

#baseMenu a {
    display: block
}

#baseMenu a:hover {
    opacity: .8
}

#baseMenu img {
    width: 100%;
    height: auto
}