@charset "UTF-8";
body {
  font: 14px/1.231 "ヒラギノ角ゴ Pro W3";
  color: #470819;
  background-color: rgb(255, 251, 231);
  /* background: #fcf5e7 url(../img/BG.png); */
  padding: 0;
}

a {
  text-decoration: none;
}

br {
  line-height: normal;
  letter-spacing: normal;
}

img {
  vertical-align: top;
}


.container{
  /* background-image:url(../img/BG.png); */
  background-color: rgb(255, 251, 231);
  width:100%;
  max-width:640px;
  margin: 0 auto;
}

section{
width:95%;
margin:1em auto;
text-align: center;
}

section div{
  margin-top: 1em;
  margin-bottom: 1em;
}

section ul li div{
  margin:0;
  display: flex;
  align-items: center;
  height: 100%;
}


div.yudo{
width:85%;
margin: auto;
}

img.banner{
width:100%;  
}

footer{
  margin-top: 3em;
  text-align: center;
}

p.PR{
font-size: 1.3em;
font-weight: bold;
text-align: center;
background-color: #fff;
border-radius: 5px;
line-height: 2em;
padding: 10px;  
}

.PR span{
background-color: #ff4c5d;
color: #fff;
border-radius: 7px;
padding: 4px;
margin: 2px;
}

.PR span.green{
  background-color: #fff;
  color: #0a7c05;
}

p.comment{
color: #fff;
position: relative;
padding: 0.5em;
border-radius: 10px;
font-size: 1.3em;
font-weight: bold;
background: #ff4c5d;
margin-top: 2em;
margin-bottom: 15px;
}
p.first{
margin-top:1em;
}

p.comment::after{
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 12px solid transparent;
  border-top: 12px solid #ff4c5d;
  width: 0;
  height: 0;
}

p.second{
  color: #470819;
  background: #fff;
  border: 1px solid #ff4c5d;
  margin-top: 1em;
  font-size: 1em;
  line-height: 1.5em;
  font-weight: normal;
}

p.second::after{
display: none;
}

p.member{
  color: #fff;
  background:  #0a7c05;
  border: 1px solid #0a7c05;
  margin-top: 1em;
  font-size: 1em;
  line-height: 1.5em;
  font-weight: normal;
}

p.member::after{
  border-top: 12px solid #0a7c05;
}


.stamplist{
display: grid;
padding:10px;
grid-template-columns: repeat(3,1fr);
gap: 10px;
}

.stamplist li{
  background-color: #fff;
  list-style-type: none;
  padding:3px;
  border-radius: 3px;
  box-shadow: 0 5px 5px #d0a0a0d6
}


li img{
  width:100%;
}

li div{
  position: relative;
}

li div span{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  display:block;
  background-image: url(../img/sample.png);
  z-index: 10;
}




.fourlist{
display: grid;
padding:10px;
grid-template-columns: repeat(4,1fr);
gap: 10px;
}

.fourlist li{
  background-color: #fff;
  list-style-type: none;
  padding:3px;
  border-radius: 3px;
  box-shadow: 0 5px 5px #d0a0a0d6
}




.onetwoonelist{
display: grid;
padding:10px;
grid-template-columns: repeat(3,1fr);
gap: 10px;
}

.onetwoonelist li{
  background-color: #fff;
  list-style-type: none;
  padding:3px;
  border-radius: 3px;
  box-shadow: 0 5px 5px #d0a0a0d6
}






div.series{
  display: flex; 
  justify-content: center;  
}

.series img{
  width:45%;
  margin: 5px;
}




div.setsumei{
  display: flex; 
  justify-content: center;  
}

.setsumei div{
  width:45%;
  margin:1%;
  display: flex;
  align-items: center;
}

.shadow{
  box-shadow: 0 5px 5px #d0a0a0d6
}


.setsumei div img{
  width:100%;
  vertical-align: middle;
}

.single img{
  width:98%;
}

.threeitem div{
  width:30%;
}

footer{
  background-color: #fff;
  padding:5px;
}

@media screen and (max-width: 640px) {
}