li#before{
  display: inline-block;
}
li#next{
  display: inline-block;

}
/* パンくずリスト */
div#url{
  padding-left:10px;
  padding-top:10px;
  padding-bottom:10px;
  /*background: #ccf0d2;*/
  line-height: 1.8em;
}
div#url li#before a, div#url li#next a{
  color: #698cb3;
}
.breadcrumb {
  margin-left:0;
}
.breadcrumb li{
  display:inline;/*横に並ぶように*/
  list-style: none;
}
.breadcrumb li:after {/* >を表示*/
  content: '>';
  padding: 0 3px;
  color: #555;
}
.breadcrumb li:last-child:after {
  content: '';
}
.breadcrumb li a, .breadcrumb li span{
  text-decoration: none;
  color: #6e9174;/*色*/
}

div#bloglist li{
  padding: 5px;
}
div#bloglist a{
  display: block;
  padding: 10px;
  border: 1px solid #a7bcb1;
  border-radius: 10px;
  max-width: 500px;
}
div#bloglist div{
  display: inline-block;
  vertical-align: top;
  padding-top: 10px;
  width: calc(100% - 120px)
}
div#bloglist span.diary{
  display: inline-block;
  color: #4bb35c;
  width: 4em;
}
div#bloglist span.study{
  display: inline-block;
  color: #2570fa;
  width: 4em;
}
div#bloglist span.aloma{
  display: inline-block;
  color: #fa7a25;
  width: 4em;
}
div#bloglist span.event{
  display: inline-block;
  color: #ff57dd;
  width: 4em;
}
div#bloglist span.maid{
  color: #000;
}
div#bloglist span.date{
  display: block;
  color: #000;
  padding: 10px;
}
div#bloglist span.title{
  display: block;
  color: #000;
  padding-left: 10px;
}




/* ===== CatchCopy ===== */
div#CatchCopy{
  display: block;
  max-width: 900px;
  margin: auto;
}
div#CatchCopy div#header_img{
  display: inline-block;
  padding-top: 50px;
  padding-bottom: 50px;
}
div#CatchCopy div#header_img:before{
  position: absolute;
  display: block;
  content: "";
  width: 400px;
  height: 250px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transform: rotate(10deg); /* 回転させる */
  background: #f9ae45;
  z-index: -1;
}
div#header_title{
  display: inline-block;
  padding: 100px 0 0 10px;
  vertical-align: top;
}
h1{
  font-size: 1.8em;
  line-height: 2em;
  color: #8e833e;
  text-shadow: 1px 1px 0 rgba(255,255,255,.5);
}
span#date,
span#author{
  display: block;
  font-size: 1.2em;
  color: #8e833e;
  text-shadow: 1px 1px 0 rgba(255,255,255,.5);
}
span.br{
  display: inline-block;
}
h2{
  display: inline-block;
  color: #514f41;
  font-size: 1.5em;
  line-height: 2em;
}
h2 span{
  background: linear-gradient(transparent 70%, #daf2ab 70%);
}


/* ===== ALL ===== */
div.back{
  display: block;
  padding: 20px 0;
}
div.back:nth-child(odd){
  background: #e5fcf5;
}
div.back:nth-child(even){
  background: #a8ebd6;
}
div.script{
  max-width: 800px;
  width: calc(100% - 20px);
  margin: 0 auto;
}
div.script div p{
  display: inline-block;
  max-width: 400px;
  vertical-align: top;
  padding-top: 20px;
  line-height: 1.3em;
}
div.script div img{
  display: inline-block;
  vertical-align: top;
}

/* ===== End ===== */
div#end{
  display: block;
  max-width: 900px;
  margin: auto;
  padding-top: 40px;
}
div#end img{
  border-radius: 150px;
}
div#end div.detail{
  display: inline-block;
  vertical-align: top;
  margin: 5px;
  padding: 10px;
  font-size: 1.2em;
  line-height: 1.4em;
}
div#end div.detail p{
  color: #54513f;
  padding-top: 10px;
}
div#end div#comment{
  padding-top: 30px;
}
div#end div.detail div#btn{
  padding: 10px;
}
div#end div.detail 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;
}


@media only screen and (max-width: 550px) {
	/* ===== CatchCopy ===== */
	div#CatchCopy p{
	  position: absolute;
	  top: 10px;
	  left: 0;
	  padding: 0 0 0 10px;
	  font-size: 1.2em;
	  line-height: 1.5em;
	}
	div#CatchCopy div{
	  display: inline-block;
	  padding-top: 70px;
	  padding-bottom: 50px;
	}
	div#CatchCopy div#header_img:before{
	  width: calc(100% - 30px);
	}
	/* ===== End ===== */
	div#end div.detail{
	  font-size: 1em;
	}
}