@charset "utf-8";

main{line-height: 1.8;}

.cont-l {
  width: 86.6666%;
  max-width: 1440px;
  margin: 0 auto;
}

.cont-m {
  width: 86.6666%;
  max-width: 1200px;
  margin: 0 auto;
}

.cont-s {
  width: 86.6666%;
  max-width: 1080px;
  margin: 0 auto;
}

.box-flex {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}



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

-------------------------------- */
.sub-tit p{
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 3px;
    line-height: 1;
    text-align: center;
	color: #887f7f;
}
.sub-tit h2{
	margin-bottom: 50px;
	font-size: 23px;
	font-weight: bold;
	text-align: center;
}

@media screen and (max-width: 768px){
	.sub-tit {margin-top: 80px;}
	.sub-tit p {font-size: 14px;}
	.sub-tit h2 {
	    margin-bottom: 25px;
	    font-size: 18px;
	}
}




/* --------------------------------
header
-------------------------------- */
header{
	width: 100%;
	height: 70px;
	position: relative;
	z-index: 999;
}
header figure{
	width: 120px;
	position: absolute;
	left: 15px;
	top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
header figure:hover{opacity: .5;}

@media screen and (max-width: 768px){
	header{height: 55px;}
	header figure{
		width: 100px;
		position: absolute;
		margin: 0 auto;
		left: 0;
		right: 0;
		top: 50%;
	  -webkit-transform: translateY(-50%);
	  transform: translateY(-50%);
	}
}


/* --------------------------------
hero
-------------------------------- */
.fade{animation:fadeIn 4s ease 0s 1 normal;}
@keyframes fadeIn{
	0%{opacity: 0}
	100%{opacity: 1}
}
#hero{
	width: 100%;
	margin-top: 0;
    padding: 0;
    background-color: #bde1da;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* overflow-x: hidden; */
}
#hero::before{
	content: "";
	width: 200px;
	height: 200px;
	display: block;
	background: url(../../img/petphoto/hero/nikukyu.svg) no-repeat;
	background-size: contain;
	position: absolute;
	top: 0%;
	left: 1%;
    z-index: 999;
}
#hero::after{
	content: "";
	width: 200px;
	height: 200px;
	display: block;
	background: url(../../img/petphoto/hero/nikukyu.svg) no-repeat;
	background-size: contain;
	position: absolute;
	bottom: 0%;
	right: 0%;
}
#hero .tit-wrap{width: 29%;}
#hero .tit-wrap figure{
	width: 70%;
	margin-left: auto;
	margin-right: 5%;
}
#hero .tit-wrap h1{
	display: inline-block;
	font-size: 18px;
	margin-top: 20px;
	margin-right: 5%;
	padding: 10px 20px;
	font-weight: bold;
	text-align: right;
	line-height: 18px;
	background: #fff;
	color: #eb8a9e;
	border-radius: 100px;
	float: right;
}
#hero .tit-wrap h1 br{
	display: none;
}
#hero picture{
	width: 70%;
	order: 2;
}
#hero i.batch{
	width: 15%;
	position: absolute;
	right: 15px;
	bottom: 15px;
	z-index: 999;
}
#hero .contact-btn{
	width: 200px;
	height: 70px;
	background-color: #ed97a9;
	position: fixed;
	top: 0;
	right: 0px;
	z-index: 999;
	box-sizing: content-box;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
#hero .contact-btn a{
	padding: 7.5% 0;
	font-size: 21px;
	font-weight: bold;
	letter-spacing: 2px;
	line-height: 1.4;
	color: #fff;
	display: block;
	text-align: center;
}
#hero .contact-btn i{
	font-size: 10px;
	font-style: normal;
}
#hero .contact-btn:hover{
	background-color: #666;
	transition: .4s;
}

@media screen and (max-width: 1367px){
	#hero .tit-wrap h1{font-size: 16px; text-align: center;}
	#hero .tit-wrap h1 br {display: block;}
}
@media screen and (max-width: 1025px){
	#hero .tit-wrap h1{margin-top: 10px; font-size: 15px;}
}
@media screen and (max-width: 768px){
	#hero{
		padding: 0% 0 26%;
		display: block;
	}
	#hero .tit-wrap{
		width: 100%;
		margin-top: -30px;
	}
	#hero .tit-wrap figure {
		width: 70%;
		margin-right: 25px;
	}
	#hero .tit-wrap h1{margin-top: 20px; margin-right: 25px;}
	#hero .tit-wrap h1 br {display: none;}
	#hero picture{width: 100%;}
	#hero i.batch{
		width: 45%;
		bottom: -15%;
		left: 50%;
		transform: translateX(-50%);
	    -webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	}
	#hero::before{
		width: 120px;
		height: 120px;
		top: 45%;
		left: 10px;
	}
	#hero::after{display: none;}
}



/* --------------------------------
intro
-------------------------------- */
#intro{margin-top: 140px;}
#intro .read{text-align: center;}
#intro ul{
	width: 75%;
	max-width: 1260px;
	margin: 100px auto 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#intro ul li{width: 24%;}

@media screen and (max-width: 768px){
  #intro{margin-top: 30px;}
	#intro .read{
		width:90%;
		margin: 0 auto;
		text-align: left;
	}
	#intro ul{
		width: 90%;
		margin: 30px auto 0;
	}
	#intro ul li{
		width: 49%;
		margin-bottom: 2%;
	}
}





/* --------------------------------
sample
-------------------------------- */
#sample{
	padding: 100px 0 150px;
	background-color: #fffaf3;
}
#sample ul.gallery{
	width: 75%;
	max-width: 1260px;
	margin: 100px auto 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
}
#sample ul.gallery li{
	width: 48%;
	margin-bottom: 80px;
	position: relative;
}
#sample ul.gallery li:hover{opacity: .7;}
#sample ul.gallery li.map img {
	display: block;
	width: 80%;
	max-width: 400px;
  margin: 0 auto;
}
#sample ul.gallery li.map:hover{opacity: 1;}
#sample ul.gallery li .label{
	width: 80%;
	padding: 15px 0% 15px 3%;
	background-color: #fff;
	position: absolute;
	top: -40px;
	left: 0;
}
#sample ul.gallery li .label h3{
	font-size: 16px;
	line-height: 1.4;
}
#sample ul.gallery li .label p{
	font-size: 14px;
	font-weight: bold;
}
#sample ul.gallery li .label p span{
	font-size: 15px;
	vertical-align: -3px;
}
#sample .other{
	text-align: center;

}
#sample .other h3{
	font-size: 16px;
	line-height: 3;
}
#sample .other ul{
	width: 65%;
	max-width: 1000px;
	margin: 0 auto 30px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}
#sample .other ul li{width: 20%;}
#sample  .other ul li:nth-child(3){margin-top: 0;}
#sample .other ul li img{
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

@media screen and (max-width: 1281px){
	#sample ul.gallery li .label h3{font-size: 14px;}
	#sample ul.gallery li .label p{font-size: 12px;}
}
@media screen and (max-width: 1025px){
	#sample ul.gallery li .label .sp{display: block;}
}
@media screen and (max-width: 768px){
	#sample{padding: 50px 0 70px;}
	#sample .sub-tit {margin-top: 20px;}
	#sample ul.gallery {
		width: 90%;
		margin: 70px auto 0;
	}
	#sample ul.gallery li {
		width: 100%;
		margin: 0 0 80px;
	}
	#sample ul.gallery li.map {
		margin: 0;
	}
	#sample ul.gallery li:nth-child(3){
		margin-bottom: 0;
	}
	#sample ul.gallery li.chapel-link img{margin: 0 auto;}
	#sample .other {margin-top: 0;}
	#sample .other h3{font-size: 14px;}
	#sample .other ul {width: 90%;}
	#sample .other ul li{
		width: 33.3333%;
		margin-top: 0;
	}
	#sample .other p{
		width: 90%;
		margin:0 auto;
		text-align: left;
		font-feature-settings: "palt";
	}
}




/* --------------------------------
contact
-------------------------------- */
/* #contact{
	margin-top: 0;
 	padding: 5% 0;
 	background-color: #bde1da;
 	position: relative;
}
#contact::before{
	content: "";
	display: block;
	width: 97%;
	height: 90%;
	border: 1px solid;
	border-color: rgba(255,255,255,.8);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: -1;
}
#contact h2{
	font-size: 16px;
	letter-spacing: 2px;
	line-height: 5em;
	text-align: center;
	color: #553d15;
}
#contact ul{
	width: 70%;
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#contact  ul li {
	width: 49%;
	text-align: center;
	position: relative;
}
#contact  ul li.btn span {
	line-height: 0;
	position: absolute;
	left: 30px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
#contact  ul li.btn span i.material-icons {font-size: 24px;}
#contact  ul li.btn a {
	padding: 3.5% 0;
	font-size: 1.2rem;
	font-weight: bold;
	letter-spacing: 3px;
	color: #553d15;
	background: #fff;
	-webkit-border-radius: 40px;
	        border-radius: 40px;
	display: block;
	-webkit-transition: all 0.4s;
	   -moz-transition: all 0.4s;
	    -ms-transition: all 0.4s;
	     -o-transition: all 0.4s;
	        transition: all 0.4s;
	position: relative;
}
#contact  ul li.btn2 p{
	font-size: 11px;
	text-align: center;
	color: #553d15;
}
#contact  ul li.btn2 a{
	color: #fff;
	background: #eb8a9e;
}
#contact  ul li.btn a:hover {
	color: #fff;
	background: #553d15;
}
#contact  ul li.btn2 a:hover{
	color: #eb8a9e;
	background: #fff;
}
#contact  ul li.sp{display: none;}
#contact figure {
	max-width: 640px;
	margin: 25px auto 0;
}

@media screen and (max-width: 768px) {
	#contact{padding: 9% 0;}
	#contact  h2{
	  	font-size: 12px;
	  	line-height: 2em;
	 }
	#contact  ul{width: 100%;}
	#contact  ul li {
	  	width: 90%;
		margin: 3% auto 0;
	 }
	 #contact ul li.btn a {
	 	padding: 5% 0;
	    font-size: 1rem;
	}
	#contact ul li.btn span i.material-icons {font-size: 18px;}
	#contact ul li.btn a b{
		font-size: 10px;
		font-weight: normal;
		text-align: center;
	}
	#contact ul li.sp a{line-height: 1;}
	#contact  ul li.btn2 p{font-size: 10px;}
}

 */




/* --------------------------------
point
-------------------------------- */
#point{
	padding: 0 0 100px;
	position: relative;
}
#point::before{
	content: "";
	display: block;
	width: 100%;
	height: 75%;
	position: absolute;
	top: 20%;
	background-size: auto auto;
background-color: rgba(255, 255, 255, 1);
background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255, 250, 243, 1) 10px, rgba(255, 250, 243, 1) 20px );
}
#point ul{
	width: 60%;
	max-width: 950px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#point ul li{
	width: 45%;
	margin-bottom: 60px;
	background-color: #fff;
	border: 1px solid #887f7f;
	position: relative;
}
#point ul li i{
	width: 60px;
    position: absolute;
    top: -7%;
    left: 5px;
}
#point ul li figure{
	width: 90%;
	margin: 20px auto 0;
}
#point ul li h3{
	margin: 20px 0;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}

@media screen and (max-width: 768px){
	#point{padding: 0 0 70px;}
	#point::before{
		height: 80%;
		top: 15%;
	}
	#point ul{width: 90%;}
	#point ul li{
		width: 48%;
		margin-bottom: 20px;
	}
	#point ul li i {width: 30px;}
	#point ul li figure {margin: 10px auto 0;}
	#point ul li h3 {
		width: 90%;
	    margin: 15px auto 10px;
	    font-size: 11px;
	    line-height: 1.2;
	}
}





/* --------------------------------
plan
-------------------------------- */
#plan{padding-bottom: 100px;}
#plan .sub-tit h2 span {background:linear-gradient(transparent 60%, #ffff00 60%);}
#plan h3{
	font-size: 16px;
	line-height: 5em;
	text-align: center;
}
#plan ul{
	width: 60%;
    max-width: 950px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-wrap: wrap;
}
#plan ul li{
	width: 23%;
	margin: 0 20px 20px 0;
}

#plan ul li:nth-child(7){margin-right: 0;}
#plan .plan{
	width: 55%;
    max-width: 850px;
    margin: 70px auto 0;
}
#plan .plan ul{width: 100%;}
#plan .plan ul li{
	width: 100%;
	margin: 0 0 30px;
	padding: 20px 5% 20px 10%;
	border: 1px solid #887f7f;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	position: relative;
}
#plan .plan ul li i{
	width: 5%;
	position: absolute;
	top: 50%;
	left: -2.5%;
	transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
#plan .plan ul li .text-wrap{width: 200px;}
#plan .plan ul li figure{width:55%;}
#plan .plan ul li .text-wrap p{
	font-size: 13px;
	font-weight: 700;
	line-height: 2;
	color: #8c8080;
}
/* #plan .plan ul li .text-wrap p.batch{color: #fff;}
#plan .plan ul li .text-wrap p.batch span{
	padding: 1% 2%;
    border-radius: 2px;
	background-color: #ff0000;
} */
#plan .plan ul li .text-wrap h4{
	font-size: 22px;
	font-weight: bold;
	line-height: 1em;
}
#plan .plan ul li .text-wrap .cont{margin-top: 20px;}
#plan .plan ul li .text-wrap .cont h5{font-size: 14px;}
#plan .plan ul li .text-wrap .cont p{color: #eb8a9e;}
#plan .plan ul li .text-wrap .cont p span{vertical-align: -7px;}
#plan .plan .campaign{
	width: 70%;
	margin: 40px auto 20px;
	padding: 1% 0;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: .06em;
	color: #fff;
	text-align: center;
	background-color: #d4a939;
	border-radius: 50px;
}
#plan ul li .box {
	width: calc(100% - 220px);
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	text-align: center;
}
#plan ul li .box .half {
	max-width: 48%;
	flex: 0 1 48%;
	padding: 20px 0;
	background: #ed97a9;
	box-sizing: border-box;
	color: #fff;
}
#plan ul li .box .half:last-child {
	background: #82c6b9;
}
#plan ul li .box .half span {
	font-size: 14px;
	line-height: 14px;
}
#plan ul li .box .half .price {
	color: #f7fd34;
	font-size: 40px;
	line-height: 40px;
}

#plan .plan .campaign+p{
	margin: 10px 0 0 ;
	padding-bottom: 20px;
	font-weight: bold;
	text-align: center;
	color: #553d15;
	border-bottom: 1px solid #887f7f;
}
#plan .plan p.cap{
	width: 70%;
	margin: 0 auto;
	padding-top: 10px;
	font-size: 14px;
}

@media screen and (max-width: 1300px){
#plan ul li .box .half {
	max-width: 100%;
	flex: 0 1 100%;
	padding: 20px 0;
	background: #ed97a9;
	box-sizing: border-box;
	color: #fff;
}
#plan ul li .box .half:first-child {
	margin-bottom: 10px;
}
}

@media screen and (max-width: 900px){
	#plan{padding-bottom: 70px;}
	#plan h3 {
	    font-size: 14px;
	    line-height: 3em;
	}
	#plan ul {
	    width: 90%;
	    justify-content: space-between;
	}
	 #plan ul li {
	    width: 32%;
	    margin: 0 0 10px;
	}
	#plan .plan{
		width: 90%;
		margin: 30px auto 0;
	}
	#plan .plan ul li{
		margin: 0 0 25px;
		padding: 20px 5%;
	}
	#plan .plan ul li:nth-child(3){margin-bottom: 10px;}
	#plan .plan ul li .text-wrap {width: 140px;}
	#plan .plan ul li .box {width: calc(100% - 150px);}
	#plan .plan ul li .text-wrap p {font-size: 11px;}
	#plan .plan ul li .text-wrap .cont {margin: 10px 0;}
	#plan .plan ul li .text-wrap .cont h5 {font-size: 12px;}
	#plan .plan ul li i{
		width: 30px;
		top:  -15px;
		left: 30px;
		transform: translate(-50%,0);
	    -webkit-transform: translate(-50%,0);
	    -ms-transform: translate(-50%,0);
	}
	#plan ul li .box .half {
		padding: 15px;
	}
	#plan ul li .box .half span {
		font-size: 12px;
		line-height: 12px;
		letter-spacing: 0;
		font-weight: bold;
	}
	#plan ul li .box .half .price {
		color: #f7fd34;
		font-size: 30px;
		line-height: 30px;
	}
	#plan .plan .campaign{
		width: 100%;
		margin: 20px auto 10px;
		font-size: 14px;
	}
	#plan .plan .campaign+p{
		padding-bottom: 10px;
		font-size: 12px;
		text-align: left;
	}
	#plan .plan p.cap {
	    width: 90%;
	    font-size: 10px;
	}
}
@media screen and (max-width: 768px){
	#plan ul li .box .half {
		padding: 10px 5px;
	}
}

#plan .option {
width: 90%;
max-width: 250px;
margin: 10px auto 0;
text-align: center;
}
#plan .option p {
font-size: 13px;
line-height: 1.6em;
}
#plan .option b {
display: block;
}

@media screen and (max-width: 768px){
#plan .option {
margin-top: 20px;
}
}

/* --------------------------------
wedding
-------------------------------- */

#wedding {
margin-top: 0;
padding: 80px 0;
position: relative;
text-align: center;
}
#wedding::before {
content: "";
display: block;
width: 96%;
height: 100%;
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
right: 0;
background: #fffaf3;
z-index: -1;
}
#wedding h2 {
margin-bottom: 20px;
font-size: 23px;
font-weight: bold;
}
#wedding .label {
margin: 30px 0 20px;
font-size: 18px;
}
#wedding .scene {
margin-top: 20px;
}
#wedding .scene li {
max-width: 23%;
flex: 0 1 23%;
}
#wedding .scene li p {
margin-top: 20px;
font-size: 14px;
line-height: 14px;
}
#wedding .plan-box {
margin-top: 60px;
padding: 60px;
background: #fff;
border-radius: 4px;
}
#wedding .cont {
max-width: 900px;
margin: 0 auto;
}
#wedding .cont .title {
margin: 0 0 20px;
padding: 0 0 20px;
border-bottom: dashed 1px #bb9774;
color: #bb9774;
text-align: center;
}
#wedding .cont .title span {
font-size: 16px;
line-height: 16px;
}
#wedding .cont .title .price {
font-size: 40px;
line-height: 40px;
}
#wedding .cont ul{
margin-top: 30px;
}
#wedding .cont ul li {
max-width: 18%;
flex: 0 1 18%;
margin-bottom: 20px;
}
#wedding .cont .note {
margin-top: 10px;
font-size: 13px;
color: #bb9774;
opacity: 0.8;
}

@media screen and (max-width: 980px) {
#wedding .plan-box {
margin-top: 40px;
padding: 30px;
background: #fff;
border-radius: 4px;
}
#wedding .scene li {
max-width: 48%;
flex: 0 1 48%;
margin-bottom: 40px;
}
#wedding .cont ul::before {
content: "";
display: block;
width: 24%;
order: 1;
}
#wedding .cont ul::after {
content: "";
display: block;
width: 24%;
}
#wedding .cont ul li {
max-width: 24%;
flex: 0 1 24%;
margin-bottom: 10px;
font-size: 13px;
}
}


@media screen and (max-width: 768px) {
#wedding h2 {
margin-bottom: 15px;
font-size: 18px;
}
#wedding .lead {
text-align: left;
}
#wedding .lead br {
display: none;
}
#wedding .scene {
margin-top: 30px;
}
#wedding .scene li {
margin-bottom: 30px;
}
#wedding .scene li:nth-child(3),#wedding .scene li:nth-child(4) {
margin-bottom: 0;
}
#wedding .scene li p {
margin-top: 15px;
font-size: 12px;
line-height: 1.4em;
}
#wedding .cont .title {
padding: 0 0 15px;
}
#wedding .cont .title span {
font-size: 14px;
line-height: 14px;
}
#wedding .cont .title .price {
font-size: 30px;
line-height: 30px;
}
#wedding .cont ul {
margin-top: 20px;
text-align: left;
}
#wedding .cont ul li {
max-width: 31.3333%;
flex: 0 1 31.3333%;
margin-bottom: 10px;
}
#wedding .cont .note {
margin-top: 10px;
text-align: left;
font-size: 12px;
}
}


/* --------------------------------
commitment こだわり
-------------------------------- */
#commitment{margin-top: 120px;}
#commitment .commitment-wrap{
  width: 86.6666%;
  max-width: 1280px;
  margin: 0 auto;
}
#commitment .point{margin-top: 100px;}
#commitment .point:first-child{margin-top: 0px;}
#commitment .point .point-wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#commitment .point .point-wrap figure{width: 45%;}
#commitment .point .point-wrap .txt{width: 50%;}
#commitment .point .point-wrap .txt i{
  font-size: 16px;
  font-style: normal;
  font-weight: 200;
  color: #eb8a9e;
}
#commitment .point .point-wrap .txt h3{
  margin: 15px 0 30px;
  font-size: 23px;
  line-height: 1.6;
  letter-spacing: .23em;
}
#commitment .point .point-wrap .txt p{
  margin-bottom: 30px;
  text-align: justify;
}
#commitment .point01 ul{
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}
#commitment .point01 ul li{width: 32%;}
#commitment .point02 .point-wrap figure,
#commitment .point03 .point-wrap figure{width: 55%;}
#commitment .point02 .point-wrap .txt,
#commitment .point03 .point-wrap .txt{width: 40%;}
#commitment .point02 .point-wrap figure{order: 1;}
#commitment .btn-black{
  width: 86.666%;
  max-width: 400px;
  height: 60px;
  background-color: #553d15;
  border: 1px solid #553d15;
}
#commitment .btn-black a{
  max-width: 400px;
  height: 60px;
  display: block;
  position: relative;
}
#commitment .btn-black a p{
  font-size: 16px;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
#commitment .btn-black a i{
  width: 20px;
  position: absolute;
  top: 48%;
  right: 2%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
#commitment .btn-black a i svg .st0,
#commitment .btn-black a i svg .st1{stroke:#fff;}
#commitment .btn-black:hover{
  background-color: #fff;
  transition: .8s;
}
#commitment .btn-black:hover a p{
  color: #434343;
  transition: .8s;
}
#commitment .btn-black:hover a i svg .st0,
#commitment .btn-black:hover a i svg .st1{stroke:#553d15;}

@media screen and (max-width: 1025px){
  #commitment .point .point-wrap .txt h3{font-size: 20px;}
  #commitment .point .point-wrap .txt h3 br{display: none;}
  #commitment .point .point-wrap .txt p{font-size: 14px;}
}

@media screen and (max-width: 768px){
  #commitment{margin-top: 70px;}
  #commitment .point{margin-top: 60px;}
  #commitment .point .point-wrap{display: block;}
  #commitment .point .point-wrap figure{width: 100%;}
  #commitment .point .point-wrap .txt{
    width: 100%;
    margin-top: 20px;
  }
  #commitment .point .point-wrap .txt i{font-size: 10px;}
  #commitment .point .point-wrap .txt h3{
    margin: 5px 0 20px;
    font-size: 18px;
    text-align: justify;
  }
  #commitment .point01 ul{margin-top: 20px;}
  #commitment .point01 ul li{width: 49%;}
  #commitment .point02 .point-wrap figure,
  #commitment .point03 .point-wrap figure{width: 100%;}
  #commitment .point02 .point-wrap .txt,
  #commitment .point03 .point-wrap .txt{width: 100%;}
  #commitment .btn-black{width: 100%;}
}


/*-------------------------------------
 covid
--------------------------------------*/
#covid {
 margin-top: 120px;
 padding: 100px 5.333%;
 position: relative;
}
#covid h2{
  margin: 15px 0 30px;
  font-size: 23px;
  line-height: 1.6;
  letter-spacing: .23em;
  text-align: center;
}
#covid h2::after {
    content: "";
    width: 43px;
    height: 1px;
    display: block;
    background: #333;
    margin: 30px auto 40px;
}
#covid::before {
 content: "";
 width: 93.75%;
 width : -webkit-calc(100% - 120px);
 width : calc(100% - 120px);
 height: 100%;
 background: #F9f9f9;
 position: absolute;
 top: 0;
 left: 60px;
 z-index: -1;
}
#covid ul {
 max-width: 960px;
 margin: 0 auto;
}
#covid ul li {
 padding: 20px 30px 20px 20px;
 display: flex;
 -webkit-align-items: center;
         align-items: center;
 background: #FFF;
}
#covid ul li:not(:first-child) { margin-top: 5px;}
#covid ul li i {
 width: 20px;
 margin-right: 20px;
}
#covid ul li span {
 width: -weblit-calc(100% - 40px);
 width: calc(100% - 40px);
 letter-spacing: 0.1em;
 line-height: 1.75;
 font-size: 16px;
 font-weight: bold;
}

@media screen and (max-width: 1200px) {
 #covid {
  margin-top: 120px;
  padding: 80px 5.333%;
 }
 #covid::before {
  width: 98%;
  width : -webkit-calc(100% - 10px);
  width : calc(100% - 10px);
  left: 5px;
 }
 #covid ul li {
  padding: 16px 24px 16px 16px;
  -webkit-align-items: flex-start;
          align-items: flex-start;
 }
 #covid ul li:not(:first-child) { margin-top: 5px;}
 #covid ul li i {
  width: 16px;
  margin-right: 16px;
 }
 #covid ul li span {
  width: -weblit-calc(100% - 32px);
  width: calc(100% - 32px);
  margin-top: 2px;
  text-align: justify;
  font-size: 12px;
 }
}

@media screen and (max-width: 768px) {
 #covid {
  margin-top: 60px;
  padding: 50px 5.333%;
 }
 #covid h2{font-size: 21px;}
 #covid ul li { padding: 12px 20px 12px 12px;}
 #covid ul li i {
  width: 16px;
  margin-right: 12px;
 }
 #covid ul li span {
  width: -weblit-calc(100% - 28px);
  width: calc(100% - 28px);
  color: #333;
  font-weight: normal;
 }
}





/*-------------------------------------
faq
--------------------------------------*/
#faq{
	width: 86.666%;
    max-width: 1080px;
    margin: 120px auto 0;
}
/*アコーディオン全体*/
#faq .accordion-area li{margin: 0 0 10px;}
#faq .accordion-area section {margin: 0;}
#faq .title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:18px;
    font-weight: bold;
    color: #553d15;
    padding: 1.5% 3% 1.5% 50px;
    transition: all .5s ease;
    background-color: #fffaf3;
}
/*アイコンの＋と×*/
#faq .title::before,
#faq .title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #553d15;
}
#faq .title::before{
    top:48%;
    right: 15px;
    transform: rotate(0deg);
}
#faq .title::after{
    top:48%;
    right: 15px;
    transform: rotate(90deg);
}
/*　closeというクラスがついたら形状変化　*/
#faq .title.close::before{transform: rotate(45deg);}
#faq .title.close::after{transform: rotate(-45deg);}
/*アコーディオンで現れるエリア*/
#faq .box {
    display: none;/*はじめは非表示*/
    padding: 1.5% 3% 1.5% 50px;
    color: #553d15;
}
#faq .box p{font-size: 16px;}
#faq .title b,
#faq .box b{
	padding-right: 5px;
	font-size: 28px;
	font-weight: 600;
	color: #478980;
}
#faq .box b{color: #ea8a9e;}

@media screen and (max-width: 768px) {
	#faq{margin: 70px auto 0;}
	/*アコーディオン全体*/
	#faq .title {
	    font-size:12px;
	    line-height: 1.2;
	    padding: 5% 10% 5% 2%;
	}
	/*アイコンの＋と×*/
	#faq .title::before,
	#faq .title::after{width: 10px;}
	/*アコーディオンで現れるエリア*/
	#faq .box {padding: 5% 0% 5% 2%;}
	#faq .box p{font-size: 11px;}
	#faq .title b,
	#faq .box b{font-size: 18px;}
}






//*-------------------------------------
flow
--------------------------------------*/
#flow {
 padding: 180px 0 80px;
 position: relative;
}
/* #flow::before {
 content: "";
 width: 100%;
 height: 440px;
 display: block;
 position: absolute;
 bottom: 0;
 left: 0;
 background: #fbfaf9;
 z-index: -1;
} */
#flow .flow-wrap {
 letter-spacing: -5px;
 font-size: 0;
}
#flow .flow-wrap .txt-wrap {
 width: 28.125%;
 padding: 0 5%;
 display: inline-block;
 vertical-align: top;
}
#flow .flow-wrap .txt-wrap h2 {
 padding-top: 0.5em;
 letter-spacing: 0.1em;
 line-height: 1.33;
 font-size: 30px;
 font-weight: normal;
}
#flow .flow-wrap .txt-wrap h2 + p {
 padding-top: 1.5em;
 line-height: 2;
 letter-spacing: 0.1em;
 font-size: 14px;
}
#flow .flow-wrap .scroll-wrap {
 width: 71.875%;
 display: inline-block;
 vertical-align: top;
 overflow: hidden;
}
#flow .flow-wrap .scroll-wrap ul {
 letter-spacing: -5px;
 font-size: 0;
 white-space: nowrap;
}
#flow .flow-wrap .scroll-wrap ul li {
 width: 360px;
 margin-right: 40px;
 display: inline-block;
 vertical-align: top;
 cursor: grab;
 white-space: break-spaces;
}

#flow .flow-wrap .scroll-wrap ul li figure {
 position: relative;
 color: #fff;
}
#flow .flow-wrap .scroll-wrap ul li figure::before {
 content: "";
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 0 0 70px 70px;
 border-color: transparent transparent #f08c97 transparent;
 position: absolute;
 right: 0;
 bottom: 0;
}
#flow .flow-wrap .scroll-wrap ul li figure figcaption {
 position: absolute;
 right: 10px;
 bottom: 10px;
 font-size: 30px;
 font-weight: bold;
 line-height: 30px;
 color: #fff;
 letter-spacing: 0.02em;
}
#flow .flow-wrap .scroll-wrap ul li figure figcaption small {
 padding-right: 3px;
 font-size: 12px;
 line-height: 30px;
 font-weight: bold;
 color: #fff;
}
#flow .flow-wrap .scroll-wrap ul li dl { padding-top: 30px;}
#flow .flow-wrap .scroll-wrap ul li dl dt {
 line-height: 1.33;
 font-size: 20px;
 font-weight: 500;
 font-weight: bold;
 letter-spacing: 0.02em;
}
#flow .flow-wrap .scroll-wrap ul li dl dd {
 padding-top: 1.25em;
 font-size: 14px;
 letter-spacing: 0.02em;
 line-height: 1.8;
}
#flow .flow-wrap .scroll-wrap .scroll {
 width: 226px;
 padding-top: 10px;
}
#flow .flow-wrap .scroll-wrap .scroll.sp {
 display: none;
}

@media screen and (max-width: 1440px) {
 #flow .flow-wrap .txt-wrap { width: 33.333%;}
 #flow .flow-wrap .scroll-wrap { width: 66.6666%;}
 #flow .flow-wrap .scroll-wrap ul li { width: 306px;}
 #flow .flow-wrap .scroll-wrap .scroll {
  padding-top: 35px;
 }
}
@media screen and (max-width: 1200px) {
 #flow { padding: 80px 0 60px;}
 #flow::before { height: 320px;}
 #flow .flow-wrap .txt-wrap h2 { font-size: 24px;}
 #flow .flow-wrap .txt-wrap h2 + p { font-size: 12px;}
 #flow .flow-wrap .scroll-wrap ul li {
  width: 288px;
  margin-right: 30px;
 }
 #flow .flow-wrap .scroll-wrap ul li dl { padding-top: 20px;}
 #flow .flow-wrap .scroll-wrap ul li dl dt { font-size: 16px;}
 #flow .flow-wrap .scroll-wrap ul li dl dd { font-size: 12px;}
 #flow .flow-wrap .scroll-wrap .scroll {
  width: 180px;
  padding-top: 25px;
 }
}
@media screen and (max-width: 768px) {
 #flow { padding: 0;}
 #flow::before { height: 256px;}
 #flow .ja-tit { margin-bottom: 15px;}
 #flow .flow-wrap .txt-wrap {
  width: 100%;
  padding: 0 6.666%;
  display: block;
 }
 #flow .flow-wrap .txt-wrap h2 {
  padding: 0px 0 10px;
  font-size: 20px;
 }
 #flow .flow-wrap .txt-wrap h2 br { display: none;}
 #flow .flow-wrap .txt-wrap h2 + p {
  padding-top: 0;
  font-size: 11px;
 }
 #flow .flow-wrap .scroll-wrap {
  width: 100%;
  padding: 20px 0 0 6.666%;
 }
 #flow .flow-wrap .scroll-wrap .scroll {
 display: none;
}
#flow .flow-wrap .scroll-wrap .scroll.sp {
 display: block;
}
 #flow .flow-wrap .scroll-wrap ul li {
  width: 260px;
  margin-right: 25px;
 }
 #flow .flow-wrap .scroll-wrap ul li dl { padding-top: 15px;}
 #flow .flow-wrap .scroll-wrap ul li dl dd { padding-top: 1em;}
 #flow .flow-wrap .scroll-wrap .scroll {
  width: 150px;
  padding-top: 0;
  padding-bottom: 18px;
 }
}






/*--------------------------------
 chapel-contact
----------------------------------*/
#chapel-contact ul.cate {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  box-shadow: 0 0 0 1px #efefef inset;
  text-align: center;
}
#chapel-contact ul.cate li {
  flex: 0 1 16.66666666%;
  max-width: 16.66666666%;
  box-shadow: 1px 0 0 0 #efefef inset;
  padding: 15px 0;
  font-size: 1.5rem;
  cursor: pointer;
}
#chapel-contact ul.cate li.active {
  background: #ea8a9e;
  color: #fff;
}

@media screen and (max-width: 1200px) {
  #chapel-contact ul.cate li {font-size: 14px;}
}

@media screen and (max-width: 768px) {
  #chapel-contact .title-box {
    margin: 60px auto 20px;
    text-align: center;
  }
  #chapel-contact ul.cate {
    margin-bottom: 30px;
    padding: 0;
  }
  #chapel-contact ul.cate li {
    flex: 0 1 33.3333%;
    max-width: 33.3333%;
    padding: 15px 0;
    box-shadow: 1px 1px 0 0 #efefef inset;
    font-size: 12px;
  }
}

/*-----------------------------
 chapel-contact sub_list
------------------------------*/
#chapel-contact {
  margin-top: 120px;
  min-height: 800px;
}
#chapel-contact .title-box{
  text-align: center;
  margin-bottom: 30px;
}
#chapel-contact .title-box span{
  font-size: 35px;
  color: #be9072;
}
#chapel-contact .title-box h2{
  font-size: 16px;
  line-height: 1.8;
}
#chapel-contact .sub-title{
  width: 100%;
  text-align: center;
}
#chapel-contact .sub-title span{
  padding-right:0px;
  font-size: 28px;
  font-weight: 200;
}
#chapel-contact .sub-title span::before{content: none;}
#chapel-contact .sub-title h2{
  margin: 15px 0 30px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: .23em;
}
#chapel-contact ul.area_list {
  width: 90%;
  max-width: 1200px;
  margin: 60px auto 80px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}
#chapel-contact ul.chapel_list::before {
  content: "";
  display: block;
  width: 31%;
  order: 1;
}
#chapel-contact ul.chapel_list::after {
  content: "";
  display: block;
  width: 31%;
}
#chapel-contact .area_box {display: none;}
#chapel-contact .area_box.active {display: block;}
#chapel-contact ul.area_list li {
  flex: 0 1 31%;
  max-width: 31%;
  margin-bottom: 50px;
}
#chapel-contact ul.area_list li .cover {
  margin-top: 0;
  position: relative;
  overflow: hidden;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
#chapel-contact ul.area_list li .cover img {width: 100%;}
#chapel-contact ul.area_list li {text-decoration: none;}
#chapel-contact ul.area_list li .info {position: relative;}
#chapel-contact ul.area_list li .info h3 {
  margin-top: 15px;
  font-size: 16px;
  font-weight: bold;
  color: #553d15;
  line-height: 1.6em;
  font-feature-settings: "palt";
}
#chapel-contact ul.area_list li .info p {
  margin-top: 5px;
  color: #717171;
  font-size: 12px;
}
#chapel-contact ul.area_list li .info .label {
  display: inline-block;
  margin: 5px 0 5px;
  padding: 3px 0 0 10px;
  border-left: 1px solid #c5c5c5;
  font-size: 10px;
  color: #717171;
  text-align: center;
  letter-spacing: 0.1em;
}
#chapel-contact ul.area_list li .info .label img {
  display: inline-block;
  width: 14px;
  padding-right: 5px;
  vertical-align: middle;
}
#chapel-contact ul.area_list li ul.btn {
  margin-top: 10px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}
#chapel-contact ul.area_list li ul.btn li {
  max-width: 49%;
  flex: 0 1 49%;
  margin-bottom: 0;
  background: #553d15;
  border-radius: 100px;
  color: #fff;
  text-align: center;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
#chapel-contact ul.area_list li ul.btn li.detail {
  background: #fff;
  box-shadow: 0 0 0 1px #e4e4e4 inset;
}
#chapel-contact ul.area_list li ul.btn li a {
  display: block;
  width: 100%;
  padding: 7px 0;
  font-size: 13px;
  color: #fff;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
#chapel-contact ul.area_list li ul.btn li.detail a {color: #6d6d6d;}
#chapel-contact ul.area_list li ul.btn li:hover {
  box-shadow: 0 0 0 1px #666 inset;
  background: #666;
}
#chapel-contact ul.area_list li ul.btn li:hover a {color: #fff;}
/* カラム落ち */
#chapel-contact #area_kanto ul.area_list,
#chapel-contact #area_kansai ul.area_list{
  justify-content: normal;
}
#chapel-contact #area_kanto ul.area_list li.area_li,
#chapel-contact #area_kansai ul.area_list li.area_li{
  margin-right: 3.5%;
}
#chapel-contact #area_kanto ul.area_list li.area_li:nth-child(3),
#chapel-contact #area_kansai ul.area_list li.area_li:nth-child(3){
  margin-right: 0;
}

@media screen and (max-width: 1200px) {
  #chapel-contact ul.area_list {margin: 60px auto 50px;}
}

@media screen and (max-width: 960px) {
  #chapel-contact {min-height: 800px;}
  #chapel-contact ul.chapel_list::before {
    content: "";
    display: block;
    width: 31.5%;
    order: 1;
  }
  #chapel-contact ul.chapel_list::after {
    content: "";
    display: block;
    width: 31.5%;
  }
  #chapel-contact ul.area_list li {
    flex: 0 1 31.5%;
    max-width: 31%;
  }
  #chapel-contact ul.area_list li .info h3 {
    margin-top: 10px;
    font-size: 14px;
    font-weight: bold;
  }
  #chapel-contact ul.area_list li .info p {
    margin-top: 5px;
    font-size: 11px;
  }
}

@media screen and (max-width: 768px) {
  #chapel-contact {
  	min-height: initial;
  	margin-top: 0;
  }
  #chapel-contact .sub-title span{font-size: 21px;}
  #chapel-contact .sub-title h2{font-size: 12px;}
  #chapel-contact ul.area_list {margin: 30px auto;}
  #chapel-contact ul.chapel_list::before {
    content: "";
    display: block;
    width: 100%;
    order: 1;
  }
  #chapel-contact ul.chapel_list::after {
    content: "";
    display: block;
    width: 100%;
  }
  #chapel-contact ul.area_list li {
    flex: 0 1 100%;
    max-width: 100%;
    margin-bottom: 20px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  #chapel-contact ul.area_list li .cover {
    flex: initial;
    max-width: initial;
    width: 100px;
    height: 100px;
    overflow: hidden;
  }
  #chapel-contact ul.area_list li .cover img {
    flex: initial;
    max-width: initial;
    position: absolute;
    width: 300px!important;
    height: auto!important;
    min-height: 200px!important;
    min-width: auto;
    max-width: initial;
    max-height: initial;
    left: 50%;
    top: 50%;
    object-fit: cover;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
  }
  #chapel-contact ul.area_list li .info {
    flex: initial;
    max-width: initial;
    flex: 1;
    padding: 0 0 0 15px;
    align-self: center;
  }
  #chapel-contact ul.area_list li .info h3 {
    margin-top: 0;
    font-size: 14px;
    line-height: 14px;
  }
  #chapel-contact ul.area_list li .info .label {
    margin: 5px 0 5px;
    padding: 3px 0 0 8px;
  }
  #chapel-contact ul.area_list li .info p {
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.4em;
  }
  #chapel-contact ul.area_list li ul.btn {margin-top: 5px;}
  #chapel-contact ul.area_list li ul.btn li a {
    padding: 7px 0;
    font-size: 11px;
    font-weight: bold;
  }
}