@charset "utf-8";
html{
  font-size: 62.5%;
}
body {
  font-family: "Zen Kaku Gothic New","YuGothic","Yu Gothic","Arial","Meiryo";
  font-size:1.4rem;/* 14px*/
  line-height: 2;
  color: #fff;
  margin: 0px;
  -webkit-text-size-adjust: 100%;
  background: #111;
  overflow-x: hidden;

}
a:-webkit-any-link,a{
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/

}
a:hover{
  color: #39a0be;
  transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}
h1 {
  font-size: 36px;/* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(2.4rem + ((1vw - 0.64rem) * 2.1429));/* 24px~36pxで可変*/
  line-height: 1.3;
}
h2 {
  font-size: 24px;/* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
  line-height: 1.3;
}
@media (min-width: 1200px) {/* 1200px以上*/
  h1 {
    font-size: 3.6rem;/* 36px*/
  }
  h2 {
    font-size: 2.4rem;/* 24px*/
  }
}
@media screen and (max-width: 480px) {
  body{
    line-height: 1.5;
  }
  h1{
    font-size: 2.4rem;/* 24px*/
  }
  h2 {
    font-size: 2rem;/* 20px*/
  }
}
header {
  position: fixed;
  width: 100%; /* 幅いっぱいを指定 */
  animation-name: slidein;
  animation-duration: 0.5s;
  z-index: 30;
}
@keyframes slidein {
  from {

    transform: translateY(-40px);
  }
  to {

    transform: translateY(0);
  }
}
figure {
  float: left;
  margin: 0 15px 15px 0;
  width: 40%;
}
div.header-menu {
  width: 100%; /* 幅いっぱいを指定 */
  height: 50px; /* 高さを50pxに指定 */
  background-color: rgba(0,0,0,0.0); /* 背景色にグレーを指定 */
  padding: 0px 50px; /* ヘッダーに上下左右それぞれ余白を指定 */
  box-sizing: border-box; /* padding分を含んで幅を100%にするため */
  top: 0;  /*上下の固定位置を上から0pxにする */
  left: 0; /* 左右の固定位置を左から0pxにする */
  display: flex; /* 中の要素を横並びにする */
  justify-content: flex-end;


  /*     align-items: center;中の要素を上下中央に並べる */
}

@media screen and (max-width: 480px){
  div.header-menu  {display:none}
}
/*ボタン*/
.btn {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #fff;
  border-radius: 0.5rem;
  white-space: nowrap;
}
.btn{
  color: #fff;
  background-color: #39a0be;
}
.btn:hover{
  color: #fff;
  background: #39cccc;
}
.img_button img:hover{
position:relative;
top : 1pt;
left : 1pt;
}

/* div */
.header-img{

  width: 100%;
  position: fixed;
  left: 100%;
  transform: translateX(-100%);
  background-image: url("../img/index_main_img_01-0.jpg");
  background-repeat: no-re peat;
  background-size: cover;
  background-position: left;

}
/* Indexヘッダー画像のリサイズ用 */
.resizeimage_index {
  margin: 0 auto;
  width: 100%;

  height: 500px;
  object-fit: cover;
  object-position:left;
  opacity: 100;
  transition: .3s;/*移り変わる速さを変更したい場合はこの数値を変更*/
}
/* インデックス画像上のロゴやテキスト部分 */
.index_info{
  position: absolute;
  left: 100%;
  top:0%;
  transform: translateX(-100%) translateY(-0%);
  margin:auto;
  padding: 10px;
  width: 430px;
  text-align: left;

  justify-content: center;
  align-items: center;

}
@media screen and (max-height: 356px) {
  .index_info{
    display: flex;
    width:100%;
    padding-top: 400px;
  }
}

.index_logo{

  text-align: center;
}
.header_logo_img{
  height: auto;
  width: 70%;
  max-width:100px;
  margin:0 15%;
}

.index_info p{
  margin:0;
  padding:0;

  text-align: left;
  z-index: 10;
}
@media screen and (max-width: 480px) {

  .header-img{
    height: auto;
    width: 100%;

    transition: .3s ease-in-out;
  }

  .resizeimage_index {
    width: 100%;
    height: 500px;
    object-fit: cover;
    opacity: 100;
    transition: 3s;

  }
  .index_logo p{
    margin:10% 0 0 0;
    padding:0;
    text-align: left;
    z-index: 10;
  }
  .index_info{
    width: 90%;
  }
}
/* トップロゴ設定 */
@media screen and (max-width: 300px) {
  .header_logo_img{
    height: auto;
    width: 80px;

  }
}
/* Index以外ヘッダー画像のリサイズ用 */
.resizeimage {
  margin: 0 auto;
  width: 100%;
  height: auto;


}
.header-sub{
  height: auto;
  width: 100%;
  position: relative;
}

@media screen and (max-width: 480px) {
.header-sub{
height: 100;
width: 100%;
position: relative;
}

.resizeimage{
width: 100%;
height:200px;
object-fit: cover;
}
}
.header-sub p{

  position: absolute;
  top:50%;
  left:50%;
  font-size:30px;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;

}

header .header-menu .menu {
  display: flex; /* 中の要素を横並びにする */
  justify-content: flex-end;/* 右揃え */
  margin: 3px;
}

header .header-menu .menu li {
  list-style: none; /* リストの[・]を消す */
  font-size: 15px;
  font-weight:900;

}

header .header-menu .menu li + li {
  margin-left: 20px; /* メニューそれぞれに間隔をあけるため */
}
header .header-menu{
  background: url(../img/menu_background.png);
  background-repeat: repeat-x;
  background-position: right;
}





/*　ぼかす　*/


.header-img:hover .resizeimage_index{/*hoverした時の変化*/
  opacity: 0;
  transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}


/*　画像のマスク　*/

.mask{
  display: block;
  line-height: 0;/*行の高さを0にする*/
  overflow: hidden;/*拡大してはみ出る要素を隠す*/
}

.middle_line{
  background:url(../img/index_middle_line.png);
  width: 100%;
  height: 131px;
  background-repeat: repeat-x;
  background-position: left;
  position: relative;
  top:457px;
  z-index:10;
  text-align: center;
  vertical-align: middle;

}

.middle_line p{
  position: absolute;
  top:40%;
  left:50%;
  transform: translate(-50%, -50%);


}
.subinfo_img{
  max-width: 400px;
  min-width: 200px;
  width:100%;
  height: auto;
  border-radius: 100px;
  float: left;
  margin: 10px 15px 15px 0;

}
.subinfo_div{

  width:100%;
  margin: 0 auto;
  padding:0px;
  position: relative;
  top:400px;
  height: auto;
  background: url(../img/index_bottom_img.jpg);
  background-position: bottom;


}
.subinfo_div p{

  padding-top: 20px;
}


#subinfo_div_inner1{

  width: 100%;
  height: auto;
  padding-top: 50px;
  padding-bottom: 10px;
text-align: center;
}

#subinfo_div_inner2{

  width: 100%;
  height: auto;
  padding-top: 20px;
  padding-bottom: 10px;
text-align: center;
}

.footer_p{
  text-align: center;
  font-size:1rem;/* 14px*/
  line-height: 2;
  color: #fff;
  position: relative;
  top:350px;
}
/*以下AboutCSS*/
.about_div1,.about_div2{

  padding-top: 100px;
  padding-right: 10%;
  padding-left: 10%;
  padding-bottom: 100px;

}
.about_div1{

    background: #666 url(../img/about-img02.jpg);
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
}
.about_div2{
    background: #666 url(../img/about-img01.jpg);
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
}


.about_div1 p, .about_div1 h2 {
    text-align: right;
  animation: slideIn2 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes slideIn2 {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}
.about_div2 p, .about_div2 h2 {
    text-align: left;
  animation: slideIn3 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes slideIn3 {
  0% {
    transform: translateX(-180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}
#about .footer_p{
  top: auto;
}
#download .footer_p{
  top: auto;
}