/* ■■■■■ Stuff ■■■■■ */
/* ----------------------------------------- */
h1{
  display: inline;
}
h2{
  display: block;
  text-align: left;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  background: #909e7e;
  padding: 20px 20px;
  margin: 50px 0;
}
div#btn{
  padding: 10px;
}
div#btn a{
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #fff;
  background: #80caf7;
  border: solid 2px #67c5ff;
  border-radius: 3px;
  transition: .4s;
  margin-top: 5px;
}
div#list{
  text-align: center;
  margin-bottom: 30px;
}
div#list ul.detail{
  display: inline-block;
  margin-top: 10px;
}
div#list ul.detail li{
  display: inline-block;
  float: left;
  list-style: none;
  border: 1px solid #B3BCA7;
  width: 100%;
}
div#list ul.detail li a{
  text-decoration: none;
}
div#list ul.detail li a span.msg{
  display: block;
  line-height: 1.2em;
  color: #427729;
  width: 100%;
  background-color: rgba(162,237,128,0.9);
}
div#list ul.detail li a span.title{
  display: block;
  line-height: 2em;
  background-color: rgba(115,196,152,0.7);
  color: #fff;
  font-weight: bold;
}
div#list ul.detail li a span.furi{
  display: block;
  line-height: 0.8em;
  font-size: 0.8em;
  background-color: rgba(115,196,152,0.7);
  color: #fff;
  /*font-weight: bold;*/
}
div#list ul.detail li a img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----------------------------------------- */
@media only screen and (min-width: 550px) {
	div#list ul.detail{
	  max-width: 800px;
	  width: 100%;
	}
	div#list ul.detail li{
	  position: relative;
	  width: 150px;
	  height: 200px;
	}
	div#list ul.detail li a span.title{
	  position: absolute;
	  top: calc(200px - 2em);
	  left: 0;
	  width: 7em;	/*20190419 Mod 6.5em→7em*/
	  padding-left: 5px;
	}
	div#list ul.detail li a span.msg{
	  position: absolute;
	  top: calc(200px - 1.2em);
	  left: 0;
	}
}
/* ----------------------------------------- */
@media only screen and (max-width: 549px) {
	div#list ul.detail{
	  width: 100%;
	}
	div#list ul.detail li{
	  position: relative;
	  width: 100px;
	  height: 150px;
	}
	div#list ul.detail li a span.title{
	  position: absolute;
	  top: calc(150px - 2em);
	  left: 0;
	  width: 90px;
	  padding-left: 5px;
	  font-size: 0.8em;
	}
}



div.stuff{
  display: block;
  margin: 0 auto;
}
div.stuff div#image{
  display: inline-block;
  width: 250px;
  margin-right: 20px;
}
div.stuff div#image img{
  width: 250px;
  height: 320px;
  border-radius: 30px;
  object-fit: cover;
}
div.stuff div.detail{
  display: inline-block;
  vertical-align:  top;
  width: calc(100% - 300px);
  max-width: 700px;
  /*min-width: 500px;*/
}
div.stuff div.detail span.roma{
  margin: 0 0 0 30px;
  color: #6fb7a9;
  font-size: 1.2em;
  vertical-align: super;
}
div.stuff div.detail p.sentence{
  margin: 10px 0 20px 0;
  line-height: 1.5em;
}
div.stuff div.detail div.topic{
  margin: 10px 0;
  padding-top: 10px;
}
/*
div.stuff div.detail div.topic ul{
  margin: 10px 0 0 10px;
  line-height: 1.2em;
}
*/
div.stuff div.detail div.shikaku{
  margin: 20px 0;
  line-height: 1.2em;
  background: #ffffe0;
  border: 1px solid #B3BCA7;
  border-radius: 10px;
}
div.stuff div.detail div.shikaku ul{
  margin: 10px 0 10px 10px;
}
div.stuff div.detail div.shikaku ul li span.school{
  font-size: 80%;
}
div.stuff div.detail div.shikaku ul li span.date{
  display: inline-block;
  width: 3.8em;
  vertical-align: text-bottom;
}
div.stuff div.detail div.shikaku ul li span.name{
  display: inline-block;
}
@media only screen and (max-width: 549px) {
	div.stuff div.detail div.shikaku ul li span.name{
	  display: block;
	  margin: 0 0 5px 4em;
	}
	div.stuff div.detail{
	  width: 100%;
	}
	h2 span{
	  display: block;
	  padding-top: 10px;
	  padding-left: 0 !important;
	}
}