@charset "UTF-8";
@import "reset.css";
/* CSS Document */

/*------------------------------------

   common（全ページ共通）

------------------------------------*/

:root {
	--main-color: #412893;
	--bg-color:#DBCDAC;
	--red: #FF5353;

	--main-font: "Zen Old Mincho", serif;
	--sub-font: "Zen Antique", serif;
	--fude-font: "ab-doudoukaisyo", sans-serif;
}
html {
  scroll-behavior: smooth;
}

body{
	font-family: var(--main-font);
	font-weight: 400;
	font-style: normal;
	margin: 0;
	padding: 0;
	position: relative;
	background: url("../img/common/bg2.jpg")repeat top / contain;
}
h1,h2,h3,h4,h5{
	line-height: 1.6;
	font-weight: bold;
}
p,span,li,dt,dd{
	line-height: 1.8;
	letter-spacing: .5px
}

a{
	text-decoration: none;
	word-break: break-all;
	transition: all 0.3s ease-out;
}
picture,img{
	max-width: 100%;
	vertical-align: bottom;
}

.obc{
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: bottom
}

.wrap{
	width: 95%;
	max-width: 1400px;
	margin: 0 auto
}

.flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between
}
@media screen and (max-width:667px){
	.sp-none{display: none!important}
}
@media screen and (min-width:668px){
	.sp-size{display: none!important}
}


/*-------------------------
  フォント関係
-------------------------*/

.zenfont{
  font-family: var(--sub-font);
}

.doudou{
	font-family: var(--fude-font);
}

.font-b{
	font-weight: bold!important;
}


/*-------------------------
  タイトル
-------------------------*/

.title1{
	font-weight: bold;
	font-size: 2em;
	text-align: center;
	position: relative;
	font-family: var(--sub-font);
	margin: 2em auto;
}
.title1:after{
	content: '';
	width: 80px;
	height: 3px;
	background: var(--main-color);
	display: block;
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translate(-50% , 0);
}


.title2{
	font-family: var(--main-font);
	font-size: 1.3em;
	letter-spacing: 2px;
	margin-bottom: 1em;
	display: block;
	font-weight: 900;
}
.title2:before{
	content: '◆';
	color: var(--main-color);
	margin-right: .5em;
	display: inline-block;
}


/*-------------------------
  ボタン関係
-------------------------*/

.btn_wrap{
	margin: 2em auto;
}
.btn1{
	display: inline-block;
	width: 250px;
	text-align: center;
	text-decoration: none;
	outline: none;
	color: black;
	background-color: var(--bg-color);
	position: relative;
	transition: color 0.5s ease;
	padding: 1em;
}
.btn_arrow:after{
	content: '\e920';
	font-family: icomoon;
	color: var(--main-color);
	width: 20px;
	height: 20px;
	display: block;
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translate(0,-50%);
}
.btn1:hover,
.btn_arrow:hover:after{
	color: #fff;
}

.btn1:hover::before {
	transform: scaleX(1);
	transform-origin: left;
}
.btn1::before {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: var(--main-color);
	transform: scaleX(0);
	transform-origin: right;
	transition: all 0.5s ease;
	transition-property: transform;
}
.btn1 span {
	position: relative;
}

/*-------------------------
  テーブル (dl)
-------------------------*/

.table_wrap dl{
	border-bottom: solid 1px #ccc;
}
.table_wrap dt,
.table_wrap dd{
	width: 100%;
	margin: 0;
	padding: .5em
}
.table_wrap dt{
	font-weight: bold;
}
.table_wrap dd a{
	color: var(--black)
}


@media screen and (min-width:768px){
	.table_wrap dt{
		width: 20%;
		text-align: center;
	}
	.table_wrap dd{
		width: 75%}
	
}


/*-------------------------
  アニメーション
-------------------------*/
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeUpTrigger{
    opacity: 0;
}

/*------------------------------------

   header nav

------------------------------------*/
header{
	width: 100%;
	z-index: 1000;
	transition: top 0.3s;
	top: 0;
	margin: 0 auto;
	background: white;
}
.header_logo{
	display: block;
}


/*-------------------------
  sp nav (~1199px)
-------------------------*/
@media (max-width:999px){
	header{
		height: 55px;
		background: #fff;
	}
	.header_logo{
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
		left: 3%;
		width: 160px;
	}
	
	.global-nav{
  		position: fixed;
  		right: -500px;
  		top: 0;
  		width: 90%; 
		max-width: 500px;
  		height: 100vh;
  		background-color: #fff;
  		transition: all .6s;
  		z-index: 2000;
  		overflow-y: auto;
	}
	.global-nav__list {
  		padding: 5em .5em 2em;
  		list-style: none;
		overflow-y: auto;
	}
	.global-nav__item{
		width: 100%;
		padding:1em;
		border-bottom: 1px solid #ccc;
		font-size: 1em
	}
	.global-nav__item > a {
  		text-decoration: none;
  		color: #000;
		letter-spacing: 1px;
		line-height: 1.3em;
	}
	.global-nav__item a:hover {opacity: .8}
	
	.hamburger{
  		cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        position: absolute;
        top: 50%;
		right: 0;
        width: 55px;
        height: 100%;
        transform: translate(0, -50%);
		background: var(--main-color);
	}
	.hamburger__line {
  		position: absolute;
  		left: 50%;
		transform: translate(-50%,0);
  		width: 25px;
  		height: 1px;
    	background-color: #fff;
  		transition: all .6s;
	}
	.hamburger__line--1 {
		top: calc(50% - 10px);
	}
	.hamburger__line--2 {
		top: 50%;
	}
	.hamburger__line--3 {
		top: calc(50% + 10px);
	}
	.black-bg {
  		position: fixed;
  		left: 0;
  		top: 0;
  		width: 100vw;
  		height: 100vh;
  		z-index: 100;
  		background-color: #252525;
  		opacity: 0;
  		visibility: hidden;
  		transition: all .6s;
  		cursor: pointer;
	}
	/* nav-open */
	.nav-open .global-nav {right: 0;}
	.nav-open .black-bg {
 		opacity: .7;
  		visibility: visible;
	}
	.nav-open .hamburger{
		background: none;
		box-shadow: none;
		z-index: 9999;
		right: .5em;
	}
	.nav-open .hamburger__line{
		top: 50%;
		background: #000;
	}
	.nav-open .hamburger__line--1 {
  		transform: rotate(-45deg);
	}
	.nav-open .hamburger__line--2 {
  		width: 0;
  		left: 50%;
	}
	.nav-open .hamburger__line--3 {
  		transform: rotate(45deg);
	}
}

/*-------------------------
  pc nav (1200px~)
-------------------------*/

@media (min-width:1000px){
	header{
		height: 75px;
	}
	header > div.wrap{
		align-items: center;
		height: 100%;
	}
	.header_logo{
		width: 160px
	}
	.global-nav{
		display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        width: calc(100% - 160px);
		padding: 1em 0;
	}
	.global-nav__list{
		display: flex;
		flex-wrap: wrap;
	}
	.global-nav__item{
		margin-right: 1.5em
	}
	.global-nav__item > a{
		color: #000;
		letter-spacing: .5px;
		font-weight: 600;
		display: inline-block;
		text-align: center;
		text-decoration: none;
		outline: none;
		border-bottom: 2px;
		position: relative;
		padding: 0 .5em
	}
	.global-nav__item > a:hover{
		color:var(--main-color)
	}
	.global-nav__item > a:after{
		position: absolute;
		left: 50%;
		bottom: -10px;
		transform: translate(-50% , 0);
		content: '';
		width: 30px;
		height: 2px;
		background: var(--main-color);
		visibility: hidden;
		opacity: 0;
		transition: 0.5s;
	}
	.global-nav__item > a:hover::after {
		visibility: visible;
		opacity: 1;
		transition: 0.5s;
	}
	.hamburger,
	.black-bg,
	.spnav{display: none}
}

@media screen and (min-width:1200px){
	.header_logo{width: 200px}
	.global-nav{
		width: calc(100% - 200px)
	}
}

@media screen and (min-width:1400px){
	.header_logo{width: 250px}
	.global-nav{
		width: calc(100% - 250px)
	}
}

/*-------------------------
  アコーディオン部分
-------------------------*/
.acc_click{
	position: relative;
    cursor: pointer;
	transition: all .5s ease;
}
/*アコーディオンで現れるエリア*/
.box{
    display: none;/*はじめは非表示*/
   
}
.box a{
	text-decoration: none;
	padding: .5em 0;
	display: block;
	font-size: 15px;
	color: #000
}

@media (max-width:1199px){
	.acc_click{
		display: block;
		width: 100%;
	}
	/*アイコンの＋×*/
	.acc_click::before,
	.acc_click::after{
		position: absolute;
		content:'';
		width: 15px;
		height: 1px;
		background-color: #000;
	}
	.acc_click::before{
		top:48%;
		right: 15px;
		transform: rotate(0deg);
	}
	.acc_click::after{    
		top:48%;
		right: 15px;
		transform: rotate(90deg);
	}
	/*　closeというクラスがついたら形状変化　*/
	.acc_click.close::before{
		transform: rotate(45deg);
	}
	.acc_click.close::after{
		transform: rotate(-45deg);
	}
	.box{padding: .5em}
	.box li{margin: .3em 0}
	.box li a:before{
		content: '-';
		color: var(--main-color);
		display: inline-block;
		margin-right: .5em
	}
}

@media (min-width:1200px){
	.dropdown{position: relative}
	
	.box{
		position: absolute;
        margin-top: 2em;
		padding: 1em 1.2em;
        background: #fff;
		width: 150%;
		left: 50%;
		transform: translate(-50% , 0);
		
	}
	.box li{
		position: relative;
		display: inline-block;
	}
	.box li:after{
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 0%;
		height: 1px;
		background-color: var(--main-color);
		transition: width 0.3s ease;
	}
	.box li:hover:after{
		width: 100%;
	}
	.box li:hover a{
		color: var(--main-color);
		font-weight: bold;
	}
}


/*------------------------------------

   footer sp (fix-menu + page-top)

------------------------------------*/

@media (max-width:667px){
	#ft_fix{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50px;
		z-index: 800;
		background: var(--main-color);
		padding-bottom: env(safe-area-inset-bottom);
		border-top: solid .5px #fff;
	}
	#ft_fix li{
		text-align: center;
		width: 50%;
	}
	#ft_fix li:first-child{
		border-right: solid .5px #fff
	}
	#ft_fix a{
		color: #fff;
		display: block;
		padding: .6em;
		font-size: 15px;
	}
	#ft_fix i{
		margin-right: .3em
	}
}
@media (min-width:668px){
	#ft_fix{display: none}
}

/*-------------------------
  page-top
-------------------------*/
@media (max-width:667px){
	.page-top{display: none!important}
}
@media (min-width:668px){
	.page-top{
		position: fixed;
		bottom: 11%;
		right: 3%;
		text-decoration: none;
		z-index: 800;
	}
	.page-top a{
		width: 50px;
		height: 50px;
		background: var(--main-color);
		border-radius: 50%;
		line-height: 50px;
		display: block;
		text-align: center;
		color: #fff
	}
}


/*------------------------------------

   footer nav 

------------------------------------*/

footer{
	background: var(--main-color);
	padding: 3em 0 5em;
	color: #fff;
}

.footer_logo{
	width: 100%;
	text-align: center;
	margin-bottom: 3em;
}
.footer_logo h1{
	max-width: 300px;
	margin: 0 auto;
}
.footer_logo p{
	margin-top: 2em;
}
.footer_logo p a{
	color: #fff;
}

#copy{
	width: 100%;
	text-align: center
}
#copy p{
	font-size: 11px;
}

@media (max-width:1199px){
	.footer_nav{
		display: none;
	}
}
@media (min-width:1200px){
	footer{
		padding: 5em 0 1em;
	}
	
	.footer_logo{
		width: 35%;
		text-align: left;
	}
	.footer_logo h1{
		margin-left: 0;
	}
	
	.footer_nav{
		width: 65%;
	}
	.footer_nav_wrap{
		width: calc(100% / 4);
	}
	.footer_nav_wrap li{
		margin-bottom: 1em;
	}
	.footer_nav_wrap a{
		color: #fff;
		font-weight: bold
	}
	.footer_nav_sub{
		display: flex;
		align-items: center;
		margin-bottom: .6em!important;
	}
	.footer_nav_sub:before{
		content: '';
		display: inline-block;
		width: 13px;
		height: .5px;
		background: #fff;
		margin-right: .8em;
	}
	.footer_nav_sub a{
		font-weight: normal!important;
	}
	.footer_nav_wrap a:hover{
		opacity: .7
	}
	#copy{margin-top: 6em;}
}



/*------------------------------------

   TOP + 一部下層ページ共通 

------------------------------------*/


/*-------------------------
 　年間行事
-------------------------*/

.event_wrap{
	margin: 2em auto;
}
.event_list{
	border-bottom: solid 1px #ccc;
	padding: 1.8em 0;
}

.event_date{
	font-size: 14px;
	line-height: 1;
	font-weight: bold;
		
}

/*------　　画像あり　-------*/

.event_list_figure p{
	margin-top: 1em;
	line-height: 2.2
}
.event_text,
.event_figure_wrap{
	width: 100%;
}


.event_figure_wrap > figure{
	width: 49%;
}

@media (max-width:999px){
	.event_text{
		margin-bottom: 1em
	}
}
@media (min-width:1000px){
	.event_text{
		width: 50%
	}
	.event_figure_wrap{
		width: 40%
	}
}

/*-------------------------
 　坐禅会・梅花講　リンク画像
-------------------------*/

.event_btn a{
	display: block;
	width: 100%;
	margin-bottom: 1em;
	position: relative;
	text-align: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	padding: 8em 0
}
#zazenkai_btn{
	background-image: url("../img/common/zazenkai_bg.jpg")
}
#baikakou_btn{
	background-image: url("../img/common/baikakou_bg.jpg")
}
.event_btn a:after{
	content: '\e920';
	font-family: icomoon;
	border: solid 1px #fff;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	text-align: center;
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	line-height: 50px;
	transition: .3s
}

.event_btn a:hover{
	opacity: .8
}
.event_btn a:hover:after{
	left: 51%;
	transition: .3s
}

@media (min-width:768px){
	.event_btn a{
		width: 50%;
	}
}


.event_btn a span{
	color: #fff;
	font-size: 2em;
	font-family: var(--sub-font);
	letter-spacing: 3px;
}




/*-------------------------
 　アクセス
-------------------------*/

.access_info iframe,
.access_map{
	width: 100%;
	height: 400px;
}

.access_map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.access_info {
	margin-top: 70px;
	gap: 70px;
}

.access_info_text,
.access_info_img {
	width: 100%;
}

.access_info_text hr{margin: 2em auto}

.access_info_text > span {
	font-size: 1.2em;
	display: block;
	font-weight: bold;
}

.access_info_text h4.title2{
	margin-bottom: .5em;
}
.access_info_text p{
	margin-bottom: 2em;
}

.access_info_img {
  margin: auto 0;
}

.access_info_img img {
  max-width: 100%;
  height: auto;
  display: block;
}


@media screen and (max-width: 667px) {
	.access_info {
		flex-direction: column;
		gap: 20px;
	}
}

@media screen and (min-width: 668px) {
	#access iframe,
	.access_info_text,
	.access_info_img {
		flex: 1;
		min-width: 0;
	}
}





/*------------------------------------

   contact

------------------------------------*/

.contact_info{
	margin: 5em auto;
}

.contact_info_inner{
	padding: 1em;
	border-radius: 5px;
	text-align: center;
	background: var(--main-color);
	color: #fff;
	margin: 2em auto;
	max-width: 1200px;
}
.contact_info_inner > p{
	font-weight: bold;
	font-size: 1.2em;
}
.contact_tel_wrap > p:first-of-type{
	font-weight: bold;
	font-size: 1.5em;
	line-height: 1.5;
}
.contact_tel_wrap a{color: #fff}

@media (min-width:768px){
	.contact_info_inner > p{
		font-size: 1.4em
	}
	.contact_tel_wrap > p:first-of-type{
		font-size: 2em;
	}
}

@media (min-width:1200px){
	.contact_tel_wrap > p:first-of-type{
		font-size: 2.5em
	}
}




/*------------------------------------

  form 

------------------------------------*/


/*-------------------------
 　フォーム進行状況
-------------------------*/
.form-flow {
    margin: 3em auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center
}
.form-flow > li {
    margin: .5em 0;
	width: 32%;
    background: #ccc;
    padding: .8em;
    text-align: center;
    border-radius: .3em;
    color: #a7a7a7;
	font-weight: 400;
	letter-spacing: 1px
}
.form-flow li.pickup {
    background: var(--main-color)!important;
    color: #fff;
}
.form-att{
	color:red;
	font-weight: bold;
}

#check .form-att{color: #000}

.form_att{
	color: red;
    margin: 1em auto;
    font-size: 13px;
    line-height: 1.5;
}


/*-------------------------
 　フォーム　テーブル
-------------------------*/

#form{
	margin: 3em auto
}
#form dl{
	border-bottom: solid 1px #ccc;
	padding: 1em 0;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
#form dt,
#form dd{
	padding: .3em 0;
	margin: 0;
	font-size: 1em;
	font-weight: 400;
	letter-spacing: 1px
}
#form dt{
	font-weight: bold;
}
#form dd a{
	color: #000
}

/*-- 必須・任意 --*/

.hissu:before,
.nini:before,
.jidou:before{
	padding: .3em;
	color: #fff;
	margin-right: 10px;
	display: inline-block;
	font-size: 12px;
	line-height: 1;
	width: 30px;
	text-align: center
}

.hissu:before{
	content: '必須';
	background: #f17676;
}
.nini:before{
	content: '任意';
	background: #9b9b9b;
}
.jidou:before{
	content: '自動入力';
	background: #333;
	width: 60px
}

@media screen and (max-width:668px){
	#form dt,
	#form dd{
		width: 100%
	}
}
@media screen and (min-width:668px){
	#form dt{
		width: 26%;
		margin-right: 4%
	}
	#form dd{
		width: 65%;
	}
}


/*-------------------------
 　フォーム　input
-------------------------*/
#form input[type="text"],
#form input[type="email"],
#form input[type="url"],
#form textarea,
#zip_wrap input[type="tel"]{
	border: solid 1px #b6b6b6;
    border-radius: 5px;
    padding: 1em .5em;
    margin: 0;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
}


input[type="text"].w-100,
#form input[type="email"].w-100,
textarea.w-100{
	width: 100%
}

input[type="text"].tel,
input[type="text"].zip{
	padding: 1em
}

textarea{
	line-height: 1.6;
	font-weight: 400
}

@media screen and (max-width:668px){
	input[type="text"].tel,
	input[type="tel"].zip{
		width: auto!important;
	}
}
@media(min-width:668px){
	input[type="text"].tel,
	input[type="tel"].zip{
		width: 10%!important
	}
}

#zip_wrap {
	margin-bottom: .8em;
}
#zip{
	width: 60%!important
}
@media(min-width:668px){
	#zip{
		width: 30%!important
	}
}
#zip_wrap span{
	display: inline-block;
	margin-left: .5em;
}
.confirm #zip_wrap span{
	display: none
}



.mwform-radio-field{
	margin: 1em 1em 1em 0
}
.mwform-zip-field{
	display: block
}

/*-- submit --*/

input[type="submit"]{
	display: block;
    width: 90%;
    max-width: 250px;
    background: var(--main-color);
    text-align: center;
    padding: 1em;
    border: none;
    margin: 3em auto;
    border-radius: 2em;
    color: #fff;
    font-weight: 400;
	outline: none;
	position: relative;
	top: -3px;
	transition: .3s
}
input[type="submit"]:hover{
	top: 0;
	transition: .3s;
	opacity: .8
}

input[type="submit"].back{
	background: #ccc
}
input[type="submit"]{
	appearance: none;
}
.error{margin: .5em auto}
.privacy_check{
	text-decoration: underline

}

/*-------------------------
 送信完了画面
-------------------------*/

.thanks_message h3 {
    margin: 1em auto;
    font-size: 1.5em;
    font-weight: 500;
}
.thanks_message > p {
    line-height: 1.8em;
	margin-bottom: 2em;
	font-weight: 400
}
.thanks_message .contact_tel_wrap{
	margin-bottom: 2em
}
.thanks_message .contact_tel_wrap p{
	margin-bottom: 0
}
.thanks_message a.btn1 span:after{
	display: none
}