@charset "UTF-8"

/*基本設定*/

*{
    margin:0;
}

.hero{
    width: 500px;
    left: 50%;
}

.hero2{
    margin: 0;
    padding: 0;
}

.hero3{
    width: 1000px;
    left: 50%;
    
}

figure{
    text-align: center;
}

/* ページ全体の設定 */
body {
	display: grid;
	grid-template-columns: 20px 1fr 20px;
	grid-template-rows: 
		[head] 100px
		[title] auto
		[sub] auto
		[recent] auto
		[foot] 100px;
	grid-row-gap: 20px;
	row-gap: 20px;
	font-family: sans-serif;
}


/* パーツの配置*/
body > * {
	grid-column: 2 / -2;
}

/* ===== PC版の設定 ===== */
@media (min-width: 768px) {

    /* PC版：ページ全体の設定 */
    body {
        grid-template-columns: 0.2fr repeat(6,1fr) 0.2fr;
        grid-column-gap: 5%;
        column-gap: 5%;
        grid-template-rows: 
            [head] 100px
            [title sub] auto
            [recent] auto
            [foot] 100px;
    }

/* PC版：ヘッダー */
header {
    grid-row: head;
    justify-self: center;
    align-self: start;
    font-size: 45px;
}

nav{
    grid-row: head;
    justify-self: center;
    align-self: end;

}

nav a {
    color:#666666;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
}

nav a:hover {
    color: #ef9504;
}

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 20px;
    column-gap: 20px;
}

ul .blocking{
    position: absolute;
    color: yellow;
    font-weight: bold;
    font-size: 15px;  
}

ul .digging{
    position: absolute;
    color: yellow;
    font-weight: bold;
    font-size: 15px;  
}

ul .falling{
    position: absolute;
    color: yellow;
    font-weight: bold;
    font-size: 15px;  
}

ul .moving{
    position: absolute;
    color: yellow;
    font-weight: bold;
    font-size: 15px;  
}

ul .setting{
    position: absolute;
    color: yellow;
    font-weight: bold;
    font-size: 15px;  
}

ul .spiking{
    position: absolute;
    color: yellow;
    font-weight: bold;
    font-size: 15px;  
}

ul .standing{
    position: absolute;
    color: yellow;
    font-weight: bold;
    font-size: 15px;  
}

ul .waiting{
    position: absolute;
    color: yellow;
    font-weight: bold;
    font-size: 15px;  
}

figure.hero{
    grid-column: : 1 /-1;
    grid-row: title / span 2;
}

figure.hero img{
    
    
    vertical-align: bottom;

}
h1{
    background-color: #2744e4;
    text-align: center;
    color: #ffffff;
}

h2{
    background-color: aquamarine;
    text-align: center;
}

/*under-navのデザイン設定*/
.under-nav{
    text-align: center;
    font-size: 20px;
    margin: 0 20px;
    text-decoration: none;
    font-weight: bold;
    color:#666666;
}

.under-nav a{
    text-align: center;
    font-size: 20px;
    margin: 0 20px;
    text-decoration: none;
    font-weight: bold;
    color:#666666;
}


.under-nav li a:hover{
    color: #ef9504;
    text-decoration: none;
}

/*next-navのデザイン設定*/

.next-nav{
    text-align: center;
    font-size: 20px;
    text-decoration: none;
    font-weight: bold;
    color:#666666;
    grid-row: ;
}

.next-nav a{
    text-align: center;
    font-size: 20px;
    text-decoration: none;
    font-weight: bold;
    color:#666666;
}


.next-nav li a:hover{
    color: #ef9504;
    text-decoration: none;
}

.individual_img{
    float: left;
    width: 100px;
    margin: 0 1px;

}

p{
    font-size:20px;
   
}