@charset "utf-8";

.main-visual-wrap { background-color: var(--dark-color); }
.box-wrap { padding-bottom: 0; }

.sec01 { padding: 30px 0; }
.sec01 .cont-title .tit { font-size: 3.5rem; font-weight: 900; line-height: 1.4; }
.sec01 .cont-title .txt { font-size: 2rem; font-weight: 400; line-height: 1.6; padding-top: 40px;}
.sec02 .cont-title .memoji { width: 460px; height: auto; margin-top: 50px; }
.sec02 .cont-title .memoji img { width: 100%; height: auto; }

.sec02 { margin-top: 50px; background: var(--dark-color); }
.sec02 .cont-title {float: left; width: 50%; padding-top: 20px;}
.sec02 .cont-title .tit { font-size: 3rem; font-weight: 100; color: #fff; line-height: 1.4;}
.sec02 .group { float: right; position: relative; width: 50%; }
.sec02 .group .item { position: relative; float: left; width: calc(50% - 20px); margin: 10px; height: 150px; background: rgba(255,255,255,0.1); border-radius: 10px; }
.sec02 .group .item .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; }
.sec02 .group .item .box img { width: 35px; height: 35px; display: inline-block; }
.sec02 .group .item .box .tit { color: #fff; font-size: 1.7rem; padding: 15px 0 5px; }
.sec02 .group .item .box .en { font-family: 'Rajdhani'; color: rgba(255,255,255,0.4); font-size: 1.7rem; font-weight: 600; letter-spacing: 0; }

.sec03 { background: var(--dark-color); padding-top: 0;}
.sec03 .cont-title .tit { font-size: 3rem; font-weight: 100; color: #fff; line-height: 1.4; text-align: center; }
.sec03 .group { padding-top: 60px; }
.sec03 .group .item-group .box { position: relative; border-top: 1px solid rgba(255,255,255,0.4); padding: 30px 0 0;}
.sec03 .group .item-group .box.tit {float: left; width: 30%; font-size: 1.9rem; font-weight: 100; color: rgba(255,255,255,0.7); line-height: 1.5; }
.sec03 .group .item-group .box.tit b { color: #fff; }
.sec03 .group .item-group .box.cont { float: right; width: 65%; }
.sec03 .group .item-group .box.cont .item { float: left; width: 50%; margin-bottom: 20px;}
.sec03 .group .item-group .box.cont .item .icon { float: left; position: relative; width: 55px; height: 55px; background: #1E222C; border-radius: 10px; }
.sec03 .group .item-group .box.cont .item .icon img { max-width: 35px; max-height: 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.sec03 .group .item-group .box.cont .item .txt { float: left; width: calc(100% - 70px); margin-left: 15px; color: rgba(255,255,255,0.7); font-size: 1.2rem; font-weight: 100; line-height: 1.6; padding-top: 5px; transform: skewX(-0.1deg);}
.sec03 .group .item-group .box.cont .item .txt b { display: block; font-size: 1.5rem; color: #fff; }


.sec04 { padding: 80px 0 0; text-align: center; }
.sec04 .cont-title .tit { font-size: 2.2rem; line-height: 1.6; }
.sec04 .cont-title .tit b { display: block; }
.sec04 .btn-wrap { display: inline-block; margin-top: 30px;}
.sec04 .btn-wrap button { background: var(--main-blue); color: #fff; height: 45px; padding: 0 100px; font-size: 1.5rem; }




@media (max-width: 880px) {
  .sec01 .cont-title .tit { font-size: 2.5rem; }
  .sec01 .cont-title .txt { font-size: 1.8rem; padding-top: 20px; }

  .sec02 .cont-title { float: none; width: 100%; text-align: center; }
  .sec02 .cont-title .tit { font-size: 2.3rem; }
  .sec02 .cont-title .memoji { max-width: 100%; margin: 30px auto; }
  .sec02 .group { float: none; width: 100%; }

  .sec03 .cont-title .tit { font-size: 2.3rem; }
  .sec03 .group .item-group .box.tit { font-size: 1.6rem; width: 22%; }
  .sec03 .group .item-group .box.cont { width: 75%; }
  .sec03 .group .item-group .box.cont .item .txt b { font-size: 1.4rem; }
  .sec03 .group .item-group .box.cont .item .icon { width: 45px; height: 45px; }
  .sec03 .group .item-group .box.cont .item .icon img { max-width: 25px; max-height: 25px;}
}

@media (max-width: 550px) {
  .sec01 { text-align: center; }
  .sec01 .cont-title .tit { font-size: 2.3rem; }
  .sec01 .cont-title .txt { font-size: 1.6rem; padding-top: 20px; }
  .sec01 .cont-title br { display: none; }

  .sec02 .cont-title .tit { font-size: 2rem; }

  .sec03 .cont-title .tit { font-size: 2rem; word-break: keep-all; }
  .sec03 .group { padding-top: 20px; }
  .sec03 .group .item-group .box.tit { float: none; width: 100%; text-align: center; }
  .sec03 .group .item-group .box.tit br { display: none; }
  .sec03 .group .item-group .box.tit b { display: inline-block; }
  .sec03 .group .item-group .box.cont { float: none; width: 100%; border-top: 0; }
  .sec03 .group .item-group .box.cont .item {min-height: 61px; }
  .sec03 .group .item-group .box.cont .item .txt { padding-top: 0; margin-left: 10px; width: calc(100% - 60px); }
  .sec03 .group .item-group .box.cont .item .txt b { font-size: 1.3rem; }
  .sec03 .group .item-group .box.cont .item .txt b br { display: none; }
  .sec03 .group .item-group .box.cont .item .icon { width: 40px; height: 40px; }
  .sec03 .group .item-group .box.cont .item .icon img { max-width: 20px; max-height: 20px;}

  .sec04 { padding-top: 50px; }
  .sec04 .cont-title .tit { font-size: 1.7rem; }
  .sec04 .btn-wrap { margin-top: 20px; width: 100%; }
  .sec04 .btn-wrap button { font-size: 1.4rem; height: 40px; width: 70%; }
}