@charset "utf-8";
/* CSS Document */

/*---------------------
  common
---------------------*/  
main{
  /*max-width: 1920px;*/
  min-width: 1280px;
  margin: 0 auto;
}
.main-view{
  position: relative;
  width:100%;
  height:100vh;
  margin-top: 60px;
  margin-bottom: 145px;
  overflow: hidden;
}
.main-view video {
	/* position: absolute;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	background-size: cover;*/
	height: 100vh;
	width: 100%;
	object-fit: cover;
}
.main-view .play_bt{
  position: absolute;
right:15%; bottom:60px;
  transform: translateX(-50%);
  color: #FFF;
  border:1px solid #FFF;
}
.main-view .play_bt a{
  display: block;
  color: #FFF;
  padding:10px 15px;
}
.main-view .play_bt a:hover {
	background:rgba(255,255,255,0.3);
	transition:0.3s;
}

.main-view .play_bt i{
  margin-right: 5px;
}
.main-view .volume_bt{
  position: absolute;
  top:100px; left:60px;
  font-size: 12px;
  background-color:#FFE100;
  border-radius: 10px;
  padding:10px 15px;
}
.main-view .volume_bt i{
  margin-right: 5px;
}
.main-view .volume_bt span{
  cursor: pointer;
}
/* Scroll Down */
.main-view .scroll_d a {
  position: absolute;
  bottom: 80px;
  left: 45%;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-decoration: none;
  color: #fff;
  font-size: 1.2rem;
  letter-spacing: 2.5px;
}

.main-view .scroll_d a span {
  position: absolute;
  bottom: -20px;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 1.5s infinite;
  animation: sdb 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

.main-view-sp{
  position: relative;
  width:100vw;
  height:100vh;
  overflow: hidden;
}
.main-view-sp video {
	/* position: absolute;
	 right: 0;
	 bottom: 0;
	 min-width: 100%;
	 min-height: 100%;
	 width: auto;
	 height: auto;
	 z-index: -100;
	 background-size: cover;*/
	width: 100%;
	height: 100vh;
	object-fit: cover;
}
.main-view-sp .play_bt{
  position: absolute;
  left: 50%; 
  bottom:30px;
  transform: translateX(-50%);
  color: #FFF;
  border:1px solid #FFF;
}
.main-view-sp .play_bt a{
  display: block;
  color: #FFF;
  padding:10px 15px;
  width: 150px;
}
.main-view-sp .play_bt i{
  margin-right: 5px;
}
.main-view-sp .volume_bt{
  position: absolute;
  top:60px; left:40px;
  font-size: 12px;
  background-color:#FFE100;
  padding:10px 15px;
}
.main-view-sp .volume_bt i{
  margin-right: 5px;
}

/* Scroll Down */
.main-view-sp .scroll_d a {
  position: absolute;
  bottom: 165px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-block;
  text-decoration: none;
  color: #fff;
  font-size: 1.2rem;
  letter-spacing: 2.5px;
}

.main-view-sp .scroll_d a span {
  position: absolute;
  bottom: -20px;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 1.5s infinite;
  animation: sdb 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

.section{
  width: 100%;
  margin-bottom: 160px;
}
.sec-inner, .sec_decoration{
  position: relative;
  width: 90%;
  min-width: 1024px;
  margin: 0 auto;
}

.sec03 .sec-inner {
	margin: 0 0 0 10%;
}
h2{
  position: absolute;
  top:40%;
  right:8%;
  width: 35px;
  z-index: 100;
}
.sec03 .sec-inner h2 {
	right:10%;
}

h3{
  padding: 50px 30px;
  font-size: 2.7rem;
  text-align: center;
}
@media(max-width: 768px) {
  h3{
    padding: 50px 20px;
    font-size: 2.4rem;
  }
}
.sec_decoration::after{
  position: absolute;
  content:"";
  width: 93px;
  height: 136px;
  background: none;
}
.sec-txt{
  margin-bottom: 60px;
  padding-left: 50px;
  font-size: 1.5rem;
  line-height: 2.4;
}
/*--number--*/
.number-img{
  display: flex;
  justify-content:flex-end;
  padding: 30px 0;
  align-items: center;
  /* margin-right:10%; */
}
.line{
  width: 180px;
  padding: 10px;
}
/* .number{
  width: 45px;
} */

/*--btn--*/
.btn-more a{
  position: relative;
  display: block;
  width: 300px;
  margin: 0 auto;
  border: 2px solid #99505a;
  padding: 25px 60px;
  text-align: center;
  font-size: 1.6rem;
  color: #99505a;
  background-color: #fff;
  transition: .5s;
  }
.btn-more a::after{
  content: "";
  position: absolute;
  top: 50%;
  right:30px;
  width: 10px;
  height: 10px;
  border-top: 2px solid #99505a;
  border-right: 2px solid #99505a;
  transform: rotate(45deg);
  margin-top: -5px;
  transition: .5s;
}
.red a,.btn-more a:hover{
  color: #fff;
  background-color: #99505a;
}
.red a::after,.btn-more a:hover::after{
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
.red a:hover{
  color: #99505a;
  background-color: #fff;
}
.red a:hover::after{
  border-top: 2px solid #99505a;
  border-right: 2px solid #99505a;
}

/*---------------------
  sec01
---------------------*/  
.sec01 .sec-bg{
  position: relative;
  width: 90%;
  display: flex;
  align-items: center;
}
.sec01 .number-img{
  position: absolute;
  top:0;
  right:0;
}

.sec01 .sec-img{
  overflow: hidden;
  width: 60%;
}
.sec01 .sec-content{
  width: 40%;
}


/*---------------------
  sec02
---------------------*/ 
.sec02 .sec-bg{
  position: relative;
  width: 90%;
  margin: 0 0 0 auto;
}
.sec02 .sec-content{
  position: absolute;
  top:50%;
  transform: translate(0,-50%);
  text-align: center;
  padding-bottom: 50px;
}
.sec02 h2{
  position: absolute;
  z-index: 1000;
  top:450px;
  right:0;
  width: 35px;
}
.sec02 h3{
  padding-top: 120px;
  padding-bottom: 60px;
}
.sec02 .sec-txt{
  padding: 0;
}
.sec02-icon ul{
  display: flex;
  width: 45%;
  margin: 0 auto;
  margin-bottom: 50px;
}
.sec02-icon ul li{
  width: 25%;
  padding: 0 15px;
}
.sec02 .sec_decoration::after{
  position: absolute;
  left:auto;
  right: 0;
  background: none;
}
/*---------------------
  sec03
---------------------*/ 
.sec03 .sec-bg{
  margin: 0 0 0 auto;
  display: flex;
}
.sec03 .sec-img{
  position: relative;
  z-index: -1;
  right:-60px;
  width: 70%;
  height: auto;
}
.sec03 .sec-content{
  padding-bottom: 40px;
  margin: 0 auto 0 0;
}
.sec03 h3 span{
  display: block;
  position: absolute;
  transform: translate(-15px, 8px);
}
.sec03 h3{
  margin-bottom: 60px;
  padding-left: 0;
}
.sec03 .sec-txt{
  padding-left: 0;
}
.sec03 .btn-more a{
  margin: 0;
}
.sec03 .sec_decoration{
  text-align: center;
}
.sec03 .sec_decoration::after{
  background: none;
}

/*---------------------
  sec04
---------------------*/ 
.sec04::before{
  position: relative;
  display: block;
  content:"";
  height: 89px;
}
.sec04 .number-img{
  position: absolute;
  top:-90px;
}
.sec04{
  margin-bottom: 136px;
}
.sec04 .sec-bg{
  position: relative;
  /*background-image: url("../images/top/sec04_01.jpg");
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;*/
}
.sec04_bg{
  position: absolute;
  top:0; left:0;
  width:100%;
  height: 100%;
}
.sec04 .sec-content{
  text-align: center;
  padding-bottom: 50px;
    background-image: url("../images/top/sec04_01.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
}
.sec04 h3{
	width:90%;
	margin:0 auto;
  padding: 80px 0 40px;
  line-height:1.8;
  text-align:left;
}
.sec04 .btn-more{
  margin-bottom: 50px;
}
.news{
  position: relative;
  display: table;
  margin: 0 auto;
  background-color: #fff;
}
.news h4{
  padding: 0 60px;
  background-color: #333;
  color:#fff;
  display: table-cell;
  vertical-align: middle;
}
.news ol{
  margin-top: 15px;
  padding: 30px 0;
  text-align: left;
  font-size:1.2rem;
}
.news li{
  display: flex;
  margin-bottom: 15px;
}
.news .newstag{
  margin: 0 5px;
  padding: 0 8px;
  border-left: 1px solid #333; 
  border-right: 1px solid #333; 
}
.news p{
  display: inline-block;
  max-width: 500px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-more{
  padding: 10px;
  font-size: 1.2rem;
  color: #fff;
  background-color: #333;
}
.sec04 .sec-inner{
  padding-bottom: 60px;
}
.sec04 .sec-inner::after{
  display: none;  
}

/*---------------------
sec01_sugaya
---------------------*/ 
#sec01{
  width: 100%;
  display: flex;
}
.flex_container{
  position: relative;
  width: 50%;
}
.flex_container h2{
  position: absolute;
  top: 30%;
  right: 0;
}
.flex_container:last-of-type{
  margin-right: 130px;
}
.textarea{
  width: 404px;
  margin-left:120px;
}
.textarea h3{
  text-align:left;
  padding: 90px 0 60px;
}
.textarea .sec-txt{
  display: inline-block; 
  padding-left: 0;
  text-align: left;
  font-size: 1.5rem;
  margin:0 0 70px 0;
  line-height: 2.5;
}
#sec01 .btn-more{
width: 404px;
margin-left: 120px;
}
.number{
  position: absolute;
  top: 0;
  right: 0;
  font-size: 4.4rem;
  font-family: 'Roboto', sans-serif;
  font-style: italic;
  font-weight: bold;
  display: flex;
  align-items: center;
  color: #333;
  margin-left: 200px;
}
.number::before{
  content: "";
  height: 2px;
  width: 190px;
  display: block;
  margin-right: 15px;
  background: #333;
}

/*---------------------
sec02
---------------------*/ 
#sec02{
  width: 100%;
  position: relative;
}
.number_r{
  font-size: 4.4rem;
  font-family: 'Roboto', sans-serif;
  font-style: italic;
  font-weight: bold;
  display: flex;
  align-items: center;
  color: #333;
  width: 90%;
  margin: 0 0 0 auto;
  line-height: 2;
}
.number_r::after{
  content: "";
  height: 2px;
  width: 190px;
  display: block;
  margin-left: 15px;
  background: #333;
}
.about_bg{
  background-image: url(../images/top/sec02_01.jpg);
  background-size: cover;
  width: 90%;
  margin: 0 0 0 auto;
  height: 750px;
}
.about_bg h2{
  position: absolute;
  top: 40%;
  right: 120px;
}
#sec02 h3{
  text-align: center;
  padding: 170px 0 55px;
  font-size: 2.7rem;
}
#sec02 .sec-txt {
  text-align: center;
  margin-bottom: 60px;
  font-size: 1.5rem;
  line-height: 2.4;
}

/*---------------------
sec03
---------------------*/ 
#sec03{
  width: 100%;
  position: relative;
  padding-top: 60px;
}

.sec03_flex{
  display: flex;
  flex-direction: row-reverse;
}

#sec03 .flex_container:first-of-type{
  width: 60%;
}

#sec03 .flex_container:last-of-type{
  width: 40%;
  margin-right: 0px;
}

#sec03 .sec-content{
  text-align: left;
  margin-left: 150px;
}

#sec03 .number{
  right: 120px;
}

#sec03 h2 {
  position: absolute;
  top: 40%;
  right: 120px;
  z-index: 100;
}

#sec03 h3{
  padding: 50px 30px;
  font-size: 2.7rem;
  padding: 50px 0 75px;
  text-align: left;
  line-height: 2;
}

#sec03 .sec-txt{
  margin-bottom: 130px;
  padding-left: 0px;
  font-size: 1.5rem;
  line-height: 2.4;
}

#sec03 .btn-more a{
  margin: 0;
}
/*---------------------
sec04
---------------------*/ 
#sec04{
  width: 100%;
  position: relative;
}

.contact_bg{
  background-image: url(../images/top/sec04_01.jpg);
  background-size: cover;
  width: 100%;
  margin: 0 0 0 auto;
  height: 515px;
}

.contact_bg h2 {
  position: absolute;
  top: 35%;
  right: 120px;
}

#sec04 h3{
  padding: 80px 0 40px;
  font-size: 2.7rem;
  text-align: center;
}

#sec04 .sec-txt {
  margin-bottom: 30px;
  text-align: center;
}

#sec04 .btn-more{
  margin-bottom: 70px;
}

#sec04 .news h4{
  width: 164px;
}

#sec04 .news ol{
  width: 567px;
  margin-top: 0px;
}


@media screen and (min-width:961px), print{
	
	
.sec04 .sec-content{
	margin-bottom:80px;
}

.news ol{
  margin-top: 0;
  padding-left:45px;
}

.news li:last-child {
	margin-bottom:0;
}

.news-more {
	position:absolute;
	top:0;
	right:0;
	padding:10px 15px;
}

}


@media(max-width: 768px){
/*---------------------
  SP
---------------------*/ 
  .main-view{
    height:60vh;
    margin-top: 60px;
    margin-bottom: 80px;
  }
  .number-img{
    align-items: baseline;
  }
  .line{
    width: 40%;
  }
  /* .number{
    width: 32px;
    margin: 0 20px;
  } */
  .section{
    margin-bottom: 80px;
  } 
  .sec-inner, .sec_decoration{
    position: static;
    width: 100%;
    min-width: auto;
  }
  h3{
    font-size: 2rem;
    font-weight: bold;
  }
  .sec_decoration::after{
    display: none;
  }
  .btn-more a {
    display: inline-block;
    width: auto;
    margin: 0 20px;
    padding: 15px 50px 15px 30px;
  }
  .pc{
    display: none;
  }
  .sp{
    display: block;
  }
  /*---------------------
    sec01
  ---------------------*/  
  .sec01 .sec-bg{
    position: static;
    display: block;
    width: 100%;
  }
  .sec01 .number-img{
    position: static;
  }
  .sec01 .sec-img{
    overflow: hidden;
    width: 100%;
  }
  .sec01 .sec-content{
    width: auto;
    margin: 0 auto;
  }
  .sec-txt{
    display: inline-block; 
    padding-left: 0;
    text-align: left;
    font-size: 1.4rem;
	width:90%;
	margin:0 auto 100px;
  }
  .sec01 h3 {
  width:90%;
  text-align:left;
  padding:50px 0;
  margin:0 auto;
}
/*---------------------
  sec02
---------------------*/ 

  .sec02 .sec-bg{
    width: 100%;
    background-image: url("../images/top/sec02_01.jpg");
    background-size: auto 100%;
    background-position: top center;
	padding-top:160px;
  }
  .sec02 .sec-img{
    display: none;
  }
  .sec02 .sec-content{
    position: static;
    transform: translate(0,0);
  }
  .sec02 h3{
    font-size: 2rem;
	padding:0;
	text-align:left;
	line-height:2;
	width:90%;
	margin:0 auto 30px;
  }
  .sec02 .sec-txt{
  }
  .sec02-icon ul{
    width: 80%;
    max-width: 360px
  }
  .sec02-icon ul li{
    width: 25%;
    padding: 0 5px;
  }

.sp_service_t{
  text-align: left;
  margin: 0 auto 0 20px;
}


  /*---------------------
    sec03
  ---------------------*/ 
  
  .sec03 .sec-inner {
	margin: 0 auto;
}
  .sec03 .sec-bg{
    position: static;
    display: block;
  }
  .sec03 .sec-img{
    position: static;
    width: 100%;
  }

  .sec03 h3 span{
    display: inline-block;
    position: static;
    transform: translate(0, 0);
    font-weight: bold;
  }
  .sec03 h3{
    padding: 60px 0;
    margin-bottom: 0;
  }
  .sec03 .btn-more a{
    margin: 0 auto;
  }
  .sec03 .sec-img {
	  padding-right:0 !important;
  }

  /*---------------------
    sec04
  ---------------------*/ 
  .sec04::before{
    display: none;
  }
  .sec04 .number-img{
    top:-90px;
    left: 0;
  }
  .sec04 .sec-bg{
    position: relative;
  }
  .news{
    position: relative;
    display: block;
    width: 90%;
	padding-top:60px;
  }
  .news h4{
    display:block;
    padding: 20px 30px;
    text-align: left;
    font-size: 1.2rem;
	width:30%;
	text-align:center;
  }
  .news ol{
  }
  .news li{
    display: block;
  }
  .news strong{
    border-left: 0px; 
    border-right: 0px; 
  }
  .news p{
    display: inline;
    margin: 10px 0;
    white-space:normal;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .news-more{
	  display:block;
	  width:80px;
	  margin-top:20px;
    padding: 10px;
    font-size: 1.2rem;
    color: #fff;
    background-color: #333;
  }
  .btn-side_contact{
    display: none;
  }

/*---------------------
sp_sugaya追加
---------------------*/
  h2 {
      width: 20px;
  }
  
  #sec01{
      display: block;
  }
  
  #sec01 .flex_container{
      margin-top: 50px;
      width: 90%;
  }
  
  #sec01 .flex_container:last-of-type{
      width: 100%;
      margin-top: 10px;
      margin-right: 0px;
  }
  
  #sec01 .textarea {
      width: 74%;
      margin: 0 30px 0 20px;
  }
  
  #sec01 .textarea h3 {
      text-align: left;
  }
  

  .number {
      top: 5%;
      right: 10%;
      font-size: 2.7rem;
  }
  .number::before {
      width: 110px;
  }
  #sec01 .sec-txt {
      width: 100%;
  }
  
  #sec01 .textarea .sec-txt{
      font-size: 1.4rem;
  }
  
  #sec01 .flex_container h2{
      position: absolute;
      top: 38%;
      right: 10%;
  }
  
  #sec01 .btn-more {
    width: 100%;
    margin: 0 auto;
}
  
  /*---------------------
  sec02
  ---------------------*/
  .number_r {
      font-size: 2.7rem;
      margin-left: 20px;
  }
  .number_r::after{
      width: 110px;
  }
  
  #sec02 h3 {
      text-align: left;
      padding: 15px 0 40px;
      font-size: 2rem;
      line-height: 1.8;
  }
  
  .about_bg {
      background-image: url(../images/top/sec02_01_sp.jpg);
      width: 100%;
      height: 440px;
  }
  
  #sec02 .sec-txt {
      text-align: left;
      margin-bottom: 60px;
      font-size: 1.4rem;
      line-height: 3;
      margin-top: 130px;
  }
  #sec02 h2 {
      position: absolute;
      top: 20%;
      right: 10%;
      z-index: 100;
  }
  
  /*---------------------
  sec03
  ---------------------*/
  .sec03_flex {
      display: block;
  }
  #sec03 .flex_container:first-of-type {
      width: 90%;
  }
  #sec03 .flex_container:last-of-type {
      width: 100%;
      margin-right: 0px;
  }
  #sec03 .sec-content {
      text-align: center;
      margin-left: 0;
      margin: 0 auto;
  }
  #sec03 h3 {
      padding: 50px 30px;
      font-size: 2rem;
      padding: 50px 0 40px;
      text-align: center;
  }
  
  #sec03 .sec-txt {
      margin-bottom: 60px;
      font-size: 1.4rem;
  }
  
  #sec03 .number {
      right: 10%;
  }
  
  #sec03 h2 {
      position: absolute;
      top: 20%;
      right: 11%;
      z-index: 100;
  }
  
  /*---------------------
  sec04
  ---------------------*/
  .contact_bg {
      background-image: url(../images/top/sec04_01_sp.jpg);
      background-size: cover;
      height: 400px;
      opacity: 0.2;
      margin-top: 20px;
  }
  #sec04 h3 {
      padding: 90px 0 40px;
      font-size: 1.8rem;
  }
  #sec04 .sec-txt {
      margin-bottom: 60px;
  }
  #sec04 .btn-more a {
      width: 250px;
  }
  #sec04 h2 {
      position: absolute;
      top: 2%;
      right: 10%;
      z-index: 100;
  }
  #sec04 .news h4 {
      width: 80px;
  }
  .news h4 {
      padding: 20px;
  }
  #sec04 .news ol {
      width: 100%;
      margin-top: 20px;
      border-bottom: 1px solid #000;
      border-top: 1px solid #000;
  }
  #sec04 .news li:last-of-type {
      margin-bottom: 0px;
  }
}