/* 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: #004876;
--color-theme-rgb: 0, 72, 188;
--color-theme-sub: #f0a443;
--color-theme-sub-rgb: 240, 164, 67;
--color-tagNew: var(--color-theme-sub);
--color-tagCheck: var(--color-theme);
--color-tabSelect: var(--color-theme-sub);
--dummy: color-mix(in srgb, white, var(--color-theme) 25%) url('/common/images/logo.ibara.svg') no-repeat center / 70%;
}
#wrapper{
@media (min-width: 1200px) {
#header{
position: static;
}
}
}
#siteName{
& a{
aspect-ratio: 300 / 54;
height: clamp(32px, calc(56 / 1400 * 100vw), 56px);
background: url("/common/images/logo.ibara.svg") no-repeat center / contain;
}
}
#nav{
& h2{
aspect-ratio: 300 / 54;
height: clamp(32px, calc(56 / 1400 * 100vw), 56px);
background: url("/common/images/logo.ibara.svg") no-repeat center / contain;
}
}
#hGlobal,
#navGlobal{
& a{
color: var(--color-theme);
#hGlobal &{
grid-template-rows: 32px 1fr;
}
@media (min-width: 1200px) {
#navGlobal &{
grid-template-rows: 32px 1fr;
}
}
&:before{
background: no-repeat center / contain;
}
&:hover{
color: var(--color-theme);
&:before{
background-color: transparent;
}
}
&[href$="/feature/index.html"]:before{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href$="/course/index.html"]:before{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href$="/spot/index.html"]:before{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
li:nth-child(4) &:before{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href$="/reserve/index.html"]:before{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href$="/souvenir/index.html"]:before{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href$="/gourmet/index.html"]:before{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href$="/event/index.html"]:before{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href$="/access"]:before{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
li:nth-child(10) &:before{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
}
#hGlobal,
#hPickup{
@media (min-width: 1200px){
& ul{
grid-column-gap: min(calc(32 / 1400 * 100vw), 32px);
}
}
}
#hPickup{
& a{
&:hover{
color: var(--color-theme);
}
}
}
#footer{
background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), transparent 160px), url("../../ibara/images/footerBg.webp") no-repeat center / cover, var(--color-theme);
color: white;
&{
#fNav{
margin-top: 40px;
}
#copyright{
margin-block: 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 / 54;
width: min(100%, 400px);
margin-inline: auto;
background: currentColor;
-webkit-mask: url("/common/images/logo.ibara.svg") no-repeat center / contain;
}
& dt{
text-align: center;
}
& a{
&:hover{
color: var(--color-theme-sub);
}
}
@media (min-width: 992px) {
grid-template-columns: 532px;
justify-content: center;
& dl{
grid-template-rows: repeat(11, auto);
}
}
}
#fNavExtra{
& a{
&:hover{
background: var(--color-theme-sub);
}
li:nth-child(2) &{
grid-template-columns: auto;
&:before{
content: none;
}
}
}
}
#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;
}
}
}