/* CSS Document */
#access{
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
margin-top: 40px;
&>*{
grid-column: 2;
}
& h2{
justify-self: center;
aspect-ratio: 6 / 1;
width: clamp(140px, calc(174 / 576 * 100vw), 174px);
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
font-size: 0;
}
#accessTab{
grid-column: 1 / 4;
margin-top: 40px;
}
#accessMap{
margin-top: 48px;
}
}
#accessTab{
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
border-bottom: clamp(8px, calc(16 / 1200 * 100vw), 16px) solid var(--color-theme);
&>*{
grid-column: 2;
}
& ul{
display: grid;
column-gap: clamp(8px, calc(24 / 1200 * 100vw), 24px);
}
& li{
grid-row: 1;
display: grid;
}
& a{
display: grid;
grid-template-columns: clamp(6px, calc(10 / 1200 * 100vw), 10px) auto;
align-items: center;
justify-content: center;
column-gap: 0.5em;
min-height: clamp(56px, calc(64 / 768 * 100vw), 64px);
padding: 8px;
background: var(--color);
border-radius: 10px 10px 0 0;
color: #fff;
font-weight: 700;
font-size: clamp(14px, calc(18 / 768 * 100vw), 18px);
text-align: center;
text-decoration: none;
&:before{
content: "";
aspect-ratio: 1;
background: var(--color-theme-sub);
border-radius: 100%;
}
.select &{
background: var(--color-theme);
pointer-events: none;
}
}
}
#accessMap{
margin-bottom: clamp(40px, calc(80 / 1200 * 100vw), 80px);
border: 1px solid currentColor;
border-radius: 10px;
overflow: hidden;
display: grid;
place-content: center;
}
#route{
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
margin: 40px 0 clamp(80px, calc(120 / 1200 * 100vw), 120px) 0;
&>*{
grid-column: 2;
}
& h2{
display: none;
}
& h3{
display: grid;
grid-template-columns: 1fr auto auto 1fr;
align-items: baseline;
font-weight: 700;
letter-spacing: 0.1em;
& span{
margin-right: 0.25em;
font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
}
&:before,
&:after{
content: "";
align-self: center;
min-width: 1em;
border-top: 1px solid currentColor;
}
&:before{
margin-right: 1em;
}
&:after{
margin-left: 1em;
}
}
& h3+div{
margin-top: clamp(16px, calc(32 / 1200 * 100vw), 32px);
}
& ul{
display: grid;
grid-gap: 16px 8px;
grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 8px), 240px), 1fr));
}
& li{
& input{
display: none;
}
& label{
all: unset;
box-sizing: border-box;
display: grid;
align-items: center;
min-height: clamp(48px, calc(56 / 768 * 100vw), 56px);
padding: 8px 16px;
border-radius: clamp(24px, calc(28 / 768 * 100vw), 28px);
border: 1px solid #b3b3b3;
text-align: center;
cursor: pointer;
&:has(input:checked){
background: var(--color-theme);
border-color: transparent;
color: #fff;
}
}
}
& dl{
display: grid;
grid-row-gap: 8px;
margin-top: 24px;
}
& dt{
font-weight: 700;
letter-spacing: 0.1em;
}
& dd{
display: contents;
& input{
width: min(100%, 480px);
min-height: clamp(48px, calc(56 / 768 * 100vw), 56px);
padding: 8px 24px;
border-radius: clamp(24px, calc(28 / 768 * 100vw), 28px);
border: 1px solid #b3b3b3;
&::placeholder{
color: #999999;
}
}
}
#routeGoal{
margin-top: 56px;
}
#routeSubmit{
margin-top: clamp(56px, calc(80 / 1200 * 100vw), 80px);
}
}
#routeSubmit{
display: flex;
justify-content: center;
& button{
all: unset;
box-sizing: border-box;
display: grid;
grid-template-columns: 24px auto;
align-items: center;
justify-content: center;
column-gap: 0.5em;
width: min(100%, 400px);
min-height: clamp(56px, calc(64 / 768 * 100vw), 64px);
padding: 8px 1em;
border: 1px solid currentColor;
border-radius: clamp(28px, calc(32 / 768 * 100vw), 32px);
font-weight: 700;
font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
letter-spacing: 0.1em;
cursor: pointer;
transition: all 0.2s ease-out;
&:before{
content: "";
aspect-ratio: 1;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
&:hover{
background: var(--color);
border-color: transparent;
color: #fff;
}
}
}
#links{
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
padding: 80px 0 clamp(80px, calc(120 / 1200 * 100vw), 120px) 0;
background: #fcf6bb;
&>*{
grid-column: 2;
}
& h2{
font-weight: 700;
font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
letter-spacing: 0.1em;
text-align: center;
}
& section{
grid-column: 2;
margin-top: 8px;
background: #fff;
border: 1px solid #b3b3b3;
border-radius: 10px;
&:nth-of-type(1){
margin-top: 40px;
}
}
& h3{
display: grid;
grid-template-columns: 40px 1fr auto;
align-items: center;
column-gap: 1em;
min-height: clamp(56px, calc(64 / 768 * 100vw), 64px);
padding: 8px clamp(16px, calc(24 / 768 * 100vw), 24px);
font-weight: 700;
font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
cursor: pointer;
&:before{
content: "";
aspect-ratio: 1;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
#airline &:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
#train &:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
#bus &:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
#car &:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
#ship &:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
&:after{
content: "";
aspect-ratio: 1;
width: 16px;
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,');
}
}
& ul{
display: grid;
}
& li{
display: grid;
border-top: 1px solid #dedede;
& a{
display: grid;
grid-template-columns: 40px auto auto;
justify-content: start;
align-items: center;
column-gap: 1em;
min-height: clamp(56px, calc(64 / 768 * 100vw), 64px);
padding: 8px clamp(16px, calc(24 / 768 * 100vw), 24px);
color: inherit;
text-align: center;
text-decoration: none;
&:before{
content: "";
}
&:after{
content: "";
aspect-ratio: 1;
width: 20px;
background: currentColor url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
border-radius: 100%;
}
&:hover{
color: var(--color-theme);
}
}
}
}