@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

*{
  margin: 0;
  padding: 0;
  font-size: 0;
  box-sizing: border-box;
  font-weight: normal;
  /* 全体的にcopperplateフォントでよかったでしょうか？ */
  /* copperplateフォントがブラウザによって対応してなかった場合は別のフォントを充てます */
  font-family: Copperplate,'arial black', sans-serif;
}

/* *************************************** */
/* HEADER                                  */
/* *************************************** */
.header{
  position: relative;
}
.header h1{
  position: absolute;
}
.tel-number{
  position: absolute;
  top: 2.75vw;
  left: 78.67vw;
  width: 17.67vw;
}
.tel-number img{
  width: 100%;
}
@media screen and (min-width:840px){
  .header{
    height: 109px;
  }
  .header h1{
    margin: 40px 0 40px 20px;
    font-size: 30px;
  }
}
@media screen and (max-width:839px){
  .header{
    height: 12.98vw;
  }
  .header h1{
    margin: 4.76vw 0 4.76vw 2.38vw;
    font-size: 5.57vw;
  }
}

/* *************************************** */
/* TOP-VIEW                                */
/* *************************************** */
.top-view{
  position: relative;
}
.top-view img{
  width: 100vw;
}
.top-bg{
  width: 100vw;
  height: 2.83vw;
  background-color: #c4c4c4;
  z-index: -1;
}
.top-view h2{
  position: absolute;
  top: 4.42vw;
  left: 31.17vw;
  color: #155AA0;
  font-size: 5vw;
  font-weight: bold;
}
.top-view span{
  font-weight: bold;
  font-size: 3.33vw;
}
.top-content{
  display: inline-grid;
  place-items: center;
  width: calc(100vw/3);
  height: 15.92vw;
}
.top-content p{
  font-size: 3vw;
  text-align: center;
  font-weight: bold;
  color: #ffffff;
  transform: translateY(0.5vw);
}
.top-content p span{
  font-size: 6vw;
  line-height: 1.27;
}
.top-content-left{
  background-color: #b0b0b0;
}
.top-content-center{
  background-color: #a2a2a2;
}.top-content-right{
  background-color: #8f8f8f;
}


/* *************************************** */
/* LONE-VIEW                               */
/* *************************************** */
@media screen and (min-width:840px){
  .lone-view{
    position: relative;
    display: grid;
    grid-template: 
      "multi_ok multi_ok multi_ok" auto
      "...      example       ..." auto
      "...      lone          ..." auto
      "...      balloon       ..." auto
      "...      before        ..." auto
      "...      three         ..." auto
      "...      consultation  ..." auto
      /auto 840px auto;
  }
}
@media screen and (max-width:839px){
  .lone-view{
    position: relative;
    display: grid;
    grid-template: 
      "multi_ok multi_ok multi_ok" auto
      "...      example       ..." auto
      "...      lone          ..." auto
      "...      balloon       ..." auto
      "...      before        ..." auto
      "...      three         ..." auto
      "...      consultation  ..." auto
      /auto 77.38vw auto;
  }
}
.lone-multi-ok{
  grid-area: multi_ok;
  overflow: hidden;
  position: relative;
  margin-top: 34px;
  text-align: center;
  margin-bottom: 21px;
}
.lone-multi-ok p{
  display: inline-block;
  text-align: center;
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  color: #ffffff;
  background-color: #00324B;
  border-radius: 21px;
}
@media screen and (min-width:840px){
  .lone-multi-ok p{
    width: 295px;
    height: 42px;
    padding-top: 3px;
    font-size: 24px;
  }
}
@media screen and (max-width:839px){
  .lone-multi-ok p{
    width: 230px;
    height: 32px;
    padding-top: 1px;
    font-size: 20px;
  }
}
.lone-multi-block{
  position: absolute;
  text-align: center;
  top: 1.75vw;
  height: 27px;
  border: 5px solid #00324B;
  border-bottom: none;
  border-radius: 27px 27px 0 0;
  z-index: -1;
}
@media screen and (min-width:840px){
  .lone-multi-block{
    width: 840px;
  }
}
@media screen and (max-width:839px){
  .lone-multi-block{
    width: 640px;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.example-lone{
  grid-area: example;
  display: grid;
}
@media screen and (min-width:840px){
  .example-lone{
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
  }
}
@media screen and (max-width:839px){
  .example-lone{
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
.example-lone img{
  width: 100%;
}
.lone-ok{
  grid-area: lone;
  font-weight: bold;
  text-align: center;
}
@media screen and (min-width:840px){
  .lone-ok{
    font-size: 36px;
    margin-top: 87px;
    margin-bottom: 55px;
  }
}
@media screen and (max-width:839px){
  .lone-ok{
    font-size: 4.0vw;
    margin-top: 7.25vw;
    margin-bottom: 4.58vw;
  }
}
.balloon{
  grid-area: balloon;
  position: relative;
  width: max-content;
  background-color: #eaeaea;
  font-weight: bold;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.balloon::before{
  content: "";
  position: absolute;
  z-index: 0;
  transform: rotate(35deg);
  z-index: -1;
}
@media screen and (min-width:840px){
  .balloon{
    font-size: 24px;
    padding: 5px;
    border-radius: 24px;
  }
  .balloon::before{
    bottom: -25px;
    left: 8px;
    border: 25px solid transparent;
    border-left: 15px solid #eaeaea;
  }
}
@media screen and (max-width:839px){
  .balloon{
    font-size: 2.86vw;
    padding: 0.6vw;
    border-radius: 2.86vw;
  }
  .balloon::before{
    bottom: -2.98vw;
    left: 0.95vw;
    border: 2.98vw solid transparent;
    border-left: 1.79vw solid #eaeaea;
  }
}
.before-giveup{
  grid-area: before;
  text-align: center;
  font-weight: bold;
}
@media screen and (min-width:840px){
  .before-giveup{
    margin-top: 30px;
    margin-bottom: 45px;
    font-size: 36px;
  }
}
@media screen and (max-width:839px){
  .before-giveup{
    margin-top: 2.5vw;
    margin-bottom: 3.75vw;
    font-size: 4.285vw;
  }
}
.three-points{
  grid-area: three;
  position: relative;
  display: grid;
  margin: 0 auto;
  background: linear-gradient(to bottom, #1B5E8D, 90%, #2EA2E2);
}
.three-points::before{
  content: '';
  position: absolute;
  display: grid;
  margin: 0 auto;
  background: linear-gradient(to bottom, #1B5E8D, 90%, #2EA2E2);
}
.three-points::after{
  content: '';
  position: absolute;
  display: grid;
  margin: 0 auto;
  background: linear-gradient(to bottom, #1B5E8D, 90%, #2EA2E2);
}
@media screen and (min-width:840px){
  .three-points{
    width: 10px;
    height: 30px;
    border-radius: 5px;
    transform: translateY(-21px);
  }
  .three-points::before{
    width: 10px;
    height: 30px;
    border-radius: 5px;
    left: -50px;
    transform: rotate(-30deg) translateY(5px);
  }
  .three-points::after{
    width: 10px;
    height: 30px;
    border-radius: 5px;
    left: 50px;
    transform: rotate(30deg) translateY(5px);
  }
}
@media screen and (max-width:839px){
  .three-points{
    width: 1.19vw;
    height: 3.57vw;
    border-radius: 0.6vw;
    transform: translateY(-1.75vw);
  }
  .three-points::before{
    width: 1.19vw;
    height: 3.57vw;
    border-radius: 0.6vw;
    left: -5.95vw;
    transform: rotate(-30deg) translateY(0.42vw);
  }
  .three-points::after{
    width: 1.19vw;
    height: 3.57vw;
    border-radius: 0.6vw;
    left: 5.95vw;
    transform: rotate(30deg) translateY(0.42vw);
  }
}
.consultation{
  grid-area: consultation;
  position: relative;
  display: grid;
  text-align: center;
  align-content: center;
  font-weight: bold;
  color: #ffffff;
  text-decoration: none;
  padding: 0 auto;
  margin: auto;
  border-radius: 50px;
  background: linear-gradient(to right, #1B5E8D, 70%, #2EA2E2);
}
.consultation::before{
  content: '無料';
  display: grid;
  text-align: center;
  align-content: center;
  position: absolute;
  font-weight: bold;
  color: #1B5E8D;
  background-color: #ffffff;
  border-radius: 50%;
}
@media screen and (min-width:840px){
  .consultation{
    font-size: 24px;
    height: 100px;
    width: 420px;
    margin-bottom: 66px;
  }
  .consultation::before{
    font-size: 24px;
    height: 90px;
    width: 90px;
    top: 5px;
    left: 5px;
  }
}
@media screen and (max-width:839px){
  .consultation{
    font-size: 2.86vw;
    height: 11.9vw;
    width: 50vw;
    margin-bottom: 5.5vw;
  }
  .consultation::before{
    font-size: 2.86vw;
    height: 10.7vw;
    width: 10.7vw;
    top: 0.6vw;
    left: 0.6vw;
  }
}

/* *************************************** */
/* LONE-MESSAGE                            */
/* *************************************** */
.lone-message{
  text-align: center;
  background-color: #DE9158;
  color: #ffffff;
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}
.bold{
  font-weight: bold;
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}
.dot{
  font-weight: bold;
  position: relative;
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}
.dot::before{
  content: "・";
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  position: absolute;
  top: -1.2em;
}
.small{
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}
@media screen and (min-width:840px){
  .lone-message{
    font-size: 48px;
    padding: 44px;
    margin-bottom: 73px;
  }
  .bold{
    font-size: 48px;
  }
  .dot{
    font-size: 48px;
  }
  .dot::before{
    font-size: 36px;
  }
  .small{
    font-size: 24px;
  }
}
@media screen and (max-width:839px){
  .lone-message{
    font-size: 5.714vw;
    padding: 3.67vw;
    margin-bottom: 6.08vw;
  }
  .bold{
    font-size: 5.714vw;
  }
  .dot{
    font-size: 5.714vw;
  }
  .dot::before{
    font-size: 4.286vw;
  }
  .small{
    font-size: 2vw;
  }
}



/* *************************************** */
/* LONE-SIMULATION                         */
/* *************************************** */
@media screen and (min-width:840px){
  .lone-simulation{
    display: grid;
    grid-template: 
      "... simulation-a ..." auto
      "... ...          ..." 50px
      "... simulation-b ..." auto
      "... ...          ..." 50px
      "... simulation-c ..." auto
      / auto 70vw auto;
  }
}
@media screen and (max-width:839px){
  .lone-simulation{
    display: grid;
    grid-template: 
      "... simulation-a ..." auto
      "... ...          ..." 50px
      "... simulation-b ..." auto
      "... ...          ..." 50px
      "... simulation-c ..." auto
      / auto 89.52vw auto;
  }
}
.lone-image-a{
  grid-area: simulation-a;
  width: 100%;
}
.lone-image-b{
  grid-area: simulation-b;
  width: 100%;
}
.lone-image-c{
  grid-area: simulation-c;
  width: 100%;
}
.balloon-get-myhome{
  position: relative;
  text-align: center;
  margin: 5.75vw 15vw;
  border: solid 0.42vw #e5e5e5;
}
.balloon-get-myhome::before{
  content: "";
  position: absolute;
  top: -4.3vw;
  left: 50%;
  margin-left: -1.35vw;
  border: 2.2vw solid transparent;
  border-bottom: 2.2vw solid #ffffff;
  z-index: 2;
}
.balloon-get-myhome::after{
  content: "";
  position: absolute;
  top: -5.83vw;
  left: 50%;
  margin-left: -2.08vw;
  border: 2.92vw solid transparent;
  border-bottom: 2.92vw solid #e5e5e5;
  z-index: 1;
}
.home-icon{
  display: inline-block;
  width: 4.42vw;
}
.get-myhome{
  display: inline-block;
  font-size: 2.92vw;
  margin: 2.92vw 0;
}
.blue{
  color: #1B5E8D;
  font-size: 4vw;
  font-weight: bold;
}
.orange{
  color: #ED6603;
  font-size: 4vw;
  font-weight: bold;
}
.burden-reduction{
  grid-area: consultation;
  position: relative;
  display: grid;
  text-align: center;
  align-content: center;
  font-weight: bold;
  color: #ffffff;
  text-decoration: none;
  padding-left: 50px;
  padding-right: 50px;
  margin: auto;
  border-radius: 50px;
  background: linear-gradient(to right, #1B5E8D, 70%, #2EA2E2);
}
.burden-reduction::before{
  content: '無料';
  display: grid;
  text-align: center;
  align-content: center;
  position: absolute;
  font-size: 24px;
  font-weight: bold;
  color: #1B5E8D;
  background-color: #ffffff;
  height: 90px;
  width: 90px;
  border-radius: 50%;
  top: 5px;
  left: 5px;
}
@media screen and (min-width:840px){
  .burden-reduction{
    font-size: 24px;
    height: 100px;
    width: 420px;
    margin-bottom: 66px;
  }
  .burden-reduction::before{
    font-size: 24px;
    height: 90px;
    width: 90px;
    top: 5px;
    left: 5px;
  }
}
@media screen and (max-width:839px){
  .burden-reduction{
    font-size: 2.86vw;
    height: 11.9vw;
    width: 50vw;
    margin-bottom: 5.5vw;
  }
  .burden-reduction::before{
    font-size: 2.86vw;
    height: 10.7vw;
    width: 10.7vw;
    top: 0.6vw;
    left: 0.6vw;
  }
}

/* *************************************** */
/* STRONG-POINT                            */
/* *************************************** */
.frame-strong-point{
  display: grid;
  grid-template: 
    "... frame1 ..." auto
    "... ...    ..." 46px
    "... frame2 ..." auto
    / auto 70vw auto;
  padding-bottom: 70px;
}
.frame{
  position: relative;
  width: 70vw;
  height: 42.1vw;
  background-color: #FFFEF2;
  filter: drop-shadow(0px 2px 2px #C8C8C8);
  border-radius: 2vw;
}
.frame01{
  grid-area: frame1;
}
.frame02{
  grid-area: frame2;
}
.strong-reason{
  position: absolute;
  width: 7.92vw;
  top: 1.67vw;
  left: 7.92vw;
}
.frame h3{
  position: absolute;
  top: 5.67vw;
  left: 17.1vw;
  font-size: 3vw;
  font-weight: bold;
}
.strong-image01{
  position: absolute;
  top: 11.25vw;
  left: 21.67vw;
  width: 26.75vw;
}
.strong-image02{
  position: absolute;
  top: 11.25vw;
  left: 21.67vw;
  width: 21.92vw;
}
.frame p{
  position: absolute;
  font-size: 3.51vw;
  font-weight: bold;
  top: 32.33vw;
  width: 300vw;
  left: 50%;
  text-align: center;
  transform: translateX(-50%) scale(calc(1/3));
}

/* *************************************** */
/* PROPERTY-EXAMPLE                        */
/* *************************************** */
.property-example{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

@media screen and (min-width:840px){
  .property-example{
    gap: 40px;
    margin: 0 180px 47px 180px;
  }
}
@media screen and (max-width:839px){
  .property-example{
    gap: 3.33vw;
    margin: 0 20px 47px 20px;
  }
}
.property-example img{
  width: 100%;
}
.new-propaty{
  grid-area: consultation;
  position: relative;
  display: grid;
  text-align: center;
  align-content: center;
  font-weight: bold;
  color: #ffffff;
  text-decoration: none;
  font-family: 'Noto Sans JP', sans-serif;
  padding-left: 50px;
  padding-right: 50px;
  margin: auto;
  border-radius: 50px;
  background: linear-gradient(to right, #1B5E8D, 70%, #2EA2E2);
  white-space: nowrap;
}
.new-propaty::before{
  content: '最新';
  display: grid;
  text-align: center;
  align-content: center;
  position: absolute;
  font-weight: bold;
  color: #1B5E8D;
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #ffffff;
  border-radius: 50%;
}
@media screen and (min-width:840px){
  .new-propaty{
    font-size: 24px;
    height: 100px;
    width: 420px;
    margin-bottom: 66px;
  }
  .new-propaty::before{
    font-size: 24px;
    height: 90px;
    width: 90px;
    top: 5px;
    left: 5px;
  }
}
@media screen and (max-width:839px){
  .new-propaty{
    font-size: 2.86vw;
    height: 11.9vw;
    width: 50vw;
    margin-bottom: 5.5vw;
  }
  .new-propaty::before{
    font-size: 2.86vw;
    height: 10.7vw;
    width: 10.7vw;
    top: 0.6vw;
    left: 0.6vw;
  }
}

/* *************************************** */
/* CHOOSED REASON                          */
/* *************************************** */
.choose-reason-parent{
  position: relative;
}
.choose-reason-parent img{
  width: 100%;
}
.worry01{
  position: absolute;
  top: 8.5vw;
  left: -15.1vw;
  font-size: 6vw;
  font-weight: bold;
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  text-align: center;
  width: 150vw;
  transform: scale(calc(1/3));
}
.worry02{
  position: absolute;
  top: 22vw;
  left: -11.33vw;
  font-size: 6vw;
  font-weight: bold;
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  text-align: center;
  width: 150vw;
  transform: scale(calc(1/3));
}
.choose-reason-parent h3{
  position: absolute;
  top: 42.92vw;
  left: 24.75vw;
  font-size: 4vw;
  color: #ffffff;
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  text-align: center;
}
.reason-title01{
  position: absolute;
  top: 52.25vw;
  left: 29.09vw;
  font-size: 18vw;
  font-weight: bold;
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  width: 400vw;
  transform: scale(calc(1/6));
  transform-origin: left top;
}
.reason-text01{
  position: absolute;
  top: 60.25vw;
  left: 23.42vw;
  font-size: 12vw;
  font-weight: bold;
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  width: 600vw;
  transform: scale(calc(1/9));
  transform-origin: left top;
}
.reason-title02{
  position: absolute;
  top: 71.02vw;
  left: 29.91vw;
  font-size: 18vw;
  font-weight: bold;
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  width: 400vw;
  transform: scale(calc(1/6));
  transform-origin: left top;
}
.reason-text02{
  position: absolute;
  top: 78.42vw;
  left: 22.91vw;
  font-size: 12vw;
  font-weight: bold;
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  width: 600vw;
  transform: scale(calc(1/9));
  transform-origin: left top;
}
.reason-title03{
  position: absolute;
  top: 89.3vw;
  left: 26.91vw;
  font-size: 18vw;
  font-weight: bold;
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  width: 400vw;
  transform: scale(calc(1/6));
  transform-origin: left top;
}
.reason-text03{
  position: absolute;
  top: 97vw;
  left: 23.58vw;
  font-size: 12vw;
  font-weight: bold;
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  width: 600vw;
  transform: scale(calc(1/9));
  transform-origin: left top;
}


/* *************************************** */
/* CUSTOMERS VOICE                         */
/* *************************************** */
.cv-balloon{
  position: relative;
}
.cv-balloon h2{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #de9158;
}
.cv-balloon img{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width:840px){
  .cv-balloon{
    height: 194px;
  }
  .cv-balloon h2{
    font-size: 48px;
    margin-top: 55px;
    margin-bottom: 45px;
  }
  .cv-balloon img{
    width: 380px;
    margin-top: 51px;
    margin-bottom: 45px;
  }
}
@media screen and (max-width:839px){
  .cv-balloon{
    height: 23.1vw;
  }
  .cv-balloon h2{
    font-size: 5.7vw;
    margin-top: 6.55vw;
    margin-bottom: 5.36vw;
  }
  .cv-balloon img{
    width: 45.24vw;
    margin-top: 6.07vw;
    margin-bottom: 5.36vw;
  }
}
.customers-voice{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.cv{
  position: relative;
}
@media screen and (min-width:840px){
  .customers-voice{
    margin: 0 180px;
    gap: 40px;
  }
}
@media screen and (max-width:839px){
  .customers-voice{
    margin: 0 20px;
    gap: 3.33vw;
  }
}
.cv img{
  width: 100%;
}
/* .customer{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  font-weight: bold;
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  white-space: nowrap;
}
@media screen and (min-width:840px){
  .customer{
  top: 0.8vw;
  font-size: 1.2vw;
  }
}
@media screen and (max-width:839px){
  .customer{
  top: 1.0vw;
  font-size: 2vw;
  }
}
.borrowing-amount{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2vw;
  color: #de9158;
  font-weight: bold;
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  white-space: nowrap;
}
@media screen and (min-width:840px){
  .borrowing-amount{
  top: 6.0vw;
  font-size: 1.5vw;
  }
}
@media screen and (max-width:839px){
  .borrowing-amount{
  top: 8.0vw;
  font-size: 2.5vw;
  }
}
.comment{
  position: absolute;
  top: 10vw;
  left: 1.5vw;
  line-height: 2.45vw;
  font-size: 1.64vw;
  color: #353535;
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
} */
.settled{
  position: relative;
  width: max-content;
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: #de9158;
  text-align: center;
}
@media screen and (min-width:840px){
  .settled{
    margin: 40px auto 72px auto;
    font-size: 24px;
  }
}
@media screen and (max-width:839px){
  .settled{
    margin: 4.76vw auto 8.57vw auto;
    font-size: 2.86vw;
  }
}

/* *************************************** */
/* THOSE IN NEED                           */
/* *************************************** */
.need-frame{
  position: relative;
  background-color: #fff3e0;
  border-radius: 1vw;
  left: 50%;
  transform: translateX(-50%);
}
.need-title{
  position: absolute;
  width: fit-content;
  font-weight: bold;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Noto Sans JP', sans-serif;
  white-space: normal;
}
.need-text{
  position: absolute;
  width: fit-content;
  text-decoration: underline;
  text-decoration-color: #636363;
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}
@media screen and (min-width:840px){
  .need-frame{
    width: 840px;
    height: 762px;
    margin-bottom: 154px;
  }
  .need-title{
    font-size: 48px;
    top: 39px;
  }
  .need-text{
    font-size: 26px;
    top: 164px;
    line-height: 60px;
    margin: 0 138px;
  }
}
@media screen and (max-width:839px){
  .need-frame{
    width: 100vw;
    height: 90.71vw;
    margin-bottom: 12.83vw;
  }
  .need-title{
    font-size: 5.55vw;
    top: 3.25vw;
  }
  .need-text{
    font-size: 3.095vw;
    top: 19.52vw;
    line-height: 7.143vw;
    margin: 0 16.43vw;
  }
}

/* *************************************** */
/* FOOTER                                  */
/* *************************************** */
.footer{
  position: relative;
  height: 286px;
  background-color: #DE9158;
  color: #ffffff;
}
.company{
  position: absolute;
  top: 55px;
  font-size: 18px;
  font-weight: bold;
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  left: 50%;
  transform: translateX(-50%);
}
.office-gh{
  position: absolute;
  top: 98px;
  font-size: 18px;
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.all-rights-reserved{
  position: absolute;
  top: 213px;
  font-size: 12px;
  margin: 0 auto;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}