@charset "utf-8";
/* CSS Document */


@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Noto+Serif+JP:wght@200..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');


html{
	font-size: 62.5%;
    scrollbar-color: #3d3935 #FFF;
}

body{
	position: relative;
	margin:0;
    font-optical-sizing: auto;
	background: #fff;
    width: 100vw;
    overflow-x: hidden;
}

@media screen and (min-width:768px) {
    
    body{
        font-size: clamp(14px, 1vw, 18px);
    }
    
}

#container main{
    font-size: 1.4rem;
	font-family: "Noto Serif JP", serif !important;
	font-weight: 500;
	line-height: 1.8;
	font-feature-settings: "palt";
	font-smoothing:auto;
	color:#000;
}

main {
    max-width: 100% !important;
    padding: 0 !important;
}

main section{
    margin: 0 !important;
}


p{
    letter-spacing: 0.2em;
    text-align: justify;
}

.bg-1{
    /*background-color: #f7f3ec;*/
    background:linear-gradient(110deg, #edeae4, 90%, #85817c);
}

.bg-2{
    /*background-color: #efe5d6;*/
    background:linear-gradient(110deg, #f6f9fb, 90%, #c5d4d9);
}

.bg-3{
    /*background-color: #e1b2a6;*/
    background:linear-gradient(110deg, #f4ede6, 90%, #c9b7a2);
}

.bg-4{
    background:linear-gradient(135deg, #fff, 90%, #f6f9fb);
}

.bg-button{
    background:linear-gradient(135deg, #6b99bc, 80%, #415a6d);
}

.artist-name{
    color: #342925;
    mix-blend-mode: luminosity;
}




article{
    position: relative;
}

.font-en-serif{
      font-family: "EB Garamond", serif !important;
}

.font-en-sanserif{
      font-family: "Raleway", sans-serif !important;
}


.fw-normal{
    font-weight: normal;
}

.fw-600{
    font-weight: 600;
}

.fw-700{
    font-weight: 700;
}

.fw-800{
    font-weight: 800;
}

.fw-900{
    font-weight: 900;
}

.fs_m{
    font-size: 1.4rem;
}

.fs_l{
    font-size: 1.8rem;
}

.fs_xl{
    font-size: 3rem;
}

.fs_xxl{
    font-size: 6.4rem;
}

.pd_tb_2 {
    padding-top: 2rem;    
    padding-bottom: 2rem;
}

.pd_tb_6 {
    padding-top: 6rem;    
    padding-bottom: 6rem;
}


.pd_b_12 { 
    padding-bottom: 12rem;
}

.pd_lr_2 {
    padding-left: 2rem;    
    padding-right: 2rem;
}

.text_center{
    text-align: center !important;
}

.line_height_1{
    line-height: 1;
}

.sp_br{
    display: block;
}




.hero_2{

    background-image: url("../images/hero-sp.jpg");
    background-size: cover;
}

@media screen and (min-width:768px){
.hero_2{
    background-image: url("../images/hero-pc.jpg");
    background-size: cover;
}
}



.hero_img {
    position: relative;
    aspect-ratio: 2 / 3;
    background-image: url("../images/hero-sp.jpg");
    background-size: cover;
    background-position: center;
}

.hero_img .hero_watch {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 75%;
}

.hero_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hero .collection_title_box {
    margin-top: -12vw;
    z-index: 1;
    position: relative;
}


main article section h2 {
    font-family: "EB Garamond", serif !important;
}

.collection_title {
    text-align: center;
    font-size: 16vw;
}

.collection_title h1 {
    font-weight: normal;
    line-height: 1.25;    
    font-size: 0.9em;
}

.collection_title h1 > .sub_title {
    display: block;
    font-size: 0.24em;
    font-weight: 600;
    letter-spacing: 0.4em;
}


.collection_title h2 {
    font-size: 0.24em;
    font-weight: 600;
    display: flex;
    grid-gap: 0.5em;
    justify-content: center;
    align-items: center;
    line-height: 1;
    margin-top: 1.5em;
}

.collection_title h2 .matow_logo{
    height: 1em;
    width: auto;
}


.collection_title_box p {
    text-align: center;
    margin-top: 1.5em;    
    letter-spacing: normal;
}

.about_collection h2 {
    margin-bottom: 3rem;
}

.contents_title {
    position: absolute;
    top: -4rem;
    left: 1rem;
    line-height: 1;
}



@media screen and (min-width:768px){
.hero .collection_title h2 .matow_logo{
    fill:#fff;
}

}








.draw_img_box {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.draw_box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(-25deg);
    height: 120%;
    width: 120%;
}


.paint1,
.paint2,
.paint3,
.paint4 {
    height: calc(100% / 4 + 4%);
    left: -2rem;
    pointer-events: none;
    position: absolute;
    right: -2rem;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 1rem 0;
    width: 140%;
}
    
.draw_box.animate .paint1,
.draw_box.animate .paint3 {
    animation-name: paintright;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.draw_box.animate .paint2,
.draw_box.animate .paint4 {
    animation-name: paintleft;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.paint1 {
  top: 0;
  animation-delay: 0.5s;
}

.paint2 {
  animation-delay: 0.75s;
  top: calc(100% / 4);
}

.paint3 {
  animation-delay: 1.0s;
  top: calc(100% / 4 * 2);
}

.paint4 {
  animation-delay: 1.25s;
  top: calc(100% / 4 * 3);
}


.paint1{
    background-image: url("../images/paint-1.png");
}
.paint2{
    background-image: url("../images/paint-2.png");
}
.paint3{
    background-image: url("../images/paint-3.png");
}
.paint4{
    background-image: url("../images/paint-4.png");
}

@keyframes paintright {
  100% {
    transform: translateX(100%);
  }
}
@keyframes paintleft {
  100% {
    transform: translateX(-100%);
  }
}


.artwork_detail {
    display: grid;
    grid-gap: 6rem;
}

.artwork_story {
    margin-left: 3rem;
}

.artwork_story h3 {
    margin-bottom: 0.5em;
}

.artwork_img div {
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.artwork_img img {
    object-position: center;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.artwork_watch img {
    height: auto;
    width: 70%;
    margin: auto;
}


.artist_detail {
    position: relative;
    display: grid;
    grid-gap: 3rem;
}

.artist_profile_img img {
    border-radius: 50%;
    width: 30%;
    margin: auto;
}

.artist_drawing_img{
    overflow: hidden;
    aspect-ratio: 3 / 4;
}

.artist_drawing_img img,
.artist_drawing_img picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.artist_gallery{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.artist_gallery img:nth-child(n+10) {
    display: none;
}





.watch_case {
    display: grid;
    grid-gap: 2rem;
}

.box-image {
    width: 100%;
    overflow: hidden;
}


.product {
    display: grid;
    grid-gap: 3rem;
}

.product_detail {
    display: grid;
    grid-gap: 1rem;
}

.product_detail img {
    width: 60%;
    height: auto;
    margin: auto;
}

.product_price_box {
    text-align: center;
    letter-spacing: normal;
}

.product_link a {
    color: #fff;
    line-height: 2.8;
    display: inline-block;
    padding: 0 3rem;
    border-radius: 1.25rem;
    box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.4);
}





.end{
    width: 100%;
    height: 100vh;
}

.end .end_title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}







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

.fs_m{
    font-size: 1.6vw;
}

.fs_l{
    font-size: 3vw;
}

.fs_xl{
    font-size: 4vw;
}

.fs_xxl{
    font-size: 10vw;
}
    
    
.pd_tb_2 {
    padding-top: 4vw;    
    padding-bottom: 4vw;
}

.pd_tb_6 {
    padding-top: 10vw;    
    padding-bottom: 10vw;
}


.pd_b_12 { 
    padding-bottom: 20vw;
}

.pd_lr_2 {
    padding-left: 4vw;    
    padding-right: 4vw;
}

.sp_br{
    display: inline;
}
    
.w_80 {
    width: 80%;
    margin: auto;
    padding: 0;
} 
    

    
    
    
    
.hero {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        background-image: url(../images/hero-pc.jpg);
        background-size: cover;
        background-position: center;
        aspect-ratio: 4 / 3;
}
 
.hero_img {
        background: none;
}   


.hero .collection_title_box {
    margin-top: 0;
    position: relative;
    height: 100%;
    align-content: center;
    color: #FFF;
}
    
.collection_title {
    font-size: 7vw;
}    
  
.contents_title {
    position: absolute;
    top: -6vw;
    left: 4vw;
    line-height: 1;
}


    
.artwork_img {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
    
    
.artwork_detail {
    grid-template-columns: 1fr 1fr;
    position: relative;
    align-items: center;
}
    
.artwork_watch {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 75%;
}    

.artwork_watch img {
    height: 100%;
    width: auto;
} 
    
.artwork_story {
    height: fit-content;
    width: 80%;
    margin-left: 15%;
}    
    
 
.artist_drawing_img {
    aspect-ratio: 16 / 9;
}   
    
 
    
.artist_detail {
    grid-template-columns: 1fr 1.5fr;
    grid-gap: 4vw 0;
}
    
.artist_profile_box {
    grid-row: 1 / 3;
    align-content: center;
}    
    
.artist_profile_img img {
    width: 70%;
}    

.artist_gallery {
    grid-template-columns: 1fr 1fr 1fr 1fr;
} 
    
.artist_gallery img:nth-child(n+9) {
    display: none;
}
    
.product {
    grid-template-columns: 1fr 1fr;
    grid-gap: 0;
    padding: 10vw ;
} 
    
.watch_case {
    grid-template-columns: 1fr 1fr;
    align-items: center;
}    
    
.product .collection_title_box {
    align-content: center;
}    
    
.end {
    height: 50vh;
}    
    
}




@media screen and (min-width:768px) and (orientation: landscape){

    .fs_m{
    font-size: min(1.4vw, 16px);
    }

    .fs_l{
        font-size: min(2vw, 24px);
    }

    .fs_xl{
        font-size: min(3vw, 36px);
    }

    .fs_xxl{
        font-size: min(8vw, 96px);
    }


    .pd_tb_2 {
        padding-top: 4vw;    
        padding-bottom: 4vw;
    }

    .pd_tb_6 {
        padding-top: 10vw;    
        padding-bottom: 10vw;
    }


    .pd_b_12 { 
        padding-bottom: 20vw;
    }

    .pd_lr_2 {
        padding-left: 4vw;    
        padding-right: 4vw;
    }
    
    
    
    .hero {
        display: grid;
        aspect-ratio: 16/9;
        
    }

    
    .hero_img{
        aspect-ratio: unset;
        height: auto;
    }
    
    .hero .collection_title_box {
        background: none;
        height: fit-content;
        margin-top: -2.5em;
    }    
    
    
    
    
    .collection_title {
        font-size: 5vw;
    }    

    
    .contents_title {
        top: -0.55em;
    }    
    
    .artwork_detail {
        height: 100vh;
    }
    

    .draw_img_box {
        width: 90%;
        margin: auto;
    }    
    
    
    .artist_about {
        display: grid;
    }    

    .artist_detail {
        grid-template-columns: 1fr 2fr;
        grid-gap: 4vw 0;
    }
    
    .artist_profile_img img {
        width: 60%;
    }    
    
    .artist_drawing_img {
        aspect-ratio: 2.5/1 !important;
    } 
    
   .artist_detail .pd_lr_2 {
        padding-left: 0 !important;
    } 
    
    
    
    
    .artist_gallery {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }    

    .artist_gallery img {
        display: block !important;
    }

    
    .end {
        height: 70vh;
    }    
    
    
}





/* テキスト一文字ずつ */

.word_appear.up {
    display: flex;
    overflow: hidden;
    justify-content: center;
    z-index: 1;
}

.word_appear.up span {
    display: block;
    transform: translate(0, 105%);
    opacity: 0;
    transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.75s, opacity cubic-bezier(0.215, 0.61, 0.355, 1) 2s;
}

.word_appear.visible span {
  transform: translate(0, 0) !important;
opacity: 1 !important;
}

.word_appear.up span:nth-child(2) {
  transition-delay: 0.06s;
}
.word_appear.up span:nth-child(3) {
  transition-delay: 0.12s;
}
.word_appear.up span:nth-child(4) {
  transition-delay: 0.18s;
}
.word_appear.up span:nth-child(5) {
  transition-delay: 0.24s;
}
.word_appear.up span:nth-child(6) {
  transition-delay: 0.30s;
}
.word_appear.up span:nth-child(7) {
  transition-delay: 0.36s;
}
.word_appear.up span:nth-child(8) {
  transition-delay: 0.42s;
}
.word_appear.up span:nth-child(9) {
  transition-delay: 0.48s;
}
.word_appear.up span:nth-child(10) {
  transition-delay: 0.54s;
}
.word_appear.up span:nth-child(11) {
  transition-delay: 0.6s;
}
.word_appear.up span:nth-child(12) {
  transition-delay: 0.66s;
}
.word_appear.up span:nth-child(13) {
  transition-delay: 0.72s;
}
.word_appear.up span:nth-child(14) {
  transition-delay: 0.78s;
}


/* フェードイン */

.fadein{
    opacity: 0;
    transition:
        opacity 2.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.25s,
        transform 3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.25s,
        -webkit-transform 3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.25s;
}

.fadein.fadein-up{
    transform: translateY(20px);
}

.fadein.fadein-down{
    transform: translateY(-20px);
}

.fadein.fadein-left{
    transform: translateX(-20px);
}

.fadein.fadein-active{
    opacity: 1;
    transform: translate(0,0) !important;    
}


.hero_watch .fadein,
.hero .collection_title.fadein{
   transition-delay: 0.5s;   
}


.artist_gallery .fadein:nth-child(2){
  transition-delay: 0.05s;    
}
.artist_gallery .fadein:nth-child(3){
  transition-delay: 0.1s;    
}
.artist_gallery .fadein:nth-child(4){
  transition-delay: 0.15s;    
}
.artist_gallery .fadein:nth-child(5){
  transition-delay: 0.2s;    
}
.artist_gallery .fadein:nth-child(6){
  transition-delay: 0.25s;    
}
.artist_gallery .fadein:nth-child(7){
  transition-delay: 0.3s;    
}
.artist_gallery .fadein:nth-child(8){
  transition-delay: 0.35s;    
}
.artist_gallery .fadein:nth-child(9){
  transition-delay: 0.4s;    
}
.artist_gallery .fadein:nth-child(10){
  transition-delay: 0.45s;    
}
.artist_gallery .fadein:nth-child(11){
  transition-delay: 0.5s;    
}
.artist_gallery .fadein:nth-child(12){
  transition-delay: 0.55s;    
}



/* フェードイン */

.zoomin{
    transition:
        opacity 2.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.25s,
        transform 3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.25s,
        -webkit-transform 3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.25s;
}

.zoomin.zoom-in{
    transform: scale(100%);
}
.zoomin.zoom-out{
    transform: scale(120%);
}
.zoomin.zoomin-active{
    transform: scale(110%) !important;    
}




/*左から右テキストエフェクト*/
  .leftAnime {
    opacity: 0;
    overflow: hidden;
    display: inline-block;
  }
 
  .leftAnimeInner {
    display: inline-block;
  }
 

  .slideAnimeLeftRight {
    animation-name: slideTextX100;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
  }
 
  @keyframes slideTextX100 {
    from {
      transform: translateX(-100%);
      /*要素を左の枠外に移動*/
      opacity: 0;
    }
 
    to {
      transform: translateX(0);
      /*要素を元の位置に移動*/
      opacity: 1;
    }
  }

.hero .slideAnimeLeftRight,
.hero .slideAnimeRightLeft{
    animation-delay: 0.5s;
}

.product .slideAnimeLeftRight,
.product .slideAnimeRightLeft{
    animation-delay: 0.5s;
}


.slideAnimeRightLeft {
    animation-name: slideTextX-100;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}
 
 
  @keyframes slideTextX-100 {
    from {
      transform: translateX(100%);
      /*要素を右の枠外に移動*/
      opacity: 0;
    }
 
    to {
      transform: translateX(0);
      /*要素を元の位置に移動*/
      opacity: 1;
    }
  }









.img-wrap {
  opacity: 0;
}

.img-animation {
  animation: img-opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  overflow: hidden;
  position: relative;
}

.img-animation::before {
  animation: img-animation 1s cubic-bezier(0,.85,.15,1) forwards;
  background: linear-gradient(135deg, #c5d4d9, 80%, #94b1ba);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@keyframes img-opacity {
  100% {
    opacity: 1;
  }
}

@keyframes img-animation {
  100% {
    transform: translateX(100%);
  }
}