@charset "UTF-8";

/* 202505 リニューアル用 style */
:root {
  --color-base: 255 255 255;
  /*#fff*/
  --color-base-2: 242 242 242;
  /*#F2F2F2*/
  --color-contrast: 34 34 34;
  /*#222*/
  --color-contrast-2: 144 144 144;
  /*#909090*/
  --color-primary: 0 159 232;
  /*#009fe8*/
  --color-primary-2: 0 109 232;
  /*#006de8*/
  --color-primary-light: 239 247 251;
  /*#eff7fb*/
  --color-accent: 255 156 0;
  /*#ff9c00*/
  --color-accent-2: 255 102 0;
  /*#ff6600*/
  --color-accent-light: 254 245 230;
  /*#fef5e6*/
  --color-accent-3: 220 57 45;
  /*#DC392D*/

  /* 最小ビューポート px */
  --minViewport-default: 320;
  /* 最大ビューポート px */
  --maxViewport-default: 1200;
  /* 1remのpx数 */
  --font-remBase: 10;
}

/* icon */
/*------------------------------------------- */
.sidebar .icon {
  width: 3.2rem;
  height: 3.2rem;
  display: grid;
  place-content: center;
  /* background-color: rgb(var(--color-contrast) / 20%); */
  border-radius: 50%;
  margin: 0 0.5em 0 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 2rem;
}

.icon-home {
  background-image: url(/assets/img/mypage/icon-home.svg);
}

.icon-exam {
  background-image: url(/assets/img/mypage/icon-exam.svg);
}

.icon-study {
  background-image: url(/assets/img/mypage/icon-study.svg);
}

.icon-entry {
  background-image: url(/assets/img/mypage/icon-entry.svg);
}

.icon-user {
  background-image: url(/assets/img/mypage/icon-user.svg);
}

/* layout */
/* ------------------------------------------- */

.post_content {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.postBox {
  width: 100%;
  order: 2;
  float: none;
  padding: 0;
}

.sidebar {
  width: 100%;
  order: 1;
  float: none;
  margin: 0 0 3em;
}

/* sidebar */
/* ------------------------------------------- */
.side-inner {
  width: 100%;
  padding: 0 0 1em;
  border-bottom: 1px solid rgb(var(--color-base-2));
}

.side-ttl {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 0 0 1rem;
  padding: 0 0 0.8rem;
  border-bottom: 2px solid rgb(var(--color-primary));
}

.side-menu {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.side-menu-item {
  width: 100%;
  margin: 0 0 0.5em;
  border-radius: 1rem;
  font-size: 1.6rem;
}

.side-menu-item:has(.is-active) {
  background-color: rgb(var(--color-base-2));
}

.side-menu-item>a {
  width: 100%;
  padding: 1em 1.5em 1em 3em;
  border-radius: 100vmax;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: bold;
  position: relative;
}

.side-menu-item:not(:has(.icon))>a::before {
  content: "";
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background-color: rgb(var(--color-primary));
  position: absolute;
  top: 50%;
  left: 1.25em;
  transform: translateY(-50%);
}

.side-menu-item>a:hover {
  background-color: rgb(var(--color-base-2));
}

.side-menu-item .icon {
  position: absolute;
  top: 50%;
  left: 0.5em;
  transform: translateY(-50%);
}

.side-menu-item>.parent {}

.side-menu-item>.parent::after {
  content: "\f078";
  display: block;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-size: 1.4rem;
  color: rgb(var(--color-primary));
  width: 1.6rem;
  height: 1.6rem;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  position: absolute;
  top: 50%;
  right: 0.5em;
  transform: translateY(-50%);
  transition: transform 0.2s;
}

.side-menu-item>.parent.is-active::after {
  color: rgb(var(--color-primary));
  transform: translateY(-50%) rotate(180deg);
}

.side-menu-child {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 0 0 2em;
}

.child-menu-item {
  font-size: 0.875em;
}

.child-menu-item>a {
  display: block;
  width: 100%;
  font-weight: normal;
  padding: 0.5em 0 0.5em 1em;
  position: relative;
}

.child-menu-item>a::before {
  content: "";
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: rgb(var(--color-primary));
  position: absolute;
  left: 0;
  top: 1.1em;
}

.js-drop-container {
  /* display: none; */
  height: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  /* transition: height 0.5s, opacity 0.5s 0.25s; */
}

.js-drop-container.is-active {
  /* display: flex; */
  margin: 0.5em 0 1em;
  height: auto;
  opacity: 1;
  visibility: visible;
}

/* post-style 上書き */
/*------------------------------------------- */
.post-item.is-round {
  border-radius: 2rem;
  padding: 1em 0;
  box-shadow: 0 0 8px rgb(var(--color-contrast) / 20%);
}

.postBox .item-ttl {
  padding: 0 0.75em 0.5em;
  background: none;
  border-bottom: 2px solid rgb(var(--color-primary));
  /* 最小ビューポート */
  --clamp-minViewportPx: var(--minViewport-default);
  /* 最大ビューポート */
  --clamp-maxViewportPx: var(--maxViewport-default);
  /* 最小文字サイズ */
  --clamp-minPx: 22;
  /* 最大文字サイズ */
  --clamp-maxPx: 24;
  /* 必要な計算 */
  --clamp-calc-var: calc((var(--clamp-maxPx) - var(--clamp-minPx)) / (var(--clamp-maxViewportPx) - var(--clamp-minViewportPx)));
  --clamp-constant: calc((var(--clamp-maxPx) - var(--clamp-maxViewportPx) * var(--clamp-calc-var)) / var(--font-remBase));
  /* font-size: 2.8rem; */
  font-size: clamp(calc(var(--clamp-minPx) * (1rem / var(--font-remBase))),
      calc((var(--clamp-constant) * 1rem)) + ((100 * var(--clamp-calc-var)) * 1vw),
      calc(var(--clamp-maxPx) * (1rem / var(--font-remBase))));
}

.postBox .post-list {
  padding: 0 1.5em;
}

.postBox .post-list+.btn {
  margin-top: 2em;
}

.postBox .post-list-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.5em;
  border-bottom: 1px solid rgb(var(--color-contrast) / 20%);
}

.postBox .post-list-item::before {
  display: none;
}

.post-list-item .post-ttl {
  width: 100%;
  padding: 0;
  border-bottom: none;
  margin: 0.5em 0;
  font-weight: normal;
  font-size: 1.6rem;
  line-height: 1.6;
}

.post-list-item .post-ttl::before {
  display: none;
}

.postBox .post-ttl a {
  width: 100%;
  display: block;
  color: rgb(var(--color-contrast));
  text-decoration: none;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.postBox .post-ttl a:hover {
  color: rgb(var(--color-primary));
}


.postdate {
  display: block;
  font-style: normal;
  font-weight: normal;
  color: rgb(var(--color-contrast-2));
  /* 最小ビューポート */
  --clamp-minViewportPx: var(--minViewport-default);
  /* 最大ビューポート */
  --clamp-maxViewportPx: var(--maxViewport-default);
  /* 最小文字サイズ */
  --clamp-minPx: 12;
  /* 最大文字サイズ */
  --clamp-maxPx: 14;
  /* 必要な計算 */
  --clamp-calc-var: calc((var(--clamp-maxPx) - var(--clamp-minPx)) / (var(--clamp-maxViewportPx) - var(--clamp-minViewportPx)));
  --clamp-constant: calc((var(--clamp-maxPx) - var(--clamp-maxViewportPx) * var(--clamp-calc-var)) / var(--font-remBase));
  /* font-size: 2.8rem; */
  font-size: clamp(calc(var(--clamp-minPx) * (1rem / var(--font-remBase))),
      calc((var(--clamp-constant) * 1rem)) + ((100 * var(--clamp-calc-var)) * 1vw),
      calc(var(--clamp-maxPx) * (1rem / var(--font-remBase))));
}

.post-tag {
  display: inline-block;
  color: rgb(var(--color-base));
  text-align: center;
  font-weight: bold;
  padding: 0 0.75em;
  border-radius: 100vmax;
  min-width: 8rem;
  margin: 0.4rem 0.8rem 0.4rem 0;
  background-color: rgb(var(--color-primary));
  /* 最小ビューポート */
  --clamp-minViewportPx: var(--minViewport-default);
  /* 最大ビューポート */
  --clamp-maxViewportPx: var(--maxViewport-default);
  /* 最小文字サイズ */
  --clamp-minPx: 12;
  /* 最大文字サイズ */
  --clamp-maxPx: 14;
  /* 必要な計算 */
  --clamp-calc-var: calc((var(--clamp-maxPx) - var(--clamp-minPx)) / (var(--clamp-maxViewportPx) - var(--clamp-minViewportPx)));
  --clamp-constant: calc((var(--clamp-maxPx) - var(--clamp-maxViewportPx) * var(--clamp-calc-var)) / var(--font-remBase));

  font-size: clamp(calc(var(--clamp-minPx) * (1rem / var(--font-remBase))),
      calc((var(--clamp-constant) * 1rem)) + ((100 * var(--clamp-calc-var)) * 1vw),
      calc(var(--clamp-maxPx) * (1rem / var(--font-remBase))));
}

.post-tag.tag-exam {
  background-color: rgb(var(--color-accent));
}

.post-tag.tag-important {
  background-color: rgb(var(--color-accent-3));
}

.postdate + .post-tag {
  margin-left: 0.8rem;
}

.post-info {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.post-info+.post-ttl {
  margin-top: 1.2rem;
}

@media screen and (min-width:480px) {
  /* ------------------------------------- */
  /* contents */
  /* ------------------------------------- */

}

@media screen and (min-width:768px) {
  /* ------------------------------------- */
  /* contents */
  /* ------------------------------------- */

}

@media screen and (min-width:1025px) {
  /* layout */
  /* ------------------------------------------- */

  .post_content {
    flex-wrap: nowrap;
  }

  .postBox {
    width: calc(100% - 280px);
    order: 1;
    padding: 0 6% 0 0;
  }

  .sidebar {
    width: 280px;
    order: 2;
    margin: 0 0 3em;
  }

  /* sidebar 上書き */
  /*------------------------------------------- */
  .side-inner {
    padding: 0;
    border-bottom: none;
  }

  .side-menu-item {
    /* padding: 0.5em; */
    margin: 0 0 0.5em;
  }
}

@media (orientation: landscape) and (max-width: 767px) {
  /* デバイスが横向き、画面の横幅が 767px 以下の場合の記述 */
}