@charset "utf-8";

/*base
-------------------------------------------------------*/
html {
    font-size: 62.5%; 
}

/* レスポンシブ */
@media (max-width: 575px){
    html {
        font-size: 62.5%; }
}

body {
    font-size: 1.7rem; /* currently ems cause chrome bug misinterpreting rems on body element */
    line-height: 1.6;
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--main-color);
}


p{
    font-size: 1.6rem;
    line-height: 1.7;
    margin-top: 0;
    text-align: justify;
    letter-spacing: 0.1rem;
}

img{
    max-width: 100%;
    image-rendering: -webkit-optimize-contrast;
    pointer-events: none;
    -moz-pointer-events: none;
    -webkit-pointer-events: none;
    -ms-pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  touch-callout:none;
}


/*common
--------------------------------------------------------*/
/*Typography*/
h1, h2, h3, h4, h5, h6 {
    font-family: 'Sawarabi Mincho', sans-serif;
    margin-top: 0;
    font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1; color:var(--black); margin-bottom: 0;}
h2 { font-size: 3.5rem; line-height: 1;  letter-spacing: 0.4rem; font-weight: 500; text-align: center; color: var(--main-color); position: relative; margin-bottom: 50px;}
h3 { font-size: 2.5rem; line-height: 1.5;  letter-spacing: 0.45rem; color: var(--main-color); font-weight: 300; margin: 30px 0 15px;}
h4 { font-size: 2rem; line-height: 1.6;  letter-spacing: .1rem; color: var(--main-color); font-weight: 600; border-bottom: solid 2px var(--main-color);}
h5 { font-size: 2rem; line-height: 1.25;  letter-spacing: .1rem; color: var(--purple); font-weight: 600;}
h6 { font-size: 1.8rem; line-height: 1.4;  letter-spacing: 0; font-weight: bold;}

/* Larger than phablet */
@media (min-width: 550px) {
    h1 { font-size: 6.0rem; }
    h2 { font-size: 4.7rem;}
    h3 { font-size: 4rem;}
    h4 { font-size: 3rem;}
    h5 { font-size: 2.4rem; }
    h6 { font-size: 2.0rem; }
}

h2:before {
    position: absolute;
    bottom: -15px;
    left: calc(50% - 30px);
    width: 70px;
    height: 5px;
    content: '';
    border-radius: 3px;
    background:var(--light-orange);
}

/*space*/
section {
    padding: 150px 0;
}
.docs-section {
    padding-bottom: 150px;
}
.mt-70 {
    margin-top: 70px;
}

/*function*/
:root {
    --main-color:#567D8C;
    --bule:#1C5880;
    --light-bule:#A9C6D9;
    --light-gray:#9eb2bb;
    --light-orange: #e7c695;
    --pail-orange: #f7eddf;
    --black: #333;
}


/*common-parts
--------------------------------------------------------*/
/*btn*/
.btn {
    font-size: 1.6rem;
    font-weight: bold;
    background-color: var(--bule);
    color: white;
    padding: 16px 32px;
    letter-spacing: 0.08rem;
}
.btn:hover {
    background-color: var(--main-color);
    color: white;
}
/*.btn-icon {
    position: absolute;
    top: 20%;
    right: 190px;
    width: 13px;
    transform: translateY(-50%);
}*/
/*table*/
table {
    width: 100%;
    background-color: white;
    border: solid 1px #ccc;
}
table tr {
    border-block: solid 1px #ccc;
}
table th,td {
    padding: 15px;
}
table th {
    background-color: var(--main-color);
    color: white;
    width: 15%;
    letter-spacing: 0.1rem;
}
table td,table th{ display:table-cell; }

/*top-page
--------------------------------------------------------*/
/*top*/
#top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    min-height: 100vh;
}

/*header-nav*/
#top header{
    width:22%;
    background-color: var(--main-color);
    padding: 35px 35px 0px;
    }
#top .logo {
    width: 320px;
}
#top nav ul{
        list-style: none;
        text-align: left;
        padding-left: 0;
        font-weight: bold;
        margin-top: 80px;
        letter-spacing: 0.1rem;
        font-size: 2rem;
    }
#top nav ul li a{
        display: block;
        text-decoration: none;
        color: white;
        transition:all .3s;
        padding-bottom: 40px;
    }
#top nav ul li a:hover{
        color: #BFCEDC;	
    }
/*top-r*/
#top-r {
    background-image: url(../images/top-img.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100%;
    width: 78%;
}
/*top-text*/
.top-text {
    font-family:'Sawarabi Mincho', sans-serif;
    text-align: right;
}
.top-text-wrap {
    margin-top: 30%;
    margin-right: 20px;
}
.top-text-en {
    font-size: 16rem;
    line-height: 1.1;
    opacity: 0.3;
    margin-bottom: 30px;
}
.top-text-jp {
    font-size: 6rem;

}

/*top-news*/
#top-news {
    background-image: url(../images/bg-top-news.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
#top-news .news-docs-wrap {
    padding: 30px 0 15px;
}
#top-news .news-docs-wrap a{
    color: var(--main-color);
}
#top-news .news-docs-wrap a:hover{
    color: var(--light-gray);
}
/*top-about*/
#top-about {
    background-image: url(../images/bg-top-about.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top;
}

/*--------------------------------------------------------
child-page
--------------------------------------------------------*/
.child {
    background-image: url(../images/bg-child.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
}
/*header*/
.child header{
    width: inherit;
    background-color: white;
    padding: 5px 15px 15px;
    }
.child .logo {
    width: 320px;
}
/*header-nav*/
.child li a {
    color: var(--black);
    margin-left: 60px;
}
.gnavi{
    display: flex;
    flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
    list-style: none;
    margin-top: 18px;
    font-weight: 600;
}
.gnavi li a{
	position: relative;
}
.gnavi li.current a,
.gnavi li a:hover{
	color:var(--main-color);
}
.gnavi li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 3px;
    background: var(--light-orange);
    transition: all .3s;
    transform: scale(0, 1);
    transform-origin: center top;
}
.gnavi li.current a::after,
.gnavi li a:hover::after {
    transform: scale(1, 1);
}

/*header-nnav-sp*/
#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
	top:0;
    right: -120%;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background: var(--main-color);
    /*動き*/
	transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:40%;
    left:20%;
    transform: translate(-50%,-50%);
    margin-left: 15px;
}

/*リストのレイアウト設定*/
#g-nav li{
	list-style: none;
    text-align: left;
}
#g-nav li a{
	color: #fff;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}

/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
	top:20px;
	right: 20px;
	cursor: pointer;
    width: 50px;
    height:50px;
    background-color: var(--main-color);
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	background-color: #fff;
  	width: 45%;
  }
.openbtn span:nth-of-type(1) {
	top:15px;	
}
.openbtn span:nth-of-type(2) {
	top:23px;
}
.openbtn span:nth-of-type(3) {
	top:31px;
}
.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}
.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}
.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

/*header-btm*/
.header-btm {
    height: 300px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center top;
    margin-bottom: 150px;
}
#header-btm02 {
    background-image: url(../images/header-btm02.jpg);
}
#header-btm03 {
    background-image: url(../images/header-btm03.jpg);
}
#header-btm04 {
    background-image: url(../images/header-btm04.jpg);
}
.header-btm h2 {
    color: white;
    text-align: left;
    margin: 80px 0 10px;
}
.header-btm h2:before {
    width: 0px;
}
.header-btm h3 {
    color: white;
    text-align: left;
    margin-top: 0px;
    opacity: 0.15;
    font-size: 9rem;
}

/*about
--------------------------------------------------------*/
.about-lead {
    font-family: 'Sawarabi Mincho', sans-serif;
    font-size: 2rem;
    line-height: 2;
}
.box {
    border: solid 3px var(--light-gray);
    background-color: var(--pail-orange);
    padding: 25px;
}
.box ul, .box p {
    margin-bottom: 0px;
}
.box ul li {
    margin-bottom: 15px;
}
.box ul li:last-child {
    margin-bottom: 0;
}
/*研究室の様子*/
.img-wrap {
    padding: 8px 5px;
}
.caption {
    margin-top: 10px;
}

/*news
--------------------------------------------------------*/
/*news*/
dl dt{
    color: white;
    margin-bottom: 15px;
    font-size: 1.4rem;
}
dl dt span {
    background-color: var(--light-orange);
    padding: 4px 7px;
}
.news-docs-wrap {
    border-bottom: solid 1px var(--light-bule);
    padding: 45px 0;
}
.news-title {
    font-weight: bold;
    font-size: 2.3rem;
    margin-bottom: 15px;
    line-height: 1.5;
}
#news main  h2:after {
    font-family: 'Font Awesome 5','Font Awesome 5 Free';
    content: '\f501';
    font-weight: 900;
    font-size: 8rem;
    color: var(--light-orange);
}
#news h2:before {
    display: none;
} 
/*footer
--------------------------------------------------------*/
/*top*/
.footer-top .row{
    --bs-gutter-x: 1.5rem;
}
.footer-top .row .col-12 {
    padding: 0;
}
.footer-top .row .col-md-6 {
    padding: 0;
    margin: 0;
}
.footer-top a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 3rem;
    letter-spacing: 0.1rem;
}
.Bnr {
    height: 350px;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    padding-top: 150px;
}
.Bnr:hover {
    background: var(--bule);
}
.Bnr01 {
    background-image: url(../images/Bnr01.jpg);
}
.Bnr02 {
    background-image: url(../images/Bnr02.jpg);
}
.Bnr03 {
    background-image: url(../images/Bnr03.jpg);
}
.Bnr05 {
    background-image: url(../images/Bnr05.jpg);
}

/*bottom*/
.footer-bottom {
    background-color: var(--main-color);
    color: white;
    padding: 100px 35px 0;
}
.footer-btn {
    border: solid 1px white;
    background-color: white;
    padding: 15px 0;
    font-weight: bold;
    margin: 7px;
}
.footer-btn a {
    color: var(--main-color);
    text-decoration: none;
}
.footer-btn:hover {
    opacity: 0.8;
}

.copylight {
    font-size: 1.2rem;
    margin: 80px 0 25px;
}

/* page-top
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#page-top {
    position: fixed;
    bottom: 0px;
    right: 0px;
    font-size: 20px;
    line-height: 2;
    z-index: 99;
    opacity: 0;
	transform: translateY(100px);
  }
  #page-top a {
    background: var(--black);
    text-decoration: none;
    color: #fff;
    width: 70px;
    height: 70px;
    padding: 15px;
    text-align: center;
    display: block;
    transition: all .3s ease;
  }
  #page-top a:hover {
    text-decoration: none;
    opacity: 0.8;
  }
  #page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}
#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}

/*--------------------------------------------------------
Responsive
--------------------------------------------------------*/
/*1460px*/ /*1400px*/ /*1199px*/ /*992px*/ /*768px*/ /*576px*/


/*tab off on
--------------------------------------------------------*/
@media screen and (min-width:992px){
    .tab-on{
        display: none;
    }
}
@media screen and (max-width:991px){
    .tab-off{
        display: none;
    }
}
/*sp off on
--------------------------------------------------------*/
@media screen and (min-width:576px){
    .sp-on{
        display: none;
    }
}
@media screen and (max-width:575px){
    .sp-off{
        display: none;
    }
}

/*1600px以下1400px以上
--------------------------------------------------------*/
  @media screen and (max-width:1600px) and (min-width:1400px){
   /*header-btm*/
   .header-btm {
    margin-bottom: 80px;
}
.header-btm h2 {
    margin: 60px 0 10px;
}
.header-btm h3 {
    font-size: 7rem;
}
}

/*1400px以下1200px以上
--------------------------------------------------------*/
@media screen and (max-width:1399px) and (min-width:1200px){
    #top header {
        padding: 20px 20px 0px;
    }
    .header-btm {
        margin-bottom: 0px;
    }
    .header-btm h2 {
        margin: 40px 0 10px;
    }
.header-btm h3 {
    font-size: 7rem;
    margin-top: -10px;
}
/*top-text*/
.top-text-wrap {
    margin-top: 44%;
}
.top-text-en {
    font-size: 12.4rem;
}
.top-text-jp {
    font-size: 4rem;
}
/*footer*/
.Bnr {
    height: 280px;
    padding-top: 110px;
}
}

/*1200px以下992px以上
--------------------------------------------------------*/
@media screen and (max-width:1199px) and (min-width:992px){
    #top header {
        padding: 17px 17px 0px;
    }
    #top nav ul {
        margin-top: 80px;
        font-size: 1.8rem;
    }
    .header-btm {
        margin-bottom: 0px;
    }
 .header-btm h2 {
     font-size: 4.5rem;
     margin: 40px 0 10px;
 }
 .header-btm h3 {
     font-size: 6rem;
     margin-top: -10px;
 }
 /*top-text*/
.top-text-wrap {
    margin-top: 40%;
}
.top-text-en {
    font-size: 10rem;
}
.top-text-jp {
    font-size: 3.5rem;
}
 /*header-nav*/
.child li a {
    margin-left: 30px;
    font-size: 1.6rem;
}
.about-lead {
    font-size: 1.8rem;
}
/*footer*/
.Bnr {
    height: 280px;
    padding-top: 110px;
}
 }

/*992px以下768px以上
--------------------------------------------------------*/
@media screen and (max-width:991px) and (min-width:768px){
    h2 { font-size: 3.5rem;}
    /*space*/
    .docs-section {
        padding-bottom: 80px;
    }
    #sp-top .logo {
        width: 320px;
    }
   /*header-btm*/
   .header-btm {
     margin-bottom: -100px;
    }
    .header-btm h2 {
        font-size: 3.5rem;
        margin: 20px 0 10px;
    }
    .header-btm h3 {
        font-size: 4rem;
        margin-top: -15px;
    }
    /*top-r*/
#top-r {
    width: 100%;
    min-height: 100vh;
}
     /*top-text*/
.top-text-wrap {
    margin-top: 15%;
}
.top-text {
    text-align: left;
}
.top-text-en {
    font-size: 12rem;
}
.top-text-jp {
    font-size: 4rem;
}
    /*about*/
    .about-lead {
        font-size: 1.6rem;
    }
    /*footer*/
.Bnr {
    height: 150px;
    padding-top: 60px;
}
.Bnr a {
    font-size: 2.5rem;
}
    }

/*768px以下
--------------------------------------------------------*/
 @media screen and (max-width:767px){
    .row {
        padding-inline: 5px;
    }
    .docs-section {
        padding-bottom: 80px;
        margin-inline: 1px;
    }
    /*table*/
table th {
    width: 100%;
}
table td,table th{ display:block; }
/*top-header*/
#sp-top header,.child header {
    padding: 5px 0px 15px;
}
#sp-top .logo,.child .logo {
    width: 280px;
}
/*top-r*/
#top-r {
    background-image: url(../images/sp-top-img.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100%;
    width: 100%;
    min-height: 100vh;
}
/*top-text*/
.top-text {
    text-align: left;
}
.top-text-wrap {
    margin-top: 15%;
    margin-right: 0;
}
.top-text-en {
    font-size: 6.3rem;
    line-height: 1.3;
    margin-bottom: 15px;
}
.top-text-jp {
    font-size: 2.2rem;

}
    /*header-btm*/
.header-btm {
    margin-bottom: 80px;
}
#header-btm02 {
    background-image: url(../images/sp-header-btm02.jpg);
}
#header-btm03 {
    background-image: url(../images/sp-header-btm03.jpg);
}
#header-btm04 {
    background-image: url(../images/sp-header-btm04.jpg);
}
.header-btm h2 {
    font-size: 4rem;
    margin: 90px 0 10px;
}
.header-btm h3 {
    font-size: 4rem;
}
/*top-about*/
#top-about {
    background-image: url(../images/sp-bg-top-about.jpg);
}
/*about*/
.about-lead {
font-size: 1.6rem;
line-height: 1.7;
}
/*研究室の様子*/
.img-wrap {
    padding: 16px 5px;
}
/*news*/
.news-docs-wrap {
    padding: 45px 10px;
}
.news-title {
    font-size: 1.8rem;
}
/*footer*/
.footer-top a {
    font-size: 2rem;
}
.footer-top .row {
    padding-inline: 0;
}
.Bnr {
    height: 180px;
    padding-top: 70px;
}
.footer-btn a{
    font-size: 1.4rem;
}
/* page-top */
#page-top {
    font-size: 15px;
    line-height: 1.5;
  }
  #page-top a {
    width: 50px;
    height: 50px;
  }
}

/*330px以下
--------------------------------------------------------*/
@media screen and (max-width:329px) {
    #sp-top .logo,.child .logo {
        width: 230px;
    }
/*top-text*/
.top-text-wrap {
    margin-top: 5%;
    margin-right: 0;
}
.top-text-en {
    font-size: 4.5rem;
}
.top-text-jp {
    font-size: 1.8rem;
}
.header-btm h2 {
    font-size: 3.5rem;
    margin: 70px 0 10px;
}
.header-btm {
    margin-bottom: 30px;
}
}