@charset "UTF-8";

html {font-size: 62.5%;}

main.main-area.lp {
    position: relative;
}

#contentsMain {
    color: #1c1c1c;
}

/* フェードイン */
#contentsMain .loadFade {
    opacity: 0;
    transform: translateY(10px);
    transition: all 1s;
}
#contentsMain .loadFade.done {
    opacity : 1;transform : translate(0, 0);
}
#contentsMain .scrollFade .fade1 {
    opacity: 0;
    transform: translateY(10px);
    transition: all 1s;
}
#contentsMain .scrollFade .fade2 {
    opacity: 0;
    transform: translateY(10px);
    transition: all 1s;
    transition-delay: 0.5s;
}
#contentsMain .scrollFade.done .fade1 {
    opacity : 1;transform : translate(0, 0);
}
#contentsMain .scrollFade.done .fade2 {
    opacity : 1;transform : translate(0, 0);
}

/*==========================
パンくず
==========================*/
.breadcrumbBlock {
    background-color: #fff;
}
#breadcrumb {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}
#breadcrumb li {
    font-family: 'Hiragino Kaku Gothic ProN','Hiragino Sans', Meiryo, sans-serif !important;
    /* color: #CECECE; */
    color: #1C1C1C;
    letter-spacing: .05em;
}
#breadcrumb li.currentPage {
    color: #1C1C1C;
}

/*==========================
LP
==========================*/
#contentsMain {
    color: #1C1C1C;
}

#contentsMain .lp_main {
    background-color: #fff;
}

#contentsMain .mvBlock {
    position: relative;
}

/* MV */
#contentsMain .pageTitle h2 {
    color: #fff;
    font-family: minion-pro, serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: .05em;
}
#contentsMain .pageTitle h3 {
    color: #fff;
    font-family: minion-pro, serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: .05em;
}

/* 特集アクセサリー */
#contentsMain .mainTxt1 {
    font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", 'Noto Serif JP', "MS P明朝", "MS PMincho", serif;
    line-height: 1.75;
    letter-spacing: .05em;
    text-align: center;
}  
#contentsMain .mainTxt2 {
    font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", 'Noto Serif JP', "MS P明朝", "MS PMincho", serif;
    line-height: 1.75;
    letter-spacing: .05em;
    text-align: center;   
}
#contentsMain .lpInner h2 {
    font-family: minion-pro, serif;
    line-height: 1.2;
    letter-spacing: .05em;
}
#contentsMain .lpInner h3 {
    position: relative;
    color: #707070;
    font-family: minion-pro, serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: .05em;
}
#contentsMain .lpInner .lpTxt {
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN','Hiragino Sans', Meiryo, sans-serif !important;
    line-height: 1.75;
    letter-spacing: .05em;
}
#contentsMain .lpInner .lp_itemCredit {
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN','Hiragino Sans', Meiryo, sans-serif !important;
    line-height: 2.1;
    letter-spacing: .05em;
}
#contentsMain .lpInner .lp_itemCredit a {
    display: inline-block;
}
#contentsMain .lpInner .lp_itemCredit a span {
    text-decoration: underline;
}

/* 特集まとめ */
#contentsMain .lp_ItemAll {
    background-color: #fff;
}

#contentsMain .lp_ItemAll h2 {
    font-family: minion-pro, serif;
    letter-spacing: .05em;
    text-align: center;
}
#contentsMain .lp_ItemAll h5 {
    font-family: minion-pro, serif;
    letter-spacing: .05em;
    text-align: center;
	font-size: 22px;
}
#contentsMain .lp_ItemAll h6 {
    font-family: minion-pro, serif;
    letter-spacing: .05em;
    text-align: center;
	font-size: 12px;
}

#contentsMain .lp_ItemAll p {
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN','Hiragino Sans', Meiryo, sans-serif !important;
    line-height: 1.75;
    letter-spacing: .05em;
    text-align: center;
}
#contentsMain .lp_ItemAll .lp_itemList h3 {
    font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", 'Noto Serif JP', "MS P明朝", "MS PMincho", serif;
    letter-spacing: .05em;
}
#contentsMain .lp_ItemAll .lp_itemList h4 {
    color: #575757;
    font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", 'Noto Serif JP', "MS P明朝", "MS PMincho", serif;
    letter-spacing: .05em;
}


/*************************************SP****************************************/
@media screen and ( max-width:767px ) {

    /*==========================
    パンくず
    ==========================*/
    #breadcrumb {
        padding: calc(28*(100vw/750)) calc(20*(100vw/750));
    }
    #breadcrumb li {
        font-size: calc(22*(100vw/750));
    }
    #breadcrumb li span {
        margin: 0 calc(12*(100vw/750));
    }

    /*==========================
    LP
    ==========================*/
    /* MV */
    #contentsMain .mvBlock {
        padding: calc(455*(100vw/750)) 0;
    }
    #contentsMain .mvBlock::before {
        content:"";
        display:block;
        position:fixed;
        top:0;
        left:0;
        z-index:-1;
        width:100%;
        height:100vh;
        background-repeat:no-repeat;
        background-position: 0 147px;
        background-image: url('../img/mvSp_0904_Cherimo.jpg');
        background-size: 100%;
    }

    #contentsMain .pageTitle {
        position: absolute;
        top: 42%;
        left: 0;
        right: 0;
        margin: auto;
        text-align: center;
    }
    #contentsMain .pageTitle h2 {
        font-size: calc(28*(100vw/750));
    }
    #contentsMain .pageTitle h3 {
        margin-top: calc(16*(100vw/750));
        font-size: calc(56*(100vw/750));
    }

    #contentsMain .lp_main {
        padding-bottom: calc(10*(100vw/750));
    }

    #contentsMain .mainTxt1 {
        padding: calc(80*(100vw/750)) calc(20*(100vw/750)) 0;
        font-size: calc(30*(100vw/750));
    }
    #contentsMain .mainTxt2 {
        padding: calc(75*(100vw/750)) calc(20*(100vw/750)) 0;
        font-size: calc(24*(100vw/750));
    }
    /* 特集アクセサリー */
    #contentsMain .lpInner {
        margin-top: calc(200*(100vw/750));
    }
    #contentsMain .lpInner .lpContents {
        display: flex;
        flex-direction: column-reverse;
        width: calc(670*(100vw/750));
    }
    #contentsMain .lpInner .lpContents:nth-of-type(n+2) {
        margin-top: calc(160*(100vw/750));
    }
    #contentsMain .lpInner .lpContents.flexNormal {
        margin-left: auto;
    }
    #contentsMain .lpInner .lpContents.flexReverse .lpLeft {
        padding-left: calc(20*(100vw/750));
    }
    #contentsMain .lpInner .lpContents .lpLeft {
        width: calc(640*(100vw/750));
    }

    #contentsMain .lpInner h2 {
        margin-top: calc(80*(100vw/750));
        font-size: calc(40*(100vw/750));
    }
    #contentsMain .lpInner h3 {
        margin-top: calc(28*(100vw/750));
        padding-left: calc(80*(100vw/750));
        font-size: calc(26*(100vw/750));
    }
    #contentsMain .lpInner h3::before {
        content: '';
        display: block;
        position: absolute;
        top: calc(14*(100vw/750));
        left: 0;
        width: calc(60*(100vw/750));
        height: calc(2*(100vw/750));
        background-color: #707070;
    }
    #contentsMain .lpInner .lpTxt {
        margin-top: calc(48*(100vw/750));
        font-size: calc(26*(100vw/750));
    }
    #contentsMain .lpInner .lp_itemCredit {
        margin-top: calc(40*(100vw/750));
        font-size: calc(20*(100vw/750));
    }

    /* 特集まとめ */
    #contentsMain .lp_ItemAll {
        padding: calc(80*(100vw/750)) calc(20*(100vw/750)) calc(160*(100vw/750));
    }

    #contentsMain .lp_ItemAll h2 {
        margin-top: 0;
        font-size: calc(50*(100vw/750));
    }
    #contentsMain .lp_ItemAll p {
        margin-top: calc(60*(100vw/750));
        font-size: calc(26*(100vw/750));
    }
    #contentsMain .lp_ItemAll .lp_itemList {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        max-width: calc(710*(100vw/750));
        width: 100%;
        margin: calc(80*(100vw/750)) auto 0;
    }
    #contentsMain .lp_ItemAll .lp_itemList li {
        width: calc(344*(100vw/750));
    }
    #contentsMain .lp_ItemAll .lp_itemList li:nth-of-type(n+3) {
        margin-top: calc(60*(100vw/750));
    }
    #contentsMain .lp_ItemAll .lp_itemList h3 {
        margin-top: calc(35*(100vw/750));
        font-size: 2.7vw;
        text-align: center;
    }
    #contentsMain .lp_ItemAll .lp_itemList h4 {
        margin-top: calc(15*(100vw/750));
        font-size: 2.7vw;
        text-align: center;
    }

}

/*************************************PC****************************************/
@media screen and (max-width: 1400px) and (min-width: 768px) {
    html {font-size: calc(10* (100vw / 1400)) !important;}
}
@media only screen and (min-width: 768px) {

    /*==========================
    パンくず
    ==========================*/
    #breadcrumb {
        max-width: 120rem;
        padding: 1.15rem 0;
    }
    #breadcrumb li {
        font-size: 1.1rem;
    }
    #breadcrumb li span {
        margin: 0 .5rem;
    }

    /*==========================
    LP
    ==========================*/
    /* MV */
    #contentsMain .mvBlock {
        padding: 20.3%;
    }
    #contentsMain .mvBlock::before {
        content:"";
        display:block;
        position:fixed;
        top:0;
        left:0;
        z-index:-1;
        width:100%;
        height:100vh;
        background-repeat:no-repeat;
        background-position: 0 6rem;
        background-image: url('../img/mvPc_0904_Cherimo.jpg');
        background-size: 100%;
    }

    #contentsMain .pageTitle {
        position: absolute;
        top: 43%;
        left: 0;
        right: 0;
        margin: auto;
        text-align: center;
    }
    #contentsMain .pageTitle h2 {
        font-size: calc(22*(100vw/1200));
    }
    #contentsMain .pageTitle h3 {
        margin-top: 1.5rem;
        font-size: calc(44*(100vw/1200));
    }

    #contentsMain .lp_main {
        padding-bottom: 4rem;
    }

    #contentsMain .mainTxt1 {
        margin: 0 auto;
        padding-top: 6rem;
        font-size: calc(14*(100vw/1200));
    }
    #contentsMain .mainTxt2 {
        margin: 0 auto;
        padding-top: 4rem;
        font-size: calc(14*(100vw/1200));
    }

    /* 特集アクセサリー */
    #contentsMain .lpInner .lpContents {
        width: calc(1200*(100vw/1400));
        margin: 10rem auto 0;
    }
    #contentsMain .lpInner .lpContents.flexNormal {
        display: flex;
        justify-content: center;
    }
    #contentsMain .lpInner .lpContents.flexReverse {
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
    }
    #contentsMain .lpInner .lpContents.flexNormal .lpLeft {
        margin-right: calc(40*(100vw/1400));
        padding-left: calc(100*(100vw/1400));
    }
    #contentsMain .lpInner .lpContents.flexReverse .lpLeft {
        margin-left: calc(40*(100vw/1400));
        padding-right: calc(100*(100vw/1400));
    }

    #contentsMain .lpInner h2 {
        margin-top: 4rem;
        font-size: calc(24*(100vw/1200));
    }
    #contentsMain .lpInner h3 {
        margin-top: 1.4rem;
        padding-left: 4rem;
        font-size: calc(14*(100vw/1200));
    }
    #contentsMain .lpInner h3::before {
        content: '';
        display: block;
        position: absolute;
        top: .7rem;
        left: 0;
        width: 3rem;
        height: .1rem;
        background-color: #707070;
    }
    #contentsMain .lpInner .lpTxt {
        margin-top: 3rem;
        font-size: calc(14*(100vw/1200));
    }
    #contentsMain .lpInner .lp_itemCredit {
        margin-top: 3rem;
        font-size: calc(12*(100vw/1200));
    }

    #contentsMain .lpInner .lp_Img {
        width: 100;
        margin: 0 auto;
    }

    /* 特集まとめ */
    #contentsMain .lp_ItemAll {
        padding: 7rem 0 12rem 0;
    }

    #contentsMain .lp_ItemAll h2 {
        font-size: calc(30*(100vw/1200));
    }
    #contentsMain .lp_ItemAll p {
        margin-top: 2rem;
        font-size: calc(14*(100vw/1200));
    }
    #contentsMain .lp_ItemAll .lp_itemList {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        max-width: calc(1200*(100vw/1400));
        width: 100%;
        margin: 5rem auto 0;
    }
    #contentsMain .lp_ItemAll .lp_itemList li {
        width: calc(270*(100vw/1400));
        margin-left: 3.8rem;
        margin-bottom: 5rem;
    }

    /* 4カラム*/
    /*#contentsMain .lp_ItemAll .lp_itemList li:nth-of-type(1),
    #contentsMain .lp_ItemAll .lp_itemList li:nth-of-type(5),
    #contentsMain .lp_ItemAll .lp_itemList li:nth-of-type(9) {
        margin-left: 0;
    }*/

    #contentsMain .lp_ItemAll .lp_itemList li{
        margin-left: 0;
    }
    #contentsMain .lp_ItemAll .lp_itemList h3 {
        margin-top: 1rem;
        font-size: calc(12*(100vw/1200));
    }
    #contentsMain .lp_ItemAll .lp_itemList h4 {
        margin-top: 1rem;
        font-size: calc(12*(100vw/1200));
    }

}

/*=================================
PC width1200px以上 フォントサイズ固定
=================================*/
@media only screen and (min-width: 1200px) {

    /*==========================
    LP
    ==========================*/
    /* MV */
    #contentsMain .pageTitle h2 {
        font-size: 22px;
    }
    #contentsMain .pageTitle h3 {
        font-size: 42px;
    }

    #contentsMain .mainTxt1 {
        font-size: 20px;
    }
    #contentsMain .mainTxt2 {
        font-size: 16px;
    }

    /* 特集アクセサリー */
    #contentsMain .lpInner h2 {
        font-size: 30px;
    }
    #contentsMain .lpInner h3 {
        font-size: 14px;
    }
    #contentsMain .lpInner .lpTxt {
        font-size: 14px;
    }
    #contentsMain .lpInner .lp_itemCredit {
        font-size: 12px;
    }

    /* 特集まとめ */
    #contentsMain .lp_ItemAll h2 {
        font-size: 33px;
    }
    #contentsMain .lp_ItemAll p {
        font-size: 14px;
    }
    #contentsMain .lp_ItemAll .lp_itemList h3 {
        font-size: 12px;
        text-align: center;
    }
    }
    #contentsMain .lp_ItemAll .lp_itemList h4 {
        font-size: 12px;
        text-align: center;
    }
    }

}

.img-sp {
    display: none;
}

@media screen and (max-width:560px) {
    .img-pc {
        display: none;
    }

    .img-sp {
        display: block;
    }
}



/*==========================
アンカーリンクナビゲーション - Cherimo版
==========================*/
.nav_anchor {
    background-color: #ffffff;
    padding: 25px 20px;
    border-radius: 8px;
    margin: 60px 0 40px 0;
}

.nav_anchor ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
}

.nav_anchor ul li {
    margin: 0;
}

.nav_anchor ul li a.btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
    color: #1c1c1c;
    font-size: 14px;
    font-weight: 400;
    font-family: minion-pro, serif;
    padding: 12px 18px;
    background-color: transparent;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    position: relative;
    letter-spacing: 0.05em;
    min-height: 60px;
}

.nav_anchor ul li a.btn::after {
    content: '';
    margin-top: 6px;
    margin-left: 0;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #6b7280;
    transition: all 0.3s ease;
}

.nav_anchor ul li a.btn:hover {
    color: #B8860B;
    border-color: #B8860B;
    background-color: rgba(184, 134, 11, 0.05);
    transform: translateY(-2px);
    box-shadow: none;
}

.nav_anchor ul li a.btn:hover::after {
    border-top-color: #B8860B;
    transform: translateY(3px);
}

/*************************************SP****************************************/
@media screen and (max-width:767px) {
    .nav_anchor {
        padding: calc(25*(100vw/750)) calc(15*(100vw/750));
    }

    .nav_anchor ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: calc(12*(100vw/750));
        max-width: none;
        margin: 0 auto;
    }

    .nav_anchor ul li {
        flex: none;
        min-width: auto;
    }

    .nav_anchor ul li a.btn {
        font-size: calc(23*(100vw/750));
        padding: calc(15*(100vw/750)) calc(12*(100vw/750));
        min-height: calc(80*(100vw/750));
    }

    .nav_anchor ul li a.btn::after {
        border-left-width: 3px;
        border-right-width: 3px;
        border-top-width: 4px;
        margin-top: calc(10*(100vw/750));
        margin-left: 0;
    }
}

/*************************************PC****************************************/
@media only screen and (min-width: 768px) {
    .nav_anchor {
        padding: calc(25*(100vw/1400)) calc(20*(100vw/1400));
    }

    .nav_anchor ul {
        gap: calc(12*(100vw/1400));
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        margin: 0 auto;
    }

    .nav_anchor ul li a.btn {
        font-size: calc(14*(100vw/1200));
        padding: calc(12*(100vw/1400)) calc(18*(100vw/1400));
        min-height: calc(60*(100vw/1400));
    }

    .nav_anchor ul li a.btn::after {
        border-left-width: calc(4*(100vw/1400));
        border-right-width: calc(4*(100vw/1400));
        border-top-width: calc(5*(100vw/1400));
        margin-top: calc(6*(100vw/1400));
        margin-left: 0;
    }
}

/*=================================
PC width1200px以上 フォントサイズ固定
=================================*/
@media only screen and (min-width: 1200px) {
    .nav_anchor {
        padding: 25px 20px;
    }

    .nav_anchor ul {
        gap: 12px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        margin: 0 auto;
    }

    .nav_anchor ul li a.btn {
        font-size: 15px;
        padding: 12px 18px;
        min-height: 60px;
    }

    .nav_anchor ul li a.btn::after {
        border-left-width: 4px;
        border-right-width: 4px;
        border-top-width: 5px;
        margin-top: 6px;
        margin-left: 0;
    }
}

/* View More ボタン - Gold Accent Square */
#contentsMain .moreItemBtn .viewmore-gold {
    display: block;
    margin: 0 auto;
    color: #1c1c1c;
    font-family: minion-pro, serif;
    letter-spacing: .05em;
    text-align: center;
    background: white;
    border: 1px solid #B8860B;
    border-radius: 3px;
    box-shadow: none;
    transition: all 0.4s ease;
    text-transform: uppercase;
    font-weight: 400;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

#contentsMain .moreItemBtn .viewmore-gold:hover {
    background: #B8860B;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(184, 134, 11, 0.3);
    opacity: 1;
}

/* SP用スタイル */
@media screen and ( max-width:767px ) {
    #contentsMain .moreItemBtn .viewmore-gold {
        width: calc(460*(100vw/750));
        height: calc(80*(100vw/750));
        margin: calc(100*(100vw/750)) auto 0;
        font-size: calc(24*(100vw/750));
        line-height: calc(72*(100vw/750));
        padding: 0;
    }
}

/* PC用スタイル */
@media only screen and (min-width: 768px) {
    #contentsMain .moreItemBtn .viewmore-gold {
        width: calc(318*(100vw/1400));
        height: calc(48*(100vw/1400));
        margin: calc(40*(100vw/1400)) auto 0;
        font-size: calc(15*(100vw/1200));
        line-height: calc(48*(100vw/1400));
        padding: 0;
    }
}

/* PC width1200px以上 フォントサイズ固定 */
@media only screen and (min-width: 1200px) {
    #contentsMain .moreItemBtn .viewmore-gold {
        width: 318px;
        height: 48px;
        font-size: 15px;
        line-height: 48px;
    }
}

/* 既存の .moreItemBtn a スタイルを上書きしないように、より具体的なセレクタを使用 */
#contentsMain .moreItemBtn a.viewmore-gold {
    /* 上記のスタイルが適用されます */
}

/* フォーカス状態の追加（アクセシビリティ向上） */
#contentsMain .moreItemBtn .viewmore-gold:focus {
    outline: 1px solid #B8860B;
    outline-offset: 2px;
}

/* アクティブ状態の追加 */
#contentsMain .moreItemBtn .viewmore-gold:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(184, 134, 11, 0.2);
}
@media only screen and (min-width: 768px) {
  .nav_anchor ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    gap: 12px;
    max-width: 1000px;
    margin: 0 auto;
  }

  /* 5個目〜7個目を下段1〜3列に配置（4列目は空ける） */
  .nav_anchor ul li:nth-child(5) {
    grid-column: 1;
  }
  .nav_anchor ul li:nth-child(6) {
    grid-column: 2;
  }
  .nav_anchor ul li:nth-child(7) {
    grid-column: 3;
  }
}