@charset "utf-8";
:root{
  --colorKey:#f4ed86;
  --colorNAV:#0f1051;
  --color01:#25bbef;
  --color02:#e2eef2;
}
@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 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:#000;
}
.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-color:var(--colorNAV);
  color:#FFF;
}
.htHeadTxt h1{
  width:100%;
  margin-bottom:min(4vw,24px);
  text-align:center;
  font-family: "Noto Serif JP", serif;
  font-weight:bold;
  color:var(--colorKey)
}
.htHeadTxt h1 .htHeadTtl1{
  display:block;
  font-size:min(7vw,1.2em);
  line-height:1.3;
}
.htHeadTxt h1 .htHeadTtl2{
  display:block; 
  margin-top:.5em;
  font-size:.5em;
  line-height:1.3;
}
.htHeader .htKV{
  width:100%;
}
.htHeader .htKV img{
  margin:0 auto;
}
.htHeadTxt{
  padding:min(8vw,64px) 0 min(4vw,40px);
}
.htDate{
  max-width:30em;
  padding:min(1vw,.5em) .5em;
  margin:min(2vw,24px) auto;
  border:2px solid var(--colorKey);
  color:var(--colorKey);
  text-align:center;
}
p.htDateTxt{
  margin-bottom:0;
  font-family: "Noto Serif JP", serif;
  font-size:min(4.2vw,20px);
  font-feature-settings:"palt";
}
.htDate .fontS{
  margin-bottom:0;
}
.htHeadNav{
  background-color:var(--colorNAV);
  border-top:1px solid var(--colorKey);
}
.htHeadNav ul{
  display:flex;
  flex-wrap:wrap;
  text-align:center;
  justify-content:center;
  margin-bottom:0;
  padding:0;
  list-style:none;
}
.htHeadNav ul li{
  position:relative;
  width:50%;
  padding:0;
  border-left:1px solid var(--colorKey);
  border-bottom:1px solid var(--colorKey);
}
.htHeadNav ul li:last-of-type{
  border-right:1px solid var(--colorKey);
}
.htHeadNav ul li::after{
  position:absolute;
  bottom:10px;left:calc(50% - 5px);
  display:block;
  content:"";
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--colorKey);
  border-bottom: 2px solid var(--colorKey);
  transform: rotate(45deg);
  transition:all .3s
}
.htHeadNav ul li:hover::after{
  bottom:7px;
  border-right-color:var(--colorNAV);
  border-bottom-color:var(--colorNAV);
}
.htHeadNav a{
  display:flex;
  flex-wrap:wrap;
  align-content:center;
  justify-content:center;
  height:100%;
  padding:10px 4px 24px;
  font-size:min(3.4vw , .875em);
  line-height:1.4;
  font-weight:bold;
  color:var(--colorKey);
  text-decoration:none;
  transition:all .3s
}
.htHeadNav a:hover{
  background-color:var(--colorKey);
  color:var(--colorNAV);
}

@media screen and (max-width:599px){
  .htHeadNav .content-wrap{
    width:100%;
    max-width:none;
  }
}
/*TB以上*/
@media screen and (min-width:600px){
  .htHeadTxt{
    text-align:center;
  }
}
/*テキストが改行しない程度*/
@media screen and (min-width:720px){
  .htHeadNav ul li{
    width:calc(100% / 4);
  }
  .htHeadNav ul li:nth-of-type(4n){
    border-right:1px solid var(--colorKey);
  }
}
/*PC以上*/
@media screen and (min-width:1025px){
}
/*テキストが改行しない程度*/
@media screen and (min-width:1280px){
  .htHeadNav ul li{
    width:calc(100% / 7);
  }
  .htHeadNav ul li:nth-of-type(4n){
    border-right:none;
  }
}
/*------------------------------ */
.htMain{
  background:url(../img/bg.png) repeat center center #f4ecbe;
}
.htBtn{
  text-align:center
}
.htBtn a{
  display:inline-block;
  min-width:80%;
  padding:.8em 1em;
  margin-bottom:min(4vw,26px);
  background-color:var(--colorNAV);
  border:2px solid var(--colorNAV);
  cursor:pointer;
  text-decoration:none;
  color:var(--colorKey);
  font-weight:600;
  transition:all .3s
}
.htBtn a:hover{
  opacity:.8;
}
.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)
}
.htMain ul{
  list-style:disc;
  margin-bottom:1em;
  padding-left:20px
}
.htMain .mb0{margin-bottom:0}
.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(--color02);
  border:none;
}
.htMain td{
  background:none;
  border:none;
}
.htMain table ul{
  margin-bottom:0
}
.htMain table ul.mb10{
  margin-bottom:10px;
}
.htMain .content-wrap{
  position:relative;
  background-image:
    url("../img/bg_cont1.svg"),
    url("../img/bg_cont2.svg"),
    url("../img/bg_cont3.svg"),
    url("../img/bg_cont4.svg");

  background-position:
    left top,
    right top,
    left bottom,
    right bottom;

  background-repeat: no-repeat;

  background-size:14px 14px;
  background-color:#FFF;
}
.htMain .content-wrap::after,.htMain .content-wrap::before{
  content:"";
  display:block;
  position:absolute;
  top:14px;bottom:14px;
  width:1px;
  background-color:var(--color01);
}
.htMain .content-wrap::after{
  left:2px;
}
.htMain .content-wrap::before{
  right:2px;
}
.htWrap{
  position:relative;
  padding:16px;
}
.htWrap::after,.htWrap::before{
  content:"";
  display:block;
  position:absolute;
  left:14px;right:14px;
  width:calc(100% - 24px);
  height:1px;
  background-color:var(--color01);
}
.htWrap::after{
  top:2px;
}
.htWrap::before{
  bottom:2px;
}
.htBlock{
  padding:min(5vw,80px) min(2vw,16px) 0
}
.htBlock h2{
  position:relative;
  margin:0 auto min(4vw,40px);
  font-size:min(5.3vw,1.9em);
  font-family: "Noto Serif JP", serif;
  font-weight:400;
  font-feature-settings:"palt";
  text-align:center;
  color:var(--color01);
  line-height:1.4;

  background-image:
    url("../img/icon_h2.svg"),
    url("../img/icon_h2.svg");
  background-position:
    left bottom,
    right bottom;
  background-size:34px auto;
  background-repeat: no-repeat;
  padding-bottom:24px;

}
.htBlock h2::after{
  content:"";
  position:absolute;
  bottom:8px;left:40px;right:40px;
  display:block;
  width:calc(100% - 80px);height:1px;
  background-color:var(--color01);
}
.htBlock h2 .fontS{
  display:inline-block;
  font-size:.75em;
}
.htBlock h3{
  margin-bottom:min(2vw,16px);
  padding-left:28px;
  background:url(../img/icon_h3.svg) no-repeat left center/24px auto;
  font-family: "Noto Serif JP", serif;
  font-weight:400;
  font-size:min(5vw,1.4em);
  font-feature-settings:"palt"
}
#htFoot.htBlock h3{
  padding-left:0;
  background:none
}
/* .htBlock .htBox{
  margin-bottom:min(5vw, 40px)
} */
.htBoxImg{
  margin-bottom:min(4vw, 16px);
}
.htBoxImg img{
  margin-left:auto;
  margin-right:auto;
}
.htColGroup{
	position:relative;
	display:flex;
	flex-wrap:wrap
}
[class^="htCol-"] {
	position:relative;
	min-height:1px;
	overflow:hidden}
.htCol-sp1 {width:8.33333%}
.htCol-sp2 {width:16.66667%}
.htCol-sp3 {width:25%}
.htCol-sp4 {width:33.33333%}
.htCol-sp5 {width:41.66667%}
.htCol-sp6 {width:50%}
.htCol-sp7 {width:58.33333%}
.htCol-sp8 {width:66.66667%}
.htCol-sp9 {width:75%}
.htCol-sp10 {width:83.33333%}
.htCol-sp11 {width:91.66667%}
.htCol-sp12 {width:100%}

/*blockごと*/
.ht05Goods{
  margin-top:min(2vw,32px);
  margin-bottom:min(2vw,32px);
}
.ht05Goods img{
  margin-bottom:10px;
}

#htFoot{
  background-color:var(--colorNAV);
  padding-bottom:min(6vw,48px);
  margin-top:min(10vw,140px);
  color:#FFF;
}
#htFoot .content-wrap{
  background:none;
}
.htMain #htFoot .content-wrap::before,.htMain #htFoot .content-wrap::after{
  display:none;
}
#htFoot h3{
  text-align:center;
  line-height:1.4;
}

/*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%;
  }
  .htcColGroup{margin-right:-5px;margin-left:-5px}
  [class^="htCol-"] {padding-right:5px;padding-left:5px}
}
/*TB以上*/
@media screen and (min-width:600px){
  .htHeadTxt h1 .htHeadTtl1{
    font-size:1.2em;
  }
  .htHeadTxt h1 .htHeadTtl2{
    font-size:.75em;
  }
  .htBtn{
    margin-top:2em;
  }
  .htBtn a{
    min-width:20em;
    padding:1.5em 3em;
  }
  .htMain .content-wrap{
    background-size:28px;
    
  }
  .htMain .content-wrap::after, .htMain .content-wrap::before{
    top:28px;bottom:28px;
    width:2px;
  }
  .htMain .content-wrap::before{
    right:4px;
  }
  .htMain .content-wrap::after{
    left:4px;
  }
  .htWrap{
    padding:32px;
  }
  .htWrap::after,.htWrap::before{
    width:calc(100% - 56px);
    left:28px;right:28px;
    height:2px;
  }
  .htWrap::after{
    top:4px;
  }
  .htWrap::before{
    bottom:4px;
  }
  .htMain th{
    min-width:6em;
    border-bottom:2px solid #FFF;
  }
  .htMain tr:last-child th::after{
    display:none;
  }
  .htMain tr:not(:last-of-type) td{
    border-bottom:2px solid #FFF;
  }
  .htBoxImg{
    max-width: 570px;
    margin-left: auto;
    margin-right: auto;
  }
  .htBlock h2{
    padding-bottom:40px;
  }
  .htBlock h3{
    padding-left:38px;
    background-size:30px auto;
  }
  .htColGroup{margin-right:-8px;margin-left:-8px}
  [class^="htCol-"] {padding-right:8px;padding-left:8px}
  .htCol-tb1{width:8.33333%}
  .htCol-tb2{width:16.66667%}
  .htCol-tb3{width:25%}
  .htCol-tb4{width:33.33333%}
  .htCol-tb5{width:41.66667%}
  .htCol-tb6{width:50%}
  .htCol-tb7{width:58.33333%}
  .htCol-tb8{width:66.66667%}
  .htCol-tb9{width:75%}
  .htCol-tb10{width:83.33333%}
  .htCol-tb11{width:91.66667%}
  .htCol-tb12{width:100%}
}

/*PC以上*/
@media screen and (min-width:1025px){
  .htWrap{
    padding:40px;
  }
  .htBox{
    display:flex;
    flex-wrap:wrap;
  }
  .htColGroup{margin-right:-12px;margin-left:-12px}
  [class^="htCol-"] {padding-right:12px;padding-left:12px}
  .htCol-pc1{width:8.33333%}
  .htCol-pc2{width:16.66667%}
  .htCol-pc3{width:25%}
  .htCol-pc4{width:33.33333%}
  .htCol-pc5{width:41.66667%}
  .htCol-pc6{width:50%}
  .htCol-pc7{width:58.33333%}
  .htCol-pc8{width:66.66667%}
  .htCol-pc9{width:75%}
  .htCol-pc10{width:83.33333%}
  .htCol-pc11{width:91.66667%}
  .htCol-pc12{width:100%}  

  #no03 .htBoxImg,#no05 .htBoxImg{
    width:50%;
    max-width:none;
    margin-left:0;
    margin-right:0
  }
  #no03 .htBoxTxt,#no05 .htBoxTxt{
    width:50%;
    max-width:none;
  }
  /*画像 右*/
  #no03 .htBoxTxt,#no05 .htBoxTxt/*,#no09 .htBoxTxt*/{
    padding-left:40px;
  }

  /*画像 左
  #no06 .htBoxImg,#no08 .htBoxImg{
    order:1;
  }
  #no06 .htBoxTxt,#no08 .htBoxTxt{
    padding-right:40px;
  }*/
}