@charset "UTF-8";

/*-------------------------
 RESET
-------------------------*/
article .entry-content {
  padding-bottom: 0;
  border-bottom: 0;
}
[role="contentinfo"] {
  margin-top: 0;
}
*, *:before, *:after {
  box-sizing: initial;
}
.content {
  padding: 0;
}
a {
  font-size: 1rem;
}
.entry-content .ui-static-text a {
  color: #2C2A29;
  text-decoration: underline;
}
.entry-content .ui-static-text a:hover {
  text-decoration: none;
  opacity: 0.7
}

/*-------------------------
  共通
-------------------------*/

/*---- common　----*/

main.main {
    background: #F4F5F7;
    padding-top: 80px;
}
.ui-static-text-medium.read {
    font-size: 1.125rem;
}

@media (width > 1104px) {
    .ui-static-section-wrapper {
        padding: 64px 0 96px;
        max-width: 1104px;
        margin: 0 auto;
    }
}
.ui-static-container.ui-static-container-space-xl {
    row-gap: 5rem;
}

.ui-static-container.ui-static-container-space-s {
    row-gap: 1.25rem;
}
.ui-static-container.ui-static-container-space-xs {
    row-gap: 0.75rem;
}
.ui-static-text-medium {
    font-size: 1.0625rem;
    line-height: 200%;
}
.ui-static-grid-item .ui-static-text-medium {
    font-size: 1.0625rem;
    line-height: 200% !important;
    font-weight: normal;
}
.ui-static-grid-item .ui-static-text-medium .ui-static-item-card-description {
    font-size: 1rem;
    line-height: 170% !important;
}

@media screen and (max-width: 767px) {
    main.main {
    padding-top: 0;
}
.ui-static-text-medium.read {
    font-size: 0.938rem;
}
.ui-static-container.ui-static-container-space-s {
    row-gap: 1rem;
}
.ui-static-container.ui-static-container-space-xs {
    row-gap: 0.5rem;
}
.ui-static-grid-space-basic {
    gap: 32px;
}
.ui-static-grid-item .ui-static-text-medium {
    font-size: .875rem;
    line-height: 170%;
}
.ui-static-grid-item .ui-static-text-medium .ui-static-item-card-description {
    font-size: .875rem;
    line-height: 170%;
}

}



.ui-static-text {
    color: #2c2a29;
}

.ui-static-section-wrapper .photo-wrapper {
    max-width: 731px;
    margin: 0 auto;
}

.ui-static-image.ui-static-image-aspect-ratio-16x9 {
    aspect-ratio: 16 / 9.9;
}


.layout-d {
background: #FFF;
border-top: 6px solid; 
  border-image: linear-gradient(221.32deg, #48FD1A -42.84%, #EEFF3E 72.99%) 1; 
  padding: 40px 64px;
}

@media screen and (max-width: 767px) {
  .layout-d {
    padding: 20px; 
  }

  .layout-d .ui-static-grid-list {
    display: block; 
  }

  .layout-d .ui-static-grid-item:first-child { 
    text-align: center; 
  }

  .layout-d .ui-static-image img {
    width: 143px; 
    height: auto; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 16px;
  }

}


.center-button {
    text-align: center;
}

.ui-static-heading-size-medium {
    font-size: 20px;
    font-weight: 500;
    position: relative;
    padding-left: 32px;
    line-height: 1.5;
}

.ui-static-heading-size-medium::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%; 
    transform: translateY(-50%); 
    width: 20px;
    height: 2px;
    background-color: #2C2A29;
}

.image-caption {
  font-size: 0.875em; 
  color: #697180; 
}

@media screen and (max-width: 767px) {
  .ui-static-heading-size-enormous {
    line-height: 1.5;
    font-size: 18px;
  }
  .image-caption {
  font-size: 12px; 
}

  .ui-static-grid-list {
    grid-template-columns: 1fr;
  }

  .ui-static-grid-col-4-2 {
    grid-template-columns: 1fr;
  }

  .ui-static-grid-item {
    width: 100%;
    padding: 0;
  }

  .photo-wrapper {
    float: none;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 300px;
    text-align: center;
    margin-bottom: 20px;
  }

  .photo-wrapper .ui-static-image {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .image-caption {
    text-align: left;
  }
  .ui-static-text-medium {
    font-size: .875rem;
}
.ui-static-heading-size-medium {
    font-size: 16px;
}
.ui-static-container.ui-static-container-space-l {
    row-gap: 3rem;
}
}

/* ==================================== */
/* メインビジュアル (MV) のスタイル */
/* ==================================== */

.story-mv-container {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 20px;
}


.mv-image-wrapper {
  width: 100%;
  line-height: 0;
}

.mv-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

.mv-content-wrapper {
  position: absolute;
  z-index: 2;
  padding: 0; 
  width: 100%; 
  box-sizing: border-box;
}

.mv-content-box {
  background-color: white;
  padding: 32px; 
  border-radius: 24px 24px 24px 2px; 
  box-shadow: none; 
  box-sizing: border-box;
  display: flex; 
  flex-direction: column;
  justify-content: flex-start;
}

/* 記事タイトル */
.mv-title {
  font-size: 32px;
  line-height: 1.4;
  font-weight: 500;
  color: #2c2a29;
  margin-bottom: 8px; 
}

.mv-meta-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap; 
  margin-bottom: 16px;
}

.mv-date {
  font-size: 16px; 
  color: #697180;
  margin-right: 12px; 
  white-space: nowrap; 
}

/* カテゴリーのリスト */
.mv-categories-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px; 
}

.mv-category-item {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  color: #2C2A29; 
  white-space: nowrap; 
}


.mv-category-item::before {
  content: "•"; 
  font-size: 1.2em; 
  line-height: 1;
  margin-right: 4px; 
  position: relative;
  top: -1px;
}


.mv-category-color-1 {
  background-color: transparent;
  color: #2C2A29;
}
.mv-category-color-1::before {
    color: #FB51A9; 
}

.mv-category-color-2 {
  background-color: transparent;
  color: #2C2A29;
}
.mv-category-color-2::before {
    color: #ADD8E6; 
}

.mv-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; 
}


.mv-tag-item {
  display: inline-block;
  background-color: #F4F5F6;
  color: #697180; 
  font-size: 14px; 
  padding: 4px 8px;
  border-radius: 16px;
  font-weight: bold;
  width: fit-content;
}


/* ==================================== */
/* PC時のテキストボックス位置とサイズ調整 */
/* ==================================== */
@media screen and (min-width: 768px) {
  .mv-content-wrapper {
    position: absolute; 
    width: auto; 
    height: auto; 
    max-width: unset;
  }

  /* 右上 */
  .mv-content-wrapper.top-right {
    top: 32px; /* 上から32px */
    right: 32px; /* 右から32px */
    left: auto;
    bottom: auto;
  }

  /* 左上 */
  .mv-content-wrapper.top-left {
    top: 32px;
    left: 32px;
    right: auto;
    bottom: auto;
  }

  /* 左下 */
  .mv-content-wrapper.bottom-left {
    bottom: 32px;
    left: 32px;
    top: auto;
    right: auto;
  }

  /* 右下 */
  .mv-content-wrapper.bottom-right {
    bottom: 32px;
    right: 32px;
    top: auto;
    left: auto;
  }

  .mv-content-box {
    width: 576px;
    min-height: 283px;
    position: static;
  }
  .layout-d img {
    width: 213px;
    max-width: max-content;
}
}

/* ==================================== */
/* SP時のスタイル調整 */
/* ==================================== */
@media screen and (max-width: 767px) {
  .story-mv-container {
    border-radius: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: auto;
  }

  .mv-image-wrapper {
    width: 100%;
    line-height: 0;
  }

  .mv-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
  }

  .mv-content-wrapper {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin-top: -135px; 
    padding: 0 12px; 
  }

  .mv-content-box {
    width: 100%; 
    height: auto; 
    max-width: none;
    padding: 16px 20px; 
    box-shadow: none; 
    border-radius: 16px 16px 16px 2px;
    text-align: left;
    justify-content: flex-start; 
  }

  .mv-title {
    line-height: 1.5; 
    font-size: 18px; 
    font-weight: 500; 
    margin-bottom: 8px; 
  }

  .mv-meta-info {
      /*flex-direction: column; */
      align-items: flex-start; 
      margin-bottom: 8px; 
  }
  .mv-date {
    font-size: 12px;
    margin-right: 8px;
    margin-bottom: 4px;
  }
  .mv-categories-list {
    gap: 12px; 
  }
  .mv-category-item {
    font-size: 12px;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
  }
  .mv-tag-item {
    font-size: 12px;
  }


  .ui-static-table.ui-static-table-overflow .ui-static-table-note {
      display: block
  }

  .ui-static-navigation-sp-col2 {
      box-shadow:0 3px 6px rgba(0,0,0,.16)
  }

  .ui-static-navigation-sp-col2 .ui-static-navigation-ul {
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.3;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;
      gap: 8px;
      padding: 24px 20px
  }

  .ui-static-navigation-sp-col2 .ui-static-navigation-ul .ui-static-navigation-item {
      width: 48%;
      position: relative;
      border-right: none;
      display: flex;
      justify-content: center;
      margin: 4px 0;
      text-align: center
  }

  .ui-static-navigation-sp-col2 .ui-static-navigation-ul .ui-static-navigation-item [class^=ui-static-link] {
      justify-content: center
  }

  .ui-static-navigation-sp-col2 .ui-static-navigation-ul .ui-static-navigation-item [class^=ui-static-link] span {
      white-space: normal
  }

  .ui-static-navigation-sp-col2 .ui-static-navigation-ul .ui-static-navigation-item .ui-static-navigation-image {
      display: flex;
      margin-right: 8px
  }

  .ui-static-navigation-sp-col2.ui-static-navigation-variant-primary .ui-static-navigation-item:nth-child(odd):after {
      content: "";
      width: 1px;
      height: 16px;
      background: #c0c5cc;
      position: absolute;
      top: 50%;
      right: -7px;
      transform: translateY(-50%);
      margin: 0 8px
  }

  .ui-static-navigation-sp-col2.ui-static-navigation-variant-primary .ui-static-navigation-item:nth-child(even):after {
      display: none
  }

  .ui-static-navigation-sp-col2.ui-static-navigation-variant-anchor .ui-static-navigation-ul {
      align-items: stretch;
      gap: 16px
  }

  .ui-static-navigation-sp-col2.ui-static-navigation-variant-anchor .ui-static-navigation-item {
      width: calc(50% - 8px)
  }

  .ui-static-navigation-sp-col2.ui-static-navigation-variant-anchor .ui-static-navigation-item:after {
      content: "";
      height: 1px;
      width: 100%;
      border-bottom: dotted 1px #c0c5cc;
      position: absolute;
      top: unset;
      bottom: -10px
  }
.ui-static-heading-size-medium {
    padding-left: calc(12px + 8px); 
  }

  .ui-static-heading-size-medium::before {
    width: 12px;
    height: 2px;
    left: 0; 
    top: 0.7em; 
    transform: translateY(0); 
    background-color: #2C2A2A;
  }
  
}


.member_name {
  border-bottom: 1px dashed #E6E7EB;
  padding-bottom: 16px;
  font-size: 1.063rem;
  line-height: 200%;
  font-weight: normal;
}
.ui-static-text-gray {
    color: #697180;
}
@media screen and (min-width: 768px) {
    .ui-static-grid-space-basic {
        gap: 40px;
    }
    
}

/* PC用CSS */
.gradient-bullet-heading {
  display: flex; 
  align-items: center; 
  font-size: 22px;
}

.gradient-bullet-heading::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-right: 10px;
  background: linear-gradient(225deg, #D27EFE 0%, #34BBFF 100%);
  transform: rotate(174.19deg);
}
.ui-static-link {
    text-decoration: none;
}

/* スマートフォン（SP）用CSS */
@media (max-width: 768px) {
  .gradient-bullet-heading {
    display: flex; 
    align-items: center; 
    font-size: 17px;
  }
.member_name {
  border-bottom: 1px dashed #E6E7EB;
  padding-bottom: 8px;
}
  .gradient-bullet-heading::before {
    width: 16px;
    height: 16px;
    margin-right: 8px;
  }
  .ui-static-link {
    font-size: 12px;
}
}

/* ノートPCなど小さいモニター用 (1280px ~ 769px) */
@media screen and (max-width: 1280px) and (min-width: 769px) {
  .story-mv-container {
    max-width: 1104px;
    margin: 0 auto;
  }
.mv-content-box {
    padding: 30px;
    max-width: 480px;
    height: 250px;
  }
  .mv-title {
    font-size: 28px;
    line-height: 1.4;
  }

  .mv-meta-info p,
  .mv-categories-list span,
  .mv-tags-list span {
    font-size: 13px;
  }
  main.main {
    background: #F4F5F7;
    padding-top: 64px;
}
}

.ui-static-button-primary {
    background: #2C2A29;
    color: #fff;
    border-color: #2C2A29;
    height: auto;
    min-width: 222px;
}
.ui-static-button-primary:hover {
    color: #fff;
}