/*
 Theme Name:   SANGO Child
 Theme URI:    https://4771labo.com/
 Description:  SANGO テーマの子テーマ
 Author:       （あなたの名前）
 Author URI:   https://4771labo.com/
 Template:     sango-theme
 Version:      1.0.0
*/

/* ↓ここから下に「追加CSS」の内容を貼り付けてください */

/*=========
 「この記事を書いた人」欄
  2025.3.27 
=========*/
/* 「この記事を書いた人」欄の背景 */
#inner-content .article-footer .author-info {
		background-image : url("https://4771labo.com/wp-content/uploads/2025/11/bg_city01-2.png");
		background-size: contain;
}

/* 「この記事を書いた人」吹き出し */
.author_label span:before {
	border: 15px solid transparent;
	border-top: solid 30px #f7f7f7;
}
.author_label > span{
	background-color: #f7f7f7;
}
div.author_label {
	paint-order: stroke;
	-webkit-text-stroke: 5px #ffffff;
	text-stroke: 5px #ffffff;
}

/*=========
　シェアボタンの設定
　2025.3.27 
=========*/
/* アイコン設定　2025.03.27  */
.fa,
.fa-facebook,
.fa-hatebu,
.fa-line {
 	color: #333333;
}
/* SANGOシェアタイトル 2025.3.27 */
.sns-btn__title{
  display: none;
}

/* h2見出し　2025.03.29 */
/* h2本体 */
h2.wp-block-sgb-headings ,
h2.sgb-heading {
  position: relative; /* 下線を絶対位置で配置する */
	background: linear-gradient(to right, #f7f7f7, #ffffff);
	-webkit-text-stroke: 5px #ffffff;
	text-stroke: 5px #ffffff;
	paint-order: stroke;
	padding-left: 10px;
}
/* h2下線 */
h2.wp-block-sgb-headings::after  ,
h2.sgb-heading::after  {
  content: ""; /* 擬似要素にはコンテンツが必要 */
  position: absolute; /* 絶対位置で配置 */
  left: 0;
  bottom: 0; /* h2の下端に配置 */
  width: 100%; /* 幅は親要素と同じ */
  height: 3px; /* 下線の高さ */
  background-image: linear-gradient(to right, #333333, #ffffff); /* グラデーション */
}
.sgb-heading__text {
	padding-left: 10px;
	display: inline-block;
}



/* List/comment 2025.04.04  */
div.sns-btn > ul,
ul.wp-block-list {
	background-image : url("https://4771labo.com/wp-content/uploads/2025/11/bg_city_3_6_3.jpeg");
}
div.sns-btn > ul,
div.sgb-block-say-text__content,
ul.wp-block-list {
	background-size: contain;
	border-radius: 5px;
	paint-order: stroke;
	-webkit-text-stroke: 5px #ffffff;
	text-stroke: 5px #ffffff;
}

div.like_box,
div.like_inside {
//border:1px solid #000000;
//background-image : url("https://4771labo.com/wp-content/uploads/2025/11/bg_city01-2.png");
//background-size: contain;
}

/* comment 2025.04.06 */
div.sgb-block-say-text__content {
	border-width:1px;
}
.sgb-block-say-text__content p {
 	margin-bottom: 0;	/* 吹き出し最終文字後の改行除け */
}



/* Table 2025.04.08  */
th {
	paint-order: stroke;
	-webkit-text-stroke: 3px #ffffff;
	text-stroke: 3px #ffffff;
}

/* 透過 */
.my_profile ,
article,
section ,
footer.footer,
/*aside .profile-content*/
div.wp-block-group {
	/*background-color: rgba(255, 255, 255, 0.9); */
	opacity: 0.90;
}

/* スライドイン　2025.06.08 */
h2.wp-block-sgb-headings.sgb-heading ,
.wp-block-sgb-say ,
article.sidelong__article ,
.wp-block-latest-posts__list li,
.cat-item,
.my_profile p,
.entry-content p:not(.no-animate) ,
.entry-content li:not(.no-animate),
.prnx,
.author-info,
.related-posts li,
.sns-btn ul,
figure,
.inserted-h2-image,
.post-thumbnail img   {
	opacity: 0;
	transform: translateX(25px);
	transition: transform 3s ease, opacity 3s ease;
}
@media (max-width: 768px) {
  h2.wp-block-sgb-headings.sgb-heading,
  .wp-block-sgb-say ,
	article.sidelong__article,
	.wp-block-latest-posts__list li,
	.cat-item,
	.my_profile p,
	.entry-content p:not(.no-animate),
	.entry-content li:not(.no-animate),
	.prnx,
	.author-info,
	.related-posts li,
	.sns-btn ul ,
	figure,
	.inserted-h2-image,
	.post-thumbnail img    {
		transform: translateX(10px);
	}
}
/* 表示されたときにこのクラスが追加される */
h2.wp-block-sgb-headings.sgb-heading.show,
.wp-block-sgb-say.show,
article.sidelong__article.show,
.wp-block-latest-posts__list li.show,
.cat-item.show,
.my_profile p.show,
.entry-content p.show,
.entry-content li.show,
.prnx.show,
.author-info.show ,
.related-posts li.show,
.sns-btn ul.show,
figure.show,
.inserted-h2-image.show,
.post-thumbnail img.show  {
	opacity: 1;
	transform: translateX(0);
}
.inserted-h2-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  opacity: 0;
  transform: translateX(25px);
  transition: transform 3s ease, opacity 3s ease;
}

/* ページ全体フェードイン 2025.06.08 */
body {
	opacity: 0;
	transition: opacity 3s ease;
}
body.fade-in {
	opacity: 1;
}
body.home {
	transition: opacity 4s ease;
}


/* 入力箇所フォーカス 2025.06.08 */
input[type="text"]:focus ,
input[type="email"]:focus ,
textarea:focus {
	box-shadow:0 0 20px #e0e0e0;
	background-color : #ffffff;
	border : 1px solid #666666;
	transition:box-shadow 0.5s;
	outline: none; 
}

/* グラデーションボタン 2025.06.15 */
.wp-block-button__link,
.wp-block-search__button {
	background: linear-gradient(90deg, #666666, #88dfa2, #666666); 
 	background-size: 300% 100%;
 	color: white;
 	border: none;
 	padding: 0.6em 1.2em;
 	border-radius: 5px;
 	animation: backgradation 10s ease infinite;
 	text-decoration: none;
 	display: inline-block;
 	transition: opacity 0.3s;
}
.wp-block-button__link:hover,
.wp-block-search__button:hover {
	opacity: 0.8;
}

/* グラデーションh2 2025.07.27 */
.wp-block-heading {
  position: relative;
  display: block;
  width: 100%;
  padding-right: 10px;
}
.wp-block-heading::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 100%;
  background: linear-gradient(90deg, #666666, #88dfa2);
}

/* ボタンアニメーション */
@keyframes backgradation {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* テーブル　マウスオーバー 2025.06.15 */
tr:hover td {
	cursor:pointer;
	background-color:#eeffee;
}
table td:hover {
	background-color:#ddffdd;
}

/* SNSツールチップ 2025.06.15 */
.sns-btn__item a {
	position: relative;
	display: inline-block;
}
.tooltip-text {
	visibility: hidden;
	width: max-content;
	background-color: #666666;
	color: #fff;
	text-align: center;
	border-radius: 4px;
	padding: 4px 8px;
	position: absolute;
	z-index: 1000;
	bottom: 125%;
	bottom: auto;
	-webkit-text-stroke: 0;
	text-stroke: 0;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	transition: opacity 0.3s;
	white-space: nowrap;
	font-size: 12px;
	pointer-events: none;
}
.sns-btn__item a:hover .tooltip-text,
.sns-btn__item a:focus .tooltip-text {
	visibility: visible;
	opacity: 1;
}
.sns-btn__item a img {
	display: block;
	margin: 0 auto;
}

/* スクロールボタン 2025.06.29 */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');
.scroll_down {
	position: fixed;
	bottom: 50px;
	left: 30px;
	transform: none;  
	animation: arrowmove 1s ease-in-out infinite;
	z-index: 9999;
}
.scroll_down a {
	position: relative;
	display: block;
	color: #666666;
	font-size: 14px;
	font-family: 'Josefin Sans', sans-serif;
	letter-spacing: .2em;
	text-transform: uppercase;
	width: 24px;
	height: 24px;
	text-decoration: none;
	pointer-events: auto;
	paint-order: stroke;
	-webkit-text-stroke: 3px #ffffff;
	text-stroke: 3px #ffffff;
}
.text {
	display: block;
	margin-top: 70px;
	margin-left: -14px;
	font-size: 12px;
	color: #666666;
	text-transform: uppercase;
	white-space: nowrap;
	letter-spacing: 2px;
}
.arrow {
	position: absolute;
	width: 28px;
	height: 5px;
	opacity: 0;
	transform: scale3d(0.5, 0.5, 0.5);
	animation: move 3s ease-out infinite;
}
.arrow:first-child { animation-delay: 1s; }
.arrow:nth-child(2) { animation-delay: 2s; }
.arrow:before,
.arrow:after {
	content: ' ';
	position: absolute;
	top: 0;
	height: 100%;
	width: 51%;
	background: #666666;
}
.arrow:before { left: 0; transform: skew(0deg, 30deg); }
.arrow:after  { right: 0; width: 50%; transform: skew(0deg, -30deg); }
@keyframes move {
	25% { opacity: 1; }
	33% { opacity: 1; transform: translateY(30px); }
	67% { opacity: 1; transform: translateY(40px); }
	100% { opacity: 0; transform: translateY(55px) scale3d(0.5, 0.5, 0.5); }
}

/* インジケータ波紋 2025.06.29 */
ul.page-numbers {
	display: flex;
	list-style: none; 
	padding: 0;
	margin: 0;
	justify-content: center; 
	align-items: center;
}
ul.page-numbers li {
}
ul.page-numbers > li > .page-numbers {
	position: relative;
	display: block;
	margin: 10px;
	cursor: pointer;
	border-radius: 50%;
}
ul.page-numbers > li > .page-numbers.current {
	background: #cccccc;
}
ul.page-numbers > li > .page-numbers.current::after {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 100%;
	height: 100%;
	content: '';
	border-radius: 50%;
	transform: translate(-50%, -50%);
}
.page-numbers.current::after {
	animation: motion 2s linear infinite;
}
@keyframes motion {
	0% {
		background: rgba(123, 151, 170, 0.4);
		transform: translate(-50%, -50%) scale(1);
	}
	100% {
		background: rgba(123, 151, 170, 0);
		transform: translate(-50%, -50%) scale(1.5);
	}
}

/*  テキストアニメーション（1字ずつ） 2025.06.29  */
.slideInRightOne {
	opacity: 0;
	display: inline-block;
	animation: slideInRightOne 5s ease forwards;
}
@keyframes slideInRightOne {
	0% {
		opacity: 0;
		transform: translateX(50px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}


/* 便利ツール出力結果表示　2025.07.27 */
#result, #result * {
  opacity: 1 !important;
  display: block !important;
  transform: none !important;
  transition: none !important;
  visibility: visible !important;
}

/* 走査線表示　2025.11.29 */
.scanline {
    height: 3px;
    background: rgba(0, 0, 0, 0.18); /* 少し濃く */
    opacity: 1; /* とりあえず常に見える */
    transform: translateX(0);
	animation: slide-line 1.5s ease forwards;
}

/* ホコリ表示 2025.12.02 */
/* ホコリ舞う粒 */
.floating-dust {
  position: fixed;
  bottom: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.7;
  animation: dustFloat linear forwards;
}
/* アニメーション：10〜20px上昇、ゆっくり3〜6秒 */
@keyframes dustFloat {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.7;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-200px) translateX(5px) scale(0.6);
    opacity: 0;
  }
}

/* 背景　ノイズ風揺れ 2025.12.04 */
/* ==== ゆっくり漂う薄ノイズレイヤー ==== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;

  /* ノイズをもっと細かく・薄くする */
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.015) 0px,
      rgba(255,255,255,0.015) 1px,
      rgba(0,0,0,0.015) 2px,
      rgba(0,0,0,0.015) 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.015) 0px,
      rgba(255,255,255,0.015) 1px,
      rgba(0,0,0,0.015) 2px,
      rgba(0,0,0,0.015) 3px
    );

  opacity: 0.2; /* 全体の薄さを調整 */
  mix-blend-mode: overlay;

  /* ゆっくり漂う動き（縞に見えない柔らかい動き） */
  animation: noiseFloat 12s infinite ease-in-out alternate;
}

@keyframes noiseFloat {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-8px, 8px); }
}