@charset "UTF-8";
/*新デザイン(旧デザインとの差分)css
新デザインが適用される部分でのみ読み込む
(index.php category.php以外)

*/
/*-----------------------------------------
  スライダー
-----------------------------------------*/

.metaslider .flex-control-nav li a {
  background-color: #abe5e4;
  box-shadow: none;
  width : 16px;
  height: 16px;
}
.metaslider .flex-control-nav li a.flex-active {
  background-color: #6bcdcc;
  box-shadow: none;
}

.flex-direction-nav a {
  opacity: 1 !important;
}

.flex-direction-nav .flex-prev {
  background-image: none;
  background-color :rgba(107,204,205,0.8);
  overflow: hidden;
  text-indent: 0;
  color: rgba(107,204,205,1);
  border-radius: 50%;
  left : 5px !important;
}

.flex-direction-nav .flex-next {
  background-image: none;
  background-color :rgba(107,204,205,0.8);
  color: #FFF;
  overflow: hidden;
  text-indent: 0;
  color: rgba(107,204,205,1);
  border-radius: 50%;
  right : 5px !important;
}

.flex-direction-nav .flex-prev:before {
  font-family: "FontAwesome";
  content: "\f104";
  display: inline-block;
  position: relative;
  font-size: 28px;
  color: #FFF;
  left:8px;
}
.flex-direction-nav .flex-next:before {
  font-family: "FontAwesome";
  content: "\f105";
  display: inline-block;
  position: relative;
  font-size: 28px;
  color: #FFF;
  left:10px;
}


/* ----------------------------------------
* レスポンシブ
---------------------------------------- */
.ac-container {
  padding-top:10px;
}

/*-----------------------------------------
共通ウィジェット
------------------------------------------*/
.common_widget .widget {
  margin-bottom: 20px;
}

@media screen and (max-width: 820px) {
  /* tablet -------------------------------------------------------------------------------
    551px-820px
  ----------------------------------------------------------------------------------------*/
  #sp-hide {
    display: none !important;
  }
  .metaslider .flex-control-nav {
    bottom: -25px !important;
  }
  
  .simple-theme .wp-posts-carousel-created-date {
    background-image:url(../niki/images/newpost_icon.png);
    background-repeat: no-repeat;
    background-size: 40%;
  }
  #header .button_contact a {
	display: block; /*メールフォーム　SP非表示*/
    border:none;
    margin:0;
    padding:0;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    background-color: transparent;
  }
  
  .breadcrumb {
    margin-top: 10px;
  }
  
  
  /*-----------アコーディオン表示------------*/
  /*デザイン変更*/
  .top-headline,.top-h2line {
  background-color: #6BCDCC;
    color: #FFF;
    padding: 5px 10px;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
    text-align: center;
    margin-top:5px;
    border-bottom:0;
    height:60px;
    line-height:60px;
  }
  
  .top-headline {
    line-height:30px;
  }
  
  .ac-container {
    margin-bottom:30px;
  }
  
/*設定 */
  .ac-container {
    padding: 0 3%;
  }
  .ac-container label{
    position: relative;
    z-index: 20;
    display: block;
    cursor: pointer;
    line-height: 33px;
    font-size: 19px;
  }
 

 
/*下向き矢印アイコンを入れる */
  .ac-container label:after,
  .ac-container input:checked + label:after{
    content: '';
    position: absolute;
    width:100%;
    height: 100%;
    right: 10px;
    top: 0;
    margin:auto;
    background: transparent url(../niki/images/arrow_down.png) no-repeat right center;  
    background-size : 8%;
  }
 
/*選択後に表示される上向きの矢印アイコンを入れる */
  .ac-container input:checked + label:after{
    background-image: url(../niki/images/arrow_up.png);
  }
 
/*ラジオボタンを隠す */
  .ac-container input{
    display: none !important;
  }
 
/*コンテンツ部分の表示・非表示の設定 */
  .ac-container article{
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    transition: height 0.3s ease-in-out;
  }
  .ac-container article p{
    padding-top: 10px;
    padding-bottom: 10px;
  }
  
  .ac-container input:checked ~ article{
    transition: height 0.5s ease-in-out;
  }
 
/*クラスの高さを定義する */
  .ac-container input:checked ~ article.ac-small{
    height: auto;
  }

  /*-----------------/アコーディオン-------------*/
  

  /*----------------スクロールナビ(home)--------------*/
  .widget_nav_menu {
    position: relative;
  }
  
  .nav_link_container {
    width: 100%;
    height:84px;
    margin:18px 0 18px 0;
    overflow-x: auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling: touch; /* 慣性スクロール */
  }
  
  .nav_link_icon {
    width: 3000px;
    height: 55px;
    line-height: 60px;
    margin: 0 auto;
    list-style: none;
    font-size:3.8vw;
    padding: 0;
  }
  
  .nav_link_icon a {
    margin-left:6px;
    float: left;
    display:block;
    height:79px;
  }
  

  /*-------------------------------------------------------------*/
  @media (max-width: 500px){
    
    .nav_link_container {
      height:60px;
      margin:10px 0 10px 0;
    }
  
    .nav_link_icon a {
      margin-left:6px;
      float: left;
      display:block;
      height:56px;
    }
    
    .nav_link_icon a img {
      width:110px;
    }
  }
  
/*---------------------------------------------*/
  

  .wrap {
    width: 96%;
    margin: 0 !important;
    padding-top:45px;
  }

  #side .side-inner {
    padding: 0 5%;
  }
  
  #main-home .post-loop-wrap {
    padding: 0 5% 20px;
  }

  #main-home .post .post-content {
    display:flex;
    padding:0 !important;
    margin:0 !important;
    border: 0;
  }
  
  #main-home .post:nth-child(odd) .post-content {
    flex-direction: row-reverse;
  }
  
  #main-home .post .post-content .thumb_box{
    width:50%;
    padding:0;
    margin:0;
  }
  
  #main-home .post .post-content .thumb_box .post_category {
    display: none;
  }
  
    #main-home .post .post-content .thumb_box img{
    width:100%;
    padding:0;
    margin:0;
    object-fit: cover;
  }
  
    #main-home .post .post-content .title_box{
    position: relative;
    width:50%;
    padding:0;
    margin:0;
    vertical-align: middle;
    background-color: #6bcdcc;
  }
  
  #main-home .post .post-content .title_box .wrap {
    position: absolute;
    top: 47%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 2.5vw 20% 0 6%;
    margin: auto !important;
    width: 72% !important;
  }
  
  #main-home .post .post-content .title_box .wrap p{
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 7%;
    color: #FFF;
  }
  
  #main-home .post .post-content .title_box .wrap p i{
    color: #FFF;
  }
  
  #main-home .post .post-content .title_box .wrap .post-meta li{
    font-size:2.5vw;
    background: none;
    color: #FFF;
    padding-left: 2%;
  }
  
  #main-home .post .post-content .title_box .wrap .post-meta li i{
    display: none;
  }
  
  #main-home .post .post-content .title_box .wrap .post-title{
    font-size:3.2vw;
    color: #FFF;
  }
  
    #main-home .post .post-content .title_box .wrap .post-title a {
    color: #FFF;
    font-weight:500;
  }
  
  #main-home .post .post-content .title_box .post-meta {
    top: 0;
  }
  

  .cate-title-img {
    text-align:center;
  }
 @media (max-width: 420px){
    .cate-title-img img {
      width:70% !important;
    }
  }
  .widget_wp_posts_carousel{
    margin-top:-5px;
  }

  
  .pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  /*------------------------------------------*/
  /* SP時スライダー調整*/
  /*------------------------------------------*/
  .metaslider .flex-control-nav li a {
    height:10px;
    width: 10px;
  }
  
  #f_logo span {
    display: block;
  }
}
@media screen and (max-width: 550px) {
  /* phone -----------------------------------------------------------------
  0px -550px
  -------------------------------------------------------------------------*/
  
  .top-headline,.top-h2line {
    font-size: 14px;
    height:40px;
    line-height:40px;
  }
  
  .top-headline {
    line-height:20px;
  }
  
  
    /* header */
  #header {
    padding: 0 !important;
    border-bottom:1px solid #CCC;
    height:60px;
    border-top: 5px solid #6bcdcc;
  }

  #header .wrap {
    padding: 0;
    display:flex;
    margin: 0;
  }

  #header #logo img {
    vertical-align: top;
    padding-top:14px;
    padding-left:18px;
    width:160px;
  }

  #header-menu-tog {
    display: block;
    order:-1;
    width:60px;
  }

  #header .button_contact {
    /*display: none;*/
    width:60px;
  }
  #content .wrap {
    width: 98%;
    margin: 0 1%;
  }

  .post .post-header h1.post-title {
    line-height: 1.3;
	font-size:24px;
  }

  .post .post-content h2 {
    line-height: 1.3;
    padding: 14px;
	font-size:20px;
  }

}