@charset "utf-8";

/* ======================================================
  共通
====================================================== */
/* サークル */
.circle {
  position: absolute;

  /* 円っぽいけど歪ませる */
  border-radius: 55% 45% 60% 40% / 55% 60% 40% 45%;
  opacity: 0.7;

  z-index: -1;
}
/* ======================================================
  背景
====================================================== */
/* １ */
.green-1::before {
  width: 50%;
  height: 100%;
}
/* ２ */
.green-2::before {
  top: 43%;
  right: 0;
  width: 75%;
  height: 61%;
}
.pink-2::before {
  top: 15%;
  left: 0;
  width: 37%;
  height: 61%;
}
/* ３ */
.green-3::before {
  top: 7%;
  left: 0;
  width: 65%;
  height: 100%;
}
/* ４ */
.green-4::before {
  top: 10%;
  right: 0;
  width: 65%;
  height: 90%;
}

.pink-4::before {
  top: 40%;
  left: 0;
  width: 45%;
  height: 75%;
}
/* ５ */
.pink-5::after {
  top: 10%;
  right: 0;
  width: 40%;
  height: 70%;
}
/* ６ */
.green-6::before {
  top: 24%;
  left: 0;
  width: 100%;
  height: 84%;
}
/* ======================================================
パターン
====================================================== */
/* 1 */
.ptn-1-1 {
  top: -90px !important;
  transform: rotate(-11deg);
}

/* ２ */
.ptn-2-1 {
  top: -140px;
  right: 0 !important;
  left: auto;
}
/* ３ */
.ptn-3-1 {
  top: 65px;
  left: 26px;
  height: clamp(13.75rem, 10.536rem + 5.02vw, 16.563rem); /* 265-220 */
}
@media (max-width: 600px) {
  .ptn-3-1 {
    left: 0;
  }
}
/****** レスポンシブ ******/
@media (max-width: 1024px) {
  .ptn-1-1 {
    height: clamp(6.5rem, 5.055rem + 6.16vw, 9rem);
    /* 144-104 */
  }
}

/* ======================================================
  ファーストビュー
====================================================== */
.fv {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/*:::::::::::【テキスト】:::::::::::*/
.fv__content {
  position: relative;
  z-index: 2;
  height: 100%;
  width: min(570px, 92%);
  margin-left: clamp(16px, 6vw, 64px);
  margin-right: auto;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  gap: 14px;
  padding: 0;
  text-align: left;

  color: #fff; /* 文字は白で固定が安定 */
}

/* タイトル：ちょい締める＋影で可読性 */
.fv__title {
  font-family: "Klee One", cursive;
  font-weight: bold;
  font-size: var(--font-xxl);
  line-height: 1.25;
  letter-spacing: 0.02em;
  margin: 0;
  text-shadow:
    0 5px 2px rgba(0, 0, 0, 0.35),
    /* ←芯 */ 0 4px 20px rgba(0, 0, 0, 0.35); /* ふんわり */
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.18); /* うっすら縁取り */
}

.fv__lead {
  font-family: "Petit Formal Script", cursive;
  font-size: var(--font-m);
  line-height: 1.8;
  margin: 0;
  opacity: 0.95;
  text-shadow:
    -1px 0 0 var(--gray-6),
    1px 0 0 var(--gray-6),
    0 -1px 0 var(--gray-6),
    0 1px 0 var(--gray-6),
    0 3px 8px rgba(0, 0, 0, 0.3);
}

.fv__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-top: 12px;
  padding: 39px 26px;

  background: linear-gradient(
    180deg,
    #f9c0cb 0%,
    var(--accent-color) 65%,
    #e98b9a 100%
  );

  color: #fff;
  border: none;
  border-radius: 50%;
  text-decoration: none;
  font-size: var(--font-m);
  font-weight: 500;
  text-align: center;

  /* ぷっくり立体 */
  box-shadow:
    0 0 0 #d87b89,
    /* 下の厚み（重要） */ 0 0 28px rgba(0, 0, 0, 0.22),
    inset 0 0 2px rgba(255, 255, 255, 0.75),
    inset 0 -13px 10px rgba(0, 0, 0, 0.15);

  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    filter 0.12s ease;

  overflow: hidden;
}

/* 上のツヤ（ぷっくり感の正体） */
.fv__btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 6px;
  width: 90%;
  height: 45%;
  background: radial-gradient(
    ellipse at top,
    rgba(255, 255, 255, 0.85),
    rgba(255, 255, 255, 0) 70%
  );
  pointer-events: none;
}

/* hover：ふわっと持ち上がる */
.fv__btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}

/* active：むにっと押される */
.fv__btn:active {
  transform: translateY(6px);
  box-shadow:
    0 4px 0 #d87b89,
    0 10px 18px rgba(0, 0, 0, 0.18),
    inset 0 2px 4px rgba(255, 255, 255, 0.5),
    inset 0 -4px 8px rgba(0, 0, 0, 0.25);
}

/* フォーカス */
.fv__btn:focus-visible {
  outline: 3px solid rgba(111, 183, 167, 0.55);
  outline-offset: 4px;
}
@media (max-width: 1024px) {
  .fv__content {
    justify-content: flex-end;
    padding-bottom: 30px;
  }
}
@media (max-width: 768px) {
  .fv__content {
    margin-left: 16px;
    margin-right: 16px;
    width: auto;
  }
}

@media (max-width: 767px) {
  /*   .fv__content {
    display: flex;
    flex-direction: column;
  }

 .fv__btn {
    order: 1;
  }

  .fv__title {
    order: 2;
  }

  .fv__lead {
    order: 3;
  } */
  .fv__content {
    padding-bottom: 12px;
  }
  .fv__title {
    font-size: var(--font-xl);
  }

  .fv__lead {
    font-size: var(--font-s);
  }
  .fv__btn {
    font-size: var(--font-s);
    padding: 29px 16px;
    margin-top: 0;
  }
}

/* ======================================================
   初めに　section--first
====================================================== */

.section--first {
  position: relative;
  padding-top: 90px;
  padding-bottom: 90px;
}

.section--first .inner {
  position: relative;
  z-index: 2;
}

/* 2カラム */
.first-layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
  margin-top: 26px;
}
@media (max-width: 1024px) {
  .first-green::before {
    width: 80%;
    opacity: 0.7;
  }

  .first-pink::before {
    bottom: -65px;
    right: 0;
    width: 66%;
    height: 60%;
    background-color: var(--accent-2);
    opacity: 0.8;
    z-index: -1;
  }
}
/*:::::::::::【左：画像】:::::::::::*/
.f-img-box {
  position: relative;
  display: inline-block;
}

.f-img-box img {
  position: relative;
  z-index: 2;

  display: block;
  width: 100%;
  height: auto;
}

/*:::::::::::【右：テキスト】:::::::::::*/
.first-contents {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 見出し */
.first-contents .card-title {
  letter-spacing: 0.08em;
  font-size: var(--font-m);
  margin-bottom: 10px;
}

/* 本文 */
.first-contents .card-text {
  text-align: justify;
  line-height: 2.05;
}

@media (max-width: 900px) {
  .first-layout {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 413px) and (max-width: 480px) {
  .first-contents .card-title {
    white-space: nowrap;
  }
}

/* ======================================================
   ニュース　section--news
====================================================== */
.section--news {
  padding-top: 157px;
}
/* .section--news::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../image/common/ptn-2.png);
  background-size: contain;
  background-repeat: repeat-x;
  background-position: bottom;
  opacity: 0.4;
  pointer-events: none;
} */
.news-inner {
  position: relative;
  z-index: 2;
}
.news-content {
  position: relative;
  background-color: #fff;
  border: 1px solid var(--gray-2);
  border-radius: var(--radius);
  z-index: 5;
}
.news-title-box {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  padding: 0 20px;
  margin: 0 auto;
}
/* ボーダー装飾 */
.border-img {
  position: absolute;
  width: 130px;
}
.tl {
  top: -33px;
  left: -22px;
  transform: rotate(77deg);
}
.tr {
  top: -24px;
  right: -28px;
  transform: scale(-1);
}
.bl {
  bottom: -16px;
  left: -32px;
}
.br {
  bottom: -16px;
  right: -32px;
  transform: scaleX(-1);
}
@media (max-width: 1024px) {
}
@media (max-width: 767px) {
  .border-img {
    position: absolute;
    width: 93px;
  }
  .tl {
    top: -23px;
    left: -18px;
  }
  .tr {
    top: -17px;
    right: -21px;
  }
  .bl {
    bottom: -13px;
    left: -22px;
  }
  .br {
    bottom: -18px;
    right: -20px;
  }
}

/* セクション余白 */
#news.section--news {
  padding-top: 157px;
}

/* 白い枠（コンテンツ） */
#news .news-content {
  position: relative;
  background-color: #fff;
  border: 1px solid var(--gray-2);
  border-radius: var(--radius);
  z-index: 5;
}

/* タイトルを枠の上に被せる */
#news .news-title-box {
  position: absolute;
  top: -85px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  padding: 0 20px;
  margin: 0 auto;
  z-index: 10;
}

/* 四隅のボーダー装飾 */
#news .border-img {
  position: absolute;
  width: 130px;
  z-index: 1;
}
#news .border-img.tl {
  top: -33px;
  left: -22px;
  transform: rotate(77deg);
}
#news .border-img.tr {
  top: -24px;
  right: -28px;
  transform: scale(-1);
}
#news .border-img.bl {
  bottom: -16px;
  left: -32px;
}
#news .border-img.br {
  bottom: -16px;
  right: -32px;
  transform: scaleX(-1);
}

/* 中身の余白（ニュース一覧の領域） */
#news .news-content-body {
  width: 85%;
  margin: 0 auto;
  padding: 100px;
}

/* リスト枠 */
#news .news-list {
  margin: 0 auto;
  scrollbar-width: thin;
  scrollbar-color: var(--main-color) rgba(0, 0, 0, 0.1);
}

/* ul */
#news #newsList {
  list-style: none;
  margin: 0;
  padding: 0;

  max-height: 250px;
  overflow-y: auto;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--main-color) rgba(0, 0, 0, 0.1);
}

/* 1件分（PC基本：New! → タイトル → 日付） */
#news #newsList li.item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

/* CMSが作るタイトルリンクは通常表示のまま（崩れ防止） */
#news #newsList li.item .title a {
  position: static; /* ←これ重要！ */
  text-decoration: none;
  color: inherit;
}

/* クリック判定だけを li 全体に伸ばす（見た目は変えない） */
#news #newsList li.item .title a::after {
  content: "";
  position: absolute;
  inset: 0; /* li全体を覆う */
}

/* 日付やNew!の上でもクリックがリンクに届くようにする */
#news #newsList li.item .up_ymd,
#news #newsList li.item .newMark {
  pointer-events: none;
}

/* 最後だけ下線 */
#news #newsList li.item:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

/* New!（左） */
#news #newsList li.item .newMark {
  order: 1;
  flex: 0 0 auto;
  font-size: var(--font-xs);
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--accent-color);
  color: #fff;
}

/* タイトル（中央） */
#news #newsList li.item .title {
  order: 2;
  flex: 1 1 auto;
  min-width: 0; /* 省略に必要 */
  font-size: var(--font-s);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 日付（右端） */
#news #newsList li.item .up_ymd {
  order: 3;
  margin-left: auto; /* 右寄せ */
  flex: 0 0 auto;
  font-size: var(--font-xs);
  color: rgba(0, 0, 0, 0.75);
  white-space: nowrap;
}

/* hover */
#news #newsList li.item:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* =========================
   レスポンシブ
========================= */

/* 中くらい（余白調整） */
@media (max-width: 900px) {
  #news .news-content-body {
    width: 100%;
    margin: 0 auto;
    padding: 100px 35px;
  }
}

/* ボーダー装飾（SP） */
@media (max-width: 767px) {
  #news .border-img {
    width: 93px;
  }
  #news .border-img.tl {
    top: -23px;
    left: -18px;
  }
  #news .border-img.tr {
    top: -17px;
    right: -21px;
  }
  #news .border-img.bl {
    bottom: -13px;
    left: -22px;
  }
  #news .border-img.br {
    bottom: -18px;
    right: -20px;
  }
}

/* スマホ（表示を2段にする） */
@media (max-width: 600px) {
  #news #newsList li.item {
    flex-wrap: wrap;
    align-items: center;
    padding: 14px 0;
    gap: 8px 12px; /* 行/列の間隔 */
  }

  /* 1行目：New! → 日付 */
  #news #newsList li.item .newMark {
    order: 1;
  }
  #news #newsList li.item .up_ymd {
    order: 2;
    margin-left: 0; /* 右寄せ解除してNew!の隣へ */
    font-size: 13px;
  }

  /* 2行目：タイトル（全幅） */
  #news #newsList li.item .title {
    order: 3;
    flex: 0 0 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}
/* ======================================================
   強み　section--identity
====================================================== */

/*:::::::::::【ボタン】:::::::::::*/
.identity-btn {
  margin-bottom: 80px;
}

/*:::::::::::【グリッド】:::::::::::*/
.identity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.identity {
  background: #fff;
  border: var(--border-soft);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-soft);
}

/* アイコン */
.identity img {
  width: 100px;
  margin: 0 auto;
}

/* 真ん中の1枚だけフル幅 */
.identity-en {
  margin: 0 0 10px;
  font-size: var(--font-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-align: center;
}
.identity-title {
  margin: 0 0 10px;
  font-size: 22px;
  color: var(--main-color);
  font-family: "Klee One", cursive;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
}
.identity-text {
  margin: 0;
  line-height: 1.95;
  font-size: var(--font-s);
}
@media (max-width: 1024px) {
  .identity-grid {
    grid-template-columns: 1fr;
  }
  .identity {
    padding: 5% 10%;
  }
  .identity-title {
    margin: 0 0 40px;
  }
}
/* ======================================================
  メニュー　section--menu
====================================================== */

/*:::::::::::【メニューリスト】:::::::::::*/
.menu-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;

  /* background-color: var(--main-1); */
  background-color: #fff;
  border: 1px solid var(--gray-1);
  border-radius: var(--radius);
  padding: 50px 25px;
  box-shadow: var(--shadow-soft);
}

.menu-list {
  margin: 0 auto;
}
.menu-list h3 {
  color: var(--main-9);
  font-size: var(--font-m);
  text-align: center;
  margin-bottom: 30px;
}

.list-box {
  width: 280px;
  margin: 0 auto;
}
.menu-list dl {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--gray-1);
  padding: 0 8px;
}
.menu-list dl:last-child {
  margin-bottom: 0;
}
@media (max-width: 1024px) {
  .menu-box {
    grid-template-columns: 1fr;
    gap: 65px;
  }
}

@media (max-width: 375px) {
  .menu-none {
    display: none;
  }
}
/* ======================================================
   ギャラリー　section--gallery
====================================================== */

/*:::::::::::【グリッド】:::::::::::*/
.gallery {
  padding: 70px 0;
}

.gallery__wrap {
  width: min(1200px, 92%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 130px;
  align-items: center;
}

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

  .gallery__side {
    order: -1; /* ← 上へ */
  }
}

/*:::::::::::【スライドショー】:::::::::::*/
.gallery__rails {
  display: grid;
  gap: 18px; /* 2段の間隔 */
}

.gallery__rail {
  overflow: hidden;
}

.gallery__track {
  display: flex;
  gap: 18px;
  width: max-content;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.gallery__item {
  display: block;
  width: 140px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  flex: 0 0 auto;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .gallery__track {
    transform: none !important;
  }
}

/*:::::::::::【テキスト】:::::::::::*/
.gallery__side {
  text-align: center;
}

.gallery__title {
  letter-spacing: 0.35em;
  font-size: clamp(26px, 3vw, 44px) !important;
  margin: 0 0 18px;
}

.gallery__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

@media (max-width: 900px) {
  .gallery__side {
    text-align: center;
  }
}

/* ======================================================
   よくある質問　section--qa
====================================================== */
.qa-back-img {
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: url(../image/index/qa-back-img.png);
  background-size: contain;
  opacity: 0.4;
}

/* コンテンツ */
.qa {
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  background-color: #fff;
}

/* 1項目 */
.qa__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  padding: 0 10px;
}

/* summaryの初期三角を消す */
.qa__item > summary {
  list-style: none;
}
.qa__item > summary::-webkit-details-marker {
  display: none;
}

/* 質問行 */
.qa__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 6px;
  cursor: pointer;
}

.qa__text {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* 右の∨ */
.qa__icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.qa__icon::before,
.qa__icon::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 9px;
  height: 2px;
  background: rgba(0, 0, 0, 0.6);
  transition: transform 0.25s ease;
}

.qa__icon::before {
  left: 1px;
  transform: rotate(45deg);
}
.qa__icon::after {
  right: 1px;
  transform: rotate(-45deg);
}

/* open時に∧ */
.qa__item[open] .qa__icon::before {
  transform: rotate(-45deg);
}
.qa__item[open] .qa__icon::after {
  transform: rotate(45deg);
}

/* 回答（アニメーション） */
.qa__answer {
  height: 0;
  overflow: hidden;
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 中身のふわっと感 */
.qa__answer-inner {
  padding: 0 6px 22px;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.2s ease,
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.qa__answer > * {
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.25s ease,
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.qa__item.is-open .qa__answer-inner {
  opacity: 1;
  transform: translateY(0);
}
/* open時 */
.qa__item[open] .qa__answer {
  grid-template-rows: 1fr;
}
.qa__item[open] .qa__answer > * {
  opacity: 1;
  transform: translateY(0);
}

.qa__answer p {
  margin: 0;
  padding: 0 6px 22px;
  line-height: 1.9;
  color: rgba(0, 0, 0, 0.75);
}
/* ======================================================
   お客様の声　section--voice
====================================================== */

/* お客様の声 全体 */
/* ===== 常に：中央フル＋左右半分 ===== */
.voice-cover {
  position: relative;
  width: min(980px, 100%);
  margin: 60px auto 0;

  --gap: 24px;
  --center-w: 70%;
  --side-scale: 0.88;
}

.voice-cover__viewport {
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.voice-cover__track {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap);

  /* ★ここが肝：中央カード幅から“左右の余白”を計算 */
  width: 100%;
  box-sizing: border-box;
  /* padding-inline: calc((100% - var(--center-w)) / 2); */

  /* JSでtransformして動かす */
  transition: transform 0.35s ease;
  will-change: transform;
}

/* ループ補正中は全部アニメしない */
.voice-cover.is-jumping .voice-cover__track,
.voice-cover.is-jumping .vice-item {
  transition: none !important;
}

/* すべてのカード基本 */
.voice-cover .vice-item {
  flex: 0 0 var(--center-w);
  width: var(--center-w);

  background: #fff;
  border-radius: var(--radius);
  padding: 30px 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

  transform: scale(var(--side-scale));
  opacity: 0.55;
  filter: saturate(0.9);
  transition:
    transform 0.35s ease,
    opacity 0.35s ease,
    filter 0.35s ease;
}

/* 中央（active）は大きく、くっきり */
.voice-cover .vice-item.is-active {
  transform: scale(1);
  opacity: 1;
  filter: none;
}

/* 左右（隣）は少しだけ見せる */
.voice-cover .vice-item.is-side {
  opacity: 0.75;
}

@media screen and (max-width: 768px) {
  .voice-cover {
    --center-w: 94%;
    --side-scale: 0.92;
    width: 88%;
    margin: 0 auto;
  }
  .voice-cover .vice-item {
    padding: 24px 20px;
  }
}

/*:::::::::::【矢印】:::::::::::*/
.voice-cover__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--main-color);
  background: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 10;
}
.voice-cover__arrow--prev {
  left: -60px;
}
.voice-cover__arrow--next {
  right: -60px;
}
@media (max-width: 767px) {
  .voice-cover__arrow--prev {
    left: -33px;
  }
  .voice-cover__arrow--next {
    right: -33px;
  }
}
@media (max-width: 450px) {
  .voice-cover__arrow {
    width: 36px;
    height: 36px;
  }
}
/*:::::::::::【ドット】:::::::::::*/
.voice-cover__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.voice-cover__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer;
}
.voice-cover__dot.is-active {
  background: var(--main-1);
}
/*:::::::::::【画像】:::::::::::*/
.vice-img-box {
  position: relative;
  text-align: center;
  margin-bottom: 20px;
}

.vice-img-box img {
  width: 120px;
  height: auto;
  margin: 0 auto;
}

.voice-circle {
  width: 116px;
  height: 96px;

  background: var(--main-1);
  opacity: 0.7;

  /* 位置調整 */
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  .vice-img-box img {
    width: 110px;
  }
}
/*:::::::::::【テキスト】:::::::::::*/
.vice-meta {
  text-align: center;
  margin-bottom: 16px;
}

.vice-age {
  display: block;
  font-size: var(--font-xs);
  color: var(--text-soft);
}

.vice-plan {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 12px;
  font-size: var(--font-xs);
  color: var(--main-color);
  border: 1px solid var(--main-color);
  border-radius: 20px;
}

/* コメント */
.vice-text {
  line-height: 1.8;
  color: var(--font-s);
}

@media screen and (max-width: 768px) {
  .vice-text {
    font-size: 14px;
  }
}