:root {
    --rvh: clamp(1rem, 0.6rem + 0.40vw, 2rem);
    --radius: 1.5rem;
	
	--nav-max-height: 3.2em;
	--container-width: min(92vw, 80rem);
	
	--float-shadow: 0px 1px 6px 0px #c9c9c9b8;
	
	--v-gap: calc(var(--rvh) * 1.25);
	--h-gap: min(var(--rvh) * 2.5, 2vw);

    /* 色 */
    --c-white: white;
    --c-light: #f6f6f6ff;

    --c-dark: #2f2f2fff;
    --c-dark2: #595959ff;
    --c-dark3: #a1a1a1ff;

    --c-green: #2f6f3dff;
    --c-yellow: #f2bf1cff;
    --c-red: #9a3737ff; --c-red-bg: #ffd9d9;
    --c-blue: #2556a6;
    --c-lightblue: #6b9ded;
}

/* フォント */
@font-face {
    font-family: "M PLUS 1";
    src: url("../../global_font.ttf") format("truetype-variations");
    font-weight: 100 1000;
}
:root {
    --f-padding: 0.15em;

    --f-l4: calc(1.9 * var(--rvh));
    --f-l3: calc(1.7 * var(--rvh));
	--f-l2: calc(1.3 * var(--rvh));
    --f-l1: calc(1.15 * var(--rvh));
    --f-def: calc(0.95 * var(--rvh));
    --f-s1: calc(0.85 * var(--rvh));
    --f-s2: calc(0.8 * var(--rvh));
    --f-s3: calc(0.7 * var(--rvh));
}

html, body {
    font-family: "M PLUS 1";
    font-weight: normal;
    font-size-adjust: ic-height 1;
    line-height: 1.1em;
}
body {
	min-height: fit-content;
}
html, body, dialog {
    color: var(--c-dark);
}
dialog {
	box-sizing: border-box;
	margin: auto !important;
}

p, a, content {
    /*padding-bottom: var(--f-padding);*/
    font-size: var(--f-def);
    margin: 0;
    line-height: 1em;
}
h1, h2, h3, h4, h5, t-hr {
    font-weight: normal;
    margin: 0;

    margin: 1em 0 0.8em 0;
}

h1 {
    font-size: var(--f-l4);
}
h2 {
    font-size: var(--f-l1);
    color: var(--c-green);
}
h4 {
    font-weight: 500;
}

t-hr {
    display: block;
    width: 100%;
    border-bottom: 1px solid var(--c-dark3);
}

/* LINK */
a {
    text-decoration: none;
	color: var(--c-blue);
}
a:hover,
a:active,
a:focus-visible {
    filter: brightness(200%) saturate(50%);
    text-decoration: underline;
}
a[hidden-link] {
    color: var(--c-dark2);
}

a.light {
	color: var(--c-lightblue);
}

/* 路線の色 */
:root {
    --c-l-keihin: #00ACD1;
    --c-l-tokaido: #FF871C;
    --c-l-chuo: #FF5611;
    --c-l-oito: #957490;
    --c-l-saikyo: #12B69E;
    --c-l-senseki: #00ACD2;
    --c-l-keiyo: #FE463E;
    --c-l-yamanote: #73C11D;
    --c-l-joban: #0071C5;
    --c-l-shinetsu: #00ACD1;
    --c-l-hachinohe: #FE463E;
    --c-l-nambu: #FCD800;
    --c-l-tsurumi: #FCD800;
    --c-l-soubu: #0171C5;
    --c-l-koumi: #36863F;
    --c-l-takasaki: #EC8528;
    --c-l-rumoi: #46B034;
    --c-l-oga: #36863F;
    --c-l-narita: #00B786;
    --c-l-kashima: #A85F12;
    --c-l-utsunomiya: #EC8528;
    --c-l-yokosuka: #0071C5;
    --c-l-ome: #FF5611;
    --c-l-tokaidokamotsu: #FF871C;
	--c-l-hachiko: #A09D95;
	--c-l-senzan: #4DC94A;
}

/* レイアウト */
tetsu-container {
    display: block;
    min-width: var(--container-width);
    max-width: var(--container-width);
    margin: 0 auto;
}

tetsu-articlepanel {
    display: flex;
	flex-wrap: wrap;
    column-gap: var(--h-gap);
	row-gap: var(--v-gap);
}

tetsu-articlepanel:not(:last-child) {
    margin-bottom: var(--v-gap);
}

tetsu-articlepanel tetsu-menu {
    flex: 1 1 calc(var(--rvh) * 13.5);
}

tetsu-articlepanel tetsu-menu > * {
    position: sticky;
    top: 5rem;
}

tetsu-articlepanel tetsu-article {
    flex: 10000000 1 calc(var(--rvh) * 40);
    overflow: hidden;
	   
}

tetsu-articlepanel tetsu-article > *:not(:last-child) {
    margin-bottom: var(--v-gap);
}

p + ul {
    margin-top: 0.4em;
}

ul.links {
    list-style-type: none;
    padding: 0;
}


/* FLOAT */
tetsu-float {
    display: block;
    padding: 1.1rem;

	border: 1px solid var(--c-dark3);
    border-radius: var(--radius);
    background-color: var(--c-white);

    transition: all 0.4s ease-in-out;

    scroll-margin-top: 5rem;
	box-sizing: border-box;
}
tetsu-float[small] {
    max-width: calc(var(--rvh) * 40);
    margin: 0 auto;
}

tetsu-float:not([visible]) {
	opacity: 0;
	visibility: hidden;
	transform: translateY(1rem);
}

tetsu-float > h1:first-child,
tetsu-float > h2:first-child,
tetsu-float > h3:first-child,
tetsu-float > h4:first-child,
tetsu-float > h5:first-child,
tetsu-float > *:first-child > h1:first-child,
tetsu-float > *:first-child > h2:first-child,
tetsu-float > *:first-child > h3:first-child,
tetsu-float > *:first-child > h4:first-child,
tetsu-float > *:first-child > h5:first-child,
dialog > *:first-child > h1:first-child,
dialog > *:first-child > h2:first-child,
dialog > *:first-child > h3:first-child,
dialog > *:first-child > h4:first-child,
dialog > *:first-child > h5:first-child {
    margin-top: 0;
}
tetsu-float > h2:first-child + h1:nth-child(2),
tetsu-float > h2:first-child + * > h1:first-child {
    display: inline-block;
    margin: 0.3em 0;
}

/* ANIMATE */
[t-animation] {
	position: relative;
}

[t-animation]::after {
	content: "";
	position: absolute;
	inset: -0.3rem;
    border-radius: calc(var(--radius) / 1.25);

	background-color: var(--c-green);
    filter: brightness(120%);
}


h-split {
    display: block;
    border-bottom: solid var(--c-dark3) 0.1rem;
}

.tetsu_header {
    padding: 0.4em 0.5em;
    background-color: var(--c-green);
    color: var(--c-light);
    border-radius: calc(var(--radius) / 2.5);
}

img {
	border-radius: calc(var(--radius) / 2);
}
tetsu-map img {
	border-radius: unset;
}

/* TEXT */
[text_inside] p, [text_inside] a {
    line-height: 1.5em;
}
[text_inside] p:not(:last-child) {
    margin-bottom: 0.8em;
}
[text_inside] p:has(+ ul) {
	margin-bottom: 0em !important;
}
[text_inside] li:not(:last-child) {
	margin-bottom: 0.3em;
}
[text_inside] h1,
[text_inside] h2,
[text_inside] h3,
[text_inside] h4,
[text_inside] h5 {
	margin-top: 1.2em;
}

div[text_img] {
    display: flex;
    align-items: flex-start;
    column-gap: clamp(1em, 3vw, 4em);
    row-gap: 1em;
    flex-wrap: wrap;
    justify-content: center
}
div[text_img] > *:first-child {
    flex: 2.5 0 0;
    min-width: min(calc(var(--rvh) * 28), 100%);
}
div[text_img] > *:not(:first-child) {
    flex: 1 0 0;
    min-width: min(calc(var(--rvh) * 13), 100%);
    max-width: min(calc(var(--rvh) * 17), 100%);
}
div[text_img] img {
    min-width: 0;
    min-height: 0;
    width: 100%;
}
img + p {
    text-align: center;
    font-size: var(--f-s1);
}

/* #feature */
/*　ユーザーの注目を大切な情報に得るためにフィーチャースタイルを使う。
　　本サイトでは唯一の「bold」が使えるものです。*/
tetsu-float#feature {
    padding-top: 1.75em;
    padding-bottom: 1.75em;
    background-color: var(--c-green);
    color: var(--c-light);
}

tetsu-float#feature h1 {
    font-weight: bold;
}


/* img-gallery */
/*　複数の画像を見せる場合に便利なDOM。*/
img-gallery {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

img-gallery > * {
    flex: 1 1 0;
    min-width: calc(var(--rvh) * 12);
    max-width: calc(var(--rvh) * 15);
}

img-gallery img {
    min-width: 0;
    max-width: 100%;
}


setting-multi {
    display: flex;
    column-gap: 0.3em;
	row-gap: 0.15em;
    align-items: flex-start;
	flex-wrap: wrap;
}
setting-multi *[multi-grow] {
    flex-grow: 1;
}


/* DIALOG */
/* */
dialog {
    max-width: min(99%, calc(var(--rvh) * 28));
    border-radius: var(--radius);
    border: none;
}
dialog > div {
	position: relative;
}
dialog .dialog_close_btn {
	position: absolute;
	
	right: 0;
	top: 0;
	transform: translate(20%, -25%);
}

dialog p.dialog_align_right {
	font-size: var(--f-s1);
	color: var(--c-dark2);
	text-align: right;
}

/* .copy */
/* コピーすることが多いテキスト（取得キー、URL） */
.copy {
    padding: 0.2em 0.1em;
    background-color: var(--c-light);
    border-radius: calc(var(--radius) / 4);
    color: var(--c-dark);

    user-select: all;

    word-break: break-all;
}
.copy[disabled] {
	color: var(--c-dark3);
	user-select: none;
}

/* attr-list */
/* 複数の設定や情報などが書かれているブロック。*/
attr-list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1em;
    row-gap: 0.4em;
}

attr-list > * > * {
    display: contents;
}


/* log-ribbon */
/* ドキュメントの上にあるドキュメント情報*/
log-ribbon {
    display: flex;
    column-gap: 1em;
	row-gap: 0.5em;
    align-items: center;
	flex-wrap: wrap;
}
log-ribbon .tetsu_header {
    flex: 100 0 14em;
}
log-ribbon > *:nth-child(2) {
    flex: 5 0 auto;
    text-align: right;
}

/* log-info */
/* ドキュメントのヘッダー　*/
log-info {
    display: block;
    margin: 2.25em 0.3em 2.5em 0.3em;
}
log-info > *:nth-child(2) {
    margin-top: 0.1em;
    line-height: 1em;
    color: var(--c-dark);
}
log-info > * > * {
    line-height: 1em;
    display: contents;
}
log-info h1 {
    font-size: var(--f-l3);
}