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

#main-img{
	width: 100%;
	height: 25vh;
	margin-bottom: 2rem;
	position: relative;
}

#main-img::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0; left: 0;
	
	background: #2E1600;
	opacity: 0.75;
}

#main-title{
	width: 100%;
	text-align: center;
	letter-spacing: 4px;
	max-width: 96%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

#main-title .slug{
	font-weight: 500;
}


@media print, screen and (min-width:760px){
	#main-img{
		height: 25vh;
		margin-bottom: 4rem;
	}
	
	#main-title{
		max-width: 70%;
	}

}


@media print, screen and (min-width:960px){
	#main-img{
		height: 36vh;
		margin-bottom: 6rem;
	}
}

/* 共通部分　*/

.h_wrap{
	/*padding: 3.5rem 1rem;*/
	/*background-color: rgba(252,237,213,0.4);*/
	text-align: center;
	position: relative;
	margin-bottom: 1rem;
}

.h_wrap::before,
.h_wrap::after{
	content: "";
	display: block;
	width: 20%; height: 80%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	z-index: -1;
}

.h_wrap::before{
	background: url("../../share/img/ornament-circle_left.png") no-repeat center / contain;
	left: 0;
}

.h_wrap::after{
	background: url("../../share/img/ornament-circle_right.png") no-repeat center / contain;
	right: 0;
}


.h_wrap .h02{
	display: block;
	font-size: 1.125rem;
	padding-bottom: 0.5rem;
	margin-bottom: 0;
	/*border-bottom: 2px solid #A67008;*/
}

.h_wrap .h02::after{
	content: "";
	display: block;
	margin-top: 0.25rem;
	width: 100%;
	height: 1.5rem;
	background: url("../img/ornament04.png") no-repeat top center / contain;
}

.h_wrap .slug{
	letter-spacing: 2px;
}

.h_wrap .strong{
	margin: 0 0.25rem;
	font-weight: 600;
}


.contact_guidance{
	background: #FDEFD9;
	padding: 2rem 1rem;
	border-radius: 2rem;
	border-bottom: 15px solid rgba(0,0,0,0.2);
	margin-bottom: 6rem;
}

.contact_guidance .contact_list{
	display: block;
	margin: 1rem 0 .75rem;
}

.contact_guidance .contact_list .btn{
	font-size: 1.25rem;
	padding: 1rem 1rem 1.5rem;
}

.contact_list i{
	font-size: 1.5em;
	margin-right: 0.25em;
	position: relative;
	top: 0.15em;
}

.contact_guidance .contact_list li{
	width: 100%;
	margin: 0 auto 0.5rem;
	text-align: center;
}

@media print, screen and (min-width:640px){
	
	.contact_guidance .contact_list li{
		width: 45%;
	}
}

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

	.contact_list.page-in ul{
		justify-content: center;
	}
	.contact_list.page-in li{
		width: auto;
	    margin: 0 2rem
	}
	.contact_list.page-in li img{
	    max-width: 20rem;
		margin: 0;
	}
	
	.contact_guidance .contact_list .btn{
		font-size: 1.75rem;
		padding: 1rem 2rem 1.5rem;
	}
}


/* 夫婦でお悩みの方　*/


#main-img{
	background: url("../../fufu/images/main-img.jpg") no-repeat center right / cover;
}

/*#message1{
	margin-bottom: 2rem;
}*/

#message1 .container{
	justify-content: center;
}

#message1 .ph_wrap{
	margin-bottom: 2rem;
	width: 75%; height: 100%;
	position: relative;
}

/*#message1 .h02{
	margin-bottom: 0;
}*/

.cover_ph{
	width: 100%; height: 100%;
	position: absolute;
}

@media print, screen and (min-width: 760px){
	
	#main-img{
		background-position: center;
	}

	/*#message1{
		position: relative;
		padding: 3rem 0;
		margin-bottom: 3rem;
	}*/

	#message1 .ph_wrap{
		width: 55%;
		position: absolute;
		right: 0; top: 0;
	}

	#message1 .container{
		/*margin-bottom: 2rem;*/
		justify-content: space-between;
	}

}

@media print, screen and (min-width:1280px){
}

.point_box{
	position: relative;
	margin-bottom: 5rem;
	align-items: flex-start;
}

.point_box::before{
	content: "";
	width: 3rem; height: 3rem;
	display: block;
	background: #cfcfcf;
	position: absolute;
	top: -0.5rem; right: 0;
	opacity: 0.6;	
	z-index: -1;
}

.point_box .h03{
	letter-spacing: -1px;
	margin-bottom: 1.5rem;
	line-height: 1.5;
	
	/*border-left: none;
	padding-left: 0;*/
	border-color: #833131;
}

.point_box .slug {
	color: #333;
	font-size:1.25rem;
	font-weight: 500;
	letter-spacing: 2px;
	margin-bottom: 0.5rem;
}

.point_box .h03 .strong{
	font-size: 1.75rem;
}

.point_box.column_2 .ph_wrap{
	width: 100%;
	background-color: #FAE6C3;
	padding: 1rem 0 0 1rem;
	margin-bottom: 2rem;
	box-sizing: border-box;
}

.bg_ph{
	color: #fff;
	padding:2rem 0.5rem;
	text-align: center;
	background: url("../img/fufu_bg.jpg") no-repeat center / cover;
	position: relative;
	z-index: -1;
}

.bg_ph::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color:rgba(0,0,0,0.5);
	position: absolute;
	top: 0; left: 0;
	z-index: -1;
}


@media print, screen and (min-width: 760px){
	
	.point_box.column_2 .ph_wrap{
		width: calc(40% - 4rem);
		margin-bottom: 0;
	}
	
	
	.point_box.column_2 .text_wrap{
		width: 60%;
	}
	
	.point_box .h03{
		letter-spacing: 2px;
	}

}


#ornament_h_wrap{
	margin-bottom: 0;
}

.ornament_title{
	font-size: 1.5rem;
	padding: 3rem 0 2rem;
	margin-bottom: 0;
	text-align: center;
	position: relative;
}

#step .step_wrap.container{
	background: #fff;
	padding: 5rem 0;
	margin-top: 3rem;
	max-width: 1360px;
	border-radius: 1rem;
}


@media print, screen and (min-width: 760px){

	.ornament_title{
		font-size: 2.25rem;
		padding: 4rem 0 3rem;
	}
	.ornament_title::before{
		width: 3rem; height: 3rem;
	}
	.ornament_title::after{
		width: 50%; height: 1rem;
	}
}

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

	.bg_ph{
		padding: 4rem 1rem;
	}
}


#step {
	padding-bottom: 3rem;
}

.step_wrap .container_half{
	padding: 0 1.5rem;
}

.step_box{
	padding-bottom: 4rem;
	position: relative;
	align-items: center;
}

.step_box.last{
	padding-bottom: 0;
}

.step_box:not(.last)::before{
	content: "";
	display: block;
	background: #833131;
	width: 2px;
	height: 80%;
	position: absolute;
	bottom: 1rem;
	left: 2.5rem;
}

.step_box .ph_wrap.c-item{
	text-align: center;
	font-weight: bold;
	position: relative;
	z-index: 1;
	font-size: 0.75em;
}

.step_box .icon-circle{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5rem;
	height: 5rem;
	padding:1.5rem;
	border-radius: 4rem;
	background: #833131;
	box-sizing: border-box;
	text-align: center;
	overflow: hidden;
}

#step2 .icon-circle{
	padding: 1.75rem 0;
}

.step_box .text_wrap.c-item{
	flex: 1;
	margin-left: 3rem;
}

.step_box .h03{
	flex: 1;
	margin-left: 0.5rem;
	padding-left: 0;
	border-left: none;
}

.step_box .h03 .strong{
	font-size: 1em;
}

.step_box .comment_wrap{
	margin-top: 2rem;
	padding:2rem 2rem;
	background: #e9e9e9;
	border-radius: 1rem;
	
	position: relative;
	z-index: 1;
}


.step_box .comment_wrap .mb0{
	margin-bottom: 0;
}

@media print, screen and (min-width: 760px){

	.step_box .icon-circle{
		width: 7rem;
		height: 7rem;
	}
	
	.step_box .ph_wrap.c-item{
		font-size: 1em;
		position: absolute;
		top: 0; left: 0;
	}
	
	.step_box .h03{
		margin-top: 1rem;
		margin-bottom: 1rem;
		margin-left: 9rem;
	}
	
	.step_box .comment_wrap{
		width: 100%;
		margin-left: 9rem;
		margin-top:0;
	}
	
	.step_wrap .container_half{
		padding: 0 6.5rem;
	}

}

#voice .ornament_title{
	padding-top: 0;
}

.voice_wrap{
	margin-bottom: -1rem;
	margin-right: -1rem;
	justify-content: flex-start;
}

.voice_box{
	width: calc(100% / 2 - 1rem);
	display: inline-block;
	padding:2rem 1rem;
	margin-bottom: 1rem;
	margin-right: 1rem;
	color: #fff;
	text-align: center;
	font-weight: bold;
	border: 1px solid #fff;
	border-top: 3px solid #fff;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}

.voice_box::after,
.voice_box:nth-of-type(even)::before{
	content: "";
	display: block;
	width: 100%; height: 100%;
	position: absolute;
}

.voice_box:nth-of-type(even)::before{
	top: 0; left: 0;
	background-color: rgba(0,0,0,.15);
	z-index: -1;
}

.voice_box::after{
	width: 1rem; height: 1rem;
	right: 0; bottom: 0;
	background-color: #fff;
	z-index: 0;
}

.voice_box .slug{
	color: #fff;
	font-size:.875rem;
	font-weight: 500;
	letter-spacing: 2px;
	line-height: 2;
}

@media print, screen and (min-width:760px){

	.voice_box{
		width: calc(100% / 4 - 1rem);
	}
}

@media print, screen and (min-width:1280px){

	.voice_box{
		width: calc(100% / 6 - 1rem);
	}
}



#feature{
	padding: 3rem 0;
	border-top: 8px solid rgba(0,0,0,0.2);
}

.feature_intro{
	justify-content: center;
	align-items: center;
	margin-bottom: 2rem;
}


.feature_intro .h02{
	text-align: center;
	margin-bottom: 2rem;
}

.feature_intro .ph_wrap{
	width: 13rem;
}

.feature_wrap .ph_wrap{
	margin-bottom: 2rem;
}

.feature_wrap .text_wrap{
	flex: 1;
}


.contact_area{
	font-size: 1.5rem;
	color: #fff;
	padding: 5rem 0.5rem;
	position: relative;
	z-index: 1;
	
	background: url("../img/contact_bg.jpg") no-repeat center / cover;
}

.contact_area::after{
	content: "";
	display: block;
	width: 100%; height: 100%;
	position: absolute;
	top: 0; left: 0;
	background-color: #000;
	
	opacity: 0.5;
	z-index: -1;
	
}

.contact_area .btn_wrap{
	justify-content: center;
}

.contact_area .container{
	width: calc(100% - 1rem);
}

@media print, screen and (min-width: 760px){
	
	#feature{
		padding: 6rem 0;
	}
	
	.feature_intro{
		justify-content: space-between;
	}
	
	.feature_intro .h02{
		text-align: left;
		margin-bottom: 0;
	}	
	
	.feature_wrap .ph_wrap{
		width: 20rem;
		margin-left: 5rem;
		margin-bottom: 0;
	}
	
	.contact_area .btn_wrap{
		justify-content: space-between;
	}
	
	.contact_area .btn_wrap.jc-c{
		justify-content: center;
	}

}


/* お一人でお悩みの方 */

#hitori #main-img{
	background: url("../../hitori/images/main-img.jpg") no-repeat top center / cover;
}

#case{
	padding: 4rem 0.5rem;
	color: #fff;
}

#case hr{
	margin: 3rem 0;
    width: 100%;
    background: #a56666;
}

.case_box{
/*	padding: 2rem 1rem;
	background-color: rgba(0,0,0,.25);
	box-sizing: border-box;*/
}

#case .h03{
    font-size: 1.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
	padding-right: 0.25rem;
    background: #992b2b;
    border-color: rgb(0 0 0 / 42%);
	font-weight: 500;
}

#case .h03 .strong{
	font-size: 1.25em;
	color: #fff;
	font-weight: 500;
}

.case_list li{
	margin: 1.5rem 0 0;
}


.case_list li i{
	color: #d5ad23;
	margin-right: 0.75rem;
}

.case_type_wrap{
	padding: 2rem 1rem;
    margin-top: 4rem;
    background: rgba(0,0,0,0.2);
}

.case_type{
	width: 100%;
	margin-bottom: 3rem;
}

.case_type .h03{
	border: none;
    margin-bottom: 1.5rem;
}

.case_note{
	/*margin-top: 2rem;*/
	padding: 1rem 1rem 3rem;
	/*border: 1px solid rgba(0,0,0,0.5);*/
	border: 1px solid rgba(255,255,255,0.5);
	position: relative;
}

.case_note .h{
    display: block;
    margin-top: -1.5rem;
    margin-bottom: 1rem;
    background: #833131;
    padding: 0.25rem;
    text-align: center;
}


	
.case_note .fukidasi{
	font-size: 0.925rem;
	border: 1px solid rgba(255,255,255,0.5);
	line-height: 1.25;
	padding:0.5rem 0.25rem;
	border-radius: 2rem;
	text-align: center;
	margin-bottom: 1rem;
}
	
.case_note .fukidasi br{
	display: none;
}


@media print, screen and (min-width: 760px){

	#hitori .feature_wrap .ph_wrap{
		width: 40%;
	}
	
	.case_box {
		width: calc(100% / 3 - 1.5rem);
	}
	
	#case hr{
		margin: 0;
    	width: 1px;
	}
	
	
	.case_note{
		padding: 1.75rem 2rem 3rem;
	}
	.case_note .h{
		margin-bottom: 2rem;
		margin-top: -2.5rem;
	}
	
	.case_note .fukidasi{
		padding: 0.75rem;
		position: absolute;
		top: 2rem;
		right: 1rem;
	}
	
	.case_note .fukidasi br{
		display: block;
	}

}


@media print, screen and (min-width:960px){
	.case_note{
		width: calc(65% - 1rem);
		box-sizing: border-box;
	}
	
	.case_type{
		width: calc(35% - 1rem);
		box-sizing: border-box;
	}
}

/* ご相談の流れ */

#flow #step{
	padding-top: 6rem;
}

#flow #main-img{
	background: url("../../flow/images/main-img.jpg") no-repeat center / cover;
	margin-bottom: 4rem;
}

#flow #step .step_wrap{
	margin-top: 0;
}

#flow #step2 img{
	max-width: 40%;
}


/* アクセス・スタッフ紹介 */

#staff #main-img{
	background: url("../../access/images/main-img.jpg") no-repeat top center / cover;
}

.staff_area{
/*	border-top: 8px solid rgba(0,0,0,0.2);*/
	padding: 4rem 0;
	margin-bottom: 4rem;
	position: relative;
}

/*.staff_area::before{
	content:"";
	display: block;
	width: 25%; height: 8px;
	background-color: rgba(0,0,0,0.2);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}*/

.staff_area .h03{
	margin-bottom: 2rem;
}

.staff_introduction .text_wrap{
}

.staff_introduction .ph_wrap{
	width: 70%;
	margin: 0 auto;
}

.staff_introduction .ph_wrap .p-show{
	display: none;
}
.staff_introduction .ph_wrap .s-show{
	display: block;
}

.history_area .h03{
	margin-bottom: 2rem;
}

.history_area .hide{
	display: none;
	animation-duration: 0.5s;
	/*animation-direction: reverse;*/
}

.history_area .show{
	display: table-row;
	animation-name: fade-in;
}

@keyframes fade-in {
  0% {
    visibility: visible;
    opacity: 0;
  }

  50% {
    visibility: visible;
    opacity: 0.5;
  }

  100% {
    visibility: visible;
    opacity: 1;
  }
}

.history_area .more{
	display: flex;
	justify-content: center;
	align-items: center;
	color: #833136;
    font-weight: bold;
    text-align: center;
	cursor: pointer;
	position: relative;
}

.history_area .more.hide{
	display: none;
}

.history_area .more::before,
.history_area .more::after{
	content: "";
	display: inline-block;
	width: 5rem; height: 1px;
	background: #666;
	margin: 0 1rem;
}

.column_2 .google_map{
	width: 100%;
}

.google_map iframe{
	width: 100%;
    aspect-ratio: 7/3;
}

.access_wrap .ta{ margin-bottom: 0; }

.access_wrap .ta th{
	border: 1px solid #ccc;
}

.access_wrap .ta td{
	border: 1px solid #ccc;
	background: rgba(255,255,255,.5)
}

@media print, screen and (min-width:760px){
	
	.staff_introduction .text_wrap{
		flex: 1;
		margin-right: 3rem;
	}
	
	.staff_introduction .ph_wrap{
		width: 25%;
		margin-top: 1.5rem;
	}
	
	

	.staff_introduction .ph_wrap .p-show{
		display: block;
	}
	.staff_introduction .ph_wrap .s-show{
		display: none;
	}
	
	.column_2 .google_map{
		width: calc(50% - 2rem);
		margin-right: 2rem;
	}
	
	.google_map iframe{
		width: 100%;
		aspect-ratio: 1/1;
	}
}


/* カウンセリング料金 */


#price #main-img{
	background: url("../../price/images/main-img.jpg") no-repeat center / cover;
}


#price .h_wrap .h02{
	margin-bottom: 1rem;
}

#price .msg{
	font-family: 'Noto Serif JP', serif;
	font-size: 1.125rem;
}

#price .msg .strong{
	font-size: 1.25em;
}

.price_ta{
	font-family: 'Noto Serif JP', serif;
}

.price_ta .ta th,
.price_ta .ta td{
	text-align: center;
}

.price_ta .bg_pattern::before{
	opacity: 0.025;
}

.price_ta .ta th{
	/*font-size: 1rem;*/
	font-size: 0.875rem;
	
	font-weight: 600;
	padding: 2rem 0;
}

.price_ta .ta th:first-of-type,
.price_ta .ta td:first-of-type{
	border-right: 1px solid #666;
}

.price_ta .ta td{
	padding: 1.75rem 0;
	background: #fff;
}

.price_ta th.single{
	color: #fff;
	background-color: #535353;
}

.price_ta th.couple{
	color: #fff;
	background-color: #833131;
}

.price_ta td.single{
}

.price_ta td.couple{
}


.price_ta .ta .price_count{
	font-size: 1.125rem;
	padding: 0.5rem 0.25rem;
	background: #ffe9d3;
}

.price_ta .ta .price_count:first-of-type{
	border-right: none;
}

.price_ta .comment{
	font-size: 1.125rem;
	text-align: center;
}

.price_ta .ta img{
	max-width: 90%;
	margin: 0 auto;
	image-rendering: -webkit-optimize-contrast;
}

.attention_wrap i{
	color: #d5ad23;
    margin-right: 0.75rem;
}

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

	.price_ta .ta th{
		font-size: 1.25rem;
	}

	.price_ta .ta img{
		max-width: 50%;
	}
}

/* 無料ご相談フォーム */

#form{
	/*padding: 2rem 0;*/
}

.form_ta{
	margin-bottom: 4rem;
}

.form_ta .ta{
	margin-bottom: 4rem;
}

.form_ta th{
	background: #FDEFD9;
	color: #9b6d26;
	border-right: 1px solid;
}

.form_ta td{
}


.form_ta .note{
	color: #666;
}

.form_ta input{
	margin-right: 0.5rem;
}

.form_ta .btn_wrap{
	justify-content: center;
}

.form_ta .btn_wrap .btn{
	width: 80%;
	margin: 0 0 2rem;
}


@media print, screen and (min-width:760px){
.form_ta th{
	padding-left: 1.5rem;
}

.form_ta td{
	padding-left: 1.5rem;
}
.form_ta .btn_wrap .btn{
	width: auto;
	margin: 0 2rem 0;
}
}



#footer{
	margin-top: 0;
}