@charset "utf-8";
:root{
  --color01:linear-gradient(180deg,#ec77b5 0%,#c069d1 100%);
  --color02:#00CC99;
  --color03:#D2101D;
  --color04:;
  --color05:#FFDC00;
}
@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,.htHead-nav a:after,.htBtn a span::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,.htHead-nav a::after{content:"\e909"}
.icon-arrow-l::after{content:"\e90a"}
.icon-arrow-r::after,.htBtn a span::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;
}
.hottopics p{margin-bottom:1em;line-height:1.75;}
.hottopics .fontS{font-size:.875em;}
.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 .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);
}

.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);
  line-height:1.5;
  color:#1F497D;
  text-align:center;
  font-size:min(5vw,2.6em);
}
.htHeadTxt h1 span{
  display:block;
  margin-top:.3em;
  font-size:.7em;
}
/* .hottopics p.htHeadSubttl{
  display:block;
  max-width:80%;
  margin:0 auto min(4vw,40px);
  font-size:min(4.9vw,2.4em);
  text-align:center;
  line-height:1.5;
  font-weight:bold;
} */
.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;
}
.htHeadDate .fontL{
  font-size:1.6em
}
.htHead-nav{
  background-color:#333
}
.htHead-nav .content-wrap{
  width:100%;
  max-width:none;
}
.htHead-nav ul{
  display:flex;
  flex-wrap:wrap;
  text-align:center;
  justify-content:center;
}
.htHead-nav ul li{
  width:50%;
  padding:0;
  border-right:1px solid #666;
  border-bottom:1px solid #666;
}
.htHead-nav a{
  display:flex;
  flex-wrap:wrap;
  align-content:center;
  justify-content:center;
  height:100%;
  padding:10px 4px 8px;
  font-size:min(3.4vw , .875em);
  line-height:1.4;
  font-weight:bold;
  color:var(--color02);
  text-decoration:none;
  transition:all .3s
}
.htHead-nav a:hover{
  background-color:#000
}
.htHead-nav a:after{
  width:100%;
  margin-top:4px;
  font-size:12px;
  font-weight:normal
}
.htHead-nav a:hover::after{
  transform:translateY(4px)
}

.comingsoon{
  margin:min(6vw, 52px) auto 16px;
  display:inline-block;
  padding:min(8vw,40px);
  border-radius:10px;
  background:var(--color01);
  color:#FFF;
}
.comingsoonEN{
  font-size: min(8vw, 3em);
}

/*___________________________________ */
.htMain{
  padding-top:min(10vw,80px);
  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 .htBox1 table{
  border:3px solid rgba(255,255,255,.4);
  border-collapse:separate;
  border-spacing:16px
}
.htMain .htBox1 th{
  background:none;
  border:none;
  color:var(--color02);
  font-size:1.3em
}
.htMain .htBox1 td{
  background:none;
  border:none;
  border-bottom:1px solid rgba(255,255,255,.3);
  line-height:1.75
}
.htMain .htBox1 tr:last-of-type th,.htMain .htBox1 tr:last-of-type td{
  border-bottom:none
}
.htMain table ul{
  margin-bottom:0;
}
.htMain table ul li{
  line-height:1.4;
}
.htMain table ul.htBorder li:not(:last-of-type){
  padding-bottom:.5em;
  margin-bottom:.5em;
  border-bottom:1px dotted rgba(255,255,255,.3);
}
.htMain table ul.mb10{
  margin-bottom:10px;
}


.htMain .htBox2 table{
  border:none
}
.htMain .htBox2 th{
  background:none;
  border-right:none;
  border-bottom:1px solid rgba(255,255,255,.3);
  color:var(--color02);
  white-space:nowrap;
  padding-left:0;
}
.htMain .htBox2 td{
  background:none;
  border:none;
  padding-right:0;
  border-bottom:1px solid rgba(255,255,255,.3);
}

.htMain table ul{
  margin-bottom:0;
}
.htMain table ul li{
  line-height:1.4;
}
.htMain table ul.htBorder li:not(:last-of-type){
  padding-bottom:.5em;
  margin-bottom:.5em;
  border-bottom:1px dotted rgba(255,255,255,.3);
}
.htMain table ul.mb10{
  margin-bottom:10px;
}

.htBlock{
  position:relative;
  z-index:2;
  background-color:#FFF;
  border-radius:min(2.5vw,16px);
  padding:min(10vw,80px) min(4vw,80px);
  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;
}
.htTtl{
  text-align:center;
}
.htTtl h2{
  display:inline-block;
  margin:0 auto min(6vw,40px);
  background-image: url("../img/ttl-top.jpg"), url("../img/ttl-bottom.jpg");
  background-repeat:repeat-x;
  background-position:top center,bottom center;
}
/* .htTtl h2 span{
  display:inline-block;
  padding:1em 41px;
  background-image: url("../img/ttl-tLeft.jpg"), url("../img/ttl-tRight.jpg"), url("../img/ttl-bLeft.jpg"), url("../img/ttl-bRight.jpg");
  background-repeat:no-repeat;
  background-position:top left,top right, bottom left, bottom right;
  background-size:auto;
  font-weight:600;
  font-size:min(6.6vw,1.9em);
  font-weight:bold;
  color:var(--color02);
} */
/* .htBorderBox{
  border:1px solid #333;
  padding:min(2.5vw,40px);
  margin-top:min(2.5vw,24px);
} */
.htBlock h2{
  color:var(--color02);
  text-align:center;
  font-size:min(5vw,1.6em);
  line-height:1.5;
}

.htBlock h3{
  margin:2em 0 .3em;
  color:var(--color02);
  /* text-align:center; */
  font-size:min(4.5vw,1.3em);
}
span.htNEW{
  display:inline-block;
  margin-bottom:10px;
  margin-right:10px;
  font-size:14px;
  font-family:Arial;
  text-shadow:0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
  color:var(--color02);
  animation:blink 6s infinite;
}
@keyframes blink {
  20%,24%,55% {
    color:#000;
    text-shadow:none;
  }
  0%,19%,21%,23%,25%,54%,56%,100% {
    text-shadow:0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color:var(--color02);
  }
}
.htBlockLead{
}
.htBox1{

}
.htBox1 .htTxt{
  max-width:658px;
  margin-left:auto;
  margin-right:auto
}
.htBtn{
  text-align:center
}
.htBtn a{
  position:relative;
  display:inline-block;
  padding:1em 3em;
  cursor:pointer;
  text-decoration:none;
  color:var(--color05);
  font-weight:700
}
.htBtn a:before,.htBtn a:after{
  position:absolute;
  content:'';
  width:100%;
  height:2px;
  transition:all .3s;
  background:var(--color05)
}
.htBtn a:before{
  top:0;
  left:0
}
.htBtn a:after{
  right:0;
  bottom:0
}
.htBtn a:hover:before,.htBtn a:hover:after{
  width:0
}
.htBtn a span::after{
  font-size:12px;
  font-weight:normal;
  margin-left:.5em
}
.htImg,.htImgF,.htLeadWrapImg{
  margin-bottom:1em;
}
.htImg img,.htImgF img,.htLeadWrapImg img{
  margin-left:auto;
  margin-right:auto;
}
.htLeadWrap{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}
#no02 .htImg img{
  max-width:min(48vw,200px);
}
#no03 .htImg{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  margin-left:-4px;
  margin-right:-4px;
}
#no03 .htImg .htImgL,#no03 .htImg .htImgR{
  width:50%;
  padding:0 4px 4px;
}
#no04 .htImg img{
  max-width:min(80vw,416px);
}
#no05 .htLeadWrapImg img{
  max-width:min(80vw,310px);
}

.htMAPtxt{
  display:none;
}
.htMAP img{
  margin:0 auto;
}
.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}
  .htMain .htBox1 th{
    display:block;
    width:100%;
    padding-bottom:0;
  }
  .htMain .htBox1 td{
    display:block;
    width:100%;
    padding:.5em 0 10px;
  }
  .hottopics p.htHeadSubttl.hiddenSP{
    display:none;
  }
}
/*TB only*/
@media screen and (min-width:600px) and (max-width:1024px){
  .forPC,.forSP,.hiddenTB{display:none}
}
/*TB以上*/
@media screen and (min-width:600px){
  .hottopics p.htHeadSubttl.forSP{
    display:none;
  }
  .hottopics p.htHeadSubttl{
    max-width:22em;
  }
  .htHead-nav ul li{
    width:20%;
  }
  .htHead-nav ul li:nth-child(6){
    border-left:1px solid #666;
  }
  .htHeadTxt{
    /* max-width:58em;
    margin-left:auto;
    margin-right:auto; */
    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 .content-wrap{
    max-width:880px;
  } */
  .htMain th{
    min-width:9em;
    border-bottom:1px solid rgba(255,255,255,.3);
  }
  .hottopics p.htBlockLead{
    margin-bottom:32px;
    text-align:center;
  }
  .htBtn{
    margin-top:2em;
  }
  .htBtn a{
    padding:1.5em 3em;
  }
  .htImg,.htImgF{
    margin-bottom:40px;
  }
  #no03 .htImg{
    /* max-width:674px;
    margin-left:auto;
    margin-right:auto; */
  }
  #no03 .htImg .htImgL,#no03 .htImg .htImgR{
    width:25%;
  }
  #no05 .htLeadWrap{
    display:flex;
    flex-wrap:wrap;
    margin-bottom:40px;
  }
  #no05 .htLeadWrapTxt{
    width:calc(100% - 326px);
  }
  #no05 .htLeadWrapImg{
    width:326px;
    padding-left:16px;
  }
  .sns-post-box{
    margin-bottom:min(4vw,56px)
  }
  .htBox2{
    display:flex;
    flex-wrap:wrap;
  }
  .htBox2 .htImg{
    width:50%;
    padding-right:16px;
  }
  .htBox2 .htTxt{
    width:50%;
  }
}
/* @media screen and (min-width:890px){
  .htHeadTxt h1 > span{
    margin-left:.3em;
  }  
} */

/*PC以上*/
@media screen and (min-width:1025px){
  .forTB,.forSP,.hiddenPC{display:none}
  /* .htImgF img{
    max-width:1000px;
  } */

}
@media screen and (min-width:1170px){
}
@media screen and (min-width:1300px){
}

.iconNEW{
  display: inline-block;
  padding: .15em .3em .3em .4em;
  margin-right: .3em;
  border-radius: 3px;
  background-color:var(--color05);
  color:#2f3e6b;
  font-size: .75em;
  font-weight: bold;
  line-height: 1;
  animation: blinking 1s ease-in-out infinite alternate;
}
@keyframes blinking {
  0%   {opacity:0}
  100% {opacity:1}
}

.htQA{
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}
.htQA details {
  border:1px solid rgba(255,255,255,.4);
  margin-bottom:1em;
}

.htQA details summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1em 2em 1em 3em;
  cursor: pointer;
}

.htQA details summary::before,
.htQA details .htA-block::before {
  position: absolute;
  left: 1em;
  font-weight: 600;
  font-size: 1.3em;
}

.htQA details summary::before {
  color:var(--color05);
  content: "Q";
}

.htQA details summary::after {
  content: '';
  transform: translateY(-25%) rotate(45deg);
  width:10px;
  height:10px;
  margin-left: 10px;
  border-bottom: 3px solid var(--color02);
  border-right: 3px solid var(--color02);
  transition: transform .5s;
}
.htQA details[open] summary::after {
  transform: rotate(225deg);
}

.htQA details .htA-block{
  position: relative;
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding:1em 1em 1px 3em;
  background-color:rgba(255,255,255,.15);
  transition: transform .5s, opacity .5s;
}
.htQA details[open] .htA-block{
  transform: none;
  opacity: 1;
}
.htQA details .htA-block::before {
  color: #ff8d8d;
  line-height: 1.2;
  content: "A";
}
.htQA details .htA-block .mb0{
  margin-bottom:0;
}
.htQA details .htA-block ul li{
  line-height:1.4;
}

/*TB以上*/
@media screen and (min-width:600px){
  .htQA{
    margin-top:40px
  }
  .htQA details .htA-block{
    padding-right:3em;
  }
}
@media screen and (max-width:1199px){
  .htMAPtxt{display:block;}
  .htMAP{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-color:var(--colorPPL);
    margin-bottom:8px;
  }
  .htMAP > div{
    min-width:calc(75vh*1200/849);
    max-width:1200px;
    margin:0 auto;
  }
  .htMAP div img{
    vertical-align:top
  }
  .htMAP::-webkit-scrollbar{
    -webkit-appearance:none;
    width:10px;
    height:10px;
    background:rgba(255,255,255,.2)
  }
  .htMAP::-webkit-scrollbar-thumb{
    border-radius:4px;
    background-color:var(--color05);
  }
}