@charset "utf-8";
/******************サービスページ**************************/

/*************家・マンションの鍵********************/
.main_title {
  background-image: linear-gradient(90deg, #052b59, #155fb9 64%);
  color: #fff;
  font-size: 1.75rem;
  font-weight: 600;
  padding: 1.25rem 1rem;
}
@media (max-width:661px) {
  .main_title {
    font-size: 1.5rem;
    padding: 1rem;
  }
}
.title_black_wrap {
  background-image: linear-gradient(90deg, #1b1b1b, #484848);
  padding: 18px;
}
.title_black {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}
.service_contents {
  background-color: #f0f0f0;
  border: 2px solid #535353;
  border-top: none;
  padding: 1.5rem 2rem;
  gap: 1rem;
  box-shadow: 0px 5px 0px 0px #7a7a7a;
  margin-bottom: 1rem;
}
.service_contents_l {
  flex: 1;
}
.service_contents_r img {
  box-shadow: 0px 5px 0px 0px #7a7a7a;
}
.service_price {
  border: 2px solid #535353;
  background-color: #fff;
  padding: 1rem;
  margin-bottom: 12px;
}
.price_border {
  justify-content: left;
  align-items: end;
  padding-bottom: 14px;
  border-bottom: #052b59 solid 1px;
}
.price_01 {
  background-color: #052b59;
  color: #fff;
  font-weight: bold;
  font-size: 1em;
  line-height: 1.2;
  padding: 5px 10px;
  margin-right: 5px;
}
.price_02 {
  font-weight: bold;
  color: #e20101;
  font-size: 50px;
  font-family: "Open Sans";
  line-height: 1;
  margin-right: 5px;
}
.price_style {
  font-size: 38px;
  font-family: "Noto Sans JP";
}
.price_style:nth-child(2) {
  font-size: 24px;
}
.price_03 {
  text-align: left;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
}
.price_03 .tax {
  color: #333;
  font-size: 14px;
  font-weight: normal;
}
.price_03 .buhin {
  color: #e20101;
  font-size: 14px;
  font-weight: bold;
}
.price_text {
  font-weight: bold;
  padding-top: 10px;
  line-height: 1.4;
}
.service_btn.blue {
  background-color: #052b59;
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 5px;
}
.service_btn.blue:hover {
  opacity: 0.7;
}

/*********レスポンシブ*********/
@media screen and (min-width: 661px) {
  .title_black_wrap {
  width: 697px;
  }
  .service_contents {
    position: relative;
  }
  .service_contents::before {
    content: url(../images/service/page_style.png);
    position: absolute;
    line-height: 0;
    right: 0;
    top: -64px;
    right: -2px;
  }
}

@media screen and (max-width: 660px) {
  .service_contents {
    flex-direction: column-reverse;
  }
  .title_black_wrap {
    align-items: center;
    position: relative;
  }
  .title_black_wrap::before {
    position: absolute;
    content: url(../images/service/page_style_sp.png);
    top: 0;
    right: 0;
    line-height: 0;
  }
  .title_black {
    writing-mode: vertical-rl;
    font-size: 1.5rem;
  }
  .title_black_wrap {
    padding: 1rem;
  }
  .service_contents {
    padding: 1rem;
  }
  .service_price {
    padding: 1rem;
  }
  .service_contents_r {
    display: flex;
    justify-content: center;
  }
  .price_border {
    justify-content: center;
  }
  .service_price_inner {
    max-width: 412px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 419px) {
  .price_border {
    flex-wrap: wrap;
  }
  .price_01 {
    font-size: 12px;
  }
  .price_02 {
    font-size: 40px;
  }
  .price_style {
      font-size: 24px;
  }
}

@media screen and (max-width: 370px) {
    .price_01 {
    display: none;
  }
}

/************開錠サービス**************/
#service_intro_wrapper {
  background-color: #dfdfdf;
  padding: 3rem 1.5rem 1.5rem;
}
.service_text_img {
  text-align: center;
  margin-bottom: 2rem;
}
.service_intro_container {
  border: #052b59 5px solid;
  position: relative;
  margin-bottom: 1rem;
}
.service_intro_container::after {
  content: "";
  position: absolute;
  width: 69px;
  height: 69px;
  top: -5px;
  left: -5px;
  background-color: #052b59;
  clip-path: polygon(0 0,100% 0,0 100%);
}
.service_intro_container::before {
  content: "";
  position: absolute;
  width: 69px;
  height: 69px;
  right: -5px;
  bottom: -5px;
  background-color: #052b59;
  clip-path: polygon(0% 100%, 100% 100%, 100% 0%);
}
.service_intro_contents {
  flex: 1;
  background-color: #fff;
  padding: 1.5rem;
}
.service_main_text {
  background-image: linear-gradient(90deg, #444444, #2d2d2d 51%, #444444);
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  padding-left: 6px;
}
.service_main_text:first-child {
  margin-bottom: 4px;
}
.service_sub_text {
  line-height: 1.4;
  margin-top: 10px;
}
/************レスポンシブ*****************/
@media screen and (max-width: 660px) {
  #service_intro_wrapper {
    padding-top: 2rem;
    padding-bottom: 1.5rem;
  }
  .service_intro_container {
    display: block;
  }
  .service_intro_contents {
    text-align: center;
  }
}
@media screen and (max-width: 429px) {
  .service_main_text {
    font-size: 4.4vw;
  }
  .service_sub_text {
    font-size: 3.72vw;
  }
}


/**********鍵のサービス************/
.place_detail {
  flex-wrap: wrap;
  gap: 5px;
  align-items: flex-start;
  justify-content: flex-start;
  margin-top: 10px;
  font-size: 14px;
}
.place_detail span {
  background-color: #b8dae9;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}

/**************レスポンシブ***************/
@media screen and (max-width: 660px) {
  .title_black {
    writing-mode: horizontal-tb;
  }
}

/***********鍵のサービスのご案内***********/
.service_guide_wrapper {
  background-color: #052b59;
  padding: 1rem;
}
.service_guide_wrapper.place {
  background-color: #bbbbbb;
}
.service_guide_contents {
  background-color: #fff;
  padding: 1.5rem;
  gap: 1rem;
}
.service_guide_contents:not(:last-child) {
  margin-bottom: 1rem;
}
.guide_r {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.service_name {
  color: #052b59;
  font-size: 24px;
  font-weight: bold;
  border-bottom: #052b59 2px dotted;
  text-align: center;
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.guide_r p {
  line-height: 1.4;
}
.service_link {
  text-align: right;
  margin-top: 1rem;
  color: #19417d;
  position: relative;
  padding-right: 1rem;
  font-weight: 600;
  text-decoration: underline;
}
.service_link::before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #19417d;
  border-right: solid 2px #19417d;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.service_link::before {
  transform: rotate(45deg);
}
.service_link::after {
  transform: rotate(-45deg);
}
.service_link:hover {
  color: #4b70a8;
  text-decoration: none;
}


/**********レスポンシブ*************/ 
@media screen and (max-width: 660px) {
  .service_guide_contents {
    display: block;
    padding: 1rem;
    text-align: center;
  } 
  .guide_r .service_name {
    font-size: 24px;
    margin-top: 10px;
  }
  .guide_r p {
    font-size: 16px;
  }
}


/*************鍵の施工事例***************/
.jirei_con {
  border: #d8d8d8 1px solid;
  padding: 1rem;
}
.jirei_con:not(:last-child) {margin-bottom: 10px;}
.jirei_title {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: #d8d8d8 1px solid;
}
.sagyo-naiyo span {
  background-color: #11599d;
  padding: 0 5px;
  color: #fff;
}
.jirei_main figure {
  float: left;
  margin-right: 16px;
}
.jirei_main p {
  font-size: 15px;
  line-height: 1.4;
}


/*************対応箇所***************/
.place_con {
  border-bottom: #d1d1d1 1px solid;
  display: flex;
  gap: 20px;
  padding: 10px 0;
}
.place_con:last-child {border-bottom: none;}
.place_name {
  flex: 1;
  display: flex;
  align-items: center;
  color: #0a3f80;
  font-weight: bold;
  justify-content: center;
}
#place .place_detail {
  display: inline-flex;
  flex-wrap: wrap;
  flex: 5;
  margin-top: 0;
  gap: 8px;
}
#place .place_detail span {
  background-color: #ffffff;
  font-weight: normal;
}

@media (max-width: 660px) {
  .place_con {
    flex-direction: column;
  }
  #place .place_detail span {
    background-color: #dfedff;
  }
}