@charset "UTF-8";
@import url(breakpoints.css);

:root {
  /* 見出し バー色 */
  --var-c-head-border-from: #c3f07acb;
  --var-c-head-border-to: #209655c7;

  /* 環境理念 */
  --var-c-envhead-text: #35ad3f;
  --var-s-envhead-text: 40px;
  --var-c-env-border: #a75202;
  --var-s-env-border: 2px;
  --var-s-envrinen-text: 24px;

  /* リンク */
  --var-c-link-text: #0000FF;
  --var-s-buttonlink-text: 18px;
  --var-c-buttonlink-text: #4a4a91;
  --var-s-buttonlink-border: 2px;
  --var-c-buttonlink-border: #435a6b;
}

/* #region ===== 見出し ===== */
h2 {
  position: relative;
  padding: 1.5em 0.5em 0 0;
  font-size: 2rem;
}

h2:after {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(to right, var(--var-c-head-border-from), var(--var-c-head-border-to));
}

/* #endregion */

/* #region ===== 環境理念 ===== */
.environmental-over {
  margin: 10px auto;
  max-width: 720px;
}

.env_list {
  margin: 70px 0 0;
  position: relative;
}

.env_list._environmental dl {
  padding: 32px 0;
  position: relative;
  z-index: 3;
}

.env_list._environmental dl:before {
  content: "";
  width: 262px;
  height: 108px;
  position: absolute;
  right: -40px;
  bottom: -40px;
  z-index: 3;
  display: block;
}

.env_list._environmental dt {
  font-size: var(--var-s-envhead-text);
  color: var(--var-c-envhead-text);
  position: relative;
  z-index: 2;
  line-height: 1;
  font-weight: 500;
}

.env_list dt {
  width: 27.8%;
  font-weight: 700;
}

.env_list dl {
  border-top: var(--var-s-env-border) var(--var-c-env-border) solid;
  padding: 16px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.env_list ._head {
  margin-bottom: 5px;
  display: block;
  font-weight: 700;
  padding-left: 10px
}

.all_text {
  letter-spacing: 0.05em;
  line-height: 2;
}

.all_font_poppins {
  font-weight: 400;
  font-family: "Poppins", sans-serif;
}

.env_list._environmental dd {
  position: relative;
  z-index: 2;
}

.env_list dd {
  width: 77.2%;
}

.first_list ol {
  margin-left: 50px;
}

.env_text {
  font-size: var(--var-s-envrinen-text);
}


/* #endregion */

/* #region ===== 外部リンク ===== */
/* Omronのプッシュイン端子台へのリンク */
/*
a {
  color: var(--var-c-link-text);
  text-decoration: underline;
}

.button {
  font-size: var(--var-s-buttonlink-text);
  position: relative;
  padding: 1em 1.5em;
  border: none;
  background-color: transparent;
  cursor: pointer;
  outline: none;
  margin: 1em 0.8em;
}

.button.annotation {
  color: var(--var-c-buttonlink-text);
  text-decoration: underline;
}

.button.annotation.annotation::after,
.button.annotation.annotation::before {
  border: var(--var-s-buttonlink-border) solid;
  content: "";
  display: block;
  position: absolute;
  width: 20%;
  height: 20%;
  transition: all 0.6s ease;
  border-radius: 2px;
}

.button.annotation.annotation::after {
  border-bottom-color: var(--var-c-buttonlink-border);
  border-right-color: var(--var-c-buttonlink-border);
  bottom: 0;
  right: 0;
  border-top-color: transparent;
  border-left-color: transparent;
}

.button.annotation.annotation::before {
  border-top-color: var(--var-c-buttonlink-border);
  border-left-color: var(--var-c-buttonlink-border);
  top: 0;
  left: 0;
  border-bottom-color: transparent;
  border-right-color: transparent;
}

.button.annotation.annotation:hover:after,
.button.annotation.annotation:hover:before {
  border-bottom-color: var(--var-c-buttonlink-border);
  border-right-color: var(--var-c-buttonlink-border);
  border-top-color: var(--var-c-buttonlink-border);
  border-left-color: var(--var-c-buttonlink-border);
  width: 100%;
  height: 100%;
}
*/
.center {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0px 3%;
  justify-content: center;
}


/* #endregion */