/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

#root, #__next {
  isolation: isolate;
}/*-------------body---------------*/
body{
background: linear-gradient(#302833, #960018) fixed;
}

/*--------------header------------*/
header{
background: linear-gradient(to right, black, #960018, black) fixed;
padding: 0 0 10px 0;
outline: #e6b422 1px solid;
}

header a{
text-decoration: none;
color: white;
}

/*--------------link----------------*/
a{
color:#960018;
}

a:hover{
color: #960018;
background: #fdeff2;
}

/*-------------list-----------------*/
header ul{
text-align: center;
}

header li{
display: inline-block;
}

.contents{
display: inline-block;
margin-right: 10px;
}

ul.contents{
margin:0;
padding:0;
}

article ul{
text-align: left;
margin: 0 10px;
padding:10px;
}

/*-------------midasi----------------*/
h1{
font-size: 200%;
padding-top: 5px;
padding-bottom: 5px; 
padding-left: 5px;
padding-right: 5px; 
text-align: center;
}

h2{
color: white;
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 10px auto;
padding: 5px 10px;
}

h3 {
  position: relative;
  display: inline-block;
  padding: 0 65px;
  text-align: center;
}
h3:before,
h3:after {
position: absolute;
top: calc(50% - 3px);
width: 50px;
height: 6px;
content: '';
border-top: solid 2px #000;
border-bottom: solid 2px #000;
}
h3:before {
left: 0;
}
h3:after {
right: 0;
}

h4 {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem 2rem;
border-top: 6px double #000;
border-bottom: 6px double #000;
font-size:125%;
}

/*--------------article-----------------*/
article{
background-color: rgb(196 183 183/0.9);
margin: 15px auto;
width: 95%;
padding: 10px 15px;
border: #e6b422 1px solid;
}

/*-----------------details-----------------*/
details{
margin:0 10px;
}

/*-----------------table--------------------*/
table{
margin:10px 0;
width:100%;
background-color:white;
border-collapse:collapse;
}

th{
background-color:#f5f5f5;
border:solid 1px #ccc;
padding:5px 10px;
width:175px;
font-weight: normal;
text-align: left;
vertical-align: top;
}

td{
border: solid 1px #ccc;
padding:5px 10px;
vertical-align: top;
}

/*----------------------footer----------------------*/
footer{
background:black;
padding: 10px 0 0 0;
outline: #e6b422 1px solid;
margin:10px 0 0 0;
}

.right{
text-align: right;
width:95%;
margin:-8px 0 0 0;
}

/*----------------------horizontal--------------------*/
.deco{
border:1px solid yellow;
position:relative;
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto;
width:400px;
height: 3px;
border:0;
background: linear-gradient(to right, #563b00, #fdcf00, #563b00);
}

/*-------------------pagetop-------------------*/
.pagetop{
color:white;
text-align:right;
}