/* CSS Document */
@import url('//fonts.googleapis.com/css2?family=Kaisei+Opti:wght@700&display=swap');
/*
Kaisei Opti / Bold
font-family: 'Kaisei Opti', serif;
font-weight: 700;
*/
:root{
--color-theme: #218a99;
--color-theme-rgb: 33, 138, 153;
--color-theme-sub: #f6c641;
--color-theme-sub-rgb: 246, 198, 65;
--color-tagNew: var(--color-theme-sub);
--color-tagCheck: var(--color-theme);
--color-tabSelect: var(--color-theme-sub);
--dummy: #f2f2f2 url('/common/images/logo.setouchi.svg') no-repeat center / 70%;
}
#siteName{
& a{
aspect-ratio: 300 / 61;
background-image: url("/common/images/logo.setouchi.svg");
}
}
#nav{
& h2{
aspect-ratio: 15 / 4;
}
}
#hGlobal,
#navGlobal{
& a{
grid-template-rows: 32px 1fr;
&:before{
background: no-repeat center / contain;
}
&:hover{
color: var(--color-theme);
&:before{
background-color: transparent;
}
}
&[href="/setouchi/feature/index.html"]:before{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href="/setouchi/course/index.html"]:before{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href="/setouchi/spot/index.html"]:before{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href="/setouchi/gourmet/index.html"]:before{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href="/setouchi/event/index.html"]:before{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href="/setouchi/reserve/index.html"]:before{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href="/setouchi/feature/access"]:before{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
}
#hPickup{
& a{
&:hover{
color: var(--color-theme);
}
}
}
#footer{
background: #d8ed29;
color: inherit;
#fNav{
margin-top: 40px;
}
}
#fSns{
& a{
border-radius: 100%;
&[href*="facebook.com"]{
background: #0866ff url('data:image/svg+xml;charset=UTF-8,') no-repeat center bottom/ 80%;
}
&[href*="x.com"],
&[href*="twitter.com"]{
background: #000 url('data:image/svg+xml;charset=UTF-8,') no-repeat center / 60%;
}
&[href*="youtube.com"]{
background: #ff0200 url('data:image/svg+xml;charset=UTF-8,') no-repeat center / 65%;
}
&[href*="instagram.com"]{
position: relative;
background: #fff;
&:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(-65deg, #7638fa 25%, #ff0069 50%) no-repeat;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / 65%;
}
}
}
}
#fNav{
&:before{
content: "";
aspect-ratio: 300 / 61;
width: min(100%, 400px);
margin-inline: auto;
background: url("/common/images/logo.setouchi.svg") no-repeat center / contain;
}
& dl{
&:before{
border-color: #333;
}
}
& a{
&:hover{
color: var(--color-theme);
}
}
@media (min-width: 992px) {
grid-template-columns: 532px;
justify-content: center;
& dt{
text-align: center;
}
}
}
#fNavExtra{
& a{
&:hover{
background: var(--color-theme);
}
&[href="/setouchi/fc"]:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
}
#fAddress{
display: grid;
grid-gap: 8px 48px;
margin-top: clamp(48px, calc(64 / 1200 * 100vw), 64px);
& p{
word-break: keep-all;
overflow-wrap: anywhere;
&:first-child{
font-size: 18px;
}
}
@media (max-width: 575.98px) {
justify-items: center;
text-align: center;
}
@media (min-width: 576px) {
grid-template-columns: auto auto;
justify-content: center;
}
}