/******************************************************
  Profile page - Twenty Twenty-Four clone CSS
  ※ profile.html 専用
  ※ style.css と絶対に競合しないように
    .wp-profile-page をルートにしてネスト管理
******************************************************/

/* ========= ページ全体レイアウト ========= */
.wp-profile-page {
  width: 100%;
  background: #fff;
  --content-width: 880px;
  --section-padding: 60px 20px;
  --gray-bg: rgb(207, 202, 190);
  --white-bg: #ffffff;
  --radius: 14px;
  --shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* 中央コンテンツ幅（WP と同じ） */
.wp-profile-page .wp-inner {
  max-width: var(--content-width);
  margin: 20px auto;
}

.wp-inner h2{
	margin-top: 60px;
	padding-top: 10px;
}
/* Section 背景をブラウザ全幅に適用 */
.wp-section.bg-custom {
  background-color: rgb(207, 202, 190);
}


/* セクションの背景色切替（WP 構造再現） */
.wp-section {
  padding: var(--section-padding);
}

.bg-white { background: var(--white-bg); }
.bg-gray  { background: rgb(207, 202, 190); }

/* ========= 見出し（WP風） ========= */
.wp-profile-page h2 {
  font-size: 24px;
  margin-bottom: 20px;
  padding-left: 14px;
  border-left: 5px solid #ffb400;
}
/* ========= 2カラム（WP Columns block 再現） ========= */
.wp-columns {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.wp-column {
  flex: 1;
  min-width: 100px;
}

.wp-column p {
font-size: 90%;
	padding: 10px 0px;
}

.wp-column p.des {
font-size: 80%;
	color: #5E5E5E;
}



.wp-column img {
max-width: 400px;
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

@media (min-width: 600px) {
  .wp-column .wp-gallery {
    display: grid;
    grid-template-columns: 1fr; /* ← 1列にする（縦並び） */
    gap: 24px;
  }
}

@media (max-width: 600px) {
  .wp-column .wp-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 16px;
  }
}

@media (max-width: 600px) {
  .wp-section .wp-gallery {
   padding: 0px 10px!important;
  }
}

/* ========= SNS ボタン ========= */
.wp-sns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 25px 0;
}

.wp-sns a {
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 14px;
  border: 1px solid #cfcfcf;
  background: #fff;
  text-decoration: none;
  color: #444;
  transition: 0.2s;
  box-shadow: var(--shadow);
}

.wp-sns a:hover {
  background: #f7f7f7;
}

.wp-sns .x  { background: #000; color:#fff; border:none; }
.wp-sns .ig { background: #E4405F; color:#fff; border:none; }

/* ========= 目次（WP TOC風） ========= */
.wp-toc {
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.wp-toc ol {
  margin-top: 14px;
  padding-left: 24px;
}

.wp-toc li {
  margin-bottom: 6px;
}

.wp-toc a {
  color: #0667c8;
  text-decoration: none;
}
.wp-toc a:hover {
  text-decoration: underline;
}

/* ========= ギャラリー（WP流の間隔） ========= */
.wp-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 24px;
}

.wp-gallery figure {
  margin: 0;
}

.wp-gallery img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.wp-gallery figcaption {
  margin-top: 6px;
  font-size: 13px;
  color: #555;
}

/* ========= Live2D画像付きセクション ========= */
.wp-live2d {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
}

.wp-live2d img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* =============================
   ★ 新規追加：アニメ画像と文章を横並びにする
   ============================= */
.wp-anime-wrap {
  display: flex;
  align-items: center;  /* 縦位置を中央揃え＝同じ高さで並ぶ */
  gap: 30px;
}

.wp-anime-wrap .wp-anime {
  order: 2;             /* ★画像を右側に配置 */
}

.wp-anime-wrap .wp-text-block {
  order: 1;             /* ★テキスト＋リンクを左側 */
  flex: 1;              /* 可変で広がる */
}
.wp-text-block{
	margin: 0px auto;
	padding:0px 20px;
}

/* 必要に応じて画像の最大幅を制限 */
.wp-anime img {
	max-width: 400px;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* =============================
   ★ 追加：スマホで A（画像 → テキスト）へ縦並びに変更
   ============================= */
@media (max-width: 680px) {
  .wp-anime-wrap {
    flex-direction: column;   /* ★縦並びにする */
    align-items: flex-start;  /* 左揃えに変更 */
  }

  .wp-anime-wrap .wp-anime {
    order: 1;                 /* ★画像を上に */

  }

  .wp-anime-wrap .wp-text-block {
    order: 2;                 /* ★テキストを下に */
    width: 100%;
  }
}
/* =============================
   ★ 新規追加：画像を正方形で切り取る共通クラス
   ============================= */
.square-image {
  width: 100%;
  aspect-ratio: 1 / 1;     /* 正方形領域を作る */
  object-fit: cover;       /* トリミングして正方形に収める */
  object-position: center; /* 中央を基準に切り抜く */
  display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ========= スマホ対応（WP風） ========= */
@media (max-width: 500px) {
  .wp-columns {
    flex-direction: column;
  }
  .wp-live2d {
    grid-template-columns: 1fr;
  }
  .wp-section {
    padding: 40px 16px;
  }

}


/* ------------------------------
   共通スタイル
------------------------------ */
/* 見出し本体（ラベル） */
.midasi_01 {
  position: relative;
  display: inline-block;
  padding: 4px 12px;
  font-size: 16px;
  background: #9C9382;
  color: #44423B;
  border-radius: 0 6px 6px 0;
  z-index: 1;              /* 背面帯より前に出す */
}

.midasi_02 {
  position: relative;
  display: block;
  padding: 4px 12px;
  font-size: 18px;
  background: #fff;
  color: #44423B;
  border-radius: 6px;
	text-align: center;
}

/* 左側へブラウザ端まで伸びる帯（背景用） */
.with-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(-50vw + 50%);
  width: 50vw;
  height: 100%;
  background: #9C9382;
  z-index: -1;
}
/* 飾りの◆（任意） */
.midasi_01.decor::before,
.midasi_01.decor::after {
  content: "◆";
  margin: 0 6px;
  color: #6E655A;
}

@media screen and (max-width: 500px){
	h3.midasi_01 span {
		display: inline-block;
		font-size: 25px;
		font-weight: 700;
		 background: #fff;
  color: #44423B;
  border-radius: 6px;
		padding: 15px 0;
		margin: 10px 15px;
	}
}



nav,img,header,footer,.wp-inner,.wp-section.bg-custom,.fsz {
		z-index: 600;
	position: relative;
}

#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 500;
}

/* Section4 用：背景をブラウザ全幅に伸ばす */
section .sec4-bg {
  background: var(--gray-bg); /* 既存のbg-gray と同じ色 */
  width: 100%;
  position: relative;
  z-index: 600; /* fsz と同じ高さにして canvas を遮断 */
}