@charset "UTF-8";
/**
* ============================================================================
* com-pages-top.css
* ============================================================================
*
* 【目的】
* トップページ専用のレイアウトとスタイルを提供。
* 最新情報、SNSリンク、シーズン画像スライド、6カラムメニューを実装。
*
* 【使用ページ】
* - /index.php (body_class: top) のみ
*
* 【依存関係】
* - 必須: com-core-reset.css, com-core-base.css, com-core-layout.css
* - 併用: com-pages-top-slide.css（スライドショー機能）
*
* 【読み込み順序】
* 4番目（com-core-* の後）
* com-pages-top-slide.css と併用
*
* 【主要な機能】
* 1. トップページ見出し (h2)
* - 中央寄せ
* - 画像見出し対応
*
* 2. 最新情報セクション (section#new)
* - グラデーション背景
* - 銀杏アイコン付きリスト
* - 最大高さ236px、スクロール可能
* - h3: 特殊なテキストシャドウ（青い光彩）
*
* 3. SNSリンクセクション (section#sns)
* - 高さ58px
* - 丸ゴシック体
*
* 4. シーズン画像スライド (section#season)
* - 横スクロールアニメーション（80秒でループ）
* - グラデーション背景（ピンク→赤）
* - 背景画像: /i/header/kiko.png
*
* 5. 6カラムメニュー (#imenu_img)
* - 3カラム × 2行（.third）
* - グラデーション背景（白→黄色）
* - レスポンシブ対応（970px以下で1カラムに）
*
* 【レスポンシブブレークポイント】
* - 1062px: 最新情報フォントサイズ縮小
* - 970px: 6カラムメニューを1カラムに変更
*
* 【注意事項】
* - com-pages-nottop.css とは排他的（同時に読み込まない）
* - section#season のアニメーションは transform: translateX を使用
* - #season a[href$='.pdf'] で PDF アイコンを非表示に（背景透明）
* - ミニファイ後は pages-top.css にリネームされます
*
* 【変更履歴】
* 2025-10-20: top.css から改名・充実したドキュメント追加
* 2025-10-20: index.phpのインラインスタイル（h2, #new h3）をこのファイルに移行
*
* ============================================================================
*/
/* ============================================================================
トップページ全体のコンテナ
----------------------------------------------------------------------------
#topwrapall と #topwrap でトップページのコンテンツを囲みます。
============================================================================ */
#topwrapall {
overflow: visible;
}
#topwrap {
margin: 0 auto;
box-shadow: 5px 5px 5px 0 #777, -2px 0 5px #aaa;
}
/* ============================================================================
h2 - トップページ見出し
----------------------------------------------------------------------------
【用途】
トップページのメイン見出し（「亀は万年 万事の向上に導く八幡様」画像）
【HTML】
============================================================================ */
h2 {
text-align: center;
margin: auto;
}
.home section+h2 {
display: block;
color: white;
text-align: center;
position: inherit;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 100%, rgba(0, 0, 0, 0) 0%);
background: #fff;
}
.home h2 img {
max-width: 72vw;
text-align: center;
margin: auto;
position: relative;
top: 0.1em;
}
/* ============================================================================
section#new - 最新情報
----------------------------------------------------------------------------
【デザイン】
- グラデーション背景（下: #fd9 → 上: #fff）
- 背景画像: /i/new/newkiko.png（右下70%, 93%）
- 最大高さ: 236px（スクロール可能）
【リストアイテム】
- ::before で銀杏アイコン（/i/new/ityou.png）を表示
- リンク色: #303992（青）
- ホバー色: #766bf9（薄い青）
【レスポンシブ】
1062px以下: フォントサイズ 105% → 97%
【使用例】
============================================================================ */
section#new {
color: #111;
z-index: 10;
overflow: auto;
background: linear-gradient(to top, #fd9 0%, #fff 80%);
padding: 0 1em 0 1em;
margin: 0 1em 0 1em;
}
/* ----------------------------------------------------------------------------
#new h3 - 最新情報見出し
----------------------------------------------------------------------------
【デザイン】
- 文字間隔: 0.5em（広め）
- テキストシャドウ: 白い縁取り + 青い光彩（2段階）
- 色: 黒
- フォントサイズ: larger
【HTML】
---------------------------------------------------------------------------- */
#new h3 {
letter-spacing: .5em;
text-shadow: 1px 1px 2px white, 0 0 1em blue, 0 0 .2em blue;
color: black;
font-size: larger;
padding: .3em 0;
}
#new ul {
text-align: left;
background-repeat: no-repeat;
background-image: url('/i/new/newkiko.png');
position: relative;
background-position: 70% 93%;
overflow: auto;
max-height: 236px;
height: 236px;
width: inherit !important;
}
#new ul li {
line-height: 1.5;
margin: 0 0 0.4em 0.1em;
list-style: none;
font-size: 105%;
vertical-align: 1em;
}
#new a {
color: #303992;
}
#new a:hover {
color: #766bf9;
}
#new ul li::before {
content: url(/i/new/ityou.png);
}
@media(max-width:1062px) {
#new ul li {
font-size: 97%;
}
}
/* ============================================================================
section#sns - SNSリンク
----------------------------------------------------------------------------
【デザイン】
- 高さ: 58px（固定）
- 背景: 白色
- フォント: 丸ゴシック体
【リンク】
- 色: #f8094e（ピンク）
- line-height: 58px（垂直中央寄せ）
【使用例】
============================================================================ */
section#sns {
z-index: 11;
font-family: HG丸ゴシックM-PRO, AR P丸ゴシック体M, Meiryo, メイリオ, sans-serif;
height: 58px;
background-color: white;
text-align: center;
}
section#sns p {
text-align: center;
text-indent: 0;
padding: 0;
margin: 0;
position: relative;
}
section#sns a {
color: #f8094e;
text-decoration: none;
line-height: 58px;
}
/* ============================================================================
section#season - シーズン画像スライド
----------------------------------------------------------------------------
【デザイン】
- グラデーション背景（左: rgba(255, 201, 203, 1) → 右: #b93c50）
- 背景画像: /i/header/kiko.png（右下-15px）
【アニメーション】
#season2 内の画像が左に移動し続けます:
- transform: translateX(0%) → translateX(-1532px)
- 80秒でループ（animation: loop 80s linear infinite）
【ホバーエフェクト】
画像ホバー時にフラッシュアニメーション:
- opacity: 0.4 → 1.0（1秒）
【PDF リンク】
section#season 内の PDF リンクはアイコンを表示しません
（com-pages-nottop.css のスタイルを上書き）
【レスポンシブ】
1062px以下: height auto
【使用例】
...
============================================================================ */
section#season {
z-index: 10;
height: auto;overflow-y: hidden;
text-align: center;
background-color: #800080;
/*隙間をなくすためのハック*/
position: relative;
/*fallbackforoldbrowsers*/
background-position: bottom 10px right 10px;
background: url(/i/header/kiko.png) bottom -10px right -15px, linear-gradient(to left, rgba(255, 201, 203, 1), #b93c50);
;
background-repeat: no-repeat;
/*テスト*/
}
section#season #season2 {
height: inherit;
margin: auto;
display: flex;
overflow-x: hidden;
}
section#season #season2 img{/*
backface-visibility: hidden;
will-change: transform;border:1px solid black;*/
animation: loop 80s 0s linear infinite;display: inline;vertical-align: middle;
}
/*アニメーション*/
@keyframes loop {
0% {
transform: translateX(0%);
}
to {
transform: translateX(-1532px);
}
}
/*テスト終了*/
section#season a{display: inline}
section#season a img{display: inline;vertical-align: middle;}
section#season a:hover {
opacity: 1;
animation: flash 1s;}
@keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
@media(max-width:1062px) {
section#season {
height: auto;
}
}
#season3{visibility: visible;}
#season3 a img {
border: 3px double #777;
padding: 1px;
position: relative;
margin: 3px;
text-indent: 0;
box-shadow: 1px 1px 5px 0 #444;
}
#season a[href$='.pdf'] {
padding-right: inherit;
background: transparent;
}
/* ============================================================================
#imenu_img - 6カラムメニュー
----------------------------------------------------------------------------
【構造】
#imenu_img
├─ .third (33%幅) × 3
│ └─ div.imenu_img
│ ├─ img
│ ├─ h3
│ └─ p
【デザイン】
- 3カラム × 2行（合計6項目）
- 各項目: グラデーション背景（白→黄色）
- 枠線: #ffcfcf
【レスポンシブ】
970px以下:
- .third を float: none、width: 95% に変更（1カラムに）
- h3 フォントサイズを 4vh に
【使用例】
============================================================================ */
#imenu_img {
width: 98%;
padding: 0 1%;
text-align: center;
}
.third {
float: left;
width: 33%;
margin: 0 auto;
}
div.imenu_img {
border: 1px solid #ffcfcf;
padding: 9px;
margin: 10px 0 11px 0;
background: linear-gradient(to bottom, #fff, #ffe7ad);
}
div.imenu_img img {
max-width: 280px;
max-height: 153px
}
#imenu_img h3 {
font-size: 1.3rem;
}
#imenu_img p {
margin:0 0 15px 0;
padding: 6px 0 10px 0;
font-size: .8em;
text-align: center;
}
@media(max-width:970px) {
#imenu_img h3 {
font-size: 4vh;
}
#imenu_img .third {
float: none;
width: 95%;
}
}