@charset "UTF-8";

*{
margin: 0;
padding: 0;
}

img{
max-width: 100%;
height: auto;
}

body{
min-width: 860px;
}

.container{
width: 760px;
margin: 0 auto;
}

header{
background-color: #f0f0f0;
}

h1{
width: 300px;
/*background-color: #0ff;*/
/*margin-top: 30px;
親子の隣接でmarginが相殺される*/
padding-top: 30px;
/*↑↓どちらか*/
padding: 20px 0
}

nav ul{
display: flex;
list-style-type: none;
background-color: #e3eaff;
justify-content: center;
}

nav a{
padding: 16px 24px;
display: block;
text-decoration: none;
color: #000;
}

nav a:hover{
background-color: #66ff;
color: #fff;
}

h2{
text-align: center;
background-color: #66f;
color: #fff;
font-size: 36px;
padding: 10px;
}

main{
/*background-color: #cf9*/;
}

section{
padding: 80px 0;
}

h3{
margin-bottom: 20px;
font-size: 24px;
color: #66f;
}

h4{
margin-bottom: 10px;
}

section p{
margin-bottom: 20px;
}

.synopsis{
/*background-color: #9cf*/;
}

.card{
display: flex;
justify-content: space-between;
align-items: center;
}

.cardo_image{
width: 240px;
}

.card_text{
width: 450px;
}

.chara{
background-color: #e3eaff;
}

.info{
/*background-color: #fcc;*/
border-bottom: 5px dotted #66f;
}

.review{
/*background-color: #cfc;*/
}

.review ul{
list-style-type: circle;
padding-left:  1em;
}


footer{
background-color: #66f;
color: #fff;
text-align: center;

}