@charset "UTF-8";
/* =========================================================
PAGE COMMON
========================================================= */

a {
    outline: 0;
    -webkit-transition: opacity 0.4s ease-out 0s;
    transition: opacity 0.4s ease-out 0s;
}

a:link {
    text-decoration: none;
    color: rgba(45, 45, 45, 1.00);
}

a:visited {
    text-decoration: none;
    color: rgba(45, 45, 45, 1.00);
}

a:hover {
    text-decoration: none;
    color: rgba(45, 45, 45, 0.6);
}

a:active {
    text-decoration: none;
    color: rgba(45, 45, 45, 0.6);
}

body {
    margin: 0 auto;
    font-family: 'Roboto Condensed', "游ゴシック", "Yu Gothic", YuGothic, sans-serif;

}

#allWrap {
    width: 100%;
    overflow: hidden;
    font-size: 1.4rem;
    line-height: 1.8;
    letter-spacing: 0.2em;
    color: rgba(40, 40, 40, 1.00);
    -webkit-overflow-scrolling: touch;
    -webkit-transition: all 0.4s linear 0s;
    transition: all 0.4s linear 0s;
    background: #fff;
}

#allWrap p {
    /*line-height: 2;
    margin-bottom: 1.2em;*/
    color: rgba(41, 41, 41, 1.00);
}

/* SAZABY LOGO
------------------------------ */

#allWrap .logoArea {
    position: relative;
    max-width: 1800px;
    margin: 0 auto;
}

#allWrap .logoArea .logo {
    display: block;
    position: absolute;
    width: 80px;
    top: 30px;
    right: 30px;
    z-index: 10;
    -webkit-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;
}

/* ################ ↓↓↓ MEDIAQUERY ↓↓↓ ########## */

@media screen and (max-width: 1000px) {
    #allWrap .logoArea .logo {
        width: 50px;
        top: 30px;
        right: 20px;
    }
}

/* ############## ↑↑↑ MEDIAQUERY ↑↑↑ ########## */

/* ################ ↓↓↓ MEDIAQUERY ↓↓↓ ########## */

@media screen and (min-width: 641px) {
    /*#allWrap .logoArea .logo {
    width: 80px;
    top: 30px;
    right: 30px;
}*/
}

/* ############## ↑↑↑ MEDIAQUERY ↑↑↑ ########## */

#bg {
    position: fixed;
    width: calc(100vw + 60px);
    height: calc(100vh + 60px);
    top: -30px;
    left: -30px;
    z-index: -1;
    background-image: url(./img/bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

#bg .inner {}

/* =========================================================
HEADER
========================================================= */

#mainHdr {
    background: #fff;
    position: relative;
    width: 100%;
    margin: 0 auto;
    /*height: 640px;*/
}

#mainHdr h1 img {
    width: 70px;
}

/*
#mainHdr h1 {
    padding: 15px 0;
}
*/
#mainHdr h1 {
    padding: 23px 0;
}

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

@media screen and (min-width: 1201px) {
    #mainHdr h1 .logo {
        text-align: left;
    }
}

#mainHdr h1 .logo img {}

#mainHdr h1 .ttl {
    color: rgba(47, 47, 47, 1.00);
    /*font-size: 5.5rem;*/
    letter-spacing: 0.2em;
    line-height: 1.6;
    /*padding: 0 0 0 0.6em;*/
}

/* ### Variable Font Size ### */

#mainHdr h1 .ttl {
    font-size: 4.58vw;
    /* [ 55px / 1200px * 100 =  4.58vw ] */
}

/*
最小フォントサイズを30pxとすると
[ 28px / 4.58vw * 100 = 611.35...px ]
width 611px 以下で数値を指定
*/

@media screen and (max-width: 611px) {
    #mainHdr h1 .ttl {
        font-size: 4.4rem;
    }
}

/* width 1201px 以上では、フォントサイズ固定 */

@media screen and (min-width: 1201px) {
    #mainHdr h1 .ttl {
        font-size: 5.5rem;
    }
}

/* ### ----- ### */

#mainHdr .present {
    position: absolute;
    top: 30px;
    right: -40px;
}

#mainHdr .present a img {
    -webkit-transition: .5s;
    transition: .5s;
    max-width: 230px;
}

#mainHdr .present a img:hover {
    -webkit-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
    -webkit-transition: .5s;
    transition: .5s;
}

@media screen and (max-width: 741px) {
    #mainHdr .present {
        top: 46%;
        right: 5%;
        width: 45%;
    }

    #mainHdr .present a img {
        -webkit-transition: .5s;
        transition: .5s;
        max-width: 100%;
    }
}


/*バナーリンク*/

#mainHdr .cpbnr{
    width: 100%;
    margin: 0 auto;
    max-width: 410px;
}
@media screen and (min-width: 641px) {
    #mainHdr .cpbnr{
        margin: 17px auto;
        }
    }
@media screen and (min-width: 1025px) {
     #mainHdr{
        position: relative;
    }
    #mainHdr .cpbnr{
        position: absolute;
        bottom: 0;
        right: 0;
        max-height: 68px;
        max-width: auto;
    }
}

/* =========================================================
CONTENTS
========================================================= */
#cntWrap {
    background: #f9f9f7;
    font-family: 'Roboto Condensed', "游ゴシック", "Yu Gothic", YuGothic, sans-serif;

}

#cntWrap h2 {
    /*font-size: 3rem;*/
    letter-spacing: 0.15em;
    font-weight: 500;
}

/* ### Variable Font Size ### */

/* 可変値算出 [ 30px / 1200px * 100 =  2.5vw ] */

/* 最小値の幅算出 [ 20px / 2.5vw * 100 = 800px ] */

#cntWrap h2 {
    /*font-size: 2.5vw;
    margin-bottom: 30px; */
}

#cntWrap a:hover {
    opacity: 0.8;
    -webkit-transition: .8s;
    transition: .8s;
}

#cntWrap a img:hover {
    opacity: 0.5;
    -webkit-transition: .8s;
    transition: .8s;
}

@media screen and (min-width: 1201px) {}

/*cont common layout
===================*/

#cntWrap h2 i {
    display: inline-block;
}

#cntWrap .ttl p {
    margin-bottom: 40px;
}

@media screen and (max-width: 900px) {
    #cntWrap .ttl p {
        margin-bottom: 4.4vw;
    }
}

#cntWrap .ttl p i {
    display: inline-block;
}

#cntWrap section.main-visual h2 {
    background: url(../index/img/main_img.jpg) no-repeat;
    background-position: center;
    background-size: auto;
    height: 628px;
}

@media screen and (max-width: 800px) {
    #cntWrap section.main-visual h2 {
        background: url(../index/img/main_img.jpg) center center / cover no-repeat;
        width: 100%;
        height: 0;
        padding-top: calc(1000 / 640 * 43%);
        /* calc(画像高さ ÷ 画像横幅 × 100%) */
    }
}

#cntWrap .flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

#cntWrap .reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    flex-direction: row-reverse;
    -moz-flex-direction: row-reverse;
    -o-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
}

h3.cnt-main-img {
    padding: 0;
    max-width: 200px;
    margin: 0 auto;
}

h4.cnt-ttl {
    font-size: 3.2rem;
    margin: 0 auto 40px;
    line-height: 1;
}

#cntWrap .more-info {
    background: #ffffff;
    max-width: 550px;
    margin: 100px auto 0;
    -webkit-transition: .5s;
    transition: .5s;
}

#cntWrap .more-info a {
    font-weight: bold;
    font-size: 1.4rem;
    -webkit-transition: .5s;
    transition: .5s;
    border: 1px solid #a5a2a1;
    border-radius: 2px;
    background: #ffffff;
    padding: 20px;
    margin: 0 auto 0;
    display: block;
}

#cntWrap #BlkCnt01 .more-info a {
    background: #f6f6f0;
}

#cntWrap #BlkCnt02 .more-info a {
    background: #e8e9ed;
}

#cntWrap .more-info a:hover {
    background: #333 !important;
    -webkit-transition: .5s;
    transition: .5s;
    color: #fff;
}

#cntWrap div.btn_margin {
    margin-top: 60px;
}

@media screen and (max-width: 640px) {
.smallsp{
    font-size: 1.2rem;
    }
    .lotsTxt{
        padding: .5em 0;
    }
}

@media screen and (max-width: 741px) {
    #cntWrap .more-info {
        max-width: 550px;
        width: 86%;
        margin: 30px auto 0;
    }

    #cntWrap .more-info a {
        font-weight: bold;
        font-size: 1.2rem;
    }

    #cntWrap .margin_ul {
        margin-top: 40px;
    }

    #cntWrap div.btn_margin {
        margin-top: 80px;
    }
}

#BlkCnt01 {
    background: #f9f9f7;
}

#BlkCnt02 {
    background: #f1f2f4;
}

#BlkCnt03 {
    background: #f9f9f7;
}

#BlkCnt04 {
    background: #fdfcf6;
}

#BlkCnt05 {
    background: #dcf0f9;
}

#allWrap .limitedClr,
.limitedClr a {
    color: #c01b57;
}

/*blo01
===========================*/

#cntWrap .blo01 {
    max-width: 1300px;
    margin: 0px auto 0;
    /*padding: 100px 0 100px;*/
}

#cntWrap .blo01 .ttl-t {
    font-size: 1.5rem;
    line-height: 3.0rem;
    color: #292929;
    margin: 25px;
    text-align: center;
}

#cntWrap .blo01 .ttl-t span {
    font-size: 1.8rem;
    line-height: 3.0rem;
    color: #292929;
    margin: 25px;
    text-align: center;
}

#cntWrap .blo01 .ttl-l {
    font-size: 2.4rem;
    color: #292929;

    text-align: center;
    margin: 0 auto 20px;
}

#cntWrap .blo01 .blo01_a .ttl-l {
    font-size: 2.4rem;
    color: #000000;
    text-align: center;
    margin: 0 auto 20px;
    letter-spacing: 0.7rem;
    font-weight: 500;
}

#cntWrap .blo01 .blo01_a .ttl-t {
    margin: 0;
    color: #000000;
    margin: 0px 0 15px;
    letter-spacing: 0.7rem;
    font-weight: 500;
}

#cntWrap .blo01 .blo01_b p {
    color: #292929;
}

#cntWrap .blo01 .blo01_a {
    /*background: #e7b1be;
    padding: 80px;*/
    padding: 60px 0 0px;
}

#cntWrap .blo01 .blo01_b {
    margin: 60px auto 80px;
}

div.top_ig {
    width: 30px;
    margin: 0px 90%;
    padding: 20px 0 0;
}

@media screen and (max-width: 741px) {
    #cntWrap .blo01 {
        max-width: 100%;
        margin: 0 auto 0;
        padding: 0;
    }

    #cntWrap .blo01 .blo01_a .ttl-t {
        margin: 0px 0 10px;
        letter-spacing: 0.7rem;
    }

    #cntWrap .blo01 .ttl-t {
        font-size: 1.3rem;
        line-height: 2rem;
        color: #2f2f2f;
        text-align: center;
    }

    #cntWrap .blo01 .ttl-l {
        font-size: 2.0rem;
        color: #fff;
        text-align: center;
        margin: 26px auto 0;
    }

    #cntWrap .blo01 .blo01_a {
        padding: 40px 0 40px;
    }

    #cntWrap .blo01 .blo01_a .ttl-l {
        font-size: 2rem;
        margin: 0 auto 20px;
        letter-spacing: 1rem;
    }

    div.top_ig {
        width: 30px;
        margin: 0px 88%;
        padding: 20px 0 0;
    }
}

/*blo02
===========================*/

#cntWrap .blo02 {
    max-width: 1300px;
    margin: 0 auto 0px;
    padding: 10px 0 100px;
}

#cntWrap .blo02 .cnt-ttl-t {
    margin-bottom: 60px;
}

#cntWrap .blo02-l {
    width: 65%;
    text-align: left;
    margin: 60px auto 0;
    font-size: 2.4rem;
}

#cntWrap .blo02-t {
    width: 65%;
    text-align: center;
    margin: 20px auto 60px;
    font-size: 1.5rem;
    line-height: 2;
    letter-spacing: 0.4rem;
    font-weight: 500;
}
@media screen and (max-width: 820px) {
    #cntWrap .blo02-t {
        width: 75%;
    }
}



#cntWrap .blo02 ul.flex > li {
    max-width: 400px;
    margin: 0 30px 0px;
}

#cntWrap .blo02 ul.flex > li:last-child,
#cntWrap .blo02 ul.flex > li:nth-last-child(2) {
    margin: 0 30px;
}

#cntWrap .blo02 dt.mgn-r {
    margin-right: 80px;
}

#cntWrap .blo02 ul.t-left {
    text-align: left;
}

#cntWrap .blo02 ul.t-left li.from-left {
    font-size: 1.5rem;
    font-family: "Prata", "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

#cntWrap .blo02 .line-h {
    line-height: 3.1;
}

@media screen and (max-width: 741px) {
    h4.cnt-ttl {
        margin: 0 auto 30px;
        font-size: 2.6rem;
        line-height: 1.5;
    }

    /*#cntWrap .blo02 {
        max-width: 100%;
        margin: 0 auto;
        padding: 20px 4% 80px;
    }*/
    #cntWrap .blo02 ul.flex > li {
        max-width: 100%;
        margin: 0 auto 40px;
    }

    #cntWrap .blo02 ul.flex > li:nth-last-child(2) {
        margin: 0 auto 70px;
    }

    #cntWrap .blo02 ul.flex > li:last-child {
        margin: 0 auto;
    }

    #cntWrap .blo02 ul.t-left {
        text-align: center;
        margin: 30px auto 0;
    }

    #cntWrap .blo02 ul.t-left > .pro-name {
        margin: 10px auto;
    }

    #cntWrap .blo02 ul.t-left li.from-left {
        font-size: 1.5rem;
        font-family: "Prata", "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    }

    #cntWrap .blo02 .line-h {
        line-height: 3.1;
    }

    #cntWrap .blo02-t {
        width: 100%;
        text-align: center;
        margin: 20px auto 60px;
        font-size: 1.4rem;
        line-height: 2;
    }
}

#cntWrap .blo02 .st01 {
    margin: 60px auto 30px;
}

#cntWrap .blo02 .st01 dd li.caption {
    margin: 30px auto 20px;
    text-align: center;
}

#cntWrap .blo02 .st01 dd li.pro-name {
    font-size: 1.6rem;
    line-height: 3.8rem;
}

#cntWrap .blo02 .st01 dd li.pro-name-2 {
    margin: 40 auto 0;
}

#cntWrap .blo02 .st01 dd li.spec {
    margin: 10px auto 30px;
    font-size: 1.2rem;
    color: #2f2f2f;
}

#cntWrap .blo02 .bag {
    text-align: center;
    margin: 0 auto 80px;
}

#cntWrap .blo02 .bag dt {
    display: inline-block;
    vertical-align: middle;
}

#cntWrap .blo02 .bag dd {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin: 0 auto 0;
    vertical-align: middle;
}

#cntWrap .blo02 dd li {
    width: 100%;
}

#cntWrap .blo02 dd li.caption {
    margin: 0 auto 30px;
    font-size: 1.3rem;
}

#cntWrap .blo02 dd li.pro-name {
    margin-top: 30px;
    letter-spacing: 0.1em;
    font-size: 1.6rem;
    line-height: 1;
}

#cntWrap .blo02 dd li.spec {
    margin: 16px auto 0;
    font-size: 1.2rem;
    color: #2f2f2f;
    line-height: 1;
}

#cntWrap .blo02 dd li.spec span {
    margin: 16px 0 0 10px;
    font-size: 1rem;
    color: #2f2f2f;
    line-height: 1;
}

#cntWrap .blo02 li.buy {
    margin: 30px auto 0;
}

#cntWrap .blo02 li.buy a {
    color: #ffffff;
    background: rgba(201, 201, 201, 0.8);
    padding: 12px 80px;
    /* max-width: 200px; */
    border-radius: 4px;
    -webkit-transition: .5s;
    transition: .5s;
    display: inline-block;
    /* text-align: left; */
}

#cntWrap .blo02 li.buy a:hover {
    background: #333;
    -webkit-transition: .5s;
    transition: .5s;
}

#cntWrap li.frame {
    border: 1px solid #c01b57;
    padding: 5px 20px;
    display: inline-block;
    margin: 20px auto;
    width: auto;
}

#cntWrap .blo02 dd li.caution {
    margin: 18px auto 0;
    word-break: keep-all;
}

#cntWrap .blo02 .column-center {
    margin: 80px auto;
}

#cntWrap .blo02 ul.margin {
    margin-top: 60px;
}

#cntWrap .blo02 .newitem {
    font-size: 1.8rem;
    text-align: left;
    max-width: 800px;
    margin: 0 auto;
    color: #de1e1e;
}
@media screen and (max-width: 820px) {
#cntWrap .blo02 .newitem {
    max-width: 450px;
}
}


#cntWrap .blo02 div.catalogBlo {
    margin-bottom: 60px;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

#cntWrap .blo02 div.catalogImg {
    width: auto;
    max-width: 450px;
}

#cntWrap .blo02 div.catalogImg img {
    width: auto;
}

#cntWrap .blo02 ul.catalogArea a {
    display: inline-block;
    background: #ffffff;
    letter-spacing: 1rem;
    font-size: 1.5em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 0px;
    height: 100%;
}

#cntWrap .blo02 ul.catalogArea li img {
    width: 100px;
    margin-bottom: 30px;
}

#cntWrap .blo02 ul.catalogArea li {
    text-align: left;
    padding: 0;
    font-weight: 500;
    height: 100%;
    width: 350px;
}

@media screen and (max-width: 1000px) {
    #cntWrap .blo02 {
        max-width: 100%;
        margin: 0 auto;
        padding: 40px 4% 90px;
    }

    #cntWrap .blo02 div.catalogImg {
        width: 100%;
    }

    #cntWrap .blo02 div.catalogImg img {
        width: 100%;
    }

    #cntWrap .blo02 ul.catalogArea {
        width: 100%;
        max-width: 450px;
    }

    #cntWrap .blo02 ul.catalogArea li img {
        width: 90px;
    }

    #cntWrap .blo02 ul.catalogArea li {
        text-align: left;
        padding: 0;
        width: 100%;
    }

    #cntWrap .blo02 ul.catalogArea li a {
        padding: 40px 0;
    }
}

@media screen and (max-width: 741px) {
    #cntWrap .blo02 .st01 dd li.caption {
        text-align: left;
    }

    #cntWrap .blo02 .st01 dt {
        margin: 0 auto;
    }

    #cntWrap .blo02 .bag {
        text-align: center;
        margin: 0 auto;
    }

    #cntWrap .blo02 .bag dt {
        display: inline-block;
        width: 100%;
        margin-right: 0;
    }

    #cntWrap .blo02 .bag dd {}

    #cntWrap .blo02 .bag dd li.caption {
        margin: 0 auto 10px;
        font-size: 1.3rem;
        text-align: left;
    }

    #cntWrap .blo02 .bag dd li.pro-name {
        font-size: 1.6rem;
        line-height: 3.8rem;
        text-align: center;
    }

    #cntWrap .blo02 .bag dd li.spec {
        margin: 10px auto 0;
        font-size: 1.2rem;
        color: #2f2f2f;
        text-align: center;
    }

    #cntWrap .blo02 li.buy {
        text-align: center;
    }

    #cntWrap .blo02 li.buy a:hover {
        background: #333;
        -webkit-transition: .5s;
        transition: .5s;
    }

    #cntWrap .blo02 .st01 {
        margin: 60px auto 10px;
    }

    #cntWrap .blo02 .blo02Top {
        margin: 0px auto 10px;
    }

    #cntWrap .blo02 ul.margin {
        margin-top: 0px;
    }

    #cntWrap .blo02 dd li.top_margin {
        margin-top: 30px;
    }


}

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

@media screen and (max-width: 417px) {
    #cntWrap .blo02 dd li.top_margin {
        margin-top: 0px;
    }

    #cntWrap .blo02 ul.margin {
        margin-top: 60px;
    }
}

#cntWrap .blo02 dd li.coming a {
    color: #b7bbb7;
    background: rgba(228, 228, 228, 0.8);
    padding: 12px 52px;
    /* max-width: 200px; */
    border-radius: 4px;
    -webkit-transition: .5s;
    transition: .5s;
    display: inline-block;
    /* text-align: left; */
    cursor: default;
    pointer-events: none;
}

#cntWrap .btn {
    margin: 40px auto 0;
}

#cntWrap .btn a {
    -webkit-transition: .4s;
    transition: .4s;
}

#cntWrap .btn a:hover img {
    opacity: .5;
    -webkit-transition: .4s;
    transition: .4s;

}

@media screen and (max-width: 741px) {
    #cntWrap .blo02 .bag dd li.coming {
        text-align: center;
    }

    #cntWrap .blo02 dd li.coming a {
        padding: 12px 50px;
    }
}

#cntWrap div.wrapping {
    background: url(../xmas_collection/img/p10.jpg) no-repeat;
    background-position: center;
    background-size: auto;
    height: 628px;
}

#cntWrap .wrapping .ttl-l {
    font-size: 2.8rem;
    color: #c1ae32;
    font-weight: bold;
    text-align: center;
    margin: 80px auto 0;
    padding-top: 80px;

}

#cntWrap .wrapping .ttl-t {
    font-size: 1.5rem;
    line-height: 3.0rem;
    margin: 25px 0;
    text-align: center;

}

#cntWrap .wrapping img {}

@media screen and (max-width: 741px) {
    #cntWrap .wrapping .ttl-t {
        font-size: 1.3rem;
        line-height: 3.0rem;
        text-align: center;
    }

    #cntWrap .wrapping .ttl-l {
        font-size: 2.0rem;
        text-align: center;
        margin: 80px auto 0;
    }
}

/* =========================================================
news
========================================================= */
div.newsArea {
    margin: 0 auto;
    padding: 20px 0 60px;
    background: #f8f8f8;
}

div.newsArea h2 {
    font-size: 1.8em;
    margin-bottom: 30px;
}

div.newsArea ul {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

div.newsArea ul li.line {
    /*border-top: 1px solid #dddddd;*/
}

div.newsArea ul li {
    width: 100%;
    text-align: left;
    line-height: 2.2;
    border-bottom: 1px solid #dddddd;
}

.newsArea a {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 800px;
    height: 80px;
    text-align: left;
    color: #282828;
    text-decoration: none;
    padding: 0 30px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    justify-content: left;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.newsArea a span {
    padding: 0 20px 0 0px;
    position: relative;
}

div.newsArea ul li a::after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 30px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #555555;
    border-bottom: 2px solid #555555;
    -webkit-transform: translate(0, -50%) rotate(-45deg);
    transform: translate(0, -50%) rotate(-45deg);
    -webkit-transition: .8s all ease-in;
    transition: .8s all ease-in;
}

.newsArea a span.newIcon::before {
    content: "NEW";
    position: absolute;
    top: -1em;
    left: 0;
    color: #de1e1e;
    line-height: 1;
}

.new {
    color: #de1e1e;
}

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

@media screen and (max-width: 820px) {
    div.newsArea h2 {
        font-size: 1.5em;
        margin-bottom: 30px;
    }

    .newsArea a {
        height: 120px;
        /*padding: 10px 30px 10px 10px;*/
    }

    div.newsArea ul li a::after {
        right: 10px;
    }
}

/* =========================================================
「PLUS LINE」取扱い店舗
========================================================= */
div.shopArea h2 {
    font-size: 1.8em;
    margin: 20px 0 40px;
}

.shopArea a img {
    display: inline-block;
    width: 14px;
    margin-top: -4px;
    margin-right: 16px;
    margin-bottom: 3px;
    vertical-align: middle;
}

.shopArea li {
    margin: 0 auto 30px;
    -webkit-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;
    padding: 20px 0;
    background: #ffffff;
    text-align: left;
    width: 100%;
    max-width: 800px;
}


/*
.shopArea li div.flex{
    width: calc(100% / 2 - 10px);
}
*/

/*
.shopArea li div.flex a:first-child{
    width: 30%;
}
.shopArea li div.flex a:last-child{
    width: 60%;
}
*/

/*
.shopArea li .shopname{
    margin: 0 0 10px 70px;
}
*/
.shopArea li .shopname{
    margin: 0 0 0 30px;
}
.shopArea li a.onlineLink::before {
    content: url(../common/img/cart.svg);
    display: inline-block;
    /*忘れずに！*/
    position: absolute;
    top: 29%;
    left: 30px;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

/*
.shopArea li a.shopLink::before {
    content: url(../common/img/map.svg);
    display: inline-block;
    position: absolute;
    top: 20%;
    left: 30px;
    width: 15px;
    height: 20px;
    vertical-align: middle;
}
*/

/*
.shopArea li a.telLink::before {
    content: url(../common/img/tel.svg);
    display: inline-block;
    position: absolute;
    top: 20%;
    left: 30px;
    width: 18px;
    height: 23px;
    vertical-align: middle;
}
*/

.shopArea li a::after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 30px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #555555;
    border-bottom: 2px solid #555555;
    -webkit-transform: translate(0, -50%) rotate(-45deg);
    transform: translate(0, -50%) rotate(-45deg);
    -webkit-transition: .8s all ease-in;
    transition: .8s all ease-in;
}
.shopArea li a.shopLink::after {
    display: none;
}
.shopArea li a.telLink::after {
    display: none;
}

.shopArea li a {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 800px;
    height: 35px;
    text-align: left;
    background: #ffffff;
    color: #282828;
    text-decoration: none;
    padding: 0px 0 0 90px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    justify-content: left;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}


#cntWrap .shopArea li div.flex{
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
#cntWrap .shopArea li div.flex .links.flex{
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    width: 40%;
}

#cntWrap .shopArea li div.flex a{
    max-width: 40px;
    padding: 0;
}
#cntWrap .shopArea li div.flex a:last-child{
    margin: 0 15px 0 10px;
    }
.shopArea li a.shopLink {
    text-decoration: underline;
}
.shopArea li a.telLink {
    text-decoration: underline;
}

.shopArea a:hover {
    opacity: 0.6;
    -webkit-transition: .8s;
    transition: .8s;
}

@media screen and (max-width: 320px) {
    #cntWrap .shopArea li div.flex .links.flex{
        margin-left: 20px;
    }
}
@media screen and (max-width: 741px) {
    div.shopArea h2 {
        font-size: 1.5em;
        margin: 20px 0 30px;
    }

    .shopArea a img {
        width: 14px;
    }

/*
    .shopArea li a {
        padding: 0px 0 0 70px;
    }
*/

    .shopArea li a.onlineLink {
        padding: 0px 0 0 70px;
    }
}

@media screen and (min-width: 742px) {
    .shopArea li div.flex a:first-child{
/*        width: 25%;*/
    }
    #cntWrap .shopArea li div.flex a.telLink:last-child{
        max-width: 130px;
        text-decoration: none;
    }
    #cntWrap .shopArea li div.flex a:last-child{
        margin: 0 15px 0 25px;
    }
/*
    .shopArea li .shopname{
        margin: 0 0 10px 90px;
    }
*/
}

p.notes {
    font-size: 1.2rem;
}

/* =========================================================
Swiper
========================================================= */
.swiper-button-next,
.swiper-button-prev {
    width: 50px;
    height: 50px;
    background-image: none;
    bottom: 50%;
    top: inherit;
    position: absolute;
    -webkit-transition: all .8s;
    transition: all .8s;
}

.swiper-button-next::before,
.swiper-button-prev::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 2px solid rgba(255, 255, 255, 0.95);
    border-right: 2px solid rgba(255, 255, 255, 0.95);
    position: absolute;
    top: calc(38% - 3px);
    -webkit-transition: all .8s;
    transition: all .8s;
}

.swiper-button-next::before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    right: 15px;
}

.swiper-button-prev::before {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    left: 15px;
}

.swiper-button-next {
    right: 10px;
}

.swiper-button-prev {
    left: 10px;
}



/* =========================================================
archiveCnt
========================================================= */
#cntWrap #archiveBlk {
    background: #f9f9f7 !important;
    padding: 120px 0;
}

/*
#cntWrap #archiveBlk .archiveCnt{
    margin: -80px auto 80px;
    padding: 80px 0 0;

}

#cntWrap #archiveBlk .archiveCnt h3{
    font-size: 4.0rem;
    margin: 0 auto 60px;
    line-height: 1;

}
#cntWrap #archiveBlk .archiveCnt ul{
    max-width: 980px;
    margin: 0 auto;
}
#cntWrap #archiveBlk .archiveCnt li{
    margin: 0 20px 40px;
}

#cntWrap #archiveBlk .archiveCnt li:last-child{
    margin: 0;
}
#cntWrap #archiveBlk .archiveCnt li figure{
    margin: 0 auto;
}
#cntWrap #archiveBlk .archiveCnt li figure figcaption{
    margin: 20px auto 0;
}
#cntWrap #archiveBlk .archiveCnt li figure figcaption p.new::after{
    content: "NEW";
    color: #c01b57;
    position: relative;
    padding-left: 20px;
}



*/




/* =========================================================
FOOTER
========================================================= */

#mainFtr {
    background-color: #ffffff;
    font-weight: 500;
}

#mainFtr > .inner {
    padding: 90px 3% 60px;
}

@media screen and (max-width: 741px) {
    #mainFtr {
        background: url(./img/bg_logo.jpg) repeat;
        width: 100%;
        padding: 5% 0 0;
        background-position: 0 60px;
        background-color: #ffffff;
    }

    #mainFtr > .inner {
        background: #ffffff;
    }
}

@media screen and (max-width: 640px) {
    #mainFtr > .inner {
        padding: 14.1vw 3% 9.4vw;
    }
}

.linksSns {
    opacity: 0.8;
}

.linksSns .instagram,
.linksSns .online-store {
    margin-bottom: 30px;
}

.linksSns .instagram a,
.linksSns .online-store a {
    display: inline-block;
    width: 100%;
    max-width: 550px;
    height: 80px;
    border: 1px solid #a5a2a1;
    border-radius: 3px;
    color: #282828;
    text-decoration: none;
    padding: 28px 0px 0;
    -webkit-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;
}

.linksSns .instagram a:hover,
.linksSns .online-store a:hover {
    background-color: rgba(201, 201, 201, 0.3);
}

.linksSns .instagram a img,
.linksSns .online-store a img {
    display: inline-block;
    width: 28px;
    margin-top: -4px;
    margin-right: 16px;
    margin-bottom: 3px;
    vertical-align: middle;
}

.linksSns .other {
    margin-bottom: 60px;
}

.linksSns .other li {
    display: inline-block;
    margin: 0 10px;
    width: 30px;
    height: 30px;
}

.linksSns .other li a {
    width: 100%;
    height: 100%;
    display: inline-block;
    -webkit-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;
}

.linksSns .other li a:hover {
    opacity: 0.5;
}

.linksSns .other li a img {
    height: 20px;
}

.linksPage {
    margin-bottom: 60px;
    opacity: 0.8;
}

.linksPage li {
    font-family: 'Roboto Condensed', "游ゴシック", "Yu Gothic", YuGothic, sans-serif;
    /*font-family: "Prata", "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
    font-size: 1.4rem;
    display: inline-block;
}

/*
.linksPage li:nth-of-type(1)::after {
    content: " / ";
    display: inline-block;
    margin: 0 15px 0 20px;
}
*/
.linksPage li a {
    color: rgba(41, 41, 41, 1.00);
    -webkit-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;
    display: inline-block;
    position: relative;
}

.linksPage li a::after {
    content: "";
    display: block;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 0%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0);
    -webkit-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;
    z-index: 1;
}

.linksPage li a:hover {}

.linksPage li a:hover::after {
    width: 100%;
    background-color: rgba(0, 0, 0, 1);
}

.copyright {
    font-family: 'Roboto Condensed', "游ゴシック", "Yu Gothic", YuGothic, sans-serif;
    /*font-family: "Prata", "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
    font-size: 1.1rem;
}

.copyright a {
    color: rgba(41, 41, 41, 1.00);
    text-decoration: none;
}

/* =========================================================
Modal Window
========================================================= */

.lock {
    overflow: hidden;
}

.modal-content {
    overflow: auto;
    position: relative;
    display: none;
    width: 80%;
    max-width: 800px;
    /* max-height: 50%; */
    /* margin: 30px; */
    /* padding: 10px 20px; */
    /* border: 2px solid #aaa; */
    /* background: #fff; */
}

.modal-content p {
    margin: 0;
    padding: 0;
}

.modal-overlay {
    z-index: 1;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background-color: rgba(0, 0, 0, 0.75);
}

.modal-wrap {
    z-index: 2;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.modal-open:hover {
    color: #ffffff;
}

.modal-close {
    position: absolute;
    top: 5%;
    right: 3%;
}

.modal-close:hover {
    cursor: pointer;
}

@media screen and (max-width: 741px) {
    .modal-content {
        width: 95%;
    }

    .modal-close {
        position: absolute;
        top: 3%;
        right: 5%;
        widows: 40px;
    }
}

/*

<!-- ############################################################################################### -->
<!-- ############################################################################################### -->
<!-- ############################################################################################### -->
<!-- ############################################################################################### -->
<!-- ############################################################################################### -->
<!-- ##########　HTML コメントアウト記述ルール　#################################################### -->
<!-- ############################################################################################### -->
<!-- ############################################################################################### -->


<!-- ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ -->
<!-- //////////////////////////////////////////////////////////////////// -->
<!-- ///// メインコンテンツエリア（編集エリア） ///////////////////////// -->
<!-- //////////////////////////////////////////////////////////////////// -->

<!-- //////////////////////////////////////////////////////////////////// -->
<!-- //////////////////////////////////////////////////////////////////// -->
<!-- ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ -->

<!-- ==================== 大ブロックエリア ==================== -->
<!-- ==================== //大ブロックエリア ==================== -->

<!-- ***** 中ブロックエリア *************** -->
<!-- ***** //中ブロックエリア *************** -->

<!-- #ID名 -->
<!-- //#ID名 -->

<!-- .class名 -->
<!-- //.class名 -->

<!-- [memo] -->
<!-- //[memo] -->


<!-- ※※※※※ INCLUDE - HEADER ※※※※※ -->
<!--#include virtual="/common/inc_header.html"-->
<!-- ※※※※※ //INCLUDE - HEADER ※※※※※ -->

<!-- ※※※※※ INCLUDE - FOOTER ※※※※※ -->
<!--#include virtual="/common/inc_footer.html"-->
<!-- ※※※※※ //INCLUDE - FOOTER ※※※※※ -->

<!--
[ id/class Name List ]
wrap > area > set > (group) > box

[ memmo ]
TOPページ → <body id="pageHome">
Newsページ(第2階層) → <body id="pageNews" class="dir2nd">
-->
*/

/* #################################################################################################### */

/* #################################################################################################### */

/* #################################################################################################### */

/* #################################################################################################### */

/* #################################################################################################### */

/* ##########　コメントアウト記述ルール　############################################################## */

/* #################################################################################################### */

/* #################################################################################################### */

/* //////////////////////////////////////////////////////////////////// */

/* ///// ブロック区切り /////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////////// */

/* ==================================================
大見出し
================================================== */

/* 中見出し（他、説明など）
------------------------------ */

/* ### 小見出し 1 ### */

/* ### ----- ### */

/* 小見出し 2 */

/* ----- */

/* ### ↓MEDIAQUERY範囲指定 ※min以上 max以下 ### */

/* ################ ↓↓↓ MEDIAQUERY ↓↓↓ ########## */

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

/* ############## ↑↑↑ MEDIAQUERY ↑↑↑ ########## */

/* ### ↓MEDIAQUERY ※min以上 ### */

/* ################ ↓↓↓ MEDIAQUERY ↓↓↓ ########## */

@media screen and (min-width: 641px) {}

/* ############## ↑↑↑ MEDIAQUERY ↑↑↑ ########## */

/* ### ↓MEDIAQUERY ※max以下 ### */

/* ################ ↓↓↓ MEDIAQUERY ↓↓↓ ########## */

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

/* ############## ↑↑↑ MEDIAQUERY ↑↑↑ ########## */

.fs90 {
    font-size: 90% !important;
}

.fs85 {
    font-size: 85% !important;
}

.fs80 {
    font-size: 80% !important;
}

.fs70 {
    font-size: 70% !important;
}

.fs60 {
    font-size: 60% !important;
}