@charset "utf-8";
/* CSS Document */




/*--------------
kv 要素
--------------*/

.kv {
	min-height: 100vh;
	background: url("../img/kv.jpg") no-repeat top center;
	background-size: cover;
	padding-bottom: 0;
	padding-top: 0;
	margin-top: 0;
	margin-bottom: 0;
	position: relative;
}

.kv::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: rgba(255, 255, 255, .3);
}


.kv-other.__about {
	background: url("../img/kv-about.jpg") no-repeat center bottom;
	background-size: cover;
}

.kv-other.__plan {
	background: url("../img/kv-plan.jpg") no-repeat center bottom;
	background-size: cover;
}

.kv-other.__catalog {
	background: url("../img/kv-catalog.jpg") no-repeat center bottom;
	background-size: cover;
}

.kv-other.__flow {
	background: url("../img/kv-flow.jpg") no-repeat center bottom;
	background-size: cover;
}

.kv-other.__faq {
	background: url("../img/kv-faq.jpg") no-repeat center bottom;
	background-size: cover;
}

.kv-other.__company {
	background: url("../img/kv-company.jpg") no-repeat center center;
	background-size: cover;
}

.kv-other {	
	height:50vh;
	position: relative
}
.eri-image {
	background: url("../img/bg_eri.png") no-repeat center top;
    background-size: contain;
	position: absolute;
	width: 100%;
    padding-top: 14.97%;
    bottom: -12px;
	z-index: 10;
}
.kv-txt-area {
	position: absolute;
	left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
	font-family: 'Noto Serif JP', serif;
    width: max-content;
    color: #fff;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8);
    text-align: center;
}

.kv-txt-area  h2 {
	text-align: center;
	font-size: 2em;
	font-weight: 700;
    margin-bottom: 1em;
}


.kv-other .kv-txt-area {
	position: absolute;
	left: 50%;
	bottom:26%;
	transform: translate(-50%, -50%);
}

.kv-other .kv-txt-area h2 {
	text-align: center;
	font-size: 25px;
	font-weight: 700;
	font-family: 'Figtree', sans-serif;
}

.kv-other .kv-txt-area h2 span {
	display: block;
	font-size: 0.5em;
	font-family: 'Noto Serif JP', serif;
	
}

.kv-txt-area  p {
	font-size: 18px;
    line-height: 1.5em;
}



/*--------------
index 要素
--------------*/


.concept {
	background-color: #fff;
	box-shadow: 0 3px 17px rgba(0, 0, 0, 0.12);
  position: relative;
  z-index:1;
    margin: 0;
}

.concept-wrap {
	max-width: 1120px;
	width: 95%;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.concept-text-area {
	width: 50%;
	position: relative;
}

h2.concept-ttl{
	position: relative;
}
h2.concept-ttl p {
	font-size: 20px;
	margin-bottom: 2em;
	position: absolute;
	left: 0%;
	top: 0%;
	z-index: 10;
}

h2.concept-ttl p::after {
	content:"";
	background:  url("../img/round_r.png") no-repeat;
	width: 80px;
	height: 80px;
	position: absolute;
	left: 0%;
	top: 0%;
	transform: translate(-50%, -50%);
	background-size: contain;
	z-index: -1;
	
}
.concept-txt {
	margin-bottom: 2em;
	margin-top: 4em;
}

.concept-img-area {
	width: 40%
}

.concept-img-area img {
	border-radius: 8px;
}



@media only screen and (min-width : 641px) and (max-width : 1008px) {
  /*tablet用のcssを記述*/
}
@media screen and (max-width:640px) {
  /*スマホ用のcssを記述*/
	.concept-wrap {
		flex-direction: column;
	}
	.concept-text-area {
		width: 90%;
    display: contents;
	}
	h2.concept-ttl p {
    	position: static;
    line-height: 1.7em;
	}
	
	h2.concept-ttl p::after {
		transform: translate(-50%, 0%);
	}
	.concept-txt {
		margin-top: 0em;
	}
	.btn-more.__center {
		margin: 0 auto;
    	order: 1;
	}
	.concept-img-area {
		width: 80%;
		margin-bottom: 30px;
	}
}





/*チュラクの素敵ポイント*/
.bg-wrap {
	background: url("../img/bg_wagara.png");
	position: relative;
}
.point {
	max-width: 1015px;
	width: 96%;
	margin: 0 auto;
	background-color: #fff;
	box-shadow: 0 6px 6px rgba(0, 0, 0, 0.12);
	padding: 117px 70px 250px;
}

.point-list-area {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 100px;
}
.popint-list-left {
	width: 47%;
}

.point-box {
	position: relative;
    z-index: 5;
}

.point-box.__01{
    margin-bottom: 150px;
}
.point-box.__02{
	width: 47%;
}
.point-img img {
	border-radius: 15px;
	border: 5px solid #fff;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
}


.point-txt-area {
	text-align: center;
	font-family: 'Noto Serif JP', serif;
	font-size: 20px;
	margin-bottom: 20px;
	margin-top: 15px;
}
.point-txt-area span {
	font-size: 2em;
	font-weight: 700;
	margin-right: 5px;
	color: #42602D;
}

.point-box .btn-more {
	margin: 0 auto;
}
.sukashi-wrap {
    position: relative;
    z-index: -1;
}
.sukashi_01, .sukashi-02, .sukashi-03 {
	position: absolute;
	width: 150px;
	height: 150px;
	background: url("../img/accent_02.png")no-repeat;
	background-size: contain;
	z-index: -1;
}
.sukashi_01 {
	left: -35px;
	top: -55px;
}
.sukashi_02 {
	left: -35px;
	bottom: -55px;
}
.sukashi_03 {
	left: -35px;
	bottom: -55px;
}


@media only screen and (min-width : 641px) and (max-width : 1008px) {
  /*tablet用のcssを記述*/
	.point {
		width: 90%;
    	padding: 117px 5% 250px;
	}
	
	
}
@media screen and (max-width:640px) {
  /*スマホ用のcssを記述*/
	
	.point {
		width: 90%;
    	padding: 100px 5%;
	}
	
	.popint-list-left {
		display: contents;
	}
	
	.point-box,
	.point-box.__02 {
		width: 100%;
	}
	
	.point-box.__03 {
		order: 1;
	}
	.point-box.__02 {
		margin-bottom: 100px
	}
}




/*料金プラン*/
.h3-txt {
	text-align: center
}

.bg-plan {
	position: relative;
	margin: 0 calc(50% - 50vw);
	width: 100%;
	margin-top: 250px;
	padding-top: 327px;
	padding-bottom: 100px;
}

.plan-box-area {
	position: absolute;
	max-width: 970px;
	width: 90%;
	left: 50%;
	top: 0;
	transform: translate(-50%, -50%);
	display: flex;
	justify-content: space-around;
    align-items: center;
}

.plan-box {
	width: 45%;
	position: relative;
}


.plan-box.__01 {
	background: url("../img/plan01.jpg") no-repeat center center;
	background-size: cover;
	padding-top: 30%;
}
.plan-box.__02 {
	background: url("../img/plan02.jpg") no-repeat center center;
	background-size: cover;
	padding-top: 30%;
    margin-top: 40px;
}
.plan-box.__03 {
	background: url("../img/plan03.jpg") no-repeat center center;
	background-size: cover;
	padding-top: 30%;
    margin-top: 80px;
}

.plan-name-wrap {
	width: 85%;
	background-color: #fff;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 80%);
	text-align: left;
	padding: 1em
}

.plan-name {
	font-size: 22px;
	font-family: 'Noto Serif JP', serif;
	margin-bottom: 15px;
}

.tag-area {
	display: flex;
	margin-bottom: 15px;
}

.tag-area li ~ li {
	margin-left: 5px;
}
.tag-area .tag {
	width: fit-content;
	border: 1px solid #000;
	padding: 0.3em 0.5em;
	font-size: 12px;
	border-radius: 50vh;
}







.plan-option-area {
	max-width: 735px;
	width: 90%;
	border-top:1px solid #000; 
	border-bottom:1px solid #000; 
	text-align: center;
	margin: 0 auto;
	padding: 2em 0;
}

.option-ttl {
	font-size: 18px;
	margin-bottom: 1em
}
.accent-01.__plan-bottom{
	right: 0;
	bottom: 0;
	transform: translate(50%, 50%);
}

@media only screen and (min-width : 641px) and (max-width : 1008px) {
  /*tablet用のcssを記述*/
	
	
	.bg-plan {
		margin-top: 170px;
    padding-top: 364px;
	}
	.tag-area {
		flex-direction: column;
	}
	.plan-name {
		text-align: center;
	}
	.tag-area .tag {
    	width: 80%;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}
	p.price {
		text-align: center;
	}
	
	.tag-area li ~ li {
		margin-left: 0px;
		margin-top: 8px
	}
	
}


@media screen and (max-width:640px) {
	/*スマホ用のcssを記述*/
	.bg-plan{
		margin-top: 80px;
		padding-top: 0;
	}
	.plan-box-area {
   		flex-direction: column;
		position: relative;
    	transform: translate(-50%, -80px);
    	margin-bottom: 100px;
		
	}
	.plan-box {
    	width: 100%
	}
	
	.plan-box.__01, 
	.plan-box.__02, 
	.plan-box.__03 	{
    	padding-top: 100%;
			margin-top: 50%;
	}
	.btn-green {
		width: max-content;
	}
	.accent-01.__plan-bottom {
		display: none;
	}
	
	
}






/*ギャラリー要素*/

	section.catalog {
		margin-top: 0
	}

section.catalog-h3 {
	margin: 0 0 0 0;
	padding: 0;
}
.garally {
	background: url("../img/bg_washi.png");
	margin: 0 calc(50% - 50vw);
	width: 100vw;
	position: relative;
	padding: 50px 0;
}

.garally-area {
	margin: 50px 0;
}

.accent-01.__garally-bottom {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-20%, -50%);
}
.garally-list {
    margin: 0 10px;
	border-radius: 15px;
}

.go-catalog-page {
	position: absolute;
	left: 50%;
	top:80%;
	transform: translate(-50%, -50%);
	width: 180px;
	height:180px;
	border-radius: 50vh;
	background-color: #fff;
	text-align: center;
	font-size: 20px;
	font-family: 'Figtree', sans-serif;
	/*文字を中央にセンタリング*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.go-catalog-page a {
	color: #292929;
	line-height: 1.5em;
}

@media screen and (min-width: 960px) {
}

@media only screen and (min-width : 641px) and (max-width : 1008px) {
  /*tablet用のcssを記述*/
	.garally {
		margin: 0 calc(50% - 50vw) 130px;
	}
}
@media screen and (max-width:640px) {
	/*スマホ用のcssを記述*/
	.garally {
		margin: 0 calc(50% - 50vw) 130px;
	}
	.go-catalog-page{
		width: 130px;
		height: 130px;
	}
}






/*ご利用の流れ要素*/
.flow {
	background: url("../img/bg_washi.png");	
}

.flow p.flow-btm-txt {
	text-align: center;
	margin-bottom: 30px;
}
.flow-wrap {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	max-width: 900px;
	width: 95%;
	margin: 70px auto;
	position: relative;
}

.flow-wrap::before {
	content: "";
	width: 95%;
	height: 4px;
	background-color: #EAC2BB;
	position: absolute;
	top:30px;
	left: 50%;
	transform: translate(-50%, 0);
}

.flow-list {
	width: 8%;
	height: 250px;
	background: url("../img/round_r.png") no-repeat top center;
	background-position: top center;
	background-size: contain;
    writing-mode: vertical-rl;
	position: relative;
}

    .vertical {
		position: absolute;
		top: 0%;
		left: 50%;
		display: inline;
		transform: translate(-50%, 28px);
		/*writing-mode: vertical-rl;*/
		font-size: 23px;
    }

.flow .btn-more {
	margin: 0 auto;
}



@media only screen and (min-width : 641px) and (max-width : 1008px) {
  /*tablet用のcssを記述*/
}
@media screen and (max-width:640px) {
	/*スマホ用のcssを記述*/
	.flow-wrap::before {
		top: 0;
		left: 50%;
		transform: translate(-50%, 14px);
	}
}






/*店舗情報要素*/

.shop-info {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin:100px 0;
}

.shop-map-area {
	width: 48%
}
.shop-info-area {
	width: 48%;
}





dl.info-list{
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	flex-wrap: wrap;
	align-items: stretch;	
	width: 100%;
	border-bottom: none;
}
dl.info-list dt{
	padding: 2em 0px 0.7em 5px;
	width: 6em;
	border-bottom: 3px solid #7BA23F;
}
dl.info-list dd{
	padding: 2em 0px 0.7em 1em;
	width: calc(100% - 6em);
	border-bottom: 1px solid #7BA23F;
}
.ggl-map {
	margin: 50px auto;
}
.ggl-map i {
	padding-right: 8px;
}





/*--------------
aboutページ 要素
--------------*/

.about-box {
  display: flex;
  justify-content: space-between;
  max-width: 1000px;
  padding: 40px;
  margin: auto;
	align-items: flex-end;
	position: relative;
    margin-bottom: 80px;
}

.about-box p{
 /* line-height: 1.8;*/
}

.about-box img{
  width: 100%;
  height: auto;
	border-radius: 0 20px 20px 0;
	box-shadow: 10px 10px 13px rgba(0, 0, 0, 0.15)
	
}

.reverse{
  flex-direction: row-reverse;
}

.about-box.reverse img {
	border-radius: 20px 0 0 20px
}

.column {
  width: 48%;
	position: relative
}

/*右側へ要素を広げる（2カラム）*/
.column-outside-right{
    flex: 1;
    margin-right: calc(50% - 50vw);
    margin-left: 4%;
}

/*左側へ要素を広げる（2カラム）*/
.column-outside-left{
    flex: 1;
    margin-left: calc(50% - 50vw);
    margin-right: 4%;
}
.accent-01 img {
	box-shadow: none;
}
.accent-01.__about01 {
	z-index: -1;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
}

.accent-01.__about02 {
	z-index: -1;
	top: 50%;
	left: 48%;
	transform: translate(-50%, -50%);
}

.accent-01.__about03 {
	z-index: -1;
	top: 0;
	left: 100%;
	transform: translate(-50%, 10%);
}

.tate-txt01 {
    width: auto;
}

.tate-txt02 {
    width: auto;
}

    .about-point-ttl {
		font-size: 23px;
		margin-bottom: 30px;
    }

.about-point-ttl::before {
	content: "";
	background:url("../img/round_r.png") no-repeat center center;
	width: 120px;
	height: 120px;
	position: absolute;
    left: 0%;
    top: 0;
    transform: translate(-50%, -50%);
	z-index: -2

	
}


@media only screen and (min-width : 641px) and (max-width : 1008px) {
  /*tablet用のcssを記述*/
	

}

@media screen and (max-width:640px) {
	/*スマホ用のcssを記述*/
	.about .sec-sub-txt {
	  -ms-writing-mode: tb-rl;
	  writing-mode: vertical-rl;
		text-align: start;
		line-height: 2em;
		margin-bottom: 70px;
	}
	
	

	.about-box {
		padding: 40px 0;
		flex-direction: column-reverse;
		
	}
	.column-outside-left {
		flex: 1;
		margin-left: calc(50% - 50vw);
		margin-right: 14%;
	}
	.column {
		width: 90%;
		position: relative;
    	margin-bottom: 35px;
	}
	.accent-01.__about01{
		top: 37%;
		left: 100%;
	}
	.accent-01.__about02 {
		left: 0
	}
	
}



/*スタッフ情報要素*/
.staff {
	background: url("../img/bg_wagara.png");
	margin: 0 calc(50% - 50vw);
	width: 100vw;
	padding-bottom: 200px;
	margin-bottom: 500px;
}
.staff-wrap {
	position: relative;
}
.staff-info-area {
	display:  flex;
	justify-content: space-around;
	align-items: center;
	position: absolute;
	max-width: 1120px;
	width: 95%;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	
}
.staff-box {
	width: 27%;
	text-align: center
}

.staff-img {
  padding-top:150%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
	border-radius: 18px;
}


.staff-img1 {
	background-image: url("../img/face.jpg")
}
.staff-img2 {
	background-image: url("../img/face.jpg")
}
.staff-img3 {
	background-image: url("../img/face.jpg")
}

.staff-name {
	font-size: 22px;
	font-family: 'Noto Serif JP', serif;
	margin-top: 0.7em
}

.staff-job {
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	padding: 15px 0;
	margin: 15px;
}

.staff-sns {
	width: fit-content;
	background-color: #000;
	padding: 0.5em 1em;
	margin: 0 auto;
	border-radius: 50vh;
}
.staff-sns a {
	color: #fff;
}
.staff-sns i {
	color: #fff;
}


.staff-sns i {
	padding-right: 8px
}

/*店舗紹介要素*/
.shop-infomation-area {	
	background: url("../img/bg_washi.png");
	margin: 0 calc(50% - 50vw);
	width: 70vw;
	padding: 70px 0 70px 10%;
	margin-top: 50px;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	position: relative;
}

.infomation-box {
   width: 60%;
}

.shop-icon {
	background-color: #fff;
	border-radius: 50vh;
	width: fit-content;
	padding: 0.3em 1em;
	margin-bottom: 8px;
	border: 1px solid #000;
	font-size: 12px;
}

.shop-name, .shop-detail, .shop-more-info {
	line-height: 1.8em;
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: 1px solid #000;
	padding-right: 2em;
	
}
.shop-name {
	font-size: 22px;
	font-weight: 700;
}

.shop-pic {
	position: absolute;
	width: 500px;
	height: 344px;
	top: 50%;
	right: 0;
	transform: translate(50%, -50%);
	border-radius: 20px;
}


.shop-pic img {
    border-radius: 20px;
    height: 100%;
    width: 100%;
    object-fit: cover;
}








@media only screen and (min-width : 641px) and (max-width : 1008px) {
  /*tablet用のcssを記述*/
	
	.shop-infomation-area {
		padding: 70px 0 70px 20px;
	}
	.shop-pic {
		width: 50vw;
		transform: translate(67%, -50%);
	}

}
@media screen and (max-width:640px) {
	/*スマホ用のcssを記述*/

	.staff {
		padding-bottom: 0px;
	    margin-bottom: 80px;
	}
	.staff-info-area {
		flex-direction: column;
	}
	.staff-info-area {
		flex-direction: column;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: unset;
		max-width: 1120px;
		width: 100%;
		top: 0;
		left: 50%;
		transform: none;
	}
	.staff-box {
		width: 80%;
		text-align: center;
    	margin-bottom: 80px;
	}
	
	
	.shop-infomation-area {
		margin: 0 calc(50% - 50vw);
		width: 90vw;
    	padding: 50px 0 300px 10%;
    	margin-bottom: 80px;
	}
	.infomation-box {
		width: 92%;
	}
	.shop-pic {
		top: 100%;
		right: 0;
    transform: translate(50%, -120%);
		width: 500px;
    	height: 220px;
	}

}



/*--------------
catalogページ 要素
--------------*/

.sort-btn-area { 
	margin: 0 calc(50% - 50vw);
	width: 100vw;
}

.grid {
	margin: 50px 0;
}













/*--------------
planページ 要素
--------------*/

.plan-set, .plan-rental {
	text-align: center;
}


.plan-content {
	margin: 100px 0;
	padding: 50px 0;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

.plan-ctt-ttl {
	font-size: 24px;
	font-family: 'Noto Serif JP', serif;
	margin-bottom: 1em;
}

.plan-list {
	margin-bottom: 100px;
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
}

.plan-list ul {
	display: flex;
	justify-content: space-around
}
.plan-list ul > li {
	width: 31%;
	border-radius: 20px;
	padding: 25px 1.5em 30px;
	position: relative;
}

.plan-list ul li.ume {
	background-color: #F8EAE7
}
.plan-list ul li.take {
	background-color: #F8EBDB
}
.plan-list ul li.matsu {
	background-color: #E8F2DD
}
.plan-list ul li  p:first-child {
	font-size: 2em;
	font-weight: 600;
	margin-bottom: 20px;
	position: relative;
	z-index: 2
}

.plan-list ul li  span {
	display: block;
	font-size: 2.5em;
	position: absolute;
	color: #fff;
	left: 50%;
	top: 0em;
	transform: translate(-50%, 10%);
}

.plan-list ul li  p ~ p {
	margin-top: 0.5em;
}
.plan-list ul li  p.name {
	background-color: #fff;
	border-radius: 50vh;
	padding: 0.3em 0;
	width: 170px;
	margin: 0 auto;
}

.plan-list ul li ol {
	list-style: disc;
	margin-top: 20px;
    margin-left: 1em;
	margin-bottom: 5px;
    text-align: left;
}

.plan-list ul li ol li {
	width: fit-content
}
.plan-list ul li ol li ~ li {
	margin-top: 0.7em
}

.plan-list ul li p.caution {
	font-size: 0.7em;
	text-align: left;
    padding-left: 1em;
    text-indent: -1.2em;

}



.micro-copy {
  font-size: 0.8rem;

  position: absolute;
  top: -1.25rem;
  left:50%;
transform: translateX(-50%);
  display: block;

    width: fit-content;
    padding: 0.2rem 2em;
    color: #fff;
    border: 2px solid #d44114;
    border-radius: 100vh;
    background: #d44114;
  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}

.micro-copy:before,
.micro-copy:after {
  position: absolute;
  left: calc(50% - 10px);

  content: "";
}


.micro-copy:after {
  bottom: -9px;

  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #d44114 transparent transparent transparent;
}

@media screen and (max-width:640px) {
	/*スマホ用のcssを記述*/
	
	
	.plan-list ul {
	  width: 100%;
	  overflow-x: scroll;
    justify-content: unset;
	}
	
	.plan-list ul li {
	  width: 70%;
	  margin: 15px;
	  flex-shrink: 0;
    scroll-snap-align: center;
	}
	
}



ul.plan-set-area {
	display: flex;
	justify-content: center;
	align-items: flex-start;
    flex-wrap: wrap;
}
ul.plan-set-area li ~ li {
	padding-left: 30px;
}


.tate-txt03 {
    width: auto;
    height: -webkit-fill-available;
	background: url("../img/round_r.png") no-repeat top center;
	writing-mode: vertical-rl;
	background-position: top center;
	background-size: contain;
    padding: inherit;
	position: relative
}

.tate-txt03.__plan-area {
    width: 100px;
    height: 380px;
}

.price.__plan {
	writing-mode: horizontal-tb;
	position: absolute;
	bottom: 0;
	height: auto;
}



.set-plan-wrap1 {
	width: 40%;
}
.set-plan-wrap2 {
	width: 35%;
}
.set-plus {
	font-size: 35px;
	font-weight: 700;
	margin: 0 2%
}
.plan-set-box {
	text-align: center;
    width: 106px;
}

.set-icon {
	height: 30px;
	width: 30px; 
    margin: 0 auto;
}

.set-icon img {
	object-fit: contain;
}

.set-plan-day{
    width: max-content;
    position: relative;
    line-height: 44px;
    height: auto;
    margin: 2em auto;
    padding: 0 1rem;
    text-align: center;
    color: #fff;
    background: #E1553C;
}

.set-plan-day:before,
.set-plan-day:after {
  position: absolute;
  top: 0;
  display: block;
  height: 43px;
  content: '';
  border: 22px solid #E1553C;
}

.set-plan-day:before {
  left: -35px;
  border-left-width: 15px;
  border-left-color: transparent;
}

.set-plan-day:after {
  right: -35px;
  border-right-width: 15px;
  border-right-color: transparent;
}

.set-plan-day span {
  position: relative;
  display: block;
}

/*--------------
flow 要素
--------------*/
.rental, .photo, .ceremony {
  background-image: linear-gradient(to right, #fff 33%, #FEF9F4 33%, #FEF9F4 66%, #fff 66%);
	position: relative;
}
.rental, .photo {
	margin-bottom: 200px
}

.photo, .ceremony {
	margin-top: 200px;
}

.btn-list-area {
	padding-left: 20px;
	justify-content: space-around
}

.btn-flow {
	width: 20%;
	text-align: center;
	padding: 1em 2em;
	background-color:  #E1553C;
    border-radius: 10px;
}

.btn-flow i {
	display: block;
	color: #fff;
	font-size: 18px;
	margin-top: 8px;
}

.btn-flow a {
	color: #fff;
}


.flow-ttl {
	width: fit-content;
	padding: 0.5em 2em;
	border: 1px solid #000;
	background-color: #fff;
	font-size:18px;
	font-weight: 700;
	margin: 0 auto;
	border-radius: 50vh;
	font-family: 'Noto Serif JP', serif;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%)
}

.flow-step-area {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 calc(50% - 50vw);
	width: 100vw;
}

.flow-step-box {
	width: 49%;
	text-align: center;
	position: relative;
	border: 1px solid #292929;
    line-height: 1.5em;
	background-color: #fff;
	//box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)
}

.flow-step-box:nth-child(odd) {
	border-radius: 0 20px 20px 0;
	margin-bottom: 50px;
}

.flow-step-box:nth-child(even) {
	border-radius: 20px 0 0 20px;
	margin-top: 50px;
}

.flow-step-wrap {
	max-width:550px;
	width: 90%;
	margin: 2em;
	position: relative;
}

.step-no {
	position: absolute;
	top:0;
	left: 50%;
	transform: translate(-50%, -226%);
	font-family: 'Roboto', sans-serif;
	font-size:23px;
	font-weight: 700;
}

.flow-step-wrap.__odd {
	margin-left: auto
}

.flow-step-wrap.__even {
	margin-right: auto;
}

.step-name {
	font-size: 16px;
	font-family: 'Noto Serif JP', serif;
	margin-bottom: 15px;
}

.step-img-area {
	width: 100%;
	height: 70px;
	border-radius: 50vh;
	margin: 20px auto;
}
.step-img-area img {
	
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.step-txt {
	text-align: left;
    line-height: 1.5em;
}

.flow-btn-line {
	width: fit-content;
	background-color: #00B900;
	position: absolute;
	left: 50%;
	bottom: 0%;
	transform: translate(-50%, 50%);
	border-radius: 50vh;
	padding: 1em 3em;
}

.flow-btn-line a {
	font-size: 18px;
	color: #fff;
}

.flow-btn {
	margin-top: 30px
}



@media only screen and (min-width : 641px) and (max-width : 1008px) {
  /*tablet用のcssを記述*/
	

}
@media screen and (max-width:640px) {
	/*スマホ用のcssを記述*/
	.btn-list-area{
		flex-direction: column;
	}
	.btn-flow {
		width: 80%;
		margin-bottom: 20px;
	}
	.flow-ttl {
		width: 80%;
		text-align: center;
	}
	.flow-step-box {
		width: 90%;
	}

	.flow-step-box:nth-child(odd) {
		border-radius: 0 20px 20px 0;
		margin-bottom: 50px;
	}

	.flow-step-box:nth-child(even) {
		border-radius: 20px 0 0 20px;
		margin-top: 0px;
		margin-bottom: 50px;
    	margin-left: auto;
	}
	.flow-btn-line {
		width: 80%;
	}
	
	ul.plan-set-area li {
		margin-bottom: 20px
	}
	ul.plan-set-area li ~ li {
		padding-left: 0px;
	}
	
	
}

/*--------------
FAQ 要素
--------------*/

.faq {
}

.faq h3 {
	color: #fff;
}
.faq h3::before,
.faq h3::after {
	background-color: #fff;
}
.faq-wrap {
	margin-top: 80px;
}

details {
	background-color: #fff;
	margin: 0 0 15px 0;
	border-radius: 0px;
	border: 1px solid #ddd;
	
}

summary {
	list-style: none;
	position: relative;
	margin-bottom: 10px;
	padding: 20px 70px 20px 30px;
	cursor: pointer;
	//background-color: #d8be39;
	font-family: 'Noto Serif JP', serif;
}

summary::-webkit-details-marker {
	display: none;
}

summary:hover,
details[open] summary {
	//background-color: #bc9e04;
}
summary::before {
	content: 'Q';
	font-size: 35px;
	font-family: 'Noto Serif JP', serif;
	color: #982429;
	margin-right: 0.5em
}
summary::after {
	content: '+';
	position: absolute;
	top: 50%;
	right: 30px;
	transform: translateY(-50%);
	transition: transform 0.5s;
	font-size: 30px;
}

details[open] summary::after {
	transform: translateY(-50%) rotate(45deg);
}

.answer {
	padding: 20px 30px;
}

.answer p {
	line-height: 1.25;
}

details[open] .answer {
	animation: fadein 0.5s ease;
}

@keyframes fadein {
	0% { opacity: 0; }
	100% { opacity: 1; }
}


@media only screen and (min-width : 641px) and (max-width : 1008px) {
  /*tablet用のcssを記述*/
}
@media screen and (max-width:640px) {
  /*スマホ用のcssを記述*/
	
	details {
		position: relative;
	}
	summary {
    	padding: 20px 3em 20px 4em;
	}
	summary::before {
		position: absolute;
		left:0.5em;
		top: 25px;
    margin-top: -0.5em;
	}
	summary::after {
    	right:0.7em;
	}
	
	
}





/*--------------
company 要素
--------------*/

.msg-wrap {
	max-width: 1120px;
	width: 95%;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.msg-text-area {
	width: 50%;
	position: relative;
}

h2.msg-ttl p {
	font-size: 20px;
	margin-bottom: 2em;
    position: relative;
}

h2.msg-ttl  p::after {
	content: "";
    background: url(../img/round_r.png) no-repeat;
    width: 80px;
    height: 80px;
    position: absolute;
    left: 0%;
    top: 0%;
    transform: translate(-50%, -50%);
    background-size: contain;
    z-index: -1;
}
	
}
.msg-txt {
	margin-top: 4em;
}
.massage-name {
	text-align: right;
	margin-top: 2em;
}
.msg-img-area {
	width: 40%
}

.msg-img-area img {
	border-radius: 8px;
}

.about-box02 {
  display: flex;
  justify-content: space-between;
  max-width: 1000px;
  padding: 40px;
  margin: auto;
	align-items: flex-start;
	position: relative
}

.about-box02 img {
    width: 100%;
    height: auto;
}
.tate-txt03 {
    width: 80px;
    height: -webkit-fill-available;
	background: url("../img/round_r.png") no-repeat top center;
		writing-mode: vertical-rl;
}
.column02 {
  /*width: 20%;*/ 
    height: 300px;
	position: relative
}

.about-bg {
	width: 100%;
	padding-top: 400px;
	background-image: url("../img/bg_washi.png");
    border-radius: 20px 0 0 20px;
	position: relative

}

.about-infomation-area {
	position: absolute;
	top: 63%;
	left: 37px;
	transform: translate(0, -50%);
	width: 90%
}






@media only screen and (min-width : 641px) and (max-width : 1008px) {
  /*tablet用のcssを記述*/
}
@media screen and (max-width:640px) {
  /*スマホ用のcssを記述*/
	h2.msg-ttl {
		order: -1
	}
	.msg-wrap{
		flex-direction: column;
		width: 90%;
	}	
	.msg-text-area {
		width: 100%;
    	display: contents;
	}
	.msg-img-area {
		width: 100%;
		order: -1;
    	margin-bottom: 30px;
	}
	
	
	
	.about-box02 {
		padding: 40px 10px;
	}
	.column-outside-right {
		margin-left: 2%;
	}
	.about-infomation-area {
		position: absolute;
		top: 63%;
		left: 7%;
		transform: translate(0, -50%);
		width: 98%;
	}
	
	
	
	
	.shop-info {
		flex-direction: column;
	}
	.shop-map-area {
		width: 100%;
		order: 1;
	}
	.shop-info-area {
		width: 90%;
		margin: 0 auto;
	}
	
	dl.info-list {
		width: 100%;
	}
	
	
	
	
	
	
	
	
	
}