@charset "utf-8";


/* ==================================================================
    diamond.css

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

/* ==================================================================
   ■ 共通指定
=================================================================== */
.contents .container > .inner.flexbox.col2 figure,
.contents .container > .inner > .flexbox.col2 figure {
    width: 52%;
}
.contents .container > .inner.flexbox.col2 .txtArea,
.contents .container > .inner > .flexbox.col2 .txtArea {
    width: 42%;
}

.contents .text._s {
    margin-bottom: 0;
}
.contents .text._l {
    font-size: 2rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.contents .buttonStyle.light-blue {
    max-width: 348px;
}
    .contents .buttonStyle.light-blue a {
        width: 100%;
        font-size: 1.6rem;
        padding: 17px 32px;
        text-align: center;
    }
    .contents .buttonStyle.light-blue a:hover {
        opacity: 1;
    }

/* --------------------------------
   □  accent
-------------------------------- */
#diamond .accent {
    height: 200px;
}
    #diamond .accent .heading {
        text-transform: capitalize;
        margin-bottom: 20px;
    }

/* --------------------------------
   □  movie
-------------------------------- */
#movie .inner {
    max-width: 1244px;
    margin: auto;
}
.videoWrap {
    position: relative;
    width: 100%;
    padding-top: 46.78%;
    z-index: 9;
}
    .videoWrap video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/* --------------------------------
   □  intro
-------------------------------- */
#intro {
    background-image: url(../../images/diamond/intro2_pc.jpg);
    height: 834px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    margin-top: -30px;
    padding-top: 150px;
}
    #intro:before {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100px;
        top: 0;
        left: 0;
        background: rgb(255,255,255);
        background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    }
#intro .txtArea {
    position: relative;
}
    #intro .txtArea .image {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
    }

/* --------------------------------
   □  reason
-------------------------------- */
#reason .flexbox:not(:last-child) {
    margin-bottom: 80px;
}
#reason .flexbox figure {
    width: 52%;
}
#reason .flexbox .txtArea {
    width: 42%;
}

/* --------------------------------
    □  diamondQuality
-------------------------------- */
#diamondQuality .container > .inner > div:not(:last-child) {
    margin-bottom: 80px;
}
#diamondQuality #diamondQuality_list {
    padding: 80px 4% 60px;
}
    #diamondQuality #diamondQuality_list ul.list {
        max-width: 988px;
        margin: auto;
        padding-top: 0;
        padding-bottom: 20px;
    }
#diamondQuality .annotation {
    font-size: 1.4rem;
    position: relative;
    margin-bottom: 0;
}
    #diamondQuality .annotation:before {
        content: "";
        display: inline-block;
        width: 33px;
        height: 19px;
        margin-right: 6px;
        margin-bottom: -4px;
        background: url(../../images/diamond/quality5.jpg) no-repeat left center;
        background-size: contain;
    }
#diamondQuality dl.flexbox:not(:last-child) {
    margin-bottom: 80px;
}

#diamondQuality #ideal {
    max-width: 732px;
    margin-right: auto;
    margin-left: auto;
    padding: 30px 40px;
    border: 1px solid #DBDBDB;
}
#diamondQuality #ideal .lv4.en {
    font-size: 2.8rem;
    margin-bottom: 15px;
}
    #diamondQuality #ideal .lv4 span.mincho {
        font-size: 1.3rem;
    }
#diamondQuality #ideal .buttonStyle.arrow.txt span {
    font-size: 1.4rem;
    padding: 0 20px 0 0;
    position: relative;
}
    #diamondQuality #ideal .buttonStyle.arrow > span:before {
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        right: 4%;
        width: 10px;
        height: 16px;
    }
    #diamondQuality #ideal a:hover .buttonStyle.arrow > span:before {
        right: 0;
    }

/* --------------------------------
   □  unique
-------------------------------- */
#unique {
    padding-top: 0;
}
#unique > .container {
    padding: 100px 0;
}
#unique .accent#unique1 {
    background-image: url(../../images/diamond/unique1_bg_pc.jpg);
    height: 836px;
}
    #unique .accent#unique2 {
        background-image: url(../../images/diamond/unique2_bg_pc.jpg);
        height: 466px;
    }
#unique .accent .container {
    position: relative;
    height: 100%;
}
    #unique .accent .container .inner {
        position: relative;
        height: 100%;
    }
#unique .accent#unique1 .txtArea {
    position: absolute;
    top: auto;
    bottom: 20%;
    left: 0;
    transform: none;
    -webkit-transform: none;
    width: auto;
}
#unique .accent#unique1 .txtArea .lv3.title {
    margin-bottom: 0;
}

#unique .accent#unique2 .txtArea {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    width: 48%;
}
#unique .accent#unique2 .txtArea .lv4.title.underline:before {
    background: #fff;
}

/* --------------------------------
   □  explain
-------------------------------- */
#explain {
    padding: 0;
}
#explain .btn_area {
    max-width: 732px;
    margin: 50px auto 0;
}
#explain .btn_area li.buttonStyle.light-blue {
    margin: 0;
}

/* ◆ imagebox
-------------------------------- */
#explain .imagebox {
    padding-top: 120px;
}
    #explain .imagebox .txtArea {
        background: #97A8B1;
        padding-top: 135px;
        padding-bottom: 135px;
        height: auto;
    }
    #explain .imagebox .txtArea .lv3.title {
        margin-bottom: 20px;
    }
    #explain .imagebox .txtArea .text {
        line-height: 2;
        margin-bottom: 0;
    }
#explain .imagebox .buttonStyle.light-blue {
    margin: 30px auto 0 0;
}
    #explain .imagebox .buttonStyle.light-blue a {
        color: #97A8B1;
        background-color: #fff;
        border: 1px solid #97A8B1;
    }
    #explain .imagebox .buttonStyle.light-blue a:hover {
        color: #fff;
        background-color: #97A8B1;
        border: 1px solid #fff;
    }

/*  #explain_list
-------------------------------- */
#explain ul.list#explain_list li p.image {
    margin-bottom: 15px;
}


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


@media (max-width: 1400px) and (min-width: 768px) {
    /* --------------------------------
       □  explain
    -------------------------------- */
    /* ◆ imagebox
    -------------------------------- */
    #explain .imagebox .txtArea {
        padding-top: 130px;
        padding-bottom: 130px;
    }
}


@media (max-width: 1200px) and (min-width: 768px) {
    /* --------------------------------
       □  explain
    -------------------------------- */
    /* ◆ imagebox
    -------------------------------- */
    #explain .imagebox .txtArea {
        padding-top: 120px;
        padding-bottom: 120px;
    }
}


/* タブレット用
-------------------------------------------- */
@media (max-width: 999px) and (min-width: 768px) {
    /* --------------------------------
       □  explain
    -------------------------------- */
    /* ◆ imagebox
    -------------------------------- */
    #explain .imagebox .txtArea {
        padding-top: 100px;
        padding-bottom: 100px;
    }
}


@media only screen and (max-width : 767px) {
    /* ==================================================================
       ■ 共通指定
    =================================================================== */
    .contents .text,
    .contents .text._s {
        margin-bottom: 0;
    }
    .contents .text._l {
        font-size: 1.8rem;
    }

    .contents .container > .inner.flexbox.col2 figure,
    .contents .container > .inner > .flexbox.col2 figure {
        margin-bottom: 15px;
    }

    .contents .buttonStyle.light-blue {
        max-width: 280px;
    }
        .contents .col2 .buttonStyle.light-blue {
            width: 48%;
        }
        .contents .buttonStyle.light-blue a {
            font-size: 1.4rem;
            padding: 12px 32px;
        }

    /* --------------------------------
       □  accent
    -------------------------------- */
    #diamond .accent {
        height: 150px;
    }

    /* --------------------------------
       □  movie
    -------------------------------- */
    .videoWrap {
        padding-top: 124%;
    }

    /* --------------------------------
       □  intro
    -------------------------------- */
    #intro {
        background-image: url(../../images/diamond/intro2_sp.jpg);
        width: 100%;
        height: 530px;
        margin-top: 0;
        padding-top: 60px;
}
    #intro .txtArea .image {
        width: 92%;
        height: auto;
    }

    /* --------------------------------
       □  reason
    -------------------------------- */
    #reason .flexbox:not(:last-child) {
        margin-bottom: 40px;
    }
    #reason .flexbox figure {
        margin-bottom: 15px;
    }

    /* --------------------------------
       □  diamondQuality
    -------------------------------- */
    #diamondQuality .container > .inner > div:not(:last-child) {
        margin-bottom: 40px;
    }
    #diamondQuality #diamondQuality_list {
        padding: 40px 4%;
    }    
    #diamondQuality .annotation {
        font-size: 1.3rem;
    }
    #diamondQuality #ideal {
        padding: 10px 4%;
    }
        #diamondQuality #ideal .lv4.en {
            font-size: 2.2rem;
        }
        #diamondQuality #ideal .buttonStyle.txt {
            margin-bottom: 10px;
        }

    /* --------------------------------
       □  unique
    -------------------------------- */
    #unique > .container {
        padding: 60px 0;
    }
    #unique .accent#unique1 {
        background-image: url(../../images/diamond/unique1_bg_sp.jpg);
        height: 400px;
    }
        #unique .accent#unique2 {
            background-image: url(../../images/diamond/unique2_bg_sp.jpg);
            height: 600px;
        }
    #unique .accent#unique1 .txtArea {
        bottom: 8%;
    }
    #unique .accent#unique2 .txtArea {
        position: absolute;
        top: 4%;
        left: 0;
        transform: none;
        -webkit-transform: none;
        width: auto;
    }
    #unique .accent#unique2 .txtArea .text {
        text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        width: 80%;
        line-height: 2.2;
    }

    /* --------------------------------
       □  explain
    -------------------------------- */
    #explain .btn_area {
        margin-top: 30px;
    }

    /* ◆ imagebox
    -------------------------------- */
    #explain .imagebox {
        padding-top: 60px;
    }
    #explain .imagebox .txtArea {
        padding-top: 30px;
        padding-bottom: 60px;
    }
    #explain .imagebox .buttonStyle.light-blue {
        margin: 20px auto 0;
    }

    /*  #explain_list
    -------------------------------- */
    #explain ul.list#explain_list li p.image {
        margin-bottom: 10px;
    }

}