@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-navi{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
position: relative;
width: 100%;
margin: 20px 0;
padding: 0;
}
.flower-navi ul{
display: contents;
}
.flower-navi li{
flex: 0 0 calc(33.333% - 1%);
box-sizing: border-box;
margin: 0.5%;
list-style: none;
background-color: hsl(356 85% 76%); /* 紅梅 */
background: linear-gradient(to bottom, hsl(356 85% 76%), hsl(356 85% 66%));
border-radius: 8px;
}
.flower-navi a{
display: block;
position: relative;
color: #f3f3f2;
text-align: center;
}
.flower-navi img{
width: 100%;
height: auto;
aspect-ratio: 800 / 600;
}
/* -------------------- ★ イベント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) {
/* -------------------- ★ イベント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 ★★★★★ -------------------- */
/* -------------------- ★★★★★ 1200 ★★★★★ -------------------- */