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

common

======================================== */
.en_l {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  letter-spacing: 0;
}

.en_r,
.property_list ul li .box_text dd.floor em,
.property_list ul li .box_text dd.floor small,
.property_list ul li .box_text dd.price em,
.blog_list li:not(.headline) .date,
.access_cont_link {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  letter-spacing: 0;
}

.en_b {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  letter-spacing: 0;
}

.num_m {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  letter-spacing: 0;
}

.is-fade > *:not(.is-not) {
  opacity: 0;
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
  -webkit-transition: all 0.6s cubic-bezier(0.37, 0, 0.63, 1);
  transition: all 0.6s cubic-bezier(0.37, 0, 0.63, 1);
}
.is-fade > .is-not {
  opacity: 0;
  -webkit-transition: all 0.6s cubic-bezier(0.37, 0, 0.63, 1);
  transition: all 0.6s cubic-bezier(0.37, 0, 0.63, 1);
}
.is-fade.fadeIn > * {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.box-fade {
  opacity: 0;
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
  -webkit-transition: all 0.6s cubic-bezier(0.37, 0, 0.63, 1);
  transition: all 0.6s cubic-bezier(0.37, 0, 0.63, 1);
}
.box-fade.fadeIn {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.svg.c_white svg {
  fill: #fff;
}
.svg.c_black svg {
  fill: #000;
}

.img-fit {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.img-fit::before {
  width: 100%;
  height: 0;
  content: "";
  display: block;
  padding-top: 100%;
  position: relative;
}
.img-fit img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  -o-object-position: 50% 50%;
  object-position: 50% 50%;
  -o-object-fit: cover;
  object-fit: cover;
  z-index: 1;
  -webkit-transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1);
  transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1);
}

.l_tel {
  pointer-events: none;
}

@media screen and (max-width: 800px) {
  .l_tel {
    pointer-events: auto;
  }
}
@-webkit-keyframes slide_loop {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}
@keyframes slide_loop {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}
._frame {
  position: relative;
}
._frame::before {
  width: 100%;
  height: 10px;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  border: 3px solid #000;
  border: 3px solid #66ccff;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
}

._frame2 {
  position: relative;
}
._frame2::after {
  width: 100%;
  height: 10px;
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  border: 1px solid #000;
  border: 3px solid #66ccff;
  border-top: none;
  border-radius: 0 0 5px 5px;
}

/* ========================================

common

======================================== */
.hl {
  font-size: clamp(22px, 2.7693vw, 36px);
  font-weight: 500;
  line-height: 1.44;
  letter-spacing: -0.05em;
}

@media screen and (max-width: 800px) {
  .hl {
    font-size: clamp(20px, 6.4vw, 24px);
    line-height: 1.25;
  }
}
/* ========================================

page_title

======================================== */
.page_title:not(.oth) {
  width: calc(100% - 80px);
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
  padding-top: 30px;
}
.page_title:not(.oth) .img {
  position: relative;
  z-index: 1;
}
.page_title:not(.oth) .img img {
  border-radius: 5px;
}
.page_title:not(.oth) h1 {
  color: #fff;
  font-size: clamp(64px, 8vw, 96px);
  letter-spacing: -0.05em;
  position: absolute;
  left: 80px;
  bottom: 90px;
  z-index: 2;
}
.page_title:not(.oth) h1::after {
  width: 100%;
  height: 4px;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: -12px;
  background-color: #fff;
  -webkit-transition: all 1.6s cubic-bezier(0.25, 1, 0.5, 1);
  transition: all 1.6s cubic-bezier(0.25, 1, 0.5, 1);
}

@media screen and (max-width: 800px) {
  .page_title:not(.oth) {
    width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 30px;
  }
  .page_title:not(.oth) .img {
    height: 320px;
  }
  .page_title:not(.oth) .img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }
  .page_title:not(.oth) h1 {
    font-size: 40px;
    left: 20px;
    bottom: 50px;
  }
  .page_title:not(.oth) h1::after {
    height: 2px;
  }
}
/* ========================================

property

======================================== */
.property {
  width: calc(100% - 80px);
  width: calc(100% - 15%);
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
  margin-bottom: 120px;
}
.property_inner {
  width: calc(100% - 40px);
  margin: 0 auto;
  padding-top: 45px;
}
.property .title {
  margin-bottom: 61px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.property .title .hl {
  font-size: 36px;
  letter-spacing: -0.05em;
}
.property .title ._link {
  font-size: 16px;
  letter-spacing: -0.05em;
}
.property_list {
  letter-spacing: 0;
  margin-bottom: 40px;
}
.property_list ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.property_list ul li {
  position: relative;
}
@media screen and (min-width: 801px) {
  .property_list ul li {
    width: 30.7693%;
    margin-bottom: 60px;
  }
  .property_list ul li:not(:nth-child(3n)) {
    margin-right: 3.84605%;
  }
}
.property_list ul li a {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding-top: 6px;
  z-index: 3;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.property_list ul li a::before {
  width: calc(100% + 8.3334%);
  height: calc(100% + 8.3334%);
  content: "";
  display: block;
  position: absolute;
  top: -4.1667%;
  left: -4.1667%;
  border: 1px dotted rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  opacity: 0;
  -webkit-transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1);
  transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1);
  z-index: 2;
}
@media screen and (min-width: 801px) {
  .property_list ul li a:hover::before {
    opacity: 1;
  }
}
.property_list ul li .hl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.property_list ul li .hl h3 {
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0;
  margin-bottom: 10px;
}
.property_list ul li .hl h3 span {
  display: inline;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.5);
}
.property_list ul li .hl .progress {
  color: #fff;
  font-size: 14px;
  letter-spacing: -0.05em;
  margin: 4px 0 0 10px;
  padding: 4px 10px 5px;
  background-color: var(--c_key);
  border-radius: 5px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
}
/*
.property_list ul li .box_img {
  overflow: hidden;
  position: relative;
  margin-bottom: 17px;
  border-radius: 5px;
}
  */
/* ★★★ 1. 親の箱（.box_img）に形を定義する ★★★ */
.property_list ul li .box_img {
  display: block; /* リンクとして振る舞うため */
  overflow: hidden;
  position: relative;
  margin-bottom: 17px;
  border-radius: 5px;
  /* 画像の枠の比率をここで12:7に固定 */
  aspect-ratio: 12 / 7;
  /* 画像読み込み中の背景色 */
  background-color: #f0f0f0;
}
.property_list ul li .box_img.sub .img.sub {
  opacity: 1;
}
.property_list ul li .box_img .img {
  z-index: 1;
}
.property_list ul li .box_img .img.main {
  position: relative;
}
.property_list ul li .box_img .img.sub {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
/*
.property_list ul li .box_img .img img {
  aspect-ratio: 12 / 7;
  -o-object-fit: cover;
  object-fit: cover;
}
  */
/* ★★★ 2. imgタグは幅100%にして、縦方向の中央に配置 ★★★ */
/* ★★★ 2. 中の画像（img）に「枠を埋め尽くす」命令を出す ★★★ */
.property_list ul li .box_img .img img {
  /* 以前のaspect-ratioは不要なので削除 */
  width: 100%;
  height: 100%; /* 親の箱の高さと幅に完全に一致させる */
  /* 画像の比率を保ったまま、枠を完全に覆う（はみ出しはトリミング） */
  object-fit: cover;
}
.property_list ul li .box_img .toggle {
  width: 104px;
  height: 32px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  -webkit-transition: border-color 0.25s;
  transition: border-color 0.25s;
  z-index: 5;
}
.property_list ul li .box_img .toggle button {
  vertical-align: middle;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background-color: #fff;
  border-radius: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.property_list ul li .box_img .toggle button:focus-visible {
  outline: none;
}
.property_list ul li .box_img .toggle button::before {
  width: 50px;
  height: 28px;
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  background-color: #000;
  border-radius: 20px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  z-index: 1;
}
.property_list ul li .box_img .toggle button.on::before {
  left: 52px;
}
.property_list ul li .box_img .toggle button span {
  color: #fff;
  font-size: 15px;
  letter-spacing: -0.05em;
  width: 50px;
  height: 100%;
  display: block;
  position: relative;
  width: 50%;
  mix-blend-mode: difference;
  border-radius: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 2;
}
.property_list ul li .box_img .toggle input {
  display: none;
}
.property_list ul li .box_text dt {
  color: rgba(0, 0, 0, 0.6);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.05em;
  margin-bottom: 10px;
}
.property_list ul li .box_text dd {
  font-weight: 500;
}
.property_list ul li .box_text dd.address {
  font-size: 16px;
}
.property_list ul li .box_text dd.floor {
  text-align: right;
  margin-top: auto;
}
.property_list ul li .box_text dd.floor em {
  font-size: 20px;
  font-size: 14px;
}
.property_list ul li .box_text dd.floor small {
  font-size: 14px;
  margin-left: 0.6em;
}
.property_list ul li .box_text dd.price {
  text-align: right;
  margin-top: auto;
}
.property_list ul li .box_text dd.price em {
  font-size: 26px;
}
.property_list ul li .box_text dd.price small {
  font-size: 15px;
  margin-left: 0.2em;
}
.property_list ul li .box_text_info {
  position: relative;
  margin-top: 19px;
  padding: 3px 18px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.property_list ul li .box_text_info::before,
.property_list ul li .box_text_info::after {
  width: 8px;
  height: 100%;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.property_list ul li .box_text_info::before {
  left: 0;
  border-right: none;
  border-radius: 5px 0 0 5px;
}
.property_list ul li .box_text_info::after {
  right: 0;
  border-left: none;
  border-radius: 0 5px 5px 0;
}
.property_list ul li .box_text_info_inner {
  width: 50%;
  padding-bottom: 1px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.property_list ul li .box_text_info_inner:first-child {
  padding-right: 9px;
}
.property_list ul li .box_text_info_inner:last-child {
  padding-left: 10px;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.property_list ul li.contracted .box_img::before {
  width: 100%;
  height: 100%;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 2;
}
.property_list ul li.contracted .box_img::after {
  color: #fff;
  font-size: clamp(15px, 1.6667vw, 20px);
  content: "契約済み";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 7px 9px;
  border: 1px solid #fff;
  border-radius: 5px;
  translate: -50% -50%;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.property_list ul li.contracted .box_img .toggle {
  display: none;
}
.property_list ul li.contracted dl {
  opacity: 0.5;
}

@media screen and (min-width: 801px) and (max-width: 1024px) {
  .property_list ul li {
    width: 48%;
  }
  .property_list ul li:not(:nth-child(3n)) {
    margin-right: 0;
  }
  .property_list ul li:not(:nth-child(2n)) {
    margin-right: 4%;
  }
}
@media screen and (max-width: 800px) {
  .property {
    width: calc(100% - 40px);
    margin: 0 auto;
    margin-bottom: 60px;
  }
  .property_inner {
    width: 100%;
    padding-top: 36px;
  }
  .property .title {
    margin-bottom: 40px;
    padding: 0 10px;
  }
  .property .title .hl {
    font-size: 20px;
  }
  .property .title ._link {
    font-size: 14px;
  }
  .property_list {
    width: calc(100% - 20px);
    margin: 0 auto;
  }
  .property_list ul li {
    margin-bottom: 30px;
  }
  .property_list ul li .box_img {
    margin-bottom: 17px;
  }
  .property_list ul li .box_img .img img {
    aspect-ratio: 63 / 40;
  }
}
/* ========================================

terms_list

======================================== */
.terms_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: -10px;
}
.terms_list li {
  margin: 10px 10px 0 0;
}
.terms_list li a {
  display: block;
  position: relative;
  border: 1px dotted rgba(0, 0, 0, 0.5);
  border-radius: 50px;
}
.terms_list li a.active {
  background-color: #ddd;
  border-style: solid;
}
@media screen and (min-width: 800px) {
  .terms_list li a::after {
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: -1px;
    border: 1px solid #000;
    border-radius: 50px;
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .terms_list li a:hover {
    border-color: transparent;
  }
  .terms_list li a:hover::after {
    opacity: 1;
  }
}

@media screen and (max-width: 800px) {
  .terms_list {
    margin-top: -5px;
  }
  .terms_list li {
    margin: 5px 5px 0 0;
  }
}
/* ========================================
   Blog (お知らせ) 
======================================== */

/* --- セクション全体のコンテナ設定 --- */
.blog {
  margin: 0 auto 80px;
  padding: 60px 0;
  background: linear-gradient(to bottom, #fffde7 0%, #ffffff 70%);
  /*
  border-bottom: 1px solid #f0f0f0;
  */
  box-sizing: border-box;
}

.blog_inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
}

/* --- タイトル部分 --- */
.blog .title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 30px;
  padding-left: 15px;
  border-left: 5px solid #ffc107;
}
.blog .title h2.hl {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}
.blog .title .link a {
  font-size: 16px;
  color: #333;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.2s;
}
.blog .title .link a:hover {
  color: #ffc107;
}

/* --- お知らせリスト全体 --- */
.blog_list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.blog_list li {
  border-top: 1px solid #eee;
}
.blog_list li:last-child {
  border-bottom: 1px solid #eee;
}

/* --- お知らせ各行のリンクエリア --- */
.news-item-link {
  display: flex;
  align-items: center;
  padding: 20px 15px;
  text-decoration: none;
  color: #333;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  background-color: transparent;
  width: 100%; /* ★★★ ご指摘の通り、これを追加 ★★★ */
  box-sizing: border-box; /* 念のため追加 */
}

.news-item-link:hover {
  background-color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

/* --- 日付のデザイン --- */
.news-date {
  flex-shrink: 0;
  width: 80px;
  text-align: center;
  margin-right: 25px;
  color: #888;
}
.news-date .news-date-year {
  display: block;
  font-size: 13px;
}
.news-date .news-date-day {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: #333;
  line-height: 1.2;
}
.news-item-link:hover .news-date .news-date-day {
  color: #ffc107;
}

/* --- タイトルのデザイン --- */
.news-title {
  flex-grow: 1;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  margin: 0;
  min-width: 0;
}

/* --- 矢印アイコン --- */
.news-arrow {
  margin-left: 20px;
  color: #ccc;
  font-size: 18px;
  transition: transform 0.3s, color 0.3s;
  flex-shrink: 0;
}
.news-item-link:hover .news-arrow {
  color: #ffc107;
  transform: translateX(5px);
}

/* ========================================
   SP表示 (800px以下)
======================================== */
@media screen and (max-width: 800px) {
  .blog {
    padding: 40px 0;
    margin-bottom: 40px;
  }
  .blog_inner {
    padding: 0 15px;
  }
  .blog .title {
    margin-bottom: 20px;
  }
  .blog .title h2.hl {
    font-size: 22px;
  }
  .news-item-link {
    padding: 15px 10px;
  }
  .news-date {
    width: 65px;
    margin-right: 15px;
  }
  .news-date .news-date-year {
    font-size: 11px;
  }
  .news-date .news-date-day {
    font-size: 18px;
  }
  .news-title {
    font-size: 15px;
  }
  .news-arrow {
    display: none;
  }
}
/* ========================================

common

======================================== */
.hl {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.05em;
  padding-top: 0.2em;
}

@media screen and (max-width: 800px) {
  .hl {
    font-size: 24px;
  }
}
/* ========================================

fix_inquiry

======================================== */
.fix_inquiry {
  position: fixed;
  bottom: 30px;
}

/* ========================================

kv (Swiper ver.)

======================================== */
.kv {
  width: 100%;
  position: relative;
  margin-bottom: 20px;
  /*
  padding-top: 20px;
  */
  padding-top: 5px;
  height: calc(100vh - 100px);
  height: calc(100vh - 100px) !important; /* ★!importantを追加 */
  max-height: 940px;
}

.kv .kv-swiper-v {
  width: calc(100% - 80px);
  max-width: 1600px;
  height: 100%;
  margin: 0 auto;
}

/* スマホ用の高さ調整 */
@media screen and (max-width: 800px) {
  .kv {
    /* ★!important を使って高さを強制上書き */
    height: calc(100dvh - 350px) !important;
  }

  /* ★追加：Swiperのコンテナ自体にも高さを指定 */
  .kv .swiper {
    height: 100% !important;
  }

  .kv .kv-swiper-v {
    width: calc(100% - 40px);
  }
}

/* 横スライダーと縦スライダーのコンテナ設定 */
.kv-swiper-h {
  width: 100%;
  height: 100%;
}

.kv .swiper-slide {
  overflow: hidden;
}

/* スライド内の要素のスタイル */
.kv_item {
  position: relative;
  width: 100%;
  height: 100%;
}

.kv_item .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.kv_item .img span,
.kv_item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 画像のズームアニメーション */
.swiper-slide .img img {
  transform: scale(1.1);
  transition: transform 9s ease-out;
}
.swiper-slide-active .swiper-slide-active .img img {
  transform: scale(1);
}

.kv_item h2 {
  color: #fff;
  font-size: clamp(30px, 3.8096vw, 64px);
  font-size: clamp(2.1rem, 1.845rem + 1.27vw, 2.8rem);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -0.05em;
  position: absolute;
  left: 8.4375%;
  bottom: 16.7022%;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  /* ★追加：アニメーションのパフォーマンスを向上させます */
  will-change: transform, opacity;
  /* ★変更：スライドが非アクティブになった時の「戻るアニメーション」を指定 */
  transition: opacity 0.5s ease, transform 0.5s ease;
  font-family: "Shippori Mincho", serif;
}
.swiper-slide-active .swiper-slide-active h2 {
  opacity: 1;
  transform: translateY(0);
  /* ★変更：アクティブになる時のアニメーション遅延はこちらに指定 */
  transition-delay: 0.5s;
}

/* emタグの基本スタイル（背景マスク） */
.kv_item h2 em {
  display: inline-block;
  position: relative; /* 疑似要素の基準点になります */
  color: transparent; /* 初期状態では文字を透明にして見えなくします */
  z-index: 1;
  /* 文字色が戻る時のアニメーション */
  transition: color 0.1s ease;
}
/* 白いマスクを疑似要素(::before)で作成 */
.kv_item h2 em::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: -1; /* 文字の背後に配置します */

  /* ★アニメーションの核：transformで幅を0にします */
  transform: scaleX(0);
  transform-origin: left; /* 左から右へ広がるように */

  /* ★追加：マスクが縮んで戻る時のアニメーション */
  transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}
/* アクティブになった時のスタイル（背景マスク） */
.swiper-slide-active .swiper-slide-active h2 em {
  color: #f3981d; /* マスクの上で見える文字色に変更 */
  /* 文字色の変化に遅延を持たせ、マスクが広がった後に色が変わるようにします */
  transition: color 0.1s ease 1.1s;
}
.swiper-slide-active .swiper-slide-active h2 em::before {
  transform: scaleX(1); /* マスクを横に100%広げます */
  /* マスクが広がるアニメーション設定 */
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1s;
}
/*
.kv_item h2 em::after {
  display: block;
  width: 100%;
  height: 4px;
  background-color: #fff;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1s;
}
.swiper-slide-active .swiper-slide-active h2 em::after {
  transform: scaleX(1);
}
    */
.kv_item h2 span {
  display: inline;
}

@media screen and (max-width: 800px) {
  .kv_item h2 {
    font-size: clamp(25px, 8vw, 30px);
    font-size: clamp(1.438rem, 1.369rem + 0.34vw, 1.625rem);
    left: 10px;
    bottom: 75px;
  }
  /*
  .kv_item h2 em::after {
    height: 3px;
  }
    */
}

/* ページネーション（点々）のスタイル */
.kv .swiper-pagination {
  bottom: 30px;
}
.kv .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 1;
  transition: background-color 0.3s;
}
.kv .swiper-pagination-bullet-active {
  background-color: #fff;
}
@media screen and (max-width: 800px) {
  .kv .swiper-pagination {
    bottom: 20px;
  }
}
/* ========================================

top_search

======================================== */
.top_search {
  width: calc(100% - 80px);
  max-width: 1600px;
  margin: 0 auto;
  padding: 10px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.top_search_item {
  width: 50%;
  position: relative;
}
@media screen and (min-width: 801px) {
  .top_search_item:first-child,
  .top_search_item:nth-child(2) {
    margin-bottom: 10px;
  }
  .top_search_item:first-child::after,
  .top_search_item:nth-child(2)::after,
  .top_search_item:nth-child(3)::after,
  .top_search_item:nth-child(4)::after {
    width: calc(100% - 25px);
    height: 1px;
    content: "";
    display: block;
    position: absolute;
    bottom: -5px;
    left: 20px;
    background-color: #000;
    background-color: #33ccff;
  }
  .top_search_item:nth-child(2)::after {
    left: auto;
    right: 20px;
  }

  .top_search_item:nth-child(odd)::before {
    width: 1px;
    height: 100%;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #000;
    background-color: #33ccff;
  }
}
.top_search .hl {
  width: 90%;
  margin: 5px auto;
  padding-top: 0;
}
.top_search .hl a {
  padding: 18px 0;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.top_search dl {
  width: 90%;
  margin: 0 auto;
}
.top_search dl > div {
  padding: 11px 0 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.top_search dl dt {
  color: rgba(0, 0, 0, 0.5);
  font-size: 14px;
  letter-spacing: -0.05em;
  width: clamp(10em, 31.9445%, 230px);
  padding-top: 0.5em;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.top_search dl dd {
  width: calc(97.2222% - clamp(140px, 31.9445%, 230px));
}
.top_search dl dd ul:not(.terms_list) {
  margin-top: -10px;
  padding-top: 6px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.top_search dl dd ul:not(.terms_list) li {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.05em;
  margin-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.top_search dl dd ul:not(.terms_list) li:not(:last-of-type)::after {
  color: rgba(0, 0, 0, 0.3);
  content: "/";
  margin: 0 0.4em;
}
.top_search dl dd ul:not(.terms_list) li a {
  display: block;
  position: relative;
  padding-bottom: 0.5em;
}
.top_search dl dd ul:not(.terms_list) li a::before,
.top_search dl dd ul:not(.terms_list) li a::after {
  width: 100%;
  height: 1px;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  border-bottom: 1px dotted #000;
  -webkit-transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1);
  transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1);
}
.top_search dl dd ul:not(.terms_list) li a::after {
  border-style: solid;
  opacity: 0;
}
@media screen and (min-width: 801px) {
  .top_search dl dd ul:not(.terms_list) li a:hover::before {
    opacity: 0;
  }
  .top_search dl dd ul:not(.terms_list) li a:hover::after {
    opacity: 1;
  }
}
.top_search .terms_list {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.05em;
  margin-top: -5px;
}
.top_search .terms_list li {
  margin: 5px 5px 0 0;
}
.top_search .terms_list li a {
  padding: 7px 15px 9px;
}

@media screen and (max-width: 800px) {
  .top_search {
    width: calc(100% - 40px);
    margin: 0 auto;
    padding: 10px 0;
  }
  .top_search_item {
    width: calc(100% - 20px);
    margin: 0 auto;
  }
  .top_search_item[data-index="1"] {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
  .top_search_item[data-index="2"] {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }
  .top_search_item[data-index="3"] {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
  }
  .top_search_item[data-index="4"] {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
  }
  .top_search_item[data-index="5"] {
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 5;
    order: 5;
  }
  .top_search_item[data-index="6"] {
    -webkit-box-ordinal-group: 7;
    -ms-flex-order: 6;
    order: 6;
  }
  .top_search_item:not(:last-child) {
    border-bottom: 1px solid #000;
  }
  /*
  .top_search_item.detail .hl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .top_search_item.detail .hl a {
    display: inline-block;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px dotted #000;
  }
  .top_search_item.detail .hl a .arrow {
    display: none;
  }
  .top_search_item.open .hl .btn_toggle::after {
    opacity: 0;
  }
    */
  .top_search .hl {
    width: 100%;
  }
  .top_search .hl a {
    padding: 13px 0 12px;
  }
  /*
  .top_search .hl .btn_toggle {
    width: 24px;
    height: 24px;
    display: block;
    position: relative;
    border-radius: 50%;
    border: 1px solid #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .top_search .hl .btn_toggle::before {
    width: 9px;
    height: 1px;
    content: "";
    display: block;
    background-color: #000;
  }
  .top_search .hl .btn_toggle::after {
    width: 1px;
    height: 9px;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #000;
    translate: -50% -50%;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
    */
  .top_search dl {
    width: 100%;
  }
  .top_search dl > div {
    display: block;
    padding-bottom: 9px;
  }
  .top_search dl dt {
    width: 100%;
    margin-bottom: 12px;
    padding-top: 7px;
  }
  .top_search dl dd {
    width: 100%;
  }
  .top_search dl dd ul:not(.terms_list) {
    margin-top: -13px;
  }
  .top_search dl dd ul:not(.terms_list) li {
    margin-top: 13px;
  }
  .top_search .terms_list {
    padding-bottom: 10px;
  }
}
/* ========================================

message

======================================== */
.message {
  position: relative;
  padding: 130px 0 85px;
}
.message::before,
.message::after {
  width: 100%;
  height: 60px;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  background-image: url(../images/top/slide_title.svg);
  background-repeat: repeat-x;
  background-position: 0 0;
  background-size: auto 100%;
  -webkit-animation: bg_slide 50s linear infinite;
  animation: bg_slide 50s linear infinite;
}
.message::before {
  top: -1px;
}
.message::after {
  bottom: -1px;
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}
.message_inner {
  width: calc(100% - 80px);
  max-width: 1600px;
  margin: 0 auto;
  max-width: 1330px;
}
.message h2 {
  width: 214px;
  position: relative;
  margin-left: auto;
  margin-right: 10px;
  z-index: 2;
}
.message .text {
  font-size: 18.5px;
  font-weight: 400;
  line-height: 1.95;
  color: #192f60;
  letter-spacing: -0.05em;
  letter-spacing: 0.05em;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  position: relative;
  margin-top: 126px;
  margin-left: 100px;
  margin-left: 7.5188%;
  z-index: 2;
  text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #fff;
}
.message .box_img {
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 220px;
  left: 0;
  z-index: 1;
}
.message .box_img_inner {
  width: calc((480px + 80px) * 8);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-animation: slide_loop 60s linear infinite;
  animation: slide_loop 60s linear infinite;
}
.message .box_img .img {
  width: 480px;
  overflow: hidden;
  border-radius: 5px;
  margin-right: 80px;
}

@-webkit-keyframes bg_slide {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 1824px 0;
  }
}

@keyframes bg_slide {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 1824px 0;
  }
}
@media screen and (max-width: 800px) {
  .message {
    position: relative;
    padding: 80px 0 85px;
  }
  .message::before,
  .message::after {
    height: 40px;
    -webkit-animation-name: bg_slide_sp;
    animation-name: bg_slide_sp;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
  }
  .message_inner {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .message h2 {
    width: calc(100% - 40px);
    margin: 0 auto;
    margin-top: -10px;
    margin-bottom: 40px;
  }
  .message h2 img {
    width: 203px;
  }
  .message .text {
    font-size: clamp(13px, 4.2667vw, 16px);
    line-height: 1.88;
    -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
    width: calc(100% - 40px);
    margin: 0 auto;
  }
  .message .box_img {
    position: relative;
    top: auto;
    left: auto;
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }
  .message .box_img_inner {
    width: calc((320px + 40px) * 8);
  }
  .message .box_img .img {
    width: 320px;
    margin-right: 40px;
  }
}
@-webkit-keyframes bg_slide_sp {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 608px 0;
  }
}
@keyframes bg_slide_sp {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 608px 0;
  }
}
/* ========================================

property

======================================== */
.property {
  width: calc(100% - 80px);
  width: calc(100% - 15%);
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
  margin-bottom: 120px;
}
.property_inner {
  width: calc(100% - 40px);
  margin: 0 auto;
  padding-top: 45px;
}
.property .title {
  margin-bottom: 61px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.property .title .hl {
  font-size: 36px;
  letter-spacing: -0.05em;
}
.property .title ._link {
  font-size: 16px;
}
.property .terms {
  margin-top: -40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.property .terms .hl {
  font-size: 20px;
  width: clamp(170px, 20.8334%, 250px);
  padding-top: 0.6em;
}
.property .terms_list {
  width: calc(100% - clamp(170px, 20.8334%, 250px));
}
.property .terms_list li a {
  font-size: 16px;
  font-weight: 500;
  display: block;
  padding: 14px 15px 16px;
}

@media screen and (max-width: 800px) {
  .property {
    width: calc(100% - 40px);
    margin: 0 auto;
    margin-bottom: 60px;
  }
  .property_inner {
    width: 100%;
    padding-top: 36px;
  }
  .property .title {
    margin-bottom: 40px;
    padding: 0 10px;
  }
  .property .title .hl {
    font-size: 20px;
  }
  .property .title ._link {
    font-size: 14px;
  }
  .property .terms {
    width: calc(100% - 20px);
    margin: 0 auto;
    display: block;
    margin-top: 13px;
  }
  .property .terms .hl {
    font-size: 16px;
    margin-bottom: 15px;
  }
  .property .terms_list {
    width: 100%;
  }
  .property .terms_list li a {
    font-size: 14px;
    padding: 7px 15px 9px;
  }
}
/* ========================================

sell / lend

======================================== */
.l_column {
  width: calc(100% - 80px);
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
  margin-bottom: 120px;
  padding-top: 45px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
@media screen and (min-width: 801px) {
  .l_column::after {
    width: 1px;
    height: calc(100% - 10px);
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    background-color: #000;
  }
}
.l_column_item {
  width: calc(50% - 20px);
}
.l_column_item_inner {
  width: calc(100% - 40px);
  margin: 0 auto;
}
.l_column_item .title {
  margin-bottom: 52px;
}
.l_column_item .title .hl {
  font-size: 36px;
}
.l_column_item .title a {
  width: 100%;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.l_column_item .desc {
  font-size: 18px;
  line-height: 1.44;
  margin-bottom: 40px;
}
.l_column_item ul li:not(:last-of-type) {
  margin-bottom: 10px;
}
.l_column_item ul li a {
  color: #fff;
  font-size: 18px;
  letter-spacing: -0.05em;
  width: 100%;
  padding: 17px 20px;
  background-color: #000;
  border: 1px solid #000;
  border-radius: 50px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
@media screen and (min-width: 801px) {
  .l_column_item ul li a:hover {
    color: #000;
    background-color: #fff;
  }
}

@media screen and (max-width: 800px) {
  .l_column {
    width: calc(100% - 40px);
    margin: 0 auto;
    display: block;
    margin-bottom: 60px;
    padding-top: 23px;
  }
  .l_column::after {
    width: 100%;
    height: 10px;
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    border: 1px solid #000;
    border-top: none;
    border-radius: 0 0 5px 5px;
  }
  .l_column_item {
    width: 100%;
    padding-bottom: 30px;
  }
  .l_column_item:first-child {
    margin-bottom: 33px;
    border-bottom: 1px solid #000;
  }
  .l_column_item_inner {
    width: calc(100% - 20px);
    margin: 0 auto;
  }
  .l_column_item .title {
    margin-bottom: 27px;
  }
  .l_column_item .title .hl {
    font-size: 24px;
  }
  .l_column_item .desc {
    font-size: 16px;
    margin-bottom: 20px;
  }
  .l_column_item ul li a {
    font-size: 16px;
    padding: 11px 10px;
  }
}
/* ========================================

access

======================================== */
.access {
  width: calc(100% - 80px);
  max-width: 1600px;
  margin: 0 auto;
  margin-bottom: 120px;
}
.access_inner {
  width: calc(100% - 40px);
  margin: 0 auto;
  padding-top: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.access_cont {
  width: 32.0513%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.access_cont_text {
  font-size: 24px;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.05em;
  margin-top: auto;
  margin-bottom: 10px;
}
.access_cont_link {
  font-size: 20px;
}
.access_map {
  width: 66.6667%;
  height: 600px;
}
.access_map iframe {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 800px) {
  .access {
    width: calc(100% - 40px);
    margin: 0 auto;
    margin-bottom: 80px;
  }
  .access_inner {
    width: calc(100% - 20px);
    margin: 0 auto;
    padding-top: 23px;
  }
  .access_cont {
    width: 100%;
  }
  .access_cont .hl {
    margin-bottom: 18px;
  }
  .access_cont_text {
    font-size: 16px;
    margin-bottom: 15px;
  }
  .access_cont_link {
    font-size: 16px;
    margin-bottom: 25px;
  }
  .access_map {
    width: 100%;
    height: 400px;
  }
}

/* 横スライダーと縦スライダーのコンテナ設定 */
.kv-swiper-v,
.kv-swiper-h {
  width: 100%;
  height: 100%;
}

/* ページネーション（点々）のスタイル */
.kv .swiper-pagination {
  bottom: 30px; /* 表示位置を調整 */
}
.kv .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 1;
  transition: background-color 0.3s;
}
.kv .swiper-pagination-bullet-active {
  background-color: #fff;
}
@media screen and (max-width: 800px) {
  .kv .swiper-pagination {
    bottom: 20px;
  }
}

/* テキストアニメーションのセレクタを調整 */
.swiper-slide-active .swiper-slide-active h2 {
  opacity: 1;
  transform: translateY(0);
}
.swiper-slide-active .swiper-slide-active h2 em::after {
  transform: scaleX(1);
}

/* */
.kv::before {
  display: none;
}

/* */
/* --- イベントタイプのタグの装飾 --- */

/* dtタグ自体のスタイルを調整（任意） */
.property_list ul li .box_text dt.event-type-container {
  /* タグが複数行になった場合の間隔を調整 */
  line-height: 1.8;
}

/* 各タグ（ターム）の基本スタイル */
.property_list ul li .box_text .event-type-tag {
  display: inline-block; /* 背景色や余白をきれいにつけるため */
  background-color: #26499d; /* 背景色（例：グレー） */
  color: #f6e5cc; /* 文字色 */
  padding: 4px 12px; /* 内側の余白（上下・左右） */
  margin-right: 8px; /* タグの右側の余白 */
  margin-bottom: 8px; /* タグが折り返した時の下の余白 */
  border-radius: 4px; /* 角を丸くする */
  font-size: 14px; /* 文字サイズを調整 */
  font-weight: 500;
  letter-spacing: normal; /* 親要素のletter-spacingをリセット */
}

/* --- （応用）タームごとに色を変えたい場合 --- */
/* 
 もしPHP側で以下のようにスラッグをクラスに追加すれば、
 echo '<span class="event-type-tag event-type-' . esc_attr($term->slug) . '">' . esc_html($term->name) . '</span>';

 CSSでタームごとの色分けができます。
*/
.event-type-tag.event-type-kengakukai {
  /* スラッグが 'kengakukai' の場合 */
  background-color: #e0f7fa; /* 水色 */
  color: #00796b;
}

.event-type-tag.event-type-soudankai {
  /* スラッグが 'soudankai' の場合 */
  background-color: #fff3e0; /* オレンジ色 */
  color: #f57c00;
}

/* ========================================
   イベント 横長カードのデザイン - 【レイアウト修正版】
======================================== */

/* ★★★ 親コンテナにFlexboxを適用 ★★★ */
.front-events .events-grid-horizontal {
  display: flex;
  flex-wrap: wrap; /* 折り返しを許可 */
  gap: 20px;

  /* grid-template-columns は使わない */
}

/* ★★★ 各カードの幅をFlexboxで制御 ★★★ */
.front-events .event-card-horizontal {
  /* (width - gap * 2) / 3 */
  width: calc(33.333% - 14px); /* 隙間を考慮した幅計算 */
  flex-shrink: 0; /* 縮まないように設定 */

  /* 以下、カード自体のデザインは変更なし */
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s, box-shadow 0.3s;
}
.front-events .event-card-horizontal:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.event-card-horizontal .card-link-h {
  display: flex;
  text-decoration: none;
  color: #333;
  width: 100%;
}

.event-card-horizontal .card-image-wrapper-h {
  flex: 0 0 240px;
  position: relative;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  overflow: hidden;
}
.event-card-horizontal .card-image-wrapper-h img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* --- 2. バッジ自体のスタイルを新規作成 --- */
.card-status-badge {
  position: absolute;
  top: 15px;
  left: 15px;

  background-color: rgba(0, 0, 0, 0.6); /* 半透明の黒背景 */
  color: #fff;

  padding: 6px 12px;
  border-radius: 5px;

  font-size: 1.25rem !important; /* 全体指定に負けないように */
  font-weight: bold;
  line-height: 1; /* 行の高さを調整 */

  z-index: 2; /* 画像より手前に表示 */
  backdrop-filter: blur(3px); /* すりガラス効果（モダンなブラウザのみ） */
}
/* 物件種別用 (例: 青) */
.property-card .card-status-badge {
  background-color: #007bff;
}

/* イベントステータス用 */
.card-status-badge.is-ongoing {
  background-color: #e91e63;
} /* 開催中 */
.card-status-badge.is-upcoming {
  background-color: #ff9800;
} /* まもなく */

/* 応募済み用 */
.card-status-badge.is-applied-badge {
  background-color: #4caf50;
}
.event-card-horizontal .card-content-wrapper-h {
  padding: 15px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.event-card-horizontal .card-event-types {
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 5px;
}
.event-card-horizontal .card-title-h {
  font-family: "Shippori Mincho", serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.3rem;
}
.event-card-horizontal .card-info-list {
  font-size: 0.85rem;
  margin-top: auto;
  border-top: 1px solid #f0f0f0;
  padding-top: 10px;
}
.info-item {
  display: flex;

  /* ★★★ この一行を追加 ★★★ */
  align-items: center; /* Flexアイテムを垂直方向の中央に揃える */

  gap: 10px;
  color: #555;
}

.info-item:not(:last-child) {
  margin-bottom: 12px;
}

.info-item i.fas {
  color: #c9b071;
  width: 16px;
  text-align: center;

  /* ★アイコンが縮まないように設定 */
  flex-shrink: 0;
}

/* SP表示 */
@media (max-width: 800px) {
  /* ★SPではFlexboxの設定を解除し、カード幅を100%に */
  .front-events .event-card-horizontal {
    width: 100%;
  }
}

/* ========================================
   サイト全体のフォントサイズ調整 (PC表示)
======================================== */

/* --- 1. 基本となる本文の文字サイズ --- */
body,
p,
.entry-content {
  font-size: 1.4rem !important;
  line-height: 1.8 !important; /* 行間も広げて読みやすく */
}

/* --- 2. 見出しのサイズ --- */
h1,
.entry-title,
.works-hero-title,
.mh-title-final {
  font-size: 4.5rem !important;
}
h2,
.section-title,
.works-section-title span,
.mh-section-title-wide {
  font-size: 3rem !important;
}
h3,
.card-title,
.card-title-h,
.voice-card .voice-title span {
  font-size: 2rem !important;
}
h4 {
  font-size: 1.8rem !important;
}

/* --- 3. カード内のテキスト --- */
/* イベントカードや物件カードなどの詳細情報 */
.card-info-list,
.box_text_info,
.cInfoCard__lower {
  font-size: 1.6rem !important;
}
.card-info-list .info-item,
.box_text_info_inner dd {
  font-size: 1.6rem !important;
}
/* 主催会社名などの補足情報 */
.card-organizer,
.card-event-types,
.box_text dt {
  font-size: 1.4rem !important; /* 本文より少しだけ小さく */
}

/* --- 4. ボタンの文字サイズ --- */
.button {
  font-size: 1.5rem !important; /* 本文より大きく、行動を促す */
  padding: 18px 35px !important;
}

/* --- 5. スマートフォン表示での調整 --- */
/* SPでは、PCのサイズ感だと大きすぎるため、少し抑える */
@media (max-width: 768px) {
  body,
  p,
  .entry-content {
    font-size: 1.2rem !important;
  }
  h1,
  .entry-title,
  .works-hero-title,
  .mh-title-final {
    font-size: 2.5rem !important;
  }
  h2,
  .section-title,
  .works-section-title span,
  .mh-section-title-wide {
    font-size: 2rem !important;
  }
  h3,
  .card-title,
  .card-title-h,
  .voice-card .voice-title span {
    font-size: 1.5rem !important;
  }
  .button {
    font-size: 1.3rem !important;
  }
  /* カード内のテキストもSP用に調整 */
  .card-info-list,
  .box_text_info,
  .cInfoCard__lower,
  .card-info-list .info-item,
  .box_text_info_inner dd {
    font-size: 1.1rem !important;
  }
  .card-organizer,
  .card-event-types,
  .box_text dt {
    font-size: 1rem !important;
  }
}
/* イベントカードの主催会社名のスタイル調整 */
.event-card-horizontal .card-info-list .info-item:last-child {
  display: flex !important; /* 強制的に表示 */
  font-size: 0.9rem; /* 読みやすいサイズに */
  color: #555;
}

/* ========================================
   トップページ専用スタイル上書き
======================================== */

/* トップページ(.home または .front-page)にある、
   イベントセクション(.front-events)の中の、
   .srec-page-container の最大幅を 1200px に上書きする */

.home .front-events .srec-page-container,
.front-page .front-events .srec-page-container {
  max-width: 1200px; /* ★ここで新しい最大幅を指定 (例: 1200px) */
}

/* ========================================
   横長カードのデザイン調整 (ワイド対応)
   ※この部分は前回の回答と同じですが、再掲します
======================================== */

.front-events .events-grid-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.front-events .event-card-horizontal {
  /* 3カラムの場合の幅計算 */
  width: calc((100% - 40px) / 3); /* (全体幅 - 隙間2つ分) / 3 */
  flex-shrink: 0;
}

/* --- レスポンシブ対応 --- */

@media (max-width: 1024px) {
  .front-events .event-card-horizontal {
    width: calc((100% - 20px) / 2); /* 2カラム */
  }
}

@media (max-width: 768px) {
  .front-events .event-card-horizontal {
    width: 100%; /* 1カラム */
  }
}
/* ========================================
   トップページ専用セクションのスタイル上書き
======================================== */

/* --- イベントセクションの幅を拡張 --- */
.front-page-section .srec-page-container {
  max-width: 1200px; /* ★ここで新しい最大幅を指定 */
}

/* --- イベントカードのレイアウト --- */
.front-page-section .events-grid-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 2.3rem;
}

/* --- 2. カード自体のスタイル --- */
/* トップページのセクション内のすべての横長カードに適用 */
.front-page-section .event-card-horizontal {
  width: calc((100% - 40px) / 2); /* 3カラム */
  flex-shrink: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
}

/* ホバーアクションを、トップページのすべてのカードに適用 */
.front-page-section .event-card-horizontal:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
/* ★★★ アイコンと文字の位置ずれ修正 ★★★ */
.front-page-section .info-item {
  display: flex;
  align-items: center; /* 垂直方向の中央揃え */
}

/* --- 4. レスポンシブ対応 --- */
@media (max-width: 1024px) {
  .front-page-section .event-card-horizontal {
    width: calc((100% - 20px) / 2); /* 2カラム */
  }
}
@media (max-width: 768px) {
  .front-page-section .event-card-horizontal {
    width: 100%; /* 1カラム */
  }
}
/* ========================================
   共通セクションタイトル - パターンC (グラフィカル・最終版)
======================================== */

.section-title {
  /* ★ h2自体をFlexboxコンテナにして、サブタイトルとメインタイトルを制御 */
  display: flex;
  flex-direction: column; /* 縦に並べる */
  align-items: center; /* 中央揃え */

  font-family: "Montserrat", sans-serif;
  font-size: 2.8rem; /* ★メインタイトルのサイズ */
  font-weight: 700;
  text-align: center;
  margin-bottom: 80px; /* ★余白を多めに */
  color: #222;
  position: relative;
  z-index: 1;
}

/* ★背景に透ける巨大な英字 */
.section-title::before {
  content: attr(data-en-title);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  font-size: 7rem; /* ★サイズを調整 */
  font-weight: 800;
  color: rgba(0, 0, 0, 0.04);
  white-space: nowrap;
  user-select: none;
}

/* ★日本語サブタイトル */
.section-title span {
  display: block;
  font-family: "M PLUS 1", sans-serif;
  font-size: 1.56rem; /* お客様指定のサイズ */
  font-weight: bold;
  color: #c9b071;
  letter-spacing: 0.1em;
  margin-bottom: 1rem; /* メインタイトルとの余白 */

  /* ★メインタイトルより手前に表示されるように順序を指定 */
  order: -1;
}

/* ========================================
   トップページ 特集キャンペーン - 新デザイン
======================================== */

/* --- 1. 親コンテナの幅を制御 --- */
/* トップページ(.home)にあるキャンペーンセクションのコンテナ幅を上書き */
.home .featured-campaigns .srec-page-container,
.front-page .featured-campaigns .srec-page-container {
  max-width: 1200px;
}

/* --- 2. カードのグリッドレイアウト --- */
.featured-campaigns .campaign-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* --- 3. カード自体のスタイル (縦長) --- */
.featured-campaigns .campaign-card-v2 {
  width: calc((100% - 40px) / 3);
  flex-shrink: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative; /* 応募済みバッジのため */
}
.featured-campaigns .campaign-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.campaign-card-v2.is-applied .card-image-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px 8px 0 0;
}

.campaign-card-v2 .card-link {
  display: block;
  text-decoration: none;
  color: #333;
}

/* --- 4. カード内のパーツのスタイル --- */
.campaign-card-v2 .card-image-wrapper {
  position: relative;
  aspect-ratio: 16 / 9; /* 画像の比率を16:9に */
}
.campaign-card-v2 .card-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}
.campaign-card-v2 .card-deadline {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 0.8rem !important;
  font-weight: bold;
  backdrop-filter: blur(5px);
}

.campaign-card-v2 .card-content-wrapper {
  padding: 20px;
}
.campaign-card-v2 .card-organizer {
  font-size: 0.8rem !important;
  color: #888;
  margin-bottom: 8px;
}
.campaign-card-v2 .card-title {
  font-family: "Shippori Mincho", serif;
  font-size: 1.5rem !important; /* h3なのでサイト全体の指定に合わせる */
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 15px;
  min-height: 4.8rem; /* 2行分の高さを確保 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.campaign-card-v2 .card-prize {
  display: flex;
  align-items: flex-start; /* アイコンとテキストを上揃え */
  gap: 8px;
  font-size: 1rem !important; /* 本文より少し小さめ */
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}
.campaign-card-v2 .card-prize i.fas {
  color: #c9b071;
  margin-top: 5px; /* アイコンの位置を微調整 */
}

.campaign-card-v2 .card-applied-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #4caf50;
  color: #fff;
  padding: 6px 12px;
  border-radius: 5px;
  font-weight: bold;
  font-size: 0.9rem !important;
  z-index: 2;
}

/* --- 5. レスポンシブ対応 --- */
@media (max-width: 1024px) {
  .featured-campaigns .campaign-card-v2 {
    width: calc((100% - 20px) / 2); /* 2カラム */
  }
}
@media (max-width: 768px) {
  .featured-campaigns .campaign-card-v2 {
    width: 100%; /* 1カラム */
  }
}

/* ========================================
   建売・中古物件カードのデザイン
======================================== */

/* --- 親コンテナの幅を制御 --- */
.front-properties .srec-page-container {
  max-width: 1200px;
}
/* グリッドレイアウト */
.properties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  margin-bottom: 2.3rem;
}

.property-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}
.property-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.property-card .card-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-decoration: none;
  color: #333;
}

.property-card .card-image-wrapper {
  position: relative;
  aspect-ratio: 4 / 3;
}
.property-card .card-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}
.card-type-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background: #007bff;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 1rem;
  font-weight: bold;
}

.property-card .card-content-wrapper {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.property-card .card-title {
  font-family: "Shippori Mincho", serif;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 10px;
  min-height: 4.2rem; /* 2行分の高さを確保 */
}
.property-card .card-address {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 15px;
}
.card-specs-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  padding: 15px 0;
  margin-bottom: 20px;
  text-align: center;
}
.spec-item .spec-label {
  display: block;
  font-size: 1.35rem;
  color: #888;
}
.spec-item .spec-value {
  font-size: 1.45rem;
  font-weight: bold;
}
.property-card .card-price-wrapper {
  margin-top: auto;
  text-align: right;
}
.card-price-wrapper .price-value {
  font-family: "Montserrat", sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  color: #e91e63;
}
.card-price-wrapper .price-unit {
  font-size: 1rem;
  margin-left: 5px;
}

/* ========================================
   トップページ モデルハウスセクション
======================================== */

/* --- 親コンテナの幅を制御 --- */
.front-model-houses .srec-page-container {
  max-width: 1200px;
}

/* --- グリッドレイアウト --- */
/* ★アーカイブページのul.cInfoCardsとスタイルを共有 */
.model-houses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;

  /* ulタグのデフォルトスタイルをリセット */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ★content-model_house.phpが出力するliタグに対応 */
.model-houses-grid .cInfoCards__item {
  width: 100%; /* グリッドアイテムとして幅を100%に */
}

/* 0件の場合のメッセージ */
.no-results-message {
  text-align: center;
  padding: 40px 0;
}
.card-info-list .info-item-price {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
  text-align: right;
}
.info-item-price .price-value {
  font-family: "Montserrat", sans-serif;
  font-size: 3.3rem !important;
  font-weight: 700;
  color: #e91e63;
}
.info-item-price .price-unit {
  font-size: 1rem !important;
  margin-left: 3px;
}

/* ========================================
   物件カード専用の追加スタイル
======================================== */

.info-item-group {
  display: flex;
  justify-content: space-between;
  text-align: center;
  padding: 10px 0;
  margin: 10px 0;
}
.info-item-sub {
  flex: 1;
  border-right: 1px solid #f0f0f0;
}
.info-item-sub:last-child {
  border-right: none;
}
.info-item-sub .label {
  display: block;
  font-size: 1.35rem !important;
  color: #888;
}
.info-item-sub .value {
  font-size: 1.45rem !important;
  font-weight: bold;
}

/* 価格表示用のスタイルはイベントと共通なので、セレクタを汎用的に */
.card-info-list .info-item-price {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
  text-align: right;
}
.info-item-price .price-value {
  font-family: "Montserrat", sans-serif;
  font-size: 3.3rem !important;
  font-weight: 700;
  color: #e91e63;
}
.info-item-price .price-unit {
  font-size: 1rem !important;
  margin-left: 3px;
}

/* ========================================
   トップページ セクションのメリハリ
======================================== */

/* 白背景のセクション（デフォルト） */
.front-page-section {
  padding: 80px 0;
}

/* ★★★ 偶数番目のセクションに背景色を付ける ★★★ */
.front-page-section:nth-of-type(even) {
  background-color: #f7f6f2; /* 上品なグレージュ */
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
/* ========================================
   建築実例カードの高さ調整
======================================== */

/* コンパクトカード専用のスタイル */
.front-page-section .event-card-horizontal.is-compact .card-image-wrapper-h {
  flex: 0 0 200px; /* ★画像幅を少し狭く */
}

.front-page-section .event-card-horizontal.is-compact .card-content-wrapper-h {
  /* ★コンテンツの高さを最小限にする */
  justify-content: center; /* 垂直方向の中央揃え */
  flex-grow: 1;
}

.front-page-section .event-card-horizontal.is-compact .card-info-list {
  margin-top: 15px; /* ★上との余白を固定 */
  padding-top: 15px;
}

/* ========================================
   トップページ クロージングコンテンツ (最終版)
======================================== */
.front-closing-contents {
  padding: 80px 0;
  /* background-color: #f7f6f2; ← 背景色を削除 */
  border-top: 1px solid #eee;
}
.closing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.column-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 15px;
  margin-bottom: 25px;
  border-bottom: 2px solid #ddd;
}
.closing-section-title {
  font-family: "Shippori Mincho", serif;
  font-size: 2rem;
  font-weight: 700;
  color: #222;
}

/* ★★★ 総件数表示のスタイル ★★★ */
.total-count-display {
  font-size: 1rem;
  color: #555;
  font-family: "Montserrat", sans-serif;
}
.total-count-display strong {
  font-size: 2.5rem; /* ★数字を大胆に大きく */
  font-weight: 700;
  color: #c9b071; /* ゴールド系のアクセントカラー */
  margin: 0 0.2em;
}

.closing-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.closing-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 5px;
  text-decoration: none;
  color: #333;
  transition: all 0.3s;
}
.closing-item:hover {
  background-color: #fdfdfc;
  border-color: #ddd;
  transform: scale(1.02);
}
.closing-item-thumbnail {
  flex-shrink: 0; /* 縮まないように */
}
.video-thumbnail {
  position: relative;
}
.video-thumbnail img {
  width: 100px;
  height: 75px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.play-icon-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 2rem;
  opacity: 0;
  transition: opacity 0.3s;
}
.closing-item:hover .play-icon-overlay {
  opacity: 1;
}

.voice-thumbnail img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.closing-item-content {
  flex-grow: 1;
}
.closing-item-title {
  font-weight: bold;
  font-size: 1.1rem;
  line-height: 1.5;
  margin-bottom: 5px;
}
.closing-item-meta {
  font-size: 0.85rem;
  color: #777;
}
.voice-excerpt {
  font-size: 1rem;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .closing-grid {
    grid-template-columns: 1fr;
  }
}

/* --- A. 会員登録セクション (インパクト版・色修正済み) --- */
.cta-section.cta-register {
  padding: 120px 0;
  position: relative;
  color: #fff; /* ★セクション全体の基本文字色を白に設定 */
  overflow: hidden;
}
.cta-background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transform: scale(1.1);
  transition: transform 10s ease-out;
  z-index: -2;
}
.cta-register:hover .cta-background-image {
  transform: scale(1);
}

.cta-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(40, 40, 40, 0.85) 0%, rgba(0, 0, 0, 0.6) 100%);
  z-index: -1;
}
.cta-content {
  position: relative;
  z-index: 2;
}

.cta-icon {
  font-size: 3rem;
  color: #c9b071;
  margin-bottom: 20px;
}
.cta-title {
  font-family: "Shippori Mincho", serif;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.5;
  color: #fff; /* ★文字色を白に */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.cta-description {
  font-size: 1.1rem;
  line-height: 1.9;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5rem;
  opacity: 0.9;
}
.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.cta-buttons .button.button-secondary {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.8);
  color: #fff;
}
.cta-buttons .button.button-secondary:hover {
  background: #fff;
  color: #333;
}

/* ========================================
   お役立ちコンテンツセクション専用のスタイル
======================================== */

/* --- 1. このセクションのコンテナ幅だけを拡張 --- */
.cta-guide .srec-page-container.is-extra-wide {
  max-width: 1400px; /* ★ここで新しい最大幅を指定 */
}

/* --- 2. グラデーションカードのデザイン --- */
.cta-guide {
  background-color: #f9f9f9;
}
.cta-guide .guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 50px;
}
.cta-guide .guide-card {
  display: block;
  border-radius: 8px;
  text-decoration: none;
  color: #333;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.cta-guide .guide-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.cta-guide .guide-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #fdfdfc 0%, #f5f3ef 100%);
  z-index: 1;
}
.cta-guide .guide-card-content {
  position: relative;
  z-index: 2;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.cta-guide .guide-card-icon {
  font-size: 2.5rem;
  color: #c9b071;
  margin-bottom: 20px;
}
.cta-guide .guide-card-title {
  font-family: "Shippori Mincho", serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 15px;
}
.cta-guide .guide-card-description {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #666;
  flex-grow: 1;
}
.cta-guide .guide-card-arrow {
  font-size: 1.5rem;
  font-weight: bold;
  text-align: right;
  margin-top: 20px;
  color: #c9b071;
  transition: transform 0.3s;
}
.cta-guide .guide-card:hover .guide-card-arrow {
  transform: translateX(5px);
}

@media (max-width: 768px) {
  .cta-guide .guide-grid {
    grid-template-columns: 1fr;
  }
}

/*----------新レイアウト用---------------------------*/

/* ========================================
   トップページ 新デザイン (front-page.php) - 最終確定版
======================================== */

/* --- 基本設定 --- */
.fp-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}
.fp-section {
  padding: 80px 0;
}
.fp-section-title-en {
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #ccc;
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  text-align: center;
}
.fp-section-title-en span {
  display: block;
  font-family: "M PLUS 1", sans-serif;
  font-size: 2rem;
  color: #333;
  letter-spacing: normal;
  text-transform: none;
  margin-top: 5px;
}

/* ★★★ 2. 特集 + ピックアップ ★★★ */
.fp-featured-pickup-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.column-header-alt {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}
.fp-section-title-jp {
  font-family: "Shippori Mincho", serif;
  font-size: 1.8rem;
  font-weight: 700;
}
.pickup-title {
  font-size: 1.2rem;
  font-weight: bold;
}
.total-count-display {
  /* 右側の件数表示 */
  font-size: 1rem;
  color: #555;
  font-family: "Montserrat", sans-serif;
}
.total-count-display strong {
  font-size: 2rem;
  color: #c9b071;
  margin: 0 0.2em;
}
.total-count-link {
  /* 右側の「全て見る」 */
  font-size: 0.9rem;
  font-weight: bold;
}
/* 特集キャンペーンの大きなカード */
.campaign-card-v2.is-large .card-title {
  font-size: 2rem !important; /* 通常のカードより大きく */
  min-height: 0; /* 高さ制限を解除 */
}
/* ピックアップリスト */
.pickup-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.pickup-item {
  display: flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
  color: #333;
  background: #fff;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #eee;
}
.pickup-thumbnail img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 5px;
}
.pickup-item.is-voice .pickup-thumbnail img {
  border-radius: 50%;
}

/* 3. 注目のイベント */
.fp-events {
  background-color: #f7f6f2;
}
.column-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 25px;
}
.closing-section-title {
  font-family: "Shippori Mincho", serif;
  font-size: 2rem;
  font-weight: 700;
  color: #222;
}
.total-count-display {
  font-size: 1rem;
  color: #555;
}
.total-count-display strong {
  font-size: 2rem;
  color: #c9b071;
  margin: 0 0.2em;
}

/* ★★★ 5. コンテンツグリッド (正しい順番とレイアウト) ★★★ */
.fp-content-grid-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(380px, auto);
  gap: 30px;

  /* ★★★ CSS Grid Areasで、ご指示通りのレイアウトを再定義 ★★★ */
  grid-template-areas:
    "property property works"
    "land     company  modelhouse"
    "land     company  guide";
}

/* 各アイテムに名前を割り当てる */
.item-property {
  grid-area: property;
}
.item-works {
  grid-area: works;
}
.item-modelhouse {
  grid-area: modelhouse;
}
.item-land {
  grid-area: land;
}
.item-company {
  grid-area: company;
}
.item-guide {
  grid-area: guide;
}
.grid-item-wrapper {
  background: #fff;
  border: 1px solid #eee;
  padding: 25px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}
.grid-item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
  margin-bottom: 20px;
}
.grid-item-header h3 {
  font-size: 1.4rem;
  font-weight: 700;
}
.grid-item-body {
  flex-grow: 1;
}
.grid-item-card {
  display: block;
  text-decoration: none;
  color: #333;
}
.grid-item-card img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 10px;
}

/* 6. お知らせ & ログイン */
.fp-info-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 60px;
  align-items: start;
}
.fp-news-list .news-item {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid #ddd;
  text-decoration: none;
  color: #333;
}
.login-box {
  background: #333;
  color: #fff;
  padding: 40px;
  text-align: center;
  border-radius: 8px;
}

/* レスポンシブ */
@media (max-width: 900px) {
  .fp-featured-pickup-grid,
  .fp-info-grid {
    grid-template-columns: 1fr;
  }
}

/* レスポンシブ */
@media (max-width: 900px) {
  .fp-content-grid-layout {
    grid-template-columns: repeat(2, 1fr);
    /* ★SP用のレイアウトも再定義 */
    grid-template-areas:
      "property   property"
      "works      modelhouse"
      "land       company"
      "guide      ."; /* 空きセル */
  }
}
@media (max-width: 600px) {
  .fp-content-grid-layout {
    display: flex;
    flex-direction: column;
  }
}
/* --- レスポンシブ --- */
@media (max-width: 900px) {
  .fp-featured-pickup-grid {
    grid-template-columns: 1fr;
  }
}
/* ========================================
   トップページ グリッドコンテンツ バランス調整
======================================== */

/* --- カード内の共通メタ情報 --- */
.grid-item-card .card-meta {
  font-size: 1.2rem;
  color: #777;
  margin-top: 8px;
}
.grid-item-card .card-meta span:not(:last-child) {
  margin-right: 10px;
}

/* --- 小さいカード (mini) のスタイル調整 --- */
.grid-item-card-mini {
  display: flex;
  gap: 15px; /* 画像とテキストの間隔 */
  align-items: flex-start; /* 上揃え */
  text-decoration: none;
  color: #333;
}

.grid-item-card-mini .mini-thumb {
  flex-shrink: 0; /* 画像が縮まないように */
  width: 90px; /* 画像の幅を固定 */
}
.grid-item-card-mini .mini-thumb img {
  width: 100%;
  height: 68px; /* 高さを固定 */
  object-fit: cover; /* 比率を保ったままトリミング */
  border-radius: 4px;
}

.grid-item-card-mini .mini-content {
  flex-grow: 1; /* 残りの幅をすべて使う */
}
.grid-item-card-mini .mini-content h4 {
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 8px;
}

/* 物件情報のグリッド表示 */
.grid-item-card-mini .card-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 8px;
}
.card-meta-grid .meta-item span {
  display: block;
  font-size: 1rem;
  color: #888;
}
.card-meta-grid .meta-item strong {
  font-weight: bold;
}

/* 価格表示 */
.grid-item-card-mini .card-price {
  font-size: 1.5rem;
  font-weight: bold;
  color: #e91e63;
  text-align: right;
  margin-top: 5px;
}

/* --- 家づくりのヒントの装飾 --- */
.guide-grid-fp {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  justify-content: space-around;
}

.guide-card-fp {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px;
  border-radius: 50px; /* 角を丸くしてカプセル型に */
  background-color: #fff;
  border: 1px solid #eee;
  text-decoration: none;
  color: #333;
  transition: all 0.3s;
}
.guide-card-fp:hover {
  background-color: #c9b071;
  color: #fff;
  border-color: #c9b071;
}

.guide-card-fp .guide-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f7f6f2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #c9b071;
  transition: all 0.3s;
}
.guide-card-fp:hover .guide-icon {
  background-color: #fff;
}

.guide-card-fp h4 {
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.4;
}

/* --- お知らせ一覧リンクのスタイル --- */
.info-item-news .total-count-link {
  font-size: 1.4rem;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  position: relative;
  padding-right: 20px;
}
.info-item-news .total-count-link::after {
  content: "\f061"; /* Font Awesomeの矢印アイコン */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: right 0.3s;
}
.info-item-news .total-count-link:hover::after {
  right: -5px;
}

/* --- ログイン・登録ボックスのスタイル --- */
.info-item-login .login-box {
  background-color: #333;
  color: #fff;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.info-item-login .login-box .cta-title {
  color: #fff;
  text-shadow: none;
  font-size: 2.2rem;
  line-height: 1.4;
  margin-bottom: 10px;
}
.info-item-login .login-box .cta-description {
  color: #eee;
  opacity: 0.9;
  margin-bottom: 25px;
}
/* ログインボタンの視認性確保 */
.info-item-login .login-box .button.button-secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: #fff;
}
.info-item-login .login-box .button.button-secondary:hover {
  background: #fff;
  color: #333;
}
/* ========================================
   トップページ さらなる改善CSS
======================================== */

/* --- 特集キャンペーン「すべて見る」リンク --- */
.fp-featured-main .total-count-link {
  font-size: 1.4rem;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  position: relative;
  padding-right: 20px;
}
.fp-featured-main .total-count-link::after {
  content: "\f061"; /* Font Awesomeの矢印アイコン */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: right 0.3s;
}
.fp-featured-main .total-count-link:hover::after {
  right: -5px;
}

/* --- グリッドコンテンツ内のリスト共通スタイル --- */
.grid-item-body .grid-item-list {
  display: flex;
  flex-direction: column;
  gap: 15px; /* 各投稿の間の余白 */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 区切り線を持つリストのスタイル */
.grid-item-list.has-divider li:not(:first-child) {
  border-top: 1px dashed #ddd; /* 点線の区切り線 */
  padding-top: 15px;
}

/* --- 建築実例のレイアウト調整 --- */
.item-works .mini-content .card-meta {
  margin-top: 8px;
  font-size: 1.2rem;
  color: #666;
}

/* --- ログインボックスのテキスト改行調整 --- */
.info-item-login .login-box .cta-title {
  font-size: 2rem; /* 少しだけフォントサイズを調整 */
}

/* --- レスポンシブ対応 (グリッドコンテンツ) --- */
@media (max-width: 900px) {
  .fp-content-grid-layout {
    /* SPでは各グリッドアイテムを縦積みにして見やすくする */
    display: flex;
    flex-direction: column;
  }
}

/* ========================================
   ログインボックス 最終調整CSS
======================================== */

/* --- 説明文を左揃えに --- */
.info-item-login .login-box .cta-description {
  text-align: left; /* テキストを左揃えに変更 */
}

/* --- ボタンのスタイル調整 --- */
.info-item-login .login-box .cta-buttons {
  display: grid; /* Gridレイアウトに変更 */
  grid-template-columns: 1fr 1fr; /* 2つのボタンを均等に配置 */
  gap: 15px; /* ボタン間の隙間 */
}

.info-item-login .login-box .button {
  display: flex; /* Flexboxでアイコンとテキストを横並び */
  align-items: center;
  justify-content: center;
  gap: 8px; /* アイコンとテキストの間隔 */
  padding: 12px 10px !important; /* ボタンの余白を調整 */
  font-size: 1.4rem !important; /* フォントサイズを調整 */
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: all 0.3s;
}

/* =======================================
お客様からの口コミ (fp-user-reviews) 
 ======================================= */
.fp-user-reviews {
  padding: 80px 0;
  background-color: #fff; /* 背景色はお好みで */
}

.user-reviews-swiper {
  padding-bottom: 50px; /* ページネーションのための余白 */
}

.review-card {
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 8px;
  padding: 25px 30px;
  height: 100%; /* スライドの高さを揃える */
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.review-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.review-author-icon {
  font-size: 24px;
  color: #ccc;
  margin-right: 15px;
  width: 40px;
  height: 40px;
  background: #f5f5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.review-author-name {
  font-weight: bold;
  color: #333;
}

.srec-review-rating-display {
  font-size: 16px;
  color: #f8d347;
  letter-spacing: 2px;
}

.review-card-body {
  flex-grow: 1; /* 内容が少なくてもフッターを下に配置するため */
}

.review-title {
  font-size: 1.1em;
  font-weight: bold;
  margin: 0 0 15px;
}

.review-text {
  font-size: 1em;
  line-height: 1.7;
  color: #555;
  margin: 0;
}

.review-card-footer {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
  font-size: 0.9em;
  color: #777;
}

.review-target i {
  margin-right: 5px;
}

/* Swiperのナビゲーションとページネーションの調整 */
.user-reviews-swiper .swiper-button-next,
.user-reviews-swiper .swiper-button-prev {
  color: #007bff; /* 矢印の色 */
}
.user-reviews-swiper .swiper-pagination-bullet-active {
  background: #007bff; /* アクティブなページネーションの色 */
}

@media (max-width: 800px) {
  .fp-user-reviews {
    padding: 60px 0;
  }
  .review-card {
    padding: 20px;
  }
}

/* ==========================================================================
   トップページ：グリッド高さ調整 ＆ 新しい「家づくりのヒント」
   ========================================================================== */

/* =================================================
 トップページ コンテンツグリッドの高さ調整（最終版）
 ================================================= */
.fp-content-grid-layout {
  /* 
     * アイテムを上に揃え、高さを可変にする
     * (この指定は引き続き必要です)
     */
  align-items: start;

  /* 
     * 各行の高さをコンテンツに合わせるように設定を上書き
     * これにより、minmax(380px)の制約がなくなります
     */
  grid-auto-rows: auto;
}

/* =======================================
 2. 家づくりのヒント (ワイド4列版)
 ======================================= */

/* --- 新しいセクション全体のスタイル --- */
.fp-section.fp-guide-wide {
  padding: 60px 0;
  background-color: #fff; /* 背景色はサイトのデザインに合わせて調整してください */
}

/* --- 幅いっぱいに広がるためのコンテナ --- */
.fp-container-wide {
  width: 100%;
  max-width: 100%; /* 親コンテナの幅制限を解除 */
  padding: 0 20px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* --- 4列グリッドのレイアウト定義 --- */
.fp-guide-grid-4-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* PCでは4列 */
  gap: 20px; /* カード間の隙間 */
}

/* --- 各カードのスタイル --- */
.guide-card-wide {
  display: flex;
  align-items: center; /* アイコンとテキストを上下中央揃え */
  padding: 25px;
  background-color: #f9f9f9;
  border-radius: 8px;
  text-decoration: none;
  color: #333;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

/* カードのホバーエフェクト */
.guide-card-wide:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: #008000;
  background-color: #fff;
}

/* カード内のアイコン */
.guide-card-wide .guide-icon {
  font-size: 2.8em;
  color: #008000;
  margin-right: 20px; /* アイコンとテキストの間の余白 */
}

/* カード内のテキストコンテナ */
.guide-card-wide .guide-text-content {
  text-align: left;
}

/* カード内のタイトル */
.guide-card-wide h4 {
  margin: 0 0 5px 0;
  font-size: 1.2em;
  line-height: 1.3;
}

/* カード内の説明文 */
.guide-card-wide p {
  margin: 0;
  font-size: 0.9em;
  color: #777;
}

/* --- レスポンシブ対応 --- */

/* タブレット表示 (1024px以下) */
@media (max-width: 1024px) {
  .fp-guide-grid-4-columns {
    /* 2x2 のグリッドに変更 */
    grid-template-columns: repeat(2, 1fr);
  }
}

/* スマホ表示 (600px以下) */
@media (max-width: 600px) {
  .fp-guide-wide {
    padding: 40px 0;
  }
  .fp-container-wide {
    padding: 0 15px;
  }
  .fp-guide-grid-4-columns {
    /* 1列表示に変更 */
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .guide-card-wide h4 {
    font-size: 1.1em;
  }
}

/* =======================================
// ルームツアー一覧ページ
// ======================================= */

/* --- ページヘッダー --- */
.entry-header-page {
  padding: 60px 0;
  text-align: center;
  background-color: #f9f9f9;
  border-bottom: 1px solid #eee;
}
.page-description {
  font-size: 1.1em;
  color: #666;
  max-width: 600px;
  margin: 10px auto 0;
}

/* --- グリッドレイアウト --- */
.room-tour-grid {
  display: grid;
  /* 画面幅に応じてカラム数を自動調整 */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

/* --- カードデザイン --- */
.room-tour-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
  transition: transform 0.3s, box-shadow 0.3s;
}
.room-tour-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.room-tour-card .card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* カードサムネイル */
.room-tour-card .card-thumbnail {
  position: relative;
  aspect-ratio: 16 / 9; /* 16:9の比率を維持 */
}
.room-tour-card .card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.play-icon-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 50px;
  opacity: 0.8;
  transition: opacity 0.3s;
}
.room-tour-card .card-link:hover .play-icon-overlay {
  opacity: 1;
}

/* カードコンテンツ */
.room-tour-card .card-content {
  padding: 20px;
}
.room-tour-card .card-title {
  font-size: 1.2em;
  font-weight: bold;
  margin: 0 0 10px;
  line-height: 1.4;
}
.room-tour-card .card-company {
  font-size: 0.9em;
  color: #777;
  margin: 0;
}

/* --- ページネーション --- */
.pagination {
  margin-top: 60px;
  text-align: center;
}
.pagination .page-numbers {
  display: inline-block;
  padding: 8px 15px;
  margin: 0 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
  background-color: #008000;
  color: #fff;
  border-color: #008000;
}

/* =======================================
 トップページ：コンテンツグリッドのタイトルデザイン改善
 =================================
 */

/* --- タイトル (h3) の基本スタイル --- */
.fp-content-grid .grid-item-header h3 {
  /* --- テキストスタイル --- */
  color: #fff; /* 文字色を白に */
  font-size: 1.3em; /* フォントサイズを少し大きく */
  font-weight: bold;

  /* --- 背景とレイアウト --- */
  background-color: #008000; /* サイトのキーカラー（緑） */
  padding: 12px 20px 12px 45px; /* 上下左右の余白（左側はアイコンのために多めに確保） */
  margin: 0; /* h3が持つデフォルトのマージンをリセット */
  border-radius: 6px 6px 0 0; /* ボックスの上側だけ角丸に */

  /* --- アイコン配置のための設定 --- */
  position: relative; /* 疑似要素 (::before) の基準位置 */
}

/* --- タイトルの前にアイコンを追加 (Font Awesomeを使用) --- */
.fp-content-grid .grid-item-header h3::before {
  font-family: "Font Awesome 5 Free"; /* Font Awesome 5 のフォントファミリーを指定 */
  font-weight: 900; /* Solid スタイルのアイコンを使う場合 */
  position: absolute;
  left: 18px; /* 左からの位置 */
  top: 50%; /* 上下中央 */
  transform: translateY(-50%);
  font-size: 1.1em; /* アイコンのサイズ */

  /* ★★★ 各タイトルに応じたアイコンを content プロパティで指定 ★★★ */
}

/* --- 各コンテンツに個別のアイコンを設定 --- */

/* 1. 建売・中古物件 (家のアイコン) */
.grid-item-wrapper.item-property .grid-item-header h3::before {
  content: "\f015"; /* fas fa-home */
}

/* 2. 建築実例 (ギャラリーのアイコン) */
.grid-item-wrapper.item-works .grid-item-header h3::before {
  content: "\f302"; /* fas fa-palette */
}

/* 3. モデルハウス (ユーザーがいる家のアイコン) */
.grid-item-wrapper.item-modelhouse .grid-item-header h3::before {
  content: "\e066"; /* fas fa-house-user */
}

/* 4. 土地情報 (地図マーカーのアイコン) */
.grid-item-wrapper.item-land .grid-item-header h3::before {
  content: "\f3c5"; /* fas fa-map-marker-alt */
}

/* 5. ハウスメーカー・工務店 (ビルのアイコン) */
.grid-item-wrapper.item-company .grid-item-header h3::before {
  content: "\f1ad"; /* fas fa-building */
}

/* =============================================================
 トップページ：コンテンツグリッドのタイトルフォントサイズ統一
 ============================================================= */

/*
 * 既存の h3 スタイルを上書きし、コンテンツグリッド内の
 * 全てのタイトルフォントサイズを 1.3rem に統一する。
 */
.fp-content-grid .grid-item-header h3 {
  font-size: 1.3rem !important;
}

/* ==========================================================================
   【完全修正版】トップページ マガジン風デザイン (v2.0)
   ========================================================================== */

/* -----------------------------------------
   1. 全体設定
----------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Shippori+Mincho:wght@400;500;700&family=Zen+Kaku+Gothic+Antique:wght@400;500;700&display=swap");

body,
.front-page-magazine {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  background-color: #fff;
}

/* 欧文フォント */
.mag-title,
.hero-title,
.col-title,
.price,
.date-badge,
.type-label {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* 和文見出し (セクションタイトルのみ明朝、他はゴシック) */
.mag-title .ja {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
}

/* -----------------------------------------
   2. ヒーロースライダー
----------------------------------------- */
.magazine-hero-slider {
  width: 100%;
  /*
  margin-bottom: 80px;
  */
  margin-bottom: 30px;
  background-color: transparent; /* 背景色なし */
}

.hero-swiper {
  width: 100%;
  height: 100%;
  padding-bottom: 40px; /* ページネーション用の余白 */
}

.hero-swiper .swiper-slide {
  /* スライドの中身を中央寄せ */
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-link {
  display: block;
  text-decoration: none;
  color: #333;
}

.hero-bg {
  width: 100%;
  padding-top: 40%; /* アスペクト比維持 */
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: transparent; /* 背景色なし */
}
/* キャプションエリア全体を中央揃え */
.hero-caption-below {
  text-align: center; /* テキストを中央に */
  padding: 15px 20px;
  background-color: #fff; /* 必要なら背景色 */
}

/* タイトルの装飾と配置 */
.hero-text {
  display: block;
  font-size: 1.5rem; /* 少し大きく */
  font-weight: bold;
  margin: 10px 0;
  line-height: 1.4;
  color: #333;
}

/* カテゴリラベルの配置 */
.hero-cat-label {
  display: inline-block; /* ブロックだと左に寄るのでインラインブロックに */
  background-color: #2c7a7b; /* テーマカラー */
  color: #fff;
  font-size: 1.25rem;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 5px;
  font-family: "Zen Kaku Gothic Antique", "Montserrat", sans-serif;
  letter-spacing: 0.05em;
}

/* もしリンクボタンがある場合 */
.hero-btn {
  display: inline-block;
  margin-top: 10px;
}

/* テキスト */
.hero-text {
  font-family: "Shippori Mincho", serif;
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0;
  flex-grow: 1; /* 余ったスペースを埋める */
  text-align: left;
  text-align: center;
}

/* 矢印 */
.hero-arrow {
  font-size: 1rem;
  color: #ccc;
  transition: transform 0.3s, color 0.3s;
}

/* ホバー時 */
.hero-link:hover .hero-arrow {
  color: #000;
  transform: translateX(5px);
}
/* 文字の位置調整 */
.hero-overlay-content {
  position: absolute;
  bottom: 30px; /* 下からの距離 */
  left: 30px; /* 左からの距離 */
  z-index: 2;
  color: #fff;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); /* 読みやすく */
  pointer-events: none; /* クリックを邪魔しない */
}
.hero-caption {
  position: absolute;
  bottom: 40px;
  left: 40px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.hero-caption h2 {
  font-size: 2.5rem;
  margin-bottom: 15px;
}
/* ヒーロー画像サイズ調整 (PCのみ制限) */
@media (min-width: 769px) {
  .hero-link {
    /* 最大幅を制限 (例: 1000px) */
    max-width: 1000px !important;

    /* 中央揃え */
    margin: 0 auto !important;
  }

  .hero-bg {
    /* アスペクト比維持のまま、親要素(.hero-link)に合わせて縮小される */
    /* padding-top は比率維持のためそのまま */

    /* 角を少し丸めてオシャレに */
    border-radius: 8px;
    /* 影をつけて浮き上がらせる */
  }

  /* スライダー全体の高さを auto にして、中身に合わせる */
  .magazine-hero-slider {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 40px; /* ページネーション用余白 */
    margin-top: 3rem;
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  /* 1. キャプションエリアの余白を調整 */
  .hero-caption-below {
    padding: 15px 10px; /* 左右の余白を少し減らす */
    text-align: center; /* 中央揃えは維持 */
  }

  /* 2. タイトル文字サイズを縮小 */
  .hero-text {
    font-size: 1.1rem; /* PCの1.5remから縮小 */
    line-height: 1.5;
    margin: 8px 0;
  }

  /* 3. カテゴリラベルを少し小さく */
  .hero-cat-label {
    font-size: 0.7rem;
    padding: 3px 10px;
    margin-bottom: 3px;
  }

  /* 4. スライダー自体の高さ調整（もし高すぎるなら） */
  .magazine-hero-slider {
    height: auto; /* 高さを自動にしてコンテンツに合わせる */
    min-height: 0;
  }

  /* 画像部分の比率調整 */
  .hero-bg {
    padding-top: 56.25%; /* 16:9 の比率にする（より横長に） */
    background-size: cover; /* スマホでは画面幅いっぱいに埋める */
    /* background-size: contain; // 全体を見せたい場合はこちら */
  }
}
/* -----------------------------------------
   3. レイアウト修正 & 背景削除
----------------------------------------- */
/* セクション共通 */
.mag-section {
  padding: 80px 0;
  background-color: #fff !important; /* ★背景色を強制的に白に */
  border-top: 1px solid #eee; /* 区切り線 */
}
/* 最初のセクションは線なし */
.mag-events {
  border-top: none;
}

/* コンテナ幅統一 */
.mag-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* セクション見出し */
.section-header-center {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
}
.section-header-center::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: #2c7a7b;
  margin: 20px auto 0;
}
.mag-title {
  font-size: 2.4rem;
  margin-bottom: 15px;
  line-height: 1.2;
  color: #000;
}
.mag-title .ja {
  display: block;
  font-size: 1.4rem;
  margin-top: 10px;
  color: #333;
}

/* -----------------------------------------
   4. PICKUP EVENTS (イベント)
----------------------------------------- */
.mag-grid-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列 */
  gap: 30px; /* 隙間 */
  margin-bottom: 40px;
}
.mag-card {
  border: 1px solid #eee;
  transition: transform 0.3s;
}
.mag-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.mag-thumb {
  position: relative;
  height: 180px;
  overflow: hidden;
}
.mag-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.date-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  background: #fff;
  padding: 4px 10px;
  font-size: 0.9rem;
  font-weight: bold;
}
.category-label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 11;
  background: #333;
  color: #fff;
  padding: 4px 12px;
  font-size: 0.75rem;
}

.mag-content {
  padding: 20px;
}
.mag-content h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 10px;
  line-height: 1.5;
}
.mag-content .meta {
  font-size: 0.85rem;
  color: #888;
}

/* -----------------------------------------
   5. MODEL HOUSE & WORKS (2カラムギャラリー)
----------------------------------------- */
.mag-gallery-split {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 左右均等 */
  gap: 60px; /* 間隔 */
}

/* カラム見出し (★ゴシック体・サイズ調整) */
.col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #333;
  padding-bottom: 10px;
  margin-bottom: 25px;
}
.col-head h3 {
  font-family: "Montserrat", sans-serif; /* 英語 */
  font-size: 1.6rem;
  margin: 0;
  font-weight: 700;
  color: #000;
}
.link-arrow {
  font-size: 1rem;
  color: #333;
  font-weight: 600;
  text-decoration: none;
}

/* 内部グリッド (2列) */
.gallery-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.gallery-card {
  text-decoration: none;
  color: #333;
  display: block;
}
.card-thumb {
  position: relative;
  height: 180px;
  overflow: hidden;
  margin-bottom: 10px;
}
.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ラベル (隠れないように) */
.type-label {
  display: block;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-family: "Montserrat", sans-serif;
}

.card-meta h4 {
  font-size: 1.2rem !important;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
}

/* -----------------------------------------
   6. CAMPAIGN & MOVIE (崩れ修正)
----------------------------------------- */
.mag-grid-2col-feature {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 左右均等 */
  gap: 60px; /* 間隔 */
  align-items: start;
}
/* カラム見出し (.col-title) も同様に */
.col-title {
  display: flex;
  align-items: baseline;
  gap: 15px;
  font-size: 1.8rem !important;
}
.col-title .ja {
  font-size: 1.2rem !important; /* ★大きく */
  margin: 0 !important;
}

/* キャンペーンリスト */
.campaign-list-vertical {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.camp-item-row {
  display: flex;
  gap: 20px;
  text-decoration: none;
  color: #333;
  align-items: center;
}
.camp-thumb {
  flex: 0 0 120px;
  height: 80px;
}
.camp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}
.camp-info h4 {
  font-size: 1.1rem;
  margin: 0 0 5px;
  line-height: 1.4;
}
.camp-info .prize {
  font-size: 0.9rem;
  color: #c92a2a;
  font-weight: bold;
}

/* -----------------------------------------
   7. SEARCH CONTENTS (3カラム・ゴシック体)
----------------------------------------- */
.search-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.search-col {
  background: #fff;
  padding: 0;
}
.search-col .col-head {
  border-bottom: 2px solid #333;
  margin-bottom: 20px;
}

/* ★見出しをゴシック体に修正 */
.search-col .col-head h3 {
  font-family: "Zen Kaku Gothic Antique", sans-serif !important;
  font-size: 1.3rem;
  font-weight: 700;
}

.mini-list li {
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.mini-list a {
  display: flex;
  gap: 15px;
  text-decoration: none;
  color: #333;
  align-items: center;
}
.mini-list img {
  width: 80px;
  height: 60px;
  object-fit: cover;
}
.mini-list .txt h4 {
  font-size: 1rem;
  margin: 0 0 5px;
}
.mini-list .price {
  font-size: 1.1rem;
  font-weight: 700;
  color: #c92a2a;
}

/* -----------------------------------------
   8. GUIDE (予算シミュレーション等・崩れ修正)
----------------------------------------- */
.mag-guide {
  padding: 60px 0;
}

.guide-grid-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列 */
  gap: 20px; /* 隙間 */
}

.guide-box {
  display: flex; /* Flexboxに変更して整列 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  background: #fff;
  border: 1px solid #ddd;
  padding: 30px 15px; /* パディング調整 */
  text-decoration: none;
  color: #333;
  border-radius: 4px;
  transition: all 0.3s;
  height: 100%; /* 高さを揃える */
}
.guide-box:hover {
  border-color: #2c7a7b;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.guide-box i {
  font-size: 2.5rem;
  color: #2c7a7b;
  margin-bottom: 15px;
}
.guide-box h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 5px;
}
.guide-box p {
  font-size: 0.85rem;
  color: #888;
  margin: 0;
}

/* -----------------------------------------
   9. INFO & PCでの検索ナビ非表示
----------------------------------------- */
/* PCでの検索ナビ非表示 */
@media (min-width: 769px) {
  .fp-search-navi,
  .sp-only {
    display: none !important;
  }
}

/* INFOエリア */
.mag-info-area {
  padding-bottom: 0;
  margin-bottom: 0;
}
.info-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.info-col h3 {
  color: #000;
  border-bottom: 2px solid #000;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 10px;
}

/* -----------------------------------------
   スマホ対応 (レスポンシブ)
----------------------------------------- */
@media (max-width: 900px) {
  .mag-grid-4col,
  .mag-gallery-split,
  .mag-grid-2col-feature,
  .search-grid-3col,
  .info-grid-3col {
    grid-template-columns: 1fr; /* 全て1カラムに */
    gap: 40px;
  }

  /* ガイドバナーは2列に */
  .guide-grid-4col {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .guide-grid-4col {
    grid-template-columns: 1fr; /* 1列に */
  }
  .mag-grid-4col {
    grid-template-columns: 1fr 1fr; /* イベントは2列 */
  }
}

/* =========================================
   【修正】ライン・ラベル・ボタン・カード
   ========================================= */

/* 1. ライン位置修正 (タイトル直下へ) */
.section-header-center::after {
  content: none; /* 古いラインを消す */
}
.mag-title {
  position: relative;
  display: inline-block;
  padding-bottom: 15px;
  margin-bottom: 20px;
}
.mag-title::after {
  content: "";
  display: block;
  width: 60px; /* ラインの長さ */
  height: 2px; /* ラインを細く */
  background-color: #2c7a7b;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.mag-desc {
  margin-top: 0; /* タイトルとの距離を詰める */
}

/* 2. バッジ類 (サイズアップ) */
.date-badge {
  font-size: 1rem !important; /* 16px相当 */
  padding: 6px 15px !important;
  font-weight: 800 !important;
}

.category-label,
.type-label {
  font-size: 0.9rem !important; /* 14px相当 */
  padding: 5px 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}

/* 3. ボタンデザイン修正 */
.mag-btn-outline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 280px;
  height: 56px;
  border: 1px solid #333 !important;
  background: #fff !important;
  color: #333 !important;
  text-decoration: none !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  transition: all 0.3s;
}
.mag-btn-outline:hover {
  background: #333 !important;
  color: #fff !important;
}

/* 4. 動画・声カードのデザイン修正 */
.media-card {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px !important;
  background: #f9f9f9 !important;
  border: 1px solid #eee !important;
  border-radius: 8px;
  text-decoration: none;
  height: 100%;
}
.media-card .card-inner {
  text-align: center;
}
.media-card .icon {
  font-size: 3rem;
  color: #2c7a7b;
  margin-bottom: 15px;
  display: block;
}
.media-card h4 {
  font-size: 1.2rem !important;
  margin: 0 0 10px 0;
  font-weight: 700;
}
.media-card p {
  font-size: 0.9rem !important;
  color: #666;
  margin: 0;
}

/* 5. ログインエリア (INFO) のデザイン修正 */
.login-box-simple {
  background-color: #f4f4f4 !important;
  padding: 30px 20px !important;
  border-radius: 8px;
  text-align: center;
  border: 1px solid #ddd;
}
.login-box-simple h4 {
  font-size: 1.65rem !important;
  margin: 0 0 15px 0;
  font-weight: 700;
}
.login-box-simple .btns {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.login-box-simple .btn-reg,
.login-box-simple .btn-log {
  flex: 1;
  padding: 12px 0;
  font-size: 0.9rem;
  font-weight: bold;
  text-decoration: none;
  border-radius: 4px;
  display: block;
  text-align: center;
}
.btn-reg {
  background-color: #e67e22 !important;
  color: #fff !important;
  border: 1px solid #e67e22;
}
.btn-log {
  background-color: #fff !important;
  color: #333 !important;
  border: 1px solid #ccc;
}

/* CONTENTSエリアの修正 */
.media-content-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  border-bottom: 1px dotted #ccc;
  padding-bottom: 5px;
}
.group-head h4 {
  font-size: 1.1rem;
  margin: 0;
  font-weight: 700;
}
.link-mini {
  font-size: 0.85rem;
  font-size: 1.35rem;
  color: #666;
  text-decoration: none;
}

.closing-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.closing-item {
  display: flex;
  gap: 15px;
  text-decoration: none;
  color: #333;
  align-items: center;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 4px;
  transition: background 0.2s;
}
.closing-item:hover {
  background: #eee;
}
.closing-item-thumbnail {
  flex: 0 0 60px;
  height: 60px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.closing-item-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.play-icon-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1.2rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.closing-item-content h5 {
  margin: 0;
  font-size: 0.95rem;
  font-size: 1.2rem;
  line-height: 1.4;
}
.voice-excerpt {
  font-size: 0.85rem;
  color: #555;
  margin: 0;
  font-style: italic;
}
.mb-30 {
  margin-bottom: 30px;
}

/* ヒーロースライダーの画像表示修正 */

/* 親リンクの高さ確保 */
.hero-link {
  display: block;
  width: 100%;
  height: 100%; /* 親(swiper-slide)の高さいっぱいに */
  position: relative;
  overflow: hidden;
}

/* 通常のimgタグ（投稿画像がある場合） */
.hero-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* オーバーレイコンテンツの位置調整（念のため） */
.hero-overlay-content {
  position: absolute;
  bottom: 40px;
  left: 40px;
  z-index: 2;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* =========================================
   【デザイン修正】セクション見出し (黒ボックス版)
   ========================================= */

/* 1. 日本語タイトル (.ja) のスタイル変更 */
.mag-title .ja,
.col-title .ja {
  display: inline-block !important; /* ブロックではなくインラインブロックにして幅を文字に合わせる */
  background-color: #000 !important; /* 黒背景 */
  color: #fff !important; /* 白文字 */
  padding: 5px 15px !important; /* 余白 */
  font-size: 1rem !important; /* 少し小さく引き締める */
  font-weight: 500 !important;
  margin-top: 10px !important;
  margin-left: 10px !important; /* 英語タイトルの横に並べる場合 */
  vertical-align: middle !important;
  letter-spacing: 0.05em !important;
  border-radius: 2px; /* ほんの少し角丸 */
}

/* 2. セクションヘッダーのライン削除 */
.section-header-center::after {
  content: none !important; /* ラインを消す */
}

/* 3. マージン調整 */
.section-header-center {
  margin-bottom: 50px !important;
  /* ラインを消したのでパディングも減らす */
  padding-bottom: 0 !important;
}

/* 1. セクションタイトル (サイズと高さのバランス) */
.mag-title {
  display: flex;
  align-items: baseline; /* 底辺揃え */
  justify-content: center;
  gap: 20px;
  font-size: 2.8rem !important; /* 英語を少し大きく */
  line-height: 1.2;
  margin-bottom: 20px;
}

.mag-title .ja {
  font-size: 1.6rem !important; /* ★日本語を大きく (英語の約60%) */
  font-weight: 700 !important;
  margin: 0 !important;
  transform: translateY(-2px); /* 微調整: 視覚的な中心を合わせる */
}

/* スマホ対応 (縦積みに戻す場合) */
@media (max-width: 600px) {
  .mag-title {
    flex-direction: column; /* 縦並び */
    align-items: center;
    gap: 5px;
  }
  .mag-title .ja {
    font-size: 1.2rem;
  }
}

/* =========================================
   【修正】リンク矢印の復活 & デザイン調整
   ========================================= */

.link-arrow {
  display: inline-flex;
  align-items: center;
  font-size: 1rem; /* 少し控えめなサイズ */
  color: #333;
  text-decoration: none;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.05em;
  transition: color 0.3s;
}

/* 矢印アイコン (FontAwesome) */
.link-arrow::after {
  content: "\f061"; /* arrow-right */
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.9rem; /* 文字より少し小さくして上品に */
  margin-left: 8px;
  color: #2c7a7b; /* テーマカラー等のアクセント色に */
  transition: transform 0.3s;
}

/* ホバー時の動き */
.link-arrow:hover {
  color: #000;
  opacity: 0.8;
}
.link-arrow:hover::after {
  transform: translateX(5px); /* 右にスッと動く */
}
/* =========================================
   【情報量復活】デザイン調整
   ========================================= */

/* -----------------------------------------
   ログインボックス (リッチなデザイン)
----------------------------------------- */
.login-box-simple {
  background-color: #f9f9f9 !important;
  padding: 30px 25px !important;
  text-align: center;
  border: 1px solid #eee;
  border-top: 3px solid #2c7a7b; /* アクセントカラー */
}

.login-icon {
  font-size: 2rem;
  color: #2c7a7b;
  margin-bottom: 15px;
}

.login-box-simple h4 {
  font-size: 1.3rem !important;
  font-weight: 700;
  margin-bottom: 10px;
  color: #333 !important;
  font-family: "Shippori Mincho", serif !important; /* 上品に */
}

.login-desc {
  font-size: 1.25rem !important;
  color: #666 !important;
  line-height: 1.6;
  margin-bottom: 25px !important;
  text-align: justify; /* 文章を整える */
}

.btns .btn-reg,
.btns .btn-log {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 5px; /* 縦幅確保 */
  font-size: 1.35rem;
}
.btn-reg i,
.btn-log i {
  font-size: 1rem;
}

/* -----------------------------------------
   ニュースリスト (整理)
----------------------------------------- */
.news-list-simple li {
  padding: 12px 0 !important;
  border-bottom: 1px dotted #ccc !important;
}
.news-list-simple a {
  display: block !important; /* ブロックにして縦積みに対応 */
}
.news-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 5px;
  font-size: 0.85rem;
  color: #888;
  font-family: "Montserrat", sans-serif;
}
.cat-label {
  background: #eee;
  padding: 1px 8px;
  border-radius: 2px;
  font-size: 0.75rem;
}
.news-title {
  display: block;
  line-height: 1.5;
  font-weight: 500;
}

/* -----------------------------------------
   お客様の声・動画 (情報の見せ方)
----------------------------------------- */
/* 以前のCSSで .media-card のスタイルは修正済みですが、
   アイコンとテキストのバランスを微調整 */
.media-card h4 {
  font-family: "Shippori Mincho", serif !important;
  font-weight: 600;
}
/* 3. ボタン (PCでのサイズアップ) */
@media (min-width: 769px) {
  .mag-btn-outline {
    font-size: 1.2rem !important; /* 19px相当 */
    padding: 18px 60px !important; /* 余白たっぷりに */
    border-width: 2px !important; /* 枠線も少し太く */
    letter-spacing: 0.1em !important;
  }

  /* 矢印アイコンも大きく */
  .mag-btn-outline::after {
    font-size: 1.1rem;
    margin-left: 15px;
  }
}

/* =========================================
    (追加分)
   ========================================= */

/* 4. SEARCH CONTENTS (背景白・シンプル化) */
.mag-search-contents {
  background-color: #fff !important; /* 背景白 */
  border-top: 1px solid #eee;
}
.search-col {
  background: #fff !important; /* 背景白 */
  border: none !important;
  padding: 0 !important;
}
.search-col .col-head {
  border-bottom: 2px solid #333;
  padding-bottom: 10px;
}
.mini-list li {
  border-bottom: 1px solid #eee !important;
}

/* 5. INFOエリア & フッター隙間削除 */
.mag-info-area {
  background-color: #fff !important; /* 背景白 */
  color: #333 !important;
  border-top: 1px solid #eee;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* フッターとの隙間を消す */
.site-footer {
  margin-top: 0 !important;
}
/* 全体のラッパーの余白も消す */
.front-page-magazine.wrap {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* 6. ボタン文字サイズ調整 (念押し) */
.mag-btn-outline {
  font-size: 1.2rem !important;
  padding: 15px 50px !important;
}

/* ボタンエリアの中央寄せ */
.btn-area-center {
  text-align: center; /* インライン要素(aタグ)を中央に */
  margin-top: 50px; /* 上のコンテンツとの余白 */
  display: flex; /* 念のためFlexboxも指定 */
  justify-content: center;
  gap: 20px; /* 複数ボタンがある場合の間隔 */
}

/* スマホ対応 */
@media (max-width: 600px) {
  .btn-area-center {
    flex-direction: column; /* 縦積みに */
    align-items: center;
  }
  .mag-btn-outline {
    width: 100%; /* 幅いっぱいに */
    box-sizing: border-box;
  }
}

/* =========================================
   PICKUP EVENTS カード詳細デザイン
   ========================================= */

* コンテンツ全体のパディングを少し減らす */ .mag-content {
  padding: 11px !important;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 1. カテゴリラベル (ボックス・白文字) */
.event-cat-label {
  display: inline-block;
  background-color: #2c7a7b; /* テーマカラー */
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 2px;
  margin-bottom: 10px;
  align-self: flex-start; /* 左寄せ */
}

/* 2. タイトル (地名含む) */
.event-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 15px 0;
  color: #222; /* 濃い黒 */
}

/* 地名プレフィックス */
.area-prefix {
  color: #555;
  font-size: 1.2rem;
  font-weight: normal;
  margin-right: 5px;
}

/* 3. メタ情報エリア */
.event-card-meta {
  margin-top: auto; /* 下に寄せる */
  margin-top: 0;
  font-size: 0.85rem;
  color: #666; /* グレー */
  border-top: 1px dotted #eee;
  padding-top: 10px;
}

.event-card-meta p {
  margin: 3px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* アイコンの色を薄くして邪魔しないように */
.event-card-meta i {
  color: #999;
  width: 16px;
  text-align: center;
}

/* 会社名は少し濃く */
.meta-company {
  color: #444;
  font-weight: 500;
}
/* =========================================
   イベントカテゴリラベル (青背景・白文字)
   ========================================= */

.event-cat-label {
  display: inline-block !important;
  /* ★背景色を青系に */
  background-color: #0073aa !important; /* WordPress標準ブルー、または #2c7a7b (テーマカラー) */
  /* ★文字色を白に */
  color: #fff !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 2px !important;
  margin-bottom: 8px !important;
  line-height: 1.2 !important;
  font-family: "Montserrat", sans-serif !important;
}
/* =========================================
   【PICKUP EVENTS 専用調整】
   ========================================= */

/* 1. コンテナ幅を狭く */
.mag-events .mag-container {
  max-width: 1000px !important; /* 他の1200pxより狭く */
}

/* 2. エリア名 (【富山市】など) に色付け */
.area-prefix {
  display: block !important; /* ブロック要素にする */
  width: 100%;
  margin-bottom: 5px !important; /* タイトルとの隙間 */

  /* (任意) デザイン調整 */
  color: #e67e22 !important;
  font-weight: bold !important;
}

/* 3. タイトル文字サイズ縮小 */
.event-card-title {
  font-size: 1.35rem !important; /* 1.15rem から縮小 */
  margin: 5px 0 8px 0 !important; /* 上下を詰める */
  line-height: 1.4 !important;
}

/* カテゴリラベルの余白も詰める */
.event-cat-list {
  margin-bottom: 5px !important;
  line-height: 1;
}
.event-cat-label {
  margin-bottom: 2px !important;
  margin-right: 5px !important;
}

/* メタ情報エリアの余白調整 */
.event-card-meta {
  margin-top: auto; /* 下に寄せるのは維持 */
  padding-top: 8px !important; /* 罫線との距離を詰める */
  border-top: 1px dotted #ddd; /* 罫線は薄く */
}

/* メタ情報の行間を詰める */
.event-card-meta p {
  margin: 2px 0 !important; /* 各行の間隔を最小限に */
  line-height: 1.3 !important;
}

/* 4. メタ情報 (日時・会社) を紫系に */
.meta-date,
.meta-company {
  color: #6f42c1 !important; /* 紫色 */
  font-weight: 500 !important;
  font-size: 1.15rem !important;
}

/* アイコンの色も合わせるなら */
.meta-date i,
.meta-company i {
  color: #6f42c1 !important;
  opacity: 0.8;
}

/* カード全体の背景微調整（メリハリのため） */
.mag-events .mag-card {
  border: 1px solid #e0e0e0 !important;
  background-color: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}
/* イベントカード ホバー時の背景色 */
.mag-card.event-card:hover {
  background-color: #fff9f0 !important; /* とても薄いオレンジ */
  border-color: #ffe0b2 !important; /* 枠線も少しオレンジに */
  transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
}

/* バッジのスタイル調整 */
.date-badge.status-open {
  background-color: #e67e22 !important; /* オレンジ */
  color: #fff !important;
}
.date-badge.status-closed {
  background-color: #999 !important; /* グレー */
  color: #fff !important;
}

/* --- ヒーロースライダーの矢印位置調整 --- */

/* 共通設定 (矢印の見た目) */
.swiper-button-next,
.swiper-button-prev {
  color: #333 !important; /* 矢印の色を黒に */
  background: rgba(255, 255, 255, 0.8); /* 背景を半透明の白に */
  width: 50px !important;
  height: 50px !important;
  border-radius: 50%; /* 丸くする */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}
.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 1.2rem !important; /* 矢印サイズ */
  font-weight: bold;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: #fff;
  transform: scale(1.1);
}

/* --- PC表示 (画像幅 1200px に合わせる) --- */
@media (min-width: 1201px) {
  .magazine-hero-slider {
    position: relative;
  }

  /* 画面中央から 1200px / 2 = 600px の位置を基準にする */
  .swiper-button-prev {
    left: 50% !important;
    margin-left: -640px !important; /* 600px + 余白40px */
  }
  .swiper-button-next {
    right: 50% !important;
    margin-right: -640px !important; /* 600px + 余白40px */
  }
}

/* --- タブレット・スマホ表示 (画面端に配置) --- */
@media (max-width: 1200px) {
  .swiper-button-prev {
    left: 10px !important;
    margin-left: 0 !important;
  }
  .swiper-button-next {
    right: 10px !important;
    margin-right: 0 !important;
  }
}

/* --- スマホ (さらに小さく調整) --- */
@media (max-width: 768px) {
  .swiper-button-next,
  .swiper-button-prev {
    width: 40px !important;
    height: 40px !important;
    top: 40%; /* 画像の中心あたりに来るように調整 */
  }
  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-size: 1rem !important;
  }
}

/* =========================================
   イベントカード：デザイン修正
   ========================================= */

/* 1. カード大枠の枠線を【強制的に】消す */
.mag-events .mag-card {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 2. 画像とテキスト部分（リンク）に枠線をつける */
.mag-events .mag-card > a {
  display: block;
  background: #fff;
  border: 1px solid #eee; /* ここで薄い枠線を表示 */
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow 0.3s;
  text-decoration: none;
  color: inherit;
}

.mag-events .mag-card > a:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  opacity: 1;
}

/* 3. 日付エリア（画像の上）のデザイン */
.event-date-top {
  display: flex;
  align-items: center;
  margin-bottom: 8px; /* 画像との隙間 */
  line-height: 1;
}

/* ★「DATE」ラベル（白ボックス・黒文字） */
.event-date-top::before {
  content: "DATE";
  display: inline-block;

  background-color: #fff; /* 白背景 */
  color: #333; /* 黒文字 */
  border: 1px solid #333; /* 黒い枠線で囲む */

  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 6px; /* 大きさ調整 */
  margin-right: 8px; /* 日付との距離 */
  border-radius: 2px;

  /* 高さ微調整 */
  position: relative;
  top: -1px;
}

/* ★ 日付の数字部分（黒ボックス・白抜き文字） */
.event-date-top .date-val {
  display: inline-block;

  background-color: #333; /* 黒背景 */
  color: #fff; /* 白文字 */

  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 3px 8px; /* 黒ボックスの大きさ */
  border-radius: 2px; /* 角を少し丸く */
  line-height: 1;
}

/* 期間の区切り線 (-) */
.event-date-top .date-sep {
  margin: 0 4px;
  color: #888;
  font-size: 12px;
}

/* =========================================
   スマホ用調整
   ========================================= */
@media screen and (max-width: 768px) {
  .event-date-top .date-val {
    font-size: 12px;
    padding: 3px 6px;
  }
}