/* ===========================
1987PROJECT Version 1.0
=========================== */
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
font-family:"Inter","Noto Serif JP",sans-serif;
background:#f8f8f6;
color:#222;
overflow-x:hidden;
}
img{
display:block;
max-width:100%;
}
a{
color:inherit;
text-decoration:none;
}
.container{
width:min(900px,90%);
margin:auto;
}
/* --------------------------
MENU
-------------------------- */
.menu-btn{
position:fixed;
top:30px;
right:35px;
width:54px;
height:54px;
border:none;
border-radius:50%;
background:rgba(255,255,255,.08);
backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.25);
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
gap:6px;
cursor:pointer;
z-index:9999;
transition:.4s;
}
.menu-btn span{
width:22px;
height:2px;
background:#fff;
transition:.4s;
}
/* --------------------------
SOUND TOGGLE
Opening専用の効果音(扉の軋み・波・カモメ)のON/OFF。
menu-btnと対になる位置(左上)に、同じガラス質感で置く。
z-indexはOpeningの黒幕(9999)より高くし、
暗転中でも常に操作できるようにする。
-------------------------- */
.sound-btn{
position:fixed;
top:30px;
left:35px;
width:54px;
height:54px;
border:none;
border-radius:50%;
background:rgba(255,255,255,.08);
backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.25);
display:flex;
justify-content:center;
align-items:center;
color:#fff;
cursor:pointer;
z-index:10000;
transition:opacity .4s;
}
.sound-btn:hover{
opacity:.75;
}
.sound-wave{
opacity:1;
transition:opacity .3s ease;
}
.sound-mute{
opacity:0;
transition:opacity .3s ease;
}
.sound-btn.muted .sound-wave{
opacity:0;
}
.sound-btn.muted .sound-mute{
opacity:1;
}
.menu-btn.active span:nth-child(1){
transform:
translateY(8px)
rotate(45deg);
}
.menu-btn.active span:nth-child(2){
opacity:0;
}
.menu-btn.active span:nth-child(3){
transform:
translateY(-8px)
rotate(-45deg);
}
.menu{
position:fixed;
top:0;
right:-340px;
width:320px;
height:100vh;
background:#111;
display:flex;
flex-direction:column;
justify-content:center;
gap:28px;
padding:60px;
transition:.5s;
z-index:9998;
}
.menu.show{
right:0;
}
.menu a{
color:#fff;
font-size:1.1rem;
letter-spacing:.15em;
transition:.3s;
}
.menu a:hover{
opacity:.65;
}
/* ナビのSTORY/ABOUT/CONCEPTと、各セクション内の同名見出しを
一旦非表示にするための共通クラス。要素自体は削除しないので、
後からこのクラスを外すだけで再表示できる */
.label-hidden{
display:none;
}
/* --------------------------
Opening
-------------------------- */
/* =========================================
Opening Scene
責務: 黒(scrim)・ドア(door)・静寂だけ。
Heroの写真・ロゴ・コピーはここに持ち込まない。
CSSは見た目(色・不透明度・秒数)だけを持ち、
JSはクラスの付け外しの「順番」だけを管理する。
========================================= */
#opening{
position:fixed;
inset:0;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
z-index:9999;
}
/* 奥にある八幡浜の風景。door-wrapの内側だけに置くことで、
扉が開いた部分からしか見えないようにする。
枠の外側(scrim)は完全な黒のまま */
.opening-bg{
position:absolute;
inset:0;
z-index:0;
}
.opening-bg img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
}
/* 黒い幕。ドア枠の外側は常にこれで完全に覆われる。
扉が開き始めると同時に晴れていき、
その下にあるHero Sceneを少しずつ現す */
.opening-scrim{
position:absolute;
inset:0;
background:#000;
opacity:1;
transition:opacity 1.8s ease;
}
.opening-scrim.clear{
opacity:0;
}
/* ドア枠。images/door-frame.png(実写木製ドアの写真から
切り出した、扉部分だけを透過にした枠)を使う。
これ自体はtransformを一切持たず、完全に静止する。
枠と扉(中のopening-door)は、この要素のopacityひとつで
まとめて現れる。枠だけが先に見える・扉だけが遅れて
出てくる、という分離した出現を起こさせないため */
.door-frame{
position:relative;
width:min(230px,58vw);
aspect-ratio:632/1160;
z-index:1;
background-image:url("images/door-frame.png");
background-size:100% 100%;
box-shadow:0 40px 100px rgba(0,0,0,.6);
opacity:0;
/* 縦位置だけをごくわずかに上へ。サイズ・左右位置・
回転軸(door-wrap/opening-door側)には触れていない */
-webkit-transform:translateY(-50px);
transform:translateY(-50px);
transition:opacity .8s ease;
}
.door-frame.visible{
opacity:1;
}
/* アクセスカウンター(Opening画面内)。
door-frameやその子要素(door-wrap/opening-door/door-panel等)は
一切変更せず、#openingの中に独立した兄弟要素として追加する。
画面下端からの距離で配置しているため、扉の位置・サイズが
変わっても影響を受けない。みかんの通り道と重なってもよい
という指示のため、画面下端に寄せて配置している。
#openingはmain.js側で扉が開き切った後にdisplay:noneになる
要素なので、このカウンターもOpening演出中だけ表示され、
その後は表示されなくなる(仕様として確認済み)。
新しいz-indexは追加していない(#openingの既存のz-index:9999を
そのまま継承する) */
#opening .visitors{
position:absolute;
bottom:40px;
left:50%;
-webkit-transform:translateX(-50%);
transform:translateX(-50%);
margin-bottom:0;
text-align:center;
}
#opening .visitors-label{
color:rgba(255,255,255,.75);
}
#opening .visitors-count{
color:#fff;
}
/* 扉の器。door-frame.png内の透過穴(扉が収まる部分)と
ぴったり重なる位置・大きさに配置する。
ここにperspectiveを持たせ、蝶番(左)からの奥行きを出す。
枠(.door-frame)とは別要素なので、枠は一切動かない */
.door-wrap{
position:absolute;
left:11.39%;
top:6.47%;
right:10.76%;
bottom:2.76%;
-webkit-perspective:1100px;
perspective:1100px;
}
/* 回転する扉本体。枠(.door-frame)が現れるのと同時に、
同じ完成した姿で見える(独自のopacity初期値は持たない)。
.openで蝶番(左)を軸に、手前へ開き、90度手前で自然に
フェードアウトする。
[厚み表現] door-panelに加えてdoor-edge(木口)を子要素として
同居させるため、transform-style:preserve-3dを持たせる。
このopening-door自体にはbackface-visibilityを付けない
(子要素であるdoor-panel/door-edgeそれぞれが必要に応じて
individually持つ。親に付けると子の可視性判定に影響する
ブラウザ実装があったため) */
.opening-door{
position:absolute;
inset:0;
z-index:1;
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
will-change:transform;
-webkit-transform-origin:left center;
transform-origin:left center;
}
/* 動き出しが遅く、なめらかに減速して止まるイージング。
所要時間は5sのまま(Openingのタイムライン維持) */
.opening-door.open{
will-change:transform;
-webkit-animation:
doorOpen 5s cubic-bezier(.45,0,.15,1) forwards;
animation:
doorOpen 5s cubic-bezier(.45,0,.15,1) forwards;
}
/* 扉の正面。images/door-panel.jpg
(実写木製ドアの写真から扉部分だけを切り出し、
ノブが右に来るよう反転・銘板の文字部分だけを
木目で自然に消したもの)を使う。加工・置換はしていない。
box-shadowに、右・上・下の3辺それぞれへ「ごく細いハイライト
(木材の角が光を受けている)+その内側の暗い帯(厚みぶんの
陰)」を追加し、door-edge/door-top/door-bottomと同じ場所に
正面パネル自身にも縁取りを作ることで、回転で側面が
覗く前から「これは厚みのある一枚板」だと感じさせる */
.door-panel{
position:absolute;
inset:0;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
background-image:url("images/door-panel.jpg");
background-size:100% 100%;
box-shadow:
0 0 30px rgba(0,0,0,.4) inset,
-2px 0 0 rgba(255,232,200,.16) inset,
-16px 0 20px -10px rgba(0,0,0,.45) inset,
0 -2px 0 rgba(255,232,200,.13) inset,
0 -12px 16px -8px rgba(0,0,0,.4) inset,
0 2px 0 rgba(255,232,200,.13) inset,
0 12px 16px -8px rgba(0,0,0,.4) inset;
}
/* ドアノブ。door-panel.jpg内に写っている実物のノブ(閉じた状態で
ちょうど重なる位置・大きさに配置)の上に、独立した立体要素を
追加する。door-panelと同じ.opening-door(preserve-3d)の中に
いるためドア本体と一緒に回転するが、translateZで実際に手前へ
奥行きを持たせているため、写真のような「回転で平面が
潰れる」見え方にならない。before(付け根/台座、ドア面に
ほぼ密着)とafter(丸いノブ本体、さらに手前へ突き出す)の
2層構成。色は実際の写真のノブ部分から採取した色に合わせて
あり、閉じている間は写真のノブとほぼ同じ見た目で重なる */
.door-knob{
position:absolute;
left:92.8%;
top:50.5%;
width:8%;
aspect-ratio:1/1;
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform:translate(-50%,-50%) translateZ(.5px);
transform:translate(-50%,-50%) translateZ(.5px);
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}
.door-knob::before{
content:"";
position:absolute;
inset:-15%;
border-radius:50%;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
background:radial-gradient(
circle at 35% 30%,
#6b4a22 0%,
#43290f 55%,
#241407 100%
);
box-shadow:0 1px 2px rgba(0,0,0,.5);
}
.door-knob::after{
content:"";
position:absolute;
inset:0;
border-radius:50%;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-transform:translateZ(2px);
transform:translateZ(2px);
background:radial-gradient(
circle at 32% 26%,
#fce2a7 0%,
#c99a52 18%,
#8a5f28 40%,
#5a3a17 62%,
#331f0d 82%,
#150c05 100%
);
box-shadow:
inset -1px -2px 3px rgba(0,0,0,.5),
inset 1px 1px 2px rgba(255,240,210,.55),
0 1px 3px rgba(0,0,0,.5);
}
/* 扉の右側面(木口)。door-panelと同じ.opening-door(preserve-3d)
の中にいる、たった1つの追加要素。transform-origin:right
centerを軸にrotateY(-90deg)しておくことで、閉じている間
(親の回転0°)は完全に真横を向いて幅ゼロになり、見えない。
親が回転するにつれてこの面がカメラへ正対していき、
door-panelの右端から連続する形で厚みとして現れる。
幅は扉の見た目の大きさに対する比率で決め、正面より暗い
木材色+ごく軽い木目+影で重厚感を出す。z-indexは指定しない
(preserve-3d内でz-indexを指定すると3Dの深度ソートから
外れてしまうため) */
.door-edge{
position:absolute;
top:0;
right:0;
width:14%;
height:100%;
-webkit-transform-origin:right center;
transform-origin:right center;
-webkit-transform:rotateY(-90deg);
transform:rotateY(-90deg);
background:
repeating-linear-gradient(
to bottom,
rgba(0,0,0,0) 0px,
rgba(0,0,0,0) 5px,
rgba(0,0,0,.15) 5px,
rgba(0,0,0,.15) 6px
),
linear-gradient(
to left,
#4a3016 0%,
#35220f 60%,
#241609 100%
);
box-shadow:inset 6px 0 14px rgba(0,0,0,.55);
}
/* 扉の上端・下端の木口。door-edgeと同じ.opening-door
(preserve-3d)の中に同居する追加要素で、考え方も同じ
(回転軸(Y)ではなく上端/下端を軸にしたX軸回転)。
door-edgeで実際に見えることが確認できた手法をそのまま
上下に展開しただけで、新しい仕組みは持ち込んでいない。
door-topはtransform-origin:top centerを軸にrotateX(-90deg)、
door-bottomはtransform-origin:bottom centerを軸に
rotateX(90deg)(door-topとは逆符号)。どちらも閉じている間は
幅ゼロと同じく高さゼロの原理で見えなくなり、扉が開くにつれて
door-panelの上端・下端から連続する厚みとして現れる。
z-indexは指定しない(door-edgeと同じ理由)。
[角の不整合を修正] door-edgeの厚みはwidth:14%(扉の"幅"基準)、
door-top/bottomの厚みはheight:N%(扉の"高さ"基準)で、
基準にしている軸が違う。door-wrapの縦横比(insetを反映すると
高さ/幅 ≈ 2.14倍)を計算すると、以前のheight:8%は
door-edgeの14%幅と同じ奥行きになっておらず、右上角などで
側面同士の奥行きがズレて繋がって見えない直接の原因になって
いた。height:14%/2.14 ≈ 6.54%が同じ奥行きになる正しい値 */
.door-top,
.door-bottom{
position:absolute;
left:0;
right:0;
height:6.54%;
background-repeat:no-repeat;
box-shadow:inset 0 6px 14px rgba(0,0,0,.55);
}
.door-top{
top:0;
-webkit-transform-origin:top center;
transform-origin:top center;
-webkit-transform:rotateX(-90deg);
transform:rotateX(-90deg);
background-image:
repeating-linear-gradient(
to right,
rgba(0,0,0,0) 0px,
rgba(0,0,0,0) 5px,
rgba(0,0,0,.15) 5px,
rgba(0,0,0,.15) 6px
),
linear-gradient(
to bottom,
#4a3016 0%,
#35220f 60%,
#241609 100%
);
}
.door-bottom{
bottom:0;
-webkit-transform-origin:bottom center;
transform-origin:bottom center;
-webkit-transform:rotateX(90deg);
transform:rotateX(90deg);
background-image:
repeating-linear-gradient(
to right,
rgba(0,0,0,0) 0px,
rgba(0,0,0,0) 5px,
rgba(0,0,0,.15) 5px,
rgba(0,0,0,.15) 6px
),
linear-gradient(
to top,
#4a3016 0%,
#35220f 60%,
#241609 100%
);
}
/* 銘板の文字は写真ではなく実テキストとして重ねる。
写真側は文字のあった場所を木目で均して消してある */
.door-plate{
position:absolute;
top:22%;
left:0;
right:0;
font-family:"Inter","Noto Serif JP",sans-serif;
font-size:clamp(9px,2.6vw,11px);
font-weight:600;
letter-spacing:.3em;
color:#c9ad84;
text-align:center;
text-indent:.3em;
text-shadow:0 1px 2px rgba(0,0,0,.7);
}
@keyframes doorOpen{
0%{
transform:rotateY(0deg);
opacity:1;
}
75%{
transform:rotateY(74deg);
opacity:1;
}
100%{
transform:rotateY(96deg);
opacity:0;
}
}
/* --------------------------
Hero
-------------------------- */
.hero{
position:relative;
width:100%;
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
}
.hero-picture{
position:absolute;
inset:0;
}
.hero-image{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
transform:scale(1.08);
animation:
heroZoom 12s ease forwards;
}
.hero-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
to bottom,
rgba(0,0,0,.58),
rgba(0,0,0,.28),
rgba(0,0,0,.62)
);
z-index:1;
}
.hero-content{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:0 30px;
z-index:5;
animation:
heroFade 2s ease forwards;
}
.project{
margin-bottom:28px;
font-size:18px;
font-weight:600;
letter-spacing:.35em;
color:#fff;
opacity:0;
transform:translateY(24px);
animation:
fadeUp 1.2s .8s forwards;
}
.hero h1{
font-family:"Noto Serif JP",serif;
font-size:clamp(56px,7vw,110px);
line-height:1.4;
font-weight:500;
letter-spacing:.03em;
color:#fff;
text-align:center;
text-shadow:
0 10px 30px rgba(0,0,0,.45);
opacity:0;
transform:translateY(40px);
animation:
fadeUp 1.4s 1.2s forwards;
}
.scroll{
position:absolute;
bottom:40px;
left:50%;
transform:translateX(-50%);
opacity:0;
animation:
fadeUp 1.4s 2.2s forwards;
}
.scroll span{
display:block;
width:1px;
height:60px;
margin:15px auto;
background:rgba(255,255,255,.75);
animation:
scrollLine 2.4s infinite;
}
.scroll p{
margin-top:14px;
font-size:14px;
letter-spacing:.2em;
color:#fff;
text-shadow:
0 4px 14px rgba(0,0,0,.45);
}
/* --------------------------
ABOUT
-------------------------- */
.about{
background:#fff;
color:#111;
padding:140px 0;
}
/* 章の静かな見出し。企業サイトの見出しではなく、
映像作品の章題のように控えめに扱う */
.about h2,
.story h2,
.concept h2,
.gallery h2,
.event h2,
.sponsor h2,
.contact h2,
.goal h2{
font-size:15px;
font-weight:600;
letter-spacing:.5em;
color:#999;
margin-bottom:40px;
}
/* CONCEPT & GOALの見出しだけは、薄いグレーではなく黒で
はっきり見せる(他セクションの見出し色は上のルールのまま) */
.goal h2{
color:#111;
}
.about-bg{
width:100%;
height:55vh;
margin-bottom:100px;
background-image:url("images/mikan_hill1.jpg");
background-size:cover;
background-position:center;
filter:brightness(.75) saturate(.6);
transform:scale(1.05);
transition:
filter 3s ease,
transform 5s ease;
}
.about-bg.show{
filter:brightness(1) saturate(1);
transform:scale(1);
}
/* --------------------------
Story
-------------------------- */
.story{
padding:220px 0 140px;
}
/* --------------------------
Concept
-------------------------- */
.concept{
padding:180px 0;
}
/* 柱祭りの写真も縦長のため、横長の帯にすると
人物のアップになってしまう。花火と同じく、
縦横比(2:3)のまま額装し、柱・参加者・観客・
町並みが一枚で伝わるようにする */
.concept-bg{
width:min(94vw,calc(78vh * 2 / 3));
aspect-ratio:2/3;
margin:0 auto 100px;
background-image:url("images/festival1.jpg");
background-size:cover;
background-position:center;
box-shadow:0 30px 80px rgba(0,0,0,.35);
filter:brightness(.55) saturate(.8);
transform:scale(1.03);
transition:
filter 3s ease,
transform 5s ease;
}
.concept-bg.show{
filter:brightness(.88) saturate(1.05);
transform:scale(1);
}
/* --------------------------
一文演出
-------------------------- */
.line{
max-width:700px;
margin:0 auto 36px;
text-align:center;
font-size:1.3rem;
line-height:2;
letter-spacing:.05em;
color:#333;
opacity:0;
transform:translateY(30px);
transition:
opacity 1s ease,
transform 1s ease;
}
.line.show{
opacity:1;
transform:translateY(0);
}
.line-strong{
font-size:1.8rem;
font-weight:600;
margin-top:60px;
}
/* スマホ幅専用の改行。
はdisplay:noneで非表示にすることは
全ブラウザで確実だが、そこからdisplay:inline/blockへ戻して
「改行を復活させる」指定はSafari(iPhone実機)では効かない
ことがある。そのため既定(このルール)では一切display指定を
持たせず、ブラウザ本来の
の挙動(常に改行)に任せる。
PC側だけを@media(min-width:769px)でdisplay:noneにして
打ち消す(goal-brと逆の対象幅で、同じ「見せたい側には
displayを指定しない」考え方) */
@media (min-width:769px){
.mobile-br{
display:none;
}
}
/* GALLERY/EVENT/CONTACTの「近日公開。」に添える控えめな一言 */
.coming-soon{
display:block;
margin-top:10px;
font-size:.7rem;
letter-spacing:.35em;
color:#aaa;
}
/* --------------------------
STORYクライマックス
-------------------------- */
.climax-bg{
width:100%;
height:75vh;
margin-top:100px;
background-image:url("images/karajishi3.jpg");
background-size:cover;
background-position:center 35%;
filter:brightness(.4) saturate(.75);
transition:filter 2.5s ease;
}
.climax-bg.show{
filter:brightness(.55) sepia(.25) hue-rotate(-10deg) saturate(1.1);
}
.climax-pre{
text-align:center;
font-size:clamp(1.6rem,4vw,2.6rem);
padding:120px 20px 0;
opacity:0;
transform:translateY(30px);
transition:
opacity 1.2s ease,
transform 1.2s ease;
}
.climax-pre.show{
opacity:1;
transform:translateY(0);
}
.climax{
width:100%;
text-align:center;
font-family:"Noto Serif JP",serif;
font-size:clamp(3.4rem,10vw,8rem);
font-weight:700;
line-height:1.35;
letter-spacing:.02em;
padding:60px 20px 0;
opacity:0;
transform-origin:50% 50%;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
transform:
translateY(30px)
scale(.92);
}
.climax.show{
animation:
climaxReveal 6s
cubic-bezier(.22,.61,.36,1)
forwards;
}
/* CONCEPT内(containerの中、最大900px)で使う最後のコピー。
.climaxはvwで100vwを想定した数値のため、
900px幅のcontainer内で使うと画面幅次第で
意図しない折り返しが起きる。
そのため専用のclampを持つ別クラスとして分離する */
/* サイト全体の中で最も強いメッセージとして扱う。
他の大見出し(.closing 最大4.2rem)より明確に大きくしつつ、
.climax(演出専用、最大8rem)ほど画面を圧迫しない範囲に留める */
.finale{
width:100%;
text-align:center;
font-family:"Noto Serif JP",serif;
color:#111;
font-size:clamp(2.6rem,7vw,5.2rem);
font-weight:700;
line-height:1.5;
letter-spacing:.02em;
margin-top:110px;
opacity:0;
transform-origin:50% 50%;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
transform:
translateY(30px)
scale(.94);
}
.finale.show{
animation:
climaxReveal 6s
cubic-bezier(.22,.61,.36,1)
forwards;
}
/* 花火は縦長写真のため、横長の帯にすると港や町が
切れてしまう。写真の縦横比(2:3)を保ったまま、
画面の高さいっぱいに大きく見せることで、
「写真を見る」のではなく「その場に立っている」
没入感をつくる */
.silence{
width:min(94vw,calc(88vh * 2 / 3));
aspect-ratio:2/3;
margin:120px auto 0;
background-image:url("images/fireworks3.jpg");
background-size:cover;
background-position:center;
box-shadow:0 40px 100px rgba(0,0,0,.4);
filter:brightness(.6) sepia(.1);
transform:scale(1.03);
transition:
filter 4s ease,
transform 6s ease;
}
.silence.show{
filter:brightness(.92) saturate(1.1) sepia(.02);
transform:scale(1);
}
/* .closingは要素のため、.concept h2/.goal h2で
color:#999を指定している見出し共通ルール(このファイルの
前方にある)と詳細度が衝突する。同じ詳細度(クラス1つ+要素1つ)
のh2.closingにして、ソース順で後にあるこちらを優先させる */
h2.closing{
margin-top:140px;
text-align:center;
font-family:"Noto Serif JP",serif;
/* 本文よりも少し目立つ、サイトの重要メッセージとしての
黒系の文字色。以前はcolor:#999(見出し共通ルール)が
優先されて灰色に見えていたため、黒系(#111)へ統一する */
color:#111;
font-size:clamp(2.3rem,5.2vw,4.2rem);
line-height:1.8;
letter-spacing:.08em;
opacity:0;
transform:translateY(40px);
transition:
opacity 1.4s ease,
transform 1.4s ease;
}
.closing.show{
opacity:1;
transform:translateY(0);
}
/* --------------------------
Atmosphere
写真だけで語る間奏セクション。
見出し・説明文は持たない。
CSSは配置と余白、演出の質感だけを担当する。
-------------------------- */
.atmosphere{
position:relative;
overflow:hidden;
background:#fff;
}
.atmosphere-sea{
background:#0c1013;
padding-bottom:160px;
}
.atmosphere-life{
background:#faf9f5;
padding:0 0 160px;
}
.atmosphere-epilogue{
background:#0c0c0b;
padding:0;
}
/* バトンの写真は文字を含む一枚なので、他のフルブリード
写真(cover)とは違い、切れずに全体が見えるcontainを使う。
.atmosphere-full .reveal-img(cover)より後ろで定義される
同名詞数のルールに上書きされないよう、reveal-imgも
セレクタに含めて詳細度を上げている */
.atmosphere-full .reveal-img.epilogue-baton{
object-fit:contain;
background:#0c0c0b;
}
/* フルブリード写真 + 視差スクロール */
.atmosphere-full{
position:relative;
width:100%;
height:100vh;
overflow:hidden;
}
.parallax-layer{
position:absolute;
inset:-10% 0;
height:120%;
will-change:transform;
}
.atmosphere-full .reveal-img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
transform:scale(1.12);
transition:
opacity 2s ease,
transform 2.6s cubic-bezier(.22,.61,.36,1);
}
.atmosphere-full .reveal-img.show{
transform:scale(1);
}
/* 横スクロールの帯 */
.atmosphere-scroll{
display:flex;
gap:18px;
padding:120px 6vw 0;
overflow-x:auto;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.atmosphere-scroll::-webkit-scrollbar{
display:none;
}
.atmosphere-scroll img{
flex:0 0 auto;
height:clamp(280px,50vh,520px);
width:auto;
max-width:80vw;
object-fit:cover;
scroll-snap-align:center;
box-shadow:0 20px 50px rgba(0,0,0,.18);
}
.atmosphere-scroll .atmosphere-tall{
height:clamp(320px,58vh,560px);
}
/* 横スクロール案内(▶︎)。.atmosphere-scrollの右端に重ねて置き、
右方向へまだスクロールできる間だけmain.js側で.visibleを
付け外しする。PCでは常に非表示(スマホ幅を優先)。
pointer-events:noneでタップ操作を一切妨げない */
.scroll-hint-wrap{
position:relative;
}
.scroll-hint{
display:none;
position:absolute;
top:50%;
right:14px;
width:30px;
height:30px;
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
align-items:center;
justify-content:center;
border-radius:50%;
background:rgba(0,0,0,.28);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
color:rgba(255,255,255,.85);
font-size:12px;
pointer-events:none;
opacity:0;
transition:opacity .3s ease;
z-index:2;
}
.scroll-hint.visible{
opacity:1;
}
@media (max-width:768px){
.scroll-hint{
display:flex;
}
}
/* 2枚並びの帯(みかん畑・くらし) */
.atmosphere-pair{
display:flex;
gap:18px;
width:min(1300px,92vw);
margin:120px auto 0;
}
.atmosphere-pair img{
flex:1 1 50%;
width:100%;
height:clamp(220px,34vw,420px);
object-fit:cover;
}
/* 重なりながら切り替わる写真(ちゃんぽんと、暮らしの一瞬) */
.atmosphere-stack{
position:relative;
width:min(880px,92vw);
height:clamp(360px,50vw,600px);
margin:150px auto 0;
}
.stack-item{
position:absolute;
overflow:hidden;
box-shadow:0 26px 60px rgba(0,0,0,.22);
}
.stack-item img{
width:100%;
height:100%;
object-fit:cover;
transform:none;
}
.stack-item .reveal-img.show{
transform:none;
}
.stack-main{
left:0;
top:8%;
width:60%;
height:76%;
z-index:1;
transform:rotate(-2deg);
}
.stack-a{
right:0;
top:0;
width:42%;
height:44%;
z-index:2;
transform:rotate(3deg);
}
.stack-b{
right:2%;
bottom:2%;
width:36%;
height:40%;
z-index:3;
transform:rotate(-4deg);
}
.stack-c{
left:44%;
bottom:-4%;
width:32%;
height:36%;
z-index:4;
transform:rotate(5deg);
}
/* 夜の商店街と、子どもたちの一枚 */
.atmosphere-duo{
display:flex;
gap:18px;
width:min(1200px,92vw);
margin:150px auto 0;
}
.atmosphere-duo img:first-child{
flex:3 1 0;
height:clamp(280px,40vw,480px);
}
.atmosphere-duo img:last-child{
flex:2 1 0;
height:clamp(280px,40vw,480px);
/* 牛鬼の写真は横長で、この枠の縦横比とは合わないため
object-fit:coverのまま共通指定を使うと大きく切れてしまう。
この1枚だけcontainにして全体が収まるようにし、
左側の写真(:first-child)の見え方には影響させない */
object-fit:contain;
background:#f8f8f6;
}
.atmosphere-duo img{
width:100%;
object-fit:cover;
}
/* 余韻の1枚 */
.atmosphere-contained{
width:min(760px,88vw);
margin:0 auto;
box-shadow:0 30px 80px rgba(0,0,0,.2);
overflow:hidden;
}
.atmosphere-contained img{
width:100%;
height:auto;
display:block;
}
/* 写真の共通フェードイン(ゆっくり + 軽いズーム) */
.reveal-img{
opacity:0;
transform:translateY(30px) scale(1.05);
transition:
opacity 1.6s ease,
transform 1.8s cubic-bezier(.22,.61,.36,1);
will-change:opacity,transform;
}
.reveal-img.show{
opacity:1;
transform:translateY(0) scale(1);
}
/* 帯の中の写真は少しずつ時差で現れる */
.atmosphere-scroll .reveal-img:nth-child(2){ transition-delay:.12s; }
.atmosphere-scroll .reveal-img:nth-child(3){ transition-delay:.24s; }
.atmosphere-scroll .reveal-img:nth-child(4){ transition-delay:.36s; }
.atmosphere-stack .reveal-img:nth-child(1){ transition-delay:0s; }
.stack-a .reveal-img{ transition-delay:.15s; }
.stack-b .reveal-img{ transition-delay:.3s; }
.stack-c .reveal-img{ transition-delay:.45s; }
/* --------------------------
Gallery
-------------------------- */
.gallery{
min-height:100vh;
padding:140px 0;
background:#fafafa;
}
/* --------------------------
Event
-------------------------- */
.event{
min-height:100vh;
padding:140px 0;
background:#ffffff;
}
.event-content{
margin-top:70px;
max-width:720px;
}
.event-lead{
font-size:clamp(20px, 3vw, 30px);
line-height:2;
letter-spacing:.08em;
margin:0 0 70px;
}
.event-info{
border-top:1px solid #ddd;
}
.event-info p{
display:flex;
align-items:flex-start;
gap:50px;
padding:24px 0;
margin:0;
border-bottom:1px solid #ddd;
font-size:16px;
line-height:1.8;
letter-spacing:.08em;
}
.event-info span{
width:80px;
flex-shrink:0;
font-size:11px;
letter-spacing:.2em;
color:#888;
}
.event-coming{
margin-top:70px;
font-size:11px;
letter-spacing:.35em;
color:#aaa;
}
@media (max-width:768px){
.event-content{
margin-top:50px;
}
.event-lead{
font-size:20px;
line-height:2;
margin-bottom:50px;
}
.event-info p{
gap:25px;
font-size:14px;
}
.event-info span{
width:65px;
}
}
/* --------------------------
Sponsor
-------------------------- */
.sponsor{
padding:140px 0;
background:#fafafa;
}
/* 見出し・紹介文の下に置くロゴの並び。auto-fitのグリッドにして
おくことで、スポンサーが1社でも何社に増えても、企業広告の
バナー列ではなく余白を活かした均等な並びのまま自然に増える。
1社も無い間はこのgrid自体が空のまま高さを持たず、
見出しと一文だけの控えめな状態で表示される */
.sponsor-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:50px 40px;
max-width:900px;
margin:70px auto 0;
}
/* ロゴ+社名を1枚のリンクにまとめる。ロゴを目立たせすぎないよう
淡色(grayscale)を基本にし、ホバー/タップ時だけ色がつく
控えめな演出にする(企業広告っぽくなりすぎるのを避けるため) */
.sponsor-item{
display:flex;
flex-direction:column;
align-items:center;
gap:14px;
text-decoration:none;
-webkit-filter:grayscale(1);
filter:grayscale(1);
opacity:.72;
transition:
opacity .3s ease,
filter .3s ease;
}
.sponsor-item:hover,
.sponsor-item:focus-visible{
-webkit-filter:grayscale(0);
filter:grayscale(0);
opacity:1;
}
.sponsor-item img{
max-width:140px;
max-height:64px;
width:auto;
height:auto;
object-fit:contain;
}
.sponsor-item span{
font-size:12px;
letter-spacing:.1em;
color:#666;
text-align:center;
}
/* --------------------------
Contact
-------------------------- */
.contact{
min-height:60vh;
padding:140px 0;
background:#f5f5f3;
}
.contact-content{
margin-top:70px;
max-width:720px;
}
.contact-item{
display:flex;
align-items:flex-start;
gap:72px;
padding:24px 0;
border-bottom:1px solid #ddd;
}
.contact-item:first-child{
border-top:1px solid #ddd;
}
.contact-item span{
width:100px;
flex-shrink:0;
font-size:11px;
letter-spacing:.2em;
color:#888;
}
.contact-item p{
margin:0;
font-size:16px;
line-height:1.8;
letter-spacing:.08em;
}
.contact-coming{
margin-top:70px;
font-size:11px;
letter-spacing:.35em;
color:#aaa;
}
@media (max-width:768px){
.contact-content{
margin-top:50px;
}
.contact-item{
gap:40px;
}
.contact-item span{
width:80px;
}
.contact-item p{
font-size:14px;
}
}
/* --------------------------
CONCEPT & GOAL
-------------------------- */
.goal{
padding:160px 0 180px;
background:#fff;
}
/* 「40歳になったら、八幡浜に帰る。」がPC幅で「帰る。」だけ
2行目に孤立していた対策。文字サイズは変えず、この見出しの
入れ物(.container)だけをGOALセクション限定で広げることで、
PCで極力1行に収まりやすくする(他セクションの.container、
および.line/.line-strong(max-width:700px)には影響しない) */
.goal .container{
width:min(1180px,94vw);
}
/* 最後に強く見せたい一文。既存の.closing(CONCEPTセクションで
使用)をそのまま再利用する。新しいアニメーションを作らず、
既存のフェードイン(scroll反映済みのIntersectionObserverが
.closingを汎用的に監視しているため、この2つ目の.closingも
自動的に同じ演出で現れる)にそのまま乗せている */
.goal .closing{
margin-top:100px;
margin-bottom:100px;
}
@media (max-width:768px){
.goal{
padding:90px 0 100px;
}
.goal .closing{
margin-top:60px;
margin-bottom:60px;
}
}
/* --------------------------
Footer
-------------------------- */
footer{
padding:80px 0;
text-align:center;
font-size:.9rem;
color:#888;
}
/* アクセスカウンター。取得に成功した時だけ.readyが付き、
静かに現れる。取得できない間は存在ごと隠す */
.visitors{
display:none;
margin-bottom:36px;
}
.visitors.ready{
display:block;
}
.visitors-label{
font-size:11px;
font-weight:600;
letter-spacing:.5em;
color:#999;
margin-bottom:10px;
}
.visitors-count{
font-family:"Noto Serif JP",serif;
font-size:1.3rem;
letter-spacing:.12em;
color:#333;
}
.visitors-count .digit{
display:inline-block;
width:1ch;
font-variant-numeric:tabular-nums;
}
/* 「8」に関係する数字になった瞬間だけ現れる、八幡浜のみかん。
通常25個/88関連50個、かつ1〜3回のランダムなバウンド・
影の連動が必要になったため、固定の@keyframesではなく
main.js側のrequestAnimationFrameで毎フレーム位置を計算する。
ここでは入れ物(.mikan-roll)・影(.mikan-shadow)・
本体(.mikan-sprite)の見た目(静的なスタイル)だけを持つ */
.mikan-roll{
position:fixed;
width:24px;
height:24px;
/* Opening画面(#opening, z-index:9999)より手前に出す。
扉が開き切る前(#openingがまだdisplay:noneになっていない
状態)にみかんが出現しても、黒幕の下に隠れて見えなくなって
いたための調整。#opening自体・扉のCSSには一切触れていない */
z-index:10001;
pointer-events:none;
}
/* 接地影。楕円形で、みかんの真下(コンテナ下端)に置く。
高さ・不透明度はJS側で毎フレーム、みかんの跳ねの高さに
連動して書き換える(地面に近いほど濃く・大きく、
跳ねが高いほど薄く・小さく) */
.mikan-shadow{
position:absolute;
left:1px;
bottom:-3px;
width:22px;
height:7px;
border-radius:50%;
background:#8a8a8a;
opacity:.35;
}
/* みかん本体。位置・回転・着地の一瞬だけの沈み込み(スカッシュ)を
JS側でtransformとして直接書き込む */
.mikan-sprite{
position:absolute;
inset:0;
}
/* --------------------------
Scroll Animation
-------------------------- */
section{
opacity:0;
transform:translateY(60px);
transition:
opacity 1.2s ease,
transform 1.2s cubic-bezier(.22,.61,.36,1);
will-change:
opacity,
transform;
}
section.show{
opacity:1;
transform:translateY(0);
}
footer{
opacity:0;
transform:translateY(60px);
transition:
opacity 1.2s ease,
transform 1.2s cubic-bezier(.22,.61,.36,1);
}
footer.show{
opacity:1;
transform:translateY(0);
}
/* --------------------------
Animation
-------------------------- */
@keyframes fadeUp{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:translateY(0);
}
}
@keyframes heroFade{
from{
opacity:0;
}
to{
opacity:1;
}
}
@keyframes heroZoom{
from{
transform:scale(1.08);
}
to{
transform:scale(1);
}
}
@keyframes scrollLine{
0%{
transform:scaleY(0);
transform-origin:top;
}
50%{
transform:scaleY(1);
transform-origin:top;
}
51%{
transform-origin:bottom;
}
100%{
transform:scaleY(0);
transform-origin:bottom;
}
}
@keyframes climaxReveal{
0%{
opacity:0;
transform:
translateY(30px)
scale(.92);
}
40%{
opacity:1;
transform:
translateY(0)
scale(1);
}
100%{
opacity:1;
transform:
translateY(0)
scale(1.03);
}
}
/* --------------------------
Responsive
-------------------------- */
@media (max-width:768px){
.hero h1{
font-size:2.6rem;
}
.about,
.story,
.concept,
.gallery,
.event,
.sponsor,
.contact{
padding:90px 0;
}
.about h2,
.story h2,
.concept h2,
.gallery h2,
.event h2,
.sponsor h2,
.contact h2,
.goal h2{
font-size:13px;
letter-spacing:.4em;
}
.line{
font-size:1rem;
line-height:1.9;
}
/* CONCEPT & GOAL本文のうち、PC幅向けに手動で入れている
途中改行(.goal-br)は、スマホ幅では文章の途中半端な位置で
折り返しが発生し、1〜2文字だけが次の行に落ちる原因になる。
文章自体はそのまま、改行位置だけをスマホでは無効化し、
画面幅に応じて自然に折り返させる(PC表示は無変更) */
.goal-br{
display:none;
}
.line-strong{
font-size:1.4rem;
}
.about-bg{
height:36vh;
margin-bottom:60px;
}
.concept-bg{
width:92vw;
margin:0 auto 60px;
}
.climax-bg{
height:55vh;
}
.climax-pre{
padding-top:80px;
}
.climax{
padding-top:40px;
/* 「面白くしよう。」がスマホ幅で「面白くしよ／う。」の
ように途中で割れないよう、基準サイズ(clamp下限3.4rem)
だけをスマホ向けに下げる。PC側のclampには触れていない */
font-size:clamp(2.1rem,11vw,2.75rem);
}
.silence{
width:92vw;
margin:80px auto 0;
}
.closing{
margin-top:90px;
}
.menu{
width:100%;
right:-100%;
}
}