@charset "UTF-8";
/*=======================================
	breakpoint
=======================================*/
/*=======================================
	hover
=======================================*/
/*=======================================
	中央配置
=======================================*/
/*=======================================
	可変レスポンシブ
=======================================*/
/* PC */
/* TB */
/* SP */
/*=======================================
	ブラウザ別
=======================================*/
/* Safari */
/* Firefox */
/*-------------------------
- voice_page（共通）
- voice_mv
- voice_intro
- voice_section（アンケート共通）
- voice_section__access（バス・ポートタワー）
- voice_section__facilities（周辺施設・コメント）
- voice_section__heading--02（アンケート02の上部見出し）
- voice02_view / voice02_ldk（夜景・南側LDK）
- voice02_features（住まい・建物の特長）
- voice02_topics（Topics）
- voice02_handwrite（手書き文字画像の共通指定）
- voice_section__heading--03（アンケート03の上部見出し）
- voice03_title（アンケート03の見出し画像）
- voice03_change（入居後の変化）
- voice03_ranking_block / voice03_ranking（ランキング）
- voice03_favorite（お気に入りのポイント）
- voice03_handwrite（手書き文字画像の共通指定）
-------------------------*/
/*=======================================
　voice_page（共通）
=======================================*/
.voice_page {
  /* VOICEページ共通カラー（アクセント色はセクション単位で指定） */
  --voice-line: #231815;
  font-weight: 500;
  /* PCヘッダー（height:84px / position:fixed）分の余白 */
  padding-top: 84px;
}
@media screen and (max-width: 768px) {
  .voice_page {
    /* SPヘッダーはposition:stickyでレイアウト内に入るため余白不要 */
    padding-top: 0;
  }
}

/* VOICEページのコンテンツ幅 */
.voice_page .voice_inner {
  width: min(100%, 1280px);
  margin-inline: auto;
}

.voice_page .voice_content_inner {
  width: calc(100% - 32px);
  max-width: 1280px;
  margin-inline: auto;
}

/*=======================================
　voice_mv
=======================================*/
.voice_mv img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.voice_mv__caption {
  margin-top: 6px;
  padding-left: 9px;
  font-size: 11px;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .voice_mv__caption {
    margin-top: 4px;
    padding-left: 12px;
    font-size: 10px;
  }
}

/*=======================================
　voice_intro
=======================================*/
.voice_intro {
  padding: 44px 0 61px;
  background: #fff;
  text-align: center;
}
.voice_intro__pre {
  display: block;
  width: min(100%, 544px);
  height: auto;
  margin-inline: auto;
}
.voice_intro__ttl {
  margin-top: 20px;
  font-size: clamp(22px, 4.7vw, 60px);
  line-height: 1.4;
  word-spacing: 0.3em;
}
.voice_intro__text {
  margin-top: 32px;
  font-size: clamp(13px, 1.96vw, 25px);
  line-height: 1.85;
}
@media screen and (max-width: 768px) {
  .voice_intro {
    padding: 26px 0 34px;
  }
  .voice_intro__pre {
    width: min(100%, 544px);
  }
  .voice_intro__ttl {
    margin-top: 10px;
    font-size: 22px;
    line-height: 1.5;
    word-spacing: 0.2em;
  }
  .voice_intro__text {
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.9;
  }
}

/*=======================================
　voice_section（アンケート共通）
=======================================*/
.voice_section {
  width: min(100%, 1280px);
  margin-inline: auto;
  padding: 26px;
  background: var(--voice-accent);
  /* テーマカラー：アンケート01＝イエロー */
  /* テーマカラー：アンケート02＝ブルー */
  /* テーマカラー：アンケート03＝オレンジ（--voice-markerはアンケート03のみ使用） */
  /* セクション上部の大きな写真 */
  /* 薄いクリーム色の見出しエリア */
  /* 白背景のコンテンツ領域 */
  /*---------------------------------------
  　バス・ポートタワー（PC：左右2カラム）
  ---------------------------------------*/
  /*---------------------------------------
  　周辺施設・コメント（PC：約2/3＋約1/3）
  ---------------------------------------*/
}
@media screen and (max-width: 768px) {
  .voice_section {
    padding: 12px;
  }
}
.voice_section--01 {
  --voice-accent: #ffda2a;
  --voice-pale: #fff8d4;
}
.voice_section--02 {
  --voice-accent: #53c2f0;
  --voice-pale: #def0fa;
}
.voice_section--01, .voice_section--02 {
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .voice_section--01, .voice_section--02 {
    margin-bottom: 20px;
  }
}
.voice_section--03 {
  --voice-accent: #eb951f;
  --voice-pale: #fdf3e7;
  --voice-marker: #fff000;
}
.voice_section__inner {
  background: #fff;
}
.voice_section__main-visual {
  background: var(--voice-pale);
}
.voice_section__main-visual img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.voice_section__main-visual figcaption {
  padding: 7px 0 0 10px;
  font-size: 11px;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .voice_section__main-visual figcaption {
    padding: 6px 0 0 12px;
    font-size: 10px;
  }
}
.voice_section__heading {
  display: flex;
  align-items: center;
  gap: min(70px, 6%);
  padding: 47px min(40px, 3.5%) 48px min(96px, 8.4%);
  background: var(--voice-pale);
}
@media screen and (max-width: 768px) {
  .voice_section__heading {
    display: block;
    padding: 20px 16px 26px;
    text-align: center;
  }
}
.voice_section__badge {
  flex: 0 0 auto;
  width: min(189.5px, 16vw);
}
.voice_section__badge img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .voice_section__badge {
    width: 118px;
    margin: 0 auto 20px;
  }
}
.voice_section__heading-body {
  min-width: 0;
}
.voice_section__label {
  display: inline-block;
  padding: 7px 26px;
  border-radius: 999px;
  background: #fff;
  font-size: clamp(13px, 1.88vw, 24px);
  line-height: 1;
  letter-spacing: 0.12em;
}
@media screen and (max-width: 768px) {
  .voice_section__label {
    padding: 6px 16px;
    margin-bottom: 15px;
    font-size: 13px;
    letter-spacing: 0.08em;
  }
}
.voice_section__copy {
  margin-top: 8px;
  font-size: clamp(19px, 3.75vw, 48px);
  line-height: 1.42;
  letter-spacing: 0.03em;
}
@media screen and (max-width: 768px) {
  .voice_section__copy {
    margin-top: 10px;
    font-size: 21px;
    line-height: 1.5;
  }
}
.voice_section__body {
  padding-inline: min(36px, 3%);
}
@media screen and (max-width: 768px) {
  .voice_section__body {
    padding: 0 16px 40px;
  }
}
.voice_section__access {
  display: grid;
  grid-template-columns: minmax(0, 546fr) minmax(0, 604fr);
  column-gap: 15px;
  padding-top: 38px;
}
@media screen and (max-width: 768px) {
  .voice_section__access {
    display: block;
    padding-top: 22px;
  }
}
.voice_section__facilities {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 753fr) minmax(0, 350fr);
  column-gap: 52px;
  padding-top: 66px;
  padding-bottom: 70px;
}
@media screen and (max-width: 768px) {
  .voice_section__facilities {
    display: block;
    width: 90%;
    margin-inline: auto;
    padding-top: 50px;
    padding-bottom: 20px;
  }
}

/*=======================================
　voice_section__access
=======================================*/
.voice_access {
  /* ワッペンの重なり（局所的な絶対配置） */
}
.voice_access__figure {
  width: min(100%, 508.5px);
}
.voice_access__figure figcaption {
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.2;
  text-align: right;
}
@media screen and (max-width: 768px) {
  .voice_access__figure {
    width: 100%;
    margin-inline: auto;
  }
  .voice_access__figure figcaption {
    font-size: 10px;
  }
}
.voice_access__figure-img {
  position: relative;
}
.voice_access__photo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.voice_access__badge {
  position: absolute;
  left: 100%;
  bottom: 20px;
  display: block;
  width: min(143.5px, 12vw);
  height: auto;
  transform: translateX(14%);
}
@media screen and (max-width: 768px) {
  .voice_access__badge {
    position: absolute;
    top: 8px;
    left: 10px;
    bottom: auto;
    width: 100px;
    margin: 0;
    transform: none;
  }
}
.voice_access__info {
  container-type: inline-size;
  width: min(100%, 508.5px);
  margin-top: 15px;
}
.voice_access__route {
  padding-bottom: 3px;
  border-bottom: 1px solid #a5a5a5;
  font-size: clamp(12px, 2.8cqw, 15px);
  line-height: 1.5;
}
.voice_access__stop--02 {
  margin-top: 8px;
}
.voice_access__stop--02 .voice_access__stop-name {
  font-size: 6.8cqw;
}
.voice_access__stop-detail {
  width: fit-content;
  max-width: 100%;
}
.voice_access__stop-line {
  display: flex;
  align-items: center;
  margin-top: 6px;
  white-space: nowrap;
}
.voice_access__company {
  flex: 0 0 auto;
  font-size: 3.5cqw;
  line-height: 1.1;
}
.voice_access__stop-name {
  font-size: 8.5cqw;
  line-height: 1.25;
}
.voice_access__walk {
  font-size: 9.2cqw;
  line-height: 1.15;
  text-align: right;
  white-space: nowrap;
}
.voice_access__min-num {
  font-size: 1.7em;
}
.voice_access__dist {
  margin-top: 3px;
  font-size: clamp(10px, 2.25cqw, 12px);
  line-height: 1.4;
  text-align: right;
}
@media screen and (max-width: 768px) {
  .voice_access__note {
    margin-top: 26px;
  }
}
.voice_access__note-ttl {
  display: block;
  width: 526px;
  max-width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .voice_access__note-ttl {
    width: 100%;
    margin-inline: auto;
  }
}
.voice_access__note-ttl-sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .voice_access__note-ttl-sp {
    display: block;
    margin-block: 30px;
  }
  .voice_access__note-ttl-sp .voice_access__note-ttl {
    width: 110%;
    max-width: calc(100vw - 24px);
    margin-left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (max-width: 768px) {
  .voice_access__note-ttl-pc {
    display: none;
  }
}
.voice_access__note-memo {
  display: block;
  width: 376.5px;
  max-width: 100%;
  height: auto;
  /* PCデザインどおり見出し画像に少し重ねる（％指定で可変対応） */
  margin: -9.7% 0 0 auto;
}
@media screen and (max-width: 1000px) {
  .voice_access__note-memo {
    width: min(300px, 100% - 114px);
  }
}
@media screen and (max-width: 768px) {
  .voice_access__note-memo {
    width: 300px;
    margin: 18px auto 0;
  }
}

/*=======================================
　voice_section__facilities
=======================================*/
.voice_facilities {
  /* ワッペンの重なり（局所的な絶対配置） */
}
.voice_facilities__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
  row-gap: 43px;
}
@media screen and (max-width: 768px) {
  .voice_facilities__list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }
}
.voice_facilities__item {
  min-width: 0;
}
.voice_facilities__copy {
  display: block;
  max-width: 100%;
  height: auto;
}
.voice_facilities__copy--01 {
  width: 296px;
}
.voice_facilities__copy--02 {
  width: 324.5px;
}
.voice_facilities__copy--03 {
  width: 289px;
}
.voice_facilities__copy--04 {
  width: 334px;
}
@media screen and (max-width: 768px) {
  .voice_facilities__copy--01, .voice_facilities__copy--02, .voice_facilities__copy--03, .voice_facilities__copy--04 {
    width: 100%;
  }
}
.voice_facilities__figure {
  position: relative;
  margin-top: 21px;
}
@media screen and (max-width: 768px) {
  .voice_facilities__figure {
    margin-top: 14px;
  }
}
.voice_facilities__photo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.voice_facilities__wappen {
  position: absolute;
  right: -6%;
  bottom: -18%;
  display: block;
  width: min(126.5px, 10.5vw);
  max-width: 36%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .voice_facilities__wappen {
    right: 4px;
    bottom: -8%;
    width: 101.2px;
    max-width: 32.2%;
    transform: translate(15px, 30px);
  }
}
.voice_facilities__data {
  margin-top: 6px;
  font-size: clamp(10px, 1.02vw, 13px);
  line-height: 1.15;
}
@media screen and (max-width: 768px) {
  .voice_facilities__data {
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.4;
  }
}
.voice_facilities__comments {
  padding-top: 44px;
}
@media screen and (max-width: 768px) {
  .voice_facilities__comments {
    padding-top: 60px;
  }
}
.voice_facilities__memo {
  position: absolute;
  right: calc(max(-36px, -3%) - 5px);
  bottom: -12px;
  z-index: 1;
  display: block;
  width: 34%;
  max-width: 407px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .voice_facilities__memo {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(100%, 297.5px);
    margin: 26px auto 0;
  }
}

/* ご入居者様コメント（区切り線付き） */
.voice_comment_list li {
  padding-block: 24px;
  border-bottom: 1px solid var(--voice-line);
}
.voice_comment_list li:first-child {
  padding-top: 0;
}
.voice_comment_list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.voice_comment_list img {
  display: block;
  max-width: 100%;
  height: auto;
}
.voice_comment_list li:nth-child(1) img {
  width: 296.5px;
}
.voice_comment_list li:nth-child(2) img {
  width: 198px;
}
.voice_comment_list li:nth-child(3) img {
  width: 270.5px;
}
@media screen and (max-width: 768px) {
  .voice_comment_list li {
    padding-block: 20px;
  }
  .voice_comment_list li:nth-child(1) img,
  .voice_comment_list li:nth-child(2) img,
  .voice_comment_list li:nth-child(3) img {
    width: 100%;
  }
}

/*=======================================
　voice_section__heading--02（アンケート02の上部見出し）
=======================================*/
/* コピーが2行×18文字と長いため、共通見出しの余白と文字サイズだけを調整 */
.voice_section__heading--02 {
  gap: min(30px, 2.6%);
  padding-right: min(24px, 2%);
}
@media screen and (max-width: 768px) {
  .voice_section__heading--02 {
    gap: 0;
    padding-top: 40px;
    padding-right: 16px;
  }
}

/*=======================================
　voice02_view（夜景メイン画像）
=======================================*/
.voice02_view {
  padding-top: 35px;
}
.voice02_view--sp {
  display: none;
}
.voice02_view__photo {
  display: block;
  width: 100%;
  /* 2254pxの50％＝1127pxを上限に、親要素に合わせて縮小 */
  max-width: 1127px;
  height: auto;
}
.voice02_view__caption {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .voice02_view {
    padding-top: 20px;
  }
  .voice02_view--sp {
    display: block;
    padding-top: 0;
    background: var(--voice-pale);
  }
  .voice02_view--pc {
    display: none;
  }
  .voice02_view__caption {
    margin-top: 4px;
    padding-left: 4px;
    font-size: 10px;
  }
}

/*=======================================
　voice02_ldk（南側LDK・アンケートメモ）
=======================================*/
.voice02_ldk {
  display: grid;
  /* 左：手書き見出し＋LDK写真 ／ 右：アンケートメモ */
  grid-template-columns: minmax(0, 536fr) minmax(0, 471fr);
  column-gap: 11.6%;
  align-items: start;
  padding-top: 28px;
}
.voice02_ldk__photo {
  display: block;
  width: 100%;
  /* 1070pxの50％ */
  max-width: 535px;
  height: auto;
  margin-top: 18px;
}
.voice02_ldk__note {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.6;
}
.voice02_ldk__memo img {
  display: block;
  width: 100%;
  /* 788pxの50％ */
  max-width: 394px;
  height: auto;
}
.voice02_ldk__memo {
  position: relative;
  top: -35px;
}
@media screen and (max-width: 768px) {
  .voice02_ldk {
    display: block;
    padding-top: 0;
  }
  .voice02_ldk__ttl {
    margin: 30px auto;
  }
  .voice02_ldk__photo {
    max-width: 1070px;
    margin-top: 0;
  }
  .voice02_ldk__note {
    font-size: 11px;
  }
  .voice02_ldk__memo {
    margin-top: 46px;
  }
  .voice02_ldk__memo img {
    max-width: 788px;
    margin-inline: auto;
  }
}

/*=======================================
　voice02_features（住まい・建物の特長／Topicsの各項目）
=======================================*/
.voice02_features,
.voice02_topics__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 3.55%;
  align-items: start;
}
@media screen and (max-width: 768px) {
  .voice02_features,
  .voice02_topics__list {
    grid-template-columns: minmax(0, 1fr);
    width: 90%;
    margin-inline: auto;
  }
}

.voice02_features {
  row-gap: 69px;
  padding-top: 20px;
  /* 2段目右のアンケートメモ */
}
@media screen and (max-width: 768px) {
  .voice02_features {
    row-gap: 34px;
    padding-top: 34px;
  }
}
.voice02_features__item {
  min-width: 0;
}
.voice02_features__figure {
  margin-top: 17px;
}
@media screen and (max-width: 768px) {
  .voice02_features__figure {
    margin-top: 14px;
  }
}
.voice02_features__photo {
  display: block;
  width: 100%;
  /* 705pxの50％ */
  max-width: 352.5px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .voice02_features__photo {
    max-width: 705px;
  }
}
.voice02_features__caption {
  margin-top: 6px;
  font-size: clamp(10px, 1.02vw, 12px);
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .voice02_features__caption {
    margin-top: 8px;
    font-size: 11px;
  }
}
.voice02_features__item--memo {
  transform: translateX(10px);
}
@media screen and (max-width: 768px) {
  .voice02_features__item--memo {
    transform: none;
  }
}
.voice02_features__item--memo img {
  display: block;
  width: 100%;
  /* 694pxの50％ */
  max-width: 347px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .voice02_features__item--memo img {
    max-width: 694px;
    margin-inline: auto;
  }
}

/*=======================================
　voice02_topics（Topics）
=======================================*/
.voice02_topics {
  padding-top: 31px;
  padding-bottom: 70px;
  /* 青い帯（画像ではなくCSSで作成） */
}
.voice02_topics__band {
  padding: 12px 9px 7px;
  background: var(--voice-accent);
}
.voice02_topics__band img {
  display: block;
  width: 104px;
  height: auto;
}
.voice02_topics__ttl {
  margin-top: 31px;
  font-size: clamp(16px, 2.11vw, 27px);
  line-height: 1.4;
}
.voice02_topics__list {
  row-gap: 34px;
  padding-top: 72px;
}
@media screen and (max-width: 768px) {
  .voice02_topics {
    padding-top: 40px;
    padding-bottom: 20px;
  }
  .voice02_topics__band {
    width: 99%;
    margin-inline: auto;
    padding: 12px 12px 7px;
  }
  .voice02_topics__band img {
    width: 93.6px;
    margin-inline: auto;
  }
  .voice02_topics__ttl {
    margin-top: 18px;
    font-size: 17px;
    line-height: 1.7;
    text-align: center;
  }
  .voice02_topics__list {
    padding-top: 26px;
  }
}

/*=======================================
　voice02_handwrite（手書き文字画像の共通指定）
=======================================*/
/* 画像は2倍書き出し。PCは実寸の50％、SPは実寸を上限に親要素いっぱいへ */
.voice02_handwrite {
  display: block;
  width: 100%;
  max-width: calc(var(--voice02-imgw, 1000) * 0.5px);
  height: auto;
}
@media screen and (max-width: 768px) {
  .voice02_handwrite {
    max-width: calc(var(--voice02-imgw, 1000) * 1px);
  }
}
.voice02_handwrite--ldk {
  --voice02-imgw: 890;
}
.voice02_handwrite--t02 {
  --voice02-imgw: 539;
}
.voice02_handwrite--t03 {
  --voice02-imgw: 563;
}
.voice02_handwrite--t04 {
  --voice02-imgw: 746;
}
.voice02_handwrite--t05 {
  --voice02-imgw: 371;
}
.voice02_handwrite--t06 {
  --voice02-imgw: 502;
}
.voice02_handwrite--t07 {
  --voice02-imgw: 583;
}
.voice02_handwrite--t08 {
  --voice02-imgw: 604;
}
.voice02_handwrite--t09 {
  --voice02-imgw: 710;
}

/*=======================================
　voice_section__heading--03（アンケート03の上部見出し）
=======================================*/
/* ワッペン幅は共通（189.5px）のまま、余白と文字サイズだけをアンケート03のデザインに合わせる */
.voice_section__heading--03 {
  gap: min(48px, 4.2%);
  padding: 44px min(60px, 5.2%) 48px min(90px, 7.8%);
}
.voice_section__heading--03 .voice_section__copy {
  /* デザインどおり1行に収める */
  margin-top: 8px;
}
@media screen and (max-width: 768px) {
  .voice_section__heading--03 {
    gap: 0;
    padding: 20px 16px 26px;
  }
  .voice_section__heading--03 .voice_section__copy {
    margin-top: 8px;
    /* SPでも16文字が1行に収まるサイズ */
  }
}

.voice03_heading__lead {
  margin-top: 5px;
  font-size: clamp(12px, 1.48vw, 19px);
  line-height: 1.6;
}
@media screen and (max-width: 768px) {
  .voice03_heading__lead {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.7;
  }
}

/*=======================================
　voice03_title（入居後の変化／ランキング／お気に入りのポイントの見出し画像）
=======================================*/
/* 画像内に黒枠とオレンジの影が含まれるため、CSSで枠や影は付けない */
.voice03_title img {
  display: block;
  width: 100%;
  /* 1735pxの50％ */
  max-width: 867.5px;
  height: auto;
  margin-inline: auto;
}

/*=======================================
　voice03_change（入居後の変化）
=======================================*/
.voice03_change__gallery-sp {
  display: none;
}

.voice03_change {
  padding-top: 57px;
  /*---------------------------------------
  　三宮のメイン画像
  ---------------------------------------*/
  /* 手書き文字を重ねるための基準 */
  /* 写真に重ねる手書き文字（局所的な絶対配置） */
  /*---------------------------------------
  　LDK・バスの2カラム
  ---------------------------------------*/
  /*---------------------------------------
  　入居後の変化に関するご入居者様コメント
  ---------------------------------------*/
}
@media screen and (max-width: 768px) {
  .voice03_change {
    padding-top: 28px;
  }
}
.voice03_change__main {
  /* 1875pxの50％ */
  width: min(100%, 937.5px);
  margin: 58px auto 0;
}
@media screen and (max-width: 768px) {
  .voice03_change__main {
    margin-top: 26px;
  }
}
.voice03_change__frame {
  position: relative;
}
.voice03_change__photo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.voice03_change__note {
  position: absolute;
  display: block;
  max-width: 100%;
  height: auto;
}
.voice03_change__note--01 {
  top: 5.9%;
  left: 2.5%;
  /* 392pxの50％（＝196px）をメイン画像幅937.5pxに対する比率で指定 */
  width: 20.9%;
}
@media screen and (max-width: 768px) {
  .voice03_change__note--01 {
    width: 28%;
  }
}
.voice03_change__note--02 {
  bottom: 6.4%;
  left: 3.7%;
  /* 215pxの50％（＝107.5px）を画像幅459.5pxに対する比率で指定 */
  width: 23.4%;
}
@media screen and (max-width: 768px) {
  .voice03_change__note--02 {
    width: 30%;
  }
}
.voice03_change__note--03 {
  bottom: 5%;
  left: 5.9%;
  /* 339pxの50％（＝169.5px）を画像幅459.5pxに対する比率で指定 */
  width: 36.9%;
}
@media screen and (max-width: 768px) {
  .voice03_change__note--03 {
    width: 45%;
  }
}
.voice03_change__caption {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
}
.voice03_change__caption--image {
  font-size: 11px;
}
@media screen and (max-width: 768px) {
  .voice03_change__caption {
    font-size: 11px;
  }
  .voice03_change__caption--image {
    font-size: 10px;
  }
}
.voice03_change__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
  align-items: start;
  width: min(100%, 937.5px);
  margin: 8px auto 0;
}
@media screen and (max-width: 768px) {
  .voice03_change__pair {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
    margin-top: 18px;
  }
}
.voice03_change__cell {
  min-width: 0;
}
.voice03_change__voices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: min(66px, 6%);
  align-items: start;
  width: min(100%, 962px);
  margin: 25px auto 0;
}
@media screen and (max-width: 768px) {
  .voice03_change__voices {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 22px;
  }
}

/* コメント（細い黒の区切り線付き） */
.voice03_voice_list li {
  padding-block: 16px;
  border-bottom: 1px solid var(--voice-line);
}
.voice03_voice_list li:first-child {
  padding-top: 0;
}
.voice03_voice_list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
@media screen and (max-width: 768px) {
  .voice03_voice_list {
    /* SPは左2件→右3件の縦並びになるため、左列の最後にも区切り線を出す */
  }
  .voice03_voice_list li {
    padding-block: 14px;
  }
  .voice03_voice_list:first-child li:last-child {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--voice-line);
  }
  .voice03_voice_list:nth-child(2) li:first-child {
    padding-top: 14px;
  }
}

/*=======================================
　voice03_ranking_block（ランキング）
=======================================*/
.voice03_ranking_block {
  padding-top: 98px;
}
@media screen and (max-width: 768px) {
  .voice03_ranking_block {
    padding-top: 40px;
  }
}

.voice03_ranking {
  padding-top: 48px;
  /* 2つ目以降のブロックの上に、デザインどおりの黒い破線を引く */
  /* ランキング見出し（画像化せずHTMLテキストで実装） */
  /* 黄色マーカーは文字の下半分に入れる */
  /* 各順位の左端が揃うよう、1位の表示幅（83px）で固定枠を作りその中で中央配置 */
}
.voice03_ranking + .voice03_ranking {
  margin-top: 46px;
  padding-top: 40px;
  background-image: repeating-linear-gradient(to right, var(--voice-line) 0 11px, transparent 11px 19px);
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% 2px;
}
.voice03_ranking__heading {
  font-size: clamp(18px, 2.96vw, 38px);
  line-height: 1.4;
  text-align: center;
}
.voice03_ranking__marker {
  background: linear-gradient(transparent 58%, var(--voice-marker) 58%);
}
.voice03_ranking__body {
  display: grid;
  /* 左：写真とキャプション ／ 右：順位アイコンと項目名 */
  grid-template-columns: minmax(0, 374.5fr) minmax(0, 549.5fr);
  column-gap: 33px;
  align-items: start;
  width: min(100%, 1150px);
  margin: 36px auto 0;
}
.voice03_ranking__figure {
  min-width: 0;
  margin: 0 0 0 auto;
}
.voice03_ranking__figure img {
  display: block;
  width: 100%;
  /* 749pxの50％ */
  max-width: 374.5px;
  height: auto;
}
.voice03_ranking__figure figcaption {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.4;
}
.voice03_ranking__list {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  width: 100%;
  min-width: 0;
  margin-top: 10px;
}
.voice03_ranking__list--home {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
}
.voice03_ranking__list--home > .voice03_ranking__item {
  grid-column: 1/-1;
}
.voice03_ranking__list--home > .voice03_ranking__item--04, .voice03_ranking__list--home > .voice03_ranking__item--05 {
  grid-column: auto;
}
.voice03_ranking__list--home > .voice03_ranking__item--05 .voice03_ranking__name {
  left: -15px;
}
.voice03_ranking__item {
  display: flex;
  align-items: center;
  column-gap: 18px;
  min-width: 0;
}
.voice03_ranking__rank {
  flex: 0 0 auto;
  width: 83px;
}
.voice03_ranking__rank img {
  display: block;
  width: calc(var(--voice03-rankw, 166) * 0.5px);
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}
.voice03_ranking__item--01 {
  --voice03-rankw: 166;
}
.voice03_ranking__item--02 {
  --voice03-rankw: 133;
}
.voice03_ranking__item--03 {
  --voice03-rankw: 106;
}
.voice03_ranking__item--01 .voice03_ranking__name {
  font-size: clamp(16px, 2.55vw + 2px, 31px);
}
.voice03_ranking__item--04 .voice03_ranking__name, .voice03_ranking__item--05 .voice03_ranking__name {
  font-size: clamp(11px, 2.25vw - 3px, 21px);
}
.voice03_ranking--building .voice03_ranking__item--04 .voice03_ranking__name {
  letter-spacing: -0.08em;
}
.voice03_ranking__name {
  position: relative;
  top: 5px;
  min-width: 0;
  font-size: clamp(14px, 2.35vw, 28px);
  line-height: 1.4;
}
.voice03_ranking__item--01 .voice03_ranking__name, .voice03_ranking__item--02 .voice03_ranking__name, .voice03_ranking__item--03 .voice03_ranking__name {
  top: 6px;
}
@media screen and (max-width: 768px) {
  .voice03_ranking {
    padding-top: 26px;
  }
  .voice03_ranking + .voice03_ranking {
    margin-top: 26px;
    padding-top: 26px;
    background-image: none;
  }
  .voice03_ranking__heading {
    /* SPでも20文字の見出しが1行に収まるサイズ */
    font-size: clamp(13px, 4.1vw, 18px);
  }
  .voice03_ranking__body {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 18px;
  }
  .voice03_ranking__figure img {
    max-width: 749px;
  }
  .voice03_ranking__figure figcaption {
    font-size: 11px;
  }
  .voice03_ranking__list {
    row-gap: 16px;
    padding-top: 20px;
    margin-top: 0;
  }
  .voice03_ranking__list--home > .voice03_ranking__item--04, .voice03_ranking__list--home > .voice03_ranking__item--05 {
    grid-column: 1/-1;
  }
  .voice03_ranking__list--home > .voice03_ranking__item--05 .voice03_ranking__name {
    left: 0;
  }
  .voice03_ranking__item {
    column-gap: 12px;
  }
  .voice03_ranking__rank {
    width: 62px;
  }
  .voice03_ranking__rank img {
    width: calc(var(--voice03-rankw, 166) * 0.375px);
  }
  .voice03_ranking__name {
    font-size: 15px;
    line-height: 1.5;
  }
  .voice03_ranking__item--01 .voice03_ranking__name {
    font-size: 17px;
  }
  .voice03_ranking__item--04 .voice03_ranking__name, .voice03_ranking__item--05 .voice03_ranking__name {
    font-size: 12px;
  }
}

/*=======================================
　voice03_favorite（お気に入りのポイント）
=======================================*/
.voice03_favorite {
  padding-top: 48px;
  padding-bottom: 36px;
}
.voice03_favorite__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 10%;
  align-items: start;
  width: min(100%, 1150px);
  margin-inline: auto;
}
.voice03_favorite__panel img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .voice03_favorite {
    padding-top: 46px;
    padding-bottom: 0;
  }
  .voice03_favorite__body {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
    width: 100%;
  }
}

/*=======================================
　voice03_handwrite（手書き文字画像の共通指定）
=======================================*/
/* 画像は2倍書き出し。PCは実寸の50％、SPは実寸を上限に親要素いっぱいへ */
.voice03_handwrite {
  display: block;
  width: 100%;
  max-width: calc(var(--voice03-imgw, 1000) * 0.5px);
  height: auto;
}
@media screen and (max-width: 768px) {
  .voice03_handwrite {
    max-width: calc(var(--voice03-imgw, 1000) * 1px);
  }
}
.voice03_handwrite--t04 {
  --voice03-imgw: 794;
}
.voice03_handwrite--t05 {
  --voice03-imgw: 863;
}
.voice03_handwrite--t06 {
  --voice03-imgw: 833;
}
.voice03_handwrite--t07 {
  --voice03-imgw: 672;
}
.voice03_handwrite--t08 {
  --voice03-imgw: 523;
}
.voice03_handwrite--t09 {
  --voice03-imgw: 335;
}
.voice03_handwrite--t10 {
  --voice03-imgw: 323;
}
.voice03_handwrite--t11 {
  --voice03-imgw: 521;
}
.voice03_handwrite--t12 {
  --voice03-imgw: 388;
}
.voice03_handwrite--t13 {
  --voice03-imgw: 668;
}
.voice03_handwrite--t14 {
  --voice03-imgw: 782;
}

/* SP：本文13px→16px（約1.23倍）を基準に、キャプション以外の文字を拡大 */
@media screen and (max-width: 768px) {
  .voice03_change__gallery-sp {
    display: block;
    background: #fff;
  }
  .voice03_change__gallery-sp .voice03_change__main {
    width: 100%;
    margin: 0;
  }
  .voice03_change__gallery-sp .voice03_change__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 6px;
    row-gap: 0;
    width: 100%;
    margin: 0 0 10px;
  }
  .voice03_change__gallery-sp .voice03_change__caption {
    padding-left: 3px;
  }
  .voice03_change__main--pc,
  .voice03_change__pair--pc {
    display: none;
  }
  .voice_intro__ttl {
    font-size: 35px;
  }
  .voice_intro__text,
  .voice_section__label,
  .voice03_heading__lead {
    font-size: 16px;
  }
  .voice_section__copy {
    font-size: 26px;
  }
  .voice_facilities__data,
  .voice02_ldk__note {
    font-size: 12px;
  }
  .voice02_topics__ttl {
    font-size: 21px;
  }
  .voice03_ranking__heading {
    font-size: clamp(16px, 7vw, 28px);
  }
  .voice03_ranking__name {
    font-size: 18px;
  }
  .voice03_ranking__item--01 .voice03_ranking__name {
    font-size: 21px;
  }
  .voice03_ranking__item--04 .voice03_ranking__name,
  .voice03_ranking__item--05 .voice03_ranking__name {
    font-size: 15px;
  }
}

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