/*
THEME NAME: Philo-Electro-Ray
*/

@font-face {
    font-family: "gothic";
    src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "ray";
    src: url("asset/font/ray.woff") format("woff");
    src: url("asset/font/ray.woff2") format("woff2");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "ray-ita";
    src: url("asset/font/ray-Italic.woff") format("woff");
    src: url("asset/font/ray-Italic.woff2") format("woff2");
    font-style: normal;
    font-weight: normal;
}

*{margin: 0;  padding: 0; box-sizing: border-box; font-style: normal; font-weight: normal; word-break: keep-all;
text-rendering: optimizeLegibility; text-decoration:none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: auto;
  -webkit-text-size-adjust: 100%;
}


::selection {
   background-color: var(--green);
   color: #000;
}
::-moz-selection {
   background-color: var(--green);
   color: #000;
}


::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-thumb {background-color: #000;}
::-webkit-scrollbar-track {background-color: var(--green);}

a{
color:#000;
text-decoration:none;
}
a:hover{background: var(--green);
}
i{font-family: "ray-ita";}
del {text-decoration: line-through;}

html {
    overflow-x: hidden ;
    word-break: keep-all;
    line-height: 1.75;
    font-family: "ray";
    font-size: 1vw;
}
body{  
    overflow-x: hidden ;
    position:relative;
    top:0px;
    left:0px;
    bottom:0px;
}
body.indexbody{width:2000vw; display: table}
body.singlebody{background-color: var(--lightgrey)}
.windowbox{width:100vw; height:100vh; position: fixed; z-index: -999}
.en{line-height: 1.5}

:root{
    --blue:#0066ff;
    --lightblue:#80b2ff;
    --green:#00f05a;
    --lightgrey:#ecebea;

    --docuA:#f45197; /* section08 */
    --docuB:#0071ce; /* section09 */
    --docuC:#9578d3; /* section10 */
    --docuD:#ff4438; /* section11 */
    --docuE:#4c86a0; /* section12 */
    --docuF:#00ae42; /* section13 */
    --docuG:#00acd8; /* section14 */
    --docuH:#ff6b00; /* section15 */
    --docuI:#85754e; /* section16 */
    --docuJ:#425cc7; /* section17 */
    --docuK:#c028b9; /* section18 */
    --docuL:#00c08b; /* section19 */
    --docuM:#54565a; /* section20 */   
}

.backbg{position: fixed; width: 80rem; height: 100vh; top:0; left:10rem;
    background: repeat-y top/100% url(asset/bg.png) ; z-index: -1;
}
.bg{background: repeat-y top/100% url(asset/bg.png); 
}
.singlebg{background: repeat-y top/100% url(asset/bg2.png); 
}
.go{font-family: "gothic";}

/* NAVI */
.menubutton{display:flex; align-items: center; justify-content: center; 
    position: fixed; top:0; left: 43rem; text-align:center; 
    top: 1.5rem; width: 14rem; height: 3.6rem; font-size: 1.8rem;
    border:1px solid black; background-color: white; z-index: 999999; 
}
.menubutton-on{cursor: pointer;}
.menubutton-on:hover{background-color: var(--blue); color: white; }

.circlebutton{display:block; height: 3.6rem; width: 3.6rem; border-radius: 3.6rem; 
border:1px solid black; background-color: white; background-repeat: no-repeat;
background-position: center center; cursor: pointer !important; 
}
.circlebutton .tooltiptext {
  visibility: hidden; display: inline-block;
  width: 20rem; height:auto;
  text-align: left; font-size: 1rem;
  border-radius: 2rem;
  padding: 0.3rem; 
  position: absolute; left:3.8rem; top:0.62rem;
}
.circlebutton:hover .tooltiptext {
  visibility: visible; 
}
.circlebutton .tooltiptext2 {
  visibility: hidden; display: inline-block;
  width: 5rem; height:auto;
  text-align: right; font-size: 1rem;
  border-radius: 2rem;
  padding: 0.3rem; 
  position: absolute; right:3.8rem; top:0.62rem;
}
.circlebutton:hover .tooltiptext2 {
  visibility: visible;
}
.none{display: none;}
.donotwork{opacity:0.3; cursor: default;}
.donotwork:hover{background-color: white; color: black;}

.section .prev{position: fixed; top:1.5rem; left:4rem; z-index: 999; 
    background-image: url(asset/prev.svg); background-size: 60%; 
}
.section .prev:hover{background-color: var(--green)}
.section .next{position: fixed; top:1.5rem; right:4rem; z-index: 999; 
    background-image: url(asset/next.svg); background-size: 60%;
}
.section .next:hover{background-color: var(--green)}
.goback{position: fixed; top:1.5rem; left:4rem; z-index: 99999; 
    background-image: url(asset/goback.svg); background-size: 60%; 
}
.goback:hover{background-color: var(--green)}

.menu{display: none; width: 82rem; height: auto; background-color:var(--blue); z-index: 9999;
position: fixed; top:0; left: 9rem; text-align:center; padding: 8.7rem 3rem 4rem 3rem; font-size: 0; 
border-radius: 0 0 5rem 5rem;
}
.menu .close{position: absolute; top:1.5rem; right:1.5rem;
background-image: url(asset/x.svg); background-size: 60%; font-size: 1.8rem;
}
.menu .close:hover{background-color: var(--green)}
.menu .buttontypeA li{display:inline-flex; align-items: center; 
    justify-content: center;width:14.2857143%; height: 3.6rem; font-size: 1.8rem;
    border:1px solid black; background-color: white; margin-right: -1px;
}
.menu .buttontypeA li:hover{background-color: var(--green)}
.menu .buttontypeB {margin-top:3.6rem; text-align: center;}
.menu .buttontypeB .divider{display:flex; align-items: center; 
    justify-content: center; width:80%; margin:0 auto; height: 3.6rem; font-size: 1.8rem;
    border:1px solid black; background-color: var(--lightblue); margin-bottom:-1px;
}
.menu .buttontypeB li{display:inline-flex; align-items: center; border-radius: 3rem;
    justify-content: center; width:auto; height: 3.6rem; padding:0 3rem; font-size: 1.8rem;
    border:1px solid black; background-color: white; margin: -1px -1px 0 0;
}
.menu .buttontypeB .turnon8 li:hover{background: var(--docuA)}
.menu .buttontypeB .turnon9 li:hover{background: var(--docuB)}
.menu .buttontypeB .turnon10 li:hover{background: var(--docuC)}
.menu .buttontypeB .turnon11 li:hover{background: var(--docuD)}
.menu .buttontypeB .turnon12 li:hover{background: var(--docuE)}
.menu .buttontypeB .turnon13 li:hover{background: var(--docuF)}
.menu .buttontypeB .turnon14 li:hover{background: var(--docuG)}
.menu .buttontypeB .turnon15 li:hover{background: var(--docuH)}
.menu .buttontypeB .turnon16 li:hover{background: var(--docuI)}
.menu .buttontypeB .turnon17 li:hover{background: var(--docuJ)}
.menu .buttontypeB .turnon18 li:hover{background: var(--docuK)}
.menu .buttontypeB .turnon19 li:hover{background: var(--docuL)}
.menu .buttontypeB .turnon20 li:hover{background: var(--docuM)}

.menu .searchform{ margin:3.6rem auto; display: none}
.menu .search{background-color: white; width:80%; height: 3.6rem; font-family: "ray"; font-size: 1.8rem; color: black;
    border:1px solid black; text-align: center; display:flex; align-items: center; justify-content: center; margin:0 auto; }
input::placeholder {
    font-family: "ray"; font-size: 1.8rem; color: black; padding-top: 0rem;
}
.jellyfish { 
    background-image: url(asset/jelly.svg); background-size: 60%; background-repeat: no-repeat;
    background-position: center center; background-color: rgba(255, 255, 255, 0.8);
    width: 12rem; height: 12rem; box-shadow: 0 0 5px 10px rgba(255, 255, 255, 0.8);
    display: inline-block; border-radius: 10rem; cursor: pointer;
    position: fixed; z-index: 99999; display: none;
    animation-name: spin;
    animation-duration: 30000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes spin {
    0% {
        transform:rotate(0deg);
    }
    20% {
        transform:rotate(360deg);
    }
    60% {
        transform:rotate(-180deg);
    }
    100% {
        transform:rotate(0deg);
    }
}

/* Gate */

.intro {position: relative; margin-bottom:25vh;
  width:100rem; height: 100vh; margin:0 -10rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.introimage, .introtext{position: absolute; top:0; left: 0; 
    width: 100%; height: 100%; display: flex;
  justify-content: center;
  align-items: center;
}
.introtext{text-align:center; font-size: 11rem; line-height: 1.3; padding:0 8rem}
.introimage img {
  width: 34%;
  opacity: 0;
    -webkit-transition: all 2s ease; 
    -moz-transition: all 2s ease; 
    -ms-transition: all 2s ease; 
    -o-transition: all 2s ease; 
}

/* Main Section */

.gutter{width: 10rem; height: 10rem;
    position: absolute; right: 0; top:0;
}
.firstsection{width:10rem;
    min-height:200vh;
    position: relative;
    float:left;
}
.section{
    width:80rem;
    min-height:200vh;
    position: relative;
    float:left;
    font-size: 1.8rem;
}
.singlesection{
    width:80rem;
    min-height:200vh;
    position: relative;
    margin:0 10rem 0 10rem;
    font-size: 1.8rem;
}

/* Section Body */
.section h1{
    text-align:center;
    font-size: 7.5rem;
    margin:12rem 7rem 0rem 7rem;
}
.section h1 img{width: 75%}

.singlesection h1{
    text-align:center;
    font-size: 7.5rem;
    padding:12rem 7rem 0rem 7rem;
}
.singlesection h1 img{width: 75%}

.section h2{
    margin:5rem auto 0 auto;
    text-align:center;
    font-size: 2.5rem; line-height: 1.45;
    width: 30rem; height: 20rem; padding:5rem;
    border-radius: 5rem; color:white;
    display: flex; justify-content: center; align-items: center;
}
.singlesection h2{
    margin:5rem auto 0 auto;
    text-align:center;
    font-size: 2.5rem; line-height: 1.45;
    width: 30rem; height: 20rem; padding:5rem;
    border-radius: 5rem; color:white;
    display: flex; justify-content: center; align-items: center;
}
.section h3{margin:2.5rem auto 6rem auto;
    text-align:center;
    font-size: 3rem;
}
.singlesection h3{margin:2.5rem auto 6rem auto;
    text-align:center;
    font-size: 3rem;
}

.section h4{margin:0 auto; width: 80rem;
    text-align:center;
}
.section h4 img{width: 70%}

.singlesection h4{margin:0 auto; width: 80rem;
    text-align:center;
}
.singlesection h4 img{width: 70%}


.docuA{background-color: var(--docuA)}
.docuB{background-color: var(--docuB)}
.docuC{background-color: var(--docuC)}
.docuD{background-color: var(--docuD)}
.docuE{background-color: var(--docuE)}
.docuF{background-color: var(--docuF)}
.docuG{background-color: var(--docuG)}
.docuH{background-color: var(--docuH)}
.docuI{background-color: var(--docuI)}
.docuJ{background-color: var(--docuJ)}
.docuK{background-color: var(--docuK)}
.docuL{background-color: var(--docuL)}
.docuM{background-color: var(--docuM)}

.section8 .paper_list:hover{background-color: var(--docuA)}
.section9 .paper_list:hover{background-color: var(--docuB)}
.section10 .paper_list:hover{background-color: var(--docuC)}
.section11 .paper_list:hover{background-color: var(--docuD)}
.section12 .paper_list:hover{background-color: var(--docuE)}
.section13 .paper_list:hover{background-color: var(--docuF)}
.section14 .paper_list:hover{background-color: var(--docuG)}
.section15 .paper_list:hover{background-color: var(--docuH)}
.section16 .paper_list:hover{background-color: var(--docuI)}
.section17 .paper_list:hover{background-color: var(--docuJ)}
.section18 .paper_list:hover{background-color: var(--docuK)}
.section19 .paper_list:hover{background-color: var(--docuL)}
.section20 .paper_list:hover{background-color: var(--docuM)}

.section .news{
    margin:0 7rem 10rem 7rem; height: auto; font-size: 0; 
}
.section .news .cell{
    display:inline-block; width: 49%; height: auto; margin:0 0 5rem 0; vertical-align: top;
}
.section .news .cell img{width: 100%; padding-bottom: 1rem;}
.section .news .cell .newstext{padding:0 3rem 0 0; font-size: 1.6rem}

.text{
    margin:7rem 8rem 14rem 8rem;
}
.text p{padding-bottom: 1.75rem}
.text img{width: 100%}

.text .indent{margin-left: 6rem;}
.text .cushion{height: 3.5rem}
.text .smalltitle{display:inline-block; border-bottom: 0.12rem solid black; padding-bottom:-0.2rem; width: auto;}
.text .paper_list{width: 100%; border-bottom: 0.12rem solid black; padding: 0.3rem 0; display: block}
.text .paper_number{width: 20%; float: left;}
.text .paper_title{width: 80%; float: left;}

.text ol {
    counter-reset: item;
    list-style-type: decimal;
}
.text ol li {
    display: block;
    margin-bottom: 0;
    margin-left: 6rem;
}

.text ol li:before {
    display: inline-block;
    content: counter(item)" ";
    counter-increment: item;
    width: 6rem;
    margin-left: -6rem;
}
.text ol ul {list-style: none;}
.text ol ul li{
    display: block;
    margin-bottom: 0;
    margin-left: 6rem;
}
.text ol ul li:before {
    display: inline-block;
    content: "—";
    counter-increment: none;
    width: 6rem;
    margin-left: -6rem;
}

.join{text-align: center}
.join .apply-character{width: 20rem; height: 20rem; display: inline-block; 
    background-repeat:no-repeat; background-size: contain; background-position: center center;
    background:url(asset/apply.svg);
}
.join .apply{display: inline-flex; justify-content: center; align-items: center;
    background-color: var(--green);
    border-radius: 10rem; height: 10rem; width: 80%;}

.clearfix {
   clear: both;
}

.cal-mobile{display:none;}
.cal-desktop{display:block;}
.cal-desktop iframe {
    width: 100%; border:0;
    height: 50rem; /* 100/56.25 = 560/315 = 1.778 */
}

.footer{margin:25rem 8rem 0rem 8rem; padding-bottom: 15rem}


/* PAPERS */

.contens_on{position: fixed; top:1.5rem; right:4rem; z-index: 99999; 
    background-image: url(asset/tb_of_contents.svg); background-size: 60%; 
}
.contens_on:hover{background-color: var(--green)}

.golist{position: fixed; top:5.5rem; left:4rem; z-index: 99999; 
    background-image: url(asset/list.svg); background-size: 60%; 
}
.golist:hover{background-color: var(--green)}

.menu_contents{display: none; width: 82rem; height: 100vh; background-color:#ccc; z-index: 999999;
position: fixed; top:0; left: 9rem; padding: 8.7rem 4rem 4rem 4rem;  
font-size: 1.8rem; overflow-y: auto; overflow-x: hidden;
}
.menu_contents .indent{margin-left: 6rem;}
.menu_contents .cushion{height: 3.5rem}
.menu_contents .tb_of_contents{border:1px solid black; padding: 3rem; background-color: white}
.menu_contents .tb_of_contents ul {
    counter-reset: item;
    list-style-type: "";
    margin-bottom: 3.15rem;
}
.menu_contents .tb_of_contents ul li {
    display: block;
    margin-bottom: 0;
    margin-left: 6rem;
}

.menu_contents .tb_of_contents ul li:before {
    display: inline-block;
    content: "";
    width: 6rem;
    margin-left: -6rem;
}
.menu_contents .tb_of_contents ol {
    counter-reset: item;
    list-style-type: decimal;
    margin-bottom: 3.15rem;
}
.menu_contents .tb_of_contents ol li {
    display: block;
    margin-bottom: 0;
    margin-left: 6rem;
}

.menu_contents .tb_of_contents ol li:before {
    display: inline-block;
    content: counter(item)" ";
    counter-increment: item;
    width: 6rem;
    margin-left: -6rem;
}
.menu_contents .close{position: absolute; top:1.5rem; right:1.5rem;
background-image: url(asset/x.svg); background-size: 60%; font-size: 1.8rem;
}
.menu_contents .close:hover{background-color: var(--green)}

.papersection{
    width:80rem;
    min-height:200vh;
    position: relative;
    margin:0 10rem 0 10rem;
    font-size: clamp(18px, 1.8rem, 32px);

}
.papersection h1{
    text-align:center;
    font-size: 7.5rem;
    padding:12rem 7rem 8rem 7rem;
}
.papersection h1 .smalltitle{font-size: 1.8rem; padding-top: 8rem}
address.author{display:block;
    text-align: center; padding:0rem 0rem 8rem 0rem;
}
.papersection h3{margin:0rem auto 6rem auto;
    text-align:center; padding-top: 12rem;
    font-size: 3rem;}
.papersection .center{
    text-align:center;}
.papers{
    margin:7rem 8rem 14rem 8rem;
}
.papers .indent{margin-left: 6rem;}
.papers .cushion{height: 3.5rem}

.papers .note{font-size: 1.6rem; margin: 0 6rem 6rem 6rem;}
.papers .note ul {
    counter-reset: item;
    list-style-type: "— ";
}
.papers .note ul li {
    display: block;
    margin-bottom: 0;
    margin-left: 6rem;
}

.papers .note ul li:before {
    display: inline-block;
    content: "— ";
    width: 6rem;
    margin-left: -6rem;
}
.papers .note p{margin-bottom: 2.4rem}

.papers .note h4{margin-left: 6rem; margin-bottom: 2.4rem; margin-top: 12rem;}

.papers .tb_of_contents{margin: 0 0 6rem 0;}

.papers .tb_of_contents ul {
    counter-reset: item;
    list-style-type: "";
    margin-bottom: 3.15rem;
}
.papers .tb_of_contents ul li {
    display: block;
    margin-bottom: 0;
    margin-left: 6rem;
}

.papers .tb_of_contents ul li:before {
    display: inline-block;
    content: "";
    width: 6rem;
    margin-left: -6rem;
}
.papers .tb_of_contents ol {
    counter-reset: item;
    list-style-type: decimal;
    margin-bottom: 3.15rem;
}
.papers .tb_of_contents ol li {
    display: block;
    margin-bottom: 0;
    margin-left: 6rem;
}

.papers .tb_of_contents ol li:before {
    display: inline-block;
    content: counter(item)" ";
    counter-increment: item;
    width: 6rem;
    margin-left: -6rem;
}
.papers .paragraph {margin:0rem auto 6rem auto;
    text-align:center; font-size: 3.5rem; font-family: "gothic";}
.papers .paper_body {margin:0 0 12rem 0; }
.papers .paper_body blockquote{margin: 0 6rem 3.15rem 6rem; font-family: "gothic";}
.papers .paper_body strong{border-bottom: 0.1rem solid black; padding-bottom: 0.1rem;}
strong{border-bottom: 0.1rem solid black; padding-bottom: 0.1rem;}
.papers .paper_body p{margin-bottom: 3.15rem;}

.papers .paper_body h4{display:block; text-align: center; padding: 3.15rem 0 3.15rem 10%; font-size: 120%;}
.papers .paper_body .lower{padding: 0 0 0 10%;}


.papers .paper_body ins{display:inline-block; margin: 0 0 0 6rem;}
.papers .paper_body a{display:inline-block; width:auto; height: auto; border-radius: 0.5rem;
    position: relative; top: -0.7rem; font-size: 80%; padding: 0.1rem 0.6rem 0 0.6rem}
.papers .paper_body img{width:100%; margin: 0 0 3.15rem 0;}

.papers .paper_body .cal ol {
    counter-reset: item;
    list-style-type: decimal;
}
.papers .paper_body .cal ol li {
    display: block;
    margin-bottom: 3.15rem;
    margin-left: 6rem;
}

.papers .paper_body .cal ol li:before {
    display: inline-block;
    content: counter(item)" ";
    counter-increment: item;
    width: 6rem;
    margin-left: -6rem;
}

.s-category-documents_a .papers .paper_body em{color: var(--docuA);}
.s-category-documents_b .papers .paper_body em{color: var(--docuB);}
.s-category-documents_c .papers .paper_body em{color: var(--docuC);}
.s-category-documents_d .papers .paper_body em{color: var(--docuD);}
.s-category-documents_e .papers .paper_body em{color: var(--docuE);}
.s-category-documents_f .papers .paper_body em{color: var(--docuF);}
.s-category-documents_g .papers .paper_body em{color: var(--docuG);}
.s-category-documents_h .papers .paper_body em{color: var(--docuH);}
.s-category-documents_i .papers .paper_body em{color: var(--docuI);}
.s-category-documents_j .papers .paper_body em{color: var(--docuJ);}
.s-category-documents_k .papers .paper_body em{color: var(--docuK);}
.s-category-documents_l .papers .paper_body em{color: var(--docuL);}
.s-category-documents_m .papers .paper_body em{color: var(--docuM);}

.s-category-documents_a .papers .footnote em{color: var(--docuA);}
.s-category-documents_b .papers .footnote em{color: var(--docuB);}
.s-category-documents_c .papers .footnote em{color: var(--docuC);}
.s-category-documents_d .papers .footnote em{color: var(--docuD);}
.s-category-documents_e .papers .footnote em{color: var(--docuE);}
.s-category-documents_f .papers .footnote em{color: var(--docuF);}
.s-category-documents_g .papers .footnote em{color: var(--docuG);}
.s-category-documents_h .papers .footnote em{color: var(--docuH);}
.s-category-documents_i .papers .footnote em{color: var(--docuI);}
.s-category-documents_j .papers .footnote em{color: var(--docuJ);}
.s-category-documents_k .papers .footnote em{color: var(--docuK);}
.s-category-documents_l .papers .footnote em{color: var(--docuL);}
.s-category-documents_m .papers .footnote em{color: var(--docuM);}

.s-category-documents_a a:hover{background-color: var(--docuA)}
.s-category-documents_b a:hover{background-color: var(--docuB)}
.s-category-documents_c a:hover{background-color: var(--docuC)}
.s-category-documents_d a:hover{background-color: var(--docuD)}
.s-category-documents_e a:hover{background-color: var(--docuE)}
.s-category-documents_f a:hover{background-color: var(--docuF)}
.s-category-documents_g a:hover{background-color: var(--docuG)}
.s-category-documents_h a:hover{background-color: var(--docuH)}
.s-category-documents_i a:hover{background-color: var(--docuI)}
.s-category-documents_j a:hover{background-color: var(--docuJ)}
.s-category-documents_k a:hover{background-color: var(--docuK)}
.s-category-documents_l a:hover{background-color: var(--docuL)}
.s-category-documents_m a:hover{background-color: var(--docuM)}

.papers .footnote{font-size: 1.6rem; margin: 0 6rem 6rem 6rem;}
.papers .footnote a.backtobody{display:inline-flex; 
    justify-content: center; align-items: center; width:2.2rem; height: 2.2rem; 
    border-radius: 0.5rem; border:1px solid black; position: relative; 
}

/* PASSWORD */

form.post-password-form{width: 100%; font-size: 1.8rem; text-align: center;
padding:14rem 32rem 8rem 32rem;}
form.post-password-form p{padding-bottom: 3.15rem}

form.post-password-form input{
    width: 100%;
    height: 3.8rem;
    padding: 0.5rem;
    box-sizing: border-box;
    margin-bottom: 1.8rem;
    border-radius: 6px;
    background-color: white;
    border: none;
    text-align: center;
    font-size: 1.8rem;
}

form.post-password-form input::placeholder{
    color: var(--green);
}
form.post-password-form input[type="submit"]{
    color: #fff;
    font-family: "ray";
    font-size: 1.8rem;
    background-color: var(--blue);
}

@media only screen and (min-width: 601px) and (max-width: 1100px) {

html {
    overflow-x: hidden ;
    word-break: keep-all;
    color: #000;
    line-height: 1.75;
    font-family: "ray";
    font-size: 1vw;
}
body{  
    overflow-x: hidden ;
    position:relative;
    top:0px;
    left:0px;
    bottom:0px;
}
body.indexbody{width:2000vw; display: table}
.backbg{display: none;
}
.gutter{width: 0rem; 
    position: absolute; right: 0; top:0;
}

.firstsection{width:0rem;
    min-height:200vh;
    position: relative;
    float:left;
}
.section{
    width:100rem;
    min-height:200vh;
    position: relative;
    float:left;
    font-size: 2.2rem;
}
.singlesection{
    width:100rem;
    min-height:200vh;
    position: relative;
    margin:0;
    font-size: 2.2rem;
}
.cal-mobile{display:none;}
.cal-desktop{display:block;}
.cal-desktop iframe {
    width: 100%; border:0;
    height: 150rem; /* 100/56.25 = 560/315 = 1.778 */
}
/* Gate */

.intro {position: relative; margin-bottom:25vh;
  width:100rem; height: 100vh; margin:0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.introimage, .introtext{position: absolute; top:0; left: 0; 
    width: 100%; height: 100%; display: flex;
  justify-content: center;
  align-items: center;
}
.introtext{text-align:center; font-size: 16rem; line-height: 1.3; padding:0 8rem}
.introimage img {
  width: 40%;
}

.jellyfish { 
    width: 18rem; height: 18rem;
}

.papersection{
    width:100rem;
    min-height:200vh;
    position: relative;
    margin:0 0rem 0 0rem;
    font-size: clamp(20px, 1.8rem, 32px);

}

}

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

html {
    overflow-x: hidden;
    word-break: keep-all;
    color: #000;
    line-height: 1.8;
    font-family: "ray";
    font-size: 1vw;
}
body{  
    overflow-x: hidden;
    position:relative;
    top:0px;
    left:0px;
    bottom:0px;
    touch-action: pan-y;
}
body.indexbody{width:2010vw; display: table}
body.singlebody{background-color:white;}
.backbg{display: none;
}
.bg{background-image: none; 
}
.singlebg{background-image: none; 
}

.gutter{width: 0rem; 
    position: absolute; right: 0; top:0;
}

.firstsection{width:0rem;
    min-height:200vh;
    position: relative;
    float:left;
}
.section{
    width:100rem;
    min-height:200vh;
    position: relative;
    float:left;
    font-size: 4.5rem;
}
.singlesection{
    width:100rem;
    min-height:200vh;
    position: relative;
    margin:0;
    font-size: 4.5rem;
}

/* Section Body */
.section h1{
    text-align:center;
    font-size: 18rem;
    margin:24rem 7rem 0rem 7rem;
}
.section h1 img{width: 95%}
.singlesection h1{
    text-align:center;
    font-size: 18rem;
    margin:24rem 7rem 0rem 7rem;
}
.singlesection h1 img{width: 95%}
.section h2{
    margin:10rem auto 20rem auto;
    text-align:center;
    font-size: 6rem; line-height: 1.55;
    width: 60rem; height: 50rem; padding:5rem 12rem 5rem 12rem;
    border-radius: 10rem; color:white;
    display: flex; justify-content: center; align-items: center;
}
.singlesection h2{
    margin:10rem auto 20rem auto;
    text-align:center;
    font-size: 6rem; line-height: 1.55;
    width: 60rem; height: 50rem; padding:5rem 12rem 5rem 12rem;
    border-radius: 10rem; color:white;
    display: flex; justify-content: center; align-items: center;
}
.singlesection h3{margin:2.5rem 7rem 8rem 7rem;
    text-align:center;
    font-size: 7.5rem;
}
.section h3{margin:2.5rem 7rem 8rem 7rem;
    text-align:center;
    font-size: 7.5rem;
}
.section h4{margin:0 auto; width: 80rem;
    text-align:center;
}
.singlesection h4{margin:0 auto; width: 80rem;
    text-align:center;
}
.singlesection h4 img{width: 100%}
.section h4 img{width: 100%}

.docuA{background-color: var(--docuA)}
.docuB{background-color: var(--docuB)}
.docuC{background-color: var(--docuC)}
.docuD{background-color: var(--docuD)}
.docuE{background-color: var(--docuE)}
.docuF{background-color: var(--docuF)}
.docuG{background-color: var(--docuG)}
.docuH{background-color: var(--docuH)}
.docuI{background-color: var(--docuI)}
.docuJ{background-color: var(--docuJ)}
.docuK{background-color: var(--docuK)}
.docuL{background-color: var(--docuL)}
.docuM{background-color: var(--docuM)}

.section .news{
    margin:0 5rem 10rem 5rem; height: auto; font-size: 0; 
}
.section .news .cell{
    display:inline-block; width: 100%; height: auto; margin:0 0 10rem 0; vertical-align: top;
}
.section .news .cell img{width: 100%; padding-bottom: 3rem}
.section .news .cell .newstext{padding:0 3rem 0 0; font-size: 4.1rem}

.text{
    margin:7rem 5rem 21rem 5rem;
}
.text p{padding-bottom: 7.82rem}
.text img{width: 100%}

.text .indent{margin-left: 6rem;}
.text .cushion{height: 7.82rem}
.text .caption{font-size: 4.1rem}
.text .smalltitle{display:inline-block; border-bottom: 0.3rem solid black; padding-bottom:-0.2rem; width: auto;}
.text .paper_list{width: 100%; border-bottom: 0.3rem solid black; padding: 0.7rem 0}
.text .paper_number{width: 20%; float: left;}
.text .paper_title{width: 80%; float: left;}

.text ol {
    counter-reset: item;
}
.text ol li {
    display: block;
    margin-bottom: 0;
    margin-left: 6rem;
}

.text ol li:before {
    display: inline-block;
    content: counter(item)" ";
    counter-increment: item;
    width: 6rem;
    margin-left: -6rem;
}
.text ol ul {list-style: none;}
.text ol ul li{
    display: block;
    margin-bottom: 0;
    margin-left: 6rem;
}
.text ol ul li:before {
    display: inline-block;
    content: "—";
    counter-increment: none;
    width: 6rem;
    margin-left: -6rem;
}

.join{text-align: center; margin-bottom: 17rem}
.join .apply-character{width: 40rem; height: 40rem; display: inline-block; 
    background-repeat:no-repeat; background-size: contain; background-position: center center;
    background:url(asset/apply.svg);
}
.join .apply{display: inline-flex; justify-content: center; align-items: center;
    background-color: var(--green); ;
    border-radius: 20rem; height: 20rem; width: 80%;}
.cal-mobile{display:none;}
.cal-desktop{display:block;}
.cal-desktop iframe {
    width: 100%; border:0;
    height: 150rem; /* 100/56.25 = 560/315 = 1.778 */
}
.clearfix {
   clear: both;
}

.footer{margin:60rem 5rem 10rem 5rem;}


/* NAVI */
.menubutton{display:flex; align-items: center; justify-content: center; 
    position: fixed; top: 5rem; left: 32rem; text-align:center; cursor: pointer;
     width: 36rem; height: 10rem; font-size: 4.5rem;
    border:1px solid black; background-color: white; z-index: 999999; 
}

.circlebutton{display:block; height: 10rem; width: 10rem; border-radius: 10rem; 
border:1px solid black; background-color: white; background-repeat: no-repeat;
background-position: center center; cursor: pointer;
}
.circlebutton .tooltiptext {display: none;
}
.circlebutton:hover .tooltiptext {display: none;
}
.circlebutton .tooltiptext2 {display: none;
}
.circlebutton:hover .tooltiptext2 {display: none;
}
.none{display: none;}
.donotwork{opacity:0.3; cursor: default;}
.donotwork:hover{background-color: white !important; color: black !important;}

.section .prev{position: fixed; top:5rem; left: 5rem; z-index: 999; 
    background-image: url(asset/prev.svg); background-size: 60%; 
}
.section .next{position: fixed; top:5rem; right: 5rem; z-index: 999; 
    background-image: url(asset/next.svg); background-size: 60%;
}
.goback{position: fixed; top:5rem; left: 3rem; z-index: 99999; 
    background-image: url(asset/goback.svg); background-size: 60%;
}

.menu{display: none; width: 100rem; height: 90vh; background-color:var(--blue); z-index: 9999;
position: fixed; top:0; left: 0; text-align:center; padding: 20rem 5rem 10rem 5rem; 
overflow-y: scroll; font-size: 0; border-radius: 0 0 0 0; border-bottom:1px solid black;
}
.menu .close{position: absolute; top:5rem; right:5rem;
background-image: url(asset/x.svg); background-size: 60%; ;
}
.menu .buttontypeA li{display:inline-flex; align-items: center; 
    justify-content: center;width:50%; height: 10rem; font-size: 4.5rem;
    border:1px solid black; background-color: white; margin: 0 -1px -1px 0;
}
.menu .buttontypeB {margin-top:5rem; text-align: center;}
.menu .buttontypeB .divider{display:flex; align-items: center; font-size: 4.5rem;
    justify-content: center; width:80%; margin:0 auto -1px auto; height: 10rem;
    border:1px solid black; background-color: var(--lightblue);
}
.menu .buttontypeB li{display:inline-flex; align-items: center; border-radius: 10rem;
    justify-content: center; width:100%; height: 10rem; padding:0 6rem; font-size: 4.5rem;
    border:1px solid black; background-color: white; margin: -1px 0 0 0;
}
.menu .searchform{ margin:5rem auto 0 auto; }
.menu .search{background-color: white; width:100%; height: 10rem; font-family: "ray"; font-size: 4.5rem; color: black;
    border:1px solid black; text-align: center; display:flex; align-items: center; justify-content: center;}
input::placeholder {
    font-family: "ray"; font-size: 4.5rem; color: black; padding-top: 2rem;
}

.jellyfish { 
    background-image: url(asset/jelly.svg); background-size: 60%; background-repeat: no-repeat;
    background-position: center center; background-color: rgba(255, 255, 255, 0.8);
    width: 26rem; height: 26rem; cursor: pointer; box-shadow: 0 0 5px 10px rgba(255, 255, 255, 0.8);
    display: inline-block; border-radius: 20rem;
    position: fixed; z-index: 999; 
}


/* Gate */

.intro {position: relative; margin-bottom:25vh;
  width:100rem; height: 100vh; margin:0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.introimage, .introtext{position: absolute; top:0; left: 0; 
    width: 100%; height: 100%; display: flex;
  justify-content: center;
  align-items: center;
}
.introtext{text-align:center; font-size: 20rem; line-height: 1.3; padding:0 8rem}
.introimage img {
  width: 40%;
}

/* PAPERS */

.contens_on{position: fixed; top:5rem; right:3rem; z-index: 999; 
    background-image: url(asset/tb_of_contents.svg); background-size: 60%; 
}
.contens_on:hover{background-color: var(--green)}

.golist{position: fixed; top:16rem; left:3rem; z-index: 9999; 
    background-image: url(asset/list.svg); background-size: 60%; 
}
.golist:hover{background-color: var(--green)}


.menu_contents{display: none; width: 100rem; height: 100vh; background-color:#ccc; z-index: 99999;
position: fixed; top:0; left: 0; padding: 24rem 4rem 4rem 4rem;  
font-size: 4.5rem;; overflow-y: auto; overflow-x: hidden;
}
.menu_contents .indent{margin-left: 6rem;}
.menu_contents .cushion{height: 3.5rem}
.menu_contents .tb_of_contents{border:1px solid black; padding: 5rem; background-color: white}
.menu_contents .tb_of_contents ul {
    counter-reset: item;
    list-style-type: "";
    margin-bottom: 3.15rem;
}
.menu_contents .tb_of_contents ul li {
    display: block;
    margin-bottom: 0;
    margin-left: 6rem;
}

.menu_contents .tb_of_contents ul li:before {
    display: inline-block;
    content: "";
    width: 6rem;
    margin-left: -6rem;
}
.menu_contents .tb_of_contents ol {
    counter-reset: item;
    list-style-type: decimal;
    margin-bottom: 3.15rem;
}
.menu_contents .tb_of_contents ol li {
    display: block;
    margin-bottom: 0;
    margin-left: 6rem;
}

.menu_contents .tb_of_contents ol li:before {
    display: inline-block;
    content: counter(item)" ";
    counter-increment: item;
    width: 6rem;
    margin-left: -6rem;
}
.menu_contents .close{position: absolute; top:5rem; right:3rem;
background-image: url(asset/x.svg); background-size: 60%; font-size: 1.8rem;
}
.menu_contents .close:hover{background-color: var(--green)}

.papersection{
    width:100rem;
    min-height:200vh;
    position: relative;
    margin:0;
    font-size: 4.5rem;
}
.papersection h1{
    text-align:center;
    font-size: 18rem;
    padding:25rem 5rem 12rem 5rem;
    line-height: 1.35; 
}
.papersection h1 .smalltitle{font-size: 4.5rem; padding-top: 24rem}
address.author{display:block;
    text-align: center; padding:0rem 0rem 16rem 0rem;
}
.papersection h3{margin:0rem auto 12rem auto;
    text-align:center; padding-top: 24rem;
    font-size: 7.5rem;}

.papers{
    margin:14rem 3rem 28rem 3rem;
}
.papers .indent{margin-left: 6rem;}
.papers .cushion{height: 7rem}

.papers .note{font-size: 4.5rem; margin: 0 0rem 12rem 0rem;}

.papers .note h4{margin-left: 6rem; margin-bottom: 7.8rem; margin-top: 24rem;}

.papers .note ul {
    counter-reset: item;
    list-style-type: "— ";
}
.papers .note ul li {
    display: block;
    margin-bottom: 0;
    margin-left: 6rem;
}

.papers .note ul li:before {
    display: inline-block;
    content: "— ";
    width: 6rem;
    margin-left: -6rem;
}
.papers .tb_of_contents{margin: 0 0 6rem 0;}

.papers .tb_of_contents ul {
    counter-reset: item;
    list-style-type: "";
    margin-bottom: 8.225rem;
}
.papers .tb_of_contents ul li {
    display: block;
    margin-bottom: 0;
    margin-left: 6rem;
}

.papers .tb_of_contents ul li:before {
    display: inline-block;
    content: "";
    width: 6rem;
    margin-left: -6rem;
}
.papers .tb_of_contents ol {
    counter-reset: item;
    list-style-type: decimal;
    margin-bottom: 8.225rem;
}
.papers .tb_of_contents ol li {
    display: block;
    margin-bottom: 0;
    margin-left: 6rem;
}

.papers .tb_of_contents ol li:before {
    display: inline-block;
    content: counter(item)" ";
    counter-increment: item;
    width: 6rem;
    margin-left: -6rem;
}

.papers .paragraph {margin:0rem auto 6rem auto;
    text-align:center; font-size: 8rem; font-family: "gothic";}

.papers .paper_body {margin:0 0 12rem 0; }
.papers .paper_body blockquote{margin: 0 0rem 8.225 6rem; font-family: "gothic";}
.papers .paper_body strong{border-bottom: 0.3rem solid black; padding-bottom: 0.3rem;}
strong{border-bottom: 0.3rem solid black; padding-bottom: 0.3rem;}

.papers .paper_body p{margin-bottom: 8.225rem;}
.papers .paper_body h4{display:block; text-align: center; padding: 8.225rem 0;}
.papers .paper_body ins{display:inline-block; margin: 0 0 0 6rem;}

.papers .paper_body a{display:inline-block; width:auto; height: auto; border-radius: 0.5rem;
    position: relative; top: -0.7rem; font-size: 80%; padding: 0.1rem 0.6rem 0 0.6rem}

.papers .footnote{font-size: 4.5rem; margin: 0 0rem 12rem 0rem;}
.papers .footnote a.backtobody{display:inline-flex; 
    justify-content: center; align-items: center; width:4.5rem; height: 4.5rem; 
    border-radius: 1rem; border:1px solid black; position: relative; 
}

/* PASSWORD */

form.post-password-form{width: 100%; font-size: 4.5rem; text-align: center;
padding:25rem 12rem 8rem 12rem;}
form.post-password-form p{padding-bottom: 8.1rem}

form.post-password-form input{
    width: 100%;
    height: 8.7rem;
    padding: 1rem;
    box-sizing: border-box;
    margin-bottom: 1.8rem;
    border-radius: 1rem;
    background-color: white;
    border:1px solid black;
    text-align: center;
    font-size: 4.5rem;
}

form.post-password-form input::placeholder{
    color: var(--green);
}
form.post-password-form input[type="submit"]{
    color: #fff;
    font-family: "ray";
    font-size: 4.5rem;
    background-color: var(--blue);
}

}