@charset "UTF-8";
/*---------- reset ----------*/
*,
*:before,
*:after {
  box-sizing: border-box; }

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, p, blockquote, th, td {
  margin: 0;
  padding: 0; }

address, caption, cite, code, dfn, th, var {
  font-style: normal;
  font-weight: normal; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section {
  margin: 0;
  display: block; }

html {
  font-family: YuGothic, 'Yu Gothic', '游ゴシック体', '游ゴシック', 'メイリオ', Meiryo, 'MS ゴシック', 'MS Gothic', sans-serif;
  overflow-y: scroll;
  font-size: 62.5%;
  width: 100%;
  -webkit-text-size-adjust: 100%; }

ol, ul {
  list-style: none; }

input[type="submit"],
input[type="button"],
input[type="reset"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer; }

input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration,
input[type="reset"]::-webkit-search-decoration {
  display: none; }

input[type="submit"]::focus,
input[type="button"]::focus,
input[type="reset"]::focus {
  outline-offset: -2px; }

/*--------------------*/
/*---------- base ----------*/
html {
  overflow-x: hidden;
  overflow-y: scroll;
  min-width: 320px; }

body {
  font-family: YuGothic, 'Yu Gothic', '游ゴシック体', '游ゴシック', 'メイリオ', Meiryo, 'MS ゴシック', 'MS Gothic', sans-serif;
  color: #000;
  position: relative;
  font-size: 1.6rem;
  line-height: 1.6;
  letter-spacing: .09em;
  -webkit-font-feature-settings: 'palt' 1;
  font-feature-settings: 'palt' 1; }

_:-ms-lang(x)::-ms-backdrop, body {
  /*IE11のみに適用*/
  letter-spacing: .02em; }

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-style: normal;
  font-weight: normal; }

strong {
  font-style: normal;
  font-weight: bolder; }

em {
  font-style: normal;
  font-weight: 500; }

q::before,
q::after {
  display: none; }

fieldset {
  border: none; }

hr {
  display: none; }

.close_text {
  font-weight: bold;
  color: #fff;
  text-align: center;
  font-size: 1.8rem;}
	
.clear {
  clear: both; }

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0px;
  visibility: hidden; }

.clearfix {
  min-height: 1px; }

img {
  width: 100%;
  height: auto;
  vertical-align: top;
  border: 0; }

a {
  color: #000;
  background: transparent;
  text-decoration: none;
  outline-style: none;
  transition: color .5s ease; }

@media screen and (min-width: 769px) {
  a:hover {
    color: #5F1985; }

  .hover a {
    opacity: 1.0;
    transition: opacity .5s,color .5s; }
    .hover a:hover {
      opacity: .6; } }
a img {
  line-height: 0; }

iframe {
  display: block; }

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0; }

input[type="text"],
textarea {
  background-color: #DCDDDD;
  width: 100%; }

.txt_r {
  text-align: right; }

.txt_c {
  text-align: center; }
  @media screen and (max-width: 768px) {
    .txt_c {
      text-align: left; } }

.txt_small {
  font-size: 0.8em; }

.bld {
  font-weight: bold; }

.bld_L {
  font-weight: bold;
  font-size: 120%; }

.strike {
  text-decoration: line-through; }

.important {
  color: #FF0000; }

.is-sp {
  display: none; }

.package {
  display: flex; }

em {
  color: #D71319;
  font-weight: 500; }

@media screen and (max-width: 768px) {
  .is-sp {
    display: block; }

  br.is-sp {
    display: inline; }

  .is-pc {
    display: none !important; } }
.note {
  font-size: 1.8rem; }
  @media screen and (max-width: 768px) {
    .note {
      font-size: 1.6rem; } }

/*---------- btn ----------*/
.btn_more {
  max-width: 600px;
  width: 100%;
  margin: 0 auto; }
  .btn_more a, .btn_more.nolink {
    color: #5F1985;
    font-size: 2rem;
    letter-spacing: .03em;
    line-height: 1.2;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    background-color: transparent;
    border: solid 1px #5F1985;
    position: relative;
    transition: background-color .5s,color .5s; }
    @media screen and (max-width: 768px) {
      .btn_more a, .btn_more.nolink {
        font-size: 1.5rem; } }
  .btn_more.wh a {
    color: #fff;
    border-color: #fff; }
  .btn_more a::after, .btn_more.nolink::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border: 0;
    border-top: solid 1px #5F1985;
    border-right: solid 1px #5F1985;
    transition: border-color .5s;
    transform: rotate(45deg);
    position: relative;
    left: 35px; }
    @media screen and (max-width: 768px) {
      .btn_more a::after, .btn_more.nolink::after {
        width: 8px;
        height: 8px; } }
    @media screen and (max-width: 768px) {
      .btn_more a::after, .btn_more.nolink::after {
        left: 10px; } }
    @media screen and (max-width: 350px) {
      .btn_more a::after, .btn_more.nolink::after {
        left: 5px; } }
  .btn_more.wh a::after {
    border-color: #fff; }
  @media screen and (min-width: 769px) {
    .btn_more a:hover, a:hover .btn_more.nolink {
      color: #fff;
      background-color: #5F1985; }
    .btn_more a:hover::after, a:hover .btn_more.nolink::after {
      border-color: #fff; }
    .btn_more.wh a:hover {
      color: #5F1985;
      background-color: #fff; }
    .btn_more.wh a:hover::after {
      border-color: #5F1985; } }
  @media screen and (max-width: 768px) {
    .btn_more {
      max-width: 320px; } }

/*=============================== レイアウト ================================*/
.l-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden; }

.l-kv {
  width: 100%; }

.l-main {
  position: relative;
  z-index: 2;
  background-color: #fff; }

.l-container {
  width: 100%; }

.l-section {
  position: relative;
  width: 100%;
  z-index: 1; }

/*=============================== header ================================*/
.header {
  width: 100%;
  height: 67px;
  background-color: #E4EDF0; }
  @media screen and (max-width: 768px) {
    .header {
      height: 0;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 101; } }

.header_inner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  @media screen and (max-width: 768px) {
    .header_inner {
      display: block; } }

/*=============================== メインビジュアル ===============================*/
.kv {
  position: relative;
  background-color: #5F1985;
  z-index: 2; }

.kv_contents {
  width: 100%;
  height: 100%; }

.kv_contents_inner {
  position: relative;
  max-width: 1000px;
  margin: 0 auto; }
  .kv_contents_inner .main_ttl {
    position: absolute;
    left: 50%;
    bottom: 38px;
    width: 68.4%;
    transform: translateX(-50%); }
    @media screen and (max-width: 768px) {
      .kv_contents_inner .main_ttl {
        width: 91%;
        bottom: 10.67vw; } }

/*---------- メインナビ ----------*/
#mainNav {
  display: none;
  width: 375px;
  height: 100vh;
  position: fixed;
  right: -375px;
  top: 0;
  z-index: 100;
  background-color: #fff;
  transition: right .5s;
  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); }
  @media screen and (max-width: 375px) {
    #mainNav {
      width: 100%; } }
  .menuOn #mainNav {
    right: 0; }

.menu_logo {
  width: 196px;
  margin: 0 auto;
  padding: 38px 0; }

.main_nav_body {
  border-top: solid 1px #BFA05A;
  margin-bottom: 28px; }

.main_nav_item {
  border-bottom: solid 1px #BFA05A; }
  .main_nav_item a {
    color: #5F1985;
    font-weight: bold;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity .5s; }
    @media screen and (min-width: 769px) {
      .main_nav_item a:hover {
        opacity: .6; } }

.sub_nav_body {
  width: 290px;
  margin: 0 auto; }

.sub_nav_item {
  margin-bottom: 20px; }
  .sub_nav_item a {
    color: #fff;
    font-weight: bold;
    background-color: #5F1985;
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: 15px;
    position: relative;
    transition: opacity .5s; }
    .sub_nav_item a::before {
      content: "";
      display: block;
      width: 8px;
      height: 8px;
      border: 0;
      border-top: solid 2px #5F1985;
      border-right: solid 2px #5F1985;
      border-left-color: #5F1985;
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translateY(-50%) rotate(45deg);
      border-color: #fff; }
    @media screen and (min-width: 769px) {
      .sub_nav_item a:hover {
        opacity: .6; } }

#mainNavWrap {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 101;
  height: 0; }

#mainNavWrap #switchBtn {
  cursor: pointer; }

#mainNavWrap #switchBtnArea {
  width: 100%;
  z-index: 2;
  position: relative; }

#mainNavWrap #switchBtnArea #switchBtn {
  top: 10px;
  right: 15px;
  width: 50px;
  height: 50px;
  display: block;
  background-color: #fff;
  position: absolute;
  border-radius: 0;
  padding-top: 14px; }

#mainNavWrap #switchBtnArea #switchBtnLine {
  width: 25px;
  height: 22px;
  position: relative;
  margin: 0 auto; }

#mainNavWrap #switchBtnArea #switchBtn span {
  left: 0;
  width: 100%;
  height: 2px;
  display: block;
  position: absolute;
  background-color: #5F1985;
  transition: all 0.2s linear; }

#mainNavWrap #switchBtnArea #switchBtn span:nth-of-type(1) {
  top: 0px;
  transform: rotate(0); }

#mainNavWrap #switchBtnArea #switchBtn span:nth-of-type(2) {
  top: 10px;
  transform: scale(1); }

#mainNavWrap #switchBtnArea #switchBtn span:nth-of-type(3) {
  bottom: 0px;
  transform: rotate(0); }

#mainNavWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(1) {
  top: 11px;
  transform: rotate(-45deg); }

#mainNavWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(2) {
  transform: scale(0); }

#mainNavWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(3) {
  bottom: 9px;
  transform: rotate(45deg); }

/*=============================== footer ===============================*/
.footer {
  color: #fff;
  text-align: center;
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: #5F1985;
  z-index: 2;
  padding-bottom: 35px; }
  @media screen and (max-width: 768px) {
    .footer {
      padding-bottom: 15px; } }
  .footer a {
    color: #fff;
    text-decoration: underline; }
    .footer a:hover {
      text-decoration: none; }

.footer_contact {
  line-height: 1.7;
  padding-top: 35px;
  margin-bottom: 105px; }

/*---------- footer／コピーライト ----------*/
.copyright {
  color: #fff;
  font-size: 1.5rem;
  letter-spacing: .1em;
  line-height: 1.3;
  text-align: center; }

/*=============================== ページトップ ===============================*/
.onheader .page_nav_group {
  opacity: 1;
  pointer-events: auto; }

.page_nav_group {
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s;
  width: 40px; }
  .page_nav_group a {
    outline-style: none;
    display: block;
    width: 40px;
    height: 40px;
    position: relative;
    text-indent: -9999px;
    border-radius: 100%;
    background-color: #fff;
    transition: opacity .5s ease; }
    @media screen and (max-width: 768px) {
      .page_nav_group a {
        width: 40px;
        height: 40px; } }
    @media screen and (min-width: 769px) {
      .page_nav_group a:hover {
        opacity: .6; } }

.page_nav_pagetop a::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border: 0;
  border-bottom-width: 14px;
  border-top: solid 2px #5F1985;
  border-right: solid 2px #5F1985;
  position: absolute;
  top: calc(50% + 2px);
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg); }

/*================================icon===============================*/
.icon_blank {
  padding: 0px 20px 0px 0px;
  background: url(../images/icon_blank.svg) no-repeat right center; }

.footer a[target="_blank"] {
  padding: 0px 20px 0px 0px;
  background: url(../images/icon_blank_wh.svg) no-repeat right center; }

/* ボタン内 */
.btn_more a span.icon_blank,
.sub_nav_item a span.icon_blank {
  position: relative;
  padding-right: 20px;
  background: none; }

.btn_more a span.icon_blank::before,
.btn_more a span.icon_blank::after,
.sub_nav_item a span.icon_blank::before,
.sub_nav_item a span.icon_blank::after {
  content: "";
  display: block;
  width: 15px;
  height: 12px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  transition: opacity .5s; }

.btn_more a span.icon_blank::before {
  background-image: url(../images/icon_blank.svg);
  z-index: 2; }

.btn_more a span.icon_blank::after {
  background-image: url(../images/icon_blank_wh.svg); }

.btn_more.wh a span.icon_blank::before,
.sub_nav_item a span.icon_blank::before {
  background-image: url(../images/icon_blank_wh.svg);
  z-index: 2; }

.btn_more.wh a span.icon_blank::after,
.sub_nav_item a span.icon_blank::after {
  background-image: url(../images/icon_blank.svg); }

@media screen and (min-width: 769px) {
  .btn_more a:hover span.icon_blank::before {
    opacity: 0; } }
/*----- PDF icon -----*/
.icon_pdf {
  padding-top: 0px;
  padding-bottom: 2px;
  padding-left: 0px;
  padding-right: 18px;
  background: url(../images/icon_pdf.gif) no-repeat right center !important; }

/*=============================== レイアウト ================================*/
/*---------- 共通要素 ----------*/
.home_section_ttl {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 3rem;
  color: #5F1985;
  font-weight: bold;
  text-align: center;
  letter-spacing: .15em;
  position: relative;
  margin-bottom: 50px; }
  @media screen and (max-width: 768px) {
    .home_section_ttl {
      font-size: 2.5rem;
      margin-bottom: 30px; } }
  .home_section_ttl.wh {
    color: #fff; }

.inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 100px 15px 100px;
  position: relative; }
  @media screen and (max-width: 768px) {
    .inner {
      padding: 60px 15px 50px; } }

table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  border-left: solid 1px #5F1985;
  border-top: solid 1px #5F1985; }
  table tbody th,
  table tbody td {
    font-size: 2rem;
    padding: 30px 25px;
    border-right: solid 1px #5F1985;
    border-bottom: solid 1px #5F1985; }
    @media screen and (max-width: 768px) {
      table tbody th,
      table tbody td {
        font-size: 1.6rem;
        padding: 15px 10px; } }
  table tbody th {
    color: #5F1985;
    font-weight: bold;
    text-align: center;
    letter-spacing: .2em;
    vertical-align: middle;
    background-color: #F4F1FA;
    width: 160px; }
    @media screen and (max-width: 768px) {
      table tbody th {
        font-size: 1.4rem;
        width: 60px; } }

.contents_txt {
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 2.15;
  margin-bottom: 50px; }
  @media screen and (max-width: 768px) {
    .contents_txt {
      margin-bottom: 15px; } }
  .contents_txt.mb0 {
    margin-bottom: 0; }
  .contents_txt p {
    text-indent: 1em; }

/*=============================== 開催概要 ===============================*/
.home_about_contents {
  background-color: #5F1985; }
  .home_about_contents .inner {
    padding-bottom: 140px; }
    @media screen and (max-width: 768px) {
      .home_about_contents .inner {
        padding-bottom: 60px; } }
  .home_about_contents table {
    margin-bottom: 60px; }

.access_map {
  margin-top: 40px; }

/*=============================== 主催者あいさつ ===============================*/
.home_greeting_contents {
  background-color: #F9F2E5; }

.chair {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 15px;
  margin-right: 10px; }
  .chair .label {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: bold;
    position: relative;
    top: 5px;
    left: 3px; }
  .chair .chair_name {
    width: 185px; }
    @media screen and (max-width: 768px) {
      .chair .chair_name {
        width: 140px; } }

/*=============================== 「第2回 遊書展」の風景 ===============================*/
.archive_list_body {
  display: flex;
  flex-wrap: wrap; }

.archive_item {
  width: 48%;
  margin-left: 4%;
  margin-bottom: 30px; }
  .archive_item:nth-child(2n+1) {
    margin-left: 0; }

/*=============================== 書道教室の紹介 ===============================*/
.home_lesson_contents {
  background-color: #F4F1FA; }
  .home_lesson_contents .inner {
    padding-bottom: 150px; }
    @media screen and (max-width: 768px) {
      .home_lesson_contents .inner {
        padding-bottom: 60px; } }

.lesson_list {
  max-width: 650px;
  margin: 0 auto; }

.lesson_list_body {
  display: flex;
  flex-wrap: wrap; }

.lesson_item {
  width: 46%;
  margin-left: 8%;
  margin-bottom: 55px; }
  @media screen and (max-width: 768px) {
    .lesson_item {
      margin-bottom: 30px; } }
  .lesson_item:nth-child(2n+1) {
    margin-left: 0; }