
@import"https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@700&display=swap";

html {
  font-size: 62.5%
}

body {
  color: #231815;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.3rem;
  line-height: 1.8;
  width: 100%;
  height: 100%
}

@media(min-width: 480px) {
  body {
    font-size: calc(1.3rem + (1vw - 4.8px) * 0.1086956522)
  }
}

@media(min-width: 1400px) {
  body {
    font-size: 1.4rem
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
dl {
  margin: 0
}

dd {
  margin-left: 0
}

a {
  color: #231815;
  text-decoration: none
}

a:focus {
  border: 0;
  outline: 0
}

ul,
ol {
  margin: 0;
  padding-left: 0
}

ul li,
ol li {
  list-style: none
}

img {
  max-width: 100%;
  height: auto
}

img[src$=".svg"] {
  max-width: 100%;
  height: auto
}

svg {
  max-width: 100%;
  height: auto
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

.wrap {
  max-width: 1000px;
  width: calc(94% - 40px);
  margin: auto
}

@media screen and (min-width: 768px) {
  .wrap {
    width: 89.333%
  }
}

.pc {
  display: block
}

.sp {
  display: none
}

.notes {
  font-size: 1.2rem
}

.ib {
  display: inline-block
}

.txt-center {
  text-align: center
}

.txt-right {
  text-align: right
}

.sat {
  color: #0033e9
}

.sun,
.color-red {
  color: #e60012
}

@media screen and (max-width: 639px) {
  .pc {
    display: none
  }

  .sp {
    display: block
  }
}

@media screen and (max-width: 479px) {
  .sp-img {
    max-width: 160px
  }
}

.body-wrap {
  background: url(/kqdep/assets/images/event/marchecalendar_202606/cont-bg01.jpg);
  background-size: 20px auto;
  position: relative
}

.body-wrap::before,
.body-wrap::after {
  content: "";
  position: absolute;
  bottom: 10vw;
  width: 21%;
  padding-bottom: 10%;
  z-index: 0
}

.body-wrap::before {
  background: url(/kqdep/assets/images/event/marchecalendar_202606/ftr-deco01.png) left bottom no-repeat;
  background-size: contain;
  left: 30px
}

.body-wrap::after {
  background: url(/kqdep/assets/images/event/marchecalendar_202606/ftr-deco02.png) right bottom no-repeat;
  background-size: contain;
  right: 30px
}

@media screen and (min-width: 768px) {
  .body-wrap {
    background-size: 28px auto
  }

  .body-wrap::before,
  .body-wrap::after {
    bottom: 8rem;
    width: 11.7%;
    padding-bottom: 5%
  }

  .body-wrap::before {
    left: 50px
  }

  .body-wrap::after {
    right: 50px
  }
}

header {
  width: 93.4375%;
  margin: auto;
  background: url(/kqdep/assets/images/event/marchecalendar_202606/head-deco.png) center top 5rem no-repeat;
  background-size: 94%
}

header .wrap {
  padding-top: 9rem
}

header .head-ttl {
  width: 84.848%;
  margin: 0 auto 1.5rem;
  text-align: center
}

header .lead {
  font-family: "Noto Serif JP", serif;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 3rem
}

@media(min-width: 480px) {
  header .lead {
    font-size: calc(1.4rem + (1vw - 4.8px) * 0.4347826087)
  }
}

@media(min-width: 1400px) {
  header .lead {
    font-size: 1.8rem
  }
}

header .map {
  margin-bottom: 3rem;
  text-align: center
}

header .anchor-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-bottom: 5rem
}

header .anchor-list li {
  width: 32%;
  margin: 0 .5%
}

header .anchor-list li:nth-child(-n+3) {
  margin-bottom: 2rem
}

header .anchor-list li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 9vw;
  min-height: 3rem;
  background: #fff;
  text-align: center;
  padding: .7rem 1.2rem 1.5rem;
  position: relative;
  transition: .2s all ease-in-out
}

header .anchor-list li a::after {
  content: "";
  width: 8px;
  height: 8px;
  border: 2px solid;
  border-radius: 2px;
  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #231815 #231815;
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: rotate(-45deg) translateX(-50%)
}

header .anchor-list li:nth-child(1) a {
  border: 2px solid #bb6568
}

header .anchor-list li:nth-child(2) a {
  border: 2px solid #7c9d25
}

header .anchor-list li:nth-child(3) a {
  border: 2px solid #da9100
}

header .anchor-list li:nth-child(4) a {
  border: 2px solid #1c9cbd
}

header .anchor-list li:nth-child(5) a {
  border: 2px solid #7e7c7d
}

header .anchor-list li:nth-child(6) a {
  border: 2px solid #93683c
}

@media(hover: hover) {
  header .anchor-list a:hover {
    opacity: .7;
    transition: .4s
  }
}

@media screen and (min-width: 768px) {
  header {
    background: url(/kqdep/assets/images/event/marchecalendar_202606/head-deco.png) center top 7.5rem no-repeat;
    background-size: 100%
  }

  header .wrap {
    padding-top: 18rem
  }

  header .lead {
    margin-bottom: 6rem
  }

  header .map {
    margin-bottom: 7rem
  }

  header .anchor-list {
    margin-bottom: 8rem
  }

  header .anchor-list li:nth-child(-n+3) {
    margin-bottom: 3rem
  }

  header .anchor-list li a {
    height: 6rem;
    padding: 1rem 1rem 2rem
  }

  header .anchor-list li a::after {
    bottom: 1rem
  }
}

.cont-block {
  margin-bottom: 5rem
}

@media screen and (min-width: 768px) {
  .cont-block {
    margin-bottom: 8rem
  }
}

.cont-ttl {
  text-align: center;
  margin: 0 auto 5rem
}

@media screen and (min-width: 768px) {
  .cont-ttl {
    margin: 0 auto 8rem
  }
}

.cont-ttl .note {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: 1.2rem;
  font-weight: bold
}

@media(min-width: 480px) {
  .cont-ttl .note {
    font-size: calc(1.2rem + (1vw - 4.8px) * 0.1086956522)
  }
}

@media(min-width: 1400px) {
  .cont-ttl .note {
    font-size: 1.3rem
  }
}

.txt01 {
  font-size: 1.1rem
}

@media(min-width: 480px) {
  .txt01 {
    font-size: calc(1.1rem + (1vw - 4.8px) * 0.1086956522)
  }
}

@media(min-width: 1400px) {
  .txt01 {
    font-size: 1.2rem
  }
}

.copyright {
  font-size: 1rem;
  line-height: 1.4
}

@media(min-width: 480px) {
  .copyright {
    font-size: calc(1rem + (1vw - 4.8px) * 0)
  }
}

@media(min-width: 1400px) {
  .copyright {
    font-size: 1rem
  }
}

@media screen and (min-width: 768px) {
  .copyright {
    text-align: left
  }
}

.cont-list>li {
  padding: 4rem 1.5rem 3rem;
  position: relative;
  color: #fff
}

.cont-list>li:not(:last-child) {
  margin-bottom: 5rem
}

.cont-list>li .date-box {
  max-width: 290px;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: -2rem;
  margin: auto;
  padding: 1rem .5rem;
  background: #fff;
  color: #231815;
  font-weight: 700;
  text-align: center
}

.cont-list>li .list-inner01-l {
  position: relative;
  padding-bottom: 3rem;
  margin-bottom: 3rem
}

.cont-list>li .list-inner01-l::after {
  content: "";
  width: 100%;
  height: 1px;
  background: #fff;
  position: absolute;
  left: 0;
  bottom: 0
}

.cont-list>li .list-ttl {
  max-width: 400px;
  width: 100%;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  border: 2px solid #fff;
  padding: 1rem;
  margin: 0 auto 2rem;
  position: relative
}

@media(min-width: 480px) {
  .cont-list>li .list-ttl {
    font-size: calc(1.5rem + (1vw - 4.8px) * 0.1086956522)
  }
}

@media(min-width: 1400px) {
  .cont-list>li .list-ttl {
    font-size: 1.6rem
  }
}

.cont-list>li .list-ttl::before {
  content: "";
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border: 1px solid #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
}

.cont-list>li .list-ttl .sm {
  font-size: 85%
}

.cont-list>li .img-box {
  width: 83.333%;
  margin: 0 auto 1.5rem;
  text-align: center
}

.cont-list>li .txt-box p+p {
  margin-top: 1rem
}

.cont-list>li .bd-box {
  border: 1px solid #fff;
  padding: .5em
}

@media screen and (min-width: 768px) {
  .cont-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between
  }

  .cont-list>li {
    padding: 5rem 2rem 3rem
  }

  .cont-list>li:not(.w100) {
    width: 48%
  }

  .cont-list>li.w100 {
    width: 100%
  }

  .cont-list>li .list-inner01 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
  }

  .cont-list>li .list-inner01 .list-inner01-l,
  .cont-list>li .list-inner01 .list-inner01-r {
    width: 46%
  }

  .cont-list>li .list-inner01 .list-inner01-l {
    padding-bottom: 0;
    margin-bottom: 0
  }

  .cont-list>li .list-inner01 .list-inner01-l::after {
    width: 1px;
    height: 100%;
    left: auto;
    bottom: auto;
    right: -9%;
    top: 0
  }

  .cont-list>li .date-box {
    margin-right: auto;
    right: auto
  }

  .cont-list>li .list-ttl {
    margin-bottom: 3rem
  }

  .cont-list>li .list-detail {
    max-width: 300px;
    width: 100%;
    margin: auto
  }

  .cont-list>li .img-box {
    width: 100%;
    margin-bottom: 1rem
  }

  .cont-list>li .list-inner02 {
    display: flex;
    align-items: center;
    justify-content: space-between
  }

  .cont-list>li .list-inner02>.list-ttl {
    width: 31.914%;
    margin-bottom: 0
  }

  .cont-list>li .list-inner02>.list-detail {
    width: 66.489%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
  }

  .cont-list>li .list-inner02>.list-detail .img-box {
    width: 48%
  }

  .cont-list>li .list-inner02>.list-detail .txt-box {
    width: 48%
  }
}

.bg-line {
  margin-top: 5rem
}

@media screen and (min-width: 768px) {
  .bg-line {
    margin-top: 7rem
  }
}

.cont01 .cont-ttl {
  width: 60.606%
}

@media screen and (min-width: 768px) {
  .cont01 .cont-ttl {
    width: auto
  }
}

.cont01 .cont-list li {
  background: #bb6568
}

.cont01 .cont-list li:nth-child(3) .list-detail .img-box {
  margin-bottom: 0
}

.cont01 .cont-list li:nth-child(3) .list-detail {
  margin-top: 2em
}

@media screen and (min-width: 768px) {  
   .cont01 .cont-list li:nth-child(3) .list-detail {
    max-width: 100%;
    display: flex;
    justify-content: space-between
  }

  .cont01 .cont-list li:nth-child(3) .list-detail .img-box {
    width: 40.9090909091%
  }

  .cont01 .cont-list li:nth-child(3) .list-detail .txt-box {
    width: 50%
  } 

  .cont01 .cont-list li:nth-child(4) .list-detail {
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
  }

  .cont01 .cont-list li:nth-child(4) .list-detail .img-box {
    width: 47.72727%;
    margin-bottom: 0
  }

  .cont01 .cont-list li:nth-child(4) .list-detail .txt-box {
    width: 45.45455%
  }

}

.cont02 .block01 {
  margin-bottom: 5rem
}

.cont02 .block01 .cont-ttl {
  width: 60.606%
}

@media screen and (min-width: 768px) {
  .cont02 .block01 .cont-ttl {
    width: auto
  }
}

.cont02 .block01 .cont-list li {
  background: #7c9d25
}

.cont02 .cont-list li:nth-child(3) .list-detail+.list-detail {
  margin-top: 2em
}

.cont02 .cont-list li:nth-child(3) .list-detail .img-box {
  margin-bottom: 0
}

@media screen and (min-width: 768px) {
  .cont02 .cont-list li:nth-child(1) .list-detail {
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
  }

  .cont02 .cont-list li:nth-child(1) .list-detail .img-box {
    width: 47.72727%;
    margin-bottom: 0
  }

  .cont02 .cont-list li:nth-child(1) .list-detail .txt-box {
    width: 45.45455%
  }
  
  .cont02 .cont-list li:nth-child(3) .list-inner02>.list-detail {
    width: 34%;
    flex-direction: column
  }

  .cont02 .cont-list li:nth-child(3) .list-inner02>.list-detail+.list-detail {
    margin-top: 0
  }

  .cont02 .cont-list li:nth-child(3) .list-inner02>.list-detail .img-box {
    width: 100%
  }

  .cont02 .cont-list li:nth-child(3) .list-inner02>.list-detail .txt-box {
    width: 90%
  }
  
}

.cont02 .block02 .cont-ttl {
  max-width: 710px;
  width: 60.606%
}

@media screen and (min-width: 768px) {
  .cont02 .block02 .cont-ttl {
    width: auto
  }
}

.cont02 .block02 .cont-list li {
  background: #9e8f6e
}

@media screen and (min-width: 768px) {
}

.cont03 .cont-ttl {
  width: 60.606%
}

@media screen and (min-width: 768px) {
  .cont03 .cont-ttl {
    width: auto
  }
}

.cont03 .cont-list li {
  background: #da9100
}

@media screen and (min-width: 768px) {
}

.cont04 .cont-ttl {
  width: 75.757%
}

.cont04 .cont-list li .inner {
  display: flex;
  justify-content: center;
  -moz-column-gap: 14px;
  column-gap: 14px;
  margin-top: 1em
}

.cont04 .cont-list li .inner .img {
  max-width: 150px;
  width: 50%
}

@media screen and (min-width: 768px) {

  .cont04 .cont-list li:nth-child(1) .list-detail,
  .cont04 .cont-list li:nth-child(3) .list-detail{
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between
  }

  .cont04 .cont-list li:nth-child(1) .list-detail .img-box,
  .cont04 .cont-list li:nth-child(3) .list-detail .img-box{
    width: 47.72727%;
    margin-bottom: 0
  }
  
  .cont04 .cont-list li:nth-child(1) .list-detail .txt-box,
  .cont04 .cont-list li:nth-child(3) .list-detail .txt-box {
    width: 45.45455%
  }
}

.cont04 .cont-list li {
  background: #1c9cbd
}

.cont05 .cont-ttl .img {
  display: block;
  width: 69.23%;
  margin: auto
}

@media screen and (min-width: 768px) {
  .cont05 .cont-ttl .img {
    width: auto
  }
}

.cont05 .cont-ttl .ttl {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: 1.4rem;
  font-weight: 700
}

@media(min-width: 480px) {
  .cont05 .cont-ttl .ttl {
    font-size: calc(1.4rem + (1vw - 4.8px) * 0.4347826087)
  }
}

@media(min-width: 1400px) {
  .cont05 .cont-ttl .ttl {
    font-size: 1.8rem
  }
}

.cont05 .cont-list li {
  background: #7e7c7d
}

.cont05 .cont-list li:nth-child(2) .list-detail .img-box {
  margin-bottom: 0
}

.cont05 .cont-list li:nth-child(2) .list-detail+.list-detail {
  margin-top: 2em
}

@media screen and (min-width: 768px) {
   .cont05 .cont-list li:nth-child(2) .list-detail {
    max-width: 100%;
    display: flex;
    justify-content: space-between
  }

  .cont05 .cont-list li:nth-child(2) .list-detail .img-box {
    width: 40.9090909091%
  }

  .cont05 .cont-list li:nth-child(2) .list-detail .txt-box {
    width: 50%
  } 
  
  .cont05 .cont-list li:nth-child(1) .list-detail {
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
  }

  .cont05 .cont-list li:nth-child(1) .list-detail .img-box {
    width: 47.72727%;
    margin-bottom: 0
  }

  .cont05 .cont-list li:nth-child(1) .list-detail .txt-box {
    width: 45.45455%
  }
}

.page-top {
  position: fixed;
  right: 5%;
  bottom: 1rem;
  transition: .2s all ease-in-out;
  z-index: 100
}

.page-top a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 50%
}

.page-top a img {
  width: 45%;
  margin: auto
}

@media(hover: hover) {
  .page-top a:hover {
    opacity: .7;
    transition: .2s all ease-in-out
  }
}

@media screen and (min-width: 768px) {
  .page-top {
    right: 3.125%
  }

  .page-top a {
    width: 80px;
    height: 80px
  }

  .page-top a img {
    width: 30px
  }
}

footer {
  padding: 0 0 32vw;
  text-align: center
}

@media screen and (min-width: 768px) {
  footer {
    padding: 0 0 17rem
  }
}

footer p {
  font-family: "Noto Serif JP", serif;
  font-weight: 700
}

footer p+p {
  margin-top: 1rem
}

footer .logo-box {
  width: 60.606%;
  margin: 2rem auto 1.5rem
}

footer .link a {
  display: inline-block;
  margin: 2rem 0 3rem;
  position: relative
}

footer .link a::after {
  content: "";
  width: 10px;
  height: 10px;
  border: 2px solid;
  border-radius: 2px;
  border-color: #fff #fff rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  position: absolute;
  right: -1rem;
  top: 46%;
  transform: rotate(45deg) translateY(-50%)
}

@media(hover: hover) {
  footer .link a:hover {
    opacity: .7;
    text-decoration: underline;
    transition: .2s all ease-in-out
  }
}



