/*
Theme Name:	rpportal
Theme URL: 
Description: RUIプロダクション内部向けポータルサイト
Author: Haruka Miyahara
Version: 1.0.0
*/

/*
  Josh W. Comeau's Custom CSS Reset
  www.joshwcomeau.com
*/

/* 1. ボックスモデルの修正：余白や境界線が幅を壊さないようにする */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. デフォルトの余白を削除 */
* {
  margin: 0;
}

/* 3. 本文の行間を整え、フォントのレンダリングを滑らかにする */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 4. メディア要素（画像など）がはみ出さないようにし、ブロック要素化する */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 5. フォーム要素が親のフォント設定を無視するのを防ぐ */
input, button, textarea, select {
  font: inherit;
}

/* 6. 長い単語が画面からはみ出して横スクロールが出るのを防ぐ */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 7. ルート（#rootや#__nextなど）にスタック文脈を作成する（Reactなどのフレームワーク用） */
#root, #__next {
  isolation: isolate;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

:root {
  --text-color: #222233;
  --logo-color: #030b58;
  --appear-color: #ec6d71;
  --kentei-color: #0094c8;
  --event-color: #f39800;
  --column-color: #7058a3;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: "Questrial", "Sawarabi Gothic", sans-serif;
  color: var(--text-color);
  padding: 0 auto;
  background: #FAFAFC;
  background: linear-gradient(180deg, rgba(250, 250, 252, 1) 20%, rgba(236, 239, 247, 1) 70%);
}

header, main {
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5rem;
}

footer {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2rem;
  padding-bottom: 1rem;
  background:
    linear-gradient(80deg, rgba(236, 239, 247, 0) 0%, rgba(236, 239, 247, 0.8) 100%),
    url(./images/bg.png);
}

.part-title, .part-title-s, .part-title-l {
  width: 100%;
  color: var(--logo-color);
  border-bottom: 1px solid var(--logo-color);
  font-size: 2rem;
  letter-spacing: 0.1rem;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  padding-bottom: 0.5rem;
  margin-bottom: 2rem;
}

.part-title-l {
  font-size: 2.5rem;
  margin-bottom: 2.5rem;
}

.part-title-s {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

/* header */
header a, header a:hover {
  text-decoration: none;
}

#header-logo {
  width: 90%;
  max-width: 300px;
  margin: 3rem auto 0;
}
#header-title {
  color: var(--logo-color);
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  text-align: center;
  font-size: 2.4rem;
  line-height: 3rem;
  letter-spacing: 0.8rem;
  margin-top: 0.5rem;
  margin-bottom: 3rem;
}

/* footer */
#footer-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 1fr;
  grid-column-gap: 1rem;
  grid-row-gap: 0px;
  padding: 0;
  overflow: hidden;
}

#footer-nav {
  grid-column: span 1;
  text-align: center;
}

#footer-logo {
  width: 100%;
  max-width: 120px;
  margin: 0 auto;
}

#footer-nav ul {
  margin: 0;
  margin-top: 1rem;
  padding: 0;
}

#footer-nav li {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 2rem;
}

#footer-nav a, #footer-nav a:hover {
  text-decoration: none;
  color: var(--text-color);
}

#staff {
  grid-column: span 1;
}

#staff ul {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  margin: 0;
  padding: 0;
}

#staff li {
  aspect-ratio: 1 / 1;
  background-color: rgba(100, 100, 100, 0.5);
  grid-column: span 1;
  list-style: none;
  overflow: hidden;
  text-decoration: none;
  background-size: cover; 
  background-position: center center;
}

#staff li > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  padding: 0.5rem;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 30%);
}

.staff-name {
  text-align: right;
  font-size: 0.9rem;
  height: 0.9rem;
  line-height: 0.9rem;
  color: #FFFFFF;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* copyright */
#copy {
  grid-column: span 2;
  margin-top: 4rem;
  text-align: center;
  font-size: 0.8rem;
}

/* category */
.category {
  display: inline-block;
  padding: 0 1rem;
  line-height: 2rem;
  color: #FFFFFF;
  font-weight: 700;
}

.category.appear { background-color: var(--appear-color); }
.category.kentei { background-color: var(--kentei-color); }
.category.event { background-color: var(--event-color); }
.category.column { background-color: var(--column-color); }

img.no-save {
  pointer-events: none;
}

main {
  margin-bottom: 2rem;
}

/* post */
#post ul {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  margin: 0;
  padding: 0;
}

#post li {
  width: 100%;
  grid-column: span 1;
  list-style: none;
  overflow: hidden;
}

#post a {
  aspect-ratio: 6 / 1;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-template-rows: 2fr 1fr;
  grid-column-gap: 0;
  grid-row-gap: 0;
  text-decoration: none;
}

#post a > div {
  word-break: break-all;
}

#post .post-thumb {
  grid-column: span 1;
  grid-row: span 3;
  background-size: cover;
  background-position: center center;
}

#post .post-title {
  grid-column: span 1;
  grid-row: span 2;
  padding-left: 1rem;
  font-size: 1.4rem;
  display: flex;
  flex-direction: row;
  align-items: center;
}

#post a:hover .post-title {
  text-decoration: underline !important;
}

#post .post-info {
  grid-column: span 1;
  grid-row: span 1;
  padding-left: 1rem;
  display: flex;
  flex-direction: row;
}

#post .post-info div {
  padding: 0 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
}

#post .category span {
  color: #FFFFFF;
}

#post .post-info .post-date {
  color: var(--text-color);
}

/* パンくずリスト */
#breadcrumb {
  color: var(--logo-color);
  margin-bottom: 2rem;
}

#breadcrumb a {
  color: var(--logo-color);
  text-decoration: underline;
}

#page-navi {
  margin-top: 2rem;
  text-align: center;
}

#page-navi > * {
  font-size: 1.2rem;
  color: var(--text-color);
  margin: 0 0.2rem;
}

#page-navi a {
  text-decoration: underline;
}