@charset "utf-8";
*{box-sizing:border-box}
@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?9mgnyj');src:url('../fonts/icomoon.eot?9mgnyj#iefix')format('embedded-opentype'),url('../fonts/icomoon.ttf?9mgnyj')format('truetype'),url('../fonts/icomoon.woff?9mgnyj')format('woff'),url('../fonts/icomoon.svg?9mgnyj#icomoon')format('svg');font-weight:normal;font-style:normal}
[class^="icon-"]::after,[class*="icon-"]::after{font-family:'icomoon'!important;speak:none;font-style:normal;font-variant:normal;text-transform:none;/*line-height:1;*/}
.icon-arrow-t:after{content:"\e908"}
.icon-arrow-b:after{content:"\e909"}
.icon-arrow-l:after{content:"\e90a"}
.icon-arrow-r:after{content:"\e90b"}
.clearfix:after,.clearfix:before{content:"";display:block;clear:both}
.clearfix{display:block}
.hottopics p{margin-bottom:1em}
.hottopics a{text-decoration:underline;transition:.2s;}
.hottopics a:hover{text-decoration:none}
.skip {
	width:1px;
	color:#000;
	font-size:.1%;
	line-height:.1;
	position:absolute;
	left:-3000px;
	z-index:9999
}
.hottopics ul.kome{margin-bottom:1em;padding-left:1.5em}
table + ul.kome{margin-top:-.5em}
.hottopics ul.kome li:before{display:inline-block;width:1.5em;content:'※';margin-left:-1.5em}
.hottopics .mb0{margin-bottom:0}
.hottopics .mb05em{margin-bottom:.5em}
/*------------------------------------------------------------------------ .htHeader */
.twitter{display:inline-block}
.twitter iframe{vertical-align:bottom}
.fb-share-button{display:inline-block !important;vertical-align:top !important}
.fb-share-button span{vertical-align:top !important}
.fb-share-button iframe{max-width:none !important}

/*------------------------------ */
.htHeader{
  background:#000
}
.htHeadTtl{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  /* aspect-ratio: 48 / 23; */
  aspect-ratio:1/1;
  background:url(../img/bg_ttl_sp.webp) no-repeat top center/100% auto #000;
  position:relative;
}
.htHeadTtl h1{
  position:relative;
  width:100%;
  max-width:780px;
  /* width:calc((100%*1354)/1920);
  margin:0 auto; */
  text-align:center;
}
.htHeadTtlYear{
  position:absolute;
  /* 
  width:calc((100%*352)/1354); */
  top:0;right:7vw;
  width:calc((100%*352)/1190);
  animation: floatAnimation 3s ease-in-out infinite alternate;
}
@keyframes floatAnimation {
  0% {transform: translateY(0);}
  100% {transform: translateY(-15px); /* 上に15px動く */}
}
.htHeadCap{
  padding:16px 16px 1px;
  color:#FFF
}
.htHeadCap .snsBox{
  display:flex;
  justify-content:space-around;
  align-items:center;
  max-width:340px;
  padding:4px;
  margin:0 auto 16px;
  background-color:#555;
  border-radius: 4px;
}
.htAnchor {
  padding:0 16px 20px
}
ul.htAnchorList{
  margin-bottom:16px;
}
ul.htAnchorList li{
  margin-bottom:5px;
}
ul.htAnchorList a {
  display:block;
  padding:5px;
  background-color:#EC6C00;
  border-radius:4px;
  text-align:center;
  font-weight:bold;
  color:#FFF;
  text-decoration:none;
}
ul.htAnchorList a:hover{
  padding:8px 5px 2px;
  background:#A5308C;
}
ul.htAnchorList a::after{
  display:inline-block;
  margin-left:10px;
  font-size:12px
}
.htHeader .kome{
  text-align:left;
  font-size:.75em;
  color:#FFF;
}
/*------------------------------------------------------------------------ htBox */
.htGroup{
  padding:24px 0 32px;
  margin-bottom:16px;
  background-repeat:repeat-x;
  background-position:50% 100%;
  background-size:auto 40px
}
.htTtl{
  position:relative;
  width:100%;
  z-index:1
}
.htTtl::before,.htTtl::after{
  content:'';
  position:absolute;
  bottom:-10px;
  z-index:-2;
  width:10px;
}
.htTtl::before {
  left:-2vw;
  border-left-color:transparent!important;
}
.htTtl::after {
  right:-2vw;
  border-right-color:transparent!important;
}
.htTtl h2{
  position:relative;
  display:block;
  width:calc(100% - 15px);
  margin:0 auto;
  padding:6px 0;
  text-align:center;
  line-height:0
}
.htTtl h2::before,.htTtl h2::after{
  content:'';
  position:absolute;
  top:100%;
  border-bottom:solid 10px transparent;
}
.htTtl h2::before{
  left:0;
}
.htTtl h2::after{
  right:0;
}
.htTtl h2 img{
  height:7.5vw;
  margin:0 auto
}
.htTtl h2 span{
  position:relative;
  display:block;
  padding:0 12vw;
}
.htTtl h2 span::before,.htTtl h2 span::after{
  content:"";
  position:absolute;
  bottom:0;
  display:block;
  width:12vw;
  height:9.75vw;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:contain
}
.htTtl h2 span::before{
  left:0;
}
.htTtl h2 span::after{
  right:0;
}


#event .htTtl h2 span::before{background-image:url("../img/ttl-img4.png")/*おばけ*/}
#event .htTtl h2 span::after{background-image:url("../img/ttl-img6.png")/*魔女*/}
#afternoontea .htTtl h2 span::before{background-image:url("../img/ttl-img3.png")/*ねこ*/}
#afternoontea .htTtl h2 span::after{background-image:url("../img/ttl-img2.png")/*おかし*/}
#food .htTtl h2 span::after{background-image:url("../img/ttl-img1.png")/*かぼちゃ*/}
#food .htTtl h2 span::before{background-image:url("../img/ttl-img5.png")/*棺桶*/}





.htBox{
  padding:0 10px 20px 10px;
  border-bottom:1px solid #666;
}
.htBox:last-of-type{
  border-bottom:none
}
.htBspot{
  position:relative;
  display:inline-block;
  width:100%;
  margin-top:15px;
  padding:2px 10px;
  margin-bottom:10px;
  text-align:center;
  font-weight:bold;
  font-size:85.71%;
}
.htBspot::before,.htBspot::after{
  content:"";
  position:absolute;
  top:-15px;
  display:block;
  width:4px;
  height:15px;
}
.htBspot::before {
  left:20px;
}
.htBspot::after{
  right:20px
}
.htBox h3{
  margin:10px 0 .2em;
  font-size:1em
}
.htBox h4{
  margin-bottom:16px;
  font-size:min(5.4vw, 1.4em)
}
.hottopics p.htBsub{
  position:relative;
  padding:.5em;
  margin-bottom:12px;
  background-color:rgba(255,255,255,.4);
  border-radius:4px;
  border:2px solid #000;
  font-weight:bold;
}
.htBsub::before,.htBsub::after{
  content:'';
  position:absolute;
  left:1em;
  width:0;height:0;
  border-width:9px 8px 0;
  border-style:solid;
}
.htBsub::before{
  bottom:-9px;
  border-color:#000 transparent transparent;
}
.htBsub::after{
  bottom:-6px;
  border-color:#f7f4ee transparent transparent;
}
.htBox table{
  border:none
}
.htBox table th{
  padding-left:0;
  border-right:none;
  border-bottom:1px #000 dotted;
  background:none;
  text-align:left;
  white-space:nowrap;
  vertical-align:top
}
.htBox table td{
  padding:.5em 0;
  border-right:none;
  border-bottom:1px #000 dotted;
  background:none;
}
.htBox table td ul{
	list-style:disc;
	margin-left:1em
}

.htPlus{
  position:relative;
  margin:16px 0;
  padding:16px 10px 2px;
  background:#F4F2F8;
}
.htPlusTtl{
  position:relative;
  display:inline-block;
  margin:0 auto 8px -16px;
  padding:2px 40px 2px 10px;
  background:#58085a;
  color:#ffd544;
  text-align:center;
  font-weight:bold;
  font-size:.9em;
}
.htPlusTtl::after,.htPlusTtl::before{
  content:'';
  position:absolute;
}
.htPlusTtl::after {
  top:50%;right:0;
  width:0;
  height:0;
  z-index:1;
  margin-top:-20px;
  border-width:20px 15px 20px 0px;
  border-color:transparent #F4F2F8 transparent transparent;
  border-style:solid;
}
.htPlusTtl::before {
  top:100%;
  left:0;
  border:none;
  border-bottom:solid 8px transparent;
  border-right:solid 6px #370538;
}
.htPlus h4{
  margin-bottom:.3em;
  font-size:inherit;
  color:#58085a;
}
.htPlus .htBtn{
  margin-bottom:1em!important;
}
.htPlus.htPlusPhoto .htPlusImg{
  margin:6px 0 10px;
}
.htBtn{
  text-align:center
}
.htBtn a {
  position:relative;
  display:inline-block;
  width:60%;
  padding:.3em .6em;
  border-radius:4px;
  transition:none;
  box-shadow:0 3px #c14a0a;
  background:#EC6C00;
  color:#FFF;
  text-decoration:none;
  font-weight:bold;
}
.htBtn a:hover{
  box-shadow:none;
  top:3px
}
#etcEvent {
  padding:10px 10px 0;
  border:8px solid #F2EDF6;
  background:repeating-linear-gradient(90deg,#F2EDF6,#F2EDF6 16px,#FFF 0,#FFF 32px);
}
#etcEvent h2{
  width:100%;
  margin:0 auto;
  color:#7b49a5;
  text-align:center;
  font-size:140%;
}
.htBnr a{
  display:block;
  padding:16px;
  margin:16px auto;
  background:#fff;
  text-align:center;
}


/*__________________________黄色*/
#map,#afternoontea,#plan{
  background-image:url("../img/bg_group01.png");
  background-image:url("../img/bg_group01.webp");
  background-color:#f2ece2;
}
#map .htTtl::before,#map .htTtl::after,
#afternoontea .htTtl::before,#afternoontea .htTtl::after,
#plan .htTtl::before,#plan .htTtl::after{
  border:15px solid #451046;
}
#map .htTtl h2,#afternoontea .htTtl h2,#plan .htTtl h2{
  background:-webkit-repeating-linear-gradient(-45deg, #611562, #611562 3px,#58085a 3px, #58085a 7px);
  background:repeating-linear-gradient(-45deg, #611562, #611562 3px,#58085a 3px, #58085a 7px);
}
#map .htTtl h2::before,#afternoontea .htTtl h2::before,#plan .htTtl h2::before {
  border-right:solid 15px #28002d;
}
#map .htTtl h2::after,#afternoontea .htTtl h2::after,#plan .htTtl h2::after {
  border-left:solid 15px #28002d;
}
#afternoontea .htBspot,#afternoontea .htBspot:before,#afternoontea .htBspot:after,
#plan .htBspot,#plan .htBspot:before,#plan .htBspot:after{
  background:#ffb500;
  color:#58085a;
}

/*__________________________紫*/
#event, #food{
  background-image:url("../img/bg_group02.png");
  background-image:url("../img/bg_group02.webp");
  background-color:#eae4f1;
}
#event .htTtl::before,#event .htTtl::after,
#food .htTtl::before,#food .htTtl::after{
  border:15px solid #f5a50a;
}
#event .htTtl h2,#food .htTtl h2{
  background:-webkit-repeating-linear-gradient(-45deg, #ffc026, #ffc026 3px,#ffb500 3px, #ffb500 7px);
  background:repeating-linear-gradient(-45deg, #ffc026, #ffc026 3px,#ffb500 3px, #ffb500 7px);
}
#event .htTtl h2::before,#food .htTtl h2::before {
  border-right:solid 15px #e38210;
}
#event .htTtl h2::after,#food .htTtl h2::after {
  border-left:solid 15px #e38210;
}
#event .htBspot,#event .htBspot:before,#event .htBspot:after,
#food .htBspot,#food .htBspot:before,#food .htBspot:after{
  background:#58085a;
  color:#ffd544;
}
#map .htMapLead{
  width:100%;
  padding:24px 10px 0;
}
.htMap {
  margin:0 10px 16px;
  width:calc(100% - 20px);
  aspect-ratio:3 / 4
}
.htMap iframe {
  width: 100%;
  height: 100%;
}
/*SP only*/
@media screen and (max-width:599px){
  .pub .snsBox{
    margin-top:.3em
  }
  .forPC,.forTB,.hiddenSP{display:none}
}
/*TB only*/
@media screen and (min-width:600px) and (max-width:1024px){
  .forPC,.forSP,.hiddenTB{display:none}
  .htBox::after{content:"";display:block;clear:both}
  /* .htHeadTtl h1 img{
    width:75%
  } */
  .htBimg{
    width:50%;
    float:right;
    margin-bottom:16px
  }
  .htBlead{
    width:50%;
    padding:0 16px 0 0
  }

}
/*TB以上*/
@media screen and (min-width:600px){
  ul.htAnchorList{
    display:flex;
    flex-wrap:wrap;
  }
  ul.htAnchorList li{
    width:33.333333%;
    padding:0 10px 15px;
  }
  .htGroup{
    padding:32px 0 62px;
    background-size:auto 70px
  }
  .htTtl::before{
    left:10px;
    border-width:20px!important
  }
  .htTtl::after{
    right:10px;
    border-width:20px!important
  }
  .htTtl h2{
    width:calc(100% - 70px)
  }
  .htTtl h2 img{
    height:48px
  }
  .htTtl h2 span{
    padding:0 96px;
  }
  .htTtl h2 span::before,.htTtl h2 span::after{
    bottom:-14px;
    width:80px;
    height:65px;
  }
  .htTtl h2 span::before{
    left:min(2vw,24px);

  }
  .htTtl h2 span::after{
    right:min(2vw,24px);
  }
  .htBnr{
    display:flex;
    margin-left:-5px;
    margin-right:-5px;
  }
  .htBnr h3{
    width:100%;
    padding:0 5px
  }
  .htPlus{
    margin:0 0 24px;
    padding:16px 16px 1px
  }
  .htPlusTtl{
    margin:0 auto 16px -22px;
  }
  #map .htMapLead{
    text-align:center;
  }
  .htMap {
    aspect-ratio:16 / 9;
  }
  #etcEvent{
    margin:40px auto;
  }
  .htBnr a{
    margin:16px;
  }
}
/*PC以上*/
@media screen and (min-width:1025px){
  .forTB,.forSP,.hiddenPC{display:none}

  .htHeadTtl{
    aspect-ratio: 48 / 23;
    background:url(../img/bg_ttl_pc.webp) no-repeat top center/100% auto #000;
  }
  .htHeadTtl h1{
    width:calc((100%*1354)/1920);
    max-width:1920px;
  }
  .htHeadTtl h1 img{
    width:calc((100%*1190)/1354);
    margin:0 auto;
  }
  .htHeadTtlYear{
    width:calc((100%*352)/1354);
    top:33%;right:0;
  }
  .htHeadCap{
    max-width:800px;
    margin:0 auto;
    text-align:center
  }
  .htAnchor{
    max-width:800px;
    margin:0 auto;
    padding:16px 16px 32px
  }

  .htGroup{
    display:flex;
    flex-wrap:wrap;
    padding:40px 20px 62px;
  }
  .htGroup .htTtl{
    margin-bottom:24px
  }
  .htTtl::before{
    left:20px
  }
  .htTtl::after{
    right:20px
  }
  .htTtl h2{
    width:calc(100% - 90px)
  }
  .htBox{
    display:flex;
    flex-direction:column;
    width:50%;
    padding:0 20px 40px;
    border-bottom:none
  }
  .htBspot{
    width:auto;
    min-width:12em;
    margin:0 auto 10px 0;
    padding:4px 10px
  }
  .htBspot::before,.htBspot::after{
    top:auto;bottom:-10px;
    height:10px;
  }
  .htBtn{
    margin-top:auto
  }
  #etcEvent{
    padding:24px 40px
  }
  .htBnr{
    max-width:980px;
    margin:0 auto;
  }
  .htBnr h3{
    padding:8px 20px 0
  }
  /* .htPlus{
    margin:32px 40px 0;

  }
  .htPlusTtl{
    position:absolute;
  }
  .htPlusTxt{
    width:55%;
    float:left;
    margin-top:3em;
    padding-right:24px;
  }
  .htPlusDate{
    width:45%;
    margin-top:3em;
  }
  .htPlus.htPlusPhoto .htPlusImg{
    width:45%;
    float:right;
    margin-bottom:1em;
  }   */
  #map .htMapLead{
    padding:20px;
  }
  .htMap {
    margin:0 20px 16px;
    width:100%;
    aspect-ratio:16 / 9;
  }
}