@charset "utf-8";
:root{
  --colorPPL:#6a5995;
  --colorGRN:#F7933B;
  --color01:#000;
  --color02:#FFF;
  --color03:#424242;
  --color04:#DEDEDE;
}
@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,.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,.htBtn a.icon-blank::after{content:"\e903";margin-left:4px;}
.icon-arrow-t::after{content:"\e908"}
.icon-arrow-b::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{
  background:var(--color02);
  font-family:"Zen Kaku Gothic New", sans-serif;
  font-weight:400;
  font-style:normal;
}
.hottopics h1,.zen-antique-regular {
  font-family:"Zen Antique", serif;
  font-weight:400;
  font-style:normal;
  font-feature-settings:"palt";
}
.hottopics p{margin-bottom:16px;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:var(--color01);
	font-size:.1%;
	line-height:.1;
	position:absolute;
	left:-3000px;
	z-index:9999
}
.hottopics ul.kome{
  list-style:none;
  padding-left:1em
}
.hottopics ul.kome li{
  line-height:1.75;
  font-size:.875em
}
.hottopics ul.kome li span{
  display:inline-block;
  width:1em;
  margin-left:-1em
}

.hottopics ol.kome{
  list-style:none;
  padding-left:2em
}
.hottopics ol.kome li span{
  display:inline-block;
  width:2em;
  margin-left:-2em
}
/*------------------------------------------------------------------------ .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:var(--color01);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}
}
/*TB以上*/
@media screen and (min-width:600px){
}
/*PC以上*/
@media screen and (min-width:1025px){
  .forTB,.forSP,.hiddenPC{display:none}
}

/*------------------------------ */
.htHeader{
  /* background:var(--color03) */
}
.htHeader .htKV{
  width:100%;
}
.htHeader .htKV img{
  margin:0 auto;
}
.htHeadTxt{
  padding:min(8vw,52px) 0 0;
  font-weight:bold
}
.htHeadTxt h1{
  width:100%;
  margin-bottom:min(2vw,16px);
  text-align:center;
}
.htHeadTxt h1 .htHeadTtl1{
  display:inline-block;
  line-height:1;
  font-size:min(6vw,1.5em)
}
.htHeadTxt h1 .htHeadTtl2{
  display:inline-block;
  padding:2px 0 4px 1.5vw;
  margin-top:min(1vw,8px);
  background-color:var(--color01);
  color:var(--color02);
  font-size:min(7.6vw,1.9em);
}
.htDate{
  max-width:30em;
  padding:min(1vw,.5em) .5em;
  margin:min(2vw,24px) auto;
  border:2px solid var(--color01);
  text-align:center;
}
p.htDateTxt{
  margin-bottom:0;
  font-family:"Zen Antique", serif;
  font-size:min(4.2vw,20px);
  font-feature-settings:"palt";
}
.htDate .fontS{
  margin-bottom:0;
}
.htBtn{
  text-align:center
}
.htBtn a{
  display:inline-block;
  min-width:80%;
  padding:.8em 1em;
  margin-bottom:min(4vw,26px);
  background-color:var(--colorPPL);
  border:2px solid var(--colorPPL);
  cursor:pointer;
  text-decoration:none;
  color:var(--color02);
  font-weight:600;
  transition:all .3s
}
.htBtn.soon a{
  background-color:var(--color03);
  border:2px solid var(--color03);
}
.htBtn a:hover{
  background-color:var(--color01);
}
.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)
}
.htCopyright{
  margin-top:min(10vw, 80px);
  font-size:.875em;
  text-align:right;
}
.htMain{
  background-color:var(--color01);
  color:var(--color02);
}

.htSoon{
  text-align:center;
  font-size:min(4.5vw,1.2em);
  opacity:.8;
}
/*TB以上*/
@media screen and (min-width:600px){
  .htHeadTxt{
    text-align:center;
  }
  .htBtn{
    margin-top:2em;
  }
  .htBoxImg,.htBoxTxt,.htBoxImg-full,.htBoxTxt-full{
    max-width:570px;
    margin-left:auto;
    margin-right:auto;
  }
  .htBtn a{
    min-width:26em;
    padding:1.5em 3em;
  }
}
/*PC以上*/
@media screen and (min-width:1025px){
  #no02 .content-wrap {
    max-width:none;
    width:100%;
  }
  .htBoxImg-full{
    max-width:calc(100% + 16px);
    display:flex;
    margin:0 -8px min(5vw, 40px);
  }
  .htBoxImg-full picture{
    /* width:50%;
    padding:0 8px; */
  }
  #no02 .htBoxImg-full .ht02-img1{
    width:60%;
    padding:0 8px;
  }
  #no02 .htBoxImg-full .ht02-img2{
    width:40%;
    padding:0 8px;
  }
  #no02 .htBoxTxt-full{
    max-width:50em;
    margin: auto;
  }
}
.htPspotList strong{
  color:var(--colorGRN);
}
/*SP only*/
@media screen and (max-width:599px){
.htPspotList{}
  .htPspotList thead{
    display:none;
  }
  .htPspotList {
    width: 100%;
  }
  .htPspotList tr{
    border-bottom:1px soid #ccc;
  }
  .htPspotList td,
  .htPspotList th{
    display: block;
    width: 100%;
    border-bottom:none;
  }
  .htPspotList td{
    display: block;
    width: 100%;
  }
  .htPspotList td:before{
    display:block;
    color: #fff;
    content: attr(data-label);
    font-weight: bold;
    padding: 8px 0;
    margin-bottom:5px;
    background-color:var(--color03);
    text-align:center;
  }
  .htPspotList tr{
    border: solid 1px var(--color04)
  }
}
/*___________________________________ */
.htHead-nav{
}
.htHeadNav{
  position:relative;
  margin-top:50px;
}
.htHeadNav li{
  width:20em;
  margin:0 auto 20px;
}
.htHeadNav a {
  transform:skewX(-30deg);
  position:relative;
  z-index:10;
  display:flex;
  align-items:center;
  font-weight:600;
  transition:all .3s;
  height:60px;
  padding:8px 1em;
  border:solid 2px var(--color01);
  color:var(--color01);
  text-decoration:none;
  line-height:1em;
}
.htNav01 a,.htNav03 a,.htNav05 a{padding-left:calc(364px / 4 + 8px);}
.htNav02 a,.htNav04 a{padding-right:calc(364px / 4 + 8px);}
.htHeadNav a:hover{
  background-color:var(--color01);
  color:var(--color02);
}
.htHeadNav a::after{
  position:absolute;
  bottom:1px;
  content:"";
  display:block;
  width:calc(360px / 4);
  height:calc(342px / 4);
  background-size:cover;
  background-repeat:no-repeat;
}
.htNav01 a::after{background-image:url(../img/nav01.webp);left:4px;}
.htNav02 a::after{background-image:url(../img/nav02.webp);right:4px;}
.htNav03 a::after{background-image:url(../img/nav03.webp);left:4px;}
.htNav04 a::after{background-image:url(../img/nav04.webp);right:4px;}
.htNav05 a::after{background-image:url(../img/nav05.webp);left:4px;}
.htHeadNav a span,.htHeadNav a::after{
  transform:skewX(30deg);
}
.htMain{
  padding-bottom:min(10vw,56px)
}
.htMain ul{
  list-style:disc;
  margin-bottom:1em;
  padding-left:20px
}
.htMain .mb5{
  margin-bottom:5px
}
.htMain .htTxtC{
  text-align:center;
}
.htMain .htFontS{
  font-size:.8em
}
.htMain .htFontM{
  font-size:1.4em
}
.htMain .htFontL{
  font-size:2em
}
.htMain table{
  border:none;
  margin-bottom:16px;
  line-height:1.75
}
.htMain th{
  background:var(--color03);
  border:none;
}
.htMain td{
  background:none;
  border:none;
}
.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{
  position:relative;
  margin:0 auto min(8vw,64px);
  margin-left:-5vw;
  padding-left:56px;
  font-size:min(6vw,1.9em);
  line-height:1;
  font-family:"Zen Antique", serif;
  font-weight:400;
  font-feature-settings:"palt";
}
.htBlock h2::after{
  content:"";
  display:block;
  position:absolute;
  bottom:-.5em;left:0;
  width:108vw;
  height:46px;
  background:url(../img/bg_ttl_sp.png) no-repeat left bottom/auto 46px;
  
}
.htBlock h3{
  margin-bottom:clamp(2vw, .6em, 24px);
  font-family:"Zen Antique", serif;
  font-weight:400;
  font-size:min(5vw,1.4em);
  font-feature-settings:"palt"
}
.htBlock .htBox{
  margin-bottom:min(5vw, 40px)
}
.htBoxImg{
  margin-bottom:min(4vw, 16px);
}
.htBoxImg img{
  margin-left:auto;
  margin-right:auto;
}
.htBoxImg-full img:first-of-type {
  margin-bottom: 4px;
}
.htMAPtxt{
  display:none;
}
.htMAP img{
  margin:0 auto;
}
#no02 .ht02-img2{
  width:calc(100%*800/1200);
  margin-left:auto;
  margin-right:auto;
}
#no05 .htBoxImg{
  max-width:min(60vw,300px);
  margin-right:auto;
  margin-left:auto;
}

.htSpotLead p img{
  display:inline-block;
  vertical-align: bottom;
}
.htSpotList{
  margin:0 auto min(6vw,48px);
}
#list dl.htSpot{
  display:flex;
  flex-wrap:wrap;
  margin:0 0 8px 0;
  background-color:var(--color02);
}
#list dl.htSpot dt{
  align-self:center;
  /* display: flex;*/
  width:calc(100% - 152px);
  font-weight:600;
  padding:4px 8px;
}
#list dl.htSpot dt a,#list dl.htSpot dt span{
  color:var(--color01);
  align-self:center;
}
#list dl.htSpot dd{
  display:flex;
  align-items:center;
  justify-content:center;
  width:152px;
  padding:4px;
  background-color:var(--color04);
}
#list dl.htSpot dd ul{
  display:flex;
  flex-wrap:wrap;
  list-style:none;
  width:100%;
  padding:0;
  margin:0
}
#list dl.htSpot dd ul li{
  align-self:center;
  /* display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center; */
  /* width:50%;
  padding:0 4px; */
}
#list dl.htSpot li.htSpotSt{
  width:104px;
  padding-right:4px;
}
#list dl.htSpot li.hrSpotPh img{
  width:40px;
  height:40px;
  background-color:var(--color01);
  border-radius:100px;
  padding:2px;
  margin:auto;
}
.mfp-content{
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
}
.htPopCont{
  position: relative;
  background: #FFF;
  padding:min(4vw,34px);
  width:calc(100% - 96px);
  max-width:400px;
  margin:auto;

}

.htPopCont h4{
  margin-bottom:.5em;
}
.htPopCont .mfp-close{
  top:-44px;
  color:var(--color02)!important
}
.htPopCont > div img{
  border:1px solid var(--color04)
}
.mfp-arrow{
  margin-top:0;
}
.htBorder{
  border:1px solid #666;
}
/*SP only*/
@media screen and (max-width:599px){
  .htMain .htTableBlock th{
    display:block;
    width:100%;
    padding:8px 0;
  }
  .htMain .htTableBlock td{
    display:block;
    width:100%;
  }
  .htBoxImgm,.htBoxImg-full{
    width:100vw;
    margin-left:min(-2vw,-16px);
    margin-right:min(-2vw,-16px);
  }
  .htMain #list ul.iconAll li span{
    font-size:min(.75em,3vw);
    line-height:1.2;
  }

}

/*1200px以下*/
@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:var(--color03)
  }
  .htMAP::-webkit-scrollbar-thumb{
    border-radius:4px;
    background-color:var(--colorPPL);
  }
}
/*TB以上*/
@media screen and (min-width:600px){
  .htBlock h2{
    margin-left:-100px;
    padding-left:160px;

  }
  .htBlock h2::after{
    content:"";
    display:block;
    position:absolute;
    bottom:-.5em;left:0;
    width:108vw;
    height:68px;
    background:url(../img/bg_ttl.png) no-repeat left bottom/auto 68px;
    
  }
  .htMain th{
    min-width:6em;
    border-bottom:2px solid var(--color01);
  }
  .htMain tr:last-child th::after{
    display:none;
  }
  .htMain tr:not(:last-of-type) td{
    border-bottom:2px solid var(--color03);
  }
  .htBlock h2 span{
    padding:.1em .4em .2em;
  }
  .htMain #list ul.iconAll li{
    width:10em;
  }
  #list .htSpotList{
    max-width:740px;
  }
  #list dl.htSpot dt{
    padding:8px 16px;
    width:calc(100% - 260px)
  }
  #list dl.htSpot dd{
    min-width:260px;
    padding:8px 24px;
  }
  #list dl.htSpot li.htSpotSt{
    width:calc(100% - 40px);
    padding-right:24px;
  }
  .htSpotLead{
    text-align:center;
  }

}
@media screen and (min-width:700px){
  .htHeadNav{
    max-width:42em;
    margin-left:auto;
    margin-right:auto;
  }
  .htHeadNav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
  }
  .htHeadNav li{
    margin:0 .5em 32px;
  }
  .htNav01 a::after,.htNav03 a::after,.htNav05 a::after{left:-4px}
  .htNav02 a,.htNav04 a{padding-right:1em;padding-left:calc(364px / 4 + 8px);}
  .htNav02 a::after,.htNav04 a::after{left:-4px;}
}
/*PC以上*/
@media screen and (min-width:1112px){
  .htHeadNav{
    max-width:64em;
  }
  .htBlock h2{
    margin-left:-150px;
  }
  .htGroup{
    display:flex;
    flex-wrap:wrap;
  }
  .htBoxImg{
    width:50%;
    max-width:none;
    margin-left:0;
    margin-right:0
  }
  .htBoxTxt{
    width:50%;
    max-width:none;
    padding-left:40px;
  }
  #no01 .htBoxImg{
    width:40%;
    order:2;
  }
  #no01 .htBoxTxt{
    width:60%;
    padding-right: 40px;
  }
  #no04 .htBoxImg{
    order:2;
  }
  #no05 .htBoxImg{
    width:30%;
    order:2;
  }
  #no05 .htBoxTxt{
    width:70%;
    padding-right: 40px;
  } 
}
.htBnr a{
  display:inline-block;
  background-color:var(--color02);
  padding:min(4vw,16px) min(4vw,24px);;
}
.htBnrFes a img{
  width:100%;
  max-width:380px;
}
.htBnrFes a p{
  margin-bottom:14px;
  text-indent:-.5em;
  line-height:1.3;
  color:var(--color01);
  text-decoration:none;
  font-family: "Zen Antique", serif;
  font-weight: 400;
  font-feature-settings: "palt";
  letter-spacing: -.04em;
  font-size:min(3.6vw,1em);
}
