@charset "UTF-8";
@import url(animate.css);
@import url(magnific_popup.css);
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
    font-family:  "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 18px;
  line-height: 1.4;
  color: #333;
  font-weight: normal;
}


h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  margin: 0 0;
  line-height: 1.5;
}

h1, h2, h3 {
  text-align: center;
}

figure {
  margin: 0;
}

img {
  vertical-align: middle;
}

ul,
ol {
  list-style: none;
  margin: 0 0;
  padding-left: 0;
}


.bg-gray{
background-color: #EDEDED;
}

.bg-green{
background-color: #358286;
}

.bg-blue {
  background-color: #C5EFEF;
}
.bg-darkgreen {
  background-color: #1B5338;
}

.w100{
width: 96%;
max-width: 1000px;
margin: 0px auto;
display: block;
}
.w80{
width: 80%;
max-width: 800px;
margin: 0px auto;
display: block;
}

.w60{
width: 60%;
max-width: 600px;
margin: 0px auto;
display: block;
}

.contents{
    padding: 70px 0;
}


@media only screen and (min-width: 521px) and (max-width: 768px) {

.w100{
width: 100%;
max-width: 700px;
}
.w80{
width: 80%;
max-width: 560px;
}
.w60{
width: 60%;
max-width: 500px;
}
}


@media only screen and (max-width: 520px) {
body {
  font-size: 17px;
}
.w100{
width: 94%;
max-width: 520px;
margin: 0px auto;
}
.w80{
width: 90%;
max-width: 500px;
}
.w60{
width: 85%;
max-width: 470px;
}
}

header {
  background-color: #a0d9dc;
}

header img {
  padding: 8px 20px;
  height:88px;
}

.pc{
display: block;
}

.sp{
display: none;
}

@media only screen and (max-width: 520px) {
.pc{
display: none;
}

.sp{
display: block;
}

header img {
  width:28%;
  display: block;
  margin: 0 auto;
  height: auto;
}
}


/*メインビジュアル*/
.fv{
background: url("../img/mv_bg.png") #EDEDED ;
background-repeat: no-repeat;
background-size: contain;
background-position: right bottom;
}
.fvsp{
width:100%;
margin: 0 auto;
padding: 0;
}
.fvsp img{
width:100%;
}
.fv_copy{
width: 60%;
position: relative;
left: 0px;
top:30px;
z-index: 2;
}

.ballon_pc {
    display: inline-block;
    position: relative;
    top: 40px;
    right: 0px;
    left: 50px;
    width: 30%;
}


.fv_v{
    width: 60%;
    margin: 0;
    padding: 30px 20px;
    display: block;
    vertical-align: baseline;
}

@media only screen and (min-width: 521px) and (max-width: 768px) {

}


@media only screen and (max-width: 520px) {
.fv_copy{
width: 90%;
left: 50%;
transform: translateX(-50%);
}

.ballon_pc {
position: static;
float: right;
margin: 24px 40px -50px;
width: 120px;
}

.fv{
background-image: url("../img/mv_bg.png");
background-repeat: no-repeat;
background-size: contain;
background-position: right bottom;
}
.fv_v{
    width: 120%;
    margin: 0 0 0 -40px;
}
}

.btn_wrap{
    text-align: center;
    padding: 50px 0;
}

.btn_wrap img{
    margin: 0 auto;
}

h2 {
  color: #4F3E28;
  font-size: 40px;
  font-weight: bold;
  margin-bottom: .3em;
}

@media only screen and (max-width: 520px) {
h2 {
  font-size: 30px;
}   
}

/*アニメーション系*/

.move {
  position: absolute;
  z-index: -1;
  text-decoration: none;
  background: linear-gradient(rgba(238, 119, 36, 0) 60%, #fffbc7 40%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 1s; }

.movetop {
  position:relative;
  z-index: 1;
  text-decoration: none;
  background: linear-gradient(rgba(238, 119, 36, 0) 60%, #fffbc7 40%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: 1s; }

 .marker1 {
  width: 600px;
  height: 5.5%;
  left: 300px;
  top: 100px; 
  }

.marker1_sp {
  width: 86%;
  height: 4.4%;
  left: 7%;
  top: 13%; }

.fade-in {
  opacity: 0.0;
  transform: translate(0, 50px);
  transition: all 1.2s; }


.fade_off {
  opacity: 0;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s; }

.fade_on {
  opacity: 1; }



/*point*/
.point{
background: url("../img/anshin_bg.png") #C5EFEF;
background-repeat: no-repeat;
background-position: left top;
background-size: 40%;
}

.point-wrap{
display:flex;
justify-content: space-between;
padding: 20px 0;
}

.point-child{
width: 30%;
}

.point h3{
font-size: 23px;
font-weight: bold;
margin: 10px auto;
}


.point-txt{
width: 100%;
height: 370px;
padding: 20px;
background-color: rgba(255,255,255,0.75);
border-radius: 10px;
}

.point-icon{
width: 32%;
display: block;
margin: -60px auto 0px;
}


@media only screen and (min-width: 521px) and (max-width: 768px) {


.point-child{
width: 32%;
}
.point h3{
font-size: 1.3rem;
}
.point-txt{
font-size: 1rem;
height: 350px;
}
}


@media only screen and (max-width: 520px) {
.point-wrap{
  -webkit-flex-direction: column;          /* Safari etc. */
  -ms-flex-direction    : column;          /* IE10        */
  flex-direction        : column;
  padding: 20px 0 0;
}
.point-child{
width: 90%;
margin: 0 auto 50px;
}
.point-icon{
width: 60px;
margin-top: -50px;
}
.point-txt{
height: auto;
}
.point{
background-size: 70%;
}
}

/*事例*/
.voice{
    padding: 70px 0 ;
}
.voice-head{
display: flex;
justify-content: space-between;
  align-items: center;
}
.voice_icon{
width: 11%;
}
.voice_icon img{
 width: 100%;
 margin-left: 50px;
 }

.voice_ttl {
  width: 80%;
　display: block;
  color: #0A905F;
  font-size: 28px;
  font-weight: bold;
}

.voice_ttl span{
  color: #333;
  font-size: 18px;
  font-weight: normal;   
}

.voice-child{
    padding: 70px 0 30px;
}

.voice-img{
width: 450px;
float:right;
padding-left: 30px;
padding-bottom: 20px;
}

.voice-txt{
background-color: #FFFFFF;
padding: 30px 40px;
min-height: 310px;
margin-top: 0px;
border-radius: 20px;
box-shadow: 5px 5px 5px rgba(0,0,0,0.35);
}

.voice-txt p{
letter-spacing: 0.3px;
line-height: 1.8;
margin-right: 16px;
}

.attention{
font-size: 0.9rem;
width: 90%;
margin: 0 auto;
}

@media only screen and (max-width: 520px) {
.attention{
font-size: 0.8rem;
width: 96%;}
}

@media only screen and (min-width: 521px) and (max-width: 768px) {
.voice-img{
width: 350px;
padding-left: 20px;
padding-bottom: 10px;
}

.voice_ttl {
  font-size: 22px;
}
}


@media only screen and (max-width: 520px) {
.voice-head{
  align-items:flex-end;
}
.voice-img{
width: 100%;
float: none;
margin-top: 10px;
padding-left: 0px;
padding-bottom: 0px;
}
.voice-txt{
padding: 10px 20px;
height: auto;
margin: 0px auto 20px;
border-radius: 20px;
}
.voice-txt p{
margin-right: 0px;
font-size: 15px;
}
.voice-child{
    padding: 30px 0 0px;
}
.voice_ttl {
  font-size: 20px;
  width:70%;
  padding-bottom: 10px;
}
.voice_ttl span {
  font-size: 14px;
}
.voice_icon{
width: 22%;
}
.voice_icon img{
 width: 100%;
 margin-left: 15px;
 }
}

/* 不安 */
.fuan-wrap{
background: #fff;
padding: 0;
margin: 0;
border: none;
}
.fuan{
background: url("../img/fuan_bg.png");
background-position: right;
background-repeat: no-repeat;
background-size: contain;
}
.fuan-child{
width: 50%;
height: auto;
padding: 50px;
margin: 0 auto;
text-align: center;
}
.fuan-child img{
width: 100%;
}

@media only screen and (min-width: 521px) and (max-width: 768px) {


}


@media only screen and (max-width: 520px) {

.fuan{
  -webkit-flex-direction: column;          /* Safari etc. */
  -ms-flex-direction    : column;          /* IE10        */
  flex-direction        : column;
  padding: 0;
}
.fuan-child{
width: 75%;
padding: 20px;
margin: 0px auto;
}
}

/* サービス */
.service{
background-image: url("../img/denkyu.png");
background-position: left 10px bottom 10px;
background-repeat: no-repeat;
background-size: 16%;
}
.service_wrap{
display: flex;
justify-content: space-between;
margin: 30px auto;
}
.service_child{
width: 30%;
}
.service_child h3{
width: 94%;
margin: 0 auto;
}


.service h3 span.blue{
  color: #4F3E28;
}
.service p{
font-size: 1.2rem;
display: inline-block;
}

.denkyu-txt{
padding-left: 200px;
padding-top: 60px;
font-weight: bold;
}


@media only screen and (min-width: 521px) and (max-width: 768px) {


}


@media only screen and (max-width: 520px) {

.service_wrap{
  -webkit-flex-direction: column;          /* Safari etc. */
  -ms-flex-direction    : column;          /* IE10        */
  flex-direction        : column;
}
.service_child{
width: 90%;
margin: 10px auto;
}
.service_child img{
  width: 60%;
}
.service p{
font-size: 16px;
}

}



/* 借金を減らす3つの方法 */


.howto h4{
  background-color: #1B5338;
  color: #ffffff;
  font-size: 36px;
  height: 70px;
  line-height: 70px;
  vertical-align: middle;
  font-weight: bold;
  text-indent: 1em;
  margin-top: 40px;
  border-radius: 16px 16px 0 0;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.35);
}

.img-fluid {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}



@media screen and (max-width: 767px) {
.howto h4{
  font-size: 24px;
}
}



.howto .item-howto {
  background-color: #FFFFFF;
  border-radius: 10px;
  margin-bottom:  50px;
  padding: 1.2em;
  display: -ms-flexbox;
  display: flex;
  border-radius: 0px 0px 16px 16px;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.35);
}

@media only screen and (max-width: 520px) {
  .howto .item-howto {
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.howto .item-howto .text {
  width: 40%;
  margin-right: 8%;
}

@media only screen and (max-width: 520px) {
  .howto .item-howto .text {
    width: 100%;
  }
}
.spbr{
display: none!important;
}

@media only screen and (max-width: 520px) {

.spbr{
display: block!important;
}

}

.howto .item-howto .text p {
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 0.5px;
  margin-left: 20px;
}

.howto .item-howto figure {
  width: 48%;
}

@media only screen and (max-width: 520px) {
  .howto .item-howto figure {
    width: 100%;
  }
.howto .item-howto .text p {
  font-size: 16px;
  margin-left: 0px;
}
}

/* ステップ */
.step{
background: url("../img/flow_bg.png") #C5EFEF;
background-position: right top;
background-repeat: no-repeat;
background-size: 45%;
}
@media only screen and (max-width: 520px) {
.step{
background-size: 70%;
}
}

/* メッセージ */
.message p{
letter-spacing: 0.3px;
line-height: 1.8;
}


/* 事務所概要 */

.overview .overview_wrap {
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.overview_wrap div{
  width: 46%;
  margin: 20px 30px 20px 0;
  padding-left: 15px;
  border-left: 5px solid #009134;
}
.overview_wrap dd{
  margin-left:0;
}


@media only screen and (max-width: 768px) {
.overview .overview_wrap {
  -webkit-flex-direction: column;          /* Safari etc. */
  -ms-flex-direction    : column;          /* IE10        */
  flex-direction        : column;

}
.overview_wrap div{
  width: 90%;
  margin: 15px auto;
  padding-left: 15px;
}
}

/* 汎用クラス */
/* underline */


.marker {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%3E%3Cpath%20fill%3D%22%23fffc00%22%20d%3D%22M0%200h10v10H0z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
  background-position: 50% 100%;
  display: inline;
}
.marker2{
text-decoration: underline ;
text-decoration-color:  #F46F40 ;
text-underline-position: under;
}

 footer {
   font-size: 16px;
   background-color: #1B5338;
   padding: 30px 0;
   margin: 0 auto;
 }
footer ul{
  display:flex;
  justify-content: space-around;
}

 footer li {
  display: inline;
 }

 footer a {
  text-decoration: none;
   color: #fff;
 }

.copyright{
padding-top: 10px;
text-align: center;
   font-size: 14px;
   color: #fff;
    font-weight: lighter;
}

@media only screen and (max-width: 520px) {

footer ul{
justify-content: center;
}

 footer li {
display: inline-block;
  text-align: center;
  width: 100%;
  padding: 0 3px;
 }
}


/*下層ページ*/

.subcontents_wrap{
width: 88%;
padding: 50px 60px;
background-color: #fff;
border-radius: 18px;
margin:  20px auto;
line-height: 2;
}

.subcontents_wrap h2{
font-size: 20px;
margin-bottom: 20px;
color: #1B5338;
}


.subcontents_wrap h3{
background-color: #1B5338;
height: 50px;
line-height: 50px;
text-indent: 1.5em;
color:#fff;
text-align: left;
font-size: 18px;
border-radius: 25px;
margin-bottom: 20px;
margin-top: 30px;
}
.subcontents_wrap p{
letter-spacing: 0.2px;
line-height: 1.8;
width: 95%;
margin: 20px auto 30px;
}
.bold{
font-weight: bold;
}

@media only screen and (max-width: 520px) {

.subcontents_wrap{
width: 100%;
padding: 30px 15px;
}
}