/*
Theme Name: vhs
*/
/* 共通 */
body {
  color: #222;
  font-size: 17px;
  font-family: "Kumbh Sans", "M PLUS 1p", sans-serif;
  line-height: 1.6;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.h2_box {
  text-align: center;
}

h2 {
  position: relative;
  padding: 0.5rem 2rem calc(0.5rem + 12px) 1.5rem;
  background: #eaebf0;
  display: inline-block;
  font-size: 24px;
  margin-bottom: 2em;
}

h2:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 4px solid #000;
}

a {
  transition: 0.6s;
  text-decoration: none;
  color: #222;
}

a:hover {
  text-decoration: none;
  opacity: 0.6;
}

.inner {
  width: 1300px;
  max-width: 94%;
  margin: 0 auto;
}

section {
  padding: 6em 0;
}

/* アニメーション前の状態 */
.fade-left {
    opacity: 0;
    transform: translateX(-80px);
    transition: opacity 0.6s ease, transform 0.8s ease;
    transition-delay: 0.5s;
}

/* 画面内に入ったら付くクラス */
.fade-left.show {
    opacity: 1;
    transform: translateX(0);
}
.fadein {
    opacity: 0;
    transform: translate(0, 80px);
    transition: all 1500ms;
}

.fadein.scrollin {
    opacity: 1;
    transform: translate(0, 0);

}

.scalein {
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
    opacity: 0;
    transform: scale(1.2) translate(0, 0);
}

.scalein.scrollin {
    opacity: 1;
    transform: scale(1) translate(0, 0);
}

/* パンくずリスト全体のコンテナ */
.breadcrumb {
  width: 100%;
margin: 15px 0 50px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0; /* 下線をつけて区切りを明確に */
}

/* リストの設定：スマホで横スクロールさせるための重要設定 */
.breadcrumb ul {
  display: flex;
  flex-wrap: nowrap; /* 折り返さず一行に */
  overflow-x: auto;  /* はみ出したらスクロール */
  -webkit-overflow-scrolling: touch; /* iOSで滑らかに */
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap; /* テキストの改行を禁止 */
}

/* スクロールバーを非表示にする（任意：スッキリ見せたい場合） */
.breadcrumb ul::-webkit-scrollbar {
  display: none;
}

/* 各リスト項目の設定 */
.breadcrumb li {
  display: flex;
  align-items: center;
  font-size: 13px;
}

/* リンクのデザイン */
.breadcrumb li a {
  color: #333;
  text-decoration: none;
  transition: color 0.2s;
}

/* 区切り文字（＞）の設定 */
.breadcrumb li:not(:last-child)::after {
  content: " ";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 12px;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  transform: rotate(45deg); /* CSSで矢印を作成 */
}

/* 現在のページのテキスト */
.breadcrumb li span {
  font-weight: normal;
}

/* スマホでのグラデーション（右側が続くことを示唆） */
@media screen and (max-width: 768px) {
  .breadcrumb {
    position: relative;
    mask-image: linear-gradient(to right, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
  }
}
/* ヘッダー */
header {
  position: fixed;
  width: 100%;
  text-align: center;
  background-color: rgba(255, 2555, 255, 0.9);
  padding: 10px 0;
  top: -100px;
  /* ヘッダーの高さ分マイナスにする */
  transition: top 0.4s ease-in-out;
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.1));
  z-index: 10;
}

header.is-visible {
  top: 0;
}

/* トップページ以外では常に表示させておきたい場合 */
body:not(.home) header {
  top: 0;
}

header img {
  height: 80px;
  margin: 0 auto;
  width: auto;
}

.header_left {
  position: absolute;
  left: 0;
  font-weight: 600;
  font-size: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  /* 文字とアイコンの間隔 */
  cursor: pointer;
  user-select: none;
  padding-bottom: 5px;
}

.menu-icon {
  font-size: 0.8em;
  transition: transform 0.3s ease;
  /* 0.3秒かけて滑らかに回転 */
}

.header_left.active .menu-icon {
  transform: rotate(-180deg);
  /* 180度ひっくり返す */

}

.header_left.active {
  border-bottom: 5px solid #222;
  padding-bottom: 0;
}

.header_right {
  position: absolute;
  right: 0;
  display: flex;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
}


.lang_change {
  font-size: 20px;
  font-weight: 600;
  margin-right: 40px;
}

.lang_change a {
  color: #222;
  text-decoration: none;
}

.header-search {
  max-width: 300px;
  /* フォーム全体の横幅 */
  width: 100%;
}

.search-form {
  position: relative;
  /* ボタンを絶対配置にするため */
  display: flex;
  align-items: center;
}

.search-form label {
  width: 100%;
  margin-bottom: 0;
  /* WordPressのデフォルト余白を打ち消し */
}

.search-field {
  width: 100%;
  padding: 10px 45px 10px 15px;
  /* 右側にボタン用の余白を確保 */
  font-size: 14px;
  border: 2px solid #eee;
  border-radius: 25px;
  /* 丸みのあるデザイン */
  background-color: #f9f9f9;
  transition: all 0.3s ease;
  outline: none;
  box-sizing: border-box;
}

/* 入力欄にフォーカスした時のアニメーション */
.search-field:focus {
  border-color: #0073aa;
  /* WordPressカラー（お好みで変更可） */
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0, 115, 170, 0.2);
}

.search-submit {
  position: absolute;
  right: 5px;
  /* 右端に配置 */
  top: 50%;
  transform: translateY(-50%);
  /* 中央配置 */
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  transition: color 0.3s ease, background-color 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* アイコンホバー時の効果 */
.search-submit:hover {
  color: #0073aa;
  background-color: rgba(0, 0, 0, 0.05);
}

/* 虫眼鏡アイコンのサイズ */
.search-submit i {
  font-size: 16px;
}

/* ナビゲーション */
header {
  /* position: relative; */
  /* 子要素の基準にする */
}

header .inner {
  position: relative;
}

/* クリックする部分 */
.header_left {
  cursor: pointer;
}

/* ナビゲーションの基本スタイル */
nav {
  display: none;
  /* 最初は隠しておく */
  position: absolute;
  top: 100%;
  /* ヘッダーのすぐ下に配置 */
  left: 0;
  width: 100%;
  /* 横幅いっぱい */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 999;
  background-color: rgba(200, 200, 200, 0.9);
}

nav .inner>ul {
  list-style: none;
  margin: 0;
  padding: 30px 20px;
  display: flex;
  gap: 100px;
  text-align: left;
}

nav .inner>ul li ul {
  list-style: none;
  padding-left: 20px;
}

nav ul a {
  color: #222;
  font-weight: 600;
  text-decoration: none;
  font-size: 17px;
  line-height: 3;
}

nav>.inner>ul>li>a {
  font-size: 18px;
}

/* 開いている状態のクラス（JSで制御） */
nav.is-open {
  display: block;
}

.sp_on {
  display: none;
}

/* トップコンテンツ */
section#fv {
  padding: 0;
}

#fv img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

.newpost_cover {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 2.5%;
  row-gap: 2em;
}

.newpost_box {
  width: 100%;
  margin-bottom: 2em;
}

.newpost_box>a {
  aspect-ratio: 16 / 9;
  display: block;
  position: relative;
}

.newpost_box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
margin-bottom: 7px;
}

.newpost_box>a span {
  position: absolute;
  left: 5px;
  top: 5px;
  font-size: 13px;
  padding: 0 2px;
  background-color: rgba(255, 2555, 255, 0.9);
}

.post_category ul {
  list-style: none;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.post_category ul li {
  list-style: none;
  display: flex;
  font-size: 14px;
}

.post_category ul li a {
  background: #222;
  color: #fff;
  text-decoration: none;
  padding: 2px 5px;

  font-size: 13px;
}

.post_title {
  font-weight: 600;
  margin-top: 5px;
  font-size: 18px;
}
.home .post_title {
display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* ここに表示したい行数を指定 */
    overflow: hidden;
}

section#poplar {
  background: #f7f7f7;
}

section#poplar .newpost_box {
  margin-bottom: 0;
}

.parent {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 15px;
}
.parent div{
height:200px;
}
.parent div a {
  position: relative;
	display: block;
    height: 100%;
    width: 100%;
}
.parent div a span {
  position: absolute;
    top: 5px;
    left: 10px;
  width: calc(100% - 10px);
  font-weight: 600;
  font-size: 20px;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.4));
}
.parent div a span.white {
    color: #fff;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.4));
}
.parent img {
  height: 100%;
  object-fit: cover;
}

.parent div.div1 {
  grid-column: span 4 / span 4;
  grid-row: span 4 / span 4;
height:415px;
}

.div2 {
  grid-column: span 2 / span 2;
  grid-row: span 2 / span 2;
  grid-column-start: 5;
}

.div3 {
  grid-column: span 2 / span 2;
  grid-row: span 2 / span 2;
  grid-column-start: 5;
  grid-row-start: 3;
}

.div4 {
  grid-column: span 2 / span 2;
  grid-row: span 2 / span 2;
  grid-column-start: 7;
  grid-row-start: 1;
}

.div5 {
  grid-column: span 2 / span 2;
  grid-row: span 2 / span 2;
  grid-column-start: 7;
  grid-row-start: 3;
}

.div6 {
  grid-column: span 3 / span 3;
  grid-row: span 4 / span 4;
  grid-column-start: 9;
  grid-row-start: 1;
    grid-column: span 3 / span 3;
    grid-row: span 2 / span 2;
    grid-column-start: 9;
    grid-row-start: 1;
}
.div7 {
    grid-column: span 3 / span 3;
    grid-row: span 2 / span 2;
    grid-column-start: 9;
    grid-row-start: 3;
}

@media screen and (max-width: 767px) {
  .parent {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 15px;
  }

  .div1 {
    grid-column: 1 / -1;
    grid-row: 1;
    height: auto;
  }

  .div2 {
    grid-column: 1;
    grid-row: 2;
  }

  .div4 {
    grid-column: 2;
    grid-row: 2;
  }

  .div3 {
    grid-column: 1;
    grid-row: 3;
  }

  .div5 {
    grid-column: 2;
    grid-row: 3;
  }

  .div6 {
    grid-column: 1 / -1;
    grid-row: 4;
    height: auto;
  }
}

/* フッター */
footer{
  background: #222;
  padding-top: 2em;
}
footer p#copy {
  text-align: center;
  font-size: 12px;
  padding: 20px;
  color: #fff;
}

footer button {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 20px;
  bottom: 17px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  border: 0;
  background: none;
  transition: .2s;
  letter-spacing: 3px;
  width: 50px;
  z-index: 2;
}

footer button span:before {
  position: absolute;
  top: -24px;
  left: 20px;
  transform: rotate(-45deg);
  display: block;
  width: 20px;
  height: 20px;
  content: "";
  border: 1px solid #fff;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-width: 2px 2px 0px 0px;
  z-index: 10;
}

footer button span:after {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 1px solid #eaebf0;
  content: "";
  border-radius: 100%;
  top: -43px;
  left: 5px;
  background: #222;
}


.is-active {
  opacity: 1;
  visibility: visible;
}

.header-social-links {
  display: flex;
  gap: 20px;
  /* アイコン同士の間隔 */
  align-items: center;
	justify-content: center;
	  margin-bottom: 1em;
}

.social-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  /* 丸のサイズ */
  height: 40px;
  /* 丸のサイズ */
  border-radius: 50%;
  /* これで正円になります */
  color: #fff;
  /* アイコンの色 */
  text-decoration: none;
  transition: opacity 0.3s;
}

.social-icon:hover {
  opacity: 0.7;
  /* ホバー時に少し透明にする */
}

.instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.x-twitter {
	background:#000;
}

.youtube {
background-color: #ff0000;
}

/* アイコン自体の大きさ */
.social-icon i {
  font-size: 20px;
}
/*カテゴリーページ*/
.h2_box h1{
  position: relative;
  padding: 0.5rem 2rem calc(0.5rem + 12px) 1.5rem;
  background: #eaebf0;
  display: inline-block;
  font-size: 24px;
  margin-bottom: 2em;
}

.h2_box h1:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 4px solid #000;
}
.category-content {
    margin: 4em 0;
}
.sub-category-list{
  margin-bottom: 4em;
}
.sub-cat-ul{
  list-style:none;
  display:flex;
  flex-wrap: wrap;
  gap: 30px;
}
.sub-cat-ul li a {
    background: #222;
    color: #fff;
    text-decoration: none;
    padding: 2px 5px;
    font-size: 17px;
    padding: 5px 10px;
}
.category-content p {
    text-align: center;
}
/*コラム&エッセイ記事ページ*/
    .column_essay {
        width: 1000px;
        margin: 0 auto;
        max-width: 100%;
    }

    .column_essay h1 {
        border-bottom: 1px solid #ccc;
        padding: 0 10px;
        margin-bottom: 0.5em;
        font-size: 30px;
    }

    .column_essay .article_info {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 1em;
        align-items: center;
        background: #f6f6f6;
        padding: 15px 20px;
        gap: 15px;
    }
    .column_essay .item_category ul{
        list-style-type: none;
    }
    .column_essay .item_category ul li {
        line-height: 1;
    }

    .column_essay .item_category ul li a {
        background: #222;
        color: #fff;
        text-decoration: none;
        padding: 3px 6px;
        font-size: 15px;
        line-height: 1;
    }

    .column_essay .wpulike {
        padding: 0;
    }

    .column_essay .wpulike .wp_ulike_general_class {
        display: block;
    }

    .column_essay .column_essay_content p {
        margin-bottom: 15px;
        line-height: 2;
    }

    .column_essay .post_thumbnail {
        margin-bottom: 1em;
    }
/*ソート*/
.sort-options {
    text-align: right;
}
.sort-options select {
    padding: 8px 32px 8px 12px; /* 右側に矢印用のスペース（32px）を確保 */
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    font-size: 14px;
    outline: none;

    /* --- 矢印のカスタマイズ --- */
    -webkit-appearance: none; /* ブラウザ標準の矢印を消す（Chrome/Safari） */
    -moz-appearance: none;    /* ブラウザ標準の矢印を消す（Firefox） */
    appearance: none;         /* ブラウザ標準の矢印を消す */
    
    /* 背景に三角形を表示（SVGデータを使用） */
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24"><path fill="%23666" d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center; /* 右から12pxの位置に配置 */
    background-size: 10px; /* 矢印のサイズ */
}

/* IE10以上で矢印を消す設定 */
.sort-options select::-ms-expand {
    display: none;
}

.sort-options select:focus {
    border-color: #0073aa;
}

@media (max-width: 1024px) {
  body {
    font-size: 16px;
  }

  .header-search {
    max-width: 200px;
  }

  .lang_change {
    margin-right: 25px;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 15px;
  }

  body.is-fixed {
    overflow: hidden;
    height: 100%;
    /* iOS対策：高さを固定 */
  }

  .sp_on {
    display: block;
  }

  .pc_on {
    display: none;
  }

  header img {
    height: 40px;
  }

  .lang_change {
    margin-right: 20px;
  }

  .sp_search {
    font-size: 20px;
    cursor: pointer;
  }

  .sp_search_box {
    display: none;
    background: #fff;
    padding: 10px;
    position: fixed;
    width: 100%;
    top: 0;
  }

  .header_left {
    padding-bottom: 0;
  }

  .header_left.active {
    border-bottom: 0;
  }

  nav {
    position: fixed;
    top: 0;
    height: 100vh;
  }

  nav .inner>ul {
    display: block;
    padding: 50px 20px 30px;
  }

  i.fa-solid.fa-xmark.sp_on.nav_open {
    font-size: 24px;
    left: 0;
    position: absolute;
    top: 20px;
  }
}