@CHARSET "UTF-8";

/* =====================================
	SP
======================================= */
#wrap{
    padding-bottom: 6rem;
    background: #faf9f4;
}
/* コンテンツ 白 */
.con-wh{
    background: #fff;
    margin: 0 auto 3rem;
    width: 100%;
}

/* コンテンツタイトル */
.con-title{
    margin: 0 3% 2rem;
}
.con-title img{
    width: 90%;
    margin: 0 auto;
}
.con-title::after{
    content: '';
    display: block;
    margin: 0 auto;
    padding-bottom: .75rem;
    width: 4rem;
    border-bottom: solid 1px #5b2e2e;
}


/* コンテンツサブタイトル　茶 */
.con-sub-title{
    margin-bottom: .75rem;
    padding: .3rem .75rem .2rem;
    background: #292121;
    color: #fff;
    font-weight: normal;
    font-size: 1rem;
    line-height: 1.4em;
    letter-spacing: .06em;
}

/* 三角飾り付き枠 */
.con-triangle{
    padding: 1rem;
    background: #faf9f4;
    position: relative;
}
.con-triangle:not(:last-of-type){
    margin-bottom: 1rem;
}
/* 三角飾り */
.con-triangle::after{
    content: '';
    display: block;
    border-top: solid .75rem #beab32;
    border-left: solid .75rem #beab32;
    border-right: solid .75rem transparent;
    border-bottom: solid .75rem transparent;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
}
.con-triangle-title{
    margin-bottom: .75rem;
    padding-bottom: .2rem;
    border-bottom: solid 2px #beab32;
    color: #5b2e2e;
    font-size: 1rem;
}

/* 枠 */
.con-frame{
    box-sizing: border-box;
    border: solid 1px #5b2e2e;
    background: #fff;
}
.con-frame:not(:last-of-type){
    margin-bottom: 1rem;
}
.con-frame-title{
    padding: .3rem .75rem .2rem;
    background: #292121;
    color: #fff;
    font-weight: normal;
    font-size: 1rem;
    line-height: 1.4em;
    letter-spacing: .06em;
}
.con-frame .con-frame-inner{
    padding: 0.75rem 1rem 1rem;
}

/* リスト　マーク付き */
.con-list li{
    box-sizing: border-box;
    background: url(../img/common/icon_square.svg) no-repeat top .36em left / .7em auto;
    padding-left: 1rem;
    font-size: .9rem;
    line-height: 1.5em;
}
.con-list li:not(:last-of-type){
    margin-bottom: .75rem;
}

/* 本文 */
.body-text{
    margin-bottom: .75rem;
    font-size: .9rem;
}
/* 注釈・補足 */
.notes{
    display: block;
    margin-top: .4rem;
    color: #554b4b;
    font-size: .8rem;
    line-height: 1.5em;
}
/* 重要な注意事項 */
.significant-text{
    margin: 0 3%;
    color: #921e1e;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.4em;
    text-align: center;
}


/*
header
------------------------------------------ */
#header{
    background: #292121;
}
#header .header-box{
    margin: 0 auto;
    padding: .6rem .4rem;
}
#header .header-box .logo-area{
    width: 50%;
}


/*
    tab
------------------------------------------ */
#tab-navi{
    width: 100%;
    background: #fff;
    padding: .75rem 0;
}

.tab-area .tab-btn{
    margin: 0 3% -.4rem;
}
.tab-area .tab-btn li{
    margin-bottom: .4rem;
    padding: .8rem 0 .6rem;
    width: 49%;
    border-radius: .75rem;
    border: solid 1px #5b2e2e;
    color: #5b2e2e;
    font-size: 1.1rem;
    text-align:center;
    line-height: 1.3rem;
    transition: all ease 200ms;
}
.tab-area .tab-btn li.select{
    border: solid 1px #75a4cc;
    background: #75a4cc;
    color: #fff;
}
.tab-area .tab-content{
    display: none;
}


/*
お取引の流れ
------------------------------------------ */
#flow-step{
    margin: 0 auto;
    padding: 3rem 0;
}
#flow-step .flow-step-area li{
    background: #fff;
    position: relative;
}
#flow-step .flow-step-area li:not(:last-of-type){
    margin-bottom: 1.5rem;
}
/* ↓ */
#flow-step .flow-step-area li:not(:last-of-type)::after{
    content: '';
    display: block;
    background: url(../img/guide/flowstep_arrow.svg) no-repeat center / contain;
    width: 3rem;
    height: 1.5rem;
    position: absolute;
    left: 1.5rem;
    bottom: -1.5rem;
}

/* 見出し ------------------- */
#flow-step .flow-step-area li .step-heading{
    background: #f2dd58;
    padding: .75rem 1rem;
    font-family: "Roboto Slab", Garamond, "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    font-weight: bold;
    font-size: 1.4rem;
    line-height: 1.2em;
    position: relative;
}
/* 三角飾り */
#flow-step .flow-step-area li .step-heading::after{
    content: '';
    display: block;
    border-top: solid .75rem #5b2e2e;
    border-left: solid .75rem #5b2e2e;
    border-right: solid .75rem transparent;
    border-bottom: solid .75rem transparent;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
}
/* 番号 */
#flow-step .flow-step-area li .step-heading .step-no{
    font-size: 1.6em;
    font-style: italic;
    margin-right: .5rem;
    line-height: 1em;
}

#flow-step .flow-step-area li .step-detail{
    padding: .75rem 1rem 1rem;
    font-size: .9rem;
}


/*
お支払い
------------------------------------------ */
#payment{
    margin: 0 auto;
    padding: 3rem 0;
}
#payment .payment-inner .payment-box{
    box-sizing: border-box;
    margin: 0 3%;
    padding: 1rem;
    border: solid 1px #5b2e2e;
    background: #fff;
}
#payment .payment-inner .payment-box:not(:last-of-type){
    margin-bottom: 1rem;
}
#payment .payment-inner .payment-box .con-sub-title{
    text-align: center;
}

/* 計算方法 ---------------------------- */
#payment .payment-inner .payment-box .method-calc{
    margin-bottom: 1rem;
}
#payment .payment-inner .payment-box .method-calc ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
#payment .payment-inner .payment-box .method-calc ul li{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: .4rem .75rem;
    border-radius: .75rem;
    border: solid 2px #cdcbb4;
    width: 1em;
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.2em;
    text-align: center;
    position: relative;
}
#payment .payment-inner .payment-box .method-calc ul li:last-of-type{
    width: 25%;
}

#payment .payment-inner .payment-box .method-calc ul li:not(:last-of-type)::after{
    content: '+';
    display: block;
    font-size: 1.4rem;
    position: absolute;
    top: 50%;
    left: calc(100% + .68rem);
    transform: translateY(-50%);
}
#payment .payment-inner .payment-box .method-calc ul li:nth-of-type(3)::after{
    content: '=';
}

/* お支払い方法 ---------------------------- */
#payment .payment-inner .payment-box .bank-list{
    margin-bottom: 1rem;
}
#payment .payment-inner .payment-box .bank-list li{
    margin-bottom: .2rem;
}
#payment .payment-inner .payment-box .bank-info{
    font-size: .9rem;
    line-height: 1.5em;
}
#payment .payment-inner .payment-box .bank-info b{
    display: block;
    margin-bottom: .2rem;
    padding-bottom: .2rem;
    border-bottom: solid 2px #cdcbb4;
    font-weight: bold;
    line-height: 1.2em;
}
#payment .payment-inner .payment-box .bank-info span{
    color: #554b4b;
    font-size: .8rem;
    display: block;
}

@media screen and (max-width: 340px){
    #payment .payment-inner .payment-box .method-calc ul li:not(:last-of-type)::after{
        left: calc(100% + .3rem);
    }
}


/*
    配送
------------------------------------------ */
#delivery{
    margin: 0 auto;
    padding: 3rem 0;
}
#delivery .con-triangle{
    margin: 0 3%;
}
#delivery .con-triangle:not(:last-of-type){
    margin-bottom: 1rem;
}

/* 配送場所 ------------------------ */
#delivery .deli-place{
    margin-bottom: 1rem;
    width: 100%;
}
#delivery .deli-place li{
    display: table;
}
#delivery .deli-place li:not(:last-of-type){
    margin-bottom: .6rem;
}
#delivery .deli-place li span{
    display: table-cell;
    width: 3.4em;
    padding: .4rem .75rem;
    color: #fff;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}
#delivery .deli-place li p{
    display: table-cell;
    padding-left: .75rem;
    font-weight: bold;
    line-height: 1.4em;
    vertical-align: middle;
}
#delivery .deli-place .o-item span{
    background: #35487f;
    letter-spacing: .08em;
}
#delivery .deli-place .o-item p{
    color: #35487f;
}
#delivery .deli-place .b-item span{
    background: #c7b810;
    text-shadow: 1px 1px 1px #c1b316,
        -1px 1px 1px #c1b316,
        1px -1px 1px #c1b316,
        -1px -1px 1px #c1b316;
}
#delivery .deli-place .b-item p{
    color: #8e851f;
}


/*
    ご注意
------------------------------------------ */
#attention{
    margin: 0 auto;
    padding: 3rem 0;
}
#attention .con-frame{
    margin: 0 3%;
}
#attention .con-frame:not(:last-of-type){
    margin-bottom: 1rem;
}
#attention .con-frame-inner{
    font-size: .9rem;
    line-height: 1.5em;
}
#attention .significant-text{
    margin-top: 1.5rem;
}


/*
    返品
------------------------------------------ */
#returns{
    margin: 0 3%;
    padding: 3rem 0;
}
#returns .significant-text{
    margin-bottom: 1rem;
}
#returns .returns-text{
    margin-bottom: 1rem;
    font-size: .9rem;
}

/* 注釈 ------------------- */
#returns .returns-notes li{
    display: table;
    margin-bottom: .75rem;
    font-size: .9rem;
    line-height: 1.5em;
}
#returns .returns-notes li::before{
    content: '※';
    display: table-cell;
}
#returns .con-frame-inner{
    font-size: .9rem;
}


/*
営業時間
------------------------------------------ */
#about-shop{
    margin: 0 auto;
    padding: 3rem 0;
}

#about-shop .about-shop-box{
    margin: 0 3%;
    border: solid 1px #5b2e2e;
    background: #fff;
}
#about-shop .about-shop-box:not(:last-of-type){
    margin-bottom: 1rem;
}
#about-shop .about-shop-box .about-shop-box-title{
    margin-bottom: .75rem;
    padding: .3rem .75rem .2rem;
    background: #292121;
    color: #fff;
    font-weight: normal;
    font-size: 1rem;
    line-height: 1.4em;
    letter-spacing: .06em;
}
#about-shop .about-shop-box .about-shop-box-text{
    box-sizing: border-box;
    padding: 0 1rem 1rem;
}
#about-shop .about-shop-box .about-shop-box-text p{
    font-size: .9rem;
    line-height: 1.5em;
}
#about-shop .about-shop-box .about-shop-box-text p:not(:last-of-type){
    margin-bottom: .75rem;
}
#about-shop .about-shop-box .about-shop-box-text p b{
    font-size: 1rem;
}
/*iphone*/
#about-shop .about-shop-box .about-shop-box-text p b a{
    text-decoration: none;
    pointer-events: none;
}


/*
最下部注意
------------------------------------------ */
.summary-block{
    box-sizing: border-box;
    margin: 3rem 3% 0;
    padding: 1rem;
    border: solid 4px #921e1e;
    background: #fff;
}
.summary-block .summary-block-lead{
    display: block;
    margin-bottom: .4rem;
    color: #921e1e;
    font-weight: bold;
    line-height: 1.4em;
    position: relative;
}

.summary-block p{
    font-size: .9rem;
    line-height: 1.5em;
}



/*
footer
------------------------------------------ */
#footer{
    background: #292121;
}
#footer .footer-inner{
    margin: 0 auto;
    padding: 1.5rem 3% 3rem;
}
#footer .company-info{
    width: 100%;
}
#footer .company-info .footer-logo{
    display: block;
    margin-bottom: .6rem;
}
#footer .company-info .footer-logo img{
    width: 40%;
}
#footer .company-info .kobutsu{
    margin-bottom: .75rem;
    color: #fff;
    font-size: .7rem;
    line-height: 1.6em;
    text-indent: -.5em;
}
#footer .company-info .company-info-link{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 1rem;
}
#footer .company-info .company-info-link li{
    width: calc(50% - .5rem);
}
#footer .company-info .company-info-link li:first-of-type{
    margin-right: 1.5rem;
}

#footer .cate-list{
    margin-bottom: 1rem;
}
#footer .cate-list li,
#footer .item-list li{
    margin-bottom: .6rem;
}
#footer .cate-list,
#footer .item-list{
    -webkit-box-flex: 2;
    -ms-flex: 2;
    flex: 2;
    -webkit-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 1.5rem;
    column-gap: 1.5rem;
    padding: .4rem 0;
}

#footer .footer-link{
    display: block;
    box-sizing: border-box;
    padding-right: 1.2em;
    background: url(../img/common/arrow_ye.svg) no-repeat center right / 1em auto;
    color: #fff;
    font-size: .76rem;
    line-height: 1.4em;
    text-decoration: none;
}

/* コピーライト */
#footer .copyright{
    padding: .4em 0 .3rem;
    background: #beab32;
    font-size: .7rem;
    text-align: center;
    line-height: 1.2em;
}