/**
 * Front Page Styles
 * Elegant styling for front page with serif fonts
 * 
 * @package SHIPS Child
 * @subpackage Pages\FrontPage
 * @version 1.0.0
 */

/* =========================================
   Serif Font for Header Catch
   ========================================= */

/* Frontpage header_catchとcommon_catchにserifフォントを適用 */
#content_builder .header_catch.common_catch {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

/* =========================================
   Elegant Typography
   ========================================= */

/* 見出しのスタイル改善 */
#content_builder .header_catch.common_catch {
  margin-bottom: 40px;
  color: #2c2c2c;
}

/* 説明文のスタイル改善 */
#content_builder .header_desc {
  color: #666666;
  line-height: 2.0;
  letter-spacing: 0.02em;
}

/* =========================================
   Spacing Improvements
   ========================================= */

/* セクション間の余白を増やす（エレガントな印象） */
#content_builder .cb_post_list {
  padding: 150px 0;
}

#content_builder .cb_post_list:last-of-type {
  padding-bottom: 180px;
}

#content_builder .cb_voice_list {
  padding: 150px 0;
}

#content_builder .cb_voice_list:last-of-type {
  padding-bottom: 180px;
}

#content_builder .cb_faq_list {
  padding: 150px 0;
}

#content_builder .cb_faq_list:last-of-type {
  padding-bottom: 180px;
}

#content_builder .cb_tab_post {
  padding: 150px 0;
}

/* カテゴリー表示位置の調整 - item要素を相対配置にする */
#content_builder .index_tab_post .item {
  position: relative;
}

#content_builder .index_tab_post .category {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: inline-block;
  margin: 0;
  padding: 0 20px;
  min-width: 130px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 0;
  background: var(--ui-primary, #17A2B8);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

/* リンクでないカテゴリー（span.category）のスタイル */
#content_builder .index_tab_post span.category {
  cursor: default;
}

#content_builder .cb_tab_post:last-of-type {
  padding-bottom: 180px;
}

#content_builder .cb_free_space {
  padding: 150px 0;
}

#content_builder .cb_free_space:last-of-type {
  padding-bottom: 180px;
}

/* 見出しと説明文の間隔を調整 */
#content_builder .header_catch.common_catch + .header_desc {
  margin-top: 35px;
}

/* =========================================
   Color Adjustments
   ========================================= */

/* 落ち着いた色合いのテキスト */
#content_builder .header_catch.common_catch {
  color: #2c2c2c;
}

#content_builder .header_desc {
  color: #666666;
}

/* 背景色の調整（必要に応じて） */
#content_builder .cb_free_space.no_bg_color {
  background: #f8f8f8;
}

/* =========================================
   Tab Post Carousel Event Date Styling
   ========================================= */

/* Event date styling for tab post carousel items */
.cb_tab_post .index_tab_post .item .content .event-date time {
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
}

/* =========================================
   Responsive Adjustments
   ========================================= */

@media screen and (max-width: 850px) {
  /* モバイルでの余白調整 */
  #content_builder .cb_post_list,
  #content_builder .cb_voice_list,
  #content_builder .cb_faq_list,
  #content_builder .cb_tab_post,
  #content_builder .cb_free_space {
    padding: 80px 0;
  }
  
  #content_builder .cb_post_list:last-of-type,
  #content_builder .cb_voice_list:last-of-type,
  #content_builder .cb_faq_list:last-of-type,
  #content_builder .cb_tab_post:last-of-type,
  #content_builder .cb_free_space:last-of-type {
    padding-bottom: 100px;
  }
  
  /* モバイルでの見出しスタイル */
  #content_builder .header_catch.common_catch {
    margin-bottom: 25px;
    letter-spacing: 0.03em;
    line-height: 1.5;
  }
  
  #content_builder .header_catch.common_catch + .header_desc {
    margin-top: 20px;
  }

  /* タブ投稿コンポーネントのモバイルスタイル */
  #content_builder .cb_tab_post_inner {
    width: auto;
    margin: 0 50px;
    padding: 50px 0;
  }

  #content_builder .index_tab_post_wrap.one_post_list {
    margin-top: 40px;
  }

  #content_builder .index_tab_post_headline {
    margin-top: 40px;
    font-size: 14px;
  }

  #content_builder .index_tab_post_headline > div {
    height: 50px;
    padding: 3px 10px 0;
  }

  #content_builder .cb_tab_post .splide__arrow.splide__arrow--prev,
  #content_builder .cb_tab_post .splide__arrow.splide__arrow--next {
    display: none;
  }

  #content_builder .index_tab_post {
    height: auto;
    padding: 20px;
  }

  #content_builder .index_tab_post .item {
    position: relative;
    width: 100%;
    height: auto;
    margin-right: 0;
    aspect-ratio: 565/323;
  }

  #content_builder .index_tab_post .title {
    font-size: 18px;
  }

  #content_builder .index_tab_post .member_only_icon {
    margin-bottom: 10px;
  }

  #content_builder .index_tab_post .image_wrap:after {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%);
  }

  #content_builder .cb_tab_post .link_button {
    margin-top: 50px;
  }

  /* ブログリストのモバイルスタイル */
  #content_builder .cb_post_list .blog_list {
    margin: 40px 50px 0;
    width: auto;
  }

  #content_builder .cb_post_list .blog_list .item {
    width: 100%;
  }

  #content_builder .cb_post_list .blog_list .animate_background {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 350/200;
  }

  #content_builder .cb_post_list .blog_list .content {
    width: 100%;
  }

  #content_builder .cb_post_list .blog_list .content a {
    padding: 22px 20px;
    height: auto;
    min-height: 150px;
  }

  #content_builder .cb_post_list .blog_list .title {
    font-size: 16px;
    line-height: 1.6;
    height: auto;
    max-height: 3.2em;
  }

  #content_builder .cb_post_list .blog_list .desc {
    font-size: 14px;
    line-height: 2;
    height: auto;
    max-height: 4em;
  }

  #content_builder .cb_post_list .blog_list .category {
    padding: 0 20px;
    font-size: 12px;
    min-width: 100px;
    height: 35px;
    line-height: 35px;
  }

  #content_builder .cb_post_list .blog_list .date {
    bottom: 28px;
    font-size: 14px;
  }

  #content_builder .cb_post_list .blog_list .member_only_icon {
    left: 20px;
  }

  #content_builder .cb_post_list .header_desc {
    width: auto;
    margin: 25px 50px 0;
  }

  #content_builder .cb_post_list .link_button {
    margin-top: 50px;
  }

  /* blog_list animate クラスのモバイル調整 */
  #content_builder .blog_list.animate {
    top: 0;
    opacity: 1;
  }

  /* news_list のモバイルスタイル */
  #content_builder .cb_post_list .news_list {
    margin: 40px 50px 0;
    width: auto;
  }

  #content_builder .cb_post_list .news_list .item {
    height: auto;
  }

  #content_builder .cb_post_list .news_list .animate_background {
    height: auto !important;
    width: 50% !important;
    aspect-ratio: 350/200;
  }

  #content_builder .cb_post_list .news_list .content {
    width: 50%;
  }

  #content_builder .cb_post_list .news_list .content a {
    padding: 0 30px;
  }

  #content_builder .cb_post_list .news_list .title {
    font-size: 16px;
  }

  #content_builder .cb_post_list .news_list .category {
    padding: 0 20px;
    font-size: 12px;
    min-width: 100px;
    height: 35px;
    line-height: 35px;
  }

  #content_builder .cb_post_list .news_list .date {
    margin-bottom: 15px;
  }

  /* news_list animate クラスのモバイル調整 */
  #content_builder .news_list.animate {
    top: 0;
    opacity: 1;
  }

  /* index_tab_post_wrap のモバイル調整 */
  #content_builder .index_tab_post_wrap {
    width: 100%;
    overflow: hidden;
  }

  #content_builder .index_tab_post_list {
    width: 100%;
  }

  /* コンテンツビルダー全体の幅調整 */
  #content_builder {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
}

@media screen and (max-width: 600px) {
  /* タブ投稿コンポーネントの小画面モバイルスタイル */
  #content_builder .cb_tab_post_inner {
    margin: 0;
    padding: 40px 0;
  }

  #content_builder .cb_tab_post .header_catch {
    padding: 0 20px;
  }

  #content_builder .cb_tab_post .header_desc {
    margin: 25px 20px 0;
    line-height: 2;
  }

  #content_builder .cb_tab_post .header_desc.pc {
    display: none;
  }

  #content_builder .cb_tab_post .header_desc.mobile {
    display: block;
  }

  #content_builder .index_tab_post_wrap.one_post_list {
    margin-top: 30px;
  }

  #content_builder .index_tab_post_headline {
    margin-top: 30px;
  }

  #content_builder .index_tab_post_headline > div:last-of-type {
    border-right: none;
  }

  #content_builder .index_tab_post_headline > div:first-of-type {
    border-left: none;
  }

  #content_builder .index_tab_post .content {
    padding: 20px;
  }

  #content_builder .index_tab_post .title {
    font-size: 16px;
  }

  #content_builder .cb_tab_post .link_button {
    margin-top: 40px;
  }

  /* ブログリストの小画面モバイルスタイル */
  #content_builder .cb_post_list {
    padding: 40px 0;
  }

  #content_builder .cb_post_list:last-of-type {
    padding-bottom: 40px;
  }

  #content_builder .cb_post_list .header_desc {
    margin: 23px 20px 0;
    line-height: 2;
  }

  #content_builder .cb_post_list .header_desc.pc {
    display: none;
  }

  #content_builder .cb_post_list .header_desc.mobile {
    display: block;
  }

  #content_builder .cb_post_list .blog_list {
    margin: 30px 20px 0;
  }

  #content_builder .cb_post_list .blog_list .item {
    width: 100%;
    display: block;
  }

  #content_builder .cb_post_list .blog_list .animate_background {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 350/200;
  }

  #content_builder .cb_post_list .blog_list .content {
    width: 100%;
    border-right: 1px solid #ddd;
  }

  #content_builder .cb_post_list .blog_list .content a {
    padding: 28px 20px;
    height: auto;
    min-height: 120px;
    border-left: 1px solid #ddd;
    border-top: none;
  }

  #content_builder .cb_post_list .blog_list .title {
    font-size: 16px;
    line-height: 1.6;
    height: auto;
    max-height: 3.2em;
  }

  #content_builder .cb_post_list .blog_list .desc {
    display: none;
  }

  #content_builder .cb_post_list .blog_list .date {
    bottom: 30px;
    font-size: 14px;
  }

  #content_builder .cb_post_list .link_button {
    margin-top: 40px;
  }

  /* blog_list animate クラスのモバイル調整 */
  #content_builder .blog_list.animate {
    top: 0;
    opacity: 1;
  }

  /* news_list の小画面モバイルスタイル */
  #content_builder .cb_post_list .news_list {
    margin: 30px 20px 0;
    display: block;
  }

  #content_builder .cb_post_list .news_list .item {
    height: auto;
    display: block;
  }

  #content_builder .cb_post_list .news_list .animate_background {
    height: auto !important;
    width: 100% !important;
    aspect-ratio: 350/200;
  }

  #content_builder .cb_post_list .news_list .content {
    width: 100%;
  }

  #content_builder .cb_post_list .news_list .content a {
    padding: 25px 25px;
    border: 1px solid #ddd;
    border-top: none;
  }

  #content_builder .cb_post_list .news_list .list_like_button {
    left: auto;
    top: -40px;
    bottom: auto;
  }

  /* news_list animate クラスのモバイル調整 */
  #content_builder .news_list.animate {
    top: 0;
    opacity: 1;
  }

  /* index_tab_post_wrap のモバイル調整 */
  #content_builder .index_tab_post_wrap {
    width: 100%;
    overflow: hidden;
  }

  #content_builder .index_tab_post_list {
    width: 100%;
  }

  /* コンテンツビルダー全体の幅調整 */
  #content_builder {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
}