/*
Theme Name: Twenty Twenty-Three Child
Theme URI: https://habone.biz/twenty-twenty-three-child-download/
Author: Himaart
Author URI: https://habone.biz/
Description: A child theme for TT3.
Requires at least: 6.2
Tested up to: 6.3
Requires PHP: 8.0
Version: 2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentythree-child
Template: 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

Twenty Twenty-Three Child WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Three Child is distributed under the terms of the GNU GPL.
*/


/* ========================================
     全ての要素に赤枠線を入れてチェックする（検証用）
======================================== */
* {
/*outline: 1px solid red;
background-color : pink; */
}
/*.wp-lightbox-overlay.zoom{
	display:none;
}*/

/*==  Reset CSS  ==*/
@charset "UTF-8";
/* Reset CSS */
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

img { border: 0;vertical-align: bottom;}

ul, li, ol {
  list-style: none;
}

a {
	text-decoration: none;
	color: #000;
}

li img, dt img, dd img { vertical-align: top; }
a { outline: none; }
:focus { -moz-outline-style: none; }

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, a,
address, dfn, em, img, small, i,
dl, dt, dd, ol, ul, li,
form, label, button, input, textarea,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure,
footer, header, menu, nav, section,
time, video {
  box-sizing: border-box;
  line-height: 1;
  margin: 0;
  padding: 0;
}

input, textarea {
  -webkit-appearance: none;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
select::-ms-expand {
    display: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance:textfield;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}
label {
  cursor: pointer;
}

a:hover {
  opacity: 0.7;
}
/*==  Reset CSS  ==*/


/*★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★*/
/* ==========================================================================
   レスポンシブデザイン用ブレークポイント
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. スマートフォン（極小） - 374px以下
   iPhone SE、小型スマホ向け
   -------------------------------------------------------------------------- */
@media (max-width: 374px) {
  /* 例：フォントサイズを小さくする */
  body {
    font-size: 15px;
  }
}

/* --------------------------------------------------------------------------
   2. スマートフォン（標準） - 375px〜767px
   iPhone、Android標準サイズ向け
   -------------------------------------------------------------------------- */
@media (min-width: 375px) and (max-width: 767px) {
body {
  
  }
}

/* --------------------------------------------------------------------------
   3. タブレット（縦持ち） - 768px〜1023px
   iPad、Android タブレット縦向け
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  /* 例：サイドバーを下に配置 */
 
}

/* --------------------------------------------------------------------------
   4. タブレット（横持ち）・小型ノートPC - 1024px〜1279px
   iPad横向き、小型ノートPC向け
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  /* 例：コンテンツ幅を調整 */
  .site-content {
    /*max-width: 960px;*/
  }
}

/* --------------------------------------------------------------------------
   5. デスクトップ（標準） - 1280px〜1919px
   一般的なデスクトップモニター向け
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) and (max-width: 1919px) {
  /* 例：標準的なデスクトップレイアウト */
  .container {
    /*max-width: 1200px;*/
  }
}

/* --------------------------------------------------------------------------
   6. デスクトップ（大画面） - 1920px以上
   フルHD以上のモニター向け
   -------------------------------------------------------------------------- */
@media (min-width: 1920px) {
  /* 例：コンテンツが広がりすぎないように */
  .site-content {
    /*max-width: 1400px;*/
    /*margin: 0 auto; /* 中央寄せ */*/
  }
}

/* --------------------------------------------------------------------------
   【補足】モバイルファースト設計の場合
   -------------------------------------------------------------------------- */
/* 基本スタイル（モバイル用）はここに書く */

/* タブレット以上 */
@media (min-width: 768px) {
  /* タブレット以上で適用するスタイル */
}

/* デスクトップ以上 */
@media (min-width: 1024px) {
  /* デスクトップ以上で適用するスタイル */
}



/*★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★*/


html {
/*font-size:clamp(1rem, 2.5vw, 2rem);*/
}

 
/* ========================================
     ハンバーガーメニューの上部に 2px の余白
======================================== */
.wp-block-separator {
    border: none;
	margin: 0 0;
}

/* ========================================
     虹色グラデのテキストがゆっくりと降りてくる
======================================== */
.section.welcome {
	display:none;
	font-family: 'Water Brush', cursive;  /* Water Brushを指定 */
    white-space: nowrap;            /* 改行を禁止 */
    display: block;                 /* ブロック要素として扱う */
    width: 100%;                    /* 幅いっぱいに */
    text-align: center;            /* 均等配置 */
    text-align-last: center;       /* 最終行も均等配置 */
	letter-spacing: 0.0rem;
	word-spacing: 1.0rem;
	line-height: 1.5em;
    
    /* フォントサイズを画面幅に最適化 */
    /* "A Little Something From Nature" は約30文字 */
    font-size: calc(100vw / 20);   /* 画面幅を文字数で割る */
    
    /* 最大・最小サイズも設定 */
    max-width: 100%;
    padding: 0 3.0rem;                /* 左右に少し余白 */
    box-sizing: border-box;         /* paddingを幅に含める */
}
/* スマホ用の微調整 */
@media (max-width: 480px) {
    .section.welcome {
        font-size: calc(99vw / 15);   /* 画面幅を文字数で割る */
    }
}




.rainbow-text,.landing-text{
   text-shadow: 0 0 10px #ffffff; /* 影の色とぼかしの強さ */
	font-weight: 300;
}

.section.welcome-footer{
	text-align: center;
	margin-top: -0.0rem !important;
}
.rainbow-footer h4,.landing-footer h4{
    font-size: 1.4rem;
    font-weight: 300;
	text-align: center;
    letter-spacing: 0px;
	white-space: nowrap;
}

/* == パターン1: 虹色グラデーションが流れる === */
  .rainbow-text,.rainbow-footer {
    /* グラデーションを背景として設定 */
    background: linear-gradient(
      90deg,
      #ff0000,  /* 赤 */
      #ffd700,  /* 黄色 */
      #008000,  /* 緑 */
      #0000cd,  /* 青 */
      #800080,  /* 紫 */
      #ff0000   /* 赤（ループのため） */
    );
    /* グラデーションのサイズを大きくして流れる範囲を広げる */
    background-size: 200% 100%;
    /* 背景を文字の形に切り抜く */
    -webkit-background-clip: text;
    background-clip: text;
    /* 文字を透明にして背景を見せる */
    -webkit-text-fill-color: transparent;
    /* アニメーションを適用 */
    animation: rainbow-flow 6s ease-in-out infinite;
  }

  /* グラデーションが左右に流れるアニメーション */
  @keyframes rainbow-flow {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

/* == パターン2: 鳥が着地するように降りてくる == */
  .landing-text,.landing-footer {
    color: #333;
    /* アニメーションを適用（3秒間、ease-outでふわっと、1回のみ） */
    animation: bird-landing 3s ease-out forwards;
  }

  /* 鳥が降りてくるアニメーション */
  @keyframes bird-landing {
    /* スタート地点：上の方、完全に透明 */
    0% {
      transform: translateY(-100px);
      opacity: 0;
    }
    /* 途中：少し降りてきて、まだ半透明 */
    60% {
      transform: translateY(-20px);
      opacity: 0.3;
    }
    /* 着地直前：ほぼ定位置、色が濃くなり始める */
    85% {
      transform: translateY(-5px);
      opacity: 0.7;
    }
    /* 着地：完全に定位置、完全に不透明 */
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* ========================================
     レスポンシブ対応：スマホでは文字を小さく
     ======================================== */
  @media (max-width: 768px) {
    .rainbow-text,
    .landing-text,{
      font-size: 1.4em;
	  text-align: left;
    }
	.rainbow-footer,
    .landing-footer{
      font-size: 1.4em;
	  text-align: center;
    }
	.section.welcome-footer{
	text-align: center;
	margin-top: -0.0rem !important;
}
  }



/*====Ultimate Post List====*/
/*--list--*/
#upl-list-1807 ul li {
    margin-top: 0px;
    margin-bottom: 8px;
    margin-left: 0px;
    margin-right: 0px;
	padding: 5px 0;
	border-top: solid 1px #28426f55;
}
.upl-list{
	line-height:1.2rem;
}
/*--title--*/
.upl-post-title a{
	color: #28426f;
	text-decoration: none;
	font-size:1.5rem;
	line-height:1.5rem;
	font-weight: 500;
}
/*--date--*/
.upl-post-date {
	font-size:1.0rem;
	line-height:1.4rem;
}
/*--excerpt--*/
.upl-post-excerpt {
	color: #444444;
	font-size:1.1rem;
	line-height:1.4rem;
}

/*====  斜めに  ====*/
/*====  斜めに  ====*/
/* ホバーで元に戻るアニメーション付き */
.naname {
    transform: rotate(3deg);           /* 軽く2度傾ける */
    transition: transform 0.2s ease;    /* なめらかな動き */
    display: inline-block;
    transform-origin: center;            /* 回転の中心点 */
}

/* マウスを乗せると水平に戻る */
.naname:hover {
    transform: rotate(0deg);           /* 軽く2度傾ける */
    transition: transform 0.3s ease;    /* なめらかな動き
}