@charset "utf-8";
/* CSS Document */
:root {
  --white: #ffffff; /* var(--white); *//*白*/
  --text: #333333; /* var(--text); *//*文字色*/

  --red: #ed1c24; /* var(--red); *//*赤*/
  --shyu: #ef444d; /* var(--shyu); *//*朱色*/
  --green: #22ac38; /* var(--green); *//*緑（やや濃目）*/
  --m_green: #39b54a; /* var(--m_green); *//*緑*/
  --l_green: #7ac943; /* var(--l_green); *//*薄緑*/
  --ly_green: #bedc3c; /* var(--l_green); *//*薄黄緑*/
  --blue_1: #0071bc; /* var(--blue_1); *//*青（やや濃目）*/
  --blue_2: #29abe2; /* var(--blue_2); *//*青（やや薄目）*/
  --blue_3: #5486d6; /* var(--blue_3); *//*青（くすみ系）*/
  --gray: #aaaaaa; /* var(--gray); *//*灰*/
  --d_gray: #4d4d4d; /* var(--d_gray); *//*背景_濃灰*/
  --blue_gray: #6e88ba; /* var(--blue_gray); *//*背景_青灰*/
  --brown: #87470e; /* var(--brown); *//*茶色*/
  --orange: #f15a24; /* var(--orange); *//*オレンジ*/

  --yellow: #ffff00; /* var(--yellow); *//*黄色*/
  --l_yellow: #ffff66; /* var(--l_yellow); *//*薄黄色*/
  
  --bg_gray: #eeeeee; /* var(--bg_gray); *//*背景_灰*/
  --bg_yellow: #ffffd9; /* var(--bg_yellow); *//*背景_黄*/
  --bg_pink: #fff0f0; /* var(--bg_pink); *//*背景_ピンク*/
  --bg_blue: #e1faff; /* var(--bg_blue);*/
  --bg_green: #f4fbf5; /* var(--bg_green);*/
  
  --bg_grad_orange: linear-gradient(#f15a24 0%, #f15a24 49%, #e62424 50%, #e62424 100%); /* var(--bg_grad_orange); */
  --bg_grad_green: linear-gradient(#7ac943 0%, #7ac943 49%, #39b54a 50%, #39b54a 100%); /* var(--bg_grad_green); */
}
html {
  scroll-behavior: smooth;
}
body {
font-family:
  "Helvetica",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

.t_red {color:var(--shyu); }
.t_blue {color:var(--blue_1); }
.t_green {color:var(--green); }

@media print, screen and (min-width: 660px) {/*PC*/
  .SP {display: none}
}
@media screen and (max-width: 659px) {/*SP*/
  .PC {display: none}
}
@media screen and (max-width: 539px) {/*SP*/
  /*body {font-size: 3.3vw;}*/
}

/*============================================================
プラグイン　調整
============================================================*/
.addtoany_content {text-align: center}

#toc_container {margin: 2rem auto}


/*============================================================
基本設定
============================================================*/
h2 {
  background:var(--bg_grad_orange);
  color: #fff;
  padding: 0.5em;
  text-align: center;
  font-weight: bold;
  font-size: 1.3rem;
  margin:2rem 0 1rem;
}
#main > *:first-of-type h2:first-child,
#main > h2:first-child {margin-top: 0}
p {
  line-height: 1.75;
  margin: 1rem 0;
}
header p,footer p,#sidebar p {
  line-height: initial;
  margin: initial;
}
a.plain {text-decoration: none; color:var(--text); }
.t_center {text-align: center;}


.mt0 {margin-top: 0 !important}
.mb0 {margin-bottom: 0 !important}

.fl_l {float: left;max-width: 50%;margin: 0 1rem 0 0}
.fl_r {float: right;max-width: 50%;margin: 0 0 0 1rem}

p.note,ul.note {margin: 0.5rem 0 1rem;padding: 0}
p.note,ul.note li {
  text-indent: -1.2em;
  margin-left: 1.2em;
  font-size: 0.85rem;
  color: var(--d_gray);
  list-style: none;
}
p.note::before,ul.note li::before {content: "※";margin-right: 0.2em}

@media print, screen and (min-width: 660px) {/*PC*/
  #wrapper {
    width: 960px;margin: 20px auto;
    display: flex;justify-content: space-between;  
  }
  #main {width: 750px;}
  #sidebar {width: 190px;}
  
  
}
@media screen and (max-width: 659px) {/*SP*/
  #wrapper {
    margin: 20px 0;
    padding: 0 10px;
  }
  #main h2 {
    margin:2rem 0 1rem;
    font-size: 1.15rem;
}
}

.deco1 {
  background:var(--bg_grad_orange);
  color: #fff;
  padding: 0.5em;
  text-align: center;
  font-weight: bold;
  font-size: 1.3rem;
  margin:2rem 0 1rem;
}
.deco2 {
  border-bottom: solid 2px var(--orange);
  border-left: solid 10px var(--orange);
  color: var(--orange);
  font-weight: bold;
  font-size: 1.3rem;
  padding: 0 0 0 0.5rem;
  margin: 1.5rem 0 0.5rem;
}
@media print, screen and (min-width: 660px) {/*PC*/
}
@media screen and (max-width: 659px) {/*SP*/
  .deco1 {
    margin:2rem 0 1rem;
    font-size: 1.15rem;
  }
}



/* リンクボタン
********************************/
.link_page a {
  display: block;
  text-align: center;
  border: solid 2px var(--green);
  background: var(--green);
  color: var(--white);
  line-height: 2.5;
  max-width: 500px;
  padding: 0 1em;
  margin: 0 auto;
}
.link_page a::before {
  content: "\f105";
  display: inline-block;
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  /*
  display: inline-block;
  padding-right: 3px;*/
  position: absolute;
  left: 0.5em;
}
.link_page a:hover {
  content: "\f101";
  background: var(--white);
  color: var(--green);
}

/* ボタンリンク
********************************/
.button a {
  display: block;
  text-align: center;
  border: solid 2px var(--orange);
  background: var(--orange);
  color: var(--white);
  line-height: 2.5;
  border-radius: 2em;
  max-width: 500px;
  padding: 0 1em;
  margin: 0 auto;
}
.button a:hover {
  background: var(--white);
  color: var(--orange);
}
.button a::after {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  position: absolute;
  right: 0.75em;
}



/* 表組
********************************/
table {width: 100%}
caption {
  color: var(--blue_1);
  font-weight: bold;
}
th,td {
  border: solid 1px var(--gray);
  padding: 0.5rem;
}
th {background: var(--bg_blue);}

/* リスト
********************************/
.ul {
  margin: 1rem 0;
  padding-left: 2em;
}
.ul li {
  list-style: disc outside;
}
.check {padding-left: 2.3em }
.check li {
  text-indent: -1.5em;
  list-style: none !important;
}
.check li::before{
  content: "✔";
  color: var(--blue_1);
  margin-right: 0.5em;
}
.check.blue li::before{
  color: var(--blue_1);
}
.check.orange li::before{
  color: var(--orange);
}
.check.gray li::before{
  color: var(--text);
}
.check.green li::before{
  color: var(--green);
}

/*============================================================
 背景色付きBOX
============================================================*/
.box {
  border: solid 1px var(--gray);
  border-radius: 10px;
  overflow: hidden;
  padding: 1rem 10px;
  margin: 1rem 0;
}
dl.box {padding-top: 0.5rem}
dl.box dd > *:last-child,
.box > *:last-child {margin-bottom: 0 !important}
.box > *:first-of-type {margin-top: 0}
.box.gray {
  background: var(--bg_gray);
}
.box.red {
  border-color: var(--red);
  background: var(--bg_pink);
}
.box.blue {
  border-color: var(--blue_2);
  background: var(--bg_blue);
}
.box.orange {
  border-color: var(--orange);
  background: var(--bg_yellow);
}
.box.green {
  border-color: var(--green);
  background: var(--bg_green);
}
ul.box.check {padding-left: 2.5em}


.box p {margin-bottom: 0.5rem}
.box .box_title {
  border: none;
  border-radius:0;
  margin: -1rem -10px 1rem !important;
  background: var(--d_gray);
  color: var(--white);
  font-weight: bold;
  text-align: center;
  padding: 0.5rem;
  line-height: 1.3;
}
.box.red .box_title {background: var(--red);}
.box.blue .box_title {background: var(--blue_1);}
.box.orange .box_title {background: var(--orange);}
.box.green .box_title {background: var(--green);}

.box .title_border {
  font-weight: bold;
  font-size: 1.15rem;
  border-bottom: dotted 2px var(--d_gray);
  margin-bottom: 0.5rem;
}
.box.red .title_border {color: var(--red); border-color: var(--red);}
.box.blue .title_border {color: var(--blue_1); border-color: var(--blue_1);}
.box.orange .title_border {color: var(--orange); border-color: var(--orange);}
.box.green .title_border {color: var(--green); border-color: var(--green);}


@media screen and (min-width: 650px),print {/*PC*/
  .box .box_title {
    font-size: 1.2rem !important;
  }
}
@media only screen and (max-width: 649px) {/*SP*/
  .box .box_title {
    font-size: 1.1rem !important;
  }
}



/*============================================================
flex
============================================================*/

.flex_list {
  display: flex;
  flex-wrap: wrap;
  margin: 1rem 0;
  padding: 0;
}
.flex_list > li {list-style: none}
.flex_column {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.fg1 {flex-grow: 1}
.flex_list.col2 > * {
    width: calc((100% - 10px) / 2);
}
@media print, screen and (min-width: 660px) {/*PC*/
  .flex_list.col3_col1 > * {
    width: calc((100% - 20px) / 3);
    margin-right: 10px;
  }
  .flex_list.col3_col1 > *:nth-of-type(3n) {margin-right: 0}
}
@media screen and (max-width: 659px) {/*SP*/
  .flex_list.col3_col1 > * {
    width: 100%;
    margin-bottom: 10px;
  }
  .flex_list.col3_col1 > *:last-of-type {margin-bottom: 0}
}








/*============================================================
ヘッダー
============================================================*/

#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  line-height: 1;
}
#header .header_l {
  display: flex;
  align-items: center;
}
#header .logo {max-width: 200px;}
#header .box_text {
  background: var(--yellow);
  color: var(--green);
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70px;width: 70px;
  margin-left: 10px;
  border-radius: 8px;
  font-size: 20px;
  line-height: 22px;
  letter-spacing: 2px;
  padding-left: 2px;
}
#main_img {z-index: 1;}
@media print, screen and (min-width: 660px) {/*PC*/
  #header {
    width: 960px;
    margin: 0 auto;
  }
  #header .tell_text {
    color: var(--d_gray);
    text-align: center;
    font-size: 14px;
  }
  #header .tell.PC {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    font-weight: bold;
  }
  #header .tell.PC .free {
    background: var(--red);
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    line-height: 1;
    padding: 8px;
    margin-right: 5px;
  }
  #header .tell.PC .number {
    color: var(--red);
    font-size: 45px;
    line-height: 1;
  }
}
@media screen and (max-width: 659px) {/*SP*/
  #header {padding-right: 85px;}
  #header .box_text {display: none}
  #header .tell_text {display: none}
  /***$ua スマホ以外***/
  #header .tell.PC {display: none}
  .tell.SP {
    background: var(--red);
    color: var(--white);
    font-weight: bold;
    font-size: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 70px;
    padding: 0 15px;
    border-radius: 8px;
  }
  .tell.SP img {margin-right: 5px}
  .tell.SP span:nth-of-type(2) {
    font-size: 28px;
    margin-top: 5px;
  }
  /***$ua スマホ***/
  .tell.sp a {
    background: var(--red);
    color: var(--white);
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 70px;width: 70px;
    border-radius: 8px;
    font-size: 12px;
    text-decoration: none;
  }
  .tell.sp a img {margin-bottom: 5px}
}


@media screen and (max-width: 469px) {/*SP*/
  #header {padding-right: 80px;}
  /***$ua スマホ以外***/
  .tell.SP {
    font-size: 18px;
    padding: 0 5px;
  }
  .tell.SP img {width: 20px;}
  .tell.SP span:nth-of-type(2) {
    font-size: 22px;
    margin-top: 8px;
  }
}




/*============================================================
ナビゲーション
============================================================*/
#g-nav ul {padding: 0;}
#g-nav ul li {
  list-style: none;
  text-align: center;
  margin: 0;
}
@media print, screen and (min-width: 660px) {/*PC*/
  #g-nav #nav-btn {display: none}
  #g-nav {
    background:var(--bg_grad_orange);
  }
  #g-nav ul {
    width: 960px;
    margin: 0 auto;
    display: flex;
  }
  #g-nav ul ul {display: none}
  #g-nav ul li {
    flex-grow: 1;
  }
  #g-nav ul li a {
    display: block;
    line-height: 3;
    color: var(--white);
    text-decoration: none;
  }
  #g-nav ul li a:hover {
    background: rgba(255,255,255,0.3);
    background: linear-gradient(var(--l_yellow) 0%, var(--l_yellow) 49%, var(--yellow) 50%, var(--yellow) 100%); 
    text-decoration: underline;
    font-weight: bold;
    color: var(--orange);
  }
}
@media screen and (max-width: 659px) {/*SP*/
  #g-nav #nav-btn {
    position: fixed;top: 5px;right: 5px;
    border: solid 2px var(--blue_2);
    background: var(--blue_2);
    color: var(--white);
    font-weight: bold;
    line-height: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 70px;width: 70px;
    border-radius: 8px;
    z-index: 999;
  }
  #g-nav #nav-btn:hover {
    background: var(--white);
    color: var(--blue_2);
  }
  #g-nav #nav-btn .nav-icon {font-size: 30px;margin-bottom: 3px;}
  #g-nav #nav-btn .text {font-size: 12px}
  #g-nav #nav-btn .nav-icon::before {content: "☰";}
  #g-nav #nav-btn.open .nav-icon::before {content: "×";}
  #g-nav .nav {
    display: none;
    position: fixed;top: 80px;left: 0; right: 0px;
    background: var(--white);
    color: var(--blue_2);
    border-top: solid 1px var(--white);
    border-bottom: solid 2px var(--white);
    z-index: 999;
  }
  #g-nav .nav ul {
    margin: 0;
    background: var(--blue_2);
  }
  #g-nav .nav ul a {
    display: block;
    color: var(--white);
    text-decoration: none;
    padding: 0.75em;
  }
  #g-nav .nav ul a::before {
    content: "\f105";
    display: inline-block;
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    margin-right: 0.25em;
    position: absolute;
    left: 0.5em;
    top: calc(50% - 0.5em)
  }  
  #g-nav .nav > ul > li {
    border-top: solid 1px var(--white);
  }
  #g-nav .nav > ul ul {
    display: flex;
    flex-wrap: wrap;
  }
  #g-nav .nav > ul ul li {
    width: 50%;
  }
  #g-nav .nav > ul ul li:not(:last-of-type) {
    border-top: dashed 1px var(--white);
    border-bottom: dashed 1px var(--white);
  }
  #g-nav .nav > ul ul li:nth-of-type(2n+1){
    border-right: dashed 1px var(--white);
  }
}



/*============================================================
サイドバー
============================================================*/
#sidebar a {
  display: block;
  text-decoration: none;
}
#sidebar a:hover {
  background-color: #fff100;
}
#sidebar a:hover img {opacity: 0.5}

#sidebar .side_title {
  margin-top: 1em;
  display: block;
  font-size: 1.2em;
  line-height: 2.5;
  background: var(--bg_grad_green);
  color: var(--white);
  text-align: center;
}
#sidebar section:first-of-type .side_title {margin: 0}

#sidebar .side_banner {margin: 1rem 0}
#sidebar .side_banner a {
  display: block;
  margin: 10px 0;
}


#sidebar .side_colum li {
    border: solid 1px var(--gray);
  margin-top: 8px;
}
#sidebar .side_colum li a {
  display: block;
  padding: 5px;
}
#sidebar .side_colum li a:hover {
  background-color:var(--l_yellow);
  text-decoration: underline;
}
#sidebar .side_colum li a p {
  font-size: 0.85rem;
  line-height: 1.35;
  padding: 5px 5px 0;
}

@media print, screen and (min-width: 660px) {/*PC*/}
@media screen and (max-width: 659px) {/*SP*/
  #sidebar {display: none}
  #sidebar .side_service ul {
    display: flex;
  }
  #sidebar .side_service ul li {width: calc(100% / 3)}
  #sidebar .side_service ul li img {width:100%}
}


/*============================================================
フッター
============================================================*/
footer {
  background: var(--d_gray);
  color:var(--white);
  padding-top: 2rem;
  margin-top: 2rem;
}
footer a {
  color:var(--white);
  text-decoration: none;
}
#footer #footer_nav li {margin-top: 0.5rem;}
#footer #footer_nav li a {
  border-bottom: solid 1px var(--white);
}
#footer #footer_nav li a::before {
  content: "\f105";
  display: inline-block;
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  margin-right: 0.25em;
}
#footer #footer_nav li a:hover::before {
  content: "\f101";
}


@media print, screen and (min-width: 660px) {/*PC*/
  #footer {
    width: 960px;
    margin: 0 auto 2rem;
    display: flex;
  }
  #footer .logo {width: 25%}
  #footer .logo:hover {opacity: 0.5;}
  #footer #footer_nav {
    width: 75%;
    display: flex;
    padding-left: 50px;
  }
  #footer #footer_nav > ul {width: 33%}
  #footer #footer_nav > ul ul {padding-left: 1em}
  
#footer #footer_nav li a:hover {
  color:var(--yellow);
  border-bottom: double 3px var(--yellow);
}

}
@media screen and (max-width: 659px) {/*SP*/
  footer {
    text-align: center;
    padding: 1rem 0 0;
  }
  #footer #footer_nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: left;
    margin: 1rem 0;
  }
  #footer #footer_nav > ul {
    margin: 0.5em;
    min-width: 8.5em;
  }
}
@media screen and (max-width: 499px) {/*SP*/
  #footer #footer_nav {
    display: block;
    border-top: solid 1px var(--white);
    background:#666666;
  }
  #footer #footer_nav > ul {margin: 0}
  #footer #footer_nav li {
    border-bottom: solid 1px var(--white);
    margin: 0;
  }
  #footer #footer_nav li a {
    border: none;
    display: block;
    padding: 0.5em;
    text-align: center;
  }
  #footer #footer_nav li a::before {
    position: absolute;
    left: 0.5em;
    top: calc(50% - 0.5em)
  }
  #footer #footer_nav ul ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-top: dotted 1px var(--white);
  }
  #footer #footer_nav ul ul li {
    width: 50%;
    border-bottom: dotted 1px var(--white);
  }
  #footer #footer_nav ul ul li:nth-of-type(n+3) {border-bottom:none}
  #footer #footer_nav ul ul li:nth-of-type(2n+1) {border-right: dotted 1px var(--white);}
}

#copyright {
  display: block;
  text-align: center;
  padding: 0.5rem;
}



/*============================================================
メイン画像（直下の電話リンク／補足説明／含む）
============================================================*/
#h1 {
  background-color: var(--green);
  color: var(--white);
  text-align: center;
  font-weight: normal;
  font-size: 12px;
  padding: 5px 0;
  margin: 0;
}

#main_tel {
  background: var(--yellow);
  color: var(--green);
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
}
#main_tel p {margin: 0}
#main_tel .main_tel_text {
  color: var(--text);
  line-height: 1.5;
  font-size: 16px;
  font-weight: bold;
}
#main_tel .main_tel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  line-height: 1;
}
#main_tel .main_tel .free {
  background: var(--green);
  color: var(--yellow);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#main_tel .credit {
  font-size: 12px;
  text-align: center;
  border: solid 1px var(--green);
  border-radius: 8px;
  padding: 5px;
}
#main_tel .credit .card {
  display: flex;
  justify-content: space-around;
  margin-top: 3px;
}
#main_tel .credit .card img {max-width: 18%;}

#main_img_sub {
  background: var(--bg_gray);
  padding: 5px;
  margin: 0;
  font-size: 0;
}
#main_img_sub li {
  display: inline;
  list-style: none;
  color: var(--d_gray);
  font-size: 10px;
  line-height: 1.5;
  margin: 0;
}
#main_img_sub li::before {content: "※"}

@media print, screen and (min-width: 660px) {/*PC*/
  #main_img ,#main_tel ,#main_img_sub {
    width: 960px;
    margin: 0 auto;
  }
  #main_img,#main_img_sub {display: block;}
  #main_tel { padding: 10px 15px;  }
  #main_tel .main_tel .free {
    height: 50px;
    padding: 0 8px 0 10px;
    letter-spacing: 2px;
    font-size: 16px;
    line-height: 18px;
    margin-right: 5px;
  }
  #main_tel .main_tel .number {
    font-size: 50px;
  }
  #main_tel .credit {width: 280px}
  
  #main_img_sub {
    text-align: center;
  }
}
@media screen and (max-width: 659px) {/*SP*/
  #h1 {padding: 5px;}
  #main_tel {
    flex-direction: column;
    padding: 10px;
  }
  #main_tel .main_tel_text br {display: none}
  #main_tel .main_tel .free  br {display: none}
  #main_tel .main_tel .free {
    font-size: 26px;
    height: 40px;
    padding: 0 5px;
    margin-right: 5px;
  }
  #main_tel .main_tel .number {font-size: 40px;}
  
  #main_tel .credit {display: none}
}
@media screen and (max-width: 539px) {/*SP*/
  #main_tel .main_tel_text {font-size: 3vw;}
  #main_tel .main_tel {margin-top: 1.5vw}
  #main_tel .main_tel .free {
    font-size: 5vw;
    height: 8vw;
    padding: 0 1.5vw;
    margin-right: 1.5vw;
  }
  #main_tel .main_tel .number {font-size: 8vw;}
  #main_img_sub li {font-size: 2vw;}
}



/*============================================================
パンくず
============================================================*/
#breadcrumbs {
  font-size: 12px;
  max-width: 960px;
  margin: 10px auto;
}
@media screen and (max-width: 659px) {/*SP*/
  #breadcrumbs {padding: 0 10px}
}


/*============================================================
サービス料金/蜂の種類（一覧のページ）
============================================================*/

a.bee_name {
  display: flex;
  background: var(--yellow);
  text-decoration: none;
}
a.bee_name:hover {opacity: 0.5}
a.bee_name .price_text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: var(--text);
  padding: 0 10px;
  flex-grow: 1
}
a.bee_name .price_text::before {
  content: ""; display: block;
  background: #ffe300;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);  
}

a.bee_name .price_text .price_name {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 18px;
  line-height: 1;
}
a.bee_name .price_text .price {
  font-weight: bold;
  transform: skewX(-10deg);
  color: var(--red);
  margin: 0;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  text-shadow: 0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,
    0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,
    0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,
    0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,
    0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF;
}
a.bee_name .price_text .price .fs_l {
  font-size: 40px;
  margin-right: 3px;
}
a.bee_name .price_text .price .fs_n {
  font-size: 15px;
  margin-bottom: 5px;
}

a.bee_name .price_text .note {
  font-size: 10px;
  margin-top: 10px;
}
@media screen and (max-width: 659px) {/*SP*/
 a.bee_name .img,
  a.bee_name .price_text {width: 50%;}

}
@media screen and (max-width: 549px) {/*SP*/
  a.bee_name .price_text .price_name {font-size: 4vw;}
  a.bee_name .price_text .price .fs_l {font-size: 8vw;}
  a.bee_name .price_text .price .fs_n {font-size: 3.5vw;}
  a.bee_name .price_text .note {
    font-size: 2vw;
    margin-top: 5px;
  }
}






/*============================================================
蜂の種類（各蜂のページ）
============================================================*/
#about_bee {
  border: solid 5px var(--d_gray);
  border-radius: 10px;
  overflow: hidden;
  padding:0 1rem 1rem;
}
#about_bee h2 {
  margin: 0 -1rem 1rem;
  background: var(--d_gray);
}
#about_bee dl dt {
  display: block;
  width: 5em;
  background: var(--yellow);
  font-weight: bold;
  text-align: center;
  line-height: 2;
  margin-bottom: 0.5rem;
}
#about_bee dl dt:not(:first-of-type) {margin-top: 1rem}
#about_bee dl dt::before {
  content: ""; display: block;
  background: #ffe300;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);  
  z-index: 0;
}


@media print, screen and (min-width: 660px) {/*PC*/
  #about_bee {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  #about_bee h2 {width: calc(100% + 2rem)}
  #about_bee .img {width: 380px; order: 3}
  #about_bee dl {width: calc(100% - 400px); order: 2}
}
@media screen and (max-width: 659px) {/*SP*/
  #about_bee dl dt {margin-top: 1rem}
}




#beehive {}
@media print, screen and (min-width: 660px) {/*PC*/
  #beehive .img, #attack .img{
    float: right;
    margin: 0 0 1rem 1rem;
  }
}
@media screen and (max-width: 659px) {/*SP*/
}





#taisyo {margin-bottom: 2rem}
.taisyo {
  display: flex;
  justify-content: space-around;
}
.taisyo .img {
  max-width: 250px;
  background: var(--yellow);
}
.taisyo .img figcaption {line-height: 1.5}
.taisyo.col3 {justify-content: space-between;}
.taisyo.col3 .img {
  width: calc((100% - 10px) / 3);
}



#stung {
  border:solid 5px var(--blue_gray);
  border-radius: 10px;
  overflow: hidden;
  padding: 0 1rem ;
}
#stung .stung_title {
  background: var(--blue_gray);
  color: var(--white);
  text-align: center;
  margin: 0 -1rem 1rem;
}
#stung .img {
  float: right;
  margin: 0 0 1rem 1rem;
}

#stung dt {
  border-bottom: solid 2px var(--blue_gray);
  color: var(--blue_gray);
  font-weight: bold;
  clear: both;
}
#stung dd p:first-of-type {margin-top: 0.5rem}
@media print, screen and (min-width: 660px) {/*PC*/

}
@media screen and (max-width: 659px) {/*SP*/
  .taisyo {justify-content: space-between;}
.taisyo .img {
  width: calc((100% - 5px) / 2);
}
.taisyo.col3 .img {
  width: calc((100% - 10px) / 3);
}
}



/*============================================================
作業の流れ
============================================================*/
ul.flow {padding: 0}
ul.flow li {
  list-style: none;
  margin-bottom: 2rem;
  border-bottom: solid 2px var(--orange);
}
ul.flow li::after {
  content: "";display: block;
  background: var(--orange);
  width: 3rem;height: 1rem;
  position: absolute;
  left: calc(50% - 1.5rem);
  bottom: -1rem;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}

@media print, screen and (min-width: 660px) {/*PC*/
  .flow .step {display: flex; justify-content: space-between;}
  .flow .step .img {width: 270px;margin-bottom: 2rem}
  .flow .step .text {width: calc(100% - 285px);}
  .flow .step p:first-of-type {margin-top: 0}
}
@media screen and (max-width: 659px) {/*SP*/
}






/*============================================================
対応エリア
============================================================*/
.area_list .area_name {
  text-align: center;
  font-weight: bold;
  font-size: 2rem;
  line-height: 1;
  color:  var(--blue_1);
  margin: 2rem 0 1rem;
}
.area_list .tdfk_name {
  display: block;
  background: var(--bg_grad_green);
  color: var(--white);
  text-align: center;
  font-size: 1.5rem;
  padding: 0.5rem;
  margin: 2rem 0 1rem;
}
.area_list p.note {
  color: var(--gray);
  font-size: 0.85rem;
  text-align: center;
  margin: 0;
}
.area_list p.note::before {content: "※"}

.area_list .shiku_list li {
  display: inline-block;
}
.area_list .shiku_list li::after{
  content: "/";
  display: inline-block;
  padding: 0 0.25rem;
}
.area_list .shiku_list li > * {
  display: inline-block;
  line-height: 2;
  padding: 0 0.25rem;
  border-radius: 5px;
}
.area_list .shiku_list li a:hover {
  background: var(--blue_1);
  color: var(--white);
}
@media print, screen and (min-width: 660px) {/*PC*/
  .area_list .shiku {
    display: flex;justify-content: space-between;
    border-bottom: solid 1px var(--blue_1);
  }
  .area_list p.note + .shiku {
    border-top: solid 1px var(--blue_1);
  }
  .area_list .shiku p {
    width: 6em;
    background:  var(--bg_blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
  }
  .area_list .shiku .shiku_list {
    width: calc(100% - 7em);
    padding: 0.5em 0;
    margin: 0;
  }
}
@media screen and (max-width: 659px) {/*SP*/
  .area_list p.note {margin-bottom: 0.5rem}
  .area_list .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_list {
    padding: 0;
    margin: 0.5rem 0 1rem;
  }
}






/*============================================================
蜂のコラム　一覧
============================================================*/
.column_list {
  display: flex;
  flex-wrap: wrap;
}
.column_list article {
  border: solid 1px var(--gray);
  margin-bottom: 10px;
  display: flex;
}
.column_list article a.permalink {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.column_list article > a.permalink:hover {
  background: var(--l_yellow);
}
.column_list article > a.permalink:hover img {opacity: 0.5}

.column_list article .eye_img img {width: 100%;height: 100%; object-fit: cover;}

.column_list article .column_title {
  flex-grow: 1;
  font-weight: normal;
  font-size: 1rem;
  padding: 0.5rem;
}
.column_list article > a.permalink:hover .column_title{text-decoration: underline}
.column_list article .date {
  color:var(--gray);
  font-size: 0.85rem;
}
.column_list article .cat {
  position: absolute;
  bottom: 0;right: 0;
  z-index: 2;
  border: solid 1px var(--gray);
  background: var(--gray);
  color:var(--white);
  font-size: 0.85rem;
  padding: 0 0.5em;
  text-decoration: none;
}
.column_list article .cat.trivia {
  border-color: var(--green);
  background: var(--green);
}
.column_list article .cat.trouble {
  border-color: var(--red);
  background: var(--red);
}
.column_list article .cat.others {
  border-color: var(--blue_2);
  background: var(--blue_2);
}
.column_list article .cat.trivia:hover {
  color:var(--green);
  background: var(--white);
}
.column_list article .cat.trouble:hover {
  color:var(--red);
  background: var(--white);
}
.column_list article .cat.others:hover {
  color:var(--blue_2);
  background: var(--white);
}


@media print, screen and (min-width: 660px) {/*PC*/
  .column_list article {width: calc((100% - 20px) / 3)}
  .column_list article:not(:nth-of-type(3n)) {margin-right: 10px;}
  .column_list article .eye_img {height: 154px;}
}
@media screen and (max-width: 659px) {/*SP*/
  .column_list {justify-content: space-between;}
  .column_list article {width: calc((100% - 10px) / 2)}
  .column_list article .eye_img {min-height: 28vw;}
  .column_list article .eye_img img {height: 100%;}
}

.pagenavi {text-align: center;margin: 2rem 0}



#category_list .list {
  display: flex;
  justify-content: center;
  padding: 0;
}
#category_list .list li{
  display: block;
}
#category_list .list li:not(:last-of-type) {margin-right: 10px;}

#category_list .list li a{
  display: block;
  text-decoration: none;
  border: solid 1px ;
  color: var(--white);
  font-size: 1.3rem;
  line-height: 2;
  padding: 0 0.5em;
  border-radius: 0.5rem;
}
#category_list .list li a.trivia {
  border-color: var(--green);
  background: var(--green);
}
#category_list .list li a.trouble {
  border-color: var(--red);
  background: var(--red);
}
#category_list .list li a.others {
  border-color: var(--blue_2);
  background: var(--blue_2);
}
#category_list .list li a.trivia:hover {
  color:var(--green);
  background: var(--white);
}
#category_list .list li a.trouble:hover {
  color:var(--red);
  background: var(--white);
}
#category_list .list li a.others:hover {
  color:var(--blue_2);
  background: var(--white);
}