@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;700&display=swap');

body {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: white;
    color: #222222;
    max-width: 84rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

nav ul {
    margin-top: 1ex;
    margin-bottom: 1ex;
    list-style: none;
}

.fbox {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
}

header > h1 {
    background-color: transparent;
    background-image: url('img/ReUdo_logo_00006d.png');
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
    color: #00006d;
    text-align: right;
    font-size: large;
    line-height: 120%;
    padding-bottom: 0.25rem;
    border-bottom: 6px solid #ff6600;
    margin-bottom: 0;
}
header > h1:first-line {
    font-size: larger;
}
header > h1 > a {
    color: inherit;
    text-decoration: inherit;
}

header > nav {
    padding: 0;
}
header > nav > ul,
header > nav > dl {
    background-color: #00006d;
    color: white;
    margin-top: 0;
}
header > nav ul {
    padding-left: initial;
}    
header > nav ul > li > a {
    background-color: #00006d;
    color: whitesmoke;
    white-space: nowrap;
    text-decoration: none;
}
header > nav ul > li > a:active,
header > nav ul > li > a:hover {
    background-color: #ff6600;
    text-decoration: underline;
    font-weight: bolder;
}
header > nav > ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-left: initial;
    border: 3px double white;
}
header > nav > ul > li {
    border-right: 2px solid white;
}    
header > nav > ul > li > a {
    display: inline-block;
    min-width: calc(6em + (2 * 0.25rem));
    padding: 0.25ex 0.25em;
}
header > nav > ul > li > a.focus {
    background-color: #ff6600;
}    
header > nav > dl > dt {
    font-size: x-large;
    font-weight: bold;
    text-align: right;
    padding: 0.25ex 0.5em;
}
header > nav > dl > dd {
    margin-left: 0;
}
header > nav > dl > dd > ul > li {
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}
header > nav > dl > dd > ul > li > a {
    display: block;
    padding: 0.5ex 0.5em;
}

footer {
    margin-top: 2rem;
    border-top: 1px solid gray;
    font-size: smaller;
    color: #333333;
}
footer > div.foot {
    border-top: 1px solid gray;
}

main > article > h2 {
    background-color: white;
    background: linear-gradient(to bottom, white 75%, #ff6600);
    border-left: 1em solid #ff6600;
    border-bottom: 4px solid #ff6600;
    border-image: linear-gradient(to bottom, white 25%, #ff6600) 1;
    padding-left: 0.25rem;
    font-size: x-large;
    line-height: 110%;
    text-shadow: 1px 1px 2px gray;
}

main > section > h2,
main > article > section > h3 {
    background-color: #00006d;
    background: linear-gradient(to right bottom, #00006d, navy, mediumblue);
    color: whitesmoke;
    text-shadow: 1px 1px 2px gray;
    font-size: medium;
    font-weight: normal;
    margin-bottom: 1ex;
    padding: 0.25ex 0.5rem;
    border: 4px double silver;
}
main > section > :not(h2),
main > article > :not(h2):not(section),
main > article > section > :not(h3) {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
}
footer section.about {
    border-bottom: 1px solid gray;
}
footer section.about > h3 {
    font-weight: bolder;
    font-size: normal;
    text-align: center;
}
footer section.about > p.description {
    color: #333333;
    margin: 1ex 0.5rem;
}

a[href*="twitter.com/"] {
    background-image: url('img/x-logo/logo-black.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0.8rem;
    padding-left: 1rem;
}
a[href*="www.amazon.co.jp/"] {
    background-image: url('img/Available_At_Amazon_JP/available_at_amazon_rgb_jp_vertical_drk.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 2.4rem auto;
    padding-right: 2.4rem;
}    

p.more {
    margin-top: 1.5ex;
    font-size: small;
    text-align: center;
}

dl > dt.title,
dl > dt > .title {
    color: #111111;
}
dl > dt > a.title {
    font-size: large;
    color: #222222;
    display: inline-block;
    padding-bottom: 0.25ex;
}
dl > dt > a.title:hover,
dl > dt > a.title:active {
    color: #111111;
    font-weight: bolder;
}
dl > dt + dd {
    margin-top: 0.5ex;
}
dl > dd + dt {
    margin-top: 1.5ex;
}
dl > dd {
    margin-left: 1rem;
    font-size: 90%;
}
dl > dd > dl {
    font-size: medium;
}
dl.news > dt {
    clear: both;
}
dl.news > dt > span.date {
    font-size: 80%;
    margin-right: 0.5rem;
}
dl.news > dd > a:first-child > img,
dl.news > dd > img:first-child {
    max-width: 30%;
    max-height: 7.5rem;
    margin-left: 0.5rem;
    margin-top: -0.5ex;
    float: inline-end;
}

ul.banners {
    list-style: none;
    margin-top: 0;
}
ul.banners > li {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
ul.banners > li > a {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    color: #333333;
    text-decoration: none;
}
ul.banners > li > a:hover,
ul.banners > li > a:active {
    color: #222222;
    text-decoration: underline;
    font-weight: bolder;
}
ul.banners > li > a > img {
    width: 40%;
}
ul.banners > li > a > span {
    margin-left: 1rem;
}

dl.terms > dd > ul,
dl.terms > dd > ol,
dl.terms > dd > dt {
    margin-top: 1ex;
}
dl.terms > dd > ul,
dl.terms > dd > ol {
    padding-left: 1.5em;
}

figure {
    width: fit-content;
    margin: 0;
}
figure > * {
    margin-left: auto;
    margin-right: auto;
}    
figure > img {
    display: block;
}
figure > figcaption {
    width: fit-content;
    font-size: smaller;
}

.important  {
    border: 1px solid red;
    padding: 0.125rem;
}

.note {
    font-size: smaller;
}

dialog.news_img::after {
    display: block;
    width: fit-content;
    margin-top: 0.5ex;
    margin-left: auto;
    margin-right: auto;
    font-size: smaller;
    content: '(クリック・タップで閉じます)';
}
dialog.news_img > img {
    max-width: calc(100% - 1rem);
    max-height: calc(100vh - 2.5rem);
    display: block;
    margin: auto;
}

@media (orientation: landscape) and (min-width: 64rem) {
    body {
	padding-left: 2rem;
	padding-right: 2rem;
    }
}

@media (orientation: portrait), (max-width: 32rem) {
    body {
	padding-left: 0;
	padding-right: 0;
    }
    .fbox {
	flex-direction: column;
	justify-content: flex-start;
    }

    ul.banners > li {
	margin-bottom: 1ex;
    }
    ul.banners > li > a {
        flex-direction: column;
        align-items: flex-start;
    }
    ul.banners > li > a > img {
        width: 100%;
    }
    ul.banners > li > a > span {
        margin-left: initial;
    }

    dl.news > dd > img:first-child {
        max-width: 85%;
        max-height: 30vh;
        display: block;
        float: none;
        margin-left: auto;
        margin-right: auto;
    }        
}