@charset "UTF-8";

/* コンテンツ */

#contents{
    background: #e6e5da;
    padding-top: 70px;
}

/* コンテンツタイトル */

#contents h3{
    width: 100%;
    text-align: center;
    font-family: 'Bellefair', serif;
    color: #575757;
    font-size: 1.6875rem;
    letter-spacing: .3em;
    padding-bottom: 60px;
}

/* コンテンツリスト */

#contents .wrapper{
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 70px;
}

#contents .wrapper .pdfList{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
}

#contents .wrapper .pdfList li{
    display: block;
    width: 48%;
    background: #fff;
    border: #978357 1px solid;
    box-shadow: 0 0 0 6px #fff;
    margin-bottom: 35px;
}

#contents .wrapper .pdfList a{
    display: block;
    width: 100%;
    text-decoration: none;
    transition: all 0.3s ease-out;
    padding: 17px 0 23px;
}

#contents .wrapper .pdfList a .pdfTtl{
    text-align: center;
    font-size: clamp(1.313rem, 0.078rem + 2.58vw, 1.688rem);
    color: #978357;
    padding-bottom: 17px;
}

#contents .wrapper .pdfList a .pdfTtl small {
    display: block;
    width: 100%;
    font-family: 'Bellefair', serif;
    font-size: clamp(0.75rem, 0.131rem + 1.29vw, 0.938rem);
    letter-spacing: .35em;
    line-height: 1.8;
}

#contents .wrapper .pdfList a .pdfTtl .space{
    letter-spacing: .1em;
}

#contents .wrapper .pdfList a .clickBtn {
    display: block;
    width: 72%;
    background: #575757;
    color: #fff;
    text-align: center;
    font-size: 0.875rem;
    font-family: 'Bellefair', serif;
    letter-spacing: .5em;
    line-height: 1.5;
    margin: 0 auto;
    padding-top: 3px;
    position: relative;
    z-index: 1;
    transition: .3s;
}

#contents .wrapper .pdfList a .clickBtn:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: #b8a577;
    transition: transform ease .4s;
    transform-origin: 100% 50%;
    transform: scaleX(0);
}


#contents .wrapper .pdfList :hover a .clickBtn:before {
    transform-origin: 0% 50%;
    transform: scaleX(1);
}

/* 副題なしのボタンの高さと文字間の調整 */

#contents .wrapper .pdfList .btnheight a{
    padding: 30px 0 30px;
}

#contents .wrapper .pdfList .btnheight a .pdfTtl{
    font-size: clamp(1.313rem, 1.225rem + 0.44vw, 1.5rem);
    padding-bottom:22px;
}

#contents .wrapper .pdfList .btnheight a .pdfTtl .space{
    letter-spacing: .4em;
}

/* プレミアムボタン */

#contents .wrapper .pdfList .black {
    background: #575757;
    box-shadow: 0 0 0 6px #575757;
}

#contents .wrapper .pdfList .black a .clickBtn {
    background: #fff;
    color: #575757;
}

/* 戻るボタン */

.backWrap {
    padding-bottom: 95px;
}

.backBtn {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 300px;
    background: #fff;
    border: #595757 1px solid;
    box-shadow: 0 0 0 6px #fff;
    text-align: center;
    font-size: 1.125rem;
    font-family: 'Bellefair', serif;
    letter-spacing: .5em;
    line-height: 2;
}

.backBtn:hover{
    background: #595757;
    border: #fff 1px solid;
    box-shadow: 0 0 0 6px #595757;
    color: #fff;
}

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

    /* コンテンツリスト */
    
    #contents .wrapper .pdfList a .clickBtn:before {
        content: none;
    }


    #contents .wrapper .pdfList :hover a .clickBtn:before {
        content: none;
    }

}

@media screen and (max-width: 767px) {
/* 767px以下に適用されるCSS（タブレット用） */

/* コンテンツリスト */

#contents .wrapper .pdfList {
    flex-direction: column;
    width: 100%;
}

#contents .wrapper .pdfList li {
    width: 100%;
}

#contents .wrapper .pdfList a .clickBtn:before {
    content: none;
}


#contents .wrapper .pdfList :hover a .clickBtn:before {
    content: none;
}

/* 戻るボタン */

.backBtn:hover {
    background: #fff;
    border: #595757 1px solid;
    box-shadow: 0 0 0 6px #fff;
    color: #595757;
}

}

@media screen and (max-width: 480px) {
/* 480px以下に適用されるCSS（スマホ用） */

/* メインタイトル */
.exclusive{
    padding: 70px 0 65px;
}

/* コンテンツ */

#contents {
    padding-top: 55px;
}


/* コンテンツタイトル */

#contents h3 {
    font-size: 1.375rem;
    letter-spacing: .2em;
    padding-bottom: 60px;
}

/* コンテンツリスト */

#contents .wrapper {
    padding-bottom: 55px;
}

/* 戻るボタン */

.backBtn {
    max-width: 50%;
    font-size: 0.875rem;
}

}