@charset "utf-8";
/*------------------------------------------------------------------------ base */

:root{
  --a1:#e95376;
  --a2:#F2942F;
  --a3:#1aacc1;
  --a4:#004894;
  --a5:#b668dd;
  --a6:#3ca639;
  --mainColor:#6bc8f3;
}
*{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:"";display:block;clear:both}
.clearfix{display:block}
.hottopics p{margin-bottom:1em}
.hottopics a{text-decoration:underline}
.hottopics a:hover{opacity:.5;text-decoration:none}
.txtC{text-align:center}
ul.listMark{list-style:disc;margin-left:20px}
.hottopics{position:relative}
.hottopics::after{content:"";display:table;clear:both;}
.hottopics p{line-height:1.5}
.hottopics img{max-width:100%;height:auto}
.hottopics .kome{margin-left:1.3em;font-size:.82em;}
.hottopics .kome span{display:inline-block;width:1.3em;margin-left:-1.3em}
.fontS{font-size:.82em;}
.hottopics .txtR{text-align:right}
.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}

/*=================== header */
.hottopics{
  background:#FFF
}
.htHead{
  margin-bottom:32px
}
.htHead h1{
  width:100%!important;
  margin-bottom:15px;
  font-size:1.8rem;
}
.htH-txt{
  margin-top:24px
}
.htH-link{
  border-radius:10px;
  padding:16px;
  background-color:#68c9f2;
  color:#FFF;
  font-weight:bold;
}
.hottopics p.htH-link_ttl{
  margin-bottom:12px;
  text-align:center
}
.htH-link_ttl::before,.htH-link_ttl::after{
  content:"-";
  margin:0 5px
}
.htH-link a{
  text-decoration:none;
}
.htH-link dl{
  font-feature-settings: "palt";
}
.htH-link dt{
}
.htH-link dt a{
  display:block;
  padding:.3em 1em;
  border-radius:8px;
  text-align:center;  
}

.htBG1 a{background-color:var(--a1)}
.htBG2 a{background-color:var(--a2)}
.htBG3 a{background-color:var(--a3)}
.htBG4 a{background-color:var(--a4)}
.htBG5 a{background-color:var(--a5)}
.htBG6 a{background-color:var(--a6)}

.htH-link dd{
  padding:.5em 0 .8em 1em;
}
.htH-link ul{
  list-style:disc;
  margin-left:1.4em;
}
.htH-link ul li{
  margin-bottom:.3em
}

/*=================== main */
.htWrap{
  position:relative;
  padding:min(6vw,40px);
  margin-bottom:min(3vw,48px);
  background:#FFF;
  border-radius:10px;
  overflow:hidden;
}
.htWrap::after{
  content:"";
  display:block;
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  width:100%;
  height:100%;
}
.htWrap::before{
  content:"";
  display:block;
  position:absolute;
  z-index:1;
  top:8px;right:8px;bottom:8px;left:8px;
  width:calc(100% - 16px);
  height:calc(100% - 16px);
  background-color:#FFF;
  border-radius: 10px;
}
.htWrap *{
  position:relative;
  z-index:2;
}
#no01.htWrap::after{
  background:repeating-linear-gradient(-45deg, var(--a1), var(--a1) 5px, #FFF 5px, #FFF 10px);
  opacity:.2;
}
#no02.htWrap::after{
  background:repeating-linear-gradient(-45deg, var(--a2), var(--a2) 5px, #FFF 5px, #FFF 10px);
  opacity:.5;
}
#no03.htWrap::after{
  background:repeating-linear-gradient(-45deg, var(--a3), var(--a3) 5px, #FFF 5px, #FFF 10px);
  opacity:.2;
}
#no04.htWrap::after{
  background:repeating-linear-gradient(-45deg, var(--a4), var(--a4) 5px, #FFF 5px, #FFF 10px);
  opacity:.2;
}
#no05.htWrap::after{
  background:repeating-linear-gradient(-45deg, var(--a5), var(--a5) 5px, #FFF 5px, #FFF 10px);
  opacity:.2;
}
#no06.htWrap::after{
  background:repeating-linear-gradient(-45deg, var(--a6), var(--a6) 5px, #FFF 5px, #FFF 10px);
  opacity:.2;
}
.htMain h2{
  margin-bottom:15px;
}
.htMain h2 img{
  margin:0 auto;
}
 #no01 .htBoxFirst,#no02 .htBoxFirst{
  padding-bottom:40px;
  background: url(../img/ashi.png) repeat-x bottom center;
}
.htBoxfImg{
  margin-bottom:10px;
  line-height:1;
  text-align:center;
}
.htBoxfImg img{
  margin-left:auto;
  margin-right:auto;
}
#no02 .htBoxfImg img{
  margin-bottom:5px;
  border:1px solid #ddd;
}
.htBoxfImg p{
  margin-top:.5em;
  margin-bottom:0;
  font-size:.875em;
}
.htBoxfTxt-img{
  margin-bottom:10px;
  line-height:1;
  text-align:center;
}
.htBoxfTxt-img li{
  margin-bottom:.5em;
}
.htBoxfTxt-img li p{
  margin-top:.5em;
  font-size:.875em;
}
.htBoxFFull{
  width:100%;
}
.htBox{
  margin-top:32px;
}
.htMargin{
  margin-top:32px;
}
.htMain h3{
  width:100%;
  margin:0 0 10px;
}
/* .htMain h3::before{
  content:"";
  display:inline-block;
  width:.9em;
  height:.9em;
  margin-right:.3em;
  border:5px solid;
  border-radius:1em;
} */
.htMain h3 span.htH3-label{
  display:inline-block;
  padding:.2em .4em;
  margin-right:.5em;
  transform:translateY(-.2em);
  border-radius:4px;
  color:#FFF;
  font-size:min(3.5vw,1.3rem);
  font-feature-settings: "palt";
}
.htMain h3 span.htH3-title{
  display:block;
  margin-top:4px;
}
.htMain #no01 h3{color:var(--a1);}
.htMain #no01 h3 span.htH3-label{background-color:var(--a1);}
.htMain #no02 h3{color:var(--a2);}
.htMain #no02 h3 span.htH3-label{background-color:var(--a2);}
.htMain #no03 h3{color:var(--a3);}
.htMain #no03 h3 span.htH3-label{background-color:var(--a3);}
.htMain #no04 h3{color:var(--a4);}
.htMain #no04 h3 span.htH3-label{background-color:var(--a4);}
.htMain #no05 h3{color:var(--a5);}
.htMain #no05 h3 span.htH3-label{background-color:var(--a5);}
.htMain #no06 h3{color:var(--a6);}
.htMain #no06 h3 span.htH3-label{background-color:var(--a6);}
.htImg{
  margin-bottom:1em;
}
table.htTableBlock{
  margin-bottom:0;
  border-color:#D8C6A0
}
table.htTableBlock th{
  background-color:#EFE7D3;
  border-color:#D8C6A0
}
table.htTableBlock td{
  border-color:#D8C6A0
}
.htEvent {
  padding:8px 8px 14px;
  margin-top:10px;
  background-color:#FFF;
  border:1px solid #DDD;
}
.htEvent table{
  border:none;
  margin-bottom:0;
}
.htEvent th{
  text-align:left;
  vertical-align:top;
  border:none;
  background:none;
}
.htEvent td{
  border:none;
  background:none;
}
.htEvent tbody th{
  width:4em;
  padding-top:0;
  font-weight:normal;
  white-space:nowrap;
}
.htEvent tbody td{
  padding-top:0;
  padding-left:0;
}
.htEventBtn{
  width:100%;
  margin: 0 !important;
  text-align:center
}
.htEventBtn a{
  display:inline-block;
  padding:.4em 1.5em .3em;
  background:#4062b0;
  border-bottom:5px solid #374f84;
  border-radius:6px;
  font-weight:bold;
  text-decoration:none;
  color:#FFF;
}
.htEventBtn a:hover{
  margin-top:5px;
  border-bottom:none;
  opacity:1
}

.htBtn{
  clear:both;
  width:100%;
  margin:1em 0;
  text-align:center
}
.htBtn a{
  display:inline-block;
  padding:.6em 1.5em .5em;
  background:#3DAFE2;
  border-bottom:6px solid #2782AB;
  border-radius:6px;
  font-weight:bold;
  text-decoration:none;
  color:#FFF;
}
.htBtn a:hover{
  margin-top:6px;
  border-bottom:none;
  opacity:1
}
.hottopics p{
  margin-bottom:.5em;
}
.hottopics p.htSIttl{
  color:var(--a4);
  font-weight:bold;
  margin-bottom:0;
}



/*SP only*/
@media screen and (max-width:599px){
  .forPC,.forTB,.hiddenSP{display:none}
  table.htTableBlock{
    border:none;
  }
  table.htTableBlock th,table.htTableBlock td{
    display:block;
    width:100%;
    border:none;
  }

  table.htTableBlock.table3col thead {
    display: none;
  }
  table.htTableBlock.table3col td:first-of-type{
    padding-bottom:0;
  }
  table.htTableBlock.table3col td:last-of-type{
    padding-top:0;
  }
  table.htTableBlock.table3col td:before {
    content: attr(data-label);
    float:left;
    font-weight: bold;
    margin-right: 10px;
  }
  .htStickerImg dl{
    display:flex;
    flex-wrap:wrap;
    border:1px solid #DDD;
    margin-bottom:8px;
  }
  .htStickerImg dl dt{
    width:60%;
  }
  .htStickerImg dl dd{
    width:40%;
    padding:6px;
  }
}
/*TB only*/
@media screen and (min-width:600px) and (max-width:1024px){
  .forPC,.forSP,.hiddenTB{display:none}
}
/*TB以上*/
@media screen and (min-width:600px){
  .htH-link{
    margin:24px 0 40px;
    padding:24px;
  }
  .htH-link dl{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:center;
    max-width:50em;
    margin:0 auto;
  }
  .htH-link dl dt{
    width:18em;
    border-top:1px dashed rgba(255,255,255,.5);
    padding:.8em 0;
    margin-right:1px;
  }
  .htH-link dl dd{
    width:calc(100% - 18em - 1px);
    border-top:1px dashed rgba(255,255,255,.5);
    padding:.8em 0 .8em 1em;
  }
  .htMain h2{
    margin-bottom:32px;
  }
  .htMain h3{
    font-size:1.3em;
  }
  .htWrap{
  }
  .htBoxFirst{
    display:flex;
    flex-wrap:wrap;
  }

  .htBoxfImg{
    width:40%;
  }
  #no01 .htBoxfImg,#no02 .htBoxfImg{
    width:30%;
  }
  .htBoxfTxt{
    order:-1;
    width:60%;
    padding-right:24px;
  }
  #no01 .htBoxfTxt,#no02 .htBoxfTxt{
    width:70%;
  }
  .htBoxfTxt-img{
    display:flex;
    flex-wrap:wrap;
    margin-left:-8px;
    margin-right:-8px;
  }
  .htBoxfTxt-img li{
    width:50%;
    padding-left:8px;
    padding-right:8px;
  }
  .htBox{
    margin-top:48px;
  }
  .htMargin{
    margin-top:48px;
  }
  .htImg{
    margin-bottom:24px;
  }
  .htImgHalf{
    width:calc(50% + 32px);
    float:left;
    padding-right:32px;

  }
  .htTxtHalf{
    width:calc(50% - 32px);
    float:left;
  }
  table.htTableBlock th{
    width:6em;
    border-right:none;
    white-space:nowrap
  }
  table.htTableBlock th{
    border-right:none;
  }
  table.htTableBlock.table3col th{
    width:auto;
  }
  table.htTableBlock.table3col thead th{
    background-color:#D8C6A0;
    border-color:#EFE7D3;
  }
  .htStickerList{
    display:flex;
    flex-wrap:wrap;
  }
  .htStickerList ul{
    padding-right:1em;
  }
  .htStickerImg{
    display:flex;
    flex-wrap:wrap;
    margin-left:-8px;
    margin-right:-8px;
  }
  .htStickerImg dl{
    display: flex;
    flex-direction: column;
    width:33.333333%;
    padding:8px;
  }
  .htStickerImg dl dt{
    border:1px solid #DDD;
    border-bottom:none;
  }
  .htStickerImg dl dd{
    flex-grow: 1;
    border:1px solid #DDD;
    border-top:none;
    padding:.5em .5em 0;
  }
  /* .hottopics p.htSIttl{
    text-align:center;
  } */
   .ht06-lead{
    text-align:center;
   }
}
/*PC以上*/
@media screen and (min-width:1025px){
  .forSP,.forTB,.hiddenPC{display:none}
  .htH-link dl dt{
    padding:.8em 0;
  }
  .htH-link dt a{
    padding:.5em 1em;
  }
  .htH-link dl dd{
    padding:.8em 0 .8em 1em;
  }
  .htBoxWrap{
    display:flex;
    flex-wrap:wrap;
    margin-left:-16px;
    margin-right:-16px;
  }
  .htBox{
    width:50%;
    padding-left:16px;
    padding-right:16px;
  }
  .htStickerImg{
    margin-left:-16px;
    margin-right:-16px;
  }
  .htStickerImg dl{
    width:25%;
    padding:16px;
  }
}


.htH-txt br{
  display:none;
}
@media screen and (min-width:50em){
  .htH-txt{
    text-align:center;
  }
  .htH-txt br{
    display:block;
  }
}



/*_________________0417UP用*/
.htBoxfCenter br{
  display:none;
}
@media screen and (min-width:50em){
  .htBoxfCenter{
    text-align:center;
  }
  .htBoxfCenter br{
    display:block;
  }
}

/*------------------------------------------------------------------------ 最新版はこちら */
a.btnNew{
  display:block;
  max-width:680px;
  min-height:inherit;
  position:relative;
  padding:10px;
  margin:.5em auto 1em;
  border-radius:5px;
  background:#FCA026;
  font-size:20px;
  font-weight:bold;
  color:#fff;
  text-align:center;
  text-decoration:none;
  box-shadow:0 6px #D77D04
}
a.btnNew:hover {
  opacity:1;
  box-shadow:0 0 #D77D04;
  top:6px
}