@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-right: 60px;
  margin-left: 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;
}

/*-------------------------------------------
Mainvisual
-------------------------------------------*/
#mainvisual {
  height: 550px;
  position: relative;
}
/* テキストとボタンが画像の上に表示されるように「z-index」を設定 */
#mainvisual .text {
  position: absolute;
  top: 300px;
  left: 10%;
  z-index: 10;
  color: #00bbff;
}
/* 「text-shadow」で文字の輪郭に白い影をつけることで、
文字が背景画像に埋もれないようにする */
#mainvisual .text .title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 30px;
  text-shadow: 0 4px 3px #fff;
}
#mainvisual .text .btn {
  background-color: #ff2a2a;
/* 文字の下に影をつけてボタンに立体感を出す */
  box-shadow: 0 6px 0 #9a0413;
  border-radius: 10px;
  color: #f0f0f0;
  font-size: 1rem;
  display: block;
  padding: 15px 35px;
  text-align: center;
  position: relative;
  width: 350px;
}
#mainvisual .text .btn:hover {
  transform: translateY(6px);
  box-shadow: none;
}
/* メインビジュアル
animationを使用して、画像をフェードイン、フェードアウトで切り替えを行う */
#mainvisual .fade li {
  width: 100%;
  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;
}
}

/*-------------------------------------------
o-design
-------------------------------------------*/
#o-design {
  height: 400px;
  display: flex;
  align-items: center;
  position: relative;
}
#o-design .text {
  width: 45%;
  background-color: #fff;
  padding: 50px 8% 50px 6%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 0 8px 4px #959595;
  line-height: 2.2;
}
#o-design .img {
  width: 50%;
  position: absolute;
  top: 65px;
  right: 0;
}

/*-------------------------------------------
o-size
-------------------------------------------*/
/* テキストと画像はpositionを使って配置
子要素の「position: absolute;」で高さがなくなるため、
「height: 750px;」を指定して高さを確保 */
#o-size {
  height: 450px;
  display: flex;
  align-items: center;
  position: relative;
}
#o-size .text {
  width: 45%;
  background-color: #fff;
  padding: 50px 8% 50px 6%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 0 8px 4px #959595;
  line-height: 2.2;
}
#o-size .img {
  width: 50%;
  position: absolute;
  top: 65px;
  right: 0;

}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 900px) {
  .wrapper {
    padding: 0 16px;
  }
  .section-title {
    margin-bottom: 34px;
  }
  .section-title .ja {
    margin-bottom: 24px;
  }

  /*-------------------------------------------
  ヘッダー
  -------------------------------------------*/

  /*-------------------------------------------
  Mainvisual
  -------------------------------------------*/
  #mainvisual {
    margin-bottom: -140px;
  }
  #mainvisual .fade li img {
    height: 200px;
  }
  #mainvisual .text {
    top: 180px;
    color: #00bbff;
  }
  #mainvisual .text .title {
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: 0 4px 3px #fff;
  }
  #mainvisual .text .btn {
    width: 320px;
  }

  /*-------------------------------------------
  o-design
  -------------------------------------------*/
  #o-design {
    height: auto;
    flex-direction: column-reverse;
    position: static;
  }
  #o-design .img {
    width: 100%;
    position: static;
  }
  #o-design .text {
    width: 100%;
    padding: 40px 20px;
    margin-bottom: 20px;
    position: static;
  }

  /*-------------------------------------------
  o-size
  -------------------------------------------*/
  #o-size {
    height: auto;
    flex-direction: column-reverse;
    position: static;
  }
  #o-size .img {
    width: 100%;
    position: static;
  }
  #o-size .text {
    width: 100%;
    padding: 40px 20px;
    margin-bottom: 20px;
    position: static;
  }
}