@charset "utf-8";
/* CSS Document */
@import url("layout.css");
/* **************************************************************

 * wrapper

*************************************************************** */
#wrapper {
  background-image: url("../img/second_bg.png");
  background-repeat: no-repeat;
  background-position: center 20px;
}
/* **************************************************************

 * main

*************************************************************** */
main {}
/* **************************************************************

 * category

*************************************************************** */
#category {
  width: 100%;
}
#category .inner {
  width: calc(100% - 40px);
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 0 60px 0;
  position: relative;
}
#category .inner::after {
  position: absolute;
  content: '';
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ccc 10%, #ddd 90%, transparent);
}
#category p {
  width: 100%;
  margin: 20px 0;
  font-size: 3.9rem;
  letter-spacing: 0.1em;
  font-family: 'SawarabiMincho JP';
}
/* -------------------- breadcrumb*/
#category .breadcrumb {}
#category .breadcrumb ol {
  list-style: none;
  margin: 25px 0;
  padding: 0;
}
#category .breadcrumb ol li {
  display: inline-block;
  font-size: 1.5rem;
  color: #555;
}
#category .breadcrumb ol li a {
  color: #999;
}
#category .breadcrumb ol li:after {
  content: 'ー';
  padding: 0 5px 0 9px;
}
#category .breadcrumb ol li:last-child:after {
  content: '';
}
/* **************************************************************

 * container

*************************************************************** */
#container {
  width: calc(100% - 40px);
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 0;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
/* -------------------- main*/
#main {
  /*width: calc(100% - 320px);
  max-width: 960px;*/
  margin: 0;
  padding: 0;
  width: 100%;
  /*min-width: 960px;*/
}
#main h1:first-of-type {
  margin: 0 0 40px 0;
}
/* -------------------- h*/
#main h1 {
  margin: 40px 0;
  padding: 0 0 0 50px;
  position: relative;
  font-size: 3.4rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #6B4D4B;
}
#main h1::before {
  position: absolute;
  content: "";
  width: 25px;
  height: 25px;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  border-radius: 50%;
  background: radial-gradient(#FAC7C3 20%, #FF9393 80%);
  filter: drop-shadow(0px 0px 8px rgba(255, 159, 159, .3));
}
#main h2 {
  margin: 40px 0;
  padding: .9em 1em;
  color: #777;
  font-size: 2.8rem;
  background: #F8F5EE;
  border-radius: 7px 7px 0 0;
}
#main h3 {
  margin: 40px 0 20px 0;
  padding: 10px 0 10px 32px;
  position: relative;
  font-size: 2.5rem;
  color: #464F56;
}
#main h3::before {
  position: absolute;
  content: "";
  width: 5px;
  height: 65%;
  left: 0;
  border-radius: 10px;
  border: 5px solid var(--bl);
}
#main h4 {
  margin: 40px 0 20px 0;
  padding: 0.6em 1.2em;
  color: #555;
  font-size: 2.2rem;
  background: #E3EEF7;
  border-radius: 7px;
}
#main h5 {
  margin: 20px 0;
  padding: 0.5em 0;
  font-size: 2.0rem;
  font-weight: 500;
  color: var(--br);
}
#main h6 {
  margin: 20px 0;
  padding: 0.5em 0;
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--bl);
}
/* -------------------- p*/
#main p {
  margin: 20px 0;
}
/* -------------------- a*/
#main a {
  text-decoration: underline;
}
#main a:hover {
  text-decoration: none;
}
/* -------------------- リスト共通*/
#main ul, #main ol {
  margin: 10px 0 0 10px;
  list-style: none;
}
#main ul li, #main ol li {
  position: relative;
  padding-left: 28px;
  margin: 5px 0;
}
#main ul li::before, #main ol li::before {
  content: '';
  display: inline-block;
  position: absolute;
  left: 0;
}
/* -------------------- ul*/
#main ul {}
#main ul li {}
#main ul li::before {
  top: 0.7em;
  width: 11px;
  height: 11px;
  background-color: var(--pi);
  border-radius: 50%;
}
/* -------------------- ol*/
#main ol {
  counter-reset: item;
  padding: 0;
}
#main ol li {
  text-indent: 0;
}
#main ol li::before {
  counter-increment: item;
  content: counter(item)'';
  font-family: 'Cardo';
  top: 0.05em;
  font-size: 130%;
  color: var(--pi);
}
#main ol li:nth-child(n+10)::before {
  left: -10px;
}
/* -------------------- box_1*/
#main .box_1 {
  margin: 20px 0;
  padding: 20px 30px;
  border: 2px solid #F8D0D0;
  border-radius: 10px;
}
#main .box_1 h2 {
  margin: 10px 0;
  padding: 10px 18px;
  background-color: var(--pi);
  color: #fff;
  font-size: 2.2rem;
  border-radius: 5px;
}
#main .box_1 h3 {
  margin: 0;
  padding: 10px 0;
  color: var(--pi);
  font-size: 2.0rem;
  background-color: transparent;
}
#main .box_1 h3::before {
  display: none;
}
/* -------------------- box_2*/
#main .box_2 {
  margin: 20px 0;
  padding: 20px 30px;
  border-radius: 10px;
  background-color: #EFF6FC;
}
/* -------------------- table*/
#main table {
  margin: 30px 0;
  width: auto !important;
}
#main table th, #main table td {
  padding: 15px 20px;
  width: auto !important;
  border: 1px solid #FFACAC;
  background-color: #fff;
  font-size: 95%;
  line-height: 1.8em;
  vertical-align: middle;
}
#main table th p, #main table td p {
  margin: 0;
  padding: 0;
}
#main table th {
  color: #AA6665;
  background-color: #FFF1F1;
  font-weight: 500;
  text-align: center;
}
/* -------------------- table_1 */
#main .table_1 {}
#main .table_1 th, #main .table_1 td {
  background-color: transparent;
  border: none;
}
#main .table_1 th {
  border-bottom: 3px solid var(--bl);
}
#main .table_1 th {
  color: #464F56;
}
#main .table_1 td {
  border-bottom: 1px solid #ccc;
}
/* -------------------- table_2（ピンク） */
#main .table_2 {}
#main .table_2 th, #main .table_2 td {
  border: 1px solid #FFACAC;
  background-color: #fff;
}
#main .table_2 th {
  color: #AA6665;
  background-color: #FFF1F1;
  text-align: center;
}
/* -------------------- table（幅100％）*/
#main table.w100 {
  width: 100% !important;
}
/* -------------------- table（セル均等）*/
#main table.fixed {
  table-layout: fixed;
}
/* -------------------- table（最下段累計）*/
#main table.total tr:nth-last-child(2) {}
/* -------------------- table（横にスライド）*/
#main .tablescroll .note {
  display: none;
}
/* **************************************************************

 * index_menu

*************************************************************** */
#main .index_menu {}
#main .index_menu ul {
  margin: 60px 0;
  padding: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
#main .index_menu ul li {
  margin: 0 15px 30px 15px;
  padding: 0;
  width: calc(50% - 40px);
  position: relative;
}
@media screen and (max-width: 1260px) {
  #main .index_menu ul li {
    margin: 0 10px 20px 10px;
  }
}
#main .index_menu ul li::before { /*打消し*/
  display: none;
  background-color: #FFE5E5;
  border-radius: 0;
}
/*矢印*/
#main .index_menu ul li::before {
  display: block;
  content: '';
  position: absolute;
  top: calc(50% - 4px);
  right: 38px;
  left: auto;
  width: 8px;
  height: 8px;
  z-index: 10;
  border-right: 2px solid var(--pi);
  border-bottom: 2px solid var(--pi);
  transition: .4s;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#main .index_menu ul li::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 2px;
  top: 50%;
  right: 39px;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  z-index: 10;
  background-color: var(--pi);
  transition: .4s;
}
#main .index_menu ul li:hover::before, #main .index_menu ul li:hover::after {
  right: 20px;
}
#main .index_menu ul li a {
  display: block;
  border: 1px solid #E78081;
  padding: 40px 80px 40px 50px;
  border-radius: 100vh;
  color: #E78081;
  font-size: 2.0rem;
  text-decoration: none;
  line-height: 1.6em;
  background-color: #fff;
  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.1));
}
@media screen and (max-width: 1260px) {
  #main .index_menu ul li a {
    padding: 30px 80px 30px 50px;
  }
}
#main .index_menu ul li a:hover {
  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0));
}
/*丸*/
#main .index_menu ul li a::after {
  position: absolute;
  content: "";
  display: block;
  margin: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #999;
  right: 20px;
  top: 50%;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  background-color: #FFE5E5;
  transition: .4s;
}
#main .index_menu ul li a:hover::after {
  right: 0;
}
/* **************************************************************

 * news（一覧）

*************************************************************** */
#news .info_list {
  margin: 0;
  padding: 0;
  list-style: none;
}
#news .info_list li {
  position: relative;
  margin: 0;
  padding: 0;
}
#news .info_list li::before {
  display: none;
}
#news .info_list li a {
  text-decoration: none !important;
}
/* -------------------- タグ*/
#news .info_list .tag {
  display: inline-block;
  position: absolute;
  top: -6px;
  right: 30px;
  margin: 0;
  padding: 25px 0 20px 0;
  z-index: 2;
  width: 78px;
  text-align: center;
  font-family: 'SawarabiMincho JP';
  font-size: 1.7rem;
  border-radius: 2px 0 0 0;
}
#news .info_list .tag:before {
  position: absolute;
  content: '';
  top: 0;
  right: -6px;
  border: none;
  border-right: solid 6px transparent;
}
#news .info_list .tag:after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  height: 0;
  width: 0;
  border-bottom: 10px solid transparent;
}
/*募集中*/
#news .info_list .tag.bosyu {
  background: #FFE3E3;
  color: #D94B4B;
}
#news .info_list .tag.bosyu:before {
  border-bottom: 6px solid #E47E7E;
}
#news .info_list .tag.bosyu:after {
  border-left: 39px solid #FFE3E3;
  border-right: 39px solid #FFE3E3;
}
/*募集終了*/
#news .info_list .tag.end {
  background: #E3E3E3;
  color: #494949;
}
#news .info_list .tag.end:before {
  border-bottom: 6px solid #787878;
}
#news .info_list .tag.end:after {
  border-left: 39px solid #E3E3E3;
  border-right: 39px solid #E3E3E3;
}
/* -------------------- 中身*/
#news .info_list .box {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  background-color: #fff;
  border-radius: 7px;
  margin: 20px 0;
  padding: 25px 30px;
  filter: drop-shadow(0px 0px 16px rgba(63, 81, 95, .2));
  transition: .4s;
  border-radius: 0 7px 7px 0;
  border-right: 7px solid #fff;
}
#news .info_list .box:hover {
  border-radius: 0 7px 7px 0;
  border-right: 7px solid var(--pi);
  filter: drop-shadow(0px 0px 16px rgba(63, 81, 95, 0));
}
/*矢印*/
#news .info_list .box::before {
  display: block;
  position: absolute;
  content: '';
  top: calc(50% - 5px);
  right: 15px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  transition: .4s;
}
#news .info_list .box:hover::before {
  border-right: 2px solid var(--pi);
  border-bottom: 2px solid var(--pi);
  opacity: 0.8;
}
/*画像*/
#news .info_list .box .poster {
  width: 105px;
  height: 145px;
  margin: 0;
  border: 1px solid #DBEEFF;
  background-color: #F1F9FF;
  background-image: url("../img/bg_logo.png");
  background-size: 73px;
  background-position: center;
  background-repeat: no-repeat;
}
#news .info_list a:hover .box .poster img {
  opacity: 1;
}
/* -------------------- 日付*/
#news .info_list .box dl {
  width: calc(100% - 135px);
  margin: 20px 0 20px auto;
}
#news .info_list .box dl dt {
  display: -webkit-flex;
  display: flex;
  margin: 10px 0;
  color: #555;
}
/*日付*/
#news .info_list .box dl dt .date, #news .info_list .box dl dt .date span {
  color: #777;
  line-height: 1.0em;
  letter-spacing: 0.1em;
  font-weight: normal;
  font-family: 'Cardo';
  font-size: 1.8rem;
}
#news .info_list .box dl dt .date {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  white-space: nowrap;
}
/*カテゴリ*/
#news .info_list .box dl dt .cate {
  display: inline-block;
  text-align: center;
  line-height: 1.0em;
  white-space: nowrap;
  margin: 0 10px;
  padding: 8px 24px;
  color: #fff;
  background-color: var(--dbl);
  border-radius: 3px;
  font-size: 1.3rem;
  font-weight: normal;
  letter-spacing: 0.05em;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}
/*色*/
#news .info_list .box dl dt .manager {
  background-color: var(--bl);
}
#news .info_list .box dl dt .general {
  background-color: var(--pi);
}
#news .info_list .box dl dt .tokutei {
  background-color: var(--gr);
}
/* -------------------- タイトル*/
#news .info_list .box dl dd {
  font-size: 1.5rem;
  line-height: 1.8em;
}
/* -------------------- pager*/
#main .pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 20px 0;
}
#main .pager a, #main .pager span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0.5em 0.4em;
  padding: 0.5em;
  border: 1px #ccc solid;
  border-radius: 100vh;
  font-size: 1.5rem;
  text-decoration: none;
}
#main .pager a:hover, #main .pager span:hover {
  background: var(--bl);
  border-color: var(--bl);
  color: #fff;
}
#main .pager a.link_page {}
#main .pager a.link_before, #main .pager a.link_next {
  width: auto;
  padding: 0.5em 1em;
}
#main .pager .current_page {
  background: var(--bl);
  border-color: var(--bl);
  color: #fff;
  font-weight: 500;
}
/* -------------------- 過去の研修一覧*/
#news .archive_list {
  display: flex;
  flex-wrap: wrap;
  margin: 60px 0 0 0;
  gap: 20px 15px;
}
#news .archive_list li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#news .archive_list li::before {
  content: none;
}
#news .archive_list li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em 2.5em;
  border: 1px #ccc solid;
  border-radius: 100vh;
  text-decoration: none;
}
#news .archive_list li a:hover, #news .archive_list li.on a {
  background-color: var(--bl);
  border-color: var(--bl);
  color: #fff;
}
/* **************************************************************

 * news（記事）

*************************************************************** */
/* -------------------- 日付*/
article .date {
  isplay: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}
article .date .cate {
  display: inline-block;
  text-align: center;
  line-height: 1.0em;
  white-space: nowrap;
  margin: 0 20px 0 0;
  padding: .6em 1.2em;
  color: #fff;
  background-color: var(--dbl);
  border-radius: 5px;
  font-size: 1.4rem;
  font-weight: normal;
  letter-spacing: 0.05em;
}
/*cate 色*/
article .date .cate.manager {
  background-color: var(--bl);
}
article .date .cate.general {
  background-color: var(--pi);
}
article .date .cate.tokutei {
  background-color: var(--gr);
}
article .date p {
  font-size: 85%;
  letter-spacing: 0.05em;
  color: #777;
}
/* -------------------- 告知*/
article .end {
  padding: 20px;
  text-align: center;
  border-radius: 3px;
}
article .bosyu.end {
  color: var(--red);
  background-color: #FFF1F1;
}
article .event.end {
  background-color: #eee;
  color: var(--dbl);
}
/* -------------------- 画像*/
article figure {
  text-align: center;
}
article figure a {}
article figure img {
  width: 100%;
  max-width: 350px;
}
article .note {
  font-size: 90%;
  text-align: center;
  color: #555;
}
/* -------------------- PDFダウンロード*/
article .dl {
  text-align: center;
}
article .dl a {
  padding: 0 30px 6px 0;
  border-bottom: 2px solid var(--gr);
  position: relative;
  color: #85CC66;
  text-decoration: none !important;
}
article .dl a::before {
  position: absolute;
  content: "";
  width: 24px;
  height: 24px;
  background-image: url("../img/icon_dl.png");
  background-size: 24px;
  background-repeat: no-repeat;
  bottom: .3em;
  right: 0;
}
article .dl a::after {
  display: none;
}
#main .table_1.news {
  width: 100% !important;
}
#main .table_1.news th {
  width: 25% !important;
  text-align: center;
}
/* -------------------- link*/
#main #news li.link, #main #news li.map {
  margin: 0;
  padding: 0;
}
#main #news li.link::before, #main #news li.map::before {
  display: none;
}
#news li.link a {
  display: inline-block;
  position: relative;
  color: #fff;
  text-decoration: none !important;
  font-size: 1.6rem;
  line-height: 1.6em;
  background-color: var(--bl);
  margin: 0 10px 20px 0;
  padding: 16px 120px 16px 40px;
  border-radius: 100vh;
  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.1));
  border: 2px solid var(--bl);
}
#news li.link a::before {
  position: absolute;
  content: "";
  top: calc(50% - 18px);
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #fff;
  transition: .4s;
}
#news li.link a::after {
  position: absolute;
  content: "";
  width: 19px;
  height: 19px;
  background-image: url("../img/icon_link2.png");
  background-repeat: no-repeat;
  top: calc(50% - 9px);
  right: 18px;
  transition: .4s;
}
/**/
#news li.link a:hover {
  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0));
}
#news li.link a:hover::before {
  right: 0;
}
#news li.link a:hover::after {
  right: 8px;
}
/**/
#news li.map a {
  display: inline-block;
  position: relative;
  color: var(--pi);
  text-decoration: none !important;
  font-size: 1.6rem;
  line-height: 1.6em;
  background-color: #fff;
  margin: 0 10px 20px 0;
  padding: 16px 40px 16px 55px;
  border-radius: 100vh;
  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.1));
  border: 2px solid #ccc;
}
#news li.map a::before {
  position: absolute;
  content: "";
  width: 33px;
  height: 48px;
  background-image: url("../img/icon_pin.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  top: calc(50% - 24px);
  left: 15px;
  transition: .4s;
}
#news li.map a:hover {
  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0));
  border: 2px solid var(--pi);
}

/* **************************************************************

 * 室長挨拶

*************************************************************** */
#main .chief {
  position: relative;
  display: inline-block;
  margin: 10px 0 20px 0;
  padding: 0 0 17px 0;
  color: var(--bl);
}
#main .chief::after {
  position: absolute;
  content: '';
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--bl) 30%, transparent);
  left: 0;
}
#main .chief .name {
  display: block;
  font-size: 2.1rem;
  color: var(--bl);
}
/* **************************************************************

 * 8つの機能

*************************************************************** */
#featur .message {
  font-family: "ten-mincho", serif;
  margin: 80px 0;
  text-align: center;
  font-size: 2.2rem;
  letter-spacing: 0.2em;
  line-height: 2.2em;
}
#featur .message em {
  font-family: "ten-mincho", serif;
  font-size: 4.2rem;
  color: var(--pi);
  position: relative;
}
#featur .message em::before {
  position: absolute;
  content: "";
  background-image: url("../img/index_8.png");
  width: 40px;
  height: 19px;
  top: -10px;
}
#featur .message span {
  font-family: "ten-mincho", serif;
  width: 100%;
  display: block;
  font-size: 4.2rem;
  letter-spacing: 0.1em;
}
#featur .item {
  margin: 40px 0;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
#featur .item li {
  width: calc(100% / 3 - 20px);
  padding: 40px 25px 40px 25px;
  margin: 20px 10px;
  background-color: #FCF9F0;
}
#featur .item li::before {
  counter-increment: item;
  content: counter(item)'';
  font-family: 'Cardo';
  top: 0.05em;
  font-size: 2.6rem;
  line-height: 1.8em;
  color: #fff;
  top: -40px;
  left: 0;
  right: 0;
  margin: 20px auto;
  padding: 0 0 -1.0rem 0;
  background-color: var(--bl);
  width: 47px;
  height: 47px;
  border-radius: 50%;
  text-align: center;
}
#featur .item li .pict {
  text-align: center;
  margin: 0 0 20px 0;
}
#featur .item li h3 {
  font-size: 2.1rem;
  text-align: center;
  color: var(--br);
  margin: 0 0 20px 0;
  padding: 0;
  line-height: 1.4em;
}
#featur .item li h3::before {
  display: none;
}
#featur .item li p {
  font-size: 85%;
  line-height: 1.8em;
}
/* **************************************************************

 * 活動実績

*************************************************************** */
#main table.achievements {
  margin: 20px 0;
  width: 100% !important;
}
#main table.achievements th, #main table.achievements td {
  width: auto !important;
  line-height: 1.6em;
  font-size: 90%;
  padding: 15px 5px;
}
#main table.achievements th {
  font-weight: 500;
  vertical-align: middle;
}
#main table.achievements td {
  text-align: center;
  font-size: 85%;
}
#main table.achievements tr:first-child {
  /*border-bottom: 3px double #FFACAC;*/
}
#main table.achievements.total tr:nth-last-child(2), #main table.achievements.total tr:nth-last-child(3) {
  border-bottom: 3px double #FFACAC;
}
/* **************************************************************

 * よくある質問

*************************************************************** */
#main .faq {
  background-color: #eee;
  margin: 20px 0;
  padding: 5px 20px;
  border-radius: 7px;
}
#main .faq .qa {
  margin: 20px 0;
  border-radius: 5px;
  display: block;
  background-color: #fff;
}
/*Q*/
#main .faq .qa summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 15px 20px 15px 65px;
  color: var(--br);
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  list-style: none;
  font-size: 1.8rem;
}
summary::-webkit-details-marker {
  display: none;
}
#main .faq .qa summary::before, qa .qa_a::before {
  position: absolute;
  left: 1em;
  font-weight: 600;
  font-size: 1.3em;
}
#main .faq .qa summary::before {
  color: var(--pi);
  content: "Q";
  top: 0.4em;
  font-weight: 600;
  font-size: 1.6em;
  flex-shrink: 0;
}
#main .faq .qa summary::after {
  transform: translateY(-25%) rotate(45deg);
  width: 10px;
  height: 10px;
  margin-left: 10px;
  border-bottom: 3px solid var(--pi);
  border-right: 3px solid var(--pi);
  content: '';
  transition: transform .8s;
  flex-shrink: 0;
}
#main .faq .qa[open] summary::after {
  transform: rotate(225deg);
}
/*A*/
#main .faq .qa .qa_a {
  position: relative;
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: 1em 1.5em 1em 3em;
  color: #333;
  transition: transform .8s, opacity .5s;
}
#main .faq .qa[open] .qa_a {
  transform: none;
  opacity: 1;
}
#main .faq .qa .qa_a::before {
  color: var(--bl);
  line-height: 1.2;
  content: "A";
  font-size: 1.6em;
  font-weight: 600;
  flex-shrink: 0;
}
#main .faq .qa .qa_a::after {
  position: absolute;
  content: "";
  width: calc(100% - 80px);
  height: 2px;
  margin: 0 auto;
  top: 0;
  border-top: 2px dashed #ccc;
}
#main .faq .qa .qa_a p {
  margin: 0;
  padding: 0;
  font-size: 95%;
}
/* **************************************************************

 * aside

*************************************************************** */
aside {
  /*width: 280px;*/
  margin: 0 0 0 40px;
  width: 100%;
  max-width: 280px;
}
/**/
#side_nav {}
#side_nav ul {
  list-style: none;
}
#side_nav ul li {
  position: relative;
  padding-left: 2px;
  margin: 5px 0;
  border-bottom: 2px dashed #ccc;
}
#side_nav ul li::before {
  content: '';
  display: inline-block;
  position: absolute;
  left: 16px;
  top: calc(50% - 5px);
  width: 11px;
  height: 11px;
  background-color: #ddd;
  border-radius: 50%;
}
#side_nav ul li:first-child {
  border-top: 2px dashed #ccc;
}
#side_nav ul li.on::before, #side_nav ul li:hover::before {
  content: '';
  display: inline-block;
  position: absolute;
  left: 16px;
  top: calc(50% - 5px);
  width: 11px;
  height: 11px;
  background-color: var(--bl);
  border-radius: 50%;
}
#side_nav ul li a {
  display: block;
  padding: 20px 0 20px 40px;
  line-height: 1.5em;
}
#side_nav ul li.on a, #side_nav ul li:hover a {
  color: var(--bl);
}