@charset "utf-8";
/* CSS Document */



.tell_banner {
  text-align: center;
  margin: 2rem auto;
}


/****parts共通******************************/
#main .parts .p_title {
  background: #fdfdf3;
  padding: 0.75em 0.5rem 0.75em 25px;
  font-size: 1.15em;
  line-height: 1.3em;
  margin: 2rem 0 1rem;
  box-shadow:10px 10px 10px -10px rgba(0,0,0,0.5);
}
#main .parts > .p_title::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;top: 0;bottom: 0;
  width: 15px;
  background-image: linear-gradient(to bottom, #1389e1, #034dab);
}
#main .parts .p_title:first-child{margin-top: 3rem}


/****パソコン修理ご利用の流れ************************/
#parts_flow .step{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f2da23;
  color: var(--color_blue);
  font-weight: bold;
    line-height: 1;
  border-radius: 10px;
}
#parts_flow dl dt {
  color: var(--color_blue);
  font-weight: bold;
  font-size: 1.15em;
}
#parts_flow dl dd {margin-bottom: 2rem}

@media only screen and (max-width: 450px) {/*SP*/
  #parts_flow dl dt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: dotted 2px var(--color_blue);
    padding-bottom: 5px;
    margin-bottom: 10px;
  }
  #parts_flow dt .step {
    width: 25vw;
    height: 25vw;
  }
  #parts_flow .step .num {font-size: 3.5vw;margin-bottom: 1vw;}
  #parts_flow .step .text {font-size: 8vw;}
  #parts_flow dt .title {
    width: calc(100% - 27vw);
  }
}
@media only screen and (min-width: 451px) {/*PC*/
  #parts_flow .step {
    position: absolute;
    left: 0;top: 0;
    width: 110px;
    height: 110px;
    padding-bottom: 5px;
  }
  #parts_flow .step .num {font-size: 12px;margin-bottom: 5px;}
  #parts_flow .step .text {font-size: 32px;}
  #parts_flow dl dt,#parts_flow dl dd {padding-left: 120px;}
  #parts_flow dl dt {padding-top: 10px}
  #parts_flow dl dt::after {
    content: "";
    display: block;
    border-bottom: dotted 2px var(--color_blue);
    height: 10px;
    margin-bottom: 10px;
  }
}


/****パソコン修理の対応メーカー一覧************************/
#maker table {width: 100%;}
#maker th ,#maker td {border: 2px solid #063980}
#maker th {
  background: #094aa5;
  color: #FFF;
}
#maker ul {margin: 0;padding-left: 1.5em}
#maker .comment {
  padding: 10px;
  background: #FDE7C2;
  border: 1px solid #F8B988;
  font-weight: bold;
  border-radius: 5px;
  margin-top: 10px;
}


/****関連ページ************************/
.kanren_link {margin: 1rem 0}
.kanren_link .sup_text{color: #666;font-size: 0.85rem;}
.kanren_link a {display: block;border: solid 1px #ccc; padding: 10px;box-shadow: 0 2px 3px rgba(0,0,0,0.2)}
.kanren_link a .kanren_img {}
.kanren_link a .link_title {font-size: 1.1rem; line-height: 1.3;margin: 0;font-weight: bold;color: var(--color_blue);}
.kanren_link a .link_text {line-height: 1.3;margin-bottom: 0;}
@media only screen and (max-width: 450px) {/*SP*/
  .kanren_link a {display: flex;justify-content: space-between;flex-wrap: wrap}
  .kanren_link a .kanren_img {width: 30%;}
.kanren_link a .link_title {width: calc((70% - 15px))}
  .kanren_link a .link_text {width: 100%;}
}
@media only screen and (min-width: 451px) {/*PC*/
  .kanren_link a .kanren_img {width: 200px;float: left}
  .kanren_link a .link_title,.kanren_link a .link_text {padding-left: 220px;}
  .kanren_link a .link_text::after{content: "";display: block;height: 0;clear: both;}
}


/****コラム共通（new/category/ranking/service）************************/
/*まずはsingl.cssの指定をリセット*/
.parts.column {margin: 2rem 0}
.parts.column h2,.parts.column h3 {background: initial;color: initial;border: initial;line-height: initial;padding: initial;margin: initial}
.parts.column h3:first-letter {	color:initial;}
.parts.column ul {padding: 0;margin: 0}
.parts.column ul li {list-style: none;margin: 0}
.parts.column a {text-decoration: none}
/*ここからデザイン*/
.parts.column {}
#main .parts.column h2 {text-align: center;color: var(--color_blue);border-bottom:  dotted 3px var(--color_blue);padding-bottom: 0.5rem;margin-bottom: 10px}
#main .parts.column .title {margin: 0;padding: 5px;line-height: 1.2}
.parts.column ul.flex-box {display: flex}
.parts.column ul li.flex_inner {
  background: #fff;border: solid 1px #ccc;box-shadow: 0 1px 2px #00000033;
  position: relative;
}
.parts.column ul li a {  display: flex;flex-direction: column;height: 100%}
.parts.column ul li .title {font-size: 1rem;flex-grow: 1}
.parts.column ul li .img {overflow: hidden;}
.parts.column ul li .img img {object-fit: cover;min-height: 100%; min-width: 100%;}
.parts.column .date {font-size: 0.85rem;text-align: right; margin: 0 5px 0 0;color: #666}
.parts.column .cate {position: absolute;top: 0;left: 0;z-index: 5;background: #19A2FC ;font-size: 0.85rem}
.parts.column .cate a {display: block;color: #FFF;line-height: 1; padding: 5px;}
.parts.column .link_btn {margin: 10px 0 0}
.parts.column .link_btn a {
    display: block;
    background-color: #FFC801;
    border: solid 2px #FFC801;
    color: #333;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    padding: 10px 0;
    border-radius: 10px;
}
.parts.column .link_btn a:hover {
  background: var(--color_light_orange);
  color: var(--color_orange);
}

.parts.column ul li.dummy {display: flex;justify-content: center;align-items: center;background: #EEE;}
@media only screen and (max-width: 450px) {/*SP*/
  .parts.column ul.flex-box {flex-wrap: wrap}
  .parts.column ul li.flex_inner {width:calc((100% - 5px) / 2); }
  .parts.column ul li.flex_inner:nth-child(2n+1) {margin-right: 5px}
  .parts.column ul li.flex_inner:nth-child(n+3) {margin-top: 5px}
  .parts.column ul li.flex_inner .img {
    height: calc((100vw - 25px) / 2 / 3 * 2);
  }
}
@media only screen and (min-width: 451px) {/*PC*/
  .parts.column ul li.flex_inner {width:calc((100% - 15px) / 4); margin-right: 5px}
  .parts.column ul li.flex_inner:last-child {margin: 0}
  .parts.column ul li.flex_inner:hover {background:#FFFCDF}
  .parts.column ul li .img {max-height:110px }
  .parts.column ul li a:hover .title {text-decoration: underline}
  .parts.column ul li.dummy:hover {background: #EEE;}
}


/********************************************************************************************
【施工実績】全件をフレーム内で表示
*******************************************************************************************/
#work_full {margin: 2rem 0;background: var(--color_light_blue);border-radius: 10px 10px 0 0}
#work_full .work_full_inner {
  content-visibility: auto;overflow-y: scroll;
  background: var(--color_white);
}
#main #work_full h2,#work_full h3 {margin: 0 0 5px}
#work_full h2 .area_name {display: block;text-align: center;font-size: 1rem}

#main #work_full .work_full_title {display: flex;justify-content: space-between;align-items: center} 
#main #work_full .work_full_title h2 {color: #063980;font-weight: bold}
#work_full .review_average {
  font-weight: bold;
  background: var(--color_white);
  padding: 0.5rem;
  margin: 0 0 10px;
}

#work_full .work_con {border-top: solid 1px #ccc}
#work_full .work_con:first-of-type {border:none}
.work_con .work_title {
  color: var(--color_blue);
  font-weight: bold;
  line-height: 1.3em;
  border-bottom: dotted 2px var(--color_blue);
  padding-bottom: 10px;
}
.work_con .date {color: #999;font-size: 0.85rem;text-align: right; margin: 0}
@media only screen and (max-width: 450px) {/*SP*/
  #work_full {padding: 5px 10px 10px}
#main #work_full .work_full_title .title {width: 60%;font-size: 1.5rem;line-height: 1.2; text-align: center;}
#main #work_full .work_full_title .img {width: 40%}
  #work_full .work_full_inner {
    contain-intrinsic-size:300px;
    height: 300px;
  }
  #work_full .work_con {padding: 10px;}
  .work_con .work_title {font-size: 1.1rem;}
}
@media only screen and (min-width: 451px) {/*PC*/
  #work_full {padding: 5px 15px 15px}
	#work_full h2 .area_name {margin-top: 10px;}
#main #work_full .work_full_title .title {font-size: 42px;}
  #work_full .work_full_inner {
    contain-intrinsic-size:400px;
    height: 400px;
  }
  #work_full .work_con {padding: 15px;}
  .work_con .work_title {font-size: 1.2rem;}
}

/***ユーザー情報******************/
#work_full .user {display: flex;justify-content: space-between;margin-bottom: 10px}
#work_full .user .user_img .img {border-radius: 50%;overflow: hidden; background: #ff9900;}
#work_full .user .user_img .info {color: #666;font-weight: bold;font-size: 0.85rem; line-height: 1rem}
#work_full .user .user_text {align-self: center}
#work_full .user .user_text p {margin: 0}
#work_full .user .user_text .voice {
  position: relative;
  background: #FFD89F;
  border-radius: 10px;
  padding: 1rem;
  line-height: 1.4;
}
#work_full .user .user_text .voice::after {
  content: "";
  display: block;
  height: 20px;width: 15px;
  background:#FFD89F;
  clip-path: polygon( 0 50%, 100% 0%,100% 100%);
  position: absolute;
  top: calc(50% - 10px);
  left: -14px;
}
#work_full .user .user_text .hyoka .stars {color: #FFbb00; font-weight: bold;line-height: 1em;font-size: 1.15rem;}
@media only screen and (max-width: 450px) {/*SP*/
  #work_full .user .user_img {width: 100px;}
  #work_full .user .user_text {width: calc(100% - 100px - 10px) }
  #work_full .user .user_img .img {width: 100px;height: 100px;}
  #work_full .user .user_text .hyoka {text-align: right; margin:0.5em 0.5em 0 -110px;}
}
@media only screen and (min-width: 451px) {/*PC*/
  #work_full .user .user_img {width: 100px;}
  #work_full .user .user_text {width: calc(100% - 100px - 10px) }
  #work_full .user .user_img .img {width: 100px;height: 100px;}
  #work_full .user .user_text .hyoka {padding-left: 1rem}
}


/***状況・環境******************/
#work_meta dl {width: 100%; margin-top: 2px;border: solid 1px #ccc;}
#work_meta .data dl {display: flex;flex-direction: row;flex-wrap: wrap;border: none;margin: 0}
#work_meta dl dt.caption {background: #999;color: #FFF;font-size: 0.75rem;line-height: 1.5em;width: 100%}
#work_meta dl dd.data {width: 100%}
#work_meta dl dt,#work_meta dl dd {font-size: 0.85rem;text-align: center; padding: 0;margin: 0; line-height: 2em}
#work_meta dl dt {background: #efefef}
#work_meta dl dd a {display: inline-block;margin: 0 2px}
@media only screen and (max-width: 450px) {/*SP*/
  #work_meta .data_flex dl {display: flex;flex-wrap: wrap}
  #work_meta dl dt {width: 8em}
  #work_meta dl dd {width: calc(100% - 8em);}
  #work_meta .data dl dt,
  #work_meta .data dl dd {border-bottom: solid 1px #ccc;}
  #work_meta .pc_data dt.pc4 {border: none;}
  #work_meta .pc_data dd.pc4 {border: none;}
  #work_meta .data dl dt.d2 {border: none;}
  #work_meta .data dl dd.d2 {border: none;}
  #work_meta .accord {position: relative}
  #work_meta .accord::after {
    content: "＋";
    position: absolute;
    right: 5px;
  }
  #work_meta .accord.open::after {
    content: "－";
  }
  #work_meta .accord + .data {display: none}
}
@media only screen and (min-width: 451px) {/*PC*/
  #work_meta dl {display: flex;flex-direction: column;}
  #work_meta dl dd {flex-grow: 1;display: flex;flex-wrap: wrap;justify-content: center; align-items: center;}
  #work_meta .data_flex {display: flex;justify-content: space-between}
  #work_meta .data_flex.set_2 > dl{width: calc((100% - 1px) / 2)}
  #work_meta .data_flex.set_3 > dl{width: calc((100% - 2px) / 3)}
  #work_meta .data dl {display: flex;flex-direction: row;flex-wrap: wrap;border: none}
  #work_meta .data dl dt,#work_meta .data dl dd {width: 50%;}
  #work_meta .data dl dt.d1 {order: 1;}
  #work_meta .data dl dd.d1 {order: 3;}
  #work_meta .data dl dt.d2 {order: 2;border-left: solid 1px #ccc;}
  #work_meta .data dl dd.d2 {order: 4;border-left: solid 1px #ccc;}
  #work_meta .pc_data dl dt,#work_meta .pc_data dl dd {width: 25%;border-right: solid 1px #ccc;}
  #work_meta .pc_data dl dt.pc1 {order: 1;}
  #work_meta .pc_data dl dd.pc1 {order: 5;}
  #work_meta .pc_data dl dt.pc2 {order: 2;}
  #work_meta .pc_data dl dd.pc2 {order: 6;}
  #work_meta .pc_data dl dt.pc3 {order: 3;}
  #work_meta .pc_data dl dd.pc3 {order: 7;}
  #work_meta .pc_data dl dt.pc4 {order: 4; border: none;}
  #work_meta .pc_data dl dd.pc4 {order: 8; border: none;}
}

/***具体的症状・ご依頼内容等・作業内容******************/
#work_full dl.text {margin-top: 1rem}
#work_full dl.text dt {
  color: var(--color_blue);
  font-weight: bold;
  border-bottom: solid 1px var(--color_blue);
}
#work_full dl.text dd {}
#work_full dl.text p {margin: 0.75rem 0; line-height: 1.5}

/***リンクボタン***/
#work_full .link {margin: 0}
#work_full .link a {
  display: block;
  border: solid 2px #FF9900;
  background: #FF9900;
  color: #fff;
  text-align: center;
  text-decoration: none;
  width: 11em;
  line-height: 2.5em;
  border-radius: 10px;
  margin: 0 0 0 auto;
}
#work_full .link a:hover {
  background: #fff;
  color: #FF9900;
}

/***リンクボタン***/
#work_full .link2 {margin: 10px 0 0}
#work_full .link2 a {
  display: block;
  border: solid 2px #FF9900;
  background: #FF9900;
  color: #fff;
  text-align: center;
  text-decoration: none;
  width: 11em;
  line-height: 2.5em;
  border-radius: 10px;
  margin: 0 auto;
}
#work_full .link2 a:hover {
  background: #fff;
  color: #FF9900;
}


/*【平均評価】★★★★★を小数点まで表現
*******************************************************************************************/
span.Stars {
  box-sizing: border-box;
  display:inline-block;
  font-family: Times;
  font-size: 1.25em;
  line-height: 1;
  margin: 0 5px;
  --percent: calc(var(--rating) / 5 * 100%);
}
span.Stars::before {
  content: "★★★★★";
  background: linear-gradient(90deg, #FFbb00 var(--percent), #999 var(--percent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}




/*############################################################
【コラム用】CTA ＋ ページ内リンク
#############################################################*/
#cta_anchor {
	background: #fff;
	border: solid 2px #00a0e9;overflow: hidden;
	padding: 10px; margin: 20px 0;
}

#cta_anchor .ca_title {
	font-family: "M PLUS Rounded 1c";
  /*font-family: 'Yomogi', cursive;
  font-family: 'Zen Kurenaido', sans-serif;*/
	text-align: center;font-weight: 600;
	background: #00a0e9;color: #FFF;
	margin: -10px -10px 10px; padding: 0;
}
#cta_anchor a ,
#cta_anchor .ca_cta.tel_pc {
	display: flex;justify-content: center;align-items: center;height: 100%;
	text-decoration: none;border-radius: 8px;
}
#cta_anchor .ca_cta {margin: 0;padding: 0;line-height: 1 !important;}
#cta_anchor .ca_cta.no_tel a{
	position: relative;min-height: 60px;
	background: #FF9900;color: #FFF;font-weight: bold;font-size: 1.3em;
}
#cta_anchor .ca_cta.no_tel a:hover {}
#cta_anchor .ca_cta.no_tel a::after {
	content: "\f0da";
   font-family: FontAwesome;
	position: absolute;
	right: 1em;
	line-height: 1 !important;
}

#cta_anchor ul {
	border: none;
	padding: 0;margin: 0;
	display: flex;flex-wrap: wrap;justify-content: space-between;
}
#cta_anchor ul li {
	list-style: none!important;padding: 0;margin: 10px 0 0 !important;
	width: calc((100% - 10px) / 2);
}
#cta_anchor ul li a {
	position: relative;
	background: #00a0e933;
	color: var(--color_blue);
}
#cta_anchor ul li a:hover {
	opacity: 1;
	background: var(--color_blue);
	color: #fff;
}
#cta_anchor ul li a::after {
	content: "\f0dd";
  font-family: FontAwesome;
	position: absolute;

}

@media screen and (min-width: 641px),print {/*PC*/
	#cta_anchor .ca_title {font-size: 1.75rem;}
	#cta_anchor a {padding: 1rem;}

	#cta_anchor .ca_cta.tel_pc {
		flex-direction: column;padding: 1rem;background: #FF9900;line-height: 1;
	}
	#cta_anchor .ca_cta.tel_pc span {color: #FFF;font-weight: bold;}
	#cta_anchor .ca_cta.tel_pc span span {font-weight: normal}
	#cta_anchor .ca_cta.tel_pc .ct_link {
		width: 80%;text-align: center;padding: 1rem;margin-top: 0.5rem;
		background: #FFF;color: #FF9900;font-size: 2rem;border-radius: 50px;
	}
	#cta_anchor .ca_cta.tel_pc .ct_link * {color: #FF9900;font-size: 2rem;}
	#cta_anchor ul li a {padding-right: 2em}
	#cta_anchor ul li a::after {right: 1em; top: calc(50% - 1em)}
}
@media screen and (max-width: 640px) {/*SP*/
	#cta_anchor .ca_title {font-size: 1.5rem;line-height: 1.3;padding: 0.5rem 0; margin-bottom: 10px;}
	#cta_anchor a {padding: 1rem 5px;}
	#cta_anchor .ca_cta a {flex-direction: column;	background:#FF9900; color: #FFF;min-height: 60px;font-size: 1.3em;}
	#cta_anchor .ca_cta a * {color: #FFF;font-size: 1em;font-weight: bold;}
	#cta_anchor .ca_cta a .ct_text_sub {font-size: 1rem;font-weight: normal;}
	#cta_anchor ul li a {padding-bottom: 1.25rem}
	#cta_anchor ul li a::after {bottom: 0;}
}






/*############################################################
【固定ページ】対応エリア一覧(都道府県)を表示
#############################################################*/
.area_set {
margin: 2rem 0;background:  var(--color_yellow);border-radius: 10px 10px 0 0
}
.area_set .area_set_title {display: flex;justify-content: space-between;align-items: center} 
#main .area_set .area_set_title .title {color: #063980;font-weight: bold;text-align: center;}
.area_set .area_set_inner {
  background: var(--color_white);
  padding: 10px;
  border-radius: 7px;
}
.area_set ul.note {
  margin-left: 1.5em;
  font-size: 0.85rem;
}
@media only screen and (max-width: 450px) {/*SP*/
  .area_set {padding: 5px 10px 10px}
  #main .area_set .area_set_title .title {width: 80%;font-size: 1.5rem;line-height: 1.2; text-align: center;}
  .area_set .area_set_title .img {width: 20%}

  .area_set .work_con {padding: 10px;}
  .work_con .work_title {font-size: 1.1rem;}
}
@media only screen and (min-width: 451px) {/*PC*/
  .area_set {padding: 5px 15px 15px}
  #main .area_set .area_set_title .title {font-size: 42px;width: calc(100% - 100px);}
  .area_set .work_con {padding: 15px;}
  .work_con .work_title {font-size: 1.2rem;}
}


/***都道府県********/
.area_set ul, .area_set ul li {
  list-style: none;
  margin: 0;padding: 0;
}
.area_set .tdfk_list {

}
.area_set .tdfk_list .tiiki {
  display: flex;
  border-top: dotted 1px var(--color_blue);
}
.area_set .tdfk_list .tiiki:first-of-type {border: none}
#main .area_set .tiiki .tiiki_title {
  width: 10em;
  padding: 0.5rem 0;
  margin: 0;
  align-self: center;
  text-align: center;
}
.area_set .tdfk_list .tiiki .tdfk {
  width: calc(100% - 10em);
}
.area_set .tdfk_list .tiiki .tdfk li {
  display: inline-block;
}
.area_set .tdfk_list .tiiki .tdfk li::after {
  content: "/";
}
.area_set .tdfk_list .tiiki .tdfk li a,
.area_set .tdfk_list .tiiki .tdfk li span {
  display: inline-block;
  padding: 0.5rem;
  line-height: 1;
}
.area_set .tdfk_list .tiiki .tdfk li a:hover {
  background: var(--color_light_yellow);
  font-weight: bold;
}

/***主要都市********/
.area_set .area_majors {
  border: solid 1px var(--color_blue);
  margin: 0.5rem 0;
}
.area_set .area_majors dt {
  background: var(--color_blue);
  color: var(--color_white);
  padding: 0.5em 2em 0.5em 0.5em;
  cursor: pointer;
}
.area_set .area_majors dt:hover {
  background: linear-gradient(to bottom, #1389e1, #034dab);
}
.area_set .area_majors dt::after {
  content: "＋";
  position: absolute;
  right: 0.5em;
}
.area_set .area_majors dt.open::after {content: "－";}
.area_set .area_majors dd {
  padding: 0.5em;
  display: none;
  font-size: 0.9rem
}
.area_set .area_majors dd li {display: inline-block}
.area_set .area_majors dd li::after {
  content: "/";
}
.area_set .area_majors dd li a,
.area_set .area_majors dd li span {
  display: inline-block;
  padding: 0.5em;
  line-height: 1;
}
.area_set .area_majors dd li a:hover {
  background: var(--color_light_yellow);
  font-weight: bold;
}


/***********/
.area_set .note {margin: 0;font-size: 0.9rem}
.area_set #onegai {margin: 0.5em 0 0}


@media only screen and (max-width: 450px) {/*SP*/
  .area_set .tdfk_list .tiiki {display: block;}
  #main .area_set .tiiki .tiiki_title ,
  .area_set .tdfk_list .tiiki .tdfk {width: 100%}
  .area_set .tiiki .tiiki_title {padding: 1em}
}




/*############################################################
主要都市
#############################################################*/
#area .area_majors dt {
  font-size: 1.6rem;
  line-height: 1.5em;
  box-shadow: 0 10px 15px -15px rgba(0, 0, 0, 0.5);
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
}
.parts.area_majors ul ,
.parts.area_majors ul li {list-style: none;margin: 0;padding: 0;}
.parts.area_majors ul li {display: inline-block;}
.parts.area_majors ul li::after { content: "/"; }
.parts.area_majors li a,
.parts.area_majors li span {
  display: inline-block;
  padding: 0.5em;
  line-height: 1;
}
.parts.area_majors li a:hover {
  background: var(--color_light_yellow);
  font-weight: bold;
}