@charset "UTF-8";

/**************************************************/
/* 構造 */
/**************************************************/
html,
body {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: #fff;
  color: #333;
  letter-spacing: 0.05em;
  line-height: 2.3em;
  font-size: 1em;
}

a:visited {
  color: #64b9bb;
}
.alpha a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: 'alpha(opacity=70)';
}

.comingsoon {
  font-size: 2em;
  margin: 100px auto;
}
/**************************************************/
/* ヘッダー・NAV */
/**************************************************/
#header {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  background: url(../img/top/top_bg.jpg) no-repeat;
  background-position: left 100% top 0;

  height: 85%;
  position: relative;
}
#header h2 {
  text-align: left;
  margin: 0 auto;
  padding: 20px 0 0 30px;
}

#top h1 {
  position: absolute;
  top: 40%;
  left: 4%;
  text-align: left;
}
#top h1 img {
  max-width: 90%;
  height: auto;
}

.box {
  height: 300px;
  margin: calc(55vh - 100px) 0 0 0;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  color: #fff;
}

/* アニメーション設定 */
.arrowWrap {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 200px;
}

.arrowInner p {
  font-size: 12px;
  text-align: end;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.arrow {
  width: 1px;
  height: 80px;
  margin: 40px auto 0;
  background-color: #14ae67;
  position: relative;
  overflow: hidden;
}

.arrow::before {
  content: '';
  width: 1px;
  height: 100px;
  margin: 50px auto 0;
  background-color: #fff;
  position: absolute;
  top: -150px;
  left: 0;
  -webkit-animation: arrow 2.5s ease 0s infinite normal;
  animation: arrow 2.5s ease 0s infinite normal;
}

@keyframes arrow {
  0% {
    -webkit-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
  }

  60% {
    -webkit-transform: translate3d(0%, 100px, 0);
    transform: translate3d(0%, 100px, 0);
  }

  100% {
    -webkit-transform: translate3d(0%, 100px, 0);
    transform: translate3d(0%, 100px, 0);
  }
}
/**************************************************/
/* container */
/**************************************************/
#housou {
  text-align: center;
  margin: 10vh auto 0;
}
#housou img {
  max-width: 98%;
  height: auto;
}

#container {
  width: 100%;
  margin: 10vh auto;
  text-align: center;
}

#companies {
  background: #f7f7f7;
  padding: 7vh 0 7vh 0;
}

#companies h2 {
  margin-bottom: 50px;
}

/**************************************************/
/* container */

.simply-scroll-container {
  position: relative;
}
.simply-scroll-clip {
  position: relative;
  overflow: hidden;
}
.simply-scroll-list {
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.simply-scroll-list li {
  float: left; /* Horizontal scroll only */
  padding: 0;
  margin: 0;
  width: 481px;
  height: 319px;
}
.simply-scroll-list li img {
  display: block;
}

/**************************************************/
.bana {
  width: 85%;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.bana li {
  padding: 5px;
  width: 33%;
}
.bana li img {
  width: 100%;
}

#project {
  width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

#project div {
  -webkit-flex-grow: 1;
  flex-grow: 0;
}

.pl img {
  width: 50vw;
}

.pbox {
  display: table;
  width: 100vw;
}

.pr {
  background: #14ae67;
  color: #fff;
  font-size: 1.1vw;
  line-height: 2.5em;
  text-align: center;
  width: 50vw;
  margin: 0 auto;
  display: table-cell;
  vertical-align: middle;
}

.pr h2 {
  margin-bottom: 30px;
  text-align: left;
  display: inline-block;
  width: 90%;
}

.pr img {
  width: 80%;
}

.pr p {
  text-align: left;
  display: inline-block;
  width: 90%;
}

#info {
  padding: 7vh 0 7vh 0;
}

#info h2 {
  margin-bottom: 50px;
}

.company {
  width: 80%;
  margin: 0 auto 50px;
  background: #e5e5e5;
  padding: 2vh 2vw;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

.companybigbox {
  width: 80%;
  margin: 0 auto 50px;
  background: #e5e5e5;
  padding: 2vh 2vw;
}

.companybox {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
.cr img {
  width: 16vw;
}
.name {
  background: #14ae67;
  color: #fff;
}
.name span {
  font-size: 1.2em;
  font-weight: bold;
}
.company div,
.companybox div {
  padding: 1vh 1vw;
}

.company h4,
.companybox h4 {
  color: #888;
  border: 1px solid #b5b5b5;
  width: 100%;
  background-color: #8fd2b5;
  padding: 10px 0;
  font-size: 1.2em;
}
.companybox h4 a {
  display: block;
  width: 95%;
  margin: 0 auto;
}

a.arrow2 {
  text-decoration: none;
  color: #000000;
  font-weight: bold;
  display: inline-block;
  padding-right: 50px;
  position: relative;
}
a.arrow2:before,
a.arrow2:after {
  content: '';
  display: block;
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
  position: absolute;
  right: 0;
  bottom: 15px;
}
a.arrow2:before {
  width: 30px;
  height: 1px;
  background: #888;
  position: absolute;
  right: -4px;
}
a.arrow2:after {
  width: 1px;
  height: 10px;
  background: #888;
}

.c1 {
  vertical-align: middle;
  width: 25vw;
}

.c1 h3,
.cl h3 {
  font-weight: bold;
  font-size: 1.4vw;
  text-align: left;
}
.c1 p,
.cl p {
  text-align: left;
  font-size: 1.1vw;
  line-height: 2.5em;
  padding: 1vh 0;
}

.cl dl {
  text-align: left;
  margin: 0 auto 30px;
  padding: 20px;
  background: #fff;
}

.cl dt,
.cl dd {
  border-left: #6ccc9f 3px solid;
  padding-left: 15px;
}

.cl dt {
  font-weight: bold;
}

.c2,
.c3 {
  width: 37vw;
}

.c2 h5,
.c3 h5 {
  position: relative;
  padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
  height: 0;
  overflow: hidden;
}

.c2 h5 iframe,
.c2 h5 img,
.c3 h5 iframe,
.c3 h5 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.cl span {
  text-align: left;
  display: block;
  width: 99px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.syukatsu {
  text-align: left;
  background: #6ccc9f;
  display: inline-block;
  line-height: 1.5em;
  font-weight: bold;
  padding: 10px 15px;
}

/**************************************************/
/* フッター */
/**************************************************/
footer {
  width: 100%;
  text-align: center;
  margin: 0 auto;
  bottom: 0;
  left: 0;
  right: 0;
  background: #14ae67;
  padding: 30px 0;
  color: #fff;

  position: relative;
}

.page-top {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 35px;
  height: 35px;
  background-color: #f0c600;
  line-height: 35px;
}
/*footer {
	width: 100%;
	text-align:center;
	margin: auto;
	bottom: 0; left: 0; right: 0;
	position: fixed;
}*/

/*********************************/
/* コピーライト */
/*********************************/
footer p {
  text-align: center;
  margin: 0 auto;
  height: 20px;
  font: x-small Verdana, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo;
}

/**************************************************/
/* 共通css */
/**************************************************/
.left {
  float: left;
}
.right {
  float: right;
}

a {
  border-style: none;
}

a.h-btn:hover {
  filter: alpha(opacity=7);
  opacity: 0.7;
}