html {
font-size: 16px
}

/*     --------- font fam ---------     */

h2 , h3 , h4 , #fixd_text p , .profile p ,
.subtitle p , .subtitle span , .staff_prof p {
font-family: "Hina Mincho", serif;
font-weight: 400;
font-style: normal;
}

#flow_text p {
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
}

li , p , span , time , .profile p:nth-child(2) ,
address p , strong ,
.staff_detail li p , .staff_detail li span ,
.staff_detail a {
font-family: "Noto Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings: "wdth" 100;
}

h1 , a , h2 span , .profile span ,
#others_container h2 , #others_container li ,
address h2 , address p:nth-child(5) , #copyright ,
.back_text p , .staff_prof span , .schedule_month p ,
#en #fixd_text p , #en h2 , #en h3 , #en h4 ,
#en .subtitle p , #en .subtitle span ,
#en address p , #en strong {
font-family: "Klee One";
font-weight: 400;
font-style: normal;
}


/*     --------- font size ---------     */

#flow_text p , .back_text p {
font-size: 6.25rem;
}

footer h1 {
font-size: 4.5rem;	
}

address h2 , .schedule_month p {
font-size: 3.5rem;
}

h2 , #fixd_text p {
font-size: 2.5rem;
}

header h1 , h3 , .staff_prof p {
font-size: 2rem;
}

.subtitle span , h4 , .profile p ,
address p:nth-child(3) {
font-size: 1.5rem;
}

h2 span , .button a , .subtitle p ,
#research_intro p , .inpage_link a ,
.schedule_month span ,
.schedule_text p:first-of-type {
font-size: 1.25rem;
}

.profile p:nth-child(2) , .staff_detail li p {
font-size: 1rem;
}

h1 span {
font-size: 0.6rem;
}

@media (max-width: 1024px) {
#flow_text p , .back_text p {
font-size: 5rem;
}

footer h1 {
font-size: 2.5rem;
}

#fixd_text p {
font-size: 2rem;
}

.inpage_link a {
font-size: 1rem;
}
}

@media (max-width: 768px) {
#flow_text p {
font-size: 3.25rem;
}

.schedule_month p {
font-size: 3rem;
}

address h2 , .back_text p {
font-size: 2.5rem;
}

h2 {
font-size: 2rem;
}

footer h1 , h3 , #fixd_text p {
font-size: 1.5rem;
}

header h1 , .subtitle span , h4 , address p:nth-child(3) {
font-size: 1.25rem;
}

h2 span , .button a , .subtitle p ,
#research_intro p , .schedule_month span ,
.schedule_text p:first-of-type {
font-size: 1rem;
}

footer p {
font-size: 0.75rem;
}

h1 span {
font-size: 0.4rem;
}

}


/*     ・・・・・・・a・・・・・・・     */

a {
color: #000000;
}

a:hover {
text-decoration: none;
}

/*       ・・・・・・・title etc・・・・・・・        */

.subtitle {
width: 600px;
height: 120px;
margin: 0 auto;
}

#en .subtitle {
height: 150px;
}

.subtitle span {
display: block;
padding-left: 30px;
}

.title {
display:flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100px;
max-width: 600px;
margin: 0 auto 5%;
}

h2 {
text-align: center;
}

h2 span {
display: block;
}

h3 {
display: flex;
flex-flow: column;
}

h4 span {
display: block;
}

@media (max-width: 768px) {
.title {
height: 130px;
margin-bottom: 10%;
}
}


/*       ・・・・・・・background・・・・・・・        */

body {
display: block;
width: 100vw;
height: auto;
background-image: url(../imgg/parts/back_01.png);
background-attachment: fixed;
overflow-x: hidden;
}

#back_02 {
display: block;
width: 100%;
min-height: 100vh;
background-image: url(../imgg/parts/back_02.png);
background-attachment: fixed;
background-size: cover;
}

#back_03 {
display: block;
width: 100%;
min-height: 100vh;
background-image: url(../imgg/parts/back_03.png) ;
background-attachment: fixed;
background-size: cover;
}

#back_04 {
display: block;
width: 50%;
height: auto;
background-image: url(../imgg/parts/back_04.png) ;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}

#back_05 {
display: block;
width: 50%;
height: auto;
background-image: url(../imgg/parts/back_05.png) ;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}

@media (max-width: 768px) {
#back_04 , #back_05 {
width: 100%;
}
}


/*       ・・・・・・・deco/icon・・・・・・・        */

.deco_00::before {
content: "";
position: absolute;
top: -18px;
display: block;
width: 650px;
height: 38.19px;
background-image: url(../imgg/parts/deco_00.png) ;
background-repeat: no-repeat;
background-size: 650px;
}

.deco_01 {
display: block;
background-image: url(../imgg/parts/deco_01.png) ;
background-repeat: no-repeat;
background-size: 300px;
}

#en .deco_01 {
background-size: 350px;
}

.deco_02 {
display: block;
background-image: url(../imgg/parts/deco_02.png) ;
background-repeat: no-repeat;
background-position: left;
background-size: 100px;
}

.deco_03 {
display: block;
background-image: url(../imgg/parts/deco_03.png) ;
background-repeat: no-repeat;
background-position: right;
background-size: 100px;
}

.deco_04 {
display: block;
background-image: url(../imgg/parts/deco_04.png) ;
background-repeat: no-repeat;
background-position: right;
background-size: 100px;
}

.deco_05::before {
content: "";
display: block;
width: 130px;
height: 130px;
background-image: url(../imgg/parts/deco_05.png) ;
background-repeat:no-repeat;
background-size: 130px;
}

.deco_06::before {
content: "";
display: block;
width: 130px;
height: 130px;
background-image: url(../imgg/parts/deco_06.png) ;
background-repeat:no-repeat;
background-size: 130px;
}

.deco_07 {
display: block;
background-image: url(../imgg/parts/deco_07.png) ;
background-repeat: no-repeat;
background-position: right;
background-size: 100px;
}

.deco_08 {
display: block;
background-image: url(../imgg/parts/deco_08.png) ;
background-repeat: no-repeat;
background-position: right;
background-size: 100px;
}

#icon_01::before {
content: "";
display: block;
width: 40px;
height: 40px;
padding-right: 20px;
background-image: url(../imgg/parts/icon_01.png) ;
background-repeat:no-repeat;
background-size: 40px;
}

#icon_02::before {
content: "";
display: block;
width: 40px;
height: 40px;
padding-right: 20px;
background-image: url(../imgg/parts/icon_02.png) ;
background-repeat:no-repeat;
background-size: 40px;
}

@media (max-width: 768px) {
.deco_00::before {
content: "";
position: absolute;
top: -18px;
display: block;
width: 250px;
height: 30px;
background-image: url(../imgg/parts/deco_000.png) ;
background-repeat: no-repeat;
background-size: 250px;
}

.deco_02 , .deco_03 , .deco_04 ,
.deco_07 , .deco_08 {
background-size: 55px;
background-position: bottom;
}

.deco_05::before , .deco_06::before {
width: 100px;
height: 100px;
background-size: 100px;
}

#icon_01::before , #icon_02::before{
width: 30px;
height: 30px;
padding-right: 10px;
background-size: 30px;
}
}



/*       ・・・・・・・button・・・・・・・        */

.button {
position: relative;
width: 280px;
height: 50px;
margin: 0 auto;
}

.button a {
position: absolute;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
text-align: center;
border-radius: 30px;
color: #ffffff;
background-color: #000000;
transition: 0.5s;
}

.button span {
position: absolute;
right: 30px;
content: "";
display: block;
width: 50px;
height: 7.8px;
background-image: url(../imgg/parts/button_arrow.png) ;
background-size: 50px;
background-repeat: no-repeat;
}

.button a:hover {
background-color: #585858;
}

.button a:hover span {
transform: translateX(15px);
}

@media (max-width: 768px) {
.button {
width: 250px;
}
}


/*     --------- header ---------     */

header {
position: fixed;
top: 0;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 80px;
padding: 0px 5%;
transition: background-color 0.3s ease , box-shadow 0.3s ease;
backdrop-filter: blur(6px);
}

header.scrolled {
background:rgba(255,255,255,0.5);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

header h1 {
display: block;
min-width: 480px;
margin-top: 0;
line-height: 1;
}

nav {
display: flex;
justify-content: flex-end;
}

nav ul {
display: flex;
justify-content: center;
gap: 15px;
margin-right: 20px;
}

nav li {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 30px;
}

nav li a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding-top: 5px;
text-align: center;
transition: 0.5s;
}

nav li a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #000000;
bottom: -1px;
transform: scale(0, 1);
transform-origin: left top;
transition: transform 0.3s;
}

nav li a:hover::after {
transform: scale(1, 1);
}

.nav_lang {
position:relative;
width:65px;
height:28px;
border:1px solid #000000;
background-color:#FFF;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
overflow:hidden;
transition:0.5s;
}

.nav_lang a {
position:absolute;
left:0px;
width:130px;
display:-webkit-flex;
display:flex;
align-items:center;
height:100%;
padding:0 0 3px 15px;
font-size:16px;
z-index:500;
transition:0.5s;
}

#nav_lang_en a::before {
content:"en";
position:absolute;
display:inline-block;
font-size:16px;
left:70px;
}

#nav_lang_jp a::before {
content:"jp";
position:absolute;
display:inline-block;
font-size:16px;
left:70px;
}

.nav_lang a::after {
content:" ";
position:absolute;
top:3px;
left:40px;
display:block;
width:20px;
height:20px;
background-color: #000000;
border-radius: 30px;
background-image: url(../imgg/parts/button_arrow01.png) ;
background-size: 10px;
background-repeat: no-repeat;
background-position: center;
}

.nav_lang:hover {
background-color:#000;
}

.nav_lang a:hover {
left:-36px;
filter:invert(100%);
}

#nav_hamburger {
position:fixed;
top:20px;
right:5%;
display:none;
width:40px;
height:40px;
z-index:200;
cursor:pointer;
}
.scroll-trigger {
height: 1px;
}

@media (max-width: 1024px) {
#nav_hamburger {
display:block;
}

#nav_hamburger span {
position:absolute;
top:19px;
left:50%;
display:block;
width:40px;
height:2px;
background:#000;
transform:translate(-50%, -50%);
transition:0.4s;
}

#nav_hamburger span::before,
#nav_hamburger span::after {
content:" ";
position:absolute;
left:20px;
width:40px;
display:block;
height:2px;
z-index:20;
cursor:pointer;
transition:0.4s;
transform:rotate(0deg) translate(-50%, -50%);
background:#000;
}

#nav_hamburger span::before {
top:calc(50% - 16px);
}

#nav_hamburger span::after {
top:calc(50% + 16px);
}

#nav_hamburger.active span {
width:0px;
}

#nav_hamburger.active span::before {
top:calc(50% + 11px);
left:-35px;
transform: rotate(136deg) translate(-50%, -50%);
}

#nav_hamburger.active span::after {
top:calc(50% - 16px);
left:-35px;
transform: rotate(-136deg) translate(-50%, -50%);
}

nav {
position: fixed;
top: 80px;
right: -100%;
display: flex;
flex-flow: column;
justify-content: start;
width: 100%;
height: 100vh;
min-width: 350px;
background-image: url(../imgg/parts/back_01.png);
background-attachment: fixed;
background-size: cover;
transition: right 0.3s ease;
padding: 10%;
box-sizing: border-box;
z-index: 10;
}

nav.open {
right: 0px;
}

nav ul {
display: flex;
flex-flow: column;
width: 100%;
height: auto;
margin: 30px 0;
}

nav li {
width: 100%;
height: 80px;
padding: 20px 0;
background-color: #ffffff;
border-bottom: 1px solid #444;
}

nav li a {
display: block;
padding-top: 25px;
}
}  

@media (max-width: 768px) {
header h1 {
min-width: 250px;
}
}


/* -----------------------------------------------------------------
section:avtive;


section{
position:relative;
transition:0.8s ease-in-out;
transform:translateY(30px);
opacity:0;
}
section.active{
position:relative;
transform:translateY(0px);
opacity:1;
}
----------------------------------------------------------------- */


/*       ・・・・・・・footer・・・・・・・        */

footer {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
width: 100%;
padding-top: 5%;
background-color: #3D3D3D;
color: #ffffff;
}

#ft_container {
display: flex;
flex-flow: column;
justify-content: center;
align-items: start;
width: 90%;
height: auto;
max-width: 1200px;
}

#banner {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
gap: 20px;
margin-bottom: 5%;
}

#banner img {
transition-duration: 0.3s;
}

#banner img:hover {
opacity: 0.6;
transition-duration: 0.3s;
}

address {
display: flex;
flex-flow: column;
justify-content: center;
align-items: start;
}

address h2 {
display: flex;
justify-content: start;
width: 100%;
border-bottom: 4px dashed #ffffff;
padding-bottom: 10px;
margin-bottom: 20px;
}

address p:nth-child(3) {
margin-bottom: 5%;
}



address p:nth-child(4) ,
address p:nth-child(5) {
display: flex;
align-items: center;
height: 50px;
}

#copyright {
display: flex;
align-items: center;
height: 50px;
}

footer h1 {
display: flex;
justify-content: end;
width: 100%;
height: auto;
min-width: 250px;
}

@media (max-width: 768px) {
footer {
padding-top: 10%;
}
#banner {
flex-wrap: wrap;
margin-bottom: 10%;
}

address p:nth-child(4) ,
address p:nth-child(5) {
height: 40px;
}
}