@charset "utf-8";


/* ==================================================================
    engagement.css

=================================================================== */

/* ==================================================================
   ■ index ページ
=================================================================== */

.titleArea{
    background: #efefef;
    padding: 8px 0;
}

.titleArea .heading{
    flex-shrink: 0;
}

.titleArea .text{
    margin: 0;
    padding-left: 12px;
}
.titleArea .text p{
    margin: 0;
}
@media only screen and (max-width : 767px) {

    .titleArea .heading{
        flex-shrink: 0;
        font-size: 1.6rem;
    }
    .titleArea .text{
        padding: 12px 0 0 0;
    }

    .listSearch.brand_view .concierge {
        display: none;
    }
}

/* --------------------------------
   □  accent
-------------------------------- */
#engagement main > .accent {
    background-image: url(../../images/engagement/accent.jpg);
    background-position: center;
}
#engagement.marriage main > .accent {
    background-image: url(../../images/marriage/accent.jpg?d=0716);
    background-position: center;
}
    #engagement main > .accent .txtArea {
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    }

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

    #engagement main > .accent {
        background-image: url(../../images/engagement/accent_sp.jpg);
        background-position: center;
    }
    #engagement.marriage main > .accent {
        background-image: url(../../images/marriage/accent_sp.jpg?d=0716);
        background-position: center;
    }
}

/* --------------------------------
   □  fair
-------------------------------- */
#fair ul.slickSlider li.slick-slide {
    margin: 0 18px 60px 18px;
}

#fair ul.slickSlider li.slick-slide img{
    aspect-ratio: 952 / 588;
}

/* --------------------------------
   □  brand
-------------------------------- */
#brand  {
    padding-top: 0;
}
#brand ul.list.col4 {
    margin: 0 -18px;
    margin-bottom: -50px;
}
#brand ul.list.col4 > li {
    max-width: 348px;
    margin: 0 18px 50px 18px;
}

#brand ul.list li dd p.ttl img {
    width: auto;
}
#brand ul.list li dd p.text {
    color: #808080;
    margin-bottom: 0;
}

/* --------------------------------
   □  collection_concept
-------------------------------- */
#collection_concept {
    padding-top: 0;
}
#collection_concept .col2 section {
    width: 49%;
    overflow: hidden;
}

/* --------------------------------
   □  justfortwo
-------------------------------- */
#justfortwo {
    background: #F2F7FF;
}
#justfortwo .container {
    position: relative;
}
    #justfortwo .container:before,
    #justfortwo .container:after {
        content: "";
        display: inline-block;
        position: absolute;
        bottom: -30px;
        left: 80px;
        width: 208px;
        height: 148px;
        background: url(../../images/engagement/justfortwo1.png) no-repeat right center;
        background-size: contain;
        mix-blend-mode: multiply;
    }
    #justfortwo .container:after {
        bottom: auto;
        top: -20px;
        left: auto;
        right: 30px;
        width: 256.5px;
        height: 203px;
        background: url(../../images/engagement/justfortwo2.png) no-repeat right center;
        background-size: contain;
        visibility: visible;
    }
#justfortwo .inner {
    max-width: 640px;
    margin: auto;
}
#justfortwo .lv3 {
    font-size: 5.6rem;
}
    #justfortwo .lv3 span.mincho {
        font-size: 2.4rem;
    }
#justfortwo .text {
    font-size: 1.5rem;
    line-height: 2;
    margin-bottom: 10px;
}
#justfortwo .asterisk {
    margin-bottom: 40px;
}

/* --------------------------------
   □ byType
-------------------------------- */
#byType {
    padding-bottom: 0;
}
#byType ul.list li {
    margin-bottom: 60px;
}
#byType .lv4.title.bg_blue {
    margin-left: -10px;
    margin-right: -10px;
    padding: 25px 4%;
}
#byType figcaption {
    position: relative;
    text-align: left;
    margin-left: -10px;
    margin-right: -10px;
}
    #byType figcaption .image_sml {
        position: absolute;
        right: 20px;
        top: -40px;
        display: inline-block;
        box-shadow: 0px 0px 12px 0px rgb(0 0 0 / 16%);
        margin-bottom: 0;
        max-width: 119px;
    }
#byType figcaption dl dt.ttl {
    font-size: 2.8rem;
    margin-top: 20px;
    margin-bottom: 30px;
    padding-right: 160px;
    line-height: 1.2;
}
@media only screen and (min-width : 767px) {
    #byType figcaption dl dt.ttl {
        min-height: 2.2em;
    }
}
    #byType figcaption dl dt.ttl span {
        display: block;
        font-size: 1.6rem;
        margin-top: 5px;
    }
#byType figcaption dl dd {
    color: #808080;
    margin-bottom: 0;
}

/* --------------------------------
   □ request
-------------------------------- */
#request .btn_area.flexbox.start.col2 {
    justify-content: space-between;
}

/* --------------------------------
   □ engagementRings
-------------------------------- */
#engagementRings ul.itemList > li {
    border: 1px solid #EFEFEF;
    /*padding: 20px;*/
    width: revert;
    margin-bottom: 0;
    padding-bottom: 12px;
}
#engagementRings ul.itemList > li figcaption {
    /*margin-left: -10px;
    margin-right: -10px;*/
    position: relative;
    top:-50px;
    margin-bottom: -50px;
    padding: 0 20px 0px 20px;
}
#engagementRings ul.itemList li .logo {
    position: static;
    margin-bottom: 5px;
    zoom: 1;
}

#engagementRings ul.itemList li .logo img{
    height: 20px !important;
}

#engagementRings ul.itemList li .tag,
#engagementRings ul.itemList li .name {
    margin-bottom: 5px;
}
#engagementRings ul.itemList li a .image{
    margin-left: 0;
    margin-right: 0;
}
#engagementRings ul.itemList > li.list-item{
    display: flex;
    flex-direction: column;
}
#engagementRings ul.itemList > li > a{
    height: auto;
    padding: 0;
    flex-grow: 1;
}
#engagementRings ul.itemList li .btn_area{
    margin-top: 13px;
}
#engagementRings ul.itemList li .btn_area li{
    margin: 0 auto;
    max-width: 94%;
}

#engagementRings ul.itemList li .btn_area a{
    padding: 5px 0;
    height: auto;
}
/* --------------------------------
   □ concierge
-------------------------------- */
#concierge {
    padding-top: 0;
}
#concierge ul.list li dl dt {
    margin-bottom: 10px;
}

/* モーダル */
.mfp-container .modal-wrap {
    position: relative;
    background: #FFF;
    width: 100%;
    max-width: 1128px;
    margin: auto;
    padding: 90px;
}
.mfp-container .mfp-close {
    width: 22px;
    height: 22px;
    line-height: 22px;
    background: url(../../images/common/icon/btn_close.svg) no-repeat center center;
    opacity: 1;
    text-indent: -99999px;
    right: 30px!important;
    top: 30px!important;
    padding: 0;
}

.mfp-container .modal-wrap .lv3.title._l {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 40px;
}
.mfp-container .modal-wrap .lv4.title.bg_blue {
    font-size: 1.6rem;
    background-color: #F2F7FF;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.mfp-container .modal-wrap .textArea {
    padding: 20px;
    margin-bottom: 35px;
}
.mfp-container .modal-wrap .textArea input.text{
    margin: 0;
    width: 100%;
}

.mfp-container .modal-wrap .buttonStyle.reset {
    position: relative;
    padding: 0 30px 0 0;
    font-size: 1.3rem;
    line-height: 25px;
    margin-bottom: 20px;
    float: right;
}
    .mfp-container .modal-wrap .buttonStyle.reset a {
        color: #002C6E;
        border: none;
        background: transparent;
    }
    .mfp-container .modal-wrap .buttonStyle.reset a span:before {
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
        right: 0;
        width: 25px;
        height: 25px;
        background: url(../../images/common/icon/btn_reset.svg) no-repeat right center;
        background-size: contain;
        z-index: 1;
        transition: all 300ms 0s ease;
    }
.mfp-container .modal-wrap ul.list {
    width: 100%;
    margin: 40px auto;
}
    .mfp-container .modal-wrap ul.checkbox li {
        font-size: 1.4rem;
        letter-spacing: 0;
        padding-left: 1.5em;
        text-indent: -1.5em;
        margin-bottom: 10px;
    }
.mfp-container .modal-wrap .buttonStyle.gold.arrow {
    text-align: center;
    max-width: 421px;
    margin: 0 auto;
}
.mfp-container .modal-wrap .buttonStyle.gold.arrow button {
    font-family: 'Zen Old Mincho', serif;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0;
    padding: 17px 32px;
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    color: #fff;
    background-color: #917C52;
    border: 1px solid #917C52;
    border-radius: 40px;
    cursor: pointer;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    transition: all 300ms 0s ease;
}
    .mfp-container .modal-wrap .buttonStyle.gold.arrow button span:before {
        width: 7px;
        height: 11px;
        background: url(../../images/common/icon/arrow_white.svg) no-repeat right center;
        background-size: contain;
        top: 23px;
        right: 5%;
    }
    .mfp-container .modal-wrap .buttonStyle.gold.arrow button :hover {
        opacity: 1;
    }
        .mfp-container .modal-wrap .buttonStyle.gold.arrow button:hover span:before {
            right: 3%;
        }


/* ==================================================================
   ■ engagement_4c ページ
=================================================================== */
/* --------------------------------
   □  accent
-------------------------------- */
#engagement.engagement_4c main > .accent {
    background-image: url(../../images/engagement/4c/accent.jpg);
    background-position: center;
}

/* --------------------------------
   □  about
-------------------------------- */
#about ul.slickSlider li.slick-slide {
    margin: 0 18px 60px 18px;
}

/* --------------------------------
   □  collections
-------------------------------- */
#collections {
    background: #F2F7FF;
}
#collections .flexbox + .flexbox {
    margin-top: 100px;
}
#collections .flexbox .imgArea {
    width: 43%;
}
#collections .flexbox .imgArea p.image {
    margin-bottom: 10px;
}
#collections .flexbox .imgArea .buttonStyle.arrow {
    position: relative;
    padding: 0 20px 0 0;
    display: inline-block;
    font-size: 1.3rem;
    text-align: left;
}
    #collections .flexbox .imgArea .buttonStyle.arrow span:before {
        top: 6px;
    }
    #collections .flexbox .imgArea a:hover .buttonStyle.arrow span:before {
        right: 2%;
    }

#collections .flexbox .slideArea {
    width: 53%;
}
#collections .flexbox ul.slickSlider {
    overflow: hidden;
    margin-right: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
}
    #collections .flexbox.reverse ul.slickSlider {
        margin-right: 0;
        margin-left: calc(50% - 50vw);
        padding-right: 0;
        padding-left: calc(50vw - 50%);
    }
    #collections .flexbox.reverse ul.slickSlider li.slick-slide {
        float: right;
    }
#collections ul.slickSlider .slick-dots {
    left: 80px;
    transform: none;
    -webkit-transform: none;
}
#collections ul.slickSlider .prev-arrow {
    left: 0;
}
#collections ul.slickSlider .next-arrow {
    right: auto;
    left: 250px;
}
    #collections .flexbox.reverse ul.slickSlider .slick-dots {
        left: auto;
        right: 80px;
    }
    #collections .flexbox.reverse ul.slickSlider .prev-arrow {
        right:  250px;
        left: auto;
    }
    #collections .flexbox.reverse ul.slickSlider .next-arrow {
        right: 0;
        left: auto;
    }

/* --------------------------------
   □  advice
-------------------------------- */
#engagement.engagement_4c #advice {
    margin-bottom: 100px;
}

/* --------------------------------
   □  concept
-------------------------------- */
#engagement.engagement_4c #concept {
    padding-top: 0;
}

/* ==================================================================
   ■ engagement_4cbridal ページ
=================================================================== */
/* --------------------------------
   □  accent
-------------------------------- */
#engagement.engagement_4cbridal main > .accent {
    background-image: url(../../images/engagement/4cbridal/accent.jpg);
    background-position: center;
}

/* ==================================================================
   ■ engagement_canal4c ページ
=================================================================== */
/* --------------------------------
   □  accent
-------------------------------- */
#engagement.engagement_canal4c main > .accent {
    background-image: url(../../images/engagement/canal4c/accent.jpg);
    background-position: center;
}

/* ==================================================================
   ■ engagement_eaudouce4c ページ
=================================================================== */
/* --------------------------------
   □  accent
-------------------------------- */
#engagement.engagement_eaudouce4c main > .accent {
    background-image: url(../../images/engagement/eaudouce4c/accent.jpg);
    background-position: center;
}

/* ==================================================================
   ■ 商品詳細 ページ detail
=================================================================== */

#engagement.detail .contents .container {
    max-width: 1192px;
    margin: auto;
}
#engagement.detail .contents .inner {
    max-width: 900px;
    margin: auto;
}

/* --------------------------------
   □  accent
-------------------------------- */
#engagement.detail main > .accent {

}
#engagement.detail main > .accent img{
    height: calc( 100vh - 246px); 
}

/* --------------------------------
   □  item
-------------------------------- */
#item .title-wrap > * {
    text-align: center;
}
    #item .title-wrap .cat {
        font-size: 1.2rem;
        letter-spacing: 0.13em;
        color: #808080;
        margin-bottom: 25px;
    }
    #item .title-wrap .lv3.title {
        font-size: 4.6rem;
    }
        #item .title-wrap .lv3.title span {
            font-size: 1.3rem;
            letter-spacing: 0.04em;
        }
#item .item_no {
    font-size: 1.3rem;
    letter-spacing: 0.08em;
    text-align: left;
    margin-bottom: 10px;
}
    #item .item_no span {
        color: #fff;
        background-color: #002C6E;
        margin-right: 1em;
        padding: 2.5px 11px;
    }

#item .item_spec {
    width: 100%;
    padding: 30px 20px;
    border-top: 1px solid #002C6E;
    border-bottom: 1px solid #002C6E;
    background-color: #fff;
    font-size: 1.4rem;
    letter-spacing: 0.04em;
    margin: 10px 0;
}
#item .item_desc dl {
    width: calc( 100% /3);
    display: flex;
    justify-content: flex-start;
}
    #item .item_desc dt {
        color: #999;
        padding-right: 60px;
    }
    #item .item_desc dd {
    }

#item .shareArea {
    min-width: 464px;
    margin: 50px 0 60px;
}
    #item .shareArea dt {
        font-size: 1.3rem;
        padding: 0 10px;
    }
   #item .shareArea dd {
        min-width: 184px
    }
    #item .shareArea .buttonStyle.fav button {
            font-size: 1.2rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            border: 1px solid #D15959;
            color: #D15959;
            background-color: #fff;
            padding: 5.5px 20px;
        }
        #item .shareArea .buttonStyle.fav button:before {
            content: "";
            display: inline-block;
            width: 13px;
            height: 12px;
            margin-right: 6px;
            margin-bottom: -2px;
            background: url(../../images/common/icon/fav_white.svg) no-repeat left center;
            background-size: contain;
        }
    #item .shareArea .buttonStyle.fav button:hover {
        border: 1px solid #fff;
        color: #fff;
        background-color: #D15959;
        opacity: 1;
    }

#item .utility {
    text-align: left;
}
    #item .utility .btn_area {
        text-align: center;
        margin: 0 auto 10px;
    }
    #item .utility .btn_area li {
        width: 32%;
    }
    #item .utility .buttonStyle.txt.sp {
        display: none;
    }
    #item .utility .btn_area a {
        font-size: 1.6rem;
        padding: 12px 32px;
        width: 100%;
        max-width: 280px;
        margin-bottom: 0;
    }
    #item .utility .buttonStyle.online a { 
        background-color: #EDEDED;
    }
    #item .utility .buttonStyle.online a:hover {
        opacity: 1;
        color: #fff;
        background-color: #111;
    }
    #item .utility .buttonStyle.online a:hover:before {
        background: url(../../images/common/icon/online_white.svg) no-repeat left center;
        background-size: contain;
    }
    #item .utility .buttonStyle.arrow a {
        font-size: 1.3rem;
        padding: 10px 20px 10px 10px;
        border: none;
        background: transparent;
    }
        #item .utility .buttonStyle.arrow a span:before {
            top: 12px;
            right: 2%;
        }
        #item .utility .buttonStyle.arrow a:hover span:before {
            right: 1%;
        }

/* --------------------------------
   □  img-wrap
-------------------------------- */
.img-wrap > * {
    width: 50%;
    overflow: hidden;
    margin-bottom: 0;
}

/* --------------------------------
   □  concept (detail/engagement_4cで使用)
-------------------------------- */

/* contentsによってでたりでなかったりするのでこっちだと都合が悪い
#concept .flexbox:not(:last-child) {
    margin: 0 auto 100px;
}
*/ 
#concept{
    padding-bottom: 0;
}


#concept .flexbox + .flexbox{
    margin-top:100px;
}

#concept .txtArea {
    text-align: left;
}
    #concept .txtArea .text._l {
        margin-bottom: 30px;
    }
#concept .sub-image {
    margin-top: 120px;
}

/* --------------------------------
   □  material
-------------------------------- */
#material {
    padding-top: 0;
}
#material h3.lv3 {
    text-align: left;
    margin-bottom: 50px;
}
#material .txtArea {
    width: 60%;
}
#material figure {
    width: 40%;
}
#material .list {
    margin-bottom: 15px;
}
#material .list li {
    width: 19%;
    background-color: #D8E2E6;
    border: 1px solid #D8E2E6;
    letter-spacing: -0.02em;
    position: relative;
}
    #material .list li:nth-child(2) {
        background-color: #DBDBD7;
        border: 1px solid #DBDBD7;
    }
    #material .list li:nth-child(3) {
        background-color: #EFEFEF;
        border: 1px solid #EFEFEF;
    }
    #material .list li:nth-child(4) {
        background-color: #D1C689;
        border: 1px solid #D1C689;
    }
    #material .list li:nth-child(5) {
        background-color: #111;
        border: 1px solid #111;
        color: #fff;
    }
        #material .list li:before {
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            width: 26px;
            height: 26px;
            background: url(../../images/common/icon/search.svg) no-repeat right center;
            background-size: contain;
            z-index: 9;
        }

#material .list li dt {
    position: relative;
    margin-bottom: 0;
}
    #material .list li dt .purity {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        padding-right: 50px;
        color: #8D9BA0;
        letter-spacing: 0.02em;
        margin-bottom: 0;
    }
        #material .list li dt .purity:after {
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            right: 0;
            display: inline-block;
            width: 41px;
            height: 41px;
            background: url(../../images/engagement/detail/pla1.svg) no-repeat right center;
            background-size: contain;
            transition: all 300ms 0s ease;
        }
    #material .list li:nth-child(2) dt .purity {
        color: #919185;
    }
        #material .list li:nth-child(2) dt .purity:after {
            background: url(../../images/engagement/detail/pla2.svg) no-repeat right center;
            background-size: contain;
        }
    #material .list li:nth-child(3) dt .purity {
        color: #939393;
    }
        #material .list li:nth-child(3) dt .purity:after {
            background: url(../../images/engagement/detail/pla3.svg) no-repeat right center;
            background-size: contain;
        }

#material .list li dd {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
}
    #material .list li dd .sml {
        font-size: 1.2rem;
    }

/* --------------------------------
   □  brandconcept
-------------------------------- */
#brandconcept .text._s {
    margin-bottom: 0;
}

/* --------------------------------
   □  section.contactSec
-------------------------------- */
#contact02 {
    padding-top: 0;
}

/* --------------------------------
   □  recommend
-------------------------------- */
.recommend {
    background-color: #F2F7FF;
    text-align: center;
}
ul.slickSlider li.slick-slide .logo img,
ul.slickSlider li.slick-slide .ico_fav img {
    width: auto;
}

/* --------------------------------
   □  service
-------------------------------- */
#service ul.list li:not(:last-child) {
    margin: 0 auto 100px;
}
#service .txtArea .lv3.title.en {
    font-size: 2.4rem;
}
#service .txtArea .text._s {
    margin-bottom: 30px;
}
#service .txtArea p.buttonStyle.arrow span {
    font-size: 1.3rem;
    padding: 0 20px 0 0;
    position: relative;
}
    #service .txtArea p.buttonStyle.arrow span:before {
        top: 5px;
        right: 5px;
    }
    #service a:hover .txtArea p.buttonStyle.arrow span:before {
        right: 0;
    }

/* --------------------------------
   □  advice (detail/engagement_4cで使用)
-------------------------------- */
#advice .container {
    max-width: 1192px;
    margin: 0 auto;
}
#advice .adviceBox:not(:last-child) {
    margin-bottom: 80px;
}
#advice .adviceBox figure {
    width: 42%;
}
    #advice .adviceBox figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
#advice .adviceBox .txtArea {
    background: #fff;
    text-align: left;
    width: 58%;
    padding: 30px 40px;
}
    #advice .adviceBox .txtArea > * {
        width: 100%;
    }
#advice .adviceBox .txtArea > h4.lv4 {
    text-align: left;
}
#advice .adviceBox .txtArea > .text {
    line-height: 1.8;
    margin-bottom: 30px;
}

#advice .concierge {
    padding: 15px;
}
#advice .concierge .text {
    font-size: 1.6rem;
    min-width: 160px;
    margin-bottom: 0;
}
#advice .concierge .buttonStyle.store {
    width: 49%;
    max-width: 282px;
}
    #advice .concierge .buttonStyle.store a,
    #advice .buttonStyle.store.location a {
        width: 100%;
        font-size: 1.6rem;
        padding: 12px 32px;
    }

#advice .adviceBox#advice2 .bold.c_blue {
    font-size: 1.6rem;
}

/* --------------------------------
   □  flow
-------------------------------- */

/* --------------------------------
   □  related
-------------------------------- */
#related ul.list.col4 li dt {
    margin-bottom: 10px;
}
#related ul.list.col4 li dd {
    line-height: 1.5;
    margin-bottom: 0;
}

/* --------------------------------
   □  recommend02
-------------------------------- */
#recommend02 ul.slickSlider li.slick-slide > a {
    background-color: #fff;
}
#recommend02 .btn_area .buttonStyle.store a {
    padding: 8.5px;
}

    /* --------------------------------
       □  searchbybrand
    -------------------------------- */
    #searchbybrand  {
        padding-top: 0;
    }
    #searchbybrand ul.list.col4 {
        margin: 0 -18px;
        margin-bottom: -50px;
    }
    #searchbybrand ul.list.col4 > li {
        max-width: 348px;
        margin: 0 18px 50px 18px;
    }

    #searchbybrand ul.list li dd p.ttl img {
        width: auto;
    }
    #searchbybrand ul.list li dd p.text {
        color: #808080;
        margin-bottom: 0;
    }



@media (max-width: 1600px) and (min-width: 768px) {
    /* ==================================================================
       ■ index ページ
    =================================================================== */
    /* --------------------------------
       □  brand
    -------------------------------- */
    #brand ul.list.col4 {
        justify-content: space-between;
        margin: 0 0 -50px 0;
        max-width: inherit;
    }
    #brand ul.list.col4 > li {
        width: 32%;
        max-width: inherit;
        margin: 0 0 50px 0;
    }

    /* --------------------------------
       □  searchbybrand
    -------------------------------- */
    #searchbybrand ul.list.col4 {
        justify-content: space-between;
        margin: 0 0 -50px 0;
        max-width: inherit;
    }
    #searchbybrand ul.list.col4 > li {
        width: 32%;
        max-width: inherit;
        margin: 0 0 50px 0;
    }


    /* ==================================================================
       ■ engagement_4c ページ
    =================================================================== */

    /* ==================================================================
       ■ 商品詳細 ページ detail
    =================================================================== */
}


@media (max-width: 1300px) and (min-width: 768px) {
    /* ==================================================================
       ■ index ページ
    =================================================================== */
    /* --------------------------------
       □  justfortwo
    -------------------------------- */
    #justfortwo .container:before {
        bottom: -120px;
        left: 0;
    }
    #justfortwo .container:after {
        top: -120px;
        right: 0;
    }

    /* --------------------------------
       □  byType
    -------------------------------- */
    #byType figcaption .image_sml {
        max-width: 90px;
    }
    #byType figcaption dl dt.ttl {
        padding-right: 120px;
        margin-bottom: 20px;
    }

    /* モーダル */
    .mfp-container .modal-wrap {
        width: auto;
        margin-left: 4%;
        margin-right: 4%;
        padding: 60px 4%;
    }


    /* ==================================================================
       ■ engagement_4c ページ
    =================================================================== */

    /* ==================================================================
       ■ 商品詳細 ページ detail
    =================================================================== */
    #engagement.detail .container {
        margin-left: 4%;
        margin-right: 4%;
    }

    /* --------------------------------
       □  advice (detail/engagement_4cで使用)
    -------------------------------- */
    #advice .container {
        width: auto;
        margin-left: 4%;
        margin-right: 4%;
    }
    #advice .adviceBox .txtArea {
        padding: 20px 4%;
    }
        #advice .adviceBox .txtArea .text {
            margin-bottom: 20px;
            margin-right: 0;
            min-width: inherit;
        }
        #advice .adviceBox .txtArea .text br.pc{
            display: none;
        }
    #advice .adviceBox .txtArea .flexbox.bg_darkblue {
        flex-direction: column;
        padding: 20px 4%;
    }
    #advice .adviceBox .txtArea .text._l {
        margin-right: 0;
    }
        #advice .adviceBox .txtArea .text._l br.pc{
            display: none;
        }
    #advice .adviceBox .txtArea .btn_area {
        max-width: inherit;
    }
        #advice .adviceBox .txtArea .buttonStyle a {
            font-size: 1.4rem;
            padding: 12px;
        }
}


/* タブレット用
-------------------------------------------- */
@media (max-width: 999px) and (min-width: 768px) {
    /* ==================================================================
       ■ index ページ
    =================================================================== */
    /* --------------------------------
       □  engagementRings
    -------------------------------- */
    #engagementRings ul.itemList > li {
        padding: 20px 10px;
    }

    /* モーダル */
    .mfp-container .modal-wrap .lv3.title._l {
        font-size: 2.2rem;
        margin-bottom: 30px;
    }
    .mfp-container .modal-wrap .lv4.title.bg_blue {
        font-size: 1.4rem;
        background-color: #F2F7FF;
        padding: 20px 4%;
    }


    /* ==================================================================
       ■ 商品詳細 ページ detail
    =================================================================== */
    /* --------------------------------
       □  item
    -------------------------------- */
    #item .utility {
        width: auto;
    }
    #item .utility .btn_area a {
        font-size: 1.5rem;
        padding: 12px;
    }

    /* --------------------------------
       □  advice (detail/engagement_4cで使用)
    -------------------------------- */
}


@media only screen and (max-width : 767px) {
    /* ==================================================================
       ■ index ページ
    =================================================================== */
    /* --------------------------------
       □  fair
    -------------------------------- */
    #fair ul.slickSlider li.slick-slide {
        margin: 0 6px 50px 6px;
    }

    /* --------------------------------
       □  brand
    -------------------------------- */
    #brand ul.list.col4 {
        justify-content: space-between;
        margin: 0 0 -30px 0;
    }
    #brand ul.list.col4 > li {
        width: 48%;
        margin: 0 0 30px 0;
    }

    #searchbybrand ul.list.col4 {
        justify-content: space-between;
        margin: 0 0 -30px 0;
    }
    #searchbybrand ul.list.col4 > li {
        width: 48%;
        margin: 0 0 30px 0;
    }


    /* --------------------------------
       □  collection_concept
    -------------------------------- */
    #collection_concept {
        padding-top: 0;
    }
    #collection_concept #concept {
        padding-top: 50px;
    }

    /* --------------------------------
       □  justfortwo
    -------------------------------- */
    #justfortwo .container {
        padding: 60px 0;
    }
        #justfortwo .container:before {
            bottom: -120px;
            left: 0;
            zoom: 0.8;
        }
        #justfortwo .container:after {
            top: -120px;
            right: 0;
            zoom: 0.8;
        }

    #justfortwo .lv3 {
        font-size: 4rem;
    }
        #justfortwo .lv3 span.mincho {
            font-size: 1.6rem;
            margin-top: 0;
        }
    #justfortwo .asterisk {
        margin-bottom: 30px;
    }

    /* --------------------------------
       □  byType
    -------------------------------- */
    #byType {
        padding: 60px 0;
    }
    #byType ul.list li:not(:last-child) {
        margin-bottom: 40px;
    }
        #byType ul.list li:last-child {
            margin-bottom: 0;
        }

    #byType figcaption .image_sml {
        right: 6%;
        top: -80px;
        max-width: 100px;
    }
    #byType figcaption dl dt.ttl {
        font-size: 2.2rem;
        padding-right: 130px;
        margin-bottom: 20px;
    }
        #byType figcaption dl dt.ttl span {
            font-size: 1.5rem;
        }

    /* --------------------------------
       □  engagementRings
    -------------------------------- */
    #engagementRings ul.itemList > li {
        padding: 20px 4%;
        padding: 0;
        padding-bottom: 3vw;
    }

    #engagementRings ul.itemList > li figcaption{
        padding: 3vw 3vw 0 3vw;
    }
    #engagementRings ul.itemList li .btn_area{
        padding: 0 3vw;
    }

    /* --------------------------------
       □  concierge
    -------------------------------- */
    #concierge ul.list li:not(:last-child) {
        margin-bottom: 20px;
    }
    #concierge ul.list li dl dt {
        margin-bottom: 5px;
    }

    /* モーダル */
    .mfp-container .modal-wrap {
        width: auto;
        margin-left: 4%;
        margin-right: 4%;
        padding: 40px 4%;
    }
    .mfp-container .mfp-close {
        right: 4%!important;
        top: 2%!important;
    }
    .mfp-container .modal-wrap ul.list {
        margin: 20px auto;
    }
    .mfp-container .modal-wrap ul.list li {
        display: inline-block;
        margin-bottom: 5px;
    }
    .mfp-container .modal-wrap .lv3.title._l {
        font-size: 2rem;
        margin-bottom: 30px;
    }
    .mfp-container .modal-wrap .lv4.title.bg_blue {
        padding: 10px 4%;
        margin-bottom: 10px;
    }
    .mfp-container .modal-wrap .buttonStyle.gold.arrow {
        max-width: 315px;
    }
    .mfp-container .modal-wrap .buttonStyle.gold.arrow button {
        font-size: 1.4rem;
        padding: 12.5px 32px;
    }
        .mfp-container .modal-wrap .buttonStyle.gold.arrow button span:before {
            top: 18px;
        }


    /* ==================================================================
       ■ engagement_4c ページ
    =================================================================== */
    /* --------------------------------
       □  about
    -------------------------------- */
    #about ul.slickSlider li.slick-slide {
        margin: 0 6px 50px 6px;
    }

    /* --------------------------------
       □  collections
    -------------------------------- */
    #collections .flexbox + .flexbox {
        margin-top: 50px;
    }
        #collections .flexbox:nth-of-type(3n) {
            margin-top: 60px;
        }
    #collections .flexbox .imgArea {
        margin-top: 40px;
    }
    #collections .flexbox ul.slickSlider,
    #collections .flexbox.reverse ul.slickSlider {
        margin-right: 0;
        margin-left: 0;
        padding-right: 0;
        padding-left:0;
    }
        #collections ul.slickSlider li.slick-slide {
            margin: 0 6px 35px 6px;
        }
    #collections ul.slickSlider .slick-dots,
    #collections .flexbox.reverse ul.slickSlider .slick-dots {
        z-index: 10;
        width: calc( 100% - 50px);
        bottom: 0;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    }
    #collections ul.slickSlider .prev-arrow,
    #collections .flexbox.reverse ul.slickSlider .prev-arrow {
        left: 0;
        right: auto;
    }
    #collections ul.slickSlider .next-arrow,
    #collections .flexbox.reverse ul.slickSlider .next-arrow {
        right: 0;
        left: auto;
    }

    /* --------------------------------
       □  advice
    -------------------------------- */
    #engagement.engagement_4c #advice {
        margin-bottom: 0;
    }
    #engagement.engagement_4c #advice .container {
        width: auto;
        margin-left: 4%;
        margin-right: 4%;
    }
    #advice .concierge .buttonStyle.store a,
    #advice .buttonStyle.store.location a {
        font-size: 1.4rem;
    }

    #searchbybrand ul.list.col4 > li {
        margin-bottom: 20px;
    }
        #searchbybrand ul.list.col4 > li:nth-last-child(-n+2) {
            margin-bottom: 0;
        }


    /* ==================================================================
       ■ 商品詳細 ページ detail
    =================================================================== */
    #engagement.detail .contents main .accent {
        height: auto; 
    }

    #engagement.detail main > .accent img{
        height: auto; 
    }

    #engagement.detail .container {
        margin-left: 4%;
        margin-right: 4%;
    }

    /* --------------------------------
       □  item
    -------------------------------- */
    #item .title-wrap .lv3.title {
        font-size: 3rem;
    }
    #item .title-wrap .cat {
        margin-bottom: 10px;
    }

    #item .item_spec {
        padding: 20px 4%;
    }
    #item .item_desc dl:not(:last-child) {
        margin-bottom: 10px;
    }
        #item .item_desc dt {
            padding-right: 20px;
        }

    #item .shareArea {
        min-width: inherit;
        margin: 50px auto 20px;
        float: none;
    }
    #item .shareArea .buttonStyle.fav {
        margin: 20px auto 0;
    }
        #item .shareArea .buttonStyle.fav button {
            font-size: 1.4rem;
        }
    #item .shareArea .shareon {
        margin: 20px auto 0;
    }
    #item .utility {
        text-align: center;
    }
    #item .utility .btn_area {
        width: 100%;
    }
        #item .utility .btn_area li:not(:last-child) {
            margin-bottom: 10px;
        }
        #item .utility .btn_area li:first-child {
            margin-bottom: 0
        }
        #item .utility .btn_area li:last-child {
            margin-top: 10px;
        }
        #item .utility .btn_area a {
            max-width: inherit;
            font-size: 1.4rem;
        }
    #item .utility .buttonStyle.txt.pc {
        display: none;
    }
    #item .utility .buttonStyle.txt.sp {
        display: inline-block;
    }
        #item .utility .buttonStyle.arrow a {
            text-align: center;
            width: auto;
        }

    /* --------------------------------
       □  concept (detail/engagement_4cで使用)
    -------------------------------- */
    #concept .flexbox:not(:last-child) {
        margin-bottom: 0px;
    }
    #concept figure {
        margin-bottom: 10px;
    }
    #concept .sub-image {
        margin-top: 30px;
        text-align: center;
    }

    /* --------------------------------
       □  material
    -------------------------------- */
    #material h3.lv3 {
        margin-bottom: 30px;
    }
    #material .list {
        margin-bottom: 30px;
    }
        #material .list li {
            width: 48%;
            margin-top: 20px;
        }
    #material .list li dt img {
        width: 100%;
    }

    /* --------------------------------
       □  section.contactSec
    -------------------------------- */

    /* --------------------------------
       □  service
    -------------------------------- */
    #service ul.list li:not(:last-child) {
        margin-bottom: 40px;
    }
    #service figure {
        margin-bottom: 10px;
    }
    #service .txtArea .lv3.title {
        margin-bottom: 10px;
    }
    #service .txtArea .text._s {
        margin-bottom: 10px;
    }

    /* --------------------------------
       □  advice (detail/engagement_4cで使用)
    -------------------------------- */
    #advice .adviceBox:not(:last-child) {
        margin-bottom: 40px;
    }
        #advice .adviceBox:not(:last-child) .txtArea {
            padding-bottom: 0;
        }
    #advice .adviceBox + .adviceBox {
        margin-top: 30px;
    }
    #advice .adviceBox .txtArea {
        width: 100%;
        margin: 0;
        padding: 30px 4% 40px;
    }
    #advice .adviceBox .txtArea > .text {
        margin-bottom: 20px;
    }
    #advice .concierge {
        padding: 30px 4%;
        margin-left: -4%;
        margin-right: -4%;
        width: 108%!important;
    }
    #advice .concierge .text {
        font-size: 1.5rem;
        min-width: inherit;
        margin-bottom: 5px;
    }
        #advice .concierge .buttonStyle.store a {
            font-size: 1.4rem;
            padding: 12px;
        }

    /* --------------------------------
       □  flow
    -------------------------------- */
    /* --------------------------------
       □  related
    -------------------------------- */
    #related ul.list.col4 li dt {
        margin-bottom: 5px;
    }

    /* --------------------------------
       □  recommend02
    -------------------------------- */
    #recommend02 .btn_area .buttonStyle.store a {
        padding: 7px;
        font-size: 1.3rem;
    }

}


#faqbox{
	max-width: 800px;
	margin: 0 auto;
}

#faqbox dl{
	text-align: left;
	margin-bottom: 30px;
	border-bottom: 1px solid #E1E1E1;
	padding-bottom: 30px;
}

#faqbox dl dt{
	display: block;
	cursor: auto;
	position: relative;
	padding-left: 46px;
	padding-right: 20px;
	margin-bottom: 25px;
	font-weight:bold;
}

#faqbox dl dt:before{
	position: absolute;
	left: 20px;
	font-size: 1.5rem;
	font-weight: 700;
	height: 23px;
	width: 17px;
	text-align: center;
	color: #7993BA;
	top: 0px;
	content: "Q.";
}

#faqbox dl dd{
	display: block;
	cursor: auto;
	position: relative;
	padding-left: 46px;
	padding-right: 20px;
	font-size: 0.9em;
}

#faqbox dl dd:before{
	position: absolute;
	left: 20px;
	font-size: 1.5rem;
	font-weight: 700;
	height: 23px;
	width: 17px;
	text-align: center;
	top: 0px;
	content: "A.";
}