@charset "utf-8";
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap");
/*------------------------ common ------------------------*/
* {
  line-height: 1.6;
  font-family: "Noto Sans JP", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: 600;
}
:root {
  --blue: #003e92;
  --gray: #f9f9f9;
  --black: #333333;
  --eng: "Montserrat", sans-serif;
  --pc-padding: 100px;

  --font10: 10px;
  --font12: 12px;
  --font14: 14px;
  --font16: 16px;
  --font18: 18px;
  --font20: 20px;
  --font24: 24px;
  --font28: 28px;
  --font30: 30px;
  --font32: 32px;
  --font36: 36px;
}
@media (max-width: 1200px) {
  :root {
    /* 1000px */
    --font12: 1.2vw;
    --font14: 1.4vw;
    --font16: 1.6vw;
    --font18: 1.8vw;
    --font20: 2vw;
    --font24: 2.4vw;
    --font28: 2.8vw;
    --font30: 3vw;
    --font32: 3.2vw;
    --font36: 3.6vw;
  }
}
@media (max-width: 768px) {
  :root {
    /* 500px */
    --font12: 2.4vw;
    --font14: 2.8vw;
    --font16: 3.2vw;
    --font18: 3.6vw;
    --font20: 4vw;
    --font24: 4.8vw;
    --font28: 5.6vw;
    --font30: 6vw;
    --font32: 6.4vw;
    --font36: 6.8vw;
  }
}

html,
body {
  height: 100%;
}

img {
  max-width: 100%;
  width: 100%;
  vertical-align: bottom;
}

ul,
ol {
  list-style-type: none;
  padding-left: 0;
}

button,
a {
  cursor: pointer;
  transition: 0.3s;
}

button:hover,
a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.sec_wh {
  background-color: #fff;
}

.sec_gr {
  background-color: var(--gray);
}

.sec_inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6% 4% 10% 4%;
}

.sec_lblue {
  background-color: #f0f8ff;
  padding: 4% 4% 4% 4%;
  margin: 0 auto;
}

h2 {
  color: var(--blue);
  font-weight: 700;
  text-align: center;
  font-size: 70px;
  margin-bottom: 5%;
  line-height: 1.2;
  font-family: var(--eng);
  font-optical-sizing: auto;
}
h2 span {
  display: block;
  margin-top: 0px;
  font-size: 28px;
  font-size: var(--font28);
  color: var(--blue);
  font-weight: 700;
}

@media (max-width: 1200px) {
  /* 1000px */
  h2 {
    font-size: 6vw;
  }
}
@media (max-width: 768px) {
  /* 500px */
  h2 {
    font-size: 12vw;
  }
  h2 span {
    margin-top: -5px;
  }
}

.pc_only {
  display: block;
}

.sp_only {
  display: none;
}

@media (max-width: 768px) {
  .pc_only {
    display: none;
  }

  .sp_only {
    display: block;
  }
}

.error {
  color: red !important;
  font-size: 12px;
  font-size: var(--font12);
  text-align: center;
  margin-bottom: 10px;
  display: none;
  font-weight: bold;
  margin: 1rem auto;
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left,
.right {
  width: 49%;
}

@media (max-width: 768px) {
  .flex {
    display: block;
  }
  .left,
  .right {
    width: 100%;
  }
}

/*---------------------- header ------------------------*/
.logo {
  max-width: 170px;
  display: block;
}

header {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 99;
  background-color: #fff;
}
header li i {
  margin-left: 2%;
}
.header_left {
  height: 100%;
  margin-left: 2%;
}
.header_sp {
  display: none;
}

.header_pc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  padding: 10px 15px;
}

.header_pc .logo {
  display: block;
  width: auto;
  height: 100%;
}

.header_pc .logo img {
  height: 100%;
}

.header_pc .header_right {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}

.header_pc .header_right nav {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.header_pc .header_right nav .link_area {
  text-align: right;
  font-weight: bold;
  width: 65%;
  margin-right: 2%;
}

.header_pc .header_right .menu-pc {
  height: auto;
  display: flex;
  justify-content: flex-end;
  position: static;
}

.header_pc .header_right .menu-pc li {
  margin-right: 4%;
  white-space: nowrap;
  display: block;
  height: auto;
}

.header_pc .header_right .menu-pc li:last-child {
  margin-right: 0;
}

.header_pc .header_right .menu-pc li a {
  display: block;
  text-decoration: none;
  color: var(--black);
}
@media (max-width: 768px) {
  /* ハンバーガー */
  .bar {
    position: relative;
    z-index: 99999;
  }

  .bar i {
    color: var(--blue);
    font-size: 25px;
    padding-top: 2px;
  }

  .bar.open i::before {
    content: "\f00d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #fff;
    padding-right: 15px;
  }

  .menu {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    color: #efefef;
    background-color: var(--blue);
    transition: 0.3s;
    padding: 18% 1rem;
    position: fixed;
    top: -150%;
    left: 0;
    z-index: 9999;
    overflow-y: scroll;
  }

  .menu.open {
    left: 0;
    top: 0;
  }

  body.open {
    overflow: hidden;
  }

  .menu-list {
    width: 100%;
    max-width: 600px;
    /* メニューテキスト位置をリスト内中心に */
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #fff;
    padding: 0 1rem;
    margin: 0 auto;
  }

  .menu-list a {
    line-height: 45px;
    color: #fff;
    width: 100%;
    font-size: 12px;
    font-size: 3.2vw;
    text-decoration: none;
    position: relative;
  }

  .menu-list a::after {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
    font-size: 3.733vw;
    position: absolute;
    right: 1px;
  }

  .menu-btn {
    padding: 1rem;
    text-align: center;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
  }

  .menu-btn a {
    color: #fff;
    border: 2px solid #fff;
    display: block;
    font-size: 18px;
    border-radius: 10px;
    padding: 0.5rem 1rem;
  }

  .menu-btn a span {
    font-size: 12px;
    color: #fff;
    display: block;
  }

  .menu-btn a i {
    color: #fff;
    margin-right: 5px;
  }

  .menu-btn .btn_area button {
    padding: 1rem;
    display: block;
    width: 100%;
    margin: 2% 0;
  }
  .menu-btn .sim_btn {
    background-color: #fff;
    color: #af1841 !important;
  }

  .header_sp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    width: 100%;
    padding: 5px;
  }
  .header_sp .logo {
    display: block;
    height: 100%;
  }
  .header_pc {
    display: none;
  }
}
.low_header {
  margin: 0;
  padding: 0.75% 0;
  display: flex;
  justify-content: center;
  width: 100%;
  font-size: var(--font18);
  background-color: var(--gray);
}
.low_header li {
  margin-right: 4%;
  white-space: nowrap;
}
.low_header li i {
  margin-left: 5%;
}
.low_header li:last-child {
  margin-right: 0;
}
@media (max-width: 768px) {
  .low_header {
    display: none;
  }
}
/*------------------------ FV ------------------------*/
.sec_top {
  margin-top: 45px;
  position: relative;
}
.sec_top .fv_cnt {
  position: absolute;
  top: 45%;
  left: 4%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.point_area {
  display: flex;
  margin-bottom: 5%;
}
.point_area p {
  font-size: var(--font18);
  color: #fff;
  background-color: var(--blue);
  padding: 5px 25px;
  margin-right: 1%;
}
h1 {
  margin: 2% 0;
  font-size: 40px;
  line-height: 1.2;
}
/*h1 span{
  color: var(--blue);
  font-size: 80px;
}*/

.neibologo {
  width: 50%;
  padding: 20px 0;
}

h1 img {
  margin: 0 !important;
}

@media (max-width: 1200px) {
  /* 1000px */
  h1 {
    margin: 3% 0 0 0;
    font-size: 30px;
    line-height: 1.2;
  }
}
@media (max-width: 768px) {
  .point_area p {
    font-size: var(--font14);
  }

  .neibologo {
    width: 50%;
    padding: 10px 0 100px 0;
  }

  /* 500px */
  h1 {
    margin: 50px 0 0 0;
    font-size: 20px;
  }
}
.fv_cnt .txt {
  font-size: var(--font20);
}
@media (max-width: 1200px) {
  /* 1000px */
  .fv_cnt .txt {
    font-size: 1.5vw;
  }
}
@media (max-width: 768px) {
  /* 500px */
  .fv_cnt .txt {
    font-size: 3vw;
  }
  .sec_top .fv_cnt {
    top: 50%;
  }
  .sec_top img {
    margin-top: 30px;
    margin-right: 0;
  }
}
/*------------------------ NEWS ------------------------*/
.sec_news h2 {
  text-align: left;
}
.news_area {
  border-bottom: 1px solid #e4e4e4;
  padding: 4% 0;
}
.news_area .date {
  font-size: 12px;
  font-size: var(--font12);
}
.news_area .ttl {
  margin: 10px 0;
  font-size: 18px;
  font-size: var(--font18);
  color: var(--blue);
}
.news_area .txt {
  font-size: 14px;
  font-size: var(--font14);
}

@media (max-width: 768px) {
  .news_area {
    padding: 8% 0 4% 0;
  }
}
/*------------------------ movie ------------------------*/
.sec_about {
  background-image: url(../image/bg01.png);
  background-position: bottom;
  background-color: rgba(255, 255, 255, 0.8);
  background-blend-mode: lighten;
  background-repeat: no-repeat;
}
.movie {
  width: 70%;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
}
.movie iframe {
  width: 100%;
  height: 100%;
}
/* about */
.about_box {
  background-color: #fff;
  margin-top: 5%;
}
.about_box h3 {
  padding: 4% 4% 4% 4%;
  font-size: 32px;
  font-size: var(--font32);
  text-align: center;
  border-bottom: 1px solid;
  border-color: var(--blue);
  line-height: 1.2;
}
.about_cnt {
  padding: 4% 4% 6% 4%;
}
.about_cnt .left {
  width: 60%;
}
.about_cnt .right {
  width: 38%;
}
.about_box h4 {
  font-size: var(--font24);
  margin-bottom: 5%;
}
.about_box h4 span {
  color: var(--blue);
}

@media (max-width: 768px) {
  .movie {
    width: 100%;
  }
  .about_box h3 {
    font-size: 24px;
    font-size: var(--font24);
  }

  .about_box h4 {
    font-size: 18px;
    font-size: var(--font18);
  }

  .about_cnt .left,
  .about_cnt .right {
    width: 100%;
  }
  .about_cnt .left p {
    margin-bottom: 2%;
    font-size: 18px;
    font-size: var(--font18);
  }
}
/*------------------------ FEATURES ------------------------*/
.sec_features {
  background-image: url(../image/bg02.png);
  background-repeat: no-repeat;
}

.sec_features h3 {
  margin: 8% 0;
}
.sec_features h3 p {
  line-height: 1;
  text-align: center;
  color: var(--blue);
  /*text-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
*/
}
.sec_features h3 p {
  font-size: var(--font32);
}

.sec_features h3 img {
  width: 30%;
  margin: 4% 0 2% 0;
}
.sec_features h3 p:first-child {
  font-size: var(--font28);
  margin-bottom: -40px;
}
.sec_features h3 p:nth-child(2) span {
  font-size: 100px;
}
@media (max-width: 768px) {
  .sec_features h3 p {
    font-size: 4.5vw;
  }
  .sec_features h3 p:first-child {
    font-size: 4vw;
    margin-bottom: -20px;
  }
  .sec_features h3 p:nth-child(2) span {
    font-size: 50px;
  }
  .sec_features h3 img {
    width: 50%;
    margin: 6% 0 2% 0;
  }
}

.features_area {
  margin-top: 2%;
}
.features_area .no {
  font-family: var(--eng);
  color: var(--blue);
  font-weight: bold;
  font-size: 22px;
}
.features_area .no span {
  all: inherit;
  display: inline;
  font-size: 29px;
}
.features_area .ttl {
  font-size: 28px;
  font-size: var(--font28);
  font-weight: bold;
}
.features_area .ttl span {
  color: var(--blue);
  font-weight: bold;
}

.features_area:nth-of-type(2) {
  flex-direction: row-reverse;
}
.features_area:last-child {
  align-items: flex-start;
}
.futures_area img {
  /*box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
*/
}
.features_area.flex .ttl {
  font-size: var(--font24);
  margin-bottom: 5%;
}
.features_area img {
  /*box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;*/
  margin-bottom: 3%;
}
@media (max-width: 768px) {
  .features_area .txt {
    margin-bottom: 5%;
    font-size: 18px;
    font-size: var(--font18);
  }
  .features_area:nth-of-type(-n + 3) {
    flex-direction: column-reverse;
    display: flex;
  }
  .features_area.flex .ttl {
    margin-bottom: 2%;
  }
}

/*------------------------ casestudy ------------------------*/
.model_case_txt {
  margin: 5% 0 5% 0;
  text-align: center;
}
.model_case_txt p {
  font-size: 18px;
  font-size: var(--font18);
}
.model_case_txt h3 {
  font-size: 36px;
  font-size: var(--font36);
  line-height: 1;
  margin-top: 2%;
}
.model_case_txt h3 span {
  color: var(--blue);
}
.model_case_img {
  position: relative;
}
.model_case_img span {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: var(--font18);
  color: #fff;
  background-color: var(--blue);
  padding: 5px 25px;
}
@media (max-width: 768px) {
  .model_case_img span {
    padding: 5px;
    font-size: var(--font16);
  }

  .model_case_txt h3 {
    font-size: 20px;
    font-size: var(--font20);
  }
}
.model_case .notes {
  font-size: var(--font14);
}

.casestudy {
  max-width: 800px;
  margin: 0 auto;
}
.casestudy_area {
  margin: 5% 0 10% 0;
}
.casestudy_area:first-child {
  margin-top: 10%;
}
.casestudy_area .ttl {
  color: var(--blue);
  text-align: center;
  font-weight: bold;
  font-size: 24px;
  font-size: var(--font24);
  margin: 3% 0;
}
.swiper-container {
  margin: 10% 0;
}

@media (max-width: 768px) {
  .casestudy p {
    font-size: 18px;
    font-size: var(--font18);
  }
}
/*------------------------ PRODUCTS ------------------------*/
.products_txt {
  border: 1px solid;
  border-color: var(--blue);
  text-align: center;
  padding: 6% 4% 8% 4%;
}
.products_txt .ttl {
  font-size: 30px;
  font-size: var(--font30);
  color: var(--blue);
}
.products_txt .ttl_en {
  font-size: 18px;
  font-size: var(--font18);
  font-family: var(--eng);
  margin-bottom: 3%;
}
.sec_products h3 {
  text-align: center;
  font-size: 32px;
  font-size: var(--font32);
  margin-bottom: 5%;
}

.sec_sub {
  margin: 15% 0;
}
/* mode */
.mode_list li {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin-bottom: 2%;
}
.mode_list li p {
  padding: 10px 15px;
}
.mode_list li p:first-child {
  color: #fff;
  width: 30%;
  background-color: var(--blue);
  display: block;
  font-size: var(--font24);
  text-align: center;
}
.mode_list li p:last-child {
  width: 70%;
  font-size: var(--font18);
  background-color: var(--gray);
  text-align: left;
  display: flex;
  align-items: center;
}

/* function */
.function_list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.function_list li {
  width: 13.3%;
  text-align: center;
  background-color: var(--gray);
  margin-right: 1%;
  margin-bottom: 1%;
  padding: 2% 2% 1% 2%;
}
.function_list li:nth-child(7n) {
  margin-right: 0;
}
.function_list li p {
  font-size: var(--font14);
  margin-top: 15%;
}
.function_list i {
  color: var(--blue);
  font-size: 80px;
}
@media (max-width: 1200px) {
  .function_list i {
    font-size: 8vw;
  }
}
@media (max-width: 768px) {
  .function_list i {
    font-size: 10vw;
  }
  .function_list li {
    width: 24%;
  }
  .function_list li:nth-child(5n) {
    margin-right: 1%;
  }
  .function_list li:nth-child(4n) {
    margin-right: 0;
  }
}
.products_area img {
  width: 80%;
}
.sec_products .notes {
  text-align: right;
  font-size: var(--font14);
}
@media (max-width: 768px) {
  .sec_products .notes {
    text-align: left;
  }
}
.sec_products div {
  text-align: center;
}

/* spec */
.spec_table_area {
  width: 100%;
}
.spec_table_area table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font16);
}
.spec_table_area table th,
.spec_table_area table td {
  border: 1px solid;
  border-color: var(--gray);
  padding: 10px 15px;
  text-align: center;
}

.spec_table_area table th {
  background-color: var(--blue);
  color: #fff;
  white-space: nowrap;
}
.spec_table_area table tr:first-child th:first-child {
  background-color: transparent;
}
.spec_table_area table tr:first-child th,
.spec_table_area table tr:first-child td {
  border: none;
}
.spec_table_area .kome {
  font-size: 10px;
}
.spec_table_pc {
  display: table;
}
.spec_table_sp {
  display: none;
}
@media (max-width: 768px) {
  .spec_table_pc {
    display: none;
  }
  .spec_table_sp {
    display: table;
  }
  .tab {
    display: flex;
  }
  .tab-btn {
    display: flex;
    font-size: var(--font16);
  }
  .tab-btn__item {
    text-align: center;
    width: 100%;
    padding: 5px;
    color: #fff;
    background-color: #ccc;
    cursor: pointer;
  }
  .tab-btn__item.current {
    background-color: var(--blue);
  }
  .tab-content {
    display: none;
  }
  .tab-content.show {
    display: block;
  }
  .tab-content table tr:first-child td {
    border: 1px solid var(--gray);
  }
  .tab-content table tr:first-child td img {
    width: 60%;
    text-align: center;
  }
}

/* ------------form------------ */
.sec_contact h2 {
  color: #333333;
  font-size: var(--font32);
}
.sec_contact .txt {
  font-size: var(--font16);
  text-align: center;
}
.sec_contact .notes {
  font-size: var(--font14);
  text-align: center;
  margin-top: 2%;
}
@media (max-width: 768px) {
  .sec_contact .txt,
  .sec_contact .notes {
    text-align: left;
  }
}
.sec_contact .notes span {
  color: red;
}
.btn {
  padding: 0.3rem 2rem;
  position: relative;
  cursor: pointer;
  border-radius: 3px;
  border-color: inherit;
  border: none;
  outline: none;
  font-weight: bold;
  text-align: center;
  background-color: var(--blue);
  letter-spacing: 2px;
}
.btn_area {
  margin: 4% 0;
}

.btn_txt {
  color: #fff;
  font-size: var(--font16);
  line-height: 1;
}

.form {
  margin: 0 auto;
  max-width: 768px;
}
.form_cnt {
  margin: 5% 0;
}
.form .btn_area {
  text-align: center;
}
.form .dc_btn .btn_txt {
  text-align: center;
  width: 100%;
}
.form_name {
  display: flex;
  justify-content: space-between;
}

.form_top {
  display: none;
}
.form label {
  font-size: 12px;
  font-size: 3vw;
}
.form label em {
  color: red;
}

.form input[type="text"],
.form textarea {
  padding: 0.5rem;
  width: 100%;
  background-color: #fff;
  border: 0.5px solid #27130073;
  margin-bottom: 2%;
}
.form textarea {
  white-space: pre-wrap;
  resize: none;
  height: 120px;
  width: 100%;
  overflow-y: scroll;
  white-space: pre-wrap;
  word-break: break-all;
}
.form input[type="text"]::placeholder,
.form textarea::placeholder {
  font-size: 12px;
  font-size: 3vw;
  color: #b4b4b4;
}

@media (min-width: 768px) {
  .form input[type="text"]::placeholder,
  .form textarea::placeholder {
    font-size: 1.5vw;
  }
  .form label {
    font-size: 1.5vw;
  }
}

@media (min-width: 1200px) {
  .form input[type="text"]::placeholder,
  .form textarea::placeholder {
    font-size: 12px;
  }
  .form label {
    font-size: 12px;
  }
}

.form .checkbox_area {
  font-size: var(--font14);
  margin-top: 2%;
}

.form .checkbox_area p {
  margin-bottom: 2%;
}
@media (min-width: 768px) {
  .form .checkbox_area {
    line-height: 2.4;
  }
}
.form .privacy_check {
  text-align: center;
}

.form input[type="checkbox"] {
  all: revert;
}

.form .privacy_policy {
  font-size: var(--font14);
  text-align: center;
  display: block;
  margin-bottom: 5%;
}

.form .privacy_policy a {
  color: var(--blue);
  text-decoration: underline;
}

/*------------------------ footer ------------------------*/
footer {
  background-color: #fff;
  padding: 4% 4%;
}
@media (max-width: 768px) {
  footer {
    padding-bottom: 20%;
  }
}

.footer_link_area {
  margin: 2% 0;
}

.footer_link {
  list-style-type: none;
  padding-left: 0;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.footer_link li {
  line-height: 1.6;
  margin-right: 2%;
}

.footer_link li a,
.footer_link li a i {
  text-decoration: none;
  font-size: var(--font16);
  color: var(--black);
}
.footer_link li a i {
  margin-left: 5px;
}

.copy {
  text-align: left;
  font-size: 12px;
}

@media (max-width: 768px) {
  .footer_link li {
    line-height: 2.4;
    margin-right: 5%;
  }
}
/*------------------------ floating ------------------------*/
.floating_area {
  position: fixed;
  right: 0;
  bottom: 0;
  max-width: 300px;
  z-index: 9;
}
.floating_area a {
  display: block;
  position: relative;
}
.floating_area a img {
  display: block;
  border-radius: 15px 0 0 0;
}
.floating_area a i {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #fff;
  font-size: 20px;
}
.floating_area a span {
  display: none;
}
@media (max-width: 768px) {
  .floating_area {
    display: block;
    width: 100%;
    height: 10%;
    max-height: 60px;
    max-width: none;
  }
  .floating_area a img {
    display: none;
  }
  .floating_area a {
    display: block;
    background-color: var(--blue);
    opacity: 0.8;
    width: 100%;
    height: 100%;
  }
  .floating_area a span {
    display: block;
    color: #fff;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }
}
/*------------------------ rules ------------------------*/
.rules_table {
  width: 80%;
  margin: 20px 0;
  border: solid 1px #333;
}

.rules_table td {
  padding: 5px;
  border: solid 1px #333;
}

.rules_table th {
  background-color: #d2eef5;
  border: solid 1px #333;
  padding: 5px;
}

/* spec */