@charset "UTF-8";
blockquote {
    position: relative;
    padding: 10px 25px;
    box-sizing: border-box;
    font-style: italic;
    color: #464646;
    border: solid 3px #72ccf4;
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 35px;
    height: 35px;
    border-radius: 0 0 30px;
    content: "\f10d";
    font-family: FontAwesome;
    background: #72ccf4;
    color: #FFF;
    font-size: 22px;
    line-height: 1;
    font-weight: 900;
}

blockquote p {
    position: relative;
    padding: 0;
    margin: 10px 0;
    z-index: 3;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}


/* ページ上部へ戻る
==================================================
*/
#pagetop {
  overflow: hidden;
position: fixed;
bottom: 30px;
right: 15px;
}
#pagetop a {
	background-image: url(img/pagetop_button.png);
	background-position: left top;
	background-repeat: no-repeat;
	display: block;
	height: 43px;
	overflow: hidden;
	text-indent: 200%;
	white-space: nowrap;
	width: 144px;
}
@media screen and (max-width: 899px) {
	#pagetop {
		right: 0;
	}

	#pagetop:before,
	#pagetop:after {
		background-color: #e8e1db;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		content: "";
		display: block;
		height: 4px;
		left: 50%;
		position: absolute;
		top: -8px;
		width: 4px;
	}
	#pagetop:after {
		top: -16px;
	}
	#pagetop a {
		background-color: #e8e1db;
		background-image: none;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		color: #9e9080;
		font-size: 12px;
		height: 25px;
		letter-spacing: 0.1em;
		line-height: 25px;
		padding-left: 46px;
		position: relative;
		text-decoration: none;
		text-indent: 0;
		white-space: normal;
	}
	#pagetop a:before {
		border-bottom: 7px solid #ffffff;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-top: 8px solid transparent;
		content: "";
		height: 0;
		left: 20px;
		position: absolute;
		top: -2px;
		width: 0;
	}
	#pagetop a:after {
		background-color: #ffffff;
		content: "";
		display: block;
		height: 5px;
		left: 25px;
		position: absolute;
		top: 13px;
		width: 6px;
	}
}
@media screen and (max-width: 640px) {
	#pagetop {
		bottom: -62px;
		right: auto;
		width: 100%;
	}
	#pagetop:before,
	#pagetop:after {
		background-color: transparent;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		display: inline;
		height: auto;
		left: auto;
		position: fixed;
		top: auto;
		width: fixed;;
	}
	#pagetop a {
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f4ef), color-stop(100%,#e6dfd9));
		background: linear-gradient(to bottom, #f7f4ef 0%,#e6dfd9 100%);
		font-size: 13px;
		height: 38px;
		line-height: 38px;
		margin: 0 10px;
		padding-left: 0;
		text-align: center;
		width: auto;
	}
	#pagetop a:before {
		border: none;
		height: auto;
		left: auto;
		position: static;
		top: auto;
		width: auto;
	}
	#pagetop a:after {
		background-color: transparent;
		display: block;
		height: auto;
		left: auto;
		position: static;
		top: auto;
		width: auto;
	}
}