@font-face {
font-family: 'Action Cond Bold Web';
src: url('../fonts/ActionCondensedBold-Grade3-Web.woff2') format('woff2'),
      url('../fonts/ActionCondensedBold-Grade3-Web.woff') format('woff');
font-weight:  700;
font-style:   normal;
font-stretch: normal;
}

@font-face {
font-family: 'Action Text Dark Web';
src: url('../fonts/ActionTextDark-Regular-Web.woff2') format('woff2'),
      url('../fonts/ActionTextDark-Regular-Web.woff') format('woff');
font-weight:  400;
font-style:   normal;
font-stretch: normal;
}

.html {
margin: 0;
font-size: 10px;
}

body {
font-feature-settings: "liga", "kern";
background-color:#A8DFBF;
margin: 0;
counter-reset: sidenote-counter;
font-family: 'Action Text Dark Web';
font-weight: 400;
font-size: 2rem;
color: #000000;
}

.nav {
position: absolute;
top: 20px;
right: 20%;
z-index: 99;
flex-wrap: wrap;
}

.nav-ul {
display: flex;
position: absolute;
top: 16px;
right: 20%;
z-index: 99;
}

.nav-ul li {
   padding: 16px;
}

.bar1 {
   transition: 0.4s;
   background-color: #000000;
   border: 0;
   width: 24px;
   height: 3px;
   position: absolute;
   top: 6px;
   right: 12%;
   display: block;
 }

.bar2{
   transition: 0.4s;
   background-color: #000000;
   border: 0;
   width: 24px;
   height: 3px;
   position: absolute;
   top: 14px;
   right: 12%;
   display: block;
 }

.bar3 {
   transition: 0.4s;
   background-color: #000000;
   border: 0;
   width: 24px;
   height: 3px;
   position: absolute;
   top: 22px;
   right: 12%;
   display: block;
 }

 .bar1w {
   transition: 0.4s;
   background-color: #FFFFFF;
   border: 0;
   width: 24px;
   height: 3px;
   position: absolute;
   top: 6px;
   right: 12%;
   margin-top: 8px;
   display: block;
 }
 
.bar2w {
   transition: 0.4s;
   background-color: #FFFFFF;
   border: 0;
   width: 24px;
   height: 3px;
   position: absolute;
   top: 14px;
   right: 12%;
   margin-top: 8px;
   display: block;
 }

.bar3w {
   transition: 0.4s;
   background-color: #FFFFFF;
   border: 0;
   width: 24px;
   height: 3px;
   position: absolute;
   top: 22px;
   right: 12%;
   margin-top: 8px;
   display: block;
 }

p {
font-family: "Action Text Dark Web", Sans-Serif;
font-weight: 300;
color: white;
text-align: left;
}

ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   }

ol {
list-style: none;
display: list-item;
}

li {
font-family: "Action Text Dark Web", Sans-Serif;
font-weight: 300;
font-size: 1.2rem;
float: inline;
list-style: none;
display: list-item;
}

li a {
text-align: left;
text-decoration: none;
}

.home {
font-family: "Action Text Dark Web", Sans-Serif;
font-weight: 400;
font-size: 1.2rem;
position: absolute;
top: 36px;
left: 20%;
color: #000000;
line-height: 1.0;
}

.home a {
   text-decoration: none;
   color: #000000;
}

.home a:visited{
color: #000000;
text-decoration: none;
}

.home a.black:hover {
color: #000000;
text-decoration: none;
}
a.black:active {
color: #000000;
text-decoration: none;
}

.homewhite a {
   text-decoration: none;
   color: #FFFFFF;
}

.homewhite a:link {
font-family: "Action Text Dark Web", Sans-Serif;
font-weight: 400;
font-size: 18px;
position: absolute;
top: 36px;
left: 20%;
text-decoration: none;
color: #FFFFFF;
line-height: 1.0;
}

.homewhite a:visited{
color: #FFFFFF;
}

.homewhite a.black:hover {
color: #000000;
}

a.black:active {
color: #000000;
}

a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
   text-decoration: none !important;
color: #000000;
}
a:active {
   text-decoration: none !important;
color: #000000;
}

b {
   font-size: 110%;
}

.main {
color:#000000;
text-align: left;
padding-left: 20%;
width: 60%;
padding-bottom: 0px;
padding-top: 100px;
}

section{
min-height: 100px;
display: flex;
width: 100%;
}

section1{
   min-height: 100px;
   display: flex;
   width: 100%;
   background-color: #FD71AD;
}

section2{
   min-height: 100px;
   display: flex;
   width: 100%;
   background-color: #C4A1FF;
   }

section3{
   min-height: 100px;
   display: flex;
   width: 100%;
   background-color :#F5C1C8;
   }

section:nth-child(1){
background-color: #FD71AD;
}

section:nth-child(2){
background-color: #C4A1FF;
}

section:nth-child(3){
background-color :#F5C1C8;
}

.container {
padding-left: 20%;
width: 58%;
display: flex;
float: left;
}
   
.sidenote-number {
   counter-increment: sidenote-counter;
   color: #FD71AD;
}

.sidenote::before {
   content: counter(sidenote-counter)".";
   position: relative;
   vertical-align: baseline;
   font-size: 0.9em;
   font-weight: normal;
}

.sidenote-number::after {
   content: counter(sidenote-counter);
   vertical-align: super;
   font-size: 0.7em;
   font-weight: normal;
   margin-right: 0.5rem;
}

.sidenote {
   font-size: 80%;
   position: relative;
   float: left;
   text-align: left;
   width: 88%;
   margin: 1rem 0;
   padding-left: 8%;
   padding-right: 8%;
   color: #7C7C7C;
}

.jp-text {
   float: right;
   font-family: "Hiragino Kaku Gothic Pro","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Std","Hiragino Kaku Gothic StdN","Hiragino Sans",-apple-system,BlinkMacSystemFont,Verdana,"Segoe UI", "Meiryo",sans-serif;
   font-weight: 400;
   font-style: normal;
   writing-mode: vertical-rl;
   text-orientation: mixed;
   margin: 0;
   padding-top: 100px;
   padding-left: 0;
   margin: 0;   
}

.jatext {
   font-family: "Hiragino Kaku Gothic Pro","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Std","Hiragino Kaku Gothic StdN","Hiragino Sans",-apple-system,BlinkMacSystemFont,Verdana,"Segoe UI", "Meiryo",sans-serif;
font-weight: 300;
font-style: normal;
width: 20%;
writing-mode: vertical-rl;
text-orientation: mixed;
height: 300px;
padding-left: 60%;
text-align: justify;
padding-top: 50px;
padding-bottom: 50px;
line-break: strict;
word-break: break-word;
word-wrap: break-word;
margin-top: -60px;
}

.contributors  {
   font-family: "Action Cond Bold Web", Sans-Serif;
   font-weight: 700;
   font-size: 80px;
   letter-spacing: 0.5px;
   margin-left: 20%;
   padding-top: 100px;
   color: #000000;
}

.container h1{
padding-bottom: 250px;
}

h1 {
font-family: "Action Cond Bold Web", Sans-Serif;
font-weight: 700;
font-size: 240px;
line-height: 190px;
letter-spacing: 1px;
padding-top: 100px;
padding-bottom: 0px;
margin: 0;
color: #000000;
}

h2 {
font-family: "Action Text Dark Web", Sans-Serif;
font-weight: 400;
font-size: 1.4rem;
color: #000000;
text-align: right;
padding-bottom: 40px;
line-height: 30px;
padding-right: 15px;
}

h3 {
   font-family: "Hiragino Kaku Gothic Pro","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Std","Hiragino Kaku Gothic StdN","Hiragino Sans",-apple-system,BlinkMacSystemFont,Verdana,"Segoe UI", "Meiryo",sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1.2rem;
color: #FFFFFF;
letter-spacing: -0.5px;
padding-bottom: 80px;
margin-top: 0;
margin: 0;
}

h4 {
   font-family: "Hiragino Kaku Gothic Pro","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Std","Hiragino Kaku Gothic StdN","Hiragino Sans",-apple-system,BlinkMacSystemFont,Verdana,"Segoe UI", "Meiryo",sans-serif;
font-weight: 400;
font-style: normal;
line-height: 26px;
font-size: 1rem;
color: #000000;
}

h5 {
font-family: 'Action Text Dark Web';
font-weight: 400;
font-size: 12px;
margin: 0;
letter-spacing: 0.1px;
}

h6 {
font-family: 'Action Text Dark Web';
font-weight: 400;
font-size: 1rem;
color: #FD71AD;
margin: 0;
}

h7 {
font-family: 'Action Cond Bold Web';
line-height: 0.9;
}

h8 {
font-family: "parisine-std-gris","Hiragino Kaku Gothic Pro","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Std","Hiragino Kaku Gothic StdN","Hiragino Sans",-apple-system,BlinkMacSystemFont,Verdana,"Segoe UI", "Meiryo",sans-serif;
font-weight: 300;
font-style: normal;
font-size: 16px;
line-height: 2;
line-break:strict;
word-break:break-word;
word-wrap:break-word;
}

h9 {
color: #FFFFFF;
font-size: 14px;
letter-spacing: 0.4px;
text-align: right;
}

h10 {
font-size: 24px;
color: #000000;
}

h11 {
font-family: "Hiragino Kaku Gothic Pro","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Std","Hiragino Kaku Gothic StdN","Hiragino Sans",-apple-system,BlinkMacSystemFont,Verdana,"Segoe UI", "Meiryo",sans-serif;
font-weight: 800;
font-size: 2rem;
letter-spacing: -1px;
position: relative;
top: 4px;
}

h12 {
font-family: 'Action Text Dark Web';
font-size: 14px;
color: #7C7C7C;
letter-spacing: 0.1px;
}
.untertitle {
font-size: 1.4rem;
text-align: left;
padding-bottom: 150px;
line-height: 32px;
padding-left: 20%;
margin-top: -100px;
width: 35%;
}

.explanation {
font-size: 1.2rem;
font-weight: 400;
text-align: left;
color: #FFFFFF;
position: absolute;
padding-left: 20%;
margin-top: 292px;
text-decoration: none;
background-color: transparent;
}

.inhalt a {
   text-decoration: none;
   color: #FFFFFF;
}

.articleimg img{
width: 100%;
height: 580px;
object-fit: cover;
}

.bilduntertitel{
margin-top: 8px;
margin-left: 8px;
color: #7C7C7C;
}

.caption{
margin-top: 60px;
width: 60%;
margin-left: 20%;
}

.honbun .Bilduntertitel-imText{
   font-size: 80%;
   color: #7C7C7C;
   display: flex;
   width: 90%;
   margin-left: 5%;
}

.title {
width: 70%;
margin-left: 20%;
margin-top: 5px;
font-size: 9rem;
}

.secondtitle {
width: 60%;
margin-left: 20%;
margin-top: 5px;
}   

.secondentitle {
font-family: "cordale", serif;
font-weight: bold;
letter-spacing: -0.3px;
width: 60%;
margin-left: 20%;
margin-top: 10px;
font-size: 1.6rem;
}   

.edition secondtitleen {
   font-family: "cordale", serif;
   font-weight: bold;
   letter-spacing: -0.3px;
   line-height: 2;
   font-size: 1.4rem;
   color: #000000;
   }   

.autor {
width: 60%;
margin-left: 20%;
margin-top: 100px;
}

.title h7 h11{
font-family: "Hiragino Kaku Gothic Pro","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Std","Hiragino Kaku Gothic StdN","Hiragino Sans",-apple-system,BlinkMacSystemFont,Verdana,"Segoe UI","Meiryo",sans-serif;
font-weight: 800;
font-style: normal;
font-size: 1.8rem;
letter-spacing: -1px;
position: relative;
top: 24px;
}

.honbun {
margin-top: 40px;
margin-bottom: 120px;
width: 38%;
margin-left: 20%;
text-align: justify;
}

.imgnarrowzero {
   width: 100% !important;
   margin-top: 0px !important;
   }

.imgnarrow {
   width: 100% !important;
   }

.imgwide {
   width: 240% !important;
   margin-left: -40%;
   }   

.honbun img {
width: 145%;
margin-top: 40px;
margin-bottom: 40px;
}

.honbunen {
font-family: "cordale", serif;
font-weight: 400;
font-style: normal;
font-size: 1.1rem;
margin-top: 40px;
margin-bottom: 120px;
width: 34%;
margin-left: 20%;
text-align: left;
line-height: 1.7;
}

.honbunen img  {
width: 145%;
}

.honbun ol li{
font-family: "parisine-std-gris","Hiragino Kaku Gothic Pro","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Std","Hiragino Kaku Gothic StdN","Hiragino Sans",-apple-system,BlinkMacSystemFont,Verdana,"Segoe UI","Meiryo",sans-serif;
padding-left: 4px;
margin-left: 2.5rem;
font-size: 16px;
list-style-type: decimal;
}

a.black:link {
text-decoration: none;
color: #000000;
}
a.black:visited {
text-decoration: none;
color: #000000;
}
a.black:hover {
color: #000000;
}
a.black:active {
color: #000000;
}

a.white:link {
text-decoration: none;
color: #FFFFFF;
}
a.white:visited {
text-decoration: none;
color: #FFFFFF;
}
a.white:hover {
color: #FFFFFF;
}
a.white:active {
color: #FFFFFF;
}

a.alt:link {
text-decoration: underline;
color: #000000;
text-underline-offset: 5px;
text-decoration-color: #F5C1C8;
text-decoration-thickness: 1px;
}
a.alt:visited {
   text-decoration: underline;
   text-underline-offset: 5px;
   text-decoration-color: #F5C1C8;
   text-decoration-thickness: 1px;
}
a.alt:hover {
background-color: #fde5e8;
}
a.alt:active {
background-color: #fde5e8;
}

::-moz-selection { /* Code for Firefox */
   background: #F5C1C8;
 }
 ::selection {
   background: #F5C1C8;
 }
.edition{
display: grid;
grid-template-columns: 50% 50%;
color: #000000;
}

.edition img {
width: 85%;
height: auto;
object-fit: cover;
padding-bottom: 10px;
transition-timing-function: ease; 
transition-duration: 0.4s; 
transition-delay: 0.2s;
}

.edition div {
margin: 0;
}

.edition figcaption {
font-family: 'Action Text Dark Web';
font-size: 13px;
padding-top: 4px;
padding-bottom: 8px;
color: #FFFFFF;
letter-spacing: 0.2px;
transition-timing-function: ease; 
transition-duration: 0.4s; 
transition-delay: 250ms;
}

.edition figtitle {
font-family: 'Action Cond Bold Web';
font-weight: 700;
font-size: 5vw;
letter-spacing: 0.4px;
color: #151515;
transition-timing-function: ease; 
transition-duration: 0.4s; 
transition-delay: 250ms;
}

.edition figtitle h11{
font-size: 1.6rem;
}

.edition secondtitle{
font-family: "Hiragino Kaku Gothic Pro","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Std","Hiragino Kaku Gothic StdN","Hiragino Sans",-apple-system,BlinkMacSystemFont,Verdana,"Segoe UI","Meiryo",sans-serif;
font-weight: 800;
font-style: normal;
font-size: 1.4rem;
position: relative;
color: #000000;
margin-top: 2px;
letter-spacing: -1px;
top: 4px;
}

.edition figtext {
font-family: "parisine-std-gris","Hiragino Kaku Gothic Pro","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Std","Hiragino Kaku Gothic StdN","Hiragino Sans",-apple-system,BlinkMacSystemFont,Verdana,"Segoe UI","Meiryo",sans-serif;
font-weight: 300;
font-style: normal;
font-size: 16px;
color: #151515;
display: block;
line-height: 1.6;
width: 70%;
margin-top: 13px;
text-align: left;
transition-timing-function: ease; 
transition-duration: 0.4s; 
transition-delay: 250ms;
line-break:strict;
word-break:break-word;
word-wrap:break-word;
}

.edition figtexten {
font-family: "cordale", serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
line-height: 1.5;
color: #151515;
display: block;
width: 75%;
text-align: left;
transition-timing-function: ease; 
transition-duration: 0.4s; 
transition-delay: 250ms;
}

.edition li a {
padding: 0;
padding-right: 0;
}

.reveal {
transform: translateY(20px);
opacity: 0;
transition: all 1s ease;
}

.reveal.active {
transform: translateY(0px);
opacity: 1;
}
.aboutext {
   margin-top: -80px;
} 
.aboutext h2{
text-align: left;
padding-bottom: 150px;
line-height: 32px;
padding-left: 20%;
padding-top: 0px;
margin: 0;
width: 35%;
margin-top: -80px;
}  
.names{
font-family: "Action Text Dark Web", Sans-Serif;
font-size: 1.2rem;
text-align: left;
line-height: 30px;
padding-left: 20%;
margin-top: -80px;
width: 25%;
}  
.names2{
font-family: "Action Text Dark Web", Sans-Serif;
font-size: 1.2rem;
text-align: left;
line-height: 30px;
padding-left: 35%;
margin-top: -80px;
width: 25%;
}
.names3{
font-family: "Action Text Dark Web", Sans-Serif;
font-size: 1.2rem;
text-align: left;
line-height: 30px;
padding-left: 20%;
margin-top: -80px;
margin-bottom: 80px;
width: 25%;
}  
.namesja{
font-family: "Hiragino Kaku Gothic Pro","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Std","Hiragino Kaku Gothic StdN","Hiragino Sans",-apple-system,BlinkMacSystemFont,Verdana,"Segoe UI","Meiryo",sans-serif;
font-weight: 300;
font-size: 16px;
font-style: normal;
width: 20%;
writing-mode: vertical-rl;
text-orientation: mixed;
height: 250px;
padding-left: 60%;
text-align: justify;
padding-top: 50px;
line-break: strict;
word-break: break-word;
word-wrap: break-word;
}  
.namesja a.alt:link{
   text-decoration: underline;
   color: #000000;
   text-underline-offset: -24px;
   text-decoration-color: #F5C1C8;
   text-decoration-thickness: 1px;
   }
.namesja2{
font-family: "Hiragino Kaku Gothic Pro","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Std","Hiragino Kaku Gothic StdN","Hiragino Sans",-apple-system,BlinkMacSystemFont,Verdana,"Segoe UI","Meiryo",sans-serif;
font-weight: 300;
font-size: 16px;
font-style: normal;
width: 20%;
writing-mode: vertical-rl;
text-orientation: mixed;
height: 250px;
padding-left: 50%;
text-align: justify;
padding-top: 50px;
line-break: strict;
word-break: break-word;
word-wrap: break-word;
}  
.namesja2 a.alt:link{
text-decoration: underline;
color: #000000;
text-underline-offset: -24px;
text-decoration-color: #F5C1C8;
text-decoration-thickness: 1px;
}
.namesja3{
font-family: "Hiragino Kaku Gothic Pro","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Std","Hiragino Kaku Gothic StdN","Hiragino Sans",-apple-system,BlinkMacSystemFont,Verdana,"Segoe UI","Meiryo",sans-serif;
font-weight: 300;
font-size: 16px;
font-style: normal;
width: 20%;
writing-mode: vertical-rl;
text-orientation: mixed;
height: 250px;
padding-left: 50%;
text-align: justify;
padding-top: 160px;
line-break: strict;
word-break: break-word;
word-wrap: break-word;
}  
.namesja3 a.alt:link{
   text-decoration: underline;
   color: #000000;
   text-underline-offset: -24px;
   text-decoration-color: #F5C1C8;
   text-decoration-thickness: 1px;
   }
.hideme {
opacity:0;
width: 300px;
}

.imprint {
margin-top: 120px;
margin-bottom: 120px;
width: 60%;
padding-left: 20%;
font-size: 18px;
line-height: 22px;
}

.privacy {
margin-top: 120px;
margin-bottom: 120px;
width: 40%;
padding-left: 20%;
font-size: 18px;
line-height: 22px;
color: #000000;
}

   ul.studio {
      display: fixed;
      grid-template-columns: repeat(3, 1fr);
      } 


.footer{
height: 15%;
}

.flexbox {
   display: flex;
   width: 100%;
   font-size: 0.9rem;
 }

 .flexbox div {
   width: 50%;
}

.flexbox div.float.left {
   background-color: #EF7F1B;
   height: 120px;
   color: #FFFFFF;
   letter-spacing: 0.2px;
   line-height: 1.5;
   padding-left: 20%;
   padding-top: 40px;
   font-size: 1rem;
}

.flexbox div.float.right {
   background-color: #03703B;
   height: 120px;
   color: #FFFFFF;
   letter-spacing: 0.4px;
   text-align: right;
   line-height: 1.8;
   padding-top: 40px;
   padding-bottom: 0px;
   padding-right: 20%;
}


 /* Break points */


@media screen and (max-width: 1200px) {

   .caption {
      margin-top: 120px;
      margin-left: 15%;
   }
   .title {
      width: 70%;
      margin-left: 15%;
      font-size: 10vw;
   }
   .secondtitle {
      margin-left: 15%;
      }  
      .autor {
         margin-left: 15%;
         }
   .honbun {
      width: 50%;
      margin-left: 15%;
      text-align: left;
   }
   .imgwide{
      width: 180% !important;
      margin-left: -20%;
      }
   .untertitle {
      width: 45%;
   }
}

@media screen and (max-width: 1024px) {
   .main {
      padding-left: 10%;
      width: 70%;
      }
   .main h2 {
   text-align: left;
   }
   .container {
   padding-left: 10%;
   width: 78%;
   padding-bottom: 100px;
   }
   .secondtitle {
   margin-left: 15%;
   }  
   .autor {
   margin-left: 15%;
   }
   .honbun {
   width: 60%;
   margin-left: 15%;
   margin-top: 60px;
   }
   .honbun img {
      width: 100%;
      }
      .imgwide{
         width: 157% !important;
         margin-left: -20%;
         }
   .title h7 {
   font-size: 13vw;
   }
   .title {
      margin-left: 15%;
   }
   .caption {
      margin-left: 15%;
   }
   .secondentitle {
      margin-left: 15%;
   }
   .honbunen {
      margin-left: 15%;
      width: 60%;
      margin-top: 60px;
   }
   .honbunen img {
      width: 100%;
      }
   section  {
   flex-direction: column;
   }
   .container h1{
   padding-bottom: 0px;
   }
   .title h7 h11 {
   font-size: 1.8vw;
   }
   .flexbox div.float.left {
      padding-left: 15%;
   }
   .flexbox div.float.right {
      padding-right: 15%;
   }
   .nav-ul {
      right: 10%;
   }
   .home{
      left: 10%;
   }
   .homewhite{
      position: absolute;
      left: 10%;
   }
   .flexbox div.float.left {
      padding-left: 10%;
   }
   .flexbox div.float.right {
      padding-right: 10%;
   }
   .jatext{
      padding-left: 69%;
      margin-right: 0;
      margin-top: -10px;
      padding-top: 0px;
      height: 280px;
   } 
   .aboutext h2{
      padding-left: 10%;
   } 
   .contributors{
   margin-left: 10%;
   } 
   .names{
   padding-left: 10%;
   } 
   .names2{
   padding-left: 25%;
   } 
   .names3{
   padding-left: 10%;
   }
   .untertitle {
      padding-left: 10%;
      width: 55%;
   }
   .explanation  {
      padding-left: 10%;
   }
   .edition figtitle {
      font-size: 7vw;
   }  
}



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

   #hamburger {
      width: 24px;
      height: 24px;
      position: absolute;
      top: 5%;
      right: 7%;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .5s ease-in-out;
      -moz-transition: .5s ease-in-out;
      -o-transition: .5s ease-in-out;
      transition: .5s ease-in-out;
      cursor: pointer;
    }

    #hamburger span{
      display: block;
      position: absolute;
      height: 2px;
      width: 24px;
      background: #000000;
      border-radius: 0px;
      opacity: 1;
      left: 0;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .25s ease-in-out;
      -moz-transition: .25s ease-in-out;
      -o-transition: .25s ease-in-out;
      transition: .25s ease-in-out;
    } 
    #hamburgerw {
      width: 24px;
      height: 24px;
      position: absolute;
      top: 5%;
      right: 10%;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .5s ease-in-out;
      -moz-transition: .5s ease-in-out;
      -o-transition: .5s ease-in-out;
      transition: .5s ease-in-out;
      cursor: pointer;
    }

    #hamburgerw span {
      display: block;
      position: absolute;
      height: 2px;
      width: 24px;
      background: #FFFFFF;
      border-radius: 0px;
      opacity: 1;
      left: 0;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .25s ease-in-out;
      -moz-transition: .25s ease-in-out;
      -o-transition: .25s ease-in-out;
      transition: .25s ease-in-out;
    } 

   .nav-ul {
      display: none;
   }

   .nav-ul ul {
      display: inline-grid;
      margin-top: 15px;
   }

   .nav-ul li {
      width: max-content !important;
      padding: 8px;
   }

   .nav-ul.show {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      height: 100% !important;
      width: 100%;
      margin-top: 70px;
      right: 0;      
      position: absolute !important;
      background-color: rgba(168, 223, 191, 0.9); 
   }
 
   .nav-ul.show ul {
      display: inline-grid;
      margin-top: 15px;
   }

   .nav-ul.show li {
      width: max-content !important;
      padding: 8px;
      font-size: 2rem;
   }

   .container {
      width: 81%;
   }
   .container h1 {
   font-size: 30vw;
   padding-top: 75px;
   }
   .main h1 {
   font-size: 30vw;
   line-height: 24vw;
   }
   .inhalt .jp-text h3{
   left: 3%;
   font-size: 17px;
   }
   .jp-text {
   padding-right: 10%;
   padding-top: 75px;
   }
   .title {
   margin-left: 10%;
   width: 80%;
   }
   .title h7 {
   font-size: 15vw;
   }
   .secondtitle {
   margin-left: 10%;
   }  
   .secondtitle h11 {
   font-size: 1.6rem;
   }  
   .autor {
   margin-left: 10%;
   }
   .honbun {
   width: 80%;
   margin-left: 10%;
   margin-top: 60px;
   text-align: left;
   }
   .honbun ol li {
      font-weight: 400;
   }   
   .imgwide{
      width: 120% !important;
      margin-left: -10%;
      }   
   .caption {
   margin-top: 80px;
   margin-left: 10%;
   }
   .secondentitle {
      margin-left: 10%;
   }
   .honbunen {
      margin-left: 10%;
      width: 80%;
      margin-top: 60px;
   }
   .flexbox div.float.left {
   padding-left: 10%;
   font-size: 12px;
   }
   .flexbox div.float.right {
   padding-right: 10%;
   font-size: 12px;
   }
   .edition img {
      width: 100%;
      height: auto;
      }
   .aboutext {
      margin-top: 0px;
      width: 80%;
      margin-left: 10%;
   padding-left: 0;
   } 
   .aboutext h2{
      margin-top: 0px;
      width: 80%;
      margin-left: 0;
   padding-left: 0;
   } 
   .jatext{
   margin-top: 50px;
   padding-left: 73%;
   } 
   .untertitle {
   width: 70%;
   }
   .explanation  {
   margin-top: 260px;
   width: 52%;
   }
   .main h3  {
   margin-top: -5px;
   }
   h8 {
      font-weight: 400;
   }
   .untertitle {
      font-size: 1.2rem;
      line-height: 28px;
   }
   .edition {
   grid-template-columns: 100%;
   }  
   .edition figtitle {
      font-size: 10vw;
      font-weight: 400;
   }  
   .names {
      width: 40%;
   }  
   .names2 {
      width: 40%;
      padding-left: 20%;
   }   
   .names3 {
      width: 40%;
   } 
   .namesja {
      padding-left: 70%;
      }  
   .namesja2 {
   padding-left: 64%;
   }  
   .namesja3 {
      padding-left: 64%;
      }  
}

@media  screen and (max-width: 576px) { 

   .caption {
      margin-left: 8%;
      }
   .title {
      margin-left: 8%;
      width: 84%;
      }
   .title h7 {
      font-size: 18vw;
      }
   .secondtitle {
      margin-left: 8%;
      }
   .container {
      padding-left: 7%;
      width: 86%;
   }
   .container h1{
      padding-top: 50px;
      font-size: 34vw;
      padding-top: 0px;
   }
   .secondtitle h11 {
      font-size: 1.4rem;
      }  
   .autor {
      margin-left: 8%;
      }
   .honbun {
      width: 84%;
      margin-left: 8%;
      margin-top: 60px;
   }
   .imgwide{
      width: 100% !important;
      margin-left: 0%;
      }   
   h8 {
      line-height: 1.8;
   }
   .secondentitle {
      margin-left: 8%;
   }
   .honbunen {
      margin-left: 8%;
      width: 84%;
      margin-top: 60px;
   }
   .inhalt .jp-text h3{
      left: 3%;
      font-size: 1rem;
   }
   .main h3 {
      font-size: 3vw;
   }
   .main h2 {
      font-size: 4vw;
      line-height: 1.2;
   }
   .jp-text {
      padding-top: 44px;
   }
   .main {
      width: 80%;
   }
   .flexbox div.float.left {
      padding-left: 7%;
      font-size: 10px;
   }
   .flexbox div.float.right {
      padding-right: 7%;
      font-size: 10px;
   }
   .edition figtext {
      width: 90%;
      }
   .home {
      left: 7%;
   }
   .homewhite {
      left: 7%;
   }
   #hamburgerw {
      right: 7%;
   }
   .container h1 {
      padding-top: 28px;
   }
   .explanation {
   margin-top: 200px;
   padding-left: 7%;
   }
   .edition figtitle {
      font-size: 13vw;
   }  
   .edition figtexten {
      width: 90%;
   }       
   .main {
   padding-left: 7%;
   }  
   .jatext {
   padding-left: 73%;
   }   
   h4  {
      font-size: 0.9rem;
      line-height: 24px;
   }  
   .aboutext h2 {
      font-size: 1.2rem;
      line-height: 28px;
      padding-bottom: 60px;
   }
   .names {
   padding-left: 7%;
   } 
   .names2 {
      padding-left: 10%;
      width: 45%;
   }  
   .names3 {
   padding-left: 7%;
   }   
   .namesja {
   padding-left: 70%;
   }  
   .namesja2 {
   padding-left: 70%;
   }  
   .namesja3 {
   padding-left: 70%;
   }  
   .aboutext {
   margin-left: 7%;
   }   
   .contributors {
   margin-left: 7%;
   }   
}
@media  screen and (max-width: 425px) { 
.names {
   width: 70%;
   margin-top: 20px;
}  
.names2 {
   width: 70%;
   padding-left: 7%;
   margin-top: 20px;
}   
.names3 {
   width: 70%;
   margin-top: 20px;
} 
.namesja {
   padding-top: 80px;
   }  
   .namesja2 {
      padding-top: 80px;
      }  
.namesja3 {
   padding-top: 80px;
   }  
   .explanation {
   width: 70%;
      }
}  
@media  screen and (max-width: 375px) { 
   .main {
margin-left: 0;
padding-left: 7%;
      }
   .main h1 {
   font-size: 38vw;
   line-height: 30vw;
   }
   .main h2 {
      font-size: 5vw;
      line-height: 1.1;
      letter-spacing: 0px;
   }
   .main h3 {
      margin-top: 0;
      padding-bottom: 60px;
      font-size: 5vw;
   }
   .container h1 {
      font-size: 38vw;
      padding-top: 4px;
   }
   .explanation {
      margin-top: 158px;
      width: 60%;
      font-size: 4vw;
   }
   .edition figtext {
   width: 100%;
   }
.caption{
   margin-left: 5%;
   }  
.title {
   margin-left: 5%;
   width: 90%;
}  
.title h7{
font-size: 4.5rem;
}  
.secondtitle {
   margin-left: 5%;
   width: 80%;
}
.secondtitle h11 {
   font-size: 1.2rem;
   letter-spacing: -0.2px;
   } 
.autor {
   width: 90%;
   margin-left: 5%;
   margin-top: 80px;
}       
.honbun {
   width: 90%;
   margin-left: 5%;
}
h8 {
   line-height: 1.7;
}
.secondentitle {
   margin-left:5%;
   font-size: 1.4rem;
}
.honbunen {
   margin-left: 5%;
   width: 90%;
}
#hamburger {
   top: 26px;
}
#hamburgerw {
   top: 26px;
}
.home {
   top: 24px;
}
.homewhite a:link{
   top: 24px;
}
.edition figtitle {
   font-size: 16vw;
} 
.edition figtexten {
   width: 100%;
}     
.untertitle {
   padding-left: 7%;
   padding-bottom: 100px;
   width: 85%;
}
.names {
   width: 70%;
   margin-top: 20px;
}  
.names2 {
   width: 70%;
   padding-left: 7%;
   margin-top: 20px;
}   
.names3 {
   width: 70%;
   margin-top: 20px;
} 
.namesja {
   padding-top: 80px;
   }  
   .namesja2 {
      padding-top: 80px;
      }  
.namesja3 {
   padding-top: 80px;
   }  
.aboutext {
margin-left: 7%;
padding-right: 0;
margin-right: 0;
width: 85%;
} 
.aboutext h2 {
   padding-right: 0;
   margin-right: 0;
   width: 100%;
   } 
.contributors {
margin-left: 7%;
}   
}

@media  screen and (max-width: 320px) { 
   .caption{
      margin-left: 5%;
      }  
   .title {
      margin-left: 5%;
   }  
   .title h7{
   font-size: 4rem;
   }
   .secondtitle {
      margin-left: 5%;
      width: 90%;
   }
   .autor {
      margin-left: 5%;
      margin-top: 80px;
   }      
   .autor h12{
      font-size: 0.8rem;
   }     
   .edition figtitle {
      font-size: 18vw;
   } 
   .names {
      width: 80%
   }   
   .names2 {
      padding-left: 7%;
      width: 80%
   }   
   .names3 {
      width: 80%
   }   
   .cont
   .contoributors {
   font-size: ;   }   
}

@media (min-width: 1025px) {
   .sidenote {
      float: right;
      clear: right;
      margin-right: -20vw;
      text-align: left;
      top: -1rem;
      width: 14vw;
      margin-top: 1rem;
      color: #585858;
   }
   .sidenote-number:hover {
      background-color: #F5C1C8;
  }
  .sidenote:hover  {
   background-color: #fde5e8;
}
}


* {
   margin: 0;
   padding: 0; 
 }

 /* hamburgerw open */


 #hamburgerw span:nth-child(1) {
   top: 0px;
 }
 
 #hamburgerw span:nth-child(2),#hamburgerw span:nth-child(3) {
   top: 8px;
 }
 
 #hamburgerw span:nth-child(4) {
   top: 16px;
 }
 
 #hamburgerw.open span:nth-child(1) {
   top: 18px;
   width: 0%;
   left: 50%;
 }
 
 #hamburgerw.open span:nth-child(2) {
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
 }
 
 #hamburgerw.open span:nth-child(3) {
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }
 
 #hamburgerw.open span:nth-child(4) {
   top: 18px;
   width: 0%;
   left: 50%;
 }

 /* hamburger open*/

 #hamburger span:nth-child(1) {
   top: 0px;
 }
 
 #hamburger span:nth-child(2),#hamburger span:nth-child(3) {
   top: 8px;
 }
 
 #hamburger span:nth-child(4) {
   top: 16px;
 }
 
 #hamburger.open span:nth-child(1) {
   top: 18px;
   width: 0%;
   left: 50%;
 }
 
 #hamburger.open span:nth-child(2) {
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
 }
 
 #hamburger.open span:nth-child(3) {
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }
 
 #hamburger.open span:nth-child(4) {
   top: 18px;
   width: 0%;
   left: 50%;
 }