@charset "UTF-8";


/*=== ヘッダー ==========*/
/* 住みやすいまち、伊賀で暮らそう */

/* pc */
.site_name>img:last-child {
  width: 65vw;
  position: absolute;
  bottom: -30px;
  left: 15vw;
  transform: translateY(100%);
  display: none;
}
/* sp */
.sp_catch {
  width: 60vw;
  margin: 30px auto -40px;
  display: block;
}


/*=== 空き家募集 ==========*/
.akiya_bosyu {
  margin-bottom: 0.5rem;
  padding: 0;
}

.akiya_bosyu p {
  margin-bottom: 0;
}

.akiya_bosyu a {
  background-color: var(--btn_color);
  font-size: 1.2rem;
  display: block;
  letter-spacing: 3px;
  text-align: center;
  padding: 3px 0;
}

.akiya_bosyu a span {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  /* background-color: #ef3d11; */
  padding: 6px 15px 5px 1px;
  margin: 0 15px;
  border-radius: 50vh;
}

.akiya_bosyu a:link,
.akiya_bosyu a:visited {
  color: #fff;
}

/* anime */
.akiya_bosyu {
  overflow: hidden;
}

.akiya_bosyu p {
  display: flex;
  will-change: transform; 
}

.akiya_bosyu p:hover {
  cursor: pointer;
  opacity: 0.7;
}
.akiya_bosyu a {
  min-width: 100vw;
}

/*=== TOPメイン ==========*/
/* 背景 */
.toppage {
  background: linear-gradient(#fff 10%, transparent 50% 60%, #fff 80%), url(images/top_bg.jpg);
  background-repeat: no-repeat;
  background-position: center, center;
  background-size: 100%, cover;
  padding: 0 0 200px;
  margin-top: 40px;
  overflow: hidden;
}

.bird01,
.bird02 {
  display: none;
}

/* スライダーを含む親要素の大きさ */
.swiper {
  width: 100%;
  max-width: 100vw;
  margin: 0 auto;
}

/* カードレイアウト */
.card_container {
  margin: 0 auto;
  max-width: 1500px;
  width: 100%;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto auto;
  gap: 20px;
}

.l01 {
  grid-row: 2/3;
}

.l02 {
  grid-row: 3/4;
}

.c01 {
  position: relative;
  grid-column: 1/3;
  grid-row: 1/1;
}

/* 中央スライド */
.c01 img {
  border-radius: 10px;
  width: 100%;
}

/* 中央スライド ボタン */
.c01 a {
  position: absolute;
  left: 50%;
  bottom: 20px;
  line-height: 1.4;
  font-size: 3.5vw;

  transform: translateX(-50%);
  white-space: nowrap;

  display: inline-block;
  padding: 20px;
  background-color: #f9f6f2;
  text-align: center;
  border-radius: 10px;
  z-index: 2;
}


/* ボタンのデザイン */

.l01,
.l02,
.r01,
.r02,
.c01 {
  width: 100%;
  position: relative;
  z-index: 99;
}
.l01 a,
.l02 a,
.r01 a,
.r02 a {
  line-height: 1.4;
  display: block;
  width: 100%;
  height: 130px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 5px rgba(1, 51, 117, 0.2);
  font-size: min(3.5vw, 1.2rem);
  padding-top: 60px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  position: relative;
}

.r02 a {
  flex-direction: row;
}

/* 文字サイズ */
.toppage .card_container span {
  font-size: min(3.6vw, 1.2em);
  margin: 0;
}

/* アイコン */
.l01 a::before,
.l02 a::before,
.r01 a::before,
.r02 a::before {
  position: absolute;
  display: block;
  width: 45px;
  height: 45px;
  content: "";
  top: 13%;
  left: 50%;
  transform: translate(-50%, 0);


}

.l01 a::before {
  background: url(images/kododate_icon.svg) no-repeat center;
}

.l02 a::before {
  background: url(images/chiiki_icon.svg) no-repeat center;
}

.r01 a::before {
  background: url(images/wakaranai_icon.svg) no-repeat center;
}

.r02 a::before {
  background: url(images/bukken_icon.svg) no-repeat center;
}

.l01 a:hover,
.l02 a:hover,
.r01 a:hover,
.r02 a:hover,
.c01 a:hover {
  color: #d93a13;
}


/*=== 空き家物件大募集 帯 ==========*/
/* .emergency {
  background-color: #f30;
}

.emergency a:link,
.emergency a:visited {
  color: #fff;
}

.emergency a:hover,
.emergency a:active {
  opacity: 0.7;
}

.emergency p {
  color: #fff;
  letter-spacing: 0.08em;
  font-size: 1.2rem;
  margin-bottom: 0;
  font-family: 'Shippori Mincho B1', serif;
}

.emergency p::before {
  display: inline-block;
  content: "";
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  margin: auto 10px 2px 0;

} */

/*=== 新着物件 ==========*/
.bukken_area {
  background: linear-gradient(transparent 136px, var(--base_color) 136px);
}

.bukken_area h2 {
  border-left: none;
  color: #333;
  background-color: transparent;
  text-align: center;
  padding: 50px 0 45px;
  z-index: 99;
}

.bukken_area .top_h2 {
  margin-bottom: -50px;
  padding: 5px 0 100px;
  position: relative;
}

.bukken_area .form_box {
  position: relative;
  z-index: 1;
}


/*=== お知らせ ==========*/

.news_area {
  background-color: transparent;
}

.news {
  border-bottom: 1px solid #e9dede;
}


/*=== 地域ブログ新着記事 ==========*/
.blog_area {
  background-color: var(--base_color);
  background-image: none;
}

.blog_area .top_h2 {
  background-color: transparent;
}

.blog_container {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(2, 1fr);
}

/* 背景 */
.blog_area .card {
  background-color: #222;
}

.blog_group a.blog img {
  max-height: 50vw;
}

/* テキスト */
.blog_area .card p,
.blog_area a.blog .card-title,
.blog_area a.blog .card-subtitle {
  color: #fff;
}

/* 日付 */
.blog_area a.blog .card-subtitle {
  font-size: 0.9rem;
}



/*=== 伊賀市へ移住をお考えの方 ==========*/
.iju a {
  width: calc(100% - 30px);
  display: block;
  background-color: var(--btn_color);
  color: #fff;
  text-align: center;
  margin: 50px auto 50px;
  padding: 15px 10px 13px;
  position: relative;
  border-radius: 10px;
}
/* 
.iju a::after {
  position: absolute;
  display: block;
  content: "";
  width: 15px;
  height: 15px;
  background: url(images/link01.svg) no-repeat center;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
} */

.iju a:link,
.iju a:visited {
  color: #fff;
}

.iju a:hover,
.iju a:active {
  background-color: var(--btn_hover_color);
}


@media (min-width:750px) {
/*=== ヘッダー ==========*/
/* pc */
 /* 住みやすいまち、伊賀で暮らそう */
  .site_name>img:last-child {
    width: 25.5vw;
    left: 7vw;
    bottom: -1.4vw;
    display: block;
  }

  /* sp */
.sp_catch {
  display: none;
}

  /*=== 空き家募集 ==========*/

.akiya_bosyu a {
  text-align: right;
}


  /*=== TOPメイン ==========*/

  /* 背景 */
  .toppage {
    padding: 0 0 100px;
    margin: 20px 0 -50px;
  }

  .toppage>.container-fluid:first-child {
    z-index: 2;
    padding: 30px 15px 50px;
  }

  /* カードレイアウト */
  .card_container {
    grid-template-columns: 1fr 33% 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
  }

  .l01 {
    grid-area: 1/1/2/2;
    margin-top: auto;
  }

  .l02 {
    grid-area: 2/1/3/2;
  }

  .c01 {
    position: relative;
    grid-area: 1/2/3/3;
    margin-top: auto;

  }

  .r01 {
    grid-area: 1/3/2/4;
    margin-top: auto;
  }

  .r02 {
    grid-area: 2/3/3/4;
  }

  /* ボタンのデザイン */
  .l01 a,
  .l02 a,
  .r01 a,
  .r02 a {
    line-height: 1.6;
    padding-left: 50px;
    height: 80px;
    font-size: 0.9rem;
    padding-top: 0;
  }

  /* 中央スライド ボタン */
  .c01 a {
    font-size: 0.9rem;
    padding: 20px 10px 20px 15px;
  }

  /* 文字サイズ */
  .toppage .card_container span {
    font-size: min(2vw, 1.15em);
    margin: 0 3px 0 0;
  }

  /* アイコン */
  .l01 a::before,
  .l02 a::before,
  .r01 a::before,
  .r02 a::before {
    width: 35px;
    height: 35px;
    top: 50%;
    left: 15px;
    transform: translate(0, -50%);

  }




  /*=== 伊賀市へ移住をお考えの方 ==========*/
  .iju a {
    width: fit-content;
    padding: 15px 90px 13px;
    margin: 70px auto 50px;
  }
}

/*=== 伊賀城和定住自立圏 ==========*/

.teiju_bn {
  margin: 0rem 0 -2rem 0;
  padding: 2rem 0 1.5rem 0;
  font-size: 0.85rem;
  background-color: #f1f1f1;
}

.teiju_bn img {
  max-width: 300px;
  margin-bottom: 1rem;
}


@media (min-width:850px) {

  /* アイコン */
  .l01 a::before,
  .l02 a::before,
  .r01 a::before,
  .r02 a::before {
    left: 24px;

  }

}

@media (min-width:1025px) {

  /*=== ヘッダー==========*/

   /* 住みやすいまち、伊賀で暮らそう */
   /* pc */
  .site_name>img:last-child {
    width: min(25vw, 330px);
    left: min(10vw, 110px);
    bottom: max(-1vw, -20px);

  }


  /*=== TOPメイン ==========*/

   /* 背景 */
   .toppage {
    padding: 0 0 100px;
    margin: 40px 0 -100px;
  }

  .toppage>.container-fluid:first-child {
    z-index: 2;
    padding: 30px 15px 120px;
  }


  /* カードレイアウト */
  .card_container {
    grid-template-columns: 1fr 30% 1fr;
    gap: 30px;
  }

  /* ボタンのデザイン */
  .l01 a,
  .l02 a,
  .r01 a,
  .r02 a {
    font-size: 1rem;
    height: 100px;

  }

  /* 中央スライド ボタン */
  .c01 a {
    font-size: 1rem;
  }

  /* 文字サイズ */
  .toppage .card_container span {
    font-size: 1.2em;
  }

  /* アイコン */
  .l01 a::before,
  .l02 a::before,
  .r01 a::before,
  .r02 a::before {
    width: 45px;
    height: 45px;
    top: 50%;
    left: 31px;
    transform: translate(0, -50%);

  }

  /*=== 地域ブログ新着記事 ==========*/

  .blog_container {
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
  }




}

@media (min-width:1200px) {
  /*=== TOPメイン ==========*/

  /* カードレイアウト */
  .card_container {
    gap: 50px;
  }

}

@media (min-width:1500px) {


  /*=== TOPメイン ==========*/

  .l01 a,
  .l02 a,
  .r01 a,
  .r02 a,
  .c01 a {
    font-size: 1.15rem;
  }

  /* 中央スライド ボタン */
  .c01 a {
    padding: 20px 20px 20px 25px;
  }

}