/* CSS Document */
:root {
--color-theme: #b8282f;
--color-theme-rgb: 184,40,47;
--font: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
--font-en: 'BIZ UDPGothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
--wrap-space: 10px;
--wrap-fit: calc(100% - (var(--wrap-space) * 2));
--wrap-max: 960px;
--wrap: min(var(--wrap-fit), var(--wrap-max));
--icon-walk: url('data:image/svg+xml;charset=UTF-8,');
--icon-car: url('data:image/svg+xml;charset=UTF-8,');
--icon-train: url('data:image/svg+xml;charset=UTF-8,');
--icon-bus: url('data:image/svg+xml;charset=UTF-8,');
--icon-bicycle: url('data:image/svg+xml;charset=UTF-8,');
}
#pageTitle{
display: none;
}
main > * {
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
& > * {
grid-column: 2;
}
}
#aiForm, #aiDetail {
padding-top: 24px;
overflow: hidden;
box-sizing: border-box;
ul {
list-style: none;
}
@media (min-width: 768px) {
padding-top: 40px;
}
}
#aiForm {
& fieldset {
margin-top: 2em;
@media (min-width: 768px) {
margin-top: 4em;
}
& img {
aspect-ratio: 1 / 0.667;
object-fit: cover;
}
}
& legend {
margin-bottom: 1em;
padding-bottom: 0.5em;
width: 100%;
font-family: var(--font);
font-size: 20px;
font-weight: bold;
line-height: 1.2em;
color: var(--color-theme);
border-bottom: 3px solid var(--color-theme);
@media (min-width: 768px) {
font-size: 28px;
}
}
& ul {
display: grid;
grid-gap: 0.5em;
@media (min-width: 768px) {
grid-gap: 1em;
}
}
& dl {
display: grid;
border: 3px solid transparent;
border-radius: 6px;
overflow: hidden;
& dt {
grid-column: 1;
grid-row: 1;
justify-self: center;
align-self: end;
padding: 1em 0 0.75em;
width: 100%;
font-size: 14px;
/* font-weight: bold;*/
line-height: 1.2em;
text-align: center;
color: #fff;
background: linear-gradient(0deg, rgba(0, 0, 0, .7), transparent);
z-index: 1;
@media (min-width: 768px) {
font-size: 16px;
}
}
& dd {
display: contents;
}
& figure {
grid-column: 1;
grid-row: 1;
}
}
& select {
min-height: 48px;
padding: 8px;
padding-right: 2em;
background: #fff;
border: 1px solid #ccc;
line-height: inherit;
background-image: url('data:image/svg+xml;charset=UTF-8,');
background-position: calc(100% - 0.75em) center;
background-repeat: no-repeat;
background-size: 0.5em;
appearance: none;
border-radius: 6px;
}
}
#formWhom, #formChoice {
& .selected {
position: relative;
color: #FF0004;
border: 3px solid var(--color-theme);
&:before {
content: "";
position: absolute;
top: 0.5em;
left: 0.5em;
width: 1.4em;
height: 1.4em;
background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,') center center no-repeat;
background-size: 50%;
border-radius: 100%;
@media (min-width: 768px) {
width: 2em;
height: 2em;
}
}
& dt {
background: linear-gradient(0deg, rgba(184, 40, 47, 1), transparent);
}
}
}
#formWhom {
& ul {
grid-template-columns: repeat(2, 1fr);
@media (min-width: 768px) {
grid-template-columns: repeat(3, 1fr);
}
}
}
#formChoice {
& ul {
grid-template-columns: repeat(2, 1fr);
@media (min-width: 768px) {
grid-template-columns: repeat(4, 1fr);
}
}
}
#formAccess {
display: grid;
@media (min-width: 768px) {
grid-template-columns: repeat(2, 1fr);
grid-gap: 1em;
}
& > legend {
grid-column: 1 / 3;
}
& > fieldset{
margin: 0em;
padding: 1em 1.5em 1.5em;
background: #e6e6d8;
border-radius: 6px;
& legend {
all: unset;
font-family: var(--font);
font-size: 20px;
font-weight: bold;
}
& ul {
grid-template-columns: repeat(2, 1fr);
}
& li {
text-align: center;
}
@media (max-width: 767px) {
& + fieldset {
margin-top: 1em;
}
}
}
& li {
padding: 0.5em;
border-radius: 6px;
background: #fff;
border: 3px solid transparent;
&.selected {
color: var(--color-theme);
border: 3px solid var(--color-theme);
}
}
}
#formSituation {
padding: 1.5em;
background: #e6e6d8;
border-radius: 6px;
@media (min-width: 768px) {
padding: 2em;
}
& > legend {
display: none;
}
& ul {
grid-gap: 1.5em;
@media (min-width: 768px) {
grid-template-columns: repeat(3, 1fr);
grid-gap: 2em 3em;
}
}
& li {
display: grid;
grid-template-columns: 5em 1fr;
align-items: center;
}
& ul + div {
margin-top: 3em;
text-align: center;
& label{
@media (max-width: 767px) {
font-size: 0.8em;
}
}
& input[type=range] {
appearance: none;
margin: 0 1rem;
padding: 0;
width: calc(100% - 20em);
height: 10px;
border-radius: 10px;
border: 1px solid #ccc;
cursor: pointer;
@media (max-width: 767px) {
width: calc(100% - 11em);
}
&::-webkit-slider-thumb { /* Chrome, Safari, Edge */
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 9999px;
background: #cb0000;
box-shadow: none;
}
&::-webkit-slider-thumb { /* Firefox */
width: 20px;
height: 20px;
border-radius: 9999px;
background: #cb0000;
box-shadow: none;
}
}
}
}
#formMymap {
margin-top: 4em;
}
#formLink {
margin-top: 2em;
font-weight: bold;
@media (min-width: 768px) {
margin-top: 4em;
}
& .button {
display: grid;
justify-content: center;
align-items: center;
margin: auto;
width: min(100%, 340px);
min-height: 48px;
padding: 4px 16px;
color: #fff;
line-height: 1;
letter-spacing: 0.05em;
text-decoration: none;
border-radius: 32px;
background: var(--color-theme);
&:hover {
opacity: .7;
}
}
}
#aiDetail {
& h2 {
position: relative;
padding-top: 2.5em;
font-family: var(--font);
font-size: 20px;
font-weight: bold;
text-align: center;
@media (min-width: 768px) {
font-size: 28px;
}
&:before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
border: 1em solid transparent;
border-top: 1.25em solid var(--color-theme);
}
}
}
#detailCourse {
display: grid;
}
.spot {
display: grid;
grid-template-columns: 48px auto;
grid-gap: 1em;
margin: 0;
padding: 1em;
background: #fff;
border-radius: 6px;
position: relative;
outline: none;
@media (min-width: 768px) {
grid-template-columns: 48px auto auto;
grid-template-rows: auto auto auto 1fr;
align-items: start;
padding: 2em;
}
& + .spot {
margin-top: 1em;
}
&:first-child {
margin-top: 2em;
&:before {
grid-column: 1;
grid-row: 2;
content: "start";
display: grid;
align-items: center;
width: 48px;
aspect-ratio: 1;
font-family: var(--font-en);
font-weight: 500;
font-size: 14px;
letter-spacing: 0.05em;
line-height: 1;
text-align: center;
color: #fff;
background: var(--color-theme);
border-radius: 100%;
overflow: hidden;
}
@media (min-width: 768px) {
margin-top: 4em;
}
}
&:nth-of-type(n+2) {
counter-increment: count;
&:before {
grid-column: 1;
grid-row: 2;
content: counter(count);
display: grid;
align-items: center;
width: 48px;
aspect-ratio: 1;
font-family: var(--font-en);
font-weight: 500;
font-size: 24px;
letter-spacing: 0.05em;
line-height: 1;
text-align: center;
color: #fff;
background: var(--color-theme);
border-radius: 100%;
overflow: hidden;
}
}
.spotName {
grid-column: 2 / 3;
grid-row: 2;
align-self: center;
font-family: var(--font);
font-weight: 700;
font-size: clamp(20px, calc(28 / 1200 * 100vw), 28px);
line-height: 1.4em;
letter-spacing: 0.05em;
@media (min-width: 768px) {
grid-column: 2;
}
}
.spotTime {
grid-column: 1 / 3;
font-weight: 700;
font-size: clamp(12px, calc(14 / 1200 * 100vw), 14px);
color: #f28593;
@media (min-width: 768px) {
grid-column: 1 / 4;
}
}
.spotText {
grid-column: 1 / 3;
grid-row: 4;
@media (min-width: 768px) {
grid-column: 2 / 3;
grid-row: 3;
}
}
.spotLink {
grid-column: 1 / 3;
grid-row: 5;
display: flex;
justify-content: center;
@media (min-width: 768px) {
grid-column: 2;
grid-row: 4;
}
& a {
display: grid;
grid-template-columns: 1fr 12px;
align-items: center;
column-gap: 8px;
min-width: min(80%, 180px);
min-height: 40px;
padding: 4px 16px;
border: 1px solid var(--color-theme);
border-radius: 20px;
color: var(--color-theme);
font-size: 14px;
letter-spacing: 0.1em;
text-align: center;
text-decoration: none;
&:after {
content: "";
aspect-ratio: 1;
background: var(--color-theme);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
&:hover {
opacity: .7;
}
}
}
.spotPhoto {
grid-column: 1 / 3;
grid-row: 3;
@media (min-width: 768px) {
grid-column: 3 / 4;
grid-row: 2 / 5;
padding-left: 1em;
}
& img {
aspect-ratio: 1 / 0.667;
object-fit: cover;
border-radius: 6px;
@media (min-width: 768px) {
width: 400px;
}
}
}
}
.move {
display: grid;
grid-template-columns: 40px auto;
grid-gap: 1em;
align-items: center;
position: relative;
margin-left: 1em;
padding: 32px 0;
min-height: 40px;
letter-spacing: 0.1em;
z-index: 1;
@media (min-width: 768px) {
margin-left: 2.25em;
}
& + .move {
padding: 0 0 32px;
}
&:before, &:after {
content: "";
width: 100%;
height: 100%;
}
&:before {
left: 0;
aspect-ratio: 1;
background: #f28593;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / 40px;
z-index: 1;
}
&[data-type="walk"]:before {
background: var(--icon-walk) no-repeat center / 24px, url('data:image/svg+xml;charset=UTF-8,') no-repeat center / 36px #f28593;
}
&[data-type="car"]:before {
background: var(--icon-car) no-repeat center / 24px, url('data:image/svg+xml;charset=UTF-8,') no-repeat center / 36px #f28593;
}
&[data-type="train"]:before {
background: var(--icon-train) no-repeat center / 24px, url('data:image/svg+xml;charset=UTF-8,') no-repeat center / 36px #f28593;
}
&[data-type="bus"]:before {
background: var(--icon-bus) no-repeat center / 24px, url('data:image/svg+xml;charset=UTF-8,') no-repeat center / 36px #f28593;
}
&[data-type="bicycle"]:before {
background: var(--icon-bicycle) no-repeat center / 24px, url('data:image/svg+xml;charset=UTF-8,') no-repeat center / 36px #f28593;
}
&:after {
position: absolute;
top: 0;
background-image: linear-gradient(#f28593,#f28593 25%,#fff 0,#fff 50%,#f28593 0,#f28593 75%,#fff 0,#fff);
background-position: 20px;
background-repeat: repeat-y;
background-size: 1px 8px;
}
}
footer {
display: grid;
grid-template-columns: auto 1fr auto;
margin-top: 2em;
@media (min-width: 768px) {
margin-top: 4em;
}
&>*{
grid-column: 2;
}
}
#detailMap{
grid-column: 1 / 4;
justify-self: center;
display: grid;
grid-template-rows: min(75vh, 560px);
margin-top: 1em;
width: min(100%, 960px);
#detailMapText{
justify-self: center;
max-width: var(--wrap-fit);
}
@media (min-width: 768px) {
grid-template-columns: 1fr min(30vw, 366px);
#detailMapText{
grid-column: 1 / 3;
}
}
}
#detailMapBody{
position: relative;
background: #ccc;
border-radius: 8px 8px 0 0;
overflow: hidden;
& iframe,
& [id^="gMap"]{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (min-width: 768px) {
border-radius: 8px 0 0 8px;
}
}
#detailMapList{
position: relative;
max-height: min(50vw, 240px);
border: 1px solid #e6e6e6;
border-bottom-width: 1px;
border-radius: 0 0 8px 8px;
background: #fff;
overflow: hidden;
@media (min-width: 768px) {
max-height: 100%;
border-top-width: 1px;
border-width: 1px 1px 1px 0;
border-radius: 0 8px 8px 0;
}
&:has(menu){
display: grid;
grid-template-rows: auto 1fr auto;
& ul{
overflow-y: auto;
}
}
& ul{
counter-reset: count;
padding: 0 clamp(16px, calc(24 / 1200 * 100vw), 24px);
&:only-child{
padding: 8px clamp(16px, calc(24 / 1200 * 100vw), 24px);
}
}
& li{
display: grid;
grid-template-columns: 32px auto;
align-content: center;
grid-gap: 16px;
padding: 16px 0;
letter-spacing: 0.05em;
cursor: pointer;
&:before{
counter-increment: count;
content: counter(count);
display: grid;
align-content: center;
aspect-ratio: 1;
background: #f28593;
border-radius: 100%;
color: #fff;
font: var(--font-en);
text-align: center;
letter-spacing: 0;
line-height: 1;
}
}
& menu{
all: unset;
position: relative;
height: 32px;
margin: 0;
padding: 0;
font-size: 0;
cursor: pointer;
z-index: 1;
&:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: 16px;
}
&#detailMapListDown{
transform: scale(1, -1);
}
}
}
#detailMapText{
margin-top: 16px;
color: var(--color-theme);
font-size: 14px;
letter-spacing: 0.05em;
}
#detailMapToggle{
all: unset;
box-sizing: border-box;
grid-column: 2;
justify-self: center;
display: grid;
grid-template-columns: 1fr 16px;
align-items: center;
column-gap: 8px;
width: min(100%, 220px);
min-height: 48px;
padding: 8px 16px;
border-radius: 24px;
text-align: center;
text-decoration: none;
color: #fff;
background: #f28593;
cursor: pointer;
&:after{
content: "";
aspect-ratio: 1;
background: #fff;
-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,');
}
}
#footerLink {
margin-top: 4em;
padding-top: 4em;
border-top: 2px solid #ccc;
& p {
font-family: var(--font);
font-size: 18px;
font-weight: bold;
text-align: center;
}
& p + div {
margin-top: 2em;
@media (min-width: 768px) {
display: flex;
justify-content: center;
}
& a {
display: grid;
grid-template-columns: 16px 1fr;
justify-self: center;
align-items: center;
column-gap: 8px;
width: min(100%, 340px);
min-height: 48px;
padding: 4px 16px;
color: #fff;
line-height: 1;
letter-spacing: 0.05em;
text-align: center;
text-decoration: none;
border-radius: 32px;
background: var(--color-theme);
&:hover {
opacity: .7;
}
&:before {
content: "";
aspect-ratio: 1;
background: #fff;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
&:first-child {
background: #fff;
border: 1px solid var(--color-theme);
color: var(--color-theme);
&:before {
background: var(--color-theme);
transform: rotateY(180deg);
}
}
& + a {
margin-top: 1em;
@media (min-width: 768px) {
margin-top: 0;
margin-left: 1em;
}
}
}
}
}
.infoWin{
&[LSC-LT],
[LSC-LB] &{
position: relative;
justify-self: center;
margin: 16px;
padding: 16px;
background: #fff;
border-radius: 8px;
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.25));
z-index: 1;
}
& dl{
display: flex;
flex-wrap: wrap;
justify-content: center;
grid-gap: 8px;
max-width: 320px;
}
& dt{
width: 100%;
font-weight: 700;
letter-spacing: 0.05em;
}
& dd{
&:empty{
display: none;
}
&:has(img){
order: -1;
width: 100%;
}
&:has(a){
display: contents;
}
& img{
aspect-ratio: 1 / 0.667;
object-fit: cover;
border-radius: 4px;
width: 100%;
}
& a{
display: grid;
align-items: center;
width: calc(50% - 4px);
min-height: 32px;
padding: 4px 8px;
background: #f28593;
border-radius: 16px;
color: #fff;
font-weight: 700;
font-size: clamp(12px, calc(14 / 576 * 100vw), 14px);
text-align: center;
text-decoration: none;
letter-spacing: 0.05em;
outline: none;
&[href*="google.co.jp"]{
background: var(--color-theme);
}
}
}
}
#modalLink{}
#modalLink h3{
text-align: center;
padding: 1em;
}
.screen{
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
padding: 0;
background: rgba(0,0,0,0.5);
z-index: 50;
}
.popup{
position: relative;
margin: 0;
background: #fff;
filter: drop-shadow(0 0 0.2em rgba(0,0,0,0.2));
}
.popup div+div{
margin-top: 1em;
}
.popup .close{
position: absolute;
top: 0.5em;
right: 0.5em;
fill: #000;
cursor: pointer;
z-index: 10;
}