/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&family=Noto+Sans+JP:wght@100..900&display=swap');
/*
Noto Sans Japanese
font-family: 'Noto Sans JP', sans-serif;
font-weight: 100-900;
Montserrat
font-family: 'Montserrat', sans-serif;
font-weight: 100-900;
*/
[src*="url"],
[src*="src"]{
background: var(--dummy);
overflow: hidden;
}
[LSC-LT]{
display: contents;
}
:root{
--color: #333;
--color-theme: #d92d1b;
--color-bg: #f0f5f7;
--variable-color: var(--color-theme);
--font: 'Noto Sans JP', 'BIZ UDPGothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
--wrap-space: 24px;
--wrap-min: 375px;
--wrap-max: 1140px;
--wrap-fit: calc(clamp(var(--wrap-min), 100dvw, 100%) - (var(--wrap-space) * 2));
--wrap: clamp(calc(var(--wrap-min) - (var(--wrap-space) * 2)), calc(max(100dvw, 100%) - (var(--wrap-space) * 2)), var(--wrap-max));
--anchor: 56px;
--logo: url('/common/images/logoType.svg');
--logo-ratio: 50 / 7;
--dummy: color-mix(in srgb, white, var(--color) 25%) var(--logo) no-repeat center / 75%;
}
/* main */
:has(meta[content="#d92d1b"]){
#nav{
#navGlobal{
& details{
@media (max-width: 991.98px) {
&:has(a[href="/feature/"]){
& summary{
display: none !important;
}
& ul{
&:has(a[href="/feature/"]){
display: block !important;
align-content: start;
column-gap: clamp(32px, calc(64 / 768 * 100dvw), 64px);
column-count: 2;
column-rule-style: solid;
column-rule-width: 1px;
column-rule-color: color-mix(in srgb, white, black 10%);
& li:nth-child(n+2){
margin-top: 1em;
}
& a{
grid-template-columns: unset;
&:before{
content: unset;
}
}
}
&:nth-of-type(2){
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid color-mix(in srgb, white, black 10%);
}
}
}
}
}
}
}
#floatingNav{
& ul{
display: flex;
@media (max-width: 1199.98px) {
width: max-content;
min-width: 100%;
& a{
padding: clamp(8px, calc(16 / 768 * 100dvw), 16px) clamp(16px, calc(24 / 768 * 100dvw), 24px);
font-size: 14px;
}
}
@media (min-width: 1200px) {
column-gap: clamp(24px, calc(24 / 1366 * 100dvw), 32px);
& a{
font-size: min(1.06vw, 14px);
}
}
}
& li{
display: contents;
& a{
display: grid;
grid-template-columns: auto 1fr;
column-gap: 8px;
align-items: center;
font-weight: 700;
letter-spacing: 0.025em;
text-align: center;
text-wrap: balance;
text-decoration: none;
&:before{
content: "";
aspect-ratio: 1;
width: min(1.5em, 20px);
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
&[href="/all-about-niigata/"]:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href="/feature/"]:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href="/blog/"]{
&:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
& span{
display: none;
}
}
&[href="/course/"]:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href="/spot/"]:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href="/event/"]:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href="/gourmet/"]:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href="/accommodation/"]:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href="/access/"]{
&:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
& span{
display: none;
}
}
}
}
}
#floatingBottom{
display: grid;
grid-template-columns: var(--wrap);
justify-content: center;
justify-items: center;
& ul{
display: grid;
grid-template-columns: repeat(2, 1fr);
background: #303030;
overflow: hidden;
@media (max-width: 767.98px) {
border-radius: 20px;
}
@media (min-width: 768px) {
border-radius: 20px 20px 0 0;
}
}
& li{
display: grid;
&:nth-child(n+2){
position: relative;
&:before{
content: "";
position: absolute;
top: 50%;
left: 0;
height: calc(100% - 0.75em);
border-left: 1px solid color-mix(in srgb, white, black 13%);
transform: translateY(-50%);
}
}
}
& a{
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: 16px;
min-height: 40px;
padding: 8px clamp(16px, calc(40 / 1200 * 100dvw), 40px);
color: #fff;
font-size: 14px;
text-align: center;
text-decoration: none;
&:before{
content: "";
aspect-ratio: 1;
width: 16px;
background: currentColor;
transform: translateY(0.1em);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
&[href="/recently-viewed/"]:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href="/favorite/"]:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
}
}
/* business */
:has(meta[content="#5d6fcf"]){
&:root{
--color-theme: #5d6fcf;
--color-theme-sub: #1a4a94;
--color-bg: #e3e8f2;
--logo: url('/business/common/images/logoType.svg');
--logo-ratio: 6 / 1;
}
#navGlobal{
@media (max-width: 991.98px) {
& details{
& summary{
margin-bottom: 8px;
& a{
display: block;
}
}
}
& ul:has(details){
display: grid;
grid-row-gap: 24px;
& > li{
border-bottom: 1px solid color-mix(in srgb, white, black 10%);
}
}
}
@media (min-width: 992px) {
& ul:has(details){
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-row-gap: 40px;
& > li{
padding: 24px clamp(24px, calc(40 / 1366 * 100dvw), 40px);
&:not(:nth-child(3n+1)){
border-left: 1px solid color-mix(in srgb, white, black 10%);
}
}
}
}
& a[href="/business/form/contact/"]{
font-weight: 800;
font-size: 18px;
letter-spacing: 0.1em;
}
}
#floatingNav{
& ul{
display: flex;
@media (max-width: 1199.98px) {
width: max-content;
min-width: 100%;
& a{
padding: clamp(8px, calc(16 / 768 * 100dvw), 16px) clamp(16px, calc(24 / 768 * 100dvw), 24px);
font-size: 14px;
}
}
@media (min-width: 1200px) {
column-gap: clamp(24px, calc(24 / 1366 * 100dvw), 32px);
& a{
font-size: min(1.06vw, 14px);
}
}
}
& li{
display: contents;
& a{
display: grid;
align-items: center;
font-weight: 700;
letter-spacing: 0.025em;
text-decoration: none;
}
}
& summary{
text-align: center;
text-wrap: balance;
}
@media (max-width: 1199.98px) {
& details{
&::details-content{
display: none;
}
}
}
@media (min-width: 1200px) {
& details{
position: relative;
&::details-content{
display: contents;
}
& summary+span{
position: absolute;
top: 100%;
left: 50%;
display: grid !important;
width: max-content;
height: 0;
padding-top: 4px;
white-space: nowrap;
transform: translateX(-50%);
opacity: 0;
visibility: hidden;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
&:hover summary+span{
height: auto;
opacity: 1;
visibility: visible;
}
& ul{
display: grid;
grid-row-gap: 0.5em;
padding: 16px 24px;
background: white;
border: 1px solid color-mix(in srgb, white, black 10%);
border-radius: 16px;
& a{
display: grid;
grid-template-columns: auto 1fr;
align-items: baseline;
column-gap: 0.75em;
&:before{
content: "";
width: 0.5em;
border-bottom: 2px solid color-mix(in srgb, white, black 10%);
transform: translateY(-0.25em);
}
}
}
}
}
}
}
/* educational_trip */
:has(meta[content="#d49517"]){
&:root{
--color-theme: #d49517;
--color-bg: #eeede2;
--logo: url('/educational_trip/common/images/logoType.svg');
--logo-ratio: 105 / 42.89;
--dummy: color-mix(in srgb, white, var(--color) 25%) var(--logo) no-repeat center / 50%;
}
#header{
&{
@media (max-width: 991.98px) {
#hText{
display: none;
}
}
@media (min-width: 992px) {
grid-template-columns: auto 1fr auto auto;
#hText{
grid-column: 2;
grid-row: 1;
justify-self: end;
margin-inline: 16px;
}
}
}
#hText{
& p{
padding: 0 1em;
border: 1px solid currentColor;
border-radius: 4px;
font-weight: 800;
font-size: 18px;
text-align: center;
text-wrap: balance;
font-feature-settings: "palt";
}
}
}
#navGlobal,
#fNav{
&{
display: grid;
@media (max-width: 991.98px) {
grid-row-gap: clamp(24px, calc(32 / 768 * 100dvw), 32px);
& address{
padding-top: clamp(24px, calc(32 / 768 * 100dvw), 32px);
border-top: 1px solid;
}
}
@media (min-width: 992px) {
grid-template-columns: 1fr 1fr 50%;
& details{
padding: 16px clamp(24px, calc(40 / 1366 * 100dvw), 40px);
}
& dl{
padding: 0 clamp(24px, calc(40 / 1366 * 100dvw), 40px);
}
& address{
padding: 16px clamp(24px, calc(40 / 1366 * 100dvw), 40px);
border-left: 1px solid;
& h3{
text-align: center;
}
}
}
}
& dl{
&{
display: grid;
align-content: start;
grid-row-gap: 24px;
& dt{
order: 1;
}
& dd{
justify-self: center;
}
}
& dt{
display: flex;
justify-content: center;
& a{
display: grid;
align-items: center;
min-width: 216px;
min-height: 48px;
padding: 8px 16px;
border: 2px solid currentColor;
border-radius: 24px;
color: inherit;
font-weight: 800;
font-size: 14px;
letter-spacing: 0.1em;
text-align: center;
text-decoration: none;
}
}
& dd{
width: min(100%, 180px);
}
}
& address{
display: grid;
align-content: start;
grid-row-gap: clamp(24px, calc(32 / 768 * 100dvw), 32px);
&:before{
content: "";
grid-column: 1;
grid-row: 3;
border-bottom: 1px solid;
}
& h3{
font-weight: 800;
font-size: 18px;
letter-spacing: 0.1em;
}
& h4{
font-weight: 700;
font-size: 14px;
line-height: 2;
}
& h4+div{
margin-top: 16px;
word-break: keep-all;
overflow-wrap: anywhere;
& p{
font-weight: 500;
font-size: 14px;
line-height: 2;
}
}
#fNav &,
#fNav &:before{
border-color: color-mix(in srgb, transparent, white 10%);
}
#navGlobal &,
#navGlobal &:before{
border-color: color-mix(in srgb, white, black 10%);
}
}
}
#footer{
&{
#fText{
grid-row: 1;
margin-bottom: clamp(32px, calc(40 / 768 * 100dvw), 40px);
}
#copyright{
margin-top: clamp(32px, calc(40 / 768 * 100dvw), 40px);
}
}
#fText{
display: grid;
justify-items: center;
grid-row-gap: clamp(24px, calc(40 / 768 * 100dvw), 40px);
text-align: center;
word-break: keep-all;
overflow-wrap: anywhere;
&:before{
content: "";
aspect-ratio: 221 / 150;
width: min(100%, 220px);
height: auto;
background: url('/educational_trip/common/images/logoType.white.svg') no-repeat center / contain;
}
& p{
font-weight: 700;
font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
letter-spacing: 0.1em;
}
}
#copyright{
display: grid;
justify-items: center;
grid-row-gap: clamp(32px, calc(40 / 768 * 100dvw), 40px);
&:before{
content: "";
aspect-ratio: 300 / 37;
width: min(100%, 220px);
height: auto;
background: url('/educational_trip/common/images/logo.sdgs.svg') no-repeat center / contain;
}
}
}
#floatingNav{
& ul{
display: flex;
@media (max-width: 1199.98px) {
width: max-content;
min-width: 100%;
& a{
padding: clamp(8px, calc(16 / 768 * 100dvw), 16px) clamp(16px, calc(24 / 768 * 100dvw), 24px);
font-size: 14px;
}
}
@media (min-width: 1200px) {
column-gap: clamp(24px, calc(24 / 1366 * 100dvw), 32px);
& a{
font-size: min(1.06vw, 14px);
}
}
}
& li{
display: contents;
& a{
display: grid;
grid-template-columns: auto 1fr;
column-gap: 8px;
align-items: center;
font-weight: 700;
letter-spacing: 0.025em;
text-align: center;
text-wrap: balance;
text-decoration: none;
&:before{
content: "";
aspect-ratio: 1;
width: min(1.5em, 20px);
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
&[href="/educational_trip/spot/"]:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href="/educational_trip/course/"]:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href="/educational_trip/feature/"]:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href="/educational_trip/areaguide/"]:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href="/ngt/educational_trip/pamphlet/"]{
grid-template-columns: 1fr auto;
column-gap: unset;
min-height: 32px;
padding: 4px 16px;
border: 1px solid currentColor;
border-radius: 16px;
&:before{
order: 1;
transform: translateX(4px);
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
}
}
}
}
/* location */
:has(meta[content="#2bb2ea"]){
&:root{
--color-theme: #2bb2ea;
--color-bg: #f5f5f5;
--logo: url('/location/common/images/logoType.svg');
--logo-ratio: 75 / 16;
--dummy: color-mix(in srgb, white, var(--color) 25%) var(--logo) no-repeat center / 50%;
}
#header,
#nav,
#footer,
#floating #floatingTop{
background: #1a1a1a;
color: white;
}
#nav #navGlobal{
color: inherit;
& summary:after{
color: color-mix(in srgb, transparent, white 80%)!important;
}
}
#navSearch form{
background: color-mix(in srgb, transparent, white 20%)!important;
}
#footer{
&{
#fSns,
#fAddress{
margin-top: clamp(48px, calc(64 / 768 * 100dvw), 64px);
}
#copyright{
opacity: 0.6;
}
}
#fSns{
& ul{
display: flex;
justify-content: center;
grid-gap: 40px;
}
& a{
display: block;
aspect-ratio: 1;
width: 40px;
background: currentColor;
color: inherit;
font-size: 0;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
&[href*="facebook.com"]{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
}
#fAddress{
display: grid;
justify-items: center;
text-align: center;
text-wrap: balance;
& h3{
aspect-ratio: var(--logo-ratio);
width: min(100%, 340px);
background: var(--logo) no-repeat left top / 100% auto;
font-size: 0;
}
& h4{
margin-top: clamp(32px, calc(40 / 768 * 100dvw), 40px);
}
& h4+div{
margin-top: clamp(16px, calc(24 / 768 * 100dvw), 24px);
font-size: 14px;
line-height: 2.5;
}
}
}
#floatingNav{
&{
display: flex;
& details{
&:nth-child(n+3){
display: none;
}
}
@media (max-width: 991.98px) {
& details{
& summary{
display: none;
}
}
}
@media (min-width: 1200px) {
column-gap: clamp(24px, calc(24 / 1366 * 100dvw), 32px);
}
}
& details{
&::details-content{
display: contents;
}
@media (min-width: 1200px) {
display: grid;
&:nth-child(1){
column-gap: clamp(24px, calc(24 / 1366 * 100dvw), 32px);
& summary{
grid-column: 2 / 4;
grid-row: 1;
}
& ul{
display: contents;
}
& li{
&:nth-child(1){
grid-column: 1;
grid-row: 1 / 3;
}
&:nth-child(2){
margin-left: 8px;
}
}
}
& li{
&:first-child{
margin-left: 8px;
}
&:last-child{
margin-right: 8px;
}
}
}
}
& summary{
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
column-gap: 16px;
font-weight: 800;
font-size: 12px;
letter-spacing: 0.025em;
text-align: center;
text-wrap: balance;
&:before,
&:after{
content: "";
min-width: 32px;
border-top: 1px solid currentColor;
}
}
& ul{
display: flex;
@media (max-width: 1199.98px) {
width: max-content;
min-width: 100%;
& a{
padding: clamp(8px, calc(16 / 768 * 100dvw), 16px) clamp(16px, calc(24 / 768 * 100dvw), 24px);
font-size: 14px;
}
}
@media (min-width: 1200px) {
column-gap: clamp(24px, calc(24 / 1366 * 100dvw), 32px);
& a{
font-size: min(1.06vw, 14px);
}
}
}
& li{
display: grid;
& a{
display: grid;
grid-template-columns: auto 1fr;
column-gap: 8px;
align-items: center;
font-weight: 700;
letter-spacing: 0.025em;
text-align: center;
text-wrap: balance;
text-decoration: none;
&:before{
content: "";
aspect-ratio: 1;
width: min(1.5em, 20px);
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
&[href]:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href="/feature/"]:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href="/blog/"]{
&:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
& span{
display: none;
}
}
&[href="/course/"]:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href="/spot/"]:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href="/event/"]:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href="/gourmet/"]:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href="/reserve/"]:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href="/access/"]{
&:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
& span{
display: none;
}
}
}
}
}
#floatingSide{
position: fixed;
z-index: 100;
@media (max-width: 767.98px) {
left: 0%;
bottom: 0;
display: grid;
grid-template-columns: var(--wrap);
justify-content: center;
justify-items: center;
width: 100%;
& a{
min-height: 48px;
padding: 8px 24px;
border-radius: 16px 16px 0 0;
}
}
@media (min-width: 768px) {
top: 50%;
right: 0;
transform: translateY(-50%);
& a{
width: clamp(56px, calc(64 / 768 * 100dvw), 64px);
padding: 24px 8px;
border-radius: 16px 0 0 16px;
writing-mode: vertical-rl;
}
}
& a{
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
column-gap: 16px;
background: var(--color-theme);
color: white;
font-weight: 800;
letter-spacing: 0.1em;
&:before,
&:after{
content: "";
order: 1;
aspect-ratio: 1;
width: 24px;
background: currentColor;
-webkit-mask: no-repeat center / contain;
}
&:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
&:after{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
}
}
html{
min-width: var(--wrap-min);
scroll-behavior: smooth;
scroll-padding-top: var(--anchor);
}
body{
color: var(--color);
font: 500 16px var(--font);
line-height: 1.65;
overflow-wrap: anywhere;
& a {
color: inherit;
text-decoration: none;
.done &{
transition-property: color, text-decoration, background, background-color, background-size, border, border-color, box-shadow, filter, opacity;
transition-duration: 0.2s;
transition-timing-function: ease-out;
}
&:focus-visible{
outline: var(--color-theme) auto 2px;
}
}
&::selection{
background: var(--color-theme);
color: #fff;
}
&::-moz-selection{
background: var(--color-theme);
color: #fff;
}
}
main{
& a{
color: var(--color-theme);
text-decoration: underline;
&:hover{
color: inherit;
}
}
}
#wrapper{
display: grid;
grid-template-rows: auto 1fr;
min-height: 100dvh;
#header{
grid-column: 1;
grid-row: 1;
}
#pagePath,
#footer,
#pageTop{
order: 10;
}
#floatingNav{
z-index: 100;
}
[popovertarget="nav"]{
all: unset;
box-sizing: border-box;
cursor: pointer;
aspect-ratio: 1;
width: 48px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / min(100%, 32px);
}
}
#header{
padding: 8px clamp(8px, calc(16 / 768 * 100dvw), 16px);
&{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
#siteName{
justify-self: start;
margin-inline: 16px clamp(8px, calc(16 / 768 * 100dvw), 16px);
}
@media (max-width: 575.98px) {
#hLanguage{
display: none;
}
}
@media (min-width: 576px) {
grid-template-columns: 1fr auto auto;
}
}
#siteName{
& a{
display: block;
aspect-ratio: var(--logo-ratio);
height: clamp(32px, calc(36 / 768 * 100dvw), 36px);
background: var(--logo) no-repeat left top / 100% auto;
font-size: 0;
}
}
#hLanguage{
position: relative;
& details{
&::details-content{
display: contents;
}
}
& summary{
aspect-ratio: 1;
width: 48px;
background: currentColor;
font-size: 0;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / min(100%, 32px);
}
& summary+div{
display: none;
position: absolute;
top: 100%;
left: 50%;
background: #fff;
border: 1px solid color-mix(in srgb, white, black 10%);
padding: 8px 16px;
transform: translateX(-50%);
}
& ul{
font-size: 14px;
}
& li{
&:nth-child(n+2){
margin-top: 0.25em;
}
}
& a{
display: block;
white-space: nowrap;
}
}
}
#nav{
all: unset;
box-sizing: border-box;
position: fixed;
z-index: 100;
top: 0;
left: 0;
display: grid;
align-content: start;
align-items: center;
width: 100%;
height: 100dvh;
padding-bottom: 48px;
background-color: color-mix(in srgb, transparent, white 88%);
backdrop-filter: blur(8px);
visibility: hidden;
overscroll-behavior: none;
overflow-y: auto;
opacity: 0;
transition: opacity 0.2s ease-out;
&:popover-open{
visibility: visible;
opacity: 1;
}
&{
#navGlobal{
justify-self: center;
width: min(var(--wrap-fit), 400px);
margin-top: 24px;
}
@media (min-width: 992px) {
#navGlobal{
width: var(--wrap);
margin-top: 40px;
}
}
}
& h2{
display: block;
aspect-ratio: var(--logo-ratio);
height: clamp(32px, calc(36 / 768 * 100dvw), 36px);
background: var(--logo) no-repeat left top / 100% auto;
font-size: 0;
transition: none;
cursor: pointer;
}
#navHeader{
padding: 8px clamp(8px, calc(16 / 768 * 100dvw), 16px);
&{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
& h2{
margin-inline: 16px clamp(8px, calc(16 / 768 * 100dvw), 16px);
}
#navSearch{
grid-column: 1 / 3;
grid-row: 2;
}
@media (max-width: 1199.98px) {
#navSearch{
justify-self: center;
width: min(calc(100% - 32px), 400px);
margin-top: clamp(24px, calc(32 / 768 * 100dvw), 32px);
}
}
@media (min-width: 1200px) {
grid-template-columns: auto auto;
justify-content: space-between;
&:has(#navSearch){
grid-template-columns: auto 1fr auto;
}
#navSearch{
grid-column: 2;
grid-row: 1;
justify-self: end;
width: 400px;
margin-inline: 16px;
}
}
}
}
#navSearch{
& form,
& form.gsc-search-box{
all: unset;
box-sizing: border-box;
display: grid;
grid-template-columns: 1fr auto auto;
height: 32px;
padding-left: 1em;
outline: 2px solid currentColor;
border-radius: 16px;
overflow: hidden;
& input{
all: unset;
align-self: center;
background-color: transparent !important;
letter-spacing: 0.1em;
}
& a{
all: unset;
box-sizing: border-box;
cursor: pointer;
align-self: center;
aspect-ratio: 1;
width: 16px;
background: silver;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
& span{
display: none;
}
}
& button{
all: unset;
box-sizing: border-box;
cursor: pointer;
grid-column: 3;
grid-row: 1;
aspect-ratio: 1;
width: 32px;
background: currentColor;
font-size: 0;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
& svg{
display: none;
}
&.gsc-search-button{
display: block !important;
}
}
}
.gsc-control-cse,
.gsc-control-wrapper-cse{
display: contents;
}
.gsc-search-box{
& div,
& table,
& tbody,
& tr,
& td{
display: contents !important;
&:before,
&:after{
content: none;
}
}
}
.gsc-above-wrapper-area,
.gsc-wrapper{
max-width: unset;
}
}
#navGlobal{
color: color-mix(in srgb, white, black 81%);
&:has(details:nth-child(2)){
display: grid;
@media (max-width: 991.98px) {
& details{
border-bottom: 1px solid color-mix(in srgb, white, black 10%);
}
& summary{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
min-height: 64px;
padding: 8px 0;
color: color-mix(in srgb, white, black 49%);
&:after{
content: "";
aspect-ratio: 1;
width: 24px;
background: currentColor;
color: color-mix(in srgb, white, black 100%);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
[open] &:after{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
}
@media (min-width: 992px) {
grid-template-columns: repeat(4, 1fr);
& details{
padding: 16px clamp(24px, calc(40 / 1366 * 100dvw), 40px);
&:nth-child(n+2){
border-left: 1px solid color-mix(in srgb, white, black 10%);
}
}
& li{
opacity: 0.8;
}
}
}
& details{
@media (max-width: 991.98px) {
&:not(&:has(summary+span)){
&::details-content{
all: unset;
box-sizing: border-box;
display: grid;
grid-row-gap: 2em;
padding: 8px 0 24px 0;
}
}
&:has(summary+span){
&::details-content{
display: contents;
}
}
& summary+span{
display: grid;
grid-row-gap: 2em;
padding: 8px 0 24px 0;
}
& ul{
& a{
display: grid;
grid-template-columns: auto 1fr;
align-items: baseline;
column-gap: 0.75em;
&:before{
content: "";
width: 0.5em;
border-bottom: 2px solid currentColor;
transform: translateY(-0.25em);
}
}
}
}
@media (min-width: 992px) {
&::details-content{
all: unset;
box-sizing: border-box;
display: grid;
grid-row-gap: 2em;
margin-top: clamp(32px, calc(40 / 1366 * 100dvw), 40px);
font-size: 14px;
font-feature-settings: "palt";
}
& summary{
pointer-events: none;
}
& summary+span{
display: contents !important;
}
& li{
opacity: 0.8;
}
}
& summary{
font-weight: 800;
font-size: 18px;
letter-spacing: 0.1em;
}
& ul{
display: grid;
grid-row-gap: 0.5em;
& a{
font-weight: 600;
& span{
display: contents;
}
}
}
}
}
#navClose{
all: unset;
box-sizing: border-box;
cursor: pointer;
aspect-ratio: 1;
width: 48px;
background: currentColor;
font-size: 0;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / min(100%, 32px);
}
}
#pagePath{
display: none;
}
#ads{
margin-block: clamp(56px, calc(104 / 768 * 100dvw), 104px);
&{
display: grid;
& h4{
margin-top: 56px;
}
#vpon,
& ul{
width: min(var(--wrap-fit));
margin-inline: auto;
}
@media (max-width: 1199.98px) {
& h4+div,
& h3+div{
margin-top: 24px;
}
}
@media (min-width: 1200px) {
position: relative;
width: min(calc(100% - (var(--wrap-space) * 2)), 1060px);
margin-inline: auto;
padding-bottom: 56px;
&:before{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: calc(100% - 72px);
border: solid currentColor;
border-width: 0 1px 1px 1px;
border-radius: 0 0 56px 56px;
pointer-events: none;
}
& h3{
align-self: start;
&:before,
&:after{
min-width: 56px;
height: 56px;
margin-bottom: -56px;
border: 0 solid currentColor;
}
&:before{
border-width: 1px 0 0 1px;
border-radius: 56px 0 0 0;
}
&:after{
border-width: 1px 1px 0 0;
border-radius: 0 56px 0 0;
}
}
& h3+div{
margin-top: 32px
}
& h4+div{
margin-top: 32px;
}
}
}
& h3,
& h4{
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
column-gap: 16px;
font-weight: 600;
font-size: clamp(20px, calc(24 / 768 * 100dvw), 24px);
font-family: 'Montserrat', var(--font);
letter-spacing: 0.4em;
text-indent: 0.4em;
text-align: center;
text-wrap: balance;
&:before,
&:after{
content: "";
min-width: 24px;
border-top: 1px solid currentColor;
}
& span{
display: contents;
color: var(--color-theme);
}
}
& ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
& li{
display: contents;
}
&:has(img){
grid-gap: clamp(16px, calc(24 / 768 * 100dvw), 24px);
& a{
display: block;
width: 234px;
&:not(:has(img)){
display: grid;
place-items: center;
aspect-ratio: 234 / 60;
background: silver;
color: inherit;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
}
}
& img{
aspect-ratio: 234 / 60;
object-fit: contain;
}
}
}
#vpon{
display: flex;
flex-wrap: wrap;
justify-content: center;
grid-gap: clamp(16px, calc(24 / 768 * 100dvw), 24px);
overflow: hidden;
&:not(:last-child){
margin-bottom: clamp(16px, calc(24 / 768 * 100dvw), 24px);
}
& > div{
background: silver;
}
}
#adsSns{
& ul{
grid-gap: 40px;
}
& a{
display: block;
aspect-ratio: 1;
width: 40px;
background: currentColor;
color: inherit;
font-size: 0;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
&[href*="facebook.com"]{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href*="x.com"]{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href*="instagram.com"]{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[href*="youtube.com"]{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
}
}
#footer{
padding: clamp(48px, calc(80 / 768 * 100dvw), 80px) 0 32px 0;
background: #303030;
color: #fff;
&{
display: grid;
grid-template-columns: min(calc(100% - 80px), 400px);
justify-content: center;
#copyright{
margin-top: clamp(64px, calc(80 / 768 * 100dvw), 80px);
}
@media (min-width: 992px) {
grid-template-columns: var(--wrap);
}
}
#fNav{
&:has(details:nth-child(2)){
@media (max-width: 991.98px) {
& details{
border-bottom: 1px solid color-mix(in srgb, transparent, white 10%);
}
}
@media (min-width: 992px) {
display: grid;
grid-template-columns: repeat(4, 1fr);
& details{
padding: 24px clamp(24px, calc(40 / 1366 * 100dvw), 40px);
&:nth-child(n+2){
border-left: 1px solid color-mix(in srgb, transparent, white 10%);
}
}
}
}
& details{
@media (max-width: 991.98px) {
&:not(:has(summary+span)){
&::details-content{
all: unset;
box-sizing: border-box;
display: grid;
grid-row-gap: 2em;
padding: 16px 0 24px 0;
}
}
&:has(summary+span){
&::details-content{
display: contents;
}
& summary{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
min-height: 64px;
padding: 8px 0;
&:after{
content: "";
aspect-ratio: 1;
width: 24px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
[open] &:after{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
& summary+span{
display: grid;
grid-row-gap: 2em;
padding: 8px 0 24px 0;
}
}
& a{
display: grid;
grid-template-columns: auto 1fr;
align-items: baseline;
column-gap: 0.75em;
&:before{
content: "";
width: 0.5em;
border-bottom: 2px solid currentColor;
transform: translateY(-0.25em);
}
}
}
@media (min-width: 992px) {
&::details-content{
all: unset;
box-sizing: border-box;
display: grid;
grid-row-gap: 2em;
margin-top: clamp(32px, calc(40 / 1366 * 100dvw), 40px);
font-size: 14px;
font-feature-settings: "palt";
}
& summary{
pointer-events: none;
}
& summary+span{
display: contents !important;
}
}
& summary{
font-weight: 800;
font-size: 18px;
letter-spacing: 0.1em;
}
& ul{
display: grid;
grid-row-gap: 0.5em;
}
& li{
opacity: 0.6;
}
& a{
font-weight: 600;
& span{
display: contents;
}
}
}
}
#copyright{
& p{
font-weight: 300;
font-size: 12px;
letter-spacing: 0.05em;
text-align: center;
}
}
}
#pageTop{
display: none;
}
#floating{
&{
display: contents;
#floatingTop,
#floatingBottom{
position: fixed;
left: 0;
width: 100%;
transition: transform 0.2s ease-out;
z-index: 100;
}
#floatingTop{
top: 0;
transform: translateY(-100%);
&.fixed{
transform: translateY(0);
}
}
#floatingBottom{
bottom: 0;
transform: translateY(100%);
&.fixed{
transform: translateY(0);
}
@media (max-width: 767.98px) {
padding-bottom: 40px;
}
}
}
#floatingTop{
background-color: color-mix(in srgb, transparent 12%, white);
backdrop-filter: blur(8px);
&{
#siteName{
margin-inline: 16px clamp(8px, calc(16 / 768 * 100dvw), 16px);
}
@media (max-width: 1199.98px) {
&:not(:has(#floatingHeader)),
#floatingHeader{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
padding: 8px clamp(8px, calc(16 / 768 * 100dvw), 16px);
}
}
@media (min-width: 1200px) {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
padding: 8px clamp(8px, calc(16 / 768 * 100dvw), 16px);
&:has(#floatingNav){
grid-template-columns: auto 1fr auto;
}
#floatingHeader{
display: contents;
}
#floatingNav{
grid-column: 2;
grid-row: 1;
justify-self: end;
margin-inline: 16px;
}
}
}
}
#siteName{
& a{
display: block;
aspect-ratio: var(--logo-ratio);
height: clamp(32px, calc(36 / 768 * 100dvw), 36px);
background: var(--logo) no-repeat left top / 100% auto;
font-size: 0;
&[href="/"]{
aspect-ratio: 0.915 / 1;
background-size: auto 100%;
}
}
}
#floatingNav{
@media (max-width: 767.98px) {
width: 100%;
overflow-y: auto;
scrollbar-color: var(--color-theme) transparent;
scrollbar-width: thin;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
display: none;
}
}
}
#pagenation{
&:not(:has(a)){
display: none;
}
& [lsc-lb^="lscListPgn"]{
display: none;
}
& ol{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
grid-gap: clamp(8px, calc(16 / 768 * 100dvw), 16px);
overflow: hidden;
}
& ol{
& a{
display: grid;
aspect-ratio: 1;
width: 48px;
place-items: center;
border: 1px solid currentColor;
border-radius: 100%;
color: var(--color);
font-size: 18px;
text-decoration: none;
text-align: center;
white-space: nowrap;
overflow: hidden;
&[rel]{
display: none;
}
&.lsc-current-page{
background: var(--color);
border-color: transparent;
color: #fff;
pointer-events: none;
}
}
}
& li{
display: contents;
}
}
.infoWin{
[LSC-LB] &,
[LSC-LT] &{
max-width: 284px;
padding: 16px;
background: #fff;
border-radius: 8px;
}
& dl{
display: flex;
flex-wrap: wrap;
justify-content: center;
grid-gap: clamp(8px, calc(16 / 768 * 100vw), 16px);
max-width: 284px;
min-width: min(100%, 210px);
}
& dt{
width: 100%;
font-weight: 700;
font-size: clamp(12px, calc(14 / 768 * 100vw), 14px);
}
& dd{
&:has(img){
width: 100%;
}
&:has(a){
display: contents;
}
& img{
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 8px;
}
& a{
display: grid;
align-items: center;
min-height: 24px;
padding: 2px 8px;
width: calc(50% - clamp(4px, calc(8 / 768 * 100vw), 8px));
border: 1px solid currentColor;
border-radius: 12px;
color: inherit;
font-size: clamp(10px, calc(12 / 768 * 100vw), 12px);
text-align: center;
text-decoration: none;
&[href*="google.co.jp"]{
order: 1;
background: var(--color-theme);
border-color: transparent;
color: white;
}
}
}
}
.googlemap{
& iframe{
aspect-ratio: 3 / 2;
width: 100%;
height: auto;
}
}
.youtube{
& iframe{
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}
}
.translated-ltr{
& font{
display: contents;
}
& wbr:not(:lang(ja)){
display: none;
}
}