@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-navi{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
position: relative;
width: 100%;
margin: 20px 0;
padding: 0;
}
.event-navi ul{
display: contents;
}
.event-navi li{
flex: 0 0 calc(33.333% - 1%);
box-sizing: border-box;
margin: 0.5%;
list-style: none;
background-color: var(--base-color);
background: linear-gradient(to bottom, hsl(232 38% 54%), hsl(232 38% 44%));
border-radius: 8px;
}
.event-navi a{
display: block;
position: relative;
color: #f3f3f2;
text-align: center;
}
.event-navi img{
width: 100%;
height: auto;
aspect-ratio: 800 / 600;
}
/* -------------------- ★ 花暦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) {
/* -------------------- ★ 花暦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 ★★★★★ -------------------- */
/* -------------------- ★★★★★ 1200 ★★★★★ -------------------- */