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

@media print, screen and (min-width: 660px) {/*PC*/
}
@media screen and (max-width: 659px) {/*SP*/
}

a {word-break: break-all; }
#main p a:hover,
#main table a:hover,
#main li a:hover{background: var(--yellow);}

/*======================================================================================
メイン画像（h1）
======================================================================================*/
#area_h1 .area_h1 {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
}

#area_h1 .area_h1 .area_name .title {
  background: var(--yellow);
  color: #000;
  line-height: 1;
}
#area_h1 .area_h1 .kaiketu {
  color: #ee0000;
}
#area_h1 .area_h1 .kaiketu .fs_s {color: #000;}

@media print, screen and (min-width: 660px) {/*PC*/
  #area_h1 .area_h1 {
    top: 30px;left: 20px;
  }
  #area_h1 .area_h1 .area_name .fs_s,
  #area_h1 .area_h1 .kaiketu {
    -webkit-text-stroke: 7px var(--white);
    paint-order: stroke;
    letter-spacing: 2px;    
  }
  
  #area_h1 .area_h1 .area_name .title {
    font-size: 50px;
    padding: 0.5rem;
    margin-right: 0.25rem;
    letter-spacing: 0.1rem;
  }
  #area_h1 .area_h1 .area_name .fs_s {font-size: 35px}
  #area_h1 .area_h1 .kaiketu {font-size: 70px}
  #area_h1 .area_h1 .kaiketu .fs_s {font-size: 50px}
}
@media screen and (max-width: 659px) {/*SP*/
  #area_h1 .area_h1 {
    top: 4vw;left: 0;right: 0;
    text-align: center;
    
  }
  #area_h1 .area_h1 .area_name .fs_s,
  #area_h1 .area_h1 .kaiketu {
    -webkit-text-stroke: 1.5vw var(--white);
    paint-order: stroke;
    letter-spacing: 0.75vw;    
  }

  #area_h1 .area_h1 .area_name .title {
    font-size: 8vw;
    padding: 0.2em;
    margin-right: 1vw;
    letter-spacing: 0.03em;
  }
  #area_h1 .area_h1 .area_name .fs_s {font-size: 5.5vw}
  #area_h1 .area_h1 .kaiketu {font-size: 11vw}
  #area_h1 .area_h1 .kaiketu .fs_s {font-size: 8vw}
}





/*======================================================================================
大見出し
======================================================================================*/
.area_title {
  text-align: center;
  font-weight: bold;
  color: var(--blue_1);
  font-size: 2rem;
  line-height: 1.4;
  margin-top: 0;
}
.area_title span {display: inline-block}
@media screen and (max-width: 449px) {/*SP*/
  .area_title {font-size: 7vw}
}




/*======================================================================================
こんなことでお困りではないですか？
======================================================================================*/
.area_trouble {
  border: solid 1px var(--red);
  border-radius: 10px;
  overflow: hidden;
  background: url("../../img/parts/area_trouble/img.webp") no-repeat right bottom var(--bg_yellow);;
}
.area_trouble h2 {
  background: var(--red);
  margin: 0 !important;
}
.area_trouble ul {
  font-weight: bold;
  padding: 1rem 1rem 0;
  margin: 0;
}
.area_trouble ul li {
  list-style: none;
  color:  var(--brown);
  font-size: 1.15rem;
  text-indent: -1.7rem;
    -webkit-text-stroke: 5px #ffffd9;
    paint-order: stroke;
}
.area_trouble ul li::before {
  content: "\f071";
  color:  var(--red);
  font-family: "Font Awesome 6 Free";
  font-size: 1.5rem;
  margin-right: 0.2rem;
}
.area_trouble p {
  margin: 0;padding: 1rem;
  background: #ffffd999;
    -webkit-text-stroke: 5px #ffffd9;
    paint-order: stroke;
}

@media print, screen and (min-width: 660px) {/*PC*/
  .area_trouble ul li {margin: 0.5rem 0 0.5rem 1.7rem;}
}
@media screen and (max-width: 659px) {/*SP*/
  .area_trouble {
    background-size: 250px auto;
    background-position: right top 50px;
  }
  .area_trouble ul {
    margin-right: 200px;
  }
  .area_trouble ul li {margin: 0.25rem 0 0.25rem 1.7rem;}
  .area_trouble ul li:last-of-type {margin-bottom: 0}

}
@media screen and (max-width: 499px) {/*SP*/
  .area_trouble {
    background-size: auto auto;
    background-position: right bottom;
  }
  .area_trouble ul{margin: 0;background: #ffffd999;}
  .area_trouble p{background: #ffffd999;}
}





/*======================================================================================
ハチのお悩み解決します！
======================================================================================*/
.area_kaiketu h2 {background: var(--green); }
.area_kaiketu h2 span {display: inline-block}




/*======================================================================================
自力での駆除は危険を伴います！
======================================================================================*/
.area_warning {
  background: var(--d_gray);
  color: var(--white);
  padding: 10px;
}
.area_warning h2 {
  background: var(--yellow);
  color: #000;
  margin: 0 !important;
}
.area_warning ul {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}
.area_warning ul li {
  list-style: none;
  width: calc((100% - 20px)/ 3);
  text-align: center;
  color: var(--yellow);
  margin: 0;
  
}
.area_warning ul li img {
  border-radius: 50%;
  border: solid 2px var(--yellow);
  margin-bottom: 5px;
}
@media print, screen and (min-width: 660px) {/*PC*/
  .area_warning {padding: 20px}
}
@media screen and (max-width: 659px) {/*SP*/
  .area_warning ul li {font-size: 0.85rem}
}



/*======================================================================================
ハチ駆除の基本料金
======================================================================================*/
#area_price h2 {
  background: initial;
  color: var(--orange);
  border-top: double 6px var(--orange);
  border-bottom: double 6px var(--orange);
}
#area_price h2 .span {display: inline-block}

#area_price .bee_type {
  border: solid 1px var(--red);
  background: var(--yellow);
  margin-bottom: 10px;
  border-radius: 10px;
  overflow: hidden;
}
#area_price .bee_type h3 {
  background: var(--red);
  color: var(--white);
  margin: 0 -20px 10px;
  text-align: center;
  line-height: 2.5;
  font-size: 1.3rem;
}
#area_price .bee_type p {margin: 0.5em 0 0}
#area_price .bee_type .price {
  text-align: center;
}
#area_price .bee_type .price .price_text {
  font-weight: bold;
}
#area_price .bee_type .price .price_text .fee {
  color: var(--red);
}
#area_price .bee_type .text {
  background: var(--white);
  border-radius: 10px;
  padding: 0.5rem 1rem 1rem;
  margin-top: 10px;
}
@media print, screen and (min-width: 660px) {/*PC*/
  #area_price h2 {font-size: 1.75rem;}
  #area_price .bee_type {padding: 0 15px 15px}
  #area_price .bee_type .price {
    display: flex;
    align-items: center;
  }
  #area_price .bee_type .price .price_text {
    flex-grow: 1;
    font-size: 18px;
  }
  #area_price .bee_type .price .price_text .fee {font-size: 35px}
  #area_price .bee_type .price .price_text dl:first-of-type {margin-bottom: 20px}
  #area_price .bee_type .price .price_text dl {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #area_price .bee_type .price .price_text dt {
    background: var(--d_gray);
    color: var(--white);
    line-height: 1;
    padding: 8px;
    width: 7em;
  }
}
@media screen and (max-width: 659px) {/*SP*/
  #area_price h2 {font-size: 1.5rem;}
  #area_price .bee_type {padding: 0 10px 10px}
  #area_price .bee_type .price .price_text {
    display: flex;
  }
  #area_price .bee_type .price .price_text dl {
    width: 50%;
    line-height: 1;
    padding: 10px 0 5px;
  }
  #area_price .bee_type .price .price_text dt {
    background: var(--d_gray);
    color: var(--white);
    line-height: 1;
    width: 6em;
    padding: 5px;
    margin:0 auto 5px;
  }
  #area_price .bee_type .price .price_text {font-size: 18px;}
  #area_price .bee_type .price .price_text .fee {font-size: 30px}
}

@media screen and (max-width: 499px) {/*SP*/
  #area_price .bee_type .price .img img {width: 100%}
  #area_price .bee_type .price .price_text {font-size: 3.5vw;}
  #area_price .bee_type .price .price_text .fee {font-size: 7vw}
}





/*======================================================================================
選べるお支払方法
======================================================================================*/
#area_payment {
  background: var(--bg_line_green);
  padding: 0 0 10px;
}
#area_payment .inner {
  background: var(--white);
  padding: 10px;
  margin: 0 10px;
}
#area_payment h2 {
  background: initial;
  margin-bottom:0;
}
#area_price + #area_payment h2 {
  margin-top:1rem;
}
#area_payment p {margin-top: 0;}
#area_payment ul {margin: 0 0 10px;padding: 0}
#area_payment .payment_list li {
  list-style: none;
  border: solid 2px var(--blue_2);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#area_payment .payment_list li .text {
  background: var(--blue_2);
  color: var(--white);
  font-weight: bold;
  line-height: 2;
  text-align: center;
  width: 100%;
}
#area_payment .payment_list li .img {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
#area_payment .payment_list li .img.cash img {max-width: 70%}
@media print, screen and (min-width: 660px) {/*PC*/
  #area_payment p {text-align: center}
  #area_payment .payment_list {
    display: flex;
    justify-content: space-between;
  }
  #area_payment .payment_list li {width: calc((100% - 20px) / 3);}
  #area_payment .payment_list li .img.credit img {width: calc((100% - 10px) / 3);}
  #area_payment .payment_list li .img.credit img:not(:nth-of-type(3n+1)){margin-left: 5px}
  #area_payment .payment_list li .img.credit img:nth-of-type(n+4){margin-top: 5px;}
  #area_payment .payment_list li .img.qr img {height: 40px;width: auto}
  #area_payment .payment_list li .img.qr img:nth-of-type(2n){margin-left: 5px;}
  #area_payment .payment_list li .img.qr img:nth-of-type(n+3){margin-top: 5px;}
}
@media screen and (max-width: 659px) {/*SP*/
  #area_payment .payment_list li {align-items: center}
  #area_payment .payment_list li:not(:first-of-type){margin-top: 10px}
  #area_payment .payment_list li .img {flex-wrap: nowrap}
  #area_payment .payment_list li .img.cash img {width: 250px}
  #area_payment .payment_list li .img.credit img {width: calc((100% - 20px) / 5);}
  #area_payment .payment_list li .img.credit img:not(:first-of-type){margin-left: 5px}
  #area_payment .payment_list li .img.qr {justify-content: space-around;width: 100%}
  #area_payment .payment_list li .img.qr img {height: 7.5vw;width: auto;}
}




/*======================================================================================
市区町村内のエリア情報
======================================================================================*/
#area_local h2 {background: var(--bg_grad_green);}
#area_local h3 {
  color: var(--green);
  border-bottom: dotted 4px var(--green);
  padding-bottom: 0.5rem;
  margin: 1.5rem 0 0.75rem;
}
#area_local .chyo h3 {margin-top: 0}
#area_local ul {
  margin: 0;padding: 0;
  display: flex;flex-wrap: wrap;
}
#area_local ul li {
  list-style: none;
  line-height: 1.75;
}
#area_local ul li::after {content: "｜"}

#area_local table {width: 100%;}
#area_local table th {font-weight: normal}
#area_local table td p {margin: 0;line-height: 1.5}

@media print, screen and (min-width: 660px) {/*PC*/
}
@media screen and (max-width: 659px) {/*SP*/
  #area_local table,#area_local table tbody,#area_local table tr,#area_local table th,#area_local table td {display: block}
  #area_local table th {border-bottom: none}
  #area_local table tr {margin-bottom: 5px;}
}




/*======================================================================================
同じ都道府県内のエリア
======================================================================================*/
#area_kinrin {
  border: solid 2px var(--blue_gray);
  margin-top: 2rem;
}
#area_kinrin h2 {
  margin: 0;
  background: var(--blue_gray);
}
#area_kinrin ul {
  margin: 10px;padding: 0;
  display: flex;flex-wrap: wrap;
}
#area_kinrin ul li {
  list-style: none;
  line-height: 1.75;
  font-size: 0.9rem;
}
#area_kinrin ul li::after {content: "｜"}
#area_kinrin p {margin-bottom: 10px;text-align: center}



/*============================================================
【都道府県】市区町村一覧
============================================================*/
#area_list_shiku h2 {background: var(--bg_grad_green);}
#area_list_shiku p.note {text-align: center;margin: 0.5rem;}
#area_list_shiku .shiku_list li {
  display: inline-block;
}
#area_list_shiku .shiku_list li::after{
  content: "/";
  display: inline-block;
  padding: 0 0.25rem;
}
#area_list_shiku .shiku_list li > * {
  display: inline-block;
  line-height: 2;
  padding: 0 0.25rem;
  border-radius: 5px;
}
#area_list_shiku .shiku_list li a:hover {
  background: var(--blue_1);
  color: var(--white);
}

#area_list_shiku #same_region {
  border: solid 1px  var(--blue_gray);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 1rem;
}
#area_list_shiku #same_region h3{
  background: var(--blue_gray);
  color: var(--white);
  text-align: center;
  padding: 0.5rem;
}
#area_list_shiku #same_region ul {text-align: center}
#area_list_shiku #same_region ul li {display: inline}
#area_list_shiku #same_region ul li:not(:last-of-type)::after {content: "｜"}



@media print, screen and (min-width: 660px) {/*PC*/
  #area_list_shiku .shiku {
    display: flex;justify-content: space-between;
    border-bottom: solid 1px var(--blue_1);
  }
  #area_list_shiku p.note + .shiku {
    border-top: solid 1px var(--blue_1);
  }
  #area_list_shiku .shiku p {
    width: 6em;
    background:  var(--bg_blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
  }
  #area_list_shiku .shiku .shiku_list {
    width: calc(100% - 7em);
    padding: 0.5em 0;
    margin: 0;
  }
}
@media screen and (max-width: 659px) {/*SP*/
  #area_list_shiku p.note {margin-bottom: 0.5rem}
  #area_list_shiku .shiku p {
    border-bottom: solid 1px var(--blue_1);
    border-left: solid 5px var(--blue_1);
    background:  var(--bg_blue);
    margin: 0;
    padding-left: 0.5em;
  }
  #area_list_shiku .shiku .shiku_list {
    padding: 0;
    margin: 0.5rem 0 1rem;
  }
}





/*======================================================================================
補助金等について
======================================================================================*/
#area_hojyo {
  border:solid 2px var(--blue_2);
  border-radius: 10px;
  overflow: hidden;
  margin: 2rem 0 0;
  padding:0 1rem 1rem;
}
#area_hojyo h2 {
  background: var(--bg_line_blue);
  margin: 0 -1rem;
}
#area_hojyo h3 {
  color: var(--blue_1);
  font-size: 1rem;
  text-align: center;
}
#area_hojyo th {
  white-space: nowrap;
  font-weight: normal;
}
@media print, screen and (min-width: 660px) {/*PC*/
}
@media screen and (max-width: 659px) {/*SP*/
}