@charset"UTF-8";

/*アコーディオン全体  スタイル */
h2.ac1 { color:#3cb371; text-align: left; padding-left:20px; font-size:30px; border: 1px solid #3cb371; border-radius: 10px 10px 0px 0px; }
h2.ac2 { color:#ff6347; text-align: left; padding-left:20px; font-size:30px; border: 1px solid #ff6347; border-radius: 10px 10px 0px 0px; }
h2.ac3 { color:#9370db; text-align: left; padding-left:20px; font-size:30px; border: 1px solid #9370db; border-radius: 10px 10px 0px 0px; }
h2.ac4 { color:#6495ed; text-align: left; padding-left:20px; font-size:30px; border: 1px solid #6495ed; border-radius: 10px 10px 0px 0px; }
h2.ac5 { color:#ee82ee; text-align: left; padding-left:20px; font-size:30px; border: 1px solid #ee82ee; border-radius: 10px 10px 0px 0px; }
h2.ac6 { color:#20b2aa; text-align: left; padding-left:20px; font-size:30px; border: 1px solid #20b2aa; border-radius: 10px 10px 0px 0px; }
/*アコーディオン全体*/
.menu {
  width: 100%;
  padding: 10px 10px 20px;
}
.menu input {
  display: none; /*チェックボックスを隠す*/
}
/*バー部分*/
.menu label {
  cursor :pointer;
  display: block;
  text-decoration: none;
  color: #000;
  line-height: 1;
  position: relative;
  margin: 0 0 0px;
  padding: 10px;
  background-color: #fff;
}
/*開いたときに表示される部分*/
.menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  margin-bottom: 1px;

}
.menu li {
  height: 0;
  overflow-y: hidden;
  transition: padding-bottom 0.5s, padding-top 0.5s; /*閉じるときのアニメーション*/
  -webkit-transition: padding-bottom 0.5s, padding-top 0.5s;
  -moz-transition: padding-bottom 0.5s, padding-top 0.5s;
  -ms-transition: padding-bottom 0.5s, padding-top 0.5s;
  -o-transition: padding-bottom 0.5s, padding-top 0.5s;
}
#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li,
#menu_bar03:checked ~ #links03 li,
#menu_bar04:checked ~ #links04 li,
#menu_bar05:checked ~ #links05 li,
#menu_bar06:checked ~ #links06 li {
  height: auto; /*開いたときに表示されるliの高さ*/
  opacity: 1;
  margin: auto;
  text-align: center;
  width: 98%;
  border-bottom: 1px dotted #cccccc;
  padding: 10px;
}
 /*開いたときの下の余白*/
#menu_bar01:checked ~ #links01 li:last-child,
#menu_bar02:checked ~ #links02 li:last-child,
#menu_bar03:checked ~ #links03 li:last-child,
#menu_bar04:checked ~ #links04 li:last-child,
#menu_bar05:checked ~ #links05 li:last-child,
#menu_bar06:checked ~ #links06 li:last-child {
  margin-bottom: 20px;
}
/*閉じた状態の矢印描画*/
.menu label:after{
  content:"";
  display:block;
  width:8px;
  height:8px;
  border-top: #000 2px solid;
  border-right: #000 2px solid;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  position:absolute;
  right: 2%;
  top: 0;
  bottom: 15%;
  margin: auto;
}
/*開いた状態の矢印描画*/
.menu input[type=checkbox]:checked + label:after{
  content:"";
  display:block;
  width:8px;
  height:8px;
  border-top: #000 2px solid;
  border-right: #000 2px solid;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position:absolute;
  right: 2%;
  top: 7%;
  bottom: 0;
  margin: auto;
}
/*ーーーーーーーーーータブレット CSSーーーーーーーーーーー*/
@media (max-width: 1024px) {
    h2.ac1 { color:#3cb371; text-align: left; padding-left:20px; font-size:28px; padding:8px 10px 8px 10px }
    h2.ac2 { color:#ff6347; text-align: left; padding-left:20px; font-size:28px; padding:8px 10px 8px 10px }
    h2.ac3 { color:#9370db; text-align: left; padding-left:20px; font-size:28px; padding:8px 10px 8px 10px }
    h2.ac4 { color:#6495ed; text-align: left; padding-left:20px; font-size:28px; padding:8px 10px 8px 10px }
    h2.ac5 { color:#ee82ee; text-align: left; padding-left:20px; font-size:28px; padding:8px 10px 8px 10px }
    h2.ac6 { color:#20b2aa; text-align: left; padding-left:20px; font-size:28px; padding:8px 10px 8px 10px }
    .menu {
        width: 94%;
        margin:auto;
        text-align: center;
      }
      .menu label:after{
        right: 6%;
      }
      .menu input[type=checkbox]:checked + label:after{
        right: 6%;
      }
}


/*ーーーーーーーーーースマートフォン CSSーーーーーーーーーーー*/
@media (max-width: 599px) {
    h2.ac1 { color:#3cb371; text-align: left; padding-left:20px; font-size:20px; padding:8px 10px 8px 10px }
    h2.ac2 { color:#ff6347; text-align: left; padding-left:20px; font-size:20px; padding:8px 10px 8px 10px }
    h2.ac3 { color:#9370db; text-align: left; padding-left:20px; font-size:20px; padding:8px 10px 8px 10px }
    h2.ac4 { color:#6495ed; text-align: left; padding-left:20px; font-size:20px; padding:8px 10px 8px 10px }
    h2.ac5 { color:#ee82ee; text-align: left; padding-left:20px; font-size:20px; padding:8px 10px 8px 10px }
    h2.ac6 { color:#20b2aa; text-align: left; padding-left:20px; font-size:20px; padding:8px 10px 8px 10px }
    .menu {
        width: 90%;
        margin:auto;
        text-align: center;

      }
      .menu label:after{
        right: 6%;
      }
      .menu input[type=checkbox]:checked + label:after{
        right: 6%;
      }
}

/*ーーーーーーーーーー　ピース薬局　Q＆A　アコーディオン　CSS　ーーーーーーーーーーー*/
.qa-006 {
  max-width: 800px;
  margin:auto;
  text-align: center;
  margin-bottom: 5px;
  border-bottom: 2px solid #ffffff;
}

.qa-006 summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1em 2em 1em 3em;
  color: #333333;
  font-weight: 600;
  cursor: pointer;
  font-size: 24px;
  border-bottom: 1px dotted #cccccc;
}

.qa-006 summary::before,
.qa-006 p::before {
  position: absolute;
  left: 1em;
  font-weight: 600;
  font-size: 24px;
}

.qa-006 summary::before {
  color: #75bbff;
  content: "Q";
}

.qa-006 summary::after {
  transform: translateY(-25%) rotate(45deg);
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-bottom: 3px solid #333333b3;
  border-right: 3px solid #333333b3;
  content: '';
  transition: transform .5s;
}

.qa-006[open] summary::after {
  transform: rotate(225deg);
}

.qa-006 p {
  position: relative;
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: .3em 4.5em 1.5em;
  color: #333;
  transition: transform .5s, opacity .5s;
  font-size:18px;
  text-align: left;
  padding-top:18px;
}

.qa-006[open] p {
  transform: none;
  opacity: 1;
}

.qa-006 p::before {
  color: #ff8d8d;
  line-height: 1.2;
  content: "A";
}

/*ーーーーーーーーーー ピース薬局　Q＆A　アコーディオン スマートフォン CSSーーーーーーーーーーー*/
@media (max-width: 599px) {
  .qa-006 {
    max-width: 100%;
    margin:auto;
    text-align: left;
    margin-bottom: 5px;
    border-bottom: 2px solid #ffffff;
  }  
  .qa-006 summary {
    padding: 1em 2em 1em 3em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
    font-size: 18px;
  }
  .qa-006 p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 3.5em 1.5em;
    color: #333;
    transition: transform .5s, opacity .5s;
    font-size:16px;
    text-align: left;
    padding-top:18px;
  }
  
}


/*ーーーーーーーーーー 求人タブ [営業] CSSーーーーーーーーーーー*/
.tab-001 {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
}

.tab-001 > label {
  flex: 1 1;
  order: -1;
  min-width: 70px;
  padding: .7em 1em .5em;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 0;
  background-color: #e9f0f6;
  color: #535353;
  font-size: 22px;
  text-align: center;
  cursor: pointer;
  color: #2589d0;
  font-weight: 700;
}

.tab-001 > label:hover {
  opacity: .8;
}

.tab-001 input {
  display: none;
}

.tab-001 > div {
  display: none;
  width: 100%;
  padding: 1.5em 1em;
  background-color: #fff;
  text-align: left;
}

.tab-001 label:has(:checked) {
  background-color: #fff;
  border-color: #2589d0 #f0f0f0 #fff;
  border-style: solid;
  border-width: 4px 1px 1px;
  border-radius: 5px;
  color: #333333;
}

.tab-001 label:has(:checked) + div {
  display: block;
}
/*ーーーーーーーーーー 求人タブ [レンタル] CSSーーーーーーーーーーー*/
.rental_tab1 {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
}

.rental_tab1 > label {
  flex: 1 1;
  order: -1;
  min-width: 70px;
  padding: .7em 1em .5em;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 0;
  background-color: #e9f0f6;
  color: #535353;
  font-size: 22px;
  text-align: center;
  cursor: pointer;
  color: #3cb371;
  font-weight: 700;
}

.rental_tab1 > label:hover {
  opacity: .8;
}

.rental_tab1 input {
  display: none;
}

.rental_tab1 > div {
  display: none;
  width: 100%;
  padding: 1.5em 1em;
  background-color: #fff;
  text-align: left;
  border-left: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
}

.rental_tab1 label:has(:checked) {
  background-color: #fff;
  border-color: #3cb371 #f0f0f0 #f5f5f5;
  border-style: solid;
  border-width: 4px 1px 1px;
  border-radius: 5px;
  color: #333333;
}

.rental_tab1 label:has(:checked) + div {
  display: block;
}


.tab-001 dl { width:1000px; border-bottom:1px dotted #cccccc; }
.tab-001 ul { border-bottom: 1px solid #cccccc; margin-top: 12px; }
.tab-001 ul.time { margin-top: 12px; border-bottom: 0px solid #cccccc;  }
.tab-001 li.title { float:left;  width:200px; font-size:18px; padding-left:8px; padding-bottom:8px; font-weight: 700;}
.tab-001 li.detail { font-size:18px; padding-bottom:8px; }
.tab-001 li.timeblue { font-size:20px; padding-left:8px; padding-bottom:2px; font-weight: 700; border-bottom: 1px dotted #2589d0; }
.tab-001 li.timedetail { font-size:16px; padding-bottom:8px; padding-left:14px; }
.rental_tab1 dl { width:1000px; border-bottom:1px dotted #cccccc; }
.rental_tab1 ul { border-bottom: 1px solid #cccccc; margin-top: 12px; }
.rental_tab1 ul.time { margin-top: 12px; border-bottom: 0px solid #cccccc;  }
.rental_tab1 li.title { float:left;  width:200px; font-size:18px; padding-left:8px; padding-bottom:8px; font-weight: 700;}
.rental_tab1 li.detail { font-size:18px; padding-bottom:8px; }
.rental_tab1 li.timeblue { font-size:20px; padding-left:8px; padding-bottom:2px; font-weight: 700; border-bottom: 1px dotted #3cb371; }
.rental_tab1 li.timedetail { font-size:16px; padding-bottom:8px; padding-left:14px; }
.tab_style1 { font-size:20px; text-align:left; padding-left:20px; padding-top:20px; line-height: 150%; }
.tab_style2 { font-size:14px; text-align:left; color: #999999; }
.tab_style3 { font-size: 20px; text-align: left; font-weight: 700; }
.tab_style4 { font-size:16px; text-align: left; }
.tab_posicolor_blue { font-size:20px; background-color: #2589d0; color: #ffffff; padding: 4px 20px 4px 8px; margin: 8px 0px 32px 0px; }
.tab_posicolor_green { font-size:20px; background-color: #3cb371; color: #ffffff; padding: 4px 20px 4px 8px; margin: 8px 0px 32px 0px; }

.tab_style_cation1 { font-size:18px; background-color:#f5f5f5; padding:10px 10px 10px 10px ; margin:20px 10px 10px 10px; text-align: left; border-radius: 5px; }


/*ーーーーーーーーーー 求人タブ CSS タブレットCSS　ーーーーーーーーーーー*/
@media (max-width: 1024px) {
  .tab-001 {
    display: flex;
    flex-wrap: wrap;
    max-width: 900px;
    margin:auto;
    text-align: center;
  }
  .rental_tab1 {
    display: flex;
    flex-wrap: wrap;
    max-width: 900px;
    margin:auto;
    text-align: center;
  }
}

/*ーーーーーーーーーー 求人タブ CSS スマートフォンCSS　ーーーーーーーーーーー*/
@media (max-width: 599px) {
  .tab-001 {
    display: flex;
    flex-wrap: wrap;
    max-width: 440px;
    margin:auto;
    text-align: center;
  }
  .tab-001 > label {
    font-size: 18px;
  }
  .rental_tab1 {
    display: flex;
    flex-wrap: wrap;
    max-width: 440px;
    margin:auto;
    text-align: center;
  }
  .rental_tab1 > label {
    font-size: 18px;
  }
.tab-001 ul { border-bottom: 1px solid #cccccc; }
.tab-001 li.title { float:none;  font-size:16px; font-weight: 700; padding-left:8px; padding-bottom:8px; }
.tab-001 li.detail { font-size:16px; padding-bottom:8px;padding-left:8px; }
.rental_tab1 ul { border-bottom: 1px solid #cccccc; }
.rental_tab1 li.title { float:none;  font-size:16px; font-weight: 700; padding-left:8px; padding-bottom:8px; }
.rental_tab1 li.detail { font-size:16px; padding-bottom:8px;padding-left:8px; }
.tab_style1 { font-size:18px; text-align:left; padding-left:20px; padding-top:20px; line-height: 150%; }
.tab_style_cation1 { font-size:16px; background-color:#f5f5f5; padding:10px 10px 10px 10px ; margin:20px 10px 10px 10px; text-align: left; border-radius: 5px; }

}