:root{
    --text-w: #eee;
    color: #eee;
    font-size: 18px;
    font-family: "游ゴシック", "Yu Gothic", sans-serif;
}

body{
    margin: 0;
}


/* ---- ページの基本レイアウト ---- */

header,footer{
    background: #111;
}
.header-title{
    padding: 0 1rem;
    border-bottom: 1px solid var(--text-w);
}

header nav{
    display: grid;
    grid-auto-flow: column;
    background: #0ff;
}
header nav a{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3em;
    background:linear-gradient(170deg,#333,#888);
    text-decoration: none;
    color: var(--text-w);
}
header nav a:hover{
    background-position: 0 3em;
    transition: background-position .3s;
    opacity: .6;
}
header nav a[data-selected]{
    pointer-events: none;
    background: #0dd;
    color: #444;
}

header h1{
    background: #111;
    margin: 0;
    font-size: 1.3rem;
    text-indent: 1em;
    padding: .3em;
    border-block: 1px solid var(--text-w);
}


main{
    display:grid;
    grid-template-columns: 1fr 250px;
}

article{
    display: grid;
    gap: 10px;
    justify-content: stretch;
    padding: 40px;
    padding-top: 120px;
    background: #888;
}
article h2 {
  margin: 0;
  padding: 0.5rem 1rem;
  background: linear-gradient(90deg, #333, #555);
  border-left: 8px solid #0ff;
  font-size: 1.4em;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
article section {
  background: #f5f5f5;
  color: #222;
  padding: 1.5em;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  position: relative;
}
article section::before {
  content: "🗞️";
  position: absolute;
  top: 0.5em;
  right: 0.8em;
  font-size: 1.2em;
  opacity: 0.3;
}
section h3{
    display: inline-block;
    position: relative;
}
section h3::after{
    content: "";
    height: .3em;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0ff;
    opacity: .5;
}

aside{
    background: #111;
}
aside h2{
    text-indent: 1rem;
}

footer{
    padding: 1rem 0;
    text-align: center;
    border-top: 1px solid var(--text-w);
}


/* ---- ページの要素 ---- */

a.button_m{
    width: 100%;
    max-width: 300px;
    margin: .5rem auto;
    background: #088;
    padding: .5rem;
    border-radius: .5rem;
    color: var(--text-w);
    outline: solid 1px var(--text-w);
    box-shadow: 0 0 10px var(--text-w);
    text-align: center;
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: bold;
    transition: .3s;
}
a.button_m::after{
    display: inline-block;
    content: ">";
    translate: 1rem;
    transition: .3s .1s;
}
a.button_m:hover{
    background: #0aa;
    outline: solid 3px var(--text-w);
    box-shadow: 0 0 0 var(--text-w);
    scale: 1.05;
}
a.button_m:hover::after{
    translate: 2rem;
}

@media (max-width:600px){
    header nav{
        grid-auto-flow: row;
    }
    main{
        grid-template-columns: 1fr;
    }
    object{
        display: none;
    }
}