/*
Theme Name: faith-by
Template: customify
*/




#masthead{
	position:sticky;
	top:0;
	
}

.text-red{
	color:#e14552!important;
}

main{

}


dl.horizontal {
display: flex;
flex-flow: row wrap;
width: 100%;
margin:0;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
}

dl.horizontal dt {
flex-basis: 18em;
padding: 0.8em 1.2em;
background-color: #f5f5f5;
border-bottom: 1px solid #eee;
margin:0;
}

dl.horizontal dd {
flex-basis: calc(100% - 18em);
padding: 0.8em 1.2em;
background-color:rgba(255,255,255,0.7);
border-bottom: 1px solid #eee;
margin:0;
}

dl.horizontal dt:first-of-type,
dl.horizontal dd:first-of-type{
border-top: 1px solid #eee;
}

@media screen and (max-width: 559px) {
dl.horizontal {
flex-flow: column;
display:block;
}
dl.horizontal dt,
dl.horizontal dd{

	}
}

span.required{
	background-color:#e14552;
	border-radius:0.4em;
	padding:0.15em 0.5em;
	font-size:75%;
	color:#fff;
	margin-left:0.4em;
}

span.unrequired{
	background-color:#bbb;
	border-radius:0.4em;
	padding:0.15em 0.5em;
	font-size:75%;
	color:#333;
	margin-left:0.4em;
}

.autowidth{
	width:initial!important;

}

/* ----------------------------------------
 * 共通
 * ---------------------------------------- */

h2.section-title{
	font-weight:900;
	color:#21594a;
	text-align:center;
	margin:0 0 1.5em 0;
}


.btn-contact{
	background-color:#e14552;
	color:#fff!important;
	border-radius:100vh;
	padding-left:1.3em!important;
	padding-right:1.3em!important;
	display:inline-block;
	transition:all 0.3s ease;
	position:relative;
	overflow:hidden;
}

.btn-contact{
	font-size:1.25rem;
	line-height:1em;
  padding: 0.8em 2em;
	font-weight:900;
}
.btn-contact:hover{
	background-color:#21594a;
	color:#fff!important;
}

.btn-contact:before {
  content: "";
  -webkit-animation: shine 4s cubic-bezier(0.25, 0, 0.25, 1) infinite;
          animation: shine 4s cubic-bezier(0.25, 0, 0.25, 1) infinite;
  background-color: #fff;
  width: 140%;
  height: 100%;
  -webkit-transform: skewX(-45deg);
          transform: skewX(-45deg);
  top: 0;
  left: -160%;
  opacity: 0.5;
  position: absolute;
}
 
@-webkit-keyframes shine {
  0% {
    left: -200%;
    opacity: 0;
  }
  70% {
    left: -200%;
    opacity: 0.5;
  }
  71% {
    left: -200%;
    opacity: 1;
  }
  100% {
    left: -20%;
    opacity: 0;
  }
}
@keyframes shine {
  0% {
    left: -200%;
    opacity: 0;
  }
  70% {
    left: -200%;
    opacity: 0.5;
  }
  71% {
    left: -200%;
    opacity: 1;
  }
  100% {
    left: -20%;
    opacity: 0;
  }
}


.js-marker {
  display: inline;
  position: relative;
  background-image: linear-gradient(90deg, #ffff66, #ffff66); 
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0 40%; 
  transition: all 1s ease-in-out 1s; 
  font-weight: bold; 
}


.js-marker.active {
  background-size: 100% 40%; 
}

/* ----------------------------------------
 * header
 * ---------------------------------------- */
.site-branding .site-name-desc{
	justify-content:flex-end!important;
	font-size:10px!important;
}


section.header-tel a{
	display:inline-block;
	color:#111!important;
	text-align:center;
	line-height:1.1em;
}

section.header-tel p{
	display:none;
}
section.header-tel div.number{
	font-size:1.5rem;
	font-weight:900;
	border-bottom:1px solid #999;
	padding-bottom:0.2em;
}

section.header-tel div.info{
	font-size:0.75rem;
	font-weight:400;
}

header .btn-contact{
	padding-top:0.6em;
	padding-bottom:0.6em;
}


.btn-nav-sp{
	width:45px;
	height:45px;
	line-height:45px;
	text-align:center;
	background-color:#e14552;
	color:#fff!important;
	border-radius:100vh;
}



/* ----------------------------------------
 * heroセクション
 * ---------------------------------------- */

section#hero .hero-wrapper{
	position:relative;
}

section#hero .hero-content{
	position:absolute;
	top:0%;
	left:0;
	padding:10% 0;
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	height:100%;
}

section#hero p{
	display:none;
}
section#hero h1{

	font-weight:900;
	color:#21594a;
}

section#hero h1 span{
	font-size:150%;
}

section#hero .feature{
	border-radius:1rem;
	background-color:rgba(255,255,255,0.5);
	border:4px solid #e14552;
	color:#e14552;
	font-size:1.25rem;
	font-weight:900;
	padding:0.75rem;
	width:300px;
	line-height:1em;
	display:flex;
	align-items:center;
	justify-content:center;
}

section#hero .feature:nth-child(1){
	margin-right:0.5rem;
}

section#hero .feature.price span{
	font-size:3rem;
	line-height:1;
}

section#hero .feature.speed{
	font-size:1.5rem;
	line-height:1.2em;

}


section#hero .feature.price {
  animation: feature 3.5s linear 2s infinite;
}
@keyframes feature {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  3%  { transform: scale(0.97, 0.97) translate(0%, 2.5%); }
  7%  { transform: scale(1.07, 0.87) translate(0%, 5%); }
  12%  { transform: scale(0.87, 1.07) translate(0%, -5%); }
  17%  { transform: scale(1.02, 0.97) translate(0%, 2.5%); }
  25% { transform: scale(1.0, 1.0) translate(0%, 0%); }
/*
  0%   { transform: scale(1.0, 1.0)  }
  20%  { transform: scale(1.1, 1.1)}
  30%   { transform: scale(0.9, 0.9)  }
  35%   { transform: scale(1.0, 1.0)  }
	*/
}


section#hero .hero-wrapper.sp .hero-content{
	position:relative;
	padding:0;
}
section#hero .hero-wrapper.sp .hero-content .hero-image{
	position:relative;
	padding:0;
}
section#hero .hero-wrapper.sp .feature-container{
	position:absolute;
	top:50%;
	transform:translatey(-50%);
	width:250px;
}

section#hero .hero-wrapper.sp .feature-container .feature{
	max-width:100%;
}

section#hero .hero-wrapper.sp h1{

	font-weight:900;
	color:#21594a;
	font-size:1.5rem;
	padding:0.6em 0;
}





/* ----------------------------------------
 * POINT
 * ---------------------------------------- */

section#point h3{
	font-weight:900;
	text-align:center;
	color:#e14552;
	margin:1em 0 1em 0
}

section#point .row div[class^="col-"]{
	position:relative;
}

section#point .label{
	position:absolute;
	top:0.5rem;
	left:0.5rem;
	text-align:center;
	background-color:#21594a;
	color:#fff;
	display:flex;
	align-items:center;
	flex-direction:column;
	justify-content:center;
	line-height:1.2em;
	width:60px;
	height:60px;
	border-radius:100vh;
	font-weight:900;
}
section#point .label span:nth-child(2){
	font-size:130%;
}

/* ----------------------------------------
 * Simulation
 * ---------------------------------------- */

dl.horizontal.simulation dt {
flex-basis: 14em;
display:flex;
align-items:center;
}

dl.horizontal.simulation dd {
flex-basis: calc(100% - 14em);
}


.btn-simulation{
	background-color:#e14552;
	color:#fff!important;
	border-radius:100vh!important;
	padding-left:1.3em!important;
	padding-right:1.3em!important;
	display:inline-block;
	transition:all 0.3s ease;
	position:relative;
	overflow:hidden;
	font-size:1.25rem;
	line-height:1em;
  padding: 0.8em 2em;
	font-weight:900;
}
.btn-simulation:hover{
	background-color:#21594a;
	color:#fff!important;
}



/* ----------------------------------------
 * SERVICE
 * ---------------------------------------- */

section#service h3{
	font-weight:900;
	text-align:center;
	color:#e14552;
	margin:0 0 0.7em 0;
}

#service .service-container {
	position:relative;
}


#service .service-container .service-text{
	position:absolute;
	top:0;
	left:0;
	width:90%;
	height:90%;
	padding:7%;
	margin:5%;
	background-color:rgba(255,255,255,0.85);
	display:flex;
	flex-direction:column;
	justify-content:center;
}

/* ----------------------------------------
 * CASE
 * ---------------------------------------- */

section#case section.row{
	box-shadow:0px 4px 16px rgba(0,0,0,0.15);
}

section#case section.row > div:nth-child(1){
	background-color:#21594a;
	color:#fff;
	position:relative;
}

section#case section.row > div:nth-child(1):after{
   content: "";
    position: absolute;
    top: 50%;
    right: -30px;
    transform: translateY(-50%); 
    border: 15px solid transparent;
    border-left: 24px solid #21594a; 
}

@media (max-width: 767.98px) { 
section#case section.row > div:nth-child(1):after{
    top: auto;
	bottom:-30px;
    left: 50%;
	right:auto;
    transform: translateX(-50%); 
    border: 15px solid transparent;
    border-top: 24px solid #21594a; 
	}
 }

section#case section.row > div:nth-child(2){
	background-color:#fff;
}

section#case section.row > div:nth-child(1) .case-inner{
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}

section#case section.row > div:nth-child(2) .case-inner{
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}

section#case section.row .case-inner{
	padding:1.75rem;
}

section#case section.row .case-inner .label{
	text-align:center;
	background-color:#fff;
	color:#21594a;
	display:flex;
	align-items:center;
	flex-direction:column;
	justify-content:center;
	line-height:1.2em;
	width:60px;
	height:60px;
	border-radius:100vh;
	font-weight:900;
}

section#case section.row .case-inner .label span{
	font-size:130%;
}

section#case section.row .case-inner h3{
	color:#fff;
	font-weight:900;
	font-size:1.5rem;
}
section#case section.row .case-inner h4{
	color:#e14552;
	font-weight:900;
	font-size:1.25rem;
	margin:1em 0;
}


/* ----------------------------------------
 * FLOW
 * ---------------------------------------- */

section#flow section .flow-inner{
	background-color:#fff;
	color:#;
	position:relative;
	height:100%;
	padding:1em;
	box-shadow:0px 4px 12px rgba(0,0,0,0.15);
}

section#flow section .flow-inner:after{
   content: "";
    position: absolute;
    top: 50%;
    right: -30px;
    transform: translateY(-50%); 
    border: 15px solid transparent;
    border-left: 24px solid #fff; 
}

section#flow section:last-child .flow-inner:after{
	border:0px;
}

@media (max-width: 767.98px) { 
	section#flow section .flow-inner:after{
    top: auto;
	bottom:-30px;
    left: 50%;
	right:auto;
    transform: translateX(-50%); 
    border: 15px solid transparent;
    border-top: 24px solid #fff; 
	}
 }
section#flow section .flow-inner h3{
	color:#e14552;
	font-weight:900;
	font-size:1.5rem;
	position:relative;
	text-align:center;
	margin:0 0 0.75em;
}

section#flow section .flow-inner h3 span{
	position:absolute;
	top:-1.25rem;
	left:-1.25rem;
	text-align:center;
	background-color:#21594a;
	color:#fff;
	display:flex;
	align-items:center;
	flex-direction:column;
	justify-content:center;
	line-height:1.2em;
	width:60px;
	height:60px;
	border-radius:100vh;
	font-weight:900;
	font-size:1rem;
}

/* ----------------------------------------
 * フローティングバナー
 * --------------------------------------- */

section#floating-banner{
	position:sticky;
	bottom:0;
	background-color:rgba(33,89,74,0.9);
	padding:0.75rem 0.75rem;
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0px -4px 10px rgba(0,0,0,0.15);
	transform:translatey(100%);
	transition:all 0.3s ease;
}

section#floating-banner.is-fadein{
	transform:translatey(0);	
}

section#floating-banner .btn-contact:before{
	display:none;
}

/*
section#floating-banner a{
	color:#c00;
	background-color:#fff;
	border-radius:100vh;
	display:inline-block;
	padding:0.5em 1em;
	font-weight:900;
}

section#floating-banner .phone-number{
	color:#fff;
	font-weight:900;
	
}
*/


/* ----------------------------------------
 * よくある質問
 * ---------------------------------------- */
.accordion-container {
  margin: 0;
  width: 100%;
}

.accordion-list:not(:first-child) {
  margin-top: 10px;
}

.accordion-title {
  background: #eee;
  cursor: pointer;
  font-size: 16px;
  padding: 20px 35px 20px 20px;
  position: relative;
	margin-bottom:1px;
	transition:all 0.3s ease;
}
.accordion-title.open,
.accordion-title:hover{
	background-color:#21594a;
	color:#fff;
}

.accordion-title:before {
  position: absolute;
  content: '';
  top: 50%;
  right: 15px;
  height: 2px;
  width: 15px;
  background-color: #333;
  transform: rotate(90deg);
  transition: all .3s ease-in-out;
}
.accordion-title:after {
  position: absolute;
  content: '';
  top: 50%;
  right: 15px;
  height: 2px;
  width: 15px;
  background-color: #333;
  transition: all .3s ease-in-out;
}



.accordion-title.open:before {
  transform: rotate(-180deg);
}
.accordion-title.open:after {
  opacity: 0;
}

.accordion-title.open:before,
.accordion-title:hover:before,
.accordion-title:hover:after{
	background-color:#fff;
}

.accordion-text {
  border-left: 1px solid #DDD;
  border-right: 1px solid #DDD;
  border-bottom: 1px solid #DDD;
  display: none;
  padding: 20px 40px;
	background-color:#fff;
}


/* ----------------------------------------
 * 会社情報
 * ---------------------------------------- */
dl.company {
display: flex;
flex-flow: row wrap;
width: 100%;
margin:0;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}

dl.company dt {
flex-basis: 12em;
padding: 0.8em 1.2em;
background-color: #eee;
border-bottom: 1px solid #ddd;
margin:0;
color:#21594a;
}

dl.company dd {
flex-basis: calc(100% - 12em);
padding: 0.8em 1.2em;
background-color:rgba(255,255,255,0.7);
border-bottom: 1px solid #ddd;
margin:0;
}

dl.company dt:first-of-type,
dl.company dd:first-of-type{
border-top: 1px solid #ddd;
}

@media screen and (max-width: 559px) {
dl.company {
flex-flow: column;
display:block;
border-bottom: 1px solid #ddd;
}
dl.company dt,
dl.company dd{
		border:0px;
	}
}
/* ----------------------------------------
 * アクセス
 * ---------------------------------------- */

section#access h3{
	font-weight:900;
	text-align:center;
	margin:0 0 1em;
}

dl.jfsa {
display: flex;
flex-flow: row wrap;
margin:0;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}

dl.jfsa dt {
flex-basis: 8em;
padding: 0.6em 0.8em;
background-color: #eee;
border-bottom: 1px solid #ddd;
margin:0;
color:#21594a;
}

dl.jfsa dd {
flex-basis: calc(100% - 8em);
padding: 0.6em 0.8em;
background-color:rgba(255,255,255,0.7);
border-bottom: 1px solid #ddd;
margin:0;
}

dl.jfsa dt:first-of-type,
dl.jfsa dd:first-of-type{
border-top: 1px solid #ddd;
}

@media screen and (max-width: 559px) {
dl.jfsa {
flex-flow: column;
display:block;
}
}
	
	.step.row {
		margin-bottom:1em;
	}

.step.row > div div{
	padding:1em;
	text-align:center;
	background-color:#fff;
	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
	border-left:1px solid #ddd;
}
.step.row div:last-child div{
	border-right:1px solid #ddd;
	}




.mw_wp_form_input .step.row div:nth-child(1) div,
.mw_wp_form_confirm .step.row div:nth-child(2) div,
.mw_wp_form_complete .step.row div:nth-child(3) div,
.step.row div.active div{
	background-color:#21594a;
	color:#fff;
	position:relative;
}


.mw_wp_form_input .step.row div:nth-child(1) div:after,
.mw_wp_form_confirm .step.row div:nth-child(2) div:after,
.mw_wp_form_complete .step.row div:nth-child(3) div:after{
   content: "";
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%); 
    border: 10px solid transparent;
    border-left: 18px solid #21594a; 
}
.mw_wp_form_complete .step.row div:nth-child(3) div:after{
	border:0px;
}

.mw_wp_form_confirm .confirm-hidden{
	visibility:hidden;
	display:none;
}

.btn-back,
.btn-submit{
	border-radius:100vh!important;
}

.btn-submit{
	background-color:#21594a!important;
}

.btn-back{
	background-color:#777!important;
}

#privacy ol,
#privacy ul{
	margin:0;
	padding:0 0 0 1.3em;
}

#privacy ol li,
#privacy ul li{
	margin:0;
	padding:0;
}


/* ----------------------------------------
 * カンタン無料診断
 * ---------------------------------------- */

.flashing {
  animation: flashing 1.5s linear 0s infinite;
}
@keyframes flashing {
  0%   { opacity:1; }
  30%  { opacity:1; }
  50%  { opacity:0; }
  70%  { opacity:1; }
  100%   { opacity:1; }
}