@charset "utf-8";
:root{
  --color01:linear-gradient(180deg,#ec77b5 0%,#c069d1 100%);
  --color02:#00CC99;
  --color03:#1F497D;
  --color04:#fff15b;
  --color05:#D2101D;
}
@font-face{
  font-family:'icomoon';
  src:url('../fonts/icomoon.eot?xqc86u');
  src:url('../fonts/icomoon.eot?xqc86u#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?xqc86u') format('truetype'),
    url('../fonts/icomoon.woff?xqc86u') format('woff'),
    url('../fonts/icomoon.svg?xqc86u#icomoon') format('svg');
  font-weight:normal;
  font-style:normal;
  font-display:block}

[class^="icon-"]::after, [class*=" icon-"]::after,.ht-anchor ul a:after,.htBtn a::after{
  font-family:'icomoon' !important;
  speak:never;
  font-style:normal;
  font-weight:normal;
  font-variant:normal;
  text-transform:none;
  line-height:1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}
.icon-plus::after{content:"\e901"}
.icon-minus::after{content:"\e911"}
.icon-search-l::after{content:"\e902"}
.icon-blank::after{content:"\e903"}
.icon-arrow-t::after{content:"\e908"}
.icon-arrow-b::after,.ht-anchor ul a::after{content:"\e909"}
.icon-arrow-l::after{content:"\e90a"}
.icon-arrow-r::after,.htBtn a::after{content:"\e90b"}
.icon-instagram::after{content:"\ea92"}

*{box-sizing:border-box;}
.clearfix:after,.clearfix:before{content:"";display:block;clear:both}
.clearfix{display:block}
.hottopics{
  font-family:'Noto Sans JP', sans-serif;
  font-feature-settings:"palt";
  background:url(../img/bg_body.webp) repeat;
  margin-bottom:min(15vw,100px);
}
.hottopics p{margin-bottom:1em;line-height:1.75;}
.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;
  margin:.5em 0;
}
.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 .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;}

/*------------------------------ */
.hottopics{
  position:relative;
  overflow:hidden;
}
.htHeader{
  padding-top:min(2.5vw,32px);
}
.htHeader .htFontL{
  font-size:1.6em
}
.htHeadTxt{
  background-color:#FFF;
  padding:min(4vw,52px);
  border-radius:0 0 min(2.5vw, 16px) min(2.5vw, 16px);
}
.htHeadTxt .htLogo img{
  margin:0 auto;
}
.htHeadTxt .htLogo{
  margin-bottom:min(4vw,40px);
}
.htHeadTxt h1{
  width:100%;
  margin-bottom:min(4vw,40px);
  color:var(--color03);
  text-align:center;
  font-size:min(4vw,1.8em);
  line-height:1.5;
}
.htHeadTxt h1 img{
  max-width:510px;
  width:100%;
  margin:0 auto;
}
/* .htHeadTxt h1 strong{
  display:block;
  margin-bottom:.3em;
  line-height:1.5;
  font-size:min(4.9vw,1.5em);
}
.htHeadTxt h1 span{
  display:inline-block
} */
.htHeadDate{
  width:100%;
  margin:0 auto;
  padding:.5em .5em .8em;
  color:var(--color02);
  text-align:center;
  font-weight:bold;
  border:1px solid var(--color02)
}
.htHeadDate dt.htSpot{
  border-top:1px solid var(--color02);
  margin-top: .5em;
  padding-top: .3em;
}
.comingsoon{
  margin:min(6vw, 52px) auto 16px;
  display:inline-block;
  padding:min(8vw,40px) min(5vw,40px);
  border-radius:10px;
  background:var(--color01);
  color:#FFF;
}
.comingsoonEN{
  font-size: min(8vw, 3em);
}
.comingsoon p{
  margin-bottom:0;
}
.ht-anchor{
  padding-top:min(5vw,56px);
  padding-bottom:min(5vw,56px);
}
.ht-anchor ul{
  display:flex;
  flex-wrap:wrap;
  text-align:center;
  justify-content:center;
  margin-left:-4px;
  margin-right:-4px;
}
.ht-anchor ul li{
  width:50%;
  padding:4px;
}
.ht-anchor ul a{
  display:flex;
  flex-wrap:wrap;
  align-content:center;
  justify-content:center;
  height:100%;
  min-height:5.5em;
  background-color:var(--color04);
  border-radius:8px;
  padding:14px 4px 4px;
  color:var(--color03);
  font-size:min(3.4vw , .875em);
  line-height:1.4;
  font-weight:bold;
  text-decoration:none;
  transition:all .3s
}
.ht-anchor ul a:hover{
  background-color:var(--color03);
  color:var(--color04);
}
.ht-anchor ul a:after{
  width:100%;
  margin-top:4px;
  font-size:12px;
  font-weight:normal
}
.ht-anchor ul a:hover::after{
  transform:translateY(4px)
}



/*___________________________________ */
.htMain{
  padding-bottom:1.5em;
}
.htMain ul{
  list-style:disc;
  margin-bottom:1em;
  padding-left:20px
}
.htMain .mb5{
  margin-bottom:5px
}
.htMain .htFontS{
  font-size:.8em
}
.htMain .htFontM{
  font-size:1.2em
}
.htMain .htFontL{
  font-size:2em
}
.htMain table ul{
  margin-bottom:0;
}
.htMain table ul li{
  line-height:1.4;
}


.htBlock{
  position:relative;
  z-index:2;
  background-color:#FFF;
  border-radius:min(2.5vw,16px);
  margin-bottom:min(6vw,80px)
}

.htBlock::after{
  content:"";
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  z-index:-1;
  right:-24px;bottom:-24px;
  overflow:hidden;
  border-radius:min(2.5vw,16px);
  background:url(../img/bg_cont.png) repeat center center/10px;
}
.htBlock h2{
  color:var(--color02);
  text-align:center;
  line-height:1.5;
}
.htBlock h3{
  color:var(--color02);
  font-size:min(4.5vw,1.3em);
}
.htTtl{
  padding-bottom:min(calc(10vw*30/170),15px);
  background:url(../img/bg_ttl.svg) repeat-x bottom center/min(10vw,85px) auto;
  margin-bottom:min(5vw,32px)
}
.htTtl h2{
  border-radius:min(2.5vw,16px) min(2.5vw,16px) 0 0;
  padding:min(4vw,24px) min(4vw,80px);
  background:var(--color02);
  font-size:min(4vw,1.4em);
  color:#FFF;
}
.htTtl h2 strong{
  display:block;
  font-size:min(5vw,1.4em);
  line-height:1.5;
}
.htTtl h2 span{
  display:inline-block;
}
.htLead{
  padding:0 min(4vw,80px) min(calc(4vw - 1em),calc(80px - 1em));
}
.htDetails{
  padding:0 min(4vw,80px) min(4vw,80px);
}
.htDetails dt{
  padding:1rem 0;
  font-weight:bold;
  color:var(--color02);
  font-size:1.1em;
  border-top:1px dashed var(--color03);
}
.htDetails dd{
  padding:0 0 1rem;
}
.htDetails dd table{
  margin-bottom:0;
}
.htPspotList{
  border:none;
}
.htPspotList tbody th{
  border:none;
  border-top:1px dotted #999;
  background-color:rgba(0,204,153,.1);

}
.htPspotList tbody td{
  border:none;
}
.htImg{
  padding:0 0 min(4vw,32px);
}
.htImg img{
  margin:0 auto;
}
.htBtn{
  width:100%;
  margin:min(6vw,32px) auto 0;
  width:min(70vw,30em)
}
.htBtn a{
  position: relative;
  display:block;
  padding:.7em 1.5em calc(.8em + 5px);
  background:#fff15b;
  box-shadow:inset 0 -5px 0 0 rgba(0, 0, 0, .2);
  border-radius:8px;
  text-align:center;
  color:var(--color03);
  font-weight:bold;
  text-decoration:none;
  transition:none;
}
.htBtn a:hover{
  height: calc(100% - 5px);
  transform: translateY(5px);
  box-shadow:none
}
.htBtn a::after{
  margin-left:.5em;
  font-size:.7em;
}
.htStickerImg{
  text-align:center;
}
.htStickerImg img{
  margin:0 auto;
}
.htStickerImg p{
  margin:5px auto 0;
}
#intro.htBlock{
  padding:min(10vw,80px) min(4vw,80px);
}
#intro.htBlock h2{
  font-size: min(5vw, 1.6em);
}
#intro.htBlock h3{
  margin:min(5.5vw,2em) 0 .3em;
}
.sns-post-box{
  margin-top:min(12vw,80px);
}
/*SP only*/
@media screen and (max-width:599px){
  .pub .snsBox{
    margin-top:.3em
  }
  .forPC,.forTB,.hiddenSP{display:none}
  .htPspotList thead th{
    display:none;
  }
  .htPspotList th{
    display:block;
    width:100%;
  }
  .htPspotList td{
    display:block;
    width:100%;
    padding-bottom:.8em;
  }
  .htPspotList td::before {
    display: block;
    margin: 4px 0;
    content: attr(data-label);
    font-weight: bold;
  }
}
/*TB only*/
@media screen and (min-width:600px) and (max-width:1024px){
  .forPC,.forSP,.hiddenTB{display:none}
}

/*TB以上*/
@media screen and (min-width:600px){
  .ht-anchor ul li{
    width:25%;
  }
  .htHead-nav ul li:nth-child(6){
    border-left:1px solid #666;
  }
  .htHeadTxt{
    text-align:center;
  }
  .htHeadDate{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    max-width:30em;
    margin-top:32px;
  }
  .htHeadDate dt{
    width:5em;
    border-right:1px solid var(--color02);
  }
  .htHeadDate dd{
    width:calc(100% - 5em);
  }
  .htHeadDate .htSpot{
    border-top:none!important;
    margin-top: .5em;
    padding-top: .3em;
  }
  .htMain th{
    min-width:9em;
    border-bottom:1px solid rgba(255,255,255,.3);
  }
  .htBtn{
    margin-top:2em;
  }
  .htBtn a{
    padding:1.2em 3em calc(1.3em + 5px);
  }
  .htDetails dl{
    display:flex;
    flex-wrap:wrap;
  }
  .htDetails dt{
    width:18rem;
    padding:2rem 0;
    margin-right:2px;
  }
  .htDetails dd{
    width:calc(100% - 18rem - 2px);
    border-top:1px dashed var(--color03);
    padding:2rem 0;
  }
  .htPspotList thead th{
    background-color:var(--color02);
    color:#FFF;
    border-right:2px solid #FFF;
  }
  .htPspotList tbody td{
    border-top: 1px dotted #999;
  }
  .htPspotList td{
    padding:1em .5em;
  }

}
@media screen and (min-width:800px){
  .htHeadTxt h1 img{
    max-width:100%;
  }
}
/*PC以上*/
@media screen and (min-width:1025px){
  .forTB,.forSP,.hiddenPC{display:none}
  .htLead{
    text-align:center;
  }
}
@media screen and (min-width:1170px){
}
@media screen and (min-width:1300px){
}