@charset "UTF-8";

/* ▼▼▼ トップ
======================================================*/
.cat_title{
	font-size: 40px;
	margin: 0 0 20px;
	text-align: center;
}

/* mainVisual
--------------------------------------------------- */
#mainVisual {
	position: relative;
}
	#mainVisual::before{
		content: "";
		background: url(../img/bg_red.png) repeat center/130px;
		width: 100vw;
		height: 120%;
		position: absolute;
		left: 0;
		bottom: -100px;
		z-index: -1;
	}

/* スライダー */
#slick-main{
	display: block;
	/* background: #fff; */
	font-size: 0;
	max-height: 1200px;
	width: calc(100% - 180px);
	max-width: 100%;
	margin: 0 0 0 180px;
	position: relative;
	overflow: hidden;
}


/* 効果をかけるためのスタイル設定 */
#slick-main .slick-slide{
	opacity: 1 !important;
}
	#slick-main .slideobject{
		opacity: 0;
		transition: 0s;
	}
	#slick-main .slick-active .slideobject{
		opacity: 1;
		transition: ease 5.0s;
	}
	#slick-main .slick-continue .slideobject{
		opacity: 0;
		transition: ease 5.0s;
	}
	#slick-main figure.image{
		transform: scale(1.0, 1.0);
		transition: 0s;
	}
	#slick-main .slick-active figure.image{
		transform: scale(1.4, 1.4);
		transition: ease 40.0s;
	}
	#slick-main .slick-continue figure.image{
		transform: scale(1.4, 1.4);
		transition: ease 40.0s;
	}

/* スライド周りの基本スタイル */
.slideobject{
	height: 100%;
	padding-top: 54%;
	position: relative;
	z-index: 10;
	overflow: hidden;
	vertical-align: bottom;
}
.slideobject figure.image{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}


/* dotsカスタム */
.slick-dots{
	width: auto;
	right: 30px;
	bottom: 49px;
	z-index: +1;
}
	.slick-dots li{
		display: block;
		width: 10px;
		height: 10px;
	}
	.slick-dots li:not(:last-child){
		margin-bottom: 10px;
	}
	.slick-dots li button {
		border: 0;
		background: transparent;
		display: block;
		height: 10px;
		width: 10px;
		outline: none;
		line-height: 0px;
		font-size: 0px;
		color: transparent;
		padding: 0;
		cursor: pointer;
	}
	.slick-dots li button:before {
		position: absolute;
		top: 0;
		left: 0;
		content: "";
		font-size: 0!important;
		opacity: 1!important;
		background: #fff;
		border-radius: 50%;
		width: 10px!important;
		height: 10px!important;
		line-height: 10px!important;
		text-align: center;
		-webkit-font-smoothing: antialiased;
	}
	.slick-dots li.slick-active button:before{
		content: "";
		background: #A38420;
	}


#mainVisual{
	position: relative;
}
	#mainVisual .item{
		background: #000;
		padding: 10px 0;
		color: #fff;
		font-size: 30px;
		letter-spacing: 6px;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		text-align: center;
		position: absolute;
		top: 155px;
		left: 155px;
		white-space: nowrap;
	}
	#mainVisual .item:nth-of-type(2){
		top: 230px;
		left: 95px;
	}
	#mainVisual .item.en{
		z-index: 2;
		left: 120px;
		writing-mode: inherit;
	}
	#mainVisual .item.en:nth-of-type(3){
		top: 305px;
		left: 120px;
	}
	


/* topics お知らせ
--------------------------------------------------- */
.topics_area{
	background: #000;
	display: flex;
	align-items: center;
	width: 80%;
	max-width: 100%;
	height: 100px;
	margin: 0 0 0 180px;
	position: relative;
	z-index: 2;
}
	.topics_area .title{
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #725D1D;
		width: 150px;
		height: 100%;
		margin-right: 35px;
		color: #fff;
	}
	.topics_area .wrap{
		display: flex;
		width: 100%;
		max-width: 100%;
	}
	.topics_area .wrap > a{
		display: flex;
		margin-right: 35px;
	}
	.topics_area a{
		color: #fff;
	}
	.topics_area .date{
		flex-shrink: 0;
		margin-right: 35px;
	}
	.topics_area .more{
		width: 140px;
		margin-left: auto;
		flex-shrink: 0;
		position: relative;
	}
	.topics_area .more a::after{
		content: "";
		border-top: 1px solid #fff;
		width: 14px;
		position: absolute;
		transform: translateY(-50%);
		top: 50%;
		right: 0;
	}
/* 豆知識
--------------------------------------------------- */

.box_txt{
	margin-left: 70px;
	max-width: 428px;
	width: 100%;
	padding:48px 30px;
	border: 1px solid #fff;
	border-top: none;
	position: relative;
}

.box_txt .p_txt{
	position: relative;
	color: #fff;
	text-align: center;
	line-height: 36px;
}
.bdr_title {
	     color: #fff;
		 font-size: 20px;
		 text-align: center;
		 display: flex;
		 align-items: center;
		 position: absolute;
		 top: -16px;
		 left: 50%;
		 transform: translateX(-50%);
		 width: 100%;
}
.bdr_title:before, 
.bdr_title:after {
		content: '';
		height: 1px;
		flex-grow: 1;
		background-color: #fff;}p.title:before {
		margin-right: 10px;}p.title:after {
		margin-left: 10px;
}
.bdr_title span{
	padding: 0 10px;
}
/* about　蓮華定院について
--------------------------------------------------- */
.about_area{
	background: url(../img/top/bg_main.jpg) no-repeat center bottom/cover;
	padding: 125px 0 240px;
	margin: -50px 0 0;
	position: relative;
	text-align: center;
}
.about_area.en{
	text-align: start;
}

	.about_area .txt_area{
		display: inline-block;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		margin: 0 auto 60px;
		color: #fff;
	}
	.about_area .txt_area.horizontal{
		writing-mode: inherit;
		margin: 0 auto 90px 180px;
		max-width: 1000px;
		width: 100%;
	}
	.about_area .cat_title{
		text-align: left;
		margin: 0;
	}
	.about_area .txt_area p{
		line-height: 2.8;
		margin: 0 20px 0 35px;
	}
	.about_area .txt_area.horizontal p{
		margin: 0;
	}
	.about_area .txt_area .more_view{
		display: block;
		width: 70px;
		height: 239px;
	}
	.about_area .txt_area .more_view.en{
		max-width: 350px;
		width: 100%;
		height: auto;
	}
	.about_area .txt_area .more_view a{
		display: block;
		width: 100%;
		padding: 0 21px;
		text-align: center;
		
	}
	.about_area .txt_area .more_view.en a{
		text-align: start;
		padding: 20px 0 20px 10px;
		position: relative;
	}
	.about_area .txt_area .more_view a::after{
		border: none;
		border-left: 1px solid #fff;
		width: 1px;
		height: 14px;
		top: auto;
		left: 34px;
		bottom: 0;
		right: auto;
	}
	.about_area .txt_area .more_view.en a::after{
		content: "";
		position: absolute;
		top: 50%;
		left: 100%;
		background-color: #fff;
		width: 14px;
		height: 1px;
		transform: translate(-100%, -50%);
	}

/* vr動画 */
.video_area{
	max-width: 800px;
	margin: 0 auto 120px;
	color: #fff;
}
	.video_area h3{
		margin: 0 0 25px;
		font-size: 20px;
		text-align: center;
	}

.video_wrap{
	margin: 0 0 20px;
}
	.video_wrap a{
		display: block;
	}
	.video_wrap a:hover{
		opacity: 1;
	}
	.youtube{
		width:100%;
		padding-bottom: 56.25%;
		height:0px;
		position: relative;
	}
	.video_wrap iframe{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
.video_area p{
	text-align: center;
	font-weight: 500;
}

.photo_wrap{
	max-width: 2050px;
	margin: 0 auto;
	position: relative;
}
	.photo_wrap .photo_01{
		position: absolute;
		width: 20%;
		top: -60px;
		left: 0;
	}
	.photo_wrap .photo_02{
		width: 68%;
		max-width: 100%;
		margin: 0 0 40px auto;
	}
	.photo_wrap .photo_02 img{
		width: 100%;
	}
	.photo_wrap .photo_03{
		margin-left: 13vw;
		overflow: hidden;
		position: relative;
		display: flex;
		align-items: center;
		padding-top: 40px;
	}
	.about_area .photo_03 img{
		width: 30vw;
	}
	.text_sandana{
		margin: 70px 0;
		padding: 0 20px;
	}
	.text_sandana .sd_ttl{
		text-align: center;
		color: #fff;
		font-size: 26px;
		margin-bottom: 28px;
	}
	.text_sandana .sd_dtl{
		text-align: center;
		color: #fff;
		font-size: 16px;
	}

/* trial 宿坊体験
--------------------------------------------------- */
.trial_area{
	background: url(../img/bg_gry.png) repeat center/130px;
	padding: 85px 0 100px;
	position: relative;
}
.trial_area::before{
	content: "";
	background: url(../img/top/bg_01.png) no-repeat center -100px/contain;
	width: 756px;
	height: 546px;
	position: absolute;
	top: 0;
	left: 90px;
}
.trial_area .read{
	text-align: center;
	margin: 0;
	line-height: 2;
	letter-spacing: .075em;
}

.trial_area section{
	position: relative;
	padding: 100px 0 0;
	margin: 0 0 55px;
	z-index: 2;
}
.trial_area section:nth-of-type(2)::after{
	content: "";
	background: url(../img/top/bg_02.png) no-repeat center/contain;
	width: 488px;
	height: 322px;
	position: absolute;
	left: 50%;
	bottom: -133px;
	z-index: 1;
}
	.trial_area .inner_wrap{
		width: calc(100% - (50% - 500px));
		color: #fff;
	}
	.trial_area section:nth-of-type(odd) .inner_wrap{
		padding-right: 20px;
		margin-right: auto;
	}
	.trial_area section:nth-of-type(even) .inner_wrap{
		padding-left: 20px;
		margin-left: auto;
	}
	.trial_area section .inner_wrap::before{
		content: "";
		background: #000;
		width: calc(100% - (50% - 500px));
		height: calc(100% - 120px);
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: -1;
	}
	.trial_area section:nth-of-type(even) .inner_wrap::before{
		background: url(../img/bg_red.png) repeat center/130px;
		left: 0;
		right: auto;
	}

	.trial_area .inner_wrap .photo img{
		max-width: 1500px;
		width: 100%;
	}
	.trial_area section:nth-of-type(odd) .inner_wrap .photo p{
		text-align: right;
	}

	.trial_area .photo{
		position: relative;
	}
	.trial_area .photo .txt_vertical{
		background: #725D1D;
		padding: 10px 0;
		color: #fff;
		font-size: 32px;
		position: absolute;
		top: -45px;
		z-index: 3;
	}
	.trial_area .photo .txt_vertical.en{
		writing-mode: inherit !important;
		top: 50px;
	}
	.trial_area section:nth-of-type(odd) .photo .txt_vertical{
		right: -25px;
	}
	.trial_area section:nth-of-type(even) .photo .txt_vertical{
		left: -25px;
	}

	/* テキストエリア */
	.trial_area .txt_area{
		width: 489px;
		margin-top: -95px;
		position: relative;
	}
	.trial_area section:nth-of-type(odd) .txt_area{
		background: #000;
		padding: 60px 0 60px 55px;
		margin-left: auto;
	}
	.trial_area section:nth-of-type(even) .txt_area{
		background: url(../img/bg_red.png) repeat center/130px;
		padding: 60px 55px 60px 0;
		margin-right: auto;
	}
	.trial_area .txt_area h3{
		margin: 0 0 20px;
		font-size: 30px;
	}
	.trial_area .txt_area p:not(.more_view){
		margin: 0 0 30px;
		line-height: 2;
	}

	.trial_area .photo_sm{
		max-width: 370px;
		width: 100%;
		position: absolute;
		bottom: -60px;
		right: calc(100% - (50% - 200px));
		z-index: 2;
	}
	.trial_area section:nth-of-type(even) .photo_sm{
		left: calc(100% - (50% - 200px));
		right: auto;
	}


/* access アクセス
--------------------------------------------------- */
.access_area{
	background: url(../img/bg_grn.png) repeat center/130px;
	padding: 70px 0 0;
	color: #fff;
}
.access_area .read{
	text-align: center;
	margin: 0;
}
.access_area .map{
	height: 400px;
	margin: 60px 0 0;
}


/*  contact_area　お問い合わせ
--------------------------------------------------- */
.contact_area{
	padding: 60px 0 100px;
}


/* ▼▼▼ 1180px
======================================================*/
@media screen and (max-width: 1180px) {
	.topics_area{
		width: auto;
		margin: 0 20px 0 180px;
	}
	.topics_area .title{
		margin-right: 25px;
	}
}

/* ▼▼▼ 480px〜768px
======================================================*/
@media screen and (max-width: 768px) {

	.cat_title{
		font-size: 30px;
		margin: 0 0 15px;
	}

	/* mainVisual　スライダー
	--------------------------------------------------- */
	#mainVisual::before{
		bottom: -105px;
    height: 130%;
	}
	/* スライダー */
	#slick-main{
		width: 90%;
		height: 120vw;
		overflow: hidden;
		margin: 0 0 0 auto;
	}
	.slideobject{
		padding-top: 134%;
	}
		.slick-dots{
			right: 10px;
			bottom: 20px;
		}
		.slick-dots li,
		.slick-dots li button,
		.slick-dots li.slick-active button:before,
		.slick-dots li button:before{
			width: 6px!important;
			height: 6px!important;
		}
		.slick-dots li:not(:last-child){
			margin-bottom: 6px;
		}

		#mainVisual .item{
			background: #000;
			padding: 5px 0;
			color: #fff;
			font-size: 19px;
			letter-spacing: 3px;
			top: 30px;
			left: 60px;
			bottom: auto;
			white-space: nowrap;
		}
		#mainVisual .item.en{
			left: 23px;
		}
		#mainVisual .item:nth-of-type(2){
			top: 90px;
			left: 23px;
			bottom: auto;
		}
		#mainVisual .item.en:nth-of-type(3){
			left: 23px;
			top: 150px;
		}

	/* topics お知らせ
	--------------------------------------------------- */
	.topics_area{
		width: calc(100% - 15px);
		margin: 0;
		height: 130px;
		font-size: 14px;
	}
		.topics_area .title{
			width: 80px;
			margin-right: 0;
		}
		.topics_area .wrap,
		.topics_area .wrap > a{
			display: block;
			margin-right: 0;
		}
		.topics_area .wrap a{
			padding: 0 15px;
		}
		.topics_area .more{
			width: auto;
			text-align: right;
			margin: 10px 0 0;
		}
		.topics_area .more a::after{
			display: inline-block;
			border: none;
			background: url(../img/arrow.png) no-repeat center/contain;
			width: 14px;
			height: 5.8px;
			position: static;
			margin-left: 5px;
		}

	/* about　蓮華定院について
	--------------------------------------------------- */
	.about_area{
		padding: 145px 0 80px;
		margin: -65px 0 0;
		background-position: 36% bottom;
	}
		.about_area .cat_title{
			font-size: 36px;
		}
		.about_area .txt_area {
			-ms-writing-mode: inherit;
			writing-mode: inherit;
			display: block;
			padding: 0;
			margin: 0 0 80px;
		}
		.about_area .txt_area.horizontal{
			margin: 0 auto 50px;
			padding: 0 20px;
		}
		.about_area .txt_area div:not(.more_view){
			-ms-writing-mode: tb-rl;
			writing-mode: vertical-rl;
			margin: 0 auto;
			min-height: 272px;
		}
		.about_area .txt_area.horizontal div{
			writing-mode: inherit !important;
		}
		.about_area .txt_area .cat_title{
		}
		.about_area .txt_area p{
			line-height: 2.5;
			margin: 0 20px 0 auto;
		}
		.about_area .txt_area .more_view{
			display: table;
			-ms-writing-mode: inherit;
			writing-mode: inherit;
			width: 100%;
			height: 70px;
			margin: 30px auto 0;
		}
		.about_area .txt_area .more_view a{
			display: table-cell;
			vertical-align: middle;
			width: 100%;
			padding: 0;
			text-align: center;
		}
		.about_area .txt_area .more_view a::after{
			border: none;
			border-top: 1px solid #fff;
			width: 14px;
			height: 1px;
			position: absolute;
			top: 34px;
			left: auto;
			right: 0;
			bottom: auto;
		}

	/* vr動画 */
	.video_area{
		max-width: 800px;
		margin: 0 auto 50px;
		padding: 0 20px;
		color: #fff;
	}
		.video_area h3{
			margin: 0 0 20px;
			font-size: 18px;
		}
	.video_wrap{
		margin: 0 0 20px;
	}
	.video_area p{
		font-size: 16px;
	}

	.about_area .photo_01{
		width: 120px;
		margin: 0 0 30px;
		position: static;
	}
		.about_area .photo_02{
			width: 80%;
			margin: 0 0 30px auto;
		}
		.about_area .photo_03{
			width: 100vw;
			margin: 0 0 0;
			flex-direction: column;
			padding: 40px 20px 0;
		}
		.about_area .photo_03 img{
			max-width: 50vw;
			width: 100%;
			margin-right: 50%;
			margin-left: -20px;
		}
		.box_txt{
			margin: 60px 0 0;
			padding: 25px 43px;
		}
		.box_txt .p_txt span{
			top: -41px;
		}
		.box_txt .p_txt span::before{
			width: 126px;
			transform: translate(65%, -50%);
		}
		.box_txt .p_txt span::after{
			width: 126px;
			transform: translate(-65%, -50%);
		}
		/* trial 宿坊体験
		--------------------------------------------------- */
	.trial_area{
		padding: 65px 0 60px;
	}
		.trial_area::before{
			width: 375px;
			height: 260px;
			background-position: center;
			left: -40px;
			top: 5%;
		}
		.trial_area section{
			padding: 75px 0 0;
			margin: 0;
		}
		.trial_area section:nth-of-type(2)::after{
			width: 267px;
			height: 176px;
			left: 41%;
			bottom: -81px;
		}
		.trial_area .inner_wrap{
			width: 100%;
			padding: 0!important;
		}
		.trial_area section .inner_wrap .photo{
			width: calc(100% - 35px);
		}
		.trial_area section:nth-of-type(even) .inner_wrap .photo{
			margin-left: auto;
		}
		.trial_area .read{
			padding: 0 20px;
		}

	.trial_area .photo .txt_vertical{
		padding: 8px 0;
		color: #fff;
		font-size: 17px;
		top: -25px;
		white-space: nowrap;
	}

	/* テキストエリア */
	.trial_area .txt_area{
		max-width: 270px;
		width: 100%;
		margin: 0 auto;
		padding: 0 0 65px!important;
	}
	.trial_area .txt_area h3{
		margin: 0 0 15px;
		font-size: 26px;
	}
		.trial_area .photo_sm{
			width: 60%;
			margin: 30px 0 40px;
			position: static;
		}
		.trial_area section:nth-of-type(even) .photo_sm{
			margin-left: auto;
		}

	/* access アクセス
	--------------------------------------------------- */
	.access_area{
		padding: 45px 0 0;
	}
		.access_area .map{
			height: 300px;
			margin: 40px 0 0;
		}

	/*  contact_area　お問い合わせ
	--------------------------------------------------- */
	.contact_area{
		padding: 40px 0 60px;
	}
}


	/* お知らせ
	--------------------------------------------------- */
.info_wrap .box_txt{
	margin: 40px auto;
	max-width: 800px;
	padding: 28px 30px;
}
.info_wrap .box_txt .p_txt{
	font-size: 15px;
	line-height: 1.8;
}
@media screen and (max-width: 768px){
	.info_wrap .box_txt {
		margin: 40px auto;
		max-width: 90%;
		padding: 28px 20px;
}
	.info_wrap .box_txt .p_txt{
		line-height: 1.6;
		font-size: 14px;
		text-align: left;
}
}