#mainContainer{
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 20px;
}
a:hover{
  text-decoration: none !important;
  opacity: 1 !important;
  color: #fff !important;
}
h1{
  font-size: 40px;
  font-weight: bold;
  line-height: 1.3;
  color: #1f77c8;
}
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, h1{ font-size: 44px; } /* IE11 */
}
.keyvisual h1 + p{
  margin-top: 15px;
  margin-bottom: 10px;
  font-weight: bold;
}
.lh2 {
  line-height: 2;
}

.contents_wrapper {
  margin: 0 auto;
  max-width: 1000px;
}

.pc_w_900 {
  max-width: 900px;
  margin: 0 auto;
}
.keyvisual .bg_blue {
  padding: 165px 50vw 200px;
  margin: 0 -50vw;
  background: #edf3f4;
  position: relative;
}
.bg_blue {
  padding: 100px 50vw 160px;
  margin: 0 -50vw;
  background: #edf3f4;
  position: relative;
}
.characterbg_blue{
  padding: 114px 45vw 110px 50vw;
  margin: 0 -50vw;
  background: #edf3f4;
  position: relative;
}

.bg_blue_2 {
  padding: 120px 50vw;
  margin: 0 -50vw;
  background: #1f77c8;
  color: #FFFFFF ;
}
.bg_blue_2_1{
  padding: 137px 50vw;
    margin: 0 -53vw;
    background: #1f77c8;
    color: #FFFFFF;
}
.bg_blue_3 {
  padding: 176px 53vw 84px;
  margin: 0 -53vw;
  background: #488fd0;
  color: #fff;
  font-size: 20px;
}
.bg_blue_3 p{
  line-height: 2.7;
}
.bg_white {
  margin: 80px 0 0;
  padding: 80px 50px 50px;
  background: #fff;
  position: relative;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
#multidevice .col_item >div{
  margin: 0px 0 0 95px
}
#recommendinfomation .col_item >div{
  margin: 51px 0 0 95px;
}
#recommendinfomation{
  position: relative;
  height: 360px;
}
#ancher_faq{
  padding: 100px 50vw 100px;
}

.col {
  display: flex;
  margin-right: 0 !important;
}

.col_item {
  flex: 1;
}
.keyvisual .h1txt{
  order: 0;
}
.keyvisual .h1img{
  order: 1;
}
.Anchor_area a{
  font-size: 18px;
  color: #fff;
}
.Anchor_area .col{
  border-left: 1px solid #195fa0;
  border-right: 1px solid #195fa0;
  color: #fff;
}

.Anchor_area .col .col_item{
  padding: 10px 0;
}
.Anchor_area section{
  position: relative;
}
.Anchor_area .col .col_item:nth-of-type(1){
  border-right: 1px solid #195fa0;
}
.smoothScroll img{
  vertical-align: middle !important;
  margin-right: 5px;
}

.h1img{
  position: relative;
}

.kv_pc{
  position: absolute;
    max-width: 670px;
    left: -110px;
    top: -80px;
}
#ancher_renewalpoint{
  margin-bottom: 40px;
}
.btn_scroll{
  /* position: absolute;
    left: 450px;
    top: -70px; */
}
.btnscrollwrapp{
  position: absolute;
    top: -70px;
    width: 100%;
    text-align: center;
}
.QA_area{
  background: #fff;
  margin-bottom: 30px;
}
.QA_area p{
  padding: 20px;
}
.QA_area p:nth-of-type(1){
  border-bottom: 2px solid #1f77c8;
  color: #1f77c8;
  font-weight: bold;
}
.QA_area p:nth-of-type(2){
  color: #333333;
  padding: 27px 20px;
}
.QA_area img{
  width: 36px;
  margin-right: 5px;
  vertical-align: middle !important;
}
.title_q{
  text-align: center;
  margin: 20px 0 43px;
  font-size: 40px;
  color: #333333;
  font-weight: bold;
}
.bg_blue_2.Anchor_area{
  padding: 20px 50vw;
}
.infomation{
  padding: 116px 0 !important;
}
.infomation .col_item.col2{
  background: url(/lp/imgs/site_renewal/img_recommendation.png);
  height: 371px;
  background-repeat: repeat-x;
  background-size: contain;
  background-position: right;
}
.rwd_header_content {
  max-width: 1000px;
}
.renewal_point{
  font-size: 40px;
  color: #333333;
  font-weight: bold;
}
.bg_blue .h-text,
.characterbg_blue .h-text{
  font-size: 28px;
  color: #333333;
  font-weight: bold;
}
.bg_blue .h-text::after,
.characterbg_blue .h-text::after{
  content: "";
  width: 60px;
  border-top: 2px solid #1f77c8;
  display: block;
  margin: 15px 0;
}
.bg_blue_2 .h-text,
.bg_blue_2_1 .h-text{
  font-size: 28px;
  color: #ffffff;
  font-weight: bold;
}
.bg_blue_2 .h-text::after,
.bg_blue_2_1 .h-text::after{
  content: "";
  width: 60px;
  border-top: 2px solid #ffffff;
  display: block;
  margin: 15px 0;
}
.character_wrapp,
.p_rerative,
.device_wrapp{
  position: relative;
}
.device_wrapp{
  order: 0;
}
.device_txtwrapp{
  order: 1;
  padding-top: 50px;
}
.character{
  position: absolute;
  top: -200px;
  display: none;
}
.p_ab_search{
  position: absolute;
  left: 281px;
  top: -64px;
}
.p_ab_info {
  position: absolute;
  left: -3px;
  top: -186px;
}
.device{
  right: 0;
  top: 0;
}
.d_flex{
  display: flex;
}
#renewalpoint_design_triger_text,
#move_multidevice,
#move_recommendinfomation{
  display: none;
}
#multidevice{
  position: relative;
  height: 312px;
}
#seihinarea{
  padding: 157px 42vw 145px 50vw;
  position: relative;
}
#seihinarea_triger{
  position: absolute;
  top: 100px;
  height: 1px;
}
#multidevice_triger{
  position: absolute;
  top: 100px;
  height: 1px;
}
#recommendinfomation_triger{
  position: absolute;
    top: 100px;
    height: 1px;
    left: 50%;
}
#seihinarea .txt_area{
  width: 380px;
}
#recommendinfomation .txt_area{
  width: 435px;
}
#recommendinfomation .col_item:nth-of-type(1){
  order: 1;
}
#recommendinfomation .col_item:nth-of-type(2){
  order: 0;
}
#renewal_point_okyakusama{
  margin-bottom: 26px;
}
.move_text,#move_Renewalpoint_1,#move_Renewalpoint_2{
  display: none;
}
#TextArea{
  height: 335px;
  position: relative;
}
#TextArea_triger{
  position: absolute;
  top: 40px;
  height: 1px;
}
#renewalpoint_design{
  position: relative;
  height: 29.6vw;
  /* min-height: 370px; */
  max-height: 380px;
}
#renewalpoint_design_triger{
  position: absolute;
  top: 40px;
  height: 1px;
}
#seihinarea .col{
  height: 285px;
}

/* js */
.an2-fadeup {
  animation-name: fadeup;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  }
.an2-fadeIn{
  animation-name: fadeIn;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
}

.btn_scroll {
  position: absolute;
  top: -95px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

@keyframes fadeup {
  from {
      opacity: 0;
      transform: translateY(200px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}
@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}


@media screen and (max-width: 899px) {
  #mainContainer{
    font-size: 4.2vw;
  }
  h1{
    font-size: 8.9vw;
  }
  .renewal_point {
    font-size: 7.5vw;
    font-weight: bold;
    text-align: center;
  }
  .bg_blue_2 .h-text, .bg_blue_2_1 .h-text {
    font-size: 6vw;
    text-align: center;
  }
  .bg_blue .h-text, .characterbg_blue .h-text {
    font-size: 6.3vw;
  }
  .keyvisual {
    background: #eff3f8;
  }
  .kv_pc {
    position: static;
    max-width: 670px;
    left: -110px;
    top: -80px;
  }
  #seihinarea .txt_area {
    width: auto;
    margin: 0 0 20px 0;
  }
  .bg_blue_2 .col_item:nth-of-type(2) {
    margin-left: 0;
  }
  .bg_blue_2_1 .col_item:nth-of-type(2) {
    margin-left: 0;
    margin-top: 30px;
  }
  .Anchor_area .col {
    border-left: none;
    border-right: none;
    }
  .bg_blue_2.Anchor_area {
    padding: 20px 46vw;
  }
  .Anchor_area .col .col_item {
    padding: 0;
  }
  .Anchor_area .col_item:nth-of-type(1)::after {
    content: "";
    width: 4.5vw;
    height: 2.4vw;
    border-top: none;
    display: block;
    background: url(/lp/imgs/site_renewal/sp_icon_arrow.png);
    background-size: contain;
    position: absolute;
    left: 23vw;
    bottom: -0.4vw;
  }
  .Anchor_area .col_item.col2::after {
    content: "";
    width: 4.5vw;
    height: 2.4vw;
    border-top: none;
    display: block;
    background: url(/lp/imgs/site_renewal/sp_icon_arrow.png);
    background-size: contain;
    position: absolute;
    right: 23vw;
    bottom: -0.1vw
  }
  .Anchor_area .col .col_item:nth-of-type(1) {
    border-right: 1px solid #195fa0;
    padding: 0 0 15px 0;
  }

  .Anchor_area a:nth-of-type(1){
    padding: 10% 0vw 12%;
  }
  .Anchor_area a:nth-of-type(2){
    padding: 10% 9vw 31%;
  }
  .Anchor_area .col_item.col2{
    padding-top: 14px;
  }
  .character_wrapp{
    display: none;
  }
  .character {
    position: static;
  }
  .characterbg_blue {
    padding: 40px 53vw 0;
  }
  .p_ab_info {
    position: static;
  }
  .btn_scroll {
    width: 13vw;
    margin: 0 auto !important;
  }
  .Anchor_area img{
    margin: 0;
  }
  #seihinarea {
    padding: 40px 53vw 60px;
  }
  #ancher_renewalpoint{
    background: #edf3f4;
    padding: 0 210vw;
      margin: 0 -210vw;
  }
  #ancher_renewalpoint p{
    font-weight: bold;
  }
  #ancher_renewalpoint p:nth-of-type(2){
    margin: 10px 0 0 0;
  }
  #renewal_point_okyakusama{
    background: #edf3f4;
    padding: 0 210vw;
      margin: 0 -210vw;
  }
  #ancher_renewalpoint >div{
    background: #fff;
    overflow: hidden;
    padding: 0 210vw;
    margin: 0 -210vw;
    border-bottom-right-radius: 1000px 300px;
    border-bottom-left-radius: 1000px 300px;
    margin-left: -200px;
    margin-right: -200px;
    padding-left: 200px;
    padding-right: 200px;
    min-height: 35vw;
  }
  #renewal_point_okyakusama > div{
    background: #fff;
    overflow: hidden;
    padding: 0 210vw;
    margin: 0 -210vw;
    border-bottom-right-radius: 1000px 300px;
    border-bottom-left-radius: 1000px 300px;
    margin-left: -200px;
    margin-right: -200px;
    padding-left: 200px;
    padding-right: 200px;
    min-height: 44vw;
  }
  .bg_blue .h-text::after, .characterbg_blue .h-text::after {
    margin: 5vw auto;
  }
  .contents_wrapper {
    margin: 0 20px 0;
  }
  .keyvisual .bg_blue{
    padding: 15vw 50vw;
    margin: 0 -50vw;
    background: #edf3f4;
  }
  .bg_blue {
    padding: 70px 53vw;
    margin: 0 -50vw;
    background: #edf3f4;
  }

  .bg_blue_2 {
    padding: 40px 53vw;
    margin: 0 -50vw;
    background: #1f77c8;
  }
  .bg_blue_3{
    padding: 80px 53vw 80px;
    font-size: 3.8vw;
    margin: 0 -50vw;
  }
  .Anchor_area section .nav{
    display: flex;
  }
  .col {
    display: block;
  }
  .keyvisual .h1txt{
    order: 0;
  }
  .keyvisual .h1img{
    order: 1;
  }
  .infomation {
    padding: 60px 40vw 40px !important;
  }
  .infomation .col_item.col2 {
    height: 49vw;
  }
  #recommendinfomation .col_item:nth-of-type(1){
    width: 90vw;
    margin: 0 auto;
  }
  .bg_blue .h-text,
  .characterbg_blue .h-text,
  .device_txtwrapp p.h-text{
    text-align: center;
  }
  .img_rp{
    width: 32vw;
  }
  #ancher_renewalpoint div p:nth-of-type(1),
  #renewal_point_okyakusama div p:nth-of-type(1){
    text-align: center;
  }
  .device_txtwrapp {
    padding-top: 0;
  }
  #multidevice .col_item >div {
    margin: 0;
  }
  .bg_blue_2_1 {
    padding: 73px 53vw 21px;
  }
  .bg_blue_2 .h-text::after, .bg_blue_2_1 .h-text::after {
    margin: 5vw auto;
  }
  #recommendinfomation .col_item >div {
    margin: 0 0 30px;
    padding: 0 4vw;
  }
  #recommendinfomation .txt_area {
    width: auto;
  }
  .QA_area img {
    display: none;
  }
  .QA_area p {
    padding: 20px 5vw 20px 14vw;
  }
  .QA_area p:nth-of-type(1):before{
    content: "";
    display: block;
    width: 7vw;
    height: 7vw;
    background: url(/lp/imgs/site_renewal/pc_icon_Q.png);
    background-size: cover;
    position: absolute;
    margin: 0px 0 0px -9vw;
  }
  .title_q {
    font-size: 6vw;
    margin: 0 0 25px 0;
  }
  #TextArea {
    height: 82.5vw;
  }
  #renewalpoint_design {
    height: 141vw;
    min-height: none;
    max-height: none;
    line-height: 1.62;
  }
  .d_flex{
    display: block;
  }
  #multidevice {
    height: 125vw;
  }
  #seihinarea .col {
    height: 140.6vw;
  }
  #recommendinfomation {
    height: 126vw;
  }
  .btnscrollwrapp{
    top: -12vw;
  }
  .device_wrapp {
    text-align: center;
  }
  .device_wrapp img{
    width: 77vw;
  }
  #move_Renewalpoint_2{
    text-align: center;
  }
  #move_Renewalpoint_2 img{
    width: 74vw;
  }
  #move_Renewalpoint_1{
    text-align: left;
  }
  .bg_blue .h-text::after, .characterbg_blue .h-text::after {
    width: 10vw;
  }
  .bg_blue_3 p {
    line-height: 2.3;
  }
  #ancher_faq {
    padding: 83px 53vw 30px;
  }
  .QA_area p:nth-of-type(2) {
    padding: 27px 5vw;
  }
  .btn_scroll {
    top: -8vw;
  }
  img#simple-logo {
    width: auto;
  }
}


