@charset "UTF-8";

/* common */
:root {
    --primary-Black: #000000;
    --primary-gray: #D0CDC9;
    --contentPadding: 6.4%;

}

html {
    font-size: 62.5%
}

body {
    font-family: 
        "EB Garamond",
        "Shippori Mincho",
        serif;
    font-style: nomal;
    color: #000;
    background-color: #fff;
    line-height: 1.5;
}

img {
    max-width: 100vw;
    height: auto;
}






/*==========================
common link
==========================*/

.link__area {
    display: flex;
    padding: 24px;
    flex-direction: column;
    gap: 12px;
}

.link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.item__area {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.item__name {
    width: calc(100/375 * 100vw);
    color: #000;
    font-family: "Shippori Mincho";
    font-size: calc(15/375 * 100vw);
    line-height: 100%;
    align-self: stretch;
}

.item__price {
    width: calc(130/375 * 100vw);
    color: #000;
    font-family: "Shippori Mincho";
    font-size: calc(12/375 * 100vw);
    line-height: normal;
    display: flex;
    justify-content: flex-end;
}

.size__area {
    width: calc(100/375 * 100vw);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.size {
    display: flex;
    width: calc(19/375 * 100vw);
    padding: 3px 5px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border: 1px solid #000;
    color: #000;
    font-family: "Shippori Mincho";
    font-size: calc(11/375 * 100vw);
    line-height: 105%;
}

.btn__detail {
    display: flex;
    padding: 0 3.2%;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #603613;
    color: #FFF;
    font-family: "inter";
    font-size: calc(12/375 * 100vw);
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    position: relative;
    border: 1px solid #603613;

}

.btn__detail:hover {
    color: #000;
    background-color: #fff;
    border: 1px solid #603613;
}




/* pc */
@media screen and (min-width:834px) {
    .item__name {
        width: 150px;
    }

    .size__area {
        width: 150px;
    }
}

/*==========================
scrollTop
==========================*/
.topBtn {
    position: fixed;
    height: 50px;
    text-decoration: none;
    font-weight: 400;
    transform: rotate(90deg);
    font-size: 90%;
    line-height: 1.5rem;
    color: #000;
    padding: 0 0 0 35px;
    border-top: solid 1px #000;
    right: 4%;
    bottom: 4%;
    font-family: "EB Garamond";
}

.topBtn::before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: 0px;
    width: 15px;
    border-top: solid 1px #000;
    transform: rotate(35deg);
    transform-origin: left top;
}


* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time01{
animation-delay: 0.1s;
}

.delay-time02{
animation-delay: 0.5s;
}

.delay-time04{
animation-delay: 1s;
}

/* /*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.img__main {
	opacity: 0;
}


/*==================================================
動き自体の指定：今回は「ふわっ」
===================================*/

.fadeUp {
    animation-name:fadeUpAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity: 0;
    }

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(50px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}


/*==========================
fadeIn
==========================*/
.fadeIn {
    transform: translate(0 80px);
    opacity: 0;
    transition: 1s;
}

.fadeIn.animated {
    transform: translate(0 0);
    opacity: 1;
}


/*========================
スライダーのためのcss
==========================*/

.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:94%;
     margin:24px auto;
 }

 .slider img {
    margin-bottom: 24px;
 }

 /*slickのJSで書かれるタグ内、スライド左右の余白調整*/
 
 .slider .slick-slide {
     margin:24px;
 }
 
 /*矢印の設定*/
 
 /*戻る、次へ矢印の位置*/
 .slick-prev, 
 .slick-next {
     position: absolute;/*絶対配置にする*/
     top: 42%;
     cursor: pointer;/*マウスカーソルを指マークに*/
     outline: none;/*クリックをしたら出てくる枠線を消す*/
     border-top: 2px solid #603613;/*矢印の色*/
     border-right: 2px solid #603613;/*矢印の色*/
     height: 15px;
     width: 15px;
 }
 
 .slick-prev {/*戻る矢印の位置と形状*/
     left: -1.5%;
     transform: rotate(-135deg);
 }
 
 .slick-next {/*次へ矢印の位置と形状*/
     right: -1.5%;
     transform: rotate(45deg);
 }

 .slick-prev:before,
 .slick-next:before,
 .slick-dots li button:before {
    content: '';
}
 
 
 /*ドットナビゲーションの設定*/
 .slick-dots {
    text-align:center;
	margin:20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots li button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    /* border-radius:50%; */
    background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background: #603613;/*ドットボタンの現在地表示の色*/
}




/*==========================
TOP
==========================*/

.main {
    display: flex;
    flex-direction: column;
}

.mainVisual {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    background-color: #b57447;
    position: relative;
}

.mainVisual__title {
    display: flex;
    padding: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    align-self: stretch;
}

.mainVisual__text {
    width: calc(280/375 * 100vw);
}

.logo {
    width: calc(55/375 * 100vw);
}


.jjLogo {
    position: absolute;
    bottom: 30%;
    left: 5%;
    display: block;
    width: 30%;
    height: auto;
}

.lead {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 24px;
    gap: 12px;
    align-self: stretch;
}

.main__txtSub {
    display: flex;
    flex-direction: column;
    color: var(--primary-Black);
    text-align: center;
    font-family: "EB Garamond";
    font-size: calc(16/375 * 100vw);
    line-height: 2;
    letter-spacing: 0.7px;
}


.main__txt {
    color: var(--primary-Black);
    text-align: center;
    font-family: "Shippori Mincho";
    font-size: calc(14/375 * 100vw);
    line-height: 2;
}

.img__main {
    display: none;
}

/* pc */
@media screen and (min-width:834px) {

    .img__mainSp {
        display: none;
    }

    .mainVisual {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas: "title image";
        align-items: center;
    }

    .img__main {
        display: block;
        height: 100vh;
        grid-area: image;
        justify-self: end;
    }

    .mainVisual__title {
        width: 100%;
        grid-area: title;
        display: flex;
        justify-content: center;
        gap: 48px;
    }

    .mainVisual__text {
        width: 40vw;
    }

    .logo {
        width: 6vw;
    }

    .jjLogo {
        bottom: 5%;
        left: 55vw;
        display: block;
        width: 14vw;
        height: auto;
    }

    .lead {
        padding: 118px 24px;
        gap: 118px;
    }


    .main__txtSub {
        font-size: 2rem;
    }

    .main__txt {
        font-size: 1.6rem;
        letter-spacing: 0.6px;
    }
}



/*==========================
intro
==========================*/

.intro {
    display: flex;
    padding-top: 48px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    align-self: stretch;
}

.img__butsu {
    padding: 0 var(--contentPadding);
}

/* pc */
@media screen and (min-width:834px) {

    .img__butsu {
        width: 45vw;
    }

}

/*==========================
section
==========================*/

.section__content {
    display: flex;
    padding: 96px 0 48px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    align-self: stretch;
}

.category__title {
    display: flex;
    padding: 0 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

.title--01 {
    height: calc(60vw / 3.75);
}

.title--02 {
    height: calc(70vw / 3.75);
}

.section__img--yoko {
    gap: 48px;
}

.sen {
    border: none;
    border-top: 1px solid var(--primary-gray);
    width: 100%;
}


.section__text {
    display: flex;
    padding: 24px var(--contentPadding);
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.content__head {
    color: #603613;
    text-align: center;
    font-family: "Shippori Mincho";
    font-size: calc(20 / 375 * 100vw);
    font-weight: 700;
    line-height: 200%; /* 48px */
    letter-spacing: 1.2px;
    margin: 0 auto;
}

.content__text {
    color: #000;
    font-family: "Shippori Mincho";
    font-size: calc(14 / 375 * 100vw);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: -0.01em;
}


.section__img--slide {
    display: grid;
    overflow: hidden;
}

.imgSlide {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    opacity: 0;
    animation: fade 6s ease-in-out infinite;
}

.imgSlide:nth-child(2) {
    animation-delay: 3s;
}

@keyframes fade {
    0% { opacity: 0; } /* 開始時 */
    50% { opacity: 1; } /* 中間 */     
    100% { opacity: 0; } /* 終了時 */
}


/* pc */
@media screen and (min-width:834px) {

    .section__content {
        padding: 118px 0;
        gap: 118px;
    }

    .section__img--yoko {
        display: flex;
    }

    .section__tate {
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        gap: 118px;
    }


    .img__section {
        height: 100vh
    }

    .title--01 {
        height: 83px;
    }

    .title--02 {
        height: 100px;
    }

    .txtlink {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8.1%;
    }

    .layout01 {
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        gap: 118px;
        flex-wrap: wrap;
    }

    .txtlink--layout01 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 48px;
    }

    .img__section--03 {
        width: 62vw;
    }

    .content__head {
        font-size: 2.4rem;
        margin: 0;
        text-align: left;
    }

    .content__text {
        font-size: 1.6rem;
        width: 382px;
    }

    .spBr {
        display: none;
    }
    
    .item__price {
        width: 130px;
        font-size: 1.6rem;
    }

    .item__name {
        width: 150px;
        font-size: 1.6rem;
    }

    .btn__detail {
        padding: 0 24px;
        font-size: 1.3rem;
    }


    .size {
        width: 19px;
        font-size: 1.1rem;
    }

}

/*==========================
butsu area
==========================*/

.butsuArea {
    background-color: #eae4dd;
    padding-bottom: 24px;
}

.title--03 {
    padding: 24px var(--contentPadding);
}

.sectionButsu__text {
    align-items: center;
    padding: 0 var(--contentPadding);
    font-size: calc(14/375 * 100vw);
    font-family: "Shippori Mincho", serif;
    line-height: 1.8;
}

.butsuarea {
    background-color: #fff;
    margin: 24px var(--contentPadding);
    padding: 0 ;
}

.butsu__list {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.butsu__img--bg {
    display: flex;
    justify-content: center;
    padding: 24px;
    height: 350px;
}

.butsu__img {
    max-width: 100%;
    filter: drop-shadow(4px 4px 6px gray);
    object-fit: contain;
    display: block;
    margin-inline: auto;
}

.section__text--butsu {
    padding: 0 var(--contentPadding);
    gap: 12px;
}

.content__head--butsu {
    font-size: calc(18 / 375 * 100vw);
}

.txtlink--layout05 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.item__name--butsu {
    width: calc(80/375 * 100vw);
}

.item__price--butsu {
    width: calc(100/375 * 100vw);
}

.maisonPelerin {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 72px var(--contentPadding) 0;
    border: #000 solid 1px;
    align-self: stretch;
}

.maisonPrlerin__title {
    text-align: center;
    font-family: "EB Garamond";
    font-size: calc(20/375 * 100vw);
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
    padding: 24px var(--contentPadding) 0;
    letter-spacing: 1.2px;
}

.maisonPelerin__area {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}

.maisonPelerin__img {
    height: auto;
    padding:  24px calc(46/375 * 100vw);
}

.maisonPelerin__txt {
    font-family: "Shippori Mincho";
    font-size: calc(12/375 * 100vw);
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 18px */
    padding: 0 var(--contentPadding) 24px;
}

/* pc */
@media screen and (min-width:834px) {
    
    .section__title--butsu {
        padding: 108px 0 68px;
    }

    .title--03 {
        height: 100px;
        margin: 0 auto;
    }

    .sectionButsu__text {
        font-size: 1.6rem;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    
    .butsuarea {
        display: flex;  
        padding: 48px 0;
        justify-content: center;
        align-items: flex-start;
        align-content: flex-start;
        gap: 48px;
        align-self: stretch;
        flex-wrap: wrap;
        margin: 48px;
    }

    .content__head--butsu {
        font-size: 2rem;
    }


    .butsu__img {
        height: auto;
    }

    .butsu__img--tops {
        width: 452px;
    }

    
    .butsu__img--pants {
        width: 300px;
    }

    .butsu__img--aa {
        width: 400px;
    }

    .maisonPelerin {
        margin: 108px  calc(108/1440 * 100vw);
    }

    .maisonPelerin__area {
        flex-direction: row;
        gap: 48px;
        padding: 48px 0 60px;
    }

    .maisonPelerin__img {
        width: calc(300/1440 * 100vw);
        padding: 0;
    }

    .maisonPrlerin__title {
        font-size: 3rem;    
    }

    .maisonPelerin__txt {
        font-size: 1.6rem;
        width: 400px;
        text-align: left;
        line-height: 2;
        padding: 0;
    }

    .item__name--butsu {
        width: 130px;
    }

    .item__price--butsu {
        width: 150px;
    }

}

/*==========================
section other link
==========================*/
.other__link {
    display: flex;
    padding: 48px 24px 96px 24px;
    flex-direction: column;
    gap: 24px;
    align-self: stretch;
}

.other__item {
    display: flex;
    padding: 12px 0;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border: 1px solid var(--primary-Black);
}

.otherItem__txt {
    color: var(--primary-Black);
    text-align: center;
    font-family: "Shippori Mincho";
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
}

/* pc */
@media screen and (min-width:834px) {

    .other__link{
        margin: 0 auto;
        padding: 80px 0 116px;
        gap: 36px;
        align-items: center;
        justify-content: center;
    }

    .other__item {
        width: 350px;
        padding: 12px 0;
    }

    .otherItem__txt {
        font-size: 1.6rem;
    }
}



/*==========================
footer
==========================*/

.footer {
    display: flex;
    padding: 48px 0;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    align-self: stretch;
    background: #F6F6F6;
}

.icon__area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 20vw;
    gap: 20px;
}

.footer__icon {
    width: 100%;
    height: auto;
}

.logo__area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.insta {
    width: 26px;
}

.clossetIcon {
    width: 106px;
}

.footer_block__copy {
    color: #000;
    font-family: Inter;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

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

    .footer {
        padding: 118px 0 60px;
    }

    .icon__area {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 24px;
    }

}