@charset "UTF-8";
#repair footer .side_inquiry {
  display: none;
}

#repair footer .side_inquiry.version02 {
  display: block;
}

/** -------------------------------- **
	Animation
*** ----------------------------------------------------------------- ***/
@keyframes indicator {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes indicator2 {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes appear {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.fadeIn {
  opacity: 0;
  transition: 2s;
}

.fadeIn.is-show {
  opacity: 1;
}

/* 汎用 */
.pcb {
  display: block;
}

.disp_tbl {
  display: table;
}

.disp_b {
  display: block;
}

.m_side_auto {
  margin-left: auto;
  margin-right: auto;
}

.indent1em {
  padding: 0 0 0 1em;
  text-indent: -1em;
}

.align_center {
  text-align: center !important;
}

.align_left {
  text-align: left !important;
}

.align_right {
  text-align: right !important;
}

.wid_auto {
  width: auto;
}

.inner_wrap {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.inner_wrap02 {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* line-height */
.line_ht {
  line-height: 1.75;
}

/* テキスト */
.note_caption {
  font-size: 1.4rem;
}
.note_caption.mtcap {
  margin-top: 1.6em;
}

.lede_txt {
  font-size: 1.8rem;
}

.txt_cl {
  text-align: center;
}

.bold {
  font-weight: bold;
}

.weight_n {
  font-weight: normal !important;
}

.weight_m {
  font-weight: 500 !important;
}

.txt_link {
  color: #00508e;
}
.txt_link:hover {
  text-decoration: none;
}

.txt_link_arrow {
  color: #00508e;
  position: relative;
  padding: 0 0 0 1.2em;
}
.txt_link_arrow svg {
  width: 7px;
  height: 12px;
  fill: #00508e;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0.5em;
}
.txt_link_arrow:hover {
  text-decoration: none;
}

.arrow_link_button {
  background: #fff;
  border: 1px solid #c4c4c4;
  color: inherit;
  position: relative;
  padding: 0.5em 1em;
  display: flex;
  align-items: center;
  text-decoration: none;
  min-height: 50px;
}
.arrow_link_button p {
  padding-left: 1em;
  position: relative;
}
.arrow_link_button svg {
  width: 7px;
  height: 12px;
  fill: #00508e;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0.5em;
}
.arrow_link_button:hover {
  background: #00508e;
  color: #fff;
}
.arrow_link_button:hover svg {
  fill: #fff;
}

.button_wrapper {
  width: fit-content;
}

.tel_link {
  color: #333;
  text-decoration: none;
  pointer-events: none;
}

.symbol_head {
  display: flex;
  font-size: 1.8rem;
  font-weight: bold;
}
.symbol_head * {
  font-weight: inherit;
}
.symbol_head .symbol {
  color: #7fa6c6;
  margin-right: 0.2em;
}

.circle_list {
  line-height: 1.75;
}
.circle_list > li {
  display: flex;
}
.circle_list > li::before {
  flex-shrink: 0;
  content: "";
  background: #00508e;
  border-radius: 50%;
  width: 0.5em;
  height: 0.5em;
  margin: 0.75em 0.5em 0 0;
  display: block;
}

.repair_contents {
  font-family: "Noto Sans Japanese", sans-serif;
  font-size: 1.6rem;
  line-height: 1.2;
  padding-top: 25px;
  padding-bottom: 100px;
}
.repair_contents.top_page {
  padding-bottom: 130px;
}
.repair_contents .heading04 {
  border-color: #979797;
  font-size: 2.8rem;
  margin-bottom: 20px;
}
.repair_contents input, .repair_contents button, .repair_contents select {
  padding: 0;
  color: inherit;
  font-family: inherit;
  border: none;
  border-radius: 0;
  outline: none;
  background: transparent;
  appearance: none;
}

/* ==========================================================================//
//
//　TOPページ
//
// ========================================================================== */
.top_section_heading {
  margin-bottom: -70px;
  position: relative;
  z-index: 1;
}
.top_section_heading .inner_box {
  background: #7fa6c6;
  border-radius: 0 0 50px 0;
  color: #fff;
  min-height: 237px;
  padding: 95px 50px 95px 0;
  width: 710px;
  display: flex;
  align-items: center;
  position: relative;
}
.top_section_heading .inner_box::before {
  content: "";
  display: block;
  background: #7fa6c6;
  height: 100%;
  width: 100vw;
  position: absolute;
  top: 0;
  right: 100%;
}
.top_section_heading .text {
  width: 100%;
}
.top_section_heading .main_txt {
  display: flex;
  align-items: center;
  font-size: 3.6rem;
  font-weight: 500;
  width: 100%;
}
.top_section_heading .main_txt::after {
  content: "";
  width: 100px;
  border-top: 1px solid #fff;
  margin-left: 0.5em;
}
.top_section_heading .sub_txt {
  font-size: 1.8rem;
  line-height: 1.75;
  margin-top: 1em;
}

.top_block_heading .sub_head {
  color: #00508e;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
}
.top_block_heading .sub_head + .main_txt {
  margin-top: 0.3em;
}
.top_block_heading .main_txt {
  font-size: 2.8rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.75;
}

/* キービジュアル */
.kv_area {
  overflow: hidden;
  position: relative;
}
.kv_area .kv_text {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1000px;
  height: 500px;
  margin: 0 auto;
  padding: 14px 0 0;
  text-align: center;
  z-index: 1;
}
.kv_area .kv_text::before, .kv_area .kv_text::after {
  content: "";
  display: block;
  height: 100%;
  width: 100vw;
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 0;
}
.kv_area .kv_text::before {
  right: calc(100% + 3px);
}
.kv_area .kv_text::after {
  left: calc(100% + 3px);
}

.kv_slider {
  max-width: 1006px;
  min-width: 1000px;
  margin: 0 auto;
}
.kv_slider .slick-slide {
  margin: 0 3px;
}
.kv_slider .slick-list {
  overflow: visible !important;
}
.kv_slider .slick-dots {
  /* ひとまず非表示 */
  display: none;
  width: 100%;
  text-align: center;
}
.kv_slider .slick-dots li {
  position: relative;
  overflow: hidden;
  display: inline-block;
  margin: 0 7px;
  padding: 28px 0 0;
  width: 80px;
}
.kv_slider .slick-dots li button {
  display: block;
  font-size: 0;
  width: 80px;
  height: 5px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  position: relative;
  background-color: #ccc;
  box-shadow: none;
  border: none;
  outline: 0;
  cursor: pointer;
}
.kv_slider .slick-dots li button::after {
  content: "";
  margin: auto 0;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  height: 5px;
  background-color: #00508e;
}
.kv_slider .slick-dots li button.blue {
  background-color: #00508e;
}
.kv_slider .slick-dots li.slick-active button::after {
  animation: indicator 6s linear backwards;
}
.kv_slider .slick-dots li.slick-active.init button::after {
  animation: indicator2 4.5s linear backwards;
}

.top_lede {
  font-size: 1.8rem;
  line-height: 2;
  text-align: center;
  width: 1000px;
  margin: 70px auto;
}

.sort_area {
  background: url("/shared/images/howto/repair/common/bg_ptn.png") repeat left top;
  padding: 120px 0 0;
  min-width: 1000px;
}

.sort_box {
  position: relative;
}
.category_sort {
  padding-bottom: 140px;
  position: relative;
}
.category_sort::before, .category_sort::after {
  content: "";
  border-bottom: 40px solid #fff;
  position: absolute;
  bottom: 0;
  display: block;
  width: 50%;
}
.category_sort::after {
  right: 0;
  border-left: 68px solid transparent;
}
.category_sort::before {
  left: 0;
  border-right: 68px solid transparent;
}
.category_sort .top_block_heading {
  margin-bottom: 45px;
}

.category_sort_button {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 -7px 0 -8px;
}
.category_sort_button svg {
  flex-shrink: 0;
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto;
}
.category_sort_button .cate_btn {
  background: #fff;
  border-radius: 10px;
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0px 1px 0px 0px #c4c4c4;
  padding: 10px 5px;
}
.category_sort_button > li {
  position: relative;
  width: 130px;
  margin-right: 8px;
  margin-left: 7px;
}
.category_sort_button > li input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.category_sort_button > li input:checked + .cate_btn {
  background: #6ea2b3;
  color: #fff;
}
.category_sort_button > li input:checked + .cate_btn svg {
  fill: #fff;
}
.category_sort_button > li p,
.category_sort_button > li .icon_txt {
  font-size: 1.6rem;
  margin-top: 0.5em;
  text-align: center;
}
.category_sort_button > li:nth-child(n+8) {
  margin-top: 40px;
}

@media screen and (min-width: 768px) {
  .category_sort_button > li .cate_btn:hover {
    background: #6ea2b3;
    color: #fff;
  }
  .category_sort_button > li .cate_btn:hover svg {
    fill: #fff;
  }
  .keyword_sort_button label:hover {
    background: #00508e;
    color: #fff;
  }
  .example_list a:hover {
    background: #00508e;
  }
  .example_list a:hover .page_txt {
    color: #fff;
  }
  .example_list a:hover .page_txt .large {
    color: inherit;
  }
}
.keyword_sort .top_block_heading {
  margin-bottom: 40px;
}

.keyword_sort_button {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
.keyword_sort_button li {
  min-height: 50px;
  margin: 10px;
  position: relative;
}
.keyword_sort_button label {
  background: #fff;
  border: 1px solid #c4c4c4;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0.2em 1em;
  cursor: pointer;
}
.keyword_sort_button input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.keyword_sort_button input:checked + label {
  background: #00508e;
  color: #fff;
}

.example_box {
  background: #fff;
  padding: 40px 0 80px;
  min-height: 290px;
}

.example_list {
  width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.example_list li {
  width: 260px;
  line-height: 1.4;
  padding: 20px;
  animation: appear 0.5s;
}
.example_list li.isHidden {
  display: none;
}
.example_list a {
  background: #fff;
  border: 1px solid #c4c4c4;
  border-bottom-width: 2px;
  color: inherit;
  text-decoration: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  min-height: 130px;
}
.example_list .txt_box {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 5px 20px;
}
.example_list .cate_txt {
  border-radius: 0 0 10px 0;
  color: #fff;
  font-size: 1.4rem;
  margin: -6px 0 0 -1px;
  padding: 0.4em 0.1em 0.5em;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  min-height: 30px;
  line-height: 1;
}
.example_list .page_txt {
  line-height: 1.6;
}
.example_list .page_txt .large {
  color: #00508e;
  font-size: 2rem;
  font-weight: 700;
}
.example_list .tag_wrap {
  display: none;
  flex-wrap: wrap;
  margin: 5px -5px 0;
}
.example_list .tag_txt {
  background: #f7f7f7;
  color: #00508e;
  font-size: 1.2rem;
  margin: 5px;
  padding: 0.3em 0.68em;
  min-height: 28px;
  display: flex;
  align-items: center;
}

.cate_yuka .cate_btn svg {
  fill: #6ea2b3;
}
.cate_yuka .cate_txt {
  background: #6ea2b3;
}

.cate_gaiheki .cate_btn svg {
  fill: #938f4c;
}
.cate_gaiheki .cate_txt {
  background: #938f4c;
}

.cate_naiso .cate_btn svg {
  fill: #c47172;
}
.cate_naiso .cate_txt {
  background: #c47172;
}

.cate_tenjo .cate_btn svg {
  fill: #8cb699;
}
.cate_tenjo .cate_txt {
  background: #8cb699;
}

.cate_senmen .cate_btn svg {
  fill: #758c9e;
}
.cate_senmen .cate_txt {
  background: #758c9e;
}

.cate_landscape .cate_btn svg {
  fill: #d29956;
}
.cate_landscape .cate_txt {
  background: #d29956;
  letter-spacing: -0.1em;
}

.cate_syoene .cate_btn svg {
  fill: #74a455;
}
.cate_syoene .cate_txt {
  background: #74a455;
}

.cate_bousai .cate_btn svg {
  fill: #a98777;
}
.cate_bousai .cate_txt {
  background: #a98777;
}

.cate_bouon .cate_btn svg {
  fill: #397187;
}
.cate_bouon .cate_txt {
  background: #397187;
}

.cate_dannetsu .cate_btn svg {
  fill: #d6745b;
}
.cate_dannetsu .cate_txt {
  background: #d6745b;
}

.cate_kyuon .cate_btn svg {
  fill: #60765c;
}
.cate_kyuon .cate_txt {
  background: #60765c;
}

.cate_bouchu .cate_btn svg {
  fill: #92718c;
}
.cate_bouchu .cate_txt {
  background: #92718c;
}

.cate_hoshu .cate_btn svg {
  fill: #b26d4f;
}
.cate_hoshu .cate_txt {
  background: #b26d4f;
}

.cate_diy .cate_btn svg {
  fill: #be5209;
}
.cate_diy .cate_txt {
  background: #be5209;
}

/* ABC商会の改修システム */
.example_area {
  background: url("/shared/images/howto/repair/common/bg_ptn.png") repeat left top;
  padding: 120px 0 100px;
}

.example_flow {
  margin-top: 65px;
  padding: 0 100px;
  position: relative;
}
.example_flow::after {
  content: "";
  display: block;
  width: 4px;
  background: url("/shared/images/howto/repair/common/dot.svg");
  background-size: 4px 8px;
  position: absolute;
  right: 4px;
  top: 102px;
  bottom: 96px;
}
.example_flow .flow_box {
  padding-bottom: 100px;
  position: relative;
}
.example_flow .flow_box::before {
  content: "";
  display: block;
  width: 4px;
  height: 100%;
  background: url("/shared/images/howto/repair/common/dot.svg");
  background-size: 4px 8px;
  position: absolute;
  top: 0;
  left: 148px;
}
.example_flow > *:first-child::after {
  content: "";
  background: url("/shared/images/howto/repair/common/dot_arr.svg") no-repeat left top;
  display: block;
  width: 92.08px;
  height: 49.02px;
  position: absolute;
  top: 74px;
  right: -96px;
}
.example_flow > *:last-child {
  padding-bottom: 0;
}
.example_flow > *:last-child::before {
  width: 90px;
  height: 4px;
  background-size: 8px 4px;
  left: calc(100% + 2px);
  top: 97px;
}
.example_flow .flow_img {
  flex-shrink: 0;
  width: 300px;
  outline: solid 6px #fff;
  outline-offset: -6px;
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.2);
  position: absolute;
  left: 0;
  top: -20px;
  z-index: 1;
}
.example_flow .flow_heading {
  font-size: 2.4rem;
  font-weight: 500;
  display: flex;
}
.example_flow .flow_heading::before {
  flex-shrink: 0;
  content: "";
  width: 10px;
  height: 2px;
  background: #00508e;
  display: block;
  margin: 0.6em 10px 0 0;
}
.example_flow .flow_heading + * {
  margin: 20px 0 0 20px;
}
.example_flow .flow_txt {
  background: #fff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 200px;
  width: 576px;
  margin: 0 0 0 auto;
  padding: 30px 30px 30px 116px;
  flex-grow: 1;
  position: relative;
}
.example_flow .estimate_wrap {
  position: relative;
}
.example_flow .estimate_wrap .estimate_txt {
  background: url("/shared/images/howto/repair/common/bg_stripe_translucent.png") #7fa6c6;
  border-radius: 20px;
  color: #fff;
  font-size: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
  width: 100px;
  writing-mode: vertical-rl;
  letter-spacing: 0.05em;
  position: absolute;
  right: 40px;
  top: 70px;
  bottom: 150px;
  z-index: 1;
}
.example_flow .estimate_wrap > .flow_box:last-child {
  padding-bottom: 80px;
}
.example_flow .decision_box_wrap {
  position: relative;
  padding: 0 0 120px;
}
.example_flow .decision_box_wrap::before {
  content: "";
  display: block;
  width: 4px;
  height: 100%;
  background: url("/shared/images/howto/repair/common/dot.svg");
  background-size: 4px 8px;
  position: absolute;
  top: 0;
  left: 148px;
}
.example_flow .decision_box {
  background: #00508e;
  border-radius: 20px;
  color: #fff;
  font-size: 2.4rem;
  text-align: center;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 170px;
  position: relative;
}
.example_flow .decision_box::after {
  content: "";
  display: block;
  width: 140px;
  height: 140px;
  background: url("/shared/images/howto/repair/common/woman_img.png") no-repeat left top/contain;
  position: absolute;
  right: 20px;
  top: 0;
  bottom: 0;
  margin: auto 0;
}
/* お問い合わせ */
.contact_area .area_heading {
  background: #7fa6c6;
  color: #fff;
  width: 300px;
  margin: 0 auto 30px;
  padding: 40px 15px 65px;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 50% 100%, 0 calc(100% - 40px));
}
.contact_area .area_heading .sub_head {
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
}
.contact_area .area_heading .sub_head + .main_txt {
  margin-top: 0.5em;
}
.contact_area .area_heading .main_txt {
  font-size: 2.8rem;
  font-weight: 500;
  text-align: center;
}
.contact_area .contact_lede {
  font-size: 1.8rem;
  line-height: 1.75;
}
.contact_area .text_block {
  margin: 0 0 30px;
}

.contact_btn_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 800px;
  margin: 0 auto;
}
.contact_btn_wrap > *:nth-child(n+3) {
  margin-top: 30px;
}
.contact_btn_wrap a {
  background: #fff;
  border: 1px solid #c4c4c4;
  color: inherit;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 380px;
  min-height: 100px;
  text-decoration: none;
  padding: 10px;
}
.contact_btn_wrap a svg {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-right: 0.4em;
}
.contact_btn_wrap a:hover {
  background: #00508e;
  color: #fff;
}
.contact_btn_wrap .icon_tell svg {
  fill: none;
  stroke: #333;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
}
.contact_btn_wrap .icon_tell:hover svg {
  stroke: #fff;
}
.contact_btn_wrap .icon_mail svg {
  fill: #333;
}
.contact_btn_wrap .icon_mail:hover svg {
  fill: #fff;
}
.contact_btn_wrap .text_wrap {
  display: flex;
  align-items: center;
}
.contact_btn_wrap .link_btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact_btn_wrap .link_btn svg {
  width: 10px;
  height: 17px;
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  fill: #00508e;
}
.contact_btn_wrap .link_btn:hover svg {
  fill: #fff;
}
.contact_btn_wrap.back_to_list {
  margin-top: 100px;
  display: flex;
  justify-content: center;
}

.embed_movie,
.embed_jstream {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.embed_movie iframe,
.embed_jstream iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/** -------------------------------- **
	margin
*** ----------------------------------------------------------------- ***/
.mt5 {
  margin-top: 5px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mt15 {
  margin-top: 15px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mt25 {
  margin-top: 25px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mt35 {
  margin-top: 35px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mt45 {
  margin-top: 45px !important;
}

.mt50 {
  margin-top: 50px !important;
}

.mt55 {
  margin-top: 55px !important;
}

.mt60 {
  margin-top: 60px !important;
}

.mt65 {
  margin-top: 65px !important;
}

.mt70 {
  margin-top: 70px !important;
}

.mt75 {
  margin-top: 75px !important;
}

.mt80 {
  margin-top: 80px !important;
}

.mt85 {
  margin-top: 85px !important;
}

.mt90 {
  margin-top: 90px !important;
}

.mt95 {
  margin-top: 95px !important;
}

.mt100 {
  margin-top: 100px !important;
}

.mt_harf, .mt_half {
  margin-top: 0.5em !important;
}

.mt0 {
  margin-top: 0 !important;
}

.mt1em {
  margin-top: 1em !important;
}

.mt2em {
  margin-top: 2em !important;
}

.mt3em {
  margin-top: 3em !important;
}

.mt4em {
  margin-top: 4em !important;
}

.mb0 {
  margin-bottom: 0 !important;
}

.mb5 {
  margin-bottom: 5px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb15 {
  margin-bottom: 15px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb25 {
  margin-bottom: 25px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mb35 {
  margin-bottom: 35px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.mb45 {
  margin-bottom: 45px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.mb55 {
  margin-bottom: 55px !important;
}

.mb100 {
  margin-bottom: 100px !important;
}

.mb_harf {
  margin-bottom: 0.5em !important;
}

.mb1em {
  margin-bottom: 1em !important;
}

.mb2em {
  margin-bottom: 2em !important;
}

.mb3em {
  margin-bottom: 3em !important;
}

.mb4em {
  margin-bottom: 4em !important;
}

.ml1em {
  margin-left: 1em !important;
}

.mr1em {
  margin-right: 1em !important;
}

.pl0 {
  padding-left: 0 !important;
}

.pl20 {
  padding-left: 20px !important;
}

.pr20 {
  padding-right: 20px !important;
}

.pb5 {
  padding-bottom: 5px !important;
}/*# sourceMappingURL=repair.css.map */