body {
  font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3',"游ゴシック",YuGothic,'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  background: #ffffff;
  background-size: cover;
}

:root {
  --key-color: rgba(57,118,173,1);
}


/* ---- Elements ---- */

a {
  transition: all 400ms cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition: all 400ms cubic-bezier(0.86, 0, 0.07, 1);
}

.fade {
  opacity: 0;
  -webkit-transition: all 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: all 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* -webkit-transition-delay: 500ms;
          transition-delay: 500ms; */
  -webkit-transform: translate(10px, 10px);
          transform: translate(10px, 10px);
}

@media screen and (max-width: 768px) {
  .fade {
    -webkit-transition-delay: 10ms;
            transition-delay: 10ms;
  }
}

.fade.isAnimate {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.nowrap {
  white-space: nowrap;
}

#sky.fixed-hide {
  opacity: 0;
  transition: 1s;
}




ul.annotation {
	list-style-type: none;
	margin-left: 1.4rem;
	padding: 0.2rem 0;
  margin-top: 0.5rem ;
  margin-bottom: 0.5rem ;
}
ul.annotation li {
	font-size: 0.8rem;
	text-indent: -1.3rem;
	line-height: 1.4 ;
	margin-bottom: 0.3rem;
  color: #666;
}
ul.annotation li:before {
	content: "※";
}

#en ul.annotation li:before {
	content: "* ";
}



@media screen and (min-width: 769px) {
  .sp-only {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .pc-only {
    display: none;
  }
}





/* ---- BackGround ------------------------------- */

#sky {
  background: #FFF url("../images/bg_base.svg") no-repeat top center ;
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: -10;
  overflow: hidden;
  transition: 1s;
  background-size: cover ;
}

.lines-left {
  background: url("../images/lines-left.png") no-repeat left top 250px ;
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: -9;
}
.lines-right {
  background: url("../images/lines-right.png") no-repeat right top 400px ;
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: -9;
  right: 0px;
}


@media screen and (max-width: 768px) {
  #sky {
    background: #FFF url("../images/bg_base.svg") no-repeat top center ;
    margin-bottom: 0rem;
    height: 100vh;
  }
  .lines-left, .lines-right {
    background-size: 33%;
  }
}




/* ---- Header ------------------------------- */
#header {
	width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  flex-direction: column ;
  position: relative;
}
#header h1 {
	width: 33.3%;
  margin: 3.5% auto 0 auto ;
  z-index: 10;
  text-align: center;
}
#header h1 img {
	width: 100%;
}
#header h1 img.term {
  width: 66.6% ;
  margin: 2rem auto;
}

.image-photo-L {
  position: absolute ;
  background: transparent url("../images/photo-left.png") no-repeat ;
  left: -3% ;
  top: -5%;
  width: 27.5% ;
  height: 100% ;
  background-size: contain ;
  z-index: -8;
}
.image-photo-R {
  position: absolute ;
  background: transparent url("../images/photo-right.png") no-repeat ;
  right: -7% ;
  top: -10%;
  width: 27.5% ;
  height: 100% ;
  background-size: contain ;
  z-index: -8;
}


.message {
  width: 30% ;
  margin: 20px auto 0px auto;
}
.message img {
  width: 100% ;
}



h2 {
  width: 200px ;
  margin: 100px auto 20px auto ;
}
  h2 img {
    width: 100% ;
  }


@media screen and (max-width: 768px) {
  #header {
    height: 100vh ;
  }
  #header h1 {
  	width: 80% ;
  }
  .image-photo-L {
    left: -4% ;
    top: -5%;
    width: 40% ;
  }
  .image-photo-R {
    right: -7% ;
    top: -10%;
    width: 40% ;
  }
  .message {
    width: 66.7% ;
    margin: 120px auto 60px auto;
  }
}




/* ---- Lang Selector ------------------------------- */
.lang-selector {
  width: 240px ;
  display: flex ;
  flex-wrap: wrap ;
  border-radius: 20px ;
  height: 32px ;
  overflow: hidden ;
  border:  solid 1px #FFF ;
  position: relative ;
  margin: 20px auto 40px auto ;
  background-color: #FADC2D ;
}
.lang-selector .jp, .lang-selector .en {
  width: 50% ;
  border-radius: 20px ;
  height: 32px ;
  overflow: hidden ;
  position: relative ;
}

.lang-selector:hover .lang-selector .jp {
  width: 0% ;
}
.lang-selector:hover .lang-selector .en {
  opacity: 0 ;
}


.lang-selector .jp {
  letter-spacing: 3px ;
  position: absolute ;
}
.lang-selector .en {
  letter-spacing: 1px ;
  position: absolute ;
  right: 0 ;
}

.lang-selector .jp a, .lang-selector .en a {
  display: block ;
  height: 100% ;
  overflow: hidden ;
  color: #215D90 ;
  font-size: 14px ;
  line-height: 1 ;
  font-weight: 600 ;
  text-align: center ;
  padding: 8px 0 8px 0 ;
  margin-top: -1px ;
  transition: all 0.5s 0s ease ;
  opacity: 0.75 ;
  border-radius: 20px ;
}

.lang-selector a.active {
  opacity: 0.75 ;
  background-color: #FFF ;
  color: #1A78B2 ;
  border:  solid 1px #FFF ;
}

.lang-selector a.link:hover {
  opacity: 1.0 ;
  background-color: #FFF ;
  color: #215D90 ;
  border:  solid 1px #FFF ;
}


/* 当初非公開 */
.lang-selector {
  display: none;
}
@media screen and (max-width: 768px) {
  .lang-selector {
    display: none;
  }
  .message {
  width: 66.7% ;
    margin: 40px auto 40px auto;
  }
}



/* ---- Map ------------------------------- */
.dokoiko {
  background-color: #FFF ;
  padding: 40px ;
  margin: 20px 0 ;
}
.dokoiko iframe {
  width: 100% ;
  height: 600px ;
}



/* ---- Events ------------------------------- */
 .event-fil-btn {
  padding: 4px 12px ;
  font-size: 0.8rem ;
  letter-spacing: 0.1rem ;
  line-height: 1.4 ;
  font-weight: 600 ;
  border-radius: 20px ;
  border: solid 1px #CCC ;
  transition: 0.2ms;
 }

.event-card-wrapper {
  display: flex ;
  justify-content: center ;
}

.event-card {
  background-color: #FFF ;
  width: 320px;
  min-height: 400px;
  padding: 10px 10px 20px 10px ;
  border-radius: 10px ;
  border: solid 1px #DDD ;
  box-shadow: 8px 8px 8px -6px rgba(0, 0, 0, 0.15);
  margin: 10px ;
  display: flex ;
  align-items: center ;
  flex-direction: column ;
}

.event-card .event-date {
  color: #FFF ;
  padding: 4px 8px ;
  font-size: 0.8rem ;
  line-height: 1.2 ;
  font-weight: 600 ;
  margin-bottom: 6px ;
  width: 90% ;
  text-align: center ;
  border-radius: 20px ;
}
  .event-card .event-date span {
    font-size: 0.7rem ;
    font-weight: 200 ;
  }

  .event-date.termColorA {
    background-color: #2858A6 ;
  }
  .event-date.termColorB {
    background-color: #E35178 ;
  }
  .event-date.termColorC {
    background: linear-gradient(0.25turn, #2858A6, #E35178);
  }



.event-card .event-thumb {
  text-align: center ;
}

.event-card .event-thumb img {
  width: 100% ;
  margin: 4px 0 ;
}

.event-card .event-thumb.animegif img {
  width: 60% ;
  margin: 14px auto;
}

.event-card .event-place {
  background-color: #1A78B2 ;
  color: #FFF ;
  padding: 4px 4px ;
  font-size: 0.8rem ;
  line-height: 1.2 ;
  letter-spacing: 0 ;
  font-weight: 400 ;
  width: 100% ;
  margin: 4px 0 ;
}

.event-card .event-title {
  font-size: 1.0rem ;
  line-height: 1.4 ;
  letter-spacing: 0 ;
  font-weight: 600 ;
  margin: 16px 0 ;
}

.event-card .event-detail-button {
  background-color: #FFF ;
  padding: 4px 12px ;
  font-size: 0.8rem ;
  letter-spacing: 0.1rem ;
  line-height: 1.4 ;
  font-weight: 600 ;
  border-radius: 20px ;
  border: solid 1px #999 ;
  transition: 1ms;
}

.event-card .event-detail-button:hover {
  background-color: #1A78B2 ;
  color: #FFF ;
}


@media screen and (max-width: 768px) {
  .event-card-wrapper {
    display: flex ;
    flex-wrap: wrap ;
  }
  .swiper-slide {
    width: 320px !important ;
  }
}






/* filter ------------------------------- */
.filter {
  display: flex ;
  align-items: center ;
  justify-content: center ;
}
  .filter a {
    margin: 20px 10px ;
    background-color: #FFF ;
    transition: 1ms ;
  }

.filter a.active, .filter a:hover {
  background: linear-gradient(0.25turn, #2858A6, #E35178);
  color: #FFF ;
}
.filter a:hover {
  color: #FFF ;
}
.filter a.termColorA.active, .filter a.termColorA:hover {
  background: #2858A6 ;
}
.filter a.termColorB.active, .filter a.termColorB:hover {
  background: #E35178 ;
}



.is-animated {
  animation: .6s zoom-in;
}

@keyframes zoom-in {
  0% {
   transform: scale(.1);
  } 
  100% {
    transform: none;
  }
}


@media screen and (min-width: 769px) {
  .boxes {
    flex-wrap: wrap;
  }
}



@media screen and (max-width: 768px) {
  .filter {
    flex-direction: column ;
  }
  .filter a {
    margin: 6px auto ;
    background-color: #FFF ;
  }
}







/* EVENT DETAIL BOX ------------------------------- */

.event-detail-box {
  background: #FFF ;
  padding: 40px ;
  border-radius: 20px ;
  border: solid 1px #666 ;
  padding: 40px ;
}

.iziModal {
  background-color: transparent !important ;
  border-radius: 20px !important ;
}


/*  ■■■■■■■■■■■■■■■■■■■　● 作業用目印 ■■■■■■■■■■■■■■■■■■■   */
.event-detail-box .event-date {
  color: #FFF ;
  padding: 4px 8px ;
  font-size: 0.8rem ;
  line-height: 1.2 ;
  font-weight: 600 ;
  margin-bottom: 6px ;
  width: 90% ;
  text-align: center ;
  border-radius: 20px ;
  margin: auto ;
}
.event-detail-box .event-thumb {
  text-align: center ;
}

.event-detail-box .event-thumb img {
  width: 100% ;
  margin: 20px 0 ;
  border-radius: 14px ;
}

.event-detail-box .event-thumb.animegif img {
  width: 60% ;
  margin: 20px auto;
}

.event-detail-box .event-place {
  background-color: #1A78B2 ;
  color: #FFF ;
  padding: 4px 4px ;
  font-size: 0.8rem ;
  line-height: 1.2 ;
  letter-spacing: 0 ;
  font-weight: 400 ;
  width: 100% ;
  margin: 4px 0 ;
}

.event-detail-box .event-title {
  font-size: 1.4rem ;
  line-height: 1.2 ;
  letter-spacing: 0 ;
  font-weight: 600 ;
  margin: 24px 0 ;
}

.event-detail-box .event-detail-button {
  padding: 4px 12px ;
  font-size: 0.8rem ;
  letter-spacing: 0.1rem ;
  line-height: 1.4 ;
  font-weight: 600 ;
  border-radius: 20px ;
  border: solid 1px #999 ;
  transition: 1ms;
  background-color: #FFF ;
}

.event-detail-box .event-detail-button:hover {
  background-color: #1A78B2 ;
  color: #FFF ;
}


.x-scrl {
  overflow-x: auto;
}

.content-body {
  margin: 20px auto ;
}
  .content-body-head {
    margin-bottom: 4px;
  }
    .content-body-head span.head-bg {
      background-color: var(--key-color);
      padding: 6px 12px;
      color: #FFF;
      font-size: 1.0rem ;
    }
    .content-body-head span.smallTxt {
      font-size: 12px;
      font-weight: 200 !important;
      margin-left: 0.2em;
      letter-spacing: 0;
      white-space: nowrap;
    }
    .content-body-body table {
      overflow-x: scroll;
    }
    .content-body-body th, .content-body-body td {
      border: solid 1px var(--key-color);
      padding: 8px 12px;
      background-color: #FFF;
      font-size: 0.8rem ;
    }
    .content-body-body th {
      white-space: nowrap;
    }
    .content-body-body {
      margin-bottom: 60px;
    }
    .content-body-body p {
      font-size: 0.9rem ;
      line-height: 1.4 ;
      margin: 8px 0 ;
    }
    .content-body-btn {
      text-align: right;
    }
    .content-body .content-by {
      margin: 2rem 1rem 2rem 0;
      text-align: right;
    }


.content-image {
  width: 50% ;
  padding-left: 2.5%;
}
  .content-image img {
    width: 100% ;
  }

.content-by {
  width: 100%;
  text-align: left;
  margin-top: 4rem ;
  font-size: 14px;
  font-weight: 400;
  color: #555;
}


.content-body-body h3 {
  margin: 1.6rem 0 ;
  font-weight: 600 ;
  font-size: 16px ;
}

.link2official {
  display: flex ;
  justify-content: center ;
  align-items: center ;
  padding: 20px 0 40px 0;
}

.link2official a {
  padding: 4px 12px ;
  font-size: 0.8rem ;
  letter-spacing: 0.1rem ;
  line-height: 1.4 ;
  font-weight: 600 ;
  border-radius: 20px ;
  border: solid 1px #999 ;
  transition: 1ms;
  max-width: 40px auto ;
  background-color: #FFF ;
}
.link2official a:hover {
  background-color: #1A78B2 ;
  color: #FFF ;
}




@media screen and (max-width: 768px) {
  .event-detail-box {
    padding: 20px ;
  }
}



@media screen and (min-width: 769px) {
  .event-detail-box {
    width: 100% ;
    margin-left: 0% ;
  }
  .iziModal {
    box-shadow: none;
    width: 40% ;
  }
}












/* ---- Footer ------------------------------- */
footer .foot-logo {
  margin: 60px auto;
} 

footer .by {
  text-align: center;
  background: #FFF ;
  padding: 40px 70px ;
  color: #555;
}

footer .by-wrapper-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

footer .by-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 20px auto 0;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
}

footer .by-wrapper h3::after {
  content: "：";
} 

footer .by-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

footer .by-wrapper li {
  color: #555 ;
  line-height: 1.6 ;
}

footer .by-wrapper li::after {
  content: "、";
}
#en footer .by-wrapper li::after {
  content: ", ";
}
  footer .by-wrapper li:last-child::after {
    content: none;
  } 

footer .copyright {
  text-align: center;
  font-size: 12px;
  color: #555;
  background-color: #FFF;
  line-height: 1.6 ;;
}

@media screen and (max-width: 768px) {
  footer .foot-logo {
    width: 200px;
    margin: 60px auto 20px auto;
  }
  footer .foot-logo img {
    width: 100% ;
  } 
}





/* 調整 -------- */
.marche-1 {
  padding-left: 0;
}
.marche-2 {
  margin-top: -30px;
}

.contents.night-walk .content-by,
.contents.toyoichi .content-by {
  color: #FFF;
}

.foot-logo img {
  width: 240px;
}