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

:root {
  --color_blue: #094aa5; /* var(--color_blue); *//*青*/
  --color_light_blue: #abd5f8; /* var(--color_light_blue); *//*水色*/
  --color_red: #bd1d1e; /* var(--color_red); *//*赤色*/
  --color_orange: #ED5526; /* var(--color_orange); *//*オレンジ*/
  --color_t_orange: #F7763C; /* var(--color_t_orange); *//*オレンジ*/
  --color_light_yellow:#fff777; /* var(--color_light_yellow); *//*黄色*/
  --color_yellow: #FFC801; /* var(--color_yellow); *//*黄色*/
  --color_pink: #e20077; /* var(--color_pink); *//*ピンク色*/
  --color_light_pink: #eb6877; /* var(--color_light_pink); *//*ピンク色*/
  --color_white: #ffffff; /* var(--color_white); *//*白色*/
  --color_light_orange: #fffbcc; /* var(--color_light_orange); *//*背景用*/
  --color_text: #333333; /* var(--color_text); *//*水色[背景用]*/
  
  --gradient_blue :linear-gradient(to bottom, #19A2FC 0%, #046BB0 100%);
  
  --ff_MP1C: 'M PLUS 1 Code', monospace; /* var(--ff_MP1C); */
  --ff_MP1p: 'M PLUS 1p', sans-serif; /* var(--ff_MP1p); */
  --ff_MPr1C: 'M PLUS Rounded 1c', sans-serif; /* var(--ff_MPr1C); */
  --ff_NotoSans: 'Noto Sans JP', sans-serif; /* var(--ff_NotoSans); */
}


@media only screen and (max-width: 450px) {/*SP*/
  .PC {display: none !important}
}
@media only screen and (min-width: 451px) {/*PC*/
  .SP {display: none !important}
}



html {scroll-behavior: smooth;}

body {
  color: #333;
}

p,th,td,dt,dd,li {line-height: 1.75;}

@media only screen and (min-width: 451px) {/*PC*/
  #h1 .inner,header .inner,#main_v .inner,#pankuzu,#footer,#wrap {
    width: 940px;
    margin: 0 auto;
  }
  #wrap {
    display: flex;
    justify-content: space-between;
  }
  #main {width: 725px}
  #sidebar {width: 190px}
}


/*-------------------------------------
基本タグ　共通
-------------------------------------*/

#main h2,#main h3 {margin-top: 2rem}
#main article h2:first-of-type {margin-top: 0}
th,td {
  border: solid 1px #ccc;
  padding: 0.5rem
}

.mt0 {margin-top: 0px !important}
.mt10 {margin-top: 10px !important}
.mt20 {margin-top: 20px !important}
.mt30 {margin-top: 30px !important}
.mt40 {margin-top: 40px !important}
.pt0 {padding-top: 0px !important}
.pt10 {padding-top: 10px !important}
.pt20 {padding-top: 20px !important}
.pt30 {padding-top: 30px !important}
.pt40 {padding-top: 40px !important}

.mb0 {margin-bottom: 0px !important}
.mb10 {margin-bottom: 10px !important}
.mb20 {margin-bottom: 20px !important}
.mb30 {margin-bottom: 30px !important}
.mb40 {margin-bottom: 40px !important}
.pb0 {padding-bottom: 0px !important}
.pb10 {padding-bottom: 10px !important}
.pb20 {padding-bottom: 20px !important}
.pb30 {padding-bottom: 30px !important}
.pb40 {padding-bottom: 40px !important}

.ml0 {margin-left: 0px !important}
.ml10 {margin-left: 10px !important}
.ml20 {margin-left: 20px !important}
.ml30 {margin-left: 30px !important}
.ml40 {margin-left: 40px !important}
.pl0 {padding-left: 0px !important}
.pl10 {padding-left: 10px !important}
.pl20 {padding-left: 20px !important}
.pl30 {padding-left: 30px !important}
.pl40 {padding-left: 40px !important}


.c_blue {color: var(--color_blue); }/*青*/
.c_red {color: var(--color_red); }/*赤色*/
.c_orange {color: var(--color_orange); }/*オレンジ*/
.t_orange {color: var(--color_t_orange); }/*オレンジ*/

.t_center {text-align: center}
.t_left {text-align: left}
.t_right {text-align: right}


ul {padding-left: 1.5em}
li{margin-top: 0.3em}
li:first-of-type {margin-top: 0}

ul.note {padding: 0 !important}
ul.note li {
  list-style: none;
}
ul.note li::before ,p.note::before{content: "※"; margin-right: 0.2em}
ul.note li ,p.note{
  text-indent: -1.2em;
  padding-left: 1.2em;
}

/*見出し
*********************/
.deco1 {
  background: var(--color_blue);
  color: var(--color_white);
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1.3;
  padding: 0.5em;
  margin: 2rem 0 1rem;
}
.deco2 {
  background: var(--color_light_blue);
  color: var(--color_blue);
  font-weight: bold;
  font-size: 1.15rem;
  line-height: 1.3;
  padding: 0.5em;
  border-radius: 5px;
  margin: 2rem 0 1rem;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
}
.deco3 {
  background: repeating-linear-gradient(-45deg, #fff, #fff 4px, #e9e9e9 4px, #e9e9e9 6px);
  font-weight: bold;
  font-size: 1.15rem;
  line-height: 1.3;
  padding: 0.5em;
  color: var(--color_blue);
  border-left:solid 5px var(--color_blue);
  margin: 2rem 0 1rem;
}
.deco3:first-letter {
	color:#3BA0FF;
}
.deco4 {}

@media only screen and (max-width: 450px) {/*SP*/
  .PC {display: none}
  .deco1 {margin-left: -10px;margin-right: -10px;}
}
@media only screen and (min-width: 451px) {/*PC*/
  .SP {display: none}
}

.box1 {
  background: #fff5db;
  padding: 1rem;
  margin-top: 2rem;
}
#main .box1 h2:first-of-type,
#main .box1 h3:first-of-type {margin-top: 0}

#main .box1 h2,#main .box1 h3 {
  border-left: solid 5px #f57200;
}

/*button
*********************/
.button a,a.button {
  display: block;
  text-decoration: none;
  text-align: center;
  font-size: 1.15rem;
  background: #ddd;
  color: #333;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.8);
  text-shadow: 0 1px #FFF,1px 0 #FFF, 0 -1px #FFF,-1px 0 #FFF,
    0 2px #FFF,2px 0 #FFF, 0 -2px #FFF,-2px 0 #FFF,
    1px 2px #FFF,2px 1px #FFF, -1px -2px #FFF,-2px -1px #FFF;
  border: solid 1px #fff;
  max-width: 450px;
  padding: 1rem;
  border-radius: 10px;
  margin: 2rem auto;
}
.button.blue a,a.button.blue {
  background: linear-gradient(to bottom, #addef7 50%, #8cd3f5 50%, #87d1f5 100%);
}
.button.blue a:hover,a.button.blue:hover {
  background: linear-gradient(to bottom, #ffc68e 50%, #ffb771 50%, #ffb165 100%);
}
@media only screen and (max-width: 450px) {/*SP*/
  .PC {display: none}
}
@media only screen and (min-width: 451px) {/*PC*/
  .SP {display: none}
}



/*表組
*********************/
table.table1 {border-radius: 10px 10px 0 0;overflow: hidden;}
table.table1 th[scope="col"]{
  background-image: linear-gradient(to bottom, #698bae, #376694 50%);
  color: var(--color_white);
  font-weight: bold;
}

table.table1 th,table.table1 td {
  border: solid 1px #698bae;
}
table.table1 tr:nth-child(2n+1){
  background: rgba(89,174,220,0.1)
}




/*-------------------------------------
header
-------------------------------------*/
#h1 {
  background: var(--color_blue);
}
#h1 h1{
  color: var(--color_white);
  font-size: 11px;
  padding: 2px 3px;
  font-weight: normal;
  line-height: 1.2em;
}

#header .header_flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#header nav ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #333;
}
#header nav ul li a:hover {
  background: rgba(255,255,255,0.5);
  color: blue;
}
@media only screen and (max-width: 450px) {/*SP*/

  #header {position: relative;display: flex;align-items: center;justify-content: space-between;padding: 2px 10px;}
  #header .header_flex {width: calc(100% - 12vw - 10px)}
  #header .header_flex .logo {width: calc(100% - 12vw - 10px)}
  #header .header_flex .tel {
    background:#219b4f;
    border-radius: 5px;
    width: 12vw;
    height: 12vw;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 8vw;
    line-height: 1;
  }
  #header .header_flex .tel a {color: #FFF;}
  #header nav {
  }
  #header nav .accord {
    background:#ee7500;
    border-radius: 5px;
    width: 12vw;
    height: 12vw;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
  }
  #header nav .accord::after {
    content: "\f0c9";
    font:var(--fa-font-solid);
    font-size: 8vw;
    line-height: 1;
  }
  #header nav .accord.open::after {
    content: "\f00d";
  }
  #header nav .accord_item {
    display: none;
    background:#ee7500;
    position: absolute;
    left: calc(-100vw + 12vw + 10px); 
    right: -10px;
    z-index: 10;
  }
  #header nav ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px;
    border-top: solid 1px #FFF;
    background: rgba(255,255,255,0.4)
  }
  #header nav ul li {
    width: calc((100% - 5px) / 2);
    margin-bottom: 5px;
    background: #FFF;
    border-radius: 0.5em;
  }
  #header nav ul li a {
    padding: 10px 0 10px 6vw;
    font-size: 5vw;
    font-weight: bold;
    color: var(--color_blue);
  }
  #header nav ul li::before {
filter: brightness(0) saturate(100%) invert(17%) sepia(37%) saturate(6431%) hue-rotate(201deg) brightness(97%) contrast(111%);
  content: "";
  position: absolute;
  top:0;bottom:0;left:0;right:0;
  background: no-repeat left 5px center;
    background-size: 6vw;
  }
  #header nav ul li.home::before {background-image: url("../images/sidebar/ico_home.png")}
  #header nav ul li.service::before {background-image: url("../images/sidebar/ico_service.png")}
  #header nav ul li.data::before {background-image: url("../images/sidebar/ico_data.png")}
  #header nav ul li.mac::before {background-image: url("../images/sidebar/ico_mac.png")}
  #header nav ul li.hojin::before {background-image: url("../images/sidebar/ico_hojin.png")}
  #header nav ul li.price::before {background-image: url("../images/sidebar/ico_price.png")}
  #header nav ul li.area::before {background-image: url("../images/sidebar/ico_area.png")}
  #header nav ul li.column::before {background-image: url("../images/sidebar/ico_column.png")}
  
  #header nav ul li.service, #header nav ul li.home {width: 100%;}
  #header nav ul li.service a, #header nav ul li.home a {padding: 10px 0;}
  #header nav ul li.home {order: 99;}
}
@media only screen and (min-width: 451px) {/*PC*/
#header nav {
  width: 100%;
  background: linear-gradient(to bottom,#bbb9ba,#f0eeef 40%,#bbb9ba);
  overflow: hidden;
  box-shadow: inset 0 2px 2px rgba(0,0,0,0.1),inset 0 -2px 2px rgba(0,0,0,0.1);
}
#header nav ul {
  display: flex;
}
#header nav ul li {
  flex-grow: 1;
  margin: 0 1px;
  border-right: solid 1px var(--color_white);
  box-shadow: 0 0 2px rgba(0,0,0,0.5);
}
#header nav ul li:first-of-type {
  border-left: solid 1px var(--color_white);
}
#header nav ul li a {
  height: 60px;
  color: #333;
}

}




/*-------------------------------------
メインビジュアル
-------------------------------------*/
#main_v .main_v_text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: url("../images/main_v_bg.gif");
  padding-left: 5px;
}
#main_v .main_v_text p {
  margin: 0;
  color: #FFF;
  font-weight: bold;
}
@media only screen and (max-width: 450px) {/*SP*/
  #main_v .main_v_text {padding: 15px 10px}
  #main_v .main_v_text .title {font-size: 1.5rem;}
  #main_v .main_v_text .title_sub {}
}
@media only screen and (min-width: 451px) {/*PC*/
  #main_v .main_v_text {height: 120px;}
  #main_v .main_v_text .title {font-size: 30px;}
  #main_v .main_v_text .title_sub {}
}


/*-------------------------------------
パンくず
-------------------------------------*/
#pankuzu {
  font-size: 0.75rem;
}
@media only screen and (max-width: 450px) {/*SP*/
  #pankuzu {margin: 10px 10px 15px;}
}
@media only screen and (min-width: 451px) {/*PC*/
  #pankuzu {margin: 15px auto;}
}


/*-------------------------------------
footer
-------------------------------------*/
footer {
  border-top: solid 5px var(--color_light_blue);
}
footer p {margin: 0}
footer small {
  display: block;
  background: var(--color_blue);
  color: var(--color_white);
  text-align: center;
  font-size: 11px;
  padding: 2px 0;
}
#footer .footer_l {
  text-align: center;
}
#footer .footer_l .logo_text {
  display: block;
  text-decoration: none;
  padding: 10px 10px;
  background-color: var(--color_orange); 
  color: var(--color_white);
  font-weight: bold;
}
#footer .footer_r li a {
  background: url("../images/arrow_bg.png") left center no-repeat;
  padding-left: 10px;
}

#go_top {
  position: fixed;
  color: var(--color_orange); 
  line-height: 1em;
  background: #FFF;
  border-radius: 50%;
}
#go_top i {margin: 0!important}


@media only screen and (max-width: 450px) {/*SP*/
  #footer {padding: 10px 0 0}
  #footer .footer_r {display: none}
  footer small {display: block;padding-bottom: 22vw}
  #go_top {right: 5px; bottom: 25vw;font-size: 40px;}
  #fixed_tel {
  position: fixed;
  left: 0;right: 0;bottom: 0;
    z-index: 999;
  }
}
@media only screen and (min-width: 451px) {/*PC*/
  #footer {display: flex; justify-content: center; padding: 10px 0}
  #footer .footer_l {
    display: flex;
    align-items: center;
  }
  #footer .footer_l .logo_text {border-radius: 5px;}
  #footer .footer_r {
    display: flex;
    font-size: 12px;
    border-left: dashed 1px #ccc;
    margin-left: 20px;
  }
  #footer .footer_r > ul {margin-left: 20px;}
  #footer .footer_r li {line-height: 2em;}
  #footer .footer_r li ul {padding-left: 1em;}
  #go_top {
    right: 20px; bottom: 20px;
    font-size: 60px;
    height: 60px;width: 60px;
    display: flex;justify-content: center;align-items: center;
    overflow: hidden;
  }
  #go_top:hover {opacity: 0.5}
}


/*-------------------------------------
#sidebar
-------------------------------------*/
.side_nav * {margin: 0}
.side_nav a {display: block;}
.side_nav a:hover {background: rgba(255,200,0,0.5)}
.side_nav {
  border: solid 1px #999;
/*  border-top: solid 10px var(--color_blue);*/
  border-bottom: solid 10px var(--color_blue);
  border-radius: 4px;
  margin-bottom: 1rem;
}
.side_nav.price {border-top-width: 1px}
.side_nav .side_title {
  background-image: linear-gradient(to bottom, #508ADB 0%, #0E4CA3 100%);
  color: var(--color_white);
  font-weight: bold;
  line-height: 3em;
  text-align: center;
}
#sidebar .side_nav span ,
#sidebar .side_nav a {
  display: flex;
  align-items: center;
}
#sidebar .side_nav li a {
  color: #333;
}
#sidebar .side_nav a::after {
  content: "\f0da";
  font:var(--fa-font-solid);
  position: absolute;
  right: 5px;
}
/***サービスメニュー***/
#sidebar .menu_nav li:not(:first-of-type){
  border-top: solid 1px #999;
}
#sidebar .menu_nav li a {
  text-decoration: none;
    padding: 0.25em 1em 0.25em 40px;
    min-height: 40px;
}
#sidebar .menu_nav li {
  background-image: linear-gradient(to bottom, #ffffff 50%, #ebebeb 50%);
}
#sidebar .menu_nav li::before {
  content: "";
  position: absolute;
  top:0;bottom:0;left:0;right:0;
  background: no-repeat left 5px center;
}
#sidebar .menu_nav li.home::before {background-image: url("../images/sidebar/ico_home.png")}
#sidebar .menu_nav li.service::before {background-image: url("../images/sidebar/ico_service.png")}
#sidebar .menu_nav li.data::before {background-image: url("../images/sidebar/ico_data.png")}
#sidebar .menu_nav li.mac::before {background-image: url("../images/sidebar/ico_mac.png")}
#sidebar .menu_nav li.price::before {background-image: url("../images/sidebar/ico_price.png")}
#sidebar .menu_nav li.area::before {background-image: url("../images/sidebar/ico_area.png")}
#sidebar .menu_nav li.column::before {background-image: url("../images/sidebar/ico_column.png")}

#sidebar .menu_nav li.internet::before {background-image: url("../images/sidebar/ico_internet.png")}
#sidebar .menu_nav li.security::before {background-image: url("../images/sidebar/ico_security.png")}
#sidebar .menu_nav li.system::before {background-image: url("../images/sidebar/ico_system.png")}
#sidebar .menu_nav li.shuhen::before {background-image: url("../images/sidebar/ico_shuhen.png")}
#sidebar .menu_nav li.hardware::before {background-image: url("../images/sidebar/ico_hardware.png")}
#sidebar .menu_nav li.backup::before {background-image: url("../images/sidebar/ico_data.png")}
#sidebar .menu_nav li.other::before {background-image: url("../images/sidebar/ico_other.png")}
#sidebar .menu_nav li.digital::before {background-image: url("../images/sidebar/ico_digital.png")}
#sidebar .menu_nav li.smartphone::before {background-image: url("../images/sidebar/ico_smartphone.png")}
#sidebar .menu_nav li.hojin::before {background-image: url("../images/sidebar/ico_hojin.png")}
#sidebar .menu_nav li.pack::before {background-image: url("../images/sidebar/ico_pack.png")}
#sidebar .menu_nav li.set::before {background-image: url("../images/sidebar/ico_set.png")}



/***パソコン修理メニュー***/
#sidebar .s_nav_con:not(:first-of-type){
  border-top: solid 1px #999;
}
#sidebar .s_nav_con .con_title {
  font-weight: bold;color: #FFF;
  display: flex;
  align-items: center;
}
#sidebar .s_nav_con .con_title::after {
  position: absolute;
  right: 10px;
}
#sidebar .s_nav_con .con_title a {color: #FFF;text-decoration: none}
#sidebar .s_nav_con .con_title a:hover {background: rgba(255,255,255,0.75);color: var(--color_blue);}
#sidebar .s_nav_con .con_title.pack {background: #ed7700}
#sidebar .s_nav_con .con_title.set {background: #92b968}
#sidebar .s_nav_con .con_title.network {background: #a7292f}
#sidebar .s_nav_con .con_title.security {background: #577a9d}
#sidebar .s_nav_con .con_title.system {background: #81aa6a}
#sidebar .s_nav_con .con_title.device {background: #d17b2d}
#sidebar .s_nav_con .con_title.hardware {background: #b76d98}
#sidebar .s_nav_con .con_title.data {background: #2d3981}
#sidebar .s_nav_con .con_title.other {background: #518262}
#sidebar .s_nav_con .con_title.digital {background: #e36b4f}
#sidebar .s_nav_con .con_title.smartphone {background: #64bcbf}
#sidebar .s_nav_con .con_title.houjin {background: #8d2b63}

#sidebar .s_nav_con li:not(:first-of-type) {border-top: 1px dashed #bbb}

  #sidebar .s_nav_con li span::before,
  #sidebar .s_nav_con li a::before {
  content: "└";
  position: absolute;
  left: 0;
}
  #sidebar .s_nav_con .con_title span,
  #sidebar .s_nav_con .con_title a {
    padding: 10px 20px 10px 10px;
  }
  #sidebar .s_nav_con li span,
  #sidebar .s_nav_con li a {
    padding: 10px 20px 10px 20px;
  }


@media only screen and (max-width: 450px) {/*SP*/
  #sidebar {padding: 20px 10px 10px;}
/***サービスメニュー***/
/***パソコン修理メニュー***/
  #sidebar .s_nav_con li a {font-weight: bold}
  #sidebar .s_nav_con .con_title::after {
    content: "＋";
  }
  #sidebar .s_nav_con .con_title.open::after {
    content: "－";
  }
  #sidebar .s_nav_con ul {display: none}
}
@media only screen and (min-width: 451px) {/*PC*/
  .side_nav {font-size: 14px;}
/***サービスメニュー***/
/***パソコン修理メニュー***/
  #sidebar .s_nav_con .con_title::after { content: "＋"; }
  #sidebar .s_nav_con .con_title.open::after { content: "－"; }
  #sidebar .s_nav_con ul {display: none}

  #sidebar .s_nav_con:first-of-type .con_title::after { content: "－"; }
  #sidebar .s_nav_con:first-of-type .con_title.open::after { content: "＋"; }
  #sidebar .s_nav_con:first-of-type ul {display: block}

}


/*-------------------------------------
main
-------------------------------------*/

@media only screen and (max-width: 450px) {/*SP*/
  #main {padding: 0 10px;}
}
@media only screen and (min-width: 451px) {/*PC*/
}






/*-------------------------------------
インデックス
-------------------------------------*/
#main #index .top_parts h2 {
  display: block;
  margin-top: 3rem
}
#index .top_parts .box {
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  padding: 1rem;
  margin-bottom: 1rem;
}
#index .top_parts .box:last-of-type {margin: 0}
#index .top_parts .box h2,
#index .top_parts .box h3 {
  margin-top: 0;
}
#index .top_parts .box p {margin: 1rem 0 0}
#index .top_parts .top_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);
}
#index .top_parts .top_title::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 15px;
    background-image: linear-gradient(to bottom, #1389e1, #034dab);
}

/***選ばれる3つのポイント*****/
#index #point .main_title{
  background: linear-gradient(to bottom, #fb9620, #fb791a);
  background: -webkit-linear-gradient(-90deg, #fb9620,#fb791a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  text-align: center;
  margin-bottom: 2rem;
}
#index #point .main_title span {
  background: linear-gradient(to bottom, #e85c37, #fb2f1a);
  background: -webkit-linear-gradient(-90deg, #e85c37,#fb2f1a);
  -webkit-text-fill-color: #FFF;
  padding:0 0.5em;
  display: inline-block;
  border-radius: 5px;
}
#index #point .point_list dl,
#index #point .point_list dd {
  display: flex;
  flex-direction: column;
}
#index #point .point_list dt {
  background-image: linear-gradient(to bottom, #19A2FC 0%, #046BB0 100%);
  color: #fff;
  text-align: center;
  padding: 10px 0;
  margin-bottom: 0.5rem;
}
#index #point .point_list dd {
  flex-grow: 1;
  justify-content: space-between;
}
#index #point .point_list dd p {margin: 0}
#index #point .point_list dd p.link {margin: 1rem 0 0}
#index #point .point_list dd p.link 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;
}
#index #point .point_list dd p.link a:hover {
  background: var(--color_light_orange);
  color: var(--color_orange);
}
/***パソコン修理屋くまさんについて*****/
#index #top_about h2 {text-align: center}
#index #top_about h2 .img {display: block;background: #FFF;}
#index #top_about h2 .text {position: absolute;display: block;top: 2px;bottom: 2px; left: 2px;right: 2px;z-index: -1}

/***料金について*****/

/***出張パソコン修理サービス*****/
#index #top_service .box dt {font-weight: bold;margin-bottom: 0.5rem}

/***サービスの流れ*****/
#index #top_flow ol {margin: 0;padding: 0}
#index #top_flow ol li{list-style: none;margin-bottom: 1rem}
#index #top_flow ol li:last-of-type {margin: 0}
#index #top_flow ol li .title{
  font-weight: bold;
  margin: 0;
  padding-left: 1.75em;
  text-indent: -1.75em;
}
#index #top_flow ol li .title .nam {
  display: inline-block;
  background: #0A4C00;
  color: #FFF;
  width: 1.5em;
  line-height: 1.5em;
  text-align: center;
  margin-right: 0.25em;
  text-indent: 0;
}
#index #top_flow ol li .text {margin: 0.75rem 0 0}

@media only screen and (max-width: 450px) {/*SP*/
/***選ばれる3つのポイント*****/
  #index #point .main_title {
    font-size: 6vw;
    margin: 1em 0;
  }
  #index #point .main_title span {
    margin: 0.5em 5px 0 0;
    line-height: 1.5;
  }
  #index #point .point_list dl {margin-bottom: 1rem}
  #index #point .point_list dd p.link a {width: 16em;margin: auto}
/***パソコン修理屋くまさんについて*****/
  #index #top_about h3 {font-size: 5.5vw;line-height: 1.5;text-align: center}
/***料金について*****/
/***出張パソコン修理サービス*****/
#index #top_service .box dt {margin-top: 0.5rem}
/***サービスの流れ*****/
  #index #top_flow ol li .img {text-align: center;margin-bottom: 0.5rem}
}
@media only screen and (min-width: 451px) {/*PC*/
#index .top_parts .box {padding: 1.5rem}
/***選ばれる3つのポイント*****/
  #index #point .main_title {
    font-size: 31px;
  line-height: 1.5;
    margin-top: 15px;
  }
  #index #point .main_title span {margin: 0 5px}
  #index #point .point_list {
    display: flex;
    justify-content: space-between;
  }
  #index #point .point_list .point {
    width: calc((100% - 20px)/ 3);
  }

/***パソコン修理屋くまさんについて*****/
  #index #top_about h3 {font-size: 1.3rem;margin-top: 10px;}

/***料金について*****/
/***出張パソコン修理サービス*****/
  #index #top_service .box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  #index #top_service .box figure {width: 140px}
  #index #top_service .box dl {width: calc(100% - 160px)}
/***サービスの流れ*****/
  #index #top_flow ol li {padding:10px 0 0 160px;min-height: 140px;}
  #index #top_flow ol li .img {position: absolute; left: 0;top: 0}
}





/*-------------------------------------
パソコン修理TOP／サービスカテゴリーTOP
-------------------------------------*/
#service_list {
  border: solid 1px #72c4eb;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
#service_list .sl_title {
  background-image: linear-gradient(to bottom, #72c4eb, #4bb6e9);
}

#service_list .sl_title .example {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}
#service_list .sl_title .example li {
  list-style: none;
  background: #FFF;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0;
}
#service_list .sl_title .s_top_title {
  font-weight: bold;
  text-align: center;
  text-shadow: 0 1px #FFF,1px 0 #FFF, 0 -1px #FFF,-1px 0 #FFF,
    0 2px #FFF,2px 0 #FFF, 0 -2px #FFF,-2px 0 #FFF,
    1px 2px #FFF,2px 1px #FFF, -1px -2px #FFF,-2px -1px #FFF;
  margin: 15px 0 0;
}

#service_list section {
  border-top: dashed 1px #72c4eb;  
}
#service_list section h2,
#service_list section h3 {
  font-size: 1.15em;
  margin: 0;
  line-height: 1.3;
  text-indent: -1em;
  padding-left: 1em;
}
#service_list section h2::before ,
#service_list section h3::before {
  content: "❂";
  color: #4bb6e9; 
}
#service_list section .service_link {
  display: flex;
  flex-wrap: wrap;
  margin: 0;padding: 0;
}
#service_list section .service_link li {
  list-style: none;
  margin: 0;
}
#service_list section .service_link li a {
  display: block;
  border: solid 1px var(--color_orange);
  background: var(--color_orange);
  color: var(--color_white);
  text-decoration: none;
  line-height: 2em;
  padding: 0 0.5em;
  border-radius: 0.5em;
}

/***サービスカテゴリーTOP***/
  #service_list .sl_title_sub p{
  color: var(--color_white);
  font-weight: bold;
  text-shadow: 0 1px #000,1px 0 #000, 0 -1px #000,-1px 0 #000;
  margin: 0;
}
  #service_list .sl_title_sub .title {font-size: 1.3em}
  #service_list .sl_title_sub .title span {font-size: 1.3em}

@media only screen and (max-width: 450px) {/*SP*/
  #service_list .sl_title {  padding: 10px;}
  #service_list .sl_title .example {flex-wrap: wrap}
  #service_list .sl_title .example li {
    width: calc((100% - 6px) / 3);
    font-size: 1.8vw;
    padding: 5px 0;
    margin-bottom: 3px;
  }
  #service_list .sl_title .example li span:nth-of-type(2n)::before{content: "・"}
  #service_list .sl_title .s_top_title {
    font-size: 1.25em;
    margin-top: 5px;
  }
  #service_list section { padding: 10px; }
  #service_list section .service_link li {margin:0 10px 10px 0}
}
@media only screen and (min-width: 451px) {/*PC*/
  #service_list .sl_title {  padding: 15px 10px;}
  #service_list .sl_title .example li {
    font-size: 12px;
    padding: 5px;
    width: calc((100% - 25px) / 6);
  }
  #service_list .sl_title .s_top_title {
    font-size: 26px;
  }
  #service_list section { padding: 15px; }
  #service_list section .service_link {
    justify-content: flex-end;
  }
  #service_list section .service_link li {
    margin-left: 10px;
  }

/***サービスカテゴリーTOP***/
  #service_list .sl_title_sub {padding-left: 20px;}
  #service_list .sl_title_sub .title span {margin-right: 5px}

}




/*-------------------------------------
料金
-------------------------------------*/
#price .box1 ul {margin: 0;padding: 0 0 0 1.5em;}

/***** 料金のしくみ *****/
#about_price {margin:1em 0 0;}
#about_price dl {border: solid 1px #999;}
#about_price dl dd {padding: 10px;}
#about_price .ap_items dl{
  margin-bottom: 10px;
  display: flex;
}

#about_price .ap_items dl.item1 dt {background:#fcfd85 }
#about_price .ap_items dl.item2 dt {background:#fcfd85 }
#about_price .ap_items dl.item3 dt {background:#cff1fa }
#about_price .ap_items dl dt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

#about_price dl.ap_total dt {background:#e5004f ;color: #FFF;font-weight: bold;text-align: center}

#about_price .fee {margin-top: 0;font-weight: bold;text-align: center; margin-bottom: 1rem}
#about_price .ap_items .fee {color: #ee7500}
#about_price .ap_total .fee {color: #e5004f}
#about_price .ap_total .fee span {display: inline-block}

#about_price .ap_items p strong {display: block; text-align: center}

#about_price ul {margin: 0;padding: 0}
#about_price ul li {list-style: none}

#about_price + .note {margin-top: 0.5rem}


@media only screen and (max-width: 450px) {/*SP*/
  #about_price dl dt {padding: 0.75rem 0; font-size: 5vw}
  #about_price dl dt span {font-size: 1rem}
  #about_price .ap_items dl{flex-direction: column;}
  #about_price .fee {font-size: 8vw;}
  #about_price .ap_items dl.item3 .fee {font-size: 6vw;}
  #about_price .ap_items p strong {font-size: 5vw;}
  #about_price .ap_total p strong {font-size: 5vw;}
}
@media only screen and (min-width: 451px) {/*PC*/
  #about_price {
    display: flex;
    justify-content: space-between;
  }
  #about_price dl dt {font-size: 20px}
  #about_price dl dt span {font-size: 1rem}
  #about_price .ap_items {width: 495px;}
  #about_price .ap_items dl:last-of-type{margin-bottom: 0;}
  #about_price .ap_items dl dt {width: 150px;border-right: solid 1px #999;}
  #about_price .ap_items dl dd {width: calc(100% - 150px);}
  #about_price .fee {font-size: 30px;}
  #about_price .ap_items dl.item3 .fee {font-size: 26px;}
  #about_price .ap_items p strong {font-size: 20px;}
  #about_price .ap_total p strong {font-size: 18px;}
  #about_price .ap_total {width: 220px;display: flex;flex-direction: column;}
  #about_price dl.ap_total dt {line-height: 100px;}
  #about_price .ap_total dd p {margin: 0}
  #about_price .ap_total dd {display: flex;flex-direction: column;justify-content: space-around;flex-grow: 1}

}


/***** 訪問時間により、下記の追加料金が発生いたします。*****/
#price .additional_fees {border: solid 1px #999;padding: 1rem}
#price .additional_fees h3 {
  margin: 0;
  padding: 0;
  border: none;
  background: url("../images/attention.png") no-repeat left center;
  display: flex;
  align-items: center;
}
#price .additional_fees .af_items {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#price .additional_fees .af_items dl {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  
}
#price .additional_fees .af_items dl dt,
#price .additional_fees .af_items dl dd {
  text-align: right;
  line-height: 1;
  
}
#price .additional_fees .af_items dl dt {
}
#price .additional_fees .af_items dl dd {
  font-weight: bold;
  color: #ee7500;
}


@media only screen and (max-width: 450px) {/*SP*/
  #price .additional_fees h3 {padding-left: 50px;line-height: 1.3;min-height: 40px}
  #price .additional_fees .af_items {display: table;margin: 0 auto 0}
  #price .additional_fees .af_items dl {justify-content: space-between;margin-top: 1rem}
  #price .additional_fees .af_items dl dd {font-size: 1.2rem;margin-left: 0.5rem}
}
@media only screen and (min-width: 451px) {/*PC*/
  #price .additional_fees h3 {height: 40px;padding-left: 50px;}
  #price .additional_fees .af_items {padding: 1em 1em 0 0}
  #price .additional_fees .af_items dl {width: 50%;margin: 1rem 0 }
  #price .additional_fees .af_items dl dd {font-size: 22px;width: 6em}
}


/***** 特定作業料金一覧*****/
#price .menu_box ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin:1em 0 0;padding: 0;
}
#price .menu_box ul li {
  border-radius: 5px;
  list-style: none;
  margin-bottom: 3px;
}
#price .menu_box ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
	font-weight: bold;
	font: "メイリオ", Meiryo, Osaka,;
	box-shadow: 0px 25px 0px rgba(255,255,255,0.25) inset;
  text-decoration: none;
}
#price .menu_box ul li a:hover {
  box-shadow: 0px -25px 0px rgb(255 255 255 / 25%) inset;
}
#price .pri_list01 { background: #ed7700; } /*お得なパックメニュー*/
#price .pri_list02 { background: #92b968; } /*セットメニュー*/
#price .pri_list03 { background: #a7292f; } /*インターネット・ネットワーク関連*/
#price .pri_list04 { background: #577a9d; } /*セキュリティ関連*/
#price .pri_list05 { background: #81aa6a; } /*システム・アプリケーション関連*/
#price .pri_list06 { background: #d17b2d; } /*周辺機器関連*/
#price .pri_list07 { background: #b76d98; } /*ハードウェア関連*/
#price .pri_list08 { background: #2d3981; } /*データバックアップ・データ復旧関連*/
#price .pri_list09 { background: #518262; } /*その他パソコン関連*/
#price .pri_list10 { background: #e36b4f; } /*デジタル家電メニュー*/
#price .pri_list11 { background: #64bcbf; } /*スマートフォンメニュー*/
#price .pri_list12 { background: #8d2b63; } /*法人のお客様*/

#price h3 {
  font-size: 1.15em;
  border-left: solid 5px;
  padding: 5px;
}
#price h3#pack { color: #ed7700; border-color: #ed7700 } /*お得なパックメニュー*/
#price h3#set { color: #92b968; border-color: #92b968 } /*セットメニュー*/
#price h3#net { color: #a7292f; border-color: #a7292f } /*インターネット・ネットワーク関連*/
#price h3#sec { color: #577a9d; border-color: #577a9d } /*セキュリティ関連*/
#price h3#sys { color: #81aa6a; border-color: #81aa6a } /*システム・アプリケーション関連*/
#price h3#dev { color: #d17b2d; border-color: #d17b2d } /*周辺機器関連*/
#price h3#har { color: #b76d98; border-color: #b76d98 } /*ハードウェア関連*/
#price h3#data { color: #2d3981; border-color: #2d3981 } /*データバックアップ・データ復旧関連*/
#price h3#etc { color: #518262; border-color: #518262 } /*その他パソコン関連*/
#price h3#dig { color: #e36b4f; border-color: #e36b4f } /*デジタル家電メニュー*/
#price h3#sma { color: #64bcbf; border-color: #64bcbf } /*スマートフォンメニュー*/
#price h3#hou { color: #8d2b63; border-color: #8d2b63 } /*法人のお客様*/

@media only screen and (max-width: 450px) {/*SP*/
  #price .menu_box ul li {
    width: calc((100% - 3px) / 2);
  }
  #price .menu_box ul li a {height: 3.5em;font-size: 4vw}
}
@media only screen and (min-width: 451px) {/*PC*/
  #price .menu_box ul li {
    width: calc((100% - 6px) / 3);
  }
  #price .menu_box ul li a {height: 50px;}
}


/***** 料金一覧*****/
#price table {width: 100%;}
#price table td{
  border: solid 1px;
  border-color: #999 #999 var(--color_blue) var(--color_blue);
}
#price table tr th{
  border: solid 1px;
  border-color: transparent #999 #999 var(--color_blue);
  color: var(--color_blue);
  text-align: left;
  background: rgba(89,174,220,0.1)
}
#price table th[scope="col"]{
   background:  var(--color_blue);
  color: var(--color_white);
  border: solid 1px var(--color_blue);
  text-align: center;
}
#price table th[scope="col"]:nth-of-type(1){
  border-right-color: #666;
}
#price table th[scope="col"]:nth-of-type(2){
  white-space: nowrap;
  border-left-color: #666;
}
#price table td[rowspan="2"]{
  font-weight: bold;
  color: var(--color_red);
  text-align: right;
  border-right: solid 1px var(--color_blue);
  border-left-color: #999
}
#price table ul {margin: 0;padding: 0 0 0 1.5em}
#price table * + ul, 
#price table ul + * {margin-top: 1em}
#price table + p,
#price table + ul {margin-top: 0.5em}


/***** カテゴリー別リンク　*****/
#service_menu h2 {margin-top: 3rem !important}
#service_menu ul.service_menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0;padding: 0;
}
#service_menu .service_menu .service_menu_item {
  list-style: none;
  border: solid 1px #ccc;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
#service_menu .service_menu .service_menu_item .title {
   color: var(--color_blue);
  border-bottom: solid 2px var(--color_blue);
  padding-bottom: 0.5rem;
  margin: 0;
}
#service_menu .service_menu .service_menu_item ul {
  flex-grow: 1;
  margin: 1rem 0;
}
#service_menu .service_menu .service_menu_item .button ,
#service_menu .service_menu .service_menu_item .button a{margin: 0 auto}
#service_menu .service_menu .service_menu_item .button a {width: 8em;}
@media only screen and (max-width: 450px) {/*SP*/
  #service_menu .service_menu .service_menu_item {width: 100%}
}
@media only screen and (min-width: 451px) {/*PC*/
  #service_menu .service_menu .service_menu_item {width: calc((100% - 10px)/ 2)}
}





/*-------------------------------------
料金＠カテゴリーページ
-------------------------------------*/
#price.price_case .deco3 {
  color: var(--color_blue);
  border-color: var(--color_blue);
  padding: 0.5rem;
}
#price.price_case h4 {
  color: var(--color_blue);
  border-bottom: dotted 2px var(--color_blue);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}
#price.price_case h4.option {
  text-indent: -1.5em;
  padding-left: 1.5em;
}
#price.price_case h4.option::before {
  content: "┗";
  display: inline-block;
  width: 1.5em;
  text-indent: 0;
}
#price.price_case table {
  margin-bottom: 2rem;
}
#price.price_case th,#price.price_case td {
  border: solid 1px var(--color_blue);
}
#price.price_case th {padding: 0.5rem 0; width: 6em;text-align: center}

#price.price_case table tr:last-of-type td {font-weight: bold; color: var(--color_red); }



/*-------------------------------------
対応エリア　一覧
-------------------------------------*/
#area .area00 dt {
  background: #fdfdf3;
  padding: 0.75em 0.5rem 0.75em 25px;
  font-size: 1.15em;
  line-height: 1.3em;
  font-weight: bold;
  margin: 2rem 0 1rem;
  box-shadow:10px 10px 10px -10px rgba(0,0,0,0.5);
}
#area .area00 dt::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;top: 0;bottom: 0;
  width: 15px;
  background-image: linear-gradient(to bottom, #ffa939, #ff7b00);
}


#area .area00 ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;margin: 0;
}
#area .area00 ul li {
  list-style: none;
  margin: 0 5px 5px 0;
}
#area .area00 ul li a {
  display: block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 10px;
  border: solid 1px var(--color_orange);
  background: var(--color_orange);
  color: var(--color_white);
}
#area .area00 ul li a:hover {
  background:var(--color_light_yellow);
  color: var(--color_orange);
}
#onegai {
  border: solid 1px #409aef;
  padding: 0 1rem 0;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  margin: 2rem 0;
}
#onegai .title {
  background: #409aef;
  color: #FFF;
  text-align: center;
  margin: 0 -1rem;
  padding: 0.5em;
}

@media only screen and (max-width: 450px) {/*SP*/
  #area .area00 ul {margin-right: -5px}
#area .area00 ul li {
  width: calc((100% - 20px) / 4);
  font-size: 3.8vw;
}
#area .area00 ul li a {
  padding: 0.5em;
  text-align: center;
}
}
@media only screen and (min-width: 451px) {/*PC*/

}


/*-------------------------------------
対応エリア　都道府県・市区町村
-------------------------------------*/
#area > h2:first-of-type {
  font-size: 1.6rem;
  line-height: 1.5em;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 10px 15px -15px rgba(0,0,0,0.5);
}


/****ポイント******************************/
#area_point .point{
  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: 50%;
}
#area_point dl dt {
  color: var(--color_blue);
  font-weight: bold;
  font-size: 1.15em;
}
#area_point dl dd {margin-bottom: 2rem}

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

/****対応エリア一覧************************/
#shiku_list .title {
  background: #fdfdf3;
  padding: 0.75em 0.5rem 0.75em 25px;
  font-size: 1.15em;
  line-height: 1.3em;
  margin: 2rem 0 0;
  box-shadow:10px 10px 10px -10px rgba(0,0,0,0.5);
}
#shiku_list .title::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;top: 0;bottom: 0;
  width: 15px;
  background-image: linear-gradient(to bottom, #ffa939, #ff7b00);
}
#shiku_list .title:first-child{margin-top: 3rem}


#shiku_list ul {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;margin: 0;
}
#shiku_list ul li {
  list-style: none;
  margin: 0;
  line-height: 2em;
}
#shiku_list ul li::after {
  content: "｜";
}



/*開閉*****/
#shiku_list .showtext_inner{
  position: relative;
  padding-bottom: 2em;
}
#shiku_list .showtext_inner ul {
	overflow:hidden;  
}
#shiku_list .showtext_inner .show_areatext {
	cursor: pointer;
  position: absolute;
  display: block;
  width: 100%;
  text-align: center;
  bottom: 0;
  padding-top: 3em;
  background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1),#FFF);
  color: #87090B;
  font-weight: bold;
  z-index: 10;
}
#shiku_list .showtext_inner .show_areatext:hover {
  text-decoration: underline
}
#shiku_list .showtext_inner .show_areatext::before {
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  border-top: dotted 1px #87090B;
}
#shiku_list .showtext_inner .show_areatext::after {
  content: "エリアを全て表示する [＋]";
}
#shiku_list #show_areatext {display: none}
#shiku_list #show_areatext:checked ~ .showtext_inner {display: block; }
#shiku_list #show_areatext:checked ~ .showtext_inner ul {max-height: inherit}
#shiku_list #show_areatext:checked ~ .showtext_inner .show_areatext {background:none;padding-top: 0;}
#shiku_list #show_areatext:checked ~ .showtext_inner .show_areatext::after {
  content: "エリアの一覧を閉じる [－]";
}
@media only screen and (max-width: 450px) {/*SP*/
  #shiku_list .showtext_inner ul { max-height:10em; }
}
@media only screen and (min-width: 451px) {/*PC*/
  #shiku_list .showtext_inner ul { max-height:5em; }
}


/*駅・近隣*****/
#shiku_list section + section h3 {margin-top: 10px}
#eki_list .title_sub ,
#kinrin_list .title_sub {
  border-radius: 10px;
  background: var(--color_orange) linear-gradient(to bottom, #ffa939, #ff7b00);
  color: #FFF;
  font-weight: bold;
  padding: 0.75em;
  cursor: pointer;
}
#eki_list .title_sub:hover ,
#kinrin_list .title_sub:hover {
  background: var(--color_orange);
}
#eki_list .title_sub.open:hover ,
#kinrin_list .title_sub.open:hover {
  background: var(--color_orange) linear-gradient(to bottom, #ffa939, #ff7b00);
}

#eki_list .title_sub.open ,
#kinrin_list .title_sub.open {
  border-radius: 10px 10px 0 0;
  background: var(--color_orange);
}
#eki_list .title_sub::after ,
#kinrin_list .title_sub::after {
  content: "＋";
  position: absolute;
  right: 0.5em;
}
#eki_list .title_sub.open::after ,
#kinrin_list .title_sub.open::after {
  content: "－";
}


#eki_list .accord_con,
#kinrin_list .accord_con {
  display: none;
  border-radius: 0 0 10px 10px;
  border: dotted 2px var(--color_orange);
  border-top: none;
}












/****パソコン修理をご検討の皆様へ******************/
#area_pr {}
@media only screen and (max-width: 450px) {/*SP*/
}
@media only screen and (min-width: 451px) {/*PC*/
}





/*-------------------------------------
コラム一覧/カテゴリー一覧
-------------------------------------*/
#columns article {
  display: flex;
  justify-content: space-between;
  border-bottom: dotted 1px #ccc;
    margin-bottom: 10px;
    padding-bottom: 10px;
}
#columns article .text {
  display: flex;
  flex-direction: column;
}
#columns article .title {
  margin: 0;line-height: 1.3;
  flex-grow: 1;
  display: flex;
  align-items: center;
}
#columns article .article_meta {
  display: flex;
  font-size: 0.85rem;
  margin-top: 0.25rem;
  color: #666;
}
#columns article .article_meta i {margin-right: 3px;}
#columns article .article_meta ul.cate {padding: 0;margin: 0}
#columns article .article_meta ul.cate li {list-style: none;margin-left: 1em}

@media only screen and (max-width: 450px) {/*SP*/
  #columns article .img {width: 30%}
  #columns article .text {width: calc(70% - 10px)}
}
@media only screen and (min-width: 451px) {/*PC*/
  #columns article {
  }
  #columns article .img {width: 200px}
  #columns article .text {width: calc(100% - 220px)}
}


/****ページナビ******************/
.wp-pagenavi {margin: 2rem auto 1rem;text-align: center}
.wp-pagenavi a:hover, .wp-pagenavi span.current {border: 1px solid #BFBFBF;}
.wp-pagenavi a:hover {background: #87d1f5;}
.wp-pagenavi span.current {
  background: #508ADB ;
  color: #FFF;
}