@charset "UTF-8";
@import url("reset.css");

/* ========================================
   TABLE OF CONTENTS
   ========================================
   01. 変数
   02. ベース / 共通
   03. パンくず
   04. ヘッダー
   05. フッター
   06. メインビジュアル
   07. HOT TAGS
   08. レイアウト
   09. アーカイブ見出し
   10. 記事一覧 / ページャー
   11. サイドバーウィジェット
   12. SNSボックス
   13. 採用ボックス
   ======================================== */


/* ========================================
   01. 変数
   ======================================== */
:root {
  --color-primary: #73b12c;
  --color-text: #403632;
  --color-gray: #cac6c4;
  --color-bg: #f9f9f9;
  --color-white: #ffffff;
  --color-black: #1a1c1c;
}


/* ========================================
   02. ベース / 共通
   ======================================== */

/* 管理バー表示時（body.customize-support） */
html:has(body.customize-support) {
  margin-top: 32px;
}

/* 本文：日本語・英数とも Noto Sans JP */
body,
.contents,
.cms_entry,
.ownedmediaTopWrap,
.slide_excerpt,
.main_visual_txt,
.main_visual_copy_02,
.pankuzu {
  font-family: "Noto Sans JP", sans-serif;
}

/* 英語見出し用：Barlow Condensed */
.font_en,
.font_en_bold {
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-weight: 700;
}

.font_en_black,
.main_vusual_copy_01 {
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-weight: 900;
}

.font-jp {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

a {
  color: inherit;
}

.txt_primary {
  color: var(--color-primary);
}


/* ========================================
   03. パンくず
   ======================================== */
.pankuzu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 11px;
  line-height: 1.8;
  gap: 1em;
}

.pankuzu a {
  display: flex;
  align-items: center;
  gap: 1em;
  font-size: 11px;
}

.pankuzu a::after {
  content: '>';
}

.pankuzu .thispage {
  font-weight: bold;
}


/* ========================================
   04. ヘッダー
   ======================================== */
#Header {
  position: sticky;
  top: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-gray);
  z-index: 100;
}

body.customize-support #Header {
  top: 32px;
}

#Header .header_inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: min(3vw, 10px) min(3vw, 20px);
}

#Header .header_item {
  position: relative;
  display: block;
  width: 100%;
}

#Header .logo {
/*  width: 140px;*/
    width: 35%;
    display: flex;
    gap: 1em;
}
#Header .logo .text{
    font-size: 10px;
    line-height: 1.5;
    border-left: solid 1px var(--color-gray);
    padding: 0 1em;
}

#Header .globalBg {
  display: block;
}

#Header .globalBg>div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
}

#Header .globalBg>div>ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#Header .globalBg>div>ul>li {
  margin: 0;
  padding: 0 1em;
  border-right: 1px solid var(--color-text);
}

#Header .globalBg>div>ul>li:last-child {
  border-right: none;
}

#Header .globalBg>div>ul>li>a {
  margin: 0;
  padding: 0;
  font-weight: 700;
}

#Header .globalBg>div>ul>li.current-menu-item>a,
#Header .globalBg>div>ul>li.current-menu-ancestor>a {
  color: var(--color-primary);
}

#Header .snsset {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

/* チェックボックスは非表示 */
.sp_menu_check {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* PC：メニュー常時表示、ハンバーガー非表示 */
#Header .globalBg {
  height: auto;
  overflow: visible;
}

.sp_btn {
  display: none;
}

@media screen and (max-width:782px) {
  html:has(body.customize-support) {
    margin-top: 46px;
  }
    .pankuzu,
    .pankuzu a {
        font-size: 9px;
    }


  #Header {
    border-bottom: none;
  }

  body.customize-support #Header {
    top: 50px;
  }

  #Header .logo {
    width: max(200px, 80%);
      gap: 0.5em;
  }

  #Header .logo a {
    display: block;
  }
    #Header .logo .text{
        font-size: 2vw;
        padding: 0 0.5em;
    }

  #Header .header_inner {
    /* padding-bottom: min(5vw, 30px); */
  }

  /* SP：メニュー閉じ時（高さ0） */
/*
  #Header .globalBg {
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s ease;
    width: calc(100% + min(6vw, 40px));
    margin-left: calc(min(3vw, 20px) * -1);
  }
*/
/* SP：メニュー閉じ時（高さ0） */
  #Header .globalBg {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0, 1, 0, 1);
    width: calc(100% + min(6vw, 40px));
    margin-left: calc(min(3vw, 20px) * -1);
  }

  #Header .globalBg>div,
  #Header .snsset {
    position: static;
    justify-content: center;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
  }

  #Header .globalBg>div>ul {
    flex-direction: column;
    align-items: flex-start;
  }

  #Header .globalBg>div>ul>li {
    width: 100%;
    border-right: none;
    padding: 0.7em;
  }

  /* SP：メニュー開き時（checkbox checked） */
  html #wpadminbar {
    position: fixed
  }

/*
  #Header .sp_menu_check:checked~.globalBg {
    max-height: 1000px;
    overflow: hidden;
  }
*/
  #Header .sp_menu_check:checked~.globalBg {
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.8s ease-in-out;
  }

  .sp_btn {
    position: absolute;
    top: -7px;
    right: 0;
    display: block;
    width: min(5vw, 90px);
    min-width: 40px;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    z-index: 1;
  }

  .sp_btn span {
    position: absolute;
    display: block;
    width: 60%;
    height: 2px;
    background-color: #000000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition-duration: 0.3s;
  }

  .sp_btn span:nth-child(1) {
    top: 25%;
  }

  .sp_btn span:nth-child(3) {
    top: 75%;
  }

  /* チェック時にハンバーガー → バツ */
  #Header .sp_menu_check:checked~.sp_btn span:nth-child(1) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  #Header .sp_menu_check:checked~.sp_btn span:nth-child(2) {
    opacity: 0;
  }

  #Header .sp_menu_check:checked~.sp_btn span:nth-child(3) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}


/* ========================================
   05. フッター
   ======================================== */
#Footer {
  width: 100%;
  background-color: #403632;
}

#Footer .footer_inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: min(30px, 2.5vw) min(40px, 3vw);
  color: var(--color-white);
}

#Footer .footer_inner .menu {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.5em;
}

#Footer .footer_inner .menu li {
  padding: 0.5em 0;
}

#Footer .footer_inner .menu li a {
  display: block;
  padding: 0 1em;
  font-size: 12px;
  color: var(--color-white);
  text-decoration: none;
  border-right: 1px solid var(--color-white);
}

#Footer .footer_inner .menu li:last-child a {
  border-right: none;
}

#Footer .footer_copyright {
  font-size: 12px;
  text-align: center;
}

#Footer .footer_seal {
  width: fit-content;
  margin: 1rem auto;
}

#Footer .footer_seal img {
  display: inline-block;
  width: 38px;
  height: 42px;
  margin: 0 10px;
}

#Footer .footer_seal_code {
  margin-top: 0.5rem;
  padding: 0;
  font-size: 12px;
  text-align: center;
}

/* ========================================
   06. メインビジュアル
   ======================================== */
.main_visual {
  width: 100%;
  background-image: url('/wp-content/themes/lvn_cojp/ownedmedia/images/mv_pc.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.main_visual_inner {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1280px;
  height: 450px;
  margin: 0 auto;
}

.main_visual_inner .text_box {
  width: 55%;
  height: 100%;
  padding: 0 3%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}

/*
.main_vusual_copy_01 {
  margin-bottom: 0.3em;
  font-size: min(65px, 6.5vw);
  color: var(--color-white);
  letter-spacing: 0.1em;
  line-height: 0.9;
}
*/

.main_visual_copy_02 {
  margin-bottom: 0.8em;
  font-size: min(23px, 1.8vw);
  color: var(--color-white);
  letter-spacing: 0.2em;
  line-height: 1.6;
  text-shadow: 0 0 0.3em #000000b3;
  font-weight: 900;
}

.main_visual_txt {
  font-size: min(15px, 1.5vw);
  color: var(--color-white);
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-shadow: 0 0 0.3em #000000b3;
}

.main_visual .slide_box {
  width: 40%;
  max-width: 450px;
  height: 100%;
  padding: calc(7% * 0.4);
  background-color: #ffffffcc;
}

.main_visual .ownedmedia-mv-swiper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.main_visual .slide_unit {
  display: block;
  height: 100%;
  text-decoration: none;
  box-sizing: border-box;
}

.main_visual .slide_thumb {
  width: 100%;
  aspect-ratio: 120 / 63;
  overflow: hidden;
  margin-bottom: 1rem;
  background-color: var(--color-bg);
}

.main_visual .slide_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main_visual .slide_info {
  margin: 0;
  padding: 0;
}

.main_visual .slide_cate {
  width: fit-content;
  margin-bottom: 0.5rem;
  padding: 0.2em 0.5em 0.3em 0.5em;
  font-size: 12px;
  color: var(--color-white);
  letter-spacing: 0.05em;
  background-color: var(--color-primary);
}

.main_visual .slide_title {
  margin-bottom: 0.5rem;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

.main_visual .slide_title_sp {
  display: none;
}

.main_visual .slide_excerpt {
  font-size: 14px;
  line-height: 1.6;
}

.main_visual .ownedmedia-mv-swiper .swiper-pagination {
  bottom: 0;
}

.main_visual .ownedmedia-mv-swiper .swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  background-color: var(--color-gray);
  opacity: 1;
}

.main_visual .ownedmedia-mv-swiper .swiper-pagination-bullet-active {
  background-color: var(--color-primary);
}

@media screen and (max-width:782px) {
  .main_visual {
    /* aspect-ratio: 43 / 40; */
    background-image: url('/wp-content/themes/lvn_cojp/ownedmedia/images/mv_sp.jpg');
  }

  .main_visual_inner {
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 5%;
  }

  .main_visual_inner .text_box {
    width: 100%;
    margin-bottom: 1rem;
    padding: 0;
  }

  .main_vusual_copy_01 {
    font-size: min(70px, 10vw);
  }

  .main_visual_copy_02 {
    font-size: min(24px, 4.0vw);
    line-height: 1.4;
    letter-spacing: 0.1em;
  }

  .main_visual_txt {
    margin-bottom: 1em;
    font-size: min(16px, 2.6vw);
  }

  .main_visual .ownedmedia-mv-swiper .swiper-pagination {
    bottom: 1rem;
  }

  .main_visual .slide_box {
    width: 100%;
    max-width: inherit;
    height: auto;
    aspect-ratio: 100 / 32;
    background-color: #ffffff;
  }

  .swiper-wrapper {
    height: auto;
  }

  .main_visual .slide_unit {
    display: flex;
    align-items: start;
    gap: 1rem;
    height: auto;
  }

  .main_visual .slide_thumb {
    width: 40%;
  }

  .main_visual .slide_cate {
    font-size: min(16px, 3vw);
    margin-bottom: 0.3em;
  }

  .main_visual .slide_title {
    font-size: min(20px, 3.2vw);
  }

  .main_visual .slide_title_pc {
    display: none;
  }

  .main_visual .slide_title_sp {
    display: inline;
  }

  .main_visual .slide_excerpt {
    display: none;
  }

  .main_visual .slide_info {
    width: 56%;
  }

  .main_visual .ownedmedia-mv-swiper .swiper-pagination {
    bottom: 0;
  }

  .main_visual .ownedmedia-mv-swiper .swiper-pagination-bullet {
    width: min(15px, 3vw);
    height: min(15px, 3vw);
  }
}


/* ========================================
   07. HOT TAGS
   ======================================== */
.tag_box {
  width: 100%;
  margin: 0 auto;
  background-color: var(--color-black);
}

.tag_box .tag_inner {
  display: flex;
  gap: 2rem;
  align-items: start;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: min(3vw, 20px);
}

.tag_box .tag_head {
  width: fit-content;
  border-right: 2px solid var(--color-primary);
  padding-right: 2rem;
}

.tag_box .tag_head_ttl {
  font-size: 15px;
  color: var(--color-white);
}

.tag_box .tag_head_ttl_en {
  display: block;
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: 3em;
  font-weight: 700;
}

.tag_box .tag_list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1rem;
  color: var(--color-white);
}

.tag_box .tag_item {
  width: fit-content;
}

.tag_box .tag_item a {
  display: block;
  padding: 0.5em 1em;
  font-size: 12px;
  color: var(--color-white);
  line-height: 1.2;
  background-color: #ffffff33;
  border: 1px solid var(--color-white);
}

.tag_box .tag_item a::before {
  content: '# ';
  color: var(--color-primary);
}

@media screen and (max-width:782px) {
  .tag_box .tag_inner {
    flex-direction: column;
    gap: 1rem;
  }

  .tag_box .tag_head {
    padding-right: 1.5em;
  }

  .tag_box .tag_head_ttl {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: min(22px, 4vw);
  }

  .tag_box .tag_head_ttl_en {
    font-size: 1.2em;
  }
}


/* ========================================
   08. レイアウト
   ======================================== */

/* .page_inner */
.page_inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: min(2vw, 10px) min(3vw, 20px);
}

.page_inner:has(.side_column) {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.page_inner .main_column {
  flex: 1;
  min-width: 0;
  max-width: calc(100% - (270px + 2rem));
  padding-bottom: min(8vw, 100px);
}

.page_inner .main_column .listArea .listBlock {
  gap: 1rem;
  margin-bottom: min(3vw, 30px);
  padding-bottom: min(5vw, 50px);
  border-bottom: 1px solid var(--color-text);
}

.page_inner .side_column {
  width: 270px;
  flex-shrink: 0;
}

@media screen and (max-width:782px) {
  .page_inner:has(.side_column) {
    flex-direction: column;
  }

  .page_inner .main_column {
    max-width: 100%;
  }

  .page_inner .side_column {
    width: 100%;
  }
}

/* .normal_wrap */
.normal_wrap {
  background-image: url(../images/sns_box_b_bg.svg);
  background-repeat: no-repeat;
/*  background-position: top -20vh right 10%;*/
    background-position: top -20vh right 5%;
    background-size: 35%;
}

/* .main_inner */
.main_inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: min(5vw, 50px) min(3vw, 20px);
}

.content_head {
  margin-bottom: 0;
}

/* .bottom_content */
.bottom_content {
  display: flex;
  flex-direction: column;
}

@media screen and (max-width:782px) {
  .bottom_content {
    flex-direction: column-reverse;
  }
  .normal_wrap {
      background-position: top -3vh right -20%;
      background-size: 60%;
    }
}


/* ========================================
   09. アーカイブ見出し
   ======================================== */
.archive_head {
  margin: 1.5rem 0 2rem;
}

.archive_head .ttlL .ttl {
  margin: 0;
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: min(45px, 7vw);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.archive_head .ttlL .ttl::first-letter {
  color: var(--color-primary);
}

.archive_head .archive_description {
  margin: 0.8em 0 0;
  font-size: min(15px, 3.5vw);
  line-height: 1.6;
}

/* 汎用セクションタイトル */
.ttl_page {
  position: relative;
  display: flex;
  align-items: end;
  gap: 1em;
  margin-bottom: 3em;
  padding: 0.3em 0;
  font-size: min(20px, 4vw);
  font-weight: 700;
  line-height: 1.2;
  border-bottom: 3px solid var(--color-text);
}

.ttl_page::before {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: max(20%, 6em);
  height: 3px;
  background-color: var(--color-primary);
}

.ttl_page .font_en,
.ttl_page .ttl_en {
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: 1.1em;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.widget .ttl_page {
  margin-bottom: 0;
}

/* ========================================
   11. サイドバーウィジェット
   ======================================== */
.side_column .widget {
  margin: 0 0 2.5rem;
}

.side_column .widget .ttl_page {
  gap: 0.75em;
  margin-bottom: 0;
  font-size: min(20px, 4.8vw);
}

.side_column .widget .ttl_page .font_en {
  font-size: 1.15em;
  letter-spacing: 0.12em;
}

/* ランキング（最新の投稿 CPT ウィジェット） */
.side_column .widget_recent_entries ul {
  counter-reset: om-rank;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.side_column .widget_recent_entries li {
  position: relative;
  display: flex;
  gap: 0.75em;
  align-items: center;
  margin: 0;
  padding: 0.5em 1em 0.5em 0.5em;
  border-bottom: 1px solid var(--color-gray);
  counter-increment: om-rank;
}

.side_column .widget_recent_entries li::before {
  content: counter(om-rank);
  flex-shrink: 0;
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: 1.8em;
  font-weight: 700;
  color: var(--color-primary);
}

.side_column .widget_recent_entries li::after {
  content: '';
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 8px;
  height: 8px;
  background-color: var(--color-primary);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.side_column .widget_recent_entries a {
  display: block;
  padding-top: 0.25em;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
    width: 100%;
}

.side_column .widget_recent_entries .post-date {
  display: none;
}

/* タグ一覧 */
.side_column .widget_lvn_ownedmedia_tag_cloud .tag_list,
.side_column .widget_tag_cloud .tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.side_column .widget_lvn_ownedmedia_tag_cloud .tag_item {
  margin: 0;
  padding: 0;
  width: fit-content;
}

.side_column .widget_lvn_ownedmedia_tag_cloud .tag_item a,
.side_column .widget_tag_cloud .tagcloud a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: fit-content;
  padding: 0.45em 0.8em;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  background-color: var(--color-white);
  border: 1px solid var(--color-text);
}

.side_column .widget_lvn_ownedmedia_tag_cloud .tag_item a::before,
.side_column .widget_tag_cloud .tagcloud a::before {
  content: '# ';
  color: var(--color-primary);
}

.side_column .widget_tag_cloud .tagcloud a {
  font-size: 12px !important;
}

/* 記事詳細 */
.ownedmedia_detail .detail_thumbnail {
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.ownedmedia_detail .detail_thumbnail img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

.ownedmedia_detail .detail_head {
  margin-bottom: 2.5rem;
}

.ownedmedia_detail .detail_head .cate {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.3em 0.85em;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-white);
  background-color: var(--color-primary);
}

.ownedmedia_detail .detail_ttl {
  margin: 0 0 1.25rem;
  font-size: min(35px, 6vw);
  font-weight: 700;
  line-height: 1.45;
}

.ownedmedia_detail .detail_meta_bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.9em 0;
  border-top: 1px solid var(--color-gray);
  border-bottom: 1px solid var(--color-gray);
}

.ownedmedia_detail .detail_meta_bar .date {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #7a7470;
}

.ownedmedia_detail .detail_share {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ownedmedia_detail .detail_share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5em;
  padding: 0.55em 0.9em;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  color: var(--color-white);
  background-color: var(--color-text);
  transition: opacity 0.3s;
}

.ownedmedia_detail .detail_share a:hover {
  opacity: 0.8;
}

.ownedmedia_detail .cms_entry {
  margin-bottom: 2.5rem;
}

.ownedmedia_detail .cms_entry img {
  max-width: 100%;
  height: auto;
}

.ownedmedia_detail .ownedmediaDetailWrap {
  font-size: 16px;
  line-height: 1.9;
}

.ownedmedia_detail .ownedmediaDetailWrap h2 {
  position: relative;
  margin: 2em 0 0.8em;
  padding-left: 0.75em;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.5;
}

.ownedmedia_detail .ownedmediaDetailWrap h2::before {
  content: '';
  position: absolute;
  top: 0.15em;
  left: 0;
  width: 4px;
  height: calc(100% - 0.3em);
  background-color: var(--color-primary);
}

.ownedmedia_detail .ownedmediaDetailWrap h3,
.ownedmedia_detail .ownedmediaDetailWrap h4,
.ownedmedia_detail .ownedmediaDetailWrap h5,
.ownedmedia_detail .ownedmediaDetailWrap h6 {
  margin: 1.8em 0 0.6em;
  font-weight: 700;
  line-height: 1.5;
}

.ownedmedia_detail .ownedmediaDetailWrap h3 {
  font-size: 1.375em;
  color: var(--color-primary);
}

.ownedmedia_detail .ownedmediaDetailWrap h4 {
  font-size: 1.375em;
}

.ownedmedia_detail .ownedmediaDetailWrap h5 {
  font-size: 1.25em;
}

.ownedmedia_detail .ownedmediaDetailWrap h6 {
  font-size: 1.125em;
}

.ownedmedia_detail .ownedmediaDetailWrap p {
  margin: 0 0 1.4em;
}

/* ----------------------------------------
   記事詳細：インタビューパーツ（Q&A）
   ブロックスタイル「インタビュー：質問 / 回答」
   ---------------------------------------- */
/* 質問 */
.ownedmedia_detail .ownedmediaDetailWrap .is-style-interview-q {
  position: relative;
  margin: 2.5em 0 1em;
  padding-left: 2.6em;
  font-weight: 700;
  line-height: 1.7;
}

.ownedmedia_detail .ownedmediaDetailWrap .is-style-interview-q::before {
  content: 'Q';
  position: absolute;
  top: 0.1em;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8em;
  height: 1.8em;
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: 0.9em;
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
  background-color: var(--color-primary);
}

/* 見出し直後の質問は上余白を詰める */
.ownedmedia_detail .ownedmediaDetailWrap :is(h2, h3, h4, h5, h6) + .is-style-interview-q {
  margin-top: 0;
}

/* 回答：先頭の太字を話者名ラベルとして表示 */
.ownedmedia_detail .ownedmediaDetailWrap .is-style-interview-a > strong:first-child {
  display: inline-block;
  margin-right: 0.8em;
  padding: 0.15em 0.6em;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  vertical-align: 0.15em;
  color: var(--color-white);
  background-color: var(--color-text);
}

/* マーカー強調（ブロックスタイルではなく書式で使う） */
.ownedmedia_detail .ownedmediaDetailWrap mark,
.ownedmedia_detail .ownedmediaDetailWrap .om-marker {
  padding: 0 0.1em;
  font-weight: 700;
  color: inherit;
  background: linear-gradient(transparent 60%, rgba(115, 177, 44, 0.3) 60%);
}

/* ----------------------------------------
   記事詳細：プロフィールボックス
   カラムブロック ＋ クラス「om-profile」
   ---------------------------------------- */
.ownedmedia_detail .ownedmediaDetailWrap .om-profile {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1.5rem 2rem;
  align-items: start;
  margin: 0 0 3rem;
  padding: 2rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  border-top: 4px solid var(--color-primary);
}

.ownedmedia_detail .ownedmediaDetailWrap .om-profile > .wp-block-column {
  min-width: 0;
  margin: 0;
}

.ownedmedia_detail .ownedmediaDetailWrap .om-profile figure {
  margin: 0;
}

.ownedmedia_detail .ownedmediaDetailWrap .om-profile img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.ownedmedia_detail .ownedmediaDetailWrap .om-profile p {
  margin: 0;
}

.ownedmedia_detail .ownedmediaDetailWrap .om-profile .om-profile-label {
  margin-bottom: 0.5rem;
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3em;
  line-height: 1.2;
  color: var(--color-primary);
}

.ownedmedia_detail .ownedmediaDetailWrap .om-profile .om-profile-name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

.ownedmedia_detail .ownedmediaDetailWrap .om-profile .om-profile-meta {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 13px;
  line-height: 1.6;
  color: #7a7470;
  border-bottom: 1px solid var(--color-gray);
}

.ownedmedia_detail .ownedmediaDetailWrap .om-profile .om-profile-txt {
  font-size: 14px;
  line-height: 1.8;
}

/* ----------------------------------------
   記事詳細：インタビューパーツ（ライン型の質問）
   ブロックスタイル「インタビュー：質問（ライン）」
   ---------------------------------------- */
.ownedmedia_detail .ownedmediaDetailWrap .is-style-interview-line {
  display: flex;
  gap: 1em;
  margin: 4em 0 2em;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: #7a7470;
}

.ownedmedia_detail .ownedmediaDetailWrap .is-style-interview-line::before {
  content: '';
  flex: 0 0 50px;
  height: 1px;
  margin-top: 0.9em; /* 1行目の中央に揃える（line-height の半分） */
  background-color: currentColor;
}

/* 見出し直後のライン型の質問は上余白を詰める */
.ownedmedia_detail .ownedmediaDetailWrap :is(h2, h3, h4, h5, h6) + .is-style-interview-line {
  margin-top: 1.5em;
}

/* ----------------------------------------
   記事詳細：テーブル
   ---------------------------------------- */
.ownedmedia_detail .ownedmediaDetailWrap .wp-block-table {
  margin: 0 0 2.5em;
  overflow-x: auto;
}

.ownedmedia_detail .ownedmediaDetailWrap table {
  width: 100%;
  margin: 0 0 2.5em;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.6;
  background-color: var(--color-white);
}

.ownedmedia_detail .ownedmediaDetailWrap .wp-block-table table {
  margin-bottom: 0;
}

.ownedmedia_detail .ownedmediaDetailWrap th,
.ownedmedia_detail .ownedmediaDetailWrap td {
  padding: 1em 1.25em;
  text-align: center;
  vertical-align: middle;
  border: 1px solid var(--color-gray);
}

/* 見出し行：濃い茶色 */
.ownedmedia_detail .ownedmediaDetailWrap thead th,
.ownedmedia_detail .ownedmediaDetailWrap thead td {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-white);
  background-color: var(--color-text);
  border-color: var(--color-text);
  border-left-color: var(--color-gray);
}

.ownedmedia_detail .ownedmediaDetailWrap thead th:first-child,
.ownedmedia_detail .ownedmediaDetailWrap thead td:first-child {
  border-left-color: var(--color-text);
}

/* 1列目：白背景・太字 / 2列目以降：グレー背景 */
.ownedmedia_detail .ownedmediaDetailWrap tbody th,
.ownedmedia_detail .ownedmediaDetailWrap tbody td:first-child {
  font-weight: 700;
  background-color: var(--color-white);
}

.ownedmedia_detail .ownedmediaDetailWrap tbody td:not(:first-child) {
  background-color: #f1f1f1;
}

/* 表のキャプション */
.ownedmedia_detail .ownedmediaDetailWrap .wp-block-table figcaption {
  margin-top: 0.6em;
  font-size: 12px;
  color: #7a7470;
  text-align: left;
}

/* ----------------------------------------
   記事詳細：リスト
   ---------------------------------------- */
.ownedmedia_detail .ownedmediaDetailWrap ul,
.ownedmedia_detail .ownedmediaDetailWrap ol {
  margin: 0 0 2em;
  padding: 0;
  list-style: none;
}

.ownedmedia_detail .ownedmediaDetailWrap li {
  position: relative;
  margin-bottom: 0.6em;
  padding-left: 1.5em;
  line-height: 1.7;
}

.ownedmedia_detail .ownedmediaDetailWrap li:last-child {
  margin-bottom: 0;
}

/* 通常のリスト：緑の丸 */
.ownedmedia_detail .ownedmediaDetailWrap ul > li::before {
  content: '';
  position: absolute;
  top: 0.85em;
  left: 0.3em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-primary);
  transform: translateY(-50%);
}

/* 番号付きリスト：緑の数字 */
.ownedmedia_detail .ownedmediaDetailWrap ol {
  counter-reset: om-ol;
}

.ownedmedia_detail .ownedmediaDetailWrap ol > li {
  counter-increment: om-ol;
}

.ownedmedia_detail .ownedmediaDetailWrap ol > li::before {
  content: counter(om-ol) '.';
  position: absolute;
  top: 0;
  left: 0;
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-weight: 700;
  color: var(--color-primary);
}

/* 入れ子のリスト */
.ownedmedia_detail .ownedmediaDetailWrap li > ul,
.ownedmedia_detail .ownedmediaDetailWrap li > ol {
  margin: 0.6em 0 0;
}

/* チェックリスト：ブロックスタイル「チェックリスト」（枠付き） */
.ownedmedia_detail .ownedmediaDetailWrap ul.is-style-check {
  padding: 1.25em 1.5em;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  border-top: 4px solid var(--color-primary);
}

.ownedmedia_detail .ownedmediaDetailWrap ul.is-style-check > li {
  padding-left: 1.4em;
}

.ownedmedia_detail .ownedmediaDetailWrap ul.is-style-check > li::before {
  top: 0.45em;
  left: 0.15em;
  width: 0.4em;
  height: 0.7em;
  border-radius: 0;
  background-color: transparent;
  border-right: 3px solid var(--color-primary);
  border-bottom: 3px solid var(--color-primary);
  transform: rotate(45deg);
}

/* ----------------------------------------
   記事詳細：本文中の画像（左寄せ・右寄せで回り込み）
   画像ブロックの「配置」で左寄せ／右寄せを選択
   ---------------------------------------- */
/* 回り込みが本文エリアの外にはみ出さないようにする */
.ownedmedia_detail .ownedmediaDetailWrap {
  display: flow-root;
}

.ownedmedia_detail .ownedmediaDetailWrap .alignleft,
.ownedmedia_detail .ownedmediaDetailWrap .alignright {
  max-width: 360px;
  margin-top: 0.35em; /* 本文1行目の上端と揃える */
  margin-bottom: 1.5em;
}

.ownedmedia_detail .ownedmediaDetailWrap .alignleft {
  float: left;
  margin-right: 24px;
  margin-left: 0;
}

.ownedmedia_detail .ownedmediaDetailWrap .alignright {
  float: right;
  margin-left: 24px;
  margin-right: 0;
}

.ownedmedia_detail .ownedmediaDetailWrap .alignleft img,
.ownedmedia_detail .ownedmediaDetailWrap .alignright img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 古い形式（div.wp-block-image > figure.alignleft）でも回り込みが効くようにする */
.ownedmedia_detail .ownedmediaDetailWrap div.wp-block-image:has(> .alignleft, > .alignright) {
  display: contents;
}

/* 画像キャプション（管理画面でキャプションを入れた場合のみ表示される） */
.ownedmedia_detail .ownedmediaDetailWrap .wp-block-image figcaption {
  margin: 0.4em 0 0;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-align: left;
  color: var(--color-text);
}

.ownedmedia_detail .ownedmediaDetailWrap .wp-block-image figcaption::before {
  content: '▲';
  margin-right: 0.1em;
}

/* 空のキャプションは表示しない */
.ownedmedia_detail .ownedmediaDetailWrap .wp-block-image figcaption:empty {
  display: none;
}

/* 見出しは回り込みを解除して、必ず画像の下から始める */
.ownedmedia_detail .ownedmediaDetailWrap :is(h2, h3, h4, h5, h6) {
  clear: both;
}

/* 枠付きのパーツは画像の下に潜り込まないよう、画像の横に収める */
.ownedmedia_detail .ownedmediaDetailWrap ul.is-style-check,
.ownedmedia_detail .ownedmediaDetailWrap .om-profile {
  overflow: hidden;
}

/* 記事詳細パーツ：SP */
@media screen and (max-width:782px) {
  /* SPでは回り込みを解除して縦並びにする */
  .ownedmedia_detail .ownedmediaDetailWrap .alignleft,
  .ownedmedia_detail .ownedmediaDetailWrap .alignright {
    float: none;
    max-width: 100%;
    margin: 0 auto 1.5em;
  }

  .ownedmedia_detail .ownedmediaDetailWrap .alignleft img,
  .ownedmedia_detail .ownedmediaDetailWrap .alignright img {
    margin: 0 auto;
  }

  .ownedmedia_detail .ownedmediaDetailWrap table {
    font-size: 13px;
  }

  .ownedmedia_detail .ownedmediaDetailWrap thead th,
  .ownedmedia_detail .ownedmediaDetailWrap thead td {
    font-size: 14px;
  }

  .ownedmedia_detail .ownedmediaDetailWrap th,
  .ownedmedia_detail .ownedmediaDetailWrap td {
    padding: 0.8em 0.75em;
  }

  .ownedmedia_detail .ownedmediaDetailWrap ul.is-style-check {
    padding: 1em 1.25em;
  }

  .ownedmedia_detail .ownedmediaDetailWrap .is-style-interview-line {
    gap: 0.75em;
    margin: 3em 0 1.5em;
    font-size: 14px;
  }

  .ownedmedia_detail .ownedmediaDetailWrap .is-style-interview-line::before {
    flex-basis: 24px;
  }

  .ownedmedia_detail .ownedmediaDetailWrap .om-profile {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 1.5rem 1.25rem;
  }

  .ownedmedia_detail .ownedmediaDetailWrap .om-profile > .wp-block-column:first-child {
    width: 120px;
  }

  .ownedmedia_detail .ownedmediaDetailWrap .om-profile > .wp-block-column:last-child {
    width: 100%;
  }

  .ownedmedia_detail .ownedmediaDetailWrap .om-profile .om-profile-label,
  .ownedmedia_detail .ownedmediaDetailWrap .om-profile .om-profile-name,
  .ownedmedia_detail .ownedmediaDetailWrap .om-profile .om-profile-meta {
    text-align: center;
  }
}

.ownedmedia_detail .detail_tag_list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 3rem;
  padding: 1.5rem 0 0;
  list-style: none;
  border-top: 1px solid var(--color-gray);
}

.ownedmedia_detail .detail_tag_list .tag_item a {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.45em 0.8em;
  font-size: 12px;
  line-height: 1.2;
  text-decoration: none;
  background-color: var(--color-white);
  border: 1px solid var(--color-text);
}

.ownedmedia_detail .detail_tag_list .tag_hash {
  color: var(--color-primary);
}

.ownedmedia_detail .detail_related {
  margin-bottom: 3rem;
}

.ownedmedia_detail .listArea .listBlock.related_list {
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.ownedmedia_detail .related_list .unit .excerpt,
.ownedmedia_detail .related_list .unit .tag_list {
  display: none;
}

.ownedmedia_detail .related_list .unit .data_prof {
  font-size: 15px;
}

.ownedmedia_detail .detail_nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--color-gray);
}

.ownedmedia_detail .detail_nav_item {
  min-width: 0;
}

.ownedmedia_detail .detail_nav_prev {
  padding-right: 1.5rem;
  border-right: 1px solid var(--color-gray);
}

.ownedmedia_detail .detail_nav_next {
  padding-left: 1.5rem;
  text-align: right;
}

.ownedmedia_detail .detail_nav a {
  display: block;
  text-decoration: none;
}

.ownedmedia_detail .detail_nav_label {
  display: block;
  margin-bottom: 0.4em;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-primary);
}

.ownedmedia_detail .detail_nav_ttl {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

@media screen and (max-width:782px) {
  .archive_head .ttlL .ttl {
    font-size: min(48px, 14vw);
  }

  .ownedmedia_detail .detail_share a {
    min-width: inherit;
  }

  .ownedmedia_detail .listArea .listBlock.related_list {
    grid-template-columns: repeat(2, 1fr);
  }

  .ownedmedia_detail .detail_nav {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .ownedmedia_detail .detail_nav_prev {
    padding-right: 0;
    border-right: none;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-gray);
  }

  .ownedmedia_detail .detail_nav_next {
    padding-left: 0;
    text-align: left;
  }
}


/* ========================================
   10. 記事一覧
   ======================================== */
.listArea .listBlock {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.listArea .unit {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  background-color: var(--color-bg);
  border: 1px solid var(--color-gray);
  transition: opacity 0.3s;
}

.listArea .unit::after {
  content: '';
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 8px;
  height: 8px;
  background-color: var(--color-primary);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.listArea .unit:hover {
  opacity: 0.85;
}

.listArea .thumbnail {
  width: 100%;
  aspect-ratio: 120 / 63;
  overflow: hidden;
}

.listArea .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listArea .text {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.5rem;
  padding: 5%;
  background-color: var(--color-bg);
}

.listArea .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.listArea .cate {
  display: inline-block;
  padding: 0.5em 0.7em;
  font-size: min(11px, 3.2vw);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-white);
  background-color: var(--color-primary);
}

.listArea .date {
  font-size: min(12px, 3.5vw);
  letter-spacing: 0.05em;
}

.listArea .data_prof {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.listArea .excerpt {
  margin: 0;
  font-size: min(13px, 3.5vw);
  line-height: 1.7;
  letter-spacing: 0.05em;
}

.listArea .tag_list {
  display: flex;
  flex-wrap: wrap;
  gap: min(8px, 2vw);
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.listArea .tag_item span {
  display: inline-block;
  padding: 0.5em 1em;
  font-size: min(12px, 2.5vw);
  line-height: 1.2;
  letter-spacing: 0.05em;
  background-color: #e7e5e4;
}

@media screen and (max-width:1150px) {
  .listArea .listBlock {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width:782px) {
  .listArea .listBlock {
    grid-template-columns: repeat(2, 1fr);
    gap: min(20px, 3vw);
  }

  .listArea .data_prof {
    font-size: min(16px, 3.5vw);
  }

  .listArea .excerpt {
    display: none;
  }
  .listArea .tag_item span{
    padding: 0.2em 0.5em;
  }
  .listArea .tag_list .tag_item{
    display: block;
  }
}

/* ページャー */
.listArea .pager {
  margin-top: 2.5rem;
}

.listArea .pager .page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.listArea .pager .page-numbers li {
  margin: 0;
  padding: 0;
}

.listArea .pager .page-numbers a,
.listArea .pager .page-numbers span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5em;
  aspect-ratio: 1 / 1;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  line-height: 1;
  text-decoration: none;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  transition: opacity 0.3s;
}

.listArea .pager .page-numbers a:hover {
  opacity: 0.75;
}

.listArea .pager .page-numbers .current {
  color: var(--color-white);
  background-color: var(--color-text);
  border-color: var(--color-text);
}

.listArea .pager .page-numbers .disabled {
  color: var(--color-gray);
  pointer-events: none;
  cursor: default;
}

.listArea .pager .page-numbers .dots {
  min-width: auto;
  aspect-ratio: auto;
  padding: 0 0.25em;
  border: none;
  background: transparent;
  letter-spacing: 0.05em;
}

.listArea .pager .page-numbers .icon-arrow-left,
.listArea .pager .page-numbers .icon-arrow-right {
  display: block;
  width: 0.5em;
  aspect-ratio: 1 / 1;
  min-width: 0;
  border: none;
  border-top: 2px solid var(--color-gray);
  border-right: 2px solid var(--color-gray);
  transform: rotate(45deg);
}

.listArea .pager .page-numbers .icon-arrow-left {
  transform: rotate(225deg);
}

.listArea .pager .page-numbers a .icon-arrow-left,
.listArea .pager .page-numbers a .icon-arrow-right {
  border-top: 2px solid var(--color-text);
  border-right: 2px solid var(--color-text);
}

/* ========================================
   11. SNSボックス
   ======================================== */
.sns_box {
  background-color: var(--color-primary);
  background-image: url(../images/sns_box_bg.svg);
  background-repeat: no-repeat;
  background-position: top max(-200px, -10vw) left 90%;
  padding: min(5vw, 50px) min(3vw, 20px);
}

.sns_box .sns_inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.sns_box .sns_head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.sns_box .sns_head_ttl {
  flex-shrink: 0;
  margin: 0;
  padding-right: 1rem;
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: min(35px, 5vw);
  font-weight: 700;
  line-height: 1;
  border-right: 2px solid var(--color-white);
}

.sns_box .sns_head_txt {
  margin: 0;
  font-size: min(18px, 3.5vw);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.05em;
}

.sns_box .sns_cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: min(40px, 6vw);
}

.sns_box .sns_card {
  background-color: var(--color-white);
}

.sns_box .sns_card_link {
  display: block;
  height: 100%;
  text-decoration: none;
  transition: opacity 0.3s;
}

.sns_box .sns_card_link:hover {
  opacity: 0.85;
}

.sns_box .sns_card_banner {
  position: relative;
  overflow: hidden;
}

.sns_box .sns_card_banner::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background: linear-gradient(to bottom, transparent, var(--color-white));
}

.sns_box .sns_card_banner img {
  display: block;
  width: 100%;
  aspect-ratio: 375 / 101;
  object-fit: cover;
}

.sns_box .sns_card_body {
  padding: 0 18px 18px;
}

.sns_box .sns_card_profile {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.sns_box .sns_card_icon {
  flex-shrink: 0;
  width: 20%;
  aspect-ratio: 1 / 1;
  padding: 0.5%;
  object-fit: cover;
  border: 1px solid #dcdcdc;
  border-radius: 50%;
}

.sns_box .sns_card_info {
  flex: 1;
  min-width: 0;
  margin-top: 1rem;
}

.sns_box .sns_card_name {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.sns_box .sns_card_handle {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.3;
}

.sns_box .sns_card_platform {
  display: inline-block;
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1.2;
  background-color: #e7e5e4;
}

.sns_box .sns_card_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  margin: 1em 0 0;
  padding: 0.6em 0 0.7em 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border: 1px solid var(--color-text);
}

.sns_box .sns_card_btn_arrow {
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
}

.sns_box .sns_links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: min(40px, 6vw);
  margin-top: min(40px, 6vw);
}

.sns_box .sns_link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 0.5rem 1rem;
  overflow: hidden;
  text-decoration: none;
  background-color: var(--color-white);
  transition: opacity 0.3s;
}

.sns_box .sns_link:hover {
  opacity: 0.85;
}

.sns_box .sns_link::before {
  content: '';
  position: absolute;
  right: -20px;
  top: -20px;
  width: 120px;
  height: 100%;
  background-image: url(../images/sns_box_b_bg.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}

.sns_box .sns_link::after {
  content: '';
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 8px;
  height: 8px;
  background-color: var(--color-primary);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.sns_box .sns_link_icon {
  flex-shrink: 0;
}

.sns_box .sns_link_label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.sns_box .sns_link_line {
  justify-content: space-between;
  gap: 16px;
}

.sns_box .sns_link_line_txt {
  position: relative;
  z-index: 1;
}

.sns_box .sns_link_line_head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sns_box .sns_link_line_sub {
  display: block;
  margin-top: 6px;
  padding-left: 44px;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.sns_box .sns_link_qr {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  object-fit: contain;
}

@media screen and (max-width:1150px) {
  .sns_box .sns_cards {
    grid-template-columns: repeat(2, 1fr);
    gap: min(20px, 3vw);
  }

  .sns_box .sns_links {
    grid-template-columns: repeat(2, 1fr);
    gap: min(20px, 3vw);
    margin-top: min(20px, 3vw);
  }
}

@media screen and (max-width:782px) {
  .sns_box .sns_head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-bottom: min(1.5rem, 5vw);
  }

  .sns_box .sns_head_ttl {
    padding-right: 0;
    padding-bottom: 0.5rem;
    border-right: none;
    font-size: min(30px, 6vw);
  }

  .sns_box .sns_cards {
    grid-template-columns: 1fr;
    gap: min(20px, 3vw);
  }

  .sns_box .sns_card_link {
    display: flex;
    align-items: stretch;
  }

  .sns_box .sns_card_banner {
    flex-shrink: 0;
    width: 32%;
  }

  .sns_box .sns_card_banner::before {
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--color-white));
  }

  .sns_box .sns_card_banner img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }

  .sns_box .sns_card_body {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: min(10px, 2vw);
    min-width: 0;
    padding: 3%;
  }

  .sns_box .sns_card_profile {
    align-items: center;
    gap: 10px;
  }

  .sns_box .sns_card_icon {
    width: 48px;
    padding: 0;
  }

  .sns_box .sns_card_info {
    margin-top: 0;
  }

  .sns_box .sns_card_name {
    margin-bottom: 0;
    font-size: min(15px, 3.5vw);
  }

  .sns_box .sns_card_handle {
    margin-bottom: 6px;
    font-size: 11px;
  }

  .sns_box .sns_card_platform {
    font-size: 10px;
  }

  .sns_box .sns_card_btn {
    margin: 0;
    padding: 0.3em 0;
    font-size: 12px;
  }

  .sns_box .sns_links {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: min(1rem, 3vw);
  }

  .sns_box .sns_link {
    min-height: 56px;
    padding: 12px;
    gap: 8px;
  }

  .sns_box .sns_link_label {
    font-size: 13px;
  }

  .sns_box .sns_link_icon {
    width: 28px;
    height: 28px;
  }

  .sns_box .sns_link_line {
    justify-content: flex-start;
  }

  .sns_box .sns_link_line_sub,
  .sns_box .sns_link_qr {
    display: none;
  }
}


/* ========================================
   12. 採用ボックス
   ======================================== */
.rec_box {
  padding: min(5vw, 50px) min(3vw, 20px);
  background-color: var(--color-bg);
}

.rec_box .rec_inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: min(40px, 3vw);
  background-color: var(--color-white);
  background-image: url(../images/rec_bg.jpg);
  background-repeat: no-repeat;
  background-position: right;
  background-size: auto 100%;
  border: 1px solid var(--color-gray);
  border-top: 4px solid var(--color-primary);
}

.rec_box .rec_content {
  width: min(52%, 560px);
}

.rec_box .rec_en {
  margin-bottom: 0.3em;
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: min(18px, 2.5vw);
  font-weight: 700;
  letter-spacing: 0.3em;
  line-height: 1.2;
  color: var(--color-primary);
}

.rec_box .rec_ttl {
  margin-bottom: 0.2em;
  font-size: min(34px, 2.5vw);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
}

.rec_box .rec_txt {
  margin-bottom: 1em;
  font-size: min(14px, 3.2vw);
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: justify;
}

.rec_box .rec_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1em 2.5em;
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.4em;
  color: var(--color-white);
  text-decoration: none;
  background-color: var(--color-primary);
  transition: opacity 0.3s;
}

.rec_box .rec_btn:hover {
  opacity: 0.85;
}

/* SPデザイン固定（カテゴリ一覧サイドバーなど） */
.rec_box--simple {
  padding: 0;
  margin-top: 2rem;
}

.rec_box--simple .rec_inner {
  min-height: 0;
  padding: 2rem 1.25rem 1.75rem;
  background-image: url(../images/sns_box_b_bg.svg);
  background-position: top -20% left -5%;
  background-size: 180px auto;
  text-align: center;
}

.rec_box--simple .rec_content {
  width: 100%;
}

.rec_box--simple .rec_en {
  font-size: 22px;
}

.rec_box--simple .rec_ttl {
  width: fit-content;
  margin: 0 auto 0.5em auto;
  font-size: 20px;
  text-align: left;
}

.rec_box--simple .rec_txt {
  width: fit-content;
  margin: 0 auto 1em auto;
  font-size: 13px;
  text-align: left;
}

.rec_box--simple .rec_btn {
  width: 100%;
  min-width: 0;
  font-size: 16px;
}

@media screen and (max-width:782px) {
  .rec_box .rec_inner {
    min-height: 0;
    padding: 2rem 1.25rem 1.75rem;
    background-image: url(../images/sns_box_b_bg.svg);
    background-position: top -20% left -5%;
    background-size: 180px auto;
    text-align: center;
  }

  .rec_box .rec_content {
    width: 100%;
  }

  .rec_box .rec_en {
    font-size: 22px;
  }

  .rec_box .rec_ttl {
    width: fit-content;
    margin: 0 auto 0.5em auto;
    font-size: 20px;
    text-align: left;
  }

  .rec_box .rec_txt {
    width: fit-content;
    margin: 0 auto 1em auto;
    font-size: 13px;
    text-align: left;
  }

  .rec_box .rec_btn {
    width: 100%;
    min-width: 0;
    font-size: 16px;
  }
}