/*
  Kitten Heart Cascade Style Sheet (727専用 Ver1.1) 
  適応：727
  スマホ対応、統合に向けた修正(1.1)
*/

/* === アーカイブページ(全て反映できたら合体へ) === */

/*大枠設定*/
.kh-novel main{
	margin:0% 0% 0% 0%;
	padding:10px 0px 10px 0px;
}
/*本文の設定*/
.kh-novel .novel,.kh-novel .stationary,.kh-article .blog{/*blogのクラス名は暫定*/
	margin: 10px auto 10px auto;
	padding: 10px;
	background-color:#ffffff;
	box-shadow: 0 1px 3px rgba(0,0,0,.5);
	border-radius: 5px;
	width: 660px;
	text-align: left;
}
.kh-novel .blog article p{/*暫定*/
	/*line-height: 300%!important;*/
}
/* 本文見出し*/
article h1{
	margin: 0px 0 15px 0;
	padding: 3px 3px 0px 3px;
	font-size: 130%;
	line-height: 130%;
	font-weight: normal;
	text-align: left;
	border-bottom: 2px solid #ffcc99;
}
article h2{
	margin: 0px 0 15px 0;
	padding: 3px 3px 0px 3px;
	font-size: 130%;
	line-height: 130%;
	font-weight: normal;
	border-bottom: 2px dashed #ffcc99;
}
article h3{
	margin: 0px 0 15px 0;
	padding: 3px 3px 0px 3px;
	font-size: 100%;
	line-height: 130%;
	font-weight: bold;
}
/*本文*/
/*.text-lh2{
	line-height: 5ex!important;
}*/
/*.blog article section p:first-child{
	margin-top: -2ex;
}*/
article section h2 + p , article section h3 + p{
	margin-bottom: -1.5ex;
}
.text-lh2{
	margin-bottom: -1.5ex;
}
.text-lh3{
	margin-bottom: -1.5ex;
}
.text-lh4{
	margin-bottom: 0ex;
}
/*記事中の写真の大きさ*/
.photo-img-s{height: 27ex;}
.photo-img-m{height: 38ex;}
.photo-img-l{height: 49ex;}
.photo-img-xl{height: 60ex;}
/*注釈*/
.annotated{
	color: #cccccc;
	font-size: 80%;
}
/*強調*/
article strong, .marker{
	background: linear-gradient(transparent 60%, #ffcc99 50%);
	padding: 3px 5px;
}
section{
	position: relative;
	margin: 2em 0 0 0;
}
h1 + section {
	margin: 3ex 0 0 0!important;
}
/*付箋紙(重要な場所) PCのみ*/
@media screen and (min-width: 750px) {
	section.sticky-note:before{
		content: "　";
		position: absolute;
		right: -35px;
		top: -15px;/*-45px*/
		transform: rotate(-10deg);
		width: 100px;
		height: 40px;
		background-color:#fff2cc;
		box-shadow: 1px 1px 3px rgba(0,0,0,.3);
		border-right: 20px #ffcc33 solid;
	}
}
/*マステ1(追記など)*/
section.postscript,section.maste{
	margin-bottom: 60px;
	padding: 20px 10px;
	width: 620px;
	background-color: #ffffff;
	box-shadow: 1px 1px 3px rgba(0,0,0,.3);
	transform: translate(10px, 0px) rotate(-1deg);
}
section.postscript:before{
	content: "";
	position: absolute;
	background: repeating-linear-gradient(-45deg, rgba(255,204,51,.6), rgba(255,204,51,.6) 10px, #ffcc33 0, #ffcc33 20px);
	border-left:2px dotted rgba(0,0,0,.1);
	border-right:2px dotted rgba(0,0,0,.1);
	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
	padding: 1em;
	color: #65513f;
	font-size: 3px;
	left: -10px;
	top: -15px;
	width: 250px;
	height: 20px;
	transform: rotate(-2deg);
}
section.postscript:after{
	content: "";
	position: absolute!important;
	background: #ffcc33;
	background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0)!important;
	border-left:2px dotted rgba(0,0,0,.1);
	border-right:2px dotted rgba(0,0,0,.1);
	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
	background-position: 0 0, 10px 10px;
	background-size: 20px 20px!important;
	padding: 1em;
	color: #65513f;
	font-size: 3px;
	left: auto!important;
	right: -5px!important;
	bottom: -15px!important;
	width: 250px!important;
	height: 20px!important;
	transform: rotate(-2deg);
}
/*マステ2(自サイト広告)*/
section.maste:before,section.maste:after {
	content: "";
	position: absolute!important;
	background-color: #fff;
	background-image: linear-gradient(-45deg, rgba(255,204,51,.6) 25%, transparent 25%, transparent 50%, rgba(255,204,51,.6) 50%, rgba(255,204,51,.6) 75%, transparent 75%, transparent 100%),linear-gradient(45deg, rgba(255,204,51,.6) 25%, transparent 25%, transparent 50%,  rgba(255,204,51,.6) 50%, rgba(255,204,51,.6) 75%, transparent 75%, transparent 100%)!important;
	background-size: 30px 30px!important;
	border-left:2px dotted rgba(0,0,0,.1)!important;
	border-right:2px dotted rgba(0,0,0,.1)!important;
	box-shadow: 1px 1px 3px rgba(0,0,0,.2)!important;
	font-size: 3px!important;
	transform: rotate(-1deg);
}
section.maste:before {
	left: -10px;
	top: -15px;
	width: 250px;
	height: 25px;
}
section.maste:after {
	left: auto!important;
	right: -10px!important;
	bottom: -15px!important;
	width: 250px!important;
	height: 25px!important;
}

/*ノート風*/
section.note p, div.note, .blog p{
	padding-right: 1em;
	padding-left: 1em;
	line-height: 200%;
	background-image: linear-gradient(transparent 0, transparent 78%, #ddd 78%, #ddd 82%, transparent 82%, transparent 100%);
	background-size: 100% 2em;
}
.note p:after,.blog p:after{/*.note .text-lh2:after,.note .text-lh3:after,.note .text-lh4:after{*/
	content: "";
	height: 2em;
	display: block;
	background-image: linear-gradient(transparent 0, transparent 78%, #ddd 78%, #ddd 82%, transparent 82%, transparent 100%);
	background-size: 100% 2em;
}
p.text-lh3 + p{margin-top: 0ex!important;}
p.text-lh3 + p:before{
	content: "";
	position: relative;
	width: 102.5%;
	height: 2em;
	bottom: 2em;
	left: -15px;
	display: block;
	background-image: linear-gradient(transparent 0, transparent 78%, #ddd 78%, #ddd 82%, transparent 82%, transparent 100%);
	background-size: 100% 2em;
}
p.text-lh4 + p{margin-top: 4ex!important;}
p.text-lh4 + p:before{
	content: "";
	position: relative;
	width: 102.5%;
	height: 2em;
	bottom: 2em;
	left: -15px;
	display: block;
	background-image: linear-gradient(transparent 0, transparent 78%, #ddd 78%, #ddd 82%, transparent 82%, transparent 100%);
	background-size: 100% 2em;
}
/*.note .text-lh2:before,.note .text-lh3:before,.note .text-lh4:before{*/
.note:not(:last-of-type) p:first-child:before,.blog section:not(:first-of-type) p:first-child:before,h2 + p:before{
	content: "";
	position: relative;
	width: 100%;
	height: 2em;
	bottom:-2em;
	left: 0;
	display: block;
	background-image: linear-gradient(transparent 0, transparent 78%, #ddd 78%, #ddd 82%, transparent 82%, transparent 100%);
	background-size: 100% 2em;
	z-index: -1000;
}
/*section.note:not(:last-of-type),.blog section:not(:last-of-type){margin-top: 0ex!important;}*/
/*section.note:not(:last-of-type):before,.blog section:not(:last-of-type):before{
	content: "";
	position: relative;
	width: 100%;
	height: 2em;
	bottom:-2em;
	left: 0;
	display: block;
	background-image: linear-gradient(transparent 0, transparent 78%, #ddd 78%, #ddd 82%, transparent 82%, transparent 100%);
	background-size: 100% 2em;
}*/
section.note:not(:last-of-type),.blog section:not(:last-of-type){
	margin-top: 0;
	margin-bottom: 2ex;
}
section.note:not(:last-of-type):after,.blog section:not(:last-of-type):after{
	content: "";
	position: relative;
	width: 100%;
	height: 2em;
	bottom: 0em;
	left: 0;
	display: block;
	background-image: linear-gradient(transparent 0, transparent 78%, #ddd 78%, #ddd 82%, transparent 82%, transparent 100%);
	background-size: 100% 2em;
}
/*↓悪くないが、空きすぎにも感じる↓*/
/*.text-lh3,.text-lh4{
	margin-top: 0em!important;
}
.text-lh3:after,.text-lh4:after{
	content: "";
	height: 2em;
	display: block;
	background-image: linear-gradient(transparent 0, transparent 78%, #ddd 78%, #ddd 82%, transparent 82%, transparent 100%);
	background-size: 100% 2em;
}
.text-lh3:before,.text-lh4:before{
	content: "";
	position: relative;
	width: 100%;
	height: 2em;
	top:6em;
	left: 0;
	display: block;
	background-image: linear-gradient(transparent 0, transparent 78%, #ddd 78%, #ddd 82%, transparent 82%, transparent 100%);
	background-size: 100% 2em;
}*/
/*↑悪くないが、空きすぎにも感じる↑*/

/* 途中に見出しが入るのは、イレギュラー対応? */
section.note+h2,.blog section+h2{
	margin: 2em 0 1em 0;
}
section.note+h3,blog section+h3{
	margin: 3em 0 1em 0;
}
h1 + section.note,h2 + section.note,h3 + section.note,.blog article h1 + section,.blog article h2 + section,.blog article h3 + section {
	margin: 0;
}
.blog article h2:has(+section h3){
	margin-top: 1em;
}
.blog article h2+section{
	margin-top: 1em;
}
.blog section:has(+article h2){
	margin-top: 1em;
}
/*.kh-novel article p,*/.kh-article article p {
    margin: 0;
}


/*記事中の画像*/
article img{
	max-width: 95%;
	margin: 0 auto;
	padding: 0;
	border: 5px solid #ffffff;
	box-shadow: 0 1px 3px rgba(0,0,0,.5);
	position: relative;
	left: 10px;
}
article img:nth-of-type(even) {
		transform: rotate(-1deg);
}
article img:nth-of-type(odd) {
		transform: rotate(1deg);
}
/*追記などは解除*/
section.postscript img,section.maste img{
	border: 0px solid #ffffff;
	box-shadow: 0 0px 0px rgba(0,0,0,0);
	transform: rotate(0);
}
/*記事のトップ画像*/
article .top-image img{
	max-width: 100%;
	border: 0px solid #ffffff;
	box-shadow: 0 0px 0px rgba(0,0,0,0);
	position: static;
	transform: rotate(0);
}
	
/* スマートフォン用 */
@media screen and (max-width: 750px) {

	body.kh-novel{
	}
	.kh-novel main{
	}
	/*本文の設定*/
	.kh-novel div.novel,.kh-novel div.stationary,.kh-article div.blog{
		border: 0px;
		width: 93%;
	}
	
	#kh727 div.text{
		margin:-0.5em 0% 0em 0em; /*ルビを設定した影響*/
	}
	
	.kh-novel footer,.kh-article footer{
		margin: 10px auto;
	    width: 90vw;
	}
	section:last-child :before{
		right: -10px;
	}
	section.postscript,section.maste{
		width: calc(100% - 25px);
		transform: translate(0px, 0px) rotate(0deg);
	}
	.photo-img-s,.photo-img-m,.photo-img-l,.photo-img-xl{
		height: 27ex;
	}

}
/*
2008年が平和な年になりますように。
     Yuna & Kitten Heart.

copyright (c) 2006-2008 Kitten Heart
http://maebashi.cool.ne.jp/kittenheart/
*/