@charset "utf-8";
/* ------ Settings ------ */
:root {
--base-color: 232 38% 49%; /* 紺桔梗 */
--base-pale-color: 232 38% 65%;
--base-light-color: 232 38% 46%;
--base-dark-color: 232 38% 36%;
--seigaiha: url(/img/seigaiha-event.webp); /* event */
}
/* -------------------- ★ Event ★ -------------------- */
#event h1{
font-size: clamp(22px, calc(3.0952381vw + 10.857143px), 48px);
color: #000a02; /* 墨 */
text-align: center;
}
#event h1 span{
margin: 0 0.1em;
font-size: 0.55em;
}
/* ------ tab上に留める ------ */
#event h1, #tab{
position: sticky;
top: 0;
background: #fff;
z-index: 10;
}
/* ------ tab（タブ切替） ------ */
#tab{
display: flex;
top: clamp(32px, calc(32px + ((100vw - 360px) / 407) * 16), 48px);
}
#tab a{
flex: 1; /* 均等に分割 */
box-sizing: border-box;
margin: 10px 0 clamp(10px, calc(3.012vw - 0.8432px), 30px);
font-size: clamp(14px, 2.108vw + 6.41px, 28px);
color: #8c867b; /* 利休鼠 */
text-align: center;
text-decoration: none;
border-bottom: clamp(8px, calc(0.602vw + 5.8328px), 12px) solid #f3f3f2; /* 白練 */
box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 0.1);
}
#tab a:not(:last-child){
margin-right: 3px; /* 最後以外のリンクに右余白をつける */
}
#tab a:first-of-type:hover, #tab a:first-of-type.active{
color: #ea930a; /* 琥珀 */
font-weight: 700;
border-color: #ea930a; /* 琥珀 */
}
#tab a:nth-of-type(2):hover, #tab a:nth-of-type(2).active{
color: #318baf; /* 千草 */
font-weight: 700;
border-color: #318baf; /* 千草 */
}
#tab a:last-of-type:hover, #tab a:last-of-type.active{
color: #3eb370; /* 青/緑 */
font-weight: 700;
border-color: #3eb370; /* 青/緑 */
}
/* ------ pagenation（月の表示） ------ */
.pagenation{
display: flex;
flex-wrap: nowrap;
justify-content: center;
margin: 0 auto;
max-width: 100%;
list-style: none;
}
.pagenation li{
flex: 1 1 auto; /* 幅を均等に分配 */
display: flex;
min-width: 0; /* はみ出し防止 */
height: 50px; /* 高さを固定（お好みで調整） */
align-items: center;
justify-content: center;
border-top: 1px solid #8c867b; /* 利休鼠 */
border-bottom: 1px solid #8c867b; /* 利休鼠 */
border-left: 1px solid #8c867b; /* 利休鼠 */
background: #f3f3f2; /* 白練 */
transition: background 0.4s;
}
.pagenation li:first-child{
border-radius: 10px 0 0 10px;
}
.pagenation li:last-child{
border-right: 1px solid #8c867b; /* 利休鼠 */
border-radius: 0 10px 10px 0;
}
.pagenation li:hover{
background: hsl(347 100% 45% / 20%); /* 唐紅 */
transition: filter 0.3s ease;
}
.pagenation li a:hover{
font-weight: 700;
}
.pagenation li a{
display: flex;
align-items: center; /* 縦方向の中央揃え */
justify-content: center; /* 横方向の中央揃え */
width: 100%; /* 親の幅に合わせる */
height: 100%; /* 親の高さに合わせる */
padding: 0;
box-sizing: border-box;
writing-mode: vertical-rl; /* 縦書き */
font-size: 0.8rem;
text-decoration: none;
color: #8c867b; /* 利休鼠 */
}
.pagenation li.current a{
font-weight: 700;
color: #f3f3f2; /* 白練 */
}
/* ------ 静岡中部・富士山麓・伊豆エリア ------ */
#event article{
scroll-margin-top: 80px; /* ヘッダーの高さ分だけ余白を確保 */
}
#event h2{
margin: 33px 0 15px 0;
font-size: 33px;
line-height: 33px;
color: #ea930a; /* 琥珀 */
text-align: center;
border-bottom: 6px solid #ea930a; /* 琥珀 */
}
#fuji-region h2{
color: #318baf; /* 千草 */
border-color: #318baf; /* 千草 */
}
#izu-region h2{
color: #3eb370; /* 青・緑 */
border-color: #3eb370; /* 青・緑 */
}
#shizuoka-central h2::before{
margin-right: 7px;
vertical-align: middle;
content: url('/event/img/shizuoka-region.webp');
}
#fuji-region h2::before{
margin-right: 7px;
vertical-align: middle;
content: url('/event/img/fuji-region.webp');
}
#izu-region h2::before{
margin-right: 7px;
vertical-align: middle;
content: url('/event/img/izu-region.webp');
}
.event-grid{
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-start; /* 左寄せで端数に対応 */
overflow-x: hidden;
}
.event-shizuoka, .event-fuji, .event-izu{
flex: 1 1 calc(100% - 10px); /* 1列 */
display: flex;
align-items: center; /* 縦方向の揃えを中央に */
gap: 8px;
position: relative;
min-height: 105px;
margin: 0;
padding: 4px 8px;
font-size: 14.5px;
font-weight: 500;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.event-shizuoka img, .event-fuji img, .event-izu img{
width: 25%;
height: auto;
border-radius: 8px;
}
.event-description{
flex: 1; /* テキスト部分を広げる */
min-width: 0; /* ←これが超重要！ */
}
.event-description h3{
font-size: 19px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;  
line-height: 1.6;
border-bottom: 4px solid #ea930a; /* 琥珀 */
}
.event-fuji h3{
border-bottom-color: #318baf; /* 千草 */
}
.event-izu h3{
border-bottom-color: #3eb370; /* 青・緑 */
}
.event-description h3 a{
text-decoration:none;
}
.event-description p:first-of-type{
display: block;
margin-top: 7px;
max-height: 2.75em; /* 2行分の高さに制限 */
font-size: 16px;
line-height: 1.4;
}
.event-description span{
display: inline-block;
width: 70px;
margin-right: 5px;
padding: 2px 0;
font-size: 14.5px;
font-weight: 700;
text-align: center;
color: #fff;
background-color: #ea930a; /* 琥珀 */
border-radius: 4px;
}
.event-fuji span{
background-color: #318baf; /* 千草 */
}
.event-izu span{
background-color: #3eb370; /* 青・緑 */
}
.event-description p:nth-of-type(2){
display: inline-block;
width: calc(98.3% - 40px); /* 左側の幅 */
font-size: 18px;
font-weight: 700;
vertical-align: middle;
}
.event-description p:last-of-type{
display: inline-block;
width: 40px; /* ★の幅 */
margin-left: auto;
font-weight: bold;
text-align: right;
vertical-align: middle;
}
.event-shizuoka p:nth-of-type(2), .event-shizuoka p:last-of-type{
color: #ea930a; /* 琥珀 */
}
.event-fuji p:nth-of-type(2), .event-fuji p:last-of-type{
color: #318baf; /* 千草 */
}
.event-izu p:nth-of-type(2), .event-izu p:last-of-type{
color: #3eb370; /* 青・緑 */
}
.event-description small{
font-size: 12px;
}
.event-description small::before{
content:"（"
}
.event-description small::after{
content:"）"
}
/* 過去 */
.past{
color: #aaa;
background-color: #f3f3f2; /* 白練 */
}
.past a{
color: hsl(232 84% 51% / 65%);
}
.past time{
color: #aaa;
font-weight: 400;
}
.past a:hover{
color: hsl(347 100% 45% / 60%); /* 唐紅 */
}
.event-shizuoka.past span{
background-color: hsl(36 91% 47% / 50%); /* 琥珀 */
}
.event-fuji.past span{
background-color: hsl(196 56% 43% / 50%); /* 千草 */
}
.event-izu.past span{
background-color: hsl(145 48% 47% / 50%); /* 青・緑 */
}
/* 未来 */
.future.event-shizuoka{
background-color: hsl(36 91% 47% / 13%); /* 琥珀 */
}
.future.event-fuji{
background-color: hsl(196 56% 43% / 13%); /* 千草 */
}
.future.event-izu{
background-color: hsl(145 48% 47% / 13%); /* 青・緑 */
}
/* ------ notice ------ */
.notice{
margin: 30px 0;
}
.notice p{
margin: 0 0 0.7em 0;
line-height: 1.6;
font-size: 17px;
}
.notice p::before{
margin-right: 2px;
content:"※"
}
/* -------------------- ★ 広告 ★ -------------------- */
#ad1, #ad2{
margin-top: 30px;
}
#ad5{
margin: 20px auto 35px auto;
}
/* -------------------- ★ 歳時記 ★ -------------------- */
.seasonal-events{
margin: 30px auto 0 auto;
padding: 30px 0;
background: hsl(232 38% 49% / 7%); /* 紺桔梗 7％ */
}
.seasonal-events h2{
padding-bottom: 10px;
font-size: 33px;
color: #4d5aaf;	 /* 紺桔梗 */
line-height: 33px;
border-bottom: 6px solid #4d5aaf;	 /* 紺桔梗 */
}
.seasonal-events h2 span{
margin-left: 0.5em;
font-size: 0.55em;
}
.seasonal-events h2::before{
margin-right: 7px;
vertical-align: top;
font-family: 'icomoon';
content: "\e914";
font-size: 44px;
font-weight: 500;
}
.seasonal-events h3{
margin-top: 18px;
font-size: clamp(19px, 0.98vw + 15.47px, 23px);
}
.seasonal-events h3::before{
margin-right: 5px;
font-family: 'icomoon';
content: "\e916";
font-size: clamp(19px, 0.245vw + 18.12px, 20px);
font-weight: 500;
}
.seasonal-events p{
margin-left: 26px;
font-size: clamp(16px, 0.49vw + 14.24px, 18px);
}
.seasonal-events h3 span{
margin-left: -0.4em;
font-size: 0.75em;
}
.season24{
color: #4d5aaf; /* 紺桔梗 */
}
.sekku5{
color: #ea0032; /* 唐紅 */
}
/* -------------------- ★ 花暦Btn ★ -------------------- */
#flowerBtn{
position: fixed;
bottom: calc( 17.8% + 58px );
right: 0;
padding: 7px 12px 6px 20px;
font-size: 13px;
cursor: pointer;
background-color: hsl(356, 85%, 76%);
background: linear-gradient(to bottom, hsl(356, 85%, 76%), hsl(356, 85%, 66%));
color: #f3f3f2;
border: none;
border-radius: 30px 0 0 30px;
transition: background-color 0.3s ease;
text-align: center;
text-decoration: none;
line-height: 1;
z-index: 90;
}
#flowerBtn .icon{
display: block;
margin-bottom: 5px;
font-family: "icomoon";
font-size: 19px;
}
#flowerBtn:hover {
background: linear-gradient(to bottom, hsl(356, 85%, 66%), hsl(356, 85%, 56%));
}
/* -------------------- ★★★★★ 768 ★★★★★ -------------------- */
@media (min-width: 768px) {
/* -------------------- ★ Event ★ -------------------- */
/* ------ tab（タブ切替） ------ */
#tab{
top: max(5px, min(14px, calc(14px - ((100vw - 768px) / 256) * 9)));
}
/* ------ pagenation（月の表示） ------ */
.pagenation li{
height: 70px; /* 高さを固定 */
}
.pagenation li a{
font-size: 1rem;
}
/* ------ 静岡中部・富士山麓・伊豆エリア ------ */
#event h2{
margin: 60px 0 15px 0;
font-size: 40px;
line-height: 40px;
text-align: left;
}
.event-shizuoka, .event-fuji, .event-izu {
flex: 1 1 calc(50% - 22px);
}
.event-grid > div:last-child {
max-width: calc(50% - 22px); /* 最後のカードが暴走しないように制限 */
}
/* -------------------- ★ 広告 ★ -------------------- */
#ad1, #ad2{
margin-top: 60px;
}
/* -------------------- ★ 歳時記 ★ -------------------- */
.seasonal-events h2{
margin-bottom: 15px;
font-size: 40px;
line-height: 40px;
}
/* -------------------- ★ 花暦Btn ★ -------------------- */
#flowerBtn{
bottom: calc( 23% + 79px );
padding: 11px 15px 7px 27px;
font-size: 15px;
border-radius: 50px 0 0 50px;
line-height: 1.17;
}
#flowerBtn .icon{
font-size: 24px;
}
}
/* -------------------- ★★★★★ 1024 ★★★★★ -------------------- */
@media (min-width: 1024px) {
/* -------------------- ★ 広告 ★ -------------------- */
#ad1, #ad2{
margin: 90px 0;
}
/* -------------------- ★ 歳時記 ★ -------------------- */
.seasonal-events{
margin: 60px auto 0 auto;
padding: 60px 0;
}
}
/* -------------------- ★★★★★ 1200 ★★★★★ -------------------- */
@media (min-width: 1200px) {
/* -------------------- ★ Event ★ -------------------- */
/* ------ 静岡中部・富士山麓・伊豆エリア ------ */
.event-shizuoka, .event-fuji, .event-izu {
flex: 0 0 calc(33.3333% - 24px); /* 固定幅にして均等割を防ぐ */
max-width: calc(33.3333% - 24px);
}
.event-grid > div:last-child {
max-width: calc(33.3333% - 24px);
}
}