@charset "utf-8";
/* ===================================================================
 style info : ヘッダーやフッターなどサイト内共通
=================================================================== */

/*----------------------------------------------------
	共通
----------------------------------------------------*/
body {
  font-family: Lato, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  background-color: #ffffff;
  color: #151515;
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: 0.15em;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

/*----------------------------------------------------
    リンク
----------------------------------------------------*/
a:link,
a:visited,
a:hover,
a:active {
  color: #151515;
  text-decoration: none;
  transition: all .5s ease;
}

/*----------------------------------------------------
    toggle-panel
----------------------------------------------------*/
#panel-btn {
  display: none;
}

.overlay {
  display: none;
}

/* -----------------------------------------------------------
    header
----------------------------------------------------------- */
header {
  padding: 2vw 5vw;
  border-bottom: 1px solid #DDD;
}

header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header .site_id {
  line-height: 0;
  width: 280px;
}

/* -----------------------------------------------------------
    #g_nav
----------------------------------------------------------- */
#g_nav .site_id_resp {
  display: none;
}

#g_nav > ul {
  display: flex;
  align-items: center;
}

#g_nav > ul > li:not(:first-of-type) {
  margin-left: 1.5em;
}

#g_nav > ul > li a:hover {
  opacity: 0.5;
}

.sp_nav {
  display: none;
}

/* -----------------------------------------------------------
    .hd
----------------------------------------------------------- */
.hd_01 {
  font-size: 2.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

#top .hd_01 span {
  display: inline-block;
  padding-bottom: 15px;
  margin-bottom:  15px;
  border-bottom:  1px solid #707070;
}

/* .hd_01:after {
  background-color: #707070;
  content: "";
  margin-top: 15px;
  height: 1px;
  width: 90px;
} */

.hd_02 {
  font-size: 2.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.hd_02 span:nth-of-type(2) {
  font-size: 1.3rem;
  font-weight: normal;
  margin-left: 1vw;
}

/* -----------------------------------------------------------
    .note
----------------------------------------------------------- */
.note {
  display: flex;
}

.note:before {
  content: "※";
  margin-right: 0.1em;
}

/* -----------------------------------------------------------
    .btn
----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em 1.5em;
}

/* -----------------------------------------------------------
    背景色
----------------------------------------------------------- */
.bg_clr01_01 {
  background-color: #ec9836;
}

.bg_clr01_02 {
  background-color: #37b25f;
}

.bg_clr01 {
  background-color: #ac84c2;
}

.bg_clr01:hover {
  background-color: #3e3e3e;
}

.bg_clr02 {
  background-color: #3e3e3e;
}

.bg_clr02:hover {
  background-color: #ffffff;
}

/* -----------------------------------------------------------
    ボーダー角丸
----------------------------------------------------------- */
.brd_rd01 {
  border-radius: 3px;
}

.brd_rd02 {
  border-radius: 5px;
}

.brd_rd03 {
  border-radius: 10px;
}

.brd_rd04 {
  border-radius: 20px;
}

.brd_rd05 {
  border-radius: 30px;
}

.brd_rd06 {
  border-radius: 40px;
}

.brd_rd07 {
  border-radius: 50px;
}

.brd_rd08 {
  border-radius: 50%;
}

/* -----------------------------------------------------------
    フォント色
----------------------------------------------------------- */
.clr01 {
  color: #ffffff !important;
}

.clr01:hover {
  color: #151515 !important;
}

.clr02 {
  color: #ffffff !important;
}

/* -----------------------------------------------------------
    フォント太さ
----------------------------------------------------------- */
.fs_b01 {
  font-weight: 700;
}

.fs_b02 {
  font-weight: 900;
}

/* -----------------------------------------------------------
    高さ
----------------------------------------------------------- */
.hit_01 {
  height: 45px;
}

.hit_02 {
  height: 50px;
}

.hit_03 {
  height: 60px;
}

.hit_04 {
  height: 70px;
}

.hit_05 {
  height: 80px;
}

.hit_06 {
  height: 90px;
}

.hit_07 {
  height: 100px;
}

/* -----------------------------------------------------------
    幅
----------------------------------------------------------- */
.wid_01 {
  width: 7.5em;
}

.wid_02 {
  width: 10em;
}

.wid_03 {
  width: 12.5em;
}

.wid_04 {
  width: 15em;
}

.wid_05 {
  width: 17.5em;
}

.wid_06 {
  width: 20em;
}

.wid_07 {
  width: 22.5em;
}

.wid_08 {
  width: 25em;
}

.wid_09 {
  width: 30em;
}

.wid_10 {
  width: 100%;
}

/* -----------------------------------------------------------
    .tab
----------------------------------------------------------- */
.tab {
  font-size: 2.0rem;
  font-weight: 700;
}

.tab ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tab ul li {
  flex: 1 1;
  margin-left: 2vw;
}

.tab ul li:first-of-type {
  margin-left: 0;
}

.tab ul li a {
  background-color: #ffffff;
  border: 1px solid #dbdbdb;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
}

.tab ul li.c01 a.current,
.tab ul li.c01 a:hover {
  background-color: #ec9836;
  border: 1px solid #ec9836;
  color: #ffffff;
}

.tab ul li.c02 a.current,
.tab ul li.c02 a:hover {
  background-color: #37b25f;
  border: 1px solid #37b25f;
  color: #ffffff;
}

/* -----------------------------------------------------------
    .tab01
----------------------------------------------------------- */
.tab01 {
  font-size: 1.9rem;
  font-weight: 700;
}

.tab01 ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tab01 ul li {
  flex: 1 1;
  margin-left: 2vw;
}

.tab01 ul li:first-of-type {
  margin-left: 0;
}

.tab01 ul li a {
  border-bottom: 3px solid #dbdbdb;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
}

.tab01 ul li a.current,
.tab01 ul li a:hover {
  border-bottom: 3px solid #ec9836;
}

/* -----------------------------------------------------------
    .news_box
----------------------------------------------------------- */
.news_box ul li {
  border-bottom: 1px solid #dbdbdb;
}

.news_box ul li:first-of-type {
  border-top: 1px solid #dbdbdb;
}

.news_box ul li a {
  display: flex;
  align-items: center;
  padding: 1.5em 0;
}

.news_box ul li a > p {
  flex: 1 1;
  margin-left: 2em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news_box ul li a:hover > p {
  opacity: 0.4;
}

/* -----------------------------------------------------------
    .main
----------------------------------------------------------- */
.main {
  background-color: #ac84c2;
  color: #ffffff;
  padding: 0 5vw;
}

#low .main .ttl_box .ttl {
  font-size: 4.0rem;
  font-weight: 700;
  flex: 1 1;
  line-height: 1.2;
  text-align: center;
}

/* -----------------------------------------------------------
    inner
----------------------------------------------------------- */
.inner {
  max-width: 1080px;
  min-width: 810px;
  width: 100%;
  margin: 0 auto;
}

/* -----------------------------------------------------------
    .container
----------------------------------------------------------- */
.container {
  padding: 5vw;
}

/* -----------------------------------------------------------
    .contents
----------------------------------------------------------- */
.contents {
  margin-top: 2vw;
}

/* -----------------------------------------------------------
    footer
----------------------------------------------------------- */
footer .volunteer {
  background-color: #e7baff;
  color: #543168;
  padding: 1vw 5vw;
}

footer .volunteer span {
  max-width: 1080px;
  margin: 0 auto;
  display: block;
}

footer .above {
  background-color: #ac84c2;
  color: #ffffff;
  padding: 2vw 5vw;
}

footer .above .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

footer .above .logo {
  line-height: 0;
  width: 150px;
}

footer .above nav {
  display: flex;
  align-items: center;
}

footer .above nav .foot_btn {
  display: flex;
  font-size: 1.4rem;
}

footer .above nav .foot_btn li:not(:first-of-type) {
  margin-left: 1.5em;
}

footer .above nav .foot_btn li a {
  color: #ffffff;
}

footer .above nav .foot_btn li a:hover {
  opacity: 0.5;
}

footer .above nav .contact_btn {
  margin-left: 2vw;
}

footer .below {
  padding: 1vw 5vw;
}

footer .below .inner {
  display: flex;
  justify-content: flex-end;
}

/* -----------------------------------------------------------
    pagination
----------------------------------------------------------- */
.pagination {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5vw;
}

.pagination ul {
  display: flex;
  align-items: center;
}

.pagination ul li {
  margin: 0 0.5em;
}

.pagination ul li.prev {
  margin-right: 5em;
}

.pagination ul li.next {
  margin-left: 5em;
}

.pagination ul li a {
  color: #a0a0a0;
  display: block;
  padding: 0 0.75em;
}

.pagination ul li.prev a,
.pagination ul li.next a {
  color: #ac84c2;
  display: flex;
  align-items: center;
  padding: 0;
}

.pagination ul li.prev a:before,
.pagination ul li.next a:after {
  border-top: 2px solid #ac84c2;
  content: "";
  height: 20px;
  width: 20px;
  transition: all .5s ease;
}

.pagination ul li.prev a:before {
  border-left: 2px solid #ac84c2;
  transform: rotate(-45deg);
  margin-right: 1em;
  margin-left: 0.25em;
}

.pagination ul li.next a:after {
  border-right: 2px solid #ac84c2;
  transform: rotate(45deg);
  margin-left: 1em;
  margin-right: 0.25em;
}

.pagination ul li.current,
.pagination ul li.current a {
  color: #ac84c2;
  cursor: none;
  padding: 0 0.75em;
  pointer-events: none;
}

.pagination ul li a:hover {
  color: #e7baff;
}

.pagination ul li.prev a:hover,
.pagination ul li.next a:hover {
  color: #e7baff;
}

.pagination ul li.prev a:hover:before {
  border-top: 2px solid #e7baff;
  border-left: 2px solid #e7baff;
}

.pagination ul li.next a:hover:after {
  border-top: 2px solid #e7baff;
  border-right: 2px solid #e7baff;
}

/* -----------------------------------------------------------
    pager
----------------------------------------------------------- */
.pager {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 5vw;
}

.pager ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pager ul li a,
.pager ul li span {
  display: flex;
  align-items: center;
  color: #ac84c2;
}

.pager ul li a:before,
.pager ul li a:after,
.pager ul li span:before,
.pager ul li span:after  {
  color: #ac84c2;
  transition: all .5s ease;
}

.pager ul li.prev a:before,
.pager ul li.next a:after,
.pager ul li.prev span:before,
.pager ul li.next span:after {
  border-top: 2px solid #ac84c2;
  content: "";
  height: 20px;
  width: 20px;
  transition: all .5s ease;
}

.pager ul li.prev a:before,
.pager ul li.prev span:before {
  border-left: 2px solid #ac84c2;
  transform: rotate(-45deg);
  margin-right: 1em;
  margin-left: 0.25em;
}

.pager ul li.next a:after,
.pager ul li.next span:after {
  border-right: 2px solid #ac84c2;
  transform: rotate(45deg);
  margin-left: 1em;
  margin-right: 0.25em;
}

.pager ul li.summary a i {
  font-size: 30px;
  font-size: 3.0rem;
  line-height: 0;
}

.pager ul li a:hover {
  color: #e7baff;
}

.pager ul li.prev a:hover:before {
  border-top: 2px solid #e7baff;
  border-left: 2px solid #e7baff;
}

.pager ul li.next a:hover:after {
  border-top: 2px solid #e7baff;
  border-right: 2px solid #e7baff;
}

.pager ul li.prev span,
.pager ul li.next span {
  opacity: 0.3;
}

/* -----------------------------------------------------------
    .pagetop
----------------------------------------------------------- */
.pagetop {
  text-align: center;
  margin-top: 5vw;
}

/* -----------------------------------------------------------
    img:hover
----------------------------------------------------------- */
a img:hover {
  transition: all .5s ease;
}