@charset "UTF-8";
/* *************************************************************************

	マーケ作成特集用

	/furusato/feature/F000-316/nagano/
	/html/upload/user_data/feature/nagano/img/

	01. 基本設定
	02. 汎用クラス・共通要素
	03. レイアウト

	（基本フォントサイズ： 10px）

************************************************************************* */
/* *************************************************************************

	01. 基本設定

************************************************************************* */
/* コンテンツ部分の背景色 */
/*.ec-layoutRole {background-color: #fcf9e1 !important;}*/
.ec-layoutRole__contents {
  background: url("../img/bg.png") repeat-y top 460px center;
  padding-bottom: 40px; }

.ec-featureRole * {
  font-size: 1.5rem; }
  @media only screen and (max-width: 767px) {
    .ec-featureRole * {
      font-size: 1.5rem; } }

/* ヘッダ下の余白*/
/* コメントの親ボックス */
.ec-featureRole__headdescription {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important; }
  .ec-featureRole__headdescription p {
    margin-bottom: 0; }

/* デフォルトMV部分 */
.ec-featureRole__head {
  display: none; }

/* MV */
.mv-image {
  margin-bottom: 0; }
  @media only screen and (max-width: 767px) {
    .mv-image {
      margin-top: 0; } }

/* 商品アンカー非表示 */
.ec-featureItems.buttons {
  display: none; }

html {
  scroll-behavior: smooth; }

/* *************************************************************************

	02. 汎用クラス・共通要素

************************************************************************* */
.red {
  color: #e33b2c !important; }

.marker {
  text-decoration: underline;
  /* 下線 */
  text-decoration-thickness: 0.5em;
  /* 線の太さ */
  text-decoration-color: #fdec49;
  /* 線の色 */
  text-underline-offset: -0.15em;
  /* 線の位置。テキストに重なるようにやや上部にする */
  text-decoration-skip-ink: none;
  /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */ }

.kome {
  padding-left: 1em !important; }
  .kome > li {
    text-indent: -1em !important; }

.mt0 {
  margin-top: 0px !important; }

.mt10 {
  margin-top: 10px !important; }

.mt15 {
  margin-top: 15px !important; }

.mt20 {
  margin-top: 20px !important; }

.mt30 {
  margin-top: 30px !important; }

@media only screen and (max-width: 767px) {
  .mt15sp {
    margin-top: 15px !important; }

  .mt20sp {
    margin-top: 20px !important; }

  .mt30sp {
    margin-top: 30px !important; }

  .text-left-sp {
    text-align: left !important; } }
.mb0 {
  margin-bottom: 0px !important; }

.mb10 {
  margin-bottom: 10px !important; }

.mb15 {
  margin-bottom: 15px !important; }

.mb20 {
  margin-bottom: 20px !important; }

.mb30 {
  margin-bottom: 30px !important; }

.mb40 {
  margin-bottom: 40px !important; }

.mb50 {
  margin-bottom: 50px !important; }

@media only screen and (max-width: 767px) {
  .mb10sp {
    margin-bottom: 10px !important; }

  .mb15sp {
    margin-bottom: 15px !important; }

  .mb20sp {
    margin-bottom: 20px !important; }

  .mb30sp {
    margin-bottom: 30px !important; }

  .mb40sp {
    margin-bottom: 40px !important; }

  .mb50sp {
    margin-bottom: 50px !important; } }
.pc {
  display: block; }
  @media only screen and (max-width: 767px) {
    .pc {
      display: none; } }

.sp {
  display: block; }
  @media (min-width: 768px) {
    .sp {
      display: none; } }
  .sp.inb {
    display: inline-block; }
    @media (min-width: 768px) {
      .sp.inb {
        display: none; } }

.cont-box {
  margin-top: 40px;
  border-radius: 30px;
  padding: 80px 10.345% 70px;
  background-color: #fff; }
  @media only screen and (max-width: 767px) {
    .cont-box {
      margin-top: 5.5vw;
      border-radius: 15px;
      padding: 10vw 5vw; } }

.indent {
  padding-left: 1em;
  text-indent: -1em; }

.txtC {
  text-align: center; }

.txtL {
  text-align: left; }

.fontC_beige {
  color: #8c7348; }

.fontC_red {
  color: #b72424; }

.fontC_blue {
  color: #2c4a88; }

.heading_02 {
  font-size: 3.2rem;
  font-weight: bold;
  margin: 0; }
  @media only screen and (max-width: 767px) {
    .heading_02 {
      font-size: 2.6rem; } }

.heading_03 {
  font-size: 2.4rem;
  font-weight: bold;
  margin: 0; }

.blank_link {
  background-image: url(/html/upload/user_data/fp/common/img/icn_circle_window_green.svg);
  background-position: 0% 2px;
  background-size: 16px auto;
  background-repeat: no-repeat;
  padding-left: 20px;
  text-decoration: underline !important;
  color: #008303; }

/* *************************************************************************

	03. レイアウト

************************************************************************* */
 /*-----
リード
-----*/
.bl_lead {
  text-align: center;
  padding: 30px;
  font-size: 1.8rem; 
  font-weight: bold;}
  @media only screen and (max-width: 767px) {
    .bl_lead {
      text-align: left;
      padding: 15px 0;
      font-size: 1.6rem; } }

.bl_box {
	background: #fff;
	padding: 1em;
	border: #1E4488 solid 3px;
	margin: 20px auto 0;
	width: 50%;
	text-align: center;
}
@media only screen and (max-width: 767px) {
	.bl_box {
		width: 100%;
	}
}


/*-----
インフォ
-----*/
.bl_info {
  background: #faf2e4;
  padding: 10px 20px 20px;
  font-size: 1.6rem;
  position: relative;
  margin: 0 auto;
  width: 70%; }
  @media only screen and (max-width: 767px) {
    .bl_info {
      width: 100%; } }

.ribbonBox {
  position: relative;
  padding: 22px 2rem 3rem 4rem;
  background-color: #faf2e4; }
  @media only screen and (max-width: 767px) {
    .ribbonBox {
      margin-top: 20px; } }
  .ribbonBox > div p {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700; }
    @media only screen and (max-width: 767px) {
      .ribbonBox > div p {
        font-size: 1.6rem; } }
  .ribbonBox span {
    position: absolute;
    top: 18px;
    left: -10px;
    background-color: #a9874e;
    color: #fff;
    font-weight: bold;
    font-size: 1.8rem;
    text-align: center;
    padding: 13px 20px 13px 10px;
    min-height: 40px;
    line-height: 1; }
    @media only screen and (max-width: 767px) {
      .ribbonBox span {
        top: -10px; } }
    .ribbonBox span::before {
      position: absolute;
      top: 100%;
      left: 0;
      width: 0px;
      height: 0px;
      border: none;
      border-bottom: 6px solid transparent;
      border-right: 10px solid #634719;
      content: ''; }
    .ribbonBox span::after {
      position: absolute;
      top: 0px;
      right: 0;
      width: 0px;
      height: 0px;
      border-width: 22px 10px 22px 0px;
      border-color: transparent #faf2e4;
      border-style: solid;
      content: ''; }

/*-----
〇〇県について
-----*/
.bl_about {
  margin-top: 80px;
  margin-bottom: 80px; }
  @media only screen and (max-width: 767px) {
    .bl_about {
      margin-top: 40px;
      margin-bottom: 50px; } }
  .bl_about div p {
    line-height: 1.6em; }

.icon-pin {
  position: relative;
  padding-left: 50px; }
  @media only screen and (max-width: 767px) {
    .icon-pin {
      padding-left: 40px; } }
  .icon-pin::before {
    position: absolute;
    content: "";
    display: inline-block;
    background: url("https://furusato.jreast.co.jp/html/upload/user_data/org/fukushima_peach/icon_pin.png");
    background-size: cover;
    width: 39px;
    height: 47px;
    left: 0;
    bottom: 0; }
    @media only screen and (max-width: 767px) {
      .icon-pin::before {
        width: 32px;
        height: 39px; } }

/*-----
ボタン
-----*/
.linkBtn {
  background: #bc3838;
  padding: .8em 5em .8em 4em;
  display: inline-block;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  position: relative;
  border-radius: 100vh; }
  @media only screen and (max-width: 767px) {
    .linkBtn {
      font-size: 1.6rem; } }
  .linkBtn:hover {
    color: #fff;
    opacity: .8; }
  .linkBtn:visited {
    color: #fff; }
  .linkBtn::after {
    transform: rotate(225deg);
    content: "";
    display: block;
    position: absolute;
    top: 35%;
    right: 2em;
    width: 10px;
    height: 10px;
    border-top: #fff 3px solid;
    border-left: #fff 3px solid; }

/*-----
イベント
-----*/
#bl_event {
  background: #faf2e4;
  padding: 50px 5% 60px;
  margin-bottom: 80px; }
  @media only screen and (max-width: 767px) {
    #bl_event {
      padding: 40px 20px;
      margin-bottom: 50px; } }
  #bl_event .bl_eventDtl {
    line-height: 1.6em; }
  #bl_event .bl_eventDtlInner {
    margin-bottom: 0; }
    #bl_event .bl_eventDtlInner dt {
      margin-bottom: 5px;
      font-weight: bold; }
    #bl_event .bl_eventDtlInner dd {
      margin-bottom: 15px; }
      #bl_event .bl_eventDtlInner dd:last-child {
        margin-bottom: 0; }

.ttl_deco01 {
  font-weight: bold;
  padding-bottom: 0.7em;
  text-align: center;
  position: relative; }

.ttl_deco01::before, .ttl_deco01::after {
  content: '';
  position: absolute;
  margin: auto;
  left: 0;
  bottom: 0;
  width: 3em;
  background-color: #bc3838;
  height: 8px;
  right: 3em; }

.ttl_deco01::before {
  background-color: #bd9e69;
  left: 3em;
  width: 6em; }

/*-----
2カラム
-----*/
.col2 {
  width: 100%;
  display: flex;
  justify-content: space-between; }
  @media only screen and (max-width: 767px) {
    .col2 {
      flex-direction: column-reverse; } }
  .col2 > *:first-child {
    flex-basis: 42.5%; }
    @media only screen and (max-width: 767px) {
      .col2 > *:first-child {
        width: auto;
        margin-right: 0; } }
  .col2 > *:last-child {
    flex-basis: 54%; }
    @media only screen and (max-width: 767px) {
      .col2 > *:last-child {
        width: auto;
        margin-bottom: 20px; } }

.img_round img {
  border-radius: 40px; }
  @media only screen and (max-width: 767px) {
    .img_round img {
      border-radius: 30px; } }

.flexItemC {
  align-items: center; }
  @media only screen and (max-width: 767px) {
    .flexItemC {
      align-items: flex-start; } }

/*-----
自治体のおすすめ特集
-----*/
.cpbnr_box {
  margin: 0 auto;
  /*width: 600px;*/
  width: 40%; }

@media only screen and (max-width: 767px) {
  .cpbnr_box {
    margin: 0 auto;
    width: 100%; } }
.cpbnr_box img {
  width: 100%; }

.cpbnr_box > a:hover {
  opacity: 0.7;
  transition: .2s ease all; }

.bnr_box ul li a:hover {
  opacity: 0.7;
  transition: .2s ease all; }

/*-----
ピックアップ自治体
-----*/
.bl_municipalityListInner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  .bl_municipalityListInner::after {
    content: "";
    display: block;
    width: 24%; }
    @media only screen and (max-width: 767px) {
      .bl_municipalityListInner::after {
        width: 48%; } }
  .bl_municipalityListInner li {
    width: calc((100% - 80px) / 4);
    margin: 0 10px 20px; }
    @media only screen and (max-width: 767px) {
      .bl_municipalityListInner li {
        width: 48%;
        margin: 0 0 20px; } }
    .bl_municipalityListInner li .img_ {
      margin-bottom: 10px; }
      .bl_municipalityListInner li .img_ img {
        border-radius: 20px; }
    .bl_municipalityListInner li .municipalityNameBlock div {
      color: #333;
      font-size: 1.4rem;
      margin-bottom: 5px; }
    .bl_municipalityListInner li .municipalityNameBlock h3 {
      color: #333;
      font-weight: 700;
      font-size: 1.8rem;
      margin: 0; }
    .bl_municipalityListInner li a:hover {
      opacity: 0.8; }

/* ----------------------------------------------------
	自治体紹介スライド
---------------------------------------------------- */
.jichitai_slide {
  /*margin: 0 0 40px 0;*/ }
  .jichitai_slide ul {
    max-width: 1500px;
    background-color: #f1f1f1;
    box-sizing: border-box;
    padding: 28px 0 28px 25px;
    display: flex;
    overflow-x: scroll; }
    .jichitai_slide ul .gray {
      background-color: #F5F5F5; }
    .jichitai_slide ul::-webkit-scrollbar {
      height: 12px; }
    .jichitai_slide ul::-webkit-scrollbar-thumb {
      background: #bbb;
      border-radius: 6px; }
    .jichitai_slide ul::-webkit-scrollbar-track {
      background: #e7e7e7;
      border-radius: 0px; }
    .jichitai_slide ul li {
      width: 290px;
      height: auto;
      display: block;
      margin: 0;
      box-sizing: border-box;
      text-align: left;
      flex-shrink: 0; }
      .jichitai_slide ul li a {
        display: block;
        padding: 10px;
        transition: opacity .4s;
        color: #000; }
        .jichitai_slide ul li a:hover {
          transition: opacity .4s;
          opacity: 0.6;
          color: #000; }
      .jichitai_slide ul li p {
        font-size: 18px !important;
        line-height: 1.2;
        font-weight: bold;
        margin: 0; }
        .jichitai_slide ul li p span {
          font-size: 10px;
          font-weight: normal; }

@media screen and (max-width: 640px) {
  .jichitai_slide ul {
    padding: 20px 0 20px 20px; }

  .jichitai_slide ul::-webkit-scrollbar {
    height: 10px; }

  .jichitai_slide li {
    width: 40vw;
    height: 40vw;
    margin: 0 20px 0 0; }

  .jichitai_slide li a {
    padding: 15px 5px 0;
    box-sizing: border-box;
    min-height: 185px; }

  .jichitai_slide li p {
    font-size: 12px;
    line-height: 1.3;
    margin: 0; } }
/* おすすめ記事スライド
---------------------------------------------------- */
.article_slide {
  /*margin: 0 0 40px 0;*/ }

.article_slide ul {
  max-width: 1500px;
  background-color: #f1f1f1;
  box-sizing: border-box;
  padding: 28px 0 28px 25px;
  display: flex;
  overflow-x: scroll; }

.article_slide ul.gray {
  background-color: #F5F5F5; }

.article_slide ul::-webkit-scrollbar {
  height: 12px; }

.article_slide ul::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 6px; }

.article_slide ul::-webkit-scrollbar-track {
  background: #e7e7e7;
  border-radius: 0px; }

.article_slide li {
  width: 290px;
  height: auto;
  display: block;
  margin: 0;
  box-sizing: border-box;
  text-align: left;
  flex-shrink: 0; }

.article_slide li a {
  display: block;
  padding: 10px;
  transition: opacity .4s;
  color: #000; }

.article_slide li a:hover {
  transition: opacity .4s;
  opacity: 0.6;
  color: #000; }

.article_slide li p {
  font-size: 14px !important;
  line-height: 1.2;
  font-weight: bold;
  margin: 10px 0 0 0; }

.article_slide li p span {
  font-size: 10px;
  font-weight: normal; }

@media screen and (max-width: 640px) {
  .article_slide ul {
    padding: 20px 0 20px 20px; }

  .article_slide ul::-webkit-scrollbar {
    height: 10px; }

  .article_slide li {
    width: 40vw;
    height: 50vw;
    margin: 0 20px 0 0; }

  .article_slide li a {
    padding: 15px 5px 0;
    box-sizing: border-box;
    min-height: 185px; }

  .article_slide li p {
    font-size: 11px;
    line-height: 1.2;
    margin: 10px 0 0 0; } }
/* ---------------------------------
	動的部分
--------------------------------- */
.ec-featureItems.buttons {
  display: none; }

/* もっと見るボタン */
.more-link {
  margin-top: 10px; }
  .more-link > a.more-link {
    border: solid 1px #2e9234 !important;
    border-radius: 3em;
    padding: 10px 7%;
    color: #2e9234 !important;
    display: inline-block; }
    @media only screen and (max-width: 767px) {
      .more-link > a.more-link {
        padding: 10px 10%; } }
    .more-link > a.more-link:hover {
      background-color: #2e9234 !important;
      color: #fff !important; }

.items + .more-link {
   }

/*# sourceMappingURL=style.css.map */


/* --------------------------------------------------------------

	バナーテンプレート

----------------------------------------------------------------- */

.bnr_tit {
    font-size: min(2.8vw, 28px);
    font-weight: bold;
    text-align: center;
}
.bnrgroup {
    width: 70%;
    margin: 20px auto 0;
}

.bnrgroup_ul {
    margin-top: min(4vw, 40px);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.bnrgroup_li {
    width: 48%;
    box-sizing: border-box;
    margin-right: 1%;
}

.bnrgroup_li:nth-child(2n+2) {
    margin-right: 0;
}

.bnrgroup_li:nth-child(n+3) {
    margin-top: 3.5%;
}

.bnrgroup_a {
    transition: all .5s;
}

.bnrgroup_a:hover {
    opacity: .7;
}

.bnrgroup_a:hover>* {
    color: #000;
}

.bnrgroup_txt {
    font-size: min(1.8vw, 18px);
    line-height: 1.5;
    font-weight: bold;
    text-align: center;
    margin-top: min(.7vw, 7px);
    color: #000;
}

@media screen and (max-width: 767px) {   

    .bnrgroup {
    width: 100%;
    margin: min(1.5vw, 15px) auto 0;
}
    .bnr_tit {
        font-size: calc((30/750)*100vw);
    }
    
    .bnrgroup_txt {
        /*font-size: calc((20/750)*100vw);*/
        font-size: calc((30/750)*100vw);
        margin-top: calc((10/750)*100vw);
    }
}
/* --------------------------------------------------------------

	04.ナビメニュー,ボタン

----------------------------------------------------------------- */

    
#wg-item {
		padding-bottom: 0 !important;
        margin-top: 50px !important;
        text-align: center !important;
}
.wg-item {
        text-align: center !important;
        padding-bottom: 20px;
}


#wg-article {
		padding-bottom: 0 !important;
        margin-bottom: 15px !important;
        text-align: center !important;
}

#wg-shop {
		padding-bottom: 0 !important;
        margin-bottom: 15px !important;
        text-align: center !important;
}

#wg-tokushu {
		padding-bottom: 0 !important;
        margin-bottom: 15px !important;
        text-align: center !important;
}
.bl_naviList {
  display: flex; }
  @media only screen and (max-width: 767px) {

    .bl_naviList {
      flex-wrap: wrap;
      padding: 0px;
      justify-content: center; } }

@media (min-width: 641px) {

  .bl_naviListItem {
    flex-basis: calc(100% / 4);
    margin-left: 10px; }

    .bl_naviListItem:first-child {
      margin-left: 0; }

    .bl_naviListItem:nth-of-type(2n) {
      margin-left: 10px; }d
}
@media only screen and (max-width: 767px) {
  .bl_naviListItem {
    flex-basis: calc(90% / 4); }

    .bl_naviListItem:first-child {
      margin-left: 0; }

    .bl_naviListItem:nth-of-type(2n) {
      margin-left: 5px; }

    .bl_naviListItem:nth-of-type(3n) {
      margin-left: 5px; }
}

.bl_naviListItem > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 0;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: #000000;
  transition: .2s ease all;
}

@media only screen and (max-width: 767px) {
.bl_naviListItem > a {
  font-size: 0.8rem;
  line-height: 1.6rem;
  height: 100%;
}
}

  .bl_naviListItem > a[href="#goods_01"] {
    background: #fffacd;}
  .bl_naviListItem > a[href="#event01"] {
    background: #fffacd;}
  .bl_naviListItem > a[href="#local01"] {
    background: #fffacd;}
  .bl_naviListItem > a[href="#media01"] {
    background: #fffacd;}
  .bl_naviListItem > a .bbox {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 10px 0 20px;
    width: 100%; }
  .bl_naviListItem > a::after {
    content: '';
    position: absolute;
    bottom: 10px;
    right: 0;
    left: 0;
    margin: auto;
    border-right: solid 3px #000000;
    border-bottom: solid 3px #000000;
    width: .7em;
    height: .7em;
    transform: translateY(-25%) rotate(45deg); }
 
  .bl_naviListItem > a:hover {
    opacity: 0.7 ; }