/* 全体に適用 */

main {
  text-align: left;
  right: 0;
  left: 0;
  margin: auto;
}

h1 {
  position: absolute;
  top: 57%;
  left: 15%;
  margin: 0;
  padding: 0;
  font-size: 40px;
}

h2 {
  font-size: 22px;
  text-align: center;
  margin: 2em 0 0 0;
  padding: 0;
}

h3 {
  font-size: 20px;
  display: inline-block;
  text-align: center;
  border-bottom: 2px solid #666666;
  margin-top: 2em;
}

/* 背景画像 */
.background_image {
  position: relative;
  width: 780px;
  margin: 0 auto;
}

/* 背景画像に設定する画像 */
.background_image img {
  width: 100%;
}

/* 背景色設定（グレー） */
.background_color {
  background: #f0f0f0;
  text-align: center;
  padding: 0 0 2em 0;
  margin: 0 0 2em 0;
}


/* イントロダクション */
.introduction .paragraph_top {
  position: absolute;
  left: 52%;
  top: 13%;
  margin: 0;
  padding: 0;
  font-size: 20px;
  text-align: left;
  color: white;
  width: 370px;
  border-bottom: none;
}

.introduction .paragraph_bottom {
  position: absolute;
  left: 52%;
  top: 55%;
  margin: 0;
  padding: 0;
  font-size: 20px;
  text-align: left;
  color: white;
  width: 370px;
  border-bottom: none;
}


/* Zabbix 注釈 */
.annotation {
  text-align: right;
  font-size: 10px;
}


/* アルビクスはこのような監視システム導入の悩みにお答えします */

.want h2 {
  font-family: serif;
  font-weight: bold;
  font-size: 24px;
  letter-spacing: -1px;
  color: black;
  padding: 10px 0;
}

.want ul {
  list-style: none;
  padding: 0;
}

.want li {
  background: url(../../image/point_s-3-2.png) center no-repeat;
  font-size: 24px;
  font-weight: bold;
  color: #ff0000;
  padding: 20px;
}


/* 監視サービスとは */
.what h2 {
  position: absolute;
  top: 44%;
  left: 63%;
  margin: 0;
  padding: 0;
  font-size: 28px;
  font-weight: bold;
  text-align: left;
  color: white;
  width: 370px;
}

.what p {
  position: absolute;
  top: 8%;
  left: 4%;
  margin: 0;
  padding: 0;
  font-size: 20px;
  text-align: left;
  color: white;
  width: 400px;
}


/* サービスの特長 −監視イメージ*/

/* サービスの特長 −監視項目（一例）*/
table {
  border-collapse: collapse;
  width: 700px;
  background-color: #f3f3f3;
  margin: 0 auto;
}

table th, table td {
  border: solid 1px #ffffff;
  padding: 5px;
  text-align: left;
}

table th {
  color: #ffffff;
  background-color: #000000;
}

.item-col {
  width: 30%;
}

table tbody tr:nth-child(odd){
  background-color: #cccccc;
}

table tbody tr:nth-child(even) {
  background-color: #eeeeee;
}


/* サービスの特長 −監視規模*/
.ui {
  text-align: left;
  padding: 0 60px;
}

.ui h4 {
  margin: 40px 0px 0px 0px;
}

.ui p {
  margin: 0;
}

.movie {
  background: #ffffd6;
  width: 90%;
  padding: 10px;
  margin: 15px auto 0px auto;
  text-align: center;
}


/* 外部通知 */
.notice .mail_slack {
  width: 252px;
  vertical-align: middle;
}

.notice p {
  display: inline-block;
  vertical-align: middle;
  margin: 0 20px;
  text-align: left;
  font-size: 18px;
}

.notice figure {
  margin-top: 20px;
}


/* アルビクスの強み */
.strength {
  background: url(../../image/point_s-12-2.png) center no-repeat;
  text-align: center;
  margin-bottom: 30px;
  padding: 15px 0;
}

.strength ul {
  list-style: none;
  padding: 0;
}

.strength li {
  background: url(../../image/point_s-12-3.png) center no-repeat;
  font-size: 24px;
  font-weight: bold;
  color: #ff0000;
  padding: 20px;
}


/* カスタマイズできる監視ソフト */

.customize h2 {
  position: absolute;
  top: 44%;
  left: 3%;
  margin: 0;
  padding: 0;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: -1.5px;
  text-align: left;
  color: white;
  width: 400px;
}

.customize p {
  position: absolute;
  top: 12%;
  left: 50%;
  margin: 0;
  padding: 0;
  font-size: 23px;
  text-align: left;
  color: white;
  width: 350px;
}


/* 主な共通機能 */

.function {
  text-align: center;
}

.function p {
  font-size: 20px;
  margin-bottom: 2em;
}

/* Prometheusの特長／Zabbixの特長 */
.good_point {
  position: relative;
  width: 700px;
  margin: 20px auto;
  padding: 0;
}

.good_point h2 {
  position: absolute;
  top: 10px;
  left: 0px;
  margin: 0 auto;
  padding: 0;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  width: 700px;
}

.good_point p {
  position: absolute;
  top: 60px;
  left: 20px;
  margin: 0;
  padding: 0;
  font-size: 22px;
  text-align: left;
  width: 660px;
  line-height: 1.3em;
}


/* 料金　※非表示 */

.price div {
  padding: 10px 50px;
  text-align: left;
}

.price dl {
  font-size: 16px;
}

.price dt {
  display: list-item;
  list-style-type: circle;
  margin-top: 20px;
}

/* 納期　※非表示 */

/* .deadline div {
  padding: 10px 50px;
  text-align: left;
}

.deadline ul {
  list-style-type: circle;
  font-size: 16px;
} */