:root {
  --subpage-sec-font-title: "Zen Antique", serif;
  --subpage-sec-font-text: "Zen Kaku Gothic New", sans-serif;
  --color-gold : #BE9768;
}

.subpage-header-title {
  position: absolute;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  z-index: 1;
  color: #fff;
  writing-mode: vertical-rl;
  font-family: var(--subpage-sec-font-title);

  .ja {
    margin: 0;
    text-orientation: upright;
    font-size: 40px;
  }

  .en {
    margin: 0;
    font-size: 20px;
  }
}

.subpage-header-title+.top-hero-image {
  filter: brightness(0.3);
  width: 100%;
  object-fit: cover;
}

.subpage-breadcrumbs {
  font-family: var(--subpage-sec-font-text);
  display: flex;
  gap: 10px;
  font-size: 14px;
  padding-block: 8px;

  >p {
    margin: 0;
  }

  >p:not(:first-child)::before {
    content: ">";
    margin-right: 10px;
  }
}

#root {
  background:
    url("../images/20260421235134556007.png") right top / 34rem auto no-repeat,
    url("../images/20260421235134911062.png") center top / 100% auto repeat-y,
    #fbf8f0;
}

.breadcrumb-area {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 40px;
  padding-top: 150px;
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  letter-spacing: 0.05em;
}



/* data block */
#newsCatList {
  display : flex;
  align-items : center;
  justify-content : center;
  gap : 1.5rem;
  padding-top : 6rem;
  a {
    border : 1px solid var(--color-gold);
    background-color : #fff;
    font-size : 20px;
    line-height : 1;
    display : block;
    padding : 0.5rem 1rem;
  }
  a.is-current,
  a:hover {
    background-color : var(--color-gold);
    color : #fff;
  }
}

#archiveNews,
#detailNews {
  font-family: var(--subpage-sec-font-text);
  line-height: 1.7;
  width : 100%;
  margin-inline : auto;
  padding-block :  6rem;
  border: none;
  .webgene-item:not(:last-child) {
    border-bottom : 1px solid #000;
    padding-bottom : 1.5rem;
    margin-bottom : 1.5rem;
  }
  .webgene-item-info {
    margin-bottom : 1.5rem;
    line-height : 1;
  }
  .webgene-item-info + div {
    gap : 0.5rem 1rem;
  }
  .blogItemCategory {
    display : inline-block;
    background-color : var(--color-gold);
    color : #fff;
    min-width : 144px;
    text-align : center;
    line-height : 1;
    padding : 0.5rem 1rem;
  }
  a {
    flex : 1;
    display : flex;
    gap : 1.5rem;
    color : inherit;
    transition : opacity .3s;
  }
  a:hover {
    opacity: .6;
  }
}
.webgene-pagination {
  grid-column : 1 / -1;
}
#archiveNews .webgene-pagination ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    list-style: none;
    padding: 0;
}

#archiveNews .webgene-pagination a {
    text-decoration: none;
    border: 1px solid var(--color-gold);
    background-color: #fff;
    color: var(--color-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0.2em 0.5em;
    transition: .3s;
}

#archiveNews .webgene-pagination .selected a,
#archiveNews .webgene-pagination a:hover {
    background-color: var(--color-gold);
    color: #fff;
}


/* 投稿ページ */
.post-content-area {
	font-family : var(--color-gold);
  	max-width : 1090px;
  	position : relative;
  	padding-block : 3rem;
  h1 {
    font-size : 1.5rem;
    line-height : 1.8;
    font-family : var( --subpage-sec-font-title);
    border-bottom: 1px solid;
    margin-top: 1rem;
    margin-bottom : 2rem;
    padding-bottom: 1rem;
  }
  h2 {
	font-size : 1.25rem;
    line-height : 1.7;
    border-left : 5px solid var(--color-gold);
    padding-left : 1.5rem;
    padding-block : 3px;
    margin-bottom : 1.5rem;
    margin-top : 4rem;
  }
    h3 {
	font-size : 1.2rem;
    line-height : 1.7;
    margin-bottom : 1rem;
    margin-top : 2rem;
  }
  p + p {
    margin-top : 1rem;
  }
  a {
    color : inherit;
    text-decoration : underline;
  }
  .youtube-area iframe {
    width : 100%;
    height : auto;
    aspect-ratio : 16/9;
  }
  h1 + .post-content-date {
    margin-top : -2.5rem;
    line-height : 1;
    white-space : nowrap;
    margin-bottom : 4rem;
  }
  .post-content-back .btn.btn-back-archive a {
    font-family: var(--subpage-sec-font-title);
    font-size : 1rem;
    line-height : 1;
    border-radius : 100%;
    gap: 10px !important;
    width: 128px;
    aspect-ratio: 1/1;
    display : flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration : none;
    background-color: var(--color-gold);
    color:  #fff !important;
  }
   .post-content-back .btn.btn-back-archive a:after {
    content: "→";
    color: #000;
    background-color: #fff;
    border-radius: 100%;
    padding : 0.1rem;
    color: var(--color-gold);
   }
}