@charset "utf-8";
/* CSS Document */

/*==================================
2026.01
TOPページプチリニューアル
====================================*/
@media screen and (min-width: 60.0625em) {
    .gnav, body {
        min-width: inherit;
    }
    .container {
        width: 100%;
    }
}
.new202601 .container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

@media screen and (min-width: 60.0625em) {
    header #headline {
        /*background-image: url("https://www.infolive.co.jp/www.ja-echizentakefu.or.jp/new202601/images/coop-takefu/page-img.jpg")!important;*/
    }
}


/*=====================================================
header メインナビ
=======================================================*/
.new202601 #header-gnav {
  position: relative;
  z-index: 5;
  width: 100%;
  display: flex;
  justify-content: center;
  height: 80px;
}

.new202601 #header-gnav .gnav-wrap {
  background-color: #ffffff;
  height: 105px;
  position: relative;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.home .new202601 #header-gnav .gnav-wrap {
  height: inherit;
}

.new202601 #header-gnav .gnav-upper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.new202601 #header-gnav .gnav-upper .site-name {
  padding-top: 8px;
  padding-left: 5px;
}

.new202601 #header-gnav .site-links {
  display: flex;
}

.new202601 #header-gnav .site-links ul {
  display: flex;
}

.new202601 #header-gnav .site-links ul li + li {
  margin-left: 20px;
}

.new202601 #header-gnav .site-links ul li a {
  color: #000;
  text-decoration: none;
  position: relative;
  padding-left: 15px;
  font-size: 14px;
}
.new202601 #header-gnav .site-links ul li a::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width:0;
height:0;
border-style:solid;
border-width: 6px 0 6px 9px;
border-color: transparent transparent transparent #08744F;
}

.new202601 #header-gnav .site-links ul li a:hover {
  color: #08744F;
}

.new202601 #header-gnav .site-links p {
  margin-left: 20px;
}
.new202601 #header-gnav .site-links p a {
  text-decoration: none;
  background-color: #08744F;
  color: #ffffff;
  padding: 5px 30px 5px 40px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  transition: all 0.3s ease;
  font-size: 14px;
  position: relative;
}
.new202601 #header-gnav .site-links p a:hover {
  background-color: #478340;
  transition: all 0.3s ease;
}
.new202601 #header-gnav .site-links p a::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 20px;
  width:0;
height:0;
border-style:solid;
border-width: 6px 0 6px 9px;
border-color: transparent transparent transparent #FFF700;
}

@media screen and (max-width: 1064px) {
  .new202601 #header-gnav .gnav-upper {
    padding-left: 10px;
  }
}
@media screen and (max-width: 960px) {
  .new202601 #header-gnav {
    display: none;
  }
}

/*nextのみ表示-----------------*/
.new202601 #header-gnav .gnav-bottom {
  width: 100%;
  margin-left: auto;
  position: absolute;
  bottom: 10px;
  pointer-events: none;
}

.home .new202601 #header-gnav .gnav-bottom {
  display: none;
}

.new202601 #header-gnav .gnav-bottom ul.main-nav {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 5px;
  pointer-events: none;
}

.new202601 #header-gnav .gnav-bottom ul.main-nav li {
  pointer-events: auto;
}


.new202601 #header-gnav .gnav-bottom ul.main-nav li + li {
  margin-left: 15px;
}

/*高さ調整*/
@media screen and (max-width: 60em) {
    #container {
        padding-top: 80px;
    }
}
@media screen and (max-width: 60em) {
    #header {
      height: 80px;
    }
  }

/*=====================================================
index
=======================================================*/

/*------------------------------------------
メイン　スライダー
-------------------------------------------*/
/*index以外は表示しない*/
.new202601 .feature {
  display: none;
}

/*既存のCSSを打ち消し*/
.home .new202601 .feature {
  display: block;
  position: relative;
  top: inherit;
  width: 100%;
  height: 550px;
  min-width: inherit;
}

.home .new202601 .feature .carousel {
  height: 550px;
  overflow: hidden;
}

.home .new202601 .feature .carousel .carousel-inner {
  height: 550px;
}

.home .new202601 .feature .carousel .carousel-inner .carousel-item {
  height: 550px;
}

.home .new202601 .feature .carousel .carousel-inner .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.new202601 #header .title {
  padding: 5px 5px 5px;
}

@media screen and (max-width: 60em) {
    #header {
      width: 100%;
    }
  }

@media screen and (max-width: 960px) {
  .home .new202601 .feature,
  .home .new202601 .feature .carousel,
  .home .new202601 .feature .carousel .carousel-inner,
  .home .new202601 .feature .carousel .carousel-inner .carousel-item {
    height: 250px;
  }
  .home .feature {
        margin-top: 60px;
    }
}
@media screen and (max-width: 60em) and (max-width: 36em) {
    .home .feature {
        margin-top: 60px;
    }
}

/* --- bootstrap carousel 調整 --- */

/* 1. 全体設定：スライドの動きを完全に止める */
.new202601 .carousel-fade .carousel-item {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out !important; /* フェード速度 */
    transform: none !important; /* 横移動を完全に禁止 */
    z-index: 0;
}

/* 2. アクティブな画像（現在表示中） */
.new202601 .carousel-fade .carousel-item.active {
    position: relative;
    opacity: 1;
    z-index: 2;
}

/* 3. 次の画像が重なって出てくるための設定（1→2枚目 / 2→1枚目 両対応） */
/* carousel-item-next（次へ）と carousel-item-prev（前へ/ループ戻り）の両方を指定 */
.new202601 .carousel-fade .carousel-inner .carousel-item-next.carousel-item-left,
.new202601 .carousel-fade .carousel-inner .carousel-item-prev.carousel-item-right {
    opacity: 1 !important;
    z-index: 1;
}

/* 4. 消えゆく画像の設定（白飛び防止） */
.new202601 .carousel-fade .active.carousel-item-left,
.new202601 .carousel-fade .active.carousel-item-right {
    opacity: 0 !important;
    z-index: 0;
    transition: opacity 0.8s ease-in-out;
}

/* 5. インジケーターと左右の矢印を最前面に（z-indexを大きな数値にする） */
.new202601 .carousel-indicators,
.new202601 .carousel-control-prev,
.new202601 .carousel-control-next {
    z-index: 20 !important; /* 画像の 2 よりも大きい数値を指定 */
}

/* --- bootstrap carousel 調整　ここまで --- */


/*------------------------------------------
トップ用　カラフルなナビ
-------------------------------------------*/
.new202601 .color-nav {
  position: relative;
  top: -50px;
  z-index: 30;
}

.new202601 .color-nav .container {
  margin-left: auto;
  margin-right: auto;
}

.new202601 .color-nav .color-nav-inner {
  padding-left: 10px;
  padding-right: 10px;
}

.new202601 .color-nav .color-nav-inner ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-left: -20px;
}

.new202601 .color-nav .color-nav-inner ul li {
  margin-left: 20px;
  margin-bottom: 10px;
}
.new202601 .color-nav .color-nav-inner ul li a img {
  transform: scale(1);
  transition: all 0.3s ease;
}
.new202601 .color-nav .color-nav-inner ul li a:hover img {
  transform: scale(1.1);
  transition: all 0.3s ease;
}

@media screen and (max-width: 1040px) {
  .new202601 .color-nav .color-nav-inner ul li img {
    max-width: 60px;
  }
  .new202601 .color-nav .color-nav-inner ul {
    margin-left: -10px;
  }
  .new202601 .color-nav .color-nav-inner ul li {
    margin-left: 10px;
    margin-bottom: 5px;
  }
}





/*------------------------------------------
トップ用　マガジン
-------------------------------------------*/
/* 1. 両端のスペース確保 */
.mag-slider {
    position: relative;
    padding: 0 50px !important;
}

/* 2. ボタン本体の設定（文字は消すので、透明にします） */
.slick-prev, .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100 !important;
    cursor: pointer;
    border: none !important;
    background: rgba(227, 80, 155, 1) !important; /* ピンク */
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    outline: none !important;
    color: transparent !important; /* 中身の文字（＜）は隠す */
    font-size: 0 !important;        /* 文字サイズも0にして消す */
}

/* 3. 三角形の共通設定 */
.slick-prev::before, .slick-next::before {
    content: '' !important;
    display: block !important;
    width: 0;
    height: 0;
    border-style: solid;
}

/* 4. 左矢印（左向きの三角形） */
.slick-prev::before {
    border-width: 8px 10px 8px 0; /* 三角形の形を調整 */
    border-color: transparent #ffffff transparent transparent; /* 右側だけ白 */
    margin-right: 3px; /* 微調整（中央に見えるように） */
}

/* 5. 右矢印（右向きの三角形） */
.slick-next::before {
    border-width: 8px 0 8px 10px;
    border-color: transparent transparent transparent #ffffff; /* 左側だけ白 */
    margin-left: 3px; /* 微調整 */
}

/* 位置の固定とホバー */
.slick-prev { left: 5px !important; }
.slick-next { right: 5px !important; }
.slick-prev:hover, .slick-next:hover {
    background: rgba(200, 60, 130, 1) !important;
}

@media screen and (max-width: 60em) {
  .home #magazine .mag-slider .slick-next::before,
  .home #magazine .mag-slider .slick-prev::before {
    width: 15px;
    height: 15px;
  }
}



/*------------------------------------------
新着情報まわり
-------------------------------------------*/
/* グラデーション背景
-------------------------------------*/
#home-gradient-bg {
  background: -moz-linear-gradient(90deg, #F9DBB5, #FFDDB2, #FFFEFC);
  background: -webkit-linear-gradient(90deg, #F9DBB5, #FFDDB2, #FFFEFC);
  background: linear-gradient(0deg, #F9DBB5, #FFDDB2, #FFFEFC);
}

/* 新着情報
-------------------------------------*/
#latest-news.new202601 {
  padding-top: 170px;
  padding-bottom: 90px;
}


/* 新着 左右
-------------------------------------*/
#latest-news.new202601 .cont01 {}

/*左右*/
.new202601 .my-row {
  display: flex;
}
.new202601 .my-row .my-row-col2 {
  width: 50%;
}
@media screen and (max-width: 1040px) {
  .new202601 .my-row {
    flex-direction: column;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
  }
  .new202601 .my-row .my-row-col2 {
    width: 100%;
    max-width: 500px;
  }
  .new202601 .my-row .my-row-col2 + .my-row-col2 {
    padding-top: 30px;
  }
}


/* ひだり
------------------------*/
#latest-news.new202601 .latest-news-left {
  border-left: 10px solid #478340;
  padding-left: 5px;
  padding-right: 20px;
}
#latest-news.new202601 h2 {
        font-size: 2.2rem;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: baseline;
        -webkit-align-items: baseline;
        -ms-flex-align: baseline;
        align-items: baseline;
        padding-left: 15px;
        color: #478340;
    }

#latest-news.new202601 h2 span {
        font-weight: 400;
        font-size: 1rem;
        text-align: right;
        display: inline-block;
        right: 0;
        color: #333;
    }

@media screen and (max-width: 60em) {
    #latest-news.new202601 h2 {
        font-size: 1.6rem;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: baseline;
        -webkit-align-items: baseline;
        -ms-flex-align: baseline;
        align-items: baseline;
        padding-left: 15px;
        color: #478340;
    }
    #latest-news.new202601 h2 span {
        font-weight: 400;
        font-size: 1rem;
        text-align: right;
        display: inline-block;
        right: 0;
        color: #333;
    }
}


/*タブ
--------------------------*/
/*bootstrapリセット------------*/
/* 1. 外枠と下線を消す */
.nav-tabs {
    border-bottom: none !important;
}

/* 2. 各タブボタンの背景、枠線、角丸をリセット */
.nav-tabs .nav-link {
    border: none !important;          /* 枠線を消す */
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    background-color: transparent !important; /* 背景を透明に */
    color: #666;                       /* 通常時の文字色（任意） */
    padding: 10px 20px;               /* 余白はお好みで */
}

/* 3. ホバー（マウスを乗せた時）の背景・枠線変化を止める */
.nav-tabs .nav-link:hover {
    border: none !important;
    background-color: transparent !important;
    color: #227d32; /* ホバー時の色（例：JAさんの緑など） */
}

/* 4. アクティブ（選択中）の時の白い背景と枠線を消す */
.nav-tabs .nav-link.active {
    background-color: transparent !important;
    border: none !important;
    color: #e3509b !important; /* アクティブ時の色（ピンクに合わせる場合） */
    font-weight: bold;
    /* もし下線だけ引きたい場合はここに追加 */
    /* border-bottom: 2px solid #e3509b !important; */
}

/* 5. タブコンテンツを囲む枠線も消す（もし設定していれば） */
.tab-content {
    border: none !important;
}

/*カスタム-----------------*/
#latest-news.new202601 #myTab-news {
  padding-left: 15px;
  padding-right: 15px;
}

/*ナビ*/
#latest-news.new202601 #myTab-news #myTab-list {
  margin-left: -10px;
}

#latest-news.new202601 #myTab-news #myTab-list .nav-item {
  margin-left: 10px;
}

#latest-news.new202601 #myTab-news #myTab-list .nav-item a {
  border-radius: 5px;
  border-top-left-radius: 5px!important;
  border-top-right-radius: 5px!important;
  padding: 2px 10px;
  color:#ffffff!important;
  -webkit-filter:drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.16));
-moz-filter:drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.16));
-ms-filter:drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.16));
filter:drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.16));
}
#latest-news.new202601 #myTab-news #myTab-list .nav-item a#news1-tab {
  background-color: #7AAED5!important;
}
#latest-news.new202601 #myTab-news #myTab-list .nav-item a#news2-tab {
  background-color: #9BD25C!important;
}
#latest-news.new202601 #myTab-news #myTab-list .nav-item a#news3-tab {
  background-color: #D26C5C!important;
}

/*中身*/
#latest-news.new202601 #myTab-news #myTab-cont {
  padding-top: 10px;
  padding-bottom: 10px;
}

#latest-news.new202601 #myTab-news #myTab-cont li {
  padding: 15px 18px;
}
#latest-news.new202601 #myTab-news #myTab-cont li + li {
  border-top: 1px solid #478340;
}


/*みぎ
------------------------*/
#latest-news.new202601 ul.top-banner {
  padding-left: 10px;
}

#latest-news.new202601 ul.top-banner li + li {
  margin-top: 10px;
}


/* 新着下のバナー
-------------------------------------*/
#latest-news.new202601 .cont02 {
  padding-top: 40px;
}
#latest-news.new202601 .cont02 ul {
  margin-left: auto;
  margin-right: auto;
}



/*------------------------------------------
重要なお知らせリンク
-------------------------------------------*/

#important-link.new202601 {
  display: flex;
  justify-content: center;
}

#important-link.new202601 .inner-wrap {
  margin-right: auto;
  margin-left: auto;
  padding-top: 40px;
  padding-bottom: 40px;
}
@media screen and (max-width: 1040px) {
  #important-link.new202601 .inner-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
}

#important-link.new202601 ul.link-list {
  width: 100%;
  max-width: 700px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 30px;
}

#important-link.new202601 ul.link-list li {
    -webkit-filter:drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
  -moz-filter:drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
  -ms-filter:drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
  filter:drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
  background-color: #ffffff;
}

#important-link.new202601 ul.link-list li + li {
  margin-top: 10px;
}

#important-link.new202601 ul.link-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  font-weight: bold;
  color: #414141;
  border: 1px solid #478340;
  border-radius: 5px;
  padding: 10px 15px;
}

#important-link.new202601 ul.link-list li a span:nth-of-type(1) {
  width: calc(100% - 140px);
}

#important-link.new202601 ul.link-list li a span:nth-of-type(2) {
  display: inline-block;
  background-color: #478340;
  color: #ffffff;
  padding: 2px 15px;
  border-radius: 30px;
  font-size: 12px;
  margin-left: 10px;
}

@media screen and (max-width: 1040px) {
  #important-link.new202601 ul.link-list li a {
    font-size: 16px;
    flex-direction: column;
  }
  #important-link.new202601 ul.link-list li a span:nth-of-type(1) {
    width: 100%;
    margin-bottom: 10px;
  }
  #important-link.new202601 ul.link-list li a span:nth-of-type(2) {
    width: 100%;
    max-width: 120px;
    font-size: 11px;
    margin-left: auto;
  }
}


#important-link.new202601 .btn-sns {
  -webkit-filter:drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
  -moz-filter:drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
  -ms-filter:drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
  filter:drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

#important-link.new202601 .btn-sns + .btn-sns {
  margin-top: 15px;
}

#important-link.new202601 .btn-sns a {
  background-color: #478340;
  padding: 15px 20px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}


/*------------------------------------------
バナーリスト
-------------------------------------------*/
#banner-list.new202601 {
  background-color: #F2E9D9;
  padding-top: 70px;
  padding-bottom: 70px;
  margin-bottom: 40px;
}

#banner-list.new202601 .container {
  margin-left: auto;
  margin-right: auto;
}

#banner-list.new202601 .inner-wrap {
  border-bottom: 1px solid #A5CEA0;
}

#banner-list.new202601 .inner-wrap > p {
   text-align: center;
  font-weight: bold;
  font-size: 18px;
}

#banner-list.new202601 ul.hoken-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
  margin-bottom: 30px;
  margin-left: -20px;
}

#banner-list.new202601 ul.hoken-list li {
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  margin-left: 20px;
  margin-bottom: 15px;
}

#banner-list.new202601 ul.hoken-list li + li {
 /* margin-left: 20px;*/
}

#banner-list.new202601 ul.banner-list-box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
  margin-bottom: 30px;
  margin-left: -20px;
}

#banner-list.new202601 ul.banner-list-box li {
  margin-left: 20px;
  margin-bottom: 15px;
}

#banner-list.new202601 ul.banner-list-box li + li {
  margin-left: 15px;
}


/*=====================================================
目的から探す
=======================================================*/
@media screen and (min-width: 60.0625em) {
    #floating #floating-nav .floating-btn {
        padding: 80px 0 10px 100px;
    }
}

#floating .list-wrap {}

#floating .list-wrap ul.icon-green-tri {
  margin: 0;
  padding: 0;
}

#floating .list-wrap ul.icon-green-tri li {
  list-style: none;
  padding: 0;
  position: relative;
  padding-left: 13px;
}
#floating .list-wrap ul.icon-green-tri li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 9px;
  height: 14px;
  background: #5d8246;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

#floating .list-wrap ul.icon-green-tri li a {
  font-weight: bold;
  font-size: 14px;
  color: #000000;
}