#mainVisual {
background-image: url("/rosen/img/mainVisual.jpg");
width: 100%;
background-repeat: no-repeat;
background-position: center;
padding: 0;
background-size: cover;
}
#rosenHead {display: inline-block;margin: 0 auto 2em;}
#rosenHead h1 {margin: 0 auto 0.5em;}
.st2st {display: flex;background: var(--rail-color);color: #fff;border-radius: 16px;}
.st2st > span {padding:6px; white-space: nowrap;}
.st2st > span:nth-child(2){flex-grow: 2;}
.st2st > span:nth-child(1):before  {content:"● ";}
.st2st > span:nth-child(3):after  {content:" ●";}
.sta-list {margin-top:2em;background:#fff; border: solid 2px var(--rail-color);}
.sta-list summary {background:var(--rail-color);padding:0.5em;}

.sta-list summary:hover, .sta-list summary:active {color: #fff;}
.sta-list ul {display: flex;margin: 0; padding: 0;list-style: none; flex-wrap: wrap;}
.sta-list li:not(:last-of-type):after {content: "\f30b";font-weight: 900;padding: 0 5px;font-family: "Font Awesome 5 Free";color:var(--rail-color); }
#lines {max-width:960px;margin: 0 auto; text-align: left;}
#lines .main, #lines .sub {width:auto;margin:0 2%; padding:0 0 0 20px;}
#lines .station {position:relative;border-left:solid 5px var(--rail-color);padding:1em 0;min-height: 5em;}
#lines h2 {position: absolute;left:-26px; margin:0;line-height: 1;width:calc(100% + 26px);}
#lines h2:before {content: '●';color:var(--rail-color);margin-right: 6px;}
#lines .main h2 {border: 2px var(--rail-color) solid;border-radius: 6px;padding: 8px;background:#fff;}
#lines .sub h2 {padding: 11px; }
#lines .change {margin:0; padding:0 0 0 1em;line-height: 1.5;}
#lines .sub .change {padding-top:3em;}
.cemeList article:first-child {margin-top: calc(2.5em + 10px); }
.cemeList article {display: flex;flex-wrap: wrap;padding:10px;}
.cemeList article > div { background: var(--rail-light-color); }
.cemeList article > div:nth-child(odd) {flex-basis: 30%;}
.cemeList article > div:nth-child(even){flex-basis: 70%;}
.cemeList article .thumb img {width: 100%;height: 100%;object-fit: cover;object-position: 50% 50%;min-width: 0;}
.cemeList article .detail {padding:1em;}
.cemeList article .detail h3 {font-size:130%; margin: 0;}
.cemeList article .detail h3:before {content: "\f35a";font-weight: 900;padding: 0 5px 0 0;font-family: "Font Awesome 5 Free";color:var(--rail-color); }
.cemeList article .detail h3 a {color: #446ab7;text-decoration: underline;}
#lines > div:first-child > div {padding-top:1.5em;}
.tag {display: inline-block;font-size:14px ; color: #FFFFFF;border-radius: 5px;font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;margin-right: 5px;padding:5px;line-height: normal;background-color: #888888;}
.tag i {margin-right:0;}
.tag.norikae{background-color: #FFAC40;padding-right:0;}
.back2list {text-align:center;padding-top:3em; padding-left:20px;}

@media screen and (min-width: 961px) {
#mainVisual {height: 200px;}
}
@media screen and (max-width: 960px) {
#mainVisual {aspect-ratio: 24/5;}
}
@media screen and (max-width:799px){
.cemeList article > div:nth-child(odd) {flex-basis: 35%;}
.cemeList article > div:nth-child(even){flex-basis: 65%;}
}
@media screen and (max-width:640px){
.cemeList article > div:nth-child(odd) {flex-basis: 100%!important;}
.cemeList article > div:nth-child(even){flex-basis: 100%!important;}
}