@charset "utf-8";
:root{
  --a1:#E46551;
  --a2:#0f6f9f;
  /* --a3:#0f6f9f;
  --a5:#a8597e;
  --a6:#db8241;
  --a7:#937831; */

  --b1:228,101,81;
  --b2:15,111,159;

  --point:#AA0C00;
  --DBRU:#080c24;
}

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500&display=swap');
@font-face{
  font-family:'icomoon';
  src:url('../fonts/icomoon.eot?lzfmy2');
  src:url('../fonts/icomoon.eot?lzfmy2#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?lzfmy2') format('truetype'),url('../fonts/icomoon.woff?lzfmy2') format('woff'),url('../fonts/icomoon.svg?lzfmy2#icomoon') format('svg');
  font-weight:normal;font-style:normal}
[class^="icon-"]::before,[class^="icon-"]::after,.htBtn a::after,.htToIndex a::before{font-family:'icomoon'!important;speak:none;font-style:normal;font-variant:normal;text-transform:none;/*line-height:1;*/}
.icon-location::before{content:"\e900"}
.icon-link::after{content:"\e9cb"}
.icon-arrow-t::before,.htToIndex a::before{content:"\e908"}
.icon-arrow-b::before{content:"\e909"}
.icon-arrow-l::before{content:"\e90a"}
.icon-arrow-r::before,.htBtn a::after{content:"\e90b"}
.icon-pdf::before{content:"\e90c"}
.icon-img::before{content:"\e90d"}
.icon-text::before{content:"\e90e"}
.icon-excel::before{content:"\e90f"}
.icon-word::before{content:"\e910"}
.icon-link::after,.htBtn a::after{font-size:14px;margin-left:5px;}
.htToIndex a::before{font-size:14px;margin-right:5px;}
*{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:"";display:block;clear:both}
.clearfix{display:block}
.hottopics p{margin-bottom: 1em;line-height:1.5}
.hottopics .kome{margin-left:1.3em;margin-bottom:10px; font-size:.82em;}
.hottopics .kome span{display:inline-block;width:1.3em;margin-left:-1.3em}
.hottopics .txtR{text-align:right}
.skip{
	width:1px;
	color:#000;
	font-size:.1%;
	line-height:.1;
	position:absolute;
	left:-3000px;
	z-index:9999
}
/*------------------------------------------------------------------------ main */
.hottopics {
  background-color:#FFF;
  color:var(--DBRU);
}
/*------------------------------------------------------------------------ header */
.pub{
  margin-bottom:10px;
}
.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;}
/*------------------------------ */
.htHeader{
  background:url(../img/bg_head.webp) no-repeat top right/100% auto var(--DBRU);
  padding-bottom:min(4vw,24px);
  /* margin-bottom:min(5vw,40px); */
}
.htHeadTtl{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  min-height:calc(100vw*560/964);
  /* position:relative;
  overflow:hidden;
  background:url(../img/bg_head.jpg) no-repeat center right/cover */
}
.htHeader h1{
  width:80%;
  margin:0 auto 0 0;
  /* padding-top:min(10vw,40px); */
}
.htHeadCap{
  position:relative;
  padding:min(4vw,64px) min(4vw,32px) min(4vw,32px);
  color:#FFF;
  font-size:.875em;
}
.htAnchor{
  background-color:#1a3054;
  margin:0 min(4vw,32px);
  padding:min(4vw,32px) min(4vw,40px) min(1vw, 16px);
  border-radius:5px;
  color:#FFF;
}
.hottopics .htAncTtl{
  margin:0 0 .5em;
  font-weight:bold;
  text-align:center;
}
.htAncTtl::after,.htAncTtl::before{
  content:" - "
}
.htAnchor dt{
  width:100%;
  margin-bottom:min(2vw,16px);
}
.htAnchor dt a{
  display:block;
  padding:min(1vw,8px) 0;
  border-radius:6px;
  color:#FFF;
  text-align:center;
  font-weight:bold;
  text-decoration:none;
  font-feature-settings:"palt";
  font-size:108%;
}
.htAnchor dt.htA1 a{
  background-color:var(--a1)
}
.htAnchor dt.htA2 a{
  background-color:var(--a2)
}
.htAnchor dd{
  margin-bottom:min(4vw,32px);
  padding:0 .5em;
}
.htAnchor dd ul li{
  margin-bottom:.2em;
  padding-left:1em
}
.htAnchor dd li:before{
  content:"-";
  display:inline-block;
  width:1em;
  margin-left:-1em;
  text-align:center;
}

/*------------------------------------------------------------------------ htBlock */
.htMain{
  padding:min(5vw, 40px) 0;
  position:relative;
  background-color:#cbb0d1
}
.htMain::before{
  content:"";
  display:block;
  position:absolute;
  top:0;left:0;
  width:100%;
  height:min(100vw,600px);
  background-image: linear-gradient(0deg, #cbb0d1, #080c24);
}
.htGroup{
  position: relative;
  z-index:1;
  padding-bottom:1px;
}
.htH2 {
  position: relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  margin:min(5vw, 40px) 0; 
  padding:min(1vw,.5em) min(4vw,24px);
  /* font-family: 'Noto Serif JP', serif; */
  font-weight:900;
  text-align:center;
  font-size:min(5.4vw, 2em);
  color:#FFF;
  line-height:1;
}
.htH2 img{
  margin-right:.3em;
}
#no1.htH2{background-color:var(--a1)}
#no2.htH2{background-color:var(--a2)}
.htBox{
  padding-bottom:1px;
  margin:min(7vw, 56px) 0 min(5vw, 40px);
  background-color:#FFF;
}
/* .htBox:nth-child(odd) .htBoxImg{
  transform:translate(1.5vw,-2vw) rotate(.6deg);
}
.htBox:nth-child(even) .htBoxImg{
	transform:translate(-1.5vw,-2vw) rotate(-.6deg);
} */
.htBoxTxt{
  padding:min(3vw,24px) min(3vw,24px) 0
}
.htBoxTxt h3{
  margin-bottom:.5em;
  font-feature-settings:"palt";
}

.no1 .htBoxTxt h3{color:var(--a1)}
.no2 .htBoxTxt h3{color:var(--a2)}
.htBoxSpot{
  margin:min(3vw,16px);
  padding:min(3vw,24px);
  font-size:.85em;
}
.no1 .htBoxSpot{background-color:rgba(var(--b1),.1)}
.no2 .htBoxSpot{background-color:rgba(var(--b2),.1)}

.htBoxSpot h4{
  margin-bottom:.5em;
  font-size:1.1em;
}
.htBtn a{
  position: relative;
  display:block;
  max-width:13em;
  margin:0 auto;
  padding:.5em 1.5em calc(.5em + 1px);
  background:#1a3054;
  border-radius:100px;
  text-align:center;
  color:#FFF;
  font-weight:bold;
  text-decoration:none;
  transition:none;
}
.htBtn a:hover{
  background:#485976
}
.htBtn.htBtnHead a{
  max-width:20em;
  background-color:#FFF;
  color:#1a3054;
}
.htBtn.htBtnHead a:hover{
  background:#D1D6DD
}
.htToIndex a{
  display:block;
  width:min(70vw,30em);
  padding:.5em 1.5em;
  margin:0 auto min(5vw,40px);
  background-color:#FFF;
  border-radius:8px;
  text-align:center;
  color:#1a3054;
  font-weight:bold;
  text-decoration:none;
  transition:none;
}

.htToIndex a:hover{
  background-color:#EFE7F1
}

/* その他のイベント */
#etcEvent {
  padding:min(4vw, 24px);
  margin-bottom:24px;
  border:6px solid rgba(var(--b4),.18);
  text-align:center;
}
 #etcEvent h2 {
  margin-bottom:min(2vw,16px);
  font-size:min(5.2vw,150%);
  color:var(--point);
}
#etcEvent li{
  width:100%;
  padding:5px 0 0;
}



/*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:1099px){
  .forPC,.forSP,.hiddenTB{display:none}
}
/*TB以上 */
@media screen and (min-width:600px){
  .htGroup .content-wrap{
    width:95%;
  }
  .htHeadCap{
    text-align:center;
  }
  .htAnchor{
    max-width: calc(12em * 3 + 15em);
    margin:0 auto;
  }
  .htBoxImg{
    width:80%;
  }
  .htBox:nth-child(odd) .htBoxImg{
    transform:translate(0,-2vw) rotate(.6deg);
  }
  .htBox:nth-child(even) .htBoxImg{
    transform:translate(0,-2vw) rotate(-.6deg)
  }
}
/*PC以上 */
@media screen and (min-width:965px){
  .htHeader {
    /* background: url(../img/bg_head.webp) no-repeat top right / 100% auto #080c24; */
    background-position:60% 0;
    background-size:965px auto;
  }
  .htHeadTtl{
    max-width: 1280px;
    width: calc(100% - 120px);
    min-height:560px;
    margin: auto;
  }

}
@media screen and (min-width:1023px){
  .forTB,.forSP,.hiddenPC{display:none}
  .htBox{
    position: relative;
    padding-bottom:8px;
  }
  .htBoxImg{
    width:80%;
    max-width:920px;
  }
  .htBox:nth-child(odd) .htBoxImg{
    float:right;
    transform:translate(20px,-16px) rotate(.6deg)
  }
  .htBox:nth-child(even) .htBoxImg{
    float:left;
    transform:translate(-20px,-16px) rotate(-.6deg)
  }
  .htBoxSpot{
    position:absolute;
    top:0;
    width:20%;
    margin:0;
  }
  .htBox:nth-child(odd) .htBoxSpot{
    left:0;
    padding-right:0;
  }
  .htBox:nth-child(even) .htBoxSpot{
    right:0;
    padding-left:0;
  }
  .no1 .htBoxSpot,.no2 .htBoxSpot{
    background:none;
  }
  .htBoxTxt{
    width:100%;
    clear:both;
  }
}
@media screen and (min-width:1300px){
  .htBoxImg{
    width:920px;
  }
  .htBoxSpot{
    width:calc(100% - 920px);
  }
}