/*top page style*/
.top video {
  width: 100%;
}
.top .video-container {
  position: relative;
}
.top .video-sidebar-note {
  position: absolute;
  top: 10%;
  left: 20%;
  width: 60%;
  height: 15%;
  color: white;
  /*background-color: rgba(255, 255, 255, 0.2);*/
}
.top .note-back {
  color: red;
  background-color: rgba(255, 255, 255, 0.7);
}
.top .video-sidebar {
  position: absolute;
  top: 30%;
  left: 20%;
  width: 60%;
  height: 40%;
  color: white;
  /*background-color: rgba(255, 255, 255, 0.2);*/
}
.top .container{
  /*max-width: 1024px;*/
}
.top #section00 .video-text{
  font-size: 1.5rem;
}
.top #section00 .top-text{
  font-size: 1.5rem;
}
.top .slide-image{
  width:60%;
  position: relative;
  margin-top:-100px;
  float:right;
}

.top .transition-btn{
/*  font-size:1.2rem;
  border-radius: 0px;
  padding: 0.5rem 1rem 0.5rem 1rem;
  background-color: #321900;
  color: white;*/
  margin-top: 20px;
  max-width: 400px;
}
.top .transition-btn-image:hover{
  opacity: 0.8;
}
.top .transition-btn-image{
  max-width: 100%;
}
.top .title-border {
display: flex;
align-items: center;
}
.top .title-border:after {
border-top: 1px solid;
content: "";
flex-grow: 1;
margin-left: 0.5rem;
}
.top .view-more{
  position: absolute;
}
.top .section {
  padding-top: 50px;
  padding-bottom: 8rem;
}
.top #section01 .name-english,
.top #section05 .name-english{
  padding-left: 2.8rem!important;
 color: #A67C52;
}
.top #section01{
  padding-bottom: 20px;
}
.top #section01,
.top #section05{
  padding-top: 80px;
  white-space: nowrap;
}
.top #section01 .contents-text{
  background-color: white;
  padding-bottom: 10%;
}
.top #section01 .era{
  font-size:1.0rem;
}
.top #section05 .contents-text{
  background-color: white;
}
.top #section01 .title,
.top #section05 .title{
  font-size: 3rem;
}
.top #section01 .subtitle,
.top #section05 .subtitle{
  font-size: 1.7rem;
}
.top #section02{
  margin-top: 15rem;
  background-image: url("../images/top/johrei.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.top #section03{
  margin-top: 15rem;
  background-image: url("../images/top/nature_farming.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.top #section04{
  margin-top: 15rem;
  background-image: url("../images/top/museum_of_art.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.top #section02 .title,
.top #section03 .title,
.top #section04 .title{
  font-size: 5rem;
  font-weight: normal;
  color:white;
  line-height: 1;
}
.top #section02 .subtitle{
  color:white;
}
.top #section03 .subtitle,
.top #section04 .subtitle{
  color:white;
}
.top #section02 .main-text{
  padding: 3rem;
  margin: 3rem 10rem 2rem 10rem;
  background-color: rgba(255, 255, 255, 0.7);
}
.top #section03 .main-text,
.top #section04 .main-text{
  padding: 3rem;
  margin: 3rem 10rem 3rem 10rem;
  background-color: rgba(255, 255, 255, 0.7);
}
.top #section02 .text01,
.top #section03 .text01,
.top #section04 .text01{
  font-size: 1.8rem;
}
.top #section02 .contents01{
  background-color: rgba(255, 255, 255, 0.8);
}
.top #section02 .contents01-text{
  line-height: 1.8;
}
.top #section02 .contents02{
  padding: 3rem;
  margin: 3rem 5rem 3rem 5rem;
  background-color: rgba(255, 255, 255, 0.8);
}
.top #section02 .contents02-title{
  font-size: 3.5rem;
  font-weight: normal;
  color:#5B6E39;
  line-height: 1.3;
}
.top #section02 .contents02-text{
  background-image: url("../images/top/happyvoice.jpg");
  padding: 2rem 2rem 2rem 2rem;
}
.top #section02 .contents02-text01{
  font-size: 1.8rem;
  color:#5B6E39;
}
.top .video-pc{
  display:block;
}
.top .video-sp{
  display:none;
}
/*Engrish*/
.top .text-en-01{
  font-size: 2.2rem;
}
.top .text-en-02{
  font-size: 1.8rem;
}
.top .text-en-03{
  font-size: 2.2rem;
}
@media (max-width: 480px){
  .top .video-pc{
    display:none;
  }
  .top .video-sp{
    display:block;
  }
  .top .slide-image-box {
    padding:0px;
  }
  .top .section{
     padding-top: 0px;
  }
  .top #section01,
  .top #section05{
    padding-top: 0px;
    margin-top: 0rem;
    padding-bottom: 0rem;
    white-space: normal;
  }
  .top #section02,
  .top #section03,
  .top #section04{
    padding-top: 30px;
  }
  .top .subtitle{
    margin-bottom: 2rem;
  }
  .top .slide-image{
    width:100%;
    position: relative;
    margin-top:0px;
    float:none;
  }
  .top #section02 .main-text,
  .top #section03 .main-text,
  .top #section04 .main-text{
    margin:0rem;
  }
  .top #section02 .contents02{
    margin:0rem;
    padding:0rem;
  }
  .research-details .accordion-contents{
    padding-left:1rem;
    padding-right:1rem;
  }
  .top #section02 .text01,
  .top #section03 .text01,
  .top #section04 .text01{
    font-size: 1.5rem;
  }
  .research-details .contents01{
    padding-left:1rem;
    padding-right:1rem;
  }
  .research-details .box{
    padding-left:1rem;
    padding-right:1rem;
  }
  .research-details .accordion-contents{
    padding-left:1rem;
    padding-right:1rem;
  }
  .top .transition-btn-image{
    padding-top: 0rem;
    max-width: 100%;
  }
  .top #section01 .era{
    content: "\A";
    white-space: pre;
  }
  .top #section02{
    background-image: url("../images/sp/johrei.jpg");
    background-size:cover;
    background-attachment: scroll;
  }
  .top #section03{
    background-image: url("../images/sp/nature_farming.jpg");
    background-size:cover;
    background-attachment: scroll;
  }
  .top #section04{
    background-image: url("../images/sp/museum_of_art.jpg");
    background-size:cover;
    background-attachment: scroll;
  }
}

@media (min-width:768px) and ( max-width:1024px) {
  .top .slide-image-box {
    padding:0px;
  }
  .top .section{
    padding-top: 0px;
  }
  .top #section01,
  .top #section05{
    padding-top: 0px;
    margin-top: 0rem;
    padding-bottom: 0rem;
    white-space: normal;
  }
  .top #section02,
  .top #section03,
  .top #section04{
    padding-top: 30px;

  }
  .top .subtitle{
    margin-bottom: 2rem;
  }
  .top .slide-image{
    width:100%;
    position: relative;
    margin-top:0px;
    float:none;
  }
  .top #section02 .main-text,
  .top #section03 .main-text,
  .top #section04 .main-text{
    margin:0rem;
  }
  .top #section02 .contents02{
    margin:0rem;
    padding:0rem;
  }
  .research-details .accordion-contents{
    padding-left:1rem;
    padding-right:1rem;
  }
  .top #section02 .text01,
  .top #section03 .text01,
  .top #section04 .text01{
    font-size: 1.5rem;
  }
  .research-details .contents01{
    padding-left:1rem;
    padding-right:1rem;
  }
  .research-details .box{
    padding-left:1rem;
    padding-right:1rem;
  }
  .research-details .accordion-contents{
    padding-left:1rem;
    padding-right:1rem;
  }
  .top .transition-btn-image{
    padding-top: 0rem;
    max-width: 100%;
  }
  .top #section01 .era{
    content: "\A";
    white-space: pre;
  }
}