#gnav {
  position: relative;
  width: 100%;
  text-align: center;
  padding: 0;
  z-index: 1;

  /* heroエリアに重ねる */
  margin-top: -120px;
  margin-bottom: 60px;
}

#gnav.fixed {
  position: fixed;
  top: calc(var(--base-spacing-height)*2/3) !important;
  left: 0 !important;
//  z-index: 1000;
  animation: none;
  opacity: 0.9;
  z-index: 2;

  /* heroエリアに重ねた分をリセット */
  margin-top: 0;
  margin-bottom: 0;
}

#gnav.bounce {
  animation: bounceIn 0.5s ease;
}

#gnav-list {
  width: calc(var(--base-page-width) + var(--base-spacing-width)*2);
  margin: 0 auto;
  padding: 0;
//  padding-top: 60px;
//  margin-top: -60px;
  height: 60px;
  background-color: var(--base-color-primary);
//  box-shadow: 3px 3px 5px 0px rgba(125, 125, 125, 0.2);
  border-radius: var(--base-border-radius);
  line-height: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
}

#gnav.bounce #gnav-list {
}

.gnav-item {
  display: inline-block;
}

.gnav-link {
  display: inline-block;
  height: 1em;
  width: auto;
  margin: 0 1em;
  line-height: 1em;
  font-style: normal;
  color: var(--base-color-white);
  font-size: var(--base-font-size);
  text-decoration: none;
}

.gnav-link:not(.deactive):hover {
  text-decoration: underline;
}

.gnav-link.deactive {
  opacity: 0.3;
}

main {
//  width: var(--base-page-width);
//  margin-left: auto;
//  margin-right: auto;
//  margin-top: calc(var(--base-spacing-height)*3/2);
}

#hero-container {
  width: 100%;
  background-image: url('../images/hero_bg.png');
  background-position: left top;
  background-repeat: repeat;
  background-size: 5px;
}

#hero {
  width: 802px;
  padding-top: calc(var(--base-spacing-height)*3/2);
  padding-bottom: calc(var(--base-spacing-height)*6);
  padding-left: 49px;
  padding-right: 49px;
  margin-left: auto;
  margin-right: auto;
  background-image: url('../images/hero_illust.png');
  background-position: 450px 190px;
  background-repeat: no-repeat;
}

#hero-ghg-logo-container {
  margin-top: calc(var(--base-spacing-height)*2);
}


#hero-sustainability-logo-container {
  margin-top: calc(var(--base-spacing-height));
}

#hero-note {
  margin-top: calc(var(--base-spacing-height));
  font-size: calc(var(--base-font-size)*0.85);
  width: 390px;
  line-height: 1.6em;
  color: var(--base-color-primary);
}

#contents {
  width: var(--base-page-width);
  margin: 0 auto;
  padding-top: calc(var(--base-spacing-height)*3/2);
}

#news-filter {
  text-align: right;
  width: 100%;
}

.news-filter-item {
  display: inline-block;
  background-color: var(--base-color-black);
  color: var(--base-color-white);
//  border: solid 1px var(--base-color-black);
  font-size: calc(var(--base-font-size)*0.8);
  line-height: 1em;
  width: 6em;
//  border-radius: 1em;
  padding: 0.5em 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.3;
}

.news-filter-item.active {
/*
  background-color: var(--base-color-black);
  color: var(--base-color-white);
*/
  opacity: 1;
}

#news-content {
  margin-top: calc(var(--base-spacing-height)*1/2);
  text-align: left;
  list-style-type: none;
}

.news-list-item {
  margin-top: calc(var(--base-spacing-height)*1/2);
  padding-bottom: calc(var(--base-spacing-height)*1/2);
  border-bottom: solid 2px #999999;
//  border-bottom: solid 1px var(--base-color-black);
}

.news-list-item.is-first {
  margin-top: 0;
}

.news-list-item.is-last {
  border-bottom: none;
  padding-bottom: 0;
}

.news-list-item a {
  color: var(--base-color-black);
  text-decoration: none;
}

.news-list-item a:hover {
  text-decoration: underline;
}

.news-list-item-date.new {
  color: var(--base-color-red);
}

.news-list-item-type {
  display: inline-block;
  border: solid 1px var(--base-color-black);
//  color: var(--base-color-white);
  font-size: calc(var(--base-font-size)*0.8);
  line-height: 1em;
  width: 6em;
//  border-radius: 1em;
  padding: 0.5em 0;
  text-align: center;
  margin-left: calc(var(--base-spacing-width)*1/3);
}

.news-list-item-content {
  margin-top: calc(var(--base-spacing-height)*1/5);
}

#about {
  margin-top: calc(var(--base-spacing-height)*3/2);
}

#about-title {
  font-size: calc(var(--base-font-size)*1.6);
}

#about-title-icon {
  vertical-align: -0.8em;
  margin-right: 0.2em;
}

#about-text {
  font-size: calc(var(--base-font-size)*1.2);
  line-height: 1.7em;
}

#inquiry {
  margin-top: calc(var(--base-spacing-height)*3/2);
}

#inquiry-text {
  text-align: center;
  font-size: calc(var(--base-font-size)*1.2);
}

#inquiry-button-container {
  margin-top: calc(var(--base-spacing-height));
}

#v_v_process {
  margin-top: calc(var(--base-spacing-height)*3/2);
}

#v_v_process-title {
  font-size: calc(var(--base-font-size)*1.6);
}

#v_v_process-title-icon {
  vertical-align: -0.8em;
  margin-right: 0.3em;
}

#v_v_process-text {
  margin-top: calc(var(--base-spacing-height));
  text-align: center;
  line-height: 1.6em;
}

#v_v_process-details {
  margin-top: calc(var(--base-spacing-height)*2/3);
  display: none; /* default */
  transition: height 0.5s ease;
}

#v_v_process-details-button-cotainer {
//  margin-top: 0;
  margin-top: calc(var(--base-spacing-height)*2/3);
  text-align: center;
}

#v_v_process-details-button {
  display: inline-block;
  width: 10em;
  padding: 0.5em 0;
  line-height: 1em;
  text-align: center;
  color: var(--base-color-black) !important;
//  background-color: #aaaaaa;
  font-size: calc(var(--base-font-size)*0.85);
  text-decoration: none !important;
  border: solid 1px var(--base-color-black);
  border-radius: calc(var(--base-border-radius)/5);
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

#v_v_process-details-button:hover {
  cursor: pointer;
  opacity: 0.7;
}

#v_v_process-details-button .material-symbols-outlined {
  margin-right: 0.1em;
  line-height: 0.8em;
  vertical-align: -0.25em;
}

.base_article-list.v_v_process-fig {
  text-align: left;
}

#v_v_process-fig-image {
  margin-top: calc(var(--base-spacing-height)*2/3);
}