html{
  font-family: 'Avenir','Calibri','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Meiryo UI',sans-serif;
  height:100vh;
  width: 100vw;

  -webkit-text-size-adjust: 100%;
  margin: 0px;
  padding: 0px;
  font-size: 85%;
}

div,ul,p,li,img,a{
  margin: 0px;
  padding: 0px;
}

body{
  margin: 20px 40px;
  color: #666666;
  height:100%;
  display: flex;
}

p,a,li{
  text-decoration: none;
  color: #666666;
}

li{
  list-style-type: none;
  /* font-size: 12pt; */
  font-size: 1.2rem;
}

div::-webkit-scrollbar {
    display:none;
}

.hr01{
  border-width: 1px 0 0 0;
  border-style: solid;
  color: #bbbbbb;
  width: 75%;
  margin-top: 40px;
  margin-bottom: 40px;
}


/****** menu ******/

.menu{
  float: left;
  position: fixed;
  /* background-color: #bcffff; */
}

div.header{
  font-size: 1.5rem;
  /* background-color: #ffffbc; */
  padding-bottom: 20px;
}

.menu ul{
  padding: 0px 20px;
  text-decoration: underline;
  /* background-color: #eeeeee; */
}

.menu li{
}


/****** content ******/

div.side-margin{
  width: 25vw;
  min-width: 210px;
  height: 50%;
}

.content{
  /* background-color: #ffbcff; */
  /* margin-left: 300px; */
  /* margin-left: 25vw; */
  /* height: 100%; */
  width: 700px;
}

/* menuのworksの高さに合わせる */
.content div.works,.cv,.curation,.top{
  padding-top: 47px;
}

.content p{
  /* background-color: #eeeeee; */
  font-size: 1rem;
}

.content a{
  text-decoration: underline;
}

.content span.kakko{
  font-size: 0.9rem;
}

.content p.content-text{
  margin-bottom: 3em;
}

.content div.flex-box{
  display: flex;
  width: 100%
}

/****** cv ******/

.content span.year{
  margin-right: 10px;
}


/****** works , curation ******/

/* menuのworksの高さに合わせる */
.content div.works,.cv,.curation,.text,.top{
  padding-top: 47px;
}

.content div.works,
            .curation,
            .work-page,
            .text
            {
              height: 100%;
              width: 65vw;
              max-width: 700px;
            }

/* スクロール補助 ページが長くなったら入れる */
.content div.works,
            .curation,
            .work-page,
            .text
         {
           height: 100%;
           padding-bottom: 15vh;
         }

.content  .works ul,
          .curation ul,
          .text ul
          {
            margin-bottom: 2em;
          }

.content  .works div.year-works,
          .curation div.year-works,
          .text div.year-works
          {
            font-size: 1.2rem;
          }


.content  .works li,.works a,
          .curation li,.curation a,
          .text li,.text a
          {
            /* background-color: #eeeeee; */
            font-size: 1rem;
            margin-bottom: 2em;
          }

.content .curation img{
  width: 60%;
}

.content .works img{
  width: 100%;
}

/****** text ******/


.content .text-page {
  font-family: 'Avenir','Candara',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
  width: 100%;
  max-width: 550px;
}

.content .text-page p.title{
  font-size: 1.2rem;
  margin-top: 30px;
  margin-bottom: 2em;
}

.content .text-page p.text-section{
  margin: 10px 0px;
  line-height: 1.8em;
}

.content .text-page p.text-section br{
  display: block;
  content: "";
  margin: 5px 0;
}

.content .text-page p.text-caption{
  width: 100%;
  text-align: right;
  font-size: 0.9rem;
  margin-top: 30px;
}

.content .text-page span.note{
  font-size: .7rem;
  color: #bbbbbb;
  vertical-align: top;
}

.content .text-page ul.text-note{
  margin-top: 30px;
}

.content .text-page ul.text-note li{
  width: 100%;
  font-size: 0.9rem;
  padding-left: 1.5rem;
  text-indent: -1.5rem;
  color: #bbbbbb;
}

img.disdisplay{
  width: 400px;
  height: auto;
}


/****** work-page ******/

.content img.content-image-main{
  width: 65vw;
}

.content p.title{
  font-size: 1.2rem;
  margin-top: 30px;
  margin-bottom: 10px;
}

.content p.status{
  font-size: 0.9rem;
  margin-bottom: 30px;
}

.content img.content-image{
  width: 100%;
  max-width: 500px;
  margin: 25px 0px;
}

.content iframe{
  margin: 25px 0px;
}

.content p.description{
  width: 100%;
  max-width: 500px;
  margin: 10px 0px;
}

.content p.script{
  font-family: 'Avenir','Candara',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
  font-size: 0.9rem;
  line-height: 3em;
}

.content p.img-caption{
  width: 100%;
  max-width: 500px;
  float: left;
  text-align: right;
  font-size: 0.9rem;
  color: #bbbbbb;
  margin-top: -25px;
}

.content div.script-box{
  height: 21.5em;
  width: 100%;
  overflow: scroll;
  padding-left: 20px;
  margin: 25px 0px;
}

.content div.script-window{
  /* position:fixed; */
  position: absolute;
  /* bottom: 30px; */
  /* left: 40px; */
  /* height: 50vh; */
  height: 100%;
  width: 30vw;
  min-width: 300px;
  overflow: scroll;
  padding-left: 20px;
  padding-bottom: 400%;
}

.content .script-window p.script{
  margin-top: 150px;
  line-height: 6em;
}

.content span.coffee-tab{
  padding-left: 65px;
}

.content div.script-box-hanasu{
  height: 22em;
  width: 50%;
  overflow: scroll;
  padding-left: 20px;
  margin: 25px 0px;
  /* border-color: #bbbbbb; */
  /* border: 0.1px solid; */

}

.content p.caption-hanasu{
  width: 50%;
  text-align: right;
  font-size: 0.9rem;
  color: #bbbbbb;
}

.content span.hanasu-tab{
  padding-left: 20px;
}



/* --------------- */

.content-cgc{
  font-family: 'Avenir','Candara',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
}


div.side-margin-cgc{
  width: 10vw;
  min-width: 50px;
  height: 50%;
}



.blankcgc{
  margin: 100px 0px;
}

.content img.content-image-main-cgc{
  width: 1024px;
  height: auto;
}

div.QRdiv-cgc{
  /* display: block; */
  width: 1024px;
  margin-bottom: 40px;
}

.content p.QRcaption-cgc{
  width: 1024px;
  /* float: left; */
  text-align: right;
  font-size: 0.9rem;
  color: #aaaaaa;
  /* margin-top: 50px; */
}

div.QRimgdiv-cgc{
  /* display: block; */
  width: 220px;
  height: auto;
  margin-left: auto;
}

.content img.QR-cgc{
  /* float: right; */
  /* text-align: right; */
  /* font-size: 0.9rem; */
  /* color: #aaaaaa; */
  /* margin-top: -25px; */
}

.content p.title-cgc{
  font-size: 2rem;
  margin-top: 0px;
  margin-bottom: 10px;
}

.content p.status-cgc{
  font-size: 1rem;
  margin-bottom: 30px;
}

.content img.content-image-cgc{
  width: 800px;
  margin: 25px 0px;
  margin-left: 224px;
}

/* .content div.img-cgc{
  width: 1024px;
  margin-left: auto;
} */

.content iframe.iframe-cgc{
  margin: 0px 0px;
}

.content p.description-cgc{
  font-size: 1.2rem;
  width: 100%;
  max-width: 800px;
  margin: 30px 0px;
  line-height: 1.6em;
}

.content p.script-cgc{
  font-family: 'Avenir','Candara',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
  font-size: 1rem;
  line-height: 4.5em;
  margin-top: 0px;
  margin-bottom: 150px;
}


.content p.img-caption-cgc{
  width: 1024px;
  /* max-width: 500px; */
  float: left;
  text-align: right;
  font-size: 0.9rem;
  color: #aaaaaa;
  margin-top: -25px;
}

.content p.videocaption-cgc{
  width: 1024px;
  /* float: left; */
  text-align: right;
  font-size: 0.9rem;
  color: #aaaaaa;
  margin-top: -90px;
  margin-bottom: 40px;
}

.content div.script-box-cgc{
  height: 30em;
  width: 100%;
  overflow: scroll;
  padding-left: 20px;
  margin: 25px 0px;
}

.content div.script-window-cgc{
  /* position:fixed; */
  position: absolute;
  /* bottom: 30px; */
  /* left: 40px; */
  /* height: 50vh; */
  height: 1000%;
  width: 50vw;
  min-width: 300px;
  overflow: scroll;
  padding-left: 20px;
  padding-bottom: 100%;
}