@charset "utf-8";

/* header */
header .inner .head_logo,
header nav > ul > li a,
header nav > ul > .sub span{
  color:#000;
}


/* #btnmenu */
#btnmenu:not(.close) span,
#btnmenu span:before,
#btnmenu span:after{
  background:#000;
}


/*****************
 #topics_list
*****************/
#topics_list{
	padding-top:min(9%,90px);
}


/* .category_list */
#topics_list .category_list{
}
#topics_list .category_list ul{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
#topics_list .category_list ul li{
  margin:1em 1em 0;
  font-size:min(2vw,16px);
}
#topics_list .category_list ul li a{
  font-weight:500;
  color:#3a4e69;
  letter-spacing:0.2em;
  padding-left:0.2em;
}
#topics_list .category_list ul li a.current{
  border-bottom:2px solid;
}

@media screen and (max-width:768px){
  #topics_list .category_list ul{
    padding:3% 10% 0;
  }
  #topics_list .category_list ul li{
    margin:0.5em 1em 0;
    font-size:3.2vw;
  }
}



/* セレクトメニュー */
select{
  margin-top:min(3%,30px);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width:13em;
  height:2em;
  line-height:1.9;
  font-size:min(2vw,15px);
  padding:0 1em 0 10px;
  border-radius: 3px;
  border:1px solid #ccc;
  background: #fff url(select_arrow.svg)no-repeat calc(100% - 0.5em) 50%;
  background-size:1em auto;
  font-weight:500;
  outline:none;
}
select::-ms-expand {
  display: none;
}
select option,
select optgroup{
  background:#fff;
}

@media screen and (max-width:768px){
  select{
    margin-top:5%;
    font-size:3.2vw;
  }
}


/* .entry_list */
#topics_list .entry_list{
  max-width:1160px;
  max-width:1024px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
#topics_list .entry_list li{
  width:28%;
  margin:8% 0 0 8%;
}
#topics_list .entry_list li:nth-child(3n+1){
  margin-left:0;
}
#topics_list .entry_list li figure img{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit: cover; 
}
#topics_list .entry_list li h2{
  line-height:1.5;
  margin-top:3%;
  text-align:left;
}
#topics_list .entry_list li h2 .date{
  display:block;
  font-size:min(1.4vw,14px);
  letter-spacing:0.1em;
}
#topics_list .entry_list li h2 .tit{
  display:block;
  line-height:1.4;
  margin-top:3%;
  font-size:min(1.6vw,16px);
  font-weight:500;
}
#topics_list .no-posts{
  margin-top:min(9%,90px);
  font-size:18px !important;
  text-align:center;
}

@media screen and (max-width:768px){
  #topics_list .entry_list li{
    width:48%;
    margin-left:4%;
    margin-top:9%;
  }
  #topics_list .entry_list li:nth-child(3n+1){
    margin-left:4%;
  }
  #topics_list .entry_list li:nth-child(odd){
    margin-left:0;
  }
  #topics_list .entry_list li h2 .date{
    font-size:2.5vw;
  }
  #topics_list .entry_list li h2 .tit{
    font-size:3.2vw;
  }
  #topics_list .no-posts{
    margin-top:12%;
    font-size:4vw !important;
  }
}


/* .pager */
#topics_list .topics_bottom {
  margin-top:min(12%,120px);
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
}
#topics_list .topics_bottom .page-numbers {
  margin:0 0.5em;
  font-size:min(2vw,20px);
}
#topics_list .topics_bottom .current {
  font-weight: 500;
}

@media screen and (max-width:768px){
  #topics_list .topics_bottom .page-numbers {
    font-size:3.8vw;
  }
}


/*****************
 #topics_entry
*****************/
#topics_entry{
	padding-top:min(5%,50px);
}

@media screen and (max-width:768px){
  #topics_entry{
    padding-top:0;
  }
}

/* .entry */
#topics_entry .entry{
  max-width:800px;
  padding-top:min(9%,90px);
  text-align:left;
}
#topics_entry .entry .date{
  display:block;
  letter-spacing:0.1em;
}
#topics_entry .entry h1,
#topics_entry .entry h2,
#topics_entry .entry h3,
#topics_entry .entry h4,
#topics_entry .entry h5,
#topics_entry .entry h6{
  line-height:1.7;
}
#topics_entry .entry h1{
  margin-bottom:7%;
}
#topics_entry .entry h2{
  margin:7% 0 3%;
  font-size:min(2.4vw,24px);
}
#topics_entry .entry h3{
  margin:7% 0 3%;
  font-size:min(2.1vw,21px);
}
#topics_entry .entry h4{
  font-size:18px;
}
#topics_entry .entry h5{
  font-size:17px;
}
#topics_entry .entry h6{
  font-size:16px;
}
#topics_entry .entry picture img{
  max-width:600px;
  height:auto !important;
  margin:0.3em 0;
  cursor:pointer;
}
#topics_entry .entry hr{
  height:1px;
  margin:1em 0;
  background-color:#000;
}
#topics_entry .entry a{
  color: #006386;
}

@media screen and (max-width:768px){
  #topics_entry .entry h2{
    margin:7% 0 3%;
    font-size:4.2vw;
  }
  #topics_entry .entry h3{
    margin:7% 0 3%;
    font-size:4vw;
  }
  #topics_entry .entry h4{
    font-size:3.8vw;
  }
  #topics_entry .entry h5{
    font-size:3.6vw;
  }
  #topics_entry .entry h6{
    font-size:3.4vw;
  }
  #topics_entry .entry picture img{
    max-width:100%;
  }
}


/* 画像モーダル表示 */
.overlay{
	width:100%;
	height:100vh;
	position:fixed;
	top:0;
	left:0;
	z-index:101;
	background-color:rgba(0,0,0,0.8);
}
.overlay .flex{
	width:100%;
	height:100vh;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}
.overlay .flex img{
	width:auto;
	height:auto;
	max-width:90%;
	max-height:90%;
	cursor:pointer;
}


/* .salon_single */
#topics_entry .salon_single{
  margin-top:min(18%,180px);
  padding:min(6%,50px) min(7%,120px);
  font-size:16px;
  text-align:left;
  border-top:1px solid;
  border-bottom:1px solid;
}
#topics_entry .salon_single dd{
  line-height:2;
}
#topics_entry .salon_single:nth-of-type(n+2){
  margin-top:1em;
}
#topics_entry .salon_single dd a{
  color:#000;
}

@media screen and (max-width:768px){
  #topics_entry .salon_single{
    padding:7%;
    font-size:3.2vw;
  }
}


/* .salon_list */
#topics_entry .salon_wrapper{
  margin-top:min(12%,120px);
  padding:min(6%,50px) min(7%,120px);
  background-color:#f9f9f8;
  text-align:left;
}
#topics_entry .salon_wrapper p{
  font-size:min(2.4vw,20px);
}
#topics_entry .salon_wrapper .salon_list{
  margin-top:min(3%,30px);
}
#topics_entry .salon_wrapper .salon_list div{
  line-height:1.5;
  padding:0.3em 0;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
#topics_entry .salon_wrapper .salon_list div dt{
  flex:1;
  font-size:min(2.4vw,20px);
}
#topics_entry .salon_wrapper .salon_list div dt span{
  margin-right:0.5em;
}
#topics_entry .salon_wrapper .salon_list div dd:last-of-type{
  margin-left:0.5em;
}
#topics_entry .salon_wrapper .salon_list div dd .btn{
  font-size:min(2vw,16px);
  background-color:transparent;
  color:#000;
  white-space:nowrap;
}
#topics_entry .salon_wrapper .salon_list div dd:first-of-type .btn{
  width:7em;
}
#topics_entry .salon_wrapper .salon_list div dd:last-of-type .btn{
  width:11em;
}

@media screen and (max-width:768px){
  #topics_entry .salon_wrapper{
    margin-top:min(12%,120px);
    padding:7%;
  }
  #topics_entry .salon_wrapper p{
    font-size:3.2vw;
  }
  #topics_entry .salon_wrapper .salon_list div{
    line-height:2;
    padding:0.3em 0 0.8em;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  #topics_entry .salon_wrapper .salon_list div dt{
    width:100%;
    font-size:3.2vw;
    flex:auto;
  }
  #topics_entry .salon_wrapper .salon_list div dd{
    width:49%;
  }
  #topics_entry .salon_wrapper .salon_list div dd:last-of-type{
    margin-left:0;
  }
  #topics_entry .salon_wrapper .salon_list div dd .btn{
    font-size:3.2vw;
  }
  #topics_entry .salon_wrapper .salon_list div dd:first-of-type .btn{
    width:100%;
  }
  #topics_entry .salon_wrapper .salon_list div dd:last-of-type .btn{
    width:100%;
  }
}



/* .prev_next */
#topics_entry .topics_bottom{
  padding-top:min(12%,120px);
}
.prev_next{
  max-width:880px;
  padding-bottom:min(5%,50px);
  border-bottom:1px solid #9e9e9e;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
.prev_next .prev,
.prev_next .next{
  width:30%;
  text-align:left;
}
.prev_next .prev > span,
.prev_next .next > span{
  display:block;
  font-size:min(2vw,20px);
}
.prev_next .prev a,
.prev_next .next a{
  margin-top:5%;
  display:block;
}
.prev_next .prev a figure img,
.prev_next .next a figure img{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit: cover; 
}
.prev_next .prev a figure figcaption,
.prev_next .next a figure figcaption{
  margin-top:3%;
  line-height:1.3;
}
.prev_next .prev a figure figcaption .title,
.prev_next .next a figure figcaption .title{
  margin-top:3%;
  display:block;
  font-weight:500;
}
.prev_next .topics_top {
  width:18%;
}
.prev_next .topics_top a {
  display:block;
  font-size:min(1.8vw,18px);
  border:1px solid;
  border-radius:100px;
}

@media screen and (max-width:768px){
  .prev_next{
    -webkit-justify-content: space-between;
    justify-content: space-between;
    position:relative;
  }
  .prev_next .prev,
  .prev_next .next{
    width:48%;
  }
  .prev_next .prev > span,
  .prev_next .next > span{
    font-size:3vw;
  }
  .prev_next .prev a,
  .prev_next .next a{
    margin-top:7%;;
  }
  .prev_next .prev a figure figcaption .title,
  .prev_next .next a figure figcaption .title{
    font-size:3.2vw;
  }
  .prev_next .topics_top {
    width:22%;
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
  }
  .prev_next .topics_top a {
    font-size:3vw;
  }
}


/* .ranking */
.ranking{
  padding:min(7%,70px) 0 min(12%,120px);
} 
.ranking h2{
  font-size:min(2vw,20px);
}
.ranking .topics_list_4{
  margin-top:min(5%,50px);
}

@media screen and (max-width:768px){
.ranking h2{
  font-size:3.4vw;
}

}