/*
Theme Name: Liberal Theme v5.4
Theme URI: https://hogehoge.jp
Author: にしはら
Author URI: https://hogehoge.jp
Version: 5.4
*/
/*--------------
 HEADER
---------------*/
header.l-header {
  background: #000000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  height: 80px;
  padding: 0 24px 0 29px;
}

.logo .site-name {
  width: 240px;
}

nav.header-menu {
  display: flex;
  justify-content: end;
}

ul.navbar {
  align-items: center;
  justify-content: flex-end;
}

ul.navbar li a {
  color: #fff;
  padding: 1rem 0.8rem;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px; /* 171.429% */
  letter-spacing: 0.7px;
}

ul.navbar li a:hover {
  opacity: 0.7;
}

.title-wrap {
  padding: 64px 36px 30px;
  max-width: 1200px;
  margin: auto;
}

h1.top-heading-title {
  text-align: left;
  color: #333;
  font-family: Barlow;
  font-size: 34px;
  font-weight: 700;
  line-height: 133%;
  letter-spacing: 3.4px;
}

.top-heading-title small {
  font-family: Barlow;
  font-size: 24px;
  font-weight: 500;
  line-height: 133%;
}

h2.top-heading-sub-title {
  color: #333;
  font-size: 14px;
  font-weight: 600;
  line-height: 133%; /* 18.62px */
  letter-spacing: 0.7px;
}

.title-wrap p {
  color: #333;
  font-size: 16px;
  font-weight: 300;
  line-height: 150%;
  letter-spacing: 0.8px;
  margin: 32px 0 0;
}

form#searchform {
  display: block;
  margin-left: 12px;
}

form#searchform input {
  display: block;
  background: rgba(90, 90, 90, 0.5);
  height: 48px;
  width: 240px;
  border-radius: 30px;
  padding-left: 34px;
  color: #aeaeae;
  border: none;
  outline: none;
}
@media (max-width: 960px) {
  form#searchform input {
    width: 193px;
  }
}

input::placeholder {
  color: #aeaeae;
  font-size: 14px;
  letter-spacing: 0.7px;
}

.icon-search {
  color: #aeaeae;
}

.main-vidual {
  background: #fff;
}

#breadcrumb {
  padding-left: 12px;
}

@media (max-width: 960px) {
  .title-wrap {
    padding: 24px 12px 24px;
    margin: 0;
  }

  h1.top-heading-title {
    font-size: 28px;
  }

  .top-heading-title small {
    font-size: 20px;
  }

  h2.top-heading-sub-title {
    font-size: 12px;
  }

  .title-wrap p {
    font-size: 13px;
    margin: 16px 0 0;
  }
  form#searchform {
    display: none;
  }

  form#searchform-m {
    padding: 16px 8px 12px;
  }

  form#searchform-m input {
    display: block;
    background: rgba(90, 90, 90, 0.5);
    border-radius: 30px;
    padding-left: 34px;
    color: #aeaeae;
    border: none;
    outline: none;
  }
}

.inner-l-flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.to-liberary_lab {
  color: #fff;
  font-family: Barlow;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0.42px;
  text-transform: none;
  padding: 6px 11px;
  display: inline-block;
  border: 1px solid #f2f2f2;
  border-radius: 24px;
  margin-left: 24px;
}

.to-liberary_lab .text-lab {
  color: #fff;
  font-family: Barlow;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  text-transform: none;
}

@media (max-width: 960px) {
  .to-liberary_lab {
    display: none;
  }
}
/*--------------
 INDEX
---------------*/

.index-title {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.index-title h1 {
  font-size: 1.3rem;
  text-align: center;
  font-size: 24px;
  margin: 60px 0 40px;
}

section.cat-section {
  text-align: center;
  margin-top: 30px;
}

.l-cat-items img {
  width: 100%;
}

.l-cat-items h2 {
  background: #fff;
  padding: 0.5rem;
  color: #616161;
}

.l-thumbnail img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.article-info {
  position: relative;
  padding: 0 12px;
}

.content-wrap {
  margin-top: 20px;
}

.bg-white-wrap {
  background: #fff;
}

.top-cat-list-wrap {
  padding: 16px;
  border-radius: 12px;
  background: #ededed;
  width: calc(100% - 32px);
  margin: 24px auto;
  border: 1px solid #d9d9d9;
}

.top-cat-list-wrap h3 {
  color: #000;
  font-size: 15px;
  font-weight: 600;
}

.top-cat-list-wrap h3:first-of-type {
  margin: 0 0 9px;
}

.top-cat-list-wrap h3:last-of-type {
  margin: 0 0 4px;
}

.category-list {
  margin-bottom: 24px;
}

.category-list ul {
  gap: 4px 8px;
}

.category-list li a {
  color: #747474;
  font-size: 13px;
  font-weight: 600;
  border-radius: 20px;
  border: 1px solid #747474;
  background: #f2f2f2;
  padding: 7px 17px;
}

.tag-list ul {
  gap: 4px 8px;
}

.tag-list li a {
  color: #5a5a5a;
  font-size: 12px;
  font-weight: 400;
  line-height: 19.2px;
  border-radius: 19.2px;
  background: rgba(0, 0, 0, 0.05);
  padding: 3.2px 9.6px;
  display: flex;
  align-items: center;
}

main.l-main {
  margin-bottom: 50px;
}

.l-article-list {
  align-content: flex-start;
}

article.l-article-items {
  background: #fff;
  margin: 0 16px 32px 16px;
  align-items: flex-start;
  border-radius: 12px;
  overflow: hidden;
}

.l-items-header {
  position: relative;
  padding: 14px 0 0;
}

.l-article-header {
  position: relative;
}

.l-thumbnail article {
  padding: 0 0 40px 0;
}

.post-title-mh {
  min-height: 120px;
}

.info-date time {
  font-size: 12px;
  color: #737373;
}

.l-items-header h2 {
  font-size: 16px;
  margin: 0 0 6px;
}

.article-header-info h1 {
  font-size: 24px;
  padding: 40px 0 24px 0;
  line-height: 1.4;
  border-bottom: 4px solid #d9d9d9;
  margin: 0 0 16px 0;
}

.info-date {
  margin: 0 0 16px 0;
}

.cat-label {
  display: inline-block;
  font-size: 12px;
  margin: 0 0 12px 0;
  color: #747474;
  border-radius: 16px;
  border: 1px solid #747474;
  background: #f2f2f2;
  padding: 3px 12px;
}

.l-cat-label {
  font-size: 11px;
  color: #fff;
  padding: 4px 12px;
  background-color: #000;
  font-weight: 300;
  letter-spacing: 0.8px;
  position: absolute;
  top: -16px;
  left: 0;
  width: 100%;
}

.l-items-content {
  padding: 20px 40px 40px;
}

p.description {
  margin-bottom: 1rem;
}

.readmore {
  width: 250px;
  margin: 0 auto;
  text-align: center;
}

.readmore a {
  display: block;
  background: #338fee;
  color: #fff;
  border-radius: 40px;
  padding: 15px 5px;
}

.viewmore {
  width: 250px;
  background: #fff;
  margin: auto;
}

.viewmore a {
  padding: 10px;
  display: block;
  text-align: center;
}

.keyword-section h2 {
  font-size: 24px;
  margin: 0 0 24px 0;
}

ul.keyword-list li {
  width: fit-content;
  border: 1px solid #e1e1e1;
  background: #fff;
  border-radius: 3px;
  margin: 0 12px 0 0;
  font-size: 14px;
}

ul.keyword-list li a {
  display: block;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
}

/*--------------
 SIDEBAR
---------------*/
.sidebar {
  flex: none;
  min-width: 300px;
  margin-bottom: 80px !important;
  position: sticky;
  top: 5px;
  height: 100vh;
  overflow: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar {
  display: none;
}

@media (max-width: 768px) {
  .sidebar {
    flex: none;
    margin-left: 0;
    margin-bottom: 0;
    position: static;
    top: 0;
    height: auto;
    min-width: unset;
  }
}

/* ⬇️banner⬇️ */
figure.banner {
  margin-bottom: 4.6172%;
  position: relative;
  height: 220px;
}

.home-banner {
  margin-top: 26px;
}

figure.sidebar-banner {
  margin-bottom: 20px;
  position: relative;
}

@media (max-width: 768px) {
  figure.sidebar-banner {
    margin-top: 24px;
    margin-left: 4.32%;
    margin-right: 4.32%;
  }
}

.banner-pc {
  display: block;
}

.banner-tab figure.banner {
  display: none;
}

.banner-sp {
  display: none;
}

.banner-buttons {
  position: absolute;
  width: 100%;
  bottom: 16px;
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: center;
}

.banner-buttons .btn {
  position: relative;
  cursor: pointer;
  display: flex;
  padding: 16px 24px;
  justify-content: center;
  align-items: center;
  border-radius: 89.266px;
  background: linear-gradient(89deg, #b5924a -2.15%, #cbac6c 100.9%),
    linear-gradient(0deg, #b5924a 0%, #b5924a 100%), rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(15.660676002502441px);
  color: var(--Gray-Darkest, #1e1e1e);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 14px;
  font-weight: 700;
  line-height: 100%; /* 0.875rem */
  letter-spacing: 0;
  transition: all 3s ease-out;
}

@media (max-width: 1200px) {
  .banner-buttons {
    gap: 3.46%;
  }
  .banner-buttons .btn {
    padding: min(4.0816%, 16px) min(6.12244%, 24px);
  }
}

.banner-pc .banner-buttons {
  bottom: 12px;
  gap: 8px;
}
.banner-pc .banner-buttons .btn {
  padding: 14px 12px;
}

.banner-buttons .btn::after {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  transition-duration: 1s;
  opacity: 0;
  border-radius: 89.266px;
  background: linear-gradient(89deg, #cbac6c -2.15%, #b5924a 100.9%),
    linear-gradient(0deg, #b5924a 0%, #b5924a 100%), rgba(255, 255, 255, 0.8);
}

.banner-buttons .btn:hover {
  opacity: 1;
}

.banner-buttons .btn:hover::after {
  opacity: 1;
}

.banner-buttons .btn .btn_text {
  position: relative;
  z-index: 2;
  color: #1e1e1e;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 14px;
  font-weight: 700;
  line-height: 100%; /* 0.875rem */
  letter-spacing: 0;
}

@media (max-width: 768px) {
  figure.banner {
    display: none;
  }
  .home-banner {
    margin-top: 0;
  }
  .banner-pc {
    display: none;
  }
  .banner-sp {
    display: none;
  }
  .banner-tab figure.banner {
    display: block;
  }
  .sidebar-banner .banner-sp {
    display: none;
  }
}

@media (max-width: 480px) {
  .banner-pc {
    display: none;
  }
  .banner-sp {
    display: none;
  }
}

@media (max-width: 393px) {
  .banner-tab figure.banner {
    display: none;
  }

  .sidebar-banner .banner-sp {
    display: block;
    max-width: 429px;
    margin: auto;
  }

  .banner-sp .banner-buttons {
    position: absolute;
    width: 100%;
    max-width: 429px;
    display: flex;
    bottom: 6.0505%;
    justify-content: center;
    align-items: center;
    gap: 3.49854%;
  }
  .banner-sp .banner-buttons .btn {
    padding: min(4.08163%, 17.5px) min(3.49854%, 15px);
    border-radius: 23.615vw;
    font-size: min(3.61757vw, 17.5px);
  }
}

figure.banner img,
figure.sidebar-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  border: 1px #000;
}
/* ⬆️banner⬆️ */

.popular-section,
.search-section,
.aboutme {
  background: #fff;
  padding: 0 16px;
  padding-bottom: 40px;
  margin-bottom: 20px;
  border: 1px solid #e1e1e1;
}

section.aboutme img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

section.aboutme p {
  margin-top: 28px;
  font-size: 14px;
}

section.aboutme a {
  text-decoration: underline;
  color: #3b46d2;
}

section.popular-section h4,
section.search-section h4,
section.aboutme h4 {
  padding: 30px 0;
  text-align: center;
}

.form-group {
  position: relative;
}

input.search-box {
  width: 100%;
  padding: 1rem;
  background: #eee;
  border-radius: 3px;
  border: none;
}

input.searchsubmit {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  border: none;
}

input.search-box:focus,
input.header-search-box:focus {
  box-shadow: 0 0 5px #eee;
}

.popular-media {
  border-radius: 3.33px;
  overflow: hidden;
  width: 100px;
  flex: none;
}

.popular-media img {
  width: 100%;
  display: block;
  height: auto;
}

article.popular-items {
  margin-bottom: 20px;
}

article.popular-items:last-child {
  margin-bottom: 0;
}

article.popular-items a {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

article.popular-items:last-of-type a {
  padding-bottom: 0;
  border-bottom: none;
}

article.popular-items h5 {
  color: #1e1e1e;
  font-size: 14px;
  font-weight: 400;
  line-height: 133%; /* 18.62px */
  letter-spacing: 0.8px;
  padding-left: 12px;
  text-align: left;
  width: 100%;
}

.popular-items-category {
  color: #747474;
  font-size: 11px;
  font-weight: 600;
  border-radius: 20px;
  border: 1px solid #747474;
  background: #f2f2f2;
  padding: 2px 12px 3px;
  margin-top: 8px;
}

section.bnr-section img {
  width: 100%;
  box-shadow: 0 2px 4px #b1b1b1;
}

.ranking {
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  background: #fff;
  padding: 16px 8px;
}

@media (max-width: 768px) {
  .ranking {
    border-radius: 0;
    border: none;
  }
}

.ranking h4 {
  color: #333;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.8px;
  position: relative;
  padding-top: 16px;
}

.ranking h4:after {
  content: "";
  display: block;
  width: 80px;
  height: 1px;
  background: #b5924a;
  margin: 10px auto 16px;
}

@media (max-width: 743px) {
  .popular-media {
    width: 120px;
  }
}

/*--------------
 SINGLE
---------------*/
.articleBody {
  background: #fff;
  padding: 0 0 60px 0;
}

.articleBody p a {
  color: #007dff;
}

.articleBody img {
  width: 100%;
}

.article-header-info,
.single-related,
.body-content {
  padding: 0 8.2% 0;
}

.body-content p {
  margin-top: 40px;
}

.body-content h2 {
  background: #000;
  margin-top: 40px;
  color: #fff;
  font-size: 1.3rem;
  padding: 10px 20px 10px 20px;
}

.body-content h3 {
  padding: 10px 10px 10px 20px;
  margin-top: 48px;
  background: #f1f3f4;
  border-left: 5px solid #000;
}

.body-content h4 {
  padding: 10px 10px 10px 20px;
  margin-top: 36px;
  line-height: 1;
  border-left: 5px solid #000;
}

.body-content > p {
  margin-top: 36px;
}

.body-content picture img {
  max-width: 100%;
  margin: 50px auto 0;
  box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.2);
}

.tag {
  margin-top: 30px;
}

.tag a {
  color: blue;
}

/*-------フローティング------*/
.floating-banner {
  display: block;
  position: fixed;
  z-index: 1000;
  right: 20px;
  bottom: 20px;
  background-color: #fff;
  border-radius: 12px;
  width: 368px;
  height: 170px;
  background-image: url("https://liberary.kddi.com/articles/wp-content/uploads/2024/08/floating_background_pc.png");
  background-size: 100% 100%;
}

.floating-banner-inner {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding: 12px;
}

.floating-banner-inner .inner_wrapper {
  width: calc(100% - 104px);
  display: flex;
  flex-direction: column;
}

.floating-banner-inner .inner_wrapper .logo_pc {
  display: block;
  width: 139px;
  margin-bottom: 8px;
}

.floating-banner-inner .inner_wrapper .banner_text {
  color: rgba(255, 255, 255, 0.8);
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 15px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0;
  padding-right: 15px;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.floating-banner-inner .inner_wrapper .logo_sp {
  display: none;
}

.to_site {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  width: 104px;
  height: 28px;
  position: relative;
}

.to_site:before {
  content: "サイトを見る";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 12px;
  color: #fff;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
}

.to_site:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 8px;
  width: 6px;
  height: 10px;
  background-image: url(https://liberary.kddi.com/articles/wp-content/uploads/2024/09/pc_arrow.png);
  background-size: 100% 100%;
}

.floating-banner_close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  background-color: rgba(217, 217, 217, 50%);
  backdrop-filter: blur(5px);
  border-radius: 50%;
  cursor: pointer;
}

.floating-banner_close_batsu {
  display: block;
  position: relative;
  width: 32px;
  height: 32px;
}

.floating-banner_close_batsu::before,
.floating-banner_close_batsu::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 18.68px;
  background: #000000;
  opacity: 1;
}

.floating-banner_close_batsu::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.floating-banner_close_batsu::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* sp */
@media (max-width: 743px) {
  .floating-banner {
    display: block;
    position: fixed;
    z-index: 1000;
    left: 1.07vw;
    bottom: 1.07vw;
    width: 97.87vw;
    max-width: 528.5px;
    height: 13.2vw;
    max-height: 71.27px;
    border-radius: 2.13vw;
    background-image: url("https://liberary.kddi.com/articles/wp-content/uploads/2024/08/floating_background_sp.png");
    background-size: 100% 100%;
  }

  .floating-banner-inner {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 6px 0 54px;
  }

  .floating-banner-inner .inner_wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
  }

  .floating-banner-inner .inner_wrapper .logo_pc {
    display: none;
  }

  .floating-banner-inner .inner_wrapper .banner_text {
    color: rgba(255, 255, 255, 0.8);
    font-family: "Hiragino Kaku Gothic ProN";
    font-size: 12px;
    font-size: min(3.2vw, 15px);
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0;
    padding-right: 15px;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .floating-banner-inner .inner_wrapper .logo_sp {
    display: block;
    width: 12%;
    min-width: 36px;
    flex: none;
    margin-right: 12px;
  }

  .to_site {
    border-radius: 50%;
    backdrop-filter: blur(5px);
    width: 32px;
    height: 32px;
    position: relative;
    flex: none;
  }

  .to_site:before {
    display: none;
  }

  .to_site:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 11px;
    width: 8px;
    height: 14px;
    background-image: url(https://liberary.kddi.com/articles/wp-content/uploads/2024/09/sp_arrow.png);
    background-size: 100% 100%;
  }

  .floating-banner_close {
    position: absolute;
    top: -1.07vw;
    left: -1.07vw;
    width: 6.4vw;
    max-width: 34.55px;
    height: 6.4vw;
    max-height: 34.55px;
    background-color: #ededed;
    border-radius: 50%;
    cursor: pointer;
  }

  .floating-banner_close_batsu {
    display: block;
    position: relative;
    width: 6.4vw;
    max-width: 34.55px;
    height: 6.4vw;
    max-height: 34.55px;
  }

  .floating-banner_close_batsu::before,
  .floating-banner_close_batsu::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.27vw;
    max-width: 1.44px;
    height: 3.73vw;
    max-height: 20.16px;
    background: #000000;
    opacity: 1;
  }

  .floating-banner_close_batsu::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .floating-banner_close_batsu::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

/*-------------
　コンポーネント
---------------*/
.hljs-attr {
  color: #a0d468 !important;
}

.body-content pre {
  position: relative;
}

code.html::before {
  content: "HTML";
  position: absolute;
  padding: 2px 15px;
  border-top-left-radius: 4px;
  background: #338fee;
  top: 0;
  left: 0;
  width: 3rem;
  text-align: center;
}

code.css::before {
  content: "CSS";
  position: absolute;
  padding: 2px 15px;
  border-top-left-radius: 4px;
  background: #338fee;
  top: 0;
  left: 0;
  width: 3rem;
  text-align: center;
}

.body-content .hljs {
  background: #333;
  line-height: 1.5;
  font-size: 14px;
  border-radius: 4px;
  padding: 35px 15px 10px;
  overflow: auto;
}

/*-------TipBOX------*/
.tips-box {
  padding: 40px 40px 24px;
  position: relative;
  background: #f7f7f7;
  box-shadow: 0px 4px 5px #ececec;
  border-radius: 10px;
  margin-top: 50px;
}

p.tips-title {
  margin: 0;
}

.tips-title {
  color: #fff;
  background: #338fee;
  position: absolute;
  top: -20px;
  left: 20px;
  padding: 12px 20px;
  font-weight: bold;
  font-size: 16px;
  line-height: 1;
  display: inline-block;
  border-radius: 50px;
  box-shadow: 0 0 0px 5px #fff;
}

/*-------内部リンク------*/
.title-box {
  display: flex;
  position: absolute;
  top: -1rem;
  left: 1rem;
  padding: 0 1rem;
  background: #fff;
}

.blog-card {
  position: relative;
  border: 1px solid #ff005e;
  margin-top: 50px;
  border-radius: 5px;
}

.blog-card:hover {
  opacity: 0.7;
  transition: 0.2s;
}

.blog-card-content {
  padding: 38px 20px 25px;
}

.blog-card-thumbnail img {
  width: 160px;
  height: 90px;
  object-fit: cover;
}

.blog-card-title {
  margin: 0 16px;
}

span.icon-note-text {
  color: #fff;
  font-size: 26px;
  background: #ff005e;
  padding: 5px;
  margin-right: 10px;
  border-radius: 50%;
}

.blog-card button {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  border: none;
  background: #ff005e;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.05rem;
  padding: 8px 15px;
  cursor: pointer;
  border-radius: 5px;
  border-bottom: 4px solid #b00041;
}

/*----リストデザイン----*/
ul.dot-list,
ol.num-list {
  padding: 0 1rem;
  margin-top: 30px;
}

ul.check-list {
  margin-top: 30px;
}

ul.dot-list li {
  list-style-type: disc;
}

ol.num-list li {
  list-style-type: decimal;
  margin: 0 0 0 0.3rem;
}

/*----テーブルデザイン----*/
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

table th {
  background: #f7f7f7;
}

table th,
table td {
  font-size: 14px;
  text-align: center;
  border: solid 1px #e1e1e1;
  padding: 10px 0;
}

.sm-scroll {
  overflow: auto;
  white-space: nowrap;
  margin-top: 30px;
}

/*----引用ＢＯＸ----*/
blockquote.quote-box {
  background: #f1f3f4;
  position: relative;
  padding: 2rem 2rem 3rem;
  margin-top: 40px;
}

blockquote.quote-box cite {
  position: absolute;
  font-size: 12px;
  bottom: 1rem;
  right: 2rem;
}

span.icon-quotes-left {
  position: absolute;
  display: flex;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  top: -0.5rem;
  left: -0.5rem;
  color: #fff;
  background: #333;
  justify-content: center;
  align-items: center;
}

/*-------iframe------*/
.video {
  height: 0;
  margin-top: 30px;
  overflow: hidden;
  max-width: 100%;
  padding-bottom: 56.3%;
  position: relative;
}

.video iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.twitter-widget {
  text-align: center;
  position: relative;
  margin-top: 30px;
}

.twitter-widget twitter-widget {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

/*-------背景色------*/
.bg-gray {
  background-color: #f3f5f6;
  border-radius: 3px;
  position: relative;
  padding: 2rem;
  margin-top: 30px;
}

.bg-gray::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  border-width: 0 25px 25px 0;
  border-style: solid;
  border-color: #fff #fff #e7e7e7;
  box-shadow: -1px 1px 2px #0000001a;
}

/*-----ブラウザーショートコード-----*/
.browser {
  border-radius: 4px;
  position: relative;
  border: 4px solid #ddd;
  margin-top: 30px;
}

.browser-display-area p {
  margin: 0;
}

.browser-display-area {
  padding: 50px 10px 20px;
}

.browser-display-area ul {
  margin: 0;
  padding: 20px;
}

div.browser-bar {
  background: #ddd;
  position: absolute;
  left: 0;
  right: 0;
  height: 30px;
}

span.left {
  position: absolute;
  width: 13px;
  height: 13px;
  background: #f58282;
  border-radius: 50%;
  top: 0;
  bottom: 0;
  left: 1rem;
  margin: auto;
}

span.center {
  position: absolute;
  width: 13px;
  height: 13px;
  background: #fac334;
  border-radius: 50%;
  top: 0;
  bottom: 0;
  left: 2.4rem;
  margin: auto;
}

span.right {
  position: absolute;
  width: 13px;
  height: 13px;
  background: #5ce671;
  border-radius: 50%;
  top: 0;
  bottom: 0;
  left: 3.8rem;
  margin: auto;
}

span.browser-search {
  display: flex;
  align-items: center;
  text-indent: 1rem;
  font-size: 0.78rem;
  position: absolute;
  height: 20px;
  background: #ffffff;
  color: #000;
  top: -3px;
  bottom: 0;
  left: 6rem;
  right: 1rem;
  margin: auto;
  border-radius: 4px;
}

/*--------------
 FOOTER
---------------*/

.footerWarp {
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sp-footer {
  width: 100%;
}

.pc-footer {
  width: 100%;
}

.snsLinkWrap {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  gap: 16px;
}

.snsLinkWrap a {
  height: 32px;
  width: 32px;
  border-radius: 50%;
  background-color: white;
  position: relative;
}

.snsLinkWrap a img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.president {
  width: 140px;
  margin-right: 24px;
}

/* sp */
@media (max-width: 743px) {
  .footerWarp {
    padding: 32px 0 0 0;
  }
}

/* tab */
@media (min-width: 744px) and (max-width: 1023px) {
  .footerWarp {
    padding: 32px 0 0px 0;
  }
}

/* pc */
@media (min-width: 1024px) {
  .footerWarp {
    padding: 32px 0 0 0;
  }
}

.applicationLinkWrap {
  display: flex;
  gap: 10px;
}

.snsAppWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.grayWrap {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 16px 0 8px;
}

/* sp */
@media (max-width: 743px) {
  .grayWrap {
    margin-top: 32px;
  }
}

/* tab */
@media (min-width: 744px) and (max-width: 1023px) {
  .grayWrap {
    margin-top: 32px;
  }
}

/* pc */
@media (min-width: 1024px) {
  .grayWrap {
    margin-top: 32px;
  }
}

.logoTitle {
  text-align: center;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 14px;
}

.logoWrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logoWrap svg:first-of-type {
  margin-right: 28px;
}

/* sp */
@media (max-width: 743px) {
  .linkAndLogoWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}

/* tab */
@media (min-width: 744px) and (max-width: 1023px) {
  .linkAndLogoWrap {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: row;
    margin-bottom: 28px;
  }
}

/* pc */
@media (min-width: 1024px) {
  .linkAndLogoWrap {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: row;
    margin-bottom: 28px;
  }
}

/* sp */
@media (max-width: 743px) {
  .footerLinkWrap {
    width: 100%;
    max-width: 350px;
    padding: 0 16px;
    gap: 10px;
    display: flex;
    align-items: baseline;
    flex-flow: column wrap;
    max-height: 106px;
    margin: 35px 0 26px;
  }
}

/* tab */
@media (min-width: 744px) and (max-width: 1023px) {
  .footerLinkWrap {
    margin-top: 32px;
    display: flex;
    align-items: baseline;
    flex-flow: wrap;
    gap: 18px;
    width: 440px;
  }
}

/* pc */
@media (min-width: 1024px) {
  .footerLinkWrap {
    margin-top: 32px;
    display: flex;
    align-items: baseline;
    flex-flow: wrap;
    width: 440px;
    gap: 18px;
  }
}

.footerLinkWrap .link {
  color: #000;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 180% */
  text-decoration-line: underline;
}

.link:hover {
  cursor: pointer;
}

/* sp */
@media (max-width: 743px) {
  .kddiLogo {
    flex: none;
    margin: 0 auto;
  }
}

.footerContentsWrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  width: 100%;
}

/* sp */
@media (max-width: 743px) {
  .copyLightWrap {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* tab */
@media (min-width: 744px) and (max-width: 1023px) {
  .copyLightWrap {
    margin-top: 12px;
  }
}

/* pc */
@media (min-width: 1024px) {
  .copyLightWrap {
    margin-top: 12px;
  }
}

.copyLightWrap .text {
  color: #6b6b6b;
  text-align: center;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.applicationLinks {
  display: flex;
  gap: 10px;
}

.snsLinks {
  display: flex;
  gap: 16px;
}

/*-------------
	INCLUED
---------------*/
.snsShareArea {
  text-align: center;
  margin: 40px 0;
}

ul.sns-icons {
  display: flex;
  justify-content: space-between;
}

.snsShareArea ul li {
  width: 19%;
}

.snsShareArea ul li a {
  display: flex;
  justify-content: center;
  padding: 10px;
  font-size: 1.3rem;
}

h4.inc-title {
  border: none;
  margin: 0 0 16px 0;
}

.twitter {
  background: #238bcd;
}

.facebook {
  background: #405ba3;
}

.hatena {
  background: #147ad4;
}

.line {
  background: #60bf60;
}

.pocket {
  background: #f44336;
}

/*------author-*/
.author-container {
  position: relative;
  border-top: 3px solid #ececec;
  border-bottom: 3px solid #ececec;
  padding: 40px 30px;
  margin: 20px 0;
}

h4.profile-title {
  position: absolute;
  top: -1rem;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  background: #fff;
  width: 20rem;
}

h4.profile-title a {
  margin: 0 1rem;
  color: #238bcd;
  text-decoration: underline;
}

/*------Related-*/

.single-related-list {
  flex-wrap: wrap;
}

.related-items {
  margin-bottom: 20px;
}

.related-thumbnail img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/*------パンくず-*/

.breadcrumb {
  font-size: 14px;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  position: relative;
}

.breadcrumb li,
#breadcrumb li {
  display: inline;
}

#breadcrumb ol {
  display: flex;
  align-items: center;
  font-size: 14px;
}

#breadcrumb ol li::after {
  content: ">";
  margin: 5px;
  font-weight: bold;
}

#breadcrumb ol li:last-child:after {
  content: "";
}

.single-breadcrumb {
  margin: 20px 0 10px;
  padding: 8px !important;
}

#breadcrumb-expander {
  cursor: pointer;
  position: absolute;
  right: 11px;
  bottom: 11px;
  background: rgb(247, 247, 247);
  padding-left: 10px;
}

.breadcrumb.expanded {
  overflow: visible;
  white-space: normal;
  -webkit-line-clamp: unset;
}

.breadcrumb.expanded #breadcrumb-expander {
  display: none;
}
strong {
  height: 25px !important;
}
/*--------------
　PAGER
---------------*/
.pagination {
  display: flex;
  justify-content: center;
}

.pagination ul li {
  margin: 0 6px;
}

.pager {
  position: relative;
  margin: 5rem 0 2rem;
  padding: 1rem 0;
  border-radius: 10px;
}

.page-numbers {
  color: #000;
  border: 1px solid #e1e1e1;
  font-weight: bold;
  width: 37.5px;
  height: 37.5px;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.next,
.prev {
  background: transparent;
  border: none;
  position: relative;
}

.prev:after {
  content: "";
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2238%22%20height%3D%2239%22%20viewBox%3D%220%200%2038%2039%22%20fill%3D%22none%22%3E%3Crect%20x%3D%2237.5508%22%20y%3D%2238.1406%22%20width%3D%2237.5%22%20height%3D%2237.5%22%20rx%3D%2218.75%22%20transform%3D%22rotate(-180%2037.5508%2038.1406)%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M20.5508%2023.1445L16.5508%2019.1445L20.5508%2015.1445%22%20stroke%3D%22%231E1E1E%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  width: 37.5px;
  height: 37.5px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.next:after {
  content: "";
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2238%22%20height%3D%2239%22%20viewBox%3D%220%200%2038%2039%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M17.4492%2015.6367L21.4492%2019.6367L17.4492%2023.6367%22%20stroke%3D%22%231E1E1E%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  width: 37.5px;
  height: 37.5px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

span.page-numbers.current {
  background: #e2e2e2;
  color: #000;
}

.page-numbers:hover {
  background: #000000;
  color: #fff;
  transition: 0.3s;
}

.next:hover,
.prev:hover {
  background: #fff;
  border: none;
}

/*--------------
 COMMON
---------------*/
.container {
  width: 100%;
  max-width: 1200px;
  margin: auto;
}

.container-white {
  background: #fff;
}

.l-flex {
  display: flex;
  flex-wrap: wrap;
}

.n-flex {
  display: flex;
}

.r-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.e-flex {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 1;
}

.b {
  justify-content: space-between;
}

.l-col2 {
  width: calc(2 * (100% / 12) - 32px);
}

.l-col3 {
  width: calc(3 * (100% / 12) - 32px);
}

.l-col4 {
  width: calc(4 * (100% / 12) - 32px);
}

.l-col5 {
  width: calc(5 * (100% / 12) - 32px);
}

.l-col6 {
  width: calc(6 * (100% / 12) - 32px);
}

.l-col7 {
  width: calc(7 * (100% / 12) - 32px);
}

.l-col8 {
  width: calc(8 * (100% / 12) - 32px);
}

.l-col9 {
  width: calc(9 * (100% / 12) - 32px);
}

.l-col10 {
  width: calc(10 * (100% / 12) - 32px);
}

.l-col11 {
  width: calc(11 * (100% / 12) - 32px);
}

.l-col12 {
  width: calc(12 * (100% / 12) - 32px);
}

.l-col3,
.l-col4,
.l-col5,
.l-col6,
.l-col7,
.l-col8,
.l-col10,
.l-col11,
.l-col12 {
  padding: 0 10px;
  margin: 10px;
}

.l-col9 {
  padding: 0 0 0 10px;
  margin: 10px 0 10px 10px;
}

.pd-none {
  padding: 0;
}

.pd-8 {
  padding: 0 8px;
}

.mg-none {
  margin: 0;
}

@media (max-width: 1024px) {
  .container {
    width: 100%;
    margin: auto;
  }
}

@media (max-width: 768px) {
  .l-flex {
    flex-direction: column;
  }

  .n-flex {
    flex-direction: column;
  }

  .l-col2,
  .l-col4,
  .l-col5,
  .l-col7,
  .l-col8,
  .l-col9,
  .l-col10,
  .l-col11,
  .l-col12 {
    width: 100%;
    padding: 0 2px;
    margin: 0 auto;
  }

  .container,
  .l-col3,
  .l-col6 {
    width: 100%;
    padding: 0;
    margin: 0 auto;
  }

  article.l-article-items {
    margin: 0 0 32px 0;
  }

  header.l-header {
    display: flex;
    justify-content: center;
    padding: 0 2.134vw 0 4.267vw;
    min-height: 56px;
    height: 14.934vw;
    max-height: 80px;
  }

  .logo {
    display: flex;
    align-items: center;
    height: 56px;
  }

  .logo .site-name {
    width: auto;
    min-height: 60px;
    height: 16vw;
    max-height: 73.77px;
  }

  .sm-none {
    display: none;
  }

  .l-cat-items {
    margin-bottom: 10px;
  }

  .l-cat-items img {
    width: 100%;
    height: 170px;
    object-fit: cover;
  }

  footer#l-footer {
    text-align: center;
  }

  .footer-nav ul {
    border: none;
    padding: 0;
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .breadcrumb {
    padding: 0;
  }

  .l-article-header h1 {
    padding: 24px 0;
    font-size: 20px;
    min-height: 0;
  }
  .l-items-header h2 {
    padding: 8px 0;
    font-size: 16px;
    min-height: 0;
  }

  .post-title-mh {
    min-height: 0px;
  }

  .l-items-content {
    padding: 20px 20px 40px;
  }

  .blog-card-thumbnail img {
    width: 100%;
    height: 150px;
    object-fit: cover;
  }

  .blog-card-title {
    margin: 10px 0;
  }

  .article-header-info,
  .body-content,
  .single-related {
    padding: 0 10px;
  }
}

/*--------------
 404
---------------*/
.not-found {
  justify-content: center;
  flex-direction: column;
  text-align: center;
  margin: 40px 0;
}

.not-found img {
  width: 30%;
}

.not-found strong {
  font-size: 3rem;
  color: #000;
}

.not-found p {
  margin-bottom: 3rem;
}

.homeBtn {
  width: 250px;
  background: #000;
  margin: auto;
}

.homeBtn a {
  display: block;
  font-weight: bold;
  color: #fff;
  padding: 1rem;
}

/*--------------
 RESET
---------------*/
* {
  word-break: break-all;
  word-wrap: break-word;
  box-sizing: border-box;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
abbr,
address,
cite,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ul,
ol,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video,
a {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  text-decoration: none;
  background: transparent;
  box-sizing: border-box;
  color: #333;
  list-style: none;
  letter-spacing: 0.05rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
small {
  line-height: 1.7;
  letter-spacing: 0.05rem;
}

.top-heading-title {
  text-align: center;
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
  background: rgb(247, 247, 247);
}

a:hover {
  opacity: 0.7;
  transition-duration: 0.2s;
}

/*目次*/
.outline {
  width: 100%;
  padding: 16px 16px 8px 24px;
  margin: 20px 0;
  display: inline-block;
  font-size: 0.9em;
  line-height: 1.5em;
  border-radius: 12px;
  border: 1px solid #d9d9d9;
  background: #ededed;
}

.outline-wrap {
  font-size: 1rem;
  text-align: left;
  margin-bottom: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgb(190, 190, 190);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.outline-wrap.closed {
  border-bottom: 0px;
}

.outline-wrap strong {
  color: #000;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: 1.2px;
}

.toggle-button {
  font-size: 0.75rem;
  color: #747474;
  font-family: "Hiragino Kaku Gothic ProN";
  font-weight: 600;
  padding: 3px 12px 4px 32px;
  cursor: pointer;
  margin-left: auto;
  border-radius: 16px;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  position: relative;
}

.toggle-button::before {
  content: "";
  margin: auto;
  position: absolute;
  top: 6px;
  bottom: 0;
  left: 13px;
  width: 8px;
  height: 8px;
  border-top: 1px solid #747474;
  border-right: 1px solid #747474;
  transform: rotate(315deg);
  transition: transform 0.3s ease;
  transform-origin: center;
}

.toggle-button.closed::before {
  margin: auto;
  position: absolute;
  top: 6px;
  bottom: 13px;
  left: 13px;
  transform: rotate(135deg);
}
ul.outline__list.outline__list-2 {
  counter-reset: hl_count;
  padding-left: 16px;
  margin: 0 16px;
}

.outline__list-3 .outline__item::before {
  background: #9e9e9e;
}

.outline__item:before {
  content: normal;
}

.outline__link {
  color: #3a3a3a;
  font-weight: bold;
}

.outline__number {
  display: inline-block;
  color: #7f7f7f;
  background: #f2f2f2;
  padding: 3px 6px;
  font-weight: 400;
  font-size: 1.2rem;
  margin-right: 5px;
}

li.outline__item:before {
  padding: 1px 8px;
  background: #333;
  border-radius: 13%;
  color: #fff;
}

li.outline__item {
  width: 100%;
  margin: 15px auto;
}

ul.outline__list.outline__list-2 li {
  list-style: none;
  font-weight: bold;
  margin: 16px 0 24px;
}

ul.outline__list.outline__list-3 {
  margin-top: 8px;
}

ul.outline__list.outline__list-3 li {
  margin: 0 0 0 39px;
  list-style: none;
  color: #3a3a3a;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 24.48px;
  letter-spacing: 0.8px;
  width: auto;
}

ul.outline__list.outline__list-3 li::before {
  content: "ー";
  background: transparent;
  color: #bcbcbc;
  font-size: 11px;
  line-height: 1;
  padding: 0 8px 0 0;
  margin-left: -25px;
}

ul.outline__list.outline__list-3 li a {
  color: #3a3a3a;
  font-weight: 100;
  text-decoration: none;
}

@media screen and (max-width: 480px) {
  .outline {
    padding: 16px 16px 8px 24px;
  }
  li.outline__item {
    margin-left: 30px;
    width: 100%;
    line-height: 1.7;
  }
  ul.outline__list.outline__list-2 {
    padding-left: 0px;
    margin: 0;
  }
  ul.outline__list.outline__list-3 li {
    font-size: 12px;
    margin: 4px 0 4px 39px;
  }
}

/*-ハンバーガーメニュー-*/
.mobile-menu,
.header-nav,
#humbger-btn {
  display: none;
}

@media (max-width: 960px) {
  nav.header-menu,
  nav.mobile-menu {
    display: none;
  }

  nav.mobile-menu.is-active {
    position: fixed;
    display: flex;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    flex-direction: column;
    align-items: flex-end;
  }

  .logo-m {
    display: flex;
    background: #000;
    width: 100vw;
    min-height: 56px;
    height: 14.934vw;
    max-height: 80px;
    padding: 0 2.134vw 0 4.267vw;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  .site-name-m {
    display: block;
    width: auto;
    min-height: 60px;
    height: 16vw;
    max-height: 73.77px;
  }

  .mobile-menu-contents {
    width: 90%;
    max-width: 280px;
    background: #000;
    flex-grow: 1;
    max-height: calc(100vh - 56px);
    height: calc(100vh - 14.934vw);
    display: flex;
    flex-direction: column;
  }

  input.header-search-box {
    width: 100%;
    height: 3rem;
    padding: 0.8rem;
    background: #eee;
    border-radius: 30px;
    border: none;
  }

  .mobile-menu ul li {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px 16px;
  }

  .mobile-menu ul li a {
    display: block;
    font-size: 16px;
    width: 100%;
    color: #d9d9d9;
    line-height: 24px;
  }

  .mobile-menu ul li .to-liberary_lab {
    width: auto !important;
    margin-left: 0;
  }

  .mobile-menu-bnr {
    margin-top: 30px;
  }

  .mobile-menu-bnr img {
    width: 100%;
  }

  button#humbger-btn {
    position: relative;
    display: flex;
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    z-index: 9999;
    background-color: transparent;
    justify-content: center;
    align-items: center;
    padding: 0;
  }

  .menu-trigger,
  .menu-trigger span {
    display: inline-block;
    transition: all 0.4s;
    box-sizing: border-box;
  }

  .menu-trigger {
    position: relative;
    width: 23px;
    height: 21px;
  }

  .menu-trigger.is-active {
    position: fixed;
  }

  .menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #c8c8c8;
    border-radius: 4px;
  }

  .menu-trigger span:nth-of-type(1) {
    top: 0;
  }

  .menu-trigger span:nth-of-type(2) {
    top: 10px;
  }

  .menu-trigger span:nth-of-type(3) {
    bottom: 0;
  }

  .menu-trigger.is-active span:nth-of-type(1) {
    -webkit-transform: translateY(20px) rotate(-45deg);
    transform: translateY(20px) rotate(-45deg);
    top: -10px;
    background-color: #fff;
    width: 122.9%;
  }

  .menu-trigger.is-active span:nth-of-type(2) {
    opacity: 0;
  }

  .menu-trigger.is-active span:nth-of-type(3) {
    -webkit-transform: translateY(-20px) rotate(45deg);
    transform: translateY(-20px) rotate(45deg);
    bottom: -10px;
    background-color: #fff;
    width: 122.9%;
  }
}

span.marker-yellow {
  background: linear-gradient(
      270deg,
      rgba(255, 255, 255, 0.5) 0.07%,
      rgba(255, 255, 255, 0.16) 99.93%
    ),
    #e7d3ac;
  font-weight: bold;
}

iframe {
  max-width: 100%;
}

/*-PAGETOPボタン-*/
#back-to-top {
  display: flex !important ;
  height: 44px;
  padding: 4px 12px 4px 28px;
  align-items: center;
  position: fixed;
  bottom: 210px;
  right: 20px;
  z-index: 999;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(221, 221, 221, 0.8);
  backdrop-filter: blur(5px);
  cursor: pointer;
}

#back-to-top a {
  color: #1e1e1e;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.7px;
  display: block;
}

#back-to-top a::before {
  position: absolute;
  right: 89px;
  top: 20.5px;
  display: block;
  content: "";
  width: 13px;
  height: 1px;
  background: #1c1b1f;
  transform: rotate(90deg);
}

#back-to-top a::after {
  position: absolute;
  right: 91px;
  top: 16px;
  display: block;
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1px solid #1c1b1f;
  border-top: 1px solid #1c1b1f;
  transform: rotate(-45deg);
}

#back-to-top:hover {
  opacity: 0.7;
  transition: 0.2s;
}

.banner-closed #back-to-top {
  bottom: 20px;
}

@media (max-width: 743px) {
  #back-to-top {
    bottom: calc(1vw);
  }
}

@media (max-width: 676px) {
  #back-to-top {
    bottom: calc(3.9vw + 13.2vw);
  }
}

/*--------------
 検索ボックス下にタグ一覧
---------------*/
#search-tag-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  padding: 16px 8px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  flex-wrap: wrap;
  border-radius: 12px;
  background: #3a3a3a;
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);
}

.tag-button {
  color: #f2f2f2;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 14px;
  font-weight: 400;
  line-height: 24px; /* 171.429% */
  letter-spacing: 0.7px;
  display: flex;
  padding: 4px 12px 4px 8px;
  align-items: center;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 960px) {
  #search-tag-list {
    position: unset;
    background: transparent;
    padding: 4px 16px 16px;
    overflow-y: scroll;
    align-content: start;
    flex-grow: 1;
  }

  .tag-button {
    background: rgba(255, 255, 255, 0.2);
  }
}

.tag-button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.4);
  transition: 0.2s;
  opacity: 1;
}

/* 著者プロファイル */

.author-profile-section {
  padding: 40px 0;
}

.author-profile-wrap {
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  padding: 16px 16px 24px 16px;
  @media screen and (min-width: 768px) {
    border-radius: 8px;
    padding: 16px 40px 24px 40px;
  }
}

.author-profile-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.author-profile-name {
  color: #000;
  text-align: center;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 133%; /* 18.62px */
  letter-spacing: 0.7px;
  margin: 0 0 0 16px !important;
}

.author-profile-img {
  width: 56px !important;
  height: 56px;
  border-radius: 56px;
}

.author-profile-title {
  margin: 8px 0 0 0 !important;
  color: #000;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 170%; /* 23.8px */
  @media screen and (min-width: 768px) {
    font-size: 14px;
  }
}

/*--------------
 お知らせ（タイトルページ）
---------------*/
.notice_body {
  background: transparent;
}

.notice_wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 100vw;
  gap: 8px;
  padding: 8px 40px;
  align-items: center;
}

.notice_wrap .arrow::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7 4.42505L11 8.42505L7 12.425' stroke='white' stroke-linecap='round'/%3E%3C/svg%3E");
  display: inline-block;
  width: 16px;
  height: 16px;
  right: min(3.125%, 40px);
  flex: none;
}

.notice_date {
  display: flex;
  flex: none;
  padding-right: 8px;
  position: relative;
  align-items: center;
  gap: 8px;
}

.notice {
  background: transparent;
}
.notice .icon::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cmask id='mask0_1583_8327' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1583_8327)'%3E%3Cpath d='M6.0385 17.5L4.0365 19.5018C3.752 19.7864 3.42475 19.8509 3.05475 19.6952C2.68492 19.5394 2.5 19.2589 2.5 18.8538V4.30775C2.5 3.80258 2.675 3.375 3.025 3.025C3.375 2.675 3.80258 2.5 4.30775 2.5H19.6923C20.1974 2.5 20.625 2.675 20.975 3.025C21.325 3.375 21.5 3.80258 21.5 4.30775V15.6923C21.5 16.1974 21.325 16.625 20.975 16.975C20.625 17.325 20.1974 17.5 19.6923 17.5H6.0385ZM5.4 16H19.6923C19.7693 16 19.8398 15.9679 19.9038 15.9038C19.9679 15.8398 20 15.7692 20 15.6923V4.30775C20 4.23075 19.9679 4.16025 19.9038 4.09625C19.8398 4.03208 19.7693 4 19.6923 4H4.30775C4.23075 4 4.16025 4.03208 4.09625 4.09625C4.03208 4.16025 4 4.23075 4 4.30775V17.3848L5.4 16ZM8 10.8845C8.24483 10.8845 8.4535 10.7983 8.626 10.626C8.79833 10.4535 8.8845 10.2448 8.8845 10C8.8845 9.75517 8.79833 9.5465 8.626 9.374C8.4535 9.20167 8.24483 9.1155 8 9.1155C7.75517 9.1155 7.5465 9.20167 7.374 9.374C7.20167 9.5465 7.1155 9.75517 7.1155 10C7.1155 10.2448 7.20167 10.4535 7.374 10.626C7.5465 10.7983 7.75517 10.8845 8 10.8845ZM12 10.8845C12.2448 10.8845 12.4535 10.7983 12.626 10.626C12.7983 10.4535 12.8845 10.2448 12.8845 10C12.8845 9.75517 12.7983 9.5465 12.626 9.374C12.4535 9.20167 12.2448 9.1155 12 9.1155C11.7552 9.1155 11.5465 9.20167 11.374 9.374C11.2017 9.5465 11.1155 9.75517 11.1155 10C11.1155 10.2448 11.2017 10.4535 11.374 10.626C11.5465 10.7983 11.7552 10.8845 12 10.8845ZM16 10.8845C16.2448 10.8845 16.4535 10.7983 16.626 10.626C16.7983 10.4535 16.8845 10.2448 16.8845 10C16.8845 9.75517 16.7983 9.5465 16.626 9.374C16.4535 9.20167 16.2448 9.1155 16 9.1155C15.7552 9.1155 15.5465 9.20167 15.374 9.374C15.2017 9.5465 15.1155 9.75517 15.1155 10C15.1155 10.2448 15.2017 10.4535 15.374 10.626C15.5465 10.7983 15.7552 10.8845 16 10.8845Z' fill='white' fill-opacity='0.6'/%3E%3C/g%3E%3C/svg%3E");
  display: inline-block;
  width: 24px;
  height: 24px;
}

.important {
  background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.2) 100%
    ),
    #080708;
}
.important .icon::before,
.announce .icon::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15 6.66666C15 5.34058 14.4732 4.06881 13.5355 3.13113C12.5979 2.19345 11.3261 1.66666 10 1.66666C8.67392 1.66666 7.40215 2.19345 6.46447 3.13113C5.52678 4.06881 5 5.34058 5 6.66666C5 12.5 2.5 14.1667 2.5 14.1667H17.5C17.5 14.1667 15 12.5 15 6.66666Z' stroke='white' stroke-opacity='0.6' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.4409 17.5C11.2944 17.7526 11.0842 17.9622 10.8311 18.1079C10.5781 18.2537 10.2913 18.3304 9.99928 18.3304C9.7073 18.3304 9.42044 18.2537 9.16743 18.1079C8.91441 17.9622 8.70413 17.7526 8.55762 17.5' stroke='white' stroke-opacity='0.6' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  width: 20px;
  height: 20px;
}
.announce {
  background: linear-gradient(
      0deg,
      rgba(158, 125, 60, 0.3) 0%,
      rgba(158, 125, 60, 0.3) 100%
    ),
    #080708;
}

.alert {
  background: linear-gradient(
      0deg,
      rgba(229, 21, 21, 0.3) 0%,
      rgba(229, 21, 21, 0.3) 100%
    ),
    #080708;
}
.alert .icon::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 25' fill='none'%3E%3Cmask id='mask0_1583_8316' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='25'%3E%3Crect y='0.5' width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1583_8316)'%3E%3Cpath d='M11.9996 21.9C11.7649 21.9 11.538 21.8548 11.3189 21.7645C11.0997 21.674 10.8997 21.5435 10.7189 21.373L3.12661 13.7808C2.95611 13.5999 2.82561 13.3999 2.73511 13.1808C2.64478 12.9616 2.59961 12.7347 2.59961 12.5C2.59961 12.2653 2.64478 12.0358 2.73511 11.8115C2.82561 11.5872 2.95611 11.3898 3.12661 11.2193L10.7189 3.62701C10.8997 3.44617 11.0997 3.31317 11.3189 3.22801C11.538 3.14267 11.7649 3.10001 11.9996 3.10001C12.2343 3.10001 12.4638 3.14267 12.6881 3.22801C12.9124 3.31317 13.1099 3.44617 13.2804 3.62701L20.8726 11.2193C21.0534 11.3898 21.1864 11.5872 21.2716 11.8115C21.3569 12.0358 21.3996 12.2653 21.3996 12.5C21.3996 12.7347 21.3569 12.9616 21.2716 13.1808C21.1864 13.3999 21.0534 13.5999 20.8726 13.7808L13.2804 21.373C13.1099 21.5435 12.9124 21.674 12.6881 21.7645C12.4638 21.8548 12.2343 21.9 11.9996 21.9ZM12.2209 20.3038L19.8034 12.7213C19.8547 12.6699 19.8804 12.5962 19.8804 12.5C19.8804 12.4038 19.8547 12.3301 19.8034 12.2788L12.2209 4.69626C12.1695 4.64492 12.0958 4.61926 11.9996 4.61926C11.9034 4.61926 11.8297 4.64492 11.7784 4.69626L4.19586 12.2788C4.14453 12.3301 4.11886 12.4038 4.11886 12.5C4.11886 12.5962 4.14453 12.6699 4.19586 12.7213L11.7784 20.3038C11.8297 20.3551 11.9034 20.3808 11.9996 20.3808C12.0958 20.3808 12.1695 20.3551 12.2209 20.3038ZM11.2496 13.5865H12.7496V7.97126H11.2496V13.5865ZM11.9996 16.202C12.2253 16.202 12.4163 16.1238 12.5726 15.9673C12.7291 15.8109 12.8074 15.6199 12.8074 15.3943C12.8074 15.1686 12.7291 14.9776 12.5726 14.8213C12.4163 14.6648 12.2253 14.5865 11.9996 14.5865C11.7739 14.5865 11.5829 14.6648 11.4266 14.8213C11.2701 14.9776 11.1919 15.1686 11.1919 15.3943C11.1919 15.6199 11.2701 15.8109 11.4266 15.9673C11.5829 16.1238 11.7739 16.202 11.9996 16.202Z' fill='white' fill-opacity='0.5'/%3E%3C/g%3E%3C/svg%3E");
  height: 24px;
  width: 24px;
}

.notice_date span {
  display: flex;
  color: #aeaeae;
  font-family: Barlow;
  font-size: 13px;
  font-weight: 400;
  line-height: 100%; /* 13px */
  align-items: center;
}

.notice_text {
  display: flex;
  align-items: center;
}

.notice_wrap h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  color: #c8c8c8;
  text-overflow: ellipsis;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
}

@media (max-width: 767px) {
  .notice_container {
    height: 44px;
  }

  .notice_wrap {
    padding: 6px 4px 6px 8px;
    height: 100%;
    align-items: center;
    justify-content: space-between;
  }

  .notice .icon::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.60732 12.0526L1.13216 13.5276C0.922526 13.7374 0.681395 13.7849 0.408763 13.6702C0.136254 13.5554 0 13.3487 0 13.0501V2.33203C0 1.9598 0.128947 1.64474 0.386842 1.38684C0.644737 1.12895 0.959798 1 1.33203 1H12.668C13.0402 1 13.3553 1.12895 13.6132 1.38684C13.8711 1.64474 14 1.9598 14 2.33203V10.7206C14 11.0928 13.8711 11.4079 13.6132 11.6658C13.3553 11.9237 13.0402 12.0526 12.668 12.0526H2.60732ZM2.13684 10.9474H12.668C12.7247 10.9474 12.7767 10.9237 12.8238 10.8764C12.8711 10.8293 12.8947 10.7773 12.8947 10.7206V2.33203C12.8947 2.27529 12.8711 2.22334 12.8238 2.17618C12.7767 2.1289 12.7247 2.10526 12.668 2.10526H1.33203C1.27529 2.10526 1.22334 2.1289 1.17618 2.17618C1.1289 2.22334 1.10526 2.27529 1.10526 2.33203V11.9677L2.13684 10.9474ZM4.05263 7.17805C4.23304 7.17805 4.38679 7.11456 4.5139 6.98758C4.64088 6.86047 4.70437 6.70672 4.70437 6.52632C4.70437 6.34591 4.64088 6.19216 4.5139 6.06505C4.38679 5.93807 4.23304 5.87458 4.05263 5.87458C3.87223 5.87458 3.71847 5.93807 3.59137 6.06505C3.46439 6.19216 3.40089 6.34591 3.40089 6.52632C3.40089 6.70672 3.46439 6.86047 3.59137 6.98758C3.71847 7.11456 3.87223 7.17805 4.05263 7.17805ZM7 7.17805C7.1804 7.17805 7.33416 7.11456 7.46126 6.98758C7.58825 6.86047 7.65174 6.70672 7.65174 6.52632C7.65174 6.34591 7.58825 6.19216 7.46126 6.06505C7.33416 5.93807 7.1804 5.87458 7 5.87458C6.8196 5.87458 6.66584 5.93807 6.53874 6.06505C6.41175 6.19216 6.34826 6.34591 6.34826 6.52632C6.34826 6.70672 6.41175 6.86047 6.53874 6.98758C6.66584 7.11456 6.8196 7.17805 7 7.17805ZM9.94737 7.17805C10.1278 7.17805 10.2815 7.11456 10.4086 6.98758C10.5356 6.86047 10.5991 6.70672 10.5991 6.52632C10.5991 6.34591 10.5356 6.19216 10.4086 6.06505C10.2815 5.93807 10.1278 5.87458 9.94737 5.87458C9.76696 5.87458 9.61321 5.93807 9.48611 6.06505C9.35912 6.19216 9.29563 6.34591 9.29563 6.52632C9.29563 6.70672 9.35912 6.86047 9.48611 6.98758C9.61321 7.11456 9.76696 7.17805 9.94737 7.17805Z' fill='white' fill-opacity='0.6'/%3E%3C/svg%3E");
    width: 14px;
    height: 14px;
  }
  .important .icon::before,
  .announce .icon::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'%3E%3Cg clip-path='url(%23clip0_1583_8502)'%3E%3Cpath d='M10.5 4.91669C10.5 3.98843 10.1313 3.09819 9.47487 2.44181C8.8185 1.78544 7.92826 1.41669 7 1.41669C6.07174 1.41669 5.1815 1.78544 4.52513 2.44181C3.86875 3.09819 3.5 3.98843 3.5 4.91669C3.5 9.00002 1.75 10.1667 1.75 10.1667H12.25C12.25 10.1667 10.5 9.00002 10.5 4.91669Z' stroke='white' stroke-opacity='0.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.00954 12.5C7.90699 12.6768 7.75979 12.8236 7.58268 12.9256C7.40557 13.0276 7.20477 13.0813 7.00038 13.0813C6.79599 13.0813 6.59519 13.0276 6.41808 12.9256C6.24097 12.8236 6.09377 12.6768 5.99121 12.5' stroke='white' stroke-opacity='0.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1583_8502'%3E%3Crect width='14' height='14' fill='white' transform='translate(0 0.25)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    width: 14px;
    height: 14px;
  }

  .alert .icon::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'%3E%3Cpath d='M7 14.5C6.82525 14.5 6.65627 14.4664 6.49306 14.3991C6.32985 14.3317 6.18091 14.2345 6.04625 14.1076L0.392447 8.45375C0.265479 8.31909 0.168298 8.17015 0.100904 8.00694C0.0336347 7.84373 0 7.67475 0 7.5C0 7.32525 0.0336347 7.15434 0.100904 6.98729C0.168298 6.82023 0.265479 6.67322 0.392447 6.54625L6.04625 0.892447C6.18091 0.757784 6.32985 0.658741 6.49306 0.595319C6.65627 0.531773 6.82525 0.5 7 0.5C7.17475 0.5 7.34566 0.531773 7.51271 0.595319C7.67977 0.658741 7.82678 0.757784 7.95375 0.892447L13.6076 6.54625C13.7422 6.67322 13.8413 6.82023 13.9047 6.98729C13.9682 7.15434 14 7.32525 14 7.5C14 7.67475 13.9682 7.84373 13.9047 8.00694C13.8413 8.17015 13.7422 8.31909 13.6076 8.45375L7.95375 14.1076C7.82678 14.2345 7.67977 14.3317 7.51271 14.3991C7.34566 14.4664 7.17475 14.5 7 14.5ZM7.16476 13.3113L12.8113 7.66476C12.8495 7.62653 12.8686 7.57161 12.8686 7.5C12.8686 7.42839 12.8495 7.37347 12.8113 7.33524L7.16476 1.6887C7.12653 1.65047 7.07161 1.63136 7 1.63136C6.92839 1.63136 6.87347 1.65047 6.83524 1.6887L1.1887 7.33524C1.15047 7.37347 1.13136 7.42839 1.13136 7.5C1.13136 7.57161 1.15047 7.62653 1.1887 7.66476L6.83524 13.3113C6.87347 13.3495 6.92839 13.3686 7 13.3686C7.07161 13.3686 7.12653 13.3495 7.16476 13.3113ZM6.44149 8.3091H7.55851V4.12753H6.44149V8.3091ZM7 10.2568C7.16805 10.2568 7.31028 10.1985 7.4267 10.082C7.54325 9.96558 7.60152 9.82334 7.60152 9.65529C7.60152 9.48724 7.54325 9.34501 7.4267 9.22859C7.31028 9.11205 7.16805 9.05378 7 9.05378C6.83195 9.05378 6.68972 9.11205 6.5733 9.22859C6.45676 9.34501 6.39848 9.48724 6.39848 9.65529C6.39848 9.82334 6.45676 9.96558 6.5733 10.082C6.68972 10.1985 6.83195 10.2568 7 10.2568Z' fill='white' fill-opacity='0.6'/%3E%3C/svg%3E");
    width: 14px;
    height: 14px;
  }

  .notice_text {
    display: block;
  }

  .notice_date {
    gap: 4px;
  }

  .notice_wrap h3 {
    font-size: 12px;
    line-height: 16px;
  }
}

/*--------------
 お知らせ（詳細ページ）
---------------*/
.notice-detailpage {
  background: linear-gradient(0deg, #080708 0%, #080708 100%), #fff;
}

.notice-detailpage-header {
  height: 80px;
  width: 100%;
  display: flex;
  padding: 0px 30px 1px 41px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  background: #080708;
  position: fixed;
  top: 0;
  z-index: 1000;
}

.notice-detailpage-header .logo {
  height: 40px;
  width: auto;
}

.notice-detailpage-wrap {
  margin: 160px 0 96px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.notice-detailpage-main {
  display: flex;
  width: 92%;
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 8px 66px 8px;
  flex-direction: column;
  align-items: flex-start;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
    Meiryo, sans-serif;
}

.notice-detailpage-main h1 {
  color: #fff;
  font-size: 24px;
  font-weight: 400;
  line-height: 36px; /* 150% */
  padding-bottom: 16px;
}

.notice-detailpage-main-content .outline {
  display: none;
}

.notice-detailpage-main-content h2 {
  color: #eee;
  font-size: 20px;
  font-weight: 300;
  line-height: 28px; /* 140% */
  letter-spacing: 2px;
  padding-bottom: 16px;
}

.notice-detailpage-main h5 {
  color: #c8c8c8;
  font-size: 14px;
  font-weight: 300;
  line-height: 16.8px; /* 120% */
  padding-bottom: 24px;
}

.notice-detailpage-main .date {
  color: #9f9f9f;
  font-family: Barlow;
  font-weight: 400;
}

.notice-detailpage-main p {
  color: #c8c8c8;
  font-size: 16px;
  font-weight: 300;
  line-height: 28.8px; /* 180% */
  padding-bottom: 16px;
}

.notice-detailpage-main p a {
  text-decoration: underline;
  color: fff;
}

.notice-detailpage-main p:last-child {
  padding-bottom: 0px;
}

.notice-detailpage-main ul {
  display: flex;
  padding-top: 18px;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

.notice-detailpage-main li {
  color: #c8c8c8;
  font-size: 16px;
  font-weight: 300;
  line-height: 22.4px; /* 140% */
}

.notice-detailpage-main-content {
  margin-top: -6px;
  margin-bottom: -16px;
}

.close-btn {
  display: flex;
  width: 280px;
  height: 40px;
  padding: 8.59px 111.62px 8.82px 111.61px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: #1e1e1e;
  margin: 80px auto 0;
}

.close-btn h5 {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1.6px;
}

.close-btn:hover {
  background: rgba(0, 0, 0, 0);
  border: 1px solid rgba(255, 255, 255, 0.8);
  transition: 0.3s;
}

@media (max-width: 768px) {
  .notice-detailpage-wrap {
    margin: 80px 0 96px;
  }
}

@media (max-width: 425px) {
  .notice-detailpage-main {
    padding: 24px 8px 64px 8px;
  }
}

@media (max-width: 376px) {
  .notice-detailpage-header {
    height: 56px;
    padding: 0px 24px 1px 23px;
  }

  .notice-detailpage-wrap {
    margin: 56px 0 96px;
  }

  .notice-detailpage-main h1 {
    font-size: 16px;
    font-weight: 250;
    line-height: 24px; /* 150% */
  }

  .notice-detailpage-main h5 {
    color: #9f9f9f;
    font-size: 13px;
    line-height: 15.6px; /* 120% */
  }

  .notice-detailpage-main h5.date {
    font-family: "Hiragino Kaku Gothic ProN";
    font-size: 11px;
    font-weight: 250;
    line-height: 13.2px; /* 120% */
  }

  .notice-detailpage-main p {
    font-size: 14px;
    font-weight: 400;
    line-height: 25.2px; /* 180% */
    padding-bottom: 16px;
  }

  .notice-detailpage-main li {
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px; /* 140% */
  }
}

/*--------------
 ポップアップエリア
---------------*/
.no-scroll {
  overflow: hidden;
}

.popup_area {
  position: fixed;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0%;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.7);
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease;
  pointer-events: none; /* Prevents interfering with clicks when hidden */
}

.popup_area.open {
  display: flex;
  opacity: 1;
  visibility: visible;
  animation: fadeIn 0.7s ease forwards;
  pointer-events: auto; /* Enables clicking when popup is visible */
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.popup_area section {
  display: flex;
  flex-direction: column;
  position: relative;
  background: #3c3c3c;
  border-radius: 12px;
}

.popup_area .main {
  display: flex;
  position: relative;
}
.popup_area .popup_img {
  width: 100%;
  max-width: 450px;
  border-radius: 12px 12px 0px 0px;
}

.popup_area .to_site_btn {
  display: flex;
  width: 100%;
  height: 42px;
  padding: 2px 8px 2px 12px;
  justify-content: center;
  align-items: center;
  border-radius: 0px 0px 12px 12px;
  background: #2c2c2c;
}

.popup_area .to_site_btn p {
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  line-height: 24px;
}

.popup_area .to_site_btn p::after {
  display: inline-block;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M1 0.5L5 5L1 9.5' stroke='white'/%3E%3C/svg%3E");
  padding-left: 8px;
}

.popup_area .close_popup {
  position: absolute;
  top: 8px;
  right: 8px;
  cursor: pointer;

  width: 32px;
  height: 32px;
  border-radius: 30px;
  fill: rgba(237, 237, 237, 0.7);
  backdrop-filter: blur(5px);
}

.popup_area .close_popup::after {
  display: inline-block;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cg filter='url(%23filter0_b_4201_11819)'%3E%3Crect width='32' height='32' rx='16' fill='%23EDEDED' fill-opacity='0.7'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.9997 17.8856L21.6564 23.5422L23.0706 22.128L17.4139 16.4713L23.5423 10.3429L22.1281 8.92871L15.9997 15.0571L9.87124 8.92871L8.45703 10.3429L14.5854 16.4713L8.92876 22.128L10.343 23.5422L15.9997 17.8856Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_b_4201_11819' x='-10' y='-10' width='52' height='52' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeGaussianBlur in='BackgroundImageFix' stdDeviation='5'/%3E%3CfeComposite in2='SourceAlpha' operator='in' result='effect1_backgroundBlur_4201_11819'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_backgroundBlur_4201_11819' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
  width: 32px;
  height: 32px;
}

@media (max-width: 521px) {
  .popup_area {
    padding: 0 6.8%;
  }
}
@media (max-width: 375px) {
  .popup_area .close_popup {
    top: 5.76px;
    right: 5.76px;

    width: 23.04px;
    height: 23.04px;
  }

  .popup_area .close_popup::after {
    width: 1.44rem;
    height: 1.44rem;
  }

  .popup_area .to_site_btn {
    height: 30.24px;
    padding: 1.44px 5.76px 1.44px 8.64px;
  }

  .popup_area .to_site_btn p {
    font-size: 10.08px;
    line-height: 17.28px;
  }

  .popup_area .to_site_btn p::after {
    padding-left: 5.76px;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='8' viewBox='0 0 4 8' fill='none'%3E%3Cpath d='M0.380005 0.439941L3.26001 3.67994L0.380005 6.91994' stroke='white' stroke-width='0.72'/%3E%3C/svg%3E");
  }
}

/* New Releaseコンテンツ */
.newrelease_body {
  width: 100%;
	max-width: 2560.8px;
  margin: 0 auto;
/*   background: #000; */
  background: transparent;

  &::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .outer {
    background: #1e1e1e;
  }

  .nav-button,
  .studio_nav-button {
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    border: none;
    cursor: pointer;
    opacity: 0.5;
    padding: 0;
    flex-shrink: 0;
  }

  .nav-button img,
  .studio_nav-button img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .nav-button.is-active,
  .studio_nav-button.is-active {
    opacity: 1;
  }

  .detail-button,
  .studio_detail-button {
    background-color: #ffffff14;
    padding: 16px 32px;
    border-radius: 40px;
    text-align: center;
    width: fit-content;
    display: flex;
  }

  .detail-button span,
  .studio_detail-button span {
    color: #d9d9d9;
    font-family: "Noto Sans JP";
    font-size: max(1.11vw, 16px);
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.8px;
  }

  .video-player-container iframe,
  .studio_video-player-container iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
  }

  .video-title,
  .studio_video-title {
    color: #d9d9d9;
    font-family: "Yu Mincho", serif;
    font-style: normal;
    font-weight: 400;
    line-height: 133%;
    letter-spacing: 0.7px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .video-description,
  .studio_video-description {
    white-space: pre-line;
    color: #c8c8c8;
    font-family: "Hiragino Kaku Gothic ProN", sans-serif;
    font-style: normal;
    font-weight: 300;
    line-height: 200%;
    letter-spacing: 0.7px;
  }

  /* Thinkific */
  /* PC */
  @media (min-width: 1081px) {
    .outer {
      padding-top: 40px;
      padding-bottom: 40px;
    }

    .video-nav-mobile {
      display: none;
    }

    .main-content-area {
      display: flex;
      gap: 40px;
    }

    .video-player-container {
      flex: 1.5;
    }

    .video-info-container {
      /*
       32/27 の比率は、flex比率 1.5:1 の場合に 16:9 の高さに合わせるために計算した 
       動画エリア aspect-ratio: (1.5/2.5 * 9/16) = 0.3375
       説明エリア aspect-ratio: (1/2.5 * 27/32) = 0.3375 
      */
      aspect-ratio: 32/27;
      flex: 1;
      padding-top: 40px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .video-title {
      font-size: 1.8vw;
      flex-shrink: 0;
    }

    .video-description {
      margin-top: 16px;
      font-size: 1.25vw;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 6;
    }

    .detail-button {
      margin-top: 32px;
      flex-shrink: 0;
    }

    .video-nav-desktop {
      display: flex;
      flex-wrap: nowrap;
		height: 6.14vw;
      min-height: 118px;
      gap: 8px;
      margin-top: 16px;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;

      /* スクロールバー非表示 */
      &::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
      }
    }
  }

  /* モバイル */
  @media (max-width: 1080px) {
    .outer {
      padding-top: 22px;
      padding-bottom: 38px;
    }

    .video-nav-desktop {
      display: none;
    }

    .main-content-area {
      display: flex;
      flex-direction: column;
    }

    .video-nav-mobile {
      display: flex;
      flex-wrap: nowrap;
	   height: 2.13vw;
      min-height: 80px;
      gap: 8px;
      margin-top: 16px;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;

      /* スクロールバー非表示 */
      &::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
      }
    }

    .video-info-container {
      margin-top: 16px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .video-title {
      font-size: 20px;
    }

    .video-description {
      font-size: 14px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 6;
    }

    .detail-button {
      align-self: center;
    }
  }

  /* Studio */
  .studio_outer {
/*     background-color: #d1a64e1a; */
  }

  .studio_video-nav-desktop {
    display: none;
  }

  .studio_video-nav-mobile {
    display: flex;
    flex-wrap: nowrap;
    height: 2.13vw;
    min-height: 80px;
    gap: 8px;
    margin-top: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;

    /* スクロールバー非表示 */
    &::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }
  }

  /* PC */
  @media (min-width: 769px) {
    .studio_outer {
      padding: 40px;
    }

    .studio_main-content-area {
      display: flex;
      flex-direction: column;
    }

    .studio_video-info-container {
      margin-top: 32px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .studio_video-title {
      font-size: 26px;
      flex-shrink: 0;
    }

    .studio_video-description {
      font-size: 18px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 6;
    }

    .studio_detail-button {
      margin-top: 8px;
      flex-shrink: 0;
    }

    .studio_detail-button {
      align-self: flex-end;
    }
  }

  /* モバイル */
  @media (max-width: 768px) {
    .studio_outer {
      padding: 16px 12px;
    }

    .studio_main-content-area {
      display: flex;
      flex-direction: column;
    }

    .studio_video-info-container {
      margin-top: 16px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .studio_video-title {
      font-size: 20px;
    }

    .studio_video-description {
      font-size: 14px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 6;
    }

    .studio_detail-button {
      margin-top: 8px;
      margin-bottom: 16px;
      align-self: center;
    }
  }
}