@charset "utf-8";
/* ------ Settings ------ */
:root {
--base-color: 356 85% 76%; /* 紅梅 */
--base-pale-color: 356 85% 84%;
--base-light-color: 356 85% 68%;
--base-dark-color: 356 85% 58%;
--seigaiha: url(/img/seigaiha-flower.webp); /* flower */
}
/* -------------------- ★ flower ★ -------------------- */
#flower h1{
font-size: clamp(22px, calc(3.0952381vw + 10.857143px), 48px);
color: #000a02; /* 墨 */
text-align: center;
}
#flower h1 span{
margin: 0 0.1em;
font-size: 0.55em;
}
/* ------ tab上に留める ------ */
#flower 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; /* 白練 */
}
/* ------ 静岡中部・富士山麓・伊豆エリア ------ */
#flower article{
scroll-margin-top: 80px; /* ヘッダーの高さ分だけ余白を確保 */
}
#flower 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('/flower/img/shizuoka-region.webp');
}
#fuji-region h2::before{
margin-right: 7px;
vertical-align: middle;
content: url('/flower/img/fuji-region.webp');
}
#izu-region h2::before{
margin-right: 7px;
vertical-align: middle;
content: url('/flower/img/izu-region.webp');
}
.flower-grid{
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-start; /* 左寄せで端数に対応 */
overflow-x: hidden;
}
.flower-shizuoka, .flower-fuji, .flower-izu{
flex: 1 1 calc(100% - 10px); /* 1列 */
display: flex;
align-items: center; /* 縦方向の揃えを中央に */
gap: 8px;
position: relative;
min-height: 105px;
margin: 0;
padding: 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);
}
.flower-shizuoka{
background-color: hsl(36 91% 47% / 13%); /* 琥珀 */
}
.flower-fuji{
background-color: hsl(196 56% 43% / 13%); /* 千草 */
}
.flower-izu{
background-color: hsl(145 48% 47% / 13%); /* 青・緑 */
}
.flower-shizuoka img, .flower-fuji img, .flower-izu img{
width: 27%;
height: auto;
border-radius: 8px;
}
.flower-description{
flex: 1; /* テキスト部分を広げる */
min-width: 0; /* ←これが超重要！ */
}
.flower-description h3{
font-size: 19px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;  
line-height: 1.5;
border-bottom: 4px solid #ea930a; /* 琥珀 */
}
.flower-fuji h3{
border-bottom-color: #318baf; /* 千草 */
}
.flower-izu h3{
border-bottom-color: #3eb370; /* 青・緑 */
}
.flower-description img{
margin-top: -8px;
width: calc(100% - 2px);
height: 19px;
border-radius: 0;
}
.flower-shizuoka .flower-description img{
border: 1px solid #ea930a; /* 琥珀 */
}
.flower-fuji .flower-description img{
border: 1px solid #318baf; /* 千草 */
}
.flower-izu .flower-description img{
border: 1px solid #3eb370; /* 青・緑 */
}
.flower-description p:first-of-type{
font-size: 16px;
line-height: 1.4;
}
.flower-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;
}
.flower-fuji span{
background-color: #318baf; /* 千草 */
}
.flower-izu span{
background-color: #3eb370; /* 青・緑 */
}
.flower-description p:nth-of-type(2){
display: inline-block;
width: calc(99.1% - 40px); /* 左側の幅 */
margin-left: -2px;
vertical-align: middle;
}
.flower-shizuoka p:nth-of-type(2), .flower-shizuoka p:last-of-type{
color: #ea930a; /* 琥珀 */
}
.flower-fuji p:nth-of-type(2), .flower-fuji p:last-of-type{
color: #318baf; /* 千草 */
}
.flower-izu p:nth-of-type(2), .flower-izu p:last-of-type{
color: #3eb370; /* 青・緑 */
}
.flower-description p:last-of-type{
display: inline-block;
width: 40px; /* ★の幅 */
margin-left: auto;
font-weight: bold;
text-align: right;
vertical-align: middle;
}
/* ------ 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-flower{
margin: 0 auto;
padding: 30px 0;
background: hsl(356 85% 76% / 7%); /* 紅梅 7％ */
}
.seasonal-flower h2{
margin-bottom: 10px;
padding-bottom: 10px;
font-size: 33px;
color: #f69096; /* 紅梅 */
line-height: 33px;
border-bottom: 6px solid #f69096; /* 紅梅 */
}
.seasonal-flower h2 span{
margin-left: 0.5em;
font-size: 0.55em;
}
.seasonal-flower h2::before{
margin-right: 7px;
vertical-align: top;
font-family: 'icomoon';
content: "\e914";
font-size: 44px;
font-weight: 500;
}
.seasonal-flower-box{
width: 100%;
margin-bottom: 1rem;
}
.seasonal-flower h3{
margin-top: 18px;
font-size: clamp(19px, 0.98vw + 15.47px, 23px);
color: #4d5aaf;	 /* 紺桔梗 */
}
.seasonal-flower h3::before{
margin-right: 5px;
font-family: 'icomoon';
content: "\e916";
font-size: clamp(19px, 0.245vw + 18.12px, 20px);
font-weight: 500;
}
.seasonal-flower p{
margin-left: 26px;
font-size: clamp(16px, 0.49vw + 14.24px, 18px);
}
.seasonal-flower img{
display: block;
margin: 10px auto 25px auto;
width: 320px;
height: auto;
border-radius: 8px;
}
/* -------------------- ★ イベントBtn ★ -------------------- */
#eventBtn{
position: fixed;
bottom: calc( 17.8% + 58px );
right: 0;
padding: 7px 12px 6px 20px;
font-size: 13px;
cursor: pointer;
background-color: hsl(232 38% 49%); /* 紺桔梗 */
background: linear-gradient(to bottom, hsl(232 38% 54%), hsl(232 38% 44%));
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;
}
#eventBtn .icon{
display: block;
margin-bottom: 5px;
font-family: "icomoon";
font-size: 19px;
}
#eventBtn:hover {
background: linear-gradient(to bottom, hsl(232 38% 44%), hsl(232 38% 34%));
}
/* -------------------- ★★★★★ 768 ★★★★★ -------------------- */
@media (min-width: 768px) {
/* -------------------- ★ flower ★ -------------------- */
/* ------ tab（タブ切替） ------ */
#tab{
top: max(5px, min(14px, calc(14px - ((100vw - 768px) / 256) * 9)));
}
/* ------ pagenation（月の表示） ------ */
.pagenation li{
height: 70px; /* 高さを固定 */
}
.pagenation li a{
font-size: 1rem;
}
/* ------ 静岡中部・富士山麓・伊豆エリア ------ */
#flower h2{
margin: 60px 0 15px 0;
font-size: 40px;
line-height: 40px;
text-align: left;
}
.flower-shizuoka, .flower-fuji, .flower-izu {
flex: 1 1 calc(50% - 22px);
}
.flower-description h3{
line-height: 1.8;
}
.flower-grid > div:last-child {
max-width: calc(50% - 22px); /* 最後のカードが暴走しないように制限 */
}
/* -------------------- ★ 広告 ★ -------------------- */
#ad1, #ad2{
margin-top: 60px;
}
/* -------------------- ★ 花めぐり・二十四節気 ★ -------------------- */
.seasonal-flower-row{
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.seasonal-flower h2{
margin-bottom: 15px;
font-size: 40px;
line-height: 40px;
}
.seasonal-flower-box{
width: calc(50% - 0.5rem);
}
.seasonal-flower p{
min-height: calc(1.8em * 3)
}
.seasonal-flower img{
margin: 10px 0 25px 25px;
width: 320px;
height: auto;
}
/* -------------------- ★ イベントBtn ★ -------------------- */
#eventBtn{
bottom: calc( 23% + 79px );
padding: 11px 15px 7px 27px;
font-size: 15px;
border-radius: 50px 0 0 50px;
line-height: 1.17;
}
#eventBtn .icon{
font-size: 24px;
}
}
/* -------------------- ★★★★★ 1024 ★★★★★ -------------------- */
@media (min-width: 1024px) {
/* -------------------- ★ 広告 ★ -------------------- */
#ad1, #ad2{
margin: 90px 0;
}
}
/* -------------------- ★★★★★ 1200 ★★★★★ -------------------- */
@media (min-width: 1200px) {
/* -------------------- ★ flower ★ -------------------- */
/* ------ 静岡中部・富士山麓・伊豆エリア ------ */
.flower-shizuoka, .flower-fuji, .flower-izu {
flex: 0 0 calc(33.3333% - 24px); /* 固定幅にして均等割を防ぐ */
max-width: calc(33.3333% - 24px);
}
.flower-grid > div:last-child {
max-width: calc(33.3333% - 24px);
}
/* -------------------- ★ 花めぐり・二十四節気 ★ -------------------- */
.seasonal-flower-box {
width: calc(33.333% - 0.67rem);
}
}