@charset "UTF-8";
*{
	box-sizing:border-box;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.7;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	color:#333;
	font-size:15px;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img{
	vertical-align:bottom;
}

a{
	text-decoration:none;
	color:#333;
}


/*=================
  共通
=================*/

header nav{
	position:relative;
	width:1000px;
	margin:auto;
}
header nav ul{
	float:right;
	overflow:hidden;
	height:57px;
	padding-top:20px;
}
header nav ul li{
	floar:left;
	display:inline-block;
}
header nav ul li a{
	display:block;
	padding:5px 0 5px 18px;
	margin-left:20px;
	font-size:14px;
	position:relative;

}
header nav li a:hover:before,
header nav li a.stay:before{
	content: "";
	display: block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	border-width: 5px;
	border-color: #573496;
	border-style: solid;
	position: absolute;
	left: 0;
	top: 9px;
}
nav .shiunji{
	position:absolute;
	top:0;
	left:-20px;
	z-index:5;
	animation:fadein-up 1s ease 0s  both;
}
#index nav .shiunji{

		animation:fadein-up 1.5s ease 1s  both;
}
.inner1000{
	width:1000px;
	margin:auto;
}

.fl{float:left;}
.fr{float:right;}
.ovh{overflow:hidden;}

.link-button a{
	display:block;
	cursor:pointer;
	width: 210px;
	height: 40px;
	border-radius:20px;
	background-color: #3e2172;
	color:#fff;
	text-align:center;
	line-height:40px;
	background-image:url(../images/link-button-arrow.png);
	background-repeat:no-repeat;
	background-position:center right 25px;
	padding-right:25px;
	transition:.3s ease;
}

.blog-button{
	cursor:pointer;
	margin-bottom:5px;
	width: 210px;
	height: 40px;
	border-radius:20px;
	border:1px solid #3e2172;
	color:#333;
	background-color:#fff;
	background-image:none;
	padding:0;
	text-align:center;
	line-height:40px;
	transition:.3s ease;
}
.blog-button-select{
	background-color:#3e2172 !important;
	color:#fff;
}
.blog-button:hover{
	opacity:.75;
}
.link-button a:hover{
	opacity:.75;
}
#blog .news-topic .link-button a{
	margin-bottom:5px;
}
#top-about .link-button a{
	clear:both;
	position:absolute;
	right:20px;
	bottom:380px;
}
#top-pagoda .link-button a{
	margin:20px auto 0px;
}


footer{
	background-image:url(../images/footer-gara.jpg);
	background-repeat:repeat-x ;
	background-position:top center;
	background-color:#222;
	padding:90px 0;
	color:#fff;

}
footer nav ul{
	display:table;
	width:100%;
	background:#fff;
	/* height:40px; */
	border-radius:5px;
	padding:0 7px;
	border-collapse: collapse;
	border-spacing: 0;
}
footer nav ul li{
	display:table-cell;
	vertical-align:middle;
	padding: 0;
	margin: 0;
	height: 40px;
}
footer nav ul li a{
	text-align:center;
	display:block;
	padding:0 35px;
	color:#333;
	transition:.3s;
	font-size:14px;
}
footer nav ul li a:hover{
	color: #599518;
}
footer nav ul li:not(:last-child) a{
	border-right:1px solid #333;
}
footer .details{
	overflow:hidden;
	padding:30px 0 0px;
}
footer .details > dl{
	float:left;
	width:375px;

	font-size: 15px;
	letter-spacing: .5px;
}
footer .details > dl > dd:nth-of-type(1){
	margin:15px 0;
	border:1px solid #fff;
	border-right:none;
	border-left:none;
	padding:10px 0;
}
footer .address dl{
	display:table;
	width:100%;
}
footer .address dl dt{
	display:table-cell;
	width:35px;
}
footer .address dl dd{
	display:table-cell;
	width:calc(100% - 35px);
}
footer .details aside{
	float:right;
	padding-top:50px;
}
footer .details aside a{
	transition:.3s;
}
footer .details aside a:hover{
	opacity:.75;
}
.tel{
	background:url("../images/tel-icon.png") no-repeat top 18px left;
	padding-left:46px;
	font-size:31px;
	letter-spacing:1px;
	font-family: 'Oswald', sans-serif;
}
.consultation .tel,
#pagoda .contents .tel{
	color: #5b9518;
	font-size:33px;

	background:url("../images/icon-free-green.png") no-repeat top 12px left;
	line-height: 1.3;
}
#pagoda .contents .tel{
	float:left;
}

/*=================
  index.html
=================*/

#top-main{
	clear:both;
	background:url(../images/purtple-back-l.jpg);
	background-position:center top;
	animation:fadein 2s ease 0s  both;

}
#top-main img{
	display:block;
	width:1000px;
	margin:auto;

}
@keyframes blur-image{
	0%{
		-webkit-filter: blur(3px);
		filter: blur(3px);
	}


	100%{
		-webkit-filter: blur(0px);
		filter:  blur(0px);
	}
}
@keyframes fadein{
	0%{opacity:0;}
	100%{opacity:1;}
}
@keyframes fadein-up{
	0%{opacity:0;top:5px;}
	100%{opacity:1;top:0;}
}

#index article{
	animation:fadein 2s ease .5s  both;
}
#blog article,
#pagoda article{
	animation:fadein 2s ease .8s  both;
}



#top-about{
	margin-top:60px;
}
#top-about>div>div:nth-child(1){
	overflow:hidden;
	position:relative;
	height:600px;
	background-image:url(../images/top-photo1.jpg);
	background-position:bottom right;
	background-repeat:no-repeat;
}
#top-about h2{
	float:left;
	width:320px;
	height:160px;
	padding: 60px 0;
	text-align: center;
}
#top-about p{
	width:600px;
	height:160px;
	font-size: 15px;
	float:left;
}

#top-pagoda{
	margin-top:70px;
	background-color: #f9f5ec;
	overflow:hidden;
	padding:55px 0;
}
#top-pagoda .inner1000 > div:nth-child(1){
	width:calc(100% - 822px);
	float:left;
	text-align:center;
	padding-top:20px;
	position:relative;
}
#top-pagoda .inner1000 > div:nth-child(1) p{
	position:absolute;
	top:270px;
	left:0;
	z-index:1;
}
#top-pagoda .inner1000 > section:nth-child(2){
	background:#fff;
	width:822px;
	box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
	float:left;
	padding:30px;
	position:relative;

}
#top-pagoda .inner1000 > section:nth-child(2) div:first-child{
	padding-bottom: 25px;
}
#top-pagoda .eitai-copy{
	position:absolute;
	bottom:0;
	top:260px;
	left:225px;
	right:0;
	width:375px;
	height:63px;
}
#top-pagoda .inner1000 > section:nth-child(2) h3{
	text-align:center;
	background:url(../images/eitai-icon.jpg) no-repeat center left 60px;
	height:77px;
	line-height:77px;
	padding-left:70px;
	font-size:18px;
	font-weight:bold;
}
#top-pagoda .inner1000 > section:nth-child(2) div:nth-child(2) p{
	font-size: 15px;
	margin-top:18px;
}
#top-pagoda .inner1000 > section:nth-child(2) > div:last-child{
	padding-right:400px;
	background:url(../images/eitai-image.jpg) no-repeat bottom right;

	padding-bottom: 15px;
}
.top-notice{
	background-image:url(../images/top-gara.jpg);
	background-repeat:repeat-x;
	background-position:top center;
	padding:103px 0 80px;
}
.carender-topic{
	overflow:hidden;
	margin-bottom:50px;
}
.top-notice ul{
	width:760px;
}

.top-notice h2{
	width:220px;
	text-align:center;
	font-size: 18px;
	margin-bottom:15px;
}
.top-notice .carender-topic h2{
	background:url(../images/event-illust.jpg) no-repeat top left;
	color: #3e2172;
	padding-top:125px;

}
.top-notice > div{
	overflow:hidden;
}
.top-notice .news-topic  h2{
	background:url(../images/blog-illust.jpg) no-repeat top left;
	padding-top:105px;

}

.top-notice > div > ul{
	width:735px;
	border-top:3px #3e2172 solid;
	min-heigh:260px;
}
.top-notice > div > ul > li{
	border-bottom:1px #aaa dotted;
}
.carender-topic ul li{
	padding:8px 13px 5px;
}
.carender-topic ul dt{
	color: #3e2172;
	font-size: 17px;
	font-weight:bold;
}
.carender-topic ul dd,
.news-topic ul dd{
	line-height:1.3;
	font-size: 15px;
}
.date{
	color: #999999;
	font-size: 12px;
	line-height:1.5;
}
.title{
	font-size: 18px;
	font-weight:bold;
	line-height: 1.4;
	height: 26px;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 709px;
	white-space: nowrap;
	margin: 3px 0 1px;
}
.text{
	font-size: 15px;
	position:relative;
	color: #aaa;
}
.text span{
	color: #ae7389;
	position:absolute;
	padding-right:20px;
	right:0;
}
.text span:after{
  content: '';
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 0;
  width: 0;
  height: 0;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid #ae7389;
}
.date span{

	display:inline-block;
	margin-left:5px;
	padding:1px 2px;
	font-size:95%;
	width:60px;
	text-align:center;
	color: #fff;
	border-radius: 2px;
	line-height: 1.3;
}
.date span.news{
	background:#ae7389;
}
.date span.blog{

	background: #745f9b;
}

.news-topic ul a{
	display:block;
	padding:10px 13px 5px;
	transition:.3s;
}
.news-topic ul a:hover{
	background:#f3f3f3;
}
.news-topic ul .text a:hover span{
	text-decoration:underline;
}

/*=================
  サブページ共通
=================*/

.sub-main{
	width:1000px;
	height:249px;
	margin:auto;
	background-repeat:no-repeat;
	background-position:center center;
	padding-top:96px;
	clear:both;
	margin-bottom:75px;
}
#access .sub-main{
	background-image:url(../images/access-title.jpg);
}
#pagoda .sub-main{
	background-image:url(../images/pagoda-title.jpg);
}
#about .sub-main{
	background-image:url(../images/about-title.jpg);
}
#blog .sub-main{
	background-image:url(../images/blog-title.jpg);
}


.sub-main h1{
	color: #333333;
	font-size: 22px;
	text-align:center;
	background-color: #ffffff;
	height:56px;
	width:364px;
	border-radius:28.5px;
	margin:auto;
	line-height:56px;
	box-shadow: 1px 0 3px 3px rgba(0,0,0,.05);
}
.contents{
	padding-bottom:100px;
}

/*=================
  お問い合わせ　アクセス
=================*/
.access-details{
	width:450px;
}
.access-details section{
	border-top:1px solid #999;
	padding:22px;
}
.access-details h2{
	font-weight:bold;
	font-size: 20px;
	margin-bottom:10px;
}

.access-details a{
	color: #6f43be;
	text-decoration:underline;
}
.access-details h2{
	background-position:left center;
	background-repeat:no-repeat;
	padding-left:60px;
}
.access-details .consultation h2{
	background-image:url(../images/icon-tel.png);
}
.access-details .consultation{
	animation:fadein 2s ease .8s  both;
}

.access-details .address h2{
	background-image:url(../images/icon-temple.png);
}
.access-details .address{
	animation:fadein 2s ease 1.1s  both;
}

.access-details .car h2{
	background-image:url(../images/icon-car.png);
}
.access-details .car{
	animation:fadein 2s ease 1.4s  both;
}

.access-details .buss h2{
	background-image:url(../images/icon-buss.png);
}
.access-details .buss{
	animation:fadein 2s ease 1.7s  both;
}
#gmap{
		animation:fadein 2s ease 2s  both;
}

/*=================
  永代供養について
=================*/
#pagoda .contents{
	background-color: #f9f5ec;
	padding:60px 0;
}
#pagoda .contents > .inner1000{
	background:#fff;
	padding:50px;
}
#pagoda .contents > .inner1000 > section{
	padding-bottom:35px;
	border-bottom:5px double #ccc;
}
.pagoda-detail1 > div:nth-child(1){
	background-color: #f3f3f3;
	padding:35px;
}
.pagoda-detail1 >div:nth-child(1) h2{
	padding-left:100px;
	font-weight:bold;
	font-size: 18px;
	line-height:80px;
	background:url(../images/about-pagoda.png) no-repeat left center;
}
.pagoda-detail1 > div:nth-child(1) p{
	width:540px;

	font-size: 16px;
}
.pagoda-detail1 > p:nth-of-type(1){
	text-align:center;
	padding:30px 0;
}
.pagoda-detail2,
.pagoda-detail3{
	padding-top:35px;
}
.pagoda-detail2 h3{
	font-size: 20px;
	padding:20px 10px 10px;
}
.pagoda-detail2 p{
	padding:0 10px;
}
.pagoda-detail3{
	text-align:center;
}
.pagoda-detail3 h2{
	padding:0 0 25px;
}
.pagoda-detail3 p:nth-of-type(2){
	margin:30px;
	font-size: 18px;
}
.pagoda-detail4{
	padding-top:40px;
	border:none!important;
}
.pagoda-detail4 h2{
	float:left;
	line-height:43px;
	padding: 0 40px 0 110px;
	font-size: 16px;
}

/*=================
  紫雲寺について
=================*/

.shiunji-detail{
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
	writing-mode: tb-rl;
	writing-mode: vertical-rl;

	font-size:15px;
	margin:0 auto 60px;
	width:160px;
	line-height:32px;
}
.shiunji-detail dt{
	font-weight:bold;
	height:70px;
	display:inline-block;
}
.shiunji-detail dd{
	display:inline;
}
.shiunji-detail dd:after{
	content:" ";
	display:block;
	height:1px;
	width:1px;
}
.shiunji-photo > img:last-child{
	padding-left:3px;
}

.shiunji-photo{
	margin:70px auto;
	position:relative;
}
.shiunji-history{
	background-image:url(../images/purtple-back-l.jpg);
	padding:0 0 40px;
}
.shiunji-history h2{
	text-align:center;
	padding-right:90px;
	padding:30px 0 20px;
}
.shiunji-history > div{
	background:#fff;
	width:1000px;
	padding:50px 65px;
	margin:auto;
	border-radius:10px;
}
.shiunji-history > div > p{
	line-height:26px;
}
.shiunji-history > div > p:not(:first-child){
	margin-top:20px;
}

.shiunji-photo > img + span{
	position:absolute;
	bottom:-30px;
	color:#666;
	left:0;
}

.myoshinji{
	border-radius: 10px;
	background-color: #f9f5ec;
	padding:0 30px 30px;
	margin-top:100px;
}
.myoshinji h2{
	width: 243px;
	height: 45px;
	background-color: #ffffff;
	border:1px solid #3e2172;
	border-radius:27px;
	line-height:45px;
	text-align:center;
	font-size:18px;
	color:#3e2172;
	position:relative;
	top:-21px;
}
.myoshinji > div{overflow:hidden;}
.myoshinji > div > p{
	width: 200px;
	height: 200px;
	border-radius: 10px;
	background-color: #ffffff;
	float:left;
	text-align:center;
	padding-top:32px;
	margin-top: 8px;
	margin-left: 9px;
}
.myoshinji > div > div{
	float:right;
	width:690px;
}
.myoshinji h3{

	margin-bottom:10px;
	font-size:16px;
	font-weight: bold;
}
.myoshinji > div > div > dl{

	border:1px solid #ab94d3;
	border-left:none;
	border-right:none;
	display:table;
	width:100%;
	padding:9px 0;
	line-height: 1.6;
}
.myoshinji > div > div > dl + dl{
	border-top:none;

}
.myoshinji > div > div > dl dt{
	display:table-cell;
	vertical-align:middle;
	color: #3e2172;
	font-size: 20px;
	position:relative;
	padding-left:30px;
}
.myoshinji > div > div > dl dt:before{
	content:"";
	display:block;
	width:7px;
	height:7px;
	border-radius:50%;
	border:6px solid #3e2172;
	position:absolute;
	top:25px;
	left:0;
}
.myoshinji > div > div > dl dd{
	width:470px;
	display:table-cell;
	font-size:14px;
}
.jizou{
	background-color: #f3f3f3;
	padding:40px 0;
	margin-top:140px;
	color:#555;
}
.jizou > div{
	width:865px;
	margin:auto;
	position:relative;
	padding-top:210px;
}
.jizou > div > p:first-child{
	text-align:center;
	position:absolute;
	top:-70px;
	width:865px;
}
.jizou h2{
	text-align:center;
	margin-bottom:40px;
}
.jizou h2 + p{
	font-weight:bold;
	font-size:16px;
	margin-bottom:10px;
}
.jizou > div > dl{
	border:1px solid #bbb;
	border-left:none;
	border-right:none;
	padding:10px 20px;
	overflow:hidden;
	line-height:1.5;
	background:url(../images/jizou-illust.jpg) no-repeat bottom right 10px;


}
.jizou > div > dl dt{
	width:10%;
	float:left;
	padding-top:5px;
}
.jizou > div > dl dd{
	margin-left:10%;
	width:90%;
	padding-right:30%;
	position:relative;
	padding-top:5px;
}
/*=================
  ブログ
=================*/
#blog .news-topic{
	min-height:300px;
}

#blog-wrap{
	background-color:#f9f5ec;
}
#blog-wrap .inner1000{
	background:#fff;
	padding:100px 150px;
}
#blog-wrap h2{
	text-align:center;
	font-size:20px;
	font-weight:bold;
	width:100%;
	padding-bottom:5px;
	letter-spacing:1px;
	border-bottom:3px solid #3e2172;
	color: #3e2172;
}

#blog-wrap .blog-date{
	color:#999;
	font-size:14px;
	animation:fadein-blur 2s ease-in-out 2.5s  both;
}
#blog-wrap .blog-text{
	margin-top:60px;
	font-size:16px;
	line-height:2.1;
}
#blog-wrap .blog-text p+p{
	margin-top:30px;
}
.blog-next{
	width:600px;
	margin:40px auto;
	display:table;
	border:1px solid #333;
	border-left:none;
	border-right:none;
}
.blog-next p{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	padding:10px;
}
.blog-next p:first-child{
	border-right:1px solid #333;
}
.blog-next p:first-child a{

}
.blog-next p a{
	display:block;
	padding:15px 0;
	transition:.4s ease-in-out;
	position:relative;
}


.blog-next p a:hover{
	background:rgba(255,255,255,1);
	color:#745f9b;
}
.blog-next p a:before{
	content:"";
	display:block;
	position:absolute;
	width:15px;
	height:15px;
	border-top:1px solid #333;
	border-left:1px solid #333;
	top:20px;
	left:20px;
	transform:rotate(-45deg);
}
.blog-next p:last-child a:before{
	transform:rotate(135deg);
	right:20px;
	left:auto;
}
.blog-next p a:hover:before{
	border-color:#ae7389;
}
#blog-title span{
	display:none;
}
.blog-text{
	opacity:0;
	transition:.3s;
	position:relative;
	animation:fadein-blur 2s ease-in-out 3s  both;
}
.blog-text img{
	max-width:100%;
}

@keyframes fadein-blur{
	0%{
		opacity:0;
		-webkit-filter: blur(5px);
		filter: blur(5px);
		}
	100%{
		opacity:1;
		-webkit-filter: blur(0px);
		filter: blur(0px);
		}
}
