@charset "utf-8";
:root{
  --color01:#A4882C;
  --color02:#F0ECDD;
  --color03:#E6E6E6;
  /* --color04:#DEDEDE; */
}

/*
.allura-regular {
  font-family: "Allura", cursive;
  font-weight: 400;
  font-style: normal;
}

*/
*{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:"";display:block;clear:both}
.clearfix{display:block}
.hottopics{
  background:#FFF;
  font-family:'Noto Sans JP', sans-serif;
}
.hottopics p{margin-bottom:16px;line-height:1.75}
.hottopics .fontS{font-size:.875em}
.hottopics .htTxtC{text-align:center}
.hottopics .htFontS{font-size:.875em}
.hottopics .htFontM{font-size:1.4em}
.hottopics .htFontL{font-size:2em}
.hottopics .mb5{margin-bottom:5px}

.hottopics a{text-decoration:underline}
.hottopics a:hover{text-decoration:none}
.hottopics .skip{
	width:1px;
	color:#000;
	font-size:.1%;
	line-height:.1;
	position:absolute;
	left:-3000px;
	z-index:9999
}
.hottopics .kome{
  list-style:none;
  padding-left:1em
}
.hottopics .kome li{
  line-height:1.75;
  font-size:.875em
}
.hottopics .kome li span{
  display:inline-block;
  width:1em;
  margin-left:-1em
}

/*------------------------------------------------------------------------ .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}
.sns-post-box{
  margin-top:min(10vw,80px);
}
.sns-post-box .sclFb, .sns-post-box .sclTw, .sns-post-box .sclLine{vertical-align:top}
.sns-post-box .sclTw{padding:4px 10px 5px;background-color:#000;border:1px solid #333}
.sns-post-box .sclTw:hover{background-color:#333}
.sns-post-box .sclLine a{padding:4px 10px 2px}
/*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}
}
/*PC以上*/
@media screen and (min-width:1025px){
  .forTB,.forSP,.hiddenPC{display:none}
}

/*------------------------------ */
.htHeader{
  /* background:var(--color03) */
}
.htKV img{
  margin:0 auto;
}
.htHeadTxt{
  padding:min(8vw,52px) 0 min(6vw,36px);
}
.htHeadTxt h1{
  width:100%;
  margin-bottom:min(2vw,16px);
  font-size:min(9vw,3em);
  text-align:center;
  font-family: "Noto Serif JP", serif;
  font-weight:bold;
  line-height:1.5em;
}
.htHeadTxt .htDate{
  max-width:39em;
  padding:min(2vw,1em) .5em;
  margin:min(2vw,52px) auto 0;
  background-color:var(--color02);
  text-align:center;
}
.htHeadTxt p.htDateTxt{
  margin-bottom:0;
  font-weight:700;
  font-size:min(4.2vw,18px);
  color:var(--color01);
}
.htHeadTxt .htDate .htFontS{
  margin-bottom:0;
  font-size:.75em;
}
.htHeadNav{
  background-color:#333;
}
.htHeadNav ul{
  display:flex;
  flex-wrap:wrap;
  text-align:center;
  justify-content:center;
  margin-bottom:0;
  padding:0;
  list-style:none;
}
.htHeadNav ul li{
  position:relative;
  width:50%;
  padding:0;
  border-right:1px solid #666;
  border-bottom:1px solid #666;
}
.htHeadNav ul li::after{
  position:absolute;
  bottom:10px;left:calc(50% - 5px);
  display:block;
  content:"";
  width: 10px;
  height: 10px;
  border-right: 2px solid #FFF;
  border-bottom: 2px solid #FFF;
  transform: rotate(45deg);
  transition:all .3s
}
.htHeadNav ul li:hover::after{
  bottom:7px;
}
.htHeadNav a{
  display:flex;
  flex-wrap:wrap;
  align-content:center;
  justify-content:center;
  height:100%;
  padding:10px 4px 24px;
  font-size:min(3.4vw , .875em);
  line-height:1.4;
  font-weight:bold;
  color:#FFF;
  text-decoration:none;
  transition:all .3s
}
.htHeadNav a:hover{
  background-color:var(--color01)
}


@media screen and (max-width:599px){
  .pub .txtPub{display:block;width:100%;}
  .pub .snsBox{margin-top:.3em}
  .htHeadNav .content-wrap{
    width:100%;
    max-width:none;
  }
}
/*TB以上*/
@media screen and (min-width:600px){
  .htHeadNav ul li{
    width:25%;
    min-height:5em;
  }
  .htHeadNav ul li:first-of-type{
    border-left:1px solid #666;
  }
  .htHeadTxt{
    text-align:center;
  }
}
/* @media screen and (min-width:1400px){
  .htHeadNav ul li{
    width:calc(100% / 7)
  }
} */
/*___________________________________ */
.htMain{
  padding-bottom:min(10vw,56px)
}
.htMain ul{
  list-style:disc;
  margin-bottom:1em;
  padding-left:20px
}
.htMain table{
  border:none;
  margin-bottom:16px;
  line-height:1.75
}
.htMain th{
  background:var(--color03);
  border:none;
  line-height:1.5;
}
.htMain td{
  background:none;
  border:none;
  line-height:1.5;
}
.htMain table ul{
  margin-bottom:0
}
.htMain table ul.mb10{
  margin-bottom:10px;
}
.htBlock{
  padding:min(10vw,80px) min(2vw,16px) min(6vw,16px)
}
.htBlock h2{
  margin:0 auto clamp(4vw, .6em, 40px);
  font-family: "Noto Serif JP", serif;
  font-size:min(6vw,1.9em);
  line-height:1.3;
  letter-spacing: -.008em;
}
.htBlock .htTtl h2{
  position:relative;
  padding:min(1vw,.5em) min(2.4vw,1em) min(1.2vw,.6em);
  background-color:var(--color01);
  text-indent:1.2em;
  color:#FFF;
}
.htBlock .htTtl h2 span{
  position:absolute;
  top:-.5em;left:-5vw;
  display:flex;
  align-items:center;
  justify-content:center;
  width:1.2em;
  height:1.2em;
  padding-top:.2em;
  background-color:#333;
  font-family: "Allura", cursive;
  text-indent:0;
  font-size:1.7em;
  font-weight:normal;
}
.htBlock h3{
  margin-bottom:clamp(2vw, .6em, 24px);
  font-weight:600;
  font-size:min(5vw,1.4em);
  font-feature-settings:"palt"
}
.htBlock .htBox{
  margin-bottom:min(5vw, 40px)
}
.htImg{
  margin-bottom:min(4vw, 16px);
}
.htBtn{
  text-align:center
}
.htBtn a{
  display:inline-block;
  min-width:80%;
  padding:.8em 1em;
  border:1px solid var(--color01);
  cursor:pointer;
  text-decoration:none;
  color:var(--color01);
  font-weight:600;
  transition:all .3s
}
.htBtn a:hover{
  background-color:var(--color04);
  color: var(--color01) !important;
}
.htBtn a::after{
  display:inline-block;
  font-size:12px;
  font-weight:normal;
  margin-left:.5em;
  transition:all .3s
}
.htBtn a:hover::after{
  transform:translateX(4px)
}
.htBox2{
  border:1px solid #ddd;
  margin-bottom:min(5vw,16px)
}
.htSubBox{
  background-color:var(--color03);
  padding:16px 16px 1px;
  font-size:.875em;
}
.htMain .htBox2 table{
  border-bottom:2px solid var(--color03);
}
.htMain .htBox2 table td{
  border-left:none;
  border-right:none;
}
.htBox2 .htTxt2{
  padding:min(4vw,24px) min(4vw,24px) 0;
}
.htTxt2Time{
  display:block;
}
/*SP only*/
@media screen and (max-width:599px){
  .htMain table{
    border-bottom:8px solid var(--color03);
  }
  .htMain th{
    display:block;
    width:100%;
    padding:8px 0;
  }
  .htMain td{
    display:block;
    width:100%;
    padding:8px;
    border-left:8px solid var(--color03);
    border-right:8px solid var(--color03);
  }
  .htImg{
    width:100vw;
    margin-left:min(-2vw,-16px);
    margin-right:min(-2vw,-16px);
  }

}

/*TB以上*/
@media screen and (min-width:600px){
  .htMain .htPC-c{
    text-align:center;
  }
  .htMain table{
    border:8px solid var(--color03);
  }
  .htMain th{
    position:relative;
    min-width:6em;
  }
  .htMain th::after{
    content:"";
    position:absolute;
    z-index:2;
    bottom:-1px;left:-8px;right:0;
    display:block;
    width:calc(100% + 8px);
    height:2px;
    background-color:#FFF;
  }
  .htMain tr:last-child th::after{
    display:none;
  }
  .htMain td{
    border-bottom:2px solid var(--color03);
  }
  .htBlock .htTtl{
    text-align:center;
  }
  .htBlock .htTtl h2{
    display:inline-block;
    padding-left:.5em;
  }
  .htBox{
    display: grid;
    grid-template-columns: repeat(1, 50em);
    justify-content:center;
  }
  #collab .htBox{
    grid-template-columns: repeat(2, 1fr);
  }
  #collab .htTxt{
    padding-left:min(4vw, 64px);
  }
  
  /* .htImg{
    width:50%;
  }
  .htTxt{
    width:50%;
    padding-left:40px;
  } */

  .htBtn{
    margin-top:2em;
  }
  .htBtn a{
    min-width:20em;
    padding:1.5em 3em;
  }
  .htBlock .htTtl h2 span{
    left:-.5em;
  }
  .htBox2Wrap{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:0 min(4vw,64px);

  }
  .htBox2{
    display:flex;
    flex-wrap:wrap;
  }
  .htMain .htBox2 table{
    border-right:none;
    border-top:2px solid var(--color03);
  }
  .htTxt2Time{
    padding-left:1em;
  }
  .htLiveYokohama{
    float:left;
    margin:0 16px 10px 0;
  }
  .htSubBox{
    margin-top:16px;
    align-self:flex-end
  }
}

/*__________________________#about*/

#about{
  background-color:var(--color02);
}
#about h2{
  text-align:center;
}
.hottopics p.htAboutHead{
  margin:0;
  text-align:center;
}
.hottopics p.htAboutHead::before,.hottopics p.htAboutHead::after{
  content:" - ";
}
.htAboutDetails{
  display:grid;
  grid-template-columns:4em auto;

}
.htAboutDetails dt,.htAboutDetails dd{
  border-bottom:1px solid var(--color01);
  padding-bottom:.5em;
  margin-bottom:.5em;
}
.htAboutDetails dt{
  font-weight:bold;
}
.htAboutDetails dd ul{
  margin:0;
}