@charset "utf-8";
/**
 * ============================================================================
 * com-pages-top-slide.css
 * ============================================================================
 * 
 * 【目的】
 * トップページのスライドショー機能を提供。
 * 画像の自動切り替え、テキストオーバーレイ、アニメーションを実装。
 * 
 * 【使用ページ】
 * - /index.php (body_class: top) のみ
 * 
 * 【依存関係】
 * - 必須: com-core-reset.css, com-core-base.css, com-core-layout.css
 * - 併用: com-pages-top.css
 * - JavaScript: スライドショー制御スクリプト（画像切り替え、テキストアニメーション）
 * 
 * 【読み込み順序】
 * 5番目（com-pages-top.css の後）
 * 
 * 【主要な機能】
 * 1. スライドショーコンテナ (#slideshow)
 *    - 幅: 100%
 *    - 最大高さ: 90vh
 *    - position: relative（子要素の絶対配置の基準）
 * 
 * 2. スライド画像
 *    - position: absolute で同位置に重ねて配置
 *    - z-index: 8（通常）/ 9（.last-active）
 *    - width: 100%、height: auto
 * 
 * 3. ダミー画像 (img.st)
 *    - position: static、visibility: hidden
 *    - スライドと同サイズ分のスペースを確保
 * 
 * 4. テキストオーバーレイ (div[id^="textunder"])
 *    - 画像下部に半透明黒背景
 *    - bottom: -30%（初期位置、JavaScriptでアニメーション）
 *    - 白文字、ボールド
 * 
 * 5. テキストアニメーション
 *    - .ing クラスで表示（transform: translateX(5em)）
 *    - sharpen アニメーション（1.2秒、opacity 0→1、text-shadow）
 * 
 * 【JavaScriptとの連携】
 * スライドショースクリプトが以下のクラスを動的に追加・削除します:
 * 
 * - .last-active: 前のスライドに追加（z-index: 9、上に表示）
 * - .ing: テキストに追加（表示、右に移動）
 * - p[id$="0"]: デフォルトで表示（visibility: visible）
 * 
 * 【テキストの命名規則】
 * - div[id^="textunder"]: テキストコンテナ（textunder1, textunder2, ...）
 * - p[id^="tt"]: テキスト段落（tt10, tt11, tt20, tt21, ...）
 * - p[id$="0"]: タイトル（フォントサイズ大）
 * - p[id$="1"]: サブタイトル（フォントサイズ小）
 * 
 * 【レスポンシブブレークポイント】
 * - 1062px以下: フォントサイズ調整
 *   - p[id$="0"]: 1.2em
 *   - p[id$="1"]: 0.8em、letter-spacing: 1
 * 
 * 【注意事項】
 * - img.st（ダミー画像）は必須（スペース確保のため）
 * - テキストアニメーションは transform と transition を使用
 * - z-index の値（8, 9）は他の要素と重ならないよう設定
 * - ミニファイ後は pages-top-slide.css にリネームされます
 * 
 * 【変更履歴】
 * 2025-10-20: slideset333.css から改名・充実したドキュメント追加
 * 
 * ============================================================================
 */


/* ============================================================================
   #slideshow - スライドショーコンテナ
   ----------------------------------------------------------------------------
   【役割】
   スライド画像とテキストオーバーレイの絶対配置の基準となる要素。
   
   【サイズ】
   - 幅: 100%（画面幅いっぱい）
   - 最大高さ: 90vh（画面高さの90%）
   
   【子要素の配置】
   - img: position: absolute で重ねて配置
   - div: position: absolute でテキストオーバーレイ
   ============================================================================ */

#slideshow {
 width:100%;
 position:relative;
 max-height:90vh;
}/*ここを基準に内包するimgの位置を決定*/


/* ============================================================================
   #slideshow img - スライド画像
   ----------------------------------------------------------------------------
   【配置】
   - position: absolute（同位置に重ねて配置）
   - top: 0, left: 0
   - z-index: 8（通常）
   
   【サイズ】
   - width: 100%
   - height: auto（アスペクト比維持）
   
   【JavaScriptとの連携】
   .last-active クラスが付与された画像は z-index: 9 に変更されます
   （フェードアウト時に上に表示）
   ============================================================================ */

#slideshow img{
 position:absolute;
 top:0;
 left:0;
 z-index:8;
 width:100%;
 height:auto;
}/*画像を同位置に絶対配置　基本は8*/


/* ============================================================================
   #slideshow img.st - ダミー画像
   ----------------------------------------------------------------------------
   【役割】
   スライドショーのスペースを確保するためのダミー画像。
   
   【重要】
   このクラスを持つ画像は、スライドと同じ画像を使用してください。
   これにより、#slideshow の高さがスライド画像と同じになります。
   
   【スタイル】
   - position: static（通常のフロー）
   - visibility: hidden（非表示だがスペース確保）
   
   【使用例】
   <div id="slideshow">
     <img src="/slide1.jpg" class="st"><!-- ダミー画像 -->
     <img src="/slide1.jpg"><!-- 実際のスライド -->
     <img src="/slide2.jpg">
     ...
   </div>
   ============================================================================ */

#slideshow img.st{
 position:static;
 visibility:hidden;
}/* このクラスを配置した画像をstaticで置くがhiddenにし、上stクラスを使用しないでabsoluteで置く画像と同サイズ分スペースがあく。このstクラスはスライドと同じ画像を使用し、サイズの変動も同じくなる。 */

#slideshow a{
 text-decoration:none;
}


/* ============================================================================
   #slideshow div - テキストオーバーレイコンテナ
   ----------------------------------------------------------------------------
   【配置】
   - position: absolute
   - z-index: 8（画像と同じ）
   - width: 100%
   ============================================================================ */

#slideshow div{
 position:absolute;
 z-index:8;
 margin:0;
 height:auto;
 width:100%;
}/* すべてテキストアンダーのための設定 */


/* ============================================================================
   div[id^="textunder"] - テキストオーバーレイ
   ----------------------------------------------------------------------------
   【デザイン】
   - 背景: rgba(0,0,0,0.7)（半透明黒）
   - 最小高さ: 17%
   - 最大高さ: 45%
   
   【配置】
   - bottom: -30%（初期位置、画面外）
   - JavaScriptでアニメーションして表示
   
   【最適化】
   - transform: translate3d(0,0,0) でGPUアクセラレーション
   
   【使用例】
   <div id="textunder1">
     <p id="tt10">タイトル</p>
     <p id="tt11">サブタイトル</p>
   </div>
   ============================================================================ */

#slideshow div[id^="textunder"]{
 transform: translate3d(0,0,0);
 bottom:-30%;
 width:100%;
 min-height:17%;
 max-height:45%;
 text-align:left;
 background-color: rgba(0,0,0,0.7);
}


/* ============================================================================
   #slideshow div p - テキスト基本スタイル
   ----------------------------------------------------------------------------
   【デザイン】
   - 色: 白
   - フォント: ボールド、letter-spacing: 3px
   
   【サイズ】
   - 幅: 80%
   - フォントサイズ: 1em
   ============================================================================ */

#slideshow div p{
 width:80%;
 color:#fff;
 font-size:1em;
 font-weight:bold;
 letter-spacing: 3px;
 z-index:8;
 margin:7px 0 0 0;
 padding:0;
 text-indent:0;
}/*絶対配置　基本は8画像と同じ*/


/* ============================================================================
   p[id^="tt"] - テキスト段落（アニメーション対象）
   ----------------------------------------------------------------------------
   【初期状態】
   - visibility: hidden（非表示）
   - transform: translateX(1px)（左端）
   
   【.ing クラス付与時】
   JavaScriptによって .ing クラスが追加されると:
   - visibility: visible（表示）
   - transform: translateX(5em)（右に移動）
   
   【transition】
   all 0.3s linear でスムーズに移動
   
   【例外】
   p[id$="0"]（タイトル）はデフォルトで表示:
   - visibility: visible
   - transform: translateX(1em)
   ============================================================================ */

#slideshow div p[id^="tt"]{
 position:relative;
 font-weight:normal;
 font-size:120%;
 transform:translateX(1px);
 transition: all 0.3s linear;
 visibility:hidden;
}
#slideshow div p[id$="0"]{visibility:visible; transform:translateX(1em);
}

#slideshow div p[id^="tt"].ing{
 visibility:visible;
 transform:translateX(5em);
}


/* ============================================================================
   テキストサイズ調整
   ----------------------------------------------------------------------------
   【命名規則】
   - p[id$="0"]: タイトル（大きいフォント）
   - p[id$="1"]: サブタイトル（小さいフォント）
   
   【レスポンシブ】
   1062px以下: フォントサイズを調整
   ============================================================================ */

#slideshow div p[id$="0"]{font-size:1em;}
#slideshow div p[id$="1"]{
 font-size:0.8em;
 bottom:7px;
}
@media only screen and (max-width: 1062px) {/* 画面小さいようスライドフォント */
#slideshow div p[id$="0"]{font-size:1.2em;}
#slideshow div p[id$="1"]{font-size:0.8em;letter-spacing:1;}
}


/* ============================================================================
   .last-active - フェードアウト中のスライド
   ----------------------------------------------------------------------------
   JavaScriptによって前のスライドに .last-active クラスが追加されます。
   z-index: 9 で新しいスライド（z-index: 8）より上に表示され、
   フェードアウトしていきます。
   ============================================================================ */

#slideshow .last-active {
 z-index:9;
}


/* ============================================================================
   .letter-container - テキストリンク
   ----------------------------------------------------------------------------
   【デザイン】
   - 色: 白
   - テキストシャドウ: 白の光彩、黒の影
   - sharpen アニメーション（1.2秒）
   
   【ホバーエフェクト】
   text-shadow: 0px 0px 40px #fff（強い光彩）
   ============================================================================ */

.letter-container {
}
.letter-container p a {
 color: #fff;
 opacity: 1;
 text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
 transition: all 0.5s linear;
 animation: sharpen 1.2s linear backwards;
}
p a:hover{
	text-shadow: 0px 0px 40px #fff;
}


/* ============================================================================
   @keyframes sharpen - テキスト鮮明化アニメーション
   ----------------------------------------------------------------------------
   【アニメーション】
   0%: opacity 0、text-shadow 100px（ぼやけ）、color transparent
   90%: opacity 0.9、text-shadow 10px（少しぼやけ）、color transparent
   100%: opacity 1、text-shadow 2px（鮮明）、color #fff
   
   【使用】
   .letter-container p a に自動適用
   1.2秒かけて文字が鮮明になっていきます
   ============================================================================ */

@keyframes sharpen {
 0% {
    opacity: 0;
    text-shadow: 0px 0px 100px #fff;
    color: transparent;
 }
 90% {
    opacity: 0.9;
    text-shadow: 0px 0px 10px #fff;
    color: transparent;
 }
 100% {
    color: #fff;
    opacity: 1;
    text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
 }
}