@charset "UTF-8";

html {
  font-size: 100%;
}
body {
  background-color: #f0f0f0;
  color: #000;
  font-size: 0.875rem;
}
a {
  color: #000;
  font-size: 0.875rem;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
li {
  list-style: none;
}
.logo {
  width: 100px;
  line-height: 1px;
  margin-left: 60px;
  margin-right: 60px;
}
.logo a {
  display: block;
}
.section-title {
  color: #606060;
  font-weight: normal;
  line-height: 1;
  margin-bottom: 30px;
}
/* 疑似要素を使って下線を引く */
.section-title::after {
  content: "";
  width: 150px;
  height: 1.5px;
  background-color: #ffa200;
  display: block;
}
/* 「display: inline-block;」を設定してブロック化することで、
改行されてmargin-bottomが使用できるようになる */
.section-title .en {
  display: block;
  font-size: 2.25rem;
  letter-spacing: 0.3em;
  margin-bottom: 10px;
}
.section-title .ja {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 36px;
}
/* 横幅を設定するための共通クラス */
.wrapper {
  width: 100%;
  max-width: 1032px;
  padding: 0 16px;
  margin: 0 auto;
}
.select:hover {
  opacity: 0.7;
}

/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header {
  height: 80px;
  display: flex;
  align-items: center;
  background-color: rgb(29, 32, 136);
}
#navi {
  display: flex;
  align-items: center;
}
#navi ul {
  display: flex;
  align-items: center;
}
#navi li {
  margin-right: 40px;
}
#navi li:last-child {
  margin-right: 0;
}
#navi a{
  color: #fff;
  font-weight: bold;
}
/* ハンバーガ―メニュー */
.hamburger {
  width: 80px;
  height: 80px;
  background-color: rgb(29, 32, 136);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 30;
  cursor: pointer;
  transition: 0.3s;
}
.hamburger:hover {
  opacity: 0.7;
}
/* ハンバーガーメニューの線の設定（メニューが閉じている時） */
.hamburger span {
  width: 30px;
  height: 2px ;
  background: #fff;
  position: absolute;
  left: 25px;
  transition: 0.3s ease-in-out;
}
/* 1本目の線の位置を設定 */
.hamburger span:nth-child(1) {
  top: 26px;
}
/* 2本目の線の位置を設定 */
.hamburger span:nth-child(2) {
  top: 40px;
}
/* 3本目の線の位置を設定 */
.hamburger span:nth-child(3) {
  top: 54px;
}
/* ハンバーガーメニューの線の設定（メニューが開いている時）
1本目の線を-45度回転 */
.hamburger.active span:nth-child(1) {
  top: 37px;
  left: 25px;
  background :#fff;
  transform: rotate(-45deg);
}
/* 2本目と3本目は重ねて45度回転 */
.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 37px;
  background: #fff;
  transform: rotate(45deg);
}
/* メニューの設定
最初は閉じている状態なので、「opacity: 0;」「visibility: hidden;」
で要素を非表示にしておく */
#h-navi {
  width: 100%;
  height: 100vh;
  background-color: rgb(29, 32, 136);
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  opacity: 0;
  text-align: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  visibility: hidden;
}
/* ハンバーガーメニューがクリックされた際に、jQueryで#naviにactiveクラスを追加して、
メニューを表示させる。 */
#h-navi.active {
  opacity: 1;
  visibility: visible;
}
#h-navi .logo {
  width: 100px;
  position: absolute;
  top: 40px;
  left: 50px;
}
#h-navi .menu {
  margin: 80px 0 40px 0;
}
#h-navi .menu li {
  margin-bottom: 20px;
}
#h-navi .menu a {
  color: #fff;
  font-weight: bold;
}

/*-------------------------------------------
Mainvisual
-------------------------------------------*/
#mainvisual {
  height: 550px;
  position: relative;
  margin-bottom: 50px;
}
/* テキストとボタンが画像の上に表示されるように「z-index」を設定 */
#mainvisual .text {
  position: absolute;
  top: 190px;
  left: 10%;
  z-index: 10;
  color: #ffa200;
}
/* 「text-shadow」で文字の輪郭に白い影をつけることで、
文字が背景画像に埋もれないようにする */
#mainvisual .text .title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 30px;
  text-shadow: 0 4px 3px #000;
}
#mainvisual .text .btn {
  background-color: #ff2a2a;
/* 文字の下に影をつけてボタンに立体感を出す */
  box-shadow: 0 6px 0 #9a0413;
  border-radius: 10px;
  color: #f0f0f0;
  font-size: 1rem;
  display: inline-block;
  padding: 15px 35px;
  text-align: center;
  position: relative;
}
#mainvisual .text .btn:hover {
  transform: translateY(6px);
  box-shadow: none;
}
/* メインビジュアル
animationを使用して、画像をフェードイン、フェードアウトで切り替えを行う */
#mainvisual .fade li {
  width: 75%;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  animation: fade 15s infinite
}
#mainvisual .fade li:nth-child(1) {
  animation-delay: 0s;
}
#mainvisual .fade li:nth-child(2) {
  animation-delay: 5s;
}
#mainvisual .fade li:nth-child(3) {
  animation-delay: 10s;
}
#mainvisual .fade li img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}
/* 「box-shadow」で画像のまわりをぼかす */
#mainvisual .fade li::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: inset 0px 0px 20px 20px #f0f0f0;
}
/* アニメーション処理
上の「animation」で15sを指定しているので下記の処理を15秒かけて実行
0%が0秒を表し、100%が15秒後を表す。

0%の「opacity: 0;」で非表示の状態からスタートし、
15%になるまでの間に少しづつ画像を表示（フェードイン）させる。
そこから30%の時点までは画像を表示させたままの状態を維持し、
45%の時点に向けて画像を非表示（フェードアウト）する。
そこから100%まで非表示の状態を維持する。 */
@keyframes fade {
0% {
  opacity: 0;
}
15% {
  opacity: 1;
}
30% {
  opacity: 1;
}
45% {
  opacity: 0;
}
100% {
  opacity: 0;
}
}

/*-------------------------------------------
feature
-------------------------------------------*/
#feature {
  margin-bottom: 60px;
}
#feature .sec-title {
  text-align: center;
  margin-bottom: 20px;
}
#feature .list {
  display: flex;
  justify-content: space-between;
}
#feature .list li {
  width: 30%;
}
/* 円を作成
レスポンシブに対応した可変サイズの円を作成する場合は、
widthに100%を設定して、paddingで上下を50%に設定
今回は円の中にテキストが入っているのと、枠線をつけているため、
50%から上下それぞれテキストの高さ（10px）とボーダー（1px）をマイナスしている */
#feature .list li a {
  width: 100%;
  border: solid 1px #606060;
  border-radius: 50%;
  color: #f0f0f0;
  display: block;
  margin-bottom: 15px;
  position: relative;
  /* ホバー時用の要素を隠すために設定 */
  overflow: hidden;
}
#feature .list .title {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 5px;
  text-align: center;
}

/*-------------------------------------------
Plant
-------------------------------------------*/
#plant {
  margin-top: 60px;
  margin-bottom: 60px;
}
#plant .title {
  right: 0;
}
#plant .flex {
  display: flex;
  justify-content: space-between;
  padding: 0 5%;
}
#plant .flex .left {
  width: 46%;
}
#plant .flex .right {
  width: 46%;
  margin-top: 160px;
}
#plant .flex .item {
  margin-bottom: 50px;
  box-shadow: 0 0 8px 4px #959595;
}
#plant .flex .item:last-child {
  margin-bottom: 0;
}

/*-------------------------------------------
Flow
-------------------------------------------*/
#flow {
  margin-bottom: 40px;
  padding-top: 40px;
}
#flow .step {
  display: flex;
  margin-top: 60px;
}
#flow .figure {
  margin-top: 50px;
  position: relative;
}
/* 図形下の黄色い棒線を作成 */
#flow .figure::before {
  margin-top: 40px;
  content: "";
  width: 50px;
  height: 400px;
  background-color: #ffa200;
  position: absolute;
  top: 0;
  left: 150px;
}
/* 図形の四角部分を作成 */
#flow .figure li {
  width: 200px;
  height: 45px;
  line-height: 45px;
  background-color: #606060;
  color: #fff;
  font-size: 0.875rem;
  margin-bottom: 60px;
  position: relative;
  text-align:center;
  box-shadow: 5px -5px 5px #808080;
  left: 75px;
}
/* 図形の三角部分を疑似要素で作成
「position」を使用して、四角の下に配置 */
#flow .figure li::before {
  content: "";
  border-top: 20px solid #606060;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  position: absolute;
  top: 45px;
  right: 0;
  left: 0px;
  margin: 0 auto;
}
#flow .description {
  padding: 5%;
  width: 60%;
  background-color: #fff;
  margin-left: 15%;
}
#flow .description dt {
  border-bottom: solid 1.5px #ffa200;
  font-size: 1rem;
  font-weight: bold;
  padding-bottom: 8px;
  margin-bottom: 10px;
  position: relative;
}
#flow .description dd {
  margin-bottom: 20px;
}
#flow .description dd:last-child {
  margin-bottom: 0;
}

/*-------------------------------------------
Reangle
-------------------------------------------*/
#reangle {
  display: flex;
  margin-bottom: 50px;
}
#reangle .remain {
  width: 70%;
}
#reangle .remain img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}
#reangle .text {
  width: 30%;
  padding: 10px 5% 0 5%;
}
#reangle .title {
  display: block;
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 40px;
}
#reangle .text .btn {
  background-color: #ff2a2a;
/* 文字の下に影をつけてボタンに立体感を出す */
  box-shadow: 0 6px 0 #9a0413;
  border-radius: 10px;
  color: #fff;
  font-size: 0.8rem;
  display: block;
  padding: 15px 35px;
  text-align: center;
  transition: 0.3s;
  position: relative;
}
#reangle .text .btn:hover {
  transform: translateY(4px);
  box-shadow: none;
}
#reangle .text a {
  margin-top: 10px;
}
/* Reangle lineup */
#lineup .sec-title {
  text-align: center;
}
#lineup .list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#lineup .list li {
  width: 33%;
  position: relative;
}

/*-------------------------------------------
News
-------------------------------------------*/
#news {
  margin-top: 50px;
  margin-bottom: 50px;
}
#news .list {
  display: flex;
  justify-content: space-between;
}
/*
「width: calc(100%/3);」で横幅を3等分する
*/
#news .list li {
  width: calc(100%/3);
  border-right: solid 1px #000;
  padding: 10px 20px;
}
#news .list li:first-child {
  padding-left: 0;
}
#news .list li:last-child {
  border-right: none;
  padding-right: 0;
}
#news .list li .date-area {
  margin-bottom: 16px;
}
#news .list li .date-area span {
  width: 60px;
  height: 20px;
  line-height: 20px;
  background-color: #000;
  color: #fff;
  display: inline-block;
  font-size: 0.75rem;
  margin-left: 10px;
  text-align: center;
}

/*-------------------------------------------
About
-------------------------------------------*/
#about {
  display: flex;
  margin-top: 50px;
  margin-bottom: 50px;
}
#about .img {
  width: 55%;
}
#about .img img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}
#about .text {
  width: 45%;
  padding: 50px 5% 0 5%;
}
#about .text p {
  line-height: 2.2;
}

/*-------------------------------------------
Company
-------------------------------------------*/
/* テキストと画像はpositionを使って配置
子要素の「position: absolute;」で高さがなくなるため、
「height: 750px;」を指定して高さを確保 */
#company1 {
  height: 650px;
  display: flex;
  align-items: center;
  position: relative;
}
#company1 .text {
  width: 55%;
  background-color: #fff;
  padding: 50px 8% 50px 6%;
  position: absolute;
  top: 0;
  left: 0;
}
#company1 .img {
  width: 55%;
  position: absolute;
  top: 65px;
  height: 380px;
  right: 0;
  box-shadow: 0 0 8px 4px #959595;
}
#company1 .info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
#company1 .info dt {
  width: 20%;
  margin-top: 10px;
}
/* 1つめのdtにはmargin-topを設定しない */
#company1 .info dt:first-of-type {
  margin-top: 0;
}
#company1 .info dd {
  width: 80%;
  margin-top: 10px;
}
/* 1つめのddにはmargin-topを設定しない */
#company1 .info dd:first-of-type {
  margin-top: 0;
}
#company1 .info .add {
  margin-left: 20%;
}
/* 名古屋営業所 */
#company2 {
  height: 10px;
  bottom: 170px;
  display: flex;
  align-items: center;
  position: relative;
}
#company2 .text {
  width: 55%;
  background-color: #fff;
  padding: 50px 8% 50px 6%;
  position: absolute;
  top: 0;
  left: 0;
}
#company2 .img {
  border: 1px solid;
  border-color: #969595;
  width: 60%;
  position: absolute;
  top: 115px;
  height: 400px;
  right: 0;
}
#company2 .info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
#company2 .info dt {
  width: 20%;
  margin-top: 10px;
}
#company2 .info dt:first-of-type {
  margin-top: 0;
}
#company2 .info dd {
  width: 80%;
  margin-top: 10px;
}
/* 1つめのddにはmargin-topを設定しない */
#company2 .info dd:first-of-type {
  margin-top: 0;
}
#company2 .info .add {
  margin-left: 20%;
}

/*-------------------------------------------
footer
-------------------------------------------*/
#footer {
  background-color: rgb(29, 32, 136);
  padding-bottom: 20px;
}
#footer .flex {
  color: #fff;
  display: flex;
  align-items: center;
  padding: 20px 0;
}
#footer .flex .logo {
  width: 80%;
  margin-left: 0;
}
#footer .flex .twitter {
  display: flex;
  align-items: center;
  width: 50px;
  margin-left: 50px;
}
#footer .flex .instagram {
  width: 50px;
  margin-left: 50px;
  align-items: center;
}
#footer .flex .facebook {
  width: 50px;
  margin-left: 50px;
  align-items: center;
}
#footer .flex .info {
  width: 20%;
  margin-right: 0;
}
#footer .copyright {
  color: #fff;
  font-size: 0.625rem;
}

/*-------------------------------------------
トップへ戻るボタン
-------------------------------------------*/
/* 右下に固定で配置
表示・非表示の切り替えはjQueryで行うため、詳細は「main.js」のコメントを参照 */
#to-top {
  width: 50px;
  height: 50px;
  background-color: rgb(29, 32, 136);
  border: solid 2px #fff;
  border-radius: 50%;
  position: fixed;
  right: 25px;
  bottom: 25px;
}
/* 中の三角は疑似要素で作成 */
#to-top::after {
  content: "";
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #fff;
  position: relative;
  left: 17px;
  bottom: 3px;
}
#to-top:hover {
  opacity: 0.7;
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 900px) {
  .wrapper {
    padding: 0 16px;
  }
  .sec-title {
    font-size: 1.25rem;
    margin-bottom: 30px;
  }
  .sec-title::before,
  .sec-title::after {
    width: 18%;
  }
  .logo a {
    width: 100px;
    margin-top: -20px;
    margin-left: -40px;
  }
  .section-title {
    margin-bottom: 34px;
  }
  .section-title .ja {
    margin-bottom: 24px;
  }

  /*-------------------------------------------
  ヘッダー
  -------------------------------------------*/
  #header {
    padding: 25px 0 0 25px;
    display: flex;
  }
  #header .nav-menu {
    display: none;
  }
  .hamburger {
    width: 80px;
    height: 80px;
  }
  .hamburger span {
    width: 30px;
    left: 25px;
  }
  .hamburger span:nth-child(1) {
    top: 26px;
  }
  .hamburger span:nth-child(2) {
    top: 37px;
  }
  .hamburger span:nth-child(3) {
    top: 48px;
  }
  .hamburger .active span:nth-child(1) {
    top: 37px;
    left: 21px;
  }
  .hamburger .active span:nth-child(2),
  .hamburger .active span:nth-child(3) {
    top: 37px;
  }
  #h-navi .logo {
    top: 40px;
    left: 15px;
  }
  #h-navi .menu {
    margin-top: 110px;
  }

  /*-------------------------------------------
  Mainvisual
  -------------------------------------------*/
  #mainvisual {
    margin-bottom: 80px;
  }
  #mainvisual .fade li img {
    height: 300px;
  }
  #mainvisual .text {
    top: 100px;
  }

  /*-------------------------------------------
  feature
  -------------------------------------------*/
  #feature {
    margin-top: -100px;
    padding-bottom: 60px;
  }

  /*-------------------------------------------
  Plant
  -------------------------------------------*/
  #plant .flex .right {
    margin-top: 120px;
  }
  /*-------------------------------------------
  Flow
  -------------------------------------------*/
  #flow {
    padding-top: 0;
  }
  #flow .step {
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
  }
  #flow .figure {
    margin-bottom: 80px;
  }
  /*
  図形下の黄色い棒線を中央に配置
  */
  #flow .figure::before {
    left: 0;
    right: 0;
    top: 50px;
    margin: 0 auto;
  }
  /*
  図形（四角部分）の横幅を、画面幅から80pxマイナスしてサイズを調整
  ※80pxは任意の数値ですので、図形をもっと小さくして横の余白とりたい場合は、
  ここの数値を大きくする等して調整が可能です。
  */
  #flow .figure li {
    width: calc(100vw - 200px);
    left: 0;
    right: 0;
  }
  /*
  図形（三角部分）の横幅を設定
  ※上記同様、図形のサイズにあわせて調整を行う
  */
  #flow .figure li::before {
    border-left: calc(50vw - 100px) solid transparent;
    border-right: calc(50vw - 100px) solid transparent;
  }
  #flow .description {
    width: auto;
  }

  /*-------------------------------------------
  reangle
  -------------------------------------------*/
  #reangle {
    flex-direction: column-reverse;
    margin-bottom: 30px;
  }
  #reangle .remain {
    width: 100%;
    margin-top: 30px;
  }
  #reangle .remain img {
    height: 180px;
  }
  #reangle .text {
    width: 100%;
  }

  /*-------------------------------------------
  News
  -------------------------------------------*/
  #news {
    margin-bottom: 30px;
  }
  #news .list {
    flex-direction: column;
  }
  #news .list li {
    width: 100%;
    border-right: none;
    padding: 10px 0;
    margin-bottom: 20px;
  }
  #news .list li:last-child {
    margin-bottom: 0;
  }

  /*-------------------------------------------
  About
  -------------------------------------------*/
  #about {
    flex-direction: column-reverse;
    margin-bottom: 30px;
  }
  #about .img {
    width: 100%;
    margin-bottom: 30px;
  }
  #about .img img {
    height: 300px;
  }
  #about .text {
    width: 100%;
    padding: 0 16px;
  }

  /*-------------------------------------------
  Company
  -------------------------------------------*/
  /*
  「position: static;」でrelativeを解除
  */
  #company1 {
    height: auto;
    flex-direction: column;
    position: static;
  }
  /*
  「position: static;」でabsoluteを解除
  */
  #company1 .text {
    width: 100%;
    padding: 40px 20px;
    margin-bottom: 20px;
    position: static;
  }
  /*
  「position: static;」でabsoluteを解除
  */
  #company1 .img {
    width: 100%;
    padding: 0;
    position: static;
    margin-bottom: 20px;
  }
  #company1 .info {
    flex-direction: column;
  }
  #company1 .info dt {
    width: 100%;
    margin-top: 20px;
  }
  #company1 .info dd {
    width: 100%;
    margin-top: 5px;
    padding-left: 14px;
  }
  #company1 .info dd:first-of-type {
    margin-top: 5px;
  }
  #company1 .info .add {
    margin-left: 0;
  }
  #company2 {
    height: auto;
    flex-direction: column;
    position: static;
  }
  #company2 .text {
    width: 100%;
    padding: 40px 20px;
    margin-bottom: 20px;
    position: static;
  }
  #company2 .info {
    flex-direction: column;
  }
  #company2 .info dt {
    width: 100%;
    margin-top: 20px;
  }
  #company2 .info dd {
    width: 100%;
    margin-top: 5px;
    padding-left: 14px;
  }
  #company2 .info dd:first-of-type {
    margin-top: 5px;
  }
  #company2 .info .add {
    margin-left: 0;
  }

  /*-------------------------------------------
  footer
  -------------------------------------------*/
  #footer .flex {
    flex-direction: column;
    align-items: flex-start;
  }
  #footer .flex .logo {
    margin-left: 0;
    margin-bottom: 10px;
  }
  #footer .flex .info {
    display: none;
  }
}