@charset "utf-8";
/* FDO HP用CSS */

.hp-section {
  margin: 0% 0% !important;
}
.loan-kv {
  padding-bottom: 0 !important;
}
.loan-kv > img {
  margin: auto 0%;
  width: 100%;
}
.loan-float-btn {
  background-color: rgba(255, 255, 255, 0.8);  /* 背景色を透過  */
  bottom: 0.0rem;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
  position: fixed;
  width: 100%;
  z-index: 10;
}
.loan-float-btn > li{
  margin: 0 -15% 0 auto;
  width: 50% !important;
}
.loan-float-btn > li+li{
  margin: 0 auto;
  width: 50% !important;
}
.loan-float-btn > li+li+li{
  margin: auto 0;
  text-align: center;
  width: 10% !important;
}
.loan-float-btn > li > a > img {
  margin: 3% 15% 3% 5%;
  width: 80%;
}
.loan-float-btn > li+li > a > img {
  margin: 3% 5% 3% 15%;
  width: 80%;
}
.loan-sim-main {
  background: #FFF100 !important;
  padding-bottom: 5%;
}
.loan-sim-applybtn > a > img{
  margin: -6% 13% auto 13%;
  width: 74%;
}
.loan-sim-remarks{
  background: #FFF100 !important;
  margin: auto 3%;
  width: 94%;
}
.loan-sim-remarks2{
  border: solid 2px black;
  border-radius: 1.2rem;
  padding: 1.0rem 1.0rem;
  margin-bottom: 2.0rem;
}
.loan-otoku-main {
  background: #fff3e7 !important;
  padding-top: 2.0rem;
  padding-bottom: 2.0rem !important;
}
.loan-otoku-img > img{
  width: 100%;
}
.loan-recommend-main {
   background: #36ad1b;
}
.loan-recommend-contents{
  color: #FFE600;
  font-size: 2.2rem !important;
  padding-top: 5vw;
}
/* ななめ背景用(基本設定) */
.loan-financing-main,
.loan-beginner-main,
.loan-appli-main,
.loan-privacy-main,
.loan-3steps-main,
.loan-payback-main {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.loan-financing-main::after,
.loan-3steps-main::after,
.loan-payback-main::after {
  content: "";
  height: 25%;
  left: 0;
  position: absolute;
  top: -25%;
  transform: skewY(-5deg);
  transform-origin: right bottom;
  width: 100%;
  z-index: 2;
}
.loan-privacy-main::before {
  bottom: -25%;
  content: "";
  height: 25%;
  position: absolute;
  right: 0;
  transform: skewY(-5deg);
  transform-origin: left bottom;
  width: 100%;
  z-index: 2;
}
.loan-financing-main::before,
.loan-beginner-main::before,
.loan-appli-main::before {
  bottom: 0%;
  content: "";
  height: 8px;
  position: absolute;
  right: 0;
  transform: skewY(-5deg);
  transform-origin: left bottom;
  width: 100%;
  z-index: 2;
}
.loan-financing-main,
.loan-beginner-main,
.loan-appli-main {
  background: #FFFFFF !important;
}
.loan-financing-main::after,
.loan-financing-main::before,
.loan-beginner-main::before,
.loan-appli-main::before {
  background: #36ad1b;
}
.loan-3steps-main, 
.loan-3steps-main::after,
.loan-privacy-main::before,
.loan-payback-main::after {
  background: #0082d7 !important;
}
.loan-payback-main::before {
  background: #d9ecf9 !important;
}
.loan-payback-main {
  background: #d9ecf9;
  padding-top: 5rem;
}
.loan-financing-img > img{
  margin: 5% 12% auto 12%;
  padding-top: 3rem;
  width: 76%;
}
.loan-beginner-img > img{
  margin: 3% 18% auto 18%;
  width: 64%;
}
.loan-appli-main {
  background: #FFFFFF !important;
}
.loan-appli-img > img{
  margin: 5% 15% auto 15%;
  width: 70%;
}
.loan-privacy-img > img{
  margin: 3% 17% auto 17%;
  width: 66%;
}
.loan-recommend-cmt {
  font-size: 1.6rem;
  font-weight: bold;
  margin-top: 1.6rem;
  text-align: center;
}
.loan-recommend-checked {
  margin: auto 8%;
  width: 84%;
}
.loan-recommend-annotation {
  margin: 0% 4% 10% 8%;
  width: 84%;
}
.loan-recommend-checked > ul{
  padding: 1rem 0rem 1rem 2rem;
  text-indent: -2.4rem;
}
.loan-recommend-checked > ul > li{
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}
.loan-recommend-checked > ul > li > img{
  margin-right: 0.5rem;
  vertical-align: middle;
  width: 5%;
}
.loan-3steps-title > img {
  margin: 7% 15% 2% 15%;
  width: 70%;
}
.loan-3steps-btn {
  margin: 2rem 15% 3rem 15%;
  width: 70%;
 }
.loan-payback-title {
  margin-bottom: 3rem;
}
.loan-payback-title > p {
  color: #006a9e;
  font-weight: bold;
  text-align: center;
}
.loan-payback-check1 {
  line-height: 1.8rem;
  padding-top: 3%;
}
.loan-payback-check2 {
  font-size: 2.6rem !important;
  line-height: 2.8rem;
  margin-top: 0.5rem;
}
.loan-payback-btn > a > img{
  margin: 2rem 15% 3rem 15%;
  width: 70%;
}
.loan-bs-frame26 {
  border-color: #006a9e !important;
  margin: 10% 5% auto 5% !important;
  width: 90%;
}
.loan-bs-frame26 > span{
  background: #d9ecf9 !important;
  color: #006a9e !important;
  display: flex !important;
  left: 0 !important;
  justify-content: center !important;
  margin: auto auto;
  position: relative !important;
  width: 80%;
}
.loan-bs-frame26 > ul,
.loan-payback-img > ul {
  background: #d9ecf9 !important;
}
.loan-payback-img{
  margin: auto 6%;
  padding-bottom: 2rem;
  width: 88%;
}
.loan-payback-img > img {
  margin-top: 3rem;
}
.loan-payback-img > p{
  color: #006a9e;
  font-size: 1.6rem;
  font-weight: bold;
  margin-top: 2rem;
  text-align: center;
}
.loan-uservoice-main {
  background: #0082d7 !important;
  margin-top: -2.4rem;
  padding-top: 1.0rem;
  position: relative;
  z-index: 5;
}
.loan-uservoice-img > img {
  margin: auto 19%;
  width: 62%;
}
.loan-hpcontent-width{
  margin: 5% 5%;
  width: 90%;
}
.loan-uservoice-flbox,
.loan-uservoice-flbox2 {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 2.0rem auto;
  width: 100%;
}
.loan-uservoice-flbox > li,
.loan-uservoice-flbox2 > li+li {
  width: 30%;
}
.loan-uservoice-flbox > li+li,
.loan-uservoice-flbox2 > li {
  width: 70%;
}
.loan-uservoice-flbox > img,
.loan-uservoice-flbox2 > img{
  max-width: 90%;
  margin: auto 5%;
}
.bs-frame31_left { /* 左吹き出し */
  position: relative;
  margin: 0 0 1.3em 25px;
  padding: 0 1.0rem 0 1.0rem;
  font-size: 16px;
  background: #ffffff;
  border-radius: 10px;
}
.bs-frame31_left:before {
  content: "";
  position: absolute;
  top: 30%;
  left: -32px;
  margin-top: -15px;
  border: 16px solid transparent;
}
.bs-frame31_woman{
  border: 3px solid #FFFFFF;
}
.bs-frame31_woman_left:before{
  border-right: 15px solid #FFFFFF;
}
.bs-frame31_man{
  border: 3px solid #FFFFFF;
}
.bs-frame31_man_left:before{
  border-right: 15px solid #FFFFFF;
}
.bs-frame31_right { /* 右吹き出し */
  position: relative;
  margin: 0 25px 1.3em 0;
  padding: 0 1.0rem 0 1.0rem;
  min-width: 120px;
  max-width: 100%;
  font-size: 16px;
  background: #ffffff;
  border-radius: 10px;
}
.bs-frame31_right:before{
  content: "";
  position: absolute;
  top: 30%;
  right: -32px;
  margin-top: -15px;
  border: 16px solid transparent;
}
.bs-frame31_woman_right:before{
  border-left: 15px solid #FFFFFF;
}
.bs-frame31_man_right:before{
  border-left: 15px solid #FFFFFF;
}
.bs-frame31_left p, .bs-frame31_right p{
  margin-top: 0.5rem;
  padding: 0;
}
.loan-uservoice-age{
  margin: 1.4rem auto;
  text-align: right;
}
.loan-question > img{
  margin: auto 17%;
  width: 66%;
}
.loan-qa-th-q > th{
  background: #0082D7 !important;
  border: solid 1px #0082D7 !important;
  color: #FFFFFF !important;
  font-size: 140%;
  font-weight: bold;
  width: 20%;
}
.loan-qa-th-q > td{
  background: #D9EEF9;
  border: none !important;
  padding: 1.0rem 1.0rem !important;
  width: 80%;
}
.loan-qa-th-a > th{
  background: #00A33E !important;
  border: solid 1px #00A33E !important;
  color: #FFFFFF !important;
  font-size: 140%;
  font-weight: bold;
}
.loan-qa-th-a > td{
  background: #E1EFDC;
  border: none !important;
  border-bottom: solid 1px #E1EFDC !important;
  padding: 1.0rem 1.0rem !important;
}
.loan-qa-th-a > td > ul{
  background: #E1EFDC;
}
.loan-attention {
  padding: 0% 5%;
}
.loan-attention > li{
  font-size: 1.4rem;
  list-style: disc;
  padding-top: 0.5rem;
}
.loan-lsindent2 > li {
  padding: 0.2rem 1rem;
  text-indent: -1.4rem;
}
.loan-condition-table > tbody > tr > th{
  width: 30%;
}
.loan-lsindent-ext > li{
  padding-left: 1.2rem;
  text-indent: -2.2rem;
}
.loan-title-contents{
  color: #585858;
  text-align: center;
}
.loan-title-contents > p{
  font-size: 2.0rem;
  font-weight: bold;
}
.loan-title-contents2 {
  background: #FFFFFF !important;
  padding-top: 2.0rem;
  padding-bottom: 0;
}
.loan-title-contents2 > div{
  background: dimgrey;
  color: #FFFFFF;
  padding: 1.0rem !important;
  text-align: center;
}
.loan-title-contents2 > div > p{
  font-size: 1.8rem;
  padding-top: 0;
}
.loan-recommend-img{
  align-content: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.loan-recommend-img > li{
  margin: 2rem auto;
  width: 50%;
}
.loan-recommend-img > li > a > img{
  margin: auto 15%;
  width: 70%;
}
.loan-hp-3steps-btnsp{
  border-radius: 12px;
  cursor: pointer;
  display: block;
  height: 80px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 280px;
}
.loan-hp-3steps-btnsp > img{
  display: block;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: .4s ease-in-out;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -webkit-transition: .4s ease-in-out;
}
.loan-hp-3steps-btnsp:hover img:nth-of-type(2){
  opacity: 0;
}
.loan-otoku-slider {
  margin: auto 10%;
  text-align: center;
  width: 80%;
}
@media screen and (min-width:481px) {
  .hp-section{
    width: 50%;
    margin: 0% 25% !important;
  }
  .hp-content{
    width: 96%;
    margin: auto 2% !important;
  }
  .loan-float-btn > li{
    margin: auto auto;
    text-align: right;
    width: 50% !important;
  }
  .loan-float-btn > li+li{
    text-align: left;
    width: 50% !important;
  }
  .loan-float-btn > li > a > img {
    margin: 1% 15% 1% 60%;
    width: 25%;
  }
  .loan-float-btn > li+li > a > img {
    margin: 1% 60% 1% 15%;
    width: 25%;
  }
  .loan-sim-main {
    padding-bottom: 2%;
  }
  .loan-sim-applybtn > a > img{
    margin: -3% 35% auto 35%;
    width: 30%;
  }
  .loan-sim-remarks {
    margin: auto 21%;
    width: 58%;
  }
  .loan-otoku-img > img{
    margin: auto 25%;
    width: 50% !important;
  }
  .loan-recommend-contents{
    padding-top: 1vw;
  }
  .loan-financing-main::after {
    transform: skewY(-2deg);
  }
  .loan-financing-img > img{
    margin: 5% 33% auto 33%;
    padding-top: 3rem;
    width: 34%;
  }
  .loan-beginner-img > img{
    margin: 2% 30% auto 30%;
    width: 40%;
  }
  .loan-appli-img > img{
    margin: 2% 34% auto 34%;
    width: 32%;
  }
  .loan-privacy-img > img{
    margin: 2% 28% auto 28%;
    width: 44%;
  }
  .loan-recommend-checked {
    margin: auto 22% auto 28%;
    width: 50%;
  }
  .loan-recommend-annotation {
    margin: auto 4% 10% 26%;
    width: 70%;
  }
  .loan-3steps-title > img {
    margin: 5% 32% 2% 32%;
    width: 36%;
  }
  .loan-3steps-btn {
    margin: 2rem 34% 3rem 34%;
    width: 32%;
  }
  .loan-payback-btn > a > img {
    margin: 2rem 33% 3rem 33%;
    width: 34%;
  }
  .loan-bs-frame26 {
    margin: 5% 20% auto 20% !important;
    width: 60%;
  }
  .loan-bs-frame26 > span {
    width: 50%;
  }
  .loan-payback-img {
    margin: 5% 20% 0% 20%;
    width: 60%;
  }
  .loan-payback-img > img{
    margin: auto 11%;
    width: 78%;
  }
  .loan-uservoice-main {
    padding: 3rem 3rem 0rem 3rem;
  }
  .loan-uservoice-img {
    margin: auto 10%;
    width: 80%;
  }
  .loan-uservoice-img > img {
    margin: auto 27%;
    width: 46%;
  }
  .loan-hpcontent-width {
    margin: 2% 5%;
  }
  .loan-uservoice-flbox > li > img{
    margin: auto 2% auto 38%;
    width: 60%;
  }
  .loan-uservoice-flbox2 > li > img{
    margin: auto 38% auto 2%;
    width: 60%;
  }
  .bs-frame31_left .bs-frame31_right{
    padding: 0 2.0rem 0 2.0rem;
  }
  .loan-question > img{
    margin: auto 25%;
    width: 50%;
  }
  .loan-attention > li{
    font-size: 1.6rem;
  }
  .bs-loantop-detail2-ext {
    margin: 2.0rem 5% !important;
    width: 90% !important;
  }
  .bs-loantop-detail3 {
    margin: 2rem 10% !important;
    width: 80%;
  }
  .loan-title-contents{
    margin: 0 1%;
    width: 98%;
  }
  .loan-recommend-img > li{
    margin: 2rem 0%;
    width: 25%;
  }
  .loan-recommend-img > li > a > img{
    margin: auto 20%;
    width: 60%;
  }
  .loan-hp-3steps{
    margin: auto 25%;
  }
  .loan-hp-3steps-btnpc{
    border-radius: 12px;
    cursor: pointer;
    display: block;
    height: 67px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
  }
  .loan-hp-3steps-btnpc > img{
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: .4s ease-in-out;
    width: 80%;
    -webkit-transform: translate(-50%, -50%);
    -webkit-transition: .4s ease-in-out;
  }
  .loan-hp-3steps-btnpc:hover img:nth-of-type(2){
    opacity: 0;
  }
  .loan-otoku-slider {
    margin: 3% 10% 0 10%;
    text-align: center;
    width: 80%;
  }
}