.block {

  background-color: #c2adeb;
  font-family: "Yu Mincho";  
  font-size: 15pt;
  width: 1000px;
  margin: 0 auto;
} 

.content {
  padding: 20px;
  font-family: "Yu Mincho";  

 
}

.box {

  text-align: left;
  -webkit-writing-mode: vertical-rl;
   writing-mode: vertical-rl;
  margin-right: 0px;
  margin-left: 0px;
}
.box2 {

  text-align: center;
}

.box3 {

  text-align: left;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  margin-right: 0px;
  margin-left: 0px;
  padding-top: 1100px;

} 

.box4 {

  text-align: left;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  margin-right: 0px;
  margin-left: 0px;
  padding-top: 550px;

} 

.box5{

  text-align: left;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  margin-right: 0px;
  margin-left: 0px;
  padding-top: 25px;

} 

.box6{

  text-align: left;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  margin-right: 0px;
  margin-left: 0px;
  padding-top: 25px;

} 



.box7{

  text-align: left;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -ms-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  margin-right: 0px;
  margin-left: 0px;
  padding-top: 25px;

} 


.box8{

  text-align: left;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  margin-right: 0px;
  margin-left: 0px;
  padding-top: 25px;

} 

.box9{

  text-align: left;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  margin-right: 0px;
  margin-left: 0px;
  padding-top: 25px;

} 

.box10{

  text-align: left;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  margin-right: 0px;
  margin-left: 0px;
  padding-top: 25px;

} 

.box11{

  text-align: left;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  margin-right: 0px;
  margin-left: 0px;
  padding-top: 25px;

} 




.exp {

  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  column-count: 1;
  -webkit-column-gap: 30px;
  -moz-column-gap: 30px;
  -ms-column-gap: 30px;
  column-gap: 30px;
  display: inline-block;
  height: 500px;
  width:830px;
  padding-left: 20px;
}

.exp3 {

  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  column-count: 1;
  -webkit-column-gap: 30px;
  -moz-column-gap: 30px;
  -ms-column-gap: 30px;
  column-gap: 30px;
  display: inline-block;
height: 500px;
  width:825px;

}

.exp2 {
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  column-count: 1;
  -webkit-column-gap: 30px;
  -moz-column-gap: 30px;
  -ms-column-gap: 30px;
  column-gap: 30px;
  display: inline-block;
  height: 250px;
  text-align: left;
  font-size: 16pt;
}

.info{
  height: 35px;
    font-family: Cardo;  

  width: 450px ;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 3px;
 

}


.blog {
  box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  font-family: Cardo;  
  font-size: 18pt;
  text-align: center;
  height:100%;
  padding: 3px;
  font-color: #262626;
  background: rgb(128,128,128,0.2);

} 

.films {
  box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  font-family: Cardo;  
  text-align: center;
  height:100%;
  padding: 3px;
  font-size: 18pt;
  background: rgb(128,128,128,0.2);

} 

.about {
  box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  font-family: Cardo;  
  text-align: center;
  height:100%;
  padding: 3px;
  background: rgb(128,128,128,0.2);
  font-size: 18pt;
  font-color: #262626;
} 

.photography {
  box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  font-family: Cardo;  
  text-align: center;
  height:100%;
  padding: 3px;
  background: rgb(128,128,128,0.2);
  font-size: 18pt;

} 

.audio {
  box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  font-family: Cardo;  
  text-align: center;
  height:100%;
  background: rgb(128,128,128,0.2);
  padding: 3px;
  font-size: 18pt;

} 

.japonais {
  margin-right: 0px;
  margin-left: 0px;
  line-height:24px;
}


img.displayed {
  padding-top: 10px;
  padding-bottom:10px;
}

.ret {
  padding: 3px;
}




  * {
   box-sizing: border-box; 
  }
  body {
    margin: 0;
  background-color: #e6deed;
  }
  #main {
    display: flex;
    min-height: calc(100vh - 40vh);
  }
  #main > article {
    flex: 1;
  }
  #main > nav, 
  #main > aside {
    flex: 0 0 20vw;
    background: beige;
  }
  #main > nav {
    order: -1;
  }
  header, footer, article, nav, aside {
    padding: 0.2em;
  }
  header, footer {
    height: 14vh;
  }
  ul {
  list-style-type: circle;
    font-size: 12pt;
      font-family: Cardo, Garamond; 

}
li {
  margin: 5px;
}

th {
  text-align: left;

}
hr {
    border:         none;
    border-left:    0.5px solid hwb(0 60.8% 39.2%);
    height:         200px;
    width:          1px;     
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}