/* ==========================================================

title : 美術刀剣・武具Web管理システム
scope : 美術刀剣・武具Web管理システム

memo：

last modify : 2020/05/07 TCI_福岡／WEB2TCI-11118

========================================================== */

/* ------------------------------------ */
/* ▼ 共通 */
/* ------------------------------------ */
.web_management_system img {
  vertical-align: bottom;
}

@media (min-width: 768px) {
  .box_seo {
    margin-top: 60px;
  }
}

/* ------------------------------------ */
/* ▼ h1 */
/* ------------------------------------ */
.banner_h1 {
  margin: 0 auto;
  max-width: 1000px;
  width: 100%;
  height: auto;
  font-size: 36px;
}

.banner_h1_inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4.8%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.banner_h1 .txth1 {
  background-color: transparent;
  height: 1em;
  position: initial;
  letter-spacing: -.01em;
  color: #aa8420;
}

.banner_h1 .cmn_h1_sitetop_name {
  font-size: 50%;
  letter-spacing: -.03em;
  color: #aa8420;
  margin-top: 2.2%;
}

@media (max-width: 1000px) {
  .banner_h1 .txth1 {
    font-size: 3.6vw;
  }
  .banner_h1 .cmn_h1_sitetop_name {
    font-size: 2.4vw;
  }
}

/* ------------------------------------ */
/* ▼ h2 */
/* ------------------------------------ */
.cmn_h2_01 {
  max-width: 864px;
}

/* ------------------------------------ */
/* ▼ annotation list */
/* ------------------------------------ */
.annotation_list01>li {
  padding-left: 1em;
  text-indent: -1em;
}

/* ------------------------------------ */
/* ▼ section */
/* ------------------------------------ */
@media (min-width: 768px) {
  .cmn_section {
    margin-top: 60px;
  }

  .cmn_section:first-of-type {
    margin-top: 56px;
  }
}

@media (max-width: 767px) {
  .cmn_section {
    margin-top: 25px;
  }
}

/* ------------------------------------ */
/* ▼ web system */
/* ------------------------------------ */
.sys_item_heading {
  color: #fff;
  display: inline-block;
  font-size: 31px;
  letter-spacing: .06em;
  padding: 0 1.2em;
  position: relative;
  text-align: left;
}

.sys_item_heading::before,
.sys_item_heading::after {
  background: url(../image/ico-ttl.png) no-repeat 0 0;
  background-size: 100% auto;
  bottom: 0;
  content: "";
  height: .645em;
  margin: auto;
  position: absolute;
  top: 0;
  width: 1.0322em;
}

.sys_item_heading::before {
  left: 0;
}

.sys_item_heading::after {
  right: 0;
}

.sys_item_text {
  color: #fff;
  margin-top: 1.5em;
  text-align: left;
}

.sys_item_col:nth-of-type(2)>figure img:not([src*="spacer.gif"]) {
  width: 100%;
}

@media (min-width: 768px) and (max-width: 880px) {
  .sys_item_heading {
    font-size: 29px;
  }
}

@media (min-width: 768px) {
  .sys_item_wrap {
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 100% auto;
    border-radius: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 46px auto 0;
    padding: 5.698% 10% 5.583% 5.815%;
    width: 100%;
  }

  .sys_item_wrap:first-of-type {
    margin-top: 49px;
  }

  /* bg image type */
  .sys_item_wrap.type_art {
    background-color: #516e26;
    background-image: url(../image/bg-sys01.png);
  }

  .sys_item_wrap.type_get {
    background-color: #d24541;
    background-image: url(../image/bg-sys02.png);
    padding-bottom: 5.466%;
    padding-top: 5.583%;
  }

  .sys_item_wrap.type_rent {
    background-color: #c47e05;
    background-image: url(../image/bg-sys03.png);
    padding-bottom: 5.932%;
    padding-top: 5.932%;
  }

  .sys_item_wrap.type_data {
    background-color: #3c4b8d;
    background-image: url(../image/bg-sys04.png);
    padding-bottom: 4.42%;
    padding-top: 4.42%;
  }

  .sys_item_wrap.is_reverse {
    flex-direction: row-reverse;
  }

  /* column size */
  .type_art .sys_item_col:nth-of-type(1) {
    width: 45%;
  }

  .type_art .sys_item_col:nth-of-type(2) {
    width: 47.792%;
  }

  .type_get .sys_item_col:nth-of-type(1) {
    width: 45%;
  }

  .type_get .sys_item_col:nth-of-type(2) {
    width: 47.792%;
  }

  .type_rent .sys_item_col:nth-of-type(1) {
    width: 45%;
  }

  .type_rent .sys_item_col:nth-of-type(2) {
    width: 50.83%;
  }

  .type_data .sys_item_col:nth-of-type(1) {
    width: 45%;
  }

  .type_data .sys_item_col:nth-of-type(2) {
    width: 47.792%;
  }
}

@media (max-width: 767px) {
  .sys_item_wrap {
    margin: 20px auto 0;
    max-width: 550px;
    padding: 20px;
    width: 100%;
  }

  .sys_item_wrap:first-of-type {
    margin-top: 30px;
  }

  .sys_item_wrap.type_art {
    background-color: #516e26;
  }

  .sys_item_wrap.type_get {
    background-color: #d24541;
  }

  .sys_item_wrap.type_rent {
    background-color: #c47e05;
  }

  .sys_item_wrap.type_data {
    background-color: #3c4b8d;
  }

  .sys_item_col:nth-of-type(1) {
    text-align: center;
  }

  .sys_item_col:nth-of-type(2) {
    margin-top: 1.3em;
  }

  .sys_item_col:nth-of-type(2)>figure {
    margin: 0 auto;
    max-width: 346px;
    width: 100%;
  }

  .sys_item_heading {
    font-size: 24px;
  }

  .sys_item_text {
    margin-top: 1em;
  }
}