@charset "UTF-8"

/* 共通部分
----------------------------------------------------------------*/
html {
    scroll-behavior: smooth;
    font-size: 100%;
}
body {
    font-family: "IBM Plex Sans Arabic", "M PLUS Rounded 1c","Yu Gothic Medium",  "游ゴシック体", "ヒラギノ角ゴ Pro W3";
    line-height: 1.7;
    color: #fff;
}
a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

.wrapper {
max-width: 1100px;
margin: 0 auto;
padding: 0 4%;
}

/* 背景画像 */
.big-bg {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

/* iframe*/
iframe {
    width: 100%;
}

/* ヘッダー
----------------------------------------------------------------*/
.page-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
}

.site-branding-text p {
    color: #fff;
    font-size: 0.8rem;
    font-family: "ヒラギノ角ゴ Pro W3", sans-serif, "Yu Gothic Medium", "游ゴシック Medium";
    margin: 0 0 10px;
}

.main-nav {
    display: flex;
    font-size: 0.9rem;
    text-transform: uppercase;
    margin-top: 1.875rem;
    list-style: none;
}

.main-nav li {
    margin-left: 1rem;
}

.main-nav a {
    color: #fff;
}

.main-nav a:hover {
    color: #a54199;
}

/*====galleryのボタンのスライドメニュ=======*/
.has-gallery li {
  position: relative;
  list-style: none;
}
/*sub gallery*/
.sub-gallery {
    position: absolute;
    margin-top: 0rem;
    left: -5.4rem;
    display: flex;
}
.sub-gallery a {
    display: block;
    width: 5rem;
    height: 2.5rem;
    text-align: center;
    color: #fff;
    font-size: 0.875rem;
    line-height: 2.8;
    background: #333;
    text-decoration: none;
    box-sizing: content-box;
}
/*====================================*/

/*sub gallery が入っているメニュー*/
.has-gallery {
    position: relative;
}

/*通常はsub galleryを非表示*/
.has-gallery .sub-gallery {
    display: none;
}

/*カーソルを合わせるとsub galleryを表示*/
.has-gallery:hover .sub-gallery {
    display: block;
}

/* ホーム画面
----------------------------------------------------------------*/
#home {
    background-image: url(image/main-bg.jpg);
    min-height: 100vh;/*80vh;
    min-width: 85vw;*/
}
/*top画像変えたら非表示 ↓
#home h1 {
    color: #333;
}

#home p {
    color: #333;
}
ここまで ------------ */
#home header{
    flex-direction: column;
    justify-content: center;
    text-align: center;

}

#home h1 {
    color: #fff;
    margin-top: 25%;
}

#home p {
    color: #fff;
}

#home ul {
  justify-content: center;
  margin-right: 7%;
}

#home footer {
  background: none;
  margin: 0.7rem;
  font-size: 1.5rem;
}


/* gallery painting
----------------------------------------------------------------*/
#gallery-painting-illustrations {
    background-color: #333;
    color: #fff;
}

.page-theme {
    color: #333;
    font-size: 1.1rem;
    margin-top: 3%;
}

.grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit,minmax(240px, 1fr));
  margin-top: 3%;
  margin-bottom: 1%;
}

/*.painting-illustration p {
    color: #324953;
    font-size:0.8rem;
    margin-top: 0.05rem;
    justify-content: left;
}*/

/* gallery digital
----------------------------------------------------------------*/
#gallery-digital-illustrations {
    background-color: #333;
    color: #fff;
}

.page-theme {
    color: #333;
    font-size: 1.1rem;
    margin-top: 3%;
}

.grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit,minmax(240px, 1fr));
  margin-top: 3%;
  margin-bottom: 1%;
}

/*.digital-illustration p {
    color: #324953;
    font-size:0.8rem;
    margin-top: 0.05rem;
    justify-content: left;
}*/

/* gallery cut
----------------------------------------------------------------*/
#gallery-cut-illustrations {
    background-color: #333;
    color: #fff;
}

.page-theme {
    color: #333;
    font-size: 1.1rem;
    margin-top: 3%;
}

.grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit,minmax(240px, 1fr));
  margin-top: 3%;
  margin-bottom: 1%;
}

.cut-illustration p {
    color: #333;
    font-size: 0.5rem;
    margin-top: 0rem;
    justify-content: left;
}

/* contact
----------------------------------------------------------------*/

#contact {
    background-color: #333;
    color: #fff;
}
.wrapper-Introduction{
    flex-direction: column;
    display: flex;
    min-height: 70vh;
}
article {
    flex: 1;
    color: #333;
    margin-top: 3rem;
}
article p {
      font-size: 0.8rem;
}

.about {
    margin-top: 6rem;
    line-height:  1rem;
}



/* フッター
----------------------------------------------------------------*/

footer {
    background: #333;
    text-align: center;
    padding: 0.1rem 0;
    margin-top: auto;
}

footer ul {
    display: flex;
    justify-content: center;
    list-style: none;
    font-size: 1.5rem;
}

footer li {
    margin: 0.7rem;
}

footer a {
    color: #fff;
    margin: 0.8rem;
}



footer small {
    color: #fff;
    font-size: 0.875rem;
    justify-content: center;
}





/* モバイルサイズ
-＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

@media (max-width: 600px) {

    .main-nav {
        text-transform: lowercase;
        margin-top: 0.5rem;
    }

    .grid {
        max-width: 100%;
    }


    .page-title {
        font-size: 1rem;
    }

    .page-header {
      flex-direction: column;
    }

    .page-theme {
        font-size: 0.8rem;
    }

    #home h1 {
        color: #fff;
        font-size: 1.6rem;
    }

    #home p {
        color: #fff;
    }
    #home ul {
        justify-content: center;
        margin-right: 21%;
        font-size: 1rem;
    }



    /*
    GRID
    ================================================ */
    .grid {
        width: 85vw;
        margin: 0 auto 3vw;
        display: grid;
        gap: 2vw;
        grid-template-columns: repeat(2, 41vw); /* (94 - 2) / 2 */
     }



/*フッター モバイル-------*/

/* フッターの固定表示 */
/*top----------------*/


    footer {
      text-align: center;
        line-height: 0.5;
    }

/*モバイルサイズにライトボックスを調整-------------*/
    .lum-lightbox.inner-open {
        z-index: 4;
        /*style="width: 60vw; max-width: 78vw;"*/
    }

    .lum-lightbox-inner img {
        max-width: 78%;
        max-height: 78%;
    }

}



/*モバイルのみ非表示にするもの-------
#page-top {
    display: none;
    } --*/