/*
Theme Name: Twenty Twenty-Three
Theme URI: https://wordpress.org/themes/twentytwentythree
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Three is designed to take advantage of the new design tools introduced in WordPress 6.1. With a clean, blank base as a starting point, this default theme includes ten diverse style variations created by members of the WordPress community. Whether you want to build a complex or incredibly simple website, you can do it quickly and intuitively through the bundled styles or dive into creation and full customization yourself.
Requires at least: 6.1
Tested up to: 6.7
Requires PHP: 5.6
Version: 1.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: twentytwentythree
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/





/* ==== member-card ==== */
.wp-block-image.member-card {
  position: relative;
}
.wp-block-image.member-card img {
  display: block;
  height: auto;
  max-width: 100%;
}
.wp-block-image.member-card figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.75); /* 半透明の白帯 */
  color: #000;
  line-height: 1.35;
  text-align: left;
  z-index: 1;
}
.wp-block-image.member-card figcaption .name-ja {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0;
}
.wp-block-image.member-card figcaption .name-en {
  display: block;
  font-size: 0.82rem;
  margin: 0;
  opacity: 0.9;
}



/* ==== name-box ==== */
p.name-box {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: double 5px #648FA6;
	border-radius: 10px;/*角の丸み*/
	background: #c3d0d6;/*背景色*/
}
.name-box p {
    margin: 0; 
    padding: 5;
}


/* ==== back-slideshow ==== */
.back-slideshow {
  position: relative;
  width: 100vw;
  padding: 0; /* 不要な余白を削除 */
  max-width: 100%; /* 横スクロール防止 */
  height: 450px;
  margin: 0;
  overflow: hidden;
}

.back-slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: backSlide 16s infinite;
}
.back-slideshow::after{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, .2);
}

/* 画像ごとに開始タイミングをずらす */
.back-slideshow img:nth-child(1) { animation-delay: 0s; }
.back-slideshow img:nth-child(2) { animation-delay: 4s; }
.back-slideshow img:nth-child(3) { animation-delay: 8s; }
.back-slideshow img:nth-child(4) { animation-delay: 12s; }

@keyframes backSlide {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  25%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}
.slide-text {
  position: absolute;
  top: 50%;            /* 縦中央 */
  left: 50%;           /* 横中央 */
  transform: translate(-50%, -50%); /* 完全中央 */
  color: white;        /* 白文字 */
  font-size: 4rem;     /* 文字サイズ調整 */
  font-weight: bold;   /* 太字 */
  text-align: center;
  text-shadow: 1px 1px 5px rgba(0,0,0,0.7); /* 背景に影を付けて見やすく */
  z-index: 10;         /* 画像より前面に表示 */
  pointer-events: none; /* 文字にマウスイベントを通さない */
}


/* ==== page_top_btn ==== */
.page_top_btn {
position: fixed;
bottom: 10px;
right: 10px;
font-weight: bold;
padding: 0.7em;
text-align: center;
background: rgb(255, 0, 0);
color: #fff;
transition: 0.3s0;
}

/* マウスオーバー時 */
.page_top_btn:hover {
background: rgb(255, 0, 0, 0.8);
color: rgb(255, 255, 255, 0.8);
}
html{
  scroll-behavior: smooth;
}














/* ==== Dark Page 基本 ==== */
.page-dark {
  background: #111;
  color: #eee;
  padding: 2rem;
}

.page-dark a {
  color: #0ff;
}

.page-dark h1,
.page-dark h2 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* ==== モノクロのガビガビ・グリッチ ==== */
.glitch {
  position: relative;
  font-size: 2.5rem;
  font-weight: bold;
  color: #fff;
  animation: glitch-skew 1s infinite linear alternate-reverse;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
  opacity: 0.8;
  overflow: hidden;
}

.glitch::before {
  animation: glitch-move 0.3s infinite linear alternate-reverse;
}

.glitch::after {
  animation: glitch-move 0.4s infinite linear alternate-reverse;
}

/* ==== アニメーション ==== */
@keyframes glitch-skew {
  0% { transform: skew(0deg); }
  20% { transform: skew(2deg); }
  40% { transform: skew(-2deg); }
  60% { transform: skew(1deg); }
  80% { transform: skew(-1deg); }
  100% { transform: skew(0deg); }
}

@keyframes glitch-move {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-1px, -1px); }
  50%  { transform: translate(1px, 1px); }
  75%  { transform: translate(-1px, 1px); }
  100% { transform: translate(1px, -1px); }
}

body {
    background-color: #FFFFFF; /* お好みの色コードに変更 */
}
html, body {
  overflow-x: hidden; /* 横スクロールを禁止 */
}

.bg-section-1 {
  background-color: #E6E6E6;
  width: 100vw;
  margin: 1em 0;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.bg-section-1 .bg-inner {
  max-width: 1024px;
  margin: 0 auto;
  padding: 2em 1em;
}
/* グループブロック背景画像の上に薄い黒を重ねる */
.overlay-bg {
  position: relative; /* オーバーレイを絶対配置できるように */
}

.overlay-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 2); /* 透明度30%の黒 */
  z-index: 0; /* 文字より後ろに */
  pointer-events: none; /* クリックなどをブロックしない */
}

/* 文字をオーバーレイより前に出す */
.overlay-bg > * {
  position: relative;
  z-index: 1;
}








/* ====================================
   黒モード 共通設定
==================================== */

/* 全体背景・文字 */
body.search-dark-mode,
body.single-dark-mode {
    background-color: #000 !important;
    color: #fff !important;
    font-family: 'Source Serif Pro', serif !important;
}

/* 見出し・段落・リスト・blockquote */
body.search-dark-mode h1,
body.search-dark-mode h2,
body.search-dark-mode h3,
body.search-dark-mode h4,
body.search-dark-mode h5,
body.search-dark-mode h6,
body.search-dark-mode p,
body.search-dark-mode li,
body.search-dark-mode blockquote,
body.single-dark-mode h1,
body.single-dark-mode h2,
body.single-dark-mode h3,
body.single-dark-mode h4,
body.single-dark-mode h5,
body.single-dark-mode h6,
body.single-dark-mode p,
body.single-dark-mode li,
body.single-dark-mode blockquote {
    color: #fff !important;
    font-family: 'Source Serif Pro', serif !important;
}

/* ヘッダー・フッター */
body.search-dark-mode header,
body.search-dark-mode footer,
body.single-dark-mode header,
body.single-dark-mode footer {
    background-color: #000 !important;
    color: #fff !important;
    font-family: 'Source Serif Pro', serif !important;
}

/* 検索結果・投稿ページの黒モードで画像背景を透明に */
body.search-dark-mode figure.wp-block-image,
body.single-dark-mode figure.wp-block-image,
body.search-dark-mode figure.wp-block-image a,
body.single-dark-mode figure.wp-block-image a {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* リンク・ボタン */
body.search-dark-mode a,
body.search-dark-mode a:visited,
body.search-dark-mode a:hover,
body.search-dark-mode a:active,
body.search-dark-mode .wp-block-button__link,
body.search-dark-mode button,
body.single-dark-mode a,
body.single-dark-mode a:visited,
body.single-dark-mode a:hover,
body.single-dark-mode a:active,
body.single-dark-mode .wp-block-button__link,
body.single-dark-mode button {
    color: #fff !important;
    background-color: #222 !important;
    border: none !important;      /* 枠を消す */
    box-shadow: none !important;  /* ホバーやフォーカスの影も消す */
    outline: none !important;
    text-decoration: none !important;
}

/* 入力欄・テキストエリア・セレクトボックス（検索ページ用） */
body.search-dark-mode input,
body.search-dark-mode textarea,
body.search-dark-mode select,
body.search-dark-mode button {
    background-color: #111 !important;
    color: #fff !important;
    border: 1px solid #555 !important;
    font-family: 'Source Serif Pro', serif !important;
}

/* テーブル */
body.search-dark-mode table,
body.search-dark-mode th,
body.search-dark-mode td,
body.single-dark-mode table,
body.single-dark-mode th,
body.single-dark-mode td {
    background-color: #111 !important;
    color: #fff !important;
    border: 1px solid #555 !important;
}

/* リストマーカー */
body.search-dark-mode ul li::marker,
body.search-dark-mode ol li::marker,
body.single-dark-mode ul li::marker,
body.single-dark-mode ol li::marker {
    color: #fff !important;
}

/* ====================================
   検索結果ページ専用
==================================== */

/* 検索結果タイトル周り */
body.search-dark-mode .entry-header,
body.search-dark-mode .entry-header a,
body.search-dark-mode .entry-header .wp-block-group,
body.search-dark-mode .entry-header .wp-block-columns,
body.search-dark-mode .entry-header .wp-block-column,
body.search-dark-mode .wp-block-post-title,
body.search-dark-mode .wp-block-post-title a {
    background-color: #000 !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* タイトルリンクも白に統一 */
body.search-dark-mode .entry-title a {
    color: #fff !important;
    text-decoration: none !important;
}

/* ====================================
   投稿ページ専用（ID指定）
==================================== */

/* 投稿タイトル周り */
body.single-dark-mode .entry-header,
body.single-dark-mode .entry-header * {
    background-color: #000 !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* タイトルリンクも白に */
body.single-dark-mode .entry-title a {
    color: #fff !important;
    text-decoration: none !important;
}