/* --------------------------------------------------------------------- 基盤部分 ------------------*/

html{
    font-size: 100%;
}

body{
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
    line-height: 1.7;
    color: #000;
}

a{
    text-decoration: none;
}

img{
    max-width: 100%;
}

.link{
  color: #B8860B;
}

.link:hover{
  color: #D2B48C;
  cursor: pointer;
}

.link-like{
    color: #B8860B;
}

.titles{
  display: flex;
}

.titles img{
  margin: 20px 3px 0px 0px;
  height: 35px;
}

.titles a{
  color: #B8860B;
  margin-top: 30px;
  margin-left: 10px;
}

.titles a:hover{
  color: #D2B48C;
  cursor: pointer;
}

.low-titles img{
    margin: 20px 3px 0px 0px;
    height: 35px;
}

.story-select{
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
}

.story-select p{
  margin-top: 5px;
}

.story-select-low{
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}

.story-select-low p{
  margin-top: 5px;
}




/* --------------------------------------------------------------------- headers --------------------------*/
.select-header{
  height: 10vh;
  width: 10vw;
}

.title-jp{
  width: 240px;
  margin-top: 10px;
  margin-left: 20px;
}

.title-eng{
  width: 30%;
  margin-top: 6px;
  margin-left: 15px;
}

.main-nav{
  display: flex;
  justify-content: flex-end;
  list-style: none;
  margin-right: 20px;
}

.fa-bars{
    visibility: hidden;
}

.header-links{
  color: #B8860B;
  margin-left: 9px;
  margin-right: 9px;
}

.header-links:hover{
  color: #D2B48C;
}

.colors-move{
 height: 80px;
 width: 90%;
 border-radius: 60px / 60px;
 margin-top: 2%;
 margin-left: 5%;
 margin-right: 5%;
}

.title-logo{
    border-radius: 60px / 60px;
    height: 90px;
    width: 90%;
    margin-top: 2%;
    margin-left: 5%;
    margin-right: 5%;
}



/* ------------------------------------------------------------------------ footers -------------------------*/
footer{
  color: #DAA520;
  text-align: center;
  padding: 10px 0;
  margin-top: 50px;
  font-size: 0.9rem;
}

footer img{
  height: 50px;
  width: 90%;
  border-radius: 60px / 60px;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 10px;
}

footer ul{
  display: flex;
  justify-content: center;
  list-style: none;
  margin-bottom: 25px;
}

.flinks{
  color: #B8860B;
  margin-left: 20px;
  margin-right: 20px;
}

.flinks:hover{
  color: #D2B48C;
}

footer p{
  font-size: 0.85rem;
}


/* ------------------------------------------------------------ セレクト画面ページ ------------------------*/
.whichIcon{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20vh;
}

.selectionIconJp{
  height: 20%;
  width: 20%;
  margin-right: 10px;
  transition-delay: 0.1s;
}

.selectionIconJp:hover{
  transform: scale(1.2, 1.2);
}

.selectionIconEng{
  height: 21%;
  width: 21%;
  margin-left: 10px;
  transition-delay: 0.1s;
}

.selectionIconEng:hover{
  transform: scale(1.2, 1.2);
}

.whichName{
  display: flex;
  justify-content: center;
  align-items: center;
}

.selectionNameJp{
  height: 10%;
  width: 10%;
  margin-right: 10px;
}

.selectionNameEng{
  height: 10%;
  width: 10%;
  margin-left: 80px;
}


/* ----------------------------------------------- 報告、最新作品情報ページ -------------------------------*/
#information{
  margin: 50px;
}



/* ----------------------------------- お知らせ事 -------*/
.news{
  margin-top: 50px;
  margin-bottom: 100px;
}

.news-logo{
    margin-bottom: 10px;
}

.samuzora{
  display: flex;
  margin-top: 30px;
  margin-bottom: 30px;
}

.samuzora img{
  height: 250px;
  margin-left: 5vw;
  margin-right: 10vw;
}

.samuzora p{
  margin-top: 10vh;
  margin-right: 7vw;
}



/* ----------------------------------- 新作情報 -------*/
.new-works{
  margin-top: 20px;
  margin-bottom: 150px;
}

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

.grid img{
  height: 130px;
  margin-left: 5vw;
  margin-bottom: 10px;
  object-fit: contain;
}

.illust-new-work{
    margin-bottom: 20px;
}


/* --------------------------------------- ご報告 -------*/
.reports{
  margin-top: 100px;
  margin-bottom: 150px;
}

.grid-in{
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  margin-top: 15px;
  margin-bottom: 60px;
}

.grid-in img{
  height: 130px;
  object-fit: contain;
}

/*
.side-rep{
  margin-top: 80px;
  margin-left: 40px;
  width: 40%;
}
*/




/* ------------------------------------------------------- 柚の個展文庫ページ -------------------------------*/
#yuzunokotenbunko{
  margin: 50px;
}


/*------------------------------長編小説------------------*/
.longnovel{
    margin-top: 50px;
    margin-bottom: 120px;
}

.samuzora-novel img{
  height: 250px;
  margin-left: 5vw;
  margin-right: 10vw;
}

.samuzora-novel p{
  margin-top: 10px;
  margin-right: 7vw;
}

.grid-longnovel{
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  margin-top: 20px;
  margin-bottom: 100px;
}



/*------------------------------物語にはなり得ない物語------------------*/
.monogatari{
    margin-top: 50px;
    margin-bottom: 100px;
}

.grid-monogatari{
  display: grid;
  gap: 50px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  margin-top: 50px;
  margin-bottom: 150px;
}

.grid-monogatari p{
    margin-top: 10px;
    margin-bottom: 75px;
}

.grid-monogatari img{
    height: 20vh;
    object-fit: contain;
    margin-left: 3vw;
}

/*-------------------------------------note------------*/
.note-info{
  margin-top: 8vh;
  margin-bottom: 100px;
}


.note-link{
  text-align: center;
  margin-top: 15px;
}




/*----------------------------------------------------音楽----------------------------------------------------*/
#music{
  margin: 50px;
}

/*--------------------------音楽にはなり得ない音楽-------------------------------*/
.masterpiece{
    margin-top: 50px;
    margin-bottom: 150px;
}

.grid-masterpiece{
  display: grid;
  gap: 50px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  margin-top: 30px;
  margin-bottom: 100px;
}

.grid-masterpiece img{
  height: 20vh;
  object-fit: contain;
  margin-left: 3vw;
  margin-bottom: 30px;
}

/*--------------------------Youtube-------------------------------*/
.youtube-info{
    margin-top: 8vh;
    margin-bottom: 100px;
}

.youtube-link{
  text-align: center;
  margin-top: 15px;
}


/*------------------------------------------------------------紙芝居----------------------------------------------------*/
#movie{
  margin: 50px;
}

/*--------------------------come~come~comes-------------------------------*/
.comecome{
    margin-top: 50px;
    margin-bottom: 150px;
}

.grid-comecome{
  display: grid;
  gap: 80px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  margin-top: 20px;
  margin-bottom: 100px;
}

.grid-comecome img{
  height: 20vh;
  object-fit: contain;
  margin-left: 3vw;
}

/*--------------------------comecome-animation-------------------------------*/
.comecomeother{
    margin-top: 50px;
    margin-bottom: 200px;
}

.grid-comecome-animation{
  display: grid;
  gap: 80px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  margin-top: 20px;
  margin-bottom: 100px;
}

.grid-comecome-animation img{
  height: 20vh;
  object-fit: contain;
  margin-left: 3vw;
}



/*--------------------------Youtube/Instagram-------------------------------*/
.youtube-instagram-info{
  margin-top: 8vh;
  margin-bottom: 100px;
}

.instagram-link{
  text-align: center;
  margin-top: 15px;
}


/*------------------------------------------------イラストデザイン---------------------------------------------------*/
#illust{
  margin: 50px;
}

.illust-main{
    margin-top: 50px;
    margin-bottom: 150px;
}

.clothes{
    margin-top: 50px;
    margin-bottom: 150px;
}

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

.grid-clothes img{
  height: 25vh;
  object-fit: contain;
  margin-left: 3vw;
  margin-bottom: 20px;
}

.postcard{
    margin-top: 50px;
    margin-bottom: 150px;
}

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

.grid-postcard img{
  height: 25vh;
  object-fit: contain;
  margin-left: 3vw;
  margin-bottom: 30px;
}

.ucl{
    margin-top: 50px;
    margin-bottom: 150px;
}

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

.grid-ucl img{
  height: 25vh;
  object-fit: contain;
  margin-left: 3vw;
}

.wallart{
    margin-top: 50px;
    margin-bottom: 150px;
}

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

.grid-wallart img{
  height: 25vh;
  object-fit: contain;
  margin-left: 3vw;
  margin-bottom: 10px;
}

.character{
    margin-top: 50px;
    margin-bottom: 150px;
}

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

.grid-character img{
  height: 25vh;
  object-fit: contain;
  margin-left: 3vw;
  margin-bottom: 30px;
}

.3d{
    margin-top: 50px;
    margin-bottom: 150px;
}

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

.grid-3d img{
  height: 25vh;
  object-fit: contain;
  margin-left: 3vw;
  margin-bottom: 30px;
}

.simple-animation{
    margin-top: 120px;
    margin-bottom: 150px;
}

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

.grid-simple-animation img{
  height: 25vh;
  object-fit: contain;
  margin-left: 3vw;
  margin-bottom: 30px;
}

.others{
    margin-top: 50px;
    margin-bottom: 150px;
}

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

.grid-others img{
  height: 25vh;
  object-fit: contain;
  margin-left: 3vw;
  margin-bottom: 30px;
}



/*--------------------------Instagram-------------------------------*/
.instagram-info{
  margin-top: 8vh;
  margin-bottom: 100px;
}
















/*------------------------------------------------------ご報告ページ-------------------------------------------------*/
#report{
  margin: 50px;
}

.report-main{
  margin-top: 50px;
  margin-bottom: 100px;
}

.each-report{
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
  margin-bottom: 50px;
}

.each-report img{
    height: 70px;
    object-fit: contain;
    margin-right: 40px;
}


/*------------------------------------------------------新着情報ページ-------------------------------------------------*/
#new-works{
  margin: 50px;
}

.new-works-main{
    margin-top: 50px;
    margin-bottom: 100px;
}

.each-new-works{
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
  margin-bottom: 40px;
}

.each-new-works img{
  height: 8vh;
  object-fit: contain;
  margin-top: 10px;
}

.each-new-works a{
  margin-right: 10vw;
}

.word-plus{
    display: flex;
    justify-content: flex-start;
}

/* ----------------------------------------- 物語にはなり得ない物語ページ -------------------------------*/
#monogataritachi{
  margin: 50px;
}

.monogataritachi-main{
    margin-top: 50px;
    margin-bottom: 100px;
}

.low-titles p{
    margin-top: 10px;
    margin-bottom: 40px;
}

.stories{
  display: flex;
  flex-direction: column-reverse; /* 順序を逆にする */
}

.each-story{
  display: flex;
  align-items: flex-end;
  margin-bottom: 40px;
}

.each-story img{
  height: 20vh;
  object-fit: contain;
  margin-right: 40px;
  margin-bottom: 3px;
}

.each-story a{
  margin-left: 10px;
}

.monogatari-file{
    display: block;
    margin-top: 150px;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    height: 50vh;
}


/* ------------------------------------------------------- 音楽にはなり得ない音楽ページ -------------------------------*/
#masterpiece{
  margin: 50px;
}

.masterpiece-main{
    margin-top: 50px;
    margin-bottom: 100px;
}

.masterpieces{
  display: flex;
  flex-direction: column-reverse; /* 順序を逆にする */
}

.each-masterpiece{
  display: flex;
  align-items: flex-end;
  margin-bottom: 50px;
}

.each-masterpiece img{
  height: 20vh;
  object-fit: contain;
}

.thumbnails{
   margin-right: 40px;
}


/* ------------------------------------------------------- come~come~comesページ -------------------------------*/
#comecome{
  margin: 50px;
}

.comecome-main{
    margin-top: 50px;
    margin-bottom: 100px;
}

.comecome-thumbnail{
    height: 20vh;
    object-fit: contain;
}

.comecome-stage{
  display: block;
  margin-top: 8px;
  margin-left: auto;
  margin-right: auto;
  height: 50vh;
}

.comecomes{
  display: flex;
  flex-direction: column-reverse; /* 順序を逆にする */
}

.each-comecome{
  display: flex;
  align-items: flex-end;
  margin-bottom: 50px;
}

.characters-pic{
  height: 10vh;
  object-fit: contain;
}

.comecome-title{
    padding: 0px 30px 0px 30px;
}

.only-title{
    padding-left: 100px;
}




/* ------------------------------------------------------- comecome関連動画イラストページ -------------------------------*/
#comecome-animation{
  margin: 50px;
}

.comecome-animation-main{
    margin-top: 50px;
    margin-bottom: 100px;
}

.comecome-animations{
  display: grid;
  gap: 150px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  margin-top: 6%;
  margin-bottom: 30px;
}

.each-comecome-animation img{
  height: 20vh;
  object-fit: contain;
  margin-left: 3vw;
}

.each-comecome-animation a{
  margin-right: 10vw;
}




/* ------------------------------------------------------- Each-illust -------------------------------*/
#clothes{
  margin: 50px;
}

.clothes-main{
    margin-top: 50px;
    margin-bottom: 150px;
}

.grid-each-clothes{
  display: grid;
  gap: 150px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 6%;
  margin-bottom: 30px;
}

.grid-each-clothes img{
  height: 30vh;
  object-fit: contain;
}

.grid-illusts{
  display: grid;
  gap: 150px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 6%;
  margin-bottom: 30px;
}

.grid-illusts img{
  height: 20vh;
  object-fit: contain;
}


/*---------------------------*/
#ucl{
  margin: 50px;
}

.ucl-main{
    margin-top: 50px;
    margin-bottom: 150px;
}

#wallart{
  margin: 50px;
}

.wallart-main{
    margin-top: 50px;
    margin-bottom: 150px;
}

#others{
  margin: 50px;
}

.others-main{
    margin-top: 50px;
    margin-bottom: 150px;
}

#postcard{
  margin: 50px;
}

.postcard-main{
    margin-top: 50px;
    margin-bottom: 150px;
}

#character{
  margin: 50px;
}

.character-main{
    margin-top: 50px;
    margin-bottom: 150px;
}

#threed{
  margin: 50px;
}

.threed-main{
    margin-top: 50px;
    margin-bottom: 150px;
}

#simple-animation{
  margin: 50px;
}

.simple-animation-main{
    margin-top: 50px;
    margin-bottom: 150px;
}







/*----------------------------------------------------柚木乃 柚についてページ----------------------------------------------------*/
#history{
  margin: 50px;
}

.history-table{
    margin-top: 50px;
    margin-bottom: 150px;
}

table th{
  padding: 40px 0px 10px 0px;
}

.contact-main{
    margin-top: 50px;
    margin-bottom: 150px;
}

.contact-main img{
  height: 4vh;
  object-fit: contain;
  margin-left: 55px;
}


/*------------------------------------------------------------snsページ----------------------------------------------------*/
#sns{
  margin: 50px;
}

.sns-main{
    margin-top: 50px;
    margin-bottom: 150px;
}

.sns-title{
    margin-bottom: 50px;
}

.each-sns{
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
}

.snsimg{
    max-height: 65px;
    max-width: 65px;
}

.each-sns{
  display: flex;
  align-items: center;
}

.snslink{
    padding: 0px 50px 0px 50px;
}

.thanks{
  margin-top: 8vh;
}

.anzuiro-link{
  text-align: center;
  margin-bottom: 100px;
}

.anzuiro-link img{
  height: 4vh;
  object-fit: contain;
  margin: 8px 0px 0px 6px;
}


/*-----------------------------------privacy policyページ----------------------------------------------------*/
#policy{
  margin: 50px;
}

.g-a{
    margin-top: 50px;
    margin-bottom: 150px;
}

.yuzunokoten-cation{
    margin-top: 50px;
    margin-bottom: 150px;
}



























/*---------------------------------モバイル対応-----------------------------------------------------------------*/
@media(orientation: portrait){
    
    /* -------------------------------- 基盤部分 ------------------*/
    
    html{
        font-size: 100%;
    }
    
    .cation{
      font-size: 90%;
    }
    
    .link{
    margin-top:0px;
    padding-box:0px;
    }
    
    .titles img{
        margin: 20px 3px 0px 0px;
        height: 3vh;
    }
    
    .titles a{
      margin-top: 30px;
      margin-left: 10px;
    }
    
    .low-titles img{
        margin: 20px 3px 0px 0px;
        height: 50px;
    }
    
    .low-titles a{
      margin-top: 30px;
      margin-left: 10px;
    }
    
    .story-select{
        display: flex;
        align-content: flex-start;
    }
    
    
    
    
    /* -------------------------------- header ------------------*/
    .title-jp{
      width: 25vw;
      margin-top: 10px;
      margin-left: 20px;
    }

    .title-eng{
      width: 25vw;
      margin-top: 6px;
      margin-left: 15px;
    }
    
    .main-nav{
        display: block;
        list-style: none;
        width: 0;
        position: absolute;
        z-index: 2;
        top: 10vh;
        right: 0;
        overflow: hidden;
        transition: .5s;
        background-color: rgba(256, 256, 256, 0.6);
    }
    
    .open-menu{
        width: 35%;
    }
    
    .fa-bars{
        visibility: visible;
        position: absolute;
        top: 5vh;
        right: 5vw;
        color: #776E5D;
        padding: .5rem 1rem;
    }
    
    .main-nav li{
        text-align: start;
        margin: 0px 0px 15px 10px;
        white-space: nowrap;
    }
    
    .main-nav li a{
        display: block;
    }

    .title-logo{
        height: 4vh;
        width: 90vw;
        margin-left: 3vw;
        margin-right: 3vw;
    }
    
    
    
    /* -------------------------------- footer ------------------*/
    footer img{
      height: 3vh;
      width: 90vw;
      border-radius: 60px / 60px;
      margin-left: 3vw;
      margin-right: 3vw;
      margin-bottom: 10px;
    }
    
    footer li{
        font-size: 0.9rem;
    }
    
    
    /* -------------------------------- セレクトページ ------------------*/
    .selicon{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .whichIcon{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .selectionIconJp{
      width: 50%;
    }

    .selectionIconEng{
      width: 50%;
    }

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

    .selectionNameJp{
      display: none;
    }

    .selectionNameEng{
        display: none;
    }
    
    .flinks{
      color: #B8860B;
      margin-left: 20px;
      margin-right: 20px;
      font-size: 90%;
    }
    

    
    
    
    
    
    
    /* -------------------------------- 新着ページ ------------------*/
    .samuzora{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 30px;
      margin-bottom: 50px;
    }

    .samuzora img{
      height: 250px;
    }

    .samuzora p{
      margin: 20px 5px 0px 5px;
    }
    
    .grid{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 20px, 0px, 50px, 0px;
    }
    
    .grid img{
      height: 150px;
      margin-bottom: 10px;
      object-fit: contain;
    }
    
    .novel-illust{
        padding-left: 7vh;
    }
    
    .grid p{
        margin-bottom: 100px;
    }
    
    .grid-in{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 50px, 0px, 100px, 0px;
    }
    
    .grid-in p{
        margin-bottom: 100px;
    }
    
    
    
    /* -------------------------------- 小説ページ ------------------*/
    .grid-longnovel{
        display: flex;
        flex-direction: column;
        margin: 20px, 0px, 50px, 0px;
    }
    
    .grid-longnovel img{
        margin-left: 20vw;
        width: 50vw;
        object-fit: contain;
    }
    
    .grid-longnovel p{
        margin-left: 25vw;
        margin-bottom: 100px;
    }
    
    .grid-monogatari{
        display: flex;
        flex-direction: column;
        margin: 20px, 0px, 50px, 0px;
    }
    
    .grid-monogatari img{
        margin-left: 20vw;
        width: 50vw;
        object-fit: contain;
    }
    
    .grid-monogatari p{
        margin-left: 15vw;
        margin-bottom: 100px;
    }
    
    
    /* -------------------------------- 音楽ページ ------------------*/
    .grid-masterpiece{
        display: flex;
        flex-direction: column;
        margin-top: 60px;
    }
    
    .grid-masterpiece img{
        margin-left: 20vw;
        width: 50vw;
        object-fit: contain;
    }
    
    .grid-masterpiece p{
        margin-left: 15vw;
        margin-bottom: 60px;
    }
    
    
    
    /* -------------------------------- 動画ページ ------------------*/
    .grid-comecome{
        display: flex;
        flex-direction: column;
        margin: 20px, 0px, 20px, 0px;
    }
    
    .grid-comecome img{
        margin-left: 20vw;
        width: 50vw;
        object-fit: contain;
    }
    
    .grid-comecome p{
        margin-left: 14vw;
        margin-bottom: 60px;
    }

    .grid-simple-animation{
        display: flex;
        flex-direction: column;
        margin: 20px, 0px, 50px, 0px;
    }
    
    .grid-simple-animation img{
        margin-left: 20vw;
        width: 50vw;
        object-fit: contain;
    }
    
    .grid-simple-animation p{
        margin-left: 15vw;
        margin-bottom: 60px;
    }
    
    
    
    /* -------------------------------- イラストページ ------------------*/
    .grid-clothes{
        display: flex;
        flex-direction: column;
        margin: 20px, 0px, 50px, 0px;
    }
    
    .grid-clothes img{
        margin-left: 20vw;
        width: 50vw;
        object-fit: contain;
    }
    
    .grid-clothes p{
        margin-left: 15vw;
        margin-bottom: 60px;
    }
    
    .grid-ucl{
        display: flex;
        flex-direction: column;
        margin: 20px, 0px, 50px, 0px;
    }
    
    .grid-ucl img{
        margin-left: 20vw;
        width: 50vw;
        object-fit: contain;
    }
    
    .grid-ucl p{
        margin-left: 15vw;
        margin-bottom: 60px;
    }
    
    .grid-wallart{
        display: flex;
        flex-direction: column;
        margin: 20px, 0px, 50px, 0px;
    }
    
    .grid-wallart img{
        margin-left: 20vw;
        width: 50vw;
        object-fit: contain;
    }
    
    .grid-wallart p{
        margin-left: 15vw;
        margin-bottom: 60px;
    }
    
    .grid-others{
        display: flex;
        flex-direction: column;
        margin: 20px, 0px, 50px, 0px;
    }
    
    .grid-others img{
        margin-left: 20vw;
        width: 50vw;
        object-fit: contain;
    }
    
    .grid-others p{
        margin-left: 15vw;
        margin-bottom: 60px;
    }
    
    
    
    /* -------------------------------- 柚木乃 柚について ------------------*/
    .contact-main img{
      height: 40px;
      object-fit: contain;
    }
    
    
    /* -------------------------------- SNSについて ------------------*/
    .snsimg{
        margin-right: auto;
        margin-left: auto;
        height: 70px;
    }
    
    .each-sns{
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 20px, 0px, 20px, 0px;
    }
    
    
    /* -------------------------------- 新作情報について ------------------*/
    .stories{
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-bottom: 100px;
    }
    
    .each-new-works{
        margin-left: 8vw;
    }
    
    
    /* -------------------------------- 報告について ------------------*/
    .reports{
      margin-top: 30px;
      margin-bottom: 150px;
    }
    
    .each-report{
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0px, 0px, 150px, 0px;
    }
    
    .each-report img{
        width: 100vw;
        object-fit: contain;
    }
    
    
    
    /* -------------------------------- 物語にはなり得ない物語ページ ------------------*/
    .each-story{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 60px, 0px, 60px, 0px;
    }

    .each-story img{
        width: 30vw;
        object-fit: contain;
    }
    
    .each-story p{
        margin-left: 18vw;
        width: 50vw;
    }
    
    
    /* -------------------------------- 音楽にはなり得ない音楽ページ ------------------*/
    .masterpiece{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .each-masterpiece{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 60px, 0px, 100px, 0px;
    }

    .each-masterpiece img{
        width: 30vw;
        object-fit: contain;
        margin-left: 22vw;
    }
    
    .each-masterpiece p{
        width: 70vw;
    }
    
    
    
    /* -------------------------------- comecomeページ ------------------*/
    .comecome-thumbnail{
        width: 50vw;
        object-fit: contain;
    }

    .comecome-stage{
      display: block;
      margin-top: 5px;
      margin-left: auto;
      margin-right: auto;
      width: 70vw;
      object-fit: contain;
    }
    
    .each-comecome{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .comecome-chara{
        margin-bottom: 100px;
    }
    
    .characters-pic{
      width: 10vw;
      object-fit: contain;
    }
    
    
    
    /* -------------------------------- 短編動画ページ ------------------*/
    .simple-animation-main{
        margin-bottom: 100px;
    }
    
    .each-simple-animation{
        display: flex;
        flex-direction: column;
        align-content: canter;
        margin: 20px, 0px, 20px, 0px;
    }
    
    .each-simple-animation img{
        width: 50vw;
        object-fit: contain;
        margin-left: 18vw;
    }
    
    .each-simple-animation p{
        width: 60vw;
        object-fit: contain;
        margin-top: 5px;
        margin-left: 21vw;
    }
    
    
    
    /* -------------------------------- 個別イラストページ ------------------*/
    .grid-each-clothes{
        display: flex;
        flex-direction: column;
        align-content: center;
        margin: 20px, 0px, 100px, 0px;
    }
    
    .each-cloth img{
        width: 50vw;
        object-fit: contain;
        margin-left: 18vw;
    }
    
    .each-cloth p{
        width: 65vw;
        margin-left: 12vw;
    }
    
    .grid-illusts{
        display: flex;
        flex-direction: column;
        align-content: flex-start;
        margin: 20px, 0px, 100px, 0px;
    }
    
    .grid-illusts img{
        width: 50vw;
        object-fit: contain;
        margin-left: 18vw;
    }
    
    .grid-illusts p{
        width: 65vw;
        margin-left: 12vw;
    }
    
}